/* ---------------------------------------------------------------------------
   Home page (/home draft → /) — page-specific styles.
   Brand values come from tokens.css roles only; nothing here re-defines the
   palette or scale. The page renders full-bleed (the layout's padding is
   dropped), so every band manages its own 6vw gutters to align with the
   site chrome.
   --------------------------------------------------------------------------- */

/* --- Hero: full-bleed video under a pine wash ------------------------------
   The footage is bright (sky in the top half), so legibility comes from a
   bottom-heavy pine gradient — same trick as the story map's wash. Text sits
   in the lower third where the wash is deepest. The poster doubles as the
   reduced-motion and slow-network fallback: it's painted as the section's
   background, with the video layered above it. */
.hero {
  position: relative;
  min-height: min(88svh, 56rem);
  display: flex;
  align-items: flex-end;
  /* The poster image is supplied inline by the template (per hero variant);
     this rule provides the color underlay and the sizing for it. */
  background: var(--pine) center / cover no-repeat;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }   /* the poster background remains */
}

/* --- Teaser hero: whole-video, letterboxed in cream -----------------------
   The teaser clip (Ocean4) has its message baked into the 16:9 frame, so it
   must never be cropped — unlike the /home hero above, which uses `cover`
   under overlaid HTML text. Here the section is capped at the viewport and the
   video is `contain`ed: the whole frame always shows, scaled so it's no wider
   and no taller than the space, and the leftover band on the non-constraining
   axis is filled with brand cream (--cream, #f4ede0). That cream is all but
   identical to the clip's pale final frame, which it holds on (no loop), so
   the letterbox and the resting image sit together seamlessly. Teaser-only via
   .hero--teaser; /home is untouched. */
.hero--teaser {
  min-height: 0;
  height: auto;
  max-height: 100svh;
  background: var(--cream);
  display: block;
}
.hero--teaser .hero__video {
  position: static;
  width: 100%;
  height: auto;
  max-height: 100svh;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  /* No-motion: hide the video and let the hero rest as a calm cream band
     (capped short so it isn't a big empty expanse). The teaser's message
     lives in the sections below, so nothing is lost. */
  .hero--teaser .hero__video { display: none; }
  .hero--teaser { min-height: 40svh; }
}

/* Teaser: pull the first band ("Introducing America Éire") up toward the
   video. The shared .band rule sets --space-2xl top and bottom; here we halve
   just the TOP so the intro sits closer to the clip, keeping the 6vw gutters
   and the full --space-2xl below. Teaser-only (the band right after the
   teaser hero); /home keeps its even spacing. */
.hero--teaser + .band {
  padding-top: var(--space-l);
}
.hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75rem 42rem at 16% 104%,
      rgb(27 60 44 / 0.80) 0%,
      rgb(27 60 44 / 0.42) 42%,
      rgb(27 60 44 / 0.00) 72%),
    linear-gradient(
    to bottom,
    rgb(27 60 44 / 0.08) 0%,
    rgb(27 60 44 / 0.14) 55%,
    rgb(27 60 44 / 0.48) 100%
  );
}
.hero__content {
  position: relative;
  padding: var(--space-2xl) 6vw var(--space-xl);
  /* 52rem (was 46rem): a deliberate one-off widening for the /home hero so the
     intro can wrap to two lines on wide viewports instead of three. The block
     is centered-by-layout, so a fixed cap reads as "narrower as the viewport
     widens"; this lets the intro approach its own 52ch line-length cap below
     rather than being clamped short by the container. */
  max-width: 52rem;
}
/* On the dark wash the palette inverts, exactly as the green note does:
   cream for text, gold for the kicker. */
.hero__content .kicker { color: var(--gold); text-shadow: 0 1px 10px rgb(27 60 44 / 0.55); }
.hero__heading {
  color: var(--cream);
  /* Was var(--step-4) (clamp max 4.144rem/~66px). The global token is used
     ONLY here, but rather than retune the scale we cap growth locally: at very
     large viewports --step-4 grew just enough to overflow the 52rem container
     to a third line. This clamp keeps the same fluid growth but pulls the
     ceiling to 3.75rem (~60px) so the heading holds at two lines across wide
     viewports while staying the page's display moment. Lower the max a touch
     more if a longer heading ever reflows. */
  font-size: clamp(3.552rem, 2.96rem + 1.184vw, 3.75rem);
  line-height: 1.08;
  margin-top: var(--space-2xs);
  text-wrap: balance;
  /* Self-carried contrast: a tight grounding shadow plus a wide soft halo.
     Reads as typographic weight, not a drop-shadow effect, which is what
     lets the wash above stay light. */
  text-shadow: 0 1px 2px rgb(27 60 44 / 0.35), 0 4px 28px rgb(27 60 44 / 0.45);
}
.hero__intro {
  color: var(--cream);
  font-size: var(--step-0);
  line-height: 1.7;
  max-width: 52ch;
  margin-top: var(--space-s);
  opacity: 0.92;
  text-shadow: 0 1px 18px rgb(27 60 44 / 0.50);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  margin-top: var(--space-m);
}
/* Footage credit — quiet, bottom-right, clear of the lower-left content stack.
   Cream at low opacity over the wash's deepest corner; lifts to full on
   hover/focus. A real focusable link (it lives outside the aria-hidden wash).
   Right inset matches the content's 6vw gutter so it aligns to the same right
   edge the layout uses elsewhere; --size-label keeps it subordinate to the
   buttons. */
.hero__credit {
  position: absolute;
  right: 6vw; bottom: var(--space-s);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--size-label);
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.6;
  text-decoration: none;
  text-shadow: 0 1px 8px rgb(27 60 44 / 0.55);
  transition: opacity 0.15s;
}
.hero__credit:hover,
.hero__credit:focus-visible { opacity: 1; text-decoration: underline; }

/* --- Shared band geometry -------------------------------------------------- */
.band { padding: var(--space-2xl) 6vw; }
.band__inner { max-width: var(--grid-max); margin-inline: auto; }
.band .section-label {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-kicker);
  font-size: var(--size-eyebrow);
  border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-l);
}

/* --- What this is ----------------------------------------------------------
   Pure typography: the drop-cap lead and the house measure carry it. */
.about-band .lead,
.about-band p { max-width: var(--measure); }
.about-band p + p { margin-top: var(--space-s); }
/* The Irish Story band runs bottom-heavy: its top content (the section-label)
   sits near the band's top edge, but the full --space-2xl bottom padding left a
   trailing gap about twice the space above the label — visibly lopsided. Pull
   the bottom padding in to --space-l so the band balances, and so the gap to
   the next section (which already gets a halved --space-l top, below) reads as
   one even break rather than a void under "The vault opens July 1." */
.about-band { padding-bottom: var(--space-l); }
/* Close the doubled gap below the Irish Story section. It's a cream .band
   followed immediately by another cream .band (the featured "From the archive"
   section, or whichever band renders next when featured is empty), so their
   --space-2xl bottom + top padding stack to ~155px of dead cream. Halve the
   FOLLOWING band's top padding (same fix the .hero--teaser + .band rule uses)
   so the pair reads as one clean section gap. Scoped to .about-band's
   successor only — NOT a global .band + .band rule, which over-tightened every
   transition when tried earlier. */
.about-band + .band {
  padding-top: var(--space-l);
}

/* --- Featured stories ------------------------------------------------------ */
/* Six featured cards (July 3, 2026, per Maedhbh — up from three): an explicit
   3 / 2 / 1 column count so six always lands even (3×2 desktop, 2×3 tablet,
   a stack on phones). auto-fit minmax was right for exactly three cards, but
   at the 1600px band it would lay six out as one row of skinny cards. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}
@media (max-width: 64rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--color-bg-layer);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__media-link {
  display: block;            /* fills the media area so the whole image is clickable */
  text-decoration: none;
}
.card__image {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  display: block;
}
/* Stories without an image keep the rhythm with a quiet pine field and the
   site's gold hairline along its base. */
.card__image--empty {
  aspect-ratio: 3 / 2;
  background: var(--pine);
  border-bottom: 1px solid var(--color-rule);
}
.card__body { padding: var(--space-s) var(--space-s) var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.card__route { color: var(--color-kicker); }   /* the kicker class supplies the register */
.card__name {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--color-heading);
  line-height: 1.2;
}
.card__excerpt { color: var(--color-text); font-size: var(--step--1); line-height: 1.65; }
.card__link {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-heading); text-decoration: none;
}
.card__link:hover { color: var(--color-accent); }
/* Arrow after "Read the story" — a small "go" cue that nudges right on hover.
   inline-block so the translate applies; aria-hidden in the markup so it's not
   read out. The 0.2em gap comes from the space before the span in the markup. */
.card__link-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.card__link:hover .card__link-arrow { transform: translateX(3px); }
.cards-cta { margin-top: var(--space-l); }

/* --- The crossing (map tease) ----------------------------------------------
   Built from assets the site already owns: the two cropped coastlines flank
   the copy — Ireland right, US northeast left — echoing the holding page and
   the journey map without embedding the (still-being-verified) map itself. */
.crossing { background: var(--color-bg); position: relative; overflow: hidden; }
.crossing__inner {
  position: relative; z-index: 1;
  max-width: 44rem; margin-inline: auto;
  text-align: center;
  padding: var(--space-l) 0;
}
.crossing h2 { margin-top: var(--space-2xs); }
.crossing p { margin-top: var(--space-s); line-height: 1.7; }
.crossing__cta { margin-top: var(--space-m); }
.crossing .coast {
  position: absolute; z-index: 0;
  /* Between the original 0.3 and the holding page's 0.55: legible as
     geography, still recessive behind the copy. */
  opacity: 0.42; pointer-events: none; user-select: none;
}
.crossing .coast--ie {
  /* The holding page's exact treatment (narrow 142/379 box, cover, art pinned
     to its left edge) — that recipe IS the "western edge running off-frame"
     look, so it must not be tampered with; the only dial that's safe to turn
     is scale. Width is set so the sliver's full height (width x 2.67) lands
     at roughly half the band, mirroring how far the US reaches up from the
     bottom — generous open cream between them. Slight negative top so it
     reads as entering from above the band edge. No mask/fade: the holding
     page vocabulary is the clean crop. */
  top: -1.5rem; right: 0;
  width: clamp(76px, 9vw, 112px);
  aspect-ratio: 142 / 379;
  object-fit: cover;
  object-position: left center;
}
.crossing .coast--us { bottom: -2rem; left: 0; width: clamp(120px, 16vw, 240px); }
@media (max-width: 40rem) {
  .crossing .coast { opacity: 0.22; }
}

/* --- Ambassador quote (green showcase) -------------------------------------
   The page's one emphatic green moment (the register inherited from the old
   launch band): green ground, cream words, gold quotation marks + attribution.
   Centered, generous, set large — the quote IS the section. Contrast: cream
   (#f4ede0) and gold (#a9852f) on green (#244838) both clear AA for large text;
   the gold attribution is large-enough display text, not body copy. */
.quote-feature { background: var(--color-heading); }
.quote-feature__figure {
  max-width: 42rem;   /* narrowed from 50rem: with the smaller (--step-1) text, a tighter measure reads as a quote, not a paragraph */
  margin-inline: auto;
  text-align: center;
}
.quote-feature__text {
  font-family: var(--font-serif);
  font-size: var(--step-1);   /* was --step-2; matched to the .card__name h3 size per editorial preference */
  line-height: 1.4;
  color: var(--cream);
  text-wrap: balance;
}
.quote-feature__mark {
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 2.4em;
  line-height: 0;
  vertical-align: -0.32em;
}
.quote-feature__mark--open  { margin-right: 0.06em; }
.quote-feature__mark--close { margin-left: 0.06em; }
.quote-feature__attr {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-m);
  line-height: 1.5;   /* two lines now (name / title) — give them room */
}
/* The role line sits under the name as a subordinate second line: a touch
   smaller and less tracked so the pair reads as "name, then their title"
   rather than two equal-weight lines. Same gold, inherited from the link. */
.quote-feature__attr-title {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  opacity: 0.85;
}
/* Attribution links to the Ambassador's own story in the archive. Inherits the
   gold attribution color; underline only on hover/focus. */
.quote-feature__attr-link {
  color: inherit;
  text-decoration: none;
}
.quote-feature__attr-link:hover,
.quote-feature__attr-link:focus-visible { text-decoration: underline; }

/* --- Email signup (cream closing band) -------------------------------------
   Deliberately cream, not green: the green quote above is the climax, so this
   reads as a calm close. The green button is the one accent, tying it to the
   site. No on-site form — the button links out to the mailing-list platform. */
.signup { background: var(--color-bg-layer); }
.signup .kicker { color: var(--color-kicker); margin-top: 0; }
.signup h2 { color: var(--color-heading); margin-top: var(--space-2xs); }
.signup p {
  color: var(--color-text); max-width: 52ch;
  line-height: 1.7; margin-top: var(--space-s);
}
.signup__cta { margin-top: var(--space-m); }

/* --- Pull quote ------------------------------------------------------------
   A single voice from the archive, set large. The exaggerated rust marks are
   the drop cap's cousin: the accent color doing one loud thing per page.
   Inline (not absolutely positioned) so they ride the first and last line
   through every wrap; line-height 0 keeps their size from opening up the
   leading. */
.pullquote { background: var(--color-bg-layer); }
.pullquote__figure {
  max-width: 42rem;   /* narrowed from 46rem: matched to .quote-feature for the smaller (--step-1) text */
  margin-inline: auto;
  text-align: center;
}
.pullquote__text {
  font-family: var(--font-serif);
  font-size: var(--step-2);   /* the larger display size — looked better here; the green Ambassador quote stays at --step-1, deliberately different */
  line-height: 1.4;
  color: var(--color-heading);
  text-wrap: balance;
}
.pullquote__mark {
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: 2.4em;
  line-height: 0;
  vertical-align: -0.32em;
}
.pullquote__mark--open  { margin-right: 0.06em; }
.pullquote__mark--close { margin-left: 0.06em; }
.pullquote__attr {
  display: block;
  margin-top: var(--space-m);
}
/* Attribution links to the source story. Inherits the kicker color (the
   .kicker class on the figcaption); underline only on hover/focus so it reads
   as a quiet, intentional link, not a default-blue one. */
.pullquote__attr-link {
  color: inherit;
  text-decoration: none;
}
.pullquote__attr-link:hover,
.pullquote__attr-link:focus-visible { text-decoration: underline; }