/* 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:        #2E2A26;   /* body copy, headings                          */
  --ink-muted:  #6B635B;   /* standfirst, secondary prose                  */
  --ink-faint:  #6E6760;   /* meta, captions, timestamps (WCAG AA on paper)*/

  /* --- surfaces: warm rather than clinical white ------------------------ */
  --surface:    #FFFDFB;
  --surface-2:  #FBF6EF;   /* sunken panels, alternating sections          */
  --surface-3:  #F7F0E7;   /* image wells, avatars                         */

  /* --- lines ------------------------------------------------------------ */
  --line:       #E9E1D6;
  --line-strong:#2E2A26;

  /* --- brand -------------------------------------------------------------
     The accent is sage, NOT red. On a site that tells parents when to call a
     doctor, a brand-coloured link must never be mistakable for a safety
     warning. Red is now reserved exclusively for --alert.                  */
  --accent:     #4F7357;
  --accent-ink: #3C5C43;
  --accent-wash:#EDF3EE;
  --clay:       #96502B;   /* secondary accent; darkened from #B0663E,
                              which measured 4.3:1 and failed WCAG AA    */

  /* --- semantic: reserved for meaning, never decoration ----------------- */
  /* Distinct from --accent on purpose: a verification badge must not
     read as an ordinary brand element. Sage is the brand, this is status. */
  --safe:       #2E6B41;
  --safe-wash:  #EDF3EE;
  --safe-line:  #CBDDCF;
  --alert:      #9E2B21;
  --alert-wash: #FBF0EE;

  /* --- 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: 6px; --r-md: 12px; --r-lg: 18px; --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: Nunito, '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; }
}
/* ===========================================================================
   Direction D — homepage topic sections
   Each core topic gets a full section rather than a tile, so the homepage
   presents what the site covers instead of merely linking to it.
   ======================================================================== */
.hero-d {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s7); align-items: center; padding: var(--s7) 0 var(--s6);
}
.hero-d h1 { font-size: 46px; line-height: 1.09; letter-spacing: -.028em; }
.hero-d p { font-size: 19px; color: var(--ink-muted); margin: var(--s4) 0 var(--s5); max-width: 46ch; }
.trust { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }
.trust b { display: block; font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1; }
.heroimg { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-3); }
.heroimg img { width: 100%; height: 100%; object-fit: cover; }

.topic-sec { padding: var(--s7) 0; border-bottom: 1px solid var(--line); }
.topic-sec.alt { background: var(--surface-2); }
.thead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s1); }
.thead h2 { font-family: var(--font-display); font-size: 33px;
  letter-spacing: -.024em; font-weight: 900; border: 0; padding: 0; margin: 0; }
.tcount { font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--clay); white-space: nowrap; }
.tblurb { color: var(--ink-muted); font-size: 17px; max-width: 60ch; margin: 0 0 var(--s5); }
.trow { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: var(--s5); align-items: start; }

.lead { border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: inherit; display: block;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }
.lead:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.lead .im { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-3); }
.lead .im img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out); }
.lead:hover .im img { transform: scale(1.04); }
.lead .b { padding: var(--s4) var(--s5) var(--s5); }
.lead h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.24; margin: var(--s2) 0; }
.lead p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }

.sml { display: block; text-decoration: none; color: inherit;
  transition: transform var(--t-fast) var(--ease-out); }
.sml:hover { transform: translateY(-3px); }
.sml:hover h4 { color: var(--accent); }
.sml .im { aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); }
.sml .im img { width: 100%; height: 100%; object-fit: cover; }
.sml h4 { font-family: var(--font-display); font-size: 15.5px; line-height: 1.32; margin: var(--s2) 0 var(--s1); }
.sml span { font-size: 12px; color: var(--ink-faint); }

.subs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--line); align-items: center; }
.sub-chip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s2) var(--s4); font-size: 13.5px; font-weight: 700; color: var(--ink-muted);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.sub-chip:hover { border-color: var(--accent); color: var(--accent); }
.sub-chip b { color: var(--ink-faint); font-weight: 600; }
.allbtn { font-size: 14.5px; font-weight: 800; color: var(--accent);
  white-space: nowrap; margin-left: auto; text-decoration: none; }

/* The gear section is the commercial half of the site and says so plainly.
   Drawing that line helps rather than hurts a site being judged on trust. */
.topic-sec.gear { background: var(--ink); color: #F6F1EA; }
.topic-sec.gear h2 { color: #fff; }
.topic-sec.gear .tblurb { color: #C7BDB1; }
.topic-sec.gear .tcount { color: #E0A87F; }
.topic-sec.gear .lead { background: #38322C; border-color: #463F38; }
.topic-sec.gear .lead h3, .topic-sec.gear .sml h4 { color: #fff; }
.topic-sec.gear .lead p, .topic-sec.gear .sml span { color: #C7BDB1; }
.topic-sec.gear .sml .im, .topic-sec.gear .lead .im { background: #3B352F; }
.topic-sec.gear .subs { border-top-color: #463F38; }
.topic-sec.gear .sub-chip { background: #38322C; border-color: #4C443C; color: #D9D1C7; }
.topic-sec.gear .sub-chip:hover { border-color: #E0A87F; color: #E0A87F; }
.topic-sec.gear .allbtn { color: #E0A87F; }

/* ===========================================================================
   Sub-topic sections on a hub page
   ======================================================================== */
.subtopic { margin: var(--s7) 0 0; }
.subtopic > h2 { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.subtopic > h2 em { font-style: normal; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--clay); }

/* JOB: make a numbered run read as one sequence a reader can walk, rather than
   as unrelated posts that happen to share a tag. The pregnancy diary is a
   complete week 4-40 series and was previously shown newest-first. */
.seqgrid { display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); margin: var(--s4) 0; }
.seqgrid a { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s2); text-align: center; text-decoration: none; color: inherit;
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.seqgrid a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.seqgrid b { display: block; font-family: var(--font-display); font-size: 17px; }
.seqgrid span { font-size: 11px; color: var(--ink-faint); }

.subtopic .list { list-style: none; padding: 0; margin: var(--s4) 0; }
.subtopic .list li { border-bottom: 1px solid var(--line); }
.subtopic .list a { display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; text-decoration: none; color: var(--ink);
  transition: padding-left var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.subtopic .list a:hover { color: var(--accent); padding-left: var(--s2); }
.subtopic .list .w { margin-left: auto; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ===========================================================================
   Review page modules
   ======================================================================== */
.glance { border: 1px solid var(--safe-line); background: var(--safe-wash);
  border-radius: var(--r-md); padding: var(--s5); margin: var(--s5) 0; }
.glance h4 { font-family: var(--font-display); font-size: 18px;
  margin-bottom: var(--s3); color: var(--accent); }
.glance ul { margin: 0; padding-left: var(--s5); }
.glance li { margin-bottom: var(--s2); font-size: 16px; }

.tblwrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); margin: var(--s5) 0; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px;
  min-width: 560px; display: table; margin: 0; }
table.cmp th, table.cmp td { padding: var(--s3) var(--s4); text-align: left;
  border-bottom: 1px solid var(--line); }
table.cmp thead th { background: var(--surface-3); font-family: var(--font-display);
  font-size: 15px; font-weight: 800; border-bottom: 2px solid var(--line); }
table.cmp tbody th { font-weight: 700; color: var(--ink-muted); font-size: 13.5px;
  width: 170px; background: var(--surface-2); font-family: var(--font-body); }
table.cmp td.best { background: var(--safe-wash); font-weight: 800; color: var(--accent); }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s5) 0; }
.pc { border-radius: var(--r-md); padding: var(--s4) var(--s5); }
.pc.pro { background: var(--safe-wash); border: 1px solid var(--safe-line); }
.pc.con { background: var(--surface-2); border: 1px solid var(--line); }
.pc h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: var(--s2); }
.pc ul { margin: 0; padding-left: var(--s4); font-size: 15px; }
.pc li { margin-bottom: var(--s1); }

@media (max-width: 1000px) { .trow { grid-template-columns: 1fr 1fr; } .lead { grid-column: span 2; } }
@media (max-width: 940px) { .hero-d { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-d h1 { font-size: 33px; } .proscons { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .trow { grid-template-columns: 1fr; } .lead { grid-column: span 1; }
  .thead h2 { font-size: 26px; } }