@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

/* press.0x13d.com — the cover shelf.
 *
 * COLOUR is the 0x13D brand theme, copied from its source of truth
 * (_community/0x13d/brand/theme.css — THEME.md has the rules). Light is the
 * default; dark applies only when the reader picks it with the toggle in the
 * banner (html[data-theme="dark"], set by /assets/theme.js before first paint).
 * The OS preference is not consulted. Change a brand value there first, then
 * re-copy the block below; the press.0x13d.com additions are ours.
 *
 * The plates are loud and everything around them is quiet. That is the whole
 * layout decision: a cover carries no furniture of ours in print, and it carries
 * none here either.
 */

/* ── brand tokens (copied — do not edit values here) ─────────────────────── */

:root {
  color-scheme: light;

  /* paper and surfaces */
  --bg: #faf7f1;          /* paper */
  --bg-soft: #f3eee4;     /* paper-soft: side columns, bands */
  --surface: #fffdf8;     /* cards, panels, inputs */
  --surface-2: #f3eee4;   /* raised or hovered surface */
  --banner: #b7beaf;      /* the sage banner (workbook .page-banner) */
  --banner-ink: #11120f;
  --header-bg: #b7beaf;
  --header-ink: #11120f;
  --header-shadow: 0px 0px 25px 0px;

  /* ink */
  --ink: #11120f;         /* headings, primary text */
  --ink-2: #2b2a26;       /* body text */
  --ink-soft: #5d5b54;    /* secondary text (≥ 4.5:1 on --bg) */
  --ink-faint: #6b6860;   /* micro labels, captions (≥ 4.5:1 on --bg and --bg-soft) */
  --rule: #e2ddd2;        /* hairlines */
  --rule-strong: #c9c2b4; /* control borders */

  /* accents */
  --accent: #3a3a3a;      /* charcoal: primary buttons, selected state */
  --accent-ink: #faf7f1;  /* text on --accent */
  --brass: #8a6d3b;       /* the one warm accent: focus, emphasis */
  --link: #6f5528;        /* brass, darkened for text contrast */
  --link-hover: #11120f;
  --focus: #8a6d3b;

  /* the footer is constant across themes (portfolio web standard) */
  --footer-bg: #3a3a3a;
  --footer-ink: #faf7f1;
  --footer-accent: #cbb88f;

  /* status (fact-check and fidelity codes) — always with a glyph or label */
  --good: #3f7a3a;
  --warn: #b07a1a;
  --bad: #b8412c;
  --neutral: #8e8b82;

  /* data: who acted (categorical, validated on --surface), and our own research */
  --side-gop: #c94f4f;
  --side-dem: #2f6fc4;
  --side-courts: #157d59;
  --side-agency: #b07a1a;
  --side-foreign: #a2479a;
  --research: #6a5fd0;
  --hatch: #d9d3c6;

  --shadow: 0 1px 12px rgba(17, 18, 15, 0.06);

  /* ── press.0x13d.com additions (project tokens, both themes) ── */
  --oxblood: #78281f;     /* the interior spread's accent: verdicts, what is unfinished (8.9:1 on --bg) */
  --imprint: #f3f532;     /* the artist's yellow block, top left of every plate */
  --imprint-ink: #11120f; /* text set on --imprint, in either theme */
  --scrim: rgba(17, 18, 15, 0.32);
  --plate-edge: rgba(17, 18, 15, 0.18); /* the trim hairline round a cover */

}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14130f;
  --bg-soft: #1b1a16;
  --surface: #201f1a;
  --surface-2: #28271f;
  --banner: #3a4036;
  --banner-ink: #ece8de;
  --header-bg: #3a4036;
  --header-ink: #ece8de;
  --header-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6);

  --ink: #ece8de;
  --ink-2: #d6d1c5;
  --ink-soft: #aba699;
  --ink-faint: #908b7f;
  --rule: #2e2c26;
  --rule-strong: #46433a;

  --accent: #e6e0d2;
  --accent-ink: #14130f;
  --brass: #c9a86a;
  --link: #d8bc84;
  --link-hover: #ece8de;
  --focus: #c9a86a;

  --footer-bg: #3a3a3a;
  --footer-ink: #faf7f1;
  --footer-accent: #cbb88f;

  --good: #6fae63;
  --warn: #d9a441;
  --bad: #e2694f;
  --neutral: #8a8579;

  --side-gop: #e66767;
  --side-dem: #3987e5;
  --side-courts: #199e70;
  --side-agency: #b8801c;
  --side-foreign: #c15fb0;
  --research: #9085e9;
  --hatch: #3a3831;

  --shadow: 0 1px 12px rgba(0, 0, 0, 0.35);

  /* ── press.0x13d.com additions ── */
  --oxblood: #e3907e;     /* the same accent, lifted for night paper (≥ 6:1 on --bg and --surface) */
  --imprint: #f3f532;
  --imprint-ink: #11120f;
  --scrim: rgba(0, 0, 0, 0.55);
  --plate-edge: rgba(236, 232, 222, 0.22);

}

:root {
  --measure: 34rem;
  --panel-w: 30rem;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brass); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: -0.01em; }

/* ── the header ───────────────────────────────────────────────────────────
 * The shared 0x13d::Research bar: /brand/brand.css, copied from
 * _community/0x13d/brand/web by scripts/sync-brand.mjs. Nothing about the bar
 * is styled here; the page title that used to ride in it sits under it.
 */

.page-title {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  color: var(--ink);
}
.page-title__imprint {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The theme toggle — brand markup and styles, copied from theme.css. */
/* Markup:
 *   <button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch to dark theme">
 *     <span class="theme-toggle__icon" aria-hidden="true"></span><span class="theme-toggle__label">Dark</span>
 *   </button>
 * theme.js keeps aria-label, aria-pressed and the label in sync. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-soft); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle__icon { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ── the lede ─────────────────────────────────────────────────────────────── */

.lede {
  margin: 1rem 0 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  max-width: calc(var(--measure) + 8rem);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.lede__series { color: var(--ink); font-style: italic; }

/* ── the shelf ────────────────────────────────────────────────────────────── */

.shelf {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  max-width: 82rem;
}

.shelf__empty {
  padding: 0 clamp(1.25rem, 5vw, 4rem) 4rem;
  color: var(--oxblood);
}

.tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tile__plate {
  position: relative;
  aspect-ratio: 11 / 17;
  background: var(--surface);
  overflow: hidden;
  /* A printed cover sits on the table, not above it. No drop shadow — just the
     hairline where the trim ends. */
  box-shadow: 0 0 0 1px var(--plate-edge);
}

.tile__plate img {
  display: block;
  width: 100%;
  height: 100%;
  /* Left, never centre. The build crops the same way, because a centre crop
     slices the imprint block off the left edge of the plate. */
  object-fit: cover;
  object-position: left center;
}

.tile__unpainted {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-style: italic;
}

.tile__caption { margin-top: 0.7rem; }

.tile__edition {
  display: inline;
  font-size: 0.95rem;
  box-shadow: inset 0 -0.05em 0 0 transparent;
}

.tile__month { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.tile__state {
  margin: 0.35rem 0 0;
  color: var(--oxblood);
  font-size: 0.82rem;
}

.tile:hover .tile__plate,
.tile:focus-visible .tile__plate { box-shadow: 0 0 0 1px var(--ink); }

/* The one loud move on the page, and it is borrowed: the plate carries a yellow
   block with 0X13D in it, so the open cover's name is set in the same yellow. */
.tile[aria-expanded="true"] .tile__edition {
  background: var(--imprint);
  color: var(--imprint-ink);
  box-shadow: 0.18em 0 0 var(--imprint), -0.18em 0 0 var(--imprint);
}

/* ── colophon ─────────────────────────────────────────────────────────────── */

/* The portfolio's constant footer (THEME.md): #3a3a3a with cream ink in both
   themes, full bleed, the copy on the reading measure. */
.colophon {
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 4rem;
  background: var(--footer-bg);
  color: color-mix(in srgb, var(--footer-ink) 82%, transparent);
  font-size: 0.9rem;
}

.colophon > p { margin: 0 0 0.5rem; max-width: var(--measure); }
.colophon a { color: var(--footer-accent); }
.colophon a:hover { color: var(--footer-ink); text-decoration-color: var(--footer-accent); }
.colophon__imprint { color: var(--footer-ink); font-style: italic; }
.colophon .colophon__stamp { margin-top: 1.25rem; font-family: var(--mono); font-size: 0.75rem; }

/* ── the panel ────────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 10;
}
.scrim.is-open { opacity: 1; }

.panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: min(var(--panel-w), 100vw);
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.panel.is-open { transform: translateX(0); }

.panel__inner { padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 4rem; }

.panel__close {
  float: right;
  margin: -0.35rem -0.35rem 0 0.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.panel__close:hover { color: var(--ink); border-color: var(--ink); }

.panel__id { display: flex; gap: 1rem; align-items: flex-start; }

.panel__thumb {
  flex: 0 0 4.5rem;
  aspect-ratio: 11 / 17;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--plate-edge);
}
.panel__thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}

/* The heading takes focus when the panel opens, so a screen reader lands on the
   edition rather than halfway down the shelf. It is not a control, and the
   panel arriving is its own visible cue, so it does not draw a ring. */
.panel__edition { margin: 0; font-size: 1.15rem; font-weight: 400; font-style: italic; }
.panel__edition:focus-visible { outline: none; }
.panel__sub { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.panel__artist { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.82rem; }

.panel__state {
  margin: 1.1rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--oxblood);
  background: color-mix(in srgb, var(--oxblood) 7%, transparent);
  color: var(--oxblood);
  font-size: 0.86rem;
  line-height: 1.5;
}

.panel__summary { margin: 1.25rem 0 0; font-size: 0.98rem; line-height: 1.62; }

.panel h3 {
  margin: 2.25rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  font-weight: 400;
  font-style: italic;
}

/* steal this zine — the printed back cover's code, on screen */

.steal { display: flex; gap: 1rem; align-items: flex-start; }
.steal__qr { flex: 0 0 5.5rem; }
.steal__qr svg { display: block; width: 100%; height: auto; }
.steal__body { font-size: 0.9rem; }
.steal__body p { margin: 0 0 0.5rem; }
.steal__url { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); word-break: break-all; }

/* papers */

.paper { margin: 0 0 1.75rem; padding: 0 0 1.75rem; border-bottom: 1px dotted var(--rule); }
.paper:last-child { border-bottom: 0; padding-bottom: 0; }

.paper__title { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.4; }

.paper__annot {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.paper__verdict { color: var(--oxblood); }

.paper__abstract { margin: 0.7rem 0 0; font-size: 0.9rem; line-height: 1.58; color: var(--ink-2); }

.paper__specimen { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.listen { margin: 0.8rem 0 0; font-size: 0.88rem; }
.listen__meta { color: var(--ink-soft); font-size: 0.82rem; }
.listen--pending { color: var(--ink-soft); font-style: italic; }

/* claims */

.claims { list-style: none; margin: 0.9rem 0 0; padding: 0; }

.claims li {
  padding: 0.5rem 0 0.5rem 0.85rem;
  border-left: 2px solid var(--rule);
  font-size: 0.86rem;
  line-height: 1.5;
}
.claims li + li { margin-top: 0.3rem; }
.claims li.is-specimen { border-left-color: var(--ink); }

.claims__verdict { font-family: var(--mono); font-size: 0.72rem; color: var(--oxblood); }
.claims__where { color: var(--ink-soft); font-size: 0.78rem; }
.claims__held { color: var(--ink-soft); font-size: 0.78rem; font-style: italic; }

/* ── the booklet page ─────────────────────────────────────────────────────── */

.booklet-page { background: var(--bg); }

.booklet {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem) 5rem;
}



.booklet__head h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}
.booklet__edition { margin: 0.35rem 0 0; color: var(--ink-soft); }

.booklet__proof {
  margin: 1.25rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--oxblood);
  background: color-mix(in srgb, var(--oxblood) 7%, transparent);
  color: var(--oxblood);
  font-size: 0.9rem;
}

.booklet__reader { margin: 2rem 0 0; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }
.booklet__reader object { display: block; width: 100%; height: min(78vh, 46rem); border: 0; }
.booklet__reader p { padding: 2rem; margin: 0; }

.booklet__missing { margin: 2rem 0 0; color: var(--oxblood); }

.booklet__takeaway {
  margin: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.take h2 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 400; font-style: italic; }
.take p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.55; }
.take__link { font-family: var(--mono); font-size: 0.8rem; }

.booklet__contents { margin: 3rem 0 0; }
.booklet__contents h2 {
  margin: 0 0 0.9rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; font-weight: 400; font-style: italic;
}
.booklet__contents ol { margin: 0; padding-left: 1.2rem; }
.booklet__contents li { margin-bottom: 1rem; }
.booklet__title { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.booklet__meta { margin: 0.2rem 0 0; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }

.booklet__foot {
  margin: 3rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.88rem;
}
.booklet__foot p { margin: 0 0 0.4rem; }

/* ── narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .panel { width: 100vw; border-left: 0; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .scrim { transition: none; }
}