/* ==========================================================================
   The 210 Archive — design system
   Carried over from the book cover: cream stock, ink and red letterpress,
   Newsreader throughout, everything set inside a double rule.
   ========================================================================== */

:root {
  /* --- ink ------------------------------------------------------------- */
  --cream:      #F3ECDA;   /* the page */
  --cream-hi:   #F8F2E3;   /* raised stock: cartouches, cards, inputs */
  --cream-lo:   #EEE6D2;   /* the page, falling off at the edges */
  --ink:        #1A1714;   /* text, plate rules */
  --ink-soft:   #4A443B;   /* secondary text, captions */
  --ink-faint:  #8C8375;   /* tertiary: counts, coordinates */
  --red:        #C0422B;   /* the second colour. Rules, dots, marks. */
  --red-soft:   #CC5638;
  --backdrop:   #1C1A16;   /* the table the page is lying on */

  /* --- type ------------------------------------------------------------ */
  --serif: "Newsreader", "Times New Roman", Georgia, serif;

  /* --- measure --------------------------------------------------------- */
  --page:  1180px;
  --gut:   clamp(22px, 5vw, 74px);
  --rule:  2.5px;   /* the heavy rule */
  --hair:  1.5px;   /* the fine rule */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

/* ==========================================================================
   The sheet — one continuous cream page inside a red rule
   ========================================================================== */

/* Flat fill: the ledger makes this element many thousands of pixels tall, and a
   gradient stretched over all of it is both invisible and expensive to paint.
   The stock gradient lives on .cover, where it reads the way it does on the
   book cover. */
.sheet {
  max-width: var(--page);
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  position: relative;
}
/* the gutter shadow, as on the cover */
.sheet::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, rgba(26,23,20,0.09), rgba(26,23,20,0) 70%);
  pointer-events: none;
}

.frame {
  border-left: var(--hair) solid var(--red);
  border-right: var(--hair) solid var(--red);
  padding: 0 var(--gut);
}

section { padding: clamp(56px, 9vw, 104px) 0; }

/* ==========================================================================
   Rules & ornament
   ========================================================================== */

.rule       { height: var(--rule); background: var(--red); border: 0; }
.rule--hair { height: var(--hair); background: var(--red); border: 0; }
.rule--ink  { height: var(--hair); background: rgba(26,23,20,0.18); border: 0; }

/* the dashed chain: 4px mark, 5px space */
.chain {
  height: var(--rule);
  background: repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 9px);
  border: 0;
}

/* cartouche + emblem, lifted straight off the cover */
.cartouche {
  width: 116px; height: 102px;
  background: var(--cream-hi);
  border: var(--hair) solid var(--red);
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--cream-hi);
}
.emblem {
  width: 68px; height: 68px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 26px; letter-spacing: -0.01em;
}

/* ==========================================================================
   Type
   ========================================================================== */

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}

.display {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.lede {
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

p + p { margin-top: 1.1em; }
.prose { max-width: 62ch; }
.prose b, .prose strong { font-weight: 600; }

.caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.mono-num { font-variant-numeric: tabular-nums lining-nums; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-soft); }

/* ==========================================================================
   Rail — the running head
   ========================================================================== */

.rail {
  position: sticky; top: 0; z-index: 30;
  background: var(--cream-hi);
  border-bottom: var(--hair) solid var(--red);
}
.rail__in {
  max-width: var(--page); margin: 0 auto;
  padding: 9px var(--gut);
  display: flex; align-items: baseline; gap: 22px;
}
.rail__mark { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.rail__nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.rail__nav a {
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px;
  font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.rail__nav a:hover { color: var(--red); }

/* ==========================================================================
   Cover
   ========================================================================== */

.cover {
  text-align: center;
  padding-top: clamp(44px, 7vw, 86px);
  background:
    radial-gradient(130% 80% at 50% 0%, var(--cream-hi) 0%, var(--cream) 60%, var(--cream-lo) 100%);
}
.cover__inner {
  border: var(--hair) solid var(--red);
  padding: clamp(34px, 5vw, 66px) clamp(20px, 4vw, 56px) clamp(30px, 4vw, 48px);
  position: relative;
}
.cover__inner::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 9px) top    / 100% 2.5px no-repeat,
    repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 9px) bottom / 100% 2.5px no-repeat,
    repeating-linear-gradient(0deg,  var(--red) 0 4px, transparent 4px 9px) left   / 2.5px 100% no-repeat,
    repeating-linear-gradient(0deg,  var(--red) 0 4px, transparent 4px 9px) right  / 2.5px 100% no-repeat;
}

.masthead {
  font-weight: 900;
  font-size: clamp(96px, 21vw, 210px);
  line-height: 0.86;
  letter-spacing: -0.012em;
}

.band { position: relative; height: 118px; margin-top: 14px; }
.band svg { display: block; width: 100%; height: 100%; overflow: visible; }
.band .cartouche { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.cover__epigraph {
  margin-top: 26px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(13px, 1.5vw, 17px);
}
.cover .rule { margin-top: 24px; }

.cover__title { margin-top: clamp(38px, 6vw, 74px); }
.cover__title .work { font-style: italic; font-weight: 500; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; }
.cover__title .by     { font-style: italic; font-size: clamp(19px, 2.4vw, 28px); margin: 18px 0; }
.cover__title .author { font-style: italic; font-weight: 500; font-size: clamp(28px, 4.2vw, 48px); }

.cover__blurb {
  font-style: italic; color: var(--ink-soft);
  max-width: 42ch; margin: clamp(38px, 6vw, 70px) auto 0;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5;
}
.cover__stats {
  margin-top: 14px; font-weight: 600; letter-spacing: 0.03em;
  font-size: clamp(16px, 1.8vw, 20px);
}
.cover__dates {
  margin-top: 30px; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: clamp(14px, 1.6vw, 19px);
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.head { display: grid; gap: 12px; margin-bottom: clamp(30px, 4vw, 46px); }
.head .rule--hair { margin-top: 6px; }
.head__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.head__count { margin-left: auto; color: var(--ink-faint); font-size: 14px; letter-spacing: 0.06em; }

/* ==========================================================================
   Ledger — filters
   ========================================================================== */

.filters { display: grid; gap: 16px; margin-bottom: 30px; }
.facet { display: flex; align-items: baseline; gap: 10px 12px; flex-wrap: wrap; }
.facet__label {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  font-weight: 600; color: var(--ink-faint); min-width: 78px;
}
.chip {
  font-family: var(--serif); font-size: 15px; line-height: 1;
  padding: 7px 13px 8px;
  background: var(--cream-hi);
  border: var(--hair) solid rgba(26,23,20,0.22);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chip:hover { border-color: var(--red); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--red); border-color: var(--red); color: var(--cream-hi); font-weight: 600;
}
.chip .n { font-size: 12px; opacity: 0.6; margin-left: 5px; font-variant-numeric: tabular-nums; }

.search {
  font-family: var(--serif); font-size: 16px;
  padding: 8px 14px;
  background: var(--cream-hi);
  border: var(--hair) solid rgba(26,23,20,0.22);
  border-radius: 999px;
  color: var(--ink);
  width: min(280px, 100%);
}
.search::placeholder { color: var(--ink-faint); font-style: italic; }
.search:focus { outline: none; border-color: var(--red); }

.filters__foot {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-top: 4px;
}
.showing { font-size: 14px; color: var(--ink-faint); letter-spacing: 0.05em; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); font-size: 14px; color: var(--red);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ==========================================================================
   Ledger — plates
   ========================================================================== */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.plate {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); color: inherit;
}
.plate__frame {
  border: var(--hair) solid rgba(26,23,20,0.3);
  background: var(--cream-hi);
  padding: 7px;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.plate:hover .plate__frame,
.plate:focus-visible .plate__frame {
  border-color: var(--red);
  box-shadow: 0 8px 22px rgba(26,23,20,0.16);
  transform: translateY(-2px);
}
.plate:focus-visible { outline: none; }
.plate__img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--cream-lo);
}
.plate__none {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3;
  border: var(--hair) dashed var(--red);
  color: var(--ink-faint);
  font-style: italic; font-size: 15px;
}
.plate__no {
  position: absolute; top: 7px; left: 7px;
  background: var(--cream-hi); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 6px; font-variant-numeric: tabular-nums;
}
.plate__meta { padding-top: 9px; display: grid; gap: 1px; }
.plate__date { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.plate__place { font-size: 14px; color: var(--ink-soft); font-style: italic; }

.empty {
  padding: 54px 0; text-align: center; font-style: italic; color: var(--ink-soft);
}

.more {
  display: block; margin: clamp(26px, 4vw, 40px) auto 0;
  font-family: var(--serif); font-style: italic; font-size: 18px;
  padding: 10px 26px 11px;
  background: var(--cream-hi);
  border: var(--hair) solid var(--red);
  color: var(--red);
  cursor: pointer;
}
.more:hover { background: var(--red); color: var(--cream-hi); }
.more[hidden] { display: none; }

/* ==========================================================================
   Findings — charts
   ========================================================================== */

.findings { display: grid; gap: clamp(42px, 6vw, 70px); }
.figure { display: grid; gap: 12px; }
.figure__cap {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.figure__cap h3 {
  font-style: italic; font-weight: 600; font-size: clamp(21px, 2.4vw, 27px);
}
.figure__cap .caption { margin-left: auto; max-width: 40ch; text-align: right; }
.figure svg { display: block; width: 100%; overflow: visible; }
.figure .axis   { font-size: 12px; fill: var(--ink-faint); letter-spacing: 0.06em; }
.figure .lane   { font-size: 13px; fill: var(--ink); }
.figure .val    { font-size: 12px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.figure .bar    { fill: var(--red); }
.figure .bar--soft { fill: rgba(192,66,43,0.28); }
.figure .grid   { stroke: rgba(26,23,20,0.13); stroke-width: 1; }
.figure .dot    { fill: var(--red); fill-opacity: 0.85; }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th {
  text-align: left; text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 12px; font-weight: 600; color: var(--ink-faint);
  padding: 0 12px 7px 0; border-bottom: var(--hair) solid var(--red);
}
.table td { padding: 9px 12px 9px 0; border-bottom: var(--hair) solid rgba(26,23,20,0.13); }
.table td:last-child, .table th:last-child { text-align: right; padding-right: 0; }
.table .num { font-variant-numeric: tabular-nums; }

.twoup { display: grid; gap: clamp(30px, 4vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 800px) { .twoup { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Colophon
   ========================================================================== */

.colophon { text-align: center; padding-bottom: clamp(60px, 8vw, 96px); }
.colophon .cartouche { margin: 0 auto 26px; }
.colophon .caption { max-width: 52ch; margin: 0 auto; }
.press {
  margin-top: 26px; display: flex; align-items: center; justify-content: center;
  gap: 18px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px;
}
.press .dot { color: var(--red); }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(18, 16, 13, 0.93);
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(14px, 3vw, 34px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
/* Sized off the viewport, not the grid track: a percentage max-height against an
   indefinite 1fr row doesn't clamp, and the plate then shoves the caption card
   off the bottom of the screen. The subtrahend is the card plus padding. */
.lightbox__stage img {
  width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 230px);
  object-fit: contain;
  border: 7px solid var(--cream-hi);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.lightbox__none {
  display: grid; place-items: center; padding: 60px 40px;
  border: var(--hair) dashed var(--red); color: var(--cream);
  font-style: italic;
}
.lightbox__card {
  margin: clamp(14px, 2.4vw, 22px) auto 0;
  max-width: 780px; width: 100%;
  background: var(--cream-hi);
  border: var(--hair) solid var(--red);
  padding: 16px 20px 18px;
  display: grid; gap: 10px;
}
.lightbox__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lightbox__no {
  font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  color: var(--red); font-size: 14px;
}
.lightbox__date { font-weight: 600; font-size: 19px; }
.lightbox__place { font-style: italic; color: var(--ink-soft); font-size: 18px; }
.lightbox__facts {
  display: flex; gap: 8px 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft);
}
.tag {
  border: var(--hair) solid rgba(26,23,20,0.24);
  border-radius: 999px; padding: 2px 10px 3px; background: var(--cream);
}
.tag--red { border-color: var(--red); color: var(--red); }
.lightbox__nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lbtn {
  font-family: var(--serif); font-size: 18px; line-height: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream); border: var(--hair) solid var(--red); color: var(--red);
  cursor: pointer;
}
.lbtn:hover { background: var(--red); color: var(--cream-hi); }
.lbtn[disabled] { opacity: 0.3; cursor: default; }
.lbtn[disabled]:hover { background: var(--cream); color: var(--red); }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 620px) {
  body { font-size: 17px; }
  .facet__label { min-width: 100%; }
  .figure__cap .caption { margin-left: 0; text-align: left; }
  .plates { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .lightbox__stage img { max-height: calc(100vh - 300px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}