/* ALGORAND: The Vatican's Quest. Deck stylesheet. Build 1.
   Palette drawn from the frames: teal green stone, deep black, cardinal red accent,
   candle amber reserved for the equality and forging chapters. No em or en dashes. */

@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --abyss:#05080a;
  --ink:#0b1214;
  --ink2:#101a1c;
  --stone:#8fa39c;
  --mist:#cdd8d2;
  --white:#eef2ef;
  --cardinal:#b3222b;
  --cardinal-dim:#7c1a21;
  --amber:#c9955a;
  --hairline:rgba(143,163,156,.22);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --hud-top:44px;
  --hud-bottom:64px;
  --pad:clamp(20px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--abyss);
  color:var(--mist);
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--cardinal);color:var(--white)}
a{color:inherit}

/* ---------- HUD ---------- */
.hud-top,.hud-bottom{
  position:fixed;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stone);
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
body.gate-open .hud-top,body.gate-open .hud-bottom{opacity:1}
.hud-top{top:0;height:var(--hud-top)}
.hud-bottom{bottom:0;height:var(--hud-bottom)}
.hud-top .hud-title{color:var(--mist)}
.hud-roman{
  font-family:var(--serif);font-size:15px;letter-spacing:.35em;font-weight:600;
  color:var(--cardinal);min-width:5ch;text-align:center;
}
.hud-station{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-progress{
  position:fixed;bottom:var(--hud-bottom);left:0;right:0;height:1px;z-index:60;
  background:rgba(143,163,156,.15);
}
.hud-progress i{
  display:block;height:100%;background:var(--cardinal);
  transform-origin:0 50%;transform:scaleX(0);
}

/* ---------- GATE ---------- */
#gate{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,var(--ink2) 0%,var(--abyss) 70%);
  transition:opacity 1.4s ease;
}
#gate.open{opacity:0;pointer-events:none}
.gate-box{text-align:center;padding:0 24px;max-width:520px}
.gate-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--stone);text-transform:uppercase;margin-bottom:26px}
.gate-title{font-size:clamp(38px,6vw,64px);font-weight:600;letter-spacing:.14em;color:var(--white);line-height:1.05}
.gate-sub{font-style:italic;color:var(--stone);margin-top:10px;font-size:clamp(17px,2vw,22px)}
.gate-form{margin-top:44px;display:flex;gap:0;justify-content:center;border-bottom:1px solid var(--hairline);max-width:340px;margin-left:auto;margin-right:auto}
#gateInput{
  flex:1;background:none;border:0;outline:0;color:var(--white);
  font-family:var(--mono);font-size:14px;letter-spacing:.35em;text-transform:uppercase;
  padding:12px 4px;text-align:center;
}
#gateInput::placeholder{color:rgba(143,163,156,.5);letter-spacing:.25em}
#gateBtn{
  background:none;border:0;color:var(--cardinal);font-family:var(--mono);
  font-size:11px;letter-spacing:.3em;cursor:pointer;padding:12px 8px;text-transform:uppercase;
}
#gateBtn:focus-visible,#gateInput:focus-visible{outline:1px solid var(--cardinal);outline-offset:4px}
.gate-err{font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--cardinal);margin-top:18px;min-height:14px;text-transform:uppercase}
.gate-legal{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:rgba(143,163,156,.55);text-transform:uppercase}

/* ---------- SHARED SECTION GRAMMAR ---------- */
main{opacity:0;transition:opacity 1.6s ease .3s}
body.gate-open main{opacity:1}
section{position:relative}
.full{min-height:100vh;min-height:100svh}
.frame{position:relative;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,10,.55) 0%,rgba(5,8,10,.1) 30%,rgba(5,8,10,.15) 62%,rgba(5,8,10,.8) 100%)}
.copy{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:clamp(90px,14vh,160px) var(--pad)}
.copy.wide{max-width:1080px}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--cardinal);margin-bottom:26px;
}
.eyebrow.grey{color:var(--stone)}
h2{
  font-size:clamp(30px,4.4vw,58px);font-weight:600;letter-spacing:.03em;
  color:var(--white);line-height:1.12;margin-bottom:30px;text-wrap:balance;
}
h3{font-size:clamp(21px,2.4vw,30px);font-weight:600;color:var(--white);letter-spacing:.02em;margin-bottom:14px}
p{margin-bottom:1.2em;color:var(--mist)}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(20px,2vw,27px);line-height:1.55;color:var(--white)}
.rule{width:56px;height:1px;background:var(--cardinal);margin:34px 0;border:0}

/* Two voices */
.mv{
  font-style:italic;color:var(--stone);
  font-size:clamp(19px,1.9vw,26px);line-height:1.6;
  max-width:640px;margin:1.6em 0;
  padding-left:22px;border-left:1px solid var(--hairline);
}
.mv::before{content:'the mental voice';display:block;font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(143,163,156,.6);margin-bottom:12px}
.iv{margin:2.2em 0;text-align:center}
.iv blockquote{
  font-size:clamp(21px,2.3vw,31px);line-height:1.5;color:var(--white);
  font-weight:500;max-width:760px;margin:0 auto;text-wrap:balance;
}
.iv blockquote::before{content:'\201C'}
.iv blockquote::after{content:'\201D'}
.iv cite{
  display:block;margin-top:20px;font-style:normal;font-family:var(--mono);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cardinal);
}
.iv cite span{color:var(--stone)}

/* ---------- COVER ---------- */
#cover{display:flex;align-items:flex-end}
#cover .frame,#cover .frame img{position:absolute;inset:0}
#cover .cover-copy{
  position:relative;z-index:3;width:100%;
  padding:0 var(--pad) calc(var(--hud-bottom) + 7vh);
}
.cover-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.5em;color:var(--mist);text-transform:uppercase;margin-bottom:22px}
.cover-title{
  font-size:clamp(58px,11vw,168px);font-weight:600;letter-spacing:.1em;
  color:var(--white);line-height:.95;text-shadow:0 2px 60px rgba(5,8,10,.8);
}
.cover-sub{
  font-style:italic;font-size:clamp(20px,2.6vw,34px);color:var(--mist);
  margin-top:16px;letter-spacing:.04em;
}
.cover-cue{
  position:absolute;right:var(--pad);bottom:calc(var(--hud-bottom) + 7vh);
  font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:var(--stone);
  text-transform:uppercase;writing-mode:vertical-rl;
}
.cover-cue::after{content:'';display:block;width:1px;height:44px;background:var(--cardinal);margin:14px auto 0;animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- COLD OPEN ---------- */
#coldopen{background:var(--abyss)}
#coldopen .beat{position:absolute;inset:0}
#coldopen .beat img{width:100%;height:100%;object-fit:cover}
#coldopen .beat .line{
  position:absolute;left:0;right:0;bottom:18vh;text-align:center;padding:0 var(--pad);z-index:2;
}
#coldopen .line p{
  font-size:clamp(21px,2.6vw,34px);color:var(--white);text-shadow:0 1px 30px rgba(5,8,10,.9);
  max-width:760px;margin:0 auto;text-wrap:balance;
}
#coldopen .line p.whisper{font-style:italic;color:var(--mist)}
html.no-js #coldopen .beat{position:relative;height:100vh}

/* ---------- STATEMENT PAGES ---------- */
.paper{background:linear-gradient(180deg,var(--ink) 0%,var(--abyss) 100%)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.split .frame{border:1px solid var(--hairline)}
.caption{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(143,163,156,.6);margin-top:12px}

/* ---------- COLONNADE HERO ---------- */
#colonnade{background:var(--abyss)}
#colonnade .stage{position:absolute;inset:0}
#colonnade .layer{position:absolute;inset:0;opacity:0}
#colonnade .layer img{width:100%;height:100%;object-fit:cover}
#colonnade .layer.l0{opacity:1}
#colonnadeCanvas{position:absolute;inset:0;z-index:3;pointer-events:none}
#colonnade .thesis{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;z-index:4;padding:0 var(--pad);opacity:0;
}
#colonnade .thesis p{
  font-size:clamp(26px,4vw,54px);font-weight:600;color:var(--white);line-height:1.2;
  max-width:900px;margin:0 auto;text-shadow:0 2px 50px rgba(5,8,10,.9);text-wrap:balance;
}
html.no-js #colonnade .layer{position:relative;opacity:1;height:100vh}
html.no-js #colonnade .thesis{position:relative;transform:none;opacity:1;padding:60px var(--pad)}

/* ---------- JOURNEY MAP ---------- */
#journey{background:var(--ink)}
#journey svg{display:block;width:100%;height:auto}
.map-wrap{max-width:1100px;margin:0 auto;padding:0 var(--pad) 40px}
.graticule{stroke:rgba(143,163,156,.12);stroke-width:1;fill:none}
.route{stroke:var(--cardinal);stroke-width:1.6;fill:none}
.route.sat{stroke-dasharray:3 6;stroke-width:1.1;opacity:.85}
.node{fill:var(--white)}
.node-halo{fill:none;stroke:var(--cardinal);stroke-width:1}
.map-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;fill:var(--stone);text-transform:uppercase}
.leg{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);padding:26px var(--pad) 0;
}
.leg b{color:var(--cardinal);font-weight:500}

/* ---------- STATIONS ---------- */
.station{background:var(--abyss)}
.station .st-head{
  min-height:88vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
}
.station .st-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.station .st-head .veil{background:linear-gradient(180deg,rgba(5,8,10,.5) 0%,rgba(5,8,10,.05) 35%,rgba(5,8,10,.85) 100%)}
.st-id{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad) 9vh;
  display:flex;align-items:baseline;gap:clamp(18px,3vw,40px);
}
.st-roman{
  font-size:clamp(64px,10vw,150px);font-weight:500;color:transparent;line-height:1;
  -webkit-text-stroke:1px rgba(238,242,239,.75);letter-spacing:.06em;flex-shrink:0;
}
.st-titleblock h2{margin-bottom:6px;font-size:clamp(26px,3.6vw,50px)}
.st-loc{font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--cardinal);text-transform:uppercase}
.st-body{max-width:860px;margin:0 auto;padding:clamp(60px,9vh,110px) var(--pad)}
.st-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1100px;margin:0 auto;padding:0 var(--pad) 70px}
.st-strip .frame{border:1px solid var(--hairline)}
.st-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1100px;margin:0 auto;padding:0 var(--pad) 70px}
.st-duo .frame{border:1px solid var(--hairline)}

/* Red immersion beat, station V only */
#redroom{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
#redroom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#redroom .copy{text-align:center}
#redroom p{color:#f2d9d5;font-size:clamp(20px,2.2vw,30px);font-style:italic;text-shadow:0 1px 24px rgba(30,0,0,.8)}

/* ---------- FORGING ---------- */
#forging{background:var(--ink)}
#forging .scriptum{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(26px,5vh,52px);
  padding:0 var(--pad);z-index:2;
}
.latin{
  position:relative;font-size:clamp(24px,3.6vw,48px);color:var(--amber);
  font-weight:500;letter-spacing:.04em;white-space:nowrap;line-height:1.3;
}
.latin .reveal-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.latin .strike{
  position:absolute;left:-2%;top:54%;height:2px;width:104%;background:var(--cardinal);
  transform:scaleX(0);transform-origin:0 50%;
}
.latin .circ{position:absolute;inset:-18% -5%;pointer-events:none}
.latin .circ ellipse{fill:none;stroke:var(--cardinal);stroke-width:2}
.latin .emend{
  position:absolute;left:0;top:110%;font-style:italic;font-size:.55em;
  color:var(--mist);opacity:0;white-space:nowrap;
}
#forging .frame-bg{position:absolute;inset:0;opacity:.28}
#forging .frame-bg img{width:100%;height:100%;object-fit:cover}
#forging .forge-cap{
  position:absolute;bottom:calc(var(--hud-bottom) + 3vh);left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--stone);text-transform:uppercase;z-index:2;
}
html.no-js #forging .scriptum{position:relative;padding:80px var(--pad)}
html.no-js .latin .reveal-mask span{transform:none !important}

/* ---------- LISTS: movements, contributors, comps ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.card{border:1px solid var(--hairline);padding:clamp(22px,2.6vw,38px);background:rgba(16,26,28,.5)}
.card .eyebrow{margin-bottom:14px}
.card h3{font-size:clamp(20px,1.9vw,26px)}
.card p{font-size:.92em;color:var(--stone)}
.card .q{font-style:italic;color:var(--mist);margin-top:14px;font-size:.95em}

.contrib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);max-width:1100px;margin:0 auto}
.contrib{background:var(--ink);padding:clamp(20px,2.4vw,34px);display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.contrib .who h3{font-size:clamp(18px,1.7vw,23px);margin-bottom:4px}
.contrib .who p{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin:0}
.badge{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--amber);border:1px solid rgba(201,149,90,.4);padding:5px 10px;text-transform:uppercase;white-space:nowrap}

.comp-row{display:flex;justify-content:space-between;gap:24px;align-items:baseline;border-bottom:1px solid var(--hairline);padding:22px 0}
.comp-row h3{margin:0;font-size:clamp(20px,2vw,28px)}
.comp-row p{margin:0;color:var(--stone);font-size:.9em;text-align:right;max-width:52%}

/* ---------- CLOSING & CONTACT ---------- */
#closing{background:var(--abyss)}
#closing .frame,#closing .frame img{position:absolute;inset:0}
#closing .final{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;z-index:2;padding:0 var(--pad);
}
#closing .final blockquote{
  font-size:clamp(22px,2.8vw,38px);color:var(--white);max-width:880px;line-height:1.5;text-wrap:balance;
}
#closing .final blockquote::before{content:'\201C'}
#closing .final blockquote::after{content:'\201D'}
#closing .final cite{display:block;margin-top:26px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--cardinal);text-transform:uppercase}
#closing .final .end-title{
  margin-top:9vh;font-size:clamp(34px,5vw,72px);font-weight:600;letter-spacing:.12em;color:var(--white);
}
html.no-js #closing .final{position:relative;padding:80px var(--pad)}
html.no-js #closing .frame img{position:relative}

#contact{background:var(--abyss);text-align:center;padding:16vh var(--pad) calc(var(--hud-bottom) + 10vh)}
#contact .eyebrow{margin-bottom:18px}
#contact h2{margin-bottom:12px}
#contact p{color:var(--stone);font-size:.95em}
#contact .legal{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(143,163,156,.55);margin-top:56px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contrib-grid{grid-template-columns:1fr}
  .st-strip{grid-template-columns:1fr 1fr}
  .hud-station{display:none}
  .comp-row{flex-direction:column;gap:6px}
  .comp-row p{text-align:left;max-width:100%}
  .latin{white-space:normal;text-align:center}
}
@media (max-width:600px){
  .st-duo,.st-strip{grid-template-columns:1fr}
  .st-id{flex-direction:column;gap:8px;align-items:flex-start}
  .cover-cue{display:none}
}
@media (max-height:700px){
  .cover-title{font-size:clamp(48px,9vw,110px)}
  .copy{padding-top:70px;padding-bottom:70px}
}

@media (prefers-reduced-motion:reduce){
  .cover-cue::after{animation:none}
  html:not(.no-js) [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ================= BUILD 2 ================= */

/* Film grain, whole document */
body::after{
  content:'';position:fixed;inset:-50%;z-index:55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
}

/* Faint drafting grid on statement pages */
.paper{
  background:
    repeating-linear-gradient(0deg,rgba(143,163,156,.045) 0 1px,transparent 1px 140px),
    repeating-linear-gradient(90deg,rgba(143,163,156,.035) 0 1px,transparent 1px 140px),
    linear-gradient(180deg,var(--ink) 0%,var(--abyss) 100%);
  border-top:1px solid rgba(143,163,156,.1);
}
.copy{padding:clamp(70px,11vh,130px) var(--pad)}

/* Synopsis: editorial columns and drop cap */
.copy.cols{max-width:1160px}
.colwrap p{break-inside:avoid-column}
@media (min-width:1000px){
  .colwrap{column-count:2;column-gap:70px}
  .colwrap p{font-size:clamp(16px,1.1vw,19px);line-height:1.7}
}
#synopsis p:first-of-type::first-letter{
  font-size:3.6em;float:left;line-height:.78;padding:6px 14px 0 0;color:var(--amber);font-weight:600;
}

/* Why now: full bleed media */
#whynow.wn{min-height:100vh;display:flex;align-items:center;overflow:hidden;position:relative}
.wn-copy{width:min(640px,46%);padding:16vh var(--pad)}
.wn-media{position:absolute;top:0;bottom:0;left:48%;right:0;overflow:hidden}
.wn-media img{width:100%;height:100%;object-fit:cover}
.wn-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(11,18,20,0) 22%,rgba(5,8,10,.25) 100%)}
.wn-cap{
  position:absolute;left:26px;bottom:calc(var(--hud-bottom) + 18px);z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);
  text-shadow:0 1px 12px rgba(5,8,10,.9);
}
@media (max-width:900px){
  #whynow.wn{display:block;min-height:0}
  .wn-copy{width:auto;padding:70px var(--pad) 30px}
  .wn-media{position:relative;left:0;height:56vw}
  .wn-cap{bottom:14px}
}

/* Station ghost numerals */
.st-body{position:relative;overflow:hidden}
.st-body > *{position:relative;z-index:1}
.st-body::before{
  content:attr(data-ghost);position:absolute;right:-3%;top:50%;transform:translateY(-50%);
  font-size:clamp(220px,26vw,430px);font-weight:600;line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(238,242,239,.055);pointer-events:none;z-index:0;
}

/* Frames come alive */
.frame{transition:border-color .5s ease}
.frame:hover{border-color:rgba(179,34,43,.5)}
.st-strip .frame,.st-duo .frame{overflow:hidden}
.st-strip .frame img,.st-duo .frame img{transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.st-strip .frame:hover img,.st-duo .frame:hover img{transform:scale(1.04)}
.card,.contrib,.protocol{transition:border-color .5s ease,background-color .5s ease}
.card:hover{border-color:rgba(179,34,43,.45)}

/* Care protocols */
.protocols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:26px}
.protocol{background:var(--ink);padding:clamp(22px,2.6vw,36px)}
.protocol .num{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--cardinal);display:block;margin-bottom:14px}
.protocol h3{font-size:clamp(18px,1.7vw,23px)}
.protocol p{font-size:.9em;color:var(--stone);margin:0}
@media (max-width:900px){.protocols{grid-template-columns:1fr}}

/* Comps index */
.comp-row{align-items:baseline}
.comp-row .ci{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--cardinal);margin-right:18px}
.comp-row h3{flex:1}
.comp-row{transition:border-color .5s ease}
.comp-row:hover{border-color:rgba(179,34,43,.5)}

/* Journey polish */
#journey svg{overflow:visible}
.route{stroke-width:2}
.map-range{font-family:var(--mono);font-size:9px;letter-spacing:.2em;fill:var(--cardinal);text-transform:uppercase}
.node-halo{opacity:.35}
.node.lit{fill:var(--cardinal)}
#pilgrim{fill:#ff2d38}
#pilgrimGlow{fill:rgba(255,45,56,.5)}
#pilgrim,#pilgrimGlow{opacity:0}
.route.sat.live{animation:satmarch 1.1s linear infinite}
@keyframes satmarch{to{stroke-dashoffset:-9}}

/* Station index rail */
#rail{
  position:fixed;right:clamp(10px,1.4vw,26px);top:50%;transform:translateY(-50%);
  z-index:59;display:flex;flex-direction:column;gap:9px;align-items:flex-end;
  opacity:0;transition:opacity 1.2s ease;
}
body.gate-open #rail{opacity:1}
#rail a{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(143,163,156,.55);
}
#rail a i{display:block;width:10px;height:1px;background:rgba(143,163,156,.4);transition:width .4s ease,background .4s ease}
#rail a span{opacity:0;transform:translateX(4px);transition:opacity .4s ease,transform .4s ease}
#rail a:hover span,#rail a.on span{opacity:1;transform:none}
#rail a.on{color:var(--cardinal)}
#rail a.on i{width:24px;background:var(--cardinal)}
#rail a:focus-visible{outline:1px solid var(--cardinal);outline-offset:3px}
@media (max-width:1100px),(max-height:640px){#rail{display:none}}

/* Contact credits */
#contact .prod{
  font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:.24em;color:var(--white);
  text-transform:uppercase;margin:34px 0 6px;
}

@media (prefers-reduced-motion:reduce){
  .route.sat.live{animation:none}
  .st-strip .frame img,.st-duo .frame img{transition:none}
}

/* ================= BUILD 3 ================= */

/* Why now: whole frame, no crop, as large as the viewport allows */
.wn2-media{position:relative;width:100%}
.wn2-media img{width:100%;height:auto;display:block}
.wn2-media .wn-cap{position:absolute;left:clamp(16px,3vw,40px);bottom:18px}

/* Station rail, pronounced */
#rail{gap:11px;padding:14px 10px;border-right:1px solid rgba(143,163,156,.25)}
#rail a{font-size:10px;color:rgba(205,216,210,.75)}
#rail a i{width:16px;height:2px;background:rgba(143,163,156,.55)}
#rail a span{opacity:1;transform:none;min-width:3ch;text-align:right}
#rail a:hover{color:var(--white)}
#rail a:hover i{background:var(--mist)}
#rail a.on{color:var(--cardinal);text-shadow:0 0 14px rgba(179,34,43,.55)}
#rail a.on i{width:30px;background:var(--cardinal);box-shadow:0 0 10px rgba(179,34,43,.7)}

/* The procession */
#journey{background:var(--abyss);border-top:1px solid rgba(143,163,156,.1)}
.j-stage{position:absolute;inset:0;overflow:hidden}
.j-map{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:min(1500px,118vw);height:auto;opacity:.55;
}
.j-head{
  position:absolute;left:var(--pad);top:calc(var(--hud-top) + 5vh);z-index:3;max-width:620px;
}
.j-head h2{font-size:clamp(26px,3.4vw,46px);margin-bottom:0}
.j-thread{
  position:absolute;left:0;right:0;top:58%;height:1px;
  background:rgba(143,163,156,.18);z-index:2;
}
.j-thread i{display:block;height:100%;background:var(--cardinal);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(179,34,43,.8)}
.j-track{
  position:absolute;left:0;top:58%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;gap:clamp(48px,7vw,110px);
  padding:0 42vw 0 8vw;will-change:transform;
}
.j-plate{
  flex:0 0 auto;display:block;text-decoration:none;color:inherit;
  width:clamp(190px,21vw,280px);padding:18px 0;cursor:pointer;
}
.j-plate .pr{
  display:block;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(72px,8.5vw,128px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(238,242,239,.4);
  transition:color .5s ease,text-shadow .5s ease,-webkit-text-stroke-color .5s ease,transform .6s cubic-bezier(.19,1,.22,1);
  transform-origin:0 80%;
}
.j-plate h3{font-size:clamp(16px,1.4vw,21px);margin:14px 0 6px;color:var(--mist);transition:color .5s ease}
.j-plate .loc{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(143,163,156,.6);transition:color .5s ease}
.j-plate.on .pr{
  color:var(--cardinal);-webkit-text-stroke:1px rgba(179,34,43,0);
  text-shadow:0 0 34px rgba(179,34,43,.5);transform:scale(1.12);
}
.j-plate.on h3{color:var(--white)}
.j-plate.on .loc{color:var(--cardinal)}
.j-plate:focus-visible{outline:1px solid var(--cardinal);outline-offset:6px}
.j-leg{
  position:absolute;left:0;right:0;bottom:calc(var(--hud-bottom) + 20px);z-index:3;
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
  padding:0 var(--pad);
}
.j-leg b{color:var(--cardinal);font-weight:500}
.j-hint{color:rgba(205,216,210,.55)}
html.no-js #journey{min-height:60vh}
html.no-js .j-track{position:relative;flex-wrap:wrap;padding:120px var(--pad)}

@media (max-width:900px){
  .j-head{max-width:none;right:var(--pad)}
  .j-map{opacity:.35;width:170vw}
  .j-thread,.j-track{top:60%}
  .j-leg .j-hint{display:none}
}