/* Hallmark · shared site chrome · nav: N1b canonical three-section
 *   (knobs: centre-links=6, dropdowns=none, scroll=frost-on-scroll)
 * footer: Ft1 mast-headed (knobs: wordmark=2xl, tagline=roman body, links=inline)
 * theme: custom dual-accent — see tokens.css stamp · genre: atmospheric
 * scope: every page EXCEPT index.html (which keeps the film chip nav + Ft5 statement)
 * pre-emit critique: P5 H5 E5 S4 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection { background: var(--color-accent); color: oklch(18% 0.03 250); }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 var(--space-xl); }
@media (max-width: 620px) { .wrap { padding: 0 var(--space-md); } }

.wrap--narrow { max-width: 52rem; }

section.block { padding: var(--space-3xl) 0; border-top: var(--rule-hairline); }
section.block:first-of-type { border-top: none; }

/* per-wing accent flip — sections opt in */
.wing-gold  { --color-accent: var(--color-gold);  --color-accent-deep: var(--color-gold-deep); }
.wing-water { --color-accent: var(--color-water); --color-accent-deep: var(--color-water-deep); }
.wing-ice   { --color-accent: var(--color-ice);   --color-accent-deep: var(--color-water-deep); }

/* ------------------------------------------------------------ typography */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 {
  font-weight: 700;
  font-size: var(--text-display-s);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
  max-width: 20ch;
}

h2 {
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-lg);
  max-width: 22ch;
}

h3 { font-weight: 600; margin: 0 0 var(--space-xs); }

.lede {
  color: var(--color-ink-soft);
  max-width: 58ch;
  margin: 0 0 var(--space-xl);
  font-size: var(--text-lg);
}

.prose { max-width: 62ch; color: var(--color-ink-soft); }
.prose p { margin: 0 0 var(--space-lg); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  line-height: 1.7;
  max-width: 66ch;   /* caption/qualifier copy — keep it to a readable measure, not the full 74rem wrap */
}

/* -------------------------------------------------------------- controls */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  background: linear-gradient(100deg, var(--color-gold), var(--color-gold-deep));
  color: oklch(18% 0.03 250);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-xl);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { filter: grayscale(0.7) brightness(0.7); cursor: not-allowed; transform: none; }

.btn--quiet {
  background: none;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.btn--quiet:hover { border-color: var(--color-accent); filter: none; }

/* C3 typographic link */
.textlink {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-deep);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.textlink:hover { color: var(--color-ink); border-color: var(--color-ink); }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--space-md); top: var(--space-md);
  transform: translateY(-200%);
  z-index: 90;
  background: var(--color-paper-3); color: var(--color-ink);
  border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip:focus-visible { transform: none; outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ------------------------------------------------ N1b · site navigation */

.snav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              backdrop-filter var(--dur-med) var(--ease-out);
}
.snav.is-frosted {
  background: var(--color-scrim);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--color-line);
}

.snav__bar {
  max-width: 84rem; margin: 0 auto;
  padding: var(--space-sm) var(--space-xl);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
}
@media (max-width: 620px) { .snav__bar { padding: var(--space-sm) var(--space-md); } }

.snav__brand {
  display: flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -0.01em; white-space: nowrap;
  color: var(--color-ink); text-decoration: none;
}
.snav__brand img { width: 27px; height: 27px; }
.snav__brand .g { color: var(--color-gold); }
.snav__brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.snav__links {
  display: flex; justify-content: center; gap: var(--space-2xs);
  list-style: none; margin: 0; padding: 0;
}
.snav__links a {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-soft); text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.snav__links a:hover { color: var(--color-ink); background: oklch(100% 0 0 / 0.05); }
.snav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Color alone isn't a reliable "current page" signal — --color-ice (the ownership-page
   accent) is only ~2x the inactive link's chroma and nearly the same hue, so it barely
   read as a highlight (confirmed against real oklch values: ice vs inactive-gray computes
   almost identically, unlike gold/water which are strongly saturated by comparison). A
   background chip + weight bump make the current page legible regardless of which accent
   is active, and don't rely on hue perception at all — better for color-vision-deficient
   users too. */
.snav__links a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
  background: color-mix(in oklch, var(--color-accent) 16%, transparent);
}

.snav__end { display: flex; align-items: center; gap: var(--space-sm); justify-content: flex-end; }
.snav__cta { font-size: var(--text-sm); padding: var(--space-xs) var(--space-lg); }

.snav__toggle {
  display: none;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; gap: 5px;
  flex-direction: column;
  background: none; border: 1px solid var(--color-line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.snav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--color-ink); }
.snav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* mobile: links collapse behind a real disclosure */
@media (max-width: 1000px) {
  .snav__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .snav__toggle { display: flex; }
  .snav__links {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
    padding-top: var(--space-md);
  }
  .snav.is-open .snav__links { display: flex; }
  .snav.is-open { background: var(--color-scrim); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--color-line); }
  .snav__links a { padding: var(--space-sm); min-height: 44px; display: flex; align-items: center; font-size: var(--text-sm); }
  .snav__end .snav__cta { display: none; }
  .snav.is-open .snav__links::after {
    content: "";
    display: block;
    height: var(--space-xs);
  }
  .snav__mobile-cta { display: flex; }
}
@media (min-width: 1001px) { .snav__mobile-cta { display: none; } }

/* ------------------------------------------------ Ft1 · mast-headed foot */

.sfoot { border-top: var(--rule-hairline); padding: var(--space-3xl) 0 var(--space-2xl); margin-top: var(--space-2xl); }

.sfoot__mast {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-xl);
}
.sfoot__wordmark {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.015em;
  margin: 0; color: var(--color-ink);
}
.sfoot__wordmark .g { color: var(--color-gold); }
.sfoot__wordmark .w { color: var(--color-water); }
.sfoot__tagline {
  margin: 0; color: var(--color-ink-soft);
  font-size: var(--text-md); max-width: 34ch;
}

.sfoot__links {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  list-style: none; margin: 0 0 var(--space-xl); padding: 0;
  border-top: var(--rule-hairline); padding-top: var(--space-lg);
}
.sfoot__links a {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-soft); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.sfoot__links a:hover { color: var(--color-ink); }
.sfoot__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.sfoot__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-ink-faint); margin: 0;
  max-width: 60rem;   /* stop the disclaimer line from spanning the full footer width */
}

/* ------------------------------------------------------------ page intro */

/* Top padding is deliberately smaller than the old space-4xl (10rem) — stacked on the
   sticky nav's own ~88px, that left ~250px of dead air before any content on every
   page without a full-bleed hero (i.e. every page except program.html). One value
   now covers both breakpoints, so the old ≤760px override is gone. */
.phead { padding: var(--space-3xl) 0 var(--space-2xl); }

.crumb {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-faint); margin: 0 0 var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.crumb a { color: var(--color-ink-soft); text-decoration: none; white-space: nowrap; }
.crumb a:hover { color: var(--color-ink); }
.crumb a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ------------------------------------------------------- shared patterns */

/* F3 tabular spec sheet */
.spec { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.spec caption {
  text-align: left; color: var(--color-ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: var(--space-md);
}
.spec th, .spec td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hairline); vertical-align: baseline; }
.spec thead th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-faint); font-weight: 400;
}
.spec tbody th { font-family: var(--font-body); font-weight: 500; color: var(--color-ink); }
.spec td { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: none; }
/* Row-hover aids scanning across the wide certification / projection tables. Uses a box-shadow
   inset rather than background so the hairline row borders stay crisp; row text brightens. */
.spec tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.spec tbody tr:hover { background: var(--color-paper-2); }
.spec tbody tr:hover th { color: var(--color-ink); }
.spec tbody tr:hover td { color: var(--color-ink); }
.spec__scroll { overflow-x: auto; }

/* closing CTA strip — one button, per Hallmark voice rule */
.endcta { padding: var(--space-3xl) 0; border-top: var(--rule-hairline); }
.endcta__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-lg);
}
.endcta p {
  font-family: var(--font-display); font-weight: 600; font-style: normal;
  font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.01em;
  margin: 0; max-width: 30ch;
  overflow-wrap: anywhere; min-width: 0;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .snav, .snav__links a, .btn, .textlink, .spec, .skip { transition: none; }
}