/* =============================================================================
   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.v2.css and update the <link> in every page.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   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 */
  --shell:   64rem;   /* masthead / footer / full-width furniture */

  --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; }
}