/* The type scale is fluid: the app's fixed sizes are the floor, not the
   ceiling, because a browser is not a 375pt phone (DESIGN.md §2). */
:root {
  --f-display: 'Pirata One', 'Palatino Linotype', Palatino, serif;
  --f-body: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --f-label: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The app's SPACING scale, plus two page-level bands (DESIGN.md §3). */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 54px; --s7: 90px;
  --col-narrow: 700px; --col-read: 760px; --col-wide: 880px; --col-full: 1080px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--parchment);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sulfur); text-decoration: none; }
a:hover, a:focus-visible { color: var(--parchment); }
:focus-visible { outline: 2px solid var(--sulfur); outline-offset: 2px; }
img { max-width: 100%; }
hr.rule { border: 0; border-top: 1px solid var(--divider); margin: var(--s2) 0 var(--s4); }

/* ── bands and measure ─────────────────────────────────────────────────── */
.band { margin: 0 auto; padding: var(--s6) var(--s3) var(--s5); }
.band-read { max-width: var(--col-read); }
.band-wide { max-width: var(--col-wide); }
.band-full { max-width: var(--col-full); }
.band-narrow { max-width: var(--col-narrow); }
p, li { text-wrap: pretty; }
.band p, .band li { max-width: 62ch; }
.lede { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; border-left: 2px solid var(--sulfur); padding-left: var(--s3); }
.dim { color: var(--parchmentDim); }
.mono { font-family: var(--f-mono); font-size: 12px; color: var(--bone); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.05; margin: 0 0 var(--s3); text-wrap: balance; }
h2 { font-size: clamp(25px, 4vw, 34px); line-height: 1.12; margin: 0 0 var(--s3); }
h3 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.12; margin: 0 0 var(--s2); }
.eyebrow {
  font-family: var(--f-label); font-size: 11px; letter-spacing: .28em;
  color: var(--sulfur); margin: 0; text-transform: uppercase;
}
.stamp, time { font-family: var(--f-mono); font-size: 12px; color: var(--bone); }

/* ── header ────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40; background: var(--overlay);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--divider);
}
.top-in {
  max-width: var(--col-full); margin: 0 auto; padding: 10px var(--s3);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.brand { font-family: var(--f-label); font-size: 14px; letter-spacing: .2em; color: var(--sulfur); }
/* The nav wraps to a second row at 375px. It is flex with gap, never a
   scroller: a scroller hides items (DESIGN.md §4). */
.nav { display: flex; gap: var(--s1); margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-family: var(--f-label); font-size: 13px; letter-spacing: .14em;
  padding: 6px 10px; border: 1px solid transparent; color: var(--parchmentDim);
}
.nav a[aria-current="page"] { color: var(--sulfur); border-color: var(--ash); }
.theme-pick { display: flex; align-items: center; gap: var(--s2); }
.theme-pick select {
  font-family: var(--f-mono); font-size: 11px; background: var(--panelBg);
  color: var(--bone); border: 1px solid var(--ash); padding: 6px var(--s2);
}

/* ── hero (DESIGN.md §6) ───────────────────────────────────────────────── */
.hero { position: relative; height: 88vh; min-height: 520px; overflow: hidden; background: var(--deepBg); }
.hero-plate {
  position: absolute; left: -8%; top: -12%; width: 116%; height: 124%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(.85); opacity: .62; will-change: transform;
}
.hero-sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.hero-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 160px 70px var(--bg); pointer-events: none; }
.hero-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s4); text-align: center; will-change: opacity, transform;
}
.hero-title h1 {
  margin: 0; font-size: clamp(46px, 11vw, 110px); line-height: .98;
  color: var(--parchment); text-shadow: 0 2px 30px var(--bg), 0 0 80px var(--bg);
}
.hero-cue {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font-family: var(--f-label); font-size: 12px; letter-spacing: .34em; color: var(--bone);
}

/* ── the before/after component (DESIGN.md §7) ─────────────────────────── */
.ba { margin: var(--s4) 0; }
/* Shapes taller than 1:1 sit side by side and fall to one column, before
   first, below 560px. A wide plate is stacked so it keeps its width. */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ba-card .ba-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ba-wide .ba-grid, .ba-text .ba-grid { grid-template-columns: 1fr; }
.ba-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ba-chip {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--f-label); font-size: 12px; letter-spacing: .2em; color: var(--bone);
}
.ba-pip { width: 6px; height: 6px; border-radius: 3px; background: var(--bone); flex: none; }
.ba-after .ba-chip { color: var(--sulfur); }
.ba-after .ba-pip { background: var(--sulfur); }
/* The box is reserved at the capture's ratio and hatched while it loads —
   no spinner, no shimmer, and the page never jumps. */
.ba-box {
  border: 1px solid var(--ash); background: var(--deepBg);
  background-image: repeating-linear-gradient(135deg, var(--panelBg) 0 6px, var(--deepBg) 6px 12px);
  overflow: hidden;
}
.ba-after .ba-box { border-color: var(--sulfur); }
.ba-box img { width: 100%; height: auto; display: block; }
.ba-cap { margin: 10px 0 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--bone); }
.ba-label { margin: 0 0 var(--s2); font-family: var(--f-label); font-size: 12px; letter-spacing: .2em; color: var(--parchment); }
.ba-rule { margin: 0; padding: 12px 14px; border: 1px solid var(--ash); background: var(--panelBg); font-size: 15.5px; color: var(--parchmentDim); }
.ba-after .ba-rule { border-color: var(--sulfur); color: var(--parchment); }
/* The two enhancements, once site.js has upgraded them. */
.ba-swap .ba-grid { grid-template-columns: 1fr; max-width: 360px; }
.ba-swap-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--sulfur); background: var(--deepBg); position: relative; cursor: pointer; min-height: 44px; }
.ba-swap-btn img { display: block; width: 100%; transition: opacity .16s; }
.ba-swap-btn img.is-under { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.ba-swap-tag {
  position: absolute; left: 8px; top: 8px; font-family: var(--f-label); font-size: 12px;
  letter-spacing: .2em; padding: 4px 8px; background: var(--bg); color: var(--sulfur); border: 1px solid var(--sulfur);
}
.ba-wipe-box { position: relative; max-width: 360px; border: 1px solid var(--ash); background: var(--deepBg); overflow: hidden; touch-action: none; cursor: ew-resize; }
.ba-wipe-box > img { width: 100%; display: block; }
.ba-wipe-clip { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 1px solid var(--sulfur); }
.ba-wipe-clip img { height: 100%; display: block; max-width: none; }
.ba-wipe-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--sulfur);
  background: var(--bg); color: var(--sulfur); display: flex; align-items: center;
  justify-content: center; font-family: var(--f-mono); font-size: 13px;
}
.nocap { border: 1px solid var(--ash); background: var(--panelBg); padding: 14px 16px; margin: var(--s3) 0; }
.nocap p { margin: 0; color: var(--parchmentDim); font-size: 15.5px; }
.nocap-label { font-family: var(--f-label); font-size: 11px; letter-spacing: .2em; color: var(--bone); text-transform: uppercase; margin: 0 0 7px !important; }

/* ── work items and chips ──────────────────────────────────────────────── */
.item { border-top: 1px solid var(--divider); padding-top: var(--s4); margin-bottom: var(--s5); }
.item-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.field-label { font-family: var(--f-label); font-size: 11px; letter-spacing: .2em; color: var(--bone); margin: 0 0 var(--s1); text-transform: uppercase; }
.field-why .field-label { color: var(--sulfur); }
.field p { margin: 0; }
.field-why p { color: var(--parchmentDim); }
.field + .field { margin-top: var(--s3); }
.chip {
  font-family: var(--f-label); font-size: 11px; letter-spacing: .18em;
  padding: 3px 8px; border: 1px solid var(--ash); color: var(--bone); white-space: nowrap;
}
.chip-ui { border-color: var(--sulfur); color: var(--sulfur); }
.chip-content { border-color: var(--heal); color: var(--heal); }
.chip-mechanics { border-color: var(--rust); color: var(--rust); }
.chip-balance { border-color: var(--blood); color: var(--blood); }
.chip-infra { border-color: var(--ash); color: var(--bone); }
.commits { font-family: var(--f-mono); font-size: 11px; color: var(--bone); margin: var(--s3) 0 0; }

/* ── marginalia (collapsed, and collapsible with no script) ────────────── */
.marg { border: 1px solid var(--ash); margin-bottom: var(--s2); background: var(--panelBg); }
.marg summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 15px; cursor: pointer; list-style: none;
  font-family: var(--f-label); font-size: 13px; letter-spacing: .14em; color: var(--parchment);
}
.marg summary::-webkit-details-marker { display: none; }
.marg .chev { font-family: var(--f-mono); color: var(--bone); }
.marg .chev::after { content: "+"; }
.marg[open] .chev::after { content: "\2212"; }
.marg-body { padding: 14px 15px; border-top: 1px solid var(--divider); color: var(--parchmentDim); }
.marg-body p, .marg-body li { max-width: none; }

/* ── the log index ─────────────────────────────────────────────────────── */
.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--s4); }
.filters button {
  font: inherit; font-family: var(--f-label); font-size: 12px; letter-spacing: .14em;
  padding: 7px 12px; border: 1px solid var(--ash); background: none; color: var(--parchmentDim); cursor: pointer;
}
.filters button[aria-pressed="true"] { border-color: var(--sulfur); color: var(--sulfur); }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { border-top: 1px solid var(--divider); padding: 20px 0; }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 18px; align-items: start; }
.entry-row img { width: 100%; border: 1px solid var(--ash); background: var(--deepBg); display: block; }
.entry-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pager { display: flex; gap: var(--s3); margin-top: var(--s5); font-family: var(--f-label); letter-spacing: .14em; }

/* ── catalog (DESIGN.md §8) ────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); }
.foe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }
.eff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* THE PRINTED PLATE — the card face as the game draws it: a blackletter name
   band, a framed plate behind a hairline rule, a ledger at the foot. */
.plate { display: block; border: 1.5px solid var(--ash); border-radius: 4px; background: var(--deepBg); overflow: hidden; box-shadow: 0 3px 6px var(--shadow); }
.plate-body { border-color: var(--blood); } .plate-mind { border-color: var(--sulfur); } .plate-heart { border-color: var(--rust); }
.plate-name { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-bottom: 1px solid var(--divider); min-height: 30px; font-family: var(--f-display); font-size: 14px; line-height: 1.14; color: var(--parchment); }
.plate-art { padding: 4px; background: var(--panelBg); }
.plate-art > div { aspect-ratio: 1/1; border: 1px solid var(--ash); background: var(--deepBg); overflow: hidden; }
.plate-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-paid {
  margin: 0; padding: 0 6px 8px; font-size: 13px; line-height: 1.45; color: var(--parchmentDim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The art a licence will not let this site republish. Hatched like a loading
   plate, labelled like a policy — never a silent black box. */
.plate-art .withheld {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-image: repeating-linear-gradient(135deg, var(--panelBg) 0 6px, var(--deepBg) 6px 12px);
  font-family: var(--f-mono); font-size: 10px; line-height: 1.5; color: var(--bone); padding: 6px;
}
.plate-ledger { display: flex; align-items: center; gap: 6px; padding: 6px; border-top: 1px solid var(--divider); min-height: 42px; font-family: var(--f-mono); font-size: 11px; color: var(--parchment); }
.plate-free { font-family: var(--f-mono); font-size: 12px; color: var(--parchment); }
.plate-key { font-family: var(--f-label); font-size: 12px; letter-spacing: .06em; }
.foe { border: 1px solid var(--ash); background: var(--panelBg); }
.foe .portrait { aspect-ratio: 1/1; background: var(--deepBg); overflow: hidden; }
.foe .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foe-body { padding: 12px 13px; }
.eff { border: 1px solid var(--ash); background: var(--panelBg); padding: 13px 14px; }
.eff-name { font-family: var(--f-label); font-size: 14px; letter-spacing: .14em; margin: 0 0 6px; }

/* ── shared body markup emitted by devlog-entry.mjs ────────────────────── */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12px; color: var(--parchmentDim); }
th, td { text-align: left; padding: 6px 10px 6px 0; vertical-align: top; }
th { color: var(--bone); font-weight: 400; }
.st { white-space: nowrap; }
.st-ok { color: var(--heal); } .st-neutral { color: var(--bone); }
.st-warn { color: var(--sulfur); } .st-bad { color: var(--blood); }
.diff { border: 1px solid var(--ash); background: var(--panelBg); overflow-x: auto; margin: var(--s3) 0; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.6; color: var(--parchmentDim); }
.dl { padding: 0 12px; white-space: pre; }
.dl.add { color: var(--heal); } .dl.del { color: var(--blood); }
.dl.hunk { color: var(--sulfur); } .dl.meta { color: var(--bone); }
code, pre { font-family: var(--f-mono); font-size: .9em; }
pre { border: 1px solid var(--ash); background: var(--panelBg); padding: 12px 14px; overflow-x: auto; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--divider); margin-top: var(--s6); padding: var(--s4) var(--s3) var(--s7); }
.foot-in { max-width: var(--col-full); margin: 0 auto; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.7; color: var(--bone); }
.foot a { color: var(--bone); text-decoration: underline; }

/* ── 375px: the majority case (DESIGN.md §4) ───────────────────────────── */
@media (max-width: 560px) {
  /* Three header rows is a phone's whole first screen. The theme label goes
     to assistive tech only and the picker rides the nav's row. */
  .theme-pick label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-in { gap: var(--s2); padding: 8px var(--s3); }
  .nav a { padding: 5px 8px; }
  .entry-row { grid-template-columns: 1fr; }
  .entry-row img { max-width: 220px; }
  .band { padding-left: var(--s3); padding-right: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
[hidden] { display: none !important; }