/* =========================================================================
   MAGA - Make Art Great Again
   Design system is locked in :root. Nothing below deviates from it.
   ========================================================================= */

:root {
  /* --- colour -------------------------------------------------------------
     Accent: gold, the one UI accent (primary action + focus + progress).
     Field:  the hero art's cornflower blue. Reused ONLY for focus rings and
             the scroll cue, so focus stays visible on the gold button.
     Ink:    near-black, every heavy outline and all body text.
     Surface warm off-white for the "We Lost The Plot" section.
     One grey family, warm-leaning throughout.
     The six pastels are artwork palette tokens, not UI chrome, so they sit
     outside the accent rule. */
  --accent:      #F5C542;
  --accent-hover:#E9B72E;
  --accent-ink:  #1A1A1A;
  --field:       #5B9BD5;
  --ink:         #1A1A1A;
  --surface:     #FBF7EF;

  --grey-900: #1A1A1A;
  --grey-600: #5C564E;
  --grey-400: #A9A196;
  --grey-200: #D8D2C6;
  --grey-100: #EDE8DE;

  --pastel-1: #F6D8D3;
  --pastel-2: #F7E7B4;
  --pastel-3: #CDE8D6;
  --pastel-4: #CFE1F1;
  --pastel-5: #EFDBC3;
  --pastel-6: #DDE7CC;

  /* How It Works payoff grid - one colour per outcome, plus a shared muted
     text tone for every eyebrow/label in the section. --accent (gold) is the
     fourth outcome colour; it is not redeclared here. */
  --win:   #C9E4C5;
  --lose:  #E8B4B8;
  --none:  #D8D4CC;
  --muted: rgba(26, 26, 26, 0.55);

  /* --- radius -----------------------------------------------------------
     Rule: buttons are pills; cards use --radius-card; nothing else rounds. */
  --radius-pill: 999px;
  --radius-card: 18px;

  /* --- borders -------------------------------------------------------
     Heavy black outlines are the artwork's signature. Bordered UI uses this. */
  --bd-w: 3px;

  /* --- spacing --------------------------------------------------------
     8px base. Every gap / pad / margin is a multiple of it.
     --space-inline is the fluid page gutter. */
  --space: 8px;
  --space-inline: clamp(24px, 6vw, 72px);

  /* --- type ----------------------------------------------------------
     Two faces, separate jobs: a heavy grotesque for display, system for body.
     No web fonts - no dependencies. */
  --font-display: "Arial Black", "Arial Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- one elevation system ----------------------------------------
     A hard, un-blurred offset shadow - it matches the flat inked outline
     style of the art. It is the only shadow on the page and only the CTA
     uses it. */
  --shadow-hard: 4px 4px 0 var(--ink);

  /* --- nav geometry (read by script.js) --------------------------- */
  --nav-h: 88px;
  --nav-pad: 20px;

  /* --- nav bar frosted glass ------------------------------------
     Light tint of the surface, strong blur - content underneath shows
     through softened. --nav-blur was measured on a throttled mobile
     viewport; drop it (not the effect) if scroll janks. */
  --nav-tint: rgba(251, 247, 239, 0.55);   /* --surface at ~55% */
  --nav-blur: 16px;

  /* --- hero -------------------------------------------------------
     --brand-size / --hamburger-size: the logo and hamburger at hero size -
     both scale down into the nav as the page scrolls.
     --cue-bottom: the scroll cue sits in the strip around the characters'
     ground shadow. Kept small enough it stays fully visible at 844px tall
     without touching the characters. */
  --brand-size: 120px;
  --hamburger-size: 44px;
  --cue-bottom: clamp(8px, 1.2vh, 22px);
}

@media (max-width: 767px) {
  :root {
    --nav-h: 72px;
    --nav-pad: 16px;
    --brand-size: 92px;
    --hamburger-size: 38px;
    --cue-bottom: clamp(20px, 4vh, 40px);
  }
}

/* =========================================================================
   Base
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }

/* Anchor targets clear the fixed nav bar when future nav links jump to them. */
:target,
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

:focus-visible {
  outline: 3px solid var(--field);
  outline-offset: 3px;
}

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

/* =========================================================================
   Header: fixed logo + hamburger, and the nav bar strip they settle into

   Shared across all three pages. .site-header carries one of two modifiers:
     --hero   (index.html)  - starts in the hero, script.js drives the
                              scroll-linked travel/scale into the nav bar.
     --static (/pfp, /apply) - no hero to travel from, so the logo and
                              hamburger sit directly in their settled nav
                              spot from first paint and the bar background
                              is always on. See the overrides at the bottom
                              of this section.
   ========================================================================= */

/* .site-header is a landmark wrapper only - its children are position:fixed. */

/* The strip. Transparent itself so it never dims the logo or hamburger. */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 40;
  pointer-events: none;
}

/* The bar background - frosted glass. On --hero, opacity is driven per-frame
   by script.js (--nav-bg-opacity): the tint and blur ramp in together and
   are only fully present once the transition completes. A hairline border
   plus a soft shadow give the bar an edge against the content it floats
   over. --static forces it fully on below. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-tint);
  -webkit-backdrop-filter: blur(var(--nav-blur));
          backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  box-shadow: 0 8px 20px -12px rgba(26, 26, 26, 0.22);
  opacity: var(--nav-bg-opacity, 0);
}

/* Where backdrop-filter is unsupported, fall back to a solid bar so the
   logo and hamburger stay legible against whatever scrolls beneath. */
@supports not (backdrop-filter: blur(1px)) {
  .site-nav::before {
    background: var(--surface);
  }
}

/* Slot for future links, sat between the logo and the hamburger. Empty for now. */
.site-nav__links {
  position: absolute;
  left: calc(var(--nav-pad) + 170px);
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.site-nav__links a {
  font: 600 0.95rem/1 var(--font-body);
  text-decoration: none;
  color: var(--ink);
}

.site-nav__links a:hover { text-decoration: underline; }

/* The logo - a square mark. Centred at the top of the hero via margin (no
   base transform - script.js owns the transform on --hero). transform-origin
   top-left: it scales about that corner as the corner travels to the nav's
   left padding. */
.brand {
  position: fixed;
  z-index: 50;
  top: clamp(16px, 3vw, 28px);
  left: 50%;
  width: var(--brand-size);
  height: var(--brand-size);
  margin-left: calc(var(--brand-size) / -2);
  transform-origin: top left;
  line-height: 0;
  pointer-events: auto;
  will-change: transform;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The hamburger. Plain icon, no pill/fill/border of its own - on --hero it
   sits directly on the hero artwork, same treatment as the scroll cue. It
   starts pinned top-right (mirrors the logo's top-left) and, on --hero,
   travels only a short distance while it scales down in place - script.js
   drives that with the SAME easing curve as the logo, so the two settle
   together. transform-origin top-right: it scales about that corner. */
.hamburger {
  position: fixed;
  /* Above .site-menu's z-index:200, so it stays visible and tappable as the
     close button once the full-screen menu is open. This ONLY works
     because the button is a sibling of .site-nav, not a descendant of it -
     .site-nav is itself position:fixed with z-index:40, which creates its
     own stacking context, and a z-index set on something nested inside it
     can never escape that context no matter how high the number is. */
  z-index: 250;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transform-origin: top right;
  pointer-events: auto;
  will-change: transform;
}

.hamburger__icon {
  display: block;
  width: 60%;
  height: 60%;
}

.hamburger__icon--close { display: none; }

.hamburger[aria-expanded="true"] .hamburger__icon--bars { display: none; }
.hamburger[aria-expanded="true"] .hamburger__icon--close { display: block; }

/* =========================================================================
   --static header (/pfp, /apply): settled from first paint, no travel.
   ========================================================================= */

.site-header--static .site-nav::before { opacity: 1; }

/* top: 50% here would centre on the VIEWPORT (these are position:fixed, so
   percentages resolve against the viewport, not the --nav-h strip) - that
   was the bug that left the logo/hamburger floating mid-screen on /pfp and
   /apply. calc(var(--nav-h) / 2) is the nav bar's own midline from the top,
   matching the navMidline script.js settles the --hero page's onto. */
.site-header--static .brand {
  top: calc(var(--nav-h) / 2);
  left: var(--nav-pad);
  margin-left: 0;
  width: calc(var(--nav-h) * 0.74);
  height: calc(var(--nav-h) * 0.74);
  transform: translateY(-50%);
}

.site-header--static .hamburger {
  top: calc(var(--nav-h) / 2);
  right: var(--nav-pad);
  width: calc(var(--nav-h) * 0.5);
  height: calc(var(--nav-h) * 0.5);
  transform: translateY(-50%);
}

/* =========================================================================
   Full-screen menu - shared markup/behaviour across all three pages
   (nav.js). Cream background, not a dark overlay, so it reads as a page of
   the site rather than a modal. Sits above everything, including /pfp's own
   preview overlay (z-index 101). transform/opacity only, so the open/close
   animation stays cheap; both are skipped under reduced motion below.
   ========================================================================= */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--space-inline) 24px;
  background: var(--surface);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.site-menu[hidden] { display: none; }

.site-menu:not(.is-open) { pointer-events: none; }

.site-menu.is-open {
  opacity: 1;
  transform: none;
}

body.menu-open { overflow: hidden; }

.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 6vh, 44px);
  text-align: center;
}

/* Fade + slide up, staggered per item on open (see the nth-child delays
   below) - a quick cascade, not a slow reveal. transition-delay is scoped
   to .is-open so it only applies on the way in: closing reverts .is-open,
   which drops back to this rule's plain (no-delay) transition, so every
   item fades out together instead of un-cascading in reverse. */
.site-menu__link {
  font: 700 clamp(30px, 7vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.site-menu.is-open .site-menu__link {
  opacity: 1;
  transform: none;
}

.site-menu.is-open .site-menu__list li:nth-child(1) .site-menu__link { transition-delay: 0.08s; }
.site-menu.is-open .site-menu__list li:nth-child(2) .site-menu__link { transition-delay: 0.16s; }
.site-menu.is-open .site-menu__list li:nth-child(3) .site-menu__link { transition-delay: 0.24s; }
.site-menu.is-open .site-menu__list li:nth-child(4) .site-menu__link { transition-delay: 0.32s; }

.site-menu__link:hover { text-decoration: underline; }

.site-menu__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  text-decoration-color: var(--accent);
}

/* "Follow on X" - the site's primary button treatment, so the CTA still
   reads as a CTA even inside a page of plain text links. */
.site-menu__link--cta {
  margin-top: clamp(8px, 2vh, 16px);
  display: inline-flex;
  align-items: center;
  padding: 0.7em 1.5em;
  font-size: clamp(20px, 4vw, 26px);
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--bd-w) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
}

.site-menu__link--cta:hover { background: var(--accent-hover); }
.site-menu__link--cta:active { box-shadow: 2px 2px 0 var(--ink); }

/* =========================================================================
   Section 1: Hero
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* --- Layer stack -----------------------------------------------------------
   All three layers are pinned to the same box (the stage) and cropped the
   same way. Do NOT add per-layer position/size rules - if a layer looks
   off, the source art is the place to fix it, not CSS. */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-layer {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* identical intrinsic ratio per breakpoint -> identical crop */
  object-position: center;
  display: block;
}

.hero-layer--bg         { z-index: 1; }
.hero-layer--type       { z-index: 2; }
.hero-layer--characters { z-index: 3; }

.scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: var(--cue-bottom);
  transform: translateX(-50%);
  color: var(--ink);
  pointer-events: none;
  animation: cue-bounce 1.8s ease-in-out infinite;
}

.scroll-cue svg { display: block; }

@keyframes cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* --- Load sequence -------------------------------------------------------
   Primed only when JS is present (.js on <html>); script.js adds .is-ready
   to <html> once the three layer images have decoded, which releases the
   transitions. .is-ready is on <html> (not .hero) because the logo and
   hamburger live in <header>, outside .hero. The logo/hamburger opacity
   rules are scoped to .site-header--hero (index.html only) - /pfp and
   /apply reuse the same .brand/.hamburger classes but must stay visible
   from first paint, with no load sequence to release them.
   Timeline (each beat starts before the previous ends, so it reads as one
   move): bg + logo + hamburger ~0s-0.1s, type drops in ~0.3s, characters
   rise ~0.6s, scroll cue ~1.2s. Total ~1.65s. Tune the delays below.
   transform + opacity only, ease-out. */
.js .hero-layer,
.js .scroll-cue,
.js .site-header--hero .brand,
.js .site-header--hero .hamburger { opacity: 0; }

.js .hero-layer { transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
.js .site-header--hero .brand,
.js .site-header--hero .hamburger { transition: opacity 0.55s ease-out; }
.js .scroll-cue { transition: opacity 0.45s ease-out; }

.js .hero-layer--type       { transform: translateY(-3%); }   /* starts slightly high, drops in */
.js .hero-layer--characters { transform: translateY(4%); }    /* starts slightly low, rises */

.js.is-ready .hero-layer,
.js.is-ready .scroll-cue,
.js.is-ready .site-header--hero .brand,
.js.is-ready .site-header--hero .hamburger { opacity: 1; }

.js.is-ready .hero-layer { transform: none; }

.js.is-ready .hero-layer--bg         { transition-delay: 0s; }
.js.is-ready .site-header--hero .brand,
.js.is-ready .site-header--hero .hamburger { transition-delay: 0.1s; }
.js.is-ready .hero-layer--type       { transition-delay: 0.3s; }
.js.is-ready .hero-layer--characters { transition-delay: 0.6s; }
.js.is-ready .scroll-cue             { transition-delay: 1.2s; }

/* =========================================================================
   Section 2: We Lost The Plot - stacked: centred copy, full-bleed carousel
   ========================================================================= */

.plot {
  background: var(--surface);
  color: var(--ink);
}

.plot__copy {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 72px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  font: 800 14px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(26, 26, 26, 0.55);
}

.plot__title {
  margin: 0 0 28px;
  font: 700 clamp(44px, 6vw, 82px)/0.95 var(--font-display);
  letter-spacing: -0.03em;
}

/* "We Lost The Plot" body copy only. The block is centred, but each
   paragraph keeps a capped measure (auto side margins within the already-
   centred container) so lines stay short instead of stretching edge to
   edge at 46ch. */
.prose p {
  margin: 0 auto 16px;
  max-width: 46ch;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.8);
}

/* --- Art carousel --------------------------------------------------------
   Two identical six-piece sets sit side by side. script.js translates the
   track by exactly one set width, then wraps that offset onto the matching
   copy. The viewport clips naturally at both edges without widening the
   page. Images keep their intrinsic ratio. */
.art-carousel {
  --carousel-gap: clamp(20px, 2.5vw, 40px);
  width: 100%;
  overflow: hidden;
  padding: 8px 0 120px;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.art-carousel.is-dragging { cursor: grabbing; }

.art-carousel__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.art-carousel__set {
  flex: none;
  display: flex;
  gap: var(--carousel-gap);
  padding-right: var(--carousel-gap);
}

.art-carousel__slide {
  flex: none;
  width: clamp(240px, 24vw, 380px);
  margin: 0;
}

.art-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  pointer-events: none;
  -webkit-user-drag: none;
}

@media (max-width: 720px) {
  .art-carousel {
    --carousel-gap: 14px;
    padding: 4px 0 80px;
  }

  .art-carousel__slide {
    width: min(72vw, 300px);
  }

  .art-carousel__slide img { border-radius: 14px; }
}

/* =========================================================================
   Section 3: How It Works
   ========================================================================= */

.hiw {
  background: var(--surface);
  color: var(--ink);
}

.hiw__inner {
  max-width: 1180px;
  margin-inline: auto;
  /* Top padding is intentionally lighter than the sides/bottom - it stacks
     with .plot's bottom padding right above it, and together they land
     around 120px on desktop, 80px on mobile (see the max-width: 860px
     override below). */
  padding: 56px 48px 110px;
}

.hiw__eyebrow {
  margin: 0 0 16px;
  font: 700 14px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hiw__title {
  margin: 0 0 20px;
  font: 700 clamp(44px, 6vw, 82px)/0.95 var(--font-display);
  letter-spacing: -0.03em;
}

.hiw__lede {
  margin: 0 0 72px;
  max-width: 46ch;
  font: 500 18px/1.5 var(--font-body);
  color: rgba(26, 26, 26, 0.8);
}

/* --- Two steps ----------------------------------------------------------- */

.hiw__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 720px;
  margin: 0 0 88px;
  padding: 0;
  list-style: none;
}

.hiw__step-num {
  display: block;
  margin: 0 0 10px;
  font: 700 15px/1.2 var(--font-body);
  letter-spacing: 0.1em;
  color: var(--muted);
}

.hiw__step-title {
  margin: 0 0 8px;
  font: 700 22px/1.2 var(--font-body);
  letter-spacing: -0.01em;
}

.hiw__step-body {
  margin: 0;
  max-width: 32ch;
  font: 500 17px/1.5 var(--font-body);
  color: rgba(26, 26, 26, 0.75);
}

/* --- The payoff grid ------------------------------------------------------
   A real <table> for the tabular semantics - <th scope="col"|"row"> carry
   the axis meaning to assistive tech no matter how the cells are styled.
   The visual treatment (centring, the rotated row headers) lives on an
   inner wrapper div inside each header cell rather than on the th/td
   itself, so nothing here changes the cells' own display type and strips
   their implicit table roles. */

.hiw__grid-label {
  margin: 0 0 28px;
  font: 700 15px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.hiw__matrix-wrap {
  /* Safety valve only - the fixed layout below keeps the matrix inside
     .hiw__inner at every width this site supports. */
  overflow-x: auto;
}

.hiw__matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 14px;
}

.hiw__col-corner { width: 92px; }

.hiw__corner { border: none; }

.hiw__col-head,
.hiw__row-head {
  padding: 0;
  font-weight: normal;
  text-align: left;
}

.hiw__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.hiw__head--rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 12px 8px;
}

.hiw__who {
  margin-bottom: 2px;
  font: 500 12px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hiw__choice {
  font: 700 15px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Cells sit at this fixed size/shape now; a future reaction-art image drops
   in bottom-right (~74px desktop / 46px mobile) against this
   position:relative box without any layout rework. */
.hiw__cell {
  position: relative;
  padding: 32px 26px;
  min-height: 168px;
  border: none;
  border-radius: 18px;
  vertical-align: top;
}

.hiw__cell-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hiw__cell--win  { background: var(--win); }
.hiw__cell--lose { background: var(--lose); }
.hiw__cell--gold { background: var(--accent); }
.hiw__cell--none { background: var(--none); }

.hiw__outcome {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hiw__detail {
  margin: 0;
  font: 500 15px/1.45 var(--font-body);
  color: rgba(26, 26, 26, 0.7);
}

.hiw__footnote {
  margin: 28px 0 0;
  max-width: 44ch;
  font: 500 16px/1.5 var(--font-body);
  color: var(--muted);
}

/* --- Reveal-on-scroll -----------------------------------------------------
   Mirrors the hero's pattern (opacity+transform primed only when .js is
   present, released by a class script.js adds once). Here the release
   class lands on .hiw itself, added by an IntersectionObserver the first
   time the section enters view, and each group's transition-delay staggers
   the sequence: eyebrow+heading, lede, steps, then the four grid cells one
   at a time via [data-reveal] on the td/th. */
.js .hiw__reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.js .hiw.is-visible .hiw__reveal {
  opacity: 1;
  transform: none;
}

.js .hiw__eyebrow,
.js .hiw__title           { transition-delay: 0s; }
.js .hiw__lede             { transition-delay: 0.12s; }
.js .hiw__steps            { transition-delay: 0.24s; }
.js [data-reveal="cell-1"] { transition-delay: 0.36s; }
.js [data-reveal="cell-2"] { transition-delay: 0.48s; }
.js [data-reveal="cell-3"] { transition-delay: 0.6s; }
.js [data-reveal="cell-4"] { transition-delay: 0.72s; }

@media (max-width: 860px) {
  /* Shrinks further to keep the combined gap with .plot's bottom padding
     (overridden just below) around 80px, matching the desktop pairing. */
  .plot { padding-bottom: clamp(24px, 6vh, 40px); }

  .hiw__inner { padding: 40px 20px 80px; }

  .hiw__lede { margin-bottom: 56px; }

  .hiw__steps {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 64px;
  }

  .hiw__matrix { border-spacing: 8px; }

  .hiw__col-corner { width: 56px; }

  .hiw__head { padding: 8px 4px; }
  .hiw__head--rotate { padding: 8px 4px; }

  .hiw__who { font-size: 10px; }
  .hiw__choice { font-size: 12px; }

  .hiw__cell {
    padding: 20px 14px;
    min-height: 130px;
    border-radius: 14px;
  }

  .hiw__outcome { font-size: 18px; }
  .hiw__detail { font-size: 13px; }
}

/* =========================================================================
   Section 4: Footer
   ========================================================================= */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space) * 2.5);
  padding: calc(var(--space) * 7) var(--space-inline) calc(var(--space) * 6);
  text-align: center;
  background: var(--ink);
  color: var(--surface);
}

.footer-logo {
  display: block;
  width: 56px;
  line-height: 0;
}

.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-block;
  padding: 8px 4px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.site-footer__links a:hover { text-decoration: underline; }

.site-footer__copy {
  margin: 0;
  font-size: 0.85rem;
  color: var(--grey-400);
}

/* =========================================================================
   Reduced motion: no spatial animation. The header transition still needs
   to land the logo/hamburger in the bar, so script.js snaps them instead of
   easing. Parallax and the scroll cue simply stop.
   ========================================================================= */

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

  .scroll-cue { animation: none; }

  .brand,
  .hamburger,
  .art-carousel__track { will-change: auto; }

  /* Skip the hero load sequence entirely - render the final composition
     immediately. !important here is a deliberate accessibility override of
     the .is-ready transition rules above. */
  .js .hero-layer,
  .js .brand,
  .js .hamburger,
  .js .scroll-cue { opacity: 1 !important; transition: none !important; }

  .js .hero-layer { transform: none !important; }

  /* How It Works: skip the reveal sequence entirely - render in place. */
  .js .hiw__reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Menu: open/close instantly, no fade/translate and no item cascade -
     the items still land at opacity:1/transform:none when .is-open is
     added, just with no animation and no stagger getting there. */
  .site-menu,
  .site-menu__link { transition: none; }
}