/* parent.guide — design system
   ---------------------------------------------------------------------------
   Audience: tired, often anxious parents looking something up mid-problem.
   Voice: editorial and calm. Authority matters here because much of this is
   safety content, so restraint is the house style — nothing decorative earns
   its place unless it makes something clearer, more trustworthy, or easier
   to act on.

   Every motion rule below carries a JOB comment. If a rule ever loses its job,
   delete it rather than keep it for looks.
   ------------------------------------------------------------------------ */

:root {
  /* --- ink: three steps, not six near-identical greys ------------------- */
  --ink:        #1A1A1A;   /* body copy, headings                          */
  --ink-muted:  #575757;   /* standfirst, secondary prose                  */
  --ink-faint:  #6E6E6E;   /* meta, captions, timestamps — darkened from
                              #7A7A7A, which measured 4.29:1 on white and
                              failed WCAG AA. This is ~5.3:1.              */

  /* --- surfaces --------------------------------------------------------- */
  --surface:    #FFFFFF;
  --surface-2:  #FAF9F7;   /* sunken panels, sources block                 */
  --surface-3:  #F2EFEA;   /* avatar wells, image placeholders             */

  /* --- lines ------------------------------------------------------------ */
  --line:       #E3E0DB;   /* hairlines between list items                 */
  --line-strong:#1A1A1A;   /* editorial rules under section headings       */

  /* --- brand ------------------------------------------------------------ */
  --accent:     #C4302B;
  --accent-ink: #9A2420;   /* accessible on tinted backgrounds             */
  --accent-wash:#FBF1F0;

  /* --- semantic: reserved for meaning, never decoration ------------------
     Safety content is the reason this site exists, so these two must stay
     visually distinct from --accent. See the note in .callout--alert.      */
  --safe:       #2E6B34;
  --safe-wash:  #F1F7F1;
  --safe-line:  #C3DCC6;
  --alert:      #8E1B16;   /* deeper than --accent so an emergency does not
                              read as "just another red brand element"     */
  --alert-wash: #FDF2F1;

  /* --- space scale: one rhythm, referenced everywhere ------------------- */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px; --s8: 64px; --s9: 88px;

  /* --- radii: soft enough to feel human, tight enough to stay editorial - */
  --r-sm: 3px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(26,26,26,.06);
  --shadow-2: 0 6px 18px rgba(26,26,26,.09);

  /* --- type ------------------------------------------------------------- */
  --font-display: Fraunces, Georgia, 'Times New Roman', serif;
  --font-body: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --step-0: 18px; --step-1: 20px; --step-2: 22px;
  --step-3: 30px; --step-4: 45px;

  /* --- motion: eased, never linear -------------------------------------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.45,.05,.55,.95);
  --t-fast: 140ms;   /* hovers                                             */
  --t-mid:  240ms;   /* lifts, colour shifts                               */
  --t-slow: 520ms;   /* scroll reveals                                     */

  --headerh: 64px;
  --measure: 68ch;
}

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

html {
  scroll-padding-top: calc(var(--headerh) + var(--s3));
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* width/height attributes reserve the box; height:auto keeps it responsive.
   Together they are what stops the page reflowing as lazy images arrive. */
img { max-width: 100%; height: auto; display: block; }
iframe, video, embed, object { max-width: 100%; }

a { color: var(--accent); }

/* JOB: make every interactive target reachable and obvious by keyboard.
   Accessibility basic that was missing entirely before. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ===========================================================================
   Layout
   ======================================================================== */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s5); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s9);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s7) var(--s5) 0;
}

.narrow { max-width: 820px; margin: 0 auto; padding: var(--s7) var(--s5) 0; }

/* ===========================================================================
   Header
   ======================================================================== */
header {
  border-bottom: 2px solid var(--line-strong);
  padding: var(--s3) 0;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index: 50;
  min-height: var(--headerh);
}
@supports not (backdrop-filter: blur(8px)) { header { background: var(--surface); } }

.nav { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

.logo {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--step-2);
  letter-spacing: -.02em; text-decoration: none; color: var(--ink);
}

.nav a.n {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  position: relative; padding: var(--s1) 0;
}

/* JOB: signal clickability. A nav item that responds feels like a control;
   a dead one feels like a label. Eased so it reads considered, not snappy. */
.nav a.n::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}
.nav a.n:hover::after, .nav a.n:focus-visible::after { transform: scaleX(1); }
.nav a.n:hover { color: var(--accent); }

/* ===========================================================================
   Typography
   ======================================================================== */
h1 {
  font-family: var(--font-display);
  font-size: var(--step-4); line-height: 1.08; font-weight: 900;
  letter-spacing: -.026em; margin: 0 0 var(--s4);
}

.standfirst {
  font-size: var(--step-1); line-height: 1.6;
  color: var(--ink-muted); margin: 0 0 var(--s5);
}

article h2, .narrow h2 {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 800; letter-spacing: -.02em;
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--line-strong);
}

article h3, .narrow h3 {
  font-family: var(--font-display);
  font-size: var(--step-2); margin: var(--s6) 0 var(--s2); font-weight: 800;
}

article p, .narrow p { margin: 0 0 var(--s4); max-width: var(--measure); }
article ul, article ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
article li { margin-bottom: var(--s2); }
article img { margin: var(--s6) 0; border-radius: var(--r-md); }

article table {
  display: block; overflow-x: auto; max-width: 100%;
  border-collapse: collapse; margin: var(--s5) 0; font-size: 15px;
}
article td, article th { border: 1px solid var(--line); padding: var(--s3); }
article pre { overflow-x: auto; }
article iframe {
  margin: var(--s6) 0; aspect-ratio: 16/9; height: auto; width: 100%;
  border: 0; border-radius: var(--r-md);
}

.crumbs { font-size: 13px; color: var(--ink-faint); margin-bottom: var(--s3); }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ===========================================================================
   Byline & author — JOB: build trust. On safety content the reader's real
   question is "who says?", so credentials get visual weight.
   ======================================================================== */
.byline {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2); flex-wrap: wrap;
}
.avatar {
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--surface-3); flex: none;
  display: grid; place-items: center;
  font-weight: 800; color: var(--ink-faint); font-size: 14px;
}
.byline b { font-size: 15px; }
.byline span { display: block; font-size: 13px; color: var(--ink-faint); }

.badge {
  margin-left: auto;
  background: var(--safe-wash); color: var(--safe);
  border: 1px solid var(--safe-line);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: var(--s1) var(--s3);
  border-radius: var(--r-sm); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s1);
}
.badge svg { width: 13px; height: 13px; }

.updated { font-size: 13px; color: var(--ink-faint); margin: var(--s2) 0 var(--s5); }

.authorbox {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--s5); margin: var(--s7) 0 0; align-items: start;
}
.authorbox .pic {
  width: 110px; height: 110px; background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  display: grid; place-items: center; text-align: center;
  font: 600 10px/1.4 ui-monospace, monospace; color: var(--ink-faint);
  padding: var(--s2);
}
.authorbox h3 { margin: 0 0 var(--s1); font-size: var(--step-2); }
.authorbox .role { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--s3); }
.authorbox p { font-size: 16px; margin: 0 0 var(--s3); }

.creds { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.creds li {
  padding: var(--s1) 0 var(--s1) var(--s5);
  position: relative; line-height: 1.55;
}
/* Real icon rather than a ✓ character — consistent stroke and grid. */
.creds li > svg {
  position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; color: var(--safe);
}
.srcnote {
  font-size: 12px; color: var(--ink-faint);
  margin-top: var(--s3); font-style: italic;
}

/* ===========================================================================
   Callouts — JOB: lower anxiety by making the "what do I do" unmissable.
   ======================================================================== */
.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--s5); margin: var(--s6) 0;
  background: var(--surface-2);
}
.callout h4 {
  margin: 0 0 var(--s2); font-size: 17px;
  font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; gap: var(--s2);
}
.callout h4 svg { width: 18px; height: 18px; flex: none; }
.callout p { margin: 0; font-size: 16px; max-width: var(--measure); }

/* An emergency instruction must not look like a brand flourish. It is a
   deeper red than --accent, filled, and carries an icon so the meaning
   survives even if the hue does not register. */
.callout--alert {
  border-color: var(--alert); border-left-color: var(--alert);
  background: var(--alert-wash);
}
.callout--alert h4 { color: var(--alert); }
.callout--med {
  border-color: var(--safe-line); border-left-color: var(--safe);
  background: var(--safe-wash);
}
.callout--med h4 { color: var(--safe); }

.disclosure {
  font-size: 13px; color: var(--ink-faint);
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s3) var(--s4); margin: 0 0 var(--s5);
}

/* ===========================================================================
   Cards — JOB: invite interaction. A card that lifts reads as clickable.
   ======================================================================== */
.grid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  margin: var(--s5) 0;
}

.card {
  text-decoration: none; color: inherit; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.card .thumb {
  aspect-ratio: 3/2; overflow: hidden;
  background: var(--surface-3); border-radius: var(--r-md);
}
.card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card:hover .thumb img { transform: scale(1.04); }
.card h3 {
  font-family: var(--font-display); font-size: 19px; line-height: 1.25;
  margin: var(--s3) 0 var(--s1); font-weight: 800;
  padding: 0 var(--s2);
}
.card:hover h3 { color: var(--accent); }
.kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); padding: 0 var(--s2);
}
.meta { font-size: 12px; color: var(--ink-faint); padding: 0 var(--s2); }

/* ===========================================================================
   Sidebar
   ======================================================================== */
aside { font-size: 15px; }
.sticky { position: sticky; top: calc(var(--headerh) + var(--s4)); }

.box {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5); margin-bottom: var(--s5);
  background: var(--surface);
}
.box h4 {
  margin: 0 0 var(--s3);
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.box ul { margin: 0; padding: 0; list-style: none; }
.box li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.box li:last-child { border: 0; }
.box a {
  text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink);
  transition: color var(--t-fast) var(--ease-out);
}
.box a:hover { color: var(--accent); }

/* ===========================================================================
   Topic hubs & stage cards
   ======================================================================== */
.hublist { columns: 2; column-gap: var(--s7); margin: var(--s5) 0; }
.hublist a {
  display: block; padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  break-inside: avoid; font-size: 16px;
  transition: color var(--t-fast) var(--ease-out),
              padding-left var(--t-fast) var(--ease-out);
}
/* JOB: guide the eye. The nudge confirms which row the cursor owns in a
   long undifferentiated list. */
.hublist a:hover { color: var(--accent); padding-left: var(--s2); }

.stages {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(5, 1fr); margin: var(--s6) 0;
}
.stage {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5) var(--s3); text-align: center;
  text-decoration: none; color: inherit; background: var(--surface);
  transition: transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.stage:hover {
  transform: translateY(-3px);
  border-color: var(--ink); box-shadow: var(--shadow-2);
}
.stage svg { width: 26px; height: 26px; color: var(--accent); margin: 0 auto var(--s2); }
.stage strong { display: block; font-family: var(--font-display); font-size: 18px; }
.stage em { font-style: normal; font-size: 13px; color: var(--ink-faint); }

/* ===========================================================================
   Ads — reserve the box so the page cannot jump when a unit fills.
   ======================================================================== */
.adslot {
  margin: var(--s6) 0; min-height: 90px;
  display: grid; place-items: center;
  contain: layout;
}

/* ===========================================================================
   Sources
   ======================================================================== */
.sources {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5); margin: var(--s7) 0 0;
}
.sources h4 {
  margin: 0 0 var(--s3); font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.sources ol { margin: 0; padding-left: var(--s5); font-size: 14px; line-height: 1.75; }

/* ===========================================================================
   Core-page components (About, Editorial policy, Authors, Contact)
   These live here rather than in the page templates so the core pages use the
   same system as everything else — one treatment per problem, not two.
   ======================================================================== */

/* Numbered principles list — JOB: make a process feel deliberate and auditable,
   which is the whole point of publishing an editorial policy. */
.principles { list-style: none; padding: 0; margin: var(--s5) 0; counter-reset: p; }
.principles li {
  padding: var(--s4) 0 var(--s4) var(--s7);
  border-bottom: 1px solid var(--line); position: relative;
}
.principles li:last-child { border-bottom: 0; }
.principles li b {
  display: block; font-family: var(--font-display);
  font-size: var(--step-1); margin-bottom: var(--s1);
}
.principles li::before {
  content: counter(p); counter-increment: p;
  position: absolute; left: 0; top: var(--s4);
  width: 30px; height: 30px;
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
}

/* Spec/process table */
table.spec {
  width: 100%; border-collapse: collapse;
  margin: var(--s5) 0; font-size: 15px; display: table;
}
table.spec th, table.spec td {
  border: 1px solid var(--line); padding: var(--s3); text-align: left;
}
table.spec th {
  background: var(--surface-2); font-weight: 800;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
table.spec tr:nth-child(even) td { background: var(--surface-2); }

/* Contact routes */
.contactgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s5); margin: var(--s6) 0;
}
.cbox {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease-out);
}
.cbox:hover { border-color: var(--ink); }
.cbox h4 {
  margin: 0 0 var(--s2);
  font-family: var(--font-display); font-size: var(--step-1);
}
.cbox p { margin: 0; font-size: 15px; color: var(--ink-muted); }

/* Forms — JOB: lower the friction at the one place a reader has to act.
   Generous targets, visible focus, an obvious primary action. */
form label {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin: var(--s4) 0 var(--s2);
}
form input, form textarea, form select {
  width: 100%; padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 16px; font-family: inherit; color: var(--ink);
  background: var(--surface); min-height: 48px;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
form textarea { min-height: 140px; resize: vertical; }
form input:focus, form textarea:focus, form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}
form button {
  margin-top: var(--s5); background: var(--ink); color: var(--surface);
  border: 0; padding: var(--s4) var(--s6);
  font-weight: 700; font-size: 15px; font-family: inherit;
  border-radius: var(--r-sm); cursor: pointer; min-height: 48px;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
form button:hover { background: var(--accent); }
form button:active { transform: translateY(1px); }

/* ---- products ------------------------------------------------------------ */
.productgrid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--s6); margin: var(--s6) 0 var(--s7); align-items: start;
}
.productshot {
  aspect-ratio: 4/3; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  display: grid; place-items: center; padding: var(--s5); text-align: center;
}

/* JOB: answer "what do I get" and "what happens after I pay" before the button,
   not after it. Those two doubts are what stop a digital purchase. */
.buybox {
  border: 2px solid var(--ink); border-radius: var(--r-md);
  padding: var(--s5); background: var(--surface);
  position: sticky; top: calc(var(--headerh) + var(--s4));
}
.price {
  font-family: var(--font-display); font-size: 38px;
  font-weight: 900; line-height: 1; letter-spacing: -.03em;
}
.pricenote { font-size: 14px; color: var(--ink-muted); margin: var(--s2) 0 var(--s4); }

/* The primary CTA earns the most motion investment on the page. */
.btn-buy {
  display: block; text-align: center; text-decoration: none;
  background: var(--accent); color: var(--surface);
  font-weight: 800; font-size: 17px;
  padding: var(--s4) var(--s5); border-radius: var(--r-sm);
  min-height: 52px; box-shadow: var(--shadow-1);
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.btn-buy:hover {
  background: var(--accent-ink);
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.btn-buy:active { transform: translateY(0); box-shadow: var(--shadow-1); }

.reassure { list-style: none; padding: 0; margin: var(--s4) 0 0; font-size: 14px; }
.reassure li {
  padding: var(--s2) 0 var(--s2) var(--s5);
  position: relative; color: var(--ink-muted); line-height: 1.5;
}
.reassure li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--safe);
}

.productcards {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: var(--s6) 0;
}
.productcard {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--s2);
  transition: transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.productcard:hover {
  transform: translateY(-3px); border-color: var(--ink);
  box-shadow: var(--shadow-2);
}
.productcard .tier {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.productcard h3 { font-family: var(--font-display); font-size: var(--step-1); margin: 0; }
.productcard p { font-size: 15px; color: var(--ink-muted); margin: 0; flex: 1; }
.productcard .spec { font-size: 13px; color: var(--ink-faint); }
.productcard .more { font-size: 14px; font-weight: 700; color: var(--accent); }

@media (max-width: 860px) {
  .productgrid { grid-template-columns: 1fr; }
  .buybox { position: static; }
}

/* ---- internet safety guide ---------------------------------------------- */

/* JOB: let a parent jump to the section that matches the worry that brought
   them here, rather than reading 1,200 words to reach it. */
.topicnav {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s5) 0 var(--s6);
  padding-bottom: var(--s5); border-bottom: 1px solid var(--line);
}
.topicnav a {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s2) var(--s4); font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.topicnav a:hover { border-color: var(--ink); color: var(--accent); }

/* JOB: make the age band unmissable, because using the wrong band is the main
   way this kind of advice fails. */
.agecard {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5); margin: var(--s4) 0; background: var(--surface);
}
.agehead {
  display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3);
}
.ageband {
  background: var(--ink); color: var(--surface);
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  padding: var(--s1) var(--s3); border-radius: var(--r-sm);
  white-space: nowrap;
}
.agehead strong { font-family: var(--font-display); font-size: var(--step-1); }

.checklist { list-style: none; padding: 0; margin: var(--s4) 0; }
.checklist li {
  padding: var(--s3) 0 var(--s3) var(--s6);
  border-bottom: 1px solid var(--line);
  position: relative; font-size: 16px; line-height: 1.6;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 16px; height: 16px;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
}
/* The self-check reads as questions, so mark it differently from guidance. */
.checklist--q li::before { border-radius: var(--r-pill); border-color: var(--accent); }

.topic { scroll-margin-top: calc(var(--headerh) + var(--s5)); }

.srclist { list-style: none; padding: 0; margin: var(--s4) 0; }
.srclist li {
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.6;
}
.srclist li:last-child { border-bottom: 0; }
.srclist a { font-weight: 700; }

/* Owner-supplied placeholder. Deliberately loud: it must be impossible to
   ship one of these to production by accident. */
.ph {
  background: #FFF4D6; border-bottom: 2px solid #E0A800;
  padding: 1px var(--s1); font-weight: 700; font-size: .92em;
}

@media (max-width: 720px) {
  .contactgrid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Footer
   ======================================================================== */
footer {
  border-top: 2px solid var(--line-strong);
  margin-top: var(--s9); padding: var(--s7) 0;
  font-size: 14px; color: var(--ink-muted);
  background: var(--surface-2);
}
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--accent); }

/* ===========================================================================
   Scroll reveal — JOB: guide the eye through a grid in reading order rather
   than presenting a flat wall. Deliberately subtle: content is legible before
   the motion finishes, and it runs once. Elements start visible and are only
   hidden if JS is present and motion is allowed (see enhance.js), so nothing
   is ever trapped invisible.
   ======================================================================== */
/* Scoped to .js-reveal, which enhance.js sets on <html> only when JS is running
   AND motion is allowed. Without JS the class never appears and content is
   simply visible — it can never be stranded at opacity 0. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ===========================================================================
   Reduced motion — honour the user's system preference.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover { transform: none; }
  .stage:hover { transform: none; }
}

/* ===========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; gap: var(--s6); }
  h1 { font-size: 33px; }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .hublist { columns: 1; }
  .authorbox { grid-template-columns: 1fr; }
  .authorbox .pic { width: 100%; height: 150px; }
}

@media (max-width: 560px) {
  :root { --step-4: 29px; --step-3: 25px; }
  .stages { grid-template-columns: 1fr; }
  .nav { gap: var(--s4); }
  /* Touch targets: 44px minimum. Measured 37px before this — comfortably
     tappable matters most on the device most of these readers are holding
     one-handed at 3am. */
  .nav a.n { padding: var(--s3) 0; min-height: 44px; display: flex; align-items: center; }
  .logo { min-height: 44px; display: flex; align-items: center; }
}

@media print {
  header, aside, .adslot, footer { display: none; }
  body { font-size: 12pt; }
}