/* ==========================================================================
   Orderbook
   A newspaper front-of-book layout in the Financial Times idiom: pink stock,
   serif headlines, sans standfirsts, hairline rules and a claret spot colour.
   One stylesheet, no build step. Ordered: tokens, reset, layout, typography,
   components, utilities.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------
   The FT palette: paper is a warm pink stock, text is a soft black rather
   than pure black, and colour is rationed to claret (brand), oxford blue
   (links) and teal (secondary). Dark mode redefines colour only, so every
   rule below is written once. */

:root {
  --paper:        #fff1e5;  /* FT pink */
  --paper-raised: #ffffff;
  --paper-sunken: #f2e5da;
  --paper-inked:  #262a33;

  --ink:          #33302e;
  --ink-muted:    #66605c;
  --ink-faint:    #857c76;
  --ink-reverse:  #fff1e5;

  --rule:         #e6d9ce;
  --rule-strong:  #ccc1b7;
  --rule-black:   #33302e;

  --claret:       #990f3d;
  --claret-hover: #7a0c31;
  --oxford:       #0f5499;
  --oxford-hover: #0a3d70;
  --teal:         #0d7680;
  --wash:         #f2e5da;

  --bid:          #0d7680;  /* teal below the spread */
  --ask:          #990f3d;  /* claret above it */
  --danger:       #990f3d;

  --shadow: 0 1px 0 rgb(51 48 46 / 4%), 0 10px 28px -20px rgb(51 48 46 / 40%);

  --font-serif: Georgia, "Times New Roman", "Droid Serif", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell:        75rem;
  --shell-narrow: 40rem;
  --gutter:       clamp(1rem, 4vw, 2rem);
  --band-gap:     clamp(2.25rem, 5vw, 3.5rem);
  --radius:       2px;
  --radius-sm:    2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #1c1a18;
    --paper-raised: #242119;
    --paper-sunken: #221f1c;
    --paper-inked:  #0f0e0d;

    --ink:          #f2e9e0;
    --ink-muted:    #a89f97;
    --ink-faint:    #857c74;
    --ink-reverse:  #1c1a18;

    --rule:         #3a3532;
    --rule-strong:  #524b46;
    --rule-black:   #f2e9e0;

    --claret:       #e0506f;
    --claret-hover: #ef7a92;
    --oxford:       #6faae8;
    --oxford-hover: #96c4f2;
    --teal:         #3fa8b3;
    --wash:         #2a2622;

    --bid:          #3fa8b3;
    --ask:          #e0506f;
    --danger:       #e0506f;

    --shadow: 0 1px 0 rgb(0 0 0 / 30%), 0 12px 30px -20px rgb(0 0 0 / 80%);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.014em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--oxford); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--oxford-hover); }

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

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

/* --- Layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--shell-narrow); }

.main { flex: 1 0 auto; }

.band { padding-block: var(--band-gap); border-top: 1px solid var(--rule); }
.band--cta { background: var(--paper-sunken); text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Masthead ------------------------------------------------------------- */
/* A newspaper front page: hairline above, wordmark and dateline, heavy rule
   below to close the nameplate. */

.masthead { border-top: 3px solid var(--claret); background: var(--paper); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 3.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule-black);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
}

/* An offer resting above a bid — the nameplate device. */
.wordmark__mark {
  width: 13px;
  height: 15px;
  flex: none;
  background:
    linear-gradient(var(--ask), var(--ask)) 0 1px / 13px 4px no-repeat,
    linear-gradient(var(--bid), var(--bid)) 0 10px / 8px 4px no-repeat;
}

.wordmark__text {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* The top-level domain takes the spot colour, the way a masthead sets off a
   subtitle from the title. */
.wordmark__tld { color: var(--claret); }

.masthead__dateline {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
  padding-left: 0.9rem;
  margin-left: 0.9rem;
  border-left: 1px solid var(--rule-strong);
}

@media (max-width: 44rem) { .masthead__dateline { display: none; } }

.nav {
  display: flex;
  gap: clamp(0.85rem, 3vw, 1.6rem);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav__link {
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
}
.nav__link:hover { color: var(--claret); }
.nav__link.is-current { border-bottom-color: var(--claret); color: var(--claret); }

/* --- Section labels ------------------------------------------------------- */

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--claret);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
}

.eyebrow .dot { color: var(--rule-strong); }

.section-title {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
}

/* A ruled section heading, as used above a broadsheet package. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--rule-black);
  padding-bottom: 0.55rem;
  margin-bottom: 1.75rem;
}

.section-link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--claret);
}
.section-link:hover { text-decoration: underline; }

/* --- Hero (the front-page splash) ----------------------------------------- */

.hero { padding-block: clamp(2rem, 5vw, 3.25rem); }

.hero__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
  /* The rule between the splash and the rail, as in a printed page. */
  .ladder { border-left: 1px solid var(--rule); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
}

.hero__title {
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-block: 0.55rem 0.9rem;
}

/* The standfirst: sans-serif, slightly larger than body, as FT sets it. */
.lede {
  font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 44ch;
  margin-bottom: 1.5rem;
}

.lede--tight { margin-bottom: 1.1rem; max-width: 54ch; }
.page-head--centred .lede, .band--cta .lede { margin-inline: auto; }

/* --- Depth ladder (the live book) ----------------------------------------- */
/* Filled over a websocket by static/js/orderbook.js. Bar widths are set from
   script via the CSSOM, which the strict style-src permits — unlike a style
   attribute in the markup. */

.ladder {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  user-select: none;
}

@media (min-width: 60rem) { .ladder { display: block; } }

.ladder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ladder__symbol { color: var(--ink); font-weight: 700; }

.ladder__state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-faint); }

/* Dark until the socket is open, then it takes the bid colour and breathes. */
.ladder__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
  flex: none;
}

.ladder.is-live .ladder__dot { background: var(--bid); animation: ladder-pulse 2s ease-in-out infinite; }
.ladder.is-live .ladder__state { color: var(--bid); }
.ladder.is-offline .ladder__dot { background: var(--ask); }
.ladder.is-offline .ladder__state { color: var(--ask); }

.ladder__row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  align-items: center;
  gap: 0.55rem;
  padding-block: 0.24rem;
}

.ladder__px {
  font-variant-numeric: tabular-nums;
  padding: 1px 3px;
  margin: -1px -3px;
  border-radius: 2px;
  /* No transition on the way in, so a change lands at once; the fade is on the
     way out, as the class is removed. */
  transition: background-color 420ms ease-out;
}

.ladder__bar {
  height: 7px;
  display: block;
  width: 0;
  transition: width 180ms ease-out;
}

.ladder__side--ask .ladder__bar { background: color-mix(in srgb, var(--ask) 55%, transparent); }
.ladder__side--bid .ladder__bar { background: color-mix(in srgb, var(--bid) 55%, transparent); }
.ladder__side--ask .ladder__px { color: var(--ask); }
.ladder__side--bid .ladder__px { color: var(--bid); }

.ladder__side--ask .ladder__px.is-flash {
  background: color-mix(in srgb, var(--ask) 24%, transparent);
  transition: none;
}
.ladder__side--bid .ladder__px.is-flash {
  background: color-mix(in srgb, var(--bid) 24%, transparent);
  transition: none;
}

/* Before the first frame arrives — and if the feed goes away — hold the rail's
   shape with a dimmed ladder rather than collapsing to an empty box. */
.ladder:not(.is-live) .ladder__bar { width: 34%; opacity: 0.28; }
.ladder:not(.is-live) .ladder__px { color: var(--ink-faint); }

.ladder__spread {
  display: flex;
  justify-content: space-between;
  border-block: 1px solid var(--rule-strong);
  margin-block: 0.45rem;
  padding-block: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes ladder-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --- Subscribe form ------------------------------------------------------- */

.subscribe { max-width: 30rem; }
.band--cta .subscribe, .page-head--centred .subscribe { margin-inline: auto; }

.subscribe__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.subscribe__input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.68rem 0.85rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.subscribe__input::placeholder { color: var(--ink-faint); }

.subscribe__input:focus-visible {
  outline: none;
  border-color: var(--oxford);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oxford) 25%, transparent);
}

.subscribe__button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.68rem 1.3rem;
  color: #fff;
  background: var(--claret);
  border: 1px solid var(--claret);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.subscribe__button:hover { background: var(--claret-hover); border-color: var(--claret-hover); }
.subscribe__button[disabled] { opacity: 0.6; cursor: progress; }

.subscribe__status {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal);
  min-height: 1.4em;
  margin-top: 0.55rem;
}
.subscribe__status:empty { margin-top: 0; min-height: 0; }
.subscribe__status.is-error { color: var(--danger); }

.subscribe__fine {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
  max-width: 38ch;
}
.band--cta .subscribe__fine, .page-head--centred .subscribe__fine { margin-inline: auto; }

/* Honeypot: in the layout but off-screen, so scripted submitters fill it in
   and readers never see it. */
.subscribe__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pillars (the three-column package) ----------------------------------- */

.pillars {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.75rem;
}

.pillar { padding: 0 clamp(1rem, 2.5vw, 1.75rem); }
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }

@media (min-width: 48rem) {
  .pillar + .pillar { border-left: 1px solid var(--rule); }
}
@media (max-width: 47.99rem) {
  .pillar { padding-inline: 0; }
  .pillar + .pillar { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 1.5rem; }
}

.pillar h3 { font-size: 1.1rem; margin-block: 0.45rem 0.4rem; }
.pillar p { color: var(--ink-muted); font-size: 0.92rem; }

.pillar__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--claret);
  display: block;
}

/* --- Issue cards ---------------------------------------------------------- */

.issue-list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Hairline gutters between stories, print-style, rather than boxed cards. */
.issue-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
}
.issue-card:first-child { padding-left: 0; }
.issue-card:last-child { padding-right: 0; }

@media (min-width: 48rem) {
  .issue-card + .issue-card { border-left: 1px solid var(--rule); }
}
@media (max-width: 47.99rem) {
  .issue-card { padding-inline: 0; }
  .issue-card + .issue-card { border-top: 1px solid var(--rule); padding-top: 1.4rem; margin-top: 1.4rem; }
}

.issue-card__meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.issue-card__number { color: var(--claret); }
.issue-card__title { font-size: 1.28rem; line-height: 1.15; }
.issue-card__title a { color: var(--ink); text-decoration: none; }
.issue-card__title a:hover { color: var(--claret); text-decoration: underline; }
.issue-card__summary { color: var(--ink-muted); font-size: 0.92rem; flex: 1; }

.issue-card__read {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Archive -------------------------------------------------------------- */

.year-group + .year-group { margin-top: 2.5rem; }

.year-group__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rule-black);
}

.year-group__list { list-style: none; margin: 0; padding: 0; }

.archive-row {
  display: grid;
  gap: 0.3rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.archive-row__meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.archive-row__number { color: var(--claret); }

.archive-row__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.archive-row__title:hover { color: var(--claret); text-decoration: underline; }

.archive-row__summary { color: var(--ink-muted); font-size: 0.92rem; }

.empty { text-align: center; color: var(--ink-muted); }
.empty .subscribe { margin-top: 2rem; }

/* --- Page heads ----------------------------------------------------------- */

.page-head { padding-block: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 3vw, 1.75rem); }
.page-head--centred { text-align: center; }
.page-title { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-block: 0.5rem 0.9rem; }

.note { color: var(--ink-faint); font-size: 0.88rem; max-width: 46ch; margin-inline: auto; }

.cta-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.75rem;
}

.message__form { margin-top: 2.25rem; }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-block;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.62rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--claret);
  border: 1px solid var(--claret);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--claret-hover); border-color: var(--claret-hover); color: #fff; }

.button--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.button--quiet:hover { background: var(--paper-sunken); color: var(--ink); border-color: var(--ink-faint); }

.button--link {
  background: none;
  border-color: transparent;
  color: var(--ink-muted);
  font-weight: 600;
}
.button--link:hover { background: none; color: var(--ink); text-decoration: underline; }

.confirm-form {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* --- Issue page ----------------------------------------------------------- */

.issue__head { padding-block: clamp(2rem, 5vw, 3.25rem) 1.25rem; }

.issue__title {
  font-size: clamp(2rem, 5.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin-block: 0.6rem 0.9rem;
}

/* A rule closes the headline block, as in the paper — under the standfirst, or
   under the byline when there is one. */
.issue__head .lede { max-width: none; margin-bottom: 0; }
.issue__head .shell > :last-child {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-black);
}

.byline {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1rem;
}
.byline__name { color: var(--claret); }

.issue__foot {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 2px solid var(--rule-black);
  padding-top: 2rem;
  padding-bottom: var(--band-gap);
}

.issue__subscribe .section-title { margin-bottom: 0.9rem; }

.issue-nav {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.issue-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
}
.issue-nav__link:first-child { padding-left: 0; }
.issue-nav__link:hover .issue-nav__title { color: var(--claret); text-decoration: underline; }
.issue-nav__link--next { text-align: right; }

@media (min-width: 48rem) {
  .issue-nav__link + .issue-nav__link { border-left: 1px solid var(--rule); }
}

.issue-nav__dir {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--claret);
}

.issue-nav__title { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; line-height: 1.2; }

.about__subscribe { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 2px solid var(--rule-black); }
.about__subscribe .section-title { margin-bottom: 0.9rem; }

/* --- Prose (rendered Markdown) -------------------------------------------- */
/* Body copy is set in the serif at a comfortable measure, the way a broadsheet
   sets its features. */

.prose {
  font-family: var(--font-serif);
  font-size: 1.075rem;
  line-height: 1.68;
}

.prose > * + * { margin-top: 1.3em; }

.prose h2 {
  font-size: 1.45rem;
  line-height: 1.15;
  margin-top: 2.1em;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}

.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }

.prose strong { font-weight: 700; }

/* A pulled quotation, ruled top and bottom in the paper's manner. */
.prose blockquote {
  margin-inline: 0;
  padding: 1.1em 0;
  border-block: 1px solid var(--rule-black);
  font-size: 1.2rem;
  line-height: 1.35;
  font-style: normal;
  color: var(--ink);
}
.prose blockquote p { font-family: var(--font-serif); }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.3em;
}

.prose pre {
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.5;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.2em; }

/* Data tables get the sans face and tabular figures, as a paper sets a table. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.prose th, .prose td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.prose thead th { border-bottom: 2px solid var(--rule-black); }

.prose th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose td:not(:first-child), .prose th:not(:first-child) { font-variant-numeric: tabular-nums; }

.prose figure { margin: 0; }
.prose figcaption { font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.5rem; }

.prose .admonition {
  border-left: 3px solid var(--claret);
  padding: 0.9rem 1.1rem;
  background: var(--paper-sunken);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.prose .admonition > * + * { margin-top: 0.7em; }
.prose .admonition-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--claret);
  margin: 0;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 3px solid var(--claret);
  background: var(--paper-sunken);
  padding-block: 2rem 2.5rem;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.footer__inner { display: grid; gap: 0.7rem; }
.footer__line { color: var(--ink-muted); max-width: 48ch; }
.footer__line strong { color: var(--ink); font-family: var(--font-serif); font-size: 1.05rem; }

.footer__meta { display: flex; flex-wrap: wrap; gap: 1.1rem; font-weight: 600; }
.footer__meta a { text-decoration: none; }
.footer__meta a:hover { text-decoration: underline; }

.footer__fine { color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.4rem; }

/* --- Print ---------------------------------------------------------------- */

@media print {
  .masthead, .footer, .subscribe, .issue-nav, .band--cta, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}