/* =============================================================================
   The Good Neighbor Journal — design system
   goodneighborjournal.com · act05/pag01
   =============================================================================

   DIRECTION: a small-town American newspaper, printed large.

   The reader is 60+. Every decision below is subordinated to that one fact, and
   most of them are deliberately the OPPOSITE of a modern marketing site:

     - Type is set at 21–22px, not 16px. Body copy leads at 1.75.
     - One column. No cards, no grids of tiles, no carousels, no accordions —
       nothing the reader has to figure out before they can read.
     - Structure is drawn with RULES (hairlines), the way a newspaper does it,
       not with drop shadows, rounded corners and tinted panels.
     - Links are blue and underlined, always, everywhere. A link that only
       reveals itself on hover does not exist for a reader who does not hover.
     - Contrast is AAA (≥7:1) for body text. No grey-on-grey, no thin weights.
     - Nothing moves. No scroll animation, no parallax, no reveal-on-scroll.
     - Navigation is a row of plain text links, always visible. No hamburger:
       the icon is not self-evident to this audience and hides the whole site
       behind a guess.
     - Touch targets are 48px minimum, spaced so a shaky tap can't hit two.

   TYPEFACES (fonts.bunny.net — GDPR-friendly Google Fonts proxy, per CLAUDE.md)
     Old Standard TT — the nameplate and headlines. An early-1900s "modern"
       serif; it reads as a genuine newspaper masthead rather than a logo.
     Literata        — body copy. Drawn for screen reading with a very large
       x-height, which is what actually carries legibility at this age bracket.
     Public Sans     — labels, kickers, navigation, buttons. This is the U.S.
       Web Design System typeface; using it is what makes the page read as a
       plain American institutional site rather than a campaign page.

   Each stack ends in a system fallback, so the page is fully legible even if
   the font request is blocked or slow.

   CACHING: /css/* is served immutable (see public/_headers). This file is
   VERSIONED IN ITS NAME. Changing it in place will not reach anyone who already
   has it cached — ship journal.v4.css and update the <link> in every page.

   v3 (2026-08-15) is v2 with two layout fixes, and it exists as a SEPARATE
   FILE for exactly the reason above: v2 had already been deployed and the edge
   was serving it with `immutable`, so editing it in place fixed the origin and
   reached nobody. The rule in this paragraph is not advice, it is the failure
   that produced this line.

   ---------------------------------------------------------------------------
   v2 (2026-08-15) — DESKTOP COMPOSITION AND NAVIGATION
   ---------------------------------------------------------------------------
   v1 was, on a wide screen, a phone layout with margins: one 38rem column
   floating in the middle of 1900px of paper. Every rule in it was right for
   reading and none of them were doing anything for the two thirds of the
   viewport on either side. This version keeps the reading measure exactly where
   it was — that number is not a style choice, it is the line length the eye can
   track — and gives the page a broadsheet around it:

     - The FRONT PAGE becomes a real front page above 62em: a lead story set
       large, then the remaining stories in two columns divided by rules. Still
       no cards, no shadows, no tiles. A newspaper front page is multi-column;
       only the body of an article is not.
     - The MASTHEAD flanks the nameplate with its two lines instead of stacking
       them, which is how a broadsheet nameplate has always been set.
     - ARTICLES open with a full-width header (kicker, headline, byline, rule)
       and then narrow to the reading measure, the way a magazine feature does.
     - Every article ends with WHERE TO GO NEXT. This was the real navigation
       failure: a reader who finished a piece had no route onward except the
       browser's back button.
     - Focus is visible everywhere, not just on the nav. prefers-contrast is
       honoured. The print stylesheet is finished properly, because the About
       page tells readers to print articles for their appointments and that
       promise should survive contact with a printer.

   Nothing was removed. Every class v1 defined still exists and still behaves
   the same at phone width, so the shop stylesheet layered on top of it
   (shop.v2.css) and every existing page keep working untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */

:root {
  /* Paper & ink. Warm off-white rather than pure white: less glare, and glare
     is a real complaint for older eyes. Ink is near-black, never grey. */
  --paper:        #fbfaf7;
  --paper-sunk:   #f2efe8;  /* pull-quotes, the standfirst band, table stripes */
  --ink:          #16150f;  /* body text — 16.4:1 on --paper */
  --ink-soft:     #43403a;  /* bylines, captions — 8.9:1, still AAA */
  --rule:         #16150f;
  --rule-faint:   #cfcabc;

  /* One accent, used sparingly: the masthead rule and section markers.
     A newspaper is black on white with one spot colour, not a palette. */
  --accent:       #9e2b25;  /* press red */
  --link:         #10406e;  /* 9.3:1 on --paper */
  --link-visited: #5b2a6e;
  --focus:        #9e2b25;

  --font-display: "Old Standard TT", "Times New Roman", Times, serif;
  --font-body:    "Literata", Georgia, "Times New Roman", serif;
  --font-label:   "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale. --step-0 is BODY and is the anchor: 21px on phones,
     22px from tablet up. Nothing on this site is smaller than 17px. */
  --step-0:  1.3125rem;                          /* 21px  body */
  --step-1:  1.5rem;                             /* 24px  lead paragraph */
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2rem);      /* h3 */
  --step-3:  clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);    /* h2 */
  --step-4:  clamp(2.3rem, 1.6rem + 3.4vw, 3.4rem);    /* h1 */
  --step-sm: 1.0625rem;                          /* 17px  floor: captions, legal */

  --measure: 38rem;   /* ~66 characters at --step-0 — the comfortable line.
                         UNCHANGED in v2 on purpose: this is the length the eye
                         tracks without losing the return sweep, and widening it
                         is the single easiest way to make a page look modern
                         and read worse. */
  --shell:   76rem;   /* masthead / front page / footer. Was 64rem: the furniture
                         may use the desk even though the prose may not. */
  --shell-narrow: 58rem;  /* institutional pages, which are prose end to end */

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;

  --tap: 48px;        /* minimum interactive height (WCAG 2.5.5 AAA) */
}

/* Dark mode is honoured because some readers set it system-wide for comfort,
   but the paper metaphor is kept: warm dark ground, no pure black, no neon.
   Contrast stays AAA in both directions. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #16150f;
    --paper-sunk:   #211f18;
    --ink:          #f4f1e8;
    --ink-soft:     #c3bdae;
    --rule:         #f4f1e8;
    --rule-faint:   #4a463c;
    --accent:       #e58b84;
    --link:         #9ec7ee;
    --link-visited: #cdaee0;
    --focus:        #e58b84;
  }
}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */

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

html {
  /* No smooth scroll: for a reader who uses the keyboard or a screen magnifier
     an animated jump is disorienting. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  /* Kept OFF deliberately: justified text opens rivers of white space at this
     size on narrow screens, and hyphenation breaks words mid-read. */
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
  body { font-size: 1.375rem; }   /* 22px */
}

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

/* Every interactive element gets the same unmissable focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Skip link — first thing in the tab order on every page. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-label);
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------ */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 48em) {
  .shell { padding-inline: var(--space-4); }
}

/* The reading column. Everything that is prose lives inside one of these. */
.column {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   4. Masthead & navigation
   ------------------------------------------------------------------------ */

.masthead {
  border-bottom: 3px solid var(--rule);
  padding-top: var(--space-4);
  text-align: center;
}

.masthead__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}

.masthead__name a {
  color: inherit;
  text-decoration: none;
}

/* The thin/thick rule pair under a nameplate is the oldest signal in newspaper
   typography that says "this is a publication". Cheaper and truer than a logo. */
.masthead__rules {
  border-top: 1px solid var(--rule);
  border-bottom: 4px solid var(--accent);
  height: 5px;
  margin: var(--space-2) auto var(--space-2);
  max-width: 100%;
}

.masthead__line {
  font-family: var(--font-label);
  font-size: var(--step-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}

.nav {
  border-top: 1px solid var(--rule-faint);
  padding-block: var(--space-1);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Gap, not margin: guarantees the 48px targets never touch, so a mistap
     lands on nothing rather than on the wrong page. */
  gap: 0 var(--space-1);
}

.nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-2);
  font-family: var(--font-label);
  font-size: 1.1875rem;      /* 19px */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------------------------------------------------------------------------
   5. Prose
   ------------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  /* Headlines wrap on meaning rather than mid-phrase where the browser
     supports it — one less stumble when scanning. */
  text-wrap: balance;
}

h1 { font-size: var(--step-4); margin-top: var(--space-5); }
h2 { font-size: var(--step-3); margin-top: var(--space-5); }
h3 { font-size: var(--step-2); margin-top: var(--space-4); }

p, ul, ol, blockquote, figure, table {
  margin: 0 0 var(--space-3);
}

/* The opening paragraph of an article, set larger — the newspaper standfirst. */
.lead {
  font-size: var(--step-1);
  line-height: 1.65;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:visited { color: var(--link-visited); }

a:hover,
a:focus-visible {
  text-decoration-thickness: 4px;
}

/* Lists: generous spacing between items so a finger or a magnifier can track
   from one to the next. */
ul, ol { padding-left: 1.4em; }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--accent); }

strong, b { font-weight: 700; }

blockquote {
  border-left: 5px solid var(--accent);
  background: var(--paper-sunk);
  padding: var(--space-3);
  font-size: var(--step-1);
  line-height: 1.6;
}
blockquote p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule-faint);
  margin-block: var(--space-5);
}

figure { margin-inline: 0; }

figcaption {
  font-family: var(--font-label);
  font-size: var(--step-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: var(--space-1);
  border-top: 1px solid var(--rule-faint);
  margin-top: var(--space-1);
}

/* Small caps label above a headline — "HEALTH", "AT HOME", "FROM THE EDITOR". */
.kicker {
  font-family: var(--font-label);
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-1);
}

.byline {
  font-family: var(--font-label);
  font-size: var(--step-sm);
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
}

/* Wide content (tables) must scroll inside itself, never the page. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--step-sm);
}
th, td {
  border: 1px solid var(--rule-faint);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}
th {
  font-family: var(--font-label);
  background: var(--paper-sunk);
}

/* ---------------------------------------------------------------------------
   6. Article index (the front page)
   ------------------------------------------------------------------------ */

/* Deliberately NOT a card grid. Each entry is a headline, a short standfirst
   and a rule underneath — a stack of stories, read top to bottom. */
.stories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story {
  border-top: 1px solid var(--rule-faint);
  padding-block: var(--space-4);
  margin: 0;
}

.story:first-child { border-top: 3px solid var(--rule); }

.story h3 { margin-top: 0; }

.story h3 a {
  color: var(--ink);
  text-decoration: none;
}

.story h3 a:hover,
.story h3 a:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.story p { margin-bottom: var(--space-2); }

/* "Read the full article →" — a plain, unmistakable text link with a big
   target, not a button pretending to be a card. */
.more {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.1875rem;
}

/* ---------------------------------------------------------------------------
   7. Notes, disclaimers, callouts
   ------------------------------------------------------------------------ */

/* The medical disclaimer required on every page in a health niche. Bordered
   and set apart so it reads as a standing notice, not as body copy. */
.notice {
  border: 2px solid var(--rule-faint);
  background: var(--paper-sunk);
  padding: var(--space-3);
  font-size: var(--step-sm);
  line-height: 1.6;
}

.notice p:last-child { margin-bottom: 0; }

.notice__title {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--step-sm);
  margin: 0 0 var(--space-1);
}

/* ---------------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------------ */

.footer {
  border-top: 3px solid var(--rule);
  margin-top: var(--space-6);
  padding-block: var(--space-4) var(--space-5);
  font-size: var(--step-sm);
  color: var(--ink-soft);
}

.footer__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.footer nav ul {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}

.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-label);
  font-weight: 600;
}

.footer p { margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------------------
   9. Forms (contact page)
   ------------------------------------------------------------------------ */

label {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  min-height: var(--tap);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink-soft);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

textarea { min-height: 10rem; resize: vertical; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-label);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   10. Utilities
   ------------------------------------------------------------------------ */

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* Honour the OS setting. There is almost nothing to disable here by design,
   but a reader who asks for no motion must get none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   11. Print — readers in this bracket genuinely print articles to read them.
   ------------------------------------------------------------------------ */

@media print {
  :root { --paper: #fff; --ink: #000; }
  body { font-size: 12pt; line-height: 1.5; }
  .nav, .skip, .footer nav { display: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* ===========================================================================
   12. v2 — ACCESSIBILITY
   ===========================================================================
   These are corrections, not decoration. Each one below is a thing a reader
   with an ageing eye, a tremor or a keyboard actually runs into.
   ------------------------------------------------------------------------ */

/* A visible focus ring EVERYWHERE. v1 styled focus on the nav and the buttons
   and nowhere else, which means a keyboard reader moving through an article's
   links had no idea where they were. The ring is drawn outside the element so
   it never overlaps the glyphs it is pointing at. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anchored headings must not land under the top edge of the window. */
:target { scroll-margin-top: var(--space-4); }

/* Prose links: thick enough to see, offset enough that the underline does not
   cut through descenders. Underline always — never hover-only. */
.column p a,
.column li a,
.column figcaption a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.column p a:hover,
.column li a:hover {
  text-decoration-thickness: 3px;
}

/* Some readers set "increase contrast" at the OS level. Honour it: rules go
   solid, and the soft ink used for bylines and captions becomes full ink. */
@media (prefers-contrast: more) {
  :root {
    --ink-soft: var(--ink);
    --rule-faint: var(--rule);
  }
}

/* Long words (URLs in the privacy policy, drug names) must never force a
   horizontal scroll on a phone held in one hand. */
.column { overflow-wrap: break-word; }

/* ===========================================================================
   13. v2 — DESKTOP COMPOSITION
   ===========================================================================
   Everything here is inside a min-width query. Phone layout is byte-identical
   to v1 by construction: this section cannot fire below 62em.
   ------------------------------------------------------------------------ */

/* --- The nameplate, flanked ------------------------------------------------
   DOM order is: line, h1, rules, line. Grid re-places those four elements into
   a broadsheet nameplate without a single change to the markup of the nine
   pages that already ship it. */
@media (min-width: 62em) {
  /* DIRECT CHILD ONLY. The nav lives inside <header class="masthead"> and has a
     .shell of its own; a descendant selector here turned that one into a
     three-column grid too and broke the menu onto two rows. */
  .masthead > .shell {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
    grid-template-areas:
      "left  name  right"
      "rules rules rules";
    align-items: center;
    column-gap: var(--space-4);
    padding-bottom: var(--space-2);
  }
  .masthead__line:first-child  { grid-area: left;  text-align: left;  margin: 0; }
  .masthead__name              { grid-area: name; white-space: nowrap; }
  .masthead__line:last-child   { grid-area: right; text-align: right; margin: 0; }
  .masthead__rules             { grid-area: rules; margin: var(--space-3) 0 0; }

  /* The flanking lines are set in spaced small caps, which rags badly in a
     narrow measure. Loosen the tracking, let them breathe over two lines, and
     stop them from turning into a ladder of single words. */
  .masthead__line {
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-wrap: balance;
    max-width: 15rem;
  }
  .masthead__line:first-child { margin-right: auto; }
  .masthead__line:last-child  { margin-left: auto; }

  /* The nameplate must not compete with the flanks for room. */
  .masthead__name { font-size: clamp(3rem, 1rem + 4.4vw, 4.2rem); }
}

/* --- The front page --------------------------------------------------------
   A stack of stories is correct on a phone and wrong on a desk: it puts four
   headlines below the fold that a reader has no reason to suspect exist.
   Above 62em the first story leads at full width and the rest run in two
   columns, divided by rules the way a newspaper divides them. */
@media (min-width: 62em) {
  .stories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
  }

  /* The lead. Full width, headline large, and the standfirst set across two
     columns underneath it — the way a broadsheet sets a lead.

     An earlier version put the headline and the standfirst side by side in a
     grid. It looked right in the abstract and wrong on the screen: the
     standfirst is always taller than one line of headline, so the row it shared
     with the link stretched and left a hole between the headline and "Read the
     full article". Columns have no such problem. */
  .story:first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--space-5);
  }
  .story:first-child h3 {
    font-size: clamp(2.4rem, 1.4rem + 3vw, 3.4rem);
    max-width: 22ch;      /* a lead headline should break, not run the full page */
    margin: 0 0 var(--space-3);
  }
  .story:first-child p:not(.kicker) {
    font-size: 1.1875rem;
    columns: 2;
    column-gap: var(--space-5);
    margin: 0 0 var(--space-2);
  }
  .story:first-child .more { margin-top: var(--space-1); }

  /* The rest: two columns, vertical rule between them, no boxes. */
  .story + .story { border-top: 1px solid var(--rule-faint); }
  .story:nth-child(even) { padding-right: var(--space-5); border-right: 1px solid var(--rule-faint); }
  .story:nth-child(odd):not(:first-child) { padding-left: var(--space-5); }
}

/* Base for the article header: at phone and tablet width it behaves exactly as
   the three stacked elements did in v1 — same measure, same centring. Only the
   desktop query below lets it out to the full page. */
.article-head { max-width: var(--measure); margin-inline: auto; }

/* --- Article openings ------------------------------------------------------
   The header runs the width of the page; the body narrows to the measure. That
   contrast is what makes a page read as a publication instead of a document. */
@media (min-width: 62em) {
  .column--wide { max-width: var(--shell); }

  .article-head {
    max-width: var(--shell);
    margin-inline: auto;
    border-bottom: 3px solid var(--rule);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .article-head h2 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4rem); margin: 0 0 var(--space-2); }
  .article-head .byline { margin-bottom: 0; }
}

/* --- Where to go next ------------------------------------------------------
   Two or three plain links under a rule at the end of every article. On a
   phone they stack; above 62em they sit side by side. */
.readnext {
  border-top: 3px solid var(--rule);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
}
.readnext h3 {
  font-family: var(--font-label);
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.readnext ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.readnext li { border-top: 1px solid var(--rule-faint); padding-top: var(--space-2); }
.readnext a {
  display: block;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.readnext a:hover, .readnext a:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.readnext .kicker { margin-bottom: var(--space-1); }

@media (min-width: 62em) {
  .readnext { max-width: var(--shell); margin-inline: auto; }
  .readnext ul { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
  .readnext li:not(:first-child) { padding-left: var(--space-4); border-left: 1px solid var(--rule-faint); }
}

/* --- Footer, in columns ---------------------------------------------------- */
@media (min-width: 62em) {
  .footer .column { max-width: var(--shell); }
  .footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: var(--space-5);
    align-items: start;
  }
}

/* ===========================================================================
   14. v2 — PRINT, finished
   ===========================================================================
   The About page tells readers to print an article and take it to their next
   appointment. Several apparently do. That makes print a real medium here, not
   a courtesy.
   ------------------------------------------------------------------------ */

@media print {
  body { font-size: 11.5pt; }
  .shell, .column, .column--wide, .article-head, .readnext { max-width: none; padding: 0; }

  /* Furniture that means nothing on paper. */
  .readnext, .videocard, .skip, .nav, .footer nav { display: none !important; }

  /* Keep the nameplate: a printed page should say where it came from. */
  .masthead { border-bottom: 2pt solid #000; text-align: left; }
  .masthead .shell { display: block; }
  .masthead__name { font-size: 22pt; }
  .masthead__rules { display: none; }

  /* Never break a heading away from the text under it, and never orphan a
     line of a paragraph across a page. */
  h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }
  table, figure, .notice { break-inside: avoid; page-break-inside: avoid; }

  /* The disclaimer must survive to paper — it is the reason the box exists. */
  .notice { border: 1pt solid #000; padding: 8pt; }

  /* Internal links print their full address; a paper page cannot be clicked. */
  a[href^="/"]::after { content: " (goodneighborjournal.com" attr(href) ")"; font-size: 9pt; }
}