/* ───────── custom faces (all sourced from /fonts/custom) ───────── */
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Thin.ttf')          format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Thin%20Italic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Light.ttf')         format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Light%20Italic.ttf')format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Regular.ttf')        format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Regular%20Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Semibold.ttf')      format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Bold.ttf')          format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Bergamasco'; src: url('fonts/custom/Bergamasco%20Bold%20Italic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

  @font-face { font-family: 'Saint';          src: url('fonts/custom/saint.otf')                  format('opentype'); font-display: swap; }
  @font-face { font-family: 'RoyaleCouture';  src: url('fonts/custom/royale-couture-sans.otf')    format('opentype'); font-display: swap; }
  @font-face { font-family: 'Cactus Jack';    src: url('fonts/custom/Cactus%20Jack.otf')          format('opentype'); font-display: swap; }
  @font-face { font-family: 'Komix';          src: url('fonts/custom/Komix.ttf')                  format('truetype'); font-display: swap; }
  @font-face { font-family: 'Handwriting';    src: url('fonts/custom/My%20handwriting.ttf')       format('truetype'); font-display: swap; }
  @font-face { font-family: 'Old London';     src: url('fonts/custom/Old%20London.ttf')           format('truetype'); font-display: swap; }
  @font-face { font-family: 'Old English Five'; src: url('fonts/custom/Old%20English%20Five.ttf') format('truetype'); font-display: swap; }
  @font-face { font-family: 'OldEnglMT';      src: url('fonts/custom/OLDENGL.TTF')                format('truetype'); font-display: swap; }
  @font-face { font-family: 'Spumoni';        src: url('fonts/custom/Spumoni.ttf')                format('truetype'); font-display: swap; }
  @font-face { font-family: 'Damned Architect'; src: url('fonts/custom/damned%20architect.ttf')   format('truetype'); font-display: swap; }
  @font-face { font-family: 'Grand Malon';    src: url('fonts/custom/GrandMalon-Regular.ttf')    format('truetype'); font-display: swap; }
  @font-face { font-family: 'LEGO Brix';      src: url('fonts/custom/LEGO%20BRIX.ttf')           format('truetype'); font-display: swap; }
  @font-face { font-family: 'DeathNote';      src: url('fonts/custom/DEATHNOTEFont.ttf')          format('truetype'); font-display: swap; }
  @font-face { font-family: 'DeathFont';      src: url('fonts/custom/DEATH_FONT.TTF')             format('truetype'); font-display: swap; }
  @font-face { font-family: 'DeathNoteZZ';    src: url('fonts/custom/05_ZZ%20Death%20Note%201.0.ttf') format('truetype'); font-display: swap; }
  @font-face { font-family: 'FontBleach';     src: url('fonts/custom/FontBleach.ttf')             format('truetype'); font-display: swap; }
  @font-face { font-family: 'Journal';        src: url('fonts/custom/Journal.ttf')                format('truetype'); font-display: swap; }
  @font-face { font-family: 'MangaT';         src: url('fonts/custom/mangat.ttf')                 format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'MangaT';         src: url('fonts/custom/mangatb.ttf')                format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face { font-family: 'MangaT';         src: url('fonts/custom/mangati.ttf')                format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: 'PonyDisplay';    src: url('fonts/custom/PonyDisplay.woff2') format('woff2'), url('fonts/custom/PonyDisplay.ttf') format('truetype'); font-display: swap; }

  /* ── Madoka Magica fonts pack (ko-fi · 17 faces) ── */
  @font-face { font-family: 'MadokaAlbertine';  src: url('fonts/custom/MadokaAlbertine-Regular.otf')  format('opentype'), url('fonts/custom/MadokaAlbertine-Regular.ttf')  format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaBrush';      src: url('fonts/custom/MadokaBrush-Regular.otf')      format('opentype'), url('fonts/custom/MadokaBrush-Regular.ttf')      format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaCandy';      src: url('fonts/custom/MadokaCandy-Regular.otf')      format('opentype'), url('fonts/custom/MadokaCandy-Regular.ttf')      format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaElly';       src: url('fonts/custom/MadokaElly-Regular.otf')       format('opentype'), url('fonts/custom/MadokaElly-Regular.ttf')       format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaElsaMaria';  src: url('fonts/custom/MadokaElsaMaria-Regular.otf')  format('opentype'), url('fonts/custom/MadokaElsaMaria-Regular.ttf')  format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaGertrud';    src: url('fonts/custom/MadokaGertrud-Regular.otf')    format('opentype'), url('fonts/custom/MadokaGertrud-Regular.ttf')    format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaGisela';     src: url('fonts/custom/MadokaGisela-Regular.otf')     format('opentype'), url('fonts/custom/MadokaGisela-Regular.ttf')     format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaGothic';     src: url('fonts/custom/MadokaGothic-Regular.otf')     format('opentype'), url('fonts/custom/MadokaGothic-Regular.ttf')     format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaItzli';      src: url('fonts/custom/MadokaItzli-Regular.otf')      format('opentype'), url('fonts/custom/MadokaItzli-Regular.ttf')      format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaMusical';    src: url('fonts/custom/MadokaMusical-Regular.otf')    format('opentype'), url('fonts/custom/MadokaMusical-Regular.ttf')    format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaPaper';      src: url('fonts/custom/MadokaPaper-Regular.otf')      format('opentype'), url('fonts/custom/MadokaPaper-Regular.ttf')      format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaPen';        src: url('fonts/custom/MadokaPen.otf')                format('opentype'); font-display: swap; }
  @font-face { font-family: 'MadokaPoison';     src: url('fonts/custom/MadokaPoison-Regular.otf')     format('opentype'), url('fonts/custom/MadokaPoison-Regular.ttf')     format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaRounded';    src: url('fonts/custom/MadokaRounded-Regular.otf')    format('opentype'), url('fonts/custom/MadokaRounded-Regular.ttf')    format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaRunesSerif'; src: url('fonts/custom/MadokaRunesSerif-Regular.otf') format('opentype'), url('fonts/custom/MadokaRunesSerif-Regular.ttf') format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaScript';     src: url('fonts/custom/MadokaScript-Regular.otf')     format('opentype'), url('fonts/custom/MadokaScript-Regular.ttf')     format('truetype'); font-display: swap; }
  @font-face { font-family: 'MadokaSlueika';    src: url('fonts/custom/MadokaSlueika-Regular.otf')    format('opentype'), url('fonts/custom/MadokaSlueika-Regular.ttf')    format('truetype'); font-display: swap; }

  /* ───────── palette ───────── */
  :root {
    --paper:      #e7ddc4;
    --paper-deep: #efe7d2;
    --paper-soft: #e3d8bc;
    --ink:        #211f1a;
    --ink-soft:   #423e36;
    --muted:      #6f675b;
    --rule:       #211f1a;
    --rule-soft:  #c9b988;
    --gold:       #a8782f;
    --red:        #a8362b;
    --blue:       #2a6f97;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* real aged-newsprint stock — baked from the grime sample pack
     (textures/aged-newsprint.jpg). fixed so the whole archive reads
     like one continuous printed sheet. */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url('textures/aged-newsprint.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    pointer-events: none;
    z-index: 0;
  }
  /* aged edges — darker, lightly stained corners like a handled broadsheet */
  body::after {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 98% 90% at 50% 44%, transparent 58%, rgba(64,46,22,0.17) 100%),
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(168,120,47,0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 40px 100px;
  }

  /* ───────── topbar ───────── */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
  }
  .topbar a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
  .topbar a:hover { color: var(--red); border-bottom-color: var(--red); }
  .topbar .center { letter-spacing: 0.22em; }

  /* ───────── masthead ───────── */
  .masthead {
    text-align: center;
    padding: 26px 0 16px;
    border-bottom: 3px double var(--ink);
    position: relative;
  }
  .masthead-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .masthead-title {
    font-family: 'Old London', 'UnifrakturMaguntia', serif;
    font-size: clamp(56px, 10vw, 124px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    color: var(--ink);
  }
  .masthead-sub {
    font-family: 'Playfair Display', 'Bergamasco', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--ink-soft);
    margin-top: 8px;
  }
  .masthead-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 0 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ───────── lead ───────── */
  .lede {
    max-width: 880px;
    margin: 40px auto 60px;
    text-align: center;
  }
  .lede .kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
  }
  .lede .kicker::before, .lede .kicker::after {
    content: '';
    width: 28px; height: 1px;
    background: var(--red);
  }
  .lede h1 {
    font-family: 'Playfair Display', 'Bergamasco', Georgia, serif;
    font-weight: 900;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    margin-bottom: 14px;
  }
  .lede p {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: justify;
    columns: 2;
    column-gap: 38px;
    column-rule: 1px solid rgba(33,31,26,0.25);
    margin-top: 18px;
  }
  .lede p::first-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 3.4em;
    line-height: 0.78;
    float: left;
    margin: 6px 10px 0 0;
    color: var(--ink);
  }

  /* ───────── section heads ───────── */
  .section {
    margin: 64px 0 32px;
  }
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 10px 4px;
    margin-bottom: 36px;
  }
  .section-head .num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--muted);
  }
  .section-head .name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--ink);
    letter-spacing: 0.005em;
  }
  .section-head .tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* ───────── specimen card ───────── */
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* a pinned clipping — translucent so the aged stock reads through,
     crisp uniform hairline box (no half-painted edges) */
  .specimen {
    position: relative;
    background: rgba(245,238,222,0.6);
    border: 1px solid rgba(33,31,26,0.5);
    box-shadow: 0 10px 22px -20px rgba(33,31,26,0.55);
    padding: 26px 28px 22px;
    overflow: hidden;
  }

  .spec-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(27,26,23,0.22);
    padding-bottom: 12px;
    margin-bottom: 22px;
  }
  .spec-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.005em;
    color: var(--ink);
  }
  .spec-cat {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
  }

  .spec-hero {
    font-size: clamp(48px, 8vw, 96px);
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 18px;
    word-break: break-word;
  }
  .spec-hero.smaller { font-size: clamp(36px, 6vw, 64px); }

  .spec-glyphs {
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-bottom: 16px;
    letter-spacing: 0.01em;
  }
  .spec-glyphs.tight { font-size: 18px; }

  .spec-pangram {
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 22px;
    max-width: 60ch;
  }

  .spec-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 22px;
    border-top: 1px dashed rgba(27,26,23,0.28);
    padding-top: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
  }
  .spec-foot .row { display: flex; gap: 8px; align-items: baseline; }
  .spec-foot .k {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px;
    flex: 0 0 auto;
    min-width: 64px;
  }
  .spec-foot .v {
    color: var(--ink);
    word-break: break-word;
  }
  .spec-foot a { color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue); }
  .spec-foot a:hover { color: var(--red); border-bottom-color: var(--red); }

  /* ───────── per-font sample styles ───────── */
  .f-bergamasco   { font-family: 'Bergamasco', Georgia, serif; }
  .f-saint        { font-family: 'Saint', Georgia, serif; }
  .f-royale       { font-family: 'RoyaleCouture', serif; letter-spacing: 0.02em; }
  .f-cactus       { font-family: 'Cactus Jack', cursive; }
  .f-komix        { font-family: 'Komix', 'Comic Sans MS', sans-serif; }
  .f-handwriting  { font-family: 'Handwriting', cursive; }
  .f-oldlondon    { font-family: 'Old London', 'UnifrakturMaguntia', serif; }
  .f-oldengfive   { font-family: 'Old English Five', 'UnifrakturMaguntia', serif; }
  .f-oldenglmt    { font-family: 'OldEnglMT', 'UnifrakturMaguntia', serif; }
  .f-grandmalon   { font-family: 'Grand Malon', 'Almendra Display', 'Cinzel Decorative', serif; }
  .f-legobrix     { font-family: 'LEGO Brix', 'JetBrains Mono', monospace; letter-spacing: .02em; }
  .f-spumoni      { font-family: 'Spumoni', cursive; }
  .f-damned       { font-family: 'Damned Architect', serif; }
  .f-deathnote    { font-family: 'DeathNote', serif; }
  .f-deathfont    { font-family: 'DeathFont', serif; }
  .f-deathzz      { font-family: 'DeathNoteZZ', serif; }
  .f-bleach       { font-family: 'FontBleach', serif; }
  .f-journal      { font-family: 'Journal', serif; }
  .f-mangat       { font-family: 'MangaT', sans-serif; }
  .f-pony         { font-family: 'PonyDisplay', 'Fredoka', system-ui, sans-serif; }

  .f-mk-albertine  { font-family: 'MadokaAlbertine',  serif; }
  .f-mk-brush      { font-family: 'MadokaBrush',      cursive; }
  .f-mk-candy      { font-family: 'MadokaCandy',      cursive; }
  .f-mk-elly       { font-family: 'MadokaElly',       sans-serif; }
  .f-mk-elsamaria  { font-family: 'MadokaElsaMaria',  serif; }
  .f-mk-gertrud    { font-family: 'MadokaGertrud',    serif; }
  .f-mk-gisela     { font-family: 'MadokaGisela',     serif; }
  .f-mk-gothic     { font-family: 'MadokaGothic',     'UnifrakturMaguntia', serif; }
  .f-mk-itzli      { font-family: 'MadokaItzli',      serif; }
  .f-mk-musical    { font-family: 'MadokaMusical',    cursive; }
  .f-mk-paper      { font-family: 'MadokaPaper',      sans-serif; }
  .f-mk-pen        { font-family: 'MadokaPen',        cursive; }
  .f-mk-poison     { font-family: 'MadokaPoison',     serif; }
  .f-mk-rounded    { font-family: 'MadokaRounded',    sans-serif; }
  .f-mk-runes      { font-family: 'MadokaRunesSerif', serif; }
  .f-mk-script     { font-family: 'MadokaScript',     cursive; }
  .f-mk-slueika    { font-family: 'MadokaSlueika',    serif; }

  /* pink-veil aura — distinguishes Madoka shelf from the rest of the room */
  .madoka-frame {
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(236, 99, 152, 0.10), transparent 70%),
      linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
    border-color: rgba(176, 58, 110, 0.3);
  }
  .madoka-frame .specimen {
    background: rgba(252,235,242,0.55);
    border-color: rgba(176, 58, 110, 0.4);
  }
  .madoka-frame .spec-cat { color: #b03a6e; }

  .f-playfair     { font-family: 'Playfair Display', serif; }
  .f-source       { font-family: 'Source Serif 4', Georgia, serif; }
  .f-lato         { font-family: 'Lato', system-ui, sans-serif; }
  .f-jetbrains    { font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .f-rajdhani     { font-family: 'Rajdhani', sans-serif; }
  .f-spacegrotesk { font-family: 'Space Grotesk', sans-serif; }
  .f-mrssaint     { font-family: 'Mrs Saint Delafield', cursive; }
  .f-qwitcher     { font-family: 'Qwitcher Grypen', cursive; }
  .f-unifraktur   { font-family: 'UnifrakturMaguntia', serif; }
  .f-cormorant    { font-family: 'Cormorant Garamond', Georgia, serif; }
  .f-fredoka      { font-family: 'Fredoka', system-ui, sans-serif; }
  .f-notogeo      { font-family: 'Noto Sans Georgian', sans-serif; }
  .f-notosym      { font-family: 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif; }

  /* ───────── room frame (decoration) ───────── */
  .room-frame {
    position: relative;
    border: 1px solid rgba(27,26,23,0.25);
    padding: 36px 32px 50px;
    margin: 32px 0 40px;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
  }
  .room-frame::before, .room-frame::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px;
    height: 1px;
    background: rgba(27,26,23,0.18);
  }
  .room-frame::before { top: 6px; }
  .room-frame::after  { bottom: 6px; }
  .room-corners > i {
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--ink);
  }
  .room-corners > i.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .room-corners > i.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .room-corners > i.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
  .room-corners > i.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

  /* ───────── case (the ornaments / dingbats stack) ───────── */
  .case {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    border: 1px dashed rgba(27,26,23,0.3);
    background: rgba(255,255,255,0.3);
    padding: 14px;
    margin: 32px 0 0;
  }
  .case > div {
    text-align: center;
    padding: 10px 6px;
    border: 1px solid rgba(27,26,23,0.12);
    background: var(--paper-deep);
  }
  .case .lg { font-size: 32px; line-height: 1; color: var(--ink); }
  .case .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
  }

  /* ───────── colophon ───────── */
  .colophon {
    margin-top: 80px;
    padding: 28px 0 8px;
    border-top: 3px double var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-align: center;
    line-height: 1.9;
  }
  .colophon strong { color: var(--ink); }
  .colophon a { color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue); }

  /* ───────── responsive ───────── */
  @media (max-width: 720px) {
    .page { padding: 18px 18px 80px; }
    .topbar .left, .topbar .right { display: none; }
    .specimen { padding: 22px 18px 18px; }
    .spec-foot { grid-template-columns: 1fr; }
    .spec-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .room-frame { padding: 24px 18px 36px; }
    .lede p { columns: 1; column-rule: 0; text-align: left; }
  }

  /* ───────── tiny utilities ───────── */
  .em-dash { color: var(--rule-soft); margin: 0 6px; }
  .ital { font-style: italic; }
  .uc { text-transform: uppercase; }

  /* ═══════════════════════════════════════════════════════════════
     NEWSPRINT FURNITURE
     Crisp vintage-broadsheet chrome — vertical shelf tabs, a rotated
     edition label, a classifieds/ad row, and ornamental star flanks.
     (Replaces the old hand-drawn rough.js pass; this page prints sharp.)
     ═══════════════════════════════════════════════════════════════ */
  .section-head { position: relative; }

  /* rail tabs jump to shelves — ease the scroll & keep heads off the top edge */
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  .section { scroll-margin-top: 22px; }

  /* ── vertical sidebar tabs: the broadsheet's rotated edge nav ── */
  .railnav {
    position: fixed;
    left: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .rail-tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--ink);
    color: var(--paper);
    font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 5px;
    border: 1px solid var(--ink);
    box-shadow: 2px 0 6px -2px rgba(33,31,26,0.4);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
  }
  .rail-tab:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .rail-tab.is-home { background: var(--paper-deep); color: var(--ink); }
  .rail-tab.is-home:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .rail-tab.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); padding-left: 11px; }

  /* ── right-margin rotated edition label ── */
  .edge-vol {
    position: fixed;
    right: 3px; top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    z-index: 30;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--muted);
    pointer-events: none;
  }

  /* ── classifieds / ad row ── */
  .adstrip { border-bottom: 3px double var(--ink); margin-bottom: 6px; }
  .adstrip-classified {
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    padding: 9px 8px;
    border-bottom: 1px solid var(--ink);
    background: rgba(33,31,26,0.045);
  }
  .adstrip-classified .f-jetbrains { color: var(--ink); }
  .adstrip-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--ink);
    border-top: 0;
  }
  .adcell {
    text-align: center;
    padding: 16px 14px 18px;
    border-left: 1px solid var(--ink);
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .adcell:first-child { border-left: 0; }
  a.adcell { transition: background 0.15s; }
  a.adcell:hover { background: rgba(168,54,43,0.07); }
  .adcell-stars { color: var(--gold); letter-spacing: 0.18em; font-size: 14px; }
  .adcell-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--muted);
  }
  .adcell-kicker.pink { color: #b03a6e; }
  .adcell-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.02;
    text-transform: uppercase;
  }
  a.adcell:hover .adcell-lead { color: var(--red); }
  .adcell-sub {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--ink-soft);
    max-width: 22ch;
  }

  /* ── ornamental star flank on section heads ── */
  .section-head .name::before {
    content: '✦';
    color: var(--gold);
    font-size: 0.6em;
    vertical-align: 0.2em;
    margin-right: 0.5em;
  }

  /* print: drop fixed attachment so the texture renders, hide fixed chrome */
  @media print {
    body::before { background-attachment: scroll; }
    .railnav, .edge-vol { display: none; }
  }

  /* hide the rotated rail + edition label once the margins get tight */
  @media (max-width: 900px) {
    .railnav, .edge-vol { display: none; }
  }
  @media (max-width: 620px) {
    .adstrip-row { grid-template-columns: 1fr 1fr; }
    .adcell { border-left: 0; border-top: 1px solid var(--ink); }
    .adcell:nth-child(2n) { border-left: 1px solid var(--ink); }
    .adcell:nth-child(1), .adcell:nth-child(2) { border-top: 0; }
  }