/* ───────────────────────────────────────────────────────────
   HENRY POOLE & CO — THE LEDGER
   Iron-gall on vellum · Newsreader + IBM Plex Mono
   ─────────────────────────────────────────────────────────── */

:root{
  --vellum:        #EDE6D6;
  --vellum-edge:   #E2D9C5;
  --ink:           #1B1410;
  --ink-wet:       #1f2c4a;        /* indigo-black, settles into ink */
  --gilt:          #8A6E3B;
  --foxing:        #7E4A2B;
  --seal:          #5C1B1B;
  --hair:          rgba(27,20,16,0.18);
  --hair-strong:   rgba(27,20,16,0.42);

  --maxw:          78ch;            /* a typed page, not a screen */
  --gut:           clamp(28px, 6vw, 72px);
  --t-base:        clamp(16px, 1vw + 12px, 19px);

  --ease:          cubic-bezier(.2,.7,.15,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--vellum);
  color:var(--ink);
  font-family:'Newsreader', Georgia, serif;
  font-weight:300;
  font-size:var(--t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern","onum","calt";
}

body{
  cursor:none;
  overflow-x:hidden;
}
@media (hover:none){ body{ cursor:auto; } }

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

.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:400; letter-spacing:0.02em; }

a{ color:inherit; text-decoration:none; }

.defs{ position:absolute; width:0; height:0; pointer-events:none; }

/* ─────────────  VELLUM LIVING TEXTURE (static SVG turbulence)  ───────────── */
.vellum{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255,250,235,0.55), transparent 50%),
    radial-gradient(110% 90% at 80% 100%, rgba(126,74,43,0.06), transparent 55%),
    linear-gradient(180deg, var(--vellum) 0%, var(--vellum-edge) 100%);
}
.vellum__foxing,
.vellum__fibre{
  position:absolute; inset:-2%;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.vellum__foxing{ filter:url(#foxing); opacity:0.55; }
.vellum__fibre{  filter:url(#fibre);  opacity:0.85; }

/* page edge shadow — the next folio waiting beneath */
body::after{
  content:""; position:fixed; top:0; right:0; bottom:0;
  width:48px; pointer-events:none; z-index:1;
  background:linear-gradient(270deg, rgba(27,20,16,0.10), transparent 60%);
  transition:width .8s var(--ease), background .8s var(--ease);
}
body.edge-lift::after{ width:120px; background:linear-gradient(270deg, rgba(27,20,16,0.18), transparent 70%); }

/* ─────────────  LOADER  ───────────── */
.loader{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  background:var(--vellum);
  transition:opacity 1.2s var(--ease), visibility 1.2s var(--ease);
}
.loader__inner{
  width:min(560px, 86vw);
  text-align:center;
  color:var(--ink);
}
.loader__cipher{ width:100%; height:auto; color:var(--ink); }
.loader__cipher-text{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:inscribe 2.4s var(--ease) .2s forwards,
            inkfill 1.0s var(--ease) 2.5s forwards;
}
@keyframes inscribe{ to{ stroke-dashoffset:0; } }
@keyframes inkfill{ to{ fill:var(--ink); stroke-width:0.2; } }

.loader__rule{ margin:14px auto 18px; height:1px; max-width:0; background:var(--ink); transition:max-width 1.6s var(--ease) 1.0s; }
.loader.is-running .loader__rule{ max-width:100%; }

.loader__dates{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.42em;
  color:var(--ink); opacity:0; transition:opacity .8s var(--ease) 1.8s;
}
.loader.is-running .loader__dates{ opacity:1; }
.loader__dates em{ margin:0 .8em; font-style:normal; opacity:.5; }
.loader__dates span{ display:inline-block; }

.loader__caption{
  margin-top:22px;
  font-family:'Newsreader', serif;
  font-style:italic; font-weight:300;
  font-size:13px; letter-spacing:.04em;
  opacity:0; transition:opacity .9s var(--ease) 2.2s;
}
.loader.is-running .loader__caption{ opacity:.7; }

.loader.is-done{ opacity:0; visibility:hidden; }

/* ─────────────  PERSISTENT FRAME (margin metadata)  ───────────── */
.frame{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:50;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.is-ready .frame{ opacity:.78; }

.frame > div{
  position:absolute; padding:22px;
  display:flex; flex-direction:column; gap:4px;
  pointer-events:auto;
}
.frame__tl{ top:0; left:0; }
.frame__tr{ top:0; right:0; align-items:flex-end; text-align:right; max-width:46vw; }
.frame__bl{ bottom:0; left:0; }
.frame__br{ bottom:0; right:0; align-items:flex-end; text-align:right; flex-direction:row !important; gap:8px; align-items:center !important; }

.frame .lab{ opacity:.55; font-weight:300; }
.frame .val em{ font-style:normal; opacity:.55; padding:0 .35em; }
.frame .sep{ opacity:.4; }

.warrant{ display:inline-flex; gap:6px; align-items:baseline; }
.warrant__year{ opacity:.65; }
.warrant__name{ font-family:'Newsreader', serif; font-style:italic; letter-spacing:.02em; text-transform:none; font-size:12px; }
.warrant{ transition:opacity .9s var(--ease); }
.warrant.swap{ opacity:0; }

.index-trigger{
  background:none; border:0; padding:0;
  font:inherit; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink); cursor:none;
  display:inline-flex; gap:10px; align-items:center;
}
.index-trigger svg{ width:22px; height:11px; opacity:.55; transition:transform .6s var(--ease), opacity .4s; }
.index-trigger:hover svg{ transform:translateX(4px); opacity:1; }
@media(hover:none){ .index-trigger{ cursor:pointer; } }

/* ─────────────  INDEX PANEL  ───────────── */
.index{
  position:fixed; inset:0 auto 0 0; width:min(420px, 92vw);
  background:var(--vellum);
  z-index:60;
  transform:translateX(-100%);
  transition:transform 1s var(--ease);
  border-right:1px solid var(--hair-strong);
  box-shadow: 8px 0 40px -20px rgba(27,20,16,0.25);
  pointer-events:none;
}
.index.is-open{ transform:translateX(0); pointer-events:auto; }
.index__inner{ padding:88px 36px 36px; height:100%; overflow-y:auto; }
.index__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:28px; }
.index__head .lab{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; }
.index__close{ background:none; border:0; font:inherit; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; cursor:none; color:var(--ink); padding:4px 0; border-bottom:1px solid var(--hair-strong); }
@media(hover:none){ .index__close{ cursor:pointer; } }

.index__list{ list-style:none; padding:0; margin:0; counter-reset:none; }
.index__list li{ border-top:1px solid var(--hair); }
.index__list li:last-child{ border-bottom:1px solid var(--hair); }
.index__list a{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:14px; padding:18px 0;
  align-items:baseline;
  transition:padding .5s var(--ease), color .4s var(--ease);
}
.index__list a:hover{ padding-left:10px; color:var(--foxing); }
.index__list .num{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.18em; opacity:.55; }
.index__list .ttl{ font-family:'Newsreader', serif; font-style:italic; font-weight:300; font-size:18px; }
.index__list .dt{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em; opacity:.45; text-transform:uppercase; }
.index__foot{ margin-top:36px; font-style:italic; font-size:13px; opacity:.55; line-height:1.6; }

/* ─────────────  FOLIO MAIN  ───────────── */
.folio{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:14vh var(--gut) 10vh;
}

/* spine — hairline gutter rule running the page */
.spine{
  position:fixed;
  top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, var(--hair) 8%, var(--hair) 92%, transparent 100%);
  transform:translateX(-0.5px);
  pointer-events:none;
  z-index:1;
}
@media (max-width: 720px){ .spine{ display:none; } }

/* ─────────────  ENTRY  ───────────── */
.entry{ position:relative; padding:13vh 0 11vh; }
.entry + .entry{ border-top:1px solid var(--hair); }

.entry__num{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase;
  opacity:.6;
  margin-bottom:18px;
}
.entry__num .mono{ opacity:.5; padding-right:6px; }

.entry__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px;
  padding-bottom:14px;
  margin-bottom:48px;
  border-bottom:1px solid var(--hair);
  flex-wrap:wrap;
}
.entry__year{
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  opacity:.7;
}
.entry__year em{ font-style:normal; opacity:.5; padding:0 .4em; }
.entry__rubric{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(15px, 1.2vw, 18px);
  letter-spacing:.01em;
  opacity:.85;
}

/* MASTHEAD — frontispiece */
.entry--front{ padding-top:6vh; padding-bottom:13vh; }
.masthead{
  font-family:'Newsreader', serif;
  font-weight:200;
  font-size:clamp(54px, 10vw, 148px);
  line-height:0.92;
  letter-spacing:-0.02em;
  margin:0 0 48px;
  font-feature-settings:"liga","kern","ss01";
}
.masthead__l1{ display:block; }
.masthead__amp{ display:block; font-size:0.46em; opacity:.62; padding:.18em 0 .12em; }
.masthead__amp em{ font-style:italic; font-weight:300; }
.masthead__l2{ display:block; padding-left:1.4ch; }
.masthead__l2 em{ font-style:italic; font-weight:200; }

.kicker{
  font-style:italic; font-weight:300;
  font-size:clamp(17px, 1.6vw, 22px);
  line-height:1.55;
  max-width:54ch;
  opacity:.85;
  margin:0 0 56px;
}
.entry__rule{ height:1px; background:var(--hair-strong); width:100%; margin:0 0 40px; }
.lede{
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.65;
  max-width:60ch;
  opacity:.92;
  margin:0;
}

/* DROP CAPS */
.dropcap{ font-size:clamp(17px, 1.4vw, 20px); line-height:1.7; max-width:62ch; }
.dropcap .cap{
  float:left;
  font-family:'Newsreader', serif;
  font-weight:200;
  font-size:5.4em;
  line-height:0.86;
  padding:0.05em 0.12em 0 0;
  margin:0 .04em -0.1em -0.02em;
  color:var(--ink);
}
.dropcap em{ font-style:italic; }

.entry p + p{ margin-top:1.7em; }
.entry em{ font-style:italic; }

/* DISPLAY (large pull lines) */
.display{
  font-family:'Newsreader', serif;
  font-weight:200;
  font-size:clamp(28px, 4vw, 52px);
  line-height:1.08;
  letter-spacing:-0.012em;
  max-width:22ch;
  margin:0 0 48px;
}
.display em{ font-style:italic; opacity:.86; }

/* LEDGER LINE — two-column key/val rendered as ruled rows */
.ledgerline{
  display:grid;
  grid-template-columns:14ch 1fr;
  gap:0 22px;
  margin-top:64px;
  padding-top:18px;
  border-top:1px solid var(--hair);
  font-size:14px;
  line-height:1.95;
}
.ledgerline > span{ padding:6px 0; border-bottom:1px solid var(--hair); }
.ledgerline .ll-k{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.55; padding-top:10px;
}
.ledgerline .ll-v{ font-family:'Newsreader', serif; font-style:italic; font-weight:300; }
.ledgerline .ll-v em{ font-style:normal; }

/* THE ROLL */
.roll{
  list-style:none; padding:0;
  margin:56px 0 0;
  border-top:1px solid var(--hair-strong);
}
.roll li{
  display:grid;
  grid-template-columns:13ch 1fr auto;
  gap:24px;
  padding:24px 0;
  align-items:baseline;
  border-bottom:1px solid var(--hair);
  transition:background .5s var(--ease), padding .5s var(--ease);
}
.roll li:hover{ background:rgba(126,74,43,0.05); padding-left:8px; }
.r-no{ font-size:10.5px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; }
.r-name{ font-family:'Newsreader', serif; font-style:italic; font-weight:300; font-size:clamp(20px, 2.2vw, 28px); line-height:1.15; }
.r-meta{ font-size:10.5px; letter-spacing:.18em; opacity:.55; text-align:right; }
@media (max-width:640px){
  .roll li{ grid-template-columns:1fr; gap:6px; }
  .r-meta{ text-align:left; }
}

/* PROCESS */
.process{ list-style:none; padding:0; margin:32px 0 0; counter-reset:none; }
.process li{
  display:grid;
  grid-template-columns:6ch 1fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid var(--hair);
  align-items:baseline;
}
.process li:last-child{ border-bottom:1px solid var(--hair); }
.p-no{
  font-family:'Newsreader', serif;
  font-style:italic; font-weight:300;
  font-size:24px; opacity:.55;
}
.p-t{ font-family:'Newsreader', serif; font-style:italic; font-weight:300; font-size:clamp(18px, 1.6vw, 22px); padding-right:.4ch; }
.p-d{ opacity:.85; }

/* BENCH FIGS */
.bench-figs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  margin-top:36px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.bench-figs .bf{
  background:var(--vellum);
  padding:22px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.bf-n{ font-size:clamp(28px, 3vw, 40px); letter-spacing:.02em; opacity:.92; }
.bf-l{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.55; }
@media (max-width:640px){ .bench-figs{ grid-template-columns:repeat(2,1fr); } }

/* COLOPHON */
.entry--colophon{ text-align:center; padding-bottom:14vh; }
.entry--colophon .entry__head{ justify-content:center; gap:18px; }
.closing{
  font-family:'Newsreader', serif; font-style:italic; font-weight:300;
  font-size:clamp(22px, 2.8vw, 36px); line-height:1.3;
  max-width:24ch; margin:56px auto 28px;
}
.closing-mail{
  display:inline-block;
  font-family:'Newsreader', serif; font-weight:300;
  font-size:clamp(28px, 4.6vw, 56px);
  letter-spacing:-0.01em;
  position:relative; padding-bottom:0.12em;
}
.closing-mail::after{
  content:""; position:absolute; left:0; right:0; bottom:0.04em;
  height:1px; background:var(--ink);
  transform-origin:left; transform:scaleX(1);
  transition:transform .9s var(--ease);
}
.closing-mail:hover{ color:var(--foxing); }
.closing-mail:hover::after{ background:var(--foxing); transform:scaleX(1.06); }
.closing-tel{ margin-top:24px; font-style:italic; opacity:.7; }

.seal{ width:130px; margin:80px auto 48px; color:var(--seal); opacity:.85; }
.seal svg{ width:100%; height:auto; }

.colophon-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  margin:48px 0;
  text-align:left;
}
.colophon-grid > div{
  background:var(--vellum); padding:30px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.colophon-grid .lab{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.55; }
.colophon-grid .val{ font-family:'Newsreader', serif; font-style:italic; font-size:16px; }
.colophon-grid .val.mono, .colophon-grid .val .mono{ font-style:normal; }
@media(max-width:640px){ .colophon-grid{ grid-template-columns:repeat(2,1fr); } }

.closing-rule{ height:1px; background:var(--hair-strong); margin:56px 0 32px; }
.imprint{ font-style:italic; font-size:13px; opacity:.6; line-height:1.7; max-width:62ch; margin:0 auto; }

.byline{ font-style:italic; opacity:.7; max-width:54ch; margin-top:48px; }

/* ─────────────  INSCRIPTION REVEAL (word-level)  ───────────── */
.inscribe-target [data-i]{
  display:inline-block;
  white-space:nowrap;
  opacity:0;
  color:var(--ink-wet);
  transform:translateY(0.16em);
  transition:
    opacity .38s var(--ease),
    color .7s var(--ease) .08s,
    transform .42s var(--ease);
}
.inscribe-target.is-revealed [data-i]{
  opacity:1;
  color:var(--ink);
  transform:translateY(0);
}

/* ─────────────  CUSTOM CURSOR — NIB  ───────────── */
.nib{
  position:fixed;
  top:0; left:0;
  width:18px; height:27px;
  pointer-events:none;
  z-index:9999;
  transform:translate(-9px, -3px) rotate(0deg);
  transition:opacity .4s var(--ease);
  opacity:0;
  will-change:transform;
}
.is-ready .nib{ opacity:.92; }
@media (hover:none){ .nib{ display:none; } }

.nib-trail{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
  mix-blend-mode:multiply;
}
@media (hover:none){ .nib-trail{ display:none; } }

/* ─────────────  REDUCED MOTION  ───────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .inscribe-target [data-i]{ opacity:1 !important; color:var(--ink) !important; transform:none !important; filter:none !important; }
}

/* ─────────────  MOBILE TYPOGRAPHY ADJUSTMENTS  ───────────── */
@media (max-width: 720px){
  :root{ --maxw: 100%; }
  .folio{ padding:14vh 22px 12vh; }
  .frame{ font-size:9.5px; letter-spacing:.18em; }
  .frame > div{ padding:14px 16px; }
  .frame__tr{ max-width:60vw; }
  .warrant__name{ font-size:11px; }
  .entry__head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .masthead__l2{ padding-left:0.6ch; }
  .ledgerline{ grid-template-columns:1fr; gap:0; }
  .ledgerline .ll-k{ padding-top:14px; border-bottom:0; }
  .ledgerline .ll-v{ padding-bottom:14px; }
}