/* =========================================================================
   The Durham Dispatch — site theme
   =========================================================================
   The single source of truth for the look of EVERY page: the public
   gazette, dispatch permalinks, and the admin area alike.

   Sections 1-9 are lifted verbatim from the approved static design and
   must not be restyled. Section 10 extends the same vocabulary to the
   admin chrome that the static page never needed (forms, buttons,
   tables), so the CMS never invents a second visual language.

   Light is the default in every case. Dark applies only when the toggle
   sets data-theme="dark" — a system preference must never grey out the
   aged-paper ground. Server-render the light theme so dark-mode
   visitors get no flash of the wrong palette.
   ========================================================================= */

/* The gazette is a paper stock first. A system dark preference must not
   grey out the aged-paper ground, so light is the default in every case
   and dark is opt-in through the toggle only. */
:root {
  --paper: #F0E5CB;
  --paper-2: #E7D9B6;
  --ink: #241B0E;
  --ink-soft: #4A3A23;
  --muted: #7B6743;
  --rule: #C9B68E;
  --rule-strong: #8E7850;
  --stamp: #7B2417;
  --stamp-ink: #7B2417;
  --blue: #33506E;
  --card: #F5EDD9;
  --shadow: rgba(36, 27, 14, 0.12);
  color-scheme: light;
}

/* Candlelight: warm walnut and parchment, never neutral grey. */
:root[data-theme="dark"] {
  --paper: #241B12;
  --paper-2: #17110B;
  --ink: #F1E4C6;
  --ink-soft: #CFBD97;
  --muted: #9C8A6C;
  --rule: #46392A;
  --rule-strong: #6A5940;
  --stamp: #D4785F;
  --stamp-ink: #E08C73;
  --blue: #86A9CE;
  --card: #2C2219;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.2rem 1rem 4rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

/* ---------- The printed sheet ---------- */
.sheet {
  max-width: 52rem;
  margin: 0 auto;
  background: var(--paper);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.34), transparent 60%),
    radial-gradient(100% 70% at 50% 100%, rgba(120, 90, 45, 0.10), transparent 65%);
  border: 1px solid var(--rule-strong);
  padding: 7px;
  box-shadow: 0 2px 10px var(--shadow), 0 18px 40px -28px var(--shadow);
}
.sheet-rule {
  border: 2px solid var(--ink);
  padding: 5px;
}
.wrap {
  border: 1px dotted var(--rule-strong);
  padding: 2.6rem 2.2rem 3rem;
}
@media (max-width: 34rem) {
  body { padding: 0.9rem 0.5rem 2.5rem; }
  .wrap { padding: 1.7rem 1.1rem 2rem; }
}

/* ---------- Masthead ---------- */
.masthead {
  text-align: center;
  padding: 0.4rem 0 0;
}

.cameo {
  width: clamp(88px, 15vw, 116px);
  height: clamp(88px, 15vw, 116px);
  margin: 0 auto 0.7rem;
  display: block;
}
.cameo-field { fill: var(--paper-2); }
.cameo-ring-outer { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.cameo-ring-inner { fill: none; stroke: var(--ink); stroke-width: 1; }
.cameo-bust { fill: var(--ink); }

.paper-name {
  font-family: "Pinyon Script", "Cormorant Garamond", Georgia, cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 8.6vw, 4.5rem);
  line-height: 1.06;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.paper-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 3.4vw, 1.65rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
  color: var(--ink);
}

.band {
  margin: 1.15rem 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 0.42rem 0;
}
.kicker {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-soft);
}

.tagline {
  margin: 1.15rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  text-wrap: balance;
}
.dateline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dateline::before,
.dateline::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule-strong);
}
.dateline span { white-space: nowrap; }
.byline {
  margin: 0.75rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--stamp-ink);
}

/* ---------- Dispatch ---------- */
.dispatch {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.slug {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.slug .no { color: var(--stamp-ink); white-space: nowrap; }
.slug .folio { color: var(--muted); white-space: nowrap; }

.headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 5.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0.9rem 0 0;
  text-wrap: balance;
}
.standfirst {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
  color: var(--ink-soft);
  margin: 0.55rem auto 0;
  max-width: 34rem;
  text-wrap: balance;
}
.standfirst::after {
  content: "";
  display: block;
  width: 3.5rem;
  margin: 1.1rem auto 0;
  border-top: 1px solid var(--rule-strong);
}

.body {
  margin-top: 1.5rem;
  text-align: justify;
  hyphens: auto;
}
@media (min-width: 46rem) {
  .body { columns: 2; column-gap: 2.4rem; }
}
.body p { margin: 0 0 0.95rem; }
.body p:first-of-type::first-letter {
  float: left;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 3.5em;
  line-height: 0.82;
  margin: 0.06em 0.09em 0 0;
  color: var(--stamp-ink);
}
.figure {
  font-variant: small-caps;
  letter-spacing: 0.045em;
  font-weight: 600;
}
.pull {
  column-span: all;
  margin: 1.5rem auto;
  max-width: 32rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.4;
  text-align: center;
  color: var(--stamp-ink);
  text-wrap: balance;
}
.endmark::after {
  content: " ❦";
  color: var(--stamp-ink);
}

/* ---------- Field Dossier ---------- */
.dossier {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
.dossier > h2,
.mini-head {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.dossier .sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  text-align: center;
  color: var(--muted);
  margin: 0.35rem 0 1.6rem;
}
.cast { margin: 0; }
@media (min-width: 42rem) {
  .cast { columns: 2; column-gap: 2.4rem; }
}
.cast > div {
  break-inside: avoid;
  margin: 0 0 1.15rem;
}
.cast dt {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  font-size: 1.1rem;
}
.cast dd {
  margin: 0.15rem 0 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.recurring {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-variant: normal;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stamp-ink);
  border: 1px solid var(--stamp-ink);
  border-radius: 2px;
  padding: 0.12em 0.45em 0.06em;
  vertical-align: 0.18em;
  margin-left: 0.35rem;
  white-space: nowrap;
}

/* ---------- Classifieds ---------- */
.classifieds {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
.registry {
  display: grid;
  gap: 1.5rem;
  margin: 1.6rem 0 0;
}
@media (min-width: 40rem) {
  .registry { grid-template-columns: 1fr 1fr; gap: 1.7rem 2.4rem; }
}
.reg-cat h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stamp-ink);
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.placeholder {
  margin: 0;
  font-size: 0.96rem;
  font-style: italic;
  color: var(--muted);
}
.mini-head {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 1.2rem;
}
.notices {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
@media (min-width: 46rem) {
  .notices { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}
.ad {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1rem 1.05rem;
}
.ad .tag {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stamp-ink);
  margin-bottom: 0.45rem;
}
.ad p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* ---------- Collapsible sections ---------- */
/* Built on <details>/<summary>: works with no JavaScript, is keyboard
   operable and screen-reader announced for free, and degrades to plain
   open content if anything fails. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:focus-visible {
  outline: 2px solid var(--stamp-ink);
  outline-offset: 3px;
}

/* An edition — one day's dispatches under a dated rule. */
.edition { margin-top: 2.8rem; }
.edition > summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.edition > summary::before,
.edition > summary::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule-strong);
}
.edition > summary:hover { color: var(--ink); }
.edition-date { white-space: nowrap; }
.edition-date::after { content: " \25BE"; color: var(--muted); }
.edition[open] .edition-date::after { content: " \25B4"; }
.edition-count {
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--muted);
}
/* Letterspaced caps are too wide for one line on a phone: let the slug and
   the dated rule wrap and centre instead of running off the sheet. */
@media (max-width: 34rem) {
  .slug { flex-wrap: wrap; justify-content: center; gap: 0.2rem 1rem; text-align: center; }
  .slug .folio { white-space: normal; }
  .edition > summary { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; }
  .edition > summary::before,
  .edition > summary::after { flex-basis: 100%; }
}
/* The dated rule already separates editions; the first dispatch inside
   one must not draw a second rule directly beneath it. */
.edition .dispatch:first-of-type {
  border-top: 0;
  margin-top: 1.6rem;
  padding-top: 0;
}

/* A collapsible standing section — Dossier, Classifieds. */
.panel {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
.panel > summary { text-align: center; }
.panel > summary h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
}
.panel > summary h2::after { content: " \25BE"; color: var(--muted); font-size: 0.7em; }
.panel[open] > summary h2::after { content: " \25B4"; }
.panel > summary .sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

/* Collapsed registry category: the heading rule stays, the list folds. */
.reg-cat > summary h3 { margin-bottom: 0; }
.reg-cat > summary h3::after { content: "\25BE"; float: right; color: var(--muted); }
.reg-cat[open] > summary h3::after { content: "\25B4"; }
.reg-cat > summary + * { margin-top: 0.6rem; }

/* ---------- Registry listings ---------- */
/* A category with a long list breaks out of the 2-up grid and sets its
   own entries in columns, so one big category cannot squash the rest. */
.reg-cat--wide { grid-column: 1 / -1; }

.reg-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reg-list li {
  break-inside: avoid;
  margin: 0 0 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.reg-list li:last-child { border-bottom: 0; }

.reg-cat--wide .reg-list { column-gap: 2.2rem; }
@media (min-width: 40rem) {
  .reg-cat--wide .reg-list { columns: 2; }
}
@media (min-width: 62rem) {
  .reg-cat--wide .reg-list { columns: 3; }
}

.reg-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.25;
  display: block;
}
.reg-name a { text-decoration: none; }
.reg-name a:hover { text-decoration: underline; }
.reg-note {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.12rem;
}
.reg-contact {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ---------- Colophon ---------- */
.colophon {
  margin-top: 3.4rem;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.colophon p { margin: 0 0 0.85rem; }
.colophon strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.colophon .device {
  font-size: 1.3rem;
  color: var(--rule-strong);
  margin-bottom: 1rem;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.45em 0.7em 0.35em;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }

@media print {
  details > summary { display: none; }
  body { padding: 0; background: #fff; }
  .theme-toggle { display: none; }
  .sheet { box-shadow: none; max-width: none; }
}

/* =========================================================================
   10. Admin chrome
   =========================================================================
   Not present in the static design — these extend the gazette vocabulary
   to the CMS. Same tokens, same three faces, same rules-and-small-caps
   logic. No new colors.
   ========================================================================= */

/* ---------- Links ---------- */
a {
  color: var(--stamp-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--ink); }
a:focus-visible {
  outline: 2px solid var(--stamp-ink);
  outline-offset: 2px;
}

/* ---------- Admin bar ---------- */
.admin-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--ink);
}
.admin-bar .mark {
  font-family: "Pinyon Script", "Cormorant Garamond", Georgia, cursive;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.admin-nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}
.admin-nav a:hover { color: var(--ink); }
.admin-nav a[aria-current="page"] {
  color: var(--stamp-ink);
  border-bottom-color: var(--stamp-ink);
}

/* ---------- Section headings ---------- */
.admin-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

/* ---------- Forms ---------- */
.field { margin: 0 0 1.3rem; }
.field > label,
.label {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.field .hint {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--muted);
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
select {
  width: 100%;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
}
textarea {
  min-height: 16rem;
  line-height: 1.55;
  resize: vertical;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--stamp-ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--stamp-ink);
}
.field-row {
  display: grid;
  gap: 1.3rem;
}
@media (min-width: 40rem) {
  .field-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.98rem;
}
.check input { width: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.62em 1.25em 0.52em;
  cursor: pointer;
}
.btn:hover { background: var(--paper-2); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }
.btn-primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-soft); color: var(--paper); }
.btn-danger { color: var(--stamp-ink); border-color: var(--stamp-ink); }
.btn-danger:hover { background: var(--stamp-ink); color: var(--paper); }
.btn-ghost { border-color: var(--rule-strong); color: var(--muted); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.6rem;
}

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.table th {
  text-align: left;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  padding: 0 0.7rem 0.5rem 0;
}
.table td {
  border-bottom: 1px solid var(--rule);
  padding: 0.75rem 0.7rem 0.75rem 0;
  vertical-align: baseline;
}
.table tr:last-child td { border-bottom: 0; }
.table .title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
}
.table .actions {
  text-align: right;
  white-space: nowrap;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.table .actions a { margin-left: 0.9rem; text-decoration: none; }
.table-scroll { overflow-x: auto; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.16em 0.5em 0.1em;
  white-space: nowrap;
}
.pill-published { color: var(--stamp-ink); }
.pill-draft { color: var(--muted); }

/* ---------- Login ---------- */
.login {
  max-width: 22rem;
  margin: 3rem auto;
  text-align: center;
}
.login .cameo { width: 84px; height: 84px; }
.login .field > label { text-align: left; }

/* ---------- Editor / live preview split ---------- */
.editor-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 62rem) {
  .editor-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; }
}
.preview-pane {
  border: 1px dotted var(--rule-strong);
  padding: 1.6rem 1.4rem;
  background: var(--paper);
}
.preview-pane .body { columns: 1; }

/* ---------- Flash messages ---------- */
.flash {
  border-left: 3px solid var(--stamp-ink);
  background: var(--card);
  padding: 0.75rem 1rem;
  margin-bottom: 1.6rem;
  font-size: 0.96rem;
}
.flash-error { color: var(--stamp-ink); }

/* ---------- Affiliate disclosure ----------
   Required near product/Registry listings and in the colophon by the
   Amazon Associates Operating Agreement and FTC rules. Editable copy,
   but the element must not be removed. */
.disclosure {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--muted);
  margin: 1.2rem 0 0;
}

/* =========================================================================
   11. Multi-page navigation — the Archive
   =========================================================================
   Every page carries the archive. On wide screens it is a rail beside the
   sheet, set like a ruled index card; below that it folds into a drawer
   under the masthead. Both are <details>, so they work with scripts off. */

/* The masthead logotype links home without looking like a link. */
.masthead-link { color: inherit; text-decoration: none; display: block; }
.masthead-link .paper-name,
.masthead-link .paper-sub { display: block; }

/* Sheet and rail side by side; the rail appears only when there is room. */
.layout { max-width: 52rem; margin: 0 auto; }
.archive-rail { display: none; }
@media (min-width: 74rem) {
  .layout {
    max-width: 70rem;
    display: grid;
    grid-template-columns: minmax(0, 52rem) 16rem;
    gap: 2rem;
    align-items: start;
    justify-content: center;
  }
  .archive-rail {
    display: block;
    position: sticky;
    top: 2.2rem;
    max-height: calc(100vh - 4.4rem);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--rule-strong);
    outline: 1px solid var(--rule);
    outline-offset: 3px;
    padding: 1.2rem 1.1rem 1.1rem;
    box-shadow: 0 2px 10px var(--shadow);
  }
  .archive-drawer { display: none; }
}

.arc-head {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
}
.arc-front,
.arc-all {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--stamp-ink);
  text-decoration: none;
}
.arc-front { margin: 0 0 0.6rem; }
.arc-all { margin: 0.9rem 0 0; text-align: right; }
.arc-front:hover,
.arc-all:hover { text-decoration: underline; }

.arc-month { border-top: 1px solid var(--rule); }
.arc-month > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0 0.45rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.arc-month > summary::-webkit-details-marker { display: none; }
.arc-month > summary::after { content: "\25BE"; margin-left: auto; color: var(--muted); }
.arc-month[open] > summary::after { content: "\25B4"; }
.arc-count { font-weight: 400; letter-spacing: 0.1em; color: var(--muted); }

.arc-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.arc-list a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55rem;
  padding: 0.4rem 0.45rem;
  margin: 0 -0.45rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.arc-list a:hover { background: var(--paper-2); }
.arc-list a[aria-current="page"] {
  background: var(--paper-2);
  border-left-color: var(--stamp-ink);
}
.arc-no {
  grid-row: span 2;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--stamp-ink);
  padding-top: 0.2rem;
}
.arc-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
}
.arc-date {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--muted);
}

/* Narrow screens: the same list, folded under the masthead. */
.archive-drawer {
  margin: 1.1rem 0 0;
  border: 1px solid var(--rule-strong);
  background: var(--card);
}
.archive-drawer > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  padding: 0.6rem 0.8rem 0.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.archive-drawer > summary::-webkit-details-marker { display: none; }
.archive-drawer > summary::after { content: " \25BE"; color: var(--muted); }
.archive-drawer[open] > summary::after { content: " \25B4"; }
.drawer-body { padding: 0.2rem 1rem 1rem; border-top: 1px solid var(--rule); }
.drawer-body .arc-front { margin-top: 0.7rem; }

/* The dated rule over an edition or a single dispatch page. */
.edition-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2.6rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.edition-rule::before,
.edition-rule::after { content: ""; flex: 1; border-top: 1px solid var(--rule-strong); }
.edition-rule + .dispatch { border-top: 0; margin-top: 1.6rem; padding-top: 0; }
.edition-rule .edition-date::after { content: none; }  /* not foldable */
@media (max-width: 34rem) {
  .edition-rule { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; }
  .edition-rule::before,
  .edition-rule::after { flex-basis: 100%; }
}

/* Headlines on the front page link to their own page. */
.headline a { color: inherit; text-decoration: none; }
.headline a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* Earlier dispatches on the front page, and the archive page. */
.recent,
.archive-month {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}
/* The section already draws the rule; the heading must not add a second. */
.recent .mini-head,
.archive-month .mini-head { text-align: center; margin-top: 0; padding-top: 0; border-top: 0; }
.archive-month:first-of-type { margin-top: 2.2rem; }
.teasers { list-style: none; margin: 1.2rem 0 0; padding: 0; }
@media (min-width: 46rem) {
  .teasers { columns: 2; column-gap: 2.4rem; }
}
.teasers li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.teasers a { display: block; padding: 0.9rem 0; color: var(--ink); text-decoration: none; }
.teasers a:hover .teaser-title { text-decoration: underline; text-decoration-thickness: 1px; }
.teaser-meta {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stamp-ink);
}
.teaser-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  margin-top: 0.2rem;
}
.teaser-stand {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}
.recent-more {
  text-align: center;
  margin: 1.6rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
}
.recent-more a { color: var(--stamp-ink); }

/* Previous / next at the foot of a dispatch page. */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
.pager a { display: block; color: var(--ink); text-decoration: none; }
.pager-next { text-align: right; }
.pager-label {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stamp-ink);
}
.pager-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
  margin-top: 0.2rem;
}
.pager a:hover .pager-title { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 34rem) {
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .pager-empty { display: none; }
}

@media print {
  .archive-rail, .archive-drawer, .pager { display: none; }
  .layout { display: block; max-width: none; }
}

/* Tip line in the colophon. */
.tipline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
}
.tipline a {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stamp-ink);
}