:root{--seal:url('/assets/seal.webp')}
:root{
  --void:#0A0807;
  --void-2:#0D0B09;
  --panel:#12100D;
  --gold:#B5974F;
  --gold-lt:#CBA961;
  --gold-hi:#E4CE8C;
  --gold-dim:#82703F;
  --gold-deep:#564B2E;
  --gold-ash:#343019;
  --ivory:#DED0A8;
  --ivory-2:#C9BE9A;
  --ivory-3:#A99E86;
  --f-d:Cambria,Gelasio,Georgia,'Times New Roman',serif;
  --f-m:Consolas,'IBM Plex Mono','Courier New',monospace;
  --f-v:'Cormorant Garamond',Cambria,Georgia,serif;
  --pad:clamp(1.15rem,5vw,5rem);
  --maxw:1120px;
  --rail:2.9rem;
  --inset:clamp(.75rem,1.6vw,1.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--ivory-2);
  font-family:var(--f-d);font-size:clamp(1rem,.5vw + .92rem,1.12rem);line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(181,151,79,.06),transparent 62%),
    radial-gradient(100% 70% at 50% 100%,rgba(181,151,79,.03),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%);
}
/* ancient onyx — large-scale mottling, sits under everything, never touches type */
.stone{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(88% 58% at 50% 2%, rgba(190,146,68,.048), transparent 62%),
    #040302;
}
.stone::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' preserveAspectRatio='none'><filter id='ash'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='17'/><feColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.68 0 0 0 0 0.34 0 0 0 1 0'/><feComponentTransfer><feFuncA type='gamma' exponent='6'/></feComponentTransfer></filter><rect width='1600' height='1200' filter='url(%23ash)'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:.32;mix-blend-mode:screen;
}
.stone::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' preserveAspectRatio='none'><filter id='ashc'><feTurbulence type='fractalNoise' baseFrequency='0.007' numOctaves='4' seed='3'/><feColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.48 0 0 0 0 0.24 0 0 0 1 0'/></filter><rect width='1600' height='1200' filter='url(%23ashc)'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:.13;mix-blend-mode:screen;
}
.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
::selection{background:rgba(181,151,79,.3);color:var(--ivory)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
main{position:relative;z-index:3}

/* ============ DOSSIER FRAME ============ */
.frame{position:fixed;inset:var(--inset);z-index:40;pointer-events:none;border:1px solid rgba(86,75,46,.55)}
.frame i{position:absolute;width:34px;height:34px;border:0 solid var(--gold-dim)}
.frame i:nth-child(1){top:-11px;left:-11px;border-top-width:1px;border-left-width:1px}
.frame i:nth-child(2){top:-11px;right:-11px;border-top-width:1px;border-right-width:1px}
.frame i:nth-child(3){bottom:-11px;left:-11px;border-bottom-width:1px;border-left-width:1px}
.frame i:nth-child(4){bottom:-11px;right:-11px;border-bottom-width:1px;border-right-width:1px}
@media(max-width:820px){.frame{display:none}}

/* ============ RAILS ============ */
.mono{font-family:var(--f-m);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase}
.railtop,.railbot{
  position:fixed;left:var(--inset);right:var(--inset);z-index:41;
  background:rgba(10,8,7,.92);backdrop-filter:blur(10px);
}
.railtop{top:var(--inset);display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:.85rem clamp(1rem,2.4vw,1.9rem);border-bottom:1px solid rgba(86,75,46,.4)}
.railbot{bottom:var(--inset);padding:.7rem clamp(1rem,2.4vw,1.9rem);text-align:center;
  border-top:1px solid rgba(86,75,46,.4)}
.railbot span{font-family:var(--f-m);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.railbot b{color:var(--gold);font-weight:400}
.rail__l,.rail__r{color:var(--gold-dim);white-space:nowrap}
.rail__l b{color:var(--gold);font-weight:400}
@media(max-width:820px){
  .railtop{left:0;right:0;top:0;padding:.8rem var(--pad)}
  .rail__l .dos{display:none}
  .railbot{display:none}
  .rail__r{display:none}
}

/* nav inside top rail */
.nav{display:flex;gap:clamp(.7rem,1.8vw,1.6rem)}
.nav a{font-family:var(--f-m);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory-3);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav a:hover{color:var(--gold-hi)}
.nav a.on{color:var(--gold-lt);border-color:var(--gold-deep)}
.menu{display:none;background:none;border:0;color:var(--gold);font-family:var(--f-m);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;padding:.3rem}
@media(max-width:820px){
  .menu{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,8,7,.985);border-bottom:1px solid rgba(86,75,46,.4);padding:.2rem var(--pad) .9rem}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0;border-bottom:1px solid rgba(86,75,46,.22)}
}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(4rem,8.5vw,7.5rem);position:relative;scroll-margin-top:5rem}
.band{border-block:0;background:linear-gradient(180deg,var(--void-2),var(--void))}
hr.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(86,75,46,.75) 14%,rgba(86,75,46,.75) 86%,transparent);margin:0}
.short{width:96px;height:1px;background:var(--gold-dim);border:0;margin:0}

.eyebrow{font-family:var(--f-m);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim)}
.eyebrow b{color:var(--gold);font-weight:400}
h2{font-family:var(--f-d);font-weight:400;font-size:clamp(1.65rem,3.6vw,2.85rem);
  line-height:1.12;margin:1rem 0 0;color:var(--gold-lt);letter-spacing:.012em}
h3{font-family:var(--f-m);font-weight:400;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0}
p{margin:0 0 1.15rem}
.lede{font-size:clamp(1.04rem,1.25vw,1.24rem);color:var(--ivory-2);max-width:64ch}
.head{max-width:70ch;margin-bottom:clamp(2.2rem,4.6vw,3.6rem)}
em{font-style:italic}

/* ============ HERO ============ */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:calc(var(--rail) + clamp(2rem,7vh,4.5rem)) var(--pad) clamp(4rem,9vh,6rem)}
.sealwrap{position:relative;isolation:isolate;width:min(52vw,262px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.glow{position:absolute;width:230%;height:230%;left:-65%;top:-65%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,206,132,.34) 0%,rgba(196,158,80,.15) 20%,rgba(181,151,79,.05) 40%,transparent 62%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.sealbg{display:block;
  background:linear-gradient(165deg,var(--gold-hi) 0%,var(--gold-lt) 42%,var(--gold) 72%,var(--gold-dim) 100%);
  -webkit-mask:var(--seal) center/contain no-repeat;
  mask:var(--seal) center/contain no-repeat}
.sealwrap .sealbg{position:absolute;inset:0;width:100%;height:100%}
.gate .sealbg,.card .sealbg{animation:spin 55s linear infinite}
.spin{position:absolute;inset:0}
.spin--a{animation:spin 55s linear infinite}
.spin--b{animation:spin 85s linear infinite reverse}

.spin--a .sealbg{opacity:1}
.spin--b .sealbg{opacity:.38;filter:blur(5px)}

@keyframes spin{to{transform:rotate(360deg)}}

.wordmark{font-family:var(--f-d);font-weight:400;color:var(--gold-lt);
  font-size:clamp(3rem,12vw,7.4rem);line-height:1;letter-spacing:.11em;text-indent:.11em;
  margin-top:clamp(1rem,3vh,2rem);
  text-shadow:0 0 60px rgba(181,151,79,.28),0 0 140px rgba(181,151,79,.12)}
.hero__rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);border:0;margin:1.5rem auto 0}
.hero__title{margin-top:1.4rem;font-family:var(--f-m);font-size:clamp(.6rem,1.5vw,.76rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--ivory-3)}
.hero__title b{color:var(--gold-lt);font-weight:400}
.hero__creed{margin-top:1.7rem;font-family:var(--f-d);font-style:italic;
  font-size:clamp(1.05rem,2.1vw,1.42rem);color:var(--ivory-2)}
.hero__stat{margin-top:2.2rem;font-family:var(--f-m);font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-dim)}
.cue{font-family:var(--f-m)}

/* entrance animation */
.hero .sealwrap,.hero .wordmark,.hero .hero__title,.hero .hero__creed,.hero .hero__stat{
  opacity:0;animation:rise 1.5s cubic-bezier(.16,.84,.28,1) forwards}
.hero .sealwrap{animation-delay:.15s}
.hero .wordmark{animation:markrise 2.1s cubic-bezier(.16,.84,.28,1) .5s forwards}
.hero .hero__title{animation-delay:1.15s}
.hero .hero__creed{animation-delay:1.4s}
.hero .hero__stat{animation-delay:1.6s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes markrise{from{opacity:0;letter-spacing:.42em;filter:blur(5px)}to{opacity:1;letter-spacing:.11em;filter:none}}

/* ============ SCRIPT PAGE ============ */
.script{border:1px solid rgba(86,75,46,.45);background:linear-gradient(180deg,#100E0B,#0A0807);
  padding:clamp(1.5rem,4vw,3.2rem);font-family:var(--f-m);font-size:clamp(.74rem,1.05vw,.86rem);
  line-height:2;color:var(--ivory-3);margin-top:2.4rem;max-width:760px;margin-inline:auto}
.script .slug{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.6rem}
.script .act{margin:0 0 1.35rem;max-width:62ch}
.script .cue{position:static;transform:none;display:block;text-align:center;color:var(--gold-lt);
  letter-spacing:.22em;margin:1.9rem 0 .2rem;font-size:.72rem}
.script .cue::after{display:none}
.script .paren{text-align:center;color:var(--gold-dim);font-size:.68rem;margin:0 0 .3rem}
.script .line{text-align:center;color:var(--ivory);margin:0 auto 1.6rem;max-width:34ch}
.script .end{color:var(--gold-deep);letter-spacing:.06em;margin-top:2rem}

/* ============ FACTS / LEDGER ============ */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:rgba(86,75,46,.3);border:1px solid rgba(86,75,46,.3);margin-top:2.4rem}
.fact{background:var(--void);padding:clamp(1.2rem,2.5vw,1.8rem)}
.fact dt{font-family:var(--f-m);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:.65rem}
.fact dd{margin:0;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--gold-lt);line-height:1.22}
.fact dd small{display:block;font-size:.8rem;color:var(--ivory-3);margin-top:.4rem}

.ledger{margin-top:2.4rem;border-top:1px solid rgba(86,75,46,.3)}
.ledger__row{display:grid;grid-template-columns:2.2rem 1fr auto;gap:1rem;align-items:center;
  padding:clamp(.9rem,1.9vw,1.2rem) 0;border-bottom:1px solid rgba(86,75,46,.22)}
.ledger__row i{font-family:var(--f-m);font-style:normal;font-size:.6rem;letter-spacing:.14em;color:var(--gold-deep)}
.ledger__row div{display:grid;gap:.22rem}
.ledger__row strong{font-family:var(--f-m);font-weight:400;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory)}
.ledger__row em{font-style:normal;font-size:.95rem;color:var(--ivory-3)}
.pill{font-family:var(--f-m);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .7rem;border:1px solid rgba(86,75,46,.6);color:var(--gold-lt);white-space:nowrap}
.pill--soft{color:var(--gold-dim)}
@media(max-width:600px){.ledger__row{grid-template-columns:1.6rem 1fr;row-gap:.6rem}.ledger__row .pill{grid-column:2}}

/* ============ COLUMNS ============ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.6rem,3.6vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
.cols article{border-top:1px solid rgba(86,75,46,.45);padding-top:1.3rem}
.cols article h3{margin-bottom:.85rem}
.cols article p{margin:0;font-size:.98rem;color:var(--ivory-3)}

/* roster */
.roster{display:grid;gap:0;margin-top:2.4rem;border-top:1px solid rgba(86,75,46,.3)}
.roster__row{display:grid;grid-template-columns:minmax(130px,20%) 1fr;gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.15rem,2.5vw,1.7rem) 0;border-bottom:1px solid rgba(86,75,46,.22)}
.roster__row b{font-family:var(--f-m);font-weight:400;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);padding-top:.25rem}
.roster__row p{margin:0;color:var(--ivory-3)}
@media(max-width:620px){.roster__row{grid-template-columns:1fr;gap:.5rem}}

/* pull quote */
.pull{text-align:center;max-width:46ch;margin:0 auto}
.pull q{quotes:none;display:block;font-size:clamp(1.3rem,2.9vw,2.1rem);line-height:1.4;color:var(--gold-lt)}
.pull cite{display:block;margin-top:1.5rem;font-family:var(--f-m);font-size:.58rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim);font-style:normal}

/* ============ ARCHITECTURE ============ */
.arch__node{border:1px solid rgba(86,75,46,.55);background:linear-gradient(180deg,var(--panel),var(--void));
  padding:clamp(1.4rem,3vw,2.2rem);text-align:center;max-width:500px;margin-inline:auto}
.arch__node .w{font-family:var(--f-d);font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:.24em;
  text-indent:.24em;color:var(--gold-lt)}
.arch__node .s{margin-top:.6rem;font-family:var(--f-m);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-dim)}
.arch__node p{margin:.95rem 0 0;font-size:.95rem;color:var(--ivory-3)}
.stem{width:1px;height:clamp(1.6rem,3.4vw,3rem);background:rgba(86,75,46,.6);margin:0 auto}
.bus{height:1px;background:rgba(86,75,46,.6);width:min(66.6%,600px);margin-inline:auto}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.5rem);max-width:900px;margin-inline:auto}
.branch{border:1px solid rgba(86,75,46,.28);background:var(--void-2);padding:clamp(1rem,2.2vw,1.5rem);
  display:grid;gap:.45rem;align-content:start;transition:border-color .3s,transform .3s}
.branch--live{border-color:rgba(86,75,46,.65);background:linear-gradient(180deg,var(--panel),var(--void))}
.branch:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.branch .k{font-family:var(--f-m);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim)}
.branch .n{font-family:var(--f-d);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.branch--rsv .n{color:var(--gold-deep)}
.branch p{margin:.3rem 0 0;font-size:.92rem;color:var(--ivory-3)}
@media(max-width:760px){.row3{grid-template-columns:1fr}.bus{display:none}}

/* ============ CREATOR ============ */
.portrait{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;margin-top:1rem}
.portrait figure{margin:0}
.portrait>div:first-child{position:sticky;top:calc(var(--rail) + 1.4rem)}
@media(max-width:760px){.portrait>div:first-child{position:static}}
.portrait img{display:block;width:100%;height:auto;filter:grayscale(1) sepia(.42) saturate(.85) contrast(1.06) brightness(.86);
  border:1px solid rgba(86,75,46,.5)}
.portrait figcaption{margin-top:.7rem;font-family:var(--f-m);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dim);line-height:1.9}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.9rem}
.stack img{display:block;width:100%;height:auto;filter:grayscale(1) sepia(.42) saturate(.85) contrast(1.05) brightness(.84);
  border:1px solid rgba(86,75,46,.4)}
@media(max-width:760px){.portrait{grid-template-columns:1fr}}

.letter{max-width:66ch}
.letter p{font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.78;color:var(--ivory-2);margin:0 0 1.3rem}
.letter p.first{font-size:clamp(1.1rem,1.5vw,1.32rem);color:var(--ivory)}
.letter p.gold{color:var(--gold-lt)}
.letter .sign{margin-top:1.7rem;font-family:var(--f-m);font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-dim)}
.ded{text-align:center;max-width:52ch;margin:0 auto}
.ded .t{font-size:clamp(1.35rem,3vw,2.1rem);color:var(--gold-lt);margin-bottom:1.6rem}
.ded p{font-style:italic;color:var(--ivory-2)}
.ded .name{margin-top:2rem;font-family:var(--f-m);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-dim);line-height:2.2}

/* ============ STEPS / GATE ============ */
.steps{margin-top:2.4rem;border-top:1px solid rgba(86,75,46,.3)}
.step{display:grid;grid-template-columns:3rem 1fr;gap:clamp(1rem,2.4vw,2rem);
  padding:clamp(1.3rem,2.8vw,1.9rem) 0;border-bottom:1px solid rgba(86,75,46,.22);align-items:start}
.step .n{font-family:var(--f-m);font-size:.62rem;letter-spacing:.16em;color:var(--gold-deep);padding-top:.3rem}
.step h3{margin-bottom:.5rem;color:var(--ivory)}
.step p{margin:0;color:var(--ivory-3);max-width:60ch}
.gate{border:1px solid rgba(86,75,46,.55);background:linear-gradient(180deg,var(--panel),var(--void));
  padding:clamp(1.6rem,4vw,2.8rem);margin-top:2.5rem;display:grid;gap:1.1rem;justify-items:center;text-align:center}
.gate .sealbg{width:54px;height:54px;opacity:.6}
.gate p{margin:0;color:var(--ivory-3);max-width:52ch}
.cta{display:inline-block;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;line-height:1;font-family:var(--f-m);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-lt);border:1px solid rgba(86,75,46,.6);padding:.75rem 1.3rem;
  transition:border-color .3s,color .3s,background .3s}
.cta:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(181,151,79,.06)}
.note{border:1px solid rgba(86,75,46,.35);padding:clamp(1.1rem,2.4vw,1.6rem);margin-top:2.2rem}
.note b{display:block;font-family:var(--f-m);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:.55rem;font-weight:400}
.note p{margin:0;font-size:.95rem;color:var(--ivory-3)}

/* ============ MASTHEAD ============ */
.mast{padding-block:clamp(3rem,6.5vw,5rem) clamp(1.8rem,3.6vw,2.8rem);
  border-bottom:1px solid rgba(86,75,46,.3)}
.mast h1{font-family:var(--f-d);font-weight:400;font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.08;
  margin:.85rem 0 0;color:var(--gold-lt);letter-spacing:.012em}
.mast .lede{margin-top:1.3rem}
body.inner main{padding-top:var(--rail)}

/* ============ CONTACT ============ */
.card{border:1px solid rgba(86,75,46,.55);background:linear-gradient(180deg,var(--panel),var(--void));
  padding:clamp(2rem,5vw,3.4rem);text-align:center;max-width:560px;margin:2.6rem auto 0;display:grid;gap:1rem;justify-items:center}
.card .nm{font-family:var(--f-d);font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.2em;
  text-indent:.2em;color:var(--gold-lt)}
.card .role{font-family:var(--f-m);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim)}
.card a.mail{font-size:1.05rem;color:var(--ivory);border-bottom:1px solid rgba(86,75,46,.6);padding-bottom:2px}
.card a.mail:hover{color:var(--gold-hi)}

/* ============ FOOTER ============ */
footer{border-top:1px solid rgba(86,75,46,.3);padding:clamp(2.2rem,4.5vw,3.2rem) var(--pad) calc(var(--rail) + 1.4rem);
  position:relative;z-index:3}
.foot{max-width:var(--maxw);margin:0 auto;display:grid;gap:1.3rem;text-align:center}
.foot .ded{font-family:var(--f-m);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.foot .legal{font-family:var(--f-m);font-size:.55rem;letter-spacing:.1em;line-height:2.2;color:var(--gold-deep)}
.foot .legal .em{color:var(--gold-dim)}
@media(max-width:820px){footer{padding-bottom:2.4rem}}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .95s cubic-bezier(.16,.84,.28,1),transform .95s cubic-bezier(.16,.84,.28,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero .sealwrap,.hero .wordmark,.hero .hero__title,.hero .hero__creed,.hero .hero__stat{opacity:1}
}

/* ============ INSCRIPTION (seal easter egg) ============ */
.sealwrap{cursor:pointer}
.inscription{min-height:2.2em;margin-top:1.1rem;font-family:var(--f-m);
  font-size:clamp(.56rem,1.1vw,.66rem);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);opacity:0;transition:opacity .7s ease}
.inscription.on{opacity:1}

/* ============ THE OATH ============ */
.oath{position:relative;border:1px solid rgba(86,75,46,.55);
  background:linear-gradient(180deg,var(--panel),var(--void));
  padding:clamp(2rem,5vw,3.6rem);text-align:center;display:grid;gap:1.25rem;
  justify-items:center;margin-top:2.6rem;overflow:hidden}
.oath::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 0%,rgba(228,206,140,.09),transparent 70%)}
.oath>*{position:relative}
.oath .q{font-size:clamp(1.3rem,3vw,2.05rem);color:var(--gold-lt);max-width:22ch;line-height:1.32}
.oath p{margin:0;color:var(--ivory-3);max-width:52ch}
.oathform{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.oathform input{
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(0,0,0,.4);border:1px solid rgba(86,75,46,.6);color:var(--ivory);
  padding:.78rem 1rem;min-width:min(74vw,290px);outline:0}
.oathform input::placeholder{color:var(--gold-deep);letter-spacing:.16em}
.oathform input:focus{border-color:var(--gold-dim)}
.oath .fine{font-family:var(--f-m);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}

/* minted card */
.sworn{display:none;justify-items:center;gap:.9rem}
.sworn.on{display:grid;animation:rise 1.1s cubic-bezier(.16,.84,.28,1) both}
.sworn .sealwrap-sm{position:relative;display:grid;place-items:center;width:80px;height:80px}
.sworn .sealwrap-sm::before{content:"";position:absolute;width:190%;height:190%;
  background:radial-gradient(circle,rgba(233,206,132,.30),transparent 62%)}
.sworn .sealbg{position:relative;width:66px;height:66px;opacity:1;animation:spin 55s linear infinite}
.sworn .lbl{font-family:var(--f-m);font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim)}
.sworn .nm{font-family:var(--f-d);font-size:clamp(1.5rem,4.2vw,2.5rem);letter-spacing:.14em;
  text-indent:.14em;color:var(--gold-hi);line-height:1.15;max-width:18ch}
.sworn .meta{font-family:var(--f-m);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-3);line-height:2.1}
.sworn .creed{font-style:italic;color:var(--ivory-2);max-width:34ch}

/* ============ ASIDE (dry marginal note) ============ */
.aside{font-family:var(--f-m);font-size:.62rem;letter-spacing:.14em;color:var(--gold-deep);
  border-left:1px solid rgba(86,75,46,.5);padding-left:.9rem;margin-top:1.6rem;max-width:56ch;line-height:1.9}

/* ============ SEALED INDEX ============ */
.index{margin-top:2.4rem;border-top:1px solid rgba(86,75,46,.28)}
.index .r{display:flex;align-items:baseline;gap:.9rem;
  padding:clamp(.95rem,2.1vw,1.3rem) 0;border-bottom:1px solid rgba(86,75,46,.2)}
.index .n{font-family:var(--f-m);font-size:.6rem;letter-spacing:.16em;color:var(--gold-deep);
  min-width:2.2rem;flex:none}
.index b{font-family:var(--f-d);font-weight:400;font-size:clamp(1rem,1.9vw,1.22rem);
  letter-spacing:.03em;color:var(--ivory);flex:none}
.index .lead{flex:1;height:1px;background:repeating-linear-gradient(90deg,
  rgba(86,75,46,.62) 0 2px,transparent 2px 7px);transform:translateY(-.28em)}
.index .st{font-family:var(--f-m);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);flex:none}
.index .r:hover .st{color:var(--gold-hi)}
.index .r:hover .lead{background:repeating-linear-gradient(90deg,
  rgba(181,151,79,.75) 0 2px,transparent 2px 7px)}
@media(max-width:560px){.index b{font-size:.98rem}.index .st{font-size:.5rem}}

.redactbar{margin-top:1.8rem;border:1px dashed rgba(86,75,46,.5);padding:1rem 1.15rem;
  font-family:var(--f-m);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);text-align:center}

/* ============ BILINGUAL PLATE ============ */
.plate{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.2rem,4vw,3.4rem);
  align-items:center;margin-top:1rem}
.plate .side{text-align:center;display:grid;gap:.7rem;justify-items:center}
.plate .glyph{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.1;color:var(--gold-hi)}
.plate .glyph.he{font-family:'Frank Ruhl Libre',serif;direction:rtl;font-weight:300}
.plate .glyph.gr{font-family:'EB Garamond',Georgia,serif;font-weight:400}
.plate .rom{font-family:var(--f-d);font-size:clamp(1.15rem,2.8vw,1.75rem);letter-spacing:.26em;
  text-indent:.26em;color:var(--gold-lt)}
.plate .gloss{font-family:var(--f-m);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);line-height:2}
.plate .axis{width:1px;height:clamp(80px,14vw,150px);background:linear-gradient(transparent,rgba(86,75,46,.8),transparent);position:relative}
.plate .axis::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-dim)}
.plate__line{margin-top:clamp(2rem,4vw,3rem);text-align:center;font-style:italic;
  color:var(--ivory-2);max-width:60ch;margin-inline:auto}
@media(max-width:640px){.plate{grid-template-columns:1fr;gap:2rem}
  .plate .axis{width:clamp(80px,40vw,160px);height:1px;justify-self:center;
    background:linear-gradient(90deg,transparent,rgba(86,75,46,.8),transparent)}}

/* ============ FRAGMENTS ============ */
.frag{min-height:13rem;display:grid;place-items:center;text-align:center}
.frag .f{opacity:0;transition:opacity .9s ease;max-width:30ch}
.frag .f.on{opacity:1}
.frag .f.say{font-family:var(--f-v);font-style:normal;font-weight:400;
  font-size:clamp(1.6rem,3.9vw,2.95rem);line-height:1.26;color:var(--gold-hi);letter-spacing:.012em}
.frag .who{margin-top:1.4rem;font-family:var(--f-m);font-size:.55rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep);opacity:0;transition:opacity .9s ease}
.frag .who.on{opacity:1}
.frag .src{margin-top:1.5rem;font-family:var(--f-m);font-size:.52rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep);opacity:0;transition:opacity .85s ease}
.frag .src.on{opacity:1}

/* ============ CREATOR MARGIN NOTE ============ */
.byline{max-width:64ch;margin-top:clamp(2.4rem,5vw,3.6rem);border-left:1px solid rgba(86,75,46,.55);
  padding-left:clamp(1.1rem,2.6vw,1.9rem);display:grid;gap:.7rem}
.byline .tag{font-family:var(--f-m);font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.byline p{margin:0;font-family:var(--f-v);font-style:italic;font-size:clamp(1.05rem,1.9vw,1.32rem);
  line-height:1.6;color:var(--ivory-2)}
.byline .sig{font-family:var(--f-m);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}

/* ============ HAMMER LINE ============ */
.hammer{text-align:center;max-width:min(100%,760px);margin:0 auto}
.hammer .n{font-family:var(--f-d);font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.16;color:var(--gold-lt);max-width:20ch;margin-inline:auto}
.hammer .u{margin-top:1.4rem;font-family:var(--f-m);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-dim);line-height:2.2}

/* ============ SERVICES PLATE (source-of-services) ============ */
.house{display:grid;gap:1.1rem;justify-items:center;text-align:center;max-width:70ch;margin-inline:auto}
.house .mk{font-family:var(--f-d);font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:.28em;
  text-indent:.28em;color:var(--gold-lt)}
.house .svc{font-family:var(--f-m);font-size:clamp(.6rem,1.2vw,.7rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivory-2);line-height:2.2;max-width:56ch}
.house .sub{font-family:var(--f-m);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}

/* ============ FOOTER (short) ============ */
footer{border-top:1px solid rgba(86,75,46,.3);padding:clamp(2rem,4vw,2.8rem) var(--pad) calc(var(--rail) + 3.4rem)}
@media(max-width:820px){footer{padding-bottom:2.4rem}}
.foot{max-width:var(--maxw);margin:0 auto;display:grid;gap:1.15rem;justify-items:center;text-align:center}
.foot .ded{font-family:var(--f-d);font-style:italic;font-size:.95rem;color:var(--gold-dim);letter-spacing:.02em}
.foot .marks{display:flex;flex-wrap:wrap;gap:clamp(1rem,4vw,3rem);justify-content:center;
  font-family:var(--f-m);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.foot .marks a{border-bottom:1px solid rgba(86,75,46,.5)}
.foot .marks a:hover{color:var(--gold-dim)}

/* ============ CORNER TICKS ============ */
.tick{position:relative}
.tick::before,.tick::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:0 solid rgba(181,151,79,.55)}
.tick::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.tick::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}

/* ============ PAGE TRANSITION ============ */
.page{opacity:0;transition:opacity .7s ease}
.page.ready{opacity:1}
.page.leaving{opacity:0;transition:opacity .38s ease}

/* ============ SCROLL PROGRESS ============ */
.prog{position:fixed;left:var(--inset);top:var(--inset);height:1px;width:0;
  background:linear-gradient(90deg,rgba(181,151,79,.15),var(--gold-hi));z-index:45;pointer-events:none}
@media(max-width:820px){.prog{left:0;top:0}}

/* ============ HEADLINE REVEAL ============ */
.rvl{display:block;overflow:hidden}
.rvl>span{display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1),opacity 1.05s ease}
.in .rvl>span,.rvl.in>span{transform:none;opacity:1}

/* ============ HERO LIGHT ============ */
.herolight{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,42%),rgba(228,206,140,.10),transparent 70%);
  transition:opacity .6s ease}

/* ============ APPLICATION FORM ============ */
.apply{display:grid;gap:1rem;margin-top:2.4rem;max-width:620px}
.apply .row{display:grid;gap:.45rem}
.apply label{font-family:var(--f-m);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim)}
.apply input,.apply textarea{
  font-family:var(--f-d);font-size:1rem;color:var(--ivory);text-overflow:ellipsis;
  background:rgba(0,0,0,.35);border:1px solid rgba(86,75,46,.55);padding:.75rem .9rem;outline:0;width:100%}
.apply textarea{min-height:110px;resize:vertical;line-height:1.6}
.apply input:focus,.apply textarea:focus{border-color:var(--gold-dim)}
.apply .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.apply .two{grid-template-columns:1fr}}
.apply .send{justify-self:start;margin-top:.5rem}
.credential{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.credential input{font-family:var(--f-m);font-size:.68rem;letter-spacing:.18em;
  background:rgba(0,0,0,.4);border:1px solid rgba(86,75,46,.55);color:var(--ivory);
  padding:.7rem .9rem;min-width:min(70vw,230px);outline:0}

.apply input::placeholder,.apply textarea::placeholder{color:var(--gold-deep);opacity:1}

/* ============ SACRED DECOR ============ */















.wrap,.head,.hero>div{position:relative;z-index:6}

/* ============ ORNAMENT DIVIDER ============ */
.orn{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2vw,1.4rem);
  margin:clamp(2.4rem,5vw,4rem) auto 0;max-width:520px}
.orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(86,75,46,.85))}
.orn i+i{background:linear-gradient(90deg,rgba(86,75,46,.85),transparent)}
.orn s{width:7px;height:7px;flex:none;transform:rotate(45deg);background:var(--gold-dim);text-decoration:none}
.orn u{width:4px;height:4px;flex:none;transform:rotate(45deg);border:1px solid var(--gold-deep);text-decoration:none}

/* ============ WORDMARK SHEEN ============ */
.wordmark{position:relative;background:linear-gradient(100deg,
  var(--gold-lt) 0%,var(--gold-lt) 38%,#F6E5B4 47%,var(--gold-lt) 56%,var(--gold-lt) 100%);
  background-size:280% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:markrise 2.1s cubic-bezier(.16,.84,.28,1) .5s forwards, sheen 11s ease-in-out 3s infinite}
@keyframes sheen{0%,72%{background-position:120% 0}88%,100%{background-position:-40% 0}}

/* ============ CONTACT PLATE ============ */
.plate2{position:relative;border:1px solid rgba(86,75,46,.6);
  background:linear-gradient(180deg,var(--panel),var(--void));
  max-width:640px;margin:2.8rem auto 0;padding:clamp(2rem,4.6vw,3.2rem) clamp(1.4rem,4vw,3rem);
  display:grid;gap:1.1rem;justify-items:center;text-align:center;overflow:hidden}
.plate2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(228,206,140,.10),transparent 72%)}
.plate2>*{position:relative}
.plate2 .sw{position:relative;width:92px;height:92px;display:grid;place-items:center}
.plate2 .sw::before{content:"";position:absolute;width:190%;height:190%;
  background:radial-gradient(circle,rgba(233,206,132,.30),transparent 58%)}
.plate2 .sealbg{position:relative;width:84px;height:84px;animation:spin 55s linear infinite}
.plate2 .eb{font-family:var(--f-m);font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim)}
.plate2 .nm{font-family:var(--f-d);font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.22em;
  text-indent:.22em;color:var(--gold-lt);line-height:1.2}
.plate2 .of{display:flex;flex-wrap:wrap;gap:.5rem clamp(.9rem,2.4vw,1.7rem);justify-content:center;
  font-family:var(--f-m);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-3)}
.plate2 .div{width:100%;max-width:280px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(86,75,46,.8),transparent)}
.plate2 .ml{font-family:var(--f-d);font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ivory);
  border-bottom:1px solid rgba(86,75,46,.7);padding-bottom:3px;transition:color .3s,border-color .3s}
.plate2 .ml:hover{color:var(--gold-hi);border-color:var(--gold)}
.plate2 .say{font-family:var(--f-v);font-size:clamp(1rem,2vw,1.18rem);color:var(--ivory-2);
  max-width:38ch;line-height:1.6}
.plate2 .insc{font-family:var(--f-m);font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.4rem}

/* ============ ILLUMINATED INITIAL ============ */
.illum::first-letter{
  float:left;font-family:var(--f-v);font-weight:400;
  font-size:4.1em;line-height:.82;padding:.06em .14em 0 0;
  color:var(--gold-hi);text-shadow:0 0 34px rgba(228,206,140,.35)}
@media(max-width:520px){.illum::first-letter{font-size:3.3em}}

/* ============ CODEX MARGIN NUMERALS ============ */
.codex{position:fixed;left:calc(var(--inset) + 1.1rem);top:50%;transform:translateY(-50%);
  z-index:39;display:grid;gap:.85rem;pointer-events:none}
.codex a{pointer-events:auto;font-family:var(--f-m);font-size:.54rem;letter-spacing:.2em;
  color:var(--gold-ash);transition:color .4s,transform .4s;display:block}
.codex a.on{color:var(--gold-hi);transform:translateX(3px)}
.codex a::after{content:"";display:block;width:9px;height:1px;background:currentColor;
  margin-top:.4rem;opacity:.5}
@media(max-width:1180px){.codex{display:none}}

/* ============ INSCRIPTION DRIFT BAND ============ */
.strip2{border-block:1px solid rgba(86,75,46,.28);overflow:hidden;padding:.95rem 0;
  background:linear-gradient(180deg,rgba(18,16,13,.6),transparent)}
.strip2 .run{display:flex;gap:3.5rem;width:max-content;animation:drift 66s linear infinite;
  font-family:var(--f-m);font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap}
.strip2 .run b{color:var(--gold-dim);font-weight:400}
@keyframes drift{to{transform:translateX(-50%)}}

/* ============ ORNAMENT DRAWS OPEN ============ */
.orn i{transform:scaleX(0);transform-origin:right;transition:transform 1.2s cubic-bezier(.16,.84,.28,1)}
.orn i+i{transform-origin:left}
.orn.in i,.in .orn i{transform:scaleX(1)}
.orn s,.orn u{opacity:0;transition:opacity .8s ease .5s}
.orn.in s,.orn.in u,.in .orn s,.in .orn u{opacity:1}

/* ============ HERO DEEP SEAL ============ */
.hero .deep{position:absolute;left:50%;top:46%;width:min(160vw,1500px);aspect-ratio:1;
  transform:translate(-50%,-50%);background:var(--seal) center/contain no-repeat;
  opacity:.032;animation:spin 150s linear infinite reverse;pointer-events:none;z-index:0}

/* =========================================================
   SCALE +25% · legibility pass
   ========================================================= */
body{font-size:clamp(1.06rem,.55vw + .96rem,1.22rem);line-height:1.68}
.mono,.eyebrow{font-size:clamp(.66rem,.85vw,.74rem);letter-spacing:.26em}
.rail__l,.rail__r{font-size:.68rem}
.nav a{font-size:.66rem;letter-spacing:.2em}
.railbot span{font-size:.62rem;letter-spacing:.28em}
.lede{font-size:clamp(1.12rem,1.35vw,1.34rem);line-height:1.72}
h2{font-size:clamp(1.85rem,3.9vw,3.1rem)}
h3{font-size:.82rem;letter-spacing:.22em}
.mast h1{font-size:clamp(2.15rem,5.4vw,3.7rem)}
.fact dt{font-size:.64rem}
.fact dd{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.fact dd small{font-size:.9rem}
.ledger__row strong{font-size:.8rem}
.ledger__row em{font-size:1.02rem}
.pill{font-size:.6rem;padding:.46rem .8rem}
.index .n{font-size:.68rem;min-width:2.6rem}
.index b{font-size:clamp(1.1rem,2.1vw,1.36rem)}
.index .st{font-size:.62rem;letter-spacing:.22em}
.step .n{font-size:.72rem}
.step p{font-size:1.04rem}
.roster__row b{font-size:.76rem}
.roster__row p{font-size:1.04rem}
.cols article p{font-size:1.05rem}
.note b{font-size:.66rem}
.note p{font-size:1.03rem}
.plate .gloss{font-size:.66rem;line-height:2.1}
.plate .rom{font-size:clamp(1.3rem,3vw,1.95rem)}
.plate .glyph{font-size:clamp(2.2rem,5.6vw,3.6rem)}
.house .sub{font-size:.64rem}
.house .svc{font-size:clamp(.7rem,1.35vw,.82rem);line-height:2.25;max-width:60ch}
.house .mk{font-size:clamp(1.7rem,4vw,2.4rem)}
.oath .fine,.sworn .fine{font-size:.62rem}
.sworn .lbl{font-size:.62rem}
.sworn .meta{font-size:.66rem}
.branch .k{font-size:.62rem}
.branch .n{font-size:1.18rem}
.branch p{font-size:1rem}
.arch__node .s{font-size:.64rem}
.arch__node p{font-size:1.02rem}
.foot .legal{font-size:.62rem}
.foot .marks{font-size:.62rem}
.foot .ded{font-size:1.05rem}
.frag .who{font-size:.62rem}
.script{font-size:clamp(.82rem,1.15vw,.95rem)}
.redactbar{font-size:.64rem}
.apply label{font-size:.62rem}
.strip2 .run{font-size:.64rem}

.pull cite{font-size:.64rem}
.inscription{font-size:clamp(.62rem,1.15vw,.72rem)}
.hero__title{font-size:clamp(.68rem,1.7vw,.86rem);letter-spacing:.32em}
.hero__creed{font-size:clamp(1.15rem,2.3vw,1.55rem)}
.hero__stat{font-size:.64rem}
.orn{max-width:640px}
.orn s{width:8px;height:8px}
.orn u{width:5px;height:5px}

/* ===== file furniture ===== */
.filehead{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.filehead .lb{font-family:var(--f-m);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);flex:none}
.filehead .ld{flex:1;height:1px;transform:translateY(-.25em);
  background:repeating-linear-gradient(90deg,rgba(86,75,46,.55) 0 2px,transparent 2px 7px)}
.filehead .rf{font-family:var(--f-m);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);flex:none}

.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(86,75,46,.28);border:1px solid rgba(86,75,46,.34);margin-top:1.8rem}
.meta div{background:var(--void);padding:.85rem 1rem;display:grid;gap:.35rem}
.meta dt{font-family:var(--f-m);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.meta dd{margin:0;font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}


/* =========================================================
   DISPATCH · contact
   ========================================================= */
.dispatch{position:relative;border:1px solid rgba(86,75,46,.65);
  background:linear-gradient(180deg,var(--panel),var(--void));overflow:hidden;margin-top:2.6rem}
.dispatch::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% -10%,rgba(228,206,140,.10),transparent 70%)}
.dispatch__bar{position:relative;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;
  align-items:center;padding:.9rem clamp(1.1rem,3vw,2rem);border-bottom:1px solid rgba(86,75,46,.45);
  font-family:var(--f-m);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}
.dispatch__bar b{color:var(--gold-hi);font-weight:400}
.dispatch__body{position:relative;padding:clamp(2rem,5vw,3.6rem) clamp(1.2rem,4vw,3rem);
  display:grid;gap:1.6rem;justify-items:center;text-align:center}
.dispatch .sw{position:relative;width:104px;height:104px;display:grid;place-items:center}
.dispatch .sw::before{content:"";position:absolute;width:180%;height:180%;
  background:radial-gradient(circle,rgba(233,206,132,.16),transparent 62%)}
.dispatch .sealbg{position:relative;width:94px;height:94px;animation:spin 55s linear infinite}
.dispatch .addr{font-family:var(--f-d);font-size:clamp(1.25rem,3.6vw,2.15rem);letter-spacing:.02em;
  color:var(--gold-hi);border-bottom:1px solid rgba(86,75,46,.7);padding-bottom:.35rem;
  transition:color .3s,border-color .3s;word-break:break-word}
.dispatch .addr:hover{color:#F6E5B4;border-color:var(--gold)}
.dispatch .say{font-family:var(--f-v);font-size:clamp(1.12rem,2.2vw,1.4rem);line-height:1.62;
  color:var(--ivory-2);max-width:44ch}
.dispatch__grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:rgba(86,75,46,.3);border-top:1px solid rgba(86,75,46,.45)}
.dispatch__grid div{background:var(--void);padding:1.1rem clamp(1rem,2.4vw,1.6rem);display:grid;gap:.4rem;text-align:left}
.dispatch__grid dt{font-family:var(--f-m);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)}
.dispatch__grid dd{margin:0;font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory-2);line-height:1.7}

/* =========================================================
   THE WATCH · litany, joining, the roll
   ========================================================= */
.litany{max-width:60ch;margin:0 auto;display:grid;gap:clamp(1.4rem,3vw,2.2rem);text-align:center}
.litany .q{font-family:var(--f-v);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.3;
  color:var(--gold-lt);opacity:0;transform:translateY(14px);
  transition:opacity 1.1s cubic-bezier(.16,.84,.28,1),transform 1.1s cubic-bezier(.16,.84,.28,1)}
.litany .q.in{opacity:1;transform:none}
.litany .q.dim{color:var(--ivory-2);font-size:clamp(1.25rem,2.7vw,1.9rem)}
.litany .q.hot{color:var(--gold-hi);font-family:var(--f-d);font-size:clamp(1.6rem,4vw,2.9rem)}

.join{position:relative;border:1px solid rgba(86,75,46,.65);
  background:linear-gradient(180deg,var(--panel),var(--void));overflow:hidden;margin-top:2.8rem}
.join__bar{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  padding:.9rem clamp(1.1rem,3vw,2rem);border-bottom:1px solid rgba(86,75,46,.45);
  font-family:var(--f-m);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}
.join__bar b{color:var(--gold-hi);font-weight:400}
.join__body{padding:clamp(1.8rem,4.5vw,3rem) clamp(1.2rem,4vw,2.6rem);display:grid;gap:1.2rem;max-width:720px;margin-inline:auto}
.join__body .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.join__body .two{grid-template-columns:1fr}}
.join .row{display:grid;gap:.45rem}
.join label{font-family:var(--f-m);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim)}
.join input{font-family:var(--f-d);font-size:1.02rem;color:var(--ivory);
  background:rgba(0,0,0,.38);border:1px solid rgba(86,75,46,.55);padding:.78rem .95rem;outline:0;width:100%}
.join input:focus{border-color:var(--gold-dim)}
.join input::placeholder{color:var(--gold-deep)}
.join .opt{font-family:var(--f-m);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}

.sigil{display:none}
.sigil.on{display:grid;gap:1rem;justify-items:center;text-align:center;
  animation:rise 1.1s cubic-bezier(.16,.84,.28,1) both;
  padding:clamp(1.8rem,4.5vw,3rem) clamp(1.2rem,4vw,2.6rem)}
.sigil .sw{position:relative;width:96px;height:96px;display:grid;place-items:center}
.sigil .sw::before{content:"";position:absolute;width:190%;height:190%;
  background:radial-gradient(circle,rgba(233,206,132,.24),transparent 60%)}
.sigil .sealbg{position:relative;width:86px;height:86px;animation:spin 55s linear infinite}
.sigil .lb{font-family:var(--f-m);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim)}
.sigil .num{font-family:var(--f-d);font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:.16em;
  text-indent:.16em;color:var(--gold-hi);line-height:1.1}
.sigil .nm{font-family:var(--f-m);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory)}
.sigil .meta{font-family:var(--f-m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory-3);line-height:2}
.sigil .creed{font-family:var(--f-v);font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--ivory-2);max-width:36ch}

/* ---- the roll (forum) ---- */
.roll{margin-top:2.6rem;border-top:1px solid rgba(86,75,46,.3)}
.thread{border-bottom:1px solid rgba(86,75,46,.22);padding:clamp(1.1rem,2.4vw,1.6rem) 0;
  display:grid;gap:.6rem;cursor:pointer;transition:background .3s}
.thread:hover{background:rgba(181,151,79,.035)}
.thread .tt{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.thread .n{font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;color:var(--gold-deep);flex:none;min-width:2.4rem}
.thread h3{font-family:var(--f-d);font-weight:400;font-size:clamp(1.1rem,2.2vw,1.42rem);
  letter-spacing:.02em;color:var(--gold-lt);text-transform:none;margin:0;flex:1}
.thread .ct{font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);flex:none}
.thread p{margin:0 0 0 3.3rem;color:var(--ivory-3);font-size:1.02rem;max-width:70ch}
@media(max-width:560px){.thread p{margin-left:0}}

.panelback{font-family:var(--f-m);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);cursor:pointer;background:none;border:0;padding:0;margin-bottom:1.4rem}
.panelback:hover{color:var(--gold-hi)}
.posts{display:grid;gap:1px;background:rgba(86,75,46,.26);border:1px solid rgba(86,75,46,.3);margin-top:1.6rem}
.post{background:var(--void);padding:clamp(1.1rem,2.4vw,1.6rem);display:grid;gap:.6rem}
.post .hd{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.post .who{color:var(--gold-hi)}
.post .wn{color:var(--gold-deep)}
.post .when{color:var(--gold-deep);margin-left:auto}
.post p{margin:0;color:var(--ivory-2);font-size:1.05rem;line-height:1.7}
.post.witness{background:linear-gradient(180deg,#131009,var(--void))}
.post.witness p{font-family:var(--f-v);font-size:clamp(1.08rem,2vw,1.24rem);color:var(--gold-lt)}
.composer{margin-top:1.6rem;display:grid;gap:.7rem}
.composer textarea{font-family:var(--f-d);font-size:1.02rem;color:var(--ivory);
  background:rgba(0,0,0,.38);border:1px solid rgba(86,75,46,.55);padding:.85rem 1rem;
  min-height:110px;resize:vertical;outline:0;line-height:1.6}
.composer textarea:focus{border-color:var(--gold-dim)}
.composer textarea::placeholder{color:var(--gold-deep)}
.composer .foot2{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.locked{border:1px dashed rgba(86,75,46,.5);padding:1.2rem;text-align:center;margin-top:1.6rem;
  font-family:var(--f-m);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim)}

/* ===== guided next step ===== */
.nextstep{border-top:1px solid rgba(86,75,46,.3);position:relative;z-index:3}
.nextstep a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,4.5vw,3.2rem) var(--pad);
  transition:background .4s}
.nextstep a:hover{background:rgba(181,151,79,.04)}
.nextstep .lb{grid-column:1;font-family:var(--f-m);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:.6rem}
.nextstep .nx{grid-column:1;font-family:var(--f-d);font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:var(--gold-lt);display:block;line-height:1.15}
.nextstep .sb{grid-column:1;font-family:var(--f-v);font-style:italic;font-size:clamp(1rem,1.8vw,1.15rem);
  color:var(--ivory-3);display:block;margin-top:.5rem}
.nextstep .ar{grid-column:2;grid-row:1/4;font-family:var(--f-d);font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--gold-dim);transition:transform .4s,color .4s}
.nextstep a:hover .ar{transform:translateX(8px);color:var(--gold-hi)}

/* ===== watchfire affordance ===== */
.thread{position:relative}
.thread .ct::after{content:" \2192";color:var(--gold-deep)}
.thread:hover .ct{color:var(--gold-hi)}

/* ===== SCRIPTURE OVERTURE ===== */
.overture{position:fixed;inset:0;z-index:90;background:var(--void);display:grid;place-items:center;
  text-align:center;padding:var(--pad);transition:opacity 1.4s ease,visibility 1.4s}
.overture.gone{opacity:0;visibility:hidden;pointer-events:none}
.overture .v{max-width:34ch;opacity:0;transform:translateY(12px);
  transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.16,.84,.28,1)}
.overture .v.on{opacity:1;transform:none}
.overture q{quotes:none;display:block;font-family:var(--f-v);font-size:clamp(1.5rem,4.2vw,3rem);
  line-height:1.34;color:var(--gold-hi)}
.overture cite{display:block;margin-top:1.8rem;font-family:var(--f-m);font-size:.62rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);font-style:normal}
.overture .skip{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--f-m);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-ash);background:none;border:0;cursor:pointer}
.overture .skip:hover{color:var(--gold-dim)}

/* ===== SCRIPTURE BAND ===== */
.verse{text-align:center;max-width:52ch;margin:0 auto}
.verse q{quotes:none;display:block;font-family:var(--f-v);font-size:clamp(1.25rem,2.9vw,2.05rem);
  line-height:1.44;color:var(--ivory)}
.verse cite{display:block;margin-top:1.5rem;font-family:var(--f-m);font-size:.6rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim);font-style:normal}

/* ===== CHAPTER INDEX OVERLAY ===== */
.indexbtn{background:none;border:1px solid rgba(86,75,46,.6);cursor:pointer;
  font-family:var(--f-m);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-lt);padding:.5rem .95rem;transition:border-color .3s,color .3s,background .3s}
.indexbtn:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(181,151,79,.06)}
.chapters{position:fixed;inset:0;z-index:80;background:rgba(6,5,4,.97);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s;
  display:grid;align-content:center;padding:clamp(3rem,8vh,6rem) var(--pad);overflow-y:auto}
.chapters.open{opacity:1;visibility:visible}
.chapters__in{max-width:900px;margin:0 auto;width:100%}
.chapters h4{font-family:var(--f-m);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1.8rem}
.chapters a.ch{display:grid;grid-template-columns:3.4rem 1fr auto;gap:1.2rem;align-items:baseline;
  padding:clamp(.9rem,2vw,1.25rem) 0;border-bottom:1px solid rgba(86,75,46,.24);
  transition:background .3s,padding-left .3s;opacity:0;transform:translateY(10px)}
.chapters.open a.ch{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.28,1),background .3s,padding-left .3s}
.chapters a.ch:hover{background:rgba(181,151,79,.05);padding-left:.7rem}
.chapters .rn{font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;color:var(--gold-deep)}
.chapters .tt{font-family:var(--f-d);font-size:clamp(1.35rem,3.2vw,2.15rem);color:var(--gold-lt);line-height:1.2}
.chapters .ds{font-family:var(--f-v);font-style:italic;font-size:clamp(.95rem,1.6vw,1.1rem);color:var(--ivory-3);text-align:right}
@media(max-width:680px){.chapters a.ch{grid-template-columns:2.6rem 1fr}.chapters .ds{display:none}}
.chapters .close{position:absolute;top:clamp(1.2rem,3vw,2.2rem);right:clamp(1.2rem,4vw,3rem);
  background:none;border:0;cursor:pointer;font-family:var(--f-m);font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-dim)}
.chapters .close:hover{color:var(--gold-hi)}
.chapters .foot3{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.chapters .foot3 a{border-bottom:1px solid rgba(86,75,46,.5)}
.chapters .foot3 a:hover{color:var(--gold-lt)}

/* ===== CHAPTER RULE ===== */
.chaprule{display:flex;align-items:center;gap:1.2rem;max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.6rem,5vw,4rem) var(--pad) 0}
.chaprule .rn{font-family:var(--f-m);font-size:.66rem;letter-spacing:.24em;color:var(--gold-dim);flex:none}
.chaprule .ln{flex:1;height:1px;background:linear-gradient(90deg,rgba(86,75,46,.75),transparent)}
.anchor{display:block;position:relative;top:-6.5rem;visibility:hidden}

/* ===== RAIL CHAPTER NAV ===== */
.chapnav{display:flex;gap:clamp(.7rem,1.6vw,1.5rem);align-items:baseline}
.chapnav a{font-family:var(--f-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory-3);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;white-space:nowrap}
.chapnav a i{font-style:normal;font-size:.52rem;letter-spacing:.1em;color:var(--gold-deep);margin-right:.5em}
.chapnav a:hover{color:var(--gold-hi)}
.chapnav a.on{color:var(--gold-lt);border-color:var(--gold-deep)}
.chapnav a.on i{color:var(--gold)}
@media(max-width:1240px){.chapnav a i{display:none}}



/* ===== CHAPTER JUMP ===== */
.jump{max-width:var(--maxw);margin:0 auto;padding:clamp(2.2rem,4.5vw,3.4rem) var(--pad) 0;
  display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;justify-content:space-between}
.jump .go{display:inline-flex;align-items:baseline;gap:.9rem;border:1px solid rgba(86,75,46,.6);
  padding:.85rem 1.3rem;transition:border-color .3s,background .3s}
.jump .go:hover{border-color:var(--gold);background:rgba(181,151,79,.05)}
.jump .go .lb{font-family:var(--f-m);font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
.jump .go .tt{font-family:var(--f-d);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--gold-lt)}
.jump .go .ar{color:var(--gold-dim);transition:transform .3s}
.jump .go:hover .ar{transform:translateX(5px)}
.jump .side{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--f-m);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.jump .side a{border-bottom:1px solid rgba(86,75,46,.5)}
.jump .side a:hover{color:var(--gold-lt)}

/* ===== FLOATING CHAPTER RAIL (right) ===== */
.chaprail{position:fixed;right:calc(var(--inset) + 1.1rem);top:50%;transform:translateY(-50%);
  z-index:44;display:grid;gap:.55rem;pointer-events:none}
.chaprail a{pointer-events:auto;display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  text-decoration:none;padding:.28rem 0}
.chaprail .lb{font-family:var(--f-m);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);opacity:0;transform:translateX(6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,.84,.28,1);white-space:nowrap}
.chaprail .rn{font-family:var(--f-m);font-size:.54rem;letter-spacing:.12em;color:var(--gold-ash);
  transition:color .35s;min-width:1.7rem;text-align:right}
.chaprail .tk{width:16px;height:1px;background:var(--gold-ash);transition:width .4s cubic-bezier(.16,.84,.28,1),background .35s}
.chaprail a:hover .lb,.chaprail a.on .lb{opacity:1;transform:none}
.chaprail a:hover .rn,.chaprail a.on .rn{color:var(--gold-lt)}
.chaprail a:hover .tk{width:30px;background:var(--gold-dim)}
.chaprail a.on .tk{width:38px;background:var(--gold-hi)}
.chaprail a.on .lb{color:var(--gold-lt)}
@media(max-width:900px){.chaprail{display:none}}

/* retire the old left codex + inline jump bars */
.codex{display:none!important}
.jump{display:none!important}

/* ===== OFFICE PICKER ===== */
.offices{display:flex;flex-wrap:wrap;gap:.55rem}
.offices button{font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(0,0,0,.32);border:1px solid rgba(86,75,46,.5);color:var(--ivory-3);
  padding:.6rem .85rem;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.offices button:hover{border-color:var(--gold-dim);color:var(--gold-lt)}
.offices button.sel{border-color:var(--gold);color:var(--gold-hi);background:rgba(181,151,79,.08)}
.offices .hint{font-family:var(--f-m);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);width:100%;margin-top:.3rem}
.sigil .off{font-family:var(--f-m);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt)}

/* ===== DOOR CARDS ===== */
.branch .dn{font-family:var(--f-m);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:.35rem}
.branch--rsv .dn{color:var(--gold-deep)}

/* ===== TOP CHAPTER NAV (primary) ===== */
.chapnav{display:flex;gap:clamp(.55rem,1.3vw,1.25rem);align-items:baseline;flex:1;justify-content:center}
.chapnav a{font-family:var(--f-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory-3);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;white-space:nowrap}
.chapnav a i{font-style:normal;font-size:.5rem;letter-spacing:.08em;color:var(--gold-deep);margin-right:.45em}
.chapnav a:hover{color:var(--gold-hi);border-color:rgba(181,151,79,.45)}
.chapnav a:hover i{color:var(--gold)}
.chapnav a.on{color:var(--gold-lt);border-color:var(--gold-deep)}
.chapnav a.on i{color:var(--gold)}
@media(max-width:1340px){.chapnav a i{display:none}}
@media(max-width:1040px){.chapnav{display:none}}
@media(min-width:1041px){.indexbtn{display:none}}

/* ===== FLOATING RAIL: panel, never on top of text ===== */
.chaprail{right:calc(var(--inset) + .55rem);padding:.9rem .85rem;gap:.35rem;
  background:rgba(10,8,7,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(86,75,46,.35);border-radius:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.chaprail .lb{opacity:1;transform:none;color:var(--gold-deep)}
.chaprail a:hover .lb{color:var(--gold-hi)}

@media(max-width:1040px){.chaprail{display:none}}

/* rail breathing room at mid widths */
@media(max-width:1420px){.rail__r{display:none}}
@media(max-width:1240px){.rail__l .dos{display:none}}
@media(max-width:1160px){.chapnav{gap:.5rem}.chapnav a{font-size:.58rem;letter-spacing:.12em}}

/* ===== NAV: ALWAYS PRESENT, AT EVERY WIDTH ===== */
.chapnav{display:flex!important;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;justify-content:center}
.chapnav::-webkit-scrollbar{display:none}
@media(max-width:1040px){
  .chapnav{justify-content:flex-start;gap:.85rem}
  .chapnav a{font-size:.58rem;letter-spacing:.14em}
  .indexbtn{display:none}
}
@media(max-width:640px){
  .railtop{flex-wrap:wrap;row-gap:.6rem}
  .chapnav{order:3;flex:1 0 100%;justify-content:flex-start;
    border-top:1px solid rgba(86,75,46,.28);padding-top:.6rem}
  .indexbtn{display:block}
}

/* ===== FLOATING RAIL: TOP RIGHT, ALWAYS VISIBLE ===== */
.chaprail{top:calc(var(--inset) + 4.4rem)!important;transform:none!important;
  right:calc(var(--inset) + .55rem)!important}
@media(max-width:1040px){.chaprail{display:grid;padding:.7rem .6rem;gap:.3rem}}
@media(max-width:700px){.chaprail{display:none}}
@media(max-width:640px){.chaprail{top:calc(var(--inset) + 6.6rem)!important}}

/* ===== DOORS: EVEN FRAMES ===== */
.row3{align-items:stretch}
.row3>div{display:grid;grid-template-rows:auto 1fr}
.branch{height:100%;min-height:270px;align-content:start}
@media(max-width:760px){.branch{min-height:0}}

/* rail: section titles always beside the numerals */
.chaprail .lb{display:block!important;opacity:1;transform:none}
@media(max-width:1160px){.chaprail .lb{font-size:.52rem;letter-spacing:.18em}}
@media(max-width:1040px){.chaprail{padding:.8rem .75rem;gap:.4rem}}
.fact dd small{line-height:1.65}

/* ===== TOP-RAIL CTAs ===== */
.railcta{display:flex;gap:.5rem;flex:none}
.tcta{font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(86,75,46,.6);color:var(--gold-lt);padding:.55rem .9rem;
  transition:border-color .3s,color .3s,background .3s;white-space:nowrap}
.tcta:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(181,151,79,.07)}
.tcta--gold{border-color:rgba(181,151,79,.55);color:var(--gold-hi);background:rgba(181,151,79,.06)}
.tcta--gold:hover{background:rgba(181,151,79,.14)}
@media(max-width:1160px){.tcta{font-size:.55rem;letter-spacing:.14em;padding:.5rem .7rem}}
@media(max-width:640px){.railcta{order:2}.tcta{font-size:.52rem;padding:.45rem .6rem}}

/* top nav sits below the rail on medium widths so the CTAs never crowd */
@media(max-width:1560px){
  .railtop{flex-wrap:wrap;row-gap:.55rem}
  .chapnav{order:3;flex:1 0 100%;justify-content:flex-start;
    border-top:1px solid rgba(86,75,46,.26);padding-top:.55rem}
  .chaprail{top:calc(var(--inset) + 6.4rem)!important}
}

/* ===== OVERTURE SECOND BEAT ===== */

/* ===== BOTTOM RAIL FADE ===== */
.railbot span{transition:opacity .7s ease;display:inline-block}

/* ===== FOOTER SIGN-OFF ===== */
.foot .signoff{font-family:var(--f-m);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep)}

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

/* ===== TOP RAIL: CTAs ONLY ===== */
.railtop{justify-content:space-between}
.railcta{margin-left:auto}
.indexbtn{display:none}
@media(max-width:900px){.indexbtn{display:block;margin-left:.6rem}}
@media(max-width:1560px){.railtop{flex-wrap:nowrap;row-gap:0}}
@media(max-width:640px){.railtop{flex-wrap:wrap;row-gap:.5rem}.rail__l{flex:1 0 100%}}
.chaprail{top:calc(var(--inset) + 4.4rem)!important}


/* ===== HERO: rises only after the overture ===== */
.hero .sealwrap,.hero .wordmark,.hero .hero__rule,.hero .hero__title,
.hero .hero__creed,.hero .hero__stat{opacity:0;animation:none!important}
body.entered .hero .sealwrap{animation:rise 1.9s cubic-bezier(.16,.84,.28,1) .05s forwards!important}
body.entered .hero .wordmark{animation:markrise 3.2s cubic-bezier(.16,.84,.28,1) .9s forwards,
  sheen 11s ease-in-out 6s infinite!important}
body.entered .hero .hero__rule{animation:rise 1.8s cubic-bezier(.16,.84,.28,1) 2.9s forwards!important}
body.entered .hero .hero__title{animation:rise 1.9s cubic-bezier(.16,.84,.28,1) 3.2s forwards!important}
body.entered .hero .hero__creed{animation:rise 2s cubic-bezier(.16,.84,.28,1) 3.7s forwards!important}
body.entered .hero .hero__stat{animation:rise 2s cubic-bezier(.16,.84,.28,1) 4.2s forwards!important}
body.entered .hero .glow{animation:breathe 9s ease-in-out infinite}
.hero__rule{opacity:0}
@media(prefers-reduced-motion:reduce){
  .hero .sealwrap,.hero .wordmark,.hero .hero__rule,.hero .hero__title,
  .hero .hero__creed,.hero .hero__stat{opacity:1!important}
}

/* ===== OVERTURE · COLD OPEN ===== */
.overture{overflow:hidden}
.ov-flash{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,rgba(233,206,132,.16),transparent 70%);opacity:0;pointer-events:none}
.ov-flash.go{animation:jolt 1.6s ease-out}
@keyframes jolt{0%{opacity:1}100%{opacity:0}}
.ov-stage{display:grid;place-items:center;text-align:center;padding:0 var(--pad);width:100%}
.ov-beat{max-width:22ch;opacity:0}
.ov-beat.on{opacity:1}

.ov-beat.punch{
  font-family:var(--f-d);font-size:clamp(2.4rem,8.2vw,6.4rem);line-height:1.06;
  color:var(--gold-hi);letter-spacing:.02em;
  text-shadow:0 0 70px rgba(233,206,132,.30),0 0 160px rgba(181,151,79,.16);
  transform:scale(1.05);filter:blur(6px)}
.ov-beat.punch.on{transform:none;filter:none;
  transition:opacity .16s linear,transform .9s cubic-bezier(.12,.9,.2,1),filter .5s ease}

.ov-beat.verse{
  font-family:var(--f-v);font-size:clamp(2.1rem,6.6vw,5.2rem);line-height:1.2;
  color:var(--gold-hi);letter-spacing:.07em;max-width:18ch;transform:translateY(22px);
  text-shadow:0 0 70px rgba(233,206,132,.26),0 0 170px rgba(181,151,79,.14)}
.ov-beat.verse.on{transform:none;
  transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.16,.84,.28,1)}

.ov-beat.wit{
  font-family:var(--f-v);font-style:italic;font-size:clamp(1.5rem,4.4vw,3.2rem);line-height:1.3;
  color:var(--ivory);max-width:24ch;transform:translateY(14px)}
.ov-beat.wit.on{transform:none;transition:opacity 1.6s ease,transform 2s cubic-bezier(.16,.84,.28,1)}

.ov-beat:not(.on){transition:opacity .8s ease,transform .8s ease,filter .8s ease}

.ov-cite{margin-top:1.8rem;font-family:var(--f-m);font-size:.66rem;letter-spacing:.36em;
  text-transform:uppercase;color:var(--gold-deep);opacity:0;transition:opacity 1.4s ease .6s;min-height:1em}
.ov-cite.on{opacity:1}
.overture .skip{opacity:0;animation:fadein 1.4s ease 2.6s forwards}
@keyframes fadein{to{opacity:1}}

/* overture verse line breaks read as set */
.ov-beat.verse br{content:"";display:block}

.overture{transition:opacity 2.6s ease,visibility 2.6s}
.ov-flash.go{animation:jolt 2.4s ease-out}

/* ===== TYPESETTING · no orphans, no stranded words ===== */
h1,h2,h3,.mast h1,.hammer .n,.pull q,.verse q,.ov-beat,.frag .f,
.chapters .tt,.branch .n,.index b,.oath .q,.thread h3,.dispatch .say,
.plate__line,.house .svc,.sigil .creed,.litany .q,.watch .q{
  text-wrap:balance}
p,.lede,.branch p,.roster__row p,.step p,.cols article p,.fact dd small,
.note p,.gate p,.oath p,.thread p,.post p,.letter p,.ded p,.byline p,
.dispatch__grid dd,.meta dd,.sigil .meta{
  text-wrap:pretty;hyphens:none;overflow-wrap:break-word}
.lede{max-width:66ch}
.head{max-width:72ch}

/* ===== SPACE · mobile and small-desktop optimisation ===== */
@media(max-width:900px){
  :root{--pad:clamp(1.5rem,6vw,2.6rem)}
  .lede{font-size:1.08rem;line-height:1.7}
  .pull q{font-size:clamp(1.2rem,4.4vw,1.7rem)}
  .hammer .n{font-size:clamp(1.55rem,6vw,2.2rem)}
  .frag .f.say{font-size:clamp(1.35rem,6vw,2rem)}
  .ov-beat.verse{font-size:clamp(1.75rem,8.4vw,3rem);max-width:16ch}
  section{padding-block:clamp(3.4rem,9vw,5rem)}
}
@media(max-width:520px){
  :root{--pad:1.45rem}
  .wordmark{letter-spacing:.09em;text-indent:.09em}
  .hero__title{letter-spacing:.22em}
  .facts{grid-template-columns:1fr}
  .plate .gloss{font-size:.62rem}
  .index .r{flex-wrap:wrap;row-gap:.4rem}
  .index .lead{min-width:2rem}
}

/* ===== OVERTURE · ASHVEIL ===== */
.ov-beat.verse{transform:translateY(26px) scale(.93)}
.ov-beat.verse.on{transform:none;
  transition:opacity 2.8s cubic-bezier(.3,0,.2,1),
             transform 4.6s cubic-bezier(.16,.84,.28,1)}
.ov-beat .ch{display:inline-block;white-space:pre;
  will-change:transform,opacity,filter;transform:translateZ(0);backface-visibility:hidden}
.overture.av .ov-beat .ch{animation:avLift var(--d) cubic-bezier(.32,0,.55,1) var(--dl) both}
@keyframes avLift{
  0%  {opacity:1;transform:translateZ(0);filter:blur(0) brightness(1) drop-shadow(0 0 0 rgba(255,236,190,0))}
  18% {opacity:1;filter:blur(0) brightness(1.48) drop-shadow(0 0 9px rgba(255,236,190,.42))}
  48% {opacity:.82;filter:blur(.6px) brightness(1.22) drop-shadow(0 0 6px rgba(233,206,132,.22))}
  100%{opacity:0;filter:blur(3px) brightness(1.1) drop-shadow(0 0 0 rgba(233,206,132,0));
       transform:translate(var(--tx),var(--ty)) rotate(var(--rt)) scale(.82)}
}
.overture.av .ov-cite{opacity:0;transition:opacity 1.1s ease 1.25s}

.ov-bloom,.ov-rim{position:absolute;left:50%;top:42%;width:8px;height:8px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0}
.ov-bloom{
  background:radial-gradient(circle,rgba(255,242,214,.22),rgba(233,206,132,.11) 32%,rgba(181,151,79,.04) 56%,transparent 74%)}
.ov-rim{border:1px solid rgba(255,236,190,.32);box-shadow:0 0 36px rgba(255,236,190,.18)}
.overture.av .ov-bloom{animation:avBloom 3.9s cubic-bezier(.22,.68,.3,1) forwards}
.overture.av .ov-rim{animation:avRim 2.9s cubic-bezier(.2,.72,.3,1) forwards}
@keyframes avBloom{
  0%{opacity:0;width:460px;height:460px}
  34%{opacity:.62}
  64%{opacity:.44}
  100%{opacity:0;width:1750px;height:1750px}
}
@keyframes avRim{
  0%{opacity:0;width:180px;height:180px}
  26%{opacity:.5}
  100%{opacity:0;width:1120px;height:1120px}
}
.overture{transition:opacity 2.8s ease,visibility 2.8s}
.ov-flash.go{animation:jolt 2.6s ease-out}
@media(prefers-reduced-motion:reduce){
  .ov-beat .ch{animation:none!important}
}

/* ===== NOTICE PLATE ===== */
.notice{border-left:1px solid rgba(181,151,79,.55);padding-left:clamp(1rem,2.4vw,1.7rem);
  margin-top:1.7rem;max-width:74ch}
.notice .nl{display:block;font-family:var(--f-m);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.55rem}
.notice p{margin:0;font-family:var(--f-v);font-style:italic;font-size:clamp(1.02rem,1.8vw,1.22rem);
  line-height:1.6;color:var(--ivory-2)}

/* ===== ASHVEIL · lines never break mid-word ===== */
.ov-beat .ln{display:inline-block;white-space:nowrap;max-width:100%}
@media(max-width:560px){
  .ov-beat.verse{font-size:clamp(1.5rem,7.4vw,2.4rem);max-width:none}
}

/* ===== FACTS · wide setting cell ===== */
.facts{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.fact--wide{grid-column:span 2}
.fact--wide dd small{max-width:44ch}
@media(max-width:760px){.fact--wide{grid-column:span 1}}

/* ===== ASHVEIL · unbroken lines ===== */
.ov-beat .ln{display:block;white-space:nowrap}
.ov-beat.verse{max-width:none;width:100%}
@media(max-width:820px){.ov-beat.verse{font-size:clamp(1.35rem,6.6vw,2.4rem)}}
@media(max-width:480px){.ov-beat.verse{font-size:clamp(1.15rem,6.4vw,1.9rem);letter-spacing:.01em}}

/* ===== FACTS · Setting fills the row ===== */
@media(min-width:1000px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,2.05fr)}
  .fact--wide{grid-column:auto}
}
@media(min-width:640px) and (max-width:999px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact--wide{grid-column:span 2}
}
.fact--wide dd small{max-width:60ch}

/* decorative seals keep turning even when the page is still */

/* ===== MARGIN / OVERFLOW HARDENING ===== */
html{overflow-x:clip}
body{overflow-x:clip}
.hero{overflow:clip}                      /* contains the deep seal and the glow */
.strip2{overflow:clip}
.filehead{flex-wrap:wrap;row-gap:.35rem}
.filehead .rf{margin-left:auto}
@media(max-width:560px){
  .filehead .ld{display:none}
  .filehead .rf{margin-left:0;flex-basis:100%}
}
/* nothing may push past the frame */
.wrap,.foot,.jump,.chaprule,.nextstep a{max-width:min(var(--maxw),100%)}
.script,.oath,.join,.dispatch,.plate2,.gate,.note,.apply,.card{max-width:100%}

/* two-hander: each line owns its quotes, one colour, even rhythm */
.frag .f .ex{display:block;color:var(--gold-hi)}
.frag .f .ex--b{margin-top:.44em}


/* ===== FACT INDEX NUMERALS ===== */
.fact dt i{font-style:normal;color:var(--gold-deep);margin-right:.7em;letter-spacing:.14em}

/* ===== GREEK DECOR ===== */




/* ===== THE HOUSE · full sentences, no stranded words ===== */
.house{max-width:100%}
.house .svc{max-width:none;display:grid;gap:.95rem;
  font-size:clamp(.68rem,1.15vw,.8rem);letter-spacing:.15em;line-height:1.95}
.house .svc span{display:block;text-wrap:balance;max-width:68ch;margin-inline:auto}

@media(max-width:900px){
  .house .svc{letter-spacing:.11em;font-size:clamp(.66rem,2.5vw,.76rem);line-height:2.05;gap:1.05rem}
  .house .svc span{max-width:40ch}
  
}
@media(max-width:560px){
  .house .svc{letter-spacing:.08em;font-size:.7rem;line-height:2.1}
  .house .svc span{max-width:30ch}
}

/* ===== LATIN DECOR · inscriptional ===== */



/* the two scripts sit at different weights so they never read as the same mark */



/* ===== TOP RAIL · clear over the hero, solid once you descend ===== */
.railtop{
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background .55s ease, backdrop-filter .55s ease,
             border-color .55s ease, box-shadow .55s ease, padding .45s ease;
}
.railtop::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.72) 55%,rgba(10,8,7,0) 100%);
  opacity:1;transition:opacity .55s ease;
}
.railtop.stuck{
  background:var(--void);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(86,75,46,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.railtop.stuck::before{opacity:0}
@media(prefers-reduced-motion:reduce){.railtop,.railtop::before{transition:none}}

/* the bottom rail matches — a whisper at rest, solid when there is content behind it */
.railbot{background:transparent;backdrop-filter:none;border-top-color:transparent;
  transition:background .55s ease, backdrop-filter .55s ease, border-color .55s ease}
.railbot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(0deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.7) 55%,rgba(10,8,7,0) 100%);
  opacity:1;transition:opacity .55s ease}
.railbot.stuck{background:var(--void);backdrop-filter:blur(14px);
  border-top-color:rgba(86,75,46,.5)}
.railbot.stuck::before{opacity:0}

/* decor is fitted to its section at runtime — never clipped vertically */




/* ===== DECOR · structurally incapable of leaving its section ===== */






/* the seal turns inside its locked box */


/* ===== RUNE · a horizontal file mark, one line, never taller than a section ===== */


/* absolute safety: no decorative element may ever be taller than its section */



/* ===== THE FIELD =====
   One layer for the whole page. Marks cross every colour break uninterrupted,
   sit above the section colour and beneath every word, frame and panel. */
main{position:relative}
.field{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.field .mk{position:absolute;pointer-events:none;will-change:transform}
.field .mk--seal>i{display:block;width:100%;height:100%;
  background:var(--seal) center/contain no-repeat;filter:saturate(.6);
  animation:spin 180s linear infinite}
.field .mk--aram{font-family:'Frank Ruhl Libre',serif;font-weight:300;direction:rtl;
  color:var(--gold);line-height:.9;white-space:nowrap;letter-spacing:.02em}
.field .mk--greek{font-family:'EB Garamond',Georgia,serif;font-weight:400;
  color:var(--gold);line-height:.9;white-space:nowrap;letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){.field .mk--seal>i{animation:none}}

/* every word, panel and rule sits above the field */
.wrap,.head,.foot,.nextstep,.chaprule,.strip2,.hero>div,.verse,.litany,
.orn,.jump,.notice,.meta,.filehead{position:relative;z-index:6}
section{position:relative}

/* ===== nothing reads as white against the black ===== */
.index b{color:var(--ivory-2)}
.verse q{color:var(--ivory-2)}
.roster__row p,.cols article p,.note p,.step p{color:var(--ivory-3)}
.post p{color:var(--ivory-3)}
.dispatch .say,.sigil .creed{color:var(--ivory-3)}
.fact dd small{color:var(--ivory-3)}

@media(prefers-reduced-motion:reduce){.spin--a,.spin--b{animation:none}}

/* ===== MOBILE · one header row, actions at the thumb ===== */
@media(max-width:700px){
  .railtop{flex-wrap:nowrap;row-gap:0;padding-block:.7rem}
  .rail__l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail__l .dos{display:none}
  .indexbtn{display:block;flex:none;margin-left:auto;
    font-size:.6rem;letter-spacing:.22em;padding:.55rem .85rem}
  .chapnav{display:none!important}

  /* the two actions sit where thumbs are */
  .railcta{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;
    display:grid;grid-template-columns:1fr 1fr;gap:0;z-index:46;
    background:rgba(10,8,7,.96);backdrop-filter:blur(14px);
    border-top:1px solid rgba(86,75,46,.55);
    box-shadow:0 -14px 40px rgba(0,0,0,.55);
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px))}
  .railcta .tcta{border:1px solid rgba(86,75,46,.6);text-align:center;
    padding:.8rem .5rem;font-size:.58rem;letter-spacing:.18em;margin:0 .25rem}
  .railbot{display:none}
  main{padding-bottom:9rem}
  footer{padding-bottom:2rem}
  input,textarea,button,.cta{scroll-margin-bottom:9rem}
  .frame{display:none}
}

/* backdrop-filter on the header made it a containing block for the fixed
   action bar, which snapped the bar up to the top once the rail turned solid.
   On phones the rail is solid instead of blurred, so the bar stays at the thumb. */
@media(max-width:700px){
  .railtop,.railtop.stuck{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .railtop.stuck{background:var(--void)}
  .railcta{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,8,7,.985)}
}

/* the speaker line fades on the same clock as the quote, and never reflows mid-fade */
.frag .who{transition:opacity .9s ease!important}
@media(max-width:700px){
  .frag{min-height:16rem}
  .frag .who{font-size:.56rem;letter-spacing:.16em;max-width:32ch;margin-top:1.2rem;
    height:3.2em;display:flex;align-items:flex-start;justify-content:center;line-height:1.6}
  .frag .f{max-width:24ch}
}
@media(max-width:400px){
  .frag .who{font-size:.53rem;letter-spacing:.13em;max-width:30ch}
}

/* ===== THE AGREEMENT ===== */
.ndabox{border:1px solid rgba(86,75,46,.5);background:rgba(0,0,0,.3);
  padding:clamp(1.2rem,3vw,2.2rem);max-height:60vh;overflow-y:auto;
  font-family:var(--f-m);font-size:.78rem;line-height:1.95;color:var(--ivory-3);
  white-space:pre-wrap;margin-top:2rem}
.ndacheck{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;
  font-family:var(--f-d);font-size:1rem;color:var(--ivory-2);line-height:1.6}
.ndacheck input{width:18px;height:18px;flex:none;margin-top:.25rem;accent-color:var(--gold)}

/* a way off the roll — shared devices, and testing */
.notyou{background:none;border:0;cursor:pointer;padding:.4rem 0;margin-top:.4rem;
  font-family:var(--f-m);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);border-bottom:1px solid rgba(86,75,46,.4);transition:color .3s,border-color .3s}
.notyou:hover{color:var(--gold-hi);border-color:var(--gold)}

/* the field sits in front of every section surface and behind everything readable */
section{position:relative;z-index:1}
main > .field{z-index:4}
.wrap,.head,.foot,.nextstep,.chaprule,.strip2,.hero>div,.verse,.litany,
.orn,.jump,.notice,.meta,.filehead,.frag,.house,.plate,.facts,.roster,
.cols,.index,.ledger,.arch,.branch,.gate,.card,.apply,.join,.sigil,
.roll,.thread,.posts,.composer,.dispatch,.note,.step,.oath,.hammer,
.pull,.mast,.seal-note,.sworn{position:relative;z-index:6}
.frame,.railtop,.railbot,.chapters,.overture,.prog{z-index:41}

/* the photographs hold their shape before they load */
.portrait img{aspect-ratio:700/794}
.stack img{aspect-ratio:1/1}

/* the spoken line and its attribution stack in a column that always grows —
   a fixed, centred box let long quotes spill over the copy above and below */
.frag{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5rem;height:auto!important;padding-block:2.2rem}
.frag .who{height:auto!important;min-height:0;margin-top:0;display:block}
@media(max-width:700px){
  .frag{min-height:0;gap:1.35rem;padding-block:2rem}
  .frag .who{max-width:32ch}
}

/* the agreement form */
.apply select{width:100%;background:rgba(0,0,0,.4);border:1px solid rgba(86,75,46,.5);
  color:var(--ivory-2);font-family:var(--f-d);font-size:1rem;padding:.85rem 1rem;
  border-radius:0;appearance:none;cursor:pointer}
.apply select:focus{outline:none;border-color:var(--gold)}
.apply select option{background:#0A0807;color:var(--ivory-2)}

/* not-applicable ticks beside a field */
.tick-na{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;cursor:pointer;
  font-family:var(--f-m);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.tick-na input{width:14px;height:14px;accent-color:var(--gold);cursor:pointer}
.apply input:disabled{opacity:.35;cursor:not-allowed}
.cta.send:disabled{opacity:.4;cursor:not-allowed;border-color:rgba(86,75,46,.35)}

/* the spoken-line block is measured once and locked, so nothing below it ever moves */
.frag{min-height:var(--frag-h, 16rem)!important;height:var(--frag-h, auto)!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5rem;padding-block:2.2rem;overflow:hidden}
@media(max-width:700px){
  .frag{min-height:var(--frag-h, 18rem)!important;gap:1.35rem;padding-block:2rem}
}

/* the premise, and the two doors that close the page */
.premise{max-width:64ch;margin:2.2rem auto 0;text-align:center}
.premise .lede{margin:0 0 1.25rem}
.premise .beats{font-family:var(--f-v);font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.45;
  color:var(--gold-hi);margin:2rem auto;max-width:26ch;text-wrap:balance}
.premise .turn{font-family:var(--f-v);font-style:italic;font-size:clamp(1.4rem,3.2vw,2.2rem);
  color:var(--gold-hi);margin:2rem 0 0;letter-spacing:.01em}



/* the rotations */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:rgba(86,75,46,.3);margin-top:2.4rem;border:1px solid rgba(86,75,46,.3)}
.tier{background:var(--void);padding:clamp(1.4rem,3vw,2.1rem);display:flex;flex-direction:column}
.tier .amt{font-family:var(--f-d);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--gold-lt);
  letter-spacing:.02em;margin-bottom:.35rem}
.tier .tn{font-family:var(--f-m);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem}
.tier p{margin:0;color:var(--ivory-3);font-size:.94rem;line-height:1.72}
.tier--wide{grid-column:1/-1;background:linear-gradient(180deg,rgba(181,151,79,.05),transparent)}
.tier--wide .amt{font-size:clamp(1.2rem,2.4vw,1.6rem);font-style:italic}
@media(max-width:640px){.tiers{grid-template-columns:1fr}}


/* words break where they were meant to break */
.premise .beats span{display:block}
.premise .beats{max-width:none}
.premise .lede,.premise .turn{text-wrap:pretty}
.hero__creed{text-wrap:balance}
h1 span,h2 span,.rvl span{text-wrap:balance}
.lede,.cols article p,.roster__row p,.tier p,.note p{text-wrap:pretty}



/* clauses hold together and break where the sentence breaks */
.clauses span{display:inline-block}
@media(min-width:820px){.clauses span{display:block}}
.nb{white-space:nowrap;display:inline-block}
@media(max-width:420px){.nb{white-space:normal}}

/* no sentence ends alone on a line of one or two words */
p,li,dd,blockquote,q,figcaption,.lede,.tier p,.note p,.roster__row p,
.cols article p,.branch p,.step p,.post p,.opt{text-wrap:pretty}
h1,h2,h3,.rvl span,.hero__creed,.pull q,.beats,.turn{text-wrap:balance}



/* the portrait stays with the letter it belongs to.
   a grid item stretches by default, which leaves a sticky element no room to travel. */
.portrait{align-items:start}
.portrait>div:first-child{align-self:start}
@media(min-width:821px){
  .portrait>div:first-child{position:sticky;top:calc(var(--rail) + 2.2rem);align-self:start}
}

/* the portrait and the letter move as one.
   sticky was set on a column the same height as its neighbour, so it had 31px of
   travel and drifted instead of holding — the photographs ended up stranded
   beside the end of the letter. Both columns now begin together and move together. */
.portrait{align-items:start}
.portrait>div:first-child{position:static!important;align-self:start}
@media(min-width:821px){
  .portrait{align-items:start}
  .portrait>div:first-child{position:static!important;top:auto}
}

/* returning to the roll — its own panel, well clear of the join form */
.returning{margin-top:clamp(3rem,7vw,5.5rem);position:relative}
.returning::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * clamp(1.5rem,3.5vw,2.75rem));
  height:1px;background:linear-gradient(90deg,transparent,rgba(86,75,46,.5),transparent)}
.returning .rt{font-family:var(--f-d);font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:400;
  color:var(--gold-lt);letter-spacing:.03em;margin:0 0 .9rem}
.returning .head p{max-width:62ch;margin:0}
.returning .lost{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(86,75,46,.28)}
.returning .recall{display:grid;gap:1rem;margin-top:1.2rem}
.closing{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}
.closing .cta{min-width:16rem;text-align:center}
@media(max-width:560px){.closing{flex-direction:column;align-items:stretch}.closing .cta{min-width:0}}

/* who the Vault is for — stated under the title, quietly */





/* who the Vault is for — one quiet line under the title, wrapping when it must */
.restricted{font-family:var(--f-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin:.6rem 0 2rem;padding-bottom:1.5rem;line-height:2;
  border-bottom:1px solid rgba(86,75,46,.28);white-space:nowrap;max-width:100%;text-wrap:balance}
@media(max-width:1180px){
  .restricted{white-space:normal;letter-spacing:.13em;max-width:50ch;line-height:2.05}
}
@media(max-width:620px){
  .restricted{font-size:.55rem;letter-spacing:.09em;max-width:34ch;line-height:2.15}
}





/* the strip — three statements, wide apart, unhurried */
.strip2{padding:1.25rem 0}
.strip2 .run{gap:0;animation-duration:64s}
.strip2 .run span{padding:0 5rem;position:relative;white-space:nowrap}
.strip2 .run span::after{content:"";position:absolute;right:0;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(181,151,79,.42)}
.strip2 .run span:last-child::after{display:none}
@media(max-width:760px){
  .strip2 .run span{padding:0 3rem}
  .strip2 .run{animation-duration:52s}
}

/* ── the two doors ─────────────────────────────────────────────
   one open, one shut. real air between them, and the counts
   kept quiet — a file stamp, not a headline.                     */
.doorlede{max-width:60ch;margin:2.2rem auto 0;text-align:center}

.doors{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,6rem);
  margin-top:clamp(4rem,8vw,7rem)}

.door{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:clamp(2.4rem,4vw,3.6rem) 0 0;position:relative}
.door::before{content:"";position:absolute;top:0;left:0;width:clamp(3rem,6vw,5rem);
  height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.door--shut::before{background:linear-gradient(90deg,rgba(169,158,134,.5),transparent)}

/* on wide screens a hairline separates them, rather than a box around each */
@media(min-width:821px){
  .door--shut{padding-left:clamp(3rem,6vw,6rem);
    border-left:1px solid rgba(86,75,46,.32)}
}

.door .dk{font-family:var(--f-m);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.5rem}
.door--shut .dk{color:var(--ivory-3);opacity:.66}

.door h3{font-family:var(--f-d);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:400;
  color:var(--gold-lt);letter-spacing:.045em;margin:0 0 1.8rem;line-height:1.1}

.door .dlead{font-family:var(--f-v);font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.55;
  color:var(--gold-hi);margin:0 0 1.9rem;max-width:30ch}

.door p{margin:0 0 1.7rem;color:var(--ivory-3);font-size:.97rem;line-height:1.85;max-width:44ch}
.door .dnote{color:var(--gold-deep);font-size:.9rem;line-height:1.8;margin-bottom:0}

.door .dfoot{margin-top:clamp(2.4rem,4vw,3.4rem);width:100%}
.door .dfoot .cta{display:inline-block}
.door .dc{margin-top:1.4rem;font-family:var(--f-m);font-size:.55rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);opacity:.8}
.door .dc span{color:var(--gold-dim);font-variant-numeric:tabular-nums}

@media(max-width:820px){
  .doors{grid-template-columns:1fr;gap:0}
  .door{padding-top:2.6rem}
  .door--shut{margin-top:clamp(3.5rem,10vw,5rem);
    padding-top:clamp(3.5rem,10vw,5rem);border-top:1px solid rgba(86,75,46,.32)}
  .door--shut::before{top:auto;margin-top:0}
}

/* the strip reads as one line, not alternating bright and dim */
.strip2 .run{color:var(--gold)}
.strip2 .run b{color:var(--gold);font-weight:400}
.strip2 .run span::after{background:rgba(181,151,79,.55)}

/* ── the top rail is solid, always ─────────────────────────────
   it was transparent over the hero with a soft gradient beneath,
   so the wordmark and the moving strip showed through it.        */
.railtop,
.railtop.stuck{
  background:#080706;
  background-image:linear-gradient(180deg,#0A0807 0%,#070605 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(86,75,46,.4);
  box-shadow:0 10px 34px rgba(0,0,0,.6);
}
.railtop::before{display:none}
.railtop.stuck{box-shadow:0 14px 44px rgba(0,0,0,.72)}

/* nothing may pass beneath it */
.strip2,.field,.stone,.hero{z-index:auto}
.railtop,.railbot{z-index:60}

/* the index overlay covers everything, including the rail */
.chapters{z-index:80}
.chapters .close{z-index:81}

/* the fact cards need room — at 160px wide the prose was breaking mid-word */
@media(min-width:1000px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));}
  .facts .fact--wide{grid-column:1/-1}
}
@media(min-width:1280px){
  .facts{grid-template-columns:repeat(4,minmax(210px,1fr));}
}
.fact small{overflow-wrap:normal;word-break:normal;hyphens:none}

/* ── the background seals hold still ───────────────────────────
   each one was turning on its own clock, 130–270s. Detailed line
   work rotating behind the text repaints continuously, and reads
   as the whole page shimmering. The hero seal still turns.       */
.field .mk--seal > i,
.field .mk > i{animation:none!important;transform:none!important}
.field .mk{will-change:auto}

/* ── consistent breathing room between sections ────────────────
   the section padding was even at 120px, but the first and last
   things inside carried their own margins on top of it, so the
   real gap ran anywhere from 64px to 260px. The padding now does
   the work on its own.                                          */
.wrap > *:first-child,
.wrap > .head:first-child > *:first-child,
.wrap > *:first-child > *:first-child{margin-top:0}

.wrap > *:last-child,
.wrap > *:last-child > *:last-child{margin-bottom:0}

/* ornaments and rules that trail a section should not add to it */
.wrap > .orn:last-child{margin-bottom:0}
.wrap > .pull:last-child{margin-bottom:0}


/* ── one rhythm between sections ───────────────────────────────
   every section breathes the same amount, top and bottom, and
   nothing inside adds to it. Page-top mastheads stay tighter.   */
main > section{padding-block:clamp(4.5rem,8vw,7.5rem)}
main > section:first-child.mast{padding-block:clamp(2.6rem,5vw,5rem) clamp(2.6rem,5vw,4rem)}

/* trailing space inside a section must not stack on the section's own */
main > section > .wrap > *:last-child{margin-bottom:0}
main > section > .wrap > *:first-child{margin-top:0}
.wrap > .plate__line:last-child{margin-bottom:0}

/* mid-page mastheads are sections like any other */
main > section.mast:not(:first-child){padding-block:clamp(4.5rem,8vw,7.5rem)!important}
/* the etymology plate and the fragment carry their own trailing room */
main > section:has(.plate){padding-bottom:clamp(2.5rem,5vw,4.4rem)}
main > section:has(#frag){padding-bottom:clamp(2.5rem,5vw,4.4rem)}
main > section:has(.verse):not(:has(.wrap > .head)){padding-bottom:clamp(3.4rem,6.4vw,6rem)}

/* ── the bottom rail is solid too ──────────────────────────────
   only the top one was made opaque; on desktop the footer bar
   stayed see-through and the page ran behind it. It is hidden
   on phones, which is why mobile looked correct.               */
.railbot,
.railbot.stuck{
  background:#080706;
  background-image:linear-gradient(0deg,#0A0807 0%,#070605 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid rgba(86,75,46,.4);
  box-shadow:0 -10px 34px rgba(0,0,0,.6);
}
.railbot::before{display:none}

/* ── the rails run edge to edge ────────────────────────────────
   they were inset by the frame margin, so a strip of the page
   showed above and beside them and content scrolled through it.
   On phones they were already full-bleed, which is why mobile
   looked right and desktop did not.                             */
.railtop{left:0;right:0;top:0;
  padding-inline:calc(var(--pad) + var(--inset))}
.railbot{left:0;right:0;bottom:0;top:auto;
  padding-inline:calc(var(--pad) + var(--inset))}

/* the decorative frame starts below the top rail and above the bottom one */
.frame{top:calc(var(--inset) + var(--rail, 64px));
  bottom:calc(var(--inset) + var(--railb, 56px))}

/* ── above the fold ────────────────────────────────────────────
   teaser, credit line, thesis, logline, and the first Witness
   voice. Copy only — the wordmark and seal are untouched.       */
.hero__teaser{font-family:var(--f-v);font-style:italic;
  font-size:clamp(1rem,2.1vw,1.35rem);line-height:1.5;color:var(--gold-lt);
  letter-spacing:.01em;margin:0 auto 1.6rem;max-width:34ch;opacity:.92}

.hero__credit{font-family:var(--f-m);font-size:.58rem;letter-spacing:.44em;
  text-transform:uppercase;color:var(--gold-deep);margin:.9rem auto 0}

.hero__thesis{font-family:var(--f-d);font-size:clamp(1.35rem,3vw,2.05rem);
  line-height:1.35;color:var(--gold-hi);letter-spacing:.015em;
  margin:2.6rem auto 0;max-width:26ch;text-wrap:balance}

.hero__creed{margin-top:2.2rem;max-width:60ch;margin-inline:auto}
.hero__creed p{margin:0 0 1.15rem}
.hero__creed p:last-child{margin-bottom:0}

.hero__witness{font-family:var(--f-v);font-style:italic;
  font-size:clamp(1.02rem,2vw,1.28rem);line-height:1.72;color:var(--ivory-3);
  margin:2.6rem auto 0;max-width:52ch;padding-top:2rem;
  border-top:1px solid rgba(86,75,46,.32)}

.hero__stat{margin-top:2.6rem}

@media(max-width:700px){
  .hero__teaser{font-size:1rem;margin-bottom:1.2rem;max-width:26ch}
  .hero__credit{letter-spacing:.3em}
  .hero__thesis{margin-top:2rem;font-size:1.3rem}
  .hero__creed{margin-top:1.8rem}
  .hero__witness{margin-top:2rem;padding-top:1.6rem;font-size:1rem}
}

/* the logline reads to the edge of its measure on a phone */
@media(max-width:430px){
  .hero__creed{max-width:32ch}
}

/* ── the thesis, closing the page ──────────────────────────────
   lifted out of the hero, which was carrying too much. It is the
   last thing said before the doors are offered.                 */
.thesis{text-align:center;max-width:none;margin-inline:auto}
.thesis p{font-family:var(--f-d);font-size:clamp(1.35rem,3.2vw,2.4rem);line-height:1.34;
  color:var(--gold-hi);letter-spacing:.015em;margin:0;text-wrap:nowrap}
.thesis .tw{color:var(--gold-lt)}

/* the Witness voice carries the hero now, so it is no longer a footnote */
.hero__witness{font-size:clamp(1.14rem,2.3vw,1.5rem);line-height:1.68;
  max-width:58ch;margin-top:3rem;padding-top:2.4rem}
@media(max-width:700px){
  .hero__witness{font-size:1.08rem;margin-top:2.4rem;padding-top:2rem}
}

/* room between the credit line, the mini line and what follows */
.hero__mini{margin-top:1.9rem}

@media(max-width:520px){
  .thesis p{font-size:clamp(1.15rem,5.4vw,1.5rem);white-space:nowrap}
}

/* the hero reveals in reading order — the credit line and the
   mini line follow the title rather than arriving before it */

/* the credit line and the mini line rise with everything else,
   in reading order, instead of being present from the first frame */
.hero .hero__credit,
.hero .hero__mini{opacity:0;animation:rise 1.5s cubic-bezier(.16,.84,.28,1) forwards}
.hero .hero__credit{animation-delay:1.32s}
.hero .hero__mini{animation-delay:1.5s}
.hero .hero__stat{animation-delay:1.72s}

body.entered .hero .hero__credit{animation:rise 1.9s cubic-bezier(.16,.84,.28,1) 3.42s forwards!important}
body.entered .hero .hero__mini{animation:rise 1.9s cubic-bezier(.16,.84,.28,1) 3.6s forwards!important}

@media(prefers-reduced-motion:reduce){
  .hero .hero__credit,.hero .hero__mini{opacity:1;animation:none}
}

/* nothing in the hero shows until the overture has lifted */
body:not(.entered) .hero .hero__credit,
body:not(.entered) .hero .hero__mini{opacity:0!important;animation:none!important}

/* ── above the fold, tightened ─────────────────────────────────
   genre line dropped (it repeats twice more within one screen),
   the spoken line broken in two and given the weight of a voice,
   the credit lifted clear of the title, the rule recentred.     */
.hero__mini{margin-top:2.8rem;max-width:none}
.hero__mini span{display:block;font-family:var(--f-d);
  font-size:clamp(1.15rem,2.4vw,1.62rem);line-height:1.5;
  color:var(--ivory);letter-spacing:.005em}
.hero__mini span + span{margin-top:.35rem}

.hero__credit{margin-top:1.6rem;color:var(--gold);
  font-size:.62rem;letter-spacing:.46em;opacity:1}

.hero__rule{margin-block:2.6rem 2.4rem}

@media(max-width:700px){
  .hero__mini{margin-top:2.2rem}
  .hero__mini span{font-size:1.12rem}
  .hero__credit{margin-top:1.2rem;letter-spacing:.34em}
  .hero__rule{margin-block:2rem 1.9rem}
}

/* the genre line anchors the block beneath the spoken lines */
.hero__stat{margin-top:2.4rem}
@media(max-width:700px){.hero__stat{margin-top:1.9rem}}

/* the anchor holds one line on a phone */
@media(max-width:560px){
  .hero__stat{font-size:.52rem;letter-spacing:.17em;white-space:nowrap}
}
@media(max-width:380px){
  .hero__stat{font-size:.48rem;letter-spacing:.13em}
}

/* ── words do not break ────────────────────────────────────────
   a global break-word rule was splitting ordinary words on
   narrow phones: "follow." "wholly-owned" "1955-2018".
   Only addresses and links, which have no spaces to break at,
   are allowed to wrap inside themselves.                        */
body, main, main *, footer, footer *{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  -webkit-hyphens:none;
}
a[href^="mailto:"], a[href^="http"], .addr, .mono, code, .cred{
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* a year span is one word */
.ded{white-space:nowrap}
@media(max-width:340px){.ded{font-size:.8rem}}

/* nothing on the site is stark white — the spoken line sits in
   the same gold as everything else */
.hero__mini span{color:var(--gold-hi)}
.hero__mini span + span{color:var(--gold-hi)}