/* ── Self-hosted type (subset to Latin + №¾½×–—'' etc.) ───────────────────
       Old London — blackletter wordmark for the masthead "Stanley Tools" logo
         (freeware, Dieter Steffmann; see build/fonts/OLD_LONDON_LICENSE.txt).
       Zilla Slab — Clarendon/Egyptian slab for headings + the masthead subtitle
         (OFL), echoing the catalog's "Stanley Rule & Level Co." display.
       Spectral — body serif (OFL). Georgia stays in the fallback stack so a font
         swap reflows minimally. Mono is the system Courier stack. */
    @font-face {
      font-family: 'Old London';
      src: url('/fonts/oldlondon.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Zilla Slab';
      src: url('/fonts/zillaslab-semibold.woff2') format('woff2');
      font-weight: 600; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Zilla Slab';
      src: url('/fonts/zillaslab-bold.woff2') format('woff2');
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Spectral';
      src: url('/fonts/spectral-regular.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Spectral';
      src: url('/fonts/spectral-italic.woff2') format('woff2');
      font-weight: 400; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Spectral';
      src: url('/fonts/spectral-semibold.woff2') format('woff2');
      font-weight: 600 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Spectral';
      src: url('/fonts/spectral-semibolditalic.woff2') format('woff2');
      font-weight: 600 700; font-style: italic; font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      color-scheme: dark;
      --bg:       #151210;
      --surface:  #1f1b15;
      --surface2: #29231b;
      --surface3: #332c22;
      --border:   #3a3228;
      --accent:   #c8922a;
      --accent2:  #e8b84b;
      --text:     #e4dac8;
      --muted:    #c0ae92;
      --faint:    #9a8e78;
      --red:      #b84030;
      --green:    #507840;
      --blue:     #385880;
      --radius:   8px;
      --shadow:   0 4px 24px rgba(0,0,0,0.6);
      /* Raised brass-plate depth: a hairline top highlight + a soft cast shadow,
         so surfaces read as struck plates rather than flat boxes. */
      --shadow-plate: inset 0 1px 0 rgba(232,184,75,0.08), 0 5px 16px -7px rgba(0,0,0,0.65);
      /* ── Type scale (see docs/superpowers/specs/2026-06-06-type-scale-design.md) ── */
      --fs-3xs:     0.65rem;
      --fs-2xs:     0.70rem;
      --fs-xs:      0.75rem;
      --fs-sm:      0.85rem;
      --fs-dense:   1rem;
      --fs-body:    1.0625rem;
      --fs-lead:    1.3125rem;
      --fs-h3:      1.3125rem;
      --fs-h2:      1.75rem;
      --fs-numeral: 1.9rem;
      --fs-h1:      clamp(1.05rem, 2.4vw, 1.5rem);
      --fs-display: clamp(2.6rem, 7vw, 4.6rem);
      --font-logo:    'Old London', 'Zilla Slab', serif;
      --font-display: 'Zilla Slab', 'Georgia', serif;
      --font-body:    'Spectral', 'Georgia', serif;
      --font-mono:    'Courier New', monospace;
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.75; font-size: var(--fs-body); font-optical-sizing: auto; }
    a { color: var(--accent2); text-decoration: underline; }
    picture { display: contents; }
    p { margin-bottom: 0.8em; }

    /* ── Header (Stanley catalog masthead: notched plate + blackletter wordmark) ── */
    header {
      background:
        radial-gradient(ellipse 80% 130% at 50% 45%, rgba(200,146,42,0.10) 0%, transparent 68%),
        linear-gradient(160deg, #0a0806 0%, #1a140c 60%, #0a0806 100%);
      border-bottom: 2px solid var(--accent);
      padding: 2.8rem 1.5rem 2.6rem;
      text-align: center;
      position: relative; overflow: hidden;
    }
    /* Edge vignette: deepens the field around the plate (the plate sits at z-index 3). */
    header::after {
      content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
      box-shadow: inset 0 0 140px 28px rgba(0,0,0,0.5);
    }
    /* Notched-corner plate with a double gold rule — echoes the catalog logo box.
       The outer (gold) and inner (dark) layers share a clip; the gap is the rule. */
    /* One restrained entrance: the plate settles up into place. Transform-only (no
       opacity) so the masthead is never hidden if the animation is paused (e.g. a
       background tab) or absent; the reduced-motion guard disables it outright. */
    @keyframes mast-rise { from { transform: translateY(12px); } to { transform: none; } }
    .hplate {
      --notch: 18px;
      position: relative; z-index: 3;
      max-width: 760px; margin: 0 auto; padding: 6px;
      background: var(--accent);
      animation: mast-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
        100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%,
        0 calc(100% - var(--notch)), 0 var(--notch));
    }
    .hplate-in {
      --notch: 15px;
      padding: 1.7rem 2rem 1.85rem;
      background: linear-gradient(160deg, #171209, #241a0d);
      clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
        100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%,
        0 calc(100% - var(--notch)), 0 var(--notch));
      box-shadow: inset 0 0 0 1px rgba(200,146,42,0.5);
    }
    .hlabel {
      font-family: var(--font-mono);
      font-size: var(--fs-2xs); letter-spacing: 0.34em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 0.7rem;
    }
    /* Blackletter "Stanley Tools" wordmark — engraved inline + cast-shadow treatment */
    .hbrand {
      display: block; font-family: var(--font-logo);
      font-size: var(--fs-display); line-height: 1.02;
      color: var(--accent2); text-decoration: none; letter-spacing: 0.01em;
      text-shadow: 1px 1px 0 #0a0806, -1px -1px 0 rgba(255,243,214,0.28), 0 4px 8px rgba(0,0,0,0.6);
      transition: text-shadow 0.25s ease, color 0.25s ease;
    }
    /* Hover: the wordmark warms with a soft gilt glow (it links home) */
    .hbrand:hover, .hbrand:focus-visible {
      color: var(--accent2); text-decoration: none;
      text-shadow: 1px 1px 0 #0a0806, -1px -1px 0 rgba(255,243,214,0.42), 0 0 20px rgba(232,184,75,0.38);
    }
    /* Page title in the Clarendon slab — the catalog's "Stanley Rule & Level Co." voice */
    header h1 {
      font-family: var(--font-display); font-weight: 700;
      font-size: var(--fs-h1); letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text); line-height: 1.3; margin: 0.95rem 0 0;
    }
    header p {
      color: var(--muted); font-size: var(--fs-dense); max-width: 560px;
      margin: 0.85rem auto 0; font-family: var(--font-body);
    }

    /* ── Nav ──────────────────────────────────── */
    /* ── Sidebar nav (wide screens) ──────────── */
    nav {
      position: fixed; left: 0; top: 0;
      width: 240px; height: 100vh;
      background: var(--surface); border-right: 1px solid var(--border);
      box-shadow: 2px 0 12px rgba(0,0,0,0.45);
      z-index: 200; display: flex; flex-direction: column;
      overflow: hidden;
    }
    .sidebar-brand {
      padding: 1.35rem 1.25rem 1rem;
      border-bottom: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      flex-shrink: 0;
    }
    .sidebar-brand-title {
      display: block; font-family: 'Courier New', monospace;
      font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent2); margin-bottom: 0.2rem;
    }
    .sidebar-brand-sub {
      display: block; font-family: 'Courier New', monospace;
      font-size: var(--fs-3xs); letter-spacing: 0.06em; color: var(--faint);
    }
    .nav-links {
      display: flex; flex-direction: column;
      overflow-y: auto; flex: 1; padding: 0.5rem 0;
    }
    .nav-group-label {
      font-family: 'Courier New', monospace; font-size: var(--fs-3xs);
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--faint); padding: 0.9rem 1.25rem 0.6rem;
      flex-shrink: 0;
    }
    .nav-group-label:first-child { padding-top: 0.5rem; }
    .nav-divider {
      height: 1px; background: var(--border);
      margin: 0.5rem 1.25rem;
      flex-shrink: 0;
    }
    nav a {
      font-family: 'Courier New', monospace; font-size: var(--fs-xs);
      letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--muted); padding: 0.6rem 1.25rem; white-space: nowrap;
      border-left: 2px solid transparent; display: flex; align-items: center;
      min-height: 44px; text-decoration: none;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    nav a:hover {
      color: var(--accent2); border-left-color: var(--accent2);
      background: var(--surface2); text-decoration: none;
    }
    nav a.nav-active {
      color: var(--accent2); border-left-color: var(--accent2);
      background: var(--surface2);
    }

    /* Hamburger — hidden on wide screens */
    .nav-hamburger { display: none; }

    /* ── Content offset for sidebar ──────────── */
    #layout-wrap { margin-left: 240px; }

    /* ── Mobile nav (≤768px) ──────────────────── */
    @media (max-width: 768px) {
      #layout-wrap { margin-left: 0; }
      nav {
        position: sticky; width: 100%; height: auto;
        flex-direction: column; border-right: none;
        border-bottom: 1px solid var(--border); overflow: visible;
      }
      .sidebar-brand { display: none; }
      .nav-hamburger {
        display: flex; align-items: center; gap: 0.65rem;
        background: none; border: none; cursor: pointer;
        color: var(--muted); padding: 0.9rem 1.25rem;
        font-family: 'Courier New', monospace; font-size: var(--fs-xs);
        letter-spacing: 0.05em; text-transform: uppercase;
        width: 100%; text-align: left; transition: color 0.15s;
        min-height: 44px;
      }
      .nav-hamburger:hover { color: var(--accent2); }
      .ham-close { display: none; }
      nav.nav-open .ham-icon  { display: none; }
      nav.nav-open .ham-close { display: block; }
      .nav-links {
        display: none; flex-direction: column; align-items: stretch;
        border-top: 1px solid var(--border);
        max-height: 65vh; overflow-y: auto; padding: 0;
      }
      nav.nav-open .nav-links { display: flex; }
      .nav-links a {
        padding: 0.8rem 1.25rem; border-left: 2px solid transparent;
        border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
        min-height: 44px; display: flex; align-items: center;
      }
      .nav-links a:last-child { border-bottom: none; }
      .nav-links a:hover { border-left-color: var(--accent2); background: var(--surface2); }
      .nav-links a.nav-active { color: var(--accent2); border-left-color: var(--accent2); background: var(--surface2); }
      .nav-group-label { display: none; }
      .nav-divider { display: none; }
    }

    /* ── Layout ───────────────────────────────── */
    main { max-width: clamp(700px, 90%, 1400px); margin: 0 auto; padding: 2.5rem 2rem; }
    section { margin-bottom: 4.5rem; }
    h2 {
      font-family: var(--font-display); font-optical-sizing: auto;
      font-size: var(--fs-h2); font-weight: 600; color: var(--accent2);
      border-left: 3px solid var(--accent); padding-left: 0.75rem;
      margin-bottom: 1.5rem; letter-spacing: 0; line-height: 1.15;
    }
    h3 { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h3); font-weight: 600; color: var(--accent); margin-bottom: 0.4rem; }

    /* ── Cards & Grids ────────────────────────── */
    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
    .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
    @media(max-width:900px){ .grid3,.grid4{grid-template-columns:1fr 1fr;} }
    @media(max-width:600px){ .grid2,.grid3,.grid4{grid-template-columns:1fr;} }

    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.15rem 1.35rem;
      box-shadow: var(--shadow-plate);
    }
    .card p { color: var(--text); font-size: var(--fs-dense); }
    /* Link cards (related, sources) lift like the size cards do */
    a.card { display: block; text-decoration: none; color: inherit;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
    a.card:hover { border-color: var(--accent2); transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(232,184,75,0.10), var(--shadow); }

    /* ── Callout box ──────────────────────────── */
    .callout {
      background: var(--surface2); border-left: 3px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: var(--fs-dense);
      color: var(--muted);
    }
    .callout strong { color: var(--accent2); }

    /* ── Fact cards ───────────────────────────── */
    .fact-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.1rem 1.3rem;
      display: flex; gap: 1rem; align-items: flex-start;
    }
    .fact-num {
      font-family: 'Courier New', monospace; font-size: var(--fs-numeral);
      color: var(--faint); line-height: 1; flex-shrink: 0; min-width: 2rem;
    }
    .fact-body h3 { color: var(--accent2); font-size: var(--fs-dense); margin-bottom: 0.25rem; }
    .fact-body p { color: var(--muted); font-size: var(--fs-dense); margin: 0; }

    /* ── Timeline ─────────────────────────────── */
    .tl-wrap {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.25rem 1.5rem;
    }
    .tl-track { position: relative; height: 38px; margin-top: 0.75rem; }
    .tl-seg {
      position: absolute; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-3xs); font-weight: bold;
      color: rgba(0,0,0,0.75); cursor: pointer;
      transition: filter 0.15s; border-radius: 2px; overflow: hidden;
      border-right: 1px solid rgba(0,0,0,0.2);
    }
    .tl-seg:hover { filter: brightness(1.25); }
    .tl-labels {
      display: flex; justify-content: space-between;
      font-family: 'Courier New', monospace; font-size: var(--fs-3xs);
      color: var(--muted); margin-top: 0.4rem;
    }
    .tl-legend {
      display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem;
    }
    .tl-legend-item {
      display: flex; align-items: center; gap: 0.35rem;
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs); color: var(--muted);
    }
    .tl-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

    /* ── Search / Filter ──────────────────────── */
    .search-row {
      display: flex; gap: 0.75rem; flex-wrap: wrap;
      align-items: center; margin-bottom: 1.75rem;
    }
    .search-row input {
      flex: 1; min-width: 200px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); color: var(--text);
      padding: 0.55rem 0.95rem; font-size: var(--fs-dense); font-family: inherit;
      outline: none; transition: border-color 0.15s;
    }
    .search-row input:focus { border-color: var(--accent); }
    .search-row input::placeholder { color: var(--faint); }
    .era-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .era-btn {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      padding: 0.28rem 0.65rem; border-radius: 20px;
      border: 1px solid var(--border); background: transparent;
      color: var(--muted); cursor: pointer; transition: all 0.15s;
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .era-btn:hover, .era-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
    .count-lbl { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--faint); }

    /* ── Type Cards ───────────────────────────── */
    .types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.2rem; }
    .type-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .type-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
    .type-card.hidden { display: none; }

    .card-hdr {
      padding: 1rem 1.2rem 0.65rem; display: flex;
      align-items: flex-start; gap: 0.9rem; cursor: pointer; user-select: none;
    }
    .tnum {
      font-family: 'Courier New', monospace; font-size: var(--fs-numeral);
      font-weight: bold; line-height: 1; min-width: 2.4rem; text-align: center;
    }
    .cmeta { flex: 1; min-width: 0; }
    .cname { font-size: var(--fs-dense); color: var(--accent2); line-height: 1.3; margin-bottom: 0.1rem; }
    .cdates { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--muted); }
    .cera { font-size: var(--fs-xs); font-style: italic; color: var(--faint); }
    .ctoggle { font-size: var(--fs-dense); color: var(--faint); transition: transform 0.2s; margin-top: 0.2rem; flex-shrink: 0; }
    .type-card.expanded .ctoggle { transform: rotate(180deg); }

    .csummary { padding: 0 1.2rem 0.75rem; font-size: var(--fs-dense); color: var(--muted); font-style: italic; line-height: 1.5; }

    .cbody { display: none; padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--border); }
    .type-card.expanded .cbody { display: block; }

    .fcat {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--accent); margin-top: 0.8rem; margin-bottom: 0.2rem;
    }
    .flist { list-style: none; }
    .flist li {
      font-size: var(--fs-dense); color: var(--muted);
      padding: 0.22rem 0 0.22rem 1.1rem; position: relative;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .flist li::before { content: '›'; position: absolute; left: 0; color: var(--accent); }
    .flist li em { color: var(--text); font-style: normal; }

    /* Era border accent */
    .era-boston  { border-top: 3px solid #9a5022; }
    .era-early   { border-top: 3px solid #7a5818; }
    .era-lateral { border-top: 3px solid #226050; }
    .era-sweet   { border-top: 3px solid #48387a; }
    .era-war     { border-top: 3px solid #7a2820; }
    .era-postwar { border-top: 3px solid #204858; }
    .era-modern  { border-top: 3px solid #283878; }

    .n-boston  { color: #c07040; }
    .n-early   { color: #b09040; }
    .n-lateral { color: #50a888; }
    .n-sweet   { color: #9880d0; }
    .n-war     { color: #d87868; }
    .n-postwar { color: #50a0c0; }
    .n-modern  { color: #8098e0; }

    /* ── Table ────────────────────────────────── */
    .tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
    table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    thead th {
      background: var(--surface2); color: var(--accent);
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; }
    tbody tr:hover { background: var(--surface2); cursor: pointer; }
    tbody td { padding: 0.5rem 0.9rem; color: var(--muted); vertical-align: middle; }
    td.mono { font-family: 'Courier New', monospace; }
    td.bold { font-weight: bold; font-family: 'Courier New', monospace; font-size: var(--fs-dense); }
    td.hi { color: var(--text); }
    .era-tag {
      display: inline-block; padding: 0.12rem 0.45rem; border-radius: 3px;
      font-size: var(--fs-2xs); font-family: 'Courier New', monospace; white-space: nowrap;
    }

    /* ── Quick-ref card mode (≤680px) ───────────── */
    @media (max-width: 680px) {
      #refTable thead { display: none; }
      .tbl-wrap:has(#refTable) { border: none; background: none; overflow-x: visible; }
      #refTable { display: block; }
      #refTable tbody { display: flex; flex-direction: column; gap: 0.65rem; }
      #refTable tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); overflow: hidden;
        cursor: pointer; transition: border-color 0.15s;
      }
      #refTable tbody tr:hover { border-color: var(--accent); }
      #refTable tbody td {
        padding: 0.45rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04);
        display: flex; flex-direction: column; gap: 0.1rem;
      }
      #refTable tbody td::before {
        content: attr(data-label);
        font-family: 'Courier New', monospace; font-size: var(--fs-3xs);
        text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint);
      }
      /* Type number: full-width header row */
      #refTable tbody td:nth-child(1) {
        grid-column: 1 / -1; flex-direction: row; align-items: baseline;
        gap: 0.75rem; background: var(--surface2);
        font-size: var(--fs-dense); padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--border);
      }
      #refTable tbody td:nth-child(1)::before { font-size: 0; } /* hide label for type # */
      /* Years: inline with type # */
      #refTable tbody td:nth-child(2) {
        grid-column: 1 / -1; flex-direction: row; align-items: center;
        gap: 0.6rem; padding: 0.45rem 0.85rem;
        background: var(--surface2); border-bottom: 1px solid var(--border);
      }
      #refTable tbody td:nth-child(2)::before { font-size: var(--fs-3xs); }
      /* Era */
      #refTable tbody td:nth-child(3) { grid-column: 1 / -1; }
      /* Lateral Lever */
      #refTable tbody td:nth-child(4) { grid-column: 1 / -1; font-size: var(--fs-sm); }
      /* Frog Receiver */
      #refTable tbody td:nth-child(5) { grid-column: 1 / -1; font-size: var(--fs-sm); }
      /* Key ID */
      #refTable tbody td:nth-child(6) {
        grid-column: 1 / -1; font-size: var(--fs-sm); border-bottom: none;
      }
    }

    /* ── Feature Index ────────────────────────── */
    .fi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.7rem; }
    .fi-item {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.65rem 0.9rem;
    }
    .fi-item strong { display: block; color: var(--text); font-size: var(--fs-sm); margin-bottom: 0.15rem; }
    .fi-item span { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--accent); }

    /* ── Plane Sizes ──────────────────────────── */
    .size-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.9rem 1.1rem;
      display: flex; flex-direction: column;
    }
    a.size-card { text-decoration: none; color: inherit; cursor: pointer;
      transition: border-color 0.15s, transform 0.15s; }
    a.size-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
    a.size-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .size-card-img {
      width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
      border-radius: calc(var(--radius) - 2px);
      margin-bottom: 0.75rem;
      background: var(--surface2);
    }
    .size-card .snum { font-family: 'Courier New', monospace; font-size: var(--fs-h3); color: var(--accent2); font-weight: bold; }
    .size-card .sname { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.4rem; }
    .size-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
    .spec-pill {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 3px; padding: 0.1rem 0.35rem; color: var(--muted);
    }
    .size-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

    /* ── Bedrock ──────────────────────────────── */
    .bedrock-intro {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
    }
    .bedrock-intro p { color: var(--muted); font-size: var(--fs-dense); }
    .br-type {
      background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid var(--blue);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 0.75rem 1rem; margin-bottom: 0.6rem;
    }
    .br-type h3 { color: var(--accent2); font-size: var(--fs-dense); margin-bottom: 0.25rem; }
    .br-type p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

    /* ── Trademark stamps ─────────────────────── */
    .stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
    .stamp-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.9rem 1.1rem;
    }
    .stamp-id { font-family: 'Courier New', monospace; font-size: var(--fs-dense); color: var(--accent2); font-weight: bold; }
    .stamp-dates { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--muted); }
    .stamp-desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.25rem; }
    .stamp-img {
      width: 100%; height: 100px; object-fit: contain;
      margin-bottom: 0.75rem; border-radius: calc(var(--radius) - 2px);
      background: #3e3e3e; padding: 6px; display: block;
    }

    /* ── Prices ───────────────────────────────── */
    .price-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem; margin: 1.5rem 0;
    }
    .price-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.2rem 1.25rem;
    }
    .pc-header { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
    .pc-size {
      font-size: var(--fs-h3); font-weight: 700; color: var(--accent2);
      font-family: 'Courier New', monospace; text-decoration: none;
    }
    a.pc-size:hover { text-decoration: underline; }
    .pc-name { font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
    .pc-sales { font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.75rem; }
    .pc-tiers {
      border-top: 1px solid var(--border); padding-top: 0.65rem;
      display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.65rem;
    }
    .pc-tier { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); }
    .pc-tier-label { color: var(--muted); }
    .pc-tier-price { font-family: 'Courier New', monospace; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
    .pc-stats {
      border-top: 1px solid var(--border); padding-top: 0.55rem;
      display: flex; gap: 1.2rem; font-size: var(--fs-xs); color: var(--faint);
    }
    .pc-stat-val { color: var(--muted); font-family: 'Courier New', monospace; }
    .pc-note { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--faint); font-style: italic; line-height: 1.5; }
    .price-attr { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--faint); }
    .price-attr a { color: var(--muted); }

    /* ── Sources ──────────────────────────────── */
    .src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
    .src-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1rem 1.2rem;
    }
    .src-card h3 { color: var(--accent2); font-size: var(--fs-dense); margin-bottom: 0.3rem; }
    .src-card p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.45rem; }
    .src-card a { font-family: 'Courier New', monospace; font-size: var(--fs-2xs); color: var(--accent); word-break: break-all; }

    /* ── Resources ───────────────────────────── */
    .res-section { margin-bottom: 2rem; }
    .res-cat-label {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint);
      border-bottom: 1px solid var(--border); padding-bottom: 0.4rem;
      margin-bottom: 0.85rem;
    }
    .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.85rem; }
    .res-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1rem 1.2rem;
    }
    .res-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
    .res-card h3 { color: var(--accent2); font-size: var(--fs-dense); margin: 0; }
    .res-refs {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      color: var(--faint); white-space: nowrap; padding-top: 0.1rem;
    }
    .res-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0.25rem 0 0.45rem; line-height: 1.55; }
    .res-card a { font-family: 'Courier New', monospace; font-size: var(--fs-2xs); color: var(--accent); word-break: break-all; }

    /* ── Footer ───────────────────────────────── */
    footer {
      background: var(--surface); border-top: 1px solid var(--border);
      text-align: center; padding: 2rem; font-size: var(--fs-sm); color: var(--muted);
    }
    footer p { margin-bottom: 0.3rem; }
    footer a { display: inline-block; padding: 0.3rem 0.15rem; }

    /* ── Misc ─────────────────────────────────── */
    .no-results { text-align: center; color: var(--muted); padding: 3rem; font-style: italic; display: none; }
    .section-intro { color: var(--muted); font-size: var(--fs-lead); margin-bottom: 1.35rem; max-width: 68ch; }
    .card p { max-width: 60ch; }
    /* Primary article prose: 17px, brighter --text, ~70ch measure — applied to ALL
       pages (core + site). Excludes component paragraphs (.section-intro lead,
       .price-attr caption, .callout) so they keep their own scale. */
    #main-content section > p:not(.callout):not(.section-intro):not(.price-attr) {
      font-size: var(--fs-body); color: var(--text); max-width: 70ch;
    }
    #main-content .flist li { font-size: var(--fs-dense); max-width: 70ch; }
    .loading-hint {
      padding: 2.5rem 1rem; text-align: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-xs);
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--faint);
    }

    /* ── Skip link ───────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; left: 0; z-index: 9999;
      background: var(--accent); color: #000;
      padding: 0.5rem 1rem; font-family: 'Courier New', monospace; font-size: var(--fs-dense);
      border-radius: 0 0 var(--radius) 0; text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    /* ── Focus indicators ────────────────────── */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
    nav a:focus-visible { outline-offset: -3px; }

    /* ── Identification Wizard ───────────────── */
    #wizard { max-width: 720px; }

    .wiz-progress-wrap {
      height: 4px; background: var(--surface2); border-radius: 2px;
      margin-bottom: 1.5rem; overflow: hidden;
    }
    .wiz-progress-bar {
      height: 100%; background: var(--accent);
      border-radius: 2px; width: 0%;
      transition: width 0.35s ease;
    }

    .wiz-trail {
      display: flex; flex-wrap: wrap; gap: 0.35rem;
      min-height: 1.6rem; margin-bottom: 1.25rem;
    }
    .wiz-crumb {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      padding: 0.15rem 0.55rem; border-radius: 20px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--faint); white-space: nowrap;
    }
    .wiz-crumb-ans { color: var(--accent); border-color: var(--accent); }

    .wiz-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.75rem 2rem;
      margin-bottom: 1rem;
    }
    .wiz-q-num {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--faint); margin-bottom: 0.6rem;
    }
    .wiz-q-text {
      font-size: var(--fs-h3); color: var(--text); line-height: 1.5;
      margin-bottom: 0.5rem; max-width: 56ch;
    }
    .wiz-q-hint {
      font-size: var(--fs-sm); color: var(--faint); font-style: italic;
      margin-bottom: 1.5rem; line-height: 1.55; max-width: 56ch;
    }
    .wiz-choices {
      display: flex; flex-direction: column; gap: 0.55rem;
    }
    .wiz-choice {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.85rem 1.1rem;
      cursor: pointer; display: flex; align-items: center; gap: 0.85rem;
      transition: border-color 0.15s, background 0.15s;
      text-align: left; width: 100%; font-family: inherit;
      color: var(--text); font-size: var(--fs-dense); line-height: 1.4;
    }
    .wiz-choice:hover { border-color: var(--accent); background: var(--surface3); }
    .wiz-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .wiz-choice-icon {
      font-family: 'Courier New', monospace; font-size: var(--fs-xs);
      color: var(--accent); border: 1px solid var(--border);
      border-radius: 3px; padding: 0.1rem 0.4rem;
      background: var(--surface); flex-shrink: 0; white-space: nowrap;
    }

    .wiz-result {
      background: var(--surface2); border: 1px solid var(--accent);
      border-radius: var(--radius); padding: 2rem;
      text-align: center; margin-bottom: 1rem;
    }
    .wiz-result-label {
      font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
      letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--faint); margin-bottom: 0.5rem;
    }
    .wiz-result-type {
      font-family: 'Courier New', monospace; font-size: 3rem;
      font-weight: bold; color: var(--accent2); line-height: 1;
      margin-bottom: 0.4rem;
    }
    .wiz-result-name {
      font-size: var(--fs-h3); color: var(--accent); margin-bottom: 0.3rem;
    }
    .wiz-result-years {
      font-family: 'Courier New', monospace; font-size: var(--fs-sm);
      color: var(--muted); margin-bottom: 0.9rem;
    }
    .wiz-result-summary {
      font-size: var(--fs-dense); color: var(--muted); line-height: 1.6;
      max-width: 520px; margin: 0 auto 1.5rem; font-style: italic;
    }
    .wiz-result-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
    .wiz-btn-primary {
      background: var(--accent); color: #000; border: none;
      border-radius: var(--radius); padding: 0.6rem 1.4rem;
      font-family: 'Courier New', monospace; font-size: var(--fs-sm);
      cursor: pointer; text-decoration: none; font-weight: bold;
      min-height: 44px; display: inline-flex; align-items: center;
      transition: background 0.15s;
    }
    .wiz-btn-primary:hover { background: var(--accent2); text-decoration: none; color: #000; }
    .wiz-btn-secondary {
      background: transparent; color: var(--muted);
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 0.6rem 1.4rem; font-family: 'Courier New', monospace;
      font-size: var(--fs-sm); cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .wiz-btn-secondary:hover { border-color: var(--muted); color: var(--text); }

    .wiz-controls {
      display: flex; gap: 0.75rem; align-items: center;
    }
    .wiz-back, .wiz-restart {
      background: transparent; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.45rem 1rem;
      font-family: 'Courier New', monospace; font-size: var(--fs-xs);
      color: var(--muted); cursor: pointer;
      min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
      transition: border-color 0.15s, color 0.15s;
    }
    .wiz-back:hover:not(:disabled), .wiz-restart:hover {
      border-color: var(--muted); color: var(--text);
    }
    .wiz-back:disabled { opacity: 0.35; cursor: default; }

    @media(max-width:600px) {
      .wiz-panel { padding: 1.25rem 1.1rem; }
      .wiz-q-text { font-size: var(--fs-dense); }
    }

    /* ── Back to top ─────────────────────────── */
    #back-to-top {
      position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 500;
      width: 2.75rem; height: 2.75rem;
      background: var(--accent); border: none;
      border-radius: 50%; color: #000;
      display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-h3); font-weight: bold; cursor: pointer;
      opacity: 0; pointer-events: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      transition: opacity 0.2s, background 0.15s, transform 0.15s;
    }
    #back-to-top.visible { opacity: 1; pointer-events: auto; }
    #back-to-top:hover { background: var(--accent2); transform: translateY(-2px); }

    /* ── Card header as button ───────────────── */
    button.card-hdr {
      width: 100%; text-align: left; background: none; border: none;
      cursor: pointer; font-family: inherit; color: inherit;
    }
    button.card-hdr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius) var(--radius) 0 0; }

    /* ── Hero image ──────────────────────────── */
    .hero-img {
      width: 100%; max-height: 220px; object-fit: cover;
      border-radius: var(--radius); margin-top: 1.5rem;
      border: 1px solid var(--border); display: block;
    }

    /* ── Card image thumbnails ───────────────── */
    .img-row { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 0 0.25rem; }
    button.img-thumb {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      flex: 1; min-width: 110px; max-width: 190px;
      padding: 0; display: flex; flex-direction: column;
      transition: border-color 0.15s;
    }
    button.img-thumb:hover { border-color: var(--accent); }
    button.img-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    button.img-thumb img { width: 100%; height: 130px; object-fit: cover; display: block; }
    .img-cap { font-size: var(--fs-2xs); color: var(--muted); padding: 0.3rem 0.45rem; text-align: left; line-height: 1.3; }

    /* ── Lightbox ────────────────────────────── */
    .lb-overlay {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.93); align-items: center; justify-content: center;
    }
    .lb-overlay.open { display: flex; }
    .lb-inner { position: relative; max-width: 92vw; }
    .lb-img { max-width: 92vw; max-height: 82vh; display: block; border-radius: var(--radius); }
    .lb-cap { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: 0.5rem; max-width: 600px; }
    .lb-close {
      position: absolute; top: -2.75rem; right: 0;
      background: none; border: none; color: var(--text); font-size: var(--fs-numeral);
      cursor: pointer; line-height: 1; padding: 0;
      min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    }
    .lb-close:focus-visible { outline: 2px solid var(--accent); border-radius: 3px; }
    .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.55); border: 1px solid var(--border);
      color: var(--text); font-size: var(--fs-numeral); cursor: pointer;
      padding: 0.4rem 0.7rem; border-radius: var(--radius); display: none;
      min-width: 44px; min-height: 44px; text-align: center;
    }
    .lb-nav:focus-visible { outline: 2px solid var(--accent); }
    .lb-nav.prev { left: -3.25rem; }
    .lb-nav.next { right: -3.25rem; }
    @media(max-width:600px) { .lb-nav { display: none !important; } }

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

    /* ── Nav collapse toggle tab ─────────────────────── */
    .nav-toggle-tab {
      position: fixed; top: 50%; left: 240px;
      transform: translateY(-50%);
      z-index: 201;
      background: var(--surface); border: 1px solid var(--border); border-left: none;
      border-radius: 0 6px 6px 0;
      width: 44px; height: 52px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--faint); padding: 0;
      box-shadow: 2px 0 8px rgba(0,0,0,0.35);
    }
    .nav-toggle-tab:hover { color: var(--accent2); background: var(--surface2); }
    .nav-toggle-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .nav-toggle-tab svg { transition: transform 0.25s ease; flex-shrink: 0; }

    /* Smooth transitions — enabled by JS after initial state restore */
    body.nav-animate #layout-wrap { transition: margin-left 0.25s ease; }
    body.nav-animate nav { transition: left 0.25s ease; }
    body.nav-animate .nav-toggle-tab { transition: left 0.25s ease, color 0.15s, background 0.15s; }

    /* Collapsed state */
    body[data-nav-collapsed="true"] #layout-wrap { margin-left: 0; }
    body[data-nav-collapsed="true"] nav { left: -240px; }
    body[data-nav-collapsed="true"] .nav-toggle-tab { left: 0; }
    body[data-nav-collapsed="true"] .nav-toggle-tab svg { transform: rotate(180deg); }

    @media (max-width: 768px) { .nav-toggle-tab { display: none; } }
  
/* ── Breadcrumb (shared component) ─────── */
.breadcrumb { position:static; width:auto; height:auto; min-height:0;
  display:flex; flex-flow:row wrap; align-items:center; gap:0.15rem 0.45rem;
  background:var(--surface2); border:none; border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; box-shadow:none; overflow:visible;
  padding:0.55rem 0.95rem; margin:0 0 1.85rem;
  font-family:'Courier New',monospace; font-size:var(--fs-2xs); letter-spacing:0.07em;
  text-transform:uppercase; color:var(--faint); }
.breadcrumb a, .breadcrumb span:not([aria-hidden]) { white-space:nowrap; }
.breadcrumb a { display:inline; padding:0; min-height:0; border:none;
  color:var(--muted); text-decoration:none; transition:color 0.15s; }
.breadcrumb a:hover { color:var(--accent2); text-decoration:underline; }
.breadcrumb span[aria-hidden="true"] { display:none; }
.breadcrumb a::before,
.breadcrumb span:not([aria-hidden])::before { content:"\203A"; display:inline-block;
  width:1.1em; color:var(--faint); font-weight:normal; }
.breadcrumb a:first-child::before { content:""; }
.breadcrumb span:not([aria-hidden]) { color:var(--accent2); font-weight:bold; }