/* ════════════════════════════════════════════════════════════════
   The Master Catalog — set like the ledger of a bank that has stood
   for a century and a half. Ivory stock, oxford-navy ink, antique
   gold hairlines, engraved serifs, letter-spaced small caps.
   Restraint is the theme: nothing glows, nothing bounces.
   ════════════════════════════════════════════════════════════════ */
:root {
  --paper:   #f6f2e7;   /* aged ivory stock */
  --paper-2: #efe9d8;
  --card:    #fbf8ef;
  --ink:     #182338;   /* oxford navy */
  --ink-2:   #41506b;
  --ink-3:   #76819a;
  --rule:    #cfc4a6;   /* faded gold-beige hairline */
  --gold:    #8d701f;   /* antique gold — used sparingly */
  --hunter:  #1f4534;   /* hunter green: secondary seal */
  --wine:    #5e2233;   /* burgundy: tertiary */
  --serif-d: "Cormorant Garamond", "Times New Roman", serif;
  --serif-b: "EB Garamond", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1060px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif-b); font-size: 18.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* laid-paper texture */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--hunter); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
code { font-family: var(--mono); font-size: .78em; color: var(--wine); background: transparent; }

/* ── masthead ─────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246,242,231,.95); backdrop-filter: blur(6px);
  border-bottom: 3px double var(--rule);
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
}
.mast-name {
  font-family: var(--serif-d); font-weight: 600; font-size: 1.18rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  text-decoration: none;
}
.mast-name .amp { color: var(--gold); }
.mast-est { font-family: var(--serif-d); font-style: italic; font-size: .85rem; color: var(--ink-3); }
.mast-links { margin-left: auto; display: flex; gap: 1.2rem; }
.mast-links a {
  font-family: var(--serif-d); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.mast-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ── frontispiece ─────────────────────────────────────────── */
.front { max-width: var(--maxw); margin: 0 auto; text-align: center; padding: clamp(2.8rem, 7vw, 4.6rem) 1.2rem 2.2rem; }
.front-rule { display: flex; align-items: center; gap: 1rem; color: var(--gold); margin: 0 auto 1.6rem; max-width: 420px; }
.front-rule::before, .front-rule::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.front-orn { font-size: 1rem; letter-spacing: .4em; }
.front h1 {
  font-family: var(--serif-d); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.04; letter-spacing: .01em;
  margin: 0 0 1rem;
}
.front .sub {
  font-style: italic; color: var(--ink-2); max-width: 56ch; margin: 0 auto 1.6rem;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}
.front .counts {
  font-family: var(--serif-d); letter-spacing: .18em; text-transform: uppercase;
  font-size: .82rem; color: var(--ink-3);
}
.front .counts b { color: var(--gold); font-weight: 600; }

/* ── the desk (controls) ──────────────────────────────────── */
.desk {
  position: sticky; top: 58px; z-index: 50;
  max-width: var(--maxw); margin: 0 auto; padding: .9rem 1.2rem;
  background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
}
.desk input[type="search"], .desk select {
  font-family: var(--serif-b); font-size: .95rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
  padding: .55rem .8rem;
}
.desk input[type="search"] { flex: 1; min-width: 230px; }
.desk input[type="search"]:focus, .desk select:focus { outline: none; border-color: var(--gold); }
.desk .toggle {
  font-family: var(--serif-d); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); display: inline-flex; gap: .45rem; align-items: center; cursor: pointer;
}
.desk .toggle input { accent-color: var(--hunter); }
.desk-count { font-family: var(--serif-d); font-style: italic; font-size: .85rem; color: var(--ink-3); margin-left: auto; }

/* ── ledger body ──────────────────────────────────────────── */
.ledger { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
.area-head {
  font-family: var(--serif-d); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem); color: var(--ink);
  margin: 2.6rem 0 .4rem; display: flex; align-items: baseline; gap: .9rem;
}
.area-head .folio { color: var(--gold); font-size: .8em; }
.area-head::after { content: ""; flex: 1; border-bottom: 3px double var(--rule); transform: translateY(-6px); }
.domain-head {
  font-family: var(--serif-d); font-style: italic; font-weight: 500;
  font-size: 1.12rem; color: var(--hunter); margin: 1.6rem 0 .8rem;
}
.domain-kind { font-size: .85rem; color: var(--ink-3); font-style: italic; }

/* entry card — a ledger leaf */
.leaf {
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
  margin-bottom: .8rem; box-shadow: 0 1px 0 rgba(24,35,56,.06);
}
.leaf summary {
  list-style: none; cursor: pointer; padding: .95rem 1.2rem;
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
}
.leaf summary::-webkit-details-marker { display: none; }
.leaf-name { font-family: var(--serif-d); font-weight: 600; font-size: 1.22rem; letter-spacing: .015em; }
.leaf-badge {
  font-family: var(--serif-d); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--hunter); padding: .14rem .5rem; border-radius: 2px;
}
.leaf-meta { font-family: var(--serif-d); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; }
.leaf summary .open-mark { color: var(--gold); font-family: var(--serif-d); transition: transform .18s; }
.leaf[open] summary .open-mark { transform: rotate(90deg); }
.leaf[open] summary { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.leaf-body { padding: 1.15rem 1.3rem 1.3rem; }
.leaf-what { margin: 0 0 .9rem; color: var(--ink-2); }
.leaf-sect {
  font-family: var(--serif-d); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 1rem 0 .35rem;
}
.leaf-body ol, .leaf-body ul { margin: 0; padding-left: 1.2rem; color: var(--ink-2); font-size: .95rem; }
.leaf-body li { margin-bottom: .3rem; }
.leaf-row { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-top: 1rem; border-top: 1px dotted var(--rule); padding-top: .7rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.leaf-repo a { font-family: var(--serif-d); letter-spacing: .08em; }

.nothing { text-align: center; font-style: italic; color: var(--ink-3); padding: 3rem 0; }

/* ── colophon ─────────────────────────────────────────────── */
.colophon {
  max-width: var(--maxw); margin: 0 auto; padding: 2.4rem 1.2rem 3.6rem;
  border-top: 3px double var(--rule); text-align: center;
  font-style: italic; color: var(--ink-3); font-size: .9rem;
}
.colophon .orn { color: var(--gold); letter-spacing: .5em; display: block; margin-bottom: .8rem; }

@media print {
  .masthead, .desk { position: static; }
  .leaf { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }