@charset "UTF-8";
/* ==========================================================================
   THE PORT — style.css
   Extracted verbatim from the single-file prototype and reorganised. Values are
   unchanged: the rendered page is pixel-identical to the original.

   WP: enqueue as handle 'port-style' AFTER 'port-fonts'. A child theme can
   override the :root block below to re-skin without touching any rule body.

   ORDER OF SECTIONS
     00  Design tokens (:root)
     01  Reset & base elements
     02  Film stage (fixed background layers, grade, grain, scrims)
     03  Chrome (wordmark, dateline, chapter index, skip link)
     04  Scene shell & shared type
     05  Reveal animation utilities
     Scene 1  Hero
     Scene 2  Manifesto
     Scene 3  Pillars
     Scene 4  The index (navigation as type)
     Scene 5  Port AI
     Scene 6  Foundation / faith
     Scene 7  Launch (date, countdown, email capture)
     08  Footer
     09  Focus states
     10  Responsive breakpoints
     11  prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   00 — DESIGN TOKENS
   The only block a WP theme should need to touch to re-skin.
   ========================================================================== */
:root{
  /* --- colour --- */
  --ink:#04070b;                        /* page ground */
  --ink-2:#0a1017;                      /* reserved deep ground */
  --light:#f4f1ea;                      /* primary text */
  --light-dim:rgba(244,241,234,.62);    /* secondary text */
  --light-hot:#fffaf2;                  /* ignited nav word / input text */
  --harbor:#f0a75c;                     /* the one accent — harbor light */
  --harbor-soft:rgba(240,167,92,.55);
  --hairline:rgba(244,241,234,.16);     /* rules under pillars */
  --hairline-soft:rgba(244,241,234,.1); /* footer top border */
  --selection-ink:#0a0704;              /* text colour on harbor fills */

  /* --- type families --- */
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* --- type scale (fluid; all clamp() as authored) --- */
  --step-h1:clamp(42px,6.7vw,106px);
  --step-h2:clamp(34px,5.6vw,84px);
  --step-nav:clamp(38px,7.4vw,104px);   /* the oversized navigation words */
  --step-line:clamp(26px,4.6vw,68px);   /* manifesto / faith lines */
  --step-pillar:clamp(30px,5.2vw,78px);
  --step-ask:clamp(28px,4.6vw,66px);
  --step-date:clamp(52px,11vw,168px);
  --step-lede:clamp(15px,1.35vw,19px);
  --step-micro:10px;                    /* mono labels */

  /* --- spacing --- */
  --gutter:clamp(20px,5vw,76px);
  --scene-pad-top:clamp(96px,14vh,180px);
  --scene-pad-bottom:clamp(72px,11vh,140px);
  --chapter-reserve:104px;              /* right padding so copy clears the chapter index */

  /* --- motion --- */
  --ease:cubic-bezier(.16,.84,.28,1);
  --t-crossfade:1.5s;                   /* film-stage layer crossfade */
  --t-reveal:1.15s;                     /* clip-path reveal */
  --t-fade:1.1s;                        /* fade-up */
  --t-ignite:.6s;                       /* nav word ignition */
  --t-parallax:.9s;
  --blink:1.15s;                        /* caret blink */

  /* --- z layers --- */
  --z-stage:0; --z-content:10; --z-scrim-top:38; --z-chrome:40;
  --z-scan:59; --z-grain:60; --z-skip:80;
}


/* ==========================================================================
   01 — RESET & BASE
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--light);
  font-family:var(--font-body);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--harbor);color:var(--selection-ink)}


/* ==========================================================================
   02 — FILM STAGE  (fixed background layers)
   Structure: #stage > #parallax > .layer[data-layer] (2 video + 3 still)
   followed by the grade stack. JS toggles .layer.on — CSS does the crossfade.
   All of this is HARDCODED DESIGN. Only the media sources are editable.
   ========================================================================== */
#stage{position:fixed;inset:0;z-index:var(--z-stage);overflow:hidden;background:
  radial-gradient(120% 90% at 60% 15%, #23384a 0%, #0b141c 45%, #04070b 100%);}
.layer{position:absolute;inset:-6% -6% -6% -6%;opacity:0;transition:opacity var(--t-crossfade) var(--ease);will-change:opacity,transform}
.layer.on{opacity:1}
.layer video,.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#parallax{position:absolute;inset:0;transition:transform var(--t-parallax) cubic-bezier(.2,.8,.2,1);will-change:transform}

/* grade stack — duotone, vertical tone, horizontal tone, vignette */
#tone{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,7,11,.78) 0%,rgba(4,7,11,.3) 30%,rgba(4,7,11,.44) 62%,rgba(4,7,11,.9) 100%);}
#tone2{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,6,10,.8) 0%,rgba(3,6,10,.55) 34%,rgba(3,6,10,.22) 58%,rgba(3,6,10,.62) 100%);}
#vignette{position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 45%,transparent 38%,rgba(2,4,7,.72) 100%)}
#duotone{position:absolute;inset:0;background:linear-gradient(200deg,rgba(15,44,66,.5),rgba(28,16,6,.42));mix-blend-mode:soft-light}

/* pointer-following warm glow — JS writes only the transform */
#glow{position:absolute;width:80vmax;height:80vmax;left:0;top:0;margin:-40vmax 0 0 -40vmax;pointer-events:none;
  background:radial-gradient(circle,rgba(240,167,92,.16) 0%,rgba(240,167,92,.07) 26%,transparent 62%);
  transform:translate3d(50vw,50vh,0);will-change:transform;transition:opacity .6s}

/* film grain (inline SVG turbulence) + scanlines */
#grain{position:fixed;inset:-120px;z-index:var(--z-grain);pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-40px,22px,0)}66%{transform:translate3d(26px,-30px,0)}100%{transform:translate3d(0,0,0)}}
#scan{position:fixed;inset:0;z-index:var(--z-scan);pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}

/* contrast scrims so type survives bright foam */
#topscrim{position:fixed;left:0;right:0;top:0;height:132px;z-index:var(--z-scrim-top);pointer-events:none;
  background:linear-gradient(180deg,rgba(3,6,10,.82) 0%,rgba(3,6,10,.4) 52%,transparent 100%)}
#botscrim{position:fixed;left:0;right:0;bottom:0;height:110px;z-index:9;pointer-events:none;
  background:linear-gradient(0deg,rgba(3,6,10,.55),transparent)}


/* ==========================================================================
   03 — CHROME  (wordmark, dateline, chapter index, skip link)
   There is NO nav bar. The chapter index at the right edge is the only
   persistent navigation affordance, and it is hidden below 900px.
   ========================================================================== */
main{position:relative;z-index:var(--z-content)}

.mark{position:fixed;top:clamp(18px,2.4vw,34px);left:var(--gutter);z-index:var(--z-chrome);display:flex;align-items:center;gap:12px}
.mark svg{width:26px;height:26px;color:var(--harbor);flex:none}
.mark .wordmark{font-family:var(--font-mono);font-size:11px;letter-spacing:.42em;text-transform:uppercase;line-height:1;padding-top:2px}
.port-prototype-label{position:fixed;top:clamp(54px,5.8vw,78px);left:var(--gutter);z-index:var(--z-chrome);margin:0;padding:5px 8px;border:1px solid rgba(235,229,216,.35);background:rgba(5,8,12,.72);color:var(--bone);font:500 9px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}

.meta{position:fixed;top:clamp(20px,2.4vw,36px);right:var(--gutter);z-index:var(--z-chrome);text-align:right;
  font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--light-dim);line-height:1.9}

.chapters{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:var(--z-chrome);display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.chapters button{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.34);transition:color .5s var(--ease)}
.chapters button i{display:block;width:20px;height:1px;background:currentColor;transition:width var(--t-ignite) var(--ease)}
.chapters button span{opacity:0;transform:translateX(6px);transition:.5s var(--ease)}
.chapters button:hover,.chapters button:focus-visible,.chapters button[aria-current="true"]{color:var(--harbor)}
.chapters button:hover span,.chapters button:focus-visible span,.chapters button[aria-current="true"] span{opacity:1;transform:none}
.chapters button[aria-current="true"] i{width:40px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:14px;z-index:var(--z-skip);background:var(--harbor);color:var(--selection-ink);padding:8px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em}


/* ==========================================================================
   04 — SCENE SHELL & SHARED TYPE
   Seven scenes, each a full-viewport type composition over the film stage.
   HARD CONSTRAINT: no cards, no boxes, no buttons, no borders except hairlines.
   ========================================================================== */
.scene{position:relative;min-height:100svh;padding:var(--scene-pad-top) var(--gutter) var(--scene-pad-bottom);display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--font-mono);font-size:clamp(9px,1vw,11px);letter-spacing:.34em;text-transform:uppercase;color:var(--harbor);margin:0 0 clamp(20px,3vw,34px)}
.eyebrow.plain{color:var(--light-dim)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:-.015em}
h1{font-size:var(--step-h1);line-height:.96}
h2{font-size:var(--step-h2);line-height:1.02}
.lede{font-size:var(--step-lede);line-height:1.65;color:var(--light-dim);max-width:34ch;font-weight:300}
.serif-it{font-style:italic;color:var(--harbor)}


/* ==========================================================================
   05 — REVEAL UTILITIES
   .rv = clip-path wipe (headlines) · .fd = fade-up (body copy).
   JS adds .in; per-element transition-delay is written inline by JS from the
   element's sibling index. Do not add delays here.
   ========================================================================== */
.rv{clip-path:inset(0 0 105% 0);opacity:0;transition:clip-path var(--t-reveal) var(--ease),opacity 1s var(--ease),transform var(--t-reveal) var(--ease)}
.rv.in{clip-path:inset(0 0 -20% 0);opacity:1}
.fd{opacity:0;transform:translateY(10px);transition:opacity var(--t-fade) var(--ease),transform var(--t-fade) var(--ease)}
.fd.in{opacity:1;transform:none}


/* ==========================================================================
   SCENE 1 — HERO  (#hero)
   Full-bleed dawn-surf video behind the founding headline.
   ========================================================================== */
#hero{justify-content:flex-end}
#hero h1{max-width:19ch}
.hero-foot{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,72px);align-items:flex-end;justify-content:space-between;margin-top:clamp(30px,5vh,58px)}
.scrollcue{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--light-dim);display:flex;align-items:center;gap:12px}
.scrollcue i{display:block;width:56px;height:1px;background:linear-gradient(90deg,var(--harbor),transparent);animation:sweep 2.6s var(--ease) infinite}
@keyframes sweep{0%{transform:scaleX(.2);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(.2);transform-origin:right}}


/* ==========================================================================
   SCENE 2 — MANIFESTO  (#manifesto)
   Four display lines, nowrap by design (they must break where authored),
   then Repaired / Equipped / Launched with roman numerals.
   ========================================================================== */
.lines{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,14px);align-items:flex-start}
.lines .l{font-family:var(--font-display);font-size:var(--step-line);line-height:1.06;white-space:nowrap}
.lines .l.dim{color:var(--light-dim)}
.state{margin-top:clamp(34px,6vh,72px);display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);align-items:baseline}
.state b{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,50px);letter-spacing:.01em}
.state b:nth-child(2){color:var(--harbor)}
.state b i{font-style:normal;color:var(--harbor-soft);font-size:.5em;vertical-align:super;font-family:var(--font-mono)}


/* ==========================================================================
   SCENE 3 — PILLARS  (#pillars)
   Three rows; each headline reveals word-by-word (JS writes the stagger delay
   onto h3 .w) while the hairline rule draws in from the left.
   ========================================================================== */
.pillars{display:flex;flex-direction:column;gap:clamp(26px,4.4vh,56px);margin-top:clamp(12px,2vh,28px)}
.pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26ch);gap:clamp(14px,3vw,54px);align-items:end;
  padding-bottom:clamp(16px,2.6vh,26px);position:relative}
.pillar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .15s}
.pillar.in:after{transform:scaleX(1)}
.pillar h3{font-size:var(--step-pillar);line-height:.98}
.pillar h3 .w{display:inline-block;opacity:0;transform:translateY(.16em);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.pillar.in h3 .w{opacity:1;transform:none}
.pillar h3 .w.q{color:var(--harbor)}
.pillar p{margin:0;font-size:clamp(13.5px,1.15vw,16px);line-height:1.7;color:var(--light-dim)}
.pillar .num{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.24em;color:var(--harbor);display:block;margin-bottom:10px}


/* ==========================================================================
   SCENE 4 — THE INDEX  (#navigate)   NAVIGATION AS OVERSIZED TYPE
   This replaces the nav bar. Hover/focus "ignites" one word (brightens,
   letter-spacing opens, hairline underline draws, preview still fades in) and
   dims + blurs the other four via .bignav.hot. JS adds .live / .hot only.
   A page builder cannot reproduce this — see HANDOFF.md § Architecture.
   ========================================================================== */
#navigate{justify-content:center}
.nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(230px,26vw,360px));gap:clamp(20px,5vw,70px);align-items:center}
.bignav{display:flex;flex-direction:column;gap:clamp(2px,.6vh,10px);margin:0;padding:0 0 0 clamp(24px,2.4vw,38px);list-style:none}
.bignav li{margin:0;position:relative}

/* the word itself */
.nav-word{display:inline-block;position:relative;font-family:var(--font-display);font-size:var(--step-nav);line-height:1.02;
  letter-spacing:-.01em;color:rgba(244,241,234,.8);transition:color .5s var(--ease),letter-spacing var(--t-ignite) var(--ease),opacity var(--t-ignite) var(--ease),filter var(--t-ignite) var(--ease),transform .35s var(--ease);
  will-change:transform,letter-spacing;padding-right:.06em}
.nav-word:after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:1px;background:var(--harbor);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.nav-word .idx{position:absolute;left:calc(-1 * clamp(24px,2.4vw,38px));top:.52em;font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.2em;color:var(--harbor-soft);transition:color .5s var(--ease)}
.nav-word.live .idx{color:var(--harbor)}

/* ignition + dimming of the rest */
.bignav.hot .nav-word{opacity:.3;filter:blur(2.5px)}
.nav-word.live{opacity:1!important;filter:none!important;color:var(--light-hot);letter-spacing:.035em;text-shadow:0 0 46px rgba(240,167,92,.35)}
.nav-word.live:after{transform:scaleX(1)}
.nav-word:focus-visible{outline:none;opacity:1!important;filter:none!important;color:var(--light-hot)}
.nav-word:focus-visible:after{transform:scaleX(1);height:2px}

/* the feathered preview panel — masked so it reads as film, not a card */
.nav-detail{position:relative;min-height:clamp(190px,30vh,290px)}
.nav-detail .item{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease);pointer-events:none}
.nav-detail .item.live{opacity:1;transform:none}
.nav-detail figure{margin:0 0 16px}
.nav-detail img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.85) contrast(1.05);
  -webkit-mask-image:radial-gradient(72% 74% at 50% 48%,#000 4%,rgba(0,0,0,.62) 54%,transparent 80%);mask-image:radial-gradient(72% 74% at 50% 48%,#000 4%,rgba(0,0,0,.62) 54%,transparent 80%)}
.nav-detail .k{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--harbor);display:block;margin-bottom:8px}
.nav-detail p{margin:0;font-size:14px;line-height:1.65;color:var(--light-dim);max-width:32ch}


/* ==========================================================================
   SCENE 5 — PORT AI  (#ask)
   A boxless prompt line: bare input, custom blinking caret, rotating
   suggestions, typed-out answer. DEMO ONLY — answers come from PORT_DATA.
   ========================================================================== */
#ask{justify-content:center}
.port-ask__headline{max-width:22ch;margin-bottom:clamp(24px,4vh,46px)}
.ask-line{display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap;
  font-family:var(--font-display);font-size:var(--step-ask);line-height:1.12;cursor:text}
.ask-label{white-space:nowrap}
.ask-field{position:relative;flex:1 1 6em;min-width:5em;display:flex;align-items:baseline}
#askInput{all:unset;font:inherit;font-family:var(--font-display);color:var(--light-hot);width:100%;caret-color:transparent;
  border-bottom:1px solid rgba(244,241,234,.14);padding-bottom:.06em;transition:border-color var(--t-ignite) var(--ease),font-size .4s var(--ease)}
#askInput.long{font-size:.56em}
#askInput.longer{font-size:.4em}
#askInput::placeholder{color:rgba(244,241,234,.26)}
#askInput:focus{border-color:var(--harbor-soft)}
.caret{position:absolute;left:0;bottom:.22em;width:.44em;height:.06em;background:var(--harbor);animation:blink var(--blink) steps(1) infinite;pointer-events:none;transition:opacity .3s}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ask-under{margin-top:clamp(20px,3.4vh,38px);min-height:112px}
.suggests{display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(8px);transition:.7s var(--ease)}
.suggests.show{opacity:1;transform:none}
.suggest{all:unset;cursor:pointer;display:flex;gap:12px;align-items:baseline;font-size:clamp(13px,1.15vw,15.5px);
  color:var(--light-dim);transition:color .4s var(--ease),transform .4s var(--ease);max-width:56ch;line-height:1.55}
.suggest span.arw{font-family:var(--font-mono);color:var(--harbor);font-size:.85em}
.suggest:hover,.suggest:focus-visible{color:var(--light-hot);transform:translateX(5px)}
.answer{font-size:clamp(14px,1.3vw,17.5px);line-height:1.75;color:rgba(244,241,234,.9);max-width:58ch;min-height:1.75em}
.answer .cur{display:inline-block;width:.5em;height:1em;background:var(--harbor);vertical-align:-.12em;animation:blink var(--blink) steps(1) infinite}
.answer em{font-style:normal;color:var(--harbor)}
.ask-note{margin-top:18px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.4)}


/* ==========================================================================
   SCENE 6 — FOUNDATION  (#faith)
   ========================================================================== */
#faith .lines{max-width:30ch}
.small-print{margin-top:clamp(26px,4vh,48px);max-width:40ch;font-size:14px;line-height:1.75;color:var(--light-dim)}


/* ==========================================================================
   SCENE 7 — LAUNCH  (#launch)
   Founding-film date, live countdown, boxless email capture.
   .keep-go is a submit control styled as a type line — NOT a button chrome.
   ========================================================================== */
#launch{justify-content:flex-end}
.date{display:flex;align-items:flex-end;gap:clamp(12px,2.4vw,34px);flex-wrap:wrap}
.date .big{font-family:var(--font-display);font-size:var(--step-date);line-height:.86;letter-spacing:-.02em}
.date .side{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--harbor);line-height:2;padding-bottom:.6em}
.count{display:flex;gap:clamp(16px,3vw,40px);margin-top:clamp(22px,3.6vh,40px);flex-wrap:wrap}
.count div{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--light-dim)}
.count b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,42px);letter-spacing:0;color:var(--light);margin-bottom:4px}
.keep{margin-top:clamp(28px,4.6vh,56px);display:flex;gap:clamp(14px,2vw,26px);align-items:baseline;flex-wrap:wrap}
.keep-field{position:relative;flex:1 1 min(30ch,100%)}
#email{all:unset;font-family:var(--font-body);font-weight:300;font-size:clamp(15px,1.3vw,18px);color:var(--light-hot);width:100%;
  border-bottom:1px solid rgba(244,241,234,.18);padding:6px 0;transition:border-color .5s var(--ease)}
#email::placeholder{color:rgba(244,241,234,.35)}
#email:focus{border-color:var(--harbor)}
.keep-go{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--harbor);
  position:relative;padding-bottom:5px;white-space:nowrap}
.keep-go:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--harbor);transform:scaleX(.24);transform-origin:left;transition:transform var(--t-ignite) var(--ease)}
.keep-go:hover:after,.keep-go:focus-visible:after{transform:scaleX(1)}
.keep-msg{font-family:var(--font-mono);font-size:var(--step-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--harbor);opacity:0;transition:opacity .6s}
.keep-msg.show{opacity:1}
.keep-msg.is-error{color:#e6a08a}
.port-signup__consent{flex:1 0 100%;display:flex;align-items:flex-start;gap:9px;max-width:62ch;margin-top:-4px;
  font-family:var(--font-mono);font-size:9px;line-height:1.65;letter-spacing:.08em;color:rgba(244,241,234,.56)}
.port-signup__consent input{width:13px;height:13px;margin:1px 0 0;accent-color:var(--harbor);flex:0 0 auto}
.port-signup__consent a{color:var(--light-dim);text-decoration:underline;text-decoration-color:rgba(244,241,234,.28);text-underline-offset:3px}
.port-signup__consent a:hover,.port-signup__consent a:focus-visible{color:var(--harbor)}
.port-signup.is-busy .keep-go{opacity:.55;cursor:wait}
.port-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}


/* ==========================================================================
   08 — FOOTER
   ========================================================================== */
footer{position:relative;z-index:var(--z-content);padding:clamp(56px,9vh,110px) var(--gutter) clamp(30px,5vh,52px);border-top:1px solid var(--hairline-soft)}
.foot-grid{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);justify-content:space-between;align-items:flex-start}
.foot-grid div{max-width:34ch}
.foot-grid h4{font-family:var(--font-mono);font-weight:500;font-size:var(--step-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--harbor);margin:0 0 12px}
.foot-grid p,.foot-grid li{font-size:13.5px;line-height:1.8;color:var(--light-dim);margin:0}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid a{position:relative}
.foot-grid a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--harbor);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.foot-grid a:hover:after,.foot-grid a:focus-visible:after{transform:scaleX(1)}
.foot-base{margin-top:clamp(38px,6vh,72px);display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.42)}


/* ==========================================================================
   09 — FOCUS STATES  (keyboard parity with hover — required, do not remove)
   ========================================================================== */
:focus-visible{outline:1px solid var(--harbor);outline-offset:6px}


/* ==========================================================================
   10 — RESPONSIVE
   ≥901px  reserve right padding so copy never collides with the chapter index
   ≤900px  chapter index hidden, index scene stacks, nav dim softened
   ≤520px  manifesto lines may wrap, ask line shrinks
   ========================================================================== */
@media (min-width:901px){
  .scene{padding-right:calc(var(--gutter) + var(--chapter-reserve))}
}
@media (max-width:900px){
  .chapters{display:none}
  .nav-wrap{grid-template-columns:1fr;gap:clamp(18px,4vh,34px)}
  .nav-detail{min-height:clamp(230px,32vh,300px)}
  .nav-detail img{max-width:min(78%,340px);aspect-ratio:16/9}
  .ask-under{min-height:auto}
  .pillar{grid-template-columns:1fr;gap:14px;align-items:start}
  .meta span.hide-s{display:none}
  .scene{min-height:auto;padding:clamp(88px,14vh,120px) var(--gutter) clamp(64px,10vh,96px)}
  #hero{min-height:100svh}
  .bignav.hot .nav-word{opacity:.42;filter:blur(1.5px)}
}
@media (max-width:520px){
  .mark .wordmark{letter-spacing:.3em;font-size:10px}
  .meta{font-size:9px;letter-spacing:.16em}
  .ask-line{font-size:clamp(24px,7.6vw,34px)}
  .lines .l{white-space:normal}
}


/* ==========================================================================
   11 — REDUCED MOTION  (mandatory — keep in sync with the JS guards)
   Everything becomes static: no grain drift, no wipes, no word stagger.
   JS additionally pauses both stage videos and disables the typing effect.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{clip-path:none;opacity:1}
  .fd{opacity:1;transform:none}
  #grain{animation:none}
  .pillar h3 .w{opacity:1;transform:none}
  .pillar:after{transform:scaleX(1)}
}