:root{
  /* compliance terms from DESIGN.md: IBM Plex Mono** Monoo sequence codes; IBM Plex Sans** Sanss labels */
  --chrome:#D9DEE5;
  --gunmetal:#12161B;
  --leather:#1C120F;
  --blue:#7FA9C7;
  --parchment:#E8D8B7;
  --green:#8E9F96;
  --wax:#8F2632;
  --shadow:rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--gunmetal)}
body{
  margin:0;
  color:var(--chrome);
  font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 8%,rgba(127,169,199,.18),transparent 34%),
    radial-gradient(circle at 78% 86%,rgba(142,159,150,.14),transparent 30%),
    linear-gradient(135deg,var(--leather),var(--gunmetal) 42%,#07090b);
  overflow-x:hidden;
}

.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 18% 21%,rgba(232,216,183,.2) 0 1px,transparent 1.8px),
    radial-gradient(circle at 72% 64%,rgba(217,222,229,.16) 0 1px,transparent 1.6px),
    repeating-linear-gradient(18deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);
  background-size:22px 22px,17px 17px,100% 100%;
}

#filamentCanvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.72}
.codex{position:relative;z-index:2}

.folio-nav{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid rgba(217,222,229,.22);
  background:linear-gradient(145deg,rgba(18,22,27,.88),rgba(28,18,15,.72));
  box-shadow:inset 0 0 24px rgba(217,222,229,.06),0 18px 42px var(--shadow);backdrop-filter:blur(10px);
}
.folio-nav a{
  color:var(--green);font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:8px 7px;border-left:2px solid transparent;writing-mode:vertical-rl;
  transition:color .35s,border-color .35s,background .35s;
}
.folio-nav a.active,.folio-nav a:hover{color:var(--chrome);border-color:var(--blue);background:rgba(127,169,199,.12)}

.chapter{min-height:100vh;position:relative;padding:7vh clamp(24px,5vw,74px);display:grid;align-items:center;overflow:hidden}
.chapter:before{content:"";position:absolute;inset:18px;border:1px solid rgba(217,222,229,.08);pointer-events:none}
.bookplate{padding-left:clamp(88px,12vw,164px)}
.manuscript-spine{position:absolute;left:22px;top:24px;bottom:24px;width:78px;border-radius:18px;background:linear-gradient(90deg,#0e0907,var(--leather),#2a1a15);box-shadow:inset -12px 0 24px rgba(0,0,0,.5),8px 0 30px rgba(0,0,0,.34);border:1px solid rgba(232,216,183,.14)}
.stitches{position:absolute;left:35px;top:22px;bottom:22px;border-left:2px dashed rgba(232,216,183,.32)}
.spine-title{position:absolute;bottom:28px;left:26px;writing-mode:vertical-rl;color:var(--parchment);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;opacity:.72}

.bookplate-grid{display:grid;grid-template-columns:minmax(110px,190px) minmax(360px,1fr) minmax(110px,190px);gap:clamp(18px,3vw,40px);align-items:center}
.chrome-plate{
  position:relative;border-radius:28px;padding:clamp(32px,6vw,72px);min-height:520px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.48),transparent 13% 31%,rgba(127,169,199,.28) 42%,transparent 57%,rgba(255,255,255,.32) 74%,transparent),
    conic-gradient(from 230deg at 50% 45%,#727a83,#D9DEE5,#87909a,#f3f5f7,#69727d,#D9DEE5,#7FA9C7,#727a83);
  color:var(--gunmetal);box-shadow:0 42px 80px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.8),inset 0 -28px 60px rgba(18,22,27,.36);
  border:1px solid rgba(255,255,255,.64);isolation:isolate;transform:translateY(0);animation:floatPlate 6s ease-in-out infinite;
}
.chrome-plate:before{content:"";position:absolute;inset:14px;border-radius:22px;border:1px solid rgba(18,22,27,.28);box-shadow:inset 0 0 34px rgba(18,22,27,.28)}
.chrome-plate:after{content:"";position:absolute;inset:0;border-radius:28px;background:repeating-linear-gradient(96deg,rgba(18,22,27,.08) 0 1px,transparent 1px 6px);mix-blend-mode:multiply;opacity:.5;z-index:-1}
.plate-id,.mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.plate-id{font-size:12px;color:rgba(18,22,27,.62)}
h1,h2,h3{font-family:"Cormorant Garamond",Cormorant,Georgia,serif;margin:0;font-weight:600}
h1{font-size:clamp(52px,8.7vw,128px);line-height:.86;letter-spacing:-.055em;text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(18,22,27,.45);margin:34px 0 24px}
h2{font-size:clamp(48px,7vw,92px);line-height:.9;letter-spacing:-.045em;color:var(--parchment)}
h3{font-size:clamp(26px,3vw,42px);line-height:1;color:inherit}
.inscription{font-size:clamp(16px,1.6vw,23px);line-height:1.5;max-width:720px;color:rgba(18,22,27,.78)}
.handwritten,.marginalia{font-family:Kalam,"Comic Sans MS",cursive}
.marginalia{color:var(--parchment);font-size:clamp(20px,2.1vw,34px);line-height:1.25;transform:rotate(-4deg);opacity:0;filter:blur(2px)}
.note-two{transform:rotate(5deg);align-self:end;color:var(--green)}
.reveal-on-load.inked{animation:writeIn 1.8s ease forwards}
.telomere-svg{width:100%;height:auto;margin-top:22px;overflow:visible}.strand,.caps path{fill:none;stroke:url(#strandChrome);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 9px rgba(127,169,199,.7));stroke-dasharray:1200;stroke-dashoffset:1200}.strand.drawn,.caps.drawn path{animation:drawStrand 3.8s cubic-bezier(.2,.6,.14,1) forwards}.strand-b.drawn{animation-delay:.45s}.caps.drawn path{animation-duration:2.4s;animation-delay:2.2s}
.clasp,.mini-clasp{border:1px solid rgba(217,222,229,.42);color:var(--chrome);background:linear-gradient(135deg,rgba(217,222,229,.14),rgba(18,22,27,.7));font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;padding:14px 18px;box-shadow:inset 0 0 18px rgba(127,169,199,.12),0 12px 30px rgba(0,0,0,.34);cursor:pointer;transition:transform .35s,background .35s,border-color .35s}.clasp{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%)}.clasp:hover,.mini-clasp:hover{background:rgba(127,169,199,.18);border-color:var(--blue)}.clasp.unlocked{color:var(--parchment);border-color:var(--wax)}

.chapter-heading{align-self:end;max-width:880px;margin-bottom:28px}.chapter-heading .mono,.margin-copy .mono,.seal-card .mono{display:block;color:var(--green);font-size:12px;margin-bottom:12px}.chapter-heading p,.margin-copy p,.seal-card p{color:rgba(217,222,229,.78);font-size:clamp(16px,1.5vw,21px);line-height:1.55;max-width:760px}
.bento-chapter{grid-template-rows:auto 1fr}.bento-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-auto-rows:minmax(190px,auto);gap:18px}.cell{position:relative;padding:28px;border-radius:22px;overflow:hidden;min-height:220px;box-shadow:0 24px 50px rgba(0,0,0,.38),inset 0 0 28px rgba(255,255,255,.04);transform:translateY(34px);opacity:.45;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s,filter .8s}.cell.visible{transform:translateY(0);opacity:1}.cell.locked:after{content:"LOCKED";position:absolute;right:18px;top:18px;color:var(--wax);font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em}.cell.locked.open:after{content:"OPEN";color:var(--blue)}.cell p{line-height:1.55;color:rgba(217,222,229,.76)}.cell-label{font-size:10px;color:var(--green);display:block;margin-bottom:26px}.tall{grid-row:span 2}.wide{grid-column:span 2}.leather{background:linear-gradient(135deg,#0b0706,var(--leather));border:1px solid rgba(232,216,183,.12)}.chrome{background:linear-gradient(135deg,rgba(217,222,229,.88),#6d7884 48%,rgba(217,222,229,.72));color:var(--gunmetal);border:1px solid rgba(255,255,255,.5)}.chrome p{color:rgba(18,22,27,.72)}.parchment{background:linear-gradient(135deg,#f4e5c2,var(--parchment) 52%,#c9b588);color:var(--leather);border:1px solid rgba(232,216,183,.68)}.parchment p{color:rgba(28,18,15,.72)}.glass{background:linear-gradient(135deg,rgba(127,169,199,.16),rgba(217,222,229,.08));border:1px solid rgba(127,169,199,.28);backdrop-filter:blur(8px)}.sequence-film{position:absolute;left:28px;right:28px;bottom:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sequence-film span{height:54px;background:repeating-linear-gradient(90deg,rgba(18,22,27,.3) 0 2px,rgba(127,169,199,.45) 2px 4px,transparent 4px 11px);border:1px solid rgba(18,22,27,.2);opacity:.7}.footnote{max-height:0;overflow:hidden;border-top:1px solid rgba(28,18,15,.2);margin-top:18px;padding-top:0;line-height:1.55;transition:max-height .7s ease,padding-top .7s ease}.drawer.open .footnote{max-height:190px;padding-top:18px}

.margin-book{display:grid;grid-template-columns:90px minmax(320px,1fr) minmax(260px,430px);gap:clamp(22px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px);border-radius:30px;background:linear-gradient(90deg,rgba(28,18,15,.96),rgba(18,22,27,.82));border:1px solid rgba(217,222,229,.15);box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 0 60px rgba(127,169,199,.06)}.page-edge{height:70vh;border-radius:12px;background:repeating-linear-gradient(90deg,var(--parchment) 0 7px,#cbb98f 7px 9px,var(--chrome) 9px 10px);box-shadow:inset -14px 0 20px rgba(28,18,15,.35),0 0 40px rgba(127,169,199,.18);transform:translateX(-34px);transition:transform 1.1s cubic-bezier(.18,.74,.18,1)}.margin-book.visible .page-edge{transform:translateX(0)}.annotation-stack{display:flex;flex-direction:column;gap:20px}.delayed-note{font-size:clamp(22px,2.6vw,36px);color:var(--parchment);padding:18px 22px;border-left:2px solid var(--green);background:rgba(232,216,183,.06);opacity:0;transform:translateX(30px) rotate(1deg);transition:opacity .8s,transform .8s}.delayed-note.visible{opacity:1;transform:translateX(0) rotate(-1deg)}

.chrome-folio{background:radial-gradient(circle at 62% 30%,rgba(217,222,229,.12),transparent 36%)}.compact{margin-bottom:0}.folio-board{position:relative;min-height:520px;border-radius:28px;padding:88px 34px 34px;background:linear-gradient(135deg,rgba(217,222,229,.14),rgba(18,22,27,.86)),repeating-linear-gradient(100deg,rgba(255,255,255,.04) 0 1px,transparent 1px 8px);border:1px solid rgba(217,222,229,.22);box-shadow:inset 0 0 70px rgba(127,169,199,.07),0 35px 85px rgba(0,0,0,.45)}.tab{position:relative;margin-right:10px;top:-58px;border:1px solid rgba(217,222,229,.28);padding:13px 24px;background:linear-gradient(135deg,#D9DEE5,#7b858e);color:var(--gunmetal);font:600 12px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.16em;cursor:pointer;transform:rotateX(0deg);transition:transform .35s,filter .35s}.tab.active{filter:drop-shadow(0 0 15px rgba(127,169,199,.55));transform:translateY(-8px) rotate(-1deg)}.panel{position:absolute;left:34px;right:34px;top:118px;bottom:34px;padding:clamp(28px,5vw,70px);border-radius:22px;background:linear-gradient(135deg,rgba(28,18,15,.85),rgba(18,22,27,.92));border:1px solid rgba(127,169,199,.18);opacity:0;transform:translateY(22px) scale(.98);transition:opacity .5s,transform .5s;pointer-events:none}.panel.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.panel p{font-size:clamp(18px,1.8vw,25px);line-height:1.55;max-width:740px;color:rgba(217,222,229,.78)}

.final-seal{place-items:center}.seal-card{text-align:center;max-width:820px;padding:clamp(34px,7vw,82px);border-radius:34px;background:linear-gradient(135deg,rgba(217,222,229,.13),rgba(28,18,15,.88));border:1px solid rgba(217,222,229,.22);box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 0 70px rgba(142,159,150,.08)}.seal-card p{margin-left:auto;margin-right:auto}.wax-seal{width:150px;height:150px;margin:38px auto 22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#b23a45,var(--wax) 45%,#4c1017);color:var(--parchment);font:600 50px/1 "Cormorant Garamond",serif;box-shadow:inset 0 8px 22px rgba(255,255,255,.18),inset 0 -12px 25px rgba(0,0,0,.4),0 0 34px rgba(143,38,50,.34)}.closing-note{color:var(--parchment);font-size:28px!important;transform:rotate(-2deg)}

@keyframes floatPlate{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes writeIn{to{opacity:1;filter:blur(0)}}
@keyframes drawStrand{to{stroke-dashoffset:0}}

@media (max-width:900px){.folio-nav{display:none}.bookplate{padding-left:24px}.manuscript-spine{display:none}.bookplate-grid,.margin-book{grid-template-columns:1fr}.marginalia{display:none}.bento-grid{grid-template-columns:1fr}.wide,.tall{grid-column:auto;grid-row:auto}.chrome-plate{min-height:auto}.page-edge{height:70px}.chapter{padding:7vh 20px}}