/* ═══════════════════════════════════════════════════════════════════
   Indonesiana — stylesheet, second edition.

   Principles carried forward: colour carries three meanings and nothing
   else (restriction, dispute, vitality), plus one identity mark, one
   interactive colour, and one declared data palette for charts and maps.

   What changed: a real type scale with a reader-controlled reading size;
   two surface levels instead of one box everywhere; sections separated by
   rules rather than nested in cards; apparatus set in the margin instead
   of interrupting the reading column.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces: page ground, raised surface, sunken well ───────── */
  --bg:#FAF9F6; --surface:#FFFFFF; --sunken:#F1EFEA; --sunken2:#E9E6DF;
  --rule:#E5E2DA; --ruleHi:#CAC5B9;

  /* ── ink ──────────────────────────────────────────────────────── */
  --ink:#15171B; --body:#33373F; --muted:#585D66; --faint:#666C75;

  /* ── identity and interaction ─────────────────────────────────── */
  --mark:#1D2B45; --markOn:#FFFFFF;
  --link:#2B4A7D; --linkHov:#16325E;
  --focus:#2B4A7D;
  --mark-tint:#EEF1F6; --ring:rgba(43,74,125,.20);

  /* ── semantic: restriction · dispute ──────────────────────────── */
  --restrict:#7A5A2B; --restrictBg:#F7F0E2; --restrictBd:#D8C49A;
  --dispute:#9A3B2E;  --disputeBg:#F9EDEA;  --disputeBd:#DDBBB3;

  /* ── semantic: vitality (ramp for marks, -t variants for text) ── */
  --v0:#2F6B4F; --v1:#6B8F3D; --v2:#B08422; --v3:#A85C2A; --v4:#8E3030;
  --v0b:#E8F0EB; --v1b:#EFF3E6; --v2b:#F8F1DF; --v3b:#F7EBE2; --v4b:#F6E8E7;
  --v0t:#2A6147; --v1t:#4E6A29; --v2t:#7C5A0D; --v3t:#8A481C; --v4t:#872C2C;

  /* ── declared data palette (charts, maps, coverage only) ──────── */
  --d0:#243A5C; --d1:#5A6E92; --d2:#AEB8C9; --d3:#E4E1DA;
  /* Map. Land is the figure and must read darker than the sea, which is
     the ground — the reverse (the old values) made the archipelago look
     like holes punched in a solid plate. Neighbours sit a step back. */
  --sea:#F4F2EC; --land:#E4DFD1; --landHi:#BDB5A1;
  --nbr:#EEEBE1; --nbrHi:#D6D0C1;

  --mark-hi:#FBECC3; --mark-hi-ink:#43340A;

  --shadow:0 1px 2px rgba(21,23,27,.05), 0 8px 24px rgba(21,23,27,.05);

  /* ── type ─────────────────────────────────────────────────────── */
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:Archivo, 'Helvetica Neue', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --read:1.125rem;          /* reader-controlled: 1rem / 1.125rem / 1.25rem */
  --t-display:clamp(2.05rem, 1.45rem + 2.4vw, 3rem);
  --t-title:clamp(1.85rem, 1.45rem + 1.5vw, 2.5rem);
  --t-h2:1.375rem;
  --t-h3:1.0625rem;
  --t-ui:0.9375rem;
  --t-sm:0.8125rem;
  --t-meta:0.75rem;
  --t-label:0.6875rem;

  /* ── space ────────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --measure:68ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121417; --surface:#191C21; --sunken:#1E2228; --sunken2:#262B32;
    --rule:#2A2F37; --ruleHi:#3C424C;
    --ink:#F3F2EF; --body:#D2D5DA; --muted:#9BA2AC; --faint:#8A919B;
    --mark:#C7D4EA; --markOn:#121417;
    --link:#9FC0F0; --linkHov:#C2D8F8;
    --focus:#9FC0F0;
    --mark-tint:#1D242F; --ring:rgba(159,192,240,.24);
    --restrict:#DDB671; --restrictBg:#2A2318; --restrictBd:#5C4A28;
    --dispute:#E8A090;  --disputeBg:#2C1C19;  --disputeBd:#5E332B;
    --v0:#6FBE92; --v1:#A6CE74; --v2:#E0BC5C; --v3:#E09463; --v4:#E28080;
    --v0b:#18251E; --v1b:#1E2417; --v2b:#272113; --v3b:#271B13; --v4b:#271616;
    --v0t:#6FBE92; --v1t:#A6CE74; --v2t:#E0BC5C; --v3t:#E09463; --v4t:#E28080;
    --d0:#C3D4F2; --d1:#8398C0; --d2:#59657E; --d3:#3B424E;
    --sea:#151B1F; --land:#252A30; --landHi:#454C57;
    --nbr:#1C2126; --nbrHi:#333A43;
    --mark-hi:#4A3D17; --mark-hi-ink:#F7E9C4;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#121417; --surface:#191C21; --sunken:#1E2228; --sunken2:#262B32;
  --rule:#2A2F37; --ruleHi:#3C424C;
  --ink:#F3F2EF; --body:#D2D5DA; --muted:#9BA2AC; --faint:#8A919B;
  --mark:#C7D4EA; --markOn:#121417;
  --link:#9FC0F0; --linkHov:#C2D8F8;
  --focus:#9FC0F0;
  --mark-tint:#1D242F; --ring:rgba(159,192,240,.24);
  --restrict:#DDB671; --restrictBg:#2A2318; --restrictBd:#5C4A28;
  --dispute:#E8A090;  --disputeBg:#2C1C19;  --disputeBd:#5E332B;
  --v0:#6FBE92; --v1:#A6CE74; --v2:#E0BC5C; --v3:#E09463; --v4:#E28080;
  --v0b:#18251E; --v1b:#1E2417; --v2b:#272113; --v3b:#271B13; --v4b:#271616;
  --v0t:#6FBE92; --v1t:#A6CE74; --v2t:#E0BC5C; --v3t:#E09463; --v4t:#E28080;
  --d0:#C3D4F2; --d1:#8398C0; --d2:#59657E; --d3:#3B424E;
  --sea:#151B1F; --land:#252A30; --landHi:#454C57;
  --nbr:#1C2126; --nbrHi:#333A43;
  --mark-hi:#4A3D17; --mark-hi-ink:#F7E9C4;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root[data-read="s"] { --read:1rem; }
:root[data-read="l"] { --read:1.25rem; }

/* ── base ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:var(--t-ui); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd { margin:0; }
ul { padding:0; list-style:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
img { max-width:100%; }
[hidden] { display:none !important; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }

a { color:var(--ink); text-decoration:underline;
    text-decoration-color:var(--ruleHi); text-decoration-thickness:1px;
    text-underline-offset:3px; transition:color .12s, text-decoration-color .12s; }
a:hover { color:var(--linkHov); text-decoration-color:currentColor; }
a:active { color:var(--link); }

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

mark { background:var(--mark-hi); color:var(--mark-hi-ink);
       padding:0 .12em; border-radius:2px; }

::selection { background:var(--mark-tint); color:var(--ink); }

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

.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink); padding:12px 18px;
  border:1px solid var(--ruleHi); border-radius:0 0 6px 0; font-weight:600;
}
.skip:focus { left:0; }
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ── type utilities ────────────────────────────────────────────── */
.pr { font-family:var(--serif); }
.mo { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.label { font-size:var(--t-label); font-weight:700; letter-spacing:.11em;
         text-transform:uppercase; color:var(--faint); }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.sm { font-size:var(--t-sm); }
.meta { font-size:var(--t-meta); color:var(--faint); }
.row { display:flex; align-items:center; gap:var(--s3); }
.wrap { flex-wrap:wrap; }
.grow { flex:1 1 auto; min-width:0; }
.stack { display:flex; flex-direction:column; }

.display { font-family:var(--serif); font-size:var(--t-display); font-weight:600;
  line-height:1.08; letter-spacing:-.021em; color:var(--ink); }
.title { font-family:var(--serif); font-size:var(--t-title); font-weight:600;
  line-height:1.14; letter-spacing:-.017em; color:var(--ink); }
.h2 { font-family:var(--serif); font-size:var(--t-h2); font-weight:600;
  line-height:1.28; letter-spacing:-.008em; color:var(--ink); }
.h3 { font-family:var(--sans); font-size:var(--t-h3); font-weight:700;
  line-height:1.35; color:var(--ink); }
.lede { font-family:var(--serif); font-size:calc(var(--read) * 1.09);
  line-height:1.55; color:var(--body); max-width:56ch; }

/* ── shell ─────────────────────────────────────────────────────── */
#shell { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 1 auto; }
.page { max-width:1200px; margin:0 auto; padding:var(--s6) var(--s5) var(--s9); }
.page.narrow { max-width:980px; }
.page.tight { max-width:760px; }

header.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--surface); border-bottom:1px solid var(--rule); }
.top-in { max-width:1200px; margin:0 auto; padding:0 var(--s5);
  display:flex; align-items:center; gap:var(--s4); height:64px; }

.wordmark { display:flex; align-items:baseline; gap:var(--s2);
  text-decoration:none; color:var(--ink); flex:0 0 auto; }
.wordmark:hover { color:var(--ink); }
.wordmark .m { font-family:var(--serif); font-size:1.4rem; font-weight:600;
  letter-spacing:-.02em; }
.wordmark .s { font-size:var(--t-label); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); }

nav.main { display:flex; align-items:center; gap:2px; margin-left:var(--s3); }
nav.main a, .menu summary {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  font-size:var(--t-sm); font-weight:500; color:var(--muted);
  border-radius:6px; text-decoration:none; white-space:nowrap; }
nav.main a:hover, .menu summary:hover { background:var(--sunken); color:var(--ink); }
nav.main a[aria-current="page"] { color:var(--ink); font-weight:650;
  background:var(--sunken); }

.menu { position:relative; }
.menu[open] summary, .menu summary.on { background:var(--sunken); color:var(--ink); }
.menu summary.on { font-weight:650; }
.menu summary::after { content:""; width:5px; height:5px; margin-left:1px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); }
.menu[open] summary::after { transform:translateY(1px) rotate(-135deg); }
.menu-pop { position:absolute; top:44px; left:0; min-width:230px; z-index:60;
  background:var(--surface); border:1px solid var(--ruleHi); border-radius:8px;
  box-shadow:var(--shadow); padding:6px; }
.menu-pop a { display:block; padding:9px 11px; border-radius:5px;
  font-size:var(--t-sm); text-decoration:none; color:var(--body); }
.menu-pop a:hover { background:var(--sunken); color:var(--ink); }
.menu-pop .label { display:block; padding:10px 11px 6px; line-height:1.5; }
.menu-pop .d { font-size:var(--t-meta); color:var(--faint); margin-top:1px; }

.top-right { margin-left:auto; display:flex; align-items:center; gap:var(--s2);
  flex:0 0 auto; }
.iconbtn { width:38px; height:38px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--rule); border-radius:6px;
  color:var(--muted); background:var(--surface); }
.iconbtn:hover { border-color:var(--ruleHi); color:var(--ink); background:var(--sunken); }
.seg { display:inline-flex; border:1px solid var(--rule); border-radius:6px;
  overflow:hidden; background:var(--surface); }
.seg button { padding:0 10px; height:38px; font-size:var(--t-meta);
  font-weight:650; color:var(--muted); letter-spacing:.03em; }
.seg button:hover { background:var(--sunken); color:var(--ink); }
.seg button[aria-pressed="true"] { background:var(--mark); color:var(--markOn); }
.seg button + button { border-left:1px solid var(--rule); }
.burger { display:none; }

footer.bot { border-top:1px solid var(--rule); background:var(--surface);
  padding:var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom,0px)); }
footer.bot .in { max-width:1200px; margin:0 auto; display:grid; gap:var(--s5);
  grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); }
footer.bot p { font-size:var(--t-sm); color:var(--faint); max-width:46ch; }
footer.bot a { display:block; padding:7px 0; font-size:var(--t-sm);
  color:var(--muted); text-decoration:none; }
footer.bot a:hover { color:var(--ink); text-decoration:underline; }

/* steward banner */
.stewbar { background:var(--restrictBg); border-bottom:1px solid var(--restrictBd);
  color:var(--restrict); font-size:var(--t-sm); }
.stewbar .in { max-width:1200px; margin:0 auto; padding:10px var(--s5);
  display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.stewbar b { color:var(--restrict); }
.stewbar button { border:1px solid var(--restrictBd); color:var(--restrict);
  border-radius:5px; padding:5px 11px; font-size:var(--t-meta); font-weight:650; }
.stewbar button:hover { background:var(--restrictBd); color:var(--markOn); }

/* ── primitives ────────────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:var(--t-meta);
  font-weight:650; padding:3px 9px; border-radius:100px;
  border:1px solid var(--ruleHi); color:var(--muted); white-space:nowrap; }
.chip .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
a.chip, button.chip { text-decoration:none; transition:border-color .12s, color .12s; }
a.chip:hover, button.chip:hover { border-color:var(--ink); color:var(--ink); }
button.chip[aria-pressed="true"] { background:var(--mark); color:var(--markOn);
  border-color:var(--mark); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:0 20px; border-radius:7px; font-size:var(--t-ui);
  font-weight:650; border:1px solid var(--mark); background:var(--mark);
  color:var(--markOn); text-decoration:none; transition:filter .12s, transform .06s; }
.btn:hover { filter:brightness(1.14); color:var(--markOn); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--ruleHi); }
.btn.ghost:hover { background:var(--sunken); border-color:var(--ink); color:var(--ink);
  filter:none; }
.btn.sm { min-height:36px; padding:0 14px; font-size:var(--t-sm); }

.panel { background:var(--surface); border:1px solid var(--rule); border-radius:10px; }
.pad { padding:var(--s5); }

.note { border-left:2px solid var(--ruleHi); background:var(--sunken);
  border-radius:0 6px 6px 0; padding:var(--s3) var(--s4);
  font-size:var(--t-sm); color:var(--muted); }

/* a section divided by a rule rather than boxed */
.sect { border-top:1px solid var(--rule); padding-top:var(--s5);
  margin-top:var(--s6); }
.sect > .label { display:block; margin-bottom:var(--s3); }
.sect-lede { font-size:var(--t-sm); color:var(--muted); max-width:70ch;
  margin-top:var(--s2); }

/* definition rows */
.kv { display:flex; justify-content:space-between; gap:var(--s3);
  padding:7px 0; font-size:var(--t-sm); border-bottom:1px solid var(--rule); }
.kv:last-child { border-bottom:0; }
.kv dt, .kv > span:first-child { color:var(--faint); }
.kv dd, .kv > span:last-child { color:var(--ink); font-weight:650;
  text-align:right; margin:0; }

/* vitality */
.vitramp { display:inline-flex; gap:3px; align-items:flex-end; height:17px;
  vertical-align:-3px; }
.vitramp i { width:8px; border-radius:1px; background:var(--rule); display:block; }
.vitramp i.on { background:currentColor; }

/* source tier */
.tier { display:inline-flex; align-items:center; gap:5px;
  font-size:var(--t-label); font-weight:700; color:var(--faint);
  letter-spacing:.04em; }
.tier .pips { display:inline-flex; gap:2px; }
.tier .pips i { width:5px; height:5px; border-radius:50%; background:var(--ruleHi); }
.tier .pips i.on { background:var(--muted); }

/* ── restriction and dispute blocks ────────────────────────────── */
.restrict-box { border:1px solid var(--restrictBd); background:var(--restrictBg);
  border-radius:8px; padding:var(--s4) var(--s5); }
.restrict-box .hd { color:var(--restrict); font-weight:700; font-size:var(--t-sm);
  display:flex; gap:var(--s2); align-items:flex-start; line-height:1.45; }
.restrict-box .bd { margin-top:var(--s3); font-size:calc(var(--read) * .88);
  color:var(--body); line-height:1.62; }
.restrict-box .mt { margin-top:var(--s3); font-size:var(--t-meta);
  color:var(--restrict); }
.dispute-box { border:1px solid var(--disputeBd); background:var(--disputeBg);
  border-radius:8px; padding:var(--s4) var(--s5); }
.dispute-box .hd { color:var(--dispute); font-weight:700; font-size:var(--t-sm);
  display:flex; gap:var(--s2); align-items:center; }

.pos { padding-left:var(--s4); border-left:2px solid var(--ruleHi); }
.pos + .pos { margin-top:var(--s4); }
.pos .who { font-size:var(--t-sm); font-weight:700; color:var(--ink); }
.pos .hold { font-size:var(--t-label); color:var(--faint); letter-spacing:.07em;
  text-transform:uppercase; font-weight:700; margin-top:1px; }
.pos .say { font-family:var(--serif); font-size:calc(var(--read) * .93);
  line-height:1.62; margin-top:var(--s2); color:var(--body); }

/* ── search ────────────────────────────────────────────────────── */
.searchbar { display:flex; align-items:center; gap:var(--s3);
  border:1px solid var(--ruleHi); background:var(--surface); border-radius:10px;
  padding:0 var(--s3) 0 var(--s4); height:56px; transition:border-color .12s, box-shadow .12s; }
.searchbar:focus-within { border-color:var(--link);
  box-shadow:0 0 0 3px var(--ring); }
.searchbar input { flex:1 1 auto; border:0; outline:0; background:transparent;
  font:inherit; font-size:1.0625rem; color:var(--ink); min-width:0; }
.searchbar input::placeholder { color:var(--faint); }

.hit { display:block; padding:var(--s5) 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; }
.hit:hover { color:inherit; }
.hit:hover .ht { color:var(--linkHov); text-decoration-color:currentColor; }
.ht { display:block; font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink);
  line-height:1.24; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:color .12s, text-decoration-color .12s; }
.hit .sn { display:block; font-size:var(--t-ui); color:var(--muted);
  line-height:1.58; margin-top:7px; max-width:74ch; }
.hit .sn .q { color:var(--faint); font-style:italic; }

.facet { padding-bottom:var(--s5); }
.facet + .facet { border-top:1px solid var(--rule); padding-top:var(--s5); }
.facet h4 { margin-bottom:var(--s2); }
.facet label { display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-sm); color:var(--muted); padding:5px 0; cursor:pointer;
  min-height:32px; border-radius:4px; }
.facet label:hover { color:var(--ink); }
.facet input { accent-color:var(--link); width:16px; height:16px; }
.facet .ct { margin-left:auto; font-size:var(--t-meta); color:var(--faint);
  font-variant-numeric:tabular-nums; }

.resolve { border:1px solid var(--restrictBd); background:var(--restrictBg);
  border-radius:8px; padding:var(--s4) var(--s5); font-size:var(--t-ui);
  color:var(--body); line-height:1.55; }
.resolve b { color:var(--restrict); }

/* ── entry ─────────────────────────────────────────────────────── */
.entry-grid { display:grid; grid-template-columns:minmax(0,1fr) 272px;
  gap:var(--s7); align-items:start; }
.entry-grid > * { min-width:0; }

.prose { max-width:var(--measure); }
.prose p { font-family:var(--serif); font-size:var(--read); line-height:1.68;
  color:var(--body); }
.prose p + p { margin-top:.85em; }
.prose i, .prose em { font-style:italic; }

.esect { margin-top:var(--s7); scroll-margin-top:96px; }
.esect > h2 { margin-bottom:var(--s3); }

/* apparatus in the margin, not in the reading column */
.srcmark { display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--rule);
  max-width:var(--measure); }
.srcmark .lb { font-size:var(--t-label); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); }
.supn { font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  color:var(--muted); text-decoration:none; min-width:24px;
  display:inline-flex; align-items:center; justify-content:center;
  height:24px; padding:0 7px; border-radius:5px; border:1px solid var(--rule);
  background:var(--surface); transition:border-color .12s, color .12s; }
.supn:hover { color:var(--ink); background:var(--sunken); border-color:var(--ink); }

.toc { position:sticky; top:88px; }
.toc ol { counter-reset:t; padding:0; list-style:none; }
.toc a { display:block; padding:6px 0 6px 12px; font-size:var(--t-sm);
  color:var(--muted); text-decoration:none; border-left:2px solid var(--rule);
  line-height:1.4; }
.toc a:hover { color:var(--ink); border-left-color:var(--ruleHi); }
.toc a.on { color:var(--ink); font-weight:650; border-left-color:var(--mark); }

.rail { display:flex; flex-direction:column; gap:var(--s6); }
.rail > section > .label { display:block; margin-bottom:var(--s3);
  padding-bottom:var(--s2); border-bottom:1px solid var(--rule); }

.tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--rule); }
.tabs button { border-bottom:2px solid transparent; padding:11px 14px;
  font-size:var(--t-sm); font-weight:650; color:var(--muted);
  white-space:nowrap; min-height:44px; }
.tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--mark); }
.tabs button:hover { color:var(--ink); background:var(--sunken); }
.tabs .n { font-size:var(--t-meta); color:var(--faint); font-weight:500; }

.srcrow { display:flex; gap:var(--s3); padding:var(--s4) 0;
  border-bottom:1px solid var(--rule); font-size:var(--t-sm); line-height:1.55;
  scroll-margin-top:96px; }
.srcrow:last-child { border-bottom:0; }
.srcrow .n { flex:0 0 26px; color:var(--faint); font-weight:700;
  font-size:var(--t-meta); font-family:var(--mono); padding-top:2px; }
.srcrow.retracted .cite { text-decoration:line-through;
  text-decoration-color:var(--dispute); }
.srcrow:target { background:var(--mark-tint); border-radius:6px;
  padding-left:var(--s3); padding-right:var(--s3); }

.relrow { display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--s3);
  align-items:baseline; padding:10px 0; border-bottom:1px solid var(--rule);
  font-size:var(--t-ui); }
.relrow:last-child { border-bottom:0; }
.relrow .p { font-size:var(--t-label); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); }

.rev { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--rule); font-size:var(--t-sm); }
.rev:last-child { border-bottom:0; }
.rev .d { color:var(--faint); font-size:var(--t-meta); font-family:var(--mono); }

.disclose { border-top:1px solid var(--rule); }
.disclose summary { display:flex; align-items:center; gap:var(--s2);
  padding:12px 0; font-size:var(--t-sm); font-weight:650; color:var(--muted);
  min-height:44px; }
.disclose summary:hover { color:var(--ink); }
.disclose summary::after { content:""; width:5px; height:5px; margin-left:2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); }
.disclose[open] summary::after { transform:translateY(1px) rotate(-135deg); }
.disclose .bd { padding-bottom:var(--s4); }

/* ── cards and lists ───────────────────────────────────────────── */
.cardgrid { display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.ecard { background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:var(--s5); text-decoration:none; color:inherit; display:flex;
  flex-direction:column; gap:var(--s2); transition:border-color .12s, box-shadow .14s,
  transform .14s; }
.ecard:hover { border-color:var(--ruleHi); box-shadow:var(--shadow);
  transform:translateY(-2px); color:inherit; }
.ecard .over { display:block; font-size:var(--t-label); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); }
.ecard .t { display:block; font-family:var(--serif); font-size:1.2rem;
  font-weight:600; color:var(--ink); line-height:1.24; }
.ecard .s { display:block; font-size:var(--t-sm); color:var(--muted); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }
.ecard .foot { margin-top:auto; padding-top:var(--s3); }

.tblwrap { overflow-x:auto; border:1px solid var(--rule); border-radius:10px;
  background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:var(--t-sm);
  min-width:620px; }
th { text-align:left; font-size:var(--t-label); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); padding:12px var(--s4);
  border-bottom:1px solid var(--ruleHi); white-space:nowrap;
  background:var(--sunken); position:sticky; top:0; }
td { padding:13px var(--s4); border-bottom:1px solid var(--rule); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--sunken); }

/* ── home ──────────────────────────────────────────────────────── */
.hero { padding:var(--s8) 0 var(--s7); }
.hero .display { max-width:15ch; }
.hero .lede { margin-top:var(--s4); font-size:1.2rem; }
.hero form { margin-top:var(--s6); max-width:640px; }
.suggest { display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s3); font-size:var(--t-sm); color:var(--faint); }
.suggest a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule);
  padding-bottom:1px; }
.suggest a:hover { color:var(--ink); border-bottom-color:var(--ink); }

.doors { display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(196px, 1fr)); }
.door { display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4);
  border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  text-decoration:none; color:inherit; transition:border-color .12s, background .12s; }
.door:hover { border-color:var(--ruleHi); background:var(--sunken); color:inherit; }
.door .ic { color:var(--muted); flex:0 0 auto; margin-top:1px; }
.door .bd { display:block; }
.door .t { display:block; font-size:var(--t-ui); font-weight:650; color:var(--ink); }
.door .d { display:block; font-size:var(--t-meta); color:var(--muted);
  line-height:1.45; margin-top:3px; }

.browse { display:flex; gap:var(--s2); flex-wrap:wrap; }
.browse a { display:inline-flex; align-items:baseline; gap:6px; padding:8px 14px;
  border:1px solid var(--rule); border-radius:100px; background:var(--surface);
  font-size:var(--t-sm); font-weight:600; color:var(--body); text-decoration:none;
  min-height:38px; align-items:center; }
.browse a:hover { border-color:var(--ink); color:var(--ink); background:var(--sunken); }
.browse a .n { font-size:var(--t-meta); color:var(--faint); font-weight:500; }

.figrow { display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.fig { border-top:2px solid var(--rule); padding-top:var(--s3); }
.fig .v { font-family:var(--serif); font-size:2rem; font-weight:600;
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.fig .l { font-size:var(--t-meta); color:var(--muted); margin-top:6px;
  line-height:1.45; }

.two { display:grid; gap:var(--s7); grid-template-columns:minmax(0,1fr) 320px;
  align-items:start; }
.two > * { min-width:0; }

.linklist a { display:block; padding:var(--s3) 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; }
.linklist a:last-child { border-bottom:0; }
.linklist a:hover .lt { color:var(--linkHov); text-decoration:underline; }
.linklist .lt { display:block; font-size:var(--t-ui); font-weight:600;
  color:var(--ink); line-height:1.4; }

/* ── map ───────────────────────────────────────────────────────── */
.maplayout { display:grid; grid-template-columns:262px minmax(0,1fr);
  gap:var(--s5); align-items:start; }
.maplayout > * { min-width:0; }
.mapframe { border:1px solid var(--rule); border-radius:10px; background:var(--sea);
  overflow:hidden; position:relative; }
.mapframe svg { display:block; width:100%; height:auto; }
.pin circle.hit { fill:transparent; }
.pin:focus-visible { outline:none; }
.pin:focus-visible circle.ring { stroke:var(--focus); stroke-width:2.5; opacity:1; }
.mapcard { position:absolute; right:var(--s3); bottom:var(--s3); width:274px;
  max-width:calc(100% - var(--s5)); background:var(--surface);
  border:1px solid var(--ruleHi); border-radius:10px; padding:var(--s4);
  box-shadow:var(--shadow); }
.layerrow { display:flex; align-items:center; gap:var(--s2); padding:7px 0;
  font-size:var(--t-sm); color:var(--muted); cursor:pointer; min-height:36px; }
.layerrow:hover { color:var(--ink); }
.layerrow input { accent-color:var(--link); width:16px; height:16px; }
.mapnote { font-size:var(--t-meta); color:var(--faint); line-height:1.55; }

/* ── calendar ──────────────────────────────────────────────────── */
.calgrid { display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(288px, 1fr)); }
.calcard { border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); }
.det { font-size:var(--t-label); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); border:1px dashed var(--ruleHi);
  border-radius:4px; padding:3px 8px; display:inline-block; }
.monthbar { display:flex; gap:var(--s1); overflow-x:auto; padding-bottom:var(--s2);
  scrollbar-width:thin; }
.monthbar button { border:1px solid var(--rule); background:var(--surface);
  border-radius:7px; padding:0 14px; min-height:40px; font-size:var(--t-sm);
  font-weight:600; color:var(--faint); white-space:nowrap; }
.monthbar button:hover { border-color:var(--ruleHi); color:var(--ink); }
.monthbar button.has { color:var(--body); }
.monthbar button[aria-pressed="true"] { background:var(--mark); color:var(--markOn);
  border-color:var(--mark); }
.monthbar button .n { opacity:.65; margin-left:5px; font-variant-numeric:tabular-nums; }

/* ── coverage ──────────────────────────────────────────────────── */
.stackbar { display:flex; height:20px; border-radius:4px; overflow:hidden; }
.stackbar span { display:block; }
.covrow { display:grid; grid-template-columns:180px minmax(0,1fr) 52px;
  gap:var(--s4); align-items:center; padding:7px 0; font-size:var(--t-sm); }
.covrow .nm { color:var(--ink); }
.covrow .ct { text-align:right; color:var(--faint); font-size:var(--t-meta);
  font-variant-numeric:tabular-nums; }
.key { display:flex; gap:var(--s4); flex-wrap:wrap; font-size:var(--t-meta);
  color:var(--muted); margin-top:var(--s3); }
.key i { width:11px; height:11px; border-radius:3px; display:inline-block;
  margin-right:6px; vertical-align:-1px; }

.hbar { display:grid; grid-template-columns:180px minmax(0,1fr) 44px 72px;
  gap:var(--s3); align-items:center; padding:5px 0; font-size:var(--t-sm); }
.hbar.nc { grid-template-columns:180px minmax(0,1fr) 44px; }
.hbar .nm { color:var(--body); }
.hbar .tr { height:12px; background:var(--sunken2); border-radius:3px;
  overflow:hidden; }
.hbar .tr span { display:block; height:100%; border-radius:3px; }
.hbar .ct { text-align:right; color:var(--faint); font-size:var(--t-meta);
  font-variant-numeric:tabular-nums; }

/* ── steward, threads, forms ───────────────────────────────────── */
.taskrow { display:flex; gap:var(--s4); padding:var(--s4) 0;
  border-bottom:1px solid var(--rule); align-items:flex-start; flex-wrap:wrap; }
.taskrow:last-child { border-bottom:0; }
.taskrow .bd { flex:1 1 260px; min-width:0; }
.taskrow .ac { display:flex; gap:var(--s2); flex-wrap:wrap; }
.done { color:var(--v0t); font-size:var(--t-sm); font-weight:700; }

textarea, select, input[type=text] { width:100%; font:inherit;
  font-size:var(--t-ui); color:var(--ink); background:var(--surface);
  border:1px solid var(--ruleHi); border-radius:7px; padding:11px var(--s3);
  min-height:44px; }
textarea:focus, select:focus, input[type=text]:focus { outline:none;
  border-color:var(--link);
  box-shadow:0 0 0 3px var(--ring); }
textarea { min-height:100px; resize:vertical; line-height:1.55; }
label.fl { display:block; font-size:var(--t-meta); font-weight:650;
  color:var(--muted); margin-bottom:6px; }

.msg { display:flex; gap:var(--s3); padding:var(--s4) 0;
  border-bottom:1px solid var(--rule); }
.msg:last-child { border-bottom:0; }
.msg .av { flex:0 0 34px; height:34px; border-radius:50%; background:var(--sunken2);
  display:flex; align-items:center; justify-content:center; font-size:var(--t-meta);
  font-weight:700; color:var(--muted); }
.msg .w { font-size:var(--t-sm); font-weight:700; color:var(--ink); }
.msg .r { font-size:var(--t-meta); color:var(--faint); }
.msg .t { font-size:var(--t-ui); line-height:1.6; margin-top:6px; color:var(--body); }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .entry-grid, .two, .maplayout { grid-template-columns:minmax(0,1fr); gap:var(--s6); }
  .toc { position:static; }
  .toc-wrap { display:none; }
  .mapcard { position:static; width:auto; max-width:none; margin:var(--s3);
    box-shadow:none; }
  footer.bot .in { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:860px) {
  nav.main { display:none; }
  nav.main.open { display:flex; position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--surface);
    border-bottom:1px solid var(--rule); padding:var(--s2); gap:2px;
    box-shadow:var(--shadow); z-index:50; margin:0; }
  nav.main.open a, nav.main.open .menu summary { height:auto; padding:13px var(--s4);
    font-size:var(--t-ui); }
  nav.main.open .menu-pop { position:static; box-shadow:none; border:0;
    border-top:1px solid var(--rule); border-radius:0; padding:0 0 var(--s2); }
  .burger { display:inline-flex; }
  .hero { padding:var(--s6) 0 var(--s5); }
  .page { padding:var(--s5) var(--s4) var(--s8); }
  .top-in { padding:0 var(--s4); gap:var(--s3); }
  .covrow, .hbar, .hbar.nc { grid-template-columns:minmax(0,1fr); gap:5px; }
  .covrow .ct, .hbar .ct { text-align:left; }
  .relrow, .rev { grid-template-columns:minmax(0,1fr); gap:3px; }
  footer.bot .in { grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  :root { --t-h2:1.25rem; }
}
@media (max-width:620px) {
  .wordmark .s { display:none; }
  .wordmark .m { font-size:1.25rem; }
  .seg button { padding:0 9px; }
  .top-right { gap:6px; }
  .top-right > a.iconbtn { display:none; }
  .hero form { margin-top:var(--s5); }
  .searchbar { height:52px; }
}

/* ── server-rendered variants ──────────────────────────────────────
   The prototype drove these with JavaScript. Here they are links and
   form controls, so they need the same appearance in their real
   elements: a segmented control made of anchors, a checkbox drawn as a
   box, and a tab row made of links. */

.seg a.segbtn { display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; height:38px; font-size:var(--t-meta); font-weight:650;
  color:var(--muted); letter-spacing:.03em; text-decoration:none; }
.seg a.segbtn:hover { background:var(--sunken); color:var(--ink); }
.seg a.segbtn[aria-current="true"] { background:var(--mark); color:var(--markOn); }
.seg a.segbtn + a.segbtn, .seg a.segbtn + button { border-left:1px solid var(--rule); }

.tabs a.tab { display:inline-flex; align-items:center; gap:6px;
  border-bottom:2px solid transparent; padding:11px 14px; font-size:var(--t-sm);
  font-weight:650; color:var(--muted); white-space:nowrap; min-height:44px;
  text-decoration:none; }
.tabs a.tab[aria-current="page"] { color:var(--ink); border-bottom-color:var(--mark); }
.tabs a.tab:hover { color:var(--ink); background:var(--sunken); }

/* layer toggles are links, so the checkbox is drawn */
a.layerrow { text-decoration:none; }
a.layerrow .box { width:16px; height:16px; border:1.5px solid var(--ruleHi);
  border-radius:4px; flex:0 0 auto; background:var(--surface); position:relative; }
a.layerrow .box.on { background:var(--link); border-color:var(--link); }
a.layerrow .box.on::after { content:""; position:absolute; left:4.5px; top:1px;
  width:4px; height:9px; border:solid var(--markOn); border-width:0 2px 2px 0;
  transform:rotate(45deg); }
:root[data-theme="dark"] a.layerrow .box.on::after,
:root:not([data-theme="light"]) a.layerrow .box.on::after { border-color:#121417; }

/* month bar entries are links */
.monthbar a { display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--rule); background:var(--surface); border-radius:7px;
  padding:0 14px; min-height:40px; font-size:var(--t-sm); font-weight:600;
  color:var(--faint); white-space:nowrap; text-decoration:none; }
.monthbar a:hover { border-color:var(--ruleHi); color:var(--ink); }
.monthbar a.has { color:var(--body); }
.monthbar a[aria-current="page"] { background:var(--mark); color:var(--markOn);
  border-color:var(--mark); }

/* browse chips can carry aria-current */
.browse a[aria-current] { border-color:var(--ink); color:var(--ink); }

/* Map pins are links. Each is three circles: a generous invisible hit
   area, a soft halo that carries the vitality colour at low opacity so a
   cluster reads as density rather than as a row of dots, and a small
   hard core that is the point itself. Hover and focus brighten the halo
   and darken the core's ring — no size change, so nothing shifts under
   the cursor and reduced-motion users lose nothing. */
.pin { cursor:pointer; }
.pin circle.hit { fill:transparent; }
.pin circle.halo { opacity:.11; transition:opacity .12s; }
.pin circle.core { transition:stroke .12s; }
.pin:hover circle.halo,
.pin:focus-visible circle.halo { opacity:.34; }
.pin:hover circle.core,
.pin:focus-visible circle.core { stroke:var(--ink); }
.pin:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* the source list in the entry is an <ol>; suppress the marker, the
   numbers are rendered in the .n column */
.srcrow { list-style:none; }

/* ═══ the steward desk ════════════════════════════════════════════════
   A separate visual register from the public pages, deliberately: a
   steward should never be uncertain whether they are looking at what the
   public sees or at what has been released to them. The desk is denser,
   the cards are bordered rather than floating, and the one colour it adds
   is the restriction colour already defined above — nothing new is
   invented to carry a fifth meaning. */

.deskbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s4); border:1px solid var(--ruleHi);
  border-left:3px solid var(--restrict); border-radius:8px;
  background:var(--surface); }
.deskbar .who { display:flex; align-items:center; gap:var(--s3); min-width:0; }
.deskbar .who b { color:var(--ink); font-weight:650; }
.deskbar .lock { color:var(--restrict); display:inline-flex; }

.deskgrid { display:grid; gap:var(--s4); margin-top:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,29rem),1fr)); }

.deskcard { border:1px solid var(--rule); border-radius:10px;
  background:var(--surface); padding:var(--s4) var(--s5); min-width:0; }
.deskcard.muted-card { background:var(--sunken); }
.deskcard .lt { font-family:var(--serif); font-size:1.03rem; font-weight:600;
  color:var(--ink); text-decoration:none; }
.deskcard .lt:hover { text-decoration:underline;
  text-decoration-color:var(--ruleHi); text-underline-offset:3px; }

/* released material reads as prose, not as a warning: it is the text, and
   the frame around it is what says how it came to be on the screen */
.restrict-box.open { border-style:solid; background:var(--surface);
  border-color:var(--restrictBd); }
.restrict-box.open .bd { color:var(--ink); font-size:var(--read); }
.restrict-box.open .bd p + p { margin-top:var(--s3); }

/* ── forms ─────────────────────────────────────────────────────────── */
.deskform { display:flex; flex-direction:column; gap:var(--s3); }
.deskform.tight { margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px dashed var(--rule); gap:var(--s2); }
.deskform button { align-self:flex-start; }

.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.inline { flex-direction:row; align-items:center; gap:var(--s3);
  flex-wrap:wrap; }
.field > label { font-family:var(--sans); font-size:var(--t-meta);
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  font-weight:600; }

.field input, .field select, .field textarea {
  font:inherit; font-size:var(--t-ui); color:var(--ink);
  background:var(--bg); border:1px solid var(--ruleHi); border-radius:6px;
  padding:9px 11px; width:100%; min-width:0; }
.field.inline > select, .field.inline > input { width:auto; min-width:14rem; }
.field textarea { resize:vertical; line-height:1.55; min-height:2.6rem; }
.field input::placeholder, .field textarea::placeholder {
  color:var(--faint); opacity:1; }
.field input:focus-visible, .field select:focus-visible,
.field textarea:focus-visible { outline:2px solid var(--ring);
  outline-offset:1px; border-color:var(--ink); }

.note.ok { border-left-color:var(--v0); color:var(--ink); }

.reqrow { display:block; padding:var(--s4) 0; border-bottom:1px solid var(--rule); }
.reqrow:last-child { border-bottom:0; }
.reqrow .lt { font-family:var(--serif); font-weight:600; color:var(--ink); }

@media (max-width:640px) {
  .deskbar { gap:var(--s3); }
  .deskbar form { margin-left:0 !important; }
  .field.inline > select, .field.inline > input { min-width:0; width:100%; }
}

/* help text that belongs to a field, not a placeholder: a placeholder
   disappears the moment someone starts typing, which is exactly when a
   rule about what the field must contain is still needed */
.hint { font-size:var(--t-sm); color:var(--muted); line-height:1.5;
  max-width:var(--measure); margin:0 0 2px; }

.logrow { padding:var(--s3) 0; border-bottom:1px solid var(--rule); }
.logrow:last-child { border-bottom:0; }
.logrow .t { font-size:var(--t-meta); color:var(--faint); letter-spacing:.02em; }
.logrow .a { font-size:var(--t-sm); color:var(--ink); margin-top:2px; }
.logrow .meta { display:block; margin-top:2px; }