/* ============================================================
   NOVAL STUDIOS — "The Ledger" design system v2 (DESIGN.md)
   Shared tokens + furniture for every brand surface.
   Serif + spaced caps only. No mono. No sans. No gradients.
   ============================================================ */

:root{
  --paper:#F5F0E6;
  --paper-deep:#EDE6D6;
  --ink:#1C1814;
  --ink-2:#4A4238;
  --ink-3:#6B6252;
  --rule:rgba(28,24,20,.16);
  --rule-soft:rgba(28,24,20,.08);
  --vault:#14231C;
  --vault-2:#1B2E24;
  --paper-on-vault:#EFE9DA;
  --hunter:#1E4434;
  --hunter-deep:#163327;
  --gilt:#A98B4F;
  --gilt-text:#7D6432; /* AA-passing gold for TEXT on paper; #A98B4F stays for rules/decor + on-vault text */
  --gilt-soft:rgba(169,139,79,.35);
  --oxblood:#6B2E2A;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;
  --measure:720px;
  --spread:1240px; /* was 1140 — read as a narrow strip on 1920 monitors (Caleb 08-25) */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17.5px;
  line-height:1.65;
  font-feature-settings:"onum" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper grain — 2.5% noise, invisible until you look */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer,nav{position:relative;z-index:1}

::selection{background:var(--gilt-soft);color:var(--ink)}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-optical-sizing:auto;
  font-weight:580;
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(44px,7vw,92px);font-weight:620}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(21px,2.4vw,27px);line-height:1.18}
h4{font-size:19px;line-height:1.3}

p{color:var(--ink-2)}
strong,b{font-weight:640;color:var(--ink)}
em,i{font-style:italic}
a{color:var(--hunter);text-decoration:none;border-bottom:1px solid var(--gilt-soft);transition:border-color .25s,color .25s}
a:hover{color:var(--hunter-deep);border-bottom-color:var(--gilt)}
a:focus-visible,button:focus-visible{outline:2px solid var(--hunter);outline-offset:3px;border-radius:1px}

img{max-width:100%;display:block}

/* ---------- furniture ---------- */

.wrap{max-width:var(--spread);margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.prose{max-width:var(--measure)}

/* spaced-caps label — replaces every mono slot */
.caps{
  font-family:var(--text);
  font-weight:600;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-feature-settings:"onum" 0;
}
.caps.gilt{color:var(--gilt-text)}
.caps.hunter{color:var(--hunter)}

/* section folio: "No. 01 — Title" over a gilt double rule */
.folio{margin-bottom:clamp(28px,4vw,44px)}
.folio .fno{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.folio .fno .no{
  font-family:var(--serif);font-weight:560;font-size:15px;color:var(--gilt-text);
  font-feature-settings:"onum" 1;letter-spacing:.02em;white-space:nowrap;
}
.folio .fno .caps{color:var(--ink-3)}
.folio .frule{height:1px;background:var(--rule);position:relative;overflow:visible}
.folio .frule::before{
  content:"";position:absolute;left:0;top:-3px;height:2px;width:64px;background:var(--gilt);
  transform-origin:left center;
}
.folio h2{margin-top:22px;max-width:820px}

/* gilt hairline divider */
.hr{border:0;height:1px;background:var(--rule);margin:clamp(40px,7vw,84px) 0}

/* dossier entry — the anti-card: rule-separated, numbered, no border */
.dossier{border-top:1px solid var(--rule);padding:clamp(26px,3.5vw,40px) 0}
.dossier:last-child{border-bottom:1px solid var(--rule)}
.dossier .dnum{
  font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,64px);
  line-height:1;color:var(--gilt);font-feature-settings:"onum" 1;
}

/* drop cap for lead paragraphs (use class="dropcap" on the p) */
.dropcap::first-letter{
  font-family:var(--serif);font-weight:600;color:var(--hunter);
  float:left;font-size:3.6em;line-height:.82;padding:.06em .09em 0 0;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}

/* buttons — rectangular, engraved */
.btn{
  display:inline-block;padding:15px 30px 14px;border-radius:2px;cursor:pointer;
  font-family:var(--text);font-weight:600;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;border:1px solid transparent;transition:all .25s;
  text-decoration:none;
}
.btn.primary{background:var(--hunter);color:var(--paper-on-vault);border-color:var(--hunter)}
.btn.primary:hover{background:var(--hunter-deep);border-color:var(--hunter-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{border-color:var(--hunter);color:var(--hunter)}
.btn.onvault{background:var(--gilt);color:var(--vault);border-color:var(--gilt)}
.btn.onvault:hover{background:#BC9C5D;border-color:#BC9C5D}

/* ledger table — bank-statement DNA */
.ledger{width:100%;border-collapse:collapse;font-size:15.5px}
.ledger th{
  text-align:left;font-family:var(--text);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 14px;border-bottom:1px solid var(--ink);font-feature-settings:"onum" 0;
}
.ledger td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);vertical-align:top}
.ledger tr:nth-child(even) td{background:rgba(237,230,214,.55)}
.ledger td.fig,.ledger th.fig{text-align:right;font-feature-settings:"onum" 1,"tnum" 1;white-space:nowrap}
.ledger td b{color:var(--ink)}

/* the vault band — inverted section */
.vault{background:var(--vault);color:var(--paper-on-vault)}
.vault h1,.vault h2,.vault h3,.vault h4{color:var(--paper-on-vault)}
.vault p{color:rgba(239,233,218,.82)}
.vault .caps{color:rgba(239,233,218,.55)}
.vault .caps.gilt{color:var(--gilt)}
.vault a{color:#D8C89E;border-bottom-color:rgba(169,139,79,.4)}
.vault a:hover{color:#EADDB8}
.vault .hr{background:rgba(239,233,218,.14)}

/* the seal */
.seal{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--gilt);
  display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;
}
.seal::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--gilt-soft)}
.seal span{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--gilt);font-variation-settings:"SOFT" 0,"WONK" 0}

/* wordmark */
.wordmark{font-family:var(--serif);font-weight:640;font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:.01em;color:var(--ink);border:0}
.wordmark .dot{color:var(--gilt)}

/* scroll progress (long documents) */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--gilt);width:0;z-index:60}

/* reveal primitives — motion.js drives. FAIL-OPEN: content is visible by
   default; only a page that proved JS is running (html.js) pre-hides, and the
   no-motion class un-hides again for reduced-motion users. */
html.js .reveal,html.js .reveal-line{opacity:0;transform:translateY(24px)}
html.js.no-motion .reveal,html.js.no-motion .reveal-line{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-line{opacity:1!important;transform:none!important}
  *{animation:none!important;transition:none!important}
}

/* pull quote */
.pull{
  font-family:var(--serif);font-weight:480;font-style:italic;
  font-size:clamp(22px,2.8vw,30px);line-height:1.35;color:var(--ink);
  border-left:2px solid var(--gilt);padding-left:26px;max-width:760px;
}

/* small print */
.fine{font-size:13.5px;color:var(--ink-3);line-height:1.6}

@media (max-width:640px){
  body{font-size:16.5px}
  .btn{width:100%;text-align:center}
  .btn + .btn{margin-top:12px}
}

/* ---------- print: the PDF path (all pages) ---------- */
@media print{
  body::before{display:none}
  .reveal,.reveal-line,.hero-after,.reveal-group>*{opacity:1!important;transform:none!important}
  .progress{display:none}
}