:root {
    --wood-0: #120c08;
    --wood-1: #1c130d;
    --wood-2: #2b1d13;
    --wood-edge: #3e2b1c;
    --velvet-0: #0f1a15;
    --velvet-1: #18291f;
    --paper-0: #f5ecd8;
    --paper-1: #e8d9b9;
    --ink: #2b1e13;
    --ink-soft: #6b5640;
    --cream: #efe3c8;
    --cream-soft: #b8a689;
    --brass: #c9a14a;
    --brass-hi: #ecc96f;
    --brass-lo: #7d5f24;
    --fancy: #b998f5;
    --fancy-lo: #6e4fb3;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "P052", "URW Palladio L", "Book Antiqua", Georgia, serif;
    --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    min-height: 100vh;
    color: var(--cream);
    font-family: var(--serif);
    line-height: 1.5;
    background-color: var(--wood-0);
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 161, 74, .14), transparent 70%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 9px),
      linear-gradient(180deg, var(--wood-1), var(--wood-0) 60%);
    background-attachment: fixed;
  }
  a { color: var(--brass-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: #fff1c9; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- masthead ---------- */
  .wrap { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
  .masthead { padding: 28px 0 18px; }
  .eyebrow {
    margin: 0 0 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cream-soft);
  }
  h1 {
    margin: 0; font-weight: 400; line-height: 1.02; letter-spacing: -.01em;
    font-size: clamp(2.1rem, 5vw, 3.7rem);
  }
  h1 em { color: var(--brass-hi); }
  .lede { max-width: 80ch; margin: 12px 0 0; color: #dccdb0; font-size: 1.06rem; }

  .toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wood-edge);
  }
  .btn-pull {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 11px 20px 11px 16px; border: 1px solid #f2d68c; border-radius: 999px;
    background: linear-gradient(180deg, #f0cf7a, #c49638);
    color: #24170a; font-size: 1rem; font-weight: 600; letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 6px 18px -6px rgba(236, 201, 111, .55);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-pull:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 24px -8px rgba(236,201,111,.7); }
  .btn-pull:active { transform: translateY(0); }
  .btn-pull svg { width: 20px; height: 20px; }
  .switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: #dccdb0; font-size: .95rem; user-select: none; }
  .switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 38px; height: 22px; border-radius: 999px; cursor: pointer;
    background: #3a2a1c; border: 1px solid #5a4430; position: relative; transition: background .2s, border-color .2s; flex: none; }
  .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--cream-soft); transition: transform .2s, background .2s; }
  .switch input:checked { background: var(--brass-lo); border-color: var(--brass); }
  .switch input:checked::after { transform: translateX(16px); background: var(--brass-hi); }
  .switch.fancy input:checked { background: var(--fancy-lo); border-color: var(--fancy); }
  .switch.fancy input:checked::after { background: #e6d8ff; }
  .progress { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--cream-soft); margin-left: auto; margin-right: 10px; }

  .legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; font-size: .9rem; color: var(--cream-soft); }
  .legend span { display: inline-flex; align-items: center; gap: 8px; }
  .legend svg { width: 44px; height: 10px; flex: none; }

  /* ---------- layout ---------- */
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 24px; align-items: start; padding-bottom: 32px; }

  /* the velvet-backed board inside a walnut frame */
  .board {
    position: relative; padding: 34px 22px 24px; border-radius: 6px;
    background:
      radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .05), transparent 60%),
      repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 4px),
      linear-gradient(180deg, var(--velvet-1), var(--velvet-0));
    border: 10px solid var(--wood-2);
    box-shadow: 0 0 0 1px #4a3422, inset 0 0 0 1px rgba(0,0,0,.6), inset 0 18px 40px -10px rgba(0,0,0,.65), 0 30px 60px -30px rgba(0,0,0,.9);
  }
  .cabinet {
    list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 34px 18px;
  }
  .cabinet li { display: flex; }
  .strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible;
    filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .6)); }

  /* ---------- specimen cards ---------- */
  .specimen {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
    padding: 14px 12px 14px; border: 0; border-radius: 3px; gap: 5px; cursor: pointer; text-align: center;
    color: var(--ink); background: linear-gradient(180deg, var(--paper-0), var(--paper-1));
    transform: rotate(var(--tilt, 0deg));
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 3px rgba(0,0,0,.45), 0 14px 26px -14px rgba(0,0,0,.9);
    transition: opacity .35s ease, filter .35s ease, box-shadow .2s ease;
  }
  .specimen::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(43, 30, 19, .22); border-radius: 2px; pointer-events: none; }
  .specimen:hover { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 2px rgba(236,201,111,.55), 0 18px 30px -14px rgba(0,0,0,.95); }
  .specimen:focus-visible { outline-offset: 5px; }
  .specimen { scroll-margin-top: 22px; }
  .pin {
    position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c4, var(--brass) 45%, var(--brass-lo) 100%);
    box-shadow: 0 2px 3px rgba(0,0,0,.6);
  }
  .tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  .date { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #7a5a2a; }
  .icon { display: block; width: 48px; height: 48px; margin: 2px 0 0; color: #4a3523; }
  .icon svg, .l-icon svg, .end svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .name { font-size: 1.06rem; line-height: 1.15; font-weight: 600; }
  .teaser { margin-top: 2px; font-size: .84rem; line-height: 1.35; color: #5a4632; font-style: italic; }

  .specimen.is-selected { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 30px rgba(236,201,111,.35), 0 18px 30px -14px rgba(0,0,0,.95); }
  .specimen[data-link="fact"] { box-shadow: 0 0 0 2px rgba(236,201,111,.8), 0 14px 26px -14px rgba(0,0,0,.9); }
  .specimen[data-link="fancy"] { box-shadow: 0 0 0 2px rgba(185,152,245,.85), 0 14px 26px -14px rgba(0,0,0,.9); }
  .specimen.is-dim { opacity: .34; filter: saturate(.4) brightness(.75); }
  .specimen.is-dim:hover { opacity: .75; }
  .specimen.is-dim:focus-visible { opacity: 1; filter: none; }

  /* ---------- strings ---------- */
  .string .line { fill: none; stroke-linecap: round; }
  .string.fact .line { stroke: var(--brass-hi); stroke-width: 2.6; }
  .string.fancy .line { stroke: var(--fancy); stroke-width: 3.6; stroke-dasharray: .1 7.5; }
  .string .knot { stroke: rgba(0,0,0,.55); stroke-width: 1; }
  .string.fact .knot { fill: var(--brass-hi); }
  .string.fancy .knot { fill: var(--fancy); }
  .string.faint { opacity: .26; }
  .string.preview { opacity: .6; }
  /* a string whose other end is pinned in another cabinet ends at a luggage tag on the board edge */
  .far-tag rect { fill: var(--paper-0, #efe3c6); stroke: rgba(0,0,0,.5); stroke-width: 1; }
  .far-tag text { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; fill: #3a2a1b; }
  .end.far { text-decoration: none; color: #2a1d12; }

  /* ---------- ledger ---------- */
  .ledger {
    position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; overscroll-behavior: contain;
    border-radius: 6px; border: 1px solid var(--wood-edge);
    background: linear-gradient(180deg, #22180f, #18110b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 50px -30px rgba(0,0,0,.9);
  }
  .ledger-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
  .ledger-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-soft); }
  .ledger-close { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--wood-edge); background: transparent; cursor: pointer; color: var(--cream-soft); font-size: 1.2rem; line-height: 1; }
  .ledger-close:hover { color: var(--cream); border-color: var(--brass-lo); }
  .ledger.has-sel .ledger-close { display: inline-flex; }
  .ledger-body { padding: 8px 22px 24px; }
  .ledger-body h2 { margin: 6px 0 12px; font-weight: 400; font-size: 1.7rem; line-height: 1.12; }
  .ledger-body p { margin: 0 0 12px; color: #e3d6bb; }
  .kicker { margin: 6px 0 0 !important; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft) !important; }
  .l-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 6px; }
  .l-icon { flex: none; width: 64px; height: 64px; padding: 8px; border-radius: 4px; color: #4a3523; background: linear-gradient(180deg, var(--paper-0), var(--paper-1)); }
  .l-head h2 { margin: 2px 0 0; }
  .l-sub { margin: 22px 0 10px; font-weight: 400; font-size: 1.05rem; color: var(--cream); display: flex; align-items: baseline; gap: 8px; }
  .l-sub .count { font-family: var(--mono); font-size: .72rem; color: var(--cream-soft); }

  .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-family: var(--mono);
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .badge.fact { background: var(--brass); color: #22160a; }
  .badge.fancy { border: 1px solid var(--fancy); color: var(--fancy); }

  .thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .thread-row { width: 100%; display: grid; gap: 4px; justify-items: start; text-align: left; cursor: pointer; padding: 11px 12px 11px 14px;
    border-radius: 4px; border: 1px solid #36271a; border-left: 3px solid var(--brass); background: rgba(255,255,255,.025); transition: background .15s; }
  .thread-row.fancy { border-left: 3px dotted var(--fancy); }
  .thread-row:hover { background: rgba(255,255,255,.06); }
  .tr-title { font-size: 1rem; line-height: 1.3; color: var(--cream); }
  .tr-to { font-size: .85rem; color: var(--cream-soft); font-style: italic; }

  .ends { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; margin: 6px 0 18px; }
  .end { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; text-align: left; border-radius: 4px; border: 0;
    color: var(--ink); background: linear-gradient(180deg, var(--paper-0), var(--paper-1)); line-height: 1.2; font-size: .92rem; font-weight: 600; }
  .end:hover { box-shadow: 0 0 0 2px var(--brass-hi); }
  .end svg { flex: none; width: 30px; height: 30px; color: #4a3523; }
  .end small { display: block; font-weight: 400; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
  .ends-link { height: 0; border-top: 3px solid var(--brass-hi); }
  .ends-link.fancy { border-top: 3px dotted var(--fancy); }

  .split { margin: 0 0 12px; padding: 14px 16px 4px; border-radius: 4px; border: 1px solid rgba(185,152,245,.35); background: rgba(185,152,245,.06); }
  .split-h { margin: 0 0 4px !important; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
  .split-h.real { color: var(--brass-hi) !important; }
  .split-h.imagined { color: var(--fancy) !important; }
  .split .imagined-text { font-style: italic; }

  .sources { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #4a3626; }
  .sources-h { margin: 0 0 6px !important; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft) !important; }
  .sources ul { margin: 0; padding: 0 0 0 18px; font-size: .9rem; }
  .sources li { margin: 3px 0; color: var(--cream-soft); }
  .sources .site { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: #9a876b; }

  .btn-ghost { margin-top: 18px; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--brass-lo); background: transparent; color: var(--brass-hi); font-size: .95rem; }
  .btn-ghost:hover { background: rgba(236,201,111,.1); }
  .entry-link { margin: 14px 0 0 !important; }
  .copy-link { cursor: pointer; padding: 0; border: 0; background: none; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-soft); text-decoration: underline dotted; text-underline-offset: 3px; }
  .copy-link:hover, .copy-link:focus-visible { color: var(--brass-hi); }
  .howto { margin: 0 0 18px; padding-left: 22px; color: #e3d6bb; }
  .howto li { margin: 4px 0; }
  .kinds { display: grid; gap: 10px; }
  .kind { padding: 12px 14px; border-radius: 4px; border: 1px solid #36271a; background: rgba(255,255,255,.025); }
  .kind p { margin: 8px 0 0 !important; font-size: .95rem; }
  .note { font-size: .9rem; color: var(--cream-soft) !important; font-style: italic; margin-top: 10px !important; }

  footer { padding: 6px 0 40px; color: #9a876b; font-size: .88rem; }
  footer p { margin: 0; max-width: 80ch; }

  /* ---------- responsive ---------- */
  @media (max-width: 1120px) {
    .layout { grid-template-columns: 1fr; }
    .ledger { position: static; max-height: none; }
  }
  @media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .masthead { padding-top: 26px; }
    .legend { margin-left: 0; }
    .board { padding: 30px 12px 18px; border-width: 6px; }
    .cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
    .ledger {
      position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; max-height: 62vh;
      border-radius: 14px 14px 0 0; border-bottom: 0;
      transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 -20px 50px rgba(0,0,0,.7);
    }
    .ledger.open { transform: none; }
    .ledger-top::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #4a3626; }
    .layout.drawer-pad { padding-bottom: 62vh; }
    .ledger-body h2 { font-size: 1.45rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }

  /* walk the strings: a path card to card along threads, with the years crossed */
  .btn-walk { cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--brass); background: rgba(201, 161, 74, .1); color: var(--brass-hi); font-size: 1rem; }
  .btn-walk:hover { background: rgba(201, 161, 74, .22); color: #fff1c9; }
  .btn-walk[aria-pressed="true"] { border-color: var(--fancy); color: #e4d6ff; background: rgba(185, 152, 245, .12); }
  .walk-box { margin: 0 0 18px; padding: 10px 14px 12px; border: 1px solid var(--brass-lo); border-left: 4px solid var(--brass-hi); border-radius: 6px; background: rgba(0, 0, 0, .22); }
  .walk-h { margin: 0; font-weight: 400; font-size: 1.1rem; color: var(--cream); }
  .walk-h:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
  [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
  .walk-intro { margin: 4px 0 0; font-size: .92rem; color: #dccdb0; }
  /* curator's walks: named tours listed under the toolbar */
  .btn-tours { cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--brass-lo); background: transparent; color: var(--brass-hi); font-size: 1rem; }
  .btn-tours:hover, .btn-tours[aria-expanded="true"] { background: rgba(201, 161, 74, .14); color: #fff1c9; }
  .tours { margin-top: 14px; padding: 14px 16px 6px; border: 1px solid var(--brass-lo); border-radius: 8px; background: rgba(0, 0, 0, .22); }
  .tours-h { margin: 0; font-weight: 400; font-size: 1.25rem; color: var(--cream); }
  .tours-lede { margin: 4px 0 10px; max-width: 80ch; color: #dccdb0; font-size: .95rem; }
  .tours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .tour { padding: 10px 0; border-top: 1px solid var(--wood-edge); }
  .tour-h { margin: 0; font-weight: 400; font-size: 1.08rem; }
  .tour-h a { color: var(--brass-hi); text-underline-offset: 3px; }
  .tour-h a:hover { color: #fff1c9; }
  .tour-meta { margin: 3px 0 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .03em; color: var(--cream-soft); }
  .tour-intro { margin: 6px 0 0; font-size: .92rem; color: #dccdb0; }
  .walk-total { margin: 4px 0 8px; color: var(--brass-hi); }
  .walk-steps { margin: 0 0 8px; padding-left: 1.4em; display: grid; gap: 6px; font-size: .92rem; color: #dccdb0; }
  .walk-steps small, .walk-go small { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--cream-soft); }
  .w-gap { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: .74rem; color: var(--brass-hi); }
  .w-why { display: block; font-size: .85rem; }
  .walk-next-h { margin: 10px 0 6px; font-size: .92rem; color: var(--cream); }
  .walk-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .walk-go { display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer; padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--brass-lo); background: rgba(201, 161, 74, .06); color: var(--cream); }
  .walk-go.fancy { border-color: var(--fancy-lo); }
  .walk-go:hover { background: rgba(201, 161, 74, .16); }
  .wg-via { font-size: .84rem; color: #dccdb0; }
  .wg-via .badge { transform: scale(.85); transform-origin: left center; }
  .walk-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .walk-tools button { cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--brass-lo); background: transparent; color: var(--brass-hi); font-size: .88rem; }
  .walk-tools button:hover { background: rgba(236, 201, 111, .1); }