:root {
  /* color — persona-derived; do not extend */
  --ink:#1A1C20; --graphite:#5A5D63; --bronze:#8C6A3F;
  --paper:#FAF8F4; --rule:#C9C2B6; --oxide:#7A3B2E; --slate:#46525E;

  /* type roles — §4 */
  --banner:"miller-banner",serif; --display:"miller-display",serif;
  --headline:"miller-headline",serif; --text:"miller-text",serif;
  --grot:"interface",sans-serif;

  /* bold scale — guardian weight */
  --fs-hero:clamp(3rem, 7vw, 5.75rem);
  --fs-h1:clamp(2.1rem, 4vw, 3.1rem);
  --fs-h2:1.5rem; --fs-trigger:clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-body:1.125rem; --fs-small:.95rem; --fs-micro:.8rem;

  --space-1:.5rem; --space-2:1rem; --space-3:1.75rem;
  --space-4:3.25rem; --space-5:5.5rem;

  --measure:64ch; --container:1140px; --offset-left:7vw;
  --frame-inset:clamp(10px, 1.6vw, 22px);
}
html{background:var(--paper);color:var(--ink);font-family:var(--text);}
body{font-size:var(--fs-body);line-height:1.66;margin:0;}
h1{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.01em;}
h2{font-family:var(--headline);font-weight:700;font-size:var(--fs-h2);}
.trigger{font-family:var(--headline);font-style:italic;font-size:var(--fs-trigger);line-height:1.3;}
.wordmark{font-family:var(--banner);font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
nav,.label,.ledger,.sequence,figcaption{font-family:var(--grot);}
.label{letter-spacing:.18em;text-transform:uppercase;font-size:var(--fs-micro);color:var(--bronze);font-weight:600;}
.numeric,td,.ledger{font-feature-settings:"tnum" 1,"lnum" 1;}
a{color:var(--bronze);text-decoration-thickness:1px;text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{animation:none;transition:none;}}

/* THE SIGNATURE — structural page frame: the guardian enclosure.
   A fixed hairline ink frame inset on the viewport; the mark's square made structural. */
body::before{content:"";position:fixed;inset:var(--frame-inset);
  border:1px solid var(--ink);pointer-events:none;z-index:9999;}
@media (max-width:640px){body::before{display:none;}} /* small screens: frame off, weight carried by type */

/* ============================================================
   LAYOUT — content column offset left within the container;
   the oversized right margin is structural and visible on desktop.
   ============================================================ */
*{box-sizing:border-box;}
img,svg{max-width:100%;}
p{margin:0 0 var(--space-2);}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,var(--offset-left),7vw);}
.measure{max-width:var(--measure);}
main{padding-top:var(--space-4);padding-bottom:var(--space-5);}
section{padding:var(--space-4) 0;}
.section-lead{margin-top:var(--space-2);}
.rule{border:none;border-top:1px solid var(--rule);margin:0;}
.eyebrow{display:block;margin-bottom:var(--space-2);}
.lede{font-size:var(--fs-trigger);line-height:1.4;font-family:var(--text);max-width:var(--measure);}
.stack>*+*{margin-top:var(--space-2);}

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header{padding:var(--space-3) 0 var(--space-2);}
.lockup{display:inline-flex;align-items:baseline;gap:.6em;text-decoration:none;color:var(--ink);flex-wrap:wrap;}
.lockup-mark{height:1.15em;transform:translateY(.12em);width:auto;}
.lockup .wordmark{font-size:1.6rem;color:var(--ink);}
.lockup .label{color:var(--bronze);}
.lockup .pron{font-family:var(--text);font-size:var(--fs-micro);color:var(--graphite);letter-spacing:0;text-transform:none;font-style:italic;}
.primary-nav{margin-top:var(--space-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--space-1) 0;}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3);}
.primary-nav a{font-family:var(--grot);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--bronze);}

/* ============================================================
   HERO — Home only: full-bleed ink band inside the page frame.
   Enclosure within enclosure.
   ============================================================ */
.hero-band{background:var(--ink);color:var(--paper);padding:var(--space-5) 0;}
.hero-band .container{max-width:var(--container);}
.hero-band .label{color:var(--bronze);}
.hero-band h1{font-family:var(--banner);font-size:var(--fs-hero);font-weight:700;color:var(--paper);letter-spacing:-.015em;line-height:1.02;max-width:18ch;}
.hero-band .lede{color:var(--paper);opacity:.86;margin-top:var(--space-3);}
.hero-band a{color:#C79A5E;}

/* ============================================================
   DOOR CARDS — 1px ink border at rest, 2px bronze on hover/focus.
   The only motion sitewide.
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3);}
.door{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--ink);text-decoration:none;color:var(--ink);background:var(--paper);transition:border-color 120ms ease,border-width 120ms ease;}
.door:hover,.door:focus-visible{border:2px solid var(--bronze);padding:calc(var(--space-3) - 1px);outline:none;}
.door .door-index{font-family:var(--grot);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:600;}
.door .trigger{color:var(--ink);}
.door h2{font-family:var(--headline);font-weight:700;font-size:1.3rem;margin:0;}
.door .scope{font-size:var(--fs-small);color:var(--graphite);flex:1;}
.door .enter{font-family:var(--grot);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bronze);}
@media (max-width:820px){.doors{grid-template-columns:1fr;}}

/* ============================================================
   SEQUENCE BLOCK — numbered 1–4, legitimate sequence
   ============================================================ */
.sequence{list-style:none;counter-reset:seq;margin:var(--space-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.sequence li{counter-increment:seq;border-top:2px solid var(--ink);padding-top:var(--space-2);}
.sequence li::before{content:counter(seq,decimal-leading-zero);display:block;font-family:var(--grot);font-weight:700;font-size:1.5rem;color:var(--bronze);font-feature-settings:"tnum" 1,"lnum" 1;margin-bottom:var(--space-1);}
.sequence .seq-title{font-family:var(--grot);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-micro);display:block;margin-bottom:var(--space-1);}
.sequence .seq-body{font-family:var(--text);font-size:var(--fs-small);color:var(--graphite);}
@media (max-width:820px){.sequence{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.sequence{grid-template-columns:1fr;}}

/* ============================================================
   STANDARDS STRIP — six items, two columns
   ============================================================ */
.standards{font-family:var(--grot);display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4);margin-top:var(--space-3);}
.standards div{border-top:1px solid var(--rule);padding:var(--space-2) 0;}
.standards .std-title{font-weight:600;letter-spacing:.04em;display:block;}
.standards .std-body{font-family:var(--text);color:var(--graphite);font-size:var(--fs-small);margin-top:var(--space-1);}
@media (max-width:640px){.standards{grid-template-columns:1fr;}}

/* ============================================================
   VERIFICATION LEDGER — typographic, hairline rules, no icons
   ============================================================ */
.ledger{width:100%;border-collapse:collapse;margin-top:var(--space-3);font-size:var(--fs-small);}
.ledger caption{text-align:left;}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--rule);}
.ledger thead th{border-bottom:1px solid var(--ink);}
.ledger th{font-family:var(--grot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-micro);color:var(--bronze);}
.ledger td:first-child{font-family:var(--grot);font-weight:600;color:var(--ink);}
.ledger td{font-family:var(--text);color:var(--ink);}

/* ============================================================
   FAQ BLOCK
   ============================================================ */
.faq{margin-top:var(--space-3);}
.faq dt{font-family:var(--headline);font-weight:700;font-size:1.15rem;margin-top:var(--space-3);}
.faq dd{margin:var(--space-1) 0 0;color:var(--ink);max-width:var(--measure);}

/* ============================================================
   CLIENT STATEMENT — never boxed, badged, carouseled, or starred
   ============================================================ */
.statement{margin:var(--space-3) 0 0;max-width:var(--measure);border:none;padding:0;}
.statement .client-statement{font-family:var(--text);font-style:italic;font-size:var(--fs-body);line-height:1.5;margin:0;}
.statement figcaption{margin-top:var(--space-2);}
.statement .statement-note{font-family:var(--text);font-style:italic;color:var(--graphite);font-size:var(--fs-micro);margin-top:var(--space-1);}

/* ============================================================
   FOOTER — negative mark · seal · nav · boundary · continuity · etymology
   ============================================================ */
.site-footer{border-top:1px solid var(--ink);margin-top:var(--space-4);padding:var(--space-4) 0 var(--space-5);}
.footer-top{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start;justify-content:space-between;}
.footer-mark{display:flex;align-items:center;gap:var(--space-2);}
.footer-mark .wordmark{font-size:1.25rem;color:var(--ink);}
.footer-seal{margin-left:auto;}
.seal{display:block;}
.footer-nav{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);}
.footer-nav a{font-family:var(--grot);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;}
.footer-nav a:hover{color:var(--bronze);}
.footer-legal{margin-top:var(--space-4);max-width:var(--measure);}
.footer-legal p{font-size:var(--fs-micro);color:var(--graphite);line-height:1.7;font-family:var(--text);}
.footer-legal .boundary{color:var(--ink);}
.etymology{font-style:italic;}

/* contact list */
.contact{list-style:none;padding:0;margin:var(--space-3) 0 0;font-family:var(--grot);}
.contact li{border-top:1px solid var(--rule);padding:var(--space-2) 0;}
.contact .c-label{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;}
.contact a{font-family:var(--text);font-size:var(--fs-trigger);}
.by-matter{margin-top:var(--space-3);}
.by-matter .label{display:block;margin-bottom:var(--space-1);}
.matter-list{list-style:none;padding:0;margin:0;font-family:var(--grot);}
.matter-list li{border-top:1px solid var(--rule);}
.matter-list li:last-child{border-bottom:1px solid var(--rule);}
.matter-list a{display:block;padding:var(--space-2) 0;font-family:var(--text);font-size:var(--fs-body);}

@media (max-width:640px){
  .footer-seal{margin-left:0;}
  .footer-top{gap:var(--space-3);}
}

/* ============================================================
   TRANSLATION LAYER — problem-first statement below the hero
   ============================================================ */
.translation-layer{font-family:var(--text);font-size:var(--fs-trigger);line-height:1.4;max-width:var(--measure);}

/* ============================================================
   DOOR BOUNDARY MICROLINE — Door 2 only
   ============================================================ */
.door .door-boundary{font-size:var(--fs-small);color:var(--graphite);}

/* ============================================================
   INTAKE BRIDGE — what happens when you contact us
   ============================================================ */
.intake{list-style:none;counter-reset:intake;margin:var(--space-3) 0 0;padding:0;max-width:var(--measure);}
.intake li{counter-increment:intake;position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-4);border-top:1px solid var(--rule);color:var(--ink);}
.intake li::before{content:counter(intake,decimal-leading-zero);position:absolute;left:0;top:var(--space-2);font-family:var(--grot);font-weight:700;color:var(--bronze);font-feature-settings:"tnum" 1,"lnum" 1;}
.intake-close{font-family:var(--headline);font-style:italic;font-size:var(--fs-trigger);margin-top:var(--space-3);color:var(--ink);}

/* ============================================================
   CTA — solid ink action for the classification actions
   ============================================================ */
.cta{display:inline-block;font-family:var(--grot);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--paper);background:var(--ink);border:1px solid var(--ink);padding:var(--space-2) var(--space-3);text-decoration:none;}
.cta:hover,.cta:focus-visible{background:var(--bronze);border-color:var(--bronze);color:var(--paper);}

/* ============================================================
   VERIFICATION LEDGER — exhibit index Verify links
   ============================================================ */
.ledger td a{word-break:break-word;}