/*
 * theme.css — Bound Quarterly's design-system values.
 * Retro-print: off-white paper, pressed ink, one brick-red stamp colour.
 * 4px corners, no drop shadows, a slab-contrast display face.
 */

:root {
  --canvas: #f2ecde;
  --surface: #f9f6f0;
  --surface-2: #ece2c8;
  --border: color-mix(in srgb, var(--ink) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --ink: #1c1a17;
  --muted: #615d57;
  --accent: #1c1a17;
  --accent-hover: #322d26;
  --accent-ink: #f2ecde;
  --accent-text: #b23a2e;
  --accent-strong: #1c1a17;
  --accent-soft: color-mix(in srgb, var(--accent-text) 13%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent-text) 38%, transparent);
  --success: #3f6b3f;
  --success-ink: #f9f6f0;
  --success-soft: #e3e8d9;
  --success-strong: #33552f;
  --warning: #a2701a;
  --warning-ink: #f9f6f0;
  --warning-soft: #eee0bf;
  --warning-strong: #855715;
  --danger: #b23a2e;
  --danger-ink: #f9f6f0;
  --danger-soft: #f0dcd6;
  --danger-strong: #93291f;
  --chart-1: #b23a2e;
  --chart-2: #1c1a17;
  --chart-3: #a2701a;
  --chart-4: #45573f;
  --chart-5: #615d57;
  --chart-6: #6d7f96;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Newsreader", ui-serif, Georgia, serif;
  --font-sans: "Newsreader", ui-serif, Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 900;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: none;
  --shadow-raised: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.03em;
  --btn-weight: 700;
  --measure: 62ch;

  /* App-owned bands (retro-print) — held constant across modes on purpose:
     the ink band and the mustard band are printed colours, not surfaces. */
  --x-ink-band-bg: #1c1a17;
  --x-ink-band-ink: #f2ecde;
  --x-mustard-bg: #e0b458;
  --x-mustard-ink: #241d12;
}

html[data-theme="dark"] {
  --canvas: #171310;
  --surface: #211c17;
  --surface-2: #2b241c;
  --border: color-mix(in srgb, var(--ink) 22%, transparent);
  --border-strong: color-mix(in srgb, var(--ink) 42%, transparent);
  --ink: #f2ecde;
  --muted: #b6ae9c;
  --accent: #f2ecde;
  --accent-hover: #e3dbc4;
  --accent-ink: #1c1a17;
  --accent-text: #e2694f;
  --accent-strong: #f2ecde;
  --accent-soft: color-mix(in srgb, var(--accent-text) 20%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent-text) 42%, transparent);
  --success: #7ea36f;
  --success-ink: #171310;
  --success-soft: #2a3323;
  --success-strong: #a4c795;
  --warning: #d0a04c;
  --warning-ink: #171310;
  --warning-soft: #372c17;
  --warning-strong: #e3bd74;
  --danger: #e2694f;
  --danger-ink: #171310;
  --danger-soft: #3a241d;
  --danger-strong: #ec8b74;
  --chart-1: #e2694f;
  --chart-2: #f2ecde;
  --chart-3: #d0a04c;
  --chart-4: #92a884;
  --chart-5: #b6ae9c;
  --chart-6: #93a9c2;
}

/*
 * app.css — Bound Quarterly's own CSS: the paper ground, the ink and
 * mustard bands, the stamped numerals, the ledger and the request slip.
 * Tokens only. Loads last, after design.css and theme.css.
 */

/* ---- The ground: a faint printed grain over the paper canvas. Black/white
   at low opacity is depth, not a colour, so it is allowed outside theme.css. */
.paper-ground {
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.05) 0.6px, transparent 0.6px),
    radial-gradient(rgba(0, 0, 0, 0.035) 0.6px, transparent 0.6px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2.5px 3.5px;
}
html[data-theme="dark"] .paper-ground {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.045) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.6px, transparent 0.6px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2.5px 3.5px;
}

/* ---- Cracked-ink headline: a soft double-strike, like type pressed twice
   a hair off-register. Both shadows read off existing tokens. */
.ink-crack {
  text-shadow:
    0.03em 0.045em 0 color-mix(in srgb, var(--accent-text) 30%, transparent),
    -0.02em -0.01em 0 color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- Stamped numeral marking the one true sequence. ---- */
.stamp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--accent-text);
  border-radius: 999px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  transform: rotate(-6deg);
}

/* ---- This season's selection: the one grid that staggers. Rests fully
   visible by default; app.js arms it only once JS has run, so a visitor
   with no script still sees the complete, correct page. ---- */
.selection-grid.js-armed .selection-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out, ease), transform 0.6s var(--ease-out, ease);
}
.selection-grid.js-armed.is-in .selection-card {
  opacity: 1;
  transform: none;
}
.selection-grid.js-armed .selection-card:nth-child(1) { transition-delay: 0ms; }
.selection-grid.js-armed .selection-card:nth-child(2) { transition-delay: 120ms; }
.selection-grid.js-armed .selection-card:nth-child(3) { transition-delay: 240ms; }

/* ---- Ledger: two-column steps against hairline rules, like a colophon. ---- */
.ledger-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.25rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
}
.ledger-row:last-child { border-bottom: 1px solid var(--border); }
.ledger-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-text);
  font-weight: 700;
}
.ledger-label {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.ledger-text {
  grid-column: 2;
  color: var(--muted);
  max-width: 46rem;
}
@media (min-width: 48rem) {
  .ledger-row { grid-template-columns: 3rem 12rem 1fr; }
  .ledger-label { grid-column: 2; }
  .ledger-text { grid-column: 3; }
}

/* ---- Reader's Note: the dark, entirely still statement band. ---- */
.ink-band {
  background: var(--x-ink-band-bg);
  color: var(--x-ink-band-ink);
}

/* ---- What's in the box: the mustard band, a plain list, no cards. ---- */
.mustard-band {
  background: var(--x-mustard-bg);
  color: var(--x-mustard-ink);
}
.contents-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding-block: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--x-mustard-ink) 22%, transparent);
}
.contents-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--x-mustard-ink) 22%, transparent); }
.contents-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  opacity: 0.75;
}
.contents-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
@media (min-width: 40rem) {
  .contents-row { grid-template-columns: 14rem 1fr; align-items: baseline; }
}

/* ---- The request slip: the subscription form, styled like a printed
   order form with a perforated top edge. ---- */
.slip {
  position: relative;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-card);
}
.slip::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.5rem;
  right: 1.5rem;
  height: 0;
  border-top: 2px dashed var(--border-strong);
}

/* Respect the visitor's motion preference: nothing primed, nothing moves. */
html.reduced-motion .selection-grid.js-armed .selection-card {
  opacity: 1;
  transform: none;
  transition: none;
}