/* ===========================================================
   AI CaliBaja / IA CaliBaja
   Register (2026-09-16, Omar's reference): grotesk fashion
   editorial. Giant sentence-case word, hairline caption row,
   flat colour blocks where photographs will go, a ticker, an
   asymmetric editorial passage, a dark signup band.

   Choreography (2026-09-17, Mondo Robot as the feel reference):
   the viewport is a stage and the page moves through it. Four
   pinned stages (hero dock + bleed, the seam, the weekend strip)
   and one CSS sticky stack. A small script writes scroll progress
   into --p on each stage; everything visual is CSS reading --p.
   Rules: transform / opacity / clip-path only. Every rest state
   (--p:0, or --p:1 for entries) is the readable, no-JS layout.
   Nothing here is hidden until motion fires. html.js gates all
   of it; reduced-motion visitors and no-JS visitors get the
   static page.
   =========================================================== */

:root{
  --paper:#F6F5F1;
  --ink:#12181F;
  --muted:#59636F;
  --faint:#98A2AE;
  --line:rgba(18,24,31,.18);

  --agave:#D9542B;
  --pacific:#0F4C81;
  --pacific-deep:#092E4F;
  --sun:#F5A524;

  --gut:clamp(14px,1.6vw,24px);
  --nav-h:44px;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.62,0,.21,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.js){scroll-behavior:smooth}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--pacific);outline-offset:3px;border-radius:3px}
.dark :focus-visible,.c-ink :focus-visible{outline-color:var(--sun)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* shared type */
h2{
  font-size:clamp(30px,3.6vw,54px);line-height:1.0;letter-spacing:-.035em;
  font-weight:600;font-variation-settings:"wdth" 106;
}
h3{font-weight:600;letter-spacing:-.02em;line-height:1.1}
p{max-width:62ch}

/* colour blocks: .block is the default, a .c-* class wins */
.block{display:block;background:var(--pacific)}
.c-sun{background:var(--sun);color:var(--ink)}
.c-pacific{background:var(--pacific);color:var(--paper)}
.c-ink{background:var(--ink);color:var(--paper)}
.c-agave{background:var(--agave);color:var(--paper)}
.c-agave p,.c-agave .h-time{opacity:1;font-weight:500}

/* ---------- nav ---------- */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--nav-h);padding:0 var(--gut);font-size:13px;
  background:var(--paper);
}
html.js{scroll-padding-top:var(--nav-h)}
html.js .nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;color:var(--nav-fg,var(--ink));transition:color .25s}
html.js .nav.on-dark{--nav-fg:var(--paper)} /* set by the script from whatever is painted under the bar */
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.01em;justify-self:start;padding:13px 0;margin:-13px 0}
/* the word is invisible in the nav until the giant one docks into it */
html.js .brand-text{opacity:var(--bw,0)}
.brand-text{font-variation-settings:"wdth" 112;letter-spacing:-.048em}
.nav-links{display:flex;gap:22px}
.nav-links a{padding:13px 2px;margin:-13px -2px}
.lang{display:flex;gap:14px;justify-self:end}
.lang a{color:inherit;opacity:.55;padding:13px 4px;margin:-13px -4px;transition:opacity .2s}
.lang a[aria-current="true"]{opacity:1;font-weight:600}
.lang a:hover{opacity:1}
@media(max-width:700px){
  .nav{grid-template-columns:1fr auto;gap:16px}
  .nav-links{display:none} /* phones get brand + ES/EN only; the lone "La lista" chip read as a stray button (Omar 2026-09-18) */
}

/* ---------- hover: text links roll like the departures board ----------
   The visible line lifts out and its twin rises in from below. Pointer devices only;
   the anchor keeps its padding for the tap target, the .roll clips the move. */
.roll{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25;height:1.25em}
.roll>span{display:block;transition:transform .42s var(--ease)} /* the twin is cloned by site.js; without it nothing moves */
@media (hover:hover) and (pointer:fine){
  a:hover>.roll>span{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.roll>span{transition:none}}

/* AI <-> IA in the brand: two fixed slots roll vertically */
.brand-mark{display:inline-flex}
.wm-slot{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:top}
.wm-roll{display:block;transition:transform .5s var(--ease)}
.wm-roll i{display:block;font-style:normal;height:1em;line-height:1}
.wm-slot:first-child .wm-roll i{text-align:right}
.wm-slot:last-child  .wm-roll i{text-align:left}
html[data-mark="ia"] .wm-roll,
html[data-mark="ai"][data-preview] .wm-roll{transform:translateY(-1em)}
html[data-mark="ia"][data-preview] .wm-roll{transform:translateY(0)}

/* ---------- pinned stages ---------- */
.pin{position:relative;--p:0}
/* the seam stage slides up over the hero's last frame: the border arrives through the orange */
html.js .pin-seam{margin-top:-30svh}
html.js .pin{height:calc(var(--n,2) * 100svh)}
html.js .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.pin-hero{--n:2.3}
.pin-seam{--n:2}
.pin-h{--n:2.2}
@media(max-width:700px){
  .pin-hero{--n:2}
  .pin-h{--n:2.4}
}

/* ===========================================================
   1. HERO: the word docks into the nav, the block swallows the stage
   =========================================================== */
.hero-stage{display:flex;flex-direction:column;padding-top:var(--nav-h)}
html.js .hero-stage{overflow:visible} /* the bleed may extend below 100svh when the iOS toolbar collapses */
html:not(.js) .hero-stage{padding-top:0;padding-bottom:clamp(40px,5vw,72px)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0}

.pin-hero{
  --p1:clamp(0, calc(var(--p) / .4), 1);             /* dock: done by .4 */
  --p1f:clamp(0, calc((var(--p) - .4) / .04), 1);    /* crossfade only once the sizes match */
  --pc:clamp(0, calc(var(--p) / .12), 1);            /* caption row leaves before the orange reaches it */
  --p2:clamp(0, calc((var(--p) - .1) / .62), 1);     /* bleed rises as the word leaves, full by .72 */
  --pt:clamp(0, calc((var(--p) - .4) / .16), 1);     /* block copy leaves */
  --p3:clamp(0, calc((var(--p) - .55) / .2), 1);     /* closing line lands .55 to .75 */
}

.giant{
  display:block;padding:0 var(--gut);
  font-weight:600;font-variation-settings:"wdth" 112;
  letter-spacing:-.048em;line-height:.86;white-space:nowrap;
  font-size:clamp(64px,17.6vw,560px); /* JS fits this exactly */
  margin-top:2px;margin-bottom:.09em;
}
.giant-word{display:inline-block;vertical-align:top}
html.js .giant{
  transform-origin:0 0;
  transform:translate(calc(var(--dx,0px) * var(--p1)), calc(var(--dy,0px) * var(--p1)))
            scale(calc(1 + (var(--ds,1) - 1) * var(--p1)));
  opacity:calc(1 - var(--p1f));
  will-change:transform;
}

.caprow{display:flex;align-items:center;gap:16px;padding:14px var(--gut) 12px;font-size:12.5px;line-height:1.3}
.caprow .rule{flex:1 1 24px;height:1px;background:var(--line)}
.caprow .cap-r{white-space:nowrap;color:var(--muted)}
html.js .caprow{opacity:calc(1 - var(--pc));transform:translateY(calc(-12px * var(--pc)))}

/* where the photo goes. Without JS it is the orange block itself;
   with JS it is a transparent layout anchor and .hero-bleed paints
   the orange underneath it, clipped to this exact rectangle at rest. */
.hero-block{
  position:relative;margin:0 var(--gut);
  aspect-ratio:16/7;background:var(--agave);color:#fff;
  display:flex;align-items:flex-end;justify-content:center;
}
html.js .hero-block{flex:1;min-height:160px;aspect-ratio:auto;margin-bottom:var(--gut)}
html.js .hero-block{background:transparent} /* the bleed layer paints the orange */
html.js .pin-hero:not(.measured) .hero-block{background:var(--agave)} /* until it knows the rectangle */
/* the hero video: inside the block without JS (object-fit cover); with JS the script moves it
   into the bleed layer so the frame itself opens to full screen. A flat scrim keeps the copy legible. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;background:var(--agave)}
.hero-block{overflow:hidden}
.hero-block::after,.hero-bleed::after{content:"";position:absolute;inset:0;background:rgba(18,24,31,.22);pointer-events:none}
html.js .hero-block::after{content:none}
.hero-block-copy{position:relative;z-index:1;text-align:center;padding:0 var(--gut) clamp(22px,3vw,44px)}
.hero-block-copy p{max-width:30ch;font-size:clamp(17px,1.6vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-top:14px;color:#fff}
html.js .hero-block-copy{opacity:calc(1 - var(--pt));transform:translateY(calc(10px * var(--pt)))}
.pill{
  display:inline-block;padding:6px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.75);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.hero-bleed{display:none}
html.js .hero-bleed{
  display:block;position:absolute;inset:0;bottom:calc(100svh - 100lvh);z-index:1;background:var(--agave);overflow:hidden;
  clip-path:inset(
    calc(var(--bt,0px) * (1 - var(--p2)))
    calc(var(--br,0px) * (1 - var(--p2)))
    calc((var(--bb,0px) + (100lvh - 100svh)) * (1 - var(--p2)))
    calc(var(--bl,0px) * (1 - var(--p2)))
  );
  will-change:clip-path;
}
/* the thesis line: a static line under the block for no-JS and reduced-motion visitors,
   the closing beat of the pinned hero for everyone else */
.hero-state{
  display:block;padding:clamp(18px,2.4vw,32px) var(--gut) 0;
  font-size:clamp(30px,5vw,72px);line-height:.95;letter-spacing:-.04em;font-weight:600;font-variation-settings:"wdth" 108;
}
html.js .pin-hero:not(.measured) .hero-bleed{display:none}
html.js .hero-state{
  display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:3;pointer-events:none;
  padding:var(--nav-h) var(--gut) 0;text-align:center;color:var(--paper);
  font-size:clamp(34px,6vw,96px);
  opacity:var(--p3);transform:translateY(calc(28px * (1 - var(--p3))));
}


/* ===========================================================
   2. THE SEAM: the orange plane splits along the border
   =========================================================== */
.pin-seam{
  --ps:clamp(0, calc((var(--p) - .04) / .9), 1);      /* halves part, almost the whole pin */
}
.seam-stage{position:relative;background:var(--paper)}
html.js .seam-stage{overflow:visible;clip-path:inset(0 0 calc(100svh - 100lvh) 0)}
.seam-behind{min-height:100%;display:grid;align-content:center;padding:clamp(56px,7vw,110px) var(--gut)}
html.js .seam-behind{height:100%;padding-top:calc(var(--nav-h) + 24px);padding-bottom:24px}
.seam-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,40px) clamp(24px,4vw,64px);align-items:start;max-width:1200px}
.seam-copy h2{grid-column:1 / -1;max-width:18ch}
.seam-copy p{color:var(--muted);font-size:clamp(15px,1.15vw,17px)}
.seam-copy .btn{grid-column:1 / -1;justify-self:start}
@media(max-width:860px){.seam-copy{grid-template-columns:1fr}}

.seam-north,.seam-south{display:none}
html.js .seam-north,html.js .seam-south{
  display:block;position:absolute;left:0;right:0;z-index:2;background:var(--agave);will-change:transform;
}
html.js .pin-seam:not(.measured) .seam-north,html.js .pin-seam:not(.measured) .seam-south{display:none}
html.js .seam-north{top:0;height:54%;transform:translateY(calc(-101% * var(--ps)))}
html.js .seam-north{background:var(--pacific)}
html.js .seam-south{top:54%;bottom:calc(100svh - 100lvh);border-top:2px solid var(--paper);transform:translateY(calc(101% * var(--ps)))}
.seam-label{
  position:absolute;right:var(--gut);z-index:1;
  font-size:13px;font-weight:500;color:var(--paper);
}
.seam-north .seam-label{bottom:12px}
.seam-south .seam-label{top:12px}
/* phones: the copy would not fit a pinned stage, so the seam is a plain section there */
@media(max-width:700px){
  html.js .pin-seam{height:auto}
  html.js .pin-seam .stage{position:static;height:auto;overflow:visible}
  html.js .seam-behind{height:auto;padding:clamp(56px,7vw,110px) var(--gut)}
  html.js .seam-north,html.js .seam-south{display:none}
  html.js .seam-stage{clip-path:none}
  /* the border, as two bars with their labels, so the device survives on phones */
  .seam-behind{position:relative}
  .seam-behind::before,.seam-behind::after{
    display:block;font-size:13px;font-weight:500;padding:8px 0;
  }
  .seam-behind::before{content:attr(data-north);border-top:10px solid var(--pacific);color:var(--pacific);margin-bottom:18px}
  .seam-behind::after{content:attr(data-south);border-bottom:10px solid var(--agave);color:var(--agave);margin-top:18px;text-align:right}
}

/* ---------- ticker: velocity-linked with JS, a plain marquee without ---------- */
.ticker{
  background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;
  font-size:clamp(16px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;
}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;will-change:transform}
.ticker-track b{color:var(--sun);font-weight:400;font-size:.9em}
html:not(.js) .ticker-track{animation:tick 42s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){html:not(.js) .ticker-track{animation:none}}

/* ===========================================================
   3. THE STACK: three formats pile up under a pinned counter (CSS sticky)
   =========================================================== */
.stack{padding:clamp(56px,7vw,110px) var(--gut) 0}
.stack-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,3vw,48px);align-items:start}
.stack-side{position:sticky;top:calc(var(--nav-h) + 6svh);height:calc(100svh - var(--nav-h) - 12svh);display:flex;flex-direction:column}
@media(min-width:861px){html:not(.js) .stack-side{top:6svh;height:calc(100svh - 12svh)}}
.stack-num{font-size:clamp(90px,11vw,180px);line-height:1;font-weight:600;letter-spacing:-.05em;height:1em;overflow:hidden;font-variation-settings:"wdth" 112}
.num-roll{display:block;transition:transform .6s var(--ease);transform:translateY(calc(-1em * var(--idx,0)))}
.num-roll i{display:block;height:1em;font-style:normal}
.stack-list{margin-top:18px}
.stack-list li{padding:12px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.5vw,22px);font-weight:500;color:var(--muted);transition:color .35s}
.stack-list li.is-active{color:var(--ink)}
.stack-note{margin-top:auto;font-size:13px;color:var(--muted);max-width:26ch}

.stack-cards{display:flex;flex-direction:column;gap:40svh}
/* Sticky is constrained by each card's own margin box inside the parent's content box.
   Spacing as a flex gap (not margins) lets all three cards share one constraint and
   release together; the empty spacer turns the last gap into the last card's hold. */
.stack-cards::after{content:"";display:block;flex:none;height:0}
.scard{
  position:sticky;top:calc(var(--nav-h) + 6svh);
  height:calc(100svh - var(--nav-h) - 12svh);
  padding:clamp(20px,2.6vw,36px);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  transform-origin:50% 0;
  transform:scale(calc(1 - .06 * var(--p,0)));
  will-change:transform;
}
@media(min-width:861px){html:not(.js) .scard{top:6svh;height:calc(100svh - 12svh)}}
.scard::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:calc(.38 * var(--p,0));pointer-events:none}
.scard-top{display:flex;justify-content:space-between;font-size:13px;font-weight:500;opacity:.85}
.scard h3{font-size:clamp(24px,2.7vw,42px);max-width:22ch;font-variation-settings:"wdth" 104}
.scard p{font-size:clamp(14px,1.1vw,16px);max-width:52ch;opacity:.86}
.scard-facts{display:flex;flex-wrap:wrap;gap:0 22px;font-size:13.5px;border-top:1px solid currentColor;padding-top:12px;opacity:.9}
.scard-facts li{padding:2px 0}
@media(max-width:860px){
  .stack-grid{grid-template-columns:1fr;gap:12px}
  .stack-grid{display:block} /* no grid-sticky dependency on phones */
  html:not(.js) .stack-side{top:0}
  html:not(.js) .scard{top:62px;height:calc(100svh - 62px - 8svh)}
  .stack-side{position:sticky;top:var(--nav-h);z-index:2;height:auto;flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--paper);padding:10px 0}
  .stack-num{font-size:28px}
  .stack-list{display:flex;gap:14px;margin:0}
  .stack-list li{border:0;padding:0;font-size:15px}
  .stack-note{display:none}
  .scard{top:calc(var(--nav-h) + 62px);height:calc(100svh - var(--nav-h) - 62px - 8svh)}
}

/* ===========================================================
   4. THE WEEKEND: a horizontal strip driven by vertical scroll
   =========================================================== */
.h-stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,40px);padding-top:var(--nav-h)}
html:not(.js) .h-stage{padding:clamp(56px,7vw,110px) 0}
.h-head{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.h-head h2{max-width:14ch}
.h-head p{color:var(--muted);max-width:34ch;font-size:15px}
.h-track{display:flex;gap:14px;padding:0 var(--gut);width:max-content;will-change:transform}
html.js .h-track{transform:translate3d(calc(-1px * var(--hx,0) * var(--p)),0,0)}
html:not(.js) .h-track{width:auto;flex-wrap:wrap}
.hcard{
  flex:0 0 clamp(300px,34vw,520px);height:clamp(300px,52svh,460px);
  padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.h-time{font-size:13px;font-weight:500;opacity:.85}
.hcard h3{font-size:clamp(24px,2.7vw,42px);font-variation-settings:"wdth" 104}
.hcard p{font-size:14.5px;max-width:40ch;opacity:.88}
@media(max-width:700px){
  .hcard{flex-basis:78vw;height:clamp(300px,58svh,440px)}
}

/* ===========================================================
   5. CITIES, and the four photo slots arriving from four edges
   =========================================================== */
.cities{padding:clamp(56px,7vw,110px) var(--gut) 0;overflow:hidden;overflow:clip} /* the arriving cards wait outside the section; clip keeps them out of the page's scroll width */
.cities-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,4vw,64px);align-items:end}
.cities-head p{color:var(--muted);max-width:46ch;font-size:clamp(15px,1.15vw,17px)}
.cities-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3.6vw,52px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
.cities-cols h3{font-size:clamp(22px,2vw,30px);margin-bottom:10px}
.cities-cols p{color:var(--muted);font-size:15.5px;max-width:48ch}
@media(max-width:700px){.cities-head,.cities-cols{grid-template-columns:1fr}}

.cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin-top:clamp(40px,5vw,72px);
}
.cards .block{aspect-ratio:4/5;position:relative;overflow:hidden}
.cards .block img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cards figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px}
.cards figcaption span:last-child{color:var(--muted)}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* --p defaults to 1 (in place). The script lowers it for cards still below the fold. */
[data-enter]{--p:1;--pl:clamp(0, calc((var(--p) - var(--d,0)) / (1 - var(--d,0))), 1)}
html.js [data-enter]{transform:translate(calc(var(--ex,0vw) * (1 - var(--pl))), calc(var(--ey,0svh) * (1 - var(--pl))));will-change:transform}
/* four offsets, one direction each; every frozen frame is a staggered grid, never an empty one */
[data-enter="left"]{--ey:16svh;--d:0}
[data-enter="near"]{--ey:-7svh;--d:0}
[data-enter="far"]{--ey:9svh;--d:0}
[data-enter="right"]{--ey:-14svh;--d:0}

/* ===========================================================
   6. WHO RUNS IT + sponsors
   =========================================================== */
.org{padding:clamp(56px,7vw,110px) var(--gut)}
.org-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:start}
.org h2{max-width:14ch;margin-bottom:18px}
.org p{color:var(--muted);font-size:clamp(15px,1.15vw,17px);max-width:56ch}
.org p + p{margin-top:14px}
.sponsors{padding-top:clamp(8px,4vw,64px)}
.sponsors h3{font-size:15px;font-weight:600}
.sponsors h3{padding-bottom:12px;border-bottom:1px solid var(--line)}
.link{display:inline-block;margin-top:16px;font-size:14px;padding:12px 0;margin-bottom:-12px;border-bottom:1px solid currentColor;line-height:1.25}
@media(max-width:760px){.org-grid{grid-template-columns:1fr}}

/* ===========================================================
   7. QUESTIONS
   =========================================================== */
.faq{padding:0 var(--gut) clamp(56px,7vw,110px);display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:24px clamp(24px,4vw,64px);align-items:start}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:18px 0;font-size:clamp(17px,1.5vw,22px);font-weight:500;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-weight:400;color:var(--muted);flex:none;display:inline-block;transition:transform .3s var(--ease),color .2s}
.faq-list summary:hover::after{color:var(--ink)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 20px;color:var(--muted);max-width:58ch;font-size:15.5px}
@media(max-width:760px){.faq{grid-template-columns:1fr}}

/* ===========================================================
   8. THE LIST (dark band); the headline's words rise as it enters
   =========================================================== */
.dark{
  --p:1;
  background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;
  padding:clamp(56px,7vw,110px) var(--gut);
}
.dark-left{display:flex;align-items:flex-end}
.dark-left p{font-size:13.5px;line-height:1.5;color:rgba(246,245,241,.62);max-width:28ch}
.dark h2{max-width:17ch}
.dark .sub{margin-top:16px;font-size:16px;line-height:1.5;color:rgba(246,245,241,.72);max-width:46ch}
@media(max-width:860px){
  .dark{grid-template-columns:1fr;gap:26px}
  .dark-left{order:2}
}

/* buttons + form */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:100px;border:1px solid transparent;
  background:var(--ink);color:var(--paper);
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .16s ease-out;
}
.btn>*{position:relative}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--pacific);
  clip-path:inset(100% 0 0 0);transition:clip-path .38s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .btn:hover::before{clip-path:inset(0 0 0 0)} }
.btn:active{transform:scale(.97)}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun::before{background:#ffb648}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}}
.signup{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;max-width:560px;margin-top:28px}
.signup input[type=email]{
  flex:1 1 240px;min-width:0;
  padding:13px 18px;border-radius:100px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);
  font-family:inherit;font-size:16px;color:#fff;
  transition:border-color .2s,background .2s;
}
.signup input[type=email]::placeholder{color:rgba(246,245,241,.5)}
.signup input[type=email]:focus{border-color:var(--sun);background:rgba(255,255,255,.14);outline:none}
.signup .btn{flex:0 0 auto}
.form-msg{margin-top:12px;font-size:14px;font-weight:500;min-height:1.2em}
.form-msg[data-state=ok]{color:var(--sun)}
.form-msg[data-state=err]{color:#ff9d8f}
@media(max-width:520px){
  .signup{flex-direction:column}
  .signup input[type=email],.signup .btn{width:100%;flex:1 1 auto}
  .signup .btn{padding:14px 21px}
}

/* footer */
.foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  padding:18px var(--gut) 28px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.foot a{display:inline-block;padding:14px 0;margin:-14px 0}
.foot a:hover{color:var(--ink)}
.foot .sep{color:var(--faint)}

/* short windows (landscape phones, split screens), last so it wins by source order: nothing pins, nothing is fixed-height */
@media(max-height:600px){
  html.js .pin{height:auto}
  html.js .pin-seam{margin-top:0}
  html.js .stage{position:static;height:auto;overflow:visible}
  html.js .hero-stage{padding-top:var(--nav-h)}
  html.js .hero-block{flex:none;aspect-ratio:16/7;background:var(--agave)}
  html.js .hero-bleed,html.js .seam-north,html.js .seam-south{display:none}
  html.js .hero-state{display:block;position:static;opacity:1;transform:none;color:var(--ink);text-align:left;padding:clamp(18px,2.4vw,32px) var(--gut) clamp(24px,4vw,48px);font-size:clamp(30px,5vw,72px);pointer-events:auto}
  html.js .giant{transform:none;opacity:1}
  html.js .caprow,html.js .hero-block-copy{opacity:1;transform:none}
  html.js .h-track{width:auto;flex-wrap:wrap;transform:none}
  .scard,.stack-side{position:static;height:auto}
  html.js .scard,html.js .stack-side,html:not(.js) .scard,html:not(.js) .stack-side{position:static;height:auto;top:auto}
  .stack-cards{gap:16px}
  .seam-behind::before,.seam-behind::after{display:none}
}