/* meatfriday.theordinarytimes.news
   Design tokens are lifted verbatim from the TOT house set already deployed on
   calendars.theordinarytimes.news, so this reads as a sibling and not as a
   one-off. Nothing here is a framework default.

   The serif stack is a decision, not an accident: Iowan Old Style and Palatino
   are the two old-style faces that ship on Apple and Windows respectively, they
   carry the broadsheet nameplate character brand.md asks for, and they cost no
   network request. No webfont is loaded, so there is no third party on this
   page at all.

   The accent color is set at runtime from the visitor's own date. See the
   accent script in each page; what it is keyed to is deliberately not
   spelled out here or anywhere on the page. */

:root {
  --page-bg: #FAF7F0;
  --ink: #23211D;
  --quiet: #6B6459;

  /* Overwritten by the accent script. Green is the default and the
     newsletter's namesake, so it is the right fallback if scripting is off. */
  --accent-base: #2F6B3F;
  --accent: var(--accent-base);

  --dark-page-bg: #1B1A17;
  --dark-ink: #F3EFE6;
  --dark-quiet: #B4ADA0;
  /* Megan's ruling 2026-08-30 (swatch E). Dark mode only, and a literal
     substitution rather than a lightened mix of #8F1D21, because the mix is
     exactly what she rejected. */
  --dark-accent-red: #B91C1C;

  --rule: color-mix(in srgb, var(--ink) 26%, var(--page-bg));
  --edge: color-mix(in srgb, var(--ink) 48%, var(--page-bg));

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: var(--dark-page-bg);
    --ink: var(--dark-ink);
    --quiet: var(--dark-quiet);
    --accent: var(--accent-dark-override, color-mix(in srgb, var(--accent-base) 55%, #FFFFFF));
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page-bg: var(--dark-page-bg);
  --ink: var(--dark-ink);
  --quiet: var(--dark-quiet);
  --accent: var(--accent-dark-override, color-mix(in srgb, var(--accent-base) 55%, #FFFFFF));
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

/* ---------------------------------------------------------------- page 1 */

.sheet {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}

.ask {
  font-family: var(--sans);
  font-size: clamp(.9rem, 2.4vw, 1.0625rem);
  letter-spacing: .01em;
  color: var(--quiet);
  margin: 0;
  align-self: start;
}

.verdict {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0;
}

/* The one element on this page a person clearly decided: the answer is set
   like a broadsheet nameplate, with hairline rules that stop at the exact
   width of the word rather than running the full column. */
.verdict-word {
  font-size: clamp(5rem, 33vw, 18rem);
  line-height: .84;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--accent);
  margin: 0;
  padding: .06em 0 .10em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.verdict-word[data-state="loading"] {
  color: var(--rule);
}

/* The walker. Same sheet, same rules, same restraint as the verdict, so
   paging forward feels like turning a card rather than changing sites. */
.walk { display: grid; justify-items: center; gap: 0; max-width: 22ch; }
.walk-date {
  font-size: clamp(2rem, 9.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  padding: .18em 0 .2em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.walk-feast {
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--accent);
  margin: 1rem 0 0;
}
.walk-note {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--quiet);
  margin: .85rem 0 0;
}
.walk-note:empty { display: none; }

.list-title {
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 1.75rem 0 .35rem;
}

.jump {
  align-self: end;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

/* A newspaper jump line, not a rounded call to action card. Square corners on
   purpose: the only generous radius on the site is the favicon's. */
.jump-link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: .7em 1.15em;
  border: 1px solid var(--edge);
  border-radius: 0;
  font-family: var(--sans);
  font-size: clamp(.875rem, 2.2vw, 1rem);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
}
.jump-link:hover, .jump-link:focus-visible { background: var(--accent); color: var(--page-bg); border-color: var(--accent); }
.jump-link .arrow { font-family: var(--serif); transition: transform .18s ease; }
.jump-link:hover .arrow { transform: translateX(.22em); }

@media (prefers-reduced-motion: reduce) {
  .jump-link .arrow { transition: none; }
}

.colophon {
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--quiet);
  margin: 0;
}
.colophon a { text-decoration-color: var(--rule); text-underline-offset: .2em; }

/* ---------------------------------------------------------------- page 2 */

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2rem) 4rem;
}

.back {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--quiet);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .5em;
}
.back:hover { color: var(--accent); }

.lede { margin: 1.5rem 0 3.5rem; }
.lede-label {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--quiet);
  margin: 0 0 .75rem;
}
.lede-date {
  font-size: clamp(1.9rem, 7vw, 3.25rem);
  line-height: 1.08;
  margin: 0;
  font-weight: 400;
  letter-spacing: -.015em;
}
.lede-feast {
  font-size: clamp(1.05rem, 3.2vw, 1.375rem);
  line-height: 1.35;
  color: var(--accent);
  margin: .6rem 0 0;
}
.lede-note {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--quiet);
  margin: 1rem 0 0;
}

h2 {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--quiet);
  margin: 3rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}

.years { }

.year-block {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, var(--page-bg));
}
.year-block > .y {
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--quiet);
  padding-top: .15rem;
}
.year-block ul { list-style: none; margin: 0; padding: 0; }
.year-block li { margin: 0 0 .3rem; line-height: 1.4; }
.year-block li:last-child { margin-bottom: 0; }
/* Each list entry carries its own color via --entry-accent-light (and, for
   the one entry that needs it, --entry-accent-dark), set per <li> at render
   time from the generated table. Falls back to the plain ink/quiet pair if
   a color is somehow missing, so nothing goes unstyled. */
.d {
  font-variant-numeric: tabular-nums;
  color: var(--entry-accent-light, var(--ink));
}
.f { color: var(--entry-accent-light, var(--quiet)); font-size: .9375rem; }
.f::before { content: " "; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d { color: var(--entry-accent-dark, var(--entry-accent-light, var(--ink))); }
  :root:not([data-theme="light"]) .f { color: var(--entry-accent-dark, var(--entry-accent-light, var(--quiet))); }
}
:root[data-theme="dark"] .d { color: var(--entry-accent-dark, var(--entry-accent-light, var(--ink))); }
:root[data-theme="dark"] .f { color: var(--entry-accent-dark, var(--entry-accent-light, var(--quiet))); }

.year-block.is-now { border-left: 3px solid var(--accent); padding-left: .75rem; margin-left: -.75rem; }

.about p { font-size: .9375rem; line-height: 1.65; margin: 0 0 1rem; }
.about .fine { font-family: var(--sans); font-size: .8125rem; color: var(--quiet); line-height: 1.7; }
.about a { text-underline-offset: .2em; }

@media (max-width: 30rem) {
  .year-block { grid-template-columns: 1fr; gap: .35rem; }
}