/* ═══════════════════════════════════════════════════════════════════════════
   FOVRTH.ESTATE — accountability, on the record
   Register: investigative / institutional / public-record. Editorial serif,
   letterpress rules, a verification-ledger spine, a vermilion seal accent.
   CSS only — reveals via animation-timeline, off under reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;
  --paper:#f7f5ef;        /* aged newsprint */
  --ink:#1b1a17;          /* near-black ink */
  --muted:#6a665d;        /* grey ink */
  --faint:#8d897e;
  --rule:#d9d4c7;         /* hairline */
  --rule-strong:#b9b3a4;
  --seal:#9a2515;         /* vermilion — the stamp / the seal */
  --seal-ink:#7f1d10;
  --panel:#efece3;        /* slightly recessed panel */
  --measure:38rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141312; --ink:#ece9e1; --muted:#9a968c; --faint:#7e7a70;
    --rule:#302d28; --rule-strong:#403c35; --seal:#e0654f; --seal-ink:#e0654f;
    --panel:#1c1a18;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.62;
  font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh; min-height:100svh;
  /* faint ledger ruling in the background */
  background-image:linear-gradient(var(--rule) .5px, transparent .5px);
  background-size:100% 2.6rem;
  background-position:0 6rem;
  background-attachment:fixed;
}
@media (prefers-color-scheme: dark){ body{ background-image:linear-gradient(rgba(255,255,255,.025) .5px, transparent .5px); } }

.wrap, main, .masthead, .colophon{ width:100%; }

/* ── inner column ───────────────────────────────────────────────────────── */
.masthead-inner, .hero, .estates, .thesis, .works, .registers, .audience,
.principle, .col-grid, .col-foot, .dateline{
  width:min(72rem, 100%);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}

a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:from-font; }
a:hover{ text-decoration-color:var(--seal); }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font-family:var(--sans); font-size:.9rem; border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; }
:where(a,summary,input,button,[tabindex]):focus-visible{
  outline:2px solid var(--seal); outline-offset:3px; border-radius:1px;
}

/* ═══ MASTHEAD ═══════════════════════════════════════════════════════════ */
.masthead{
  padding-block:clamp(2rem,5vw,3rem) 0;
  border-top:3px solid var(--ink);
}
.masthead-inner{ text-align:center; }
.wordmark{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.4rem,11vw,6rem); line-height:.95;
  letter-spacing:.01em;
}
.wordmark .seg{ }
.wordmark .dot{ color:var(--seal); }
.strap{
  margin:.85rem 0 0; font-family:var(--sans);
  font-size:clamp(.66rem,1.6vw,.78rem); letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted);
}
.dateline{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1rem;
  margin:1.6rem auto 0; padding-block:.7rem;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
}
.dateline span[aria-hidden]{ color:var(--seal); }

/* ═══ MAIN ═══════════════════════════════════════════════════════════════ */
main{ flex:1 0 auto; padding-block:clamp(3rem,8vw,6rem); }
section + section{ margin-top:clamp(3.5rem,9vw,7rem); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero{ max-width:var(--measure)!important; }
.kicker{
  margin:0 0 1.25rem; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--seal);
}
.kicker::before{ content:"§ "; }
.lede{
  margin:0; font-size:clamp(1.45rem,4.5vw,2.15rem); line-height:1.3;
  font-weight:400; letter-spacing:-.01em;
}
.lede strong{ font-weight:700; }
.sub{
  margin:1.6rem 0 0; font-size:1.0625rem; color:var(--muted); max-width:34rem;
}
.sub a{ color:var(--seal); text-decoration:underline; }

/* ── SECTION HEADS (numbered, ruled) ───────────────────────────────────── */
.sec-head{
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.85rem; margin-bottom:2rem;
  border-bottom:1px solid var(--rule-strong);
}
.sec-num{
  margin:0; flex:none; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.1em; color:var(--seal);
}
.sec-head h2{
  margin:0; font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.15;
}

/* ── ESTATES (roman-numeral ledger) ────────────────────────────────────── */
.estate-list{ list-style:none; margin:0; padding:0; }
.estate-list li{
  display:grid; grid-template-columns:3.5rem 1fr; gap:1.25rem; align-items:start;
  padding:1.4rem 0; border-bottom:1px solid var(--rule);
}
.estate-list li:last-child{ border-bottom:0; }
.est-no{
  font-family:var(--serif); font-weight:700; font-size:1.9rem; line-height:1;
  color:var(--rule-strong); text-align:right;
  border-right:2px solid var(--rule); padding-right:1rem; padding-top:.1rem;
}
.estate-list h3{ margin:0 0 .25rem; font-size:1.2rem; font-weight:700; }
.estate-list p{ margin:0; color:var(--muted); }
.estate-list .fourth .est-no{ color:var(--seal); border-right-color:var(--seal); }
.estate-list .fourth h3{ color:var(--seal); }
.estate-list .fourth p{ color:var(--ink); }

/* ── THESIS ────────────────────────────────────────────────────────────── */
.thesis-grid{ display:grid; gap:1.5rem; max-width:46rem; }
.thesis-lead{
  margin:0; font-size:clamp(1.15rem,2.6vw,1.4rem); line-height:1.4; font-weight:400;
}
.thesis-lead em{ color:var(--seal); font-style:italic; }
.thesis-grid p{ margin:0; }
.thesis-grid p:not(.thesis-lead){ color:var(--muted); }

/* ── LEDGER (how it works) ─────────────────────────────────────────────── */
.ledger{ list-style:none; margin:0; padding:0; counter-reset:led; }
.ledger li{
  position:relative; counter-increment:led;
  padding:1.6rem 0 1.6rem 4.2rem;
  border-bottom:1px solid var(--rule);
}
.ledger li:last-child{ border-bottom:0; }
.ledger li::before{
  content:counter(led,decimal-leading-zero);
  position:absolute; left:0; top:1.7rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em;
  color:var(--paper); background:var(--seal);
  width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.step-k{
  margin:0 0 .35rem; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--seal);
}
.ledger h3{ margin:0 0 .4rem; font-size:1.2rem; font-weight:700; }
.ledger p{ margin:0; color:var(--muted); max-width:42rem; }

/* ── REGISTERS (grid) ──────────────────────────────────────────────────── */
.reg-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:40rem){ .reg-grid{ grid-template-columns:1fr 1fr; } }
.reg{ background:var(--paper); padding:1.6rem clamp(1.25rem,3vw,2rem); }
.reg h3{
  margin:0 0 .55rem; font-size:1.15rem; font-weight:700;
  padding-bottom:.55rem; border-bottom:2px solid var(--seal); display:inline-block;
}
.reg p{ margin:0; color:var(--muted); }

/* ── AUDIENCE ──────────────────────────────────────────────────────────── */
.for-list{ margin:0; display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
@media (min-width:46rem){ .for-list{ grid-template-columns:1fr 1fr; } }
.for-list > div{
  background:var(--paper); padding:1.4rem 0;
  display:grid; grid-template-columns:minmax(8rem,11rem) 1fr; gap:1.25rem; align-items:baseline;
}
@media (min-width:46rem){ .for-list > div{ padding-inline:clamp(0rem,2vw,1.5rem); } }
.for-list dt{
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.for-list dd{ margin:0; color:var(--muted); }

/* ── PRINCIPLE / PULL QUOTE ────────────────────────────────────────────── */
.principle{ max-width:48rem!important; text-align:center; }
.principle blockquote{
  margin:0; position:relative; padding-top:2.5rem;
}
.principle blockquote::before{
  content:"“"; position:absolute; top:-1rem; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:5rem; line-height:1; color:var(--seal); opacity:.55;
}
.principle blockquote p{
  margin:0; font-size:clamp(1.25rem,3.4vw,1.7rem); line-height:1.4;
  font-style:italic; font-weight:400;
}
.principle .attr{
  margin:1.4rem 0 0; font-family:var(--sans);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}

/* ═══ COLOPHON / FOOTER ════════════════════════════════════════════════ */
.colophon{
  margin-top:clamp(3rem,8vw,6rem); flex:none;
  border-top:3px solid var(--ink); background:var(--panel);
  padding-block:clamp(2.5rem,6vw,4rem);
}
.col-grid{ display:grid; gap:2.5rem; }
@media (min-width:48rem){ .col-grid{ grid-template-columns:1.2fr 1fr; gap:4rem; } }
.col-mark{
  margin:0 0 .9rem; font-family:var(--serif); font-weight:700;
  font-size:1.6rem; letter-spacing:.01em;
}
.col-mark span{ color:var(--seal); }
.col-desc{ margin:0; color:var(--muted); max-width:30rem; font-size:.98rem; }
.col-desc a{ color:var(--seal); text-decoration:underline; }
.col-nav h2{
  margin:0 0 1rem; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid var(--rule-strong); padding-bottom:.6rem;
}
.col-nav ul{ list-style:none; margin:0; padding:0; }
.col-nav li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem;
  padding:.55rem 0; border-bottom:1px solid var(--rule);
}
.col-nav li:last-child{ border-bottom:0; }
.col-nav a{
  font-family:var(--mono); font-size:.86rem; letter-spacing:.02em;
  text-decoration:none; color:var(--ink);
}
.col-nav a:hover{ color:var(--seal); }
.col-nav span{ font-size:.82rem; color:var(--faint); }
.col-foot{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:2.5rem; padding-top:1.4rem;
  border-top:1px solid var(--rule-strong);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}
.col-foot span[aria-hidden]{ color:var(--seal); }

/* ═══ REVEALS (scroll-driven; visible by default) ══════════════════════ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes rise{
      from{ opacity:0; transform:translateY(1.4rem); }
      to{ opacity:1; transform:none; }
    }
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}