/* JDCC Holding — standalone stylesheet.
   Recreates the design tokens and component styles the landing template
   expects (originally provided by the "broadsheet" design system's
   styles.css). Newsprint voice: warm paper ground, near-black ink, a single
   process-cyan accent with a magenta second, Source Serif 4 throughout. */

:root {
  /* — palette (ink on paper) — */
  --color-paper: #f6f3ec;
  --color-text: #1b1712;
  --color-accent: #0a8fc2;      /* process cyan — spot color */
  --color-accent-700: #0a6f97;  /* darker cyan for link text (higher contrast) */
  --color-accent-2: #c23a63;    /* process magenta — second plate */

  /* — type — */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;

  /* — spacing token used by the template — */
  --space-3: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* — masthead / nav — a newspaper masthead: brand left, section links right,
   parted from the page by a single full-width rule (the "masthead rule"). — */
.nav {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.nav a {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-decoration: none;
}
.nav a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* — tags (section labels — no boxes; small uppercase colored slugs) — */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-accent   { color: var(--color-accent); }
.tag-accent-2 { color: var(--color-accent-2); }
.tag-neutral  { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — halftone photo frame — a light newsprint screen over the image; kept
   subtle so the photograph stays legible. — */
.halftone { position: relative; overflow: hidden; }
.split-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 779 / 519;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.98);
}
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.14;
  background-image: radial-gradient(color-mix(in srgb, var(--color-text) 90%, transparent) 30%, transparent 31%);
  background-size: 3px 3px;
}