/* ==========================================================================
   SIGNPOST — the STF WordPress-page migration family.
   Interpretive nature-reserve signage: deep forest-green PLATES carrying cream
   signage type, alternating with cream PANELS of reading prose, chunky numbered
   wayfinders, heavy slab headings sized to be read standing up.

   Brief: briefs/stf-wp-pages-migration-brief.md §6. Every colour below is the
   brief's measured table — do not "adjust" one without re-measuring contrast.
   Fonts are REUSED from /journal/fonts/ (the 2026-08-05 STF type decision:
   Rokkitt for display, Nunito Sans for body). No new font family.
   ========================================================================== */

@font-face {
  font-family: 'Rokkitt';
  src: url('/journal/fonts/rokkitt-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/journal/fonts/nunito-sans-var.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/journal/fonts/nunito-sans-italic-var.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* §6B — measured, not chosen. Ratios in the brief's table. */
  --plate: #10281a;            /* sign-plate ground */
  --plate-ink: #f4efe2;        /* 13.65:1 AAA on plate */
  --plate-ink-muted: #c3d4b8;  /* 10.02:1 AAA on plate */
  --panel: #f4efe2;            /* reading ground */
  --panel-ink: #1c2b20;        /* 12.92:1 AAA on panel */
  --panel-ink-read: #2c3a2f;   /* 10.43:1 AAA on panel */
  --panel-ink-muted: #4a5a4d;  /*  6.39:1 AA on panel */
  --link: #2f4a1d;             /*  8.64:1 AAA on panel */
  --link-warm: #ab5200;        /*  4.64:1 AA — the STF orange link role, darkened */
  --accent-green: #72af43;     /* FILLS ONLY — 2.31:1 as text, never text */
  --accent-orange: #f5821f;    /* FILLS ONLY — 2.26:1 as text, never text */
  --fill-label: #10281a;       /* label on either accent fill: 5.91 / 6.04 AA */

  --display: 'Rokkitt', 'Rockwell', 'Courier Bold', serif;
  --body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --measure: 46rem;            /* reading column */
  --wide: 72rem;               /* galleries, media rows */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  /* §6A: body 20px minimum — signage reads at arm's length. */
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--panel-ink-read);
  background: var(--panel);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- masthead */
.masthead {
  background: var(--plate);
  color: var(--plate-ink);
  border-bottom: 6px solid var(--accent-green);
}
.masthead-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.masthead .wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--plate-ink);
  text-decoration: none;
}
.masthead .wordmark:hover { color: #fff; }
.masthead .family-note {
  font-size: 0.95rem;
  color: var(--plate-ink-muted);
}
.masthead .family-note a { color: var(--plate-ink-muted); }
.masthead .family-note a:hover { color: var(--plate-ink); }

/* ------------------------------------------------------------------ bands */
/* Every migrated top-level row becomes a BAND: cream panel by default, deep
   green plate where the build config says so. The band is full-bleed; the
   content column inside holds the measure. */
.band { padding: 3.5rem 1.5rem; }
.band-inner { max-width: var(--measure); margin: 0 auto; }
/* rem, not em — an em-based owl inherits the h1's 72px and blows the gap open */
.band-inner > * + * { margin-top: 1.4rem; }
.band--wide .band-inner { max-width: var(--wide); }

.band--panel { background: var(--panel); color: var(--panel-ink-read); }
.band--panel:nth-of-type(even) { background: #ede7d6; } /* faint alternation; both AAA-checked grounds for the same ink */

.band--plate { background: var(--plate); color: var(--plate-ink); }
.band--plate h1, .band--plate h2, .band--plate h3 { color: var(--plate-ink); }
.band--plate .caption, .band--plate figcaption { color: var(--plate-ink-muted); }
.band--plate a { color: var(--plate-ink); text-decoration-color: var(--accent-green); }
.band--plate a:hover { color: #fff; }

/* Wayfinder: a chunky trail-marker numeral at the top of each numbered band. */
.wayfinder {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.8rem;
  margin-bottom: 1.6rem;
  background: var(--accent-green);
  color: var(--fill-label);
  border-radius: 3px;
}
.band--plate .wayfinder { background: var(--accent-orange); }

/* ------------------------------------------------------------------- type */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--panel-ink);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-top: 1.4em; }
h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-top: 1.2em; }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p, li { max-width: var(--measure); }
strong { color: inherit; }
mark {
  /* Kadence's kt-highlight replaced by the STF orange highlight token —
     a FILL role, so the accent is legal here (label ink 6.04:1). */
  background: var(--accent-orange);
  color: var(--fill-label);
  padding: 0 0.25em;
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--link-warm); }

ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.45em; }

hr.rule { border: 0; border-top: 3px solid var(--accent-green); max-width: 8rem; margin: 2.5rem 0; }

/* --------------------------------------------------------------- buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; }
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background: var(--accent-green);
  color: var(--fill-label);
  border: 2px solid var(--fill-label);
}
.btn:hover { background: var(--accent-orange); color: var(--fill-label); }
.band--plate .btn { border-color: var(--plate-ink); }

/* -------------------------------------------------------------- figures */
figure { margin: 2rem 0; }
figure img,
.gallery img,
img {
  /* v1.17.0 pin: an image may never render wider than its own pixels.
     width attr = natural width; max-width caps to column. */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
figure > a { display: inline-block; line-height: 0; }
figcaption {
  font-size: 1rem;
  color: var(--panel-ink-muted);
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------- galleries */
/* Multi-column bricks (the v1.27.0 Selvedge lesson: rows leave dead ground
   beside tall images). Captions live on data-caption, rendered by the
   lightbox only. */
.gallery {
  columns: 3 16rem;
  column-gap: 1rem;
  max-width: var(--wide);
  margin: 2rem auto;
}
.gallery a {
  display: block;
  break-inside: avoid;
  margin: 0 0 1rem;
  line-height: 0;
  border-radius: 4px;
}
.gallery a:focus-visible { outline: 3px solid var(--accent-orange); outline-offset: 2px; }
.gallery img { width: 100%; border-radius: 4px; }

/* image pair — a 2-col source row whose columns each held one image */
.figure-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
  align-items: start;
}
.figure-pair figure { margin: 0; }

/* ---------------------------------------------------------- testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.2rem;
  max-width: var(--wide);
  margin: 2rem auto;
}
.testimonial {
  background: var(--panel);
  color: var(--panel-ink-read);
  border: 2px solid var(--plate);
  border-left: 8px solid var(--accent-green);
  border-radius: 4px;
  padding: 1.3rem;
  margin: 0;
}
.testimonial blockquote { font-size: 1.05rem; line-height: 1.55; quotes: none; }
.testimonial img { max-width: 100%; height: auto; margin-top: 1rem; border-radius: 3px; }
.testimonial figcaption { font-family: var(--display); font-weight: 600; color: var(--panel-ink); }

/* --------------------------------------------------------------- infobox */
.infobox {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  background: var(--plate);
  color: var(--plate-ink);
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  margin: 1rem 0;
}

/* -------------------------------------------------- accordion → details */
details.faq {
  border: 2px solid var(--plate);
  border-radius: 4px;
  background: var(--panel);
  margin-top: 1rem;
  max-width: var(--measure);
}
details.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--panel-ink);
  padding: 1rem 1.2rem;
  list-style-position: outside;
}
details.faq summary:hover { color: var(--link-warm); }
details.faq[open] summary { border-bottom: 2px solid var(--accent-green); }
details.faq .faq-body { padding: 1rem 1.2rem 1.3rem; }
details.faq .faq-body > * + * { margin-top: 0.9em; }

/* ------------------------------------------------------ YouTube facades */
/* Parity with z2w-admin-suite's z2w-yt-poster: poster + a real button; the
   youtube-nocookie iframe is injected only on click (signpost.js). A real
   <a> to the watch URL rides along for no-JS and crawlers. */
.yt-facade {
  position: relative;
  max-width: var(--measure);
  margin: 2rem 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade .yt-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.yt-facade .yt-play::before {
  content: "";
  width: 5.5rem;
  height: 3.9rem;
  background: var(--accent-orange);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  clip-path: none;
}
.yt-facade .yt-play::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.85rem 0 0.85rem 1.5rem;
  border-color: transparent transparent transparent var(--fill-label);
}
.yt-facade .yt-play:hover::before { background: var(--accent-green); }
.yt-facade .yt-play:focus-visible { outline: 4px solid var(--accent-orange); outline-offset: -4px; }
.yt-watch-link { font-size: 1rem; margin-top: 0.5rem; }

/* -------------------------------------------------------- Chariot facade */
/* Kerry's 2026-08-21 ruling: the DAF donation widget is carried BEHIND A
   CLICK — same facade shape as the YouTube posters. The script src and the
   chariot-tile cid live on data attributes until a donor asks (signpost.js). */
.chariot-facade {
  border: 3px dashed var(--accent-green);
  border-radius: 6px;
  padding: 1.6rem;
  margin: 2rem 0;
  max-width: var(--measure);
}
.chariot-facade .chariot-load {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  background: var(--accent-orange);
  color: var(--fill-label);
  border: 2px solid var(--fill-label);
  border-radius: 4px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
}
.chariot-facade .chariot-load:hover { background: var(--accent-green); }
.chariot-facade .chariot-note { font-size: 1rem; color: var(--panel-ink-muted); margin-top: 0.7rem; }

/* -------------------------------------------------------------- PDF frame */
/* Per the embed-pdf-outside-wordpress skill: native iframe, #view=FitH,
   sized to the reader; frame hidden on phones (iOS renders only page 1),
   the LINK visible at every width. */
.pdf-frame {
  width: 100%;
  height: min(85vh, 62rem);
  border: 2px solid var(--plate);
  border-radius: 4px;
  background: #fff;
}
.pdf-actions { margin-top: 0.7rem; font-size: 1.05rem; }
.pdf-actions__note { display: none; font-size: 1rem; color: var(--panel-ink-muted); }
@media (max-width: 48rem) {
  .pdf-frame { display: none; }
  .pdf-actions__note { display: block; }
}

/* --------------------------------------------------------- Airtable frame */
.airtable-frame {
  width: 100%;
  height: 700px;
  border: 2px solid var(--accent-green);
  border-radius: 4px;
  background: transparent;
}
.airtable-fallback { font-size: 1rem; margin-top: 0.5rem; }

/* --------------------------------------------------------------- countdown */
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}
.countdown .cd-cell {
  min-width: 6.5rem;
  text-align: center;
  background: var(--plate);
  color: var(--plate-ink);
  border: 3px solid var(--accent-green);
  border-radius: 6px;
  padding: 0.9rem 0.6rem;
}
.band--plate .countdown .cd-cell { background: var(--panel); color: var(--panel-ink); border-color: var(--accent-orange); }
.countdown .cd-num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1.1;
}
.countdown .cd-label {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- lightbox */
/* Native <dialog>; geometry rules carried from the Selvedge v1.27.0 pass:
   a FIXED frame with the image absolutely positioned inside it, so the
   Previous/Next controls never move between photographs. */
dialog.lightbox {
  /* the UA centres a modal dialog with margin:auto; this file's *{margin:0}
     reset silently overrides that — the exact Selvedge v1.27.0 defect.
     Restore it explicitly. */
  margin: auto;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--plate);
  color: var(--plate-ink);
  width: min(92vw, 68rem);
}
dialog.lightbox::backdrop { background: rgba(6, 16, 10, 0.85); }
.lb-stage {
  position: relative;
  width: 100%;
  height: min(72vh, 46rem);
}
.lb-stage img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  border-radius: 0;
}
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
}
.lb-caption { font-size: 1rem; color: var(--plate-ink-muted); flex: 1; }
.lb-bar button {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  background: var(--accent-green);
  color: var(--fill-label);
  border: 0;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.lb-bar button:hover { background: var(--accent-orange); }
.lb-count { font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--plate-ink-muted); }

/* --------------------------------------------------------------- footer */
.signfoot {
  background: var(--plate);
  color: var(--plate-ink-muted);
  border-top: 6px solid var(--accent-green);
  padding: 2.5rem 1.5rem;
  font-size: 1rem;
}
.signfoot-inner { max-width: var(--wide); margin: 0 auto; }
.signfoot a { color: var(--plate-ink); }
.signfoot a:hover { color: #fff; }
.signfoot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.8rem; }

/* --------------------------------------------------- §6C motion, near-none */
/* Section entrances only: 200ms, opacity + 2px, headings/furniture only.
   PROSE NEVER ANIMATES (family invariant). Off under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .band > .band-inner > .wayfinder {
    animation: sp-enter 200ms ease-out both;
  }
  @keyframes sp-enter {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------- helpers */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-orange);
  color: var(--fill-label);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}