:root{
--ink:#17130f;
--ink-soft:#201a14;
--ink-softer:#2a2219;
--paper:#efe7d8;
--paper-dim:#e2d7c1;
--wax:#a8391f;
--wax-deep:#6e2013;
--graphite:#a89c87;
--graphite-dim:#7d7362;
--brass:#bb9d5c;
--line:rgba(239,231,216,.16);
--line-strong:rgba(239,231,216,.32);
--line-ink:rgba(23,19,15,.18);
--line-ink-strong:rgba(23,19,15,.38);
--font-display:'VMS Display','Arial Narrow',sans-serif;
--font-body:'VMS Serif',Georgia,'Times New Roman',serif;
--font-mono:'VMS Mono','Courier New',monospace;
--text-hero:clamp(4.2rem,14vw,11.5rem);
--text-h2:clamp(2.1rem,6vw,4.25rem);
--text-h3:clamp(1.35rem,2.6vw,1.9rem);
--text-quote:clamp(1.5rem,3.4vw,2.35rem);
--text-body:1.0625rem;
--text-small:.9rem;
--text-mono:.72rem;
--sp-1:.3rem;--sp-2:.6rem;--sp-3:1.1rem;--sp-4:1.8rem;--sp-5:2.8rem;--sp-6:4.5rem;--sp-7:7rem;--sp-8:10rem;
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--font-body);
font-size:var(--text-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
::selection{background:var(--wax);color:var(--paper);}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--sp-4);}
@media (min-width:900px){.wrap{padding-inline:var(--sp-6);}}
/* grain overlay */
.grain{
position:fixed;inset:0;pointer-events:none;z-index:50;
opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* mono label / eyebrow */
.eyebrow{
font-family:var(--font-mono);
font-size:var(--text-mono);
letter-spacing:.16em;
text-transform:uppercase;
color:var(--graphite);
}
.eyebrow em{color:var(--brass);font-style:normal;}
/* ---------- NAV ---------- */
.site-nav{
position:sticky;top:0;z-index:40;
display:flex;align-items:center;justify-content:space-between;
padding:var(--sp-3) var(--sp-4);
background:rgba(23,19,15,.86);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
@media (min-width:900px){.site-nav{padding:var(--sp-3) var(--sp-6);}}
.nav-mark{
font-family:var(--font-display);font-weight:800;
font-size:1.05rem;letter-spacing:.02em;
text-decoration:none;
}
.nav-mark span{color:var(--brass);}
.nav-links{display:none;gap:var(--sp-5);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;}
@media (min-width:760px){.nav-links{display:flex;}}
.nav-links a{text-decoration:none;position:relative;padding-bottom:2px;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .3s var(--ease);}
.nav-links a:hover::after,.nav-links a:focus-visible::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--brass);}
.nav-links a[aria-current="page"]::after{right:0;}
.nav-mobile-cta{display:none;}
@media (max-width:759px){.nav-mobile-cta{display:inline;}}
@media (max-width:759px){
.nav-links.is-open{
display:flex;flex-direction:column;
position:absolute;top:100%;left:0;right:0;
background:rgba(23,19,15,.97);
border-bottom:1px solid var(--line);
padding:var(--sp-4);gap:var(--sp-4);
}
}
.nav-cta{
font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--line-strong);padding:.55rem 1rem;text-decoration:none;
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.nav-cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
@media (max-width:759px){.nav-cta{display:none;}}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:0;background:none;border:0;cursor:pointer;}
@media (min-width:760px){.nav-toggle{display:none;}}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--paper);transition:transform .25s var(--ease),opacity .25s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ---------- SECTION / LEDGER RAIL ---------- */
.section{
padding-block:var(--sp-7);
border-top:1px solid var(--line);
display:grid;
grid-template-columns:1fr;
gap:var(--sp-5);
}
@media (min-width:860px){
.section{grid-template-columns:96px 1fr;column-gap:var(--sp-6);}
}
.rail{
display:flex;align-items:flex-start;gap:var(--sp-2);
}
@media (min-width:860px){
.rail{
writing-mode:vertical-rl;
text-orientation:mixed;
transform:rotate(180deg);
align-items:flex-end;
height:100%;
}
}
.rail-tag{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-dim);white-space:nowrap;}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
/* index-only: baseline state for the GSAP-driven hero/label sequence (assets/index-anim.js).
A