/* ══════════════════════════════════════════════════════════════
   HEDZ ARCHIVE — stylesheet

   Moved out of index.html so that the Content-Security-Policy in
   _headers (style-src 'self') can stay strict. An inline <style>
   block would be refused by that policy.
   ══════════════════════════════════════════════════════════════ */

/* ── SPACING + ONE-OFF UTILITIES ─────────────────────────────
   These exist because the Content-Security-Policy in _headers sets
   `style-src 'self'` with no `'unsafe-inline'`, and from CSP Level 2 that
   governs inline `style` ATTRIBUTES, not just `<style>` blocks. Fifteen
   `style="margin-top:2rem"`-style attributes were scattered across the four
   hand-authored pages and the token template. Deployed as they stood, every
   one would have been dropped by the browser and the pages would have shipped
   with visibly wrong spacing — the same failure this project already fixed
   once at the `<style>` level and did not notice one level down.

   Named for what they are for rather than what they measure, so a value can
   change here without every class name becoming a lie. */
.mb-sm{ margin-bottom:0.75rem; }
.mt-sm{ margin-top:0.75rem; }
.mt-md{ margin-top:1.5rem; }
.mt-lg{ margin-top:2rem; }
.mt-xl{ margin-top:clamp(1.75rem,4vw,2.75rem); }
.pad-lg{ padding:2rem; }
/* A lede paragraph directly under a band heading. */
.standfirst{ margin-bottom:1.5rem; max-width:62ch; }
/* Collapses a .plainly two-column grid to one full-width column. */
.one-col{ grid-template-columns:minmax(0,1fr); }
/* Smaller than .display: the 404 headline sits above body copy, not a hero. */
.display-404{ font-size:clamp(2rem,6vw,4rem); margin:0.5rem 0 1.25rem; }
/* Footnote scale inside a panel — the hash caveats and the check-it-yourself line. */
.prose.fine{ font-size:var(--t-xs); }
/* An eyebrow label sitting tight above the block it names. */
.eyebrow.tight{ margin-bottom:0.4rem; }

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --paper:    #E7E8E3;
  --paper-2:  #DDDFD9;
  --ink:      #16181A;
  --muted:    #4F544F;          /* darkened from #5D625D — 7.4:1 on paper */
  --rule:     #C2C6BE;
  --signal:   #175E4D;
  --on-dark:  #F7F8F5;

  --display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --data:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:  0.6875rem;
  --t-sm:  0.8125rem;
  --t-base:0.9375rem;
  --t-lg:  1.25rem;
  --t-xl:  2rem;
  /* No --t-2xl: the hero headline is sized against its own column, not the
     viewport. See .hero-copy h1 — a vw-based size is wrong for type that
     lives in a half-width column. */

  --gap: 1px;
  --pad: clamp(1rem, 3vw, 2.5rem);
  --max: 1440px;
  --sticky: 106px;              /* masthead + pledge, for scroll-margin */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--t-base); font-weight:350;
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word; text-wrap:pretty;
}

/* Anything with an id that can be jumped to clears the sticky header. */
[id]{ scroll-margin-top:calc(var(--sticky) + 0.75rem); }

/* ── Type roles ─────────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 700;
  line-height:0.92; letter-spacing:-0.02em; margin:0; text-transform:uppercase;
}
.eyebrow{
  font-family:var(--data); font-size:var(--t-xs); font-weight:400;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0;
}
.data{ font-family:var(--data); font-size:var(--t-sm); font-weight:400; font-variant-numeric:tabular-nums; }
.lede{ font-size:var(--t-lg); font-weight:300; line-height:1.4; max-width:34ch; margin:0; }
.prose{ max-width:60ch; color:var(--muted); margin:0; }

a{ color:var(--ink); text-underline-offset:0.18em; }
a:hover{ color:var(--signal); }
a:visited{ color:var(--ink); }

/* Light type on dark optically thins and blooms — compensate. */
.on-dark{ color:var(--on-dark); font-weight:500; font-size:0.75rem; letter-spacing:0.05em; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip{
  position:absolute; left:0.5rem; top:-3rem; z-index:100;
  background:var(--ink); color:var(--on-dark); text-decoration:none;
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; padding:0.6rem 0.9rem; transition:top .15s ease;
}
.skip:focus{ top:0.5rem; color:var(--on-dark); }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── FRAME ──────────────────────────────────────────────────── */
.shell{ max-width:var(--max); margin:0 auto; }

.masthead{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--pad); flex-wrap:wrap;
  padding:0.75rem var(--pad);
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.mark{
  font-family:var(--display); font-variation-settings:'wdth' 125,'wght' 800;
  font-size:var(--t-base); letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;
}
.mark a{ text-decoration:none; }
.masthead .spacer{ flex:1; }
.masthead .meta{ display:flex; gap:1.5rem; font-family:var(--data); font-size:var(--t-xs); color:var(--muted); letter-spacing:0.06em; }
.masthead .meta span{ white-space:nowrap; }
@media (max-width:1340px){ .masthead .meta span.optional{ display:none; } }

.pledge{
  padding:0.5rem var(--pad); border-bottom:1px solid var(--rule);
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:0.6rem;
}
.pledge::before{ content:''; width:6px; height:6px; flex:none; background:var(--signal); border-radius:50%; }

/* The question every visitor arrives with, answered above the fold and
   before the headline has to be read. Dated, because it expires. */
.statusline{
  margin:0; padding:0.5rem var(--pad); border-bottom:1px solid var(--rule);
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.04em;
  color:var(--ink); line-height:1.6;
  background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.055) 5px 10px);
}
.statusline b{ font-weight:500; text-transform:uppercase; letter-spacing:0.08em; }

.band{ padding:clamp(3rem,7vw,6rem) var(--pad); border-bottom:1px solid var(--rule); }
.band-tight{ padding-top:clamp(1.75rem,3.5vw,2.75rem); padding-bottom:clamp(1.75rem,3.5vw,2.75rem); }

.band-head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom:2rem; padding-bottom:0.625rem; border-bottom:1px solid var(--ink);
}
.band-head h1,
.band-head h2{
  font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650;
  font-size:var(--t-lg); text-transform:uppercase; letter-spacing:0.01em; margin:0;
}
/* status.html and chronology.html are destinations, not sections. Their title
   has to outrank the values in the cards beneath it — at --t-lg it did not. */
.band-head h1{ font-size:clamp(1.75rem,4vw,2.5rem); line-height:1; letter-spacing:-0.01em; }
.band-head .count{ margin-left:auto; color:var(--muted); }
.band-head .count a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule); }
.band-head .count a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ── Section nav: a scrolling rail on small screens, not hidden ── */
/* Belt and braces at every width: the links can always scroll inside their
   own box, so no future nav item or meta string can push the header wider
   than the viewport and drag a horizontal scrollbar across the document. */
.navlinks{ display:flex; gap:1rem; min-width:0; overflow-x:auto; scrollbar-width:none; }
.navlinks::-webkit-scrollbar{ display:none; }
.navlinks a{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap;
}
.navlinks a:hover{ color:var(--ink); }
/* The rail takes over well before the row would overflow. Eight links plus
   the meta column need ~1340px once `--pad` has grown with the viewport, and
   a header that overflows drags a horizontal scrollbar across a
   57,000px-tall document. */
@media (max-width:1340px){
  .masthead{ flex-wrap:wrap; row-gap:0.5rem; padding-bottom:0; }
  .masthead .spacer{ display:none; }
  .masthead .meta{ margin-left:auto; }
  .navlinks{
    order:3; flex-basis:100%; gap:0.25rem;
    overflow-x:auto; scrollbar-width:none;
    margin:0 calc(var(--pad) * -1); padding:0 var(--pad);
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks a{
    display:flex; align-items:center; min-height:44px;
    padding:0 0.7rem; scroll-snap-align:start;
    border-bottom:2px solid transparent;
  }
  .navlinks a:hover,.navlinks a:focus-visible{ border-bottom-color:var(--ink); }
}

/* ── HERO ───────────────────────────────────────────────────── */
/* Every mobile-first track is minmax(0,1fr), never a bare 1fr: a bare `1fr`
   floors at the content's min-content width, so one long word in a display
   headline — or one unbroken CID — inflates the track past the viewport. */
.hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:940px){ .hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
/* The headline sits in a column that is full-width on a phone and just under
   half the viewport on a desktop. Sized in vw it was ~95px inside a ~510px box,
   so "OVERWRITTEN." could not fit and broke mid-word. cqi measures the column
   itself, so the type fits its container at every width.

   10cqi is not arbitrary: "OVERWRITTEN." is the longest unbreakable word in the
   headline and measures 9.13em in Archivo at wdth 118 / wght 700, so anything
   above ~10.9cqi splits it. 10 leaves margin for fallback-font metrics if the
   webfont fails to load.

   The floor obeys the same constraint. At 2rem it did not: below a ~296px column
   the clamp floor took over from 10cqi and 32px overshot what fits, so the word
   broke again at 320px — the WCAG reflow width — and at 280px (Galaxy Fold cover
   screen). 1.625rem/26px clears a 248px column, which is the narrowest real one.
   Change the copy, re-measure both ends.

   Below a 224px column (a ~256px viewport, narrower than any shipping device and
   below the 320px WCAG reflow width) the word cannot fit at any legible size, so
   hyphens:auto makes that last resort break with a hyphen rather than splitting
   the word silently. */
.hero-copy{ display:flex; flex-direction:column; gap:1.5rem; container-type:inline-size; }
.hero-copy h1{ font-size:clamp(1.625rem, 10cqi, 5.5rem); overflow-wrap:break-word; hyphens:auto; }
.hero-copy h1 em{ font-style:normal; display:block; font-variation-settings:'wdth' 62,'wght' 500; color:var(--signal); }
/* Two facts, built as cells rather than free-floating numbers: the site already
   states good and compromised state this way in the status grid (3px rule on
   the left, hatch for damage), so the hero should not invent a second idiom. */
.stats{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap);
  background:var(--rule); border:1px solid var(--rule); margin-top:1.5rem;
}
.stat{
  background:var(--paper); padding:0.8rem 1rem;
  border-left:3px solid var(--signal);
  display:flex; flex-direction:column; gap:0.2rem;
}
.stat .v{
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 700;
  font-size:1.5rem; line-height:1.05; font-variant-numeric:tabular-nums;
}
.stat .k{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
.stat.bad{
  border-left-color:var(--ink);
  background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.075) 5px 10px);
}
.stat.bad .k{ color:var(--ink); }

/* ── ANSWER-FIRST SUMMARY ───────────────────────────────────── */
.abstract{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:940px){ .abstract{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.abstract p{ margin:0 0 0.85rem; max-width:68ch; font-size:var(--t-base); }
.abstract p:last-child{ margin-bottom:0; }
.abstract strong{ font-weight:600; }

.keyfacts{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--ink); }
.keyfacts > div{
  display:grid; grid-template-columns:10rem minmax(0,1fr); gap:0.75rem;
  padding:0.6rem 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
@media (max-width:560px){ .keyfacts > div{ grid-template-columns:1fr; gap:0.15rem; } }
.keyfacts dt{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.keyfacts dd{ margin:0; font-family:var(--data); font-size:var(--t-sm); overflow-wrap:anywhere; }

/* ── ART PLATE ───────────────────────────────────────────────
   The before/after slider is gone. A single recovered image, captioned
   with what it is and what it was checked against. */
.artplate{ margin:0; }
.frames{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--ink); background:var(--paper-2);
}
.frames img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; opacity:1; transition:opacity .9s ease;
}
.frames img.out{ opacity:0; }
.artplate img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--ink); background:var(--paper-2);
}
.artplate figcaption{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:0.625rem;
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.artplate figcaption .hint{ margin-left:auto; color:var(--signal); }
/* 44px like every other control in this stylesheet. It was 32px, which made the
   one affordance added for motion-sensitive users the hardest thing on the page
   to hit on a phone. align-self keeps it level with the baseline-aligned text. */
.artplate figcaption button{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule); color:var(--muted);
  padding:0.4rem 0.9rem; min-height:44px; cursor:pointer;
}
.artplate figcaption button:hover{ color:var(--ink); border-color:var(--ink); }

/* ── RECOVERY LEDGER ────────────────────────────────────────── */
.ledger-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:0.9rem; }
.ledger-head .t{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.ledger-head .n{ margin-left:auto; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--signal); }
.ledger{
  display:flex; gap:1px; height:44px; align-items:flex-end;
  border-bottom:1px solid var(--rule); padding-bottom:2px; overflow:hidden;
}
.tick{ flex:1 1 0; min-width:0; height:34%; background:var(--rule); transition:height .45s cubic-bezier(.2,.8,.2,1), background-color .45s ease; }
.ledger.filled .tick{ height:100%; background:var(--signal); }
.ledger-foot{ display:flex; justify-content:space-between; margin-top:0.5rem; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }

/* ── SEARCH + CATALOGUE ─────────────────────────────────────── */
.search{
  display:flex; align-items:center; gap:0.75rem;
  border:1px solid var(--ink); padding:0.55rem 0.9rem; margin-bottom:0.9rem; background:var(--paper);
}
.search:focus-within{ outline:2px solid var(--signal); outline-offset:2px; }
.search svg{ flex:none; }
.search input{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  font-family:var(--data); font-size:1rem; /* 16px — stops iOS zooming on focus */
  color:var(--ink); letter-spacing:0.02em; min-height:38px;
}
.search input::placeholder{ color:var(--muted); letter-spacing:0.06em; }
.search .key{ flex:none; font-family:var(--data); font-size:var(--t-xs); color:var(--muted); letter-spacing:0.06em; border:1px solid var(--rule); padding:0.1rem 0.35rem; }
.search .clear{
  flex:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); padding:0.5rem 0.4rem; min-height:44px;
}
.search .clear:hover{ color:var(--ink); }
.search .clear[hidden]{ display:none; }
@media (max-width:620px){ .search .key{ display:none; } }

.filters{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.75rem; }
.chip{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  padding:0.35rem 0.75rem; min-height:36px; background:transparent; color:var(--muted);
  border:1px solid var(--rule); cursor:pointer;
}
@media (max-width:760px){ .chip{ min-height:44px; padding-inline:1rem; } }
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); font-weight:500; letter-spacing:0.05em; }

/* Sentence-case prose for the same reason: two sentences do not belong in a
   mono label treatment. */
.cat-hint{ font-family:var(--body); font-size:var(--t-sm); line-height:1.55; color:var(--muted); max-width:70ch; margin:0 0 1.5rem; }

.lattice[hidden]{ display:none; }
.lattice{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--gap); background:var(--rule); border:1px solid var(--rule); }
@media (max-width:420px){ .lattice{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); } }
.plate{ background:var(--paper); border:0; padding:0; margin:0; text-align:left; cursor:pointer; display:flex; flex-direction:column; font:inherit; color:inherit; text-decoration:none; }
.plate[hidden]{ display:none; }
.plate .art{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2); }
.plate .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.plate .art .damaged{ position:absolute; inset:0; opacity:0; transition:opacity .18s ease; }
@media (hover:hover) and (pointer:fine){
  .plate:hover .art .damaged,.plate:focus-visible .art .damaged{ opacity:1; }
  .plate:hover .art::after,.plate:focus-visible .art::after{
    content:'AS MINTED'; position:absolute; left:0; bottom:0;
    font-family:var(--data); font-size:0.75rem; font-weight:500; letter-spacing:0.05em;
    background:var(--ink); color:var(--on-dark); padding:0.22rem 0.5rem;
  }
}
.plate:hover .cap .nm{ text-decoration:underline; text-underline-offset:0.18em; }
.plate:focus-visible{ outline:2px solid var(--signal); outline-offset:-2px; }
.plate[aria-current="true"]{ outline:2px solid var(--signal); outline-offset:-2px; }
.plate .cap{ display:flex; gap:0.5rem; align-items:baseline; padding:0.5rem 0.625rem 0.625rem; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.05em; text-transform:uppercase; }
.plate .cap .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.plate .cap .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plate .cap .ok{ margin-left:auto; color:var(--signal); }

/* An author `display` beats the UA's [hidden] rule regardless of specificity,
   so anything toggled with .hidden and given a display value needs this. The
   empty state was permanently on screen without it — and its reset button
   looked broken because there was never anything to reset. */
.empty[hidden]{ display:none; }
.empty{ border:1px dashed var(--rule); padding:clamp(2rem,6vw,3.5rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.9rem; }
.empty h3{ font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650; font-size:var(--t-lg); text-transform:uppercase; margin:0; }
.empty p{ margin:0; color:var(--muted); max-width:44ch; }
.empty button{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; padding:0.7rem 0.9rem; min-height:44px; cursor:pointer; background:var(--ink); color:var(--on-dark); border:1px solid var(--ink); font-weight:500; }

/* ── FOLD ────────────────────────────────────────────────────
   Collapsed, not omitted: the content stays in the HTML for a crawler and
   a language model, and out of the way of a first read. */
.fold > summary{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
  min-height:44px; display:flex; align-items:center;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.fold > summary:hover{ color:var(--ink); }
.fold[open] > summary{ border-bottom-color:transparent; }

/* ── SHOW MORE ──────────────────────────────────────────────── */
.showmore{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.25rem; }
.showmore[hidden]{ display:none; }
.showmore button{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  background:var(--ink); color:var(--on-dark); border:1px solid var(--ink); font-weight:500;
  padding:0.7rem 1.1rem; min-height:44px; cursor:pointer;
}
/* Loading a thousand tiles is the less common intent, so it reads as the
   secondary of the two. */
.showmore button.quiet{
  background:transparent; color:var(--muted); border-color:var(--rule); font-weight:400;
}
.showmore button.quiet:hover{ color:var(--ink); border-color:var(--ink); }
.showmore button[hidden]{ display:none; }
.showmore .note{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }

/* Text index — every name in the HTML, for readers and for crawlers. */
.textindex{ margin-top:2rem; border-top:1px solid var(--rule); padding-top:1rem; }
.textindex > summary{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
  min-height:44px; display:flex; align-items:center;
}
.textindex > summary:hover{ color:var(--ink); }
.textindex ol{
  list-style:none; margin:0.75rem 0 0; padding:0;
  columns:4 15rem; column-gap:2rem;
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.02em;
}
.textindex li{ break-inside:avoid; padding:0.15rem 0; }
.textindex a{ color:var(--muted); text-decoration:none; }
.textindex a:hover{ color:var(--ink); text-decoration:underline; }
.textindex .num{ font-variant-numeric:tabular-nums; }

/* ── RECORD ─────────────────────────────────────────────────── */
.record{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,4vw,3rem); }
@media (min-width:940px){ .record{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.record-main{ min-width:0; display:flex; flex-direction:column; gap:0.9rem; }
.record-side{ display:flex; flex-direction:column; gap:1.75rem; min-width:0; }

.rec-nav{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.rec-nav button{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule); color:var(--muted);
  padding:0.5rem 0.8rem; min-height:44px; cursor:pointer;
}
.rec-nav button:hover{ color:var(--ink); border-color:var(--ink); }
.rec-nav .pos{ margin-left:auto; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; color:var(--muted); text-transform:uppercase; }

.strip{ display:flex; gap:1px; background:var(--rule); border:1px solid var(--rule); overflow-x:auto; scrollbar-width:thin; }
.strip button{ flex:0 0 62px; border:0; padding:0; background:var(--paper); cursor:pointer; }
.strip img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; opacity:.5; transition:opacity .15s ease; }
.strip button:hover img{ opacity:1; }
.strip button[aria-current="true"] img{ opacity:1; }
.strip button[aria-current="true"]{ outline:2px solid var(--signal); outline-offset:-2px; }

.rec-title{ font-family:var(--display); font-variation-settings:'wdth' 115,'wght' 750; font-size:clamp(1.75rem,5vw,3.25rem); line-height:0.94; text-transform:uppercase; margin:0; }

/*: The record panel carries facts, not trait rarity. This collection has none:
    every piece is a hand-drawn 1/1 and the source metadata holds exactly two
    attributes, one of them constant. So the panel is two columns, and long
    values (the CID) wrap rather than being truncated into something unusable. */
.traits{ display:flex; flex-direction:column; }
.trait{ display:grid; grid-template-columns:8rem minmax(0,1fr); gap:0.75rem; align-items:baseline; padding:0.6rem 0; border-bottom:1px solid var(--rule); }
@media (max-width:560px){ .trait{ grid-template-columns:1fr; gap:0.15rem; } }
.trait .k{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.trait .v{ font-family:var(--data); font-size:var(--t-sm); overflow-wrap:anywhere; }
.trait .v.mono{ font-size:var(--t-xs); line-height:1.5; }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:0.9rem; padding:0.7rem 0; border-bottom:1px solid var(--rule); position:relative; }
@media (max-width:560px){ .timeline li{ grid-template-columns:1fr; gap:0.2rem; } }
.timeline .when{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; padding-top:0.15rem; }
.timeline .what{ font-size:var(--t-sm); }
.timeline .what b{ font-weight:600; display:block; }
.timeline .what span{ color:var(--muted); }
.timeline li[data-state="loss"] .what b{ color:var(--ink); }
.timeline li[data-state="gain"] .what b{ color:var(--signal); }

.verify{ border:1px solid var(--signal); padding:1rem 1.125rem; display:flex; flex-direction:column; gap:0.75rem; }
.verify .h{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:0.5rem; }
.verify .h::before{ content:''; width:6px; height:6px; background:var(--signal); border-radius:50%; flex:none; }
.hashrow{ display:flex; flex-direction:column; gap:0.2rem; }
.hashrow .lab{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.hashrow code{ font-family:var(--data); font-size:var(--t-xs); word-break:break-all; line-height:1.5; }
.verify .actions{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.verify .actions button{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--signal); color:var(--signal);
  padding:0.5rem 0.8rem; min-height:44px; cursor:pointer;
}
.verify .actions button:hover{ background:var(--signal); color:var(--on-dark); font-weight:500; }
.verify .actions .said{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--signal); opacity:0; transition:opacity .2s ease; }
.verify .actions .said.on{ opacity:1; }
/* Verdigris is reserved for a claim that has been checked. When no digest has
   been computed from the file, the panel states the CID on record and takes the
   muted rule instead — the colour is part of the claim, so it has to follow the
   evidence rather than the layout. */
.verify[data-state="recorded"]{ border-color:var(--rule); }
.verify[data-state="recorded"] .h{ color:var(--muted); }
.verify[data-state="recorded"] .h::before{ background:var(--muted); }

/* ── CONTRACT STATUS ─────────────────────────────────────────
   Verdigris means verified. Compromise gets no colour of its own —
   it gets a hatch, the way damage is marked on a conservation report. */
.hatch{ background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.085) 5px 10px); }

/* Five cells never fill an auto-fit grid: at 2, 3 or 4 columns there is always
   a hole, and because the grid paints --rule behind its 1px gaps the hole
   renders as a solid grey block. Explicit counts, with the last cell spanning
   whatever is left, so the row always closes. */
.status-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); background:var(--rule); border:1px solid var(--rule); }
@media (min-width:560px){
  .status-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-grid .cell:last-child{ grid-column:span 2; }
}
@media (min-width:860px){
  .status-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .status-grid .cell:last-child{ grid-column:span 2; }
}
@media (min-width:1180px){
  .status-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .status-grid .cell:last-child{ grid-column:auto; }
}
.cell{ background:var(--paper); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:0.4rem; border-left:3px solid var(--rule); }
.cell .k{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:0.45rem; }
.cell .k .mk{ font-weight:500; }
.cell .v{ font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 700; font-size:1.375rem; line-height:1.1; overflow-wrap:anywhere; }
.cell .n{ font-family:var(--data); font-size:var(--t-xs); color:var(--muted); line-height:1.5; }
.cell[data-state="ok"]{ border-left-color:var(--signal); }
.cell[data-state="ok"] .k{ color:var(--signal); }
.cell[data-state="bad"]{ border-left-color:var(--ink); background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.085) 5px 10px); }
.cell[data-state="unknown"]{ border-left-style:dashed; }
/* The full contract address, under the elided one. The page tells the reader to
   compare it character for character, which needs the characters to be there. */
.cell .n code.addr-full{ display:block; word-break:break-all; color:var(--ink); line-height:1.6; margin-bottom:0.4rem; }

.plainly{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; margin-top:1.75rem; }
@media (min-width:820px){ .plainly{ grid-template-columns:1.1fr 1fr; gap:clamp(1.75rem,4vw,3rem); } }
.plainly h3{ font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650; font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.02em; margin:0 0 0.6rem; }
.checks{ list-style:none; margin:0; padding:0; }
.checks li{ display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:0.5rem; padding:0.55rem 0; border-bottom:1px solid var(--rule); font-size:var(--t-sm); }
.checks li b{ font-family:var(--data); font-size:var(--t-xs); color:var(--muted); padding-top:0.15rem; }
.stamp{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:1rem; display:block; line-height:1.7; }

/* ── DONATIONS — in the footer, deliberately quiet ────────────
   Asking for money must not outweigh the contract status, so this is footer
   type on a rule, not a bordered card in its own band.

   Closed by default. An archive that opens by naming a wallet reads like a
   collection plate, and this one spends its whole length arguing that the
   people who made money here stopped answering. One line, folded away, is the
   version that costs the argument nothing.

   Layout is a three-column grid — ticker, address, action — so the Copy
   buttons align on a common edge no matter how long the addresses are. The
   old flex row put the button immediately after the address, which meant a
   42-character ETH address and a 32-character Solana one pushed their buttons
   to different places and the block read as ragged. */
.foot-support{
  margin:1.5rem 0; padding-top:1.25rem; border-top:1px solid var(--rule);
  max-width:72ch;
}
.foot-support > summary{
  display:flex; align-items:baseline; gap:0.7rem; flex-wrap:wrap;
  cursor:pointer; list-style:none; padding:0.35rem 0; min-height:44px;
  align-content:center;
}
.foot-support > summary::-webkit-details-marker{ display:none; }
/* The marker is drawn rather than inherited so it can sit on the baseline of
   the label and rotate without shifting the text next to it. */
.foot-support > summary::before{
  content:''; flex:none; width:0.5rem; height:0.5rem; margin-right:-0.2rem;
  border-right:1px solid var(--muted); border-bottom:1px solid var(--muted);
  transform:rotate(-45deg) translateY(-0.1rem); transition:transform .18s ease;
}
.foot-support[open] > summary::before{ transform:rotate(45deg) translateY(-0.15rem); }
.foot-support > summary:hover .lab{ color:var(--ink); }
.foot-support > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.foot-support .lab{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); transition:color .15s ease;
}
.foot-support .opt{
  font-family:var(--body); font-size:var(--t-sm); color:var(--muted);
  letter-spacing:0; text-transform:none;
}
.foot-support .support-body{ display:flex; flex-direction:column; gap:0.9rem; padding-top:0.9rem; }

.foot-support .addrs{ margin:0; display:grid; gap:0.4rem; }
/* max-content, not 1fr, on the address column: with a single row a stretching
   middle column strands the Copy button out at the far right of a 72ch block
   with nothing between. Sized to the address, the button sits beside what it
   copies, and the column edges still line up if more rows are added. */
.foot-support .addrs > div{
  display:grid; grid-template-columns:2.5rem minmax(0,max-content) auto;
  gap:0.9rem; align-items:center; justify-content:start;
  padding:0.4rem 0; border-bottom:1px solid var(--rule);
}
.foot-support .addrs > div:last-child{ border-bottom:0; }
.foot-support dt{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em;
  color:var(--muted); text-transform:uppercase;
}
.foot-support dd{ margin:0; min-width:0; }
.foot-support dd.act{ display:flex; align-items:center; gap:0.6rem; justify-self:end; }
/* An address is read character by character or not at all, so it gets tabular
   figures, no ligatures, and a break that cannot land mid-glyph-pair. */
.foot-support code{
  font-family:var(--data); font-size:var(--t-xs); color:var(--ink);
  font-variant-numeric:tabular-nums; font-variant-ligatures:none;
  letter-spacing:0; line-height:1.5; word-break:break-all; display:block;
}
.foot-support button{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule); color:var(--muted);
  padding:0.5rem 0.7rem; min-height:44px; cursor:pointer; white-space:nowrap;
}
.foot-support button:hover{ color:var(--ink); border-color:var(--ink); }
.foot-support .said{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--signal); opacity:0;
  transition:opacity .2s ease; white-space:nowrap;
}
.foot-support .said.on{ opacity:1; }
.foot-support .fine{
  margin:0; font-family:var(--body); font-size:var(--t-sm); line-height:1.55;
  letter-spacing:0; text-transform:none; color:var(--muted);
}
@media (max-width:560px){
  .foot-support .addrs > div{ grid-template-columns:minmax(0,1fr); gap:0.3rem; }
  .foot-support dd.act{ justify-self:start; }
}

.rec-status{ display:flex; align-items:flex-start; gap:0.7rem; border:1px solid var(--ink); padding:0.7rem 0.85rem; background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.085) 5px 10px); }
.rec-status .mk{ font-family:var(--data); font-size:var(--t-xs); font-weight:500; }
.rec-status .tx{ font-size:var(--t-sm); line-height:1.45; }

/* ── CHRONOLOGY ──────────────────────────────────────────────
   The marker encodes what kind of event it was. Read down the rail
   and the shape of the story is visible before you read a word. */
.chron{ list-style:none; margin:0; padding:0; }
.yr{
  display:flex; align-items:baseline; gap:0.9rem;
  padding:1.5rem 0 0.5rem; margin-top:1rem;
  border-bottom:1px solid var(--ink);
}
.yr:first-child{ margin-top:0; padding-top:0; }
.yr .y{ font-family:var(--display); font-variation-settings:'wdth' 125,'wght' 800; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums; margin:0; text-transform:uppercase; }
.yr .lab{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

.ev{
  display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:1rem;
  padding:0.95rem 0 0.95rem 1.1rem;
  border-bottom:1px solid var(--rule);
  border-left:3px solid var(--rule);
}
@media (max-width:680px){ .ev{ grid-template-columns:1fr; gap:0.3rem; } }
.ev .when{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding-top:0.2rem; white-space:nowrap; }
.ev .body h3,
.ev .body h4{ font-family:var(--display); font-variation-settings:'wdth' 108,'wght' 680; font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.01em; margin:0 0 0.25rem; }
.ev .body p{ margin:0; font-size:var(--t-sm); color:var(--muted); max-width:62ch; }
.ev .src{ display:inline-flex; gap:0.4rem; margin-top:0.45rem; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule); }
.ev .src:hover{ color:var(--ink); border-bottom-color:var(--ink); }
/* A source the archive does not control is a single point of failure. Every
   one carries a Wayback copy beside it. */
.ev .src.arch{ margin-left:1rem; border-bottom-style:dotted; }
.ev .kind{ font-family:var(--data); font-size:var(--t-xs); font-weight:500; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:0.2rem; }

.ev[data-kind="made"]{ border-left-color:var(--ink); }
.ev[data-kind="made"] .kind{ color:var(--muted); }
.ev[data-kind="loss"]{ border-left-color:var(--ink); background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,24,26,.085) 5px 10px); }
.ev[data-kind="loss"] .kind{ color:var(--ink); }
.ev[data-kind="evidence"]{ border-left-color:var(--signal); }
.ev[data-kind="evidence"] .kind{ color:var(--signal); }
.ev[data-kind="silence"]{ border-left-style:dashed; }
.ev[data-kind="silence"] .kind{ color:var(--muted); }

.legend{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:1.75rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.legend span{ display:flex; align-items:center; gap:0.45rem; font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.legend i{ width:14px; height:14px; border-left:3px solid var(--rule); display:block; }
.legend i.made{ border-left-color:var(--ink); }
.legend i.loss{ border-left-color:var(--ink); background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(22,24,26,.18) 3px 6px); }
.legend i.evidence{ border-left-color:var(--signal); }
.legend i.silence{ border-left-style:dashed; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--ink); }
@media (min-width:940px){ .faq{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem); } }
.faq > div{ padding:1.1rem 0; border-bottom:1px solid var(--rule); }
.faq h3{
  font-family:var(--display); font-variation-settings:'wdth' 108,'wght' 680;
  font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.01em; margin:0 0 0.4rem;
}
.faq p{ margin:0; font-size:var(--t-sm); color:var(--muted); max-width:58ch; }
.faq p + p{ margin-top:0.5rem; }

/* ── FOR HOLDERS / CONTACT ──────────────────────────────────── */
.cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,4vw,2.75rem); }
@media (min-width:820px){ .cols.two{ grid-template-columns:1fr 1fr; } .cols.three{ grid-template-columns:repeat(3,1fr); } }
.col h3{ font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650; font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.02em; margin:0 0 0.7rem; padding-bottom:0.45rem; border-bottom:1px solid var(--ink); }
.col p{ margin:0 0 0.7rem; font-size:var(--t-sm); color:var(--muted); }
.col p strong{ color:var(--ink); font-weight:600; }
.col ul{ list-style:none; margin:0; padding:0; }
.col ul li{ padding:0.5rem 0; border-bottom:1px solid var(--rule); font-size:var(--t-sm); color:var(--muted); }
.col ul li b{ color:var(--ink); font-weight:600; }
.col code{ font-family:var(--data); }

.owns{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.55rem 0.8rem; align-items:start; margin-bottom:1rem; }
.owns .mk{ font-family:var(--data); font-size:var(--t-sm); font-weight:500; line-height:1.5; }
.owns .yes{ color:var(--signal); }
.owns .no{ color:var(--ink); }
.owns span:not(.mk){ font-size:var(--t-sm); }

.contactbox{ border:1px solid var(--ink); padding:clamp(1.1rem,3vw,1.6rem); display:flex; flex-direction:column; gap:0.6rem; }
.contactbox h3{
  font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650;
  font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.02em;
  margin:0 0 0.2rem; padding-bottom:0.45rem; border-bottom:1px solid var(--ink);
}
.contactbox .addr{ font-family:var(--data); font-size:var(--t-lg); word-break:break-all; }
.contactbox .note{ font-size:var(--t-sm); color:var(--muted); margin:0; }

/* ── CITATION ───────────────────────────────────────────────── */
.cite{ border-top:1px solid var(--rule); padding-top:1rem; margin-top:1.75rem; display:flex; flex-direction:column; gap:0.6rem; }
.cite .lab{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.cite p{ margin:0; font-family:var(--data); font-size:var(--t-sm); line-height:1.6; overflow-wrap:anywhere; }
/* Prose, not a label. `.lab` is an 11px uppercase letter-spaced label style —
   legitimate on the one-line heading span, unreadable on a sentence, and it
   made the catalogue.json link indistinguishable from surrounding label noise. */
.cite .fine{
  font-family:var(--body); font-size:var(--t-sm); line-height:1.55;
  letter-spacing:0; text-transform:none; color:var(--muted); max-width:70ch;
}

/* Six paragraphs of fine print in one 490px column is a wall nobody reads.
   Two columns and a heading make it scannable without softening any of it. */
.disclaimer{
  border-top:1px solid var(--ink); margin-top:2rem; padding-top:1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr); gap:0.6rem clamp(1.75rem,4vw,3rem);
  align-content:start;
}
@media (min-width:820px){
  .disclaimer{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .disclaimer h3,.disclaimer p.lead{ grid-column:1 / -1; }
}
.disclaimer h3{
  font-family:var(--display); font-variation-settings:'wdth' 110,'wght' 650;
  font-size:var(--t-base); text-transform:uppercase; letter-spacing:0.02em; margin:0;
}
/* The affiliation statement is the most important sentence in the block. As
   bold 13px spanning both columns it read as a stray fragment under the
   heading; at body size with room around it, it reads as a statement. */
.disclaimer p.lead{
  font-size:var(--t-base); font-weight:500; color:var(--ink);
  max-width:64ch; margin:0.2rem 0 0.5rem; line-height:1.5;
}
.disclaimer p{ margin:0; font-size:var(--t-sm); color:var(--muted); max-width:70ch; }
.disclaimer p.lead{ color:var(--ink); font-weight:600; }

/* ── CHANGELOG ──────────────────────────────────────────────── */
.log{ list-style:none; margin:0; padding:0; }
.log li{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--rule); }
@media (max-width:680px){ .log li{ grid-template-columns:1fr; gap:0.25rem; } }
.log .d{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:0.15rem; }
.log .w{ font-size:var(--t-sm); }
.log .w b{ font-weight:600; }
.log .tagp{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-left:0.5rem; }
.log .tagp[data-t="fix"]{ color:var(--ink); }
.log .tagp[data-t="add"]{ color:var(--signal); }

.updated{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }

/* ── PER-TOKEN PAGE ──────────────────────────────────────── */
.crumbs{
  display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center;
  padding:1rem var(--pad) 0;
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.navlinks a[aria-current="page"]{ color:var(--ink); border-bottom:2px solid var(--ink); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }

.token{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,4vw,3rem); align-items:start; }
@media (min-width:940px){ .token{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.token-art img{ width:100%; height:auto; display:block; border:1px solid var(--ink); background:var(--paper-2); }
.tokencap{
  margin:0.625rem 0 0; font-family:var(--data); font-size:var(--t-xs);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--signal);
}
.token-body{ display:flex; flex-direction:column; gap:1.5rem; min-width:0; }
.token-body h1{ margin:0.25rem 0 0; }

.tokennav{ display:flex; flex-wrap:wrap; gap:0.4rem; border-top:1px solid var(--rule); padding-top:1rem; }
.tokennav a{
  font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  padding:0.6rem 0.85rem; min-height:44px; display:inline-flex; align-items:center;
  border:1px solid var(--rule); color:var(--muted); text-decoration:none;
}
.tokennav a:hover{ color:var(--ink); border-color:var(--ink); }

/* ── DEEP-LINK ANCHORS ───────────────────────────────────────
   A record that wants to be cited has to be citable at the level people
   actually quote: one question, one dated event. Quiet until wanted. */
.anchor{
  font-family:var(--data); font-weight:400; color:var(--muted); text-decoration:none;
  opacity:0; transition:opacity .15s ease; padding:0 0.2rem;
}
h3:hover > .anchor,
.ev:hover .anchor,
.anchor:focus-visible{ opacity:1; }
.anchor:hover{ color:var(--signal); }
@media (hover:none){ .anchor{ opacity:0.45; } }

:target{ scroll-margin-top:calc(var(--sticky) + 0.75rem); }
.ev:target,
.faq > div:target{ outline:2px solid var(--signal); outline-offset:6px; }

footer.foot{ padding:2.5rem var(--pad) 4rem; }
footer.foot p{ font-family:var(--data); font-size:var(--t-xs); letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; margin:0 0 0.4rem; }
footer.foot code{ font-family:var(--data); text-transform:none; }

noscript .nojs{
  display:block; border:1px solid var(--ink); padding:1rem 1.125rem; margin-bottom:1.5rem;
  font-size:var(--t-sm);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media print{
  .masthead,.navlinks,.search,.filters,.strip,.showmore,.textindex,.ledger{ display:none !important; }
  body{ background:#fff; }
  .band{ padding:1rem 0; break-inside:avoid; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:0.7em; }
}