/* Landing-page redesign (Direction A / Broadsheet).
   Scoped to the scroll hint and the editorial page below the hero; never touches
   the arcade button, which keeps all of its own styling in lobby.css. */

:root {
  --site-cream: #F1ECDE;
  --site-ink: #1A1917;
  --site-orange: #E1502A;
  --site-orange-deep: #B23D1E;
  --site-muted: #57524A;
  --site-faint: #7C766A;
  --site-hair: rgba(26, 25, 23, .12);
}

/* ── Scroll-down invitation (sits at the foot of the hero) ─────────────── */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .5s ease;
  z-index: 2;
}
.scroll-hint:hover { opacity: .6; }
.scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── NavMark: cycling triangle/chevron/rhomboid down-mark (one archetype,
      ported from the design's NavMark component; page.js drives the cycle) ── */
.navmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #111111;
  -webkit-tap-highlight-color: transparent;
}
a.navmark, .site a.navmark { color: #111111; }
a.navmark:hover, .site a.navmark:hover { opacity: .5; color: #111111; }
.navmark svg { display: block; width: 26px; height: 26px; }
.navmark--up { transform: scaleY(-1); }
.navmark--hero { width: 54px; height: 46px; }
.navmark--hero svg { width: 36px; height: 36px; }
.navmark--fill svg polygon,
.navmark--fill svg rect { fill: currentColor; stroke: none; }
.navmark--fill svg polyline { stroke-width: 4; }
.navmark--sec {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  bottom: 20px;
}
.navmark--strip {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  top: 20px;
}
/* Bottom-center "next page" mark — one per page except the last (TALK). */
.navmark--page {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  transition: opacity .5s ease;
}
/* Per-guide hide: each mark fades out once its own page is scrolled past
   (see page.js); scrolling back above the threshold restores it. */
.navmark--page.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Per-page scroll-down button — a recoloured DUPLICATE of the hero round button
   (built in lobby.js via the same makeRoundButton), seated just above the
   bottom-center navmark. Only position and colour are set here; the structure /
   press feel come from the universal .zc-round. It fades on the same threshold
   as the navmark, reusing the shared .is-hidden state. */
/* `.site .page-cta` (two classes) so this transition beats the universal
   .zc-round's own transform transition. */
.site .page-cta {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%) scale(1);
  /* Reveal (scroll back up) springs the button back in; the hide is a one-shot
     cartoony poof — see .is-hidden. */
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), opacity .14s ease;
  z-index: 2;
}
/* Cartoony dismiss: when its page is scrolled past, the button briefly EXPANDS,
   then scales down to nothing while sliding down toward the blinking navmark
   below it (page.js toggles .is-hidden). The 65px is the gap between the button's
   centre (bottom:64px, 76px tall) and the navmark's centre (bottom:20px, 34px). */
.site .page-cta.is-hidden {
  pointer-events: none;
  animation: page-cta-poof .21s forwards;
}
@keyframes page-cta-poof {
  0% {
    transform: translateX(-50%) translateY(0) scale(1); opacity: 1;
    animation-timing-function: cubic-bezier(.3, 1.5, .5, 1);   /* snappy expand */
  }
  34% {
    transform: translateX(-50%) translateY(0) scale(1.16); opacity: 1;
    animation-timing-function: cubic-bezier(.6, 0, .85, .2);   /* accelerate down into the mark */
  }
  100% { transform: translateX(-50%) translateY(65px) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site .page-cta { transition: opacity .15s ease; }
  .site .page-cta.is-hidden {
    animation: none; opacity: 0; transform: translateX(-50%) scale(1);
  }
}

/* Four plastic colours keyed to the site's sandy scheme. Amber and terracotta
   stay warm and saturated; the cyan and purple are muted and yellow-tinted so
   they still sit on the sand. Each sets the universal face-gradient vars plus the
   engraved mark colour (--d-mark, inherited by the .igori-mark). Two-class
   selectors so these beat the library's single-class variant vars regardless of
   stylesheet order. */
.page-cta.page-cta--1 {   /* amber */
  --rnd-top: #FFCF6A; --rnd-mid: #F2A93C; --rnd-bot: #CE8418;
  --rnd-border: #6f4809; --rnd-text: #4a3006; --d-mark: #4a3006;
}
.page-cta.page-cta--2 {   /* dusty cyan — the pale, warm-tinted "No Country" sky */
  --rnd-top: #B4D3D6; --rnd-mid: #6FA9B2; --rnd-bot: #487F8B;
  --rnd-border: #21454c; --rnd-text: #142c31; --d-mark: #142c31;
}
.page-cta.page-cta--3 {   /* terracotta */
  --rnd-top: #E8734F; --rnd-mid: #C24A2C; --rnd-bot: #93341C;
  --rnd-border: #571c0e; --rnd-text: #3a1207; --d-mark: #3a1207;
}
.page-cta.page-cta--4 {   /* muted purple, warm (yellow) tinted for the sand */
  --rnd-top: #C9AEC4; --rnd-mid: #9E7E9E; --rnd-bot: #765A78;
  --rnd-border: #3e2b42; --rnd-text: #281a2c; --d-mark: #281a2c;
}

/* Standalone legal page (privacy.html) */
body.legal-page { margin: 0; background: var(--site-cream); }
a.site-wordmark, .site a.site-wordmark { color: var(--site-orange-deep); }
.site-footer--slim { padding-top: 28px; padding-bottom: 28px; }
.site-footer--slim .site-footer__bar { padding-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Viewport-fitting pages: each fills a viewport so anchor navigation aligns
   page tops exactly and no following page peeks in. min-height lets a page
   grow taller than the viewport when its content needs to (e.g. mobile).
   Scrolling is fully FREE - no snap, no magnet, no assist. Both the js flick
   scroller and css scroll-snap were tried and rejected by the owner; only the
   anchors (navmarks, button) align pages. */
.page {
  position: relative;
  min-height: 100vh;
  /* lvh (static LARGE viewport) so each page fills the screen in Chrome's
     EXPANDED state (toolbar retracted), where the editorial content is read.
     Static, so the height never depends on the toolbar (no jitter); sized to the
     large state, not svh, so pages don't fall short of the maximum screen. Trade
     off: while the toolbar is showing, a page is taller than the visible area, so
     its very bottom sits under the toolbar until the toolbar retracts. */
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
}

/* Reserve bottom clearance on the pages that carry a floating scroll button, so
   the absolutely-positioned button + navmark can never overlap the flowing
   content. This matters on mobile: content is tall there (pillars/rows stack to
   one column) and the browser's dynamic toolbar changes the viewport height, so
   without a reserved gap the content runs under the button. The button spans
   64–140px from the page bottom; 160px clears it. The last page has no bottom
   button (footer + back-to-top only), so it is excluded. */
.page:not(.page--end) { padding-bottom: 160px; }

/* Final page (#pg-talk) carries the dark footer as its own last child, so the
   footer hugs the page bottom instead of forming a separate screen below it. */
.page .site-footer { margin-top: auto; }

/* Fit the whole last page - TALK strip + contact + footer - inside one desktop
   viewport (~727px). Trim (never zero) the big clamps SCOPED to this page only;
   the global .site-section / .site-footer values elsewhere stay untouched. */
.page--end .site-section {
  padding-top: clamp(22px, 2.6vw, 34px);
  padding-bottom: clamp(20px, 2vw, 26px);
}
.page--end .contact__email { margin-top: clamp(18px, 1.8vw, 24px); }
.page--end .site-footer {
  padding-top: clamp(24px, 2.4vw, 30px);
  padding-bottom: 20px;
}
.page--end .site-footer__top { padding-bottom: 18px; }
.page--end .site-footer__bar { padding-top: 18px; }

/* ── Editorial page ───────────────────────────────────────────────────── */
.site {
  position: relative;
  z-index: 10;                 /* opaque, above the fixed ripple/evo layers */
  background: var(--site-cream);
  color: var(--site-ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  border-top: 1px solid var(--site-hair);
  -webkit-user-select: text;
  user-select: text;
  overflow: hidden;
}
.site ::selection { background: var(--site-orange); color: var(--site-cream); }
.site a { color: var(--site-orange); text-decoration: none; }
.site a:hover { color: var(--site-orange-deep); }

/* width:100% keeps flex-column .page parents from shrinking the inner to
   fit-content (cross-axis auto margins otherwise absorb the free space). */
.site__inner { width: 100%; max-width: 1200px; margin: 0 auto; }

.site-pad {
  padding-left: clamp(22px, 5vw, 72px);
  padding-right: clamp(22px, 5vw, 72px);
}

/* Top bar */
.site-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--site-hair);
}
.site-wordmark {
  font: 400 26px/1 'Yellowtail', cursive;
  color: var(--site-orange-deep);
}
.site-topbar__meta {
  font: 700 11px/1 'Archivo', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--site-muted);
}
.site-topbar__meta a { color: var(--site-muted); }

/* Lede */
.site-lede {
  position: relative;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.site-lede__text {
  font: 500 clamp(30px, 3.6vw, 60px)/1.13 'Archivo', sans-serif;
  letter-spacing: -.02em;
  max-width: 1080px;
}

/* Chapter marker (MAKE / FEEL / TALK) — one reusable archetype */
.chapter {
  position: relative;
  height: clamp(90px, 12vw, 150px);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  border-top: 1px solid var(--site-hair);
  padding-left: clamp(18px, 4.6vw, 66px);
  padding-right: clamp(18px, 4.6vw, 66px);
}
.chapter__word {
  font: 900 clamp(120px, 16vw, 236px)/0.8 'Archivo', sans-serif;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: clamp(1.6px, .18vw, 2.6px) var(--site-orange);
  transform: translateY(-4px);
  white-space: nowrap;
}
/* Selection-reveal: JS wraps each letter of the chapter word in a
   .chapter__letter span carrying --i (its index). The armed default state
   paints the "text-selected" look from the ::selection style - a solid orange
   block with cream knockout glyphs. Adding .is-outline crossfades each letter,
   left to right, back to the outline (transparent fill, orange stroke only). */
.chapter__letter {
  display: inline-block;
  background-color: var(--site-orange);   /* armed: solid orange block */
  color: var(--site-cream);               /* armed: cream knockout glyph */
  -webkit-text-stroke: inherit;           /* keep the orange stroke in both states */
  /* No transition in the armed state: re-arm is instant and off-screen. */
}
.chapter__word.is-outline .chapter__letter {
  background-color: transparent;          /* outline: no fill block */
  color: transparent;                     /* outline: no cream glyph */
  /* Hard letter-by-letter flip: zero-duration transition, only the per-letter
     delay remains, so each letter snaps with no blend. */
  transition: background-color 0s linear, color 0s linear;
  transition-delay: calc(var(--i) * 0.05s);
}
@media (prefers-reduced-motion: reduce) {
  .chapter__letter,
  .chapter__word.is-outline .chapter__letter {
    transition: none;
    transition-delay: 0s;
  }
}

/* Generic section block */
.site-section {
  position: relative;
  padding-top: clamp(44px, 5.6vw, 70px);
  padding-bottom: clamp(64px, 8vw, 104px);
}
/* FEEL page: 2.5x block gaps so the sparse page breathes instead of gaping */
.site-section--tight { padding-top: clamp(100px, 11.25vw, 140px); }

/* Full-width hairline between sections that share one chapter */
.site-rule { border-top: 1px solid var(--site-hair); }
.site-section__stmt {
  font: 500 clamp(26px, 3vw, 46px)/1.16 'Archivo', sans-serif;
  letter-spacing: -.015em;
  max-width: 940px;
}
.site-section__lead {
  font: 500 clamp(24px, 3.2vw, 32px)/1.25 'Archivo', sans-serif;
  letter-spacing: -.02em;
  max-width: 1120px;
}
.site-section__sub {
  margin-top: 70px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  max-width: 640px;
  color: var(--site-muted);
}

/* Three-column pillars (STRUCTURED / VALUE / ITERATE) */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-top: clamp(44px, 5vw, 64px);
}
.pillar { border-top: 2px solid var(--site-ink); padding-top: 20px; }
.pillar__title {
  font: 800 clamp(24px, 2vw, 30px)/1 'Archivo', sans-serif;
  letter-spacing: -.01em;
}
.pillar__body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--site-muted);
}

/* Definition rows (HANDS / FOCUS / CLARITY) */
.rows { display: flex; flex-direction: column; max-width: 1120px; }
.row {
  display: grid;
  grid-template-columns: minmax(190px, .62fr) 1.78fr;
  gap: clamp(24px, 3.2vw, 48px);
  align-items: baseline;
  border-top: 2px solid var(--site-ink);
  padding: 30px 0;
}
.row:last-child { border-bottom: 2px solid var(--site-ink); }
.row__term {
  font: 800 clamp(38px, 4vw, 62px)/0.92 'Archivo', sans-serif;
  letter-spacing: -.025em;
}
.row__def {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--site-muted);
  max-width: 560px;
}

/* Contact */
.contact__lines { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.contact__line {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--site-ink);
}
.contact__email {
  display: inline-block;
  margin-top: 52px;
  font: 800 clamp(34px, 3.6vw, 52px)/1 'Archivo', sans-serif;
  letter-spacing: -.02em;
  color: var(--site-ink);
  border-bottom: 3px solid var(--site-orange);
  padding-bottom: 6px;
}
.contact__email:hover { color: var(--site-ink); }

/* Footer */
.site-footer {
  background: var(--site-ink);
  color: #B8B2A6;
  padding-top: clamp(52px, 7vw, 72px);
  padding-bottom: 40px;
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(241, 236, 222, .14);
}
.site-footer__mark { font: 400 46px/1 'Yellowtail', cursive; color: var(--site-cream); }
.site-footer__legal {
  font-size: 14px;
  line-height: 1.8;
  max-width: 540px;
  text-align: right;
  color: #C9C3B6;
}
.site-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 26px;
  font: 600 12px/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B857A;
}
.site-footer__bar a { color: #8B857A; }
.site-footer__links { display: flex; gap: 26px; }

/* Privacy policy */
.legal { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal__eyebrow {
  font: 700 12px/1 'Archivo', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #9A9488;
}
.legal__title {
  font: 900 clamp(40px, 5vw, 72px)/0.98 'Archivo', sans-serif;
  letter-spacing: -.03em;
  margin: 20px 0 0;
}
.legal__meta {
  margin-top: 20px;
  font: 600 13px/1.6 'Space Mono', ui-monospace, monospace;
  color: var(--site-faint);
}
.legal__body { margin-top: 56px; display: flex; flex-direction: column; gap: 44px; }
.legal h2 {
  font: 800 24px/1.2 'Archivo', sans-serif;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.legal p { margin: 0; font-size: 17px; line-height: 1.7; color: #3E3A32; }

/* Responsive */
@media (max-width: 720px) {
  .pillar-grid { grid-template-columns: 1fr; gap: 32px; }
  .row { grid-template-columns: 1fr; gap: 12px; }
  .site-topbar { flex-wrap: wrap; gap: 10px; }
  .site-footer__legal { text-align: left; }
  /* The big loud chapter words (MAKE / FEEL / TALK) overran narrow phones at the
     120px floor; drop them ~20% so they fit the display, and so TALK clears the
     top-right back-to-top navmark on the last page. */
  .chapter__word { font-size: clamp(72px, 24vw, 118px); }
}