/* ============================================================================
   LEVENHALL / UNITED STATES — landing.

   Direction: the engraved sovereign document. This product deals in statutes,
   federal registers, land and money, so the reference is a bound atlas volume —
   dark buckram binding, cream plates bound inside it — rather than the cream-and-
   serif treatment that would suit any luxury brand equally well.

   Ground is ink. Content sits on vellum PLATES inset on that ink, framed by a
   hairline brass rule. The signature is the guilloché band — the engine-turned
   line-work found on banknotes and bond certificates — used three times, no more.

   Palette stays inside Levenhall v2026.06: the ink and vellum are shades of the
   brand's Deep Navy and Stone, not new colours.
   ========================================================================= */

:root{
  color-scheme: dark;

  /* the binding */
  --ink:#08131F;            /* deepest — the page ground */
  --ink-2:#0F1F3A;          /* Levenhall Deep Navy — raised panels */
  --ink-3:#1B3153;          /* engraved highlight */

  /* the plate */
  --plate:#EFE9D9;          /* vellum — a warmer, more parchment shade of brand Stone */
  --plate-2:#E6DFCB;        /* plate, recessed */
  --plate-ink:#141A22;      /* text on vellum */
  --plate-mut:#5A6472;
  --plate-mut-2:#606874;   /* 10px mono captions have to clear AA on vellum */
  --plate-rule:#D5CCB4;
  --plate-rule-2:#C4B99B;

  /* the metals and the seal */
  --brass:#C9A961;          /* Levenhall Gold */
  --brass-hi:#E3C88A;
  --brass-lo:#705926;       /* label brass, dark enough to read at 9-10px */
  --seal:#8B1538;           /* Levenhall Burgundy — red-ink annotation */
  --seal-hi:#C0607A;

  --display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);      /* slow, confident — no bounce */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

body{
  margin:0; background:var(--ink); color:var(--plate);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Fraunces has an optical-size axis and a WONK axis; both are set per-element */
  font-variant-numeric:oldstyle-nums;
}
img{max-width:100%;display:block}
a{color:inherit}

/* figures are the jewels of this page: tabular, tight, never oldstyle */
.n,.num,input,td.num,.fig{font-variant-numeric:tabular-nums lining-nums}

.lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);font-weight:400}
.skip{position:absolute;left:-9999px;background:var(--brass);color:var(--ink);padding:12px 18px;z-index:300}
.skip:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:1px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* ============================================================================
   THE SIGNATURE — guilloché band.
   Engine-turned line-work, the kind engraved on banknotes and bond certificates.
   Two overlaid repeating gradients at different periods produce the interference
   pattern. Used as the plate frame and the section divider. Nowhere else.
   ========================================================================= */
.guilloche{
  height:7px; width:100%; flex:none;
  background-image:
    repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, var(--brass-lo) 0 1px, transparent 1px 11px);
  background-position:0 0, 3px 0;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.guilloche.on-plate{
  background-image:
    repeating-linear-gradient(90deg, var(--brass-lo) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, var(--plate-rule-2) 0 1px, transparent 1px 11px);
  opacity:.75;
}

/* ---------------- masthead ---------------- */
.mh{background:var(--ink);position:sticky;top:0;z-index:80;
  border-bottom:1px solid rgba(201,169,97,.20)}
.mh-in{max-width:var(--maxw);margin:0 auto;padding:13px 30px;display:flex;align-items:center;gap:14px}
.mh-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mh-logo{height:16px}
.mh-div{color:rgba(201,169,97,.75)}
.mh-name{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass)}
.mh-sp{flex:1}
.mh-btn{background:none;border:1px solid rgba(201,169,97,.32);color:var(--plate);
  padding:7px 14px;border-radius:1px;cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.mh-btn:hover{border-color:var(--brass);background:rgba(201,169,97,.10);color:var(--brass-hi)}
.mh-brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand-mark{display:flex;align-items:center;transition:opacity .2s ease}
.brand-mark:hover{opacity:.78}
.brand-up{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,217,.62);text-decoration:none;white-space:nowrap;transition:color .18s ease}
.brand-up:hover{color:var(--brass)}
@media (max-width:560px){
  .mh-div,.mh-name,.mh-hide{display:none} .mh-logo{height:12px}
  /* the record page keeps a labelled way back where the wordmark is dropped */
  .doc-body .mh-logo{display:none}
  .doc-body .brand-up::before{content:"\2190\00a0"}
  .doc-body .brand-up{color:rgba(239,233,217,.9);font-size:11px}
  .doc-body .mh-div:first-of-type{display:none}
}

/* ============================================================================
   THE MAP PLATE — the volume's opening plate, engraved on ink
   ========================================================================= */
.hero{padding:38px 0 46px;position:relative;overflow:hidden}
.hero::before{                                  /* township survey grid, very faint */
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(201,169,97,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(201,169,97,.5) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 74% 64% at 52% 42%,#000 20%,transparent 74%);
          mask-image:radial-gradient(ellipse 74% 64% at 52% 42%,#000 20%,transparent 74%)}
.hero .wrap{position:relative}

.hero-head{margin:0 0 26px;max-width:none}
.hero-head .lbl{display:block;margin:0 0 16px}
.hero h1{
  font-family:var(--display);
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 1;   /* the quirked serif — not the plain cut */
  font-size:clamp(38px,6.2vw,86px); font-weight:500;
  letter-spacing:-.045em; line-height:.92; margin:0 0 18px; max-width:12ch;
  color:var(--plate);
}
.hero h1 em{font-style:normal;color:var(--brass);
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0}
.hero .intro{color:rgba(239,233,217,.66);font-size:16.5px;line-height:1.62;margin:0;max-width:58ch;
  font-variant-numeric:oldstyle-nums}
.hero .intro b{color:var(--plate);font-weight:600}
@media (min-width:900px){
  .hero-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:0 56px;align-items:end}
  .hero-head .lbl{grid-column:1/-1}
  .hero h1{margin-bottom:0}
}

/* lens bar — engraved tabs rather than pill buttons */
.lenses{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;
  border-top:1px solid rgba(201,169,97,.22);border-bottom:1px solid rgba(201,169,97,.22)}
.lens{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  padding:11px 16px;border:none;border-right:1px solid rgba(201,169,97,.14);
  background:none;color:rgba(239,233,217,.56);cursor:pointer;white-space:nowrap;
  position:relative;transition:color .3s var(--ease), background .3s var(--ease)}
.lens:hover{color:var(--plate);background:rgba(201,169,97,.07)}
.lens[aria-pressed="true"]{color:var(--brass-hi);background:rgba(201,169,97,.10)}
.lens[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--brass)}
@media (max-width:760px){
  .lenses{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .lenses::-webkit-scrollbar{display:none}
  .lens{scroll-snap-align:start;flex:0 0 auto}
  /* nine lenses on one row with the scrollbar suppressed reads as a row of two
     with the second one cut off. A sticky edge fade says the row continues. */
  .lenses::after{content:"";position:sticky;right:0;flex:0 0 40px;margin-left:-40px;
    align-self:stretch;pointer-events:none;
    background:linear-gradient(90deg,rgba(8,19,31,0) 0%,var(--ink) 78%)}
}

/* project spec — a ruled docket, not a form card */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:0;
  border-bottom:1px solid rgba(201,169,97,.22);margin:0 0 22px}
.spec[hidden]{display:none}
.fld{padding:13px 16px;border-right:1px solid rgba(201,169,97,.14);min-width:0}
.fld:last-of-type{border-right:none}
.fld label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(201,169,97,.78);margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld input,.fld select{width:100%;background:none;border:none;border-bottom:1px solid rgba(239,233,217,.26);
  color:var(--plate);padding:3px 0 5px;font-family:var(--mono);font-size:17px;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;
  transition:border-color .3s var(--ease)}
.fld select{font-family:var(--sans);font-size:14.5px;letter-spacing:0}
.fld input:focus,.fld select:focus{outline:none;border-bottom-color:var(--brass)}
.fld option{background:var(--ink-2);color:var(--plate)}
/* the one input nobody could be expected to guess at */
.fld-hint{display:block;margin-top:6px;font-size:11px;line-height:1.4;
  color:rgba(239,233,217,.62)}
.fld.wide{grid-column:span 2}
/* span 1 squeezed the sector menu to half a phone width and clipped every
   option label; the field wants the whole row instead */
@media (max-width:520px){ .fld.wide{grid-column:1 / -1} }
.spec-note{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(201,169,97,.78);margin:0;padding:9px 16px 12px;
  border-top:1px solid rgba(201,169,97,.12)}

/* compare docket */
.compare{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:11px 16px;
  border:1px solid rgba(201,169,97,.4);background:rgba(201,169,97,.06)}
.compare[hidden]{display:none}
.cmp-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);white-space:nowrap}
.cmp-slots{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(201,169,97,.36);
  padding:5px 8px 5px 13px;font-size:13.5px;color:var(--plate);white-space:nowrap}
.cmp-chip b{font-family:var(--mono);font-size:12px;color:var(--brass);font-weight:400;
  font-variant-numeric:tabular-nums lining-nums}
.cmp-chip button{background:none;border:none;color:rgba(239,233,217,.5);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}
.cmp-chip button:hover{color:var(--seal-hi)}
.cmp-clear{background:none;border:1px solid rgba(239,233,217,.24);color:rgba(239,233,217,.66);
  padding:6px 13px;cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap}
.cmp-clear:hover{border-color:var(--brass);color:var(--brass)}

/* the plate itself */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0;
  border:1px solid rgba(201,169,97,.3);background:rgba(15,31,58,.42)}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr} }
.plate-map{padding:22px 24px 16px;border-right:1px solid rgba(201,169,97,.2);min-width:0;
  display:flex;flex-direction:column;justify-content:center}
@media (max-width:940px){ .plate-map{border-right:none;border-bottom:1px solid rgba(201,169,97,.2)} }

.usmap{width:100%;height:auto;display:block;overflow:visible}
.usmap path{
  stroke:rgba(201,169,97,.42); stroke-width:.6; cursor:pointer;
  transition:fill .45s var(--ease), stroke .25s var(--ease), stroke-width .25s var(--ease);
}
.usmap path:hover{stroke:var(--brass-hi);stroke-width:1.5}
.usmap path:focus-visible{stroke:var(--brass-hi);stroke-width:1.8;outline:none}
.usmap path.is-lit{stroke:var(--brass-hi);stroke-width:1.6}
.usmap path.pinned{stroke:var(--brass);stroke-width:2}
.map-hint{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(201,169,97,.78);margin:14px 0 0;text-align:center}

.side{padding:22px 24px;min-width:0}
.side h2{font-family:var(--display);font-variation-settings:"opsz" 40,"WONK" 1;
  font-size:21px;font-weight:500;letter-spacing:-.022em;margin:0 0 4px;color:var(--plate)}
.side .sub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(201,169,97,.78);margin:0 0 16px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;padding-bottom:15px;
  border-bottom:1px solid rgba(201,169,97,.18)}
.lg{display:flex;align-items:center;gap:7px}
.lg i{width:20px;height:8px;display:block}
.lg span{font-family:var(--mono);font-size:10px;color:rgba(239,233,217,.62);
  font-variant-numeric:tabular-nums lining-nums}

/* the ranking — a ruled ledger */
.rk{display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:baseline;
  padding:8px 2px;text-decoration:none;color:var(--plate);
  border-bottom:1px solid rgba(201,169,97,.12);transition:background .25s var(--ease)}
.rk:last-of-type{border-bottom:none}
.rk:hover,.rk.is-lit{background:rgba(201,169,97,.09)}
.rk-n{font-family:var(--mono);font-size:9.5px;color:rgba(201,169,97,.78);
  font-variant-numeric:tabular-nums lining-nums}
.rk-s{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-v{font-family:var(--mono);font-size:13.5px;color:var(--brass);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em}
.rk-more{display:block;width:100%;margin:12px 0 0;padding:9px;background:none;cursor:pointer;
  border:1px solid rgba(201,169,97,.26);color:rgba(239,233,217,.6);
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.rk-more:hover{border-color:var(--brass);color:var(--brass)}
.side .note{font-size:13px;line-height:1.6;color:rgba(239,233,217,.6);
  margin:16px 0 0;padding-top:15px;border-top:1px solid rgba(201,169,97,.18)}
.side .note b{color:var(--plate);font-weight:600}

.tip{position:fixed;z-index:200;pointer-events:none;opacity:0;transform:translate(-50%,-128%);
  background:var(--plate);color:var(--plate-ink);padding:9px 13px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);transition:opacity .14s var(--ease);
  border-top:2px solid var(--brass)}
.tip.on{opacity:1}
.tip-n{font-family:var(--display);font-variation-settings:"opsz" 30,"WONK" 1;
  font-size:15.5px;font-weight:600;line-height:1.15}
.tip-v{font-family:var(--mono);font-size:11.5px;color:var(--seal);margin-top:3px;
  font-variant-numeric:tabular-nums lining-nums}

/* ============================================================================
   THE PLATES — vellum sections inset on the ink
   ========================================================================= */
.plate{background:var(--plate);color:var(--plate-ink);margin:0 auto;max-width:var(--maxw);
  padding:0;position:relative}
.plate-in{padding:56px 44px 60px}
@media (max-width:640px){ .plate-in{padding:40px 22px 44px} }
.plate + .plate{margin-top:2px}
.plate .lbl{color:var(--brass-lo)}
.plate h2{font-family:var(--display);font-variation-settings:"opsz" 96,"WONK" 1;
  font-size:clamp(28px,3.6vw,44px);font-weight:500;letter-spacing:-.036em;line-height:1.03;
  margin:14px 0 16px;max-width:20ch;color:var(--plate-ink)}
.plate .lede{font-size:17px;line-height:1.62;color:var(--plate-mut);margin:0;max-width:62ch}

/* caveats — ruled ledger rows, not a card grid */
.ledger{margin:34px 0 0;border-top:1.5px solid var(--plate-ink)}
.led{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,2.6fr);gap:20px 36px;
  padding:24px 0;border-bottom:1px solid var(--plate-rule);align-items:start}
@media (max-width:700px){ .led{grid-template-columns:1fr;gap:8px;padding:20px 0} }
.led-fig{font-family:var(--mono);font-size:clamp(30px,3.6vw,44px);font-weight:400;
  letter-spacing:-.06em;line-height:.94;color:var(--plate-ink);
  font-variant-numeric:tabular-nums lining-nums}
.led-fig small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--plate-mut-2);margin-top:8px;letter-spacing:.16em}
.led-t{font-family:var(--display);font-variation-settings:"opsz" 28,"WONK" 1;
  font-size:19px;font-weight:600;letter-spacing:-.018em;margin:0 0 7px;color:var(--plate-ink)}
.led p{margin:0;font-size:14.5px;line-height:1.62;color:var(--plate-mut)}

/* findings — same data, deliberately different rhythm: two columns of short entries */
.notes{margin:34px 0 0;columns:2;column-gap:44px}
@media (max-width:760px){ .notes{columns:1} }
.note-item{break-inside:avoid;padding:0 0 22px;margin:0 0 22px;
  border-bottom:1px solid var(--plate-rule)}
.note-item:last-child{border-bottom:none}
.note-fig{font-family:var(--mono);font-size:23px;letter-spacing:-.05em;color:var(--seal);
  font-variant-numeric:tabular-nums lining-nums}
.note-fig small{font-size:12.5px;color:var(--plate-mut-2);margin-left:6px;letter-spacing:-.01em}
.note-t{font-size:14.5px;font-weight:600;margin:4px 0 6px;color:var(--plate-ink);line-height:1.35}
.note-item p{margin:0;font-size:13.5px;line-height:1.6;color:var(--plate-mut)}

/* ---------------- jurisdictions ---------------- */
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:30px 0 20px}
.srch{flex:1;min-width:210px;position:relative}
.srch input{width:100%;padding:10px 12px 10px 34px;border:none;
  border-bottom:1px solid var(--plate-rule-2);background:none;color:var(--plate-ink);
  font-family:var(--sans);font-size:15px}
.srch input::placeholder{color:var(--plate-mut-2)}
.srch input:focus{outline:none;border-bottom-color:var(--brass-lo)}
.srch svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--plate-mut-2)}
.seg{display:flex;border:1px solid var(--plate-rule-2)}
.seg button{background:none;border:none;padding:8px 16px;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--plate-mut);transition:background .25s var(--ease),color .25s var(--ease)}
.seg button+button{border-left:1px solid var(--plate-rule-2)}
.seg button[aria-pressed="true"]{background:var(--plate-ink);color:var(--plate)}
.plate .lbl#q-count{color:var(--plate-mut-2)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:0;
  border-top:1px solid var(--plate-rule);border-left:1px solid var(--plate-rule)}
.card{display:block;text-decoration:none;color:inherit;padding:16px 17px;position:relative;
  border-right:1px solid var(--plate-rule);border-bottom:1px solid var(--plate-rule);
  transition:background .3s var(--ease)}
.card:hover{background:var(--plate-2)}
.card-t{display:flex;align-items:baseline;gap:8px;margin-bottom:11px;min-height:2.3em}
.card-n{font-family:var(--display);font-variation-settings:"opsz" 26,"WONK" 1;
  font-size:17.5px;font-weight:600;letter-spacing:-.022em;line-height:1.14;color:var(--plate-ink)}
.card-a{font-family:var(--mono);font-size:9.5px;color:var(--plate-mut-2);letter-spacing:.14em;margin-left:auto}
.card-r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
  color:var(--plate-mut);padding:2.5px 0;font-variant-numeric:tabular-nums lining-nums}
.card-r b{color:var(--plate-ink);font-weight:400}
.card-r.hi b{color:var(--seal)}
.card-tier{position:absolute;top:0;left:0;width:3px;height:100%;background:transparent}
.card[data-cov="full"] .card-tier{background:var(--brass)}

.tbl-wrap{overflow-x:auto;border-top:1px solid var(--plate-rule)}
table.jt{width:100%;border-collapse:collapse;font-size:13.5px}
table.jt th{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plate-mut-2);text-align:left;padding:12px;border-bottom:1.5px solid var(--plate-ink);
  cursor:pointer;white-space:nowrap;font-weight:400}
table.jt th:hover{color:var(--plate-ink)}
table.jt th[aria-sort]{color:var(--brass-lo)}
table.jt th.r,table.jt td.r{text-align:right}
table.jt td{padding:9px 12px;border-bottom:1px solid var(--plate-rule);white-space:nowrap;
  color:var(--plate-mut)}
table.jt tbody tr:hover{background:var(--plate-2)}
table.jt a{font-weight:600;text-decoration:none;color:var(--plate-ink)}
table.jt a:hover{color:var(--seal)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.pill{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plate-mut-2)}
.pill.full{color:var(--brass-lo)}
.pill.extended{color:var(--brass-lo);opacity:.8}
.empty{padding:34px;text-align:center;color:var(--plate-mut-2);font-size:15px}

/* ---------------- drawer ---------------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(4,10,18,.68);z-index:190;
  animation:fade .3s var(--ease)}
.drawer-scrim[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(444px,93vw);z-index:200;
  background:var(--plate);color:var(--plate-ink);border-left:3px solid var(--brass);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);display:flex;flex-direction:column;
  animation:slide .34s var(--ease)}
.drawer[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.dw-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 16px;
  border-bottom:1.5px solid var(--plate-ink)}
.dw-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-lo);margin:0 0 7px}
.dw-head h2{font-family:var(--display);font-variation-settings:"opsz" 60,"WONK" 1;
  font-size:29px;font-weight:500;letter-spacing:-.035em;margin:0;line-height:1.02;color:var(--plate-ink)}
.dw-x{margin-left:auto;background:none;border:none;font-size:26px;line-height:1;
  color:var(--plate-mut-2);cursor:pointer;padding:0 2px}
.dw-x:hover{color:var(--seal)}
.dw-body{flex:1;overflow-y:auto;padding:20px 24px}
.dw-sec{margin:0 0 24px}
.dw-sec h3{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-lo);margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--plate-rule)}
.dw-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--plate-rule);font-size:14px;color:var(--plate-mut)}
.dw-kv:last-child{border-bottom:none}
.dw-kv b{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  font-weight:400;color:var(--plate-ink)}
.dw-prog{padding:10px 0;border-bottom:1px solid var(--plate-rule)}
.dw-prog:last-child{border-bottom:none}
.dw-prog-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dw-prog-t b{font-size:14px;font-weight:600;color:var(--plate-ink)}
.dw-prog-t span{font-family:var(--mono);font-size:13px;color:var(--seal);
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.dw-prog small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plate-mut-2);margin-top:4px}
.dw-note{font-size:13px;line-height:1.6;color:var(--plate-mut);margin:0;padding:12px 14px;
  background:var(--plate-2);border-left:2px solid var(--brass-lo)}
.dw-foot{display:flex;gap:10px;padding:16px 24px;border-top:1.5px solid var(--plate-ink)}
.btn-gold,.btn-ghost{flex:1;text-align:center;padding:11px 10px;font-size:10.5px;
  font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-gold{background:var(--plate-ink);color:var(--plate);border-color:var(--plate-ink)}
.btn-gold:hover{background:var(--brass-lo);border-color:var(--brass-lo)}
.btn-ghost{background:none;color:var(--plate-ink);border-color:var(--plate-rule-2)}
.btn-ghost:hover{border-color:var(--plate-ink)}
.btn-ghost[disabled]{opacity:.4;cursor:not-allowed}

/* ---------------- colophon ---------------- */
.ft{padding:44px 0 30px;font-size:13.5px;color:rgba(239,233,217,.5)}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(130px,1fr));gap:30px}
.ft h4{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0 0 12px;font-weight:400}
.ft a{color:rgba(239,233,217,.66);text-decoration:none;display:block;padding:3px 0}
.ft a:hover{color:var(--brass-hi)}
.ft-logo{height:16px;margin-bottom:14px}
.ft p{margin:0 0 10px;line-height:1.6;max-width:46ch}
.ft-base{max-width:var(--maxw);margin:28px auto 0;padding:16px 30px 0;
  border-top:1px solid rgba(201,169,97,.2);font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(201,169,97,.78);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ============================================================================
   THE RECORD — method.html
   The provenance document, set as a document: one measure of text, the section
   index alongside it, and tables that can actually be read. Generated from
   SOURCES.md by build.py, so there is still one copy of the words.
   ========================================================================= */
.doc-body{background:var(--ink)}
.doc-plate{padding:0}
.doc-in{max-width:1180px;margin:0 auto;padding:52px 32px 90px;
  display:grid;grid-template-columns:216px minmax(0,1fr);gap:56px;align-items:start}

.doc-nav{position:sticky;top:74px;display:flex;flex-direction:column;gap:1px;
  padding-right:18px;border-right:1px solid var(--plate-rule)}
.doc-nav .lbl{margin-bottom:12px}
.doc-nav a{text-decoration:none;color:var(--plate-mut);font-size:13.2px;line-height:1.35;
  padding:5px 0 5px 12px;border-left:2px solid transparent;
  transition:color .16s ease, border-color .16s ease}
.doc-nav a:hover{color:var(--plate-ink);border-left-color:var(--brass)}
.doc-nav .doc-l3{padding-left:24px;font-size:12.4px;color:var(--plate-mut-2)}

.doc{color:var(--plate-ink);max-width:74ch;font-size:16px;line-height:1.68}
.doc h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.4vw,52px);
  line-height:1.02;letter-spacing:-.028em;margin:10px 0 34px;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1}
.doc h2{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.018em;
  margin:56px 0 4px;padding-top:18px;border-top:2px solid var(--brass-lo);
  scroll-margin-top:80px}
.doc h3{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass-lo);margin:36px 0 2px;scroll-margin-top:80px}
.doc h4{font-size:15.5px;font-weight:700;margin:24px 0 2px}
.doc p{margin:14px 0}
.doc ul,.doc ol{margin:14px 0;padding-left:20px}
.doc li{margin:5px 0}
.doc a{color:var(--plate-ink);text-decoration:none;border-bottom:1px solid var(--plate-rule-2)}
.doc a:hover{border-bottom-color:var(--brass);color:var(--brass-lo)}
.doc code{font-family:var(--mono);font-size:.87em;background:var(--plate-2);
  padding:1px 5px;border-radius:2px}
.doc pre{background:var(--ink);color:var(--plate);padding:16px 18px;overflow-x:auto;
  border-radius:2px;margin:16px 0}
.doc pre code{background:none;padding:0;color:inherit;font-size:12.6px}
.doc .guilloche{margin:44px 0}

/* Source citations are long. Held to the 74ch reading measure the tables became
   four narrow columns of wrapped text, so they break out to the full column and
   scroll from there. */
.doc .tw{overflow-x:auto;margin:18px 0;border:1px solid var(--plate-rule);
  width:min(100vw - 64px, 856px)}
.doc table{border-collapse:collapse;width:100%;font-size:13.4px;line-height:1.5}
.doc th{background:var(--plate-2);text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--plate-mut);
  padding:11px 13px;white-space:nowrap;border-bottom:1px solid var(--plate-rule-2)}
.doc td{padding:11px 13px;border-bottom:1px solid var(--plate-rule);vertical-align:top;
  min-width:150px}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{font-weight:600;min-width:210px}

@media (max-width:900px){
  .doc-in{grid-template-columns:1fr;gap:0;padding:0 0 70px}
  /* Stacked, the index filled a screen and a half before the reader reached the
     title. It becomes a single sticky strip instead — still a way into the
     twenty sections, but it no longer stands in front of the document. */
  .doc-nav{position:sticky;top:52px;z-index:20;
    display:flex;flex-direction:row;gap:0;align-items:stretch;
    margin:0 0 26px;padding:0 20px;
    background:var(--plate);border-right:0;border-bottom:1px solid var(--plate-rule);
    overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .doc-nav::-webkit-scrollbar{display:none}
  .doc-nav .lbl{display:none}
  .doc-nav a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
    padding:13px 14px;border-left:0;border-bottom:2px solid transparent;font-size:12.6px}
  .doc-nav a:hover{border-left:0;border-bottom-color:var(--brass)}
  .doc-nav .doc-l3{display:none}
  /* same edge fade as the lens row: the strip continues past the bezel */
  .doc-nav::after{content:"";position:sticky;right:0;flex:0 0 34px;margin-left:-34px;
    align-self:stretch;pointer-events:none;
    background:linear-gradient(90deg,rgba(239,233,217,0) 0%,var(--plate) 80%)}
  .doc{padding:0 20px;max-width:none}
  .doc h1{margin-bottom:24px}
  .doc .tw{width:calc(100vw - 40px)}
}