/* ==========================================================================
   Fertility with Kara — design system
   Brand: Launch Pack V1 §03–§05. Teal and ivory lead. Rose is an accent —
   it should never turn the whole brand pink.
   ========================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin.woff2?v=fcfdbcb8') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-italic.woff2?v=99523cf5') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2?v=b4295101') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --teal: #285d5d;
  --teal-deep: #1d4646;
  --teal-ink: #173b3b;
  --sage: #cad8d0;
  --sage-soft: #e4ece7;
  --ivory: #faf7f1;
  --white: #fffdfc;
  --rose: #d8aaa5;
  --rose-soft: #f3e3e0;
  --rose-ink: #94534d; /* rose for text: AA on ivory and sand-soft (11 Nov 2026 audit: #9c5b55 was 4.3:1 on sand) */
  --rose-ink-deep: #8a4b45; /* rose-ink for small labels on tinted boxes: 5.3:1+ on rose-soft, sand-soft and sage-soft */
  --rose-light: #f0cfcb; /* rose for text on teal: 5.1:1 (the brand --rose is 3.6:1 there) */
  --sand: #e8d9c8;
  --sand-soft: #f2e9df;
  --charcoal: #292d2d;
  --muted: #566060;
  --line: #e2dbd0;

  /* Type */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.42rem, 1.28rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.15rem, 1.7rem + 2.2vw, 3.5rem);
  --step-5: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* Space & shape */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  /* Rounded corners, 8px everywhere (option A, 25 Oct 2026): buttons, panels and pictures share one size.
     The ebooks and the course use the same 8px. Circles, pills and book covers keep their own shapes. */
  --btn-radius: 8px;
  /* Structural panels: cards, boxes, bands, figures, tables. */
  --panel-radius: 8px;
  /* Pictures: diagrams, picture bands, video thumbnails and the video player. */
  --picture-radius: 8px;
  --shadow-s: 0 1px 2px rgb(23 59 59 / 0.06), 0 2px 8px rgb(23 59 59 / 0.05);
  --shadow: 0 2px 6px rgb(23 59 59 / 0.05), 0 12px 32px rgb(23 59 59 / 0.08);
  --shadow-l: 0 30px 60px -20px rgb(23 59 59 / 0.28);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --container: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x on html as well as body (25 Oct 2026): with body's alone, a phone could still pan a few pixels sideways
   where a dial, a painting fading in or a tilted video tile pokes past the edge */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sage); color: var(--teal-ink); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--teal-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); overflow-wrap: break-word; } /* a long name must never push the page sideways */
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }
em.accent, .accent { font-style: italic; color: var(--rose-ink); }

.eyebrow {
  text-wrap: balance;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before { content: ''; flex: none; width: 2.9rem; height: 1px; background: var(--rose); }
.lead { font-size: var(--step-1); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--white { background: var(--white); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.center { text-align: center; }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split > * { min-width: 0; }
.nowrap { white-space: nowrap; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--teal); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 999px;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--teal-ink); --btn-fg: var(--ivory); --btn-bd: var(--teal-ink);
  font-family: var(--font-sans); font-style: normal; /* never inherit a serif or italic from the box around it */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1.05rem 1.9rem;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s;
}
.btn:hover { --btn-bg: var(--teal); --btn-bd: var(--teal); color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgb(23 59 59 / 0.8); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--teal); --btn-bd: color-mix(in srgb, var(--teal) 35%, transparent); }
.btn--ghost:hover { --btn-bg: var(--white); }
.btn--light { --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); }
.btn--light:hover { --btn-bg: var(--rose); --btn-bd: var(--rose); }
.btn--sm { padding: 0.72rem 1.25rem; font-size: 0.74rem; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 247 241 / 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgb(23 59 59 / 0.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; }
.brand-logo { display: block; flex: none; }
.brand-logo img { width: clamp(170px, 17vw + 70px, 275px); }  /* The lower bound is what a 320px phone can take beside the two buttons. */
.primary-nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: clamp(0.4rem, 0.2rem + 0.8vw, 1.4rem); }
.primary-nav a {
  position: relative; display: block; padding: 0.5rem 0.15rem;
  font-size: 0.93rem; font-weight: 600; color: var(--charcoal); text-decoration: none;
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1.5px;
  background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.primary-nav a:hover::after, .primary-nav a[aria-current='page']::after { transform: scaleX(1); }
.primary-nav a[aria-current='page'] { color: var(--teal); }
.header-cta { flex: none; }
.header-actions { flex: none; display: flex; align-items: center; gap: 0.7rem; }
.header-search {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s;
}
.header-search:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.header-search svg { width: 16px; height: 16px; }
.primary-nav a { white-space: nowrap; }
/* Narrower desktops: the Search button shrinks to its icon so the menu keeps one line */
@media (max-width: 1320px) {
  .header-search { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.nav-toggle {
  display: none; flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--teal-ink);
  transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ''; }
.nav-toggle span::before { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle span::after { transform: translate(-50%, calc(-50% + 6px)); }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .header-cta { padding-inline: 0.85rem; }  /* option B (24 Oct 2026): the Free guide button stays in the bar on tablets and phones */
  .header-actions { margin-left: auto; }
  .header-search { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .primary-nav {
    position: fixed; inset: 78px 0 auto 0; max-height: calc(100dvh - 78px); overflow-y: auto;
    background: var(--ivory); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 1rem var(--gutter) 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a { padding: 1rem 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; }
  .primary-nav a::after { display: none; }
  .primary-nav .nav-mobile-cta { display: block; border: 0; padding-top: 1.25rem; }
}
.nav-mobile-cta { display: none; }
/* Phones: the search icon moves into the menu to make room for the Free guide button (option B, 24 Oct 2026) */
.nav-mobile-search { display: none; }
@media (max-width: 480px) {
  .brand-logo img { width: 150px; }
  .header-search { display: none; }
  .header-actions { gap: 0.4rem; }
  .header-cta { font-size: 0.7rem; padding: 0.6rem 0.7rem; }
  .primary-nav .nav-mobile-search { display: block; }
}
@media (max-width: 360px) { .brand-logo img { width: 128px; } .header-cta { font-size: 0.66rem; padding: 0.55rem 0.6rem; } }
.primary-nav .nav-mobile-cta .btn { display: flex; padding: 1rem 1.5rem; color: var(--white); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.no-js .primary-nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4rem, 3rem + 5vw, 7rem);
}
.hero :is(h1, .hero__h) { font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5.3rem); line-height: 0.98; letter-spacing: -0.032em; }
.hero :is(h1, .hero__h) em { display: block; font-style: italic; color: var(--rose-ink); }
/* Editorial display: each line is set deliberately, one word held back in teal. */
.hero .lead { color: #465050; }

/* Library search box (Learn header and 404); .hero-popular is the "Jump to" chip row */
/* Homepage hero, option B "Kara beside you" (22 Oct 2026): who writes the site, then two ways in */

/* Portrait arch with floating "new language" chips */
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------- The cycle dial (home hero) ----------
   The Fertility Library drawn as a circle. Every segment is a real link rendered
   on the server, so the dial navigates with JavaScript off; main.js only adds the
   hover/focus behaviour that rewrites the centre. */

.dial { position: relative; justify-self: center; width: min(100%, 500px); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; }

.dial__seg { cursor: pointer; }
.dial__seg path { transform-origin: 50% 50%; transition: transform 0.45s var(--ease), opacity 0.35s; }
.dial__seg:hover path, .dial__seg.is-active path { transform: scale(1.032); }
.dial__seg:focus { outline: none; }
.dial__seg:focus-visible path { stroke: var(--rose-ink); stroke-width: 2; }
.dial text { font-family: var(--font-serif); font-style: italic; font-size: 12px; pointer-events: none; }
/* The outer band: the "Looking After Yourself" topics, wrapped around the medical ones. */
.dial__kicker { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose-ink); }
.dial__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.5rem); line-height: 1.16; letter-spacing: -0.018em; color: var(--teal-ink); }
.dial__summary { font-size: 0.81rem; line-height: 1.5; color: var(--muted); max-width: 23ch; }
.dial__go { margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); border-bottom: 1px solid var(--rose); padding-bottom: 4px; }
/* Small cells orbiting just outside the dial: each <span> is a full-size layer rotated to its
   place on the ring, with the cell drawn at its top centre; the whole ring turns slowly. */
@keyframes dial-orbit { to { transform: rotate(360deg); } }
@keyframes dial-cell { 50% { transform: scale(1.25); } }

/* Homepage dial, option D (11 Nov 2026): pointing at a topic lifts its piece, dims the other inner pieces
   and shows a picture card for it under the circle, over the caption. Mouse and trackpad only: on a touch
   screen a tap opens the topic straight away, so the card never shows there. */
@media (hover: hover) and (pointer: fine) {
  .dial[data-dial-preview] .dial__seg path { transition: transform 0.45s var(--ease), opacity 0.35s, filter 0.35s; }
  .dial[data-dial-preview].is-previewing .dial__seg.is-active path { transform: scale(1.05); filter: drop-shadow(0 6px 10px rgb(23 59 59 / 0.28)); }
  .dial[data-dial-preview].is-previewing .dial__seg:not(.is-active) path { opacity: 0.7; }
  .dial__pv-tag {
    position: absolute; top: 0.45rem; left: 0.45rem; padding: 0.18rem 0.5rem; border-radius: var(--panel-radius);
    background: rgb(255 253 252 / 0.94); font-style: normal; font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink);
  }
  .dial__pv-sum { font-size: 0.8rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dial__pv-go {
    margin-right: 1rem; padding: 0.55rem 0.9rem; border-radius: var(--btn-radius); background: var(--teal-ink); color: var(--ivory);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  }
  .dial__pv-go::after { content: ' \2192'; }
}

/* The core has to shrink with the dial or the label spills out of the ring. Its two small labels stay at
   about 11px on a phone (25 Oct 2026: they were 9px), with less letter-spacing so they still fit. */
@media (max-width: 620px) {
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
  .dial text { font-size: 14px; }
}

/* ---------- Editorial index (the library, set as a two-column contents page) ---------- */

/* ---------- Contrast table ("You won't read this here") ---------- */
/* Labels are for screen readers on wide screens (the column headings say it visually); they show on phones. */

/* ---------- Homepage "Inside a topic": the illustration beside a numbered contents of a topic page ---------- */









.figure { background: var(--white); border: 1px solid var(--line); border-radius: var(--picture-radius); padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); }
.figure img { margin-inline: auto; }
.figure figcaption { text-wrap: balance; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- Language band: the statement beside a "You hear / It means" translator ---------- */

















/* ---------- Divider ---------- */
/* The band carries the colour of the section ABOVE the seam, so the divider's
   soft edges always sit on one flat ground instead of straddling two. */

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: 0.97rem; }
a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--sage) 80%, var(--teal)); }
.tag {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--sage-soft); color: var(--teal); font-size: 0.76rem; font-weight: 700;
}

/* Pillars */

/* ---------- Video thumbnails (brand thumbnail system: 2–4 words, rotating bg) ---------- */
.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--picture-radius); overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center;
  padding: 0 0 0 clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  background: var(--teal); color: var(--ivory);
  box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.video-card:hover .thumb, .thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-embed { aspect-ratio: 16 / 9; border-radius: var(--picture-radius); overflow: hidden; background: var(--teal-ink); position: relative; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-embed button { all: unset; cursor: pointer; position: absolute; inset: 0; }
.video-embed button img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Homepage "Watch Kara": launch playlist (player · up next · notify strip) ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem); align-items: start; }
.player { text-decoration: none; }

.notify {
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); scroll-margin-top: 6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.25rem 2.5rem; align-items: center;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem) clamp(1.3rem, 0.8rem + 1.6vw, 2.25rem);
  background: var(--sage-soft); border-radius: var(--panel-radius);
}
.notify__text h3 { font-size: var(--step-2); }
.notify__text p { margin-top: 0.35rem; color: var(--muted); }
.notify .form { gap: 0.8rem; }

/* Email + button on one line (subscribe-form partial with `inline: true`) */
.form-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.form-inline .btn { padding-block: 0.9rem; white-space: nowrap; }
.form-inline .field__error { order: 3; grid-column: 1 / -1; }

@media (max-width: 900px) {
  .watch, .notify { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .form-inline { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Book covers (CSS mockups of the ebook & starter guide concepts) ---------- */

/* ---------- The Fertility Guide page: dark top with the covers on a shelf, then "Inside Book One" ---------- */

/* The covers stand on a shelf; two real pages from Book One fan out behind them. Sizes are relative, so it scales. */

/* Three covers side by side (partials/book-covers.ejs) */
.covers {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 1000px; justify-self: center;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 3rem); align-items: start;
}
.covers li { margin: 0; }
.covers a { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.covers img {
  display: block; width: 100%; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 20px 30px 46px -22px rgb(23 59 59 / 0.45);
  transition: transform 0.4s var(--ease);
}
.covers a:hover img, .covers a:focus-visible img { transform: translateY(-6px); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.88rem; color: var(--teal-ink); }
.field input, .field textarea {
  width: 100%; padding: 0.9rem 1.1rem; border-radius: var(--btn-radius);
  border: 1.5px solid var(--line); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(40 93 93 / 0.14); }
.field.has-error input, .field.has-error textarea { border-color: #b3564e; }
.field__error { color: #9d3c34; font-size: 0.85rem; font-weight: 600; }
.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.form-ask { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; } /* what a sign-up form will send (5 Nov 2026) */
.checkbox input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--teal); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.82rem; color: var(--muted); }
.form-status { padding: 0.9rem 1.1rem; border-radius: var(--btn-radius); font-weight: 600; font-size: 0.92rem; }
.form-status--error { background: #f7e2df; color: #7d2f28; }
.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }
.on-dark .field label, .on-dark .checkbox { color: rgb(250 247 241 / 0.85); }
.on-dark .form-note { color: rgb(250 247 241 / 0.78); }
.on-dark .field__error { color: #ffd1cc; }

/* ---------- Homepage free-guide band: cover + contents page ("peek inside") ---------- */

/* The book overlaps the left edge of the contents page; the page's text starts where the book ends. */

/* Ticked list: short benefit lines with a teal check */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; padding-left: 2.1rem; font-weight: 600; font-size: 0.95rem; color: var(--teal-ink); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--teal); }
.ticks li::after {
  content: ''; position: absolute; left: 0.5rem; top: 0.33rem; width: 0.34rem; height: 0.62rem;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Phones: the cover sits centred on top of the contents page instead of beside it. */

/* ---------- Homepage "Meet Kara": arch portrait + statement ---------- */
/* Option A (24 Oct 2026): the photo on its own, and her verified facts as four cards */  /* Meet Kara page, under the hello (option A, 24 Oct 2026) */
@media (max-width: 560px) {
  /* name and title on their own lines rather than wrapping after the dot */
}

/* ---------- Homepage ebook series: "Inside the series" contents page ---------- */


/* ---- Heading block ---- */







/* ---- The three books ---- */
/* position: relative so the visually-hidden spans inside are clipped by the swipe row, not the page */







/* heading first in the markup (so it is announced as "Book One: The Basics"), kicker shown above it */














/* Book Three: planned topics are listed unnumbered, and set a touch quieter */





/* ---- Desktop: heading left, intro + button right, then three ruled columns ---- */


/* ---- Tablet and phone: the books become a swipeable row of contents cards ---- */


/* ---------- CTA bands ---------- */ /* rose-ink on teal is too faint for a focus ring */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: baseline; }
.checklist li::before { content: ''; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rose); transform: translateY(-0.1rem); }

/* ---------- Page hero (inner pages) ---------- */
/* ---------- Contact page: intro beside a three-step suggestion form with picture tiles ---------- */
/* the action: a button-like pill whose arrow points where the card goes (down to the form, or out to email) */
@keyframes contact-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

.breadcrumb { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li::before { content: '/'; margin-right: 0.4rem; color: var(--rose); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
/* Topic pages: the topic's illustration large in the header, with quick facts and key terms */
.topic-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); background: linear-gradient(120deg, var(--ivory) 40%, var(--sage-soft)); border-bottom: 1px solid var(--line); }
.topic-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }

/* ---------- Library (Learn) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: all 0.2s;
}
.filter:hover { border-color: var(--teal); color: var(--teal); }
.filter[aria-pressed='true'] { background: var(--teal); border-color: var(--teal); color: var(--white); }
/* ---------- Library page: search in the header, then picture cards ---------- */
/* Learn page zones: female, male, and the topics for both (option B, 22 Oct 2026) */
.zone { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.zone[hidden] { display: none; }
.zcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--panel-radius); box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.zcard[hidden] { display: none; }
.zcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Option B (24 Oct 2026): each zone opens with a large "Start here" card spanning two rows */
/* ---------- Free guide page: the ten foundations as a path, the worksheets as paper ---------- */
/* the line joining one picture to the next, along each row of five */
/* 11 Nov 2026: a staircase, each sheet a little lower and in front of the last, so every title shows and the
   third sheet stays inside the page (before, the middle sheet hid two titles and the third ran past the edge). */
@media (max-width: 600px) {
  /* phones: the worksheets overlap as a stack rather than a wide fan */
}

/* ---------- Resources page: word of the day, flashcard glossary, source tiles ---------- */

/* ---------- Text pages (privacy, disclaimer), thank-you and 404: warm header, paper on a sand "desk" ---------- */

.library-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* ---------- Article (topic pages) ---------- */
.toc { position: sticky; top: 7rem; align-self: start; display: none; }
@media (min-width: 1000px) { .toc { display: block; } }
.toc p { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--teal-ink); margin-bottom: 0; }
.toc__count { font-family: var(--font-serif); font-style: italic; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rose-ink-deep); white-space: nowrap; }
/* Reading path: a rail runs through one dot per section and fills teal down to the current one (main.js sets --toc-fill) */
.toc ol { position: relative; list-style: none; padding: 0; margin-top: 0.5rem; }
.toc ol::before, .toc ol::after { content: ''; position: absolute; left: calc(0.65rem - 1px); top: 1.1rem; width: 2px; border-radius: 2px; }
.toc ol::before { height: var(--toc-rail, calc(100% - 2.2rem)); background: var(--sage); }
.toc ol::after { height: var(--toc-fill, 0px); background: var(--teal); transition: height 0.4s var(--ease); }
.toc a { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3rem 1fr; column-gap: 0.85rem; align-items: start; padding: 0.5rem 0; font-size: 0.88rem; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.toc a::before { content: ''; grid-row: span 2; justify-self: center; width: 0.7rem; height: 0.7rem; margin-top: 0.27rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--sage); transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.toc a:hover { color: var(--teal); }
.toc a:hover::before { box-shadow: inset 0 0 0 2px var(--teal); }
.toc a.is-read { color: var(--teal); }
.toc a.is-read::before { background: var(--teal); box-shadow: none; transform: scale(0.75); }
.toc a.is-active { color: var(--teal-ink); font-weight: 700; }
.toc a.is-active::before { background: var(--teal); box-shadow: none; outline: 2px solid var(--rose); outline-offset: 3px; }
.toc a.is-active::after { content: 'You are here' / ''; grid-column: 2; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; color: var(--rose-ink); }
@media (prefers-reduced-motion: reduce) { .toc ol::after, .toc a::before { transition: none; } }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: var(--step-3); margin-top: 3rem; }
.prose h3 { font-size: var(--step-2); margin-top: 2.25rem; }
.prose p, .prose li { color: #3b4343; }
.prose figure { margin-block: 2.5rem; }
.prose figure img { width: 100%; border-radius: var(--picture-radius); background: var(--white); border: 1px solid var(--line); padding: clamp(0.75rem, 2vw, 1.5rem); }
.prose figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; text-align: center; font-style: italic; }

/* Recurring "ebook boxes" — the same system as the book's inside pages (Launch Pack §07) */
.box { position: relative; border-radius: var(--panel-radius); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); border: 1px solid var(--line); background: var(--white); }
.box p:last-child { margin-bottom: 0; }
/* A rose ✕ for the myth and a teal ✓ for the evidence */
/* 11 Nov 2026 design review: no line through the myth (it made the sentence hard to read). The ✕, the "You may hear"
   label and a softer colour say it is a myth. */
/* Words you may hear: one flashcard per term, each with a coloured top edge */
/* Rows always fill: three across when the count divides by 3, otherwise two across with an odd last card taking the whole row */

/* Kara's own boxes carry her monogram, like a note in the margin */
/* On phones the monogram moves to the top-right corner, so Kara's words keep the full width */

/* Questions for your appointment: a dashed tear-off card with room for notes (prints cleanly) */
.sources { font-size: 0.88rem; color: var(--muted); }
.sources ul { padding-left: 1.1rem; margin-top: 0.5rem; }
/* Previous / next (25 Oct 2026): the Embryology Course's pager cards, so both sides move on the same way */

/* ---------- Start Here (22 Oct 2026): A · the six steps on an illustrated path, plus D's appointment questions ---------- */
/* Start Here, option D "Picture board" (22 Oct 2026): watercolour header, then the steps as tilted picture cards */
.start__progress:not([hidden]) { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; white-space: nowrap; }
.start__hint { margin: 0; } /* step 6: Kara's face, not only her chin (11 Nov 2026) */
/* Option B (24 Oct 2026): the next step stands out, finished steps fade and get a tick (main.js sets is-next and is-done) */
/* bottom-right corner, never over Kara's face (user rule, 22 Oct 2026; fixed here 24 Oct) */
.start__complete { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); }
@media (max-width: 640px) {
  /* the watercolour becomes a strip under the text, cropped to the two faces */
}
@media print {
  .is-printing-questions body * { visibility: hidden; }
}

/* The Learn menu panel leads with a link to the Learn page itself */
.nav-mega__top { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; padding-top: 1.25rem; }
.primary-nav .nav-mega__all { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--white); font-size: 0.9rem; font-weight: 500; transition: background 0.2s; }
.primary-nav .nav-mega__all:hover, .primary-nav .nav-mega__all:focus-visible { background: var(--teal-deep); color: var(--white); }
/* The bar keeps white text in every state, including on the Learn page itself (aria-current) */
.primary-nav .nav-mega__all, .primary-nav .nav-mega__all[aria-current='page'], .primary-nav .nav-mega__all:visited { color: var(--white); }
.primary-nav .nav-mega__all[aria-current='page'] { background: var(--teal-deep); }
.primary-nav .nav-mega__all::after { display: none; }
.nav-mega__all b { font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; margin-right: 0.6rem; }
.nav-mega__top + .nav-mega__grid { padding-top: 1.4rem; }
/* The Embryology Course row under "Open the Learn page" (25 Oct 2026, shown once the course is live) */
.nav-mega__top:has(.nav-mega__course) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.primary-nav .nav-mega__course, .primary-nav .nav-mega__course:visited { background: var(--sage-soft); color: var(--teal-ink); }
.primary-nav .nav-mega__course:hover, .primary-nav .nav-mega__course:focus-visible { background: var(--sage); color: var(--teal-ink); }
@media (max-width: 1180px) { .nav-mega__top:has(.nav-mega__course) { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { .nav-mega__top { width: auto; padding: 1rem 1rem 0; } .primary-nav .nav-mega__all { white-space: normal; font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.4; } .nav-mega__all b { display: block; margin: 0 0 0.2rem; } }

/* ---------- Videos page (22 Oct 2026): A · Kara on camera, B's episode guide, A's year timeline ---------- */
.vguide__row { scroll-margin-top: 6rem; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.2rem, 1rem + 2vw, 2.5rem); padding: 1.8rem 0; border-top: 1px solid var(--line); align-items: start; }
.vguide__row h3 { margin: 0; font-size: var(--step-2); }
.vguide__row blockquote { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--rose); font-family: var(--font-serif); font-style: italic; color: var(--muted); max-width: 62ch; }
/* Option B (24 Oct 2026): the episode guide as a folding list */
.vguide__fold { border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.vguide__fold[open] { box-shadow: inset 0 0 0 2px var(--teal); }
.vguide__fold > summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 0.7rem 1.3rem 0.7rem 0.7rem; cursor: pointer; list-style: none; }
.vguide__fold > summary::-webkit-details-marker { display: none; }
.vguide__fold > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--panel-radius); }
/* 6 Nov 2026: each row shows its episode's painted poster (it carries the episode number and title) */
.vguide__fold h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
/* Self-hosted episodes (29 Oct 2026): the painted Episode 1 plays in the site's own player, its words folded below */
.vplayer { margin: 0 0 0.4rem; width: 100%; max-width: 760px; display: grid; gap: 0.6rem; }
.vplayer video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--picture-radius); background: var(--ivory); box-shadow: 0 0 0 1px var(--line); }
/* 6 Nov 2026 audit: the words inside the video are too small in a phone-width player, so phones play full screen */
/* End of a library page (views/pages/topic.ejs, 11 Nov 2026): one "Keep going" panel for the course and the male
   guides, then the Starter Guide as a slim band with its cover (.guide-strip: .guide-band is the homepage section). */

/* Consultation "message sent" panel (views/partials/consult-form.ejs, 11 Nov 2026) */

/* Videos page topic buttons above the episode list (main.js, 11 Nov 2026) */
.vfilter__btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--white); color: var(--teal-ink); font: 600 0.84rem/1.2 var(--font-sans); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.vfilter__btn:first-child { padding-left: 0.8rem; }
.vfilter__btn:hover { border-color: var(--teal); }
.vfilter__btn[aria-pressed="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--ivory); }
.vfilter__btn img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
@media (max-width: 640px) {
  /* one swipeable row on a phone instead of six rows of buttons */
  .vfilter__btn { flex: none; }
}

/* "Watch with Kara" video cards on topic pages and male guides (views/partials/video-cards.ejs, 11 Nov 2026) */

/* The Play button on the poster until the episode starts (main.js, 11 Nov 2026). It sits above the middle so it
   never covers the painted title card at the bottom left. */
.vplayer__stage { position: relative; }
.vplayer__play {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.2rem 0.55rem 0.55rem;
  border: 0; border-radius: 999px; background: rgb(255 253 252 / 0.95); color: var(--teal-ink); cursor: pointer;
  box-shadow: 0 14px 34px rgb(23 59 59 / 0.22); font: 700 0.76rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.vplayer__play:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 18px 40px rgb(23 59 59 / 0.28); }
.vplayer__play:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.vplayer__play-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--teal-ink); }
.vplayer__play-icon svg { width: 1rem; height: 1rem; margin-left: 2px; fill: var(--ivory); }
@media (max-width: 480px) { .vplayer__play { padding: 0.45rem; } .vplayer__play-txt { display: none; } }
@media (max-width: 700px) { .vguide__fold > summary { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0.9rem; } .vguide__fold h3 { font-size: 1.05rem; } }
/* /videos: every episode by topic (6 Nov 2026), in the old timeline's dots and type */
.episodes { columns: 2 300px; column-gap: 2.5rem; padding-left: 1.4rem; }
.episodes li { padding: 0.3rem 0; break-inside: avoid; color: var(--muted); }
.episodes li::marker { color: var(--rose-ink); font-weight: 700; }
@media (max-width: 760px) { .vguide__row { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
/* ---------- FAQ page (22 Oct 2026, option B): theme cards, then each theme in two columns ---------- */
/* 6 Nov 2026 (option A): each theme card opens with its own painting */
/* Option B (24 Oct 2026): the themes stay beside the questions on a computer; one column of questions */  /* the theme cards above do the same job on small screens */

/* Quote / about */
/* ---------- Meet Kara page: photo collage, profile, "Learn with Kara" cards ---------- */
/* the photo sits in the middle of the collage, on top of it */
/* the frame is smaller here than on its own, so its placeholder (logo + line) is scaled to fit */

/* The Embryology Course band (25 Oct 2026, home and Learn): the course's six first-week paintings beside the invitation */
/* The homepage hero's fourth tab, "The Course" (1 Nov 2026, option A): the six first-week paintings in a ring
   around the invitation. It replaced the dark course header above the hero. */
/* Option B "The ring, labelled" (11 Nov 2026): day labels under the paintings (Day 1 above it, clear of the centre),
   a dashed path round the ring with an arrow, and the counts and the free Module 1 in the centre. */
/* A small ring (phones) has no room in the centre: the counts and the free Module 1 stay in the line under the ring */
/* Homepage hero Female and Male tabs, option C (11 Nov 2026): cards under each circle, in place of its caption, each
   tagged free to read (teal) or in the package. Rose edge for the female topics, blue for the male guides. */
/* The course invitation (1 Nov 2026, options B + C): partials/course-invite.ejs,
   as the dark course header above the homepage hero and as the panel under "The Course" in the menu */
.course-invite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
.course-invite__q { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; color: var(--teal-ink); margin: 0.35rem 0 0.8rem; }
.course-invite__lead { max-width: 36rem; margin: 0 0 1.1rem; }
.course-invite__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.course-invite__facts li { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--sage-soft); color: var(--teal-ink); font-size: 0.85rem; font-weight: 600; }
.course-invite__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); }
.course-invite__stages img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #faf6ec; display: block; }
.course-invite--menu { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; padding-block: 1.75rem 2rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.course-invite--menu .course-invite__q { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); }
.course-invite--menu .course-invite__lead { color: var(--muted); }
/* inside the menu, undo the menu-link and menu-list styles (they would squeeze the buttons and stretch the facts) */
.primary-nav .course-invite .btn { display: inline-flex; justify-content: center; padding: 1.05rem 1.9rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.11em; color: var(--btn-fg); white-space: nowrap; }
.primary-nav .course-invite .btn::after { display: none; }
.primary-nav .nav-mega__panel .course-invite__facts { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: 0.5rem; }
.primary-nav .course-invite__facts li { border: 0; width: auto; }
.nav-new { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--rose-soft); color: var(--rose-ink); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.15em; line-height: 1.4; }
@media (max-width: 860px) {
  .course-invite { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .course-invite--menu { width: auto; padding: 1rem 1rem 1.25rem; }
  .course-invite--menu .course-invite__stages { display: none; }
  .primary-nav .course-invite--menu .course-invite__q { font-family: var(--font-serif); }
  .primary-nav .course-invite__facts li { background: var(--white); }
  .primary-nav .course-invite .btn { width: 100%; }
}
@media (max-width: 700px) {
  /* phones: a square collage with the photo larger in the middle */
}

/* Worksheets */
/* ---------- Starter Guide: the guide as paper on a warm sand "desk", with its contents beside it ---------- */ /* keeps the wide results table scrolling inside the paper on phones */ /* the worksheets stop is a square, not a section dot */
.sg-thing__pic { position: relative; aspect-ratio: 1; border-radius: var(--picture-radius); }
.sg-thing__pic img { position: absolute; inset: 0; margin: auto; max-width: 80%; max-height: 80%; object-fit: contain; }

/* Disclaimer strip */
.disclaimer-strip { background: var(--sand-soft); border-top: 1px solid var(--line); padding-block: 1.75rem; }
.disclaimer-strip p { font-size: 0.85rem; color: var(--muted); max-width: 95ch; }
.disclaimer-strip strong { color: var(--teal-ink); }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--teal-deep); color: rgb(250 247 241 / 0.78); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2rem; }
.site-footer__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
/* Footer shortcuts (option A, 22 Oct 2026): four calm columns, no tiles. */
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 2.75rem; border-bottom: 1px solid rgb(250 247 241 / 0.14); }
.footer-col h2 a { color: inherit; }
.footer-col h2 a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-col ul { gap: 0.15rem; }
.footer-col li a { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; color: rgb(250 247 241 / 0.88); font-size: 0.95rem; line-height: 1.3; }
.footer-col li a:hover { color: var(--white); }
.footer-col__icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; transition: transform 0.2s; }
.footer-col__icon img { width: 78%; height: auto; }
.footer-col li a:hover .footer-col__icon { transform: scale(1.08); }
.footer-col small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-light); }
.footer-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.2rem; }
.footer-covers a { display: block; }
.footer-covers img { width: 100%; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; box-shadow: 0 8px 18px rgb(0 0 0 / 0.25); display: block; transition: transform 0.2s; }
.footer-covers a:hover img, .footer-covers a:focus-visible img { transform: translateY(-4px); }
.footer-col .footer-cta { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.7rem 1rem; margin-bottom: 0.6rem; border-radius: var(--btn-radius); background: var(--ivory); color: var(--teal-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-col .footer-cta:hover { background: var(--rose); color: var(--teal-ink); text-decoration: none; }
.footer-col .footer-cta--quiet { display: flex; width: fit-content; padding: 0.3rem 0; background: none; color: var(--rose-light); font-size: 0.92rem; letter-spacing: 0; text-transform: none; }
.footer-col .footer-cta--quiet:hover { background: none; color: var(--white); text-decoration: underline; }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 2rem; } }
@media (prefers-reduced-motion: reduce) { .footer-col__icon, .footer-covers img { transition: none; } }
/* Footer contact strip (24 Oct 2026): Kara, her email and "Suggest a topic", above the topic columns on every page */
.footer-contact { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-bottom: 2.5rem; padding: 1.1rem 1.4rem; border-radius: var(--panel-radius); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: rgb(250 247 241 / 0.85); }
.footer-contact img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid rgb(255 255 255 / 0.85); }
.footer-contact p { margin: 0; }
.footer-contact__q { font: 500 1.25rem/1.25 var(--font-serif); color: var(--white); margin-bottom: 0.15rem !important; }
.footer-contact a:not(.footer-cta) { color: var(--white); font-weight: 700; overflow-wrap: anywhere; font-size: clamp(0.85rem, 4.2vw, 1rem); }
.footer-contact .footer-cta { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.7rem 1rem; border-radius: var(--btn-radius); background: var(--ivory); color: var(--teal-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-contact .footer-cta:hover { background: var(--rose); color: var(--teal-ink); text-decoration: none; }
@media (max-width: 700px) { .footer-contact { grid-template-columns: 56px minmax(0, 1fr); } .footer-contact img { width: 56px; height: 56px; } .footer-contact .footer-cta { grid-column: 1 / -1; justify-self: start; } }
/* Footer topic columns on phones (option B, 24 Oct 2026): each column folds into one link to its section page */
.footer-col__jump { display: none; }
@media (max-width: 560px) {
  .footer-cols { gap: 0.6rem; }
  .footer-col:not(.footer-col--books) > h2, .footer-col:not(.footer-col--books) > ul { display: none; }
  .footer-col__jump { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 0.9rem 1.1rem; border-radius: var(--panel-radius); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: var(--white); font: 500 1.1rem var(--font-serif); text-decoration: none; }
  .footer-col__jump small { grid-column: 1; margin-top: 0.1rem; color: rgb(250 247 241 / 0.75); }
  .footer-col__jump span { grid-row: 1 / 3; grid-column: 2; }
  .footer-col--books { margin-top: 1.4rem; }
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
/* The Embryology Course adds its own "The course" column (25 Oct 2026) */
.footer-brand { display: grid; gap: 1.1rem; justify-items: start; }
.footer-mark { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.footer-mark span:first-child { width: 72px; height: 72px; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; flex: none; }
.footer-mark img { width: 80%; }
.footer-word { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.05; color: var(--ivory); }
.footer-word em { display: block; color: var(--rose); font-size: 1.25rem; }
.site-footer h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: rgb(250 247 241 / 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-base { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgb(250 247 241 / 0.15); display: grid; gap: 1rem; font-size: 0.8rem; color: rgb(250 247 241 / 0.6); }
@media (min-width: 860px) { .footer-base { grid-template-columns: 1fr auto; } }
/* Placeholder marks for accounts that do not exist yet: visibly present, clearly
   not clickable, and out of the tab order. */
.footer-news .field input { background: rgb(250 247 241 / 0.08); border-color: rgb(250 247 241 / 0.25); color: var(--ivory); }
.footer-news .field input::placeholder { color: rgb(250 247 241 / 0.55); }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Print (worksheets & starter guide) ---------- */
@media print {
  .site-header, .site-footer, .disclaimer-strip, .no-print, .toc, .pager, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section, .page-hero { padding-block: 1rem; background: none; }
  a { text-decoration: none; color: inherit; }
}

/* Extras */

/* =========================================================================
   Phone and tablet refinements — 2026-10-01
   From an audit of every page at 320, 360, 375, 390, 414, 768, 820, 1024
   (portrait and landscape) and 1180px. Rules run wide to narrow so the
   narrower one always wins. Desktop above 1200px is left as it was.
   ========================================================================= */

/* ---- Footer ------------------------------------------------------------
   It kept the one-column phone layout until 860px, so a portrait iPad
   showed a narrow strip of links beside two thirds of empty teal. */
@media (max-width: 859.98px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
  .footer-brand, .footer-news { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 859.98px) {
  .footer-base { grid-template-columns: 1fr auto; align-items: center; }
}
/* The signup field used to stretch the full width of a tablet. */
.footer-news .field input { max-width: 26rem; }
/* A wave in the background art ran through this line like a strikethrough. */
.site-footer__bg { opacity: 0.3; }

/* ---- The homepage dial -------------------------------------------------
   Between 960 and 1060px the hero left the dial only about 350px while its
   centre kept desktop sizes, so "Choose a segment" sat on top of segment 05.
   The centre now answers to the dial's own width, not the viewport's. */
.dial { container-type: inline-size; }
@container (max-width: 430px) {
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
}
@container (max-width: 330px) {
  .dial__kicker { font-size: 0.66rem; letter-spacing: 0.06em; line-height: 1.3; }
  .dial__title { font-size: 0.92rem; }
  .dial__go { font-size: 0.66rem; letter-spacing: 0.06em; }
}
/* Fallback for browsers without container queries (iOS 15 and older): the same
   compact centre, applied over the viewport range where the dial column is narrow. */
@media (min-width: 960px) and (max-width: 1059.98px) {
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
}
/* An orbiting pearl used to drift across the caption underneath. */

/* ---- Wrapping and spacing ---------------------------------------------- */
.cta-band h2, .prose h2 { text-wrap: balance; }
/* Two paragraphs inside a box had no gap, so the button sat on the text. */
.box > p + p { margin-top: 1rem; }
/* Article lines ran to about 90 characters on a tablet. The document pages
   (disclaimer, privacy) are not running articles, so they keep the 820px the
   .doc-paper rule asks for, which .prose had been quietly overriding. */
.prose { max-width: 65ch; }

/* ---- Cards left stranded alone on a last row ---------------------------- */
/* Three books: one centred column rather than two with an orphan. */
/* Three worksheets: keep three columns on a tablet instead of two plus one. */
/* Five source tiles: centre the short last row. */
/* Spare row height was pushing the numbered badges to different heights. */
/* Book cards ended at different heights, so their buttons were out of line. */

/* ---- Worksheet fan: the sheets covered each other's titles on a tablet --- */

/* ---- Email fields squeezed next to their button ------------------------- */

/* ---- The free-guide "peek inside" card was squeezed to a 130px column ---- */

/* ---- Homepage: the figure floated in the middle of empty space ---------- */

/* …and top-aligned it left a blank column under it: it now travels beside the list */


/* ---- Document pages: heading and paper started on different left edges --- */

/* ---- Thank-you and 404 -------------------------------------------------- */
/* "e.g. AMH" was cut to "e.g. AM" in the search box. */
/* Stacked buttons were different widths. */
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; }
}

/* ---- Topic pages -------------------------------------------------------- */
/* The hero picture was pinned left with an empty band beside it. */
/* "6 sources" kept dropping onto a second row on its own. */
/* "Ask your healthcare professional" wrapped, leaving one word below. */
@media (max-width: 430px) {
  .eyebrow { letter-spacing: 0.14em; }
}

/* ---- Contact ------------------------------------------------------------ */
@media (max-width: 380px) {  /* iOS Safari still needs the prefix */
}
@media (max-width: 340px) {
  /* "endometriosis" is one long word and still ran over on a 320px phone. */
}
/* Just under the 24px minimum on some phones. */


/* ---- FAQ ---------------------------------------------------------------- */

/* ---- Starter guide ------------------------------------------------------ */
/* The picture column left the text only about 190px on a phone. */
@media (max-width: 560px) {
  .sg-thing__pic { width: 5rem; }
}
/* The tracker table is wider than a phone. Shadows show which way it scrolls. */

/* ---- Meet Kara ---------------------------------------------------------- */

/* ---- Homepage odds and ends --------------------------------------------- */
@media (max-width: 420px) {
  /* Narrow phones: the cover sits above the title instead of beside it. */
}

/* ---- Video thumbnails --------------------------------------------------- */
@media (max-width: 460px) {
  /* The title ran into the artwork on small phones. */
}

/* ---- Free-guide hero: the signup card stopped short of the right edge ---- */

/* ---- "Editions": the paragraph sat left of centre under its heading ------ */
.center .lead, .lead.center-block { margin-inline: auto; }

/* ---- Tap targets: the consent box was 19px, under the 24px minimum ------- */
.checkbox input { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; }

/* ---- Teaching diagrams on phones ----------------------------------------
   The labels (Primordial, Egg retrieval, Day 1…) are drawn into the artwork,
   so at 320-430px they shrink to 4-6px and cannot be read. On phones each
   diagram runs the full width of the screen and opens full size when tapped,
   where the browser's own viewer allows pinch-zoom. The IVF steps also have a
   phone-shaped version of the same artwork, stacked two by two.
   Full bleed is done with the container gutter rather than 100vw, so a
   scrollbar can never push the page sideways. */
.diagram { display: block; }
@media (max-width: 620px) {
  .topic-hero__fig, .prose figure, .figure {
    margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0;
    padding-inline: 0; background: transparent; box-shadow: none;
  }
  .topic-hero__fig > *, .prose figure > *, .figure > * { padding-inline: var(--gutter); }
  .topic-hero__fig .diagram, .prose figure .diagram, .figure .diagram { padding-inline: 0; }
  .topic-hero__fig img, .prose figure img, .figure img {
    width: 100%; border-radius: 0; border-inline: 0; padding-inline: 10px; /* labels at the art's edges stay off the screen edge */
  }
  /* The icon heroes are small round pictures, not diagrams: leave them in their card. */
  /* 11 Nov 2026 design review: a wide labelled diagram keeps a readable width and pans sideways (views/partials/diagram.ejs) */ /* max-width: the 680 px picture must not widen the article */
}

/* The header on the narrowest phones: the logo plus the two round buttons only
   just fit across 320px, so the gaps tighten rather than the buttons squashing. */
@media (max-width: 400px) {
  .header-inner { gap: 0.75rem; }
  .header-actions { gap: 0.5rem; }
}

/* Male fertility: existing brand colours, typography and illustrations. */

/* Expanded illustrated male fertility guide */
/* Four male fertility guides and vertical header dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown>summary{display:flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;font-size:.93rem;font-weight:600;padding:.5rem .15rem;color:var(--charcoal);white-space:nowrap;}
.nav-dropdown>summary::-webkit-details-marker{display:none;}
/* Drawn chevron in place of the ⌄ character, which sat below the baseline like a stray "v" */
.nav-dropdown>summary>span{flex:none;width:.4rem;height:.4rem;margin-left:.15rem;font-size:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.12rem) rotate(45deg);transition:transform .2s;}
.nav-dropdown[open]>summary>span{transform:translateY(.1rem) rotate(-135deg);}
.nav-dropdown>summary.is-current{color:var(--teal);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:.6rem;}
.nav-dropdown>summary:focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
.primary-nav .nav-submenu{position:absolute;top:100%;left:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:305px;margin:0;padding:.55rem;background:var(--white);border:1px solid var(--line);border-radius:var(--panel-radius);box-shadow:0 15px 35px rgb(23 59 59 / .15);}
.nav-dropdown:not([open])>.nav-submenu{display:none;}
.primary-nav .nav-submenu li{width:100%;margin:0;border:0;}
.primary-nav .nav-submenu a{padding:.8rem .75rem;font-size:.9rem;border-radius:var(--panel-radius);line-height:1.5;}
.primary-nav .nav-submenu a{position:relative;transition:background-color .15s,color .15s,padding-left .2s var(--ease);}
/* The row under the pointer (or keyboard focus) lights up: rose for the female menu, sage for the male menu */
.nav-group{--hl-bg:var(--sage);--hl-bar:var(--teal);}
.primary-nav .nav-submenu a::before{content:'';position:absolute;left:.35rem;top:.7rem;bottom:.7rem;width:3px;border-radius:3px;background:var(--hl-bar);opacity:0;transition:opacity .15s;}
.primary-nav .nav-submenu a:hover,.primary-nav .nav-submenu a:focus-visible,.primary-nav .nav-submenu a[aria-current='page']{background:var(--hl-bg);color:var(--teal-ink);padding-left:1.15rem;}
.primary-nav .nav-submenu a:hover::before,.primary-nav .nav-submenu a:focus-visible::before,.primary-nav .nav-submenu a[aria-current='page']::before{opacity:1;}
.primary-nav .nav-submenu a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.primary-nav .nav-submenu a::after{display:none;}
@media(max-width:1180px){
 .primary-nav .nav-group{width:100%;}
 .nav-dropdown>summary{font-family:var(--font-serif);font-size:1.25rem;padding:1rem 0;justify-content:space-between;}
 .primary-nav .nav-submenu{position:static;width:100%;box-shadow:none;margin:0 0 .75rem;padding:.4rem;background:var(--sage-soft);}
 .primary-nav .nav-submenu a{font-family:var(--font-sans);font-size:.95rem;padding:.7rem .65rem;}
}
.male-hero__art{margin:0;}
.male-hero__art img{display:block;width:100%;height:auto;border-radius:var(--picture-radius);box-shadow:0 12px 32px #173e3810;}
.male-hero__art figcaption{font-size:.75rem;color:var(--muted);margin-top:.6rem;text-align:right;} /* the intro paragraph sat right under the heading */
.male-read-next{display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:center;margin:3rem 0;padding:1.3rem;background:var(--sage-soft);border-radius:var(--panel-radius);}
.male-read-next img{width:100%;height:auto;border-radius:var(--picture-radius);}
.male-read-next h2{font-size:1.6rem;margin:.5rem 0;}
.male-read-next h2 a{color:var(--teal-ink);text-decoration:none;}
.male-read-next p{font-size:.9rem;margin:0;} /* option B: the four cards side by side */
@media(max-width:800px){.male-hero__art{max-width:650px;}}
@media(max-width:500px){.male-read-next{grid-template-columns:1fr;}.male-read-next img{max-width:260px;}.male-hero__art img{border-radius:var(--picture-radius);}}

/* ---- Male guides, polish pass (2026-10-12) --------------------------------
   Brings the four male guides in line with the female topic pages: the same
   hero facts, numbered contents with scroll spy, figure frames, FAQ cards and
   paragraph rhythm. Every picture opens in the on-page viewer (.lightbox). */

/* Contents: the topic-page .toc, kept visible as a card on narrower screens */
@media (max-width: 999px) { /* the rail can't cross columns; the dots still mark progress */
}

/* Chapter rhythm: chapters wrap their paragraphs, so restore the .prose spacing */
/* Each chapter's "Read more" research list stays closed until it is clicked (25 Oct 2026) */

/* Figures: the same white card as topic-page diagrams, with an Enlarge badge */
.male-figure__pic { position: relative; display: block; border-radius: var(--picture-radius); }
.male-figure__pic img { display: block; }
.male-figure__pic:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

/* Text explainers: real text, so the labels stay readable at any size */

/* Both partners: links to the female-side topics and the ebook previews */

/* Female topic pages: the matching link back to the male guides */
/* Links between the website and the Embryology Course (25 Oct 2026): the same box on both sides.
   Website topic pages: "Go deeper in the course" (lesson paintings). Course lessons: "Read next on Fertility with Kara" (topic icons). */

/* Picture viewer: a native <dialog>, so Escape, focus and the backdrop are handled by the browser */
.lightbox { margin: auto; width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--panel-radius); background: var(--white); box-shadow: 0 25px 60px rgb(23 59 59 / 0.35); }
.lightbox::backdrop { background: rgb(21 45 45 / 0.72); }
.lightbox__frame { display: grid; gap: 0.8rem; padding: clamp(0.8rem, 2vw, 1.4rem); }
.lightbox__img { display: block; width: 100%; max-height: 74vh; object-fit: contain; background: var(--ivory); border-radius: var(--picture-radius); }
.lightbox__caption { font-size: 0.9rem; line-height: 1.55; color: var(--muted); font-style: italic; margin: 0; }
.lightbox__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; margin: 0; }
.lightbox__open { font-size: 0.85rem; font-weight: 600; }
.lightbox__close { font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 1.2rem; border: 0; border-radius: var(--btn-radius); background: var(--teal-ink); color: var(--white); cursor: pointer; }
.lightbox__close:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
html.has-lightbox { overflow: hidden; }
@media (max-width: 620px) { .lightbox { width: 100vw; max-height: 100vh; border-radius: 0; } .lightbox__img { max-height: 68vh; } }
@media print { .male-figure__zoom, .lightbox, .male-sprig { display: none !important; } }

/* Watercolour additions (12 Oct 2026): side-by-side pictures and the shared-picture banner */
/* Wide labelled diagrams (25 Oct 2026, the Book Four explainers): on a phone they keep a readable
   width and pan sideways, like the course's figures; Enlarge still opens the whole picture */
/* Male section landing: the homepage dial hero, with a softer background */
/* Option C: the hero painting is mirrored so its sperm-meeting-the-egg scene sits behind the dial. */
/* The caption wraps on phones; keep both lines centred between the rules */
/* Female fertility: the same dial hero as the male landing */

/* Header with both Female and Male Fertility menus (12 Oct 2026). The header gets a wider
   container than the page body, then compacts in steps so the menu stays on one line:
   Search becomes an icon, the logo and gaps shrink, and the phone menu starts at 1180px. */
.site-header .header-inner { width: min(100% - 2 * var(--gutter), 1400px); gap: 1.2rem; }
@media (min-width: 1181px) and (max-width: 1520px) {
  .header-search { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .brand-logo img { width: 215px; }
  .primary-nav ul { gap: 0.55rem; }
  .primary-nav a, .nav-dropdown > summary { font-size: 0.88rem; }
  .header-inner { gap: 0.9rem; }
}
@media (min-width: 1181px) and (max-width: 1260px) {
  .brand-logo img { width: 190px; }
  .primary-nav ul { gap: 0.4rem; }
  .primary-nav a, .nav-dropdown > summary { font-size: 0.85rem; }
}

/* Dial variant: small swimming sperm orbit the dial instead of round cells (male guides).
   Each swimmer sits at the top of its rotated layer, head pointing the way its ring turns. */
@keyframes dial-swim { 50% { transform: translate(-50%, -50%) rotate(7deg); } }
@keyframes dial-swim-back { 0%, 100% { transform: translate(-50%, -50%) scaleX(-1); } 50% { transform: translate(-50%, -50%) scaleX(-1) rotate(7deg); } }

/* Kara's script (option B, chosen 12 Oct 2026). Satisfy matches the logo's "with Kara" lettering.
   Accents only, never medical text: the labels where Kara "signs" the page, the Meet Kara
   signature, and the "Know your options." line in the dial heroes. */
@font-face {
  font-family: 'Satisfy';
  src: url('/fonts/satisfy-latin.woff2?v=9184b84a') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --font-script: 'Satisfy', 'Brush Script MT', cursive; }
.script-kara { font-family: var(--font-script); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--rose-ink); font-size: 1.12em; }


/* Dial variant: small egg cells orbit the dial (female fertility), the counterpart of .dial--sperm. */
@keyframes dial-egg { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }

/* Homepage hero: tabs above the dial (option C, chosen 12 Oct 2026) */
/* Arrows pointing at Female and Male (22 Oct 2026); they fade once a tab has been chosen */ /* room for the arrows when the dial sits below the text */

/* Learn page: the tabbed dial beside the search and filters (12 Oct 2026) */

/* Start Here: the tabbed dial after the six steps (12 Oct 2026) */
.start-dial { overflow: hidden; }

/* ================= Motion (options A, B, C, D, F, G, chosen 13 Oct 2026) =================
   Calm, transform-and-opacity only, and all of it off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* A · The opening line: headline lines rise; "Know your options." writes itself on in script */

  /* B · Dials bloom open: segments one by one round the ring, then the band, centre and orbit */
  .dial .dial__seg > * { animation: motion-bloom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .dial__seg:nth-child(3) > * { animation-delay: 0ms; }
  .dial__seg:nth-child(4) > * { animation-delay: 50ms; }
  .dial__seg:nth-child(5) > * { animation-delay: 100ms; }
  .dial__seg:nth-child(6) > * { animation-delay: 150ms; }
  .dial__seg:nth-child(7) > * { animation-delay: 200ms; }
  .dial__seg:nth-child(8) > * { animation-delay: 250ms; }
  .dial__seg:nth-child(9) > * { animation-delay: 300ms; }
  .dial__seg:nth-child(10) > * { animation-delay: 350ms; }
  .dial__seg:nth-child(11) > * { animation-delay: 400ms; }
  .dial__seg:nth-child(12) > * { animation-delay: 450ms; }
  .dial__seg:nth-child(13) > * { animation-delay: 500ms; }
  .dial__seg:nth-child(14) > * { animation-delay: 550ms; }
  .dial__seg:nth-child(15) > * { animation-delay: 600ms; }
  .dial__seg:nth-child(16) > * { animation-delay: 650ms; }
  .dial__seg:nth-child(17) > * { animation-delay: 700ms; }
  .dial__seg:nth-child(18) > * { animation-delay: 750ms; }
  .dial__seg:nth-child(19) > * { animation-delay: 800ms; }
  .dial__seg:nth-child(20) > * { animation-delay: 850ms; }
  .dial__seg:nth-child(21) > * { animation-delay: 900ms; }
  .dial__seg:nth-child(22) > * { animation-delay: 950ms; }
  .dial__seg:nth-child(23) > * { animation-delay: 1000ms; }
  .dial__seg:nth-child(24) > * { animation-delay: 1050ms; }
  .dial__seg:nth-child(25) > * { animation-delay: 1100ms; }
  .dial__seg:nth-child(26) > * { animation-delay: 1150ms; }
  .dial__seg:nth-child(27) > * { animation-delay: 1200ms; }
  .dial__seg:nth-child(28) > * { animation-delay: 1250ms; }
  .dial__seg:nth-child(29) > * { animation-delay: 1300ms; }
  .dial__seg:nth-child(30) > * { animation-delay: 1350ms; }
  .dial__seg:nth-child(31) > * { animation-delay: 1400ms; }
  .dial__seg:nth-child(32) > * { animation-delay: 1450ms; }
  /* The female and male tab panels turn in instead (C), and the Start Here dial waits until it is seen */
  .js .start-dial .dial:not(.is-inview) .dial__seg > *,
  .js .start-dial .dial:not(.is-inview) .dial__core,
  .js .start-dial .dial:not(.is-inview) .dial__orbit > span,
  .js .start-dial .dial:not(.is-inview) + .dial__caption { animation-play-state: paused; }

  /* C · The circles turn when you switch tabs (main.js adds these classes) */
  /* The Female and Male arrows draw themselves on, then keep nudging towards their tab */
  @keyframes hint-draw { from { stroke-dashoffset: 1; } }
  @keyframes hint-pulse { 0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgb(var(--ring) / 0.45); } 70%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 10px rgb(var(--ring) / 0); } }
  @keyframes hint-nudge { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--dx, 1) * 5px) 5px; } }

  /* F · Cards lift and lean towards the pointer (main.js sets --rx/--ry on fine pointers) */
  .zcard { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
  .zcard, .zcard:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .zcard:hover, .zcard:focus-visible { translate: 0 -6px; box-shadow: 0 22px 40px -22px rgb(23 59 59 / 0.45); }

  /* G · Smooth page changes: a soft cross-fade between pages, the header stays still, and a Learn
     card's picture glides into its topic page header (both carry the same data-vt name) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: motion-page-out 0.25s ease both; }
  ::view-transition-new(root) { animation: motion-page-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  ::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  .site-header { view-transition-name: site-header; }
[data-vt="your-cycle"] img { view-transition-name: pic-your-cycle; }
[data-vt="fertility-testing"] img { view-transition-name: pic-fertility-testing; }
[data-vt="female-fertility"] img { view-transition-name: pic-female-fertility; }
[data-vt="male-fertility"] img { view-transition-name: pic-male-fertility; }
[data-vt="pcos"] img { view-transition-name: pic-pcos; }
[data-vt="endometriosis"] img { view-transition-name: pic-endometriosis; }
[data-vt="iui"] img { view-transition-name: pic-iui; }
[data-vt="ivf"] img { view-transition-name: pic-ivf; }
[data-vt="egg-freezing"] img { view-transition-name: pic-egg-freezing; }
[data-vt="lifestyle"] img { view-transition-name: pic-lifestyle; }
[data-vt="supplements"] img { view-transition-name: pic-supplements; }
[data-vt="emotional-health"] img { view-transition-name: pic-emotional-health; }
}
@keyframes motion-rise { from { opacity: 0; transform: translateY(0.5em); } }
@keyframes motion-write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes motion-breathe { to { scale: 1.05; translate: -1% -1%; } }
@keyframes motion-bloom { from { opacity: 0; transform: scale(0.55) rotate(-14deg); } }
@keyframes motion-sweep { from { opacity: 0; transform: rotate(-24deg) scale(1.05); } }
@keyframes motion-fade { from { opacity: 0; } }
@keyframes motion-turn-out { to { opacity: 0; transform: rotate(-28deg) scale(0.9); } }
@keyframes motion-turn-in { from { opacity: 0; transform: rotate(28deg) scale(0.9); } }
@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in { from { opacity: 0; transform: translateY(10px); } }

/* D · Sperm meets egg (views/partials/sperm-egg.ejs) */ /* the painted swimmers' paper background melts into the box (11 Nov 2026) */
/* The watercolour banner sits on top, the sperm animation directly beneath it (13 Oct 2026) */

/* Homepage male band: the sperm-meets-egg animation on the right (13 Oct 2026) */

/* Homepage female band (13 Oct 2026): mirrors the male band, with the egg orbit on the right */

/* Egg orbit (views/partials/egg-orbit.ejs) */
@keyframes egg-orbit-pulse { 50% { scale: 1.15; } }

/* Sperm development timeline (sperm-health chapter): numbered steps and a 0–3 month ruler
   under the watercolour. The bar stops between 2 and 3 months ("roughly two to three"). */
.male-ruler { margin: 1.4rem 0.4rem 0; }
@media (max-width: 600px) {
  .male-ruler { margin-inline: calc(var(--gutter) + 0.2rem); }
}

/* ================= Meet Kara · her background (verified qualifications, 13 Oct 2026) ================= */
/* With her real photo, keep the badges off her face */
/* Male guides, 13 Oct 2026 (option B): evidence labels, "Where the guidelines disagree" boxes,
   the label legend on /male-fertility and Kara's research-area note. Brand palette only; the
   dots repeat the level in shape, so the label never relies on colour alone. */

/* Supplements page (21 Oct 2026, options A + B): section pictures beside the text, and at-a-glance picture cards.
   Any topic can use them through topics.js `sections[].pic` and `glance`. */
.prose .sec-pic { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; margin: 0.4rem 0 2rem; }
.prose .sec-pic figure { margin: 0; }
.prose .sec-pic figure img { padding: 0; border: 0; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--picture-radius); box-shadow: var(--shadow); }
.prose .sec-pic figcaption { margin-top: 0.5rem; font-size: 0.8rem; font-style: italic; line-height: 1.45; color: var(--muted); }
.prose .sec-pic > p { margin-top: 0; }
@media (max-width: 720px) {
  .prose .sec-pic, .prose .sec-pic--flip { grid-template-columns: minmax(0, 1fr); }
}
.glance__card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius, 18px); }
.prose .glance__card h3 { margin: 0; font-size: 1.15rem; }
.prose .glance__card p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* Sources lists fold away (21 Oct 2026): click "Show the research" to open. */
details.sources--fold { margin-top: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
details.sources--fold[open] { border-color: var(--sage); box-shadow: var(--shadow-s); }
.sources--fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; color: var(--ink); }
.sources--fold > summary::-webkit-details-marker { display: none; }
.sources--fold > summary strong { font-family: var(--font-serif, Lora, serif); font-size: 1.05rem; color: var(--teal); }
.sources--fold > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
details.sources--fold > ul, details.sources--fold > p { margin: 0; padding: 0 1.25rem 1.1rem 2.35rem; }
details.sources--fold > p { padding-left: 1.25rem; padding-bottom: 0.6rem; }
section.sources details.sources--fold { margin-top: 1rem; }
@media print { details.sources--fold > ul { display: block; } }

/* ===== Ebook shop (22 Oct 2026): /shop and /shop/<book>. Mixes shop mockups A, B and C. ===== */
/* Overseas visitors (23 Oct 2026): the worker sets <html data-visitor="overseas"> from Cloudflare's country. */

/* "Which book is for you?" tiles */

/* Bundle banner and fanned covers */ /* scales with its column: on a tablet the fan covered the heading (25 Oct 2026) */
/* Two classes, so the phone rule for the big fans (84px covers) no longer swells this one over its card's title (11 Nov 2026) */

/* Book grid */

/* Comparison table */

/* Reassurance strip and waiting list */  /* option A (24 Oct 2026): the waiting list at the top while the shop is closed */

/* A book's own page */

/* Header mega menu (option B, 22 Oct 2026): "Learn" opens one full-width panel with every topic, the
   four male guides and the ebooks, in the same four groups as the footer. Ebooks and About Kara keep
   the small dropdown. Native <details>, so it works without JavaScript; main.js closes it on outside
   click and Escape like the other dropdowns. */
.nav-group--mega { --hl-bg: var(--sage-soft); --hl-bar: var(--teal); display: flex; align-items: center; }
.nav-group--mega > .nav-mega > summary { padding-inline: 0.3rem; }
.nav-mega__label { display: none; }
.nav-group--mega > .nav-mega > summary.is-current { text-decoration: none; }
.primary-nav .nav-mega__link.is-current { color: var(--teal); }
.primary-nav .nav-mega__link.is-current::after { transform: scaleX(1); }
/* The Course is new: its menu item takes the same rose as its New badge. */
.primary-nav .nav-group--course .nav-mega__link, .primary-nav .nav-group--course .nav-mega > summary { color: var(--rose-ink); }
@media (max-width: 1180px) {
  .primary-nav .nav-mega__link { display: none; }
  .nav-group--mega { display: block; }
  .nav-group--mega .nav-mega > summary > span.nav-mega__label { display: inline; width: auto; height: auto; margin: 0; font-size: inherit; border: 0; transform: none; }
  .nav-group--mega > .nav-mega > summary { padding-inline: 0; }
  .nav-group--mega > .nav-mega > summary.is-current { text-decoration: underline; }
}
.nav-dropdown.nav-mega { position: static; }
.nav-mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgb(23 59 59 / 0.45); }
.nav-mega:not([open]) > .nav-mega__panel { display: none; }
.nav-mega__grid { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 2.5rem; padding-block: 1.75rem 2rem; }
.nav-mega__col { min-width: 0; }
.primary-nav .nav-mega__h { display: block; padding: 0; margin-bottom: 0.9rem; font: 800 0.72rem/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.primary-nav .nav-mega__h:hover { text-decoration: underline; text-underline-offset: 4px; }
.primary-nav .nav-mega__panel a::after { display: none; }
.primary-nav .nav-mega__panel ul { display: grid; gap: 0.1rem; align-items: stretch; }
.primary-nav .nav-mega__panel li a { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.5rem; margin-inline: -0.5rem; border-radius: var(--panel-radius); color: var(--teal-ink); font-size: 0.92rem; font-weight: 600; line-height: 1.3; white-space: normal; }
.primary-nav .nav-mega__panel li a:hover, .primary-nav .nav-mega__panel li a:focus-visible, .primary-nav .nav-mega__panel li a[aria-current='page'] { background: var(--sage-soft); }
.primary-nav .nav-mega__col--female li a:hover, .primary-nav .nav-mega__col--female li a:focus-visible, .primary-nav .nav-mega__col--female li a[aria-current='page'] { background: var(--rose-soft); }
.primary-nav .nav-mega__panel li a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.nav-mega__panel li img { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ivory); padding: 3px; }
.nav-mega__panel small { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.nav-mega__covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.primary-nav .nav-mega__covers a { padding: 0; display: block; }
.nav-mega__covers img { width: 100%; height: auto; display: block; box-shadow: var(--shadow-s); transition: transform 0.2s; }
.nav-mega__covers a:hover img, .nav-mega__covers a:focus-visible img { transform: translateY(-3px); }
.primary-nav .nav-mega__shop { color: var(--btn-fg); padding: 0.65rem 1rem; }
.primary-nav .nav-mega__more { display: block; width: fit-content; margin-top: 0.7rem; padding: 0; color: var(--rose-ink); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 1180px) {
  .nav-mega__panel { position: static; border: 0; box-shadow: none; background: var(--sage-soft); margin: 0 0 0.75rem; border-radius: var(--panel-radius); }
  .nav-mega__grid { width: auto; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.1rem 1rem 1.25rem; }
  .primary-nav .nav-mega__panel li + li { border-top: 0; }
  .primary-nav .nav-mega__panel li a { font-family: var(--font-sans); font-size: 0.95rem; padding: 0.5rem 0.5rem; }
  .primary-nav .nav-mega__h { font-family: var(--font-sans); margin-bottom: 0.4rem; }
  .nav-mega__covers { max-width: 280px; }
  .primary-nav .nav-mega__shop { font-family: var(--font-sans); font-size: 0.85rem; }
  .primary-nav .nav-mega__more { font-family: var(--font-sans); font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-mega__covers img { transition: none; } }

/* Homepage "Where are you right now?" paths (option C, 23 Oct 2026): three numbered steps on one line, men and partners
   alongside as "At every stage"; and the ebook shop strip (option B, 22 Oct 2026). */
/* Homepage ebook strip (option D, 24 Oct 2026): the set of four first, then each book and its price */

/* ---------- Free guide page (22 Oct 2026, option B): a sample page beside the sign-up, the other nine locked below ---------- */
.fg-page { display: grid; gap: 0.8rem; justify-items: start; padding: 2.6rem 2.4rem 2.2rem; background: var(--white); box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 30px 60px -28px rgb(23 59 59 / 0.4); transform: rotate(1.2deg); }
.fg-page img { width: 100%; height: auto; max-height: 220px; object-fit: contain; padding: 1rem; border-radius: var(--picture-radius); background: var(--ivory); }
.fg-page h2 { margin: 0.3rem 0 0; font-size: var(--step-3); }
.fg-page p { margin: 0; color: var(--charcoal); }
@media (max-width: 900px) {
  .fg-page { transform: none; padding: 2.2rem 1.4rem 1.6rem; }
}

/* ---------- The Fertility Guide (22 Oct 2026, option B): the reading path, then real pages from the drafts ---------- */

/* ---------- Shop (22 Oct 2026, option A): one shelf, each book once ---------- */

/* ---------- Resources (22 Oct 2026, option C): flip cards to practise the words ---------- */
.flashcard__topic { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.78rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.flashcard__topic img { width: 1.9rem; height: 1.9rem; padding: 0.15rem; border-radius: 50%; background: var(--white); }
.flashcard__topic:hover { text-decoration: underline; text-underline-offset: 3px; }
.flashcard__flip { padding: 0; border: 0; background: none; font: 500 0.78rem var(--font-sans); color: var(--muted); cursor: pointer; }
/* With JavaScript: the word on the front, the meaning on the back */

/* ---------- Privacy (option C) and the medical disclaimer (option A), 23 Oct 2026: a dark top, then the full text on paper ---------- */

/* ---------- Thank-you and 404 (23 Oct 2026, option C): the message, then every topic to pick from ---------- */ /* the thank-you page's one next step (11 Nov 2026) */ /* Free / In the package (10 Nov 2026) */

/* ---------- Topic pages (23 Oct 2026, option A): Kara's summary first, then a picture card per section ---------- */
/* 11 Nov 2026: each box is as tall as its own words (the takeaway used to stretch and sit half empty), and beside
   a long "Kara explains" the takeaway stays in view while you read. */
.topic-stages { margin: 0 0 2.5rem; }
.prose .topic-stages ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.7rem; }
.prose .topic-stages ol:has(> li:nth-child(3):last-child), .prose .topic-stages ol:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.prose .topic-stages li { margin: 0; padding: 0; }
.prose .topic-stages li::before { content: none; }
.topic-stages a { position: relative; height: 100%; display: grid; gap: 0.4rem; align-content: start; padding: 0.5rem 0.5rem 0.7rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.topic-stages a:hover, .topic-stages a:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
@media (max-width: 760px) { .prose .topic-stages ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .topic-stages a { transition: none; } }

/* ---------- Male guides (23 Oct 2026, A + B): picture cards with each chapter's key idea, before chapter 1 ---------- */
.male-key { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--panel-radius); background: var(--white); text-decoration: none; color: inherit; transition: transform 0.2s; }
.male-key:hover, .male-key:focus-visible { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .male-key { transition: none; } }

/* ---------- Female Fertility dial page (23 Oct 2026, option A): the five topics as picture cards under the dial ---------- */
.female-card { height: 100%; display: grid; gap: 0.4rem; align-content: start; overflow: hidden; padding-bottom: 1rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.female-card:hover, .female-card:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow); }
@media (prefers-reduced-motion: reduce) { .female-card { transition: none; } }

/* ---------- Male Fertility landing (23 Oct 2026, option A): the four guides as picture cards, in the male colours ---------- */

/* Homepage dial option C (23 Oct 2026): the twelve dial topics as numbered picture tiles under the hero */

/* Kara's email address (23 Oct 2026): Contact page box and footer line */
.footer-email { margin-top: 0.6rem; }
.footer-email a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-email a:hover, .footer-email a:focus-visible { color: var(--rose-light); }

/* Ebooks page option C (24 Oct 2026): the four books compared in one table */

/* Contact page option A (24 Oct 2026): what happens after Send, under the form */

/* 24 Oct 2026 (graphics audit) */
/* The Enlarge button sat over the sperm picture's "Acrosome" label: bottom-left, clear of the labels */
/* Labelled diagrams: the button goes under the picture instead of over a label (25 Oct 2026) */

/* ---------- Motion pass (24 Oct 2026, graphics audit) ----------
   One rhythm for the whole site: 0.35 s hovers, 0.9 s reveals, all on --ease. Painted pictures wash in
   (fade, unblur, settle) once as they reach the screen; card groups follow each other by 70 ms.
   Nothing is hidden without JS, and a timer in main.js reveals anything the observer has missed. */
:root { --t-hover: 0.35s; --t-reveal: 0.9s; }
@media (prefers-reduced-motion: no-preference) {
  .js .paint-in { opacity: 0; filter: blur(6px) saturate(0.85); transform: scale(1.015); transition: opacity var(--t-reveal) var(--ease), filter 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--stagger, 0s); }
  .js .paint-in.is-painted { opacity: 1; filter: none; transform: none; }
  .js .rise-in { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: var(--stagger, 0s); }
  .js .rise-in.is-painted { opacity: 1; transform: none; }
  .lightbox[open] { animation: lightbox-in 0.4s var(--ease); }
  .lightbox[open]::backdrop { animation: lightbox-fade 0.4s var(--ease); }
}
@keyframes lightbox-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes lightbox-fade { from { opacity: 0; } }

/* Teaching diagrams under topic sections (25 Oct 2026, src/data/teach-figures.js): a painted course
   figure on its own warm paper, full text width, with room above and below. */

/* Painting pass (25 Oct 2026): the glossy "pearl" gradients behind small icons become painted washes
   (public/images/wash, cut from one watercolour sheet), the video tiles sit on painted backdrops
   (public/images/thumbs), paintings lose their white mounts, and the background loops come to rest. */ /* the painted marks carry their own wash */

.thumb { background: url('/images/thumbs/bg-teal.webp?v=70ad7e64') center / cover no-repeat, var(--teal); }
/* The dials' orbiting swimmers and eggs are painted sprites (views/partials/dial.ejs) */

/* Terms of sale (option A, 25 Oct 2026): the ten sections listed beside the paper on a computer, folded at the top on a phone */

/* Rounded corners, 8px everywhere (option A, 25 Oct 2026): the last square boxes and pictures.
   Book covers keep a nearly square spine and round the open edge. */
.male-review, .vguide__take, .shop-soon, .box__notes, .fg-page, .fg-page .fg-page__note, .shop-book__cover { border-radius: var(--panel-radius); }

/* Audit fixes (1 Nov 2026): a .btn link in the footer keeps its own colours (the course's "Get the free guide"
   was cream on cream), and form fields are 16px on phones so iPhones do not zoom in when you tap them */
.site-footer a.btn { color: var(--btn-fg); }
.site-footer a.btn:hover { text-decoration: none; }
@media (max-width: 760px) { input[type='search'], input[type='email'], input[type='text'], textarea, select { font-size: 16px; } }

/* The legal links along the bottom of the footer (1 Nov 2026) */
.footer-legal { flex-basis: 100%; order: 3; }
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; }
.footer-legal a { color: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.35); }
.footer-legal a:hover { color: var(--white); text-decoration-color: currentColor; }
@media (max-width: 560px) { .footer-legal a { display: inline-block; padding-block: 0.35rem; } }

/* ---------- Audit fixes, 6 Nov 2026 ---------- */
/* Manrope draws "(c)" as a copyright sign through a common ligature: "section 11(1)(c)" read as "11(1)©" */
body { font-variant-ligatures: no-common-ligatures; }
/* long addresses (the Information Regulator's email) wrap instead of running off a phone screen */
.doc-paper a, .prose a { overflow-wrap: anywhere; }
/* a mega menu panel never runs below the screen on a short laptop (the course's 25 modules at 1366x650) */
@media (min-width: 1181px) { .nav-mega__panel { max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; } }
/* the legal pages' "On this page" list scrolls on its own when it is taller than the screen (1024x768) */
/* small rose labels on soft tints reach AA contrast (4.18 to 4.44 before) */
.nav-new, .shop-kicker, .gpath__n { color: #8a4e49; }
/* phone tap targets of at least 40px: the footer legal row and the hero topic tabs */
@media (max-width: 560px) {
  .footer-legal a { padding-block: 0.6rem; }
}

/* Urgent help at a glance (7 Nov 2026, views/partials/urgent-help.ejs): painted icons beside the safety steps */

/* ==========================================================================
   The Fertility with Kara Package (10 Nov 2026): /package, /consultations, /supplements, the members-only page,
   /my-package and the homepage bands. 8px corners (site tokens), brand colours only.
   ========================================================================== */
.header-signin {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s; white-space: nowrap;
}
.header-signin:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.header-signin svg { width: 16px; height: 16px; }
@media (max-width: 1320px) {
  .header-signin { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-signin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 480px) { .header-signin { display: none; } }

.pkg-soon { color: var(--rose-ink-deep); }

/* The price card */

/* Heroes */
.pkg-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); background: linear-gradient(160deg, var(--sage-soft), var(--ivory) 60%, var(--rose-soft)); }
.pkg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.pkg-hero__copy { display: grid; gap: 1.1rem; }
.pkg-hero__copy h1 { font-size: var(--step-4); line-height: 1.12; text-wrap: balance; }
.pkg-hero__pic { margin: 0; }
.pkg-hero__pic img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }

/* /package top (11 Nov 2026, Peter's second pick): option B "Kara invites you", Kara beside the headline and the
   price card on dark teal, then option D "Look inside each part", picture tabs with one panel per part. */ /* keeps the light labels readable over the paler parts of the watercolour */
/* Look inside each part */ /* without JavaScript all four show */
/* The four ebook covers fanned out */ /* the "Please note" label sits on its own line above the text (it ran into it) */
@media (max-width: 1100px) {
  /* tablets: the price card spans the hero, the price on the left and what is in it on the right */
}
@media (max-width: 700px) { /* :is() matches the specificity of the tablet rule */
}

/* What's inside */

/* Who Kara is */

/* What a consultation covers, and how it is arranged */

/* The taster videos */

/* Closing band with the price card */

/* Consultations page */

/* Homepage: the consultation and supplements bands */
.supplements-notify { margin-top: 0.6rem; }
/* 11 Nov 2026: in the narrow hero column the two-column box squeezed the email field to "you@exan" and broke
   the heading over four lines. Heading above, form full width below. */
.notify.supplements-notify { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.supplements-notify .notify__text h2 { font-size: var(--step-2); }

/* My package (members' home, upgraded 10 Nov 2026): a hero with the package facts and three first steps, then one
   compact card per part with a small picture and one button, then the ebook downloads */

@media (max-width: 900px) {
  .pkg-hero__grid, .pkg-kara, .home-pkg__grid, .pkg-end, .consult-form-wrap, .home-consult__grid, .home-soon, .mine-hero { grid-template-columns: 1fr; }
}

/* The videos page for visitors (10 Nov 2026): every picture shows, only the free episodes play */

/* Homepage hero, option D (10 Nov 2026): Kara's story, credentials, the two ways in and the free Episode 1 */

/* Homepage "What you get", option A "look inside" (11 Nov 2026): a picture row each for the ebooks, the library and the course */
/* the books: two real sample pages behind the four covers */
/* the library: the twelve topic icons and three video posters */
/* the course: three days of the first week and three lesson paintings */
/* the consultation strip */

/* Homepage "Who is Kara?", option A (10 Nov 2026): her path, year by year, beside her photo */

/* Homepage consultations, option A (10 Nov 2026): what you can bring, beside the consultation painting */

/* Homepage topics, option B (10 Nov 2026): the 12 topics in three themes, Your Cycle marked free */

/* Homepage "Where are you right now?", option B (10 Nov 2026): four stage cards */
.stages { background: var(--ivory); }

/* Homepage "Inside the library", option A (10 Nov 2026): what every topic page gives you, beside the free Your Cycle page */

/* Homepage "Myths you will hear", option B (10 Nov 2026): six real myths from the topic pages */

/* Homepage videos, option A (10 Nov 2026): "up next" says which episodes are free and which come with the package */

/* Homepage Starter Guide band, option A (10 Nov 2026): the next step after the free guide */

/* Homepage closing band, option A (10 Nov 2026): four reassurances under the last price card */

/* ==========================================================================
   Links to pages in the package (10 Nov 2026 audit, WEB-04): a small lock after the link text for visitors,
   hidden for members by main.js (data-member-hide). Plus a line under the topic circle and the Learn hero.
   ========================================================================== */
.lock-tag { display: inline-flex; align-items: center; margin-left: 0.35em; vertical-align: -0.08em; color: var(--rose-ink); opacity: 0.85; }
.lock-tag svg { width: 0.78em; height: 0.78em; min-width: 11px; min-height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* 11 Nov 2026 design review: rose-ink on the teal footer was almost invisible; the light rose reads there. */
.site-footer .lock-tag, .pkg-invite .lock-tag { color: var(--rose-light); opacity: 1; }
/* ==========================================================================
   Full audit 10 Nov 2026: phones, tablets, accessibility (Full Audit 2026-11-10/04, 06)
   ========================================================================== */
/* DEV-01 / A11Y-01: the "free to watch" box sits in the dark video hero but has a light background */
/* DEV-02: the consultation buttons on the home page stay inside their panel on phones */
/* DEV-05: the language drop-down on /contact and /consultations looks like the other fields */
.field select {
  width: 100%; min-height: 3.1rem; padding: 0.8rem 1.1rem; border-radius: var(--btn-radius);
  border: 1.5px solid var(--line); background-color: var(--white); color: var(--charcoal); font: inherit; font-size: 1rem;
}
.field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(40 93 93 / 0.14); }
/* DEV-07: wide tables on the legal pages wrap instead of running off a phone screen */
/* A11Y-02: the small rose labels on the FAQ cards pass 4.5:1 */
/* A11Y-04: the keyboard focus ring on the topic circle shows on teal segments too */
.dial__seg:focus-visible path { stroke: var(--white); stroke-width: 3.5; }
.dial__seg:focus-visible { filter: drop-shadow(0 0 2px var(--teal-ink)); }
/* DEV-03: on a phone held sideways the sticky header doesn't eat the short screen */
@media (orientation: landscape) and (max-height: 500px) { .site-header { position: relative; } }
/* A11Y-05: printed pages include the folded source lists (current Chrome hides closed details content) */
@media print {
  details > *, details::details-content { display: block !important; content-visibility: visible !important; }
  details > summary { list-style: none; }
  .box, .box * { color: #1d1d1d !important; }
}
/* Turnstile (10 Nov 2026): the box only takes space when Cloudflare shows a check */
.form-turnstile { max-width: 100%; }
.form-turnstile:empty { display: none; }
.form-turnstile iframe { max-width: 100%; }
/* The cycle wheel with its words as real text (10 Nov 2026 audit, DEV-09). The four phase names sit where the painted
   words were, sized to the picture (cqw); the notes are a list under the wheel, readable on every screen. */

/* ---------- 11 Nov 2026 audit ---------- */
/* Header drop-down arrows were 18x22 px; WCAG 2.2 target size wants 24x24 */
.nav-dropdown > summary { min-width: 24px; min-height: 24px; }
/* Resources glossary: the flip button sits in its own dd so the list stays a valid definition list */
/* Videos hero on tablets: the stage is the full window there, so the tilted tiles' negative offsets ran off both edges */
/* Videos hero, one column (tablets): the sign-up card matches the full-width box above it instead of stopping at 520 px */