/* ==========================================================================
   THE ST. JOHNS TATTLER
   Newspaper bones. Fast, quiet, readable on a phone in a parking lot.
   ========================================================================== */

:root {
  --ink:        #16161a;
  --ink-soft:   #4a4a52;
  --ink-faint:  #86868f;
  --paper:      #fbfaf7;
  --paper-2:    #f2f0ea;
  --rule:       #d8d5cc;
  --rule-hard:  #16161a;
  --accent:     #8c2f22;   /* oxblood — datil pepper, brick, old ink */
  /* The foreground for anything sitting ON a strong fill (accent, accent-2,
     rule-hard). It has to be a token because those fills swing from dark
     oxblood to neon green across the three palettes, and a hardcoded white
     that reads at 8:1 here reads at 1.36:1 two modes over. */
  --on-strong:  #ffffff;
  --accent-2:   #1f4d5c;   /* matanzas blue */
  --flag:       #16161a;
  --live:       #b3261e;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #e8e6e1;
    --ink-soft:  #b0aea8;
    --ink-faint: #7c7a75;
    --paper:     #14141a;
    --paper-2:   #1c1c24;
    --rule:      #33333d;
    --rule-hard: #e8e6e1;
    --accent:    #e0705c;
    --accent-2:  #7fb3c4;
    --flag:      #e8e6e1;
    --live:      #ff6b5e;
    /* The dark palette's strong fills are all light (salmon accent, pale blue
       accent-2, near-white rule-hard), so the foreground that sits on them has
       to flip with them. White on the dark accent is 3.16:1 and white on
       rule-hard is 1.07:1; paper clears everything. */
    --on-strong: #14141a;
  }
}
:root[data-theme="dark"] {
  --ink:       #e8e6e1;
  --ink-soft:  #b0aea8;
  --ink-faint: #7c7a75;
  --paper:     #14141a;
  --paper-2:   #1c1c24;
  --rule:      #33333d;
  --rule-hard: #e8e6e1;
  --accent:    #e0705c;
  --accent-2:  #7fb3c4;
  --flag:      #e8e6e1;
  --live:      #ff6b5e;
  --on-strong: #14141a;   /* see the note in the prefers-color-scheme block */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

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

/* ── Masthead ───────────────────────────────────────────────────────────── */
.masthead { padding-top: .75rem; }

.masthead-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
}
.masthead-actions { display: flex; gap: 1.25rem; }
.masthead-actions a { text-decoration: none; }

.flag {
  display: block; text-align: center; text-decoration: none;
  color: var(--flag); padding: 1.4rem 0 .5rem;
}
.flag-the {
  display: block; font-family: var(--sans); font-size: .8rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .1rem;
}
.flag-name {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.4rem, 8.5vw, 5.2rem);
  line-height: .95; letter-spacing: -.02em;
}
.flag:hover { color: var(--flag); }

.flag-rule {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .1rem; color: var(--ink-faint);
  font-family: var(--sans); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.flag-rule::before, .flag-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ── Section nav ────────────────────────────────────────────────────────── */
/* The section bar.

   It used to be one row with overflow-x: auto and the scrollbar switched off in
   both engines. Twelve items measure about 1,190px and the page is 1,180px wide,
   so on any laptop the last section was cut off with nothing to show it was
   there, and on a phone about two thirds of the paper was behind an invisible
   horizontal scroll. A hidden scrollbar on a row that overflows is a menu that
   lies about its own length.

   It wraps now. Nothing is hidden at any width, and no JavaScript is involved,
   so it works on the first paint and it works if a script fails.

   The sticky is dropped below the wide breakpoint. A wrapped bar is two or three
   rows tall on a phone, and pinning that to the top would eat the screen the
   story is supposed to be on. */
.sections {
  border-top: 2px solid var(--rule-hard);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.sections ul {
  display: flex; flex-wrap: wrap;
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.sections a {
  display: block; white-space: nowrap; text-decoration: none;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .7rem .78rem; color: var(--ink-soft);
  border-bottom: 3px solid transparent;
}
.sections a:hover { color: var(--accent); }
.sections a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px; color: var(--ink);
}
.sections a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--accent);
}

/* Wide enough that the row fits on one line with room to spare. Only here does
   it pin to the top. */
@media (min-width: 1080px) {
  .sections { position: sticky; top: 0; z-index: 40; }
  .sections a { padding: .7rem .95rem; letter-spacing: .07em; }
  /* THE BAR WRAPS AND THAT IS THE DECISION. A one-row bar with overflow-x and
     the scrollbar hidden shipped once and put about two thirds of the paper
     behind an invisible scroll on a phone. ops/test.mjs fails the build if
     anybody reaches for it again, including at this breakpoint. The row fits
     on one line because the number of sections in it is kept to what fits:
     The List carries inNav false in site.json for that reason. The fix for a
     thirteenth section is to decide it does not belong in the top bar, not to
     hide the overflow. */
}

/* Phones. Even spacing, a bigger tap target than the eye needs, and a rule
   between rows so two lines of sections do not read as one run-on line. */
@media (max-width: 640px) {
  .sections ul { justify-content: flex-start; }
  .sections li { flex: 0 0 auto; }
  .sections a {
    font-size: .72rem; letter-spacing: .04em;
    padding: .62rem .62rem; min-height: 2.6rem;
    display: flex; align-items: center;
  }
}

/* Very narrow, where even short words start to crowd. Three to a row, centred,
   so it reads as a block of sections rather than a ragged line. */
@media (max-width: 380px) {
  .sections ul { justify-content: center; }
  .sections a { padding: .58rem .5rem; font-size: .7rem; }
}

main { padding: 2rem 1.25rem 4rem; }

/* ── Story cards / front page ───────────────────────────────────────────── */
.lede-grid {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .lede-grid { grid-template-columns: 2fr 1fr; }
  .lede-grid .rail { border-left: 1px solid var(--rule); padding-left: 2.5rem; }
}

.story-grid {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card { border-top: 1px solid var(--rule); padding-top: .9rem; }
.card.lead { border-top: 3px solid var(--rule-hard); padding-top: 1.1rem; }

.kicker {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .4rem;
}
.kicker.opinion { color: var(--accent-2); }
.kicker.ledger  { color: var(--ink-faint); }

.headline {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.12; margin: 0 0 .5rem;
}
.headline a { text-decoration: none; }
.headline a:hover { text-decoration: underline; }

.card .headline        { font-size: 1.35rem; }
.card.lead .headline   { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.rail .headline        { font-size: 1.1rem; }

.dek {
  color: var(--ink-soft); font-size: .98rem; line-height: 1.5;
  margin: 0 0 .55rem; max-width: var(--measure);
}
.card.lead .dek { font-size: 1.1rem; }

.byline {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-faint);
}
.byline .name { color: var(--ink-soft); font-weight: 600; }
.byline a { text-decoration: none; }

/* ── Article ────────────────────────────────────────────────────────────── */
.article { max-width: 44rem; margin: 0 auto; }

.article-head { border-bottom: 1px solid var(--rule); padding-bottom: 1.4rem; margin-bottom: 1.6rem; }
.article-head .headline { font-size: clamp(2rem, 5.5vw, 3.1rem); margin-bottom: .7rem; }
.article-head .dek { font-size: 1.2rem; max-width: none; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: baseline;
  font-family: var(--sans); font-size: .8rem; color: var(--ink-faint);
  margin-top: 1rem;
}
.article-meta .name { font-weight: 600; color: var(--ink); font-size: .88rem; }

.article-body { font-size: 1.13rem; line-height: 1.72; }
.article-body > * { max-width: var(--measure); }
.article-body p { margin: 0 0 1.25rem; }
.article-body h2 {
  font-size: 1.5rem; margin: 2.4rem 0 .8rem; line-height: 1.2;
  letter-spacing: -.01em;
}
.article-body h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.article-body blockquote {
  margin: 1.8rem 0; padding-left: 1.2rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;
}
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: .45rem; }
.article-body img { max-width: 100%; height: auto; display: block; }
.article-body figure { margin: 2rem 0; max-width: none; }
.article-body figcaption {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-faint);
  margin-top: .5rem; line-height: 1.45;
}
.article-body table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .88rem; }
.article-body .table-scroll { overflow-x: auto; max-width: none; margin: 1.8rem 0; }
.article-body th, .article-body td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); }
.article-body th { font-weight: 700; border-bottom: 2px solid var(--rule-hard); }

/* ── Editorial furniture ────────────────────────────────────────────────── */
.label {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .22rem .5rem; border: 1px solid currentColor; border-radius: 2px;
}
.label.opinion { color: var(--accent-2); }
.label.update  { color: var(--accent); }

.standing-note, .correction-box, .disclosure {
  font-family: var(--sans); font-size: .86rem; line-height: 1.55;
  padding: .9rem 1.1rem; margin: 1.8rem 0; max-width: none;
  background: var(--paper-2); border-left: 3px solid var(--ink-faint);
  color: var(--ink-soft);
}
.correction-box {
  border-left-color: var(--accent); color: var(--ink);
  margin: 0 0 1.8rem;
}
.correction-box strong { display: block; margin-bottom: .3rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

.sources-box {
  font-family: var(--sans); font-size: .86rem; max-width: none;
  border-top: 2px solid var(--rule-hard); margin-top: 2.5rem; padding-top: 1rem;
}
.sources-box h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .7rem;
}
.sources-box ol { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.sources-box li { margin-bottom: .45rem; }

.author-box {
  display: flex; gap: 1rem; align-items: flex-start; max-width: none;
  border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.2rem;
  font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
}
.author-box .initial {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink);
}
.author-box h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--ink); }

/* ── Read next ───────────────────────────────────────── */
/* A story page carried no onward link of any kind until 2026-10-15. The h2
   mirrors .comments h2 exactly, so the two blocks under an article read as a
   pair rather than as the work of two different designers. */
.readnext { max-width: 44rem; margin: 3.5rem auto 0; font-family: var(--sans); }
.readnext h2 {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid var(--rule-hard); padding-bottom: .6rem; margin: 0 0 1.2rem;
}
.readnext-related { list-style: none; margin: 0 0 2rem; padding: 0; }
.readnext-related li { border-top: 1px solid var(--rule); padding: .7rem 0; }
.readnext-related li:first-child { border-top: 0; padding-top: 0; }
.readnext-related a {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.35;
  color: var(--ink); text-decoration: none;
}
.readnext-related a:hover { color: var(--accent); text-decoration: underline; }
.readnext-more {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  margin: 0 0 1rem;
}
/* Three across inside the 44rem measure. The front page grid asks for a 260px
   minimum, which gives two cards and a widow at this width. */
.readnext .story-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.6rem 1.8rem; }
.readnext .card .dek { font-size: .92rem; }
.readnext-all { margin: 1.6rem 0 0; font-size: .85rem; }
.readnext-all a { color: var(--accent); }

/* ── Comments ───────────────────────────────────────────────────────────── */
.comments { max-width: 44rem; margin: 3.5rem auto 0; font-family: var(--sans); }
.comments h2 {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid var(--rule-hard); padding-bottom: .6rem; margin: 0 0 1.2rem;
}
.comment-rules {
  font-size: .84rem; color: var(--ink-soft); background: var(--paper-2);
  padding: .9rem 1.1rem; margin-bottom: 1.5rem; line-height: 1.55;
}
.comment { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.comment-meta { font-size: .78rem; color: var(--ink-faint); margin-bottom: .35rem; }
.comment-meta .who { font-weight: 700; color: var(--ink); }
.comment-body { font-size: .95rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.comment-form { margin-top: 2rem; }
.comment-form label {
  display: block; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin: .9rem 0 .3rem;
}
.comment-form input, .comment-form textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem;
  padding: .6rem .7rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; color: var(--ink);
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: transparent;
}
.hp { position: absolute !important; left: -9999px !important; }
.btn {
  display: inline-block; margin-top: 1rem; cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .7rem 1.4rem; border: none; border-radius: 3px;
  background: var(--ink); color: var(--paper);
}
.btn:hover { background: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.form-msg { margin-top: .9rem; font-size: .88rem; }
.form-msg.ok  { color: var(--accent-2); }
.form-msg.err { color: var(--live); }

/* ── Section & staff pages ──────────────────────────────────────────────── */
.page-head { border-bottom: 2px solid var(--rule-hard); padding-bottom: 1rem; margin-bottom: 2rem; }

/* A standing note under a section blurb: what the section is, or how often it
   runs. Set smaller and quieter than the blurb, because it is context and not
   the promise. */
.sec-note {
  font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
  max-width: 38rem; margin-top: .5rem; line-height: 1.5;
}

.page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 .3rem; letter-spacing: -.02em; }
.page-head p { color: var(--ink-soft); margin: 0; max-width: var(--measure); }

.prose { max-width: 42rem; margin: 0 auto; font-size: 1.08rem; line-height: 1.7; }
.prose h2 { font-size: 1.5rem; margin: 2.4rem 0 .7rem; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.prose ul { padding-left: 1.3rem; }

/* ── Standing nights: trivia, bingo, happy hour ────────────────── */
/* .dim was already in use on the trivia page and had no rule at all, so its
   secondary lines rendered at full strength. Added here rather than left,
   because an address and a phone number should sit under a venue name and
   not beside it in the same weight. */
.dim { color: var(--ink-soft); font-size: .92em; }

.trivia-night, .hh-silent, .tonight-list { list-style: none; padding-left: 0; }
.trivia-night > li, .tonight-list > li {
  border-top: 1px solid var(--rule);
  padding: .7rem 0 .75rem;
  line-height: 1.45;
}
.trivia-night > li:first-child, .tonight-list > li:first-child { border-top: 0; padding-top: 0; }

/* The silent ones are a reference list and a long one, so they set tighter
   and in columns where there is room. */
.hh-silent { columns: 2; column-gap: 2rem; font-size: .96rem; }
.hh-silent > li { margin-bottom: .6rem; break-inside: avoid; }
.hh-silent .dim { display: block; }
/* A caveat is the line that stops somebody driving to a shut door, so it is not
   dimmed with the addresses. */
.hh-caveat { color: var(--accent); font-size: .92em; }
@media (max-width: 34rem) { .hh-silent { columns: 1; } }

/* Tonight, on the calendar page. Boxed because it is standing material sitting
   above a dated list, and a reader needs to see the difference. */
.tonight {
  max-width: 42rem; margin: 0 auto 2.5rem;
  border: 1px solid var(--rule); border-top: 3px solid var(--rule-hard);
  background: var(--paper-2);
  padding: 1.1rem 1.25rem 1.2rem;
}
.tonight h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.tonight h3 {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 1.1rem 0 .5rem;
}
.tonight-sub { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.tonight-list > li { border-top-color: var(--rule); }
.tonight-more { margin: 1.1rem 0 0; font-size: .9rem; }

.prose li { margin-bottom: .5rem; }

.staff-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.staff-card { border-top: 1px solid var(--rule); padding-top: 1rem; }
.staff-card h3 { margin: 0 0 .15rem; font-size: 1.2rem; }
.staff-card .role {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.staff-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  border-top: 2px solid var(--rule-hard); margin-top: 4rem;
  padding: 2.5rem 0 1.5rem; background: var(--paper-2);
  font-family: var(--sans); font-size: .88rem; color: var(--ink-soft);
}
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.foot h4 {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 .7rem;
}
.foot p { margin: 0 0 .7rem; line-height: 1.55; }
.foot-note { font-size: .82rem; color: var(--ink-faint); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin-bottom: .35rem; }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.2rem;
  font-size: .8rem; color: var(--ink-faint);
}

@media print {
  .sections, .foot, .comments, .masthead-actions { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
}

/* ==========================================================================
   AUDIENCE MODES — youthanize + brainrot
   ========================================================================== */

/* Mode toggle buttons in the masthead */
/* THE EDITION SWITCHER. Three named segments, one pressed, rather than a button
   that renamed itself to whichever state you were not in. */
.edition {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule-hard);
  border-radius: 3px;
  overflow: hidden;
}
.edition-label {
  display: flex; align-items: center;
  padding: 0 .55rem;
  background: var(--rule, #e8e4dc);
  font-family: var(--sans);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  opacity: .72;
}
.edition-btn {
  font-family: var(--sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  padding: .4rem .66rem;
  border: 0;
  border-left: 1px solid var(--rule-hard);
  background: transparent; color: var(--ink);
  white-space: nowrap;
}
.edition-btn:first-of-type { border-left: 0; }
.edition-btn:hover { background: var(--rule, #e8e4dc); }

/* The pressed one is the edition you are reading. Driven off aria-pressed so
   the styling and what a screen reader announces cannot drift apart. */
.edition-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.edition-btn[hidden] { display: none; }

/* ── YOUTH MODE ───────────────────────────────────────────────────────────
   Brighter, sunnier, bolder. St. Augustine at 25: teal water, coral, sun. */
:root[data-mode="youth"] {
  --ink:        #14212b;
  --ink-soft:   #3b5563;
  --ink-faint:  #6b8a99;
  --paper:      #fff8f0;
  --paper-2:    #ffedd8;
  --rule:       #ffd2a6;
  --rule-hard:  #ff5d73;
  --accent:     #ff3d6e;
  --accent-2:   #12b5c9;
  --flag:       #12b5c9;
  --live:       #ff3d6e;
  --on-strong:  #1f0409;   /* dark: the youth accents are all mid-bright */
  --serif: "Space Grotesk", "Trebuchet MS", var(--sans);
}
:root[data-mode="youth"] body { background:
  radial-gradient(1200px 500px at 80% -10%, #ffe08a55, transparent),
  radial-gradient(1000px 500px at 0% 0%, #7ce0e955, transparent),
  var(--paper); }
:root[data-mode="youth"] .flag-name { font-weight: 800; letter-spacing: -.03em; }
:root[data-mode="youth"] .flag-name::after { content: " ☀"; color: var(--accent); }
:root[data-mode="youth"] .headline { letter-spacing: -.02em; }
:root[data-mode="youth"] .card.lead .headline { font-size: clamp(2.1rem, 5vw, 3.4rem); }
:root[data-mode="youth"] .kicker { color: var(--accent-2); }
:root[data-mode="youth"] .card { border-top-color: var(--rule); }
:root[data-mode="youth"] .card.lead { border-top: 4px solid var(--accent); }
:root[data-mode="youth"] .sections { background: var(--paper); border-bottom-color: var(--rule); }
:root[data-mode="youth"] .sections a[aria-current="page"] { border-bottom-color: var(--accent); }
:root[data-mode="youth"] .edition-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }
:root[data-mode="youth"] .btn { background: var(--accent); border-radius: 999px; }
.sections a.scene-hot {
  color: var(--accent); position: relative;
}
.sections a.scene-hot::after { content: " 🔥"; }

/* ── BRAINROT MODE ────────────────────────────────────────────────────────
   Youth turned all the way up. Chaos, on purpose. */
:root[data-mode="brainrot"] {
  --ink:        #0a0018;
  --ink-soft:   #2a0a4a;
  --ink-faint:  #7a3ac9;
  --paper:      #12002b;
  --paper-2:    #1d0742;
  --rule:       #ff2fd0;
  --rule-hard:  #39ff14;
  --accent:     #39ff14;
  --accent-2:   #00e5ff;
  --flag:       #ff2fd0;
  --live:       #ff2fd0;
  --on-strong:  #0a1400;   /* dark: these accents are fluorescent */
  --serif: "Comic Sans MS", "Chalkboard SE", var(--sans);
  --sans: "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}
:root[data-mode="brainrot"] body {
  color: var(--ink);
  background:
    linear-gradient(45deg, #ff2fd0, #00e5ff, #39ff14, #ffe500, #ff2fd0);
  background-size: 400% 400%;
  animation: rot-bg 6s ease infinite;
}
@keyframes rot-bg { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
:root[data-mode="brainrot"] .wrap > *, :root[data-mode="brainrot"] .article,
:root[data-mode="brainrot"] .story-grid, :root[data-mode="brainrot"] .lede-grid {
  background: rgba(18,0,43,.82); border-radius: 18px; padding: 1rem;
}
:root[data-mode="brainrot"] .flag-name {
  font-weight: 900; color: #fff;
  text-shadow: 3px 3px 0 #ff2fd0, 6px 6px 0 #00e5ff;
  animation: rot-wob 1.2s ease-in-out infinite;
}
@keyframes rot-wob { 0%,100%{transform:rotate(-2deg) scale(1)} 50%{transform:rotate(2deg) scale(1.03)} }
:root[data-mode="brainrot"] .flag-the::after { content: " 💀🔥"; }
:root[data-mode="brainrot"] .headline { color: var(--accent); text-shadow: 2px 2px 0 #ff2fd0; }
:root[data-mode="brainrot"] .headline a { color: var(--accent); }
:root[data-mode="brainrot"] .kicker { color: #ffe500; }
:root[data-mode="brainrot"] .dek, :root[data-mode="brainrot"] .byline,
:root[data-mode="brainrot"] .article-body { color: #eafff0; }
:root[data-mode="brainrot"] a { color: var(--accent-2); }
:root[data-mode="brainrot"] .sections { background: rgba(18,0,43,.9); }
:root[data-mode="brainrot"] .sections a { color: #fff; }
:root[data-mode="brainrot"] .edition-rot[aria-pressed="true"] { background: #39ff14; color: #12002b; border-color: #fff; animation: rot-wob 1s infinite; }
:root[data-mode="brainrot"] .article-body p { font-size: 1.18rem; line-height: 1.75; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root[data-mode="brainrot"] body { animation: none; }
  :root[data-mode="brainrot"] .flag-name,
  :root[data-mode="brainrot"] .edition-rot { animation: none; }
}

/* Editorial cartoons */
.cartoon {
  max-width: none; margin: 0 0 2rem; padding: 1.4rem;
  border: 1px solid var(--rule); background: var(--paper-2); border-radius: 4px;
  color: var(--ink);
}
.cartoon svg { display: block; max-width: 560px; margin: 0 auto; }
.cartoon figcaption {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1rem; text-align: center;
}
:root[data-mode="brainrot"] .cartoon { background: rgba(18,0,43,.6); }

/* ── The Calendar ─────────────────────────────────────────────────────────── */
.cal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chip {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; padding: .4rem .85rem;
  border-radius: 999px; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink-faint); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
:root[data-mode="youth"] .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }

.cal { max-width: 46rem; }
.cal-daygroup { margin-bottom: 1.4rem; }
.cal-day {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border-bottom: 2px solid var(--rule-hard); padding-bottom: .4rem; margin: 0 0 .3rem;
}
.cal-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.cal-time { font-family: var(--sans); font-size: .82rem; color: var(--ink-faint); font-weight: 600; }
.cal-title { font-size: 1.05rem; line-height: 1.3; margin-bottom: .15rem; }
.cal-title a { text-decoration: none; }
.cal-venue { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); }
.cal-cat { color: var(--ink-faint); text-transform: capitalize; }

/* A standing night is a different promise from a dated event: it is on every
   week and it is the venue that decides, not a promoter. The pill says so on
   the row rather than in a legend nobody reads. */
.cal-standing {
  display: inline-block; margin-left: .45rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--accent-2);
  border-radius: 2px; padding: 0 .3rem; vertical-align: .05em;
}
.cal-note {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-faint);
  margin-top: .2rem; max-width: 34rem; line-height: 1.4;
}

/* Happy hour, collapsed. One line a day that opens to the list, because
   eighteen rows at three o'clock buried everything else on the page. */
.cal-hh .cal-main { min-width: 0; }
.hh-acc > summary {
  cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: .95rem;
  display: flex; align-items: baseline; gap: .5rem;
  padding: .1rem 0;
}
.hh-acc > summary::-webkit-details-marker { display: none; }
/* The caret is drawn rather than relying on the default marker, which differs
   between browsers and cannot be positioned. */
.hh-acc > summary::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--ink-soft);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: translateY(-1px); transition: transform .15s ease;
}
.hh-acc[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.hh-acc > summary:hover .hh-acc-label { color: var(--accent); }
.hh-acc > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.hh-acc-label { font-weight: 600; color: var(--ink); }
.hh-acc-count { color: var(--ink-faint); font-size: .85rem; }

.hh-acc-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.hh-acc-list > li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 .8rem;
  padding: .4rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .88rem;
}
.hh-acc-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hh-acc-name { font-weight: 600; color: var(--ink); }
.hh-acc-where, .hh-acc-note { grid-column: 2; color: var(--ink-faint); font-size: .82rem; }
.hh-acc-note { margin-top: .15rem; line-height: 1.4; }
.hh-acc-more { margin: .7rem 0 0; font-family: var(--sans); font-size: .85rem; }
@media (max-width: 30rem) {
  .hh-acc-list > li { grid-template-columns: 1fr; }
  .hh-acc-where, .hh-acc-note { grid-column: 1; }
}


.cal-tag {
  display: inline-block; font-family: var(--sans); font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .1rem .4rem;
  border-radius: 3px; margin-left: .4rem; vertical-align: middle;
}
.cal-tag.free { background: var(--accent-2); color: var(--on-strong); }
.cal-tag.youth { background: var(--accent); color: var(--on-strong); }
.cal-foot { font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); margin-top: 2rem; }
@media (max-width: 520px) { .cal-row { grid-template-columns: 76px 1fr; gap: .7rem; } }

/* ── Front page: events strip + section grouping ──────────────────────────── */
.events-strip {
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2);
  padding: 1rem 1.2rem; margin-bottom: 2rem;
}
.events-strip h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem;
  display: flex; justify-content: space-between;
}
.events-strip h3 a { font-weight: 700; text-decoration: none; color: var(--accent-2); }
.events-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.events-strip li { font-family: var(--sans); font-size: .9rem; display: flex; gap: .7rem; }
.events-strip .ev-when { color: var(--ink-faint); flex: none; width: 118px; font-weight: 600; font-size: .82rem; }
.events-strip .ev-what a { text-decoration: none; }
@media (max-width: 520px) { .events-strip li { flex-direction: column; gap: .1rem; } .events-strip .ev-when { width: auto; } }

.sec-band {
  font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid var(--rule-hard); padding-bottom: .5rem;
  margin: 2.5rem 0 1.2rem;
}
/* Front-page bands: standard leads with News; youth leads with fun and buries news */
.frontpage { display: flex; flex-direction: column; }
.events-strip { order: 0; }
.band-news { order: 1; }
.band-fun  { order: 2; }
:root[data-mode="youth"] .band-fun,
:root[data-mode="brainrot"] .band-fun { order: 1; }
:root[data-mode="youth"] .band-news,
:root[data-mode="brainrot"] .band-news { order: 3; opacity: .78; }
:root[data-mode="youth"] .band-news .story-grid,
:root[data-mode="brainrot"] .band-news .story-grid { grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); }
:root[data-mode="youth"] .band-news .dek,
:root[data-mode="brainrot"] .band-news .dek { display: none; }
:root[data-mode="youth"] .band-news .card.lead,
:root[data-mode="brainrot"] .band-news .card.lead { border-top-width: 1px; }
:root[data-mode="youth"] .band-news .card.lead .headline,
:root[data-mode="brainrot"] .band-news .card.lead .headline { font-size: 1.35rem; }
.band-news .sec-band::after { content: ""; }
:root[data-mode="youth"] .band-news .sec-band::after,
:root[data-mode="brainrot"] .band-news .sec-band::after { content: " (the serious stuff)"; opacity:.7; }

/* ══════════════════════════════════════════════════════════════════════════
   FRONT-PAGE RAIL — the calendar lives to the side, not across the top
   ══════════════════════════════════════════════════════════════════════════ */
.frontpage.has-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 2.6rem;
  align-items: start;
}
/* The band ordering context moved down one level with the rail. */
.fp-main { display: flex; flex-direction: column; min-width: 0; }
.fp-rail { position: sticky; top: 1rem; min-width: 0; }
@media (max-width: 980px) {
  .frontpage.has-rail { grid-template-columns: 1fr; gap: 1.5rem; }
  .fp-rail { position: static; }
}

.events-strip.rail { margin: 0; padding: 1rem 1.1rem; }
.events-strip.rail h3 { align-items: baseline; gap: .75rem; margin-bottom: .4rem; }
.events-strip.rail ul { display: block; }
.events-strip.rail li {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
  padding: .62rem 0; border-top: 1px solid var(--rule); font-size: .88rem;
}
.events-strip.rail li:first-child { border-top: 0; }
.events-strip.rail .ev-when {
  width: auto; flex: none; white-space: nowrap; padding-top: .1rem;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}
.events-strip.rail .ev-what { font-weight: 600; line-height: 1.32; }
.events-strip.rail .ev-where {
  grid-column: 2; font-size: .78rem; color: var(--ink-faint); line-height: 1.3;
}
.rail-more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  color: var(--accent-2);
}
.rail-more:hover { text-decoration: underline; }

/* ── Audience curation state ─────────────────────────────────────────────── */
[hidden] { display: none !important; }
.card.over-fold { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THE STANDING DISCLOSURE
   ══════════════════════════════════════════════════════════════════════════ */
.disclosure {
  font-family: var(--sans); font-size: .85rem; line-height: 1.6;
  color: var(--ink-soft); background: var(--paper-2);
  border-left: 3px solid var(--rule-hard);
  padding: .95rem 1.15rem; margin: 1.6rem 0; border-radius: 3px;
}
.disclosure strong { color: var(--ink); }
.disclosure a { color: var(--accent-2); }
.staff-card .disclosure { font-size: .8rem; margin: .8rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BRAINROT READABILITY
   The palette above flips the surfaces to dark but left the ink dark with it,
   which put near-black type on near-black panels. Ink is light in this mode.
   The chaos belongs in the background and the chrome. Never in the copy.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-mode="brainrot"] {
  --ink:        #f4ecff;   /* 17.2:1 on the panel */
  --ink-soft:   #d3bdf5;   /* 11.7:1 */
  --ink-faint:  #a98ee0;   /*  7.2:1 */
}
:root[data-mode="brainrot"] body { color: var(--ink); }

/* Panels go opaque so contrast cannot swing with the animated gradient
   cycling underneath them. The gradient still shows around the page. */
:root[data-mode="brainrot"] .wrap > *,
:root[data-mode="brainrot"] .article,
:root[data-mode="brainrot"] .story-grid,
:root[data-mode="brainrot"] .lede-grid { background: #12002b; }
:root[data-mode="brainrot"] .cartoon { background: #1d0742; }
:root[data-mode="brainrot"] .sections { background: #12002b; }

:root[data-mode="brainrot"] .dek,
:root[data-mode="brainrot"] .byline,
:root[data-mode="brainrot"] .article-body,
:root[data-mode="brainrot"] .disclosure,
:root[data-mode="brainrot"] .standing-note,
:root[data-mode="brainrot"] .sources-box,
:root[data-mode="brainrot"] .comment-rules { color: var(--ink); }

/* Anything painting the accent as a BACKGROUND needs dark type on it.
   #39ff14 under white is 1.4:1, which is the unreadable case. */
:root[data-mode="brainrot"] .chip.on,
:root[data-mode="brainrot"] .btn,
:root[data-mode="brainrot"] .btn:hover,
:root[data-mode="brainrot"] .edition-btn[aria-pressed="true"] { color: var(--on-strong); font-weight: 700; }

/* Keep the offset shadow, tightened so it stops smearing the letterforms. */
:root[data-mode="brainrot"] .headline { text-shadow: 1px 1px 0 #ff2fd0; }
:root[data-mode="brainrot"] .article-body p,
:root[data-mode="brainrot"] .article-body li { text-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THE FOOTBALL SCHEDULE
   ══════════════════════════════════════════════════════════════════════════ */
.fb-daygroup { margin-bottom: 1.6rem; }
.fb-row {
  display: grid; grid-template-columns: minmax(96px, max-content) 1fr;
  gap: .2rem .9rem; padding: .7rem 0; border-top: 1px solid var(--rule);
}
.fb-row[hidden], .fb-daygroup[hidden] { display: none !important; }
.fb-time {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-faint); white-space: nowrap;
  padding-top: .15rem;
}
.fb-match { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.fb-at { color: var(--ink-faint); font-weight: 400; padding: 0 .15rem; }
.fb-home { font-weight: 800; }
.fb-where { font-size: .82rem; color: var(--ink-faint); margin-top: .12rem; }
.fb-src { opacity: .75; font-style: italic; }
.fb-flag {
  font-family: var(--sans); font-size: .76rem; color: var(--live);
  margin-top: .25rem; font-weight: 600;
}
.cal-tag.district { background: var(--rule-hard); color: var(--on-strong); }
.cal-tag.jv { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--rule); }
@media (max-width: 520px) {
  .fb-row { grid-template-columns: 1fr; }
  .fb-time { padding-top: 0; }
}
:root[data-mode="brainrot"] .cal-tag.district { color: var(--on-strong); }
.fb-score {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: var(--ink); margin-top: .2rem;
}
.fb-score span { font-weight: 400; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════════════
   THE YOUNG PAPER
   Not the grown paper reordered. A different front page, painted instead of
   the other one. Both are in the HTML; data-mode on the root element picks.
   The mode is set by an inline script in head, so there is no flash of the
   wrong paper.
   ══════════════════════════════════════════════════════════════════════════ */
/* Three papers, three readers. Brainrot used to paint the youth front page in
   different colours, which meant a sixteen year old was served happy hours and
   $4 drafts. It is its own paper now: Friday night leads and nothing on it
   promotes a bar. */
.fp-youth, .fp-teen { display: none; }
:root[data-mode="youth"] .fp-youth { display: block; }
:root[data-mode="youth"] .fp-standard { display: none; }
:root[data-mode="brainrot"] .fp-teen { display: block; }
:root[data-mode="brainrot"] .fp-standard,
:root[data-mode="brainrot"] .fp-youth { display: none; }

.yp { --yp-dark: #141019; --yp-dark-2: #211a2b; }
.yp section { margin-bottom: 2.4rem; }

/* ── Band headers ─────────────────────────────────────────────────────────── */
.yp-band-head, .yp-now-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.yp-band-head h2, .yp-now-head h2 {
  font-family: var(--sans); font-size: 1.45rem; font-weight: 900;
  letter-spacing: -.03em; margin: 0; line-height: 1;
}
.yp-band-head span, .yp-now-head span.yp-now-count {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: var(--ink-faint); letter-spacing: .01em;
}
.yp-band-head a, .yp-now-head a {
  margin-left: auto; font-family: var(--sans); font-size: .74rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--accent-2); white-space: nowrap;
}
.yp-band-head a:hover, .yp-now-head a:hover { text-decoration: underline; }

/* ── What is on right now ────────────────────────────────────────────────── */
.yp-now {
  background: var(--yp-dark); color: #fff;
  border-radius: 16px; padding: 1.3rem 1.4rem 1rem;
}
.yp-now .yp-now-head h2 { color: #fff; }
.yp-now .yp-now-head h2::after {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); margin-left: .5rem;
  vertical-align: middle; animation: yp-pulse 2s ease-in-out infinite;
}
@keyframes yp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.yp-now .yp-now-count { color: rgba(255,255,255,.62); }
.yp-now .yp-now-head a { color: var(--accent); }

.yp-ticker { list-style: none; margin: 0; padding: 0; }
/* minmax, not a fixed px: this column carries a time on one row and a date on
   the next, and a fixed 92px with nowrap ran the date straight over the event
   title. max-content sizes it to the longest entry and keeps every row aligned. */
.yp-tick {
  display: grid; grid-template-columns: minmax(92px, max-content) 1fr auto;
  gap: .2rem .9rem; align-items: baseline; padding: .62rem 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.yp-tick-time {
  font-family: var(--sans); font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; color: var(--accent); white-space: nowrap;
  text-transform: uppercase;
}
.yp-tick-what { font-family: var(--sans); font-weight: 650; font-size: 1.02rem; line-height: 1.3; }
.yp-tick-what a { color: #fff; text-decoration: none; }
.yp-tick-what a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.yp-tick-where {
  font-family: var(--sans); font-size: .78rem; color: rgba(255,255,255,.58);
  text-align: right; white-space: nowrap;
}
.yp-free {
  /* Dark on the accent, not white. White on the youth coral is 3.4:1 and this
     is 10px bold caps, which is exactly where that fails. Dark reads on the
     coral and on the brainrot green both. */
  background: var(--accent); color: var(--on-strong); font-size: .64rem; font-weight: 900;
  letter-spacing: .09em; padding: .12rem .4rem; border-radius: 3px;
  margin-left: .35rem; vertical-align: 1px;
}
@media (max-width: 640px) {
  .yp-tick { grid-template-columns: 1fr; gap: .1rem; }
  .yp-tick-where { text-align: left; white-space: normal; }
}

/* ── The lead ────────────────────────────────────────────────────────────── */
.yp-lead { padding: .4rem 0 1.6rem; border-bottom: 3px solid var(--ink); }
.yp-kicker {
  display: inline-block; font-family: var(--sans); font-size: .68rem;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-strong); background: var(--accent);
  padding: .22rem .55rem; border-radius: 3px; margin-bottom: .7rem;
}
.yp-lead-h {
  font-family: var(--sans); font-weight: 900; letter-spacing: -.035em;
  font-size: clamp(2.1rem, 6vw, 3.7rem); line-height: .98; margin: 0 0 .6rem;
}
.yp-lead-h a { color: var(--ink); text-decoration: none; }
.yp-lead-h a:hover { color: var(--accent); }
.yp-lead-dek {
  font-family: var(--sans); font-size: 1.12rem; line-height: 1.45;
  color: var(--ink-soft); max-width: 46rem; margin: 0 0 .7rem;
}
.yp-byline {
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}

/* ── Friday night ────────────────────────────────────────────────────────── */
.yp-friday {
  background: var(--yp-dark-2); color: #fff;
  border-radius: 16px; padding: 1.3rem 1.4rem;
}
.yp-friday .yp-band-head h2 { color: #fff; }
.yp-friday .yp-band-head span { color: rgba(255,255,255,.6); }
.yp-friday .yp-band-head a { color: var(--accent-2); }
.yp-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.yp-game {
  background: rgba(255,255,255,.06); border-radius: 10px; padding: .75rem .85rem;
  border-left: 3px solid var(--accent-2);
}
.yp-game-teams { font-family: var(--sans); font-weight: 700; font-size: .98rem; line-height: 1.32; }
.yp-game-teams em { font-style: normal; color: rgba(255,255,255,.5); font-weight: 400; padding: 0 .15rem; }
.yp-home { font-weight: 900; }
.yp-game-meta {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .05em; color: var(--accent); margin-top: .3rem;
  text-transform: uppercase;
}

/* ── The Scene grid ──────────────────────────────────────────────────────── */
.yp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.yp-card {
  background: var(--paper-2); border-radius: 14px; padding: 1.05rem 1.1rem 1.1rem;
  border-top: 3px solid var(--accent);
  transition: transform .14s ease, box-shadow .14s ease;
}
.yp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.yp-card .yp-kicker { font-size: .62rem; background: transparent; color: var(--accent); padding: 0; margin-bottom: .45rem; }
.yp-card h3 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.02em;
  font-size: 1.16rem; line-height: 1.2; margin: 0 0 .45rem;
}
.yp-card h3 a { color: var(--ink); text-decoration: none; }
.yp-card h3 a:hover { color: var(--accent); }
.yp-card p { font-family: var(--sans); font-size: .89rem; line-height: 1.45; color: var(--ink-soft); margin: 0 0 .6rem; }

/* ── Free ────────────────────────────────────────────────────────────────── */
.yp-freeband { background: var(--paper-2); border-radius: 16px; padding: 1.2rem 1.3rem; }
.yp-freelist { list-style: none; margin: 0; padding: 0; }
.yp-freelist li {
  display: grid; grid-template-columns: minmax(108px, max-content) 1fr auto;
  gap: .15rem .9rem; align-items: baseline; padding: .55rem 0;
  border-top: 1px solid var(--rule);
}
.yp-freelist li:first-child { border-top: 0; }
.yp-free-when {
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.yp-free-what { font-family: var(--sans); font-weight: 650; font-size: .98rem; line-height: 1.3; }
.yp-free-what a { color: var(--ink); text-decoration: none; }
.yp-free-what a:hover { color: var(--accent); }
.yp-free-where { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); text-align: right; }
@media (max-width: 640px) {
  .yp-freelist li { grid-template-columns: 1fr; }
  .yp-free-where { text-align: left; }
}

/* ── Everything else, out of the way but not hidden ──────────────────────── */
.yp-rest { border-top: 1px solid var(--rule); padding-top: 1.2rem; opacity: .75; }
.yp-rest:hover { opacity: 1; }
.yp-rest .yp-band-head h2 { font-size: 1rem; color: var(--ink-faint); }
.yp-rest ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.yp-rest li { break-inside: avoid; padding: .3rem 0; }
.yp-rest a {
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.yp-rest a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) { .yp-rest ul { columns: 1; } }

/* ── Brainrot inherits the young paper and turns it up ───────────────────── */
:root[data-mode="brainrot"] .yp-card,
:root[data-mode="brainrot"] .yp-freeband { background: #1d0742; }
:root[data-mode="brainrot"] .yp-card h3 a,
:root[data-mode="brainrot"] .yp-free-what a,
:root[data-mode="brainrot"] .yp-lead-h a { color: var(--accent); }
:root[data-mode="brainrot"] .yp-now,
:root[data-mode="brainrot"] .yp-friday { background: #0d0020; }
:root[data-mode="brainrot"] .yp-lead { border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .yp-now .yp-now-head h2::after { animation: none; }
  .yp-card { transition: none; }
}

/* ── The young paper reorders the masthead nav too ────────────────────────
   A 19 year old should not have to scroll past County Government to find
   The Scene. Same links, different order, no second markup. */
:root[data-mode="youth"] .sections li,
:root[data-mode="brainrot"] .sections li { order: 20; }
:root[data-mode="youth"] .sections li[data-slug="scene"],
:root[data-mode="brainrot"] .sections li[data-slug="scene"] { order: 1; }
:root[data-mode="youth"] .sections li[data-slug="football"],
:root[data-mode="brainrot"] .sections li[data-slug="football"] { order: 2; }
:root[data-mode="youth"] .sections li[data-slug="events"],
:root[data-mode="brainrot"] .sections li[data-slug="events"] { order: 3; }
:root[data-mode="youth"] .sections li[data-slug="sports"],
:root[data-mode="brainrot"] .sections li[data-slug="sports"] { order: 4; }
:root[data-mode="youth"] .sections li[data-slug="food"],
:root[data-mode="brainrot"] .sections li[data-slug="food"] { order: 5; }
:root[data-mode="youth"] .sections li[data-slug="culture"],
:root[data-mode="brainrot"] .sections li[data-slug="culture"] { order: 6; }
:root[data-mode="youth"] .sections li[data-slug="coast"],
:root[data-mode="brainrot"] .sections li[data-slug="coast"] { order: 7; }

/* The way into the young paper should look like an invitation, not a setting. */
/* The old rule painted the toggle solid accent in standard mode, because the
   button then MEANT "switch to the young paper". A segment labelled Standard
   means "this is what you are reading", so the accent belongs on whichever
   segment is pressed and nowhere else. */
.edition { border-color: var(--accent); }
.edition-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }

/* Section pages pick up the young paper's card in the young modes, so The Scene
   does not snap back to broadsheet the moment you leave the front page. */
:root[data-mode="youth"] .story-grid .card,
:root[data-mode="brainrot"] .story-grid .card {
  background: var(--paper-2); border-radius: 14px; padding: 1.05rem 1.1rem 1.1rem;
  border-top: 3px solid var(--accent); border-bottom: 0;
  transition: transform .14s ease, box-shadow .14s ease;
}
:root[data-mode="youth"] .story-grid .card:hover,
:root[data-mode="brainrot"] .story-grid .card:hover {
  transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.13);
}
:root[data-mode="youth"] .story-grid .headline,
:root[data-mode="brainrot"] .story-grid .headline {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-size: 1.16rem;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-mode="youth"] .story-grid .card,
  :root[data-mode="brainrot"] .story-grid .card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARE
   Plain anchors to each network's own share endpoint. No SDK, no iframe, no
   pixel. /about promises this site loads nothing from anybody else and a share
   button is not worth breaking that for. The only script is a copy-to-clipboard
   handler that talks to the local clipboard and nothing else.

   Rebuilt because the publisher looked straight at a story and reported that
   the share links were not there. They were there. They were invisible: chips
   filled with --paper on a page filled with --paper, a 1px --rule border
   measuring 1.41:1 against both, and a .66rem --ink-faint label at 3.46:1,
   which is itself under AA for small text. Worse, the row sat between its own
   hairline and the .article-head hairline, and a strip of small faint sans
   pinned between two rules is exactly how this paper sets datelines and field
   names. The eye filed the whole thing as metadata and moved on, correctly.

   What it is now. The controls are built from vocabulary the paper already
   owns rather than invented: a 3px corner and an --ink fill, which is verbatim
   what .btn does under the newsletter form, and the accent on hover, which is
   also .btn. Weight and edge do the work, so nothing is fetched and no icon
   has to be drawn.
     the five links out   outlined. A --paper-2 ground, a 1.5px --ink-soft
                          border reading 6.9:1 or better against both the chip
                          and the page, and type at full --ink, not --ink-faint.
     Copy link            the one control in the row that is ours and not a
                          network's, so it is the one that is filled. Ink and
                          not oxblood: a standing block of colour above the
                          lede competes with the headline, and on a news page
                          the headline has to win that argument. Oxblood still
                          appears, on hover and on focus, where it is an answer
                          to the reader rather than a permanent decoration.
   The hairline above the compact row is gone. Two stacked rules were what
   framed the row as furniture; the controls carry their own edges now.
   ══════════════════════════════════════════════════════════════════════════ */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 2.4rem 0 1.6rem; padding: 1.1rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

/* Sentence case, reading weight, full ink. A sentence addressed to the reader,
   not a field name. The old .66rem faint uppercase tag was the same register
   as .kicker and .byline, so the row inherited their meaning. */
.share-label {
  font-family: var(--sans); font-size: .84rem; font-weight: 700;
  letter-spacing: .005em; text-transform: none; color: var(--ink);
  margin-right: .5rem;
}

.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  min-height: 2.3rem; padding: .45rem .85rem; border-radius: 3px;
  border: 1.5px solid var(--ink-soft); background: var(--paper-2);
  color: var(--ink);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* The house action, and the only filled shape anywhere in .article-head.
   min-width holds the box still when the script swaps the label to Copied. */
.share-btn.copy {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  min-width: 6.4rem;
}

/* Pointer and keyboard get the same answer, and it is the one .btn already
   gives. --on-strong rather than a hardcoded white: the fill under it runs from
   dark oxblood to neon green across the four palettes. */
.share-btn:hover,
.share-btn:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--on-strong);
}
.share-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Confirmation drops back to the ink fill while the word reads Copied, so the
   state is never carried by colour alone. The button announces it too: it
   carries aria-live in partials/share.njk. */
.share-btn.copy.done {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

/* The young palettes round their controls and carry more weight, the same way
   line 428 already scopes .btn. The serious palette keeps the 3px corner,
   because 999px on this paper is the .chip filter vocabulary. */
:root[data-mode="youth"] .share-btn,
:root[data-mode="brainrot"] .share-btn { border-radius: 999px; font-weight: 800; }

/* Deleted on purpose, and it should stay deleted:
     :root[data-mode="brainrot"] .share-btn { background: #1d0742; }
   brainrot's --paper-2 already resolves to exactly #1d0742, so the chips land
   on that colour anyway. The rule was also doing harm. At 0,3,0 it outranked
   .share-btn:hover at 0,2,0, so hovering in that mode painted dark text on an
   unchanged dark chip at about 1.04:1 and the word disappeared. */

/* The compact row under the byline. The foot row is for readers who finished;
   this one is for everybody else, who never scrolled that far, so this is the
   row that has to look pressable. It gets no rule of its own: .article-head
   already closes with one below it. */
.share.share-top {
  margin: 1.6rem 0 .2rem; padding: 0;
  border-top: 0; border-bottom: 0;
}
.share.share-top .share-label { font-size: .82rem; }
.share.share-top .share-btn {
  font-size: .78rem; padding: .42rem .8rem; min-height: 2.2rem;
}

@media (max-width: 520px) {
  .share { gap: .4rem; }
  /* The label takes its own line so the controls wrap into tidy rows under it. */
  .share-label { width: 100%; margin: 0 0 .2rem; }
  /* Targets grow on the devices where the input is a finger, rather than
     shrinking, which is the usual mistake. */
  .share-btn,
  .share.share-top .share-btn {
    font-size: .78rem; padding: .5rem .85rem; min-height: 2.5rem;
  }
  .share-btn.copy { min-width: 6.1rem; }
}

@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   READER CONTRIBUTIONS
   The tips page carries two channels now, and one of them is public while the
   other is not. Everything in this block exists to keep a reader from putting
   a leak into the form whose whole point is that it prints their name. The two
   paths get different colour, different edge and different words, and the
   sentence that says which is which sits at the top of each one.
   See newsroom/standards/CONTRIBUTOR-STANDARD.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The chooser at the top of /contribute/ ───────────────────────────────────── */
.tip-paths {
  display: grid; gap: 1rem; margin: 0 0 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.path-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper-2); padding: 1.2rem 1.3rem 1.1rem;
  border: 1px solid var(--rule); border-top: 5px solid var(--ink-faint);
  border-radius: 3px;
  transition: border-color .12s ease, background-color .12s ease;
}
.path-card:hover, .path-card:focus-visible { background: var(--paper); color: var(--ink); }
.path-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.path-card h2 {
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.15;
  letter-spacing: -.01em; margin: .15rem 0 .4rem;
}
.path-card p {
  font-family: var(--sans); font-size: .88rem; line-height: 1.5;
  color: var(--ink-soft); margin: 0 0 .5rem;
}

.path-tag {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* The sentence a reader has to take in before they pick. Full ink, bold, and
   never the faint uppercase register the rest of the card uses. */
.path-state {
  font-weight: 700; color: var(--ink) !important; font-size: .92rem !important;
}

.path-go {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  margin-top: .3rem;
}
.path-go::after { content: " \2192"; }

.path-card.path-open   { border-top-color: var(--accent-2); }
.path-card.path-open   .path-go { color: var(--accent-2); }
.path-card.path-closed { border-top-color: var(--ink); }
.path-card.path-closed .path-go { color: var(--accent); }

/* ── The two channels themselves ────────────────────────────────────────── */
.tip-path { margin: 0 0 3.5rem; }
.tip-path:last-of-type { margin-bottom: 1.5rem; }

/* A full width bar, so the channel a reader is typing into is named on screen
   the whole time they are scrolling through it. */
.path-banner {
  font-family: var(--sans); font-weight: 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1rem; border-radius: 3px 3px 0 0; margin-bottom: 1.6rem;
}
.path-banner.open   { background: var(--accent-2); color: var(--on-strong); }
.path-banner.closed { background: var(--ink);      color: var(--paper); }

/* ── Lists inside the story channel ─────────────────────────────────────── */
.rule-list, .step-list { padding-left: 1.25rem; }
.rule-list li, .step-list li { margin-bottom: .55rem; }
.rule-list { list-style: none; padding-left: 0; }
.rule-list li { position: relative; padding-left: 1.4rem; }
.rule-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .6rem; height: 2px; background: var(--accent);
}

.hard-line {
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  color: var(--ink); border-left: 3px solid var(--accent);
  padding: .1rem 0 .1rem .9rem; margin: 1.6rem 0 0;
}

/* The leak warning. Oxblood edge and full ink, because the reader who needs it
   is one keystroke from a mistake that cannot be taken back. */
.standing-note.warn { border-left-color: var(--accent); color: var(--ink); }
.standing-note.warn strong { color: var(--accent); }

/* ── The story form ─────────────────────────────────────────────────────── */
/* Deliberately not folded into the .comment-form selectors above. A comment is
   four fields in a thread. This is a piece of publishing with the writer's own
   name on it, and it is allowed to look like more work than a comment. */
.contribute-form {
  max-width: 42rem; margin: 2rem auto 0; font-family: var(--sans);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-2);
  border-radius: 3px; padding: 1.4rem 1.4rem 1.6rem;
}
.contribute-form .field { margin-bottom: 1.1rem; }
.contribute-form label {
  display: block; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .15rem;
}
.contribute-form label .opt { text-transform: none; letter-spacing: 0; font-style: italic; }
.field-hint {
  display: block; font-size: .8rem; line-height: 1.4;
  color: var(--ink-soft); margin: 0 0 .35rem;
}
.contribute-form input, .contribute-form textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem;
  padding: .6rem .7rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; color: var(--ink);
}
.contribute-form textarea { min-height: 16rem; resize: vertical; line-height: 1.6; }
.contribute-form input:focus, .contribute-form textarea:focus {
  outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: transparent;
}
.form-foot {
  font-family: var(--sans); font-size: .82rem; color: var(--ink-soft);
  margin: 1rem 0 0;
}

/* What replaces the form once it has gone. Same box and same width, so the page
   does not jump and the answer lands where the reader was already looking. */
.contrib-done {
  max-width: 42rem; margin: 2rem auto 0; font-family: var(--sans);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-2);
  border-radius: 3px; padding: 1.4rem;
}
.contrib-done:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.contrib-done h3 {
  font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .5rem; color: var(--ink);
}
.contrib-done p { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 .6rem; }
.contrib-done p:last-child { margin-bottom: 0; }
.contrib-done strong { color: var(--ink); overflow-wrap: anywhere; }

/* The draft link is the first <a class="btn"> on this site, and .btn was only
   ever worn by a <button>. Left alone it disappears on hover: .btn:hover (0,2,0)
   paints the fill accent while a:hover (0,1,1) paints the text accent, which is
   accent on accent. These two rules outrank a:hover and put a foreground back. */
.contrib-done .btn { text-decoration: none; color: var(--paper); }
.contrib-done .btn:hover,
.contrib-done .btn:focus-visible { background: var(--accent); color: var(--on-strong); }
.contrib-done .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   A READER STORY ON THE PAGE
   It must not be mistakable for reported work by a desk. The flag is the first
   thing above the headline, the label repeats in the byline row, and the
   standing line sits above the body rather than under it.
   ══════════════════════════════════════════════════════════════════════════ */
.reader-flag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  font-family: var(--sans);
  border-top: 3px solid var(--accent-2);
  background: var(--paper-2);
  padding: .6rem .9rem; margin-bottom: 1.4rem;
}
.reader-flag-tag {
  font-weight: 800; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-2);
}
.reader-flag-text { font-size: .84rem; color: var(--ink-soft); }

.kicker.contributed { color: var(--accent-2); }
.kicker.contributed a { color: inherit; text-decoration: none; }
.kicker.contributed a:hover { text-decoration: underline; }
.kicker-sep { color: var(--ink-faint); }

.label.reader { color: var(--accent-2); }

/* The one item in the byline row that is neither a name nor a date. */
.contrib-note { font-style: italic; color: var(--ink-soft); }

/* The standing line. .standing-note gives it the box; this gives it the weight
   the box does not, because this one is a condition of publication rather than
   a footnote. */
.standing-note.reader-line {
  border-left-color: var(--accent-2); color: var(--ink);
  margin: 0 0 1.8rem;
}
.standing-note.reader-line strong { color: var(--accent-2); }

.author-box.contrib .initial { border-color: var(--accent-2); }
.contrib-foot { margin: .5rem 0 0; font-size: .84rem; color: var(--ink-faint); }
.contrib-foot a { color: var(--accent-2); }

/* ── A reader story in a list ───────────────────────────────────────────── */
/* CONTRIBUTOR-STANDARD.md section 5: labelled in the section list too, not only
   on the page. A card rendering a contributed item takes .contributed and
   prints <span class="reader-tag">Reader story</span> where a desk byline would
   otherwise go. The style is here and ready. The list templates are not this
   file's to change, so see the report. */
.card.contributed { border-top-color: var(--accent-2); }
.reader-tag {
  display: inline-block; font-family: var(--sans); font-weight: 800;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid currentColor;
  border-radius: 2px; padding: .12rem .35rem; margin-right: .4rem;
}

/* ── The young palettes ─────────────────────────────────────────────────── */
:root[data-mode="youth"] .path-card,
:root[data-mode="brainrot"] .path-card { border-radius: 14px; }
:root[data-mode="youth"] .path-banner,
:root[data-mode="brainrot"] .path-banner { border-radius: 999px; }
:root[data-mode="youth"] .contribute-form,
:root[data-mode="brainrot"] .contribute-form,
:root[data-mode="youth"] .contrib-done,
:root[data-mode="brainrot"] .contrib-done { border-radius: 14px; }

/* brainrot paints .headline, .dek and .article-body itself and leaves anything
   it has not heard of on the dark panel in dark ink. These are the new ones. */
:root[data-mode="brainrot"] .reader-flag-text,
:root[data-mode="brainrot"] .path-card p,
:root[data-mode="brainrot"] .field-hint,
:root[data-mode="brainrot"] .form-foot,
:root[data-mode="brainrot"] .contrib-done p { color: #eafff0; }
:root[data-mode="brainrot"] .path-state,
:root[data-mode="brainrot"] .hard-line,
:root[data-mode="brainrot"] .contrib-done strong { color: #fff !important; }

@media (max-width: 640px) {
  .tip-paths { gap: .8rem; }
  .contribute-form { padding: 1.1rem 1rem 1.3rem; }
  .contribute-form textarea { min-height: 13rem; }
  .path-banner { font-size: .68rem; letter-spacing: .08em; padding: .55rem .8rem; }
  .reader-flag { padding: .55rem .75rem; }
}

@media (prefers-reduced-motion: reduce) { .path-card { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   COLLEGE SPORTS  /sports/college/
   A two column board of team cards. The local three read first and read
   heavier; everything else is the same card at ordinary weight.
   ══════════════════════════════════════════════════════════════════════════ */
.col-band { margin: 0 0 2.6rem; }
.col-band[hidden] { display: none !important; }
.col-band-head {
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border-bottom: 2px solid var(--rule-hard); padding-bottom: .4rem;
  margin: 0 0 .6rem;
}
.col-band-note {
  font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
  max-width: var(--measure); margin: 0 0 1.2rem;
}

.col-teams { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-band[data-band="ours"] .col-teams { grid-template-columns: minmax(0, 1fr); }

.col-team {
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2);
  padding: .9rem 1.1rem 1rem; min-width: 0;
}
.col-team[hidden] { display: none !important; }
.col-team.is-ours { border-left: 4px solid var(--accent); background: var(--paper); }

.col-team-head { border-bottom: 1px solid var(--rule); padding-bottom: .5rem; margin-bottom: .2rem; }
.col-team-name {
  font-family: var(--sans); font-size: 1.12rem; font-weight: 800;
  line-height: 1.2; margin: 0 0 .15rem;
}
.col-team.is-ours .col-team-name { font-size: 1.3rem; }
.col-team-meta {
  font-family: var(--sans); font-size: .78rem; color: var(--ink-faint);
  line-height: 1.45;
}
.col-dot { opacity: .5; }
.col-team-record {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  color: var(--ink-soft); margin-top: .2rem;
}
.col-team-note {
  font-family: var(--sans); font-size: .86rem; color: var(--ink-soft);
  margin: .55rem 0 0; line-height: 1.5;
}
.col-empty {
  font-family: var(--sans); font-size: .82rem; color: var(--ink-faint);
  padding: .7rem 0 .1rem;
}

.col-games { margin-top: .2rem; }
.col-row {
  display: grid; grid-template-columns: minmax(84px, max-content) 1fr;
  gap: .1rem .9rem; padding: .55rem 0; border-top: 1px solid var(--rule);
}
.col-row[hidden] { display: none !important; }
.col-when { display: flex; flex-direction: column; padding-top: .1rem; }
.col-date {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; color: var(--ink); white-space: nowrap;
}
.col-time {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  color: var(--ink-faint); white-space: nowrap;
}
.col-main { min-width: 0; }
.col-match { font-family: var(--sans); font-size: .98rem; font-weight: 600; line-height: 1.35; }
.col-sport {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule);
  border-radius: 3px; padding: .05rem .35rem; margin-right: .4rem;
  vertical-align: middle;
}
.col-vs { color: var(--ink-faint); font-weight: 400; padding-right: .15rem; }
.col-opp { font-weight: 700; }
.col-where { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin-top: .1rem; }
/* A cross country placing is the result, not a footnote. Notes read at ink
   weight; venues stay faint. */
.col-note { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); margin-top: .1rem; }
.col-tv { font-family: var(--sans); font-size: .74rem; color: var(--ink-faint); margin-top: .1rem; }
.col-score {
  font-family: var(--sans); font-size: .86rem; font-weight: 800;
  color: var(--ink); margin-top: .2rem;
}

.col-desk {
  border-top: 2px solid var(--rule-hard); margin-top: 2.4rem; padding-top: 1.2rem;
  max-width: var(--measure);
}
.col-desk-item h3 { font-family: var(--sans); font-size: 1.02rem; margin: 0 0 .3rem; }
.col-desk-item p { margin: 0 0 1.1rem; color: var(--ink-soft); }

/* The section page's own way through to the schedules. */
.sec-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.8rem; }
.sec-tools a {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; padding: .4rem .85rem;
  border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-soft);
}
.sec-tools a:hover { border-color: var(--ink-faint); color: var(--ink); }

@media (max-width: 780px) {
  .col-teams, .col-band[data-band="ours"] .col-teams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .col-row { grid-template-columns: 1fr; }
  .col-when { flex-direction: row; gap: .5rem; padding-top: 0; align-items: baseline; }
}

/* The nav item for this page is the editor's to add, and the young paper
   reorders that bar with flex order. Everything unlisted sits at 20, which
   would drop College in among County Government. This puts it level with
   Football, and a tie keeps document order, so it lands directly after it
   without renumbering anything above. */
:root[data-mode="youth"] .sections li[data-slug="college"],
:root[data-mode="brainrot"] .sections li[data-slug="college"] { order: 2; }

/* The young palettes round their cards and their controls. */
:root[data-mode="youth"] .col-team,
:root[data-mode="brainrot"] .col-team { border-radius: 14px; }
/* brainrot paints the panels dark and leaves anything it has not heard of in
   dark ink on a dark ground. These are the new ones. */
:root[data-mode="brainrot"] .col-team { background: rgba(18,0,43,.6); }
:root[data-mode="brainrot"] .col-band-note,
:root[data-mode="brainrot"] .col-team-note,
:root[data-mode="brainrot"] .col-team-meta,
:root[data-mode="brainrot"] .col-where,
:root[data-mode="brainrot"] .col-note,
:root[data-mode="brainrot"] .col-team-record,
:root[data-mode="brainrot"] .col-tv,
:root[data-mode="brainrot"] .col-empty,
:root[data-mode="brainrot"] .col-desk-item p { color: #eafff0; }
:root[data-mode="brainrot"] .col-team-name,
:root[data-mode="brainrot"] .col-match,
:root[data-mode="brainrot"] .col-date,
:root[data-mode="brainrot"] .col-score { color: #fff; }

/* ── Reader stories, in the river ───────────────────────────────────────────
   They sit with reported work in date order, so the label has to do the whole
   job of telling a reader who wrote it. It reads as a badge, not a demotion:
   the accent colour the paper already uses for its second voice, and the same
   card, the same headline size and the same place in the list as anything a
   desk filed. What it never does is borrow a Tattler byline. */
.kicker.reader { color: var(--accent-2); }
.kicker.reader::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--accent-2); margin-right: .42rem;
}
.card.is-reader .byline .reader-note {
  color: var(--ink-faint); font-style: italic;
}
.card.is-reader .byline .reader-note::before { content: "· "; font-style: normal; }

/* ── The heart ──────────────────────────────────────────────────────────────
   The smallest thing a reader can say about a story. It sits in the share row
   because that is the line where a reader is already deciding what to do with
   a piece they liked. Ships hidden and is revealed by the script once a count
   is in, so a dead API shows nothing rather than a control that does not work. */
.heart {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1.1; cursor: pointer;
  min-height: 2.3rem; padding: .45rem .85rem; border-radius: 3px;
  border: 1.5px solid var(--ink-soft); background: var(--paper-2);
  color: var(--ink);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.heart:hover { border-color: var(--accent); color: var(--accent); }
.heart:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.heart .heart-mark { flex: 0 0 auto; }
.heart .heart-count { color: var(--ink-faint); font-weight: 600; }

/* Pressed. The fill is the tell, and the word changes too, so it does not rely
   on colour alone. */
/* Pressed fills rather than tinting. The tinted version put --accent text on
   --paper-2, which is 8.25:1 in the standard palette and 2.99:1 in youth, where
   the accent is a hot pink and the paper is cream. Filling uses the same pair
   the hover state already uses and clears AA in all four renderings. */
.heart.is-hearted {
  border-color: var(--accent); background: var(--accent); color: var(--on-strong);
}
.heart.is-hearted .heart-mark path { fill: currentColor; stroke: currentColor; }
.heart.is-hearted .heart-count { color: var(--on-strong); opacity: .8; }

@media (max-width: 640px) {
  .heart { font-size: .78rem; padding: .5rem .85rem; min-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .heart { transition: none; } }

/* ── Seven days on the coast ────────────────────────────────────────────────
   Runs above the story grid on /coast/. A row per day: label, high, low, what
   it is doing, chance of rain, wind. Tokens only, so it follows the reader's
   theme; no colour carries meaning on its own, since a rain chance that is
   only red is invisible to a good share of readers. The high chance gets
   weight and a word, not just a hue. */
.wx { margin: 0 0 2rem; border: 1px solid var(--rule); border-radius: 10px;
      background: var(--paper-2); overflow: hidden; }
.wx-head { display: flex; align-items: baseline; gap: .7rem;
           padding: .75rem 1rem; border-bottom: 1px solid var(--rule); }
.wx-head h2 { margin: 0; font-family: var(--sans); font-size: .82rem;
              font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.wx-where { font-family: var(--sans); font-size: .76rem; color: var(--ink-soft); }
.wx-days { list-style: none; margin: 0; padding: 0; }
.wx-day {
  display: grid; align-items: baseline; gap: .1rem .8rem;
  grid-template-columns: 8.5rem 3.2rem 3.2rem minmax(0, 1fr) 6rem 7rem;
  padding: .55rem 1rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .85rem;
}
.wx-day:first-child { border-top: 0; }
.wx-today { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wx-label { font-weight: 700; }
.wx-temp { font-variant-numeric: tabular-nums; text-align: right; }
.wx-hi { font-weight: 800; }
.wx-lo { color: var(--ink-soft); }
.wx-what { color: var(--ink-soft); }
.wx-pop, .wx-wind { font-size: .78rem; color: var(--ink-soft);
                    font-variant-numeric: tabular-nums; }
.wx-pop-hi { color: var(--ink); font-weight: 700; }
.wx-foot { margin: 0; padding: .6rem 1rem .75rem;
           border-top: 1px solid var(--rule); font-family: var(--sans);
           font-size: .72rem; color: var(--ink-soft); }

@media (max-width: 760px) {
  /* Wind is the first thing to go; the label, the two temperatures and what it
     is doing are what somebody checks on a phone. */
  .wx-day { grid-template-columns: 6.5rem 2.8rem 2.8rem minmax(0, 1fr); }
  .wx-wind { display: none; }
  .wx-pop { grid-column: 2 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TEEN PAPER
   A listings guide, not a front page with the colours turned up. The idioms
   here appear nowhere else in the paper: a numbered section index, a monospace
   clock column that runs down the whole page, and a spec block on every
   standing place whose first labelled row is the age rule.

   Everything below resolves through --tn-* tokens, which map onto the house
   custom properties, so the page follows the reader's light or dark palette.
   Brainrot mode is the one place they are remapped, because that palette puts
   --ink at near black on a near black --paper and text set in it disappears.

   Nothing on this page is signalled by colour alone. FREE is a word, the age
   rule is a labelled row that reads AGE, an unconfirmed rule says "not
   confirmed" and carries a dotted rule, and the chosen filter chip carries a
   tick as well as a fill.
   ══════════════════════════════════════════════════════════════════════════ */
.tn {
  --tn-ink:       var(--ink);
  --tn-soft:      var(--ink-soft);
  --tn-faint:     var(--ink-faint);
  --tn-paper:     var(--paper);
  --tn-panel:     var(--paper-2);
  --tn-rule:      var(--rule);
  --tn-hard:      var(--rule-hard);
  --tn-accent:    var(--accent);
  --tn-on-accent: var(--on-strong);
  counter-reset: tnsec;
  color: var(--tn-ink);
}
:root[data-mode="brainrot"] .tn {
  --tn-ink:   #f4ecff;
  --tn-soft:  #cbb3e8;
  --tn-faint: #a98fd0;
  --tn-panel: #1d0742;
  --tn-rule:  #4b2a78;
  --tn-hard:  var(--accent);
}

/* ── The flag ─────────────────────────────────────────────────────────────
   Its own masthead, under the paper's. Short enough to be a section front. */
.tn-flag {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .9rem;
  border-top: 5px solid var(--tn-hard);
  border-bottom: 1px solid var(--tn-rule);
  padding: .75rem 0 .8rem;
}
.tn-flag-h {
  font-family: var(--sans); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.045em; line-height: .85; margin: 0;
  font-size: clamp(2.3rem, 9vw, 4.2rem); color: var(--tn-ink);
}
.tn-flag-sub {
  margin: 0 0 .2rem auto; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tn-soft);
}

/* ── The index ────────────────────────────────────────────────────────────
   Wraps rather than scrolls, so a narrow phone never pushes the page sideways. */
.tn-jump { margin: 0 0 2.1rem; }
.tn-jump ul {
  list-style: none; margin: 0; padding: .8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.tn-jump a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  color: var(--tn-ink); background: var(--tn-panel);
  border: 1px solid var(--tn-rule); border-radius: 999px;
  padding: .45rem .9rem; min-height: 2.25rem;
}
.tn-jump a:hover, .tn-jump a:focus-visible {
  border-color: var(--tn-accent); color: var(--tn-accent);
}
.tn-jump b {
  font-family: var(--mono); font-weight: 700; font-size: .72rem;
  font-variant-numeric: tabular-nums; color: var(--tn-soft);
}

/* ── Section heads, numbered ──────────────────────────────────────────────
   01, 02, 03 down the page. Nothing else in the paper counts its sections and
   that is the point: a reader who lands halfway down knows where they are. */
.tn-sec { margin: 0 0 2.5rem; scroll-margin-top: 4.5rem; }
.tn-head {
  counter-increment: tnsec;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem;
  border-bottom: 3px solid var(--tn-hard);
  padding-bottom: .45rem; margin: 0 0 1rem;
}
.tn-head::before {
  content: counter(tnsec, decimal-leading-zero);
  flex: none; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--tn-accent); font-variant-numeric: tabular-nums;
}
.tn-head h2 {
  margin: 0; font-family: var(--sans); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(1.3rem, 4.6vw, 1.95rem); color: var(--tn-ink);
}
.tn-head-note {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tn-faint);
}
.tn-head > a {
  margin-left: auto; font-family: var(--sans); font-size: .72rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--tn-accent); white-space: nowrap;
}
.tn-head > a:hover { text-decoration: underline; }

/* ── Friday night ─────────────────────────────────────────────────────────── */
.tn-games {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .7rem;
}
.tn-game {
  display: flex; flex-direction: column; gap: .16rem;
  background: var(--tn-panel); border: 1px solid var(--tn-rule);
  border-left: 4px solid var(--tn-accent); border-radius: 4px;
  padding: .72rem .85rem;
}
.tn-game-clock {
  font-family: var(--mono); font-size: .76rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--tn-accent);
}
.tn-game-teams {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  line-height: 1.28; color: var(--tn-ink); overflow-wrap: anywhere;
}
.tn-game-teams em { font-style: normal; font-weight: 400; color: var(--tn-faint); }
.tn-game-teams b { font-weight: 900; }
.tn-game-site {
  font-family: var(--sans); font-size: .78rem; color: var(--tn-soft);
  overflow-wrap: anywhere;
}
.tn-lab {
  align-self: flex-start; margin-top: .15rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tn-soft);
}

/* ── The ledger ───────────────────────────────────────────────────────────
   One clock column all the way down the page, in tabular figures, whether it
   carries a kickoff or a date. */
.tn-ledger { list-style: none; margin: 0; padding: 0; }
.tn-row {
  display: grid;
  grid-template-columns: minmax(5.2rem, max-content) minmax(0, 1fr);
  gap: .15rem 1.1rem; align-items: start;
  padding: .72rem 0; border-top: 1px solid var(--tn-rule);
}
.tn-row:first-child { border-top: 0; }
.tn-clock {
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; text-transform: uppercase;
  color: var(--tn-accent); white-space: nowrap; padding-top: .16rem;
}
.tn-rowbody { min-width: 0; }
.tn-rowtitle {
  margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1.04rem;
  line-height: 1.26; color: var(--tn-ink); overflow-wrap: anywhere;
}
.tn-rowtitle a { color: var(--tn-ink); text-decoration: none; }
.tn-rowtitle a:hover { color: var(--tn-accent); text-decoration: underline; }
.tn-rowwhere {
  margin: .16rem 0 0; font-family: var(--sans); font-size: .82rem;
  line-height: 1.35; color: var(--tn-soft); overflow-wrap: anywhere;
}
.tn-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; }
.tn-daymark {
  margin: 1.1rem 0 .2rem; padding: .32rem .6rem; border-radius: 3px;
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tn-ink);
  background: color-mix(in srgb, var(--tn-ink) 12%, transparent);
}
.tn-ledger > .tn-daymark:first-child { margin-top: 0; }
.tn-daymark + .tn-row { border-top: 0; }

/* ── Tags. Every one of them is a word first ──────────────────────────────── */
.tn-tag {
  display: inline-block; font-family: var(--sans); font-size: .66rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 3px;
  border: 1px solid var(--tn-rule); color: var(--tn-soft); white-space: nowrap;
}
.tn-tag-free {
  background: var(--tn-accent); border-color: var(--tn-accent);
  color: var(--tn-on-accent);
}
.tn-tag-age {
  border-color: var(--tn-accent); color: var(--tn-ink);
  white-space: normal; text-transform: none; letter-spacing: .01em;
  font-size: .72rem;
}
.tn-tag-cat { border-style: dashed; }
.tn-tag-school {
  border-color: var(--tn-faint); color: var(--tn-ink); font-weight: 900;
}

/* ── Any time: the standing places ───────────────────────────────────────── */
.tn-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.tn-chips[hidden] { display: none; }
.tn-chip {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .02em; text-transform: capitalize; cursor: pointer;
  padding: .42rem .82rem; min-height: 2.25rem; border-radius: 999px;
  border: 1px solid var(--tn-rule); background: transparent;
  color: var(--tn-soft);
}
.tn-chip:hover { border-color: var(--tn-faint); color: var(--tn-ink); }
.tn-chip.is-on {
  background: var(--tn-ink); border-color: var(--tn-ink); color: var(--tn-paper);
}
.tn-chip.is-on::before { content: "\2713\00a0"; }

.tn-placegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}
.tn-place {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tn-panel);
  border: 1px solid var(--tn-rule); border-top: 4px solid var(--tn-hard);
  border-radius: 4px; padding: .9rem 1rem 1rem;
  transition: border-color .14s ease;
}
.tn-place[hidden] { display: none; }
.tn-place:hover { border-color: var(--tn-accent); }
.tn-place-kind {
  margin: 0 0 .35rem; font-family: var(--mono); font-size: .66rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tn-accent); overflow-wrap: anywhere;
}
.tn-place-kind span { color: var(--tn-faint); }
.tn-place-name {
  margin: 0 0 .75rem; font-family: var(--sans); font-weight: 900;
  letter-spacing: -.025em; font-size: 1.18rem; line-height: 1.16;
  color: var(--tn-ink); overflow-wrap: anywhere;
}
.tn-place-name a { color: var(--tn-ink); text-decoration: none; }
.tn-place-name a:hover { color: var(--tn-accent); text-decoration: underline; }
.tn-place-what {
  margin: -.45rem 0 .75rem; font-family: var(--sans); font-size: .92rem;
  line-height: 1.4; color: var(--tn-ink);
}

/* The spec block. Age is first and it is bled to the card edge, because it is
   the line that sends somebody home from the door. */
.tn-spec { margin: 0 0 .7rem; padding: 0; border-top: 1px solid var(--tn-rule); }
.tn-spec-row {
  display: grid; grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: .2rem .8rem; padding: .45rem 0;
  border-bottom: 1px solid var(--tn-rule);
}
.tn-spec dt {
  margin: 0; font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tn-faint);
  padding-top: .18rem;
}
.tn-spec dd {
  margin: 0; font-family: var(--sans); font-size: .86rem; line-height: 1.4;
  color: var(--tn-ink); overflow-wrap: anywhere;
}
.tn-spec-age {
  margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
  background: color-mix(in srgb, var(--tn-accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--tn-accent);
}
.tn-spec-age dt { color: var(--tn-ink); }
.tn-spec-age dd { font-weight: 650; }
.tn-spec dd b { font-weight: 800; }
/* The week grid sits under today's answer, because a reader who wants to go now
   wants today and a reader planning Saturday wants the grid, and printing only
   one of them gets one of them wrong. */
.tn-spec-week {
  display: block; margin-top: .2rem; font-family: var(--mono);
  font-size: .68rem; line-height: 1.5; font-weight: 400; color: var(--tn-faint);
}
.tn-unsure {
  display: inline-block; font-family: var(--mono); font-size: .64rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tn-soft); border-bottom: 2px dotted var(--tn-faint);
  padding-bottom: 1px;
}
.tn-place-note {
  margin: 0 0 .65rem; font-family: var(--sans); font-size: .85rem;
  line-height: 1.45; color: var(--tn-soft);
}
.tn-place-where {
  margin: auto 0 0; padding-top: .3rem;
  font-family: var(--mono); font-size: .68rem; line-height: 1.55;
  color: var(--tn-faint); overflow-wrap: anywhere;
}
.tn-place-where a { color: var(--tn-soft); }

/* ── The stories, and everything else ────────────────────────────────────── */
.tn-stories .card.lead .headline { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
.tn-rest .tn-head { border-bottom-width: 1px; }
.tn-rest .tn-head h2 { font-size: 1.05rem; color: var(--tn-soft); }
.tn-rest ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.tn-rest li { break-inside: avoid; padding: .3rem 0; }
.tn-rest a {
  font-family: var(--sans); font-size: .87rem; font-weight: 600;
  line-height: 1.35; color: var(--tn-soft); text-decoration: none;
}
.tn-rest a:hover { color: var(--tn-accent); text-decoration: underline; }
/* The translated line under a grown headline. Lighter and smaller than the
   headline it explains, because it is the reason to tap and not the thing
   being tapped. Block so it always takes its own line inside a column. */
.tn-rest li a { display: block; }
.tn-rest-why {
  display: block; margin-top: .15rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 400;
  line-height: 1.4; color: var(--tn-dim, var(--tn-soft)); opacity: .85;
}
.tn-empty {
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  color: var(--tn-soft); margin: 1.4rem 0;
}
.tn-empty a { color: var(--tn-accent); }

@media (max-width: 560px) {
  .tn-row { grid-template-columns: minmax(0, 1fr); }
  .tn-clock { padding-top: 0; }
  .tn-spec-row { grid-template-columns: minmax(0, 1fr); }
  .tn-spec dt { padding-top: 0; }
  .tn-flag-sub { margin-left: 0; }
  .tn-head > a { margin-left: 0; }
  .tn-rest ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-place { transition: none; }
}

/* The masthead is shared, and at phone widths it is the one thing that runs the
   teen page off the side of the screen. Both audience modes put a second pill
   button in the top row, and Contribute plus About plus two pills is wider than
   a 390px viewport. Wrapping the row is the whole fix, and nothing wider than
   620px changes. */
@media (max-width: 620px) {
  .masthead-top { flex-wrap: wrap; gap: .5rem .9rem; }
  .masthead-actions { flex-wrap: wrap; gap: .6rem .9rem; align-items: center; }
  .edition { flex-wrap: wrap; }
}

/* ── The blotter ────────────────────────────────────────────────────────────
   /public-safety/reported/. A record, so it reads as a record: monospace
   figures, tight rows, no drama. Nothing here is colour-coded by severity,
   because a call type is not a severity and tinting a "weapons complaint" red
   would be the page making a claim the sheriff did not. */
.cr-frame {
  margin: 0 0 1.8rem; padding: 1rem 1.1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--paper-2);
}
.cr-frame-h {
  margin: 0 0 .7rem; font-family: var(--sans); font-size: .72rem;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cr-frame-grid {
  display: grid; gap: .8rem 1.6rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.cr-frame-grid div { margin: 0; }
.cr-frame-grid dt {
  font-family: var(--sans); font-size: .76rem; font-weight: 800;
  margin: 0 0 .15rem;
}
.cr-frame-grid dd {
  margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft);
}

.cr-head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--rule-hard);
}
.cr-head h2 {
  margin: 0; font-family: var(--sans); font-size: .82rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.cr-head span { font-family: var(--sans); font-size: .76rem; color: var(--ink-soft); }

.cr-areas { margin: 0 0 2rem; }
.cr-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.cr-chip {
  font-family: var(--sans); font-size: .78rem; padding: .32rem .7rem;
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--ink-soft);
}
.cr-chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cr-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
/* The selected chip carries a tick as well as a fill, so the state survives
   colour blindness and a screen reader reads aria-pressed. */
.cr-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cr-chip.is-on b { color: var(--paper); }
/* Youth mode paints its selected chips with the accent, not the ink, and
   --on-strong is the token that reads against the accent. Matching .chip.on
   above rather than inventing a second rule for the same job. */
:root[data-mode="youth"] .cr-chip.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--on-strong);
}
:root[data-mode="youth"] .cr-chip.is-on b { color: var(--on-strong); }
.cr-chip.is-on::before { content: "\2713\00a0"; }
.cr-thin { font-weight: 700; }
.cr-areas-note {
  margin: .7rem 0 0; font-family: var(--sans); font-size: .74rem;
  color: var(--ink-soft); line-height: 1.5; max-width: 46rem;
}

.cr-day { margin: 0 0 1.8rem; }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-row {
  display: grid; gap: .15rem .9rem; padding: .42rem 0;
  grid-template-columns: 3.6rem minmax(9rem, 13rem) minmax(0, 1fr) minmax(8rem, 13rem);
  border-top: 1px solid var(--rule); align-items: baseline;
}
/* After filtering, the first VISIBLE row is usually not :first-child, so the
   hairline has to follow what is shown rather than what is first in the DOM. */
.cr-row:first-child { border-top: 0; }
.cr-row:not([hidden]) ~ .cr-row:not([hidden]) { border-top: 1px solid var(--rule); }
.cr-list .cr-row:not([hidden]):first-of-type { border-top: 0; }
.cr-partial {
  font-family: var(--sans); font-size: .72rem; color: var(--ink-soft);
  font-style: italic;
}
.cr-time {
  font-family: var(--mono, ui-monospace, monospace); font-size: .8rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.cr-what { font-family: var(--sans); font-size: .82rem; font-weight: 700; }
/* A coarse bucket is not the agency's wording. Say so by weight, not colour. */
.cr-vague { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.cr-where { font-size: .88rem; }
.cr-area { font-family: var(--sans); font-size: .76rem; color: var(--ink-soft); text-align: right; }
/* A postal-boundary label is a weaker claim than a city or census one. */
.cr-area-soft { opacity: .78; }
.cr-foot {
  margin: 1.6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .74rem; color: var(--ink-soft);
  line-height: 1.5; max-width: 46rem;
}

@media (max-width: 760px) {
  /* Two lines per call: what and when, then where. The area goes under the
     street rather than off the right edge. */
  .cr-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .cr-what { grid-column: 2; }
  .cr-where { grid-column: 2; }
  .cr-area { grid-column: 2; text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FIVE O'CLOCK REPORT — masthead inset, top left, front page only
   A poster with a NEWS badge, not a black rectangle. The player is built on
   click. Publisher, 2026-09-27.
   ══════════════════════════════════════════════════════════════════════════ */
.mh-wrap { position: relative; }

/* Out of the flow so the nameplate still centres. */
.mh-broadcast { width: 216px; }
@media (min-width: 900px) {
  .mh-broadcast { position: absolute; left: 0; top: .35rem; z-index: 2; }
}

.mh-broadcast-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--rule, #d8d4cc);
  border-radius: 2px;
  background: #111;
  overflow: hidden;
  cursor: pointer;
}
.mh-broadcast-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* The small picture that says news. */
.mh-broadcast-badge {
  position: absolute; left: 0; top: 0;
  padding: .17rem .42rem;
  background: var(--accent, #7c1c1c);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mh-broadcast-play {
  position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset;
}
/* The triangle, drawn rather than shipped as an asset. */
.mh-broadcast-play::after {
  content: "";
  position: absolute; left: 53%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.mh-broadcast-poster:hover .mh-broadcast-play,
.mh-broadcast-poster:focus-visible .mh-broadcast-play { background: rgba(0,0,0,.82); }

.mh-broadcast-len {
  position: absolute; right: .25rem; bottom: .25rem;
  padding: .1rem .3rem;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
}

/* PLAYING IN PLACE. The box grows from 216 to 340 on play, because YouTube's
   controls are unusable at 216 and a thirty minute report is not a thumbnail.
   The inset is absolutely positioned above 900px, so growing it moves nothing:
   the nameplate stays centred and no text reflows. Bigger than that is what the
   player's own fullscreen button is for. */
@media (min-width: 900px) {
  .mh-broadcast.is-playing { width: 340px; }
}
.mh-broadcast iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule, #d8d4cc);
  border-radius: 2px;
  display: block;
  background: #000;
}

.mh-broadcast-cap {
  display: block;
  margin-top: .3rem;
  font-size: .74rem;
  line-height: 1.25;
  text-decoration: none;
}

@media (max-width: 899px) {
  .mh-broadcast { width: 190px; margin: 0 0 .7rem; }
}

/* The young paper now dates its stories. */
.yp-when { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* The teen flag links to its own archive. */
.tn-flag-h a { color: inherit; text-decoration: none; }

/* ── Election night band ──────────────────────────────────────────────────
   Leads the front page on 2026-11-03 and the morning after. Reads at a glance
   on a phone: race name, candidates, a bar, the count. Party stripes are muted
   on purpose; this is a results table, not a cheer. */
.fp-election {
  border: 2px solid var(--rule-hard); border-radius: 4px;
  background: var(--paper); margin: 0 0 1.6rem; padding: 1rem 1.1rem 1.2rem;
}
.fpe-head { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: .4rem .9rem; border-bottom: 2px solid var(--rule-hard);
  padding-bottom: .6rem; }
.fpe-kicker { font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fpe-title h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1;
  margin: .1rem 0 0; }
.fpe-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  font-family: var(--sans); font-size: .76rem; color: var(--ink-soft); }
.fpe-badge { font-weight: 700; font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 3px; }
.fpe-badge.open { background: #f2f0ea; color: var(--ink-soft); }
.fpe-badge.live { background: var(--accent); color: #fff; }
.fpe-badge.done { background: #1d6b3a; color: #fff; }
.fpe-prec { font-weight: 600; }
.fpe-asof { color: var(--ink-faint); }
.fpe-note { font-family: var(--sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft); margin: .7rem 0 .4rem; }
.fpe-group { font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin: 1.1rem 0 .6rem; }
.fpe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem 1.4rem; }
.fpe-race { break-inside: avoid; }
.fpe-rname { font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: var(--ink); margin-bottom: .35rem; display: flex; justify-content: space-between;
  gap: .5rem; align-items: baseline; }
.fpe-rprec { font-weight: 600; font-size: .7rem; color: var(--ink-faint); white-space: nowrap; }
.fpe-choices { list-style: none; margin: 0; padding: 0; }
.fpe-choice { padding: .25rem 0; }
.fpe-crow { display: flex; justify-content: space-between; gap: .6rem;
  font-family: var(--sans); font-size: .82rem; align-items: baseline; }
.fpe-choice.ahead .fpe-cname { font-weight: 700; }
.fpe-cname { color: var(--ink); }
.fpe-party { font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  padding: 0 .25rem; border-radius: 2px; color: var(--ink-soft); background: #ece9e2; }
.fpe-party.p-rep { color: #7a1f1f; background: #f3e3e1; }
.fpe-party.p-dem { color: #1b3a6b; background: #e1e8f3; }
.fpe-cnum { font-family: var(--mono, var(--sans)); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink); }
.fpe-pending { color: var(--ink-faint); }
.fpe-bar { height: 4px; background: var(--paper-2); border-radius: 2px; margin-top: .25rem;
  overflow: hidden; }
.fpe-bar span { display: block; height: 100%; background: var(--ink-faint); }
.fpe-choice.ahead .fpe-bar span { background: var(--accent); }
.fpe-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem;
  font-family: var(--sans); font-size: .74rem; color: var(--ink-faint);
  border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: .55rem; }
.fpe-foot a { color: var(--accent); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .fpe-badge.open { background: #2a2a2a; }
  .fpe-party { background: #2a2a28; }
  .fpe-party.p-rep { color: #e5a6a0; background: #3a2422; }
  .fpe-party.p-dem { color: #a8c0e8; background: #222c3a; }
  .fpe-bar { background: #2a2a28; }
}
.fpe-statewide { font-family: var(--sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft); background: var(--paper-2); border-radius: 4px;
  padding: .7rem .85rem; margin-top: 1rem; }
.fpe-statewide strong { color: var(--ink); }
.fpe-sw-src { display: block; margin-top: .3rem; font-size: .72rem; color: var(--ink-faint); }
@media (prefers-color-scheme: dark) { .fpe-statewide { background: #222; } }