/* ==========================================================================
   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: #9c5b55; /* rose for text — passes AA on ivory */
  --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;
  /* Editorial buttons: near-square, the way a journal sets a rule.
     Set this back to 999px to return to the original pill buttons. */
  --btn-radius: 2px;
  /* Structural panels — cards, boxes, bands, figures. Raise this to 18px
     to bring back the original soft-cornered look in one move. */
  --panel-radius: 2px;
  /* Pictures — diagrams, picture bands, video thumbnails and the video player.
     Rounded even though panels are square. Set to 2px to square them again. */
  --picture-radius: 18px;
  --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; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
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); }
.eyebrow--center::after { 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--tight { padding-block: calc(var(--section) * 0.6); }
.section--sage { background: var(--sage-soft); }
.section--sand { background: var(--sand-soft); }
.section--white { background: var(--white); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 720px; }
.section-head--center { text-align: center; margin-inline: auto; justify-items: center; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack--tight { --stack: 0.4rem; }
.stack--loose { --stack: 1.75rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.center-block { display: flex; justify-content: center; }
.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.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; }
  .split--reverse > :first-child { order: 2; }
}
.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--outline-light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgb(250 247 241 / 0.5); }
.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; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--teal);
}
.link-arrow::after { content: '→'; transition: transform 0.25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 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 { display: none; }
  .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; }
.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__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.9; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ivory) 20%, rgb(250 247 241 / 0.75) 50%, rgb(250 247 241 / 0.1) 85%);
}
.hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.2fr 0.8fr; } }
.hero__copy { display: grid; gap: 1.5rem; justify-items: start; }
.hero h1 { font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5.3rem); line-height: 0.98; letter-spacing: -0.032em; }
.hero h1 em { display: block; font-style: italic; color: var(--rose-ink); }
/* Editorial display: each line is set deliberately, one word held back in teal. */
.hero h1 .ln { display: block; }
.hero h1 .thin { color: var(--teal); opacity: 0.72; }
.hero .lead { color: #465050; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step--1); color: var(--muted); padding-top: 0.25rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__trust span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgb(40 93 93 / 0.18); }

/* Library search in the homepage hero (left column, beside the dial) */
.hero-search {
  width: min(100%, 560px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem;
  padding: 0.45rem; background: var(--white); border-radius: var(--btn-radius);
  box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); transition: box-shadow 0.2s;
}
.hero-search:focus-within { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--teal), 0 0 0 4px rgb(40 93 93 / 0.14); }
.hero-search input { min-width: 0; border: 0; background: transparent; padding: 0.8rem 1rem; font-size: 1.05rem; color: var(--teal-ink); }
.hero-search input:focus { outline: none; }
.hero-popular { margin-top: -0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hero-popular span { margin-right: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hero-popular a {
  padding: 0.45rem 0.9rem; border-radius: 999px; background: rgb(255 253 252 / 0.85); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700; font-size: 0.85rem; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s, background-color 0.2s;
}
.hero-popular a:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--teal); }
@media (max-width: 560px) {
  .hero-search { grid-template-columns: minmax(0, 1fr); }
  .hero-popular span { flex-basis: 100%; margin: 0 0 0.2rem; }
}

/* Portrait arch with floating "new language" chips */
.portrait { position: relative; justify-self: center; width: min(100%, 440px); }
.portrait__frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-l) var(--radius-l);
  overflow: hidden; background: linear-gradient(160deg, var(--sage-soft), var(--sand));
  box-shadow: var(--shadow-l);
  outline: 1px solid rgb(40 93 93 / 0.12); outline-offset: 12px;
}
.portrait__frame img.portrait__photo { width: 100%; height: 100%; object-fit: cover; }
.portrait__placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.portrait__placeholder img { width: 62%; filter: drop-shadow(0 12px 22px rgb(23 59 59 / 0.15)); }
.portrait__placeholder p { font-family: var(--font-serif); font-style: italic; color: var(--teal); font-size: var(--step-1); }
.chip-float {
  position: absolute; z-index: 2;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow);
  font-weight: 700; font-size: 0.85rem; color: var(--teal-ink); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) { .chip-float { animation: float 7s ease-in-out infinite; } }
.chip-float::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.5rem; background: var(--rose); vertical-align: middle; }
.chip-float:nth-of-type(1) { top: 12%; left: -8%; }
.chip-float:nth-of-type(2) { top: 36%; right: -10%; animation-delay: -2s; }
.chip-float:nth-of-type(3) { bottom: 22%; left: -12%; animation-delay: -4s; }
.chip-float:nth-of-type(4) { bottom: 6%; right: -4%; animation-delay: -5.5s; }
.chip-float:nth-of-type(even)::before { background: var(--teal); }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 560px) {
  .chip-float { font-size: 0.75rem; padding: 0.45rem 0.8rem; }
  .chip-float:nth-of-type(1), .chip-float:nth-of-type(3) { left: -2%; }
  .chip-float:nth-of-type(2), .chip-float:nth-of-type(4) { right: -2%; }
}

/* ---------- 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. */
.hero--dial .hero__inner { align-items: center; }
@media (min-width: 1060px) { .hero--dial .hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } }

.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__seg--band:hover path, .dial__seg--band.is-active path { transform: scale(1.018); }
.dial .dial__band-label { font-style: normal; font-size: 7.6px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--teal-ink); }

.dial__core {
  position: absolute; inset: 27.5%; border-radius: 50%; background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.16);
  display: grid; place-items: center; align-content: center; gap: 0.55rem;
  text-align: center; padding: 1.5rem;
}
.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. */
.dial__orbit { position: absolute; inset: -4%; pointer-events: none; animation: dial-orbit 80s linear infinite; }
.dial__orbit--outer { inset: -8.5%; animation-duration: 110s; animation-direction: reverse; }
.dial__orbit span { position: absolute; inset: 0; }
.dial__orbit span::before {
  content: ''; position: absolute; top: 0; left: 50%; width: var(--cell, 15px); height: var(--cell, 15px);
  margin: calc(var(--cell, 15px) / -2) 0 0 calc(var(--cell, 15px) / -2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose) 75%);
  box-shadow: 0 0 0 4px rgb(216 170 165 / 0.18); animation: dial-cell 6s ease-in-out infinite;
}
.dial__orbit span:nth-child(1) { transform: rotate(8deg); }
.dial__orbit span:nth-child(2) { transform: rotate(58deg); --cell: 11px; }
.dial__orbit span:nth-child(3) { transform: rotate(112deg); --cell: 18px; }
.dial__orbit span:nth-child(4) { transform: rotate(166deg); --cell: 10px; }
.dial__orbit span:nth-child(5) { transform: rotate(214deg); --cell: 14px; }
.dial__orbit span:nth-child(6) { transform: rotate(262deg); --cell: 12px; }
.dial__orbit span:nth-child(7) { transform: rotate(318deg); --cell: 16px; }
.dial__orbit span:nth-child(3n + 2)::before { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage) 75%); box-shadow: 0 0 0 4px rgb(202 216 208 / 0.3); animation-delay: -2s; }
.dial__orbit span:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, var(--white), #e4d0b4 75%); box-shadow: 0 0 0 4px rgb(228 208 180 / 0.3); animation-delay: -4s; }
.dial__orbit--outer span:nth-child(1) { transform: rotate(34deg); --cell: 8px; }
.dial__orbit--outer span:nth-child(2) { transform: rotate(104deg); --cell: 12px; }
.dial__orbit--outer span:nth-child(3) { transform: rotate(178deg); --cell: 8px; }
.dial__orbit--outer span:nth-child(4) { transform: rotate(240deg); --cell: 11px; }
.dial__orbit--outer span:nth-child(5) { transform: rotate(296deg); --cell: 7px; }
.dial__orbit--outer span::before { opacity: 0.9; }
.dial__orbit--outer span:nth-child(odd)::before { background: radial-gradient(circle at 35% 30%, var(--white), var(--teal) 80%); box-shadow: 0 0 0 3px rgb(40 93 93 / 0.12); }
@keyframes dial-orbit { to { transform: rotate(360deg); } }
@keyframes dial-cell { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .dial__orbit, .dial__orbit span::before { animation: none; } }
@media (max-width: 620px) {
  .dial__orbit { inset: -3%; }
  .dial__orbit--outer { inset: -6%; }
}
.dial__caption { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.dial__caption::before, .dial__caption::after { content: ''; width: 2.1rem; height: 1px; background: var(--rose); }

/* The core has to shrink with the dial or the label spills out of the ring. */
@media (max-width: 620px) {
  .dial__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.56rem; letter-spacing: 0.18em; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.58rem; letter-spacing: 0.12em; }
  .dial text { font-size: 14px; }
  .dial .dial__band-label { font-size: 9.5px; letter-spacing: 0.08em; }
}

/* ---------- Editorial index (the library, set as a two-column contents page) ---------- */
.index {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-top: 1.5px solid var(--teal-ink);
}
.index__row {
  display: grid; grid-template-columns: 2.2rem 3.4rem minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background 0.4s var(--ease);
}
.index__row:hover { background: linear-gradient(90deg, rgb(228 236 231 / 0.55), transparent 78%); color: inherit; }
.index__n { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: 0.95rem; }
.index__thumb {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft));
  transition: transform 0.45s var(--ease);
}
.index__row:nth-child(3n + 2) .index__thumb { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.index__row:nth-child(3n) .index__thumb { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.index__row:hover .index__thumb { transform: scale(1.08) rotate(-3deg); }
.index__thumb img { width: 78%; height: 78%; object-fit: contain; }
.index__body { display: grid; gap: 0.2rem; min-width: 0; }
.index__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem); color: var(--teal-ink); letter-spacing: -0.015em; transition: transform 0.4s var(--ease); }
.index__row:hover .index__title { transform: translateX(5px); }
.index__summary { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.index__all { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.6rem; }
@media (max-width: 820px) {
  .index { grid-template-columns: 1fr; }
  .index__row { grid-template-columns: 1.8rem 3rem minmax(0, 1fr); gap: 0.85rem; }
  .index__thumb { width: 3rem; height: 3rem; }
}

/* ---------- Contrast table ("You won't read this here") ---------- */
.contrast {
  --no-ink: #7a4f4a; /* darker than --rose-ink so small text on the tinted column passes AA */
  --no-bg: #fbf4f2;
  border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; background: var(--white);
}
.contrast__head, .contrast__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.contrast__head span { padding: 1rem 1.6rem; font: 800 0.74rem var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; }
.contrast__head span:first-child { background: var(--rose-soft); color: var(--no-ink); }
.contrast__head span:last-child { background: var(--sage-soft); color: var(--teal); }
.contrast__rows { list-style: none; margin: 0; padding: 0; }
.contrast__row > p { margin: 0; padding: 1.25rem 1.6rem; border-top: 1px solid var(--line); display: flex; gap: 0.9rem; align-items: flex-start; }
.contrast__no { background: var(--no-bg); font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; line-height: 1.45; color: var(--no-ink); }
.contrast__no s { text-decoration-color: rgb(122 79 74 / 0.5); text-decoration-thickness: 1px; }
.contrast__yes { color: var(--teal-ink); line-height: 1.55; }
.contrast__mark {
  flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.78rem var(--font-sans); font-style: normal; color: var(--white);
}
.contrast__no .contrast__mark { background: var(--no-ink); }
.contrast__yes .contrast__mark { background: var(--teal); }
/* Labels are for screen readers on wide screens (the column headings say it visually); they show on phones. */
.contrast__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contrast__values {
  list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem;
  font: 800 0.74rem var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal);
}
.contrast__values li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.6rem; border-radius: 50%; background: var(--rose); vertical-align: 0.15em; }
@media (max-width: 720px) {
  .contrast__head { display: none; }
  .contrast__row { grid-template-columns: 1fr; }
  .contrast__row + .contrast__row { border-top: 1px solid var(--line); }
  .contrast__row > p { padding: 1rem 1.15rem; border-top: 0; }
  .contrast__label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: block; margin-bottom: 0.25rem; font: 800 0.66rem var(--font-sans); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .contrast__no .contrast__label { color: var(--no-ink); }
  .contrast__yes .contrast__label { color: var(--teal); }
}

/* ---------- Homepage "Inside a topic": the illustration beside a numbered contents of a topic page ---------- */
.inside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: center; }
.inside h2 { margin-top: 1rem; }
.inside__list { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1.5px solid var(--teal-ink); counter-reset: inside; }
.inside__list li { counter-increment: inside; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 0.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.inside__list li::before { content: counter(inside, decimal-leading-zero); grid-row: span 2; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--rose-ink); }
.inside__list b { font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; color: var(--teal-ink); }
.inside__list span { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 860px) { .inside { grid-template-columns: minmax(0, 1fr); } }

.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 ---------- */
.language__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: start; }
.language__statement {
  margin-top: 1.5rem; font-family: var(--font-serif); font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--teal-ink); text-wrap: balance;
}
.language__statement em { font-style: italic; color: var(--rose-ink); }
.language .lead { margin-top: 1.3rem; }
.translate__head, .translate__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 1.5rem; }
.translate__head {
  padding: 0.85rem 0; border-top: 1.5px solid var(--teal-ink); border-bottom: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.translate { list-style: none; margin: 0; padding: 0; }
.translate__row { align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease); }
.translate__row:hover { background: var(--ivory); }
.translate__term { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--rose-ink); }
.translate__row:hover .translate__term { text-decoration: underline; text-underline-offset: 3px; }
.translate__def { color: var(--teal-ink); }
.translate__more { display: inline-block; margin-top: 1.2rem; font-weight: 700; font-size: 0.9rem; color: var(--teal); text-decoration: none; }
.translate__more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .language__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .translate__head { display: none; }
  .translate { border-top: 1.5px solid var(--teal-ink); }
  .translate__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* ---------- Divider ---------- */
.divider { display: block; width: min(560px, 80%); margin: 0 auto; opacity: 0.9; pointer-events: none; }
/* 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. */
.divider-band { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.divider-band--ivory { background: var(--ivory); }
.divider-band--white { background: var(--white); }
.divider-band--sage  { background: var(--sage-soft); }
.divider-band--sand  { background: var(--sand-soft); }

/* ---------- 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)); }
.card .link-arrow { margin-top: auto; padding-top: 0.5rem; }
.card__icon {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft));
  box-shadow: inset 0 0 0 1px rgb(216 170 165 / 0.35);
}
.card__icon img { width: 76%; height: 76%; object-fit: contain; transition: transform 0.4s var(--ease); }
a.card:hover .card__icon img { transform: scale(1.08) rotate(-3deg); }
.card:nth-child(3n + 2) .card__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.12); }
.card:nth-child(3n) .card__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); box-shadow: inset 0 0 0 1px rgb(200 170 140 / 0.35); }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.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 */
.pillar { display: grid; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rose); }
.pillar__num { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: var(--step-1); }
.pillar h3 { font-size: var(--step-2); }
.pillar p { color: var(--muted); }

/* ---------- Video thumbnails (brand thumbnail system: 2–4 words, rotating bg) ---------- */
.video-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; }
.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); }
.thumb--ivory { background: var(--ivory); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.thumb--sage { background: var(--sage); color: var(--teal-ink); }
.thumb__title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 1.9rem); text-transform: uppercase; z-index: 1;
}
.thumb__title small { display: block; margin-top: 0.6rem; font-size: 0.62rem; letter-spacing: 0.2em; font-weight: 700; opacity: 0.8; }
.thumb__art { position: relative; height: 100%; display: grid; place-items: center; }
.thumb__art::before {
  content: ''; position: absolute; width: 118%; aspect-ratio: 1; border-radius: 50%;
  background: rgb(250 247 241 / 0.14); right: -30%;
}
.thumb--ivory .thumb__art::before { background: var(--rose-soft); }
.thumb--sage .thumb__art::before { background: rgb(250 247 241 / 0.55); }
.thumb__art img { position: relative; width: 82%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.15)); }
.thumb__badge {
  position: absolute; left: clamp(1rem, 0.6rem + 1.4vw, 1.6rem); bottom: 0.9rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px; background: rgb(250 247 241 / 0.18);
}
.thumb--ivory .thumb__badge, .thumb--sage .thumb__badge { background: rgb(40 93 93 / 0.1); }
.thumb__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgb(250 247 241 / 0.94); display: grid; place-items: center; box-shadow: var(--shadow);
}
.thumb__play::before { content: ''; border-left: 18px solid var(--teal); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.video-card h3 { font-size: var(--step-1); }
.video-card p { color: var(--muted); font-size: 0.95rem; }
.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; }
.player .thumb__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.player .thumb__title small { font-size: 0.72rem; }
.player .thumb__badge { bottom: clamp(0.9rem, 0.5rem + 1.2vw, 1.3rem); }
.player__play {
  position: absolute; right: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem); bottom: clamp(0.8rem, 0.4rem + 1.2vw, 1.2rem);
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(250 247 241 / 0.95); box-shadow: var(--shadow); transition: transform 0.35s var(--ease);
}
.player__play::before { content: ''; border-left: 17px solid var(--teal); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.player:hover .player__play { transform: scale(1.06); }
.watch__title { font-size: var(--step-2); margin-top: 1.25rem; }
.watch__hook { margin-top: 0.5rem; max-width: 60ch; font-family: var(--font-serif); font-style: italic; color: var(--muted); }
.watch__read { margin-top: 0.8rem; }
.watch__read a { font-weight: 700; font-size: 0.92rem; color: var(--teal); text-decoration: none; }
.watch__read a:hover { text-decoration: underline; text-underline-offset: 3px; }

.upnext { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; }
.upnext__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.upnext__head h3 { font-family: var(--font-sans); font-weight: 800; font-size: 0.74rem; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }
.upnext__head span { font-size: 0.82rem; color: var(--muted); }
.upnext__list { list-style: none; margin: 0; padding: 0; }
.upnext__list li + li { border-top: 1px solid var(--line); }
.upnext__item {
  display: grid; grid-template-columns: 1.7rem 2.75rem minmax(0, 1fr); gap: 0.85rem; align-items: center;
  padding: 0.8rem 1.25rem; text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease);
}
.upnext__item:hover { background: var(--ivory); }
.upnext__n { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); }
.upnext__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.upnext__list li:nth-child(3n + 2) .upnext__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.upnext__list li:nth-child(3n) .upnext__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.upnext__icon img { width: 78%; height: 78%; object-fit: contain; }
.upnext__body { display: grid; gap: 0.15rem; }
.upnext__title { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.3; color: var(--teal-ink); }
.upnext__item:hover .upnext__title { text-decoration: underline; text-underline-offset: 3px; }
.upnext__meta { font-size: 0.78rem; color: var(--muted); }
.upnext__more { display: block; padding: 0.95rem 1.25rem; border-top: 1px solid var(--line); font-weight: 700; font-size: 0.9rem; color: var(--teal); text-decoration: none; }
.upnext__more:hover { background: var(--ivory); }

.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); }
  .player__play { width: 48px; height: 48px; }
  .player__play::before { border-left-width: 14px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 4px; }
  .upnext__item { padding-inline: 1rem; }
}

/* ---------- Book covers (CSS mockups of the ebook & starter guide concepts) ---------- */
.book { perspective: 1400px; justify-self: center; width: min(100%, 330px); }
.book__cover {
  position: relative; aspect-ratio: 3 / 4.2; border-radius: 4px 14px 14px 4px;
  background: var(--ivory); color: var(--teal-ink);
  padding: 13% 11% 10%;
  display: flex; flex-direction: column; overflow: hidden;
  transform: rotateY(-16deg) rotateX(3deg);
  box-shadow: -1px 0 0 #d9d0c3, -12px 0 0 -2px #efe7db, -13px 1px 0 -2px #d9d0c3, 30px 40px 60px -24px rgb(23 59 59 / 0.45);
  transition: transform 0.6s var(--ease);
}
.book:hover .book__cover { transform: rotateY(-6deg) rotateX(1deg); }
.book__cover::before { /* spine highlight */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 14px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.3) 45%, transparent);
}
.book__cover::after { /* soft follicular circle behind the title */
  content: ''; position: absolute; width: 95%; aspect-ratio: 1; right: -32%; top: 20%; border-radius: 50%;
  background: radial-gradient(circle, var(--rose-soft) 0 18%, transparent 19% 30%, rgb(202 216 208 / 0.6) 31% 33%, transparent 34% 52%, rgb(216 170 165 / 0.35) 53% 54%, transparent 55%);
}
.book__kicker { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); position: relative; z-index: 1; }
.book__title {
  position: relative; z-index: 1; margin-top: auto;
  font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; line-height: 1;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); letter-spacing: 0.02em;
}
.book__line { display: block; }
.book__with { position: relative; z-index: 1; font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: 1.35rem; margin-top: 0.35rem; }
.book__rule { position: relative; z-index: 1; height: 1px; background: var(--rose); margin-block: 1.1rem 0.8rem; width: 60%; }
.book__tag { position: relative; z-index: 1; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.book__mark { position: absolute; z-index: 1; right: 10%; top: 9%; width: 20%; opacity: 0.95; }
.book--small { width: min(100%, 260px); }
.book--small .book__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); }
.book--dark .book__cover { background: var(--teal); color: var(--ivory); box-shadow: -1px 0 0 #143636, -12px 0 0 -2px #214f4f, -13px 1px 0 -2px #143636, 30px 40px 60px -24px rgb(0 0 0 / 0.55); }
.book--dark .book__kicker { color: var(--sage); }
.book--dark .book__with { color: var(--rose); }
.book--dark .book__tag { color: rgb(250 247 241 / 0.7); }
.book--dark .book__cover::after { opacity: 0.25; }

/* ---------- The Fertility Guide page: dark top with the covers on a shelf, then "Inside Book One" ---------- */
.byline { margin: -0.4rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); color: var(--rose-ink); }
.guide-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4vw, 5.5rem); background: var(--teal); color: var(--ivory); }
.guide-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.guide-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
.guide-hero__copy { display: grid; gap: 1.1rem; justify-items: start; }
.guide-hero .breadcrumb, .guide-hero .breadcrumb a { color: rgb(250 247 241 / 0.72); }
.guide-hero .eyebrow { color: var(--sage); }
.guide-hero h1 { color: var(--ivory); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.guide-hero h1 em { display: block; color: var(--rose); }
.guide-hero .byline { margin: 0; color: var(--rose-light); }
.guide-hero .lead { color: rgb(250 247 241 / 0.84); max-width: 50ch; }
.guide-hero__form { width: min(100%, 540px); margin-top: 0.4rem; }
.guide-hero__cta { margin-bottom: 0.8rem; color: rgb(250 247 241 / 0.85); font-size: 0.95rem; }
.guide-hero__cta strong { color: var(--ivory); }
.guide-hero .btn { --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); }
.guide-hero .form-note a { color: var(--ivory); }
.guide-hero :focus-visible { outline-color: var(--ivory); }

/* The covers stand on a shelf; two real pages from Book One fan out behind them. Sizes are relative, so it scales. */
.guide-stage__art { position: relative; aspect-ratio: 6 / 5; }
.guide-stage__page { position: absolute; top: 1%; width: 36%; height: auto; background: var(--white); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.55); }
.guide-stage__page--1 { left: 6%; transform: rotate(-9deg); }
.guide-stage__page--2 { right: 4%; top: 0; transform: rotate(8deg); }
.guide-stage__books { position: absolute; left: 4%; right: 4%; bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.guide-stage__book {
  width: 100%; height: auto; border-radius: 2px 8px 8px 2px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 24px 34px 50px -22px rgb(0 0 0 / 0.55);
}
.guide-stage__book:nth-child(1) { transform: rotate(-4deg) translateX(14%); z-index: 1; }
.guide-stage__book:nth-child(2) { transform: translateY(-5%) scale(1.06); z-index: 3; }
.guide-stage__book:nth-child(3) { transform: rotate(4deg) translateX(-14%); z-index: 2; }
.guide-stage__shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 3px; background: linear-gradient(#e8dccb, #cdbca5); box-shadow: 0 18px 30px -10px rgb(0 0 0 / 0.5); }
.guide-stage__labels { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: 0.8rem; color: rgb(250 247 241 / 0.85); }
.guide-stage__labels a { color: inherit; text-decoration: none; }
.guide-stage__labels b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.02rem; color: var(--ivory); }
.guide-stage__labels a:hover b { text-decoration: underline; text-underline-offset: 3px; }

.inside-book { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 1rem + 4vw, 3.5rem); align-items: center; }
.inside-book h2 { margin-top: 0.8rem; }
.inside-book h2 .tag { vertical-align: middle; margin-left: 0.4rem; }
.inside-book .ebook__sub { margin-top: 0.5rem; font-size: var(--step-1); color: var(--rose-ink); }
.inside-book__list { list-style: none; margin: 1.3rem 0 0; padding: 0; counter-reset: ib; border-top: 1px solid var(--line); }
.inside-book__list li { counter-increment: ib; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-serif); color: var(--teal-ink); }
.inside-book__list li::before { content: counter(ib, decimal-leading-zero); padding-top: 0.2rem; font: 700 0.72rem var(--font-sans); color: var(--rose-ink); }
.inside-book__more { margin-top: 0.7rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.inside-book__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.inside-book__strip figure { margin: 0; }
.inside-book__strip img { display: block; width: 100%; height: auto; background: var(--white); box-shadow: 0 24px 50px -26px rgb(23 59 59 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.04); }
.inside-book__strip figcaption { margin-top: 0.55rem; text-align: center; font-size: 0.78rem; color: var(--muted); }
.inside-book__next { margin-top: clamp(2rem, 1.5rem + 2vw, 2.8rem); padding-top: 1.6rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.inside-book__nexthead { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.inside-book__nextbook { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.1rem; align-items: center; text-decoration: none; color: var(--muted); font-size: 0.85rem; }
.inside-book__nextbook img { width: 64px; height: auto; border-radius: 1px 4px 4px 1px; box-shadow: -1px 0 0 #d9d0c3, -5px 0 0 -1px #efe7db, 12px 18px 28px -16px rgb(23 59 59 / 0.5); }
.inside-book__nextbook b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; color: var(--teal-ink); }
.inside-book__nextbook:hover b { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .guide-hero__grid, .inside-book { grid-template-columns: minmax(0, 1fr); }
  .guide-stage { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 560px) {
  .guide-stage__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.9rem; font-size: 0.75rem; }
  .guide-stage__labels b { font-size: 0.95rem; }
  .inside-book__next { grid-template-columns: minmax(0, 1fr); }
}

/* 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--compact { max-width: 520px; gap: clamp(0.6rem, 2vw, 1.25rem); }
.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: 2px 6px 6px 2px;
  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); }
.covers__caption { text-align: center; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.25; color: var(--teal-ink); }
.covers__num { display: block; margin-bottom: 0.2rem; font: 700 0.68rem var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
@media (max-width: 620px) {
  .covers__caption { font-size: 0.85rem; }
  .covers__num { font-size: 0.56rem; letter-spacing: 0.12em; }
}

.ebooks { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; }
.ebook {
  display: grid; gap: 0.7rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line);
}
.ebook__cover { margin: 0 0 0.9rem; }
.ebook__cover img {
  display: block; width: min(100%, 240px); height: auto; margin-inline: auto; border-radius: 2px 6px 6px 2px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 18px 26px 40px -22px rgb(23 59 59 / 0.45);
}
.ebook__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; }
.ebook__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.ebook h3 { font-size: var(--step-2); margin: 0; }
.ebook__sub { margin: 0; font-family: var(--font-serif); font-style: italic; color: var(--teal); }
.ebook > p:not([class]) { margin: 0; color: var(--muted); }
.ebook .faq { margin-top: 0.4rem; }
.ebook .faq summary { font-size: var(--step-0); padding: 0.9rem 1.1rem; }
.ebook .faq details > div { padding: 0 1.1rem 1.1rem; }
.ebook__chapters { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; font-size: var(--step--1); }
.tag--sand { background: var(--sand-soft); color: var(--muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.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); }
.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; }
.form-status--ok { background: var(--sage-soft); color: var(--teal-ink); }
.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") ---------- */
.guide-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "peek head" "peek body";
  column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem); border-radius: var(--picture-radius);
  background: linear-gradient(135deg, var(--sand-soft), #f6ece6);
}
.guide-band__head { grid-area: head; align-self: end; }
.guide-band__body { grid-area: body; align-self: start; }
.guide-band__body .ticks { margin: 1.5rem 0 1.8rem; }

/* The book overlaps the left edge of the contents page; the page's text starts where the book ends. */
.guide-peek {
  --book-w: clamp(200px, 19vw, 270px); --overlap: calc(var(--book-w) * 0.44);
  grid-area: peek; display: grid; align-items: start;
  grid-template-columns: calc(var(--book-w) - var(--overlap)) var(--overlap) minmax(0, 1fr);
  grid-template-rows: 2.75rem auto;
}
.guide-peek .book { grid-column: 1 / 3; grid-row: 1 / 3; z-index: 1; width: var(--book-w); justify-self: start; margin-top: 0.5rem; }
.guide-peek__page {
  grid-column: 2 / 4; grid-row: 2;
  padding: 1.5rem 1.5rem 1.3rem calc(var(--overlap) + 1.4rem);
  background: var(--white); border-radius: 3px; box-shadow: 0 30px 60px -28px rgb(23 59 59 / 0.45);
  transform: rotate(3.5deg);
}
.guide-peek__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.guide-peek__page ol { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.guide-peek__page li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.3rem; font-family: var(--font-serif); font-size: 0.84rem; line-height: 1.3; color: var(--teal-ink); }
.guide-peek__page li span { font-style: italic; color: var(--rose-ink); }
.guide-peek__more { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
/* The cover here is sized by --book-w rather than the viewport, so its type scales with it too. */
.guide-peek .book__kicker { font-size: calc(var(--book-w) * 0.031); letter-spacing: 0.16em; }
.guide-peek .book__mark { width: 16%; top: 6%; right: 7%; }
.guide-peek .book__title { font-size: calc(var(--book-w) * 0.145); }
.guide-peek .book__with { font-size: calc(var(--book-w) * 0.075); }
.guide-peek .book__rule { margin-block: calc(var(--book-w) * 0.055) calc(var(--book-w) * 0.04); }
.guide-peek .book__tag { font-size: calc(var(--book-w) * 0.037); }

/* 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);
}

@media (max-width: 960px) {
  .guide-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "peek" "body"; row-gap: 2.25rem; }
  .guide-peek { --book-w: 230px; width: 100%; max-width: 560px; justify-self: center; }
  .guide-band__body .ticks { margin-top: 0; }
}
/* Phones: the cover sits centred on top of the contents page instead of beside it. */
@media (max-width: 560px) {
  .guide-peek { --book-w: 170px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; }
  .guide-peek .book { grid-column: 1; grid-row: 1; justify-self: center; margin-top: 0; }
  .guide-peek__page {
    grid-column: 1; grid-row: 1; width: 100%;
    margin-top: calc(var(--book-w) * 0.9); padding: calc(var(--book-w) * 0.5 + 1rem) 1.3rem 1.2rem;
    transform: rotate(1.5deg);
  }
}

/* ---------- Homepage "Meet Kara": arch portrait + statement ---------- */
.kara-feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
.kara-feature .portrait { width: min(100%, 380px); }
.kara-feature__statement { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.28; color: var(--teal-ink); text-wrap: balance; }
.kara-feature__statement em { color: var(--rose-ink); }
.kara-feature__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; padding-block: 1.1rem; border-block: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.kara-feature__who b { font-size: 1rem; font-weight: 600; color: var(--teal-ink); }
.kara-feature__sep { color: var(--rose); font-size: 1.3em; line-height: 1; }
.kara-feature__body { max-width: 58ch; color: var(--muted); }
@media (max-width: 820px) {
  .kara-feature { grid-template-columns: minmax(0, 1fr); }
  .kara-feature .portrait { width: min(100%, 280px); }
}
@media (max-width: 560px) {
  /* name and title on their own lines rather than wrapping after the dot */
  .kara-feature__who { flex-direction: column; align-items: flex-start; }
  .kara-feature__sep { display: none; }
}

/* ---------- Homepage ebook series: "Inside the series" contents page ---------- */
.series {
  --series-pad: clamp(1.25rem, 0.5rem + 3.6vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titles" "intro" "hint" "books" "cta";
  padding: var(--series-pad);
  background: var(--white);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}

/* ---- Heading block ---- */
.series-titles { grid-area: titles; }
.series-titles h2 {
  margin-top: 1.1rem;
  font-size: clamp(2.3rem, 0.9rem + 3.4vw, 3.7rem);
  line-height: 1.02; letter-spacing: -0.028em;
}
.series-titles h2 em { display: block; margin-top: 0.12em; }
.series-intro { grid-area: intro; margin-top: 1.1rem; }
.series-intro .lead { max-width: 44ch; }
.series-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }

/* ---- The three books ---- */
/* position: relative so the visually-hidden spans inside are clipped by the swipe row, not the page */
.series-scroll { grid-area: books; min-width: 0; position: relative; }
.series-hint { grid-area: hint; display: none; }
.series-books {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.series-book { min-width: 0; }

.series-bookhead { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1.15rem; align-items: start; }
.series-cover {
  display: block; width: 100%; height: auto; border-radius: 1px 4px 4px 1px;
  box-shadow: -1px 0 0 #d9d0c3, -5px 0 0 -1px #efe7db, -6px 1px 0 -1px #d9d0c3, 12px 18px 28px -16px rgb(23 59 59 / 0.5);
}
/* heading first in the markup (so it is announced as "Book One: The Basics"), kicker shown above it */
.series-meta { display: flex; flex-direction: column; min-width: 0; }
.series-kicker { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; margin-bottom: 0.55rem; }
.series-name { font-size: 1.5rem; line-height: 1.1; }
.series-num { font: 700 0.66rem/1.2 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose-ink); }
.series-sub { margin-top: 0.45rem; font-family: var(--font-serif); font-style: italic; font-size: 0.93rem; line-height: 1.38; color: var(--teal); }
.series-status {
  display: inline-block; padding: 0.14rem 0.6rem; border-radius: 999px;
  background: var(--sage-soft); color: var(--teal-ink);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap;
}
.series-status--planned { background: var(--sand-soft); color: var(--muted); }

.series-label {
  display: flex; align-items: center; gap: 0.75rem; margin: 1.6rem 0 1rem;
  font: 800 0.64rem/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
}
.series-label::after { content: ''; flex: 1 1 0; min-width: 0.75rem; height: 1px; background: var(--line); }

.series-list { list-style: none; margin: 0; padding: 0; counter-reset: series; display: grid; gap: 0.62rem; align-content: start; }
.series-list li {
  counter-increment: series;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline;
  font-family: var(--font-serif); font-size: 0.98rem; line-height: 1.38; color: var(--teal-ink); text-wrap: pretty;
}
.series-list li::before {
  content: counter(series, decimal-leading-zero);
  font: 700 0.7rem var(--font-sans); letter-spacing: 0.06em; color: var(--rose-ink);
}
/* Book Three: planned topics are listed unnumbered, and set a touch quieter */
.series-list--planned li { color: var(--muted); font-style: italic; }
.series-list--planned li::before { content: ''; align-self: start; width: 0.85rem; height: 1px; margin-top: 0.72em; background: var(--rose); }

.series-more { margin-top: 1rem; padding-left: 2rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }

/* ---- Desktop: heading left, intro + button right, then three ruled columns ---- */
@media (min-width: 1000px) {
  .series {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "titles intro" "titles cta" "books books";
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .series-titles { align-self: end; }
  .series-intro { margin-top: 0; align-self: end; }
  .series-cta { margin-top: 1.6rem; }
  .series { --series-pad: clamp(2.5rem, 1rem + 2.8vw, 3.5rem); }
  .series-scroll { margin-top: clamp(2rem, 1rem + 1.6vw, 2.6rem); border-top: 1px solid var(--line); }
  /* subgrid keeps the heads, labels, lists and "more" lines level across the three columns */
  .series-books { grid-template-rows: repeat(4, auto); }
  .series-book { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 2.1rem clamp(1.25rem, 2.3vw, 2.25rem) 0.1rem; }
  .series-book:first-child { padding-left: 0; }
  .series-book:last-child { padding-right: 0; }
  .series-book + .series-book { border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .series-book { padding-inline: 1.15rem; }
  .series-bookhead { grid-template-columns: 70px minmax(0, 1fr); gap: 0.95rem; }
  .series-name { font-size: 1.38rem; }
  .series-num { letter-spacing: 0.18em; }
  .series-label { letter-spacing: 0.12em; }
  .series-label::after { display: none; }
}

/* ---- Tablet and phone: the books become a swipeable row of contents cards ---- */
@media (max-width: 999.98px) {
  .series-scroll {
    /* bleed to the panel's inner edge (1px in, so the panel's hairline stays visible) */
    margin: 0 calc(1px - var(--series-pad));
    padding: 0 calc(var(--series-pad) - 1px) 0.9rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--series-pad);
    scrollbar-width: thin; scrollbar-color: var(--sage) transparent;
    container-type: inline-size;
  }
  .series-scroll:focus-visible { outline-offset: -3px; }
  .series-hint {
    display: block; margin: 1.9rem 0 0.9rem;
    font: 700 0.66rem/1.4 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  }
  .series-hint::after { content: '→'; margin-left: 0.6rem; font-size: 0.9rem; letter-spacing: 0; color: var(--rose-ink); }
  /* max-content width so the row's end padding is kept after the last card; cards sized from the row's width */
  .series-books {
    width: max-content; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(calc(100cqw - 2.6rem), 360px); gap: 0.85rem;
  }
  .series-book {
    scroll-snap-align: start;
    padding: 1.3rem 1.2rem 1.35rem;
    background: var(--ivory); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line);
  }
  .series-bookhead { grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; }
  .series-name { font-size: 1.45rem; }
  .series-label { margin-top: 1.4rem; letter-spacing: 0.12em; }
  .series-label::after { display: none; }
  .series-list li { font-size: 0.95rem; }
  .series-cta { margin-top: 1.5rem; }
}
@media (max-width: 480px) {
  .series-titles h2 em { margin-top: 0.08em; }
  .series-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 0.75rem; }
  .series-cta .btn { padding-inline: 1.1rem; }
}
@media (max-width: 359.98px) {
  /* very narrow phones: cover above the title rather than squeezing both side by side */
  .series-bookhead { grid-template-columns: minmax(0, 1fr); }
  .series-cover { width: 96px; }
}

/* ---------- CTA bands ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--picture-radius); padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  background: linear-gradient(135deg, var(--sage-soft), var(--sand-soft));
}
.cta-band__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.cta-band--dark { background: var(--teal); color: var(--ivory); }
.cta-band--dark h2, .cta-band--dark h3 { color: var(--ivory); }
.cta-band--dark .lead, .cta-band--dark p { color: rgb(250 247 241 / 0.8); }
.cta-band--dark .eyebrow { color: var(--sage); }
.cta-band--dark .cta-band__bg { opacity: 0.55; }
.cta-band--dark :focus-visible { outline-color: var(--ivory); } /* rose-ink on teal is too faint for a focus ring */
.cta-band:not(.cta-band--dark)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(250 247 241 / 0.88) 35%, rgb(250 247 241 / 0.2) 75%); }
.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); }
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.6rem 2rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(3rem, 2.25rem + 3vw, 5rem);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.page-hero__bg {
  position: absolute; inset: 0 0 0 32%; z-index: -1; width: 68%; height: 100%;
  object-fit: cover; object-position: 60% 42%; opacity: 0.6;
  /* fade the image in from its own left edge so there is no vertical seam */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.page-hero__bg + .page-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(96deg, var(--ivory) 0 30%, rgb(250 247 241 / 0.72) 58%, rgb(250 247 241 / 0.3) 92%); }
.page-hero .container { display: grid; gap: 1.1rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.0; letter-spacing: -0.03em; max-width: 18ch; }
/* ---------- Contact page: intro beside a three-step suggestion form with picture tiles ---------- */
.page-hero .container.contact-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "head card" "more card";
  column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); row-gap: 1.8rem; align-items: start; justify-items: stretch;
}
.contact-head { grid-area: head; }
.contact-head h1 { margin-top: 1rem; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); }
.contact-head .lead { margin-top: 1.1rem; }
.contact-card { grid-area: card; }
.contact-more { grid-area: more; display: grid; gap: 1.2rem; align-content: start; }
.contact-thumb { max-width: 400px; }
.contact-thumb:hover { transform: none; box-shadow: var(--shadow-s); }
.contact-lib { font-size: 0.92rem; color: var(--muted); }
.contact-form { gap: 1.9rem; }
.contact-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form .contact-step__title { display: flex; align-items: center; gap: 0.7rem; padding: 0; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--teal-ink); }
.contact-step__title .muted { font-family: var(--font-sans); font-size: 0.85rem; }
.contact-step__n {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose-soft); color: var(--rose-ink); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 800;
}
.contact-step > .field, .contact-step > .form-row { margin-top: 0.9rem; }
.contact-step > .field__error { margin-top: 0.4rem; }
.areas { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.area { position: relative; cursor: pointer; }
.area input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.area__box {
  height: 100%; display: grid; justify-items: center; align-content: start; gap: 0.45rem; padding: 0.85rem 0.5rem 0.8rem;
  border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  text-align: center; font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: var(--teal-ink);
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.area__box img { width: 3.3rem; height: 3.3rem; padding: 0.3rem; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.area:nth-child(3n + 2) .area__box img { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.area:nth-child(3n) .area__box img { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.area:hover .area__box { box-shadow: inset 0 0 0 1px var(--teal); }
.area input:checked + .area__box { background: var(--teal); color: var(--ivory); box-shadow: none; }
.area input:checked + .area__box img { background: var(--white); }
.area input:focus-visible + .area__box { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .page-hero .container.contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "card" "more"; }
}
@media (max-width: 420px) {
  .areas { gap: 0.45rem; }
  .area__box { padding-inline: 0.3rem; font-size: 0.74rem; }
  .area__box img { width: 2.8rem; height: 2.8rem; }
}

.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__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
.topic-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.topic-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.topic-facts { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; }
.topic-facts li { font-size: 0.82rem; color: var(--muted); }
.topic-facts b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--teal-ink); }
.topic-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.topic-hero__fig { margin: 0; padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); border-radius: var(--picture-radius); background: var(--white); box-shadow: var(--shadow); }
.topic-hero__fig img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.topic-hero__fig figcaption { margin-top: 0.6rem; text-align: center; font-size: 0.78rem; font-style: italic; color: var(--muted); }
.topic-hero__fig--icon { display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle at 40% 35%, var(--white), var(--rose-soft)); }
.topic-hero__fig--icon img { width: 62%; max-height: none; }
@media (max-width: 860px) { .topic-hero__grid { grid-template-columns: minmax(0, 1fr); } .topic-hero__fig { max-width: 560px; } }
.page-hero__icon { width: clamp(140px, 10vw + 80px, 220px); filter: drop-shadow(0 16px 26px rgb(23 59 59 / 0.15)); }

/* ---------- 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 ---------- */
.library-hero h1 { margin-top: 0.6rem; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); max-width: 20ch; }
.library-hero .library-search { margin-top: 0.6rem; }
.library-hero .filters { margin-top: 0.4rem; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1rem; }
.pcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--picture-radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
/* The whole illustration always shows: it is fitted inside the frame, never cropped. */
.pcard__pic { position: relative; aspect-ratio: 16 / 10; }
.pcard__pic img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0.9rem 0.9rem 1.4rem; object-fit: contain; }
.pcard__pic--icon img { padding: 1.2rem 0 1.8rem; }
.pcard__pic--0 { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.pcard__pic--1 { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.pcard__pic--2 { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.pcard__meta { position: relative; display: flex; align-items: center; gap: 0.6rem; margin: -1.4rem 1.3rem 0; }
.pcard__icon { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: 0 0 0 3px var(--white), var(--shadow-s); }
.pcard__icon img { width: 80%; }
.pcard__group { margin-top: 1.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.pcard__title { margin: 0.7rem 1.3rem 0; font-size: 1.35rem; }
.pcard__sum { margin: 0.35rem 1.3rem 0; font-size: 0.92rem; color: var(--muted); }
.pcard__read { margin: auto 1.3rem 1.2rem; padding-top: 0.9rem; font-weight: 700; font-size: 0.88rem; color: var(--teal); }
@media (max-width: 960px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pcards { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Free guide page: the ten foundations as a path, the worksheets as paper ---------- */
.steps-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem 1rem; }
.steps-path__step { position: relative; display: grid; justify-items: center; text-align: center; }
/* the line joining one picture to the next, along each row of five */
.steps-path__step::after {
  content: ''; position: absolute; top: 60px; left: calc(50% + 68px); width: calc(100% - 136px + 1rem); height: 2px;
  background: linear-gradient(90deg, var(--sage), var(--rose));
}
.steps-path__step:nth-child(5n)::after, .steps-path__step:last-child::after { display: none; }
.steps-path__pic {
  position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line);
}
.steps-path__step:nth-child(3n + 2) .steps-path__pic { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.steps-path__step:nth-child(3n) .steps-path__pic { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.steps-path__pic img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 76%; object-fit: contain; }
.steps-path__n {
  position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-top: -0.9rem;
  border-radius: 50%; background: var(--teal); color: var(--ivory); font-size: 0.8rem; font-weight: 700;
}
.steps-path__title { margin-top: 0.5rem; font-family: var(--font-serif); line-height: 1.3; color: var(--teal-ink); }

.ws-band { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
.ws-band__text { display: grid; gap: 0.8rem; justify-items: start; }
.ws-band__text h3 { font-size: var(--step-3); }
.ws-band__text p { color: var(--muted); }
.ws-fan { list-style: none; margin: 0; padding: 0; position: relative; height: 470px; }
.ws-sheet {
  position: absolute; width: 46%; min-height: 330px; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.4rem 1.6rem;
  background: var(--white); border-radius: 3px; box-shadow: 0 20px 40px -24px rgb(23 59 59 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.05);
}
.ws-sheet:nth-child(1) { left: 0; top: 30px; transform: rotate(-6deg); }
.ws-sheet:nth-child(2) { left: 27%; top: 0; z-index: 2; }
.ws-sheet:nth-child(3) { right: 0; top: 34px; transform: rotate(6deg); }
.ws-sheet__kicker { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-ink); }
.ws-sheet h4 { font-size: 1.2rem; }
.ws-sheet p { font-size: 0.8rem; color: var(--muted); }
.ws-sheet__line { display: block; padding: 0.9rem 0 0.3rem; border-bottom: 1px solid var(--line); font-size: 0.74rem; color: var(--muted); }
.ws-sheet__table { display: grid; margin-top: 0.4rem; }
.ws-sheet__thead { display: grid; grid-template-columns: 0.8fr 0.8fr 0.9fr 1.2fr 1.3fr; gap: 0.3rem; padding: 0.4rem 0.35rem; background: var(--sage-soft); font-size: 0.6rem; font-weight: 700; line-height: 1.25; color: var(--teal-ink); }
.ws-sheet__row { height: 1.5rem; border-bottom: 1px solid var(--line); }

@media (max-width: 1000px) {
  .steps-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-path__step::after { display: none; }
  .ws-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .steps-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.8rem; }
  .steps-path__pic { width: 100px; height: 100px; }
  .steps-path__title { font-size: 0.92rem; }
  /* phones: the worksheets overlap as a stack rather than a wide fan */
  .ws-fan { height: auto; display: grid; }
  .ws-sheet { position: relative; width: 88%; min-height: 0; left: auto !important; right: auto !important; top: auto !important; }
  .ws-sheet:nth-child(1) { transform: rotate(-2deg); }
  .ws-sheet:nth-child(2) { justify-self: end; margin-top: -1.5rem; transform: rotate(1.5deg); }
  .ws-sheet:nth-child(3) { margin-top: -1.5rem; transform: rotate(-1deg); z-index: 3; }
}

/* ---------- Resources page: word of the day, flashcard glossary, source tiles ---------- */
.res-hero { background: linear-gradient(180deg, var(--ivory), var(--white)); }
.res-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: end; }
.res-hero h1 { margin-top: 1rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.res-hero .lead { margin-top: 1.1rem; }
.word-day { display: grid; gap: 0.5rem; justify-items: start; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); box-shadow: var(--shadow); }
.word-day__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-light); }
.word-day__term { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1.15; color: var(--ivory); }
.word-day__def { color: rgb(250 247 241 / 0.86); }
.word-day__link { font-size: 0.85rem; font-weight: 700; color: var(--sage); text-decoration: none; }
.word-day__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.word-day :focus-visible { outline-color: var(--ivory); }
.flashcards { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.flashcard { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--panel-radius); }
.flashcard--rose { background: var(--rose-soft); }
.flashcard--sage { background: var(--sage-soft); }
.flashcard--sand { background: var(--sand-soft); }
.flashcard dt { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; color: var(--teal-ink); }
.flashcard dd { display: flex; flex-direction: column; gap: 0.8rem; flex: 1; margin: 0; }
.flashcard dd p { color: #3f4848; font-size: 0.93rem; }
.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; }
.source-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
.source-tiles li { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.source-tiles__short { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; color: var(--rose-ink); }
.source-tiles b { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--teal-ink); }
.source-tiles__text { font-size: 0.82rem; color: var(--muted); }
.source-tiles a { margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--teal); }
@media (max-width: 1100px) { .source-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .res-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .flashcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .flashcards, .source-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Text pages (privacy, disclaimer), thank-you and 404: warm header, paper on a sand "desk" ---------- */
.doc-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(180deg, var(--ivory), var(--sand-soft)); }
.doc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.doc-hero__copy { display: grid; gap: 0.9rem; justify-items: start; }
.doc-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.doc-hero__pic {
  display: grid; place-items: center; width: clamp(120px, 8vw + 80px, 180px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); box-shadow: 0 0 0 8px rgb(255 253 252 / 0.7), var(--shadow);
}
.doc-hero__pic img { width: 66%; height: auto; }
.doc-points { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-points li { padding: 0.45rem 0.9rem; border-radius: 999px; background: rgb(255 253 252 / 0.85); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); }
.doc-points li::before { content: '✓'; margin-right: 0.4rem; color: var(--teal); }
.doc-desk { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(180deg, var(--sand-soft), #efe3d6); }
.doc-paper { max-width: 820px; margin-inline: auto; padding: clamp(1.4rem, 0.8rem + 3vw, 3rem); border-radius: 3px; background: var(--white); box-shadow: 0 30px 60px -30px rgb(23 59 59 / 0.4); counter-reset: doc; }
.doc-paper h2 { counter-increment: doc; margin-top: 2.4rem; font-size: var(--step-2); }
.doc-paper h2::before { content: counter(doc, decimal-leading-zero); display: block; margin-bottom: 0.2rem; font-size: 1rem; font-style: italic; color: var(--rose-ink); }
.doc-paper > :first-child { margin-top: 0; }
.thanks__card { max-width: 760px; margin-inline: auto; display: grid; justify-items: center; gap: 1.1rem; padding: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(1.4rem, 0.8rem + 3vw, 3rem); text-align: center; border-radius: 3px; background: var(--white); box-shadow: 0 30px 60px -30px rgb(23 59 59 / 0.4); }
.thanks__card h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.thanks__mark { width: 120px; }
.thanks__search { width: min(100%, 520px); }
.thanks__next { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.2rem; text-align: center; font-size: var(--step-3); }
.learn-cards.learn-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 700px) {
  .doc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .doc-hero__pic { order: -1; width: 110px; }
  .learn-cards.learn-cards--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

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

/* ---------- Article (topic pages) ---------- */
.article-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 1000px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); } }
.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__label {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal);
}
.box__label::before { content: ''; flex: none; width: 1.9rem; height: 1px; background: currentColor; opacity: 0.55; }
.box p:last-child { margin-bottom: 0; }
.box--explains { background: var(--sage-soft); border-color: transparent; }
.box--explains p { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.55; color: var(--teal-ink); }
.box--takeaway { background: var(--teal); border-color: transparent; color: var(--ivory); }
.box--takeaway .box__label { color: var(--rose-light); }
.box--takeaway p { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.35; color: var(--ivory); font-style: italic; }
.box--ask { background: var(--sand-soft); border-color: transparent; }
.box--ask .box__label { color: var(--rose-ink-deep); }
.box--ask ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.myths { display: grid; gap: 1rem; }
.myth { display: grid; border-radius: var(--panel-radius); overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(23 59 59 / 0.35); }
@media (min-width: 700px) { .myth { grid-template-columns: 1fr 1.3fr; } }
.myth > div { position: relative; padding: 1.25rem 1.5rem 1.25rem 3.4rem; }
/* A rose ✕ for the myth and a teal ✓ for the evidence */
.myth > div::before { position: absolute; left: 1.1rem; top: 1.2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; line-height: 1; }
.myth__claim { background: var(--rose-soft); }
.myth__claim::before { content: '✕' / ''; background: var(--white); color: var(--rose-ink); box-shadow: inset 0 0 0 1.5px var(--rose); }
.myth__claim strong, .myth__evidence strong { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem; }
.myth__claim strong { color: var(--rose-ink-deep); }
.myth__claim p { font-family: var(--font-serif); font-style: italic; color: var(--charcoal); text-decoration: line-through; text-decoration-color: rgb(156 91 85 / 0.45); text-decoration-thickness: 1px; }
.myth__evidence { background: var(--white); }
.myth__evidence::before { content: '✓' / ''; background: var(--teal); color: var(--ivory); }
.myth__evidence strong { color: var(--teal); }
/* Words you may hear: one flashcard per term, each with a coloured top edge */
.terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
/* Rows always fill: three across when the count divides by 3, otherwise two across with an odd last card taking the whole row */
@media (min-width: 640px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms > div:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .terms:has(> div:last-child:nth-child(3n)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terms:has(> div:last-child:nth-child(3n)) > div:last-child { grid-column: auto; }
}
.terms > div { --edge: var(--sage); display: grid; align-content: start; gap: 0.45rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 3px 0 var(--edge), 0 8px 20px -16px rgb(23 59 59 / 0.4); }
.terms > div:nth-child(3n + 2) { --edge: var(--rose); }
.terms > div:nth-child(3n) { --edge: var(--sand); }
.terms dt { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--teal-ink); }
.terms dd { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

/* Kara's own boxes carry her monogram, like a note in the margin */
.prose .box:has(> .box__label--kara), .sg-paper .box:has(> .box__label--kara) { padding-left: calc(clamp(1.25rem, 1rem + 1vw, 1.9rem) + 4.5rem); }
.prose .box:has(> .box__label--kara)::before, .sg-paper .box:has(> .box__label--kara)::before {
  content: ''; position: absolute; left: clamp(1.25rem, 1rem + 1vw, 1.9rem); top: clamp(1.25rem, 1rem + 1vw, 1.9rem); width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--white) url('/images/brand/monogram-k.webp?v=47db011d') center / 78% no-repeat; box-shadow: 0 0 0 1px var(--sage), 0 6px 14px -8px rgb(23 59 59 / 0.4);
}
.prose .box--takeaway:has(> .box__label--kara)::before { background-color: var(--ivory); box-shadow: 0 0 0 3px rgb(216 170 165 / 0.6); }
.prose .box--explains { border-left: 3px solid var(--teal); }
/* On phones the monogram moves to the top-right corner, so Kara's words keep the full width */
@media (max-width: 560px) {
  .prose .box:has(> .box__label--kara), .sg-paper .box:has(> .box__label--kara) { padding-left: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
  .prose .box:has(> .box__label--kara)::before, .sg-paper .box:has(> .box__label--kara)::before { left: auto; right: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; }
  .prose .box > .box__label--kara, .sg-paper .box > .box__label--kara { padding-right: 2.8rem; }
}

/* Questions for your appointment: a dashed tear-off card with room for notes (prints cleanly) */
.prose .box--ask { margin-top: 2.6rem; padding-top: 2.2rem; background: var(--white); border: 1.5px dashed var(--rose); }
.box__tab { position: absolute; top: -0.85rem; left: 1.4rem; padding: 0.35rem 0.8rem; border-radius: 2px; background: var(--rose-soft); color: var(--rose-ink-deep); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.prose .box--ask ol { list-style: none; padding: 0; gap: 0; counter-reset: ask; }
.prose .box--ask li { counter-increment: ask; display: grid; grid-template-columns: 2rem 1fr; margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.prose .box--ask li::before { content: counter(ask); font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); }
.box__notes { margin-top: 1rem !important; height: 3.2rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: repeating-linear-gradient(transparent 0 1.55rem, var(--line) 1.55rem 1.6rem); }
.sources { font-size: 0.88rem; color: var(--muted); }
.sources ul { padding-left: 1.1rem; margin-top: 0.5rem; }
.pager { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: grid; gap: 0.35rem; padding: 1.4rem 0 0; border-top: 1.5px solid var(--teal-ink); text-decoration: none; background: none; transition: border-color 0.25s, padding 0.3s var(--ease); }
.pager a:hover { border-color: var(--rose); padding-left: 0.4rem; }
.pager .next:hover { padding-left: 0; padding-right: 0.4rem; }
.pager small { color: var(--rose-ink); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.pager span { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); }
.pager .next { text-align: right; }

/* ---------- Start Here: a checklist of the first six steps (ticks saved on the device by main.js) ---------- */
.start__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: start; }
.start__aside { position: sticky; top: 6.5rem; display: grid; gap: 1.1rem; justify-items: start; }
.start__aside h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.start__progress { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.6rem; }
.start__ring { width: 110px; height: 110px; transform: rotate(-90deg); }
.start__ring circle { fill: none; stroke-width: 10; }
.start__ring-bg { stroke: var(--sage-soft); }
.start__ring-fg { stroke: var(--teal); stroke-linecap: round; transition: stroke-dasharray 0.5s var(--ease); }
.start__count { color: var(--muted); font-size: 0.9rem; }
.start__count b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.8rem; color: var(--teal-ink); }
.start__complete { padding: 0.9rem 1.1rem; border-radius: var(--panel-radius); background: var(--sage-soft); color: var(--teal-ink); font-weight: 600; }
.start__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.start__item {
  display: grid; grid-template-columns: 2rem 7rem minmax(0, 1fr); gap: 1.1rem; align-items: center;
  padding: 1rem 1.2rem; background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.3s;
}
.start__tick {
  appearance: none; margin: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line); background: var(--white) center / 62% no-repeat; transition: background-color 0.2s, box-shadow 0.2s;
}
.start__tick:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.start__tick:checked {
  box-shadow: none; background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fffdfc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.start__tick:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }
.start__item.is-done { background: var(--ivory); }
.start__item.is-done h2 { color: var(--muted); }
.start__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
.start__pic img { position: absolute; inset: 0; margin: auto; max-width: 84%; max-height: 84%; object-fit: contain; }
.start__pic--rose { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.start__pic--sage { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.start__pic--sand { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.start__pic--teal { background: var(--teal); }
.start__pic--teal img { max-width: 60%; }
.start__play { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(250 247 241 / 0.95); }
.start__play::before { content: ''; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--teal); margin-left: 3px; }
.start__body { display: grid; gap: 0.3rem; justify-items: start; }
.start__body h2 { font-size: 1.15rem; line-height: 1.3; }
.start__n { font-style: italic; color: var(--rose-ink); }
.start__body p { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) {
  .start__grid { grid-template-columns: minmax(0, 1fr); }
  .start__aside { position: static; }
}
@media (max-width: 520px) {
  .start__item { grid-template-columns: 1.8rem minmax(0, 1fr); padding: 1rem; }
  .start__pic { grid-column: 2; grid-row: 1; width: 6.5rem; }
  .start__body { grid-column: 2; }
  .start__tick { align-self: start; }
}

/* ---------- Videos page: Episode 1 + sign-up, the ten launch episodes, then the year ahead ---------- */
.vpage__title { margin-top: 1rem; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.vpage__top { margin-top: 2rem; }
.vpage__notify { scroll-margin-top: 6rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: var(--panel-radius); background: var(--sage-soft); }
.vpage__notify h2 { margin-top: 0.8rem; font-size: var(--step-2); }
.vpage__notify > p { margin: 0.4rem 0 1rem; color: var(--muted); }
.vpage__h2 { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-size: var(--step-3); }
.ep-grid { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
.ep { display: grid; gap: 0.6rem; text-decoration: none; color: inherit; }
.ep .thumb__title { font-size: clamp(0.85rem, 0.6rem + 0.5vw, 1rem); }
.ep .thumb__title small { font-size: 0.5rem; margin-top: 0.4rem; }
.ep .thumb__badge { left: 0.7rem; bottom: 0.55rem; padding: 0.2rem 0.45rem; font-size: 0.5rem; }
.ep .thumb__play { width: 40px; height: 40px; }
.ep__title { font-size: 0.86rem; line-height: 1.4; color: var(--teal-ink); }
.ep:hover .ep__title { text-decoration: underline; text-underline-offset: 3px; }
.ep__n { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--rose-ink); }
.year { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.year__month { padding: 1.2rem 1.2rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.year__month.is-first { box-shadow: inset 0 0 0 2px var(--teal), var(--shadow); }
.year__icon { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.year__month:nth-child(3n + 2) .year__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.year__month:nth-child(3n) .year__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.year__icon img { width: 80%; height: auto; }
.year__n { display: block; margin-top: 0.8rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.year__month h3 { margin-top: 0.25rem; font-size: 1.2rem; }
.year__month ul { margin: 0.5rem 0 0; padding-left: 1rem; font-size: 0.86rem; color: var(--muted); }
.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: 1100px) { .ep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ep-grid, .year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep .thumb__title small { display: none; } /* too small to sit above the badge */
}
@media (max-width: 460px) { .year { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
/* ---------- FAQ page: themes with a side menu ---------- */
.faq-page__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: start; }
.faq-page__side { position: sticky; top: 6.5rem; display: grid; gap: 1.1rem; }
.faq-page__side h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.faq-menu ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.faq-menu a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
  padding: 0.5rem 0.8rem; border-radius: var(--panel-radius); text-decoration: none;
  font-weight: 700; font-size: 0.9rem; color: var(--teal-ink); transition: background-color 0.2s, box-shadow 0.2s;
}
.faq-menu a:hover, .faq-menu a:focus-visible { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.faq-menu__icon, .faq-group__icon { display: grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.faq-menu__icon { width: 2.4rem; height: 2.4rem; }
.faq-menu li:nth-child(3n + 2) .faq-menu__icon, .faq-group:nth-child(3n + 2) .faq-group__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.faq-menu li:nth-child(3n) .faq-menu__icon, .faq-group:nth-child(3n) .faq-group__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.faq-menu__icon img { width: 80%; height: auto; }
.faq-menu__count { font-size: 0.78rem; color: var(--muted); }
.faq-page__ask { margin-top: 0.6rem; font-size: 0.92rem; color: var(--muted); }
.faq-group { scroll-margin-top: 6rem; }
.faq-group + .faq-group { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.8rem); }
.faq-group h2 { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; font-size: var(--step-2); }
.faq-group__icon { width: 3rem; height: 3rem; }
.faq-group__icon img { width: 80%; height: auto; }
@media (max-width: 900px) {
  .faq-page__grid { grid-template-columns: minmax(0, 1fr); }
  .faq-page__side { position: static; }
  .faq-menu ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .faq-menu ul { grid-template-columns: minmax(0, 1fr); } }

.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); transition: border-color 0.2s, box-shadow 0.3s; }
.faq details[open] { border-color: var(--sage); box-shadow: var(--shadow-s); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.25rem 1.5rem; font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; content: '+' / ''; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-soft); color: var(--teal); font-family: var(--font-sans); font-size: 1.2rem; transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.5rem 1.4rem; color: var(--muted); max-width: 72ch; }

/* Quote / about */
.quote { font-family: var(--font-serif); font-size: var(--step-3); line-height: 1.3; color: var(--teal-ink); font-style: italic; }
.quote::before { content: '“'; display: block; font-size: 4rem; line-height: 0.6; color: var(--rose); margin-bottom: 0.5rem; }
/* ---------- Meet Kara page: photo collage, profile, "Learn with Kara" cards ---------- */
.mk-hero .container { position: relative; }
.mk-collage { position: relative; width: min(100%, 980px); aspect-ratio: 980 / 520; margin-inline: auto; }
.mk-collage__tile { position: absolute; padding: 0.8rem; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.mk-collage__tile img { display: block; width: 100%; height: auto; }
.mk-collage__tile--1 { left: 3%; top: 6%; width: 23%; transform: rotate(-5deg); }
.mk-collage__tile--2 { left: 15%; bottom: 0; width: 13%; transform: rotate(4deg); }
.mk-collage__tile--3 { right: 2%; top: 2%; width: 23%; transform: rotate(5deg); }
.mk-collage__tile--4 { right: 13%; bottom: 0; width: 14%; transform: rotate(-4deg); }
/* the photo sits in the middle of the collage, on top of it */
.mk-collage__photo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(31%, 300px); }
.mk-collage__photo .portrait { width: 100%; }
/* the frame is smaller here than on its own, so its placeholder (logo + line) is scaled to fit */
.mk-collage__photo .portrait__placeholder { padding: 1rem; gap: 0.5rem; }
.mk-collage__photo .portrait__placeholder img { width: 56%; }
.mk-collage__photo .portrait__placeholder p { font-size: clamp(0.82rem, 0.6rem + 0.7vw, 1.15rem); }
.mk-collage__photo .dev-todo { font-size: 0.6rem; }
.mk-intro { margin-top: 2.4rem; display: grid; justify-items: center; gap: 1rem; text-align: center; }
.mk-intro h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; }
.mk-role { padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--sage-soft); font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); }

.mk-story { max-width: 940px; }
.mk-story__quote {
  padding-left: 1.4rem; border-left: 3px solid var(--rose);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.28; color: var(--teal-ink); text-wrap: balance;
}
.mk-story__cols { margin-top: 2rem; columns: 2; column-gap: 2.6rem; color: var(--muted); }
.mk-story__cols p { margin-bottom: 1rem; break-inside: avoid; }
.mk-story .signature { margin-top: 1rem; }

.learn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.learn-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--picture-radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.learn-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.learn-card__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.learn-card__pic img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; object-fit: contain; }
.learn-card__pic--sage { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.learn-card__pic--teal { background: var(--teal); }
.learn-card__pic--teal img { padding: 1.6rem; }
.learn-card__pic--rose { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.learn-card__pic--sand { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.learn-card__play { position: absolute; right: 1rem; bottom: 1rem; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(250 247 241 / 0.95); }
.learn-card__play::before { content: ''; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--teal); margin-left: 4px; }
.learn-card__title { padding: 1rem 1.15rem 0; font-family: var(--font-serif); font-size: 1.2rem; color: var(--teal-ink); }
.learn-card__text { padding: 0.25rem 1.15rem 1.2rem; font-size: 0.88rem; color: var(--muted); }
.learn-cards__more { margin-top: 1.6rem; color: var(--muted); }

@media (max-width: 960px) { .learn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* phones: a square collage with the photo larger in the middle */
  .mk-collage { aspect-ratio: 1; }
  .mk-collage__photo { width: 50%; }
  .mk-collage__tile { padding: 0.45rem; border-radius: 12px; }
  .mk-collage__tile--1 { left: 0; top: 4%; width: 34%; }
  .mk-collage__tile--3 { right: 0; top: 12%; width: 33%; }
  .mk-collage__tile--2 { left: 6%; bottom: 0; width: 22%; }
  .mk-collage__tile--4 { right: 6%; bottom: 2%; width: 23%; }
  .mk-story__cols { columns: 1; }
}
@media (max-width: 420px) { .learn-card__title { font-size: 1.05rem; } .learn-card__text { font-size: 0.8rem; } }

.signature { font-family: var(--font-serif); font-style: italic; font-size: 2rem; color: var(--rose-ink); }
.dev-todo {
  display: inline-block; padding: 0.6rem 0.9rem; border: 1.5px dashed #c47f2b; border-radius: 10px;
  background: #fff6e8; color: #7a4a0f; font-size: 0.82rem; font-weight: 600;
}

/* Worksheets */
.worksheet { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.worksheet h3 { margin-bottom: 0.25rem; }
.write-line { border-bottom: 1px solid var(--line); min-height: 2.6rem; padding-top: 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.write-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.78rem; }
.write-table th { text-align: left; padding: 0.6rem; background: var(--sage-soft); color: var(--teal-ink); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }
.write-table td { border-bottom: 1px solid var(--line); height: 2.8rem; }
.table-scroll { overflow-x: auto; }
.table-hint { display: none; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 600px) { .table-hint { display: block; } }
@media print { .table-hint { display: none !important; } }
/* ---------- Starter Guide: the guide as paper on a warm sand "desk", with its contents beside it ---------- */
.sg-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(180deg, var(--ivory), var(--sand-soft)); }
.sg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.sg-hero__copy { display: grid; gap: 0.9rem; justify-items: start; }
.sg-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.sg-hero .byline { margin: 0; }
.sg-hero__cover {
  width: clamp(170px, 12vw + 80px, 250px); height: auto; border-radius: 2px 6px 6px 2px; transform: rotate(3deg);
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 22px 32px 50px -22px rgb(23 59 59 / 0.45);
}
.sg-desk { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(180deg, var(--sand-soft), #efe3d6); }
.sg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sg-paper { min-width: 0; } /* keeps the wide results table scrolling inside the paper on phones */
@media (min-width: 1000px) { .sg-layout { grid-template-columns: 250px minmax(0, 820px); justify-content: center; } }
.sg-toc li.sg-toc__ws a::before { border-radius: 2px; } /* the worksheets stop is a square, not a section dot */
.sg-progress { display: block; height: 4px; margin-top: 1rem; border-radius: 4px; background: rgb(255 253 252 / 0.7); overflow: hidden; }
.sg-progress span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--teal); transition: width 0.15s linear; }
.sg-paper { padding: clamp(1.4rem, 0.8rem + 3vw, 3rem); border-radius: 3px; background: var(--white); box-shadow: 0 30px 60px -30px rgb(23 59 59 / 0.4); }
.sg-thing { scroll-margin-top: 6rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-block: 1.8rem; border-bottom: 1px solid var(--line); }
.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; }
.sg-thing__pic--rose { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.sg-thing__pic--sage { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.sg-thing__pic--sand { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.sg-thing__n { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--rose-ink); }
.sg-thing h2 { margin-top: 0.15rem; font-size: var(--step-2); }
.sg-thing p { margin-top: 0.5rem; color: #3f4848; }
.sg-thing__note { padding: 0.75rem 1rem; background: var(--rose-soft); font-family: var(--font-serif); font-style: italic; color: var(--teal-ink) !important; }
.sg-paper__h2 { scroll-margin-top: 6rem; margin-top: 2.6rem; }
@media (max-width: 560px) {
  .sg-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sg-hero__cover { order: -1; width: 150px; justify-self: center; }
  .sg-thing { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
}

/* 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-topics { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.footer-topics ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
.footer-topics a {
  display: flex; align-items: center; gap: 0.6rem; height: 100%; padding: 0.6rem 0.7rem; border-radius: var(--panel-radius);
  background: rgb(250 247 241 / 0.08); box-shadow: inset 0 0 0 1px rgb(250 247 241 / 0.14);
  font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--ivory); transition: background-color 0.2s;
}
.footer-topics a:hover { background: rgb(250 247 241 / 0.16); text-decoration: none; }
.footer-topics__icon { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); }
.footer-topics__icon img { width: 80%; height: auto; }
@media (max-width: 1100px) { .footer-topics ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-topics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.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; } }
.social { display: flex; gap: 0.6rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(250 247 241 / 0.25); }
.social a:hover { background: rgb(250 247 241 / 0.1); }
/* Placeholder marks for accounts that do not exist yet: visibly present, clearly
   not clickable, and out of the tab order. */
.social__pending {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px dashed rgb(250 247 241 / 0.22); color: rgb(250 247 241 / 0.4); cursor: default;
}
.social__note { margin-top: 0.7rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(250 247 241 / 0.45); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.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; }
  .page-hero__bg, .page-hero__veil { display: none; }
  .worksheet { break-inside: avoid; border: 1px solid #999; }
  .sg-thing { break-inside: avoid; }
  .sg-hero, .sg-desk { background: none; }
  .sg-paper { box-shadow: none; padding: 0; }
  .sg-hero__cover { transform: none; box-shadow: none; width: 140px; }
  a { text-decoration: none; color: inherit; }
}

/* Extras */
.card--library { background: var(--teal); border-color: var(--teal); color: var(--ivory); justify-content: center; }
.card--library h3 { color: var(--ivory); font-size: var(--step-2); }
.card--library p { color: rgb(250 247 241 / 0.8); }
.card--library .eyebrow, .card--library .link-arrow { color: var(--sage); }
.card--library:hover { border-color: var(--teal-deep); }

/* =========================================================================
   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; }
.social__note { position: relative; margin-top: 0.9rem; color: rgb(250 247 241 / 0.72); }
@media (max-width: 400px) {
  .footer-topics a { gap: 0.45rem; padding-inline: 0.5rem; font-size: 0.8rem; }
  .footer-topics__icon { width: 2rem; height: 2rem; }
}

/* ---- 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__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.56rem; letter-spacing: 0.18em; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.58rem; letter-spacing: 0.12em; }
}
@container (max-width: 330px) {
  .dial__core { inset: 22%; padding: 0.7rem; }
  .dial__kicker { font-size: 0.5rem; letter-spacing: 0.14em; }
  .dial__title { font-size: 0.92rem; }
  .dial__go { font-size: 0.52rem; }
}
/* 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__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.56rem; letter-spacing: 0.18em; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.58rem; letter-spacing: 0.12em; }
}
/* An orbiting pearl used to drift across the caption underneath. */
.dial__caption { position: relative; z-index: 1; margin-top: clamp(1.9rem, 1.2rem + 1.4vw, 2.8rem); }

/* ---- Wrapping and spacing ---------------------------------------------- */
.cta-band h2, .prose h2 { text-wrap: balance; }
.faq summary { text-wrap: pretty; }
.index__all .btn { white-space: nowrap; flex: none; }
/* 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; }
.doc-paper { max-width: 820px; }

/* ---- Cards left stranded alone on a last row ---------------------------- */
/* Three books: one centred column rather than two with an orphan. */
@media (max-width: 1000px) {
  .ebooks { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
/* Ten episodes and ten foundations divide by two, never by three. */
@media (max-width: 1100px) { .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .steps-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three worksheets: keep three columns on a tablet instead of two plus one. */
@media (min-width: 600px) and (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Five source tiles: centre the short last row. */
@media (min-width: 601px) and (max-width: 1100px) {
  .source-tiles { display: flex; flex-wrap: wrap; justify-content: center; }
  .source-tiles li { flex: 1 1 13rem; max-width: 20rem; }
}
.source-tiles__text { font-size: 0.88rem; }
/* The last glossary card, alone on its row, sits in the middle column. */
.flashcard:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 900px) {
  .flashcard:last-child:nth-child(3n + 1) { grid-column: auto; }
  .flashcard:last-child:nth-child(2n + 1) { grid-column: auto; }
}
@media (max-width: 600px) { .flashcard:last-child { grid-column: auto; } }
/* Spare row height was pushing the numbered badges to different heights. */
.steps-path__step { align-content: start; }
/* Book cards ended at different heights, so their buttons were out of line. */
.ebooks { align-items: stretch; }
.ebook { height: 100%; align-content: start; }
.ebook .faq { margin-top: auto; }

/* ---- Worksheet fan: the sheets covered each other's titles on a tablet --- */
@media (max-width: 1000px) {
  .ws-fan { height: auto; display: grid; }
  .ws-sheet { position: relative; width: 88%; min-height: 0; left: auto !important; right: auto !important; top: auto !important; }
  .ws-sheet:nth-child(1) { transform: rotate(-2deg); }
  .ws-sheet:nth-child(2) { justify-self: end; margin-top: -1.5rem; transform: rotate(1.5deg); }
  .ws-sheet:nth-child(3) { margin-top: -1.5rem; transform: rotate(-1deg); z-index: 3; }
}

/* ---- Email fields squeezed next to their button ------------------------- */
@media (max-width: 1200px) { .vpage__notify .form-inline { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .guide-hero__form .form-inline { grid-template-columns: minmax(0, 1fr); } }

/* ---- The free-guide "peek inside" card was squeezed to a 130px column ---- */
@media (max-width: 1100px) {
  .guide-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "peek" "body"; row-gap: 2.25rem; }
  .guide-peek { --book-w: 230px; width: 100%; max-width: 560px; justify-self: center; }
  .guide-band__body .ticks { margin-top: 0; }
}

/* ---- Homepage: the figure floated in the middle of empty space ---------- */
.inside { align-items: start; }
/* …and top-aligned it left a blank column under it: it now travels beside the list */
@media (min-width: 861px) { .inside > .figure { position: sticky; top: 7rem; } }

/* ---- Document pages: heading and paper started on different left edges --- */
.doc-hero__grid { max-width: 820px; margin-inline: auto; }
@media (max-width: 700px) { .doc-hero__pic { margin-left: 0.5rem; } }

/* ---- Thank-you and 404 -------------------------------------------------- */
@media (max-width: 1100px) { .learn-cards.learn-cards--3 { max-width: 760px; } }
/* "e.g. AMH" was cut to "e.g. AM" in the search box. */
@media (max-width: 420px) { .hero-search input { font-size: 0.95rem; padding-inline: 0.85rem; } }
/* 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. */
@media (max-width: 860px) { .topic-hero__fig { margin-inline: auto; } }
/* "6 sources" kept dropping onto a second row on its own. */
@media (max-width: 480px) {
  .topic-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
}
/* "Ask your healthcare professional" wrapped, leaving one word below. */
@media (max-width: 430px) {
  .eyebrow { letter-spacing: 0.14em; }
  .box__label { letter-spacing: 0.13em; }
  .box__label::before { width: 1.1rem; }
}

/* ---- Contact ------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 999.98px) { .contact-thumb { max-width: none; } }
@media (max-width: 380px) {
  .area__box { font-size: 0.68rem; padding-inline: 0.25rem; overflow-wrap: break-word;
    -webkit-hyphens: auto; hyphens: auto; }  /* iOS Safari still needs the prefix */
  .area__box img { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 340px) {
  /* "endometriosis" is one long word and still ran over on a 320px phone. */
  .area__box { font-size: 0.62rem; letter-spacing: -0.01em; }
}
/* Just under the 24px minimum on some phones. */
.translate__more { display: inline-block; padding-block: 0.2rem; }

/* ---- FAQ ---------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) { .faq-menu ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Starter guide ------------------------------------------------------ */
/* The picture column left the text only about 190px on a phone. */
@media (max-width: 560px) {
  .sg-thing { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .sg-thing__pic { width: 5rem; }
  .sg-thing h2 { overflow-wrap: break-word; }
}
/* The tracker table is wider than a phone. Shadows show which way it scrolls. */
.write-table { min-width: 34rem; }
.write-table th { overflow-wrap: break-word; }
.table-scroll {
  background:
    linear-gradient(to right, var(--white) 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--white) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(23 59 59 / 0.17), rgb(23 59 59 / 0)) left / 0.8rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(23 59 59 / 0.17), rgb(23 59 59 / 0)) right / 0.8rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* ---- Meet Kara ---------------------------------------------------------- */
@media (max-width: 430px) { .mk-role { border-radius: 1rem; font-size: 0.78rem; text-wrap: balance; } }

/* ---- Homepage odds and ends --------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  /* "Coming soon" wrapped under Book Two only, dropping its title out of line. */
  .series-kicker { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}
@media (min-width: 960px) and (max-width: 1100px) {
  .hero-popular { gap: 0.4rem; }
  .hero-popular a { padding-inline: 0.65rem; }
}
@media (max-width: 520px) {
  .index__all { flex-direction: column; align-items: stretch; }
  .index__all .btn { justify-content: center; }
}
@media (max-width: 420px) {
  /* Narrow phones: the cover sits above the title instead of beside it. */
  .series-bookhead { grid-template-columns: minmax(0, 1fr); }
  .series-cover { width: 96px; }
  .contrast__values { gap: 0.5rem 1rem; letter-spacing: 0.12em; }
}

/* ---- Video thumbnails --------------------------------------------------- */
.ep .thumb__title small { font-size: 0.64rem; }
.ep .thumb__badge { font-size: 0.62rem; }
@media (max-width: 460px) {
  /* The title ran into the artwork on small phones. */
  .ep .thumb { grid-template-columns: 1.75fr 1fr; padding-left: 0.7rem; }
  .ep .thumb__title { font-size: 0.78rem; }
  .ep .thumb__title small { font-size: 0.58rem; letter-spacing: 0.12em; }
}

/* ---- Free-guide hero: the signup card stopped short of the right edge ---- */
@media (max-width: 959.98px) { .hero__copy > .card { width: 100%; } }

/* ---- "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; }
.word-day__link { display: inline-block; padding-block: 0.3rem; }

/* ---- 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; }
.diagram__hint { display: none; }
@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. */
  .topic-hero__fig--icon {
    margin-inline: auto; padding-inline: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    border-radius: var(--picture-radius); background: var(--white); box-shadow: var(--shadow);
  }
  .diagram__hint {
    display: block; margin-top: 0.7rem; padding-inline: var(--gutter); text-align: center;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
}

/* 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. */
.male-hero {background: var(--ivory) url('/images/bg/male-fertility.webp?v=817cdbe8') center/cover; padding: clamp(3rem,7vw,6rem) 0;}
.male-hero__copy {max-width: 760px; margin: auto; text-align: center; padding: 2rem; background: rgba(250,247,241,.92); border-radius: 24px;}
.male-hero h1 {font-size: var(--step-4);}
.male-hero .breadcrumb ol {justify-content: center;}
.male-feature {background: var(--sage-soft);}
.male-feature__grid {display:grid; grid-template-columns: 180px 1fr; gap: 2.5rem; align-items:center; max-width: 1000px;}
.male-feature__grid>img {width:100%; height:auto;}
.male-paths {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;}
.male-path {display:block;padding:1.5rem;border:1px solid var(--line);border-radius: var(--panel-radius);background:var(--white);text-decoration:none;color:var(--teal-ink);}
.male-path:hover {background:var(--sage-soft);}
.male-path strong {display:block;font-family:var(--font-serif);font-size:var(--step-1);margin:.5rem 0;}
.male-path p {color:var(--muted);margin:0;}
.male-content {max-width:860px;}
.male-content section {scroll-margin-top:110px;margin-bottom:3rem;}
.male-figure {max-width:760px;margin:2rem auto;}
.male-figure img {width:100%;height:auto;}
.male-review {border-left:4px solid var(--rose);padding:1rem 1.5rem;background:var(--rose-soft);}
@media(max-width:900px){.male-paths{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.male-paths{grid-template-columns:1fr;}.male-feature__grid{grid-template-columns:1fr;gap:1rem;}.male-feature__grid>img{width:120px;}.male-hero__copy{padding:1.5rem;}}

/* Expanded illustrated male fertility guide */
.male-intro {display:grid;grid-template-columns:1fr 230px;gap:3rem;align-items:center;margin-bottom:3rem;}
.male-intro img{width:100%;height:auto;}
.male-reading{display:grid;grid-template-columns:215px minmax(0,850px);gap:3rem;align-items:start;}
.male-article{min-width:0;}
.male-chapter{scroll-margin-top:110px;padding-bottom:2.5rem;margin-bottom:3rem;border-bottom:1px solid var(--line);}
.male-figure{margin:2rem 0;}
.male-figure img{display:block;border-radius:20px;width:100%;height:auto;}
.male-figure figcaption{font-size:.85rem;color:var(--muted);line-height:1.7;margin-top:.7rem;}
.male-section-sources{font-size:.8rem;color:var(--muted);}
.male-table-wrap{overflow-x:auto;margin:2rem 0;}
.male-values{width:100%;border-collapse:collapse;font-size:.9rem;}
.male-values caption{text-align:left;font-weight:700;padding:1rem;background:var(--sage-soft);}
.male-values th,.male-values td{padding:.85rem;text-align:left;border-bottom:1px solid var(--line);}
.male-values thead{background:var(--teal);color:var(--white);}
.male-values tbody tr:nth-child(even){background:var(--ivory);}
.male-editorial{display:block;max-width:100%;height:auto;border-radius:24px;}
@media(max-width:1000px){.male-reading{grid-template-columns:1fr;}.male-intro{grid-template-columns:1fr 160px;}}
@media(max-width:600px){.male-intro{grid-template-columns:1fr;gap:1rem;}.male-intro img{width:150px;}.male-values th,.male-values td{padding:.6rem;font-size:.78rem;}.male-figure figcaption{font-size:.8rem;}.male-chapter{margin-bottom:2rem;}}
.male-intro{grid-template-columns:1.1fr 1fr;}
.male-intro img{border-radius:24px;}
@media(max-width:600px){.male-intro{grid-template-columns:1fr;}.male-intro img{width:100%;}}
/* 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:12px;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:7px;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);}
.nav-group--female{--hl-bg:var(--rose-soft);--hl-bar:var(--rose-ink);}
.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;}
.male-page-card>img{width:76px;height:76px;object-fit:contain;margin-bottom:1rem;}
.male-page-card[aria-current='page']{border-color:var(--teal);background:var(--sage-soft);}
.male-paths{grid-template-columns:repeat(2,minmax(0,1fr));}
@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;}
}
@media(max-width:600px){.male-paths{grid-template-columns:1fr;}}
.male-hero--editorial{background:var(--ivory);padding:clamp(2rem,5vw,4.5rem) 0;border-bottom:1px solid var(--line);}
.male-hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;}
.male-hero--editorial .male-hero__copy{padding:0;margin:0;text-align:left;background:none;border-radius:0;}
.male-hero--editorial h1{font-size:clamp(2.4rem,4.5vw,4.5rem);line-height:1.12;}
.male-hero__art{margin:0;}
.male-hero__art img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 12px 32px #173e3810;}
.male-hero__art figcaption{font-size:.75rem;color:var(--muted);margin-top:.6rem;text-align:right;}
.male-intro--focused{grid-template-columns:1.2fr 1fr;gap:3rem;margin-bottom:0;}
.male-outcome{color:var(--teal-ink);font-size:.9rem;line-height:1.8;text-wrap:balance;}
.male-intro--focused>div:first-child>*+*{margin-top:1rem;} /* the intro paragraph sat right under the heading */
.male-guide-switcher ol{list-style:none;padding:0;margin:0;}
.male-guide-switcher a{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--teal-ink);line-height:1.5;}
.male-guide-switcher a span{font-family:var(--font-serif);color:var(--muted);}
.male-guide-switcher a[aria-current],.male-guide-switcher a:hover{background:var(--sage-soft);border-radius:8px;}
.male-guide-switcher a{align-items:center;}
.male-guide-switcher a img{width:56px;height:56px;object-fit:contain;flex-shrink:0;}
.male-guide-switcher a span{font:inherit;color:var(--teal-ink);}
.male-hero--editorial{background:linear-gradient(90deg,#faf7f1ee,#faf7f1dd),url('/images/male/background-teal.webp?v=e5943cc9') center/cover;}
.male-stage-labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none!important;padding:0!important;margin:.7rem 0 1.3rem!important;gap:.45rem;text-align:center;color:#153f3d;font-size:.78rem;font-weight:600;line-height:1.45;}
.male-stage-labels li{margin:0!important;overflow-wrap:anywhere;}
.male-measure-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:.8rem 0 1.4rem;}
.male-measure-panels h3{font-size:1.2rem;margin:0 0 .5rem;color:#153f3d;}
.male-measure-panels p{font-size:.85rem;line-height:1.6;margin:0;}
@media(max-width:600px){.male-stage-labels{grid-template-columns:1fr;text-align:left;list-style:decimal!important;padding-left:1.3rem!important;font-size:.9rem;}.male-measure-panels{grid-template-columns:1fr;}.male-measure-panels>div{border-top:1px solid var(--line);padding-top:.8rem;}}
.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:18px;}
.male-read-next img{width:100%;height:auto;border-radius:12px;}
.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;}
.male-book-intro{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.male-book-intro>img{width:100%;height:auto;box-shadow:0 18px 40px #153f3d25;}
.male-book-intro>div{display:grid;gap:1rem;justify-items:start;}
.male-book-intro>div>p{max-width:62ch;}
.male-book-intro .lead{margin-top:-0.2rem;}
.male-book-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem;}
.male-book-samples figure{margin:0;}
.male-book-samples img{width:100%;height:auto;box-shadow:0 5px 20px #153f3d18;}
.male-book-samples figcaption{font-size:.8rem;margin-top:.7rem;}
@media(min-width:1000px){.series-books{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem;}.series-book:nth-child(3){border-left:0;padding-left:0;}.ebooks{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.male-book-intro,.male-book-samples{grid-template-columns:1fr;}.male-book-intro>img{max-width:240px;margin-inline:auto;}.male-book-samples{max-width:420px;margin-inline:auto;}}
@media(max-width:800px){.male-hero__grid,.male-intro--focused{grid-template-columns:1fr;gap:1.5rem;}.male-hero__art{max-width:650px;}.male-hero--editorial h1{font-size:clamp(2.2rem,7vw,3.5rem);}.male-hero--editorial .lead{font-size:1.05rem;}}
@media(max-width:500px){.male-read-next{grid-template-columns:1fr;}.male-read-next img{max-width:260px;}.male-hero__art img{border-radius:16px;}}

/* ---- 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). */
.male-hero .breadcrumb ol { justify-content: flex-start; }
.male-hero--editorial .male-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.male-hero--editorial .male-hero__copy > * { margin: 0; }
.male-intro-band { position: relative; overflow: hidden; }
.male-intro-band > .container { position: relative; }
.male-sprig { position: absolute; right: -90px; bottom: -70px; width: clamp(180px, 22vw, 320px); height: auto; opacity: 0.55; pointer-events: none; transform: rotate(-8deg); }
.male-guide-switcher > .eyebrow { margin-bottom: 0.6rem; }
.male-guide-switcher a span small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink-deep); }

/* Contents: the topic-page .toc, kept visible as a card on narrower screens */
.toc.toc--male { display: block; }
@media (max-width: 999px) {
  .toc.toc--male { position: static; padding: 1.2rem 1.4rem; background: var(--sage-soft); border-radius: var(--panel-radius); }
  .toc.toc--male ol { columns: 2; column-gap: 1.5rem; }
  .toc.toc--male li { break-inside: avoid; }
  .toc.toc--male ol::before, .toc.toc--male ol::after { display: none; } /* the rail can't cross columns; the dots still mark progress */
}
@media (max-width: 560px) { .toc.toc--male ol { columns: 1; } }

/* Chapter rhythm: chapters wrap their paragraphs, so restore the .prose spacing */
.male-chapter > * + * { margin-top: 1.25rem; }
.male-chapter > h2 { margin-top: 0.6rem; }
.male-chapter__head { display: flex; align-items: center; gap: 0.85rem; }
.male-chapter__mark { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.male-chapter__mark img { width: 100%; height: auto; }
.male-chapter__mark--number { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.male-chapter .box--takeaway { margin-top: 2rem; }
.male-section-sources { margin-top: 0.8rem !important; }

/* Figures: the same white card as topic-page diagrams, with an Enlarge badge */
.male-figure { margin: 2.5rem 0 !important; max-width: none; }
.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; }
.male-figure__zoom { position: absolute; top: 0.8rem; right: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgb(255 255 255 / 0.92); box-shadow: 0 2px 8px rgb(23 59 59 / 0.15); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.male-figure__zoom::before { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: 3px 3px 0 -1px currentColor; }
.male-figure__pic:hover .male-figure__zoom { background: var(--teal); color: var(--white); }
.male-figure figcaption { line-height: 1.6; }
.male-stage-labels { margin: 0.9rem 0 0 !important; }
.male-measure-panels { margin: 1rem 0 0; }
.male-measure-panels > div { padding: 1rem; border-radius: var(--panel-radius); background: var(--ivory); }

/* Text explainers: real text, so the labels stay readable at any size */
.prose .male-steps { padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); border-radius: var(--panel-radius); background: var(--sand-soft); }
.male-steps__title { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); margin: 0 0 1rem; }
.male-steps ol { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.male-steps li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3.4rem; border-radius: var(--panel-radius); background: var(--white); margin: 0 !important; }
.male-steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--teal); color: var(--white); font-family: var(--font-serif); font-size: 0.9rem; }
.male-steps li b { display: block; color: var(--teal-ink); margin-bottom: 0.2rem; }
.male-steps li span { display: block; font-size: 0.9rem; line-height: 1.55; color: #3b4343; }
.male-steps figcaption { margin-top: 1rem; }
@media (max-width: 620px) {
  .prose figure.male-steps { margin-inline: 0; padding: 1.1rem; border-radius: var(--panel-radius); background: var(--sand-soft); }
  .prose figure.male-steps > * { padding-inline: 0; }
  .male-steps ol { grid-template-columns: 1fr; }
  .male-figure__zoom { top: 0.5rem; right: calc(var(--gutter) + 0.5rem); }
  .male-measure-panels { padding-inline: var(--gutter); }
}

/* Both partners: links to the female-side topics and the ebook previews */
.male-shared { margin-top: 3rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--panel-radius); background: var(--ivory); border: 1px solid var(--line); scroll-margin-top: 110px; }
.male-shared > * + * { margin-top: 1rem; }
.male-shared h2 { margin-top: 0.4rem; font-size: var(--step-2); }
.male-shared__topics, .male-shared__books { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; }
.male-shared__topics li { margin: 0 !important; }
.male-shared__topics a, .male-shared__books a { display: flex; align-items: center; gap: 0.8rem; height: 100%; padding: 0.8rem; border-radius: var(--panel-radius); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: 0.85rem; line-height: 1.45; transition: border-color 0.2s, box-shadow 0.3s; }
.male-shared__topics a:hover, .male-shared__books a:hover { border-color: var(--sage); box-shadow: var(--shadow-s); }
.male-shared__topics img { width: 3rem; height: 3rem; object-fit: contain; flex: none; }
.male-shared__books img { width: 3.2rem; height: auto; flex: none; box-shadow: 0 4px 10px rgb(23 59 59 / 0.18); }
.male-shared b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--teal-ink); }
.male-shared small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.male-shared__books { grid-template-columns: 1fr; margin-top: 1.4rem !important; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.male-shared__books a span { flex: 1; }

/* Female topic pages: the matching link back to the male guides */
.box--partners { background: var(--white); }
.box--partners ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.box--partners li { margin: 0 !important; }
.box--partners a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: var(--panel-radius); background: var(--sage-soft); text-decoration: none; color: var(--teal-ink); font-weight: 600; font-size: 0.92rem; }
.box--partners a:hover { background: var(--sage); }
.box--partners img { width: 2.4rem; height: 2.4rem; object-fit: contain; flex: none; }

/* 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: 12px; }
.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: 6px; 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 (max-width: 700px) { .male-sprig { display: none; } }
@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 */
.male-figure--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.male-figure--pair figcaption { grid-column: 1 / -1; }
.male-figure--pair .male-figure__zoom { top: 0.55rem; right: 0.55rem; }
.male-shared__art { display: block; width: calc(100% + 2 * clamp(1.4rem, 1rem + 2vw, 2.4rem)); max-width: none; height: clamp(150px, 22vw, 230px); margin: calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 1.2rem; object-fit: cover; object-position: center 45%; border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.male-shared { overflow: hidden; }
@media (max-width: 620px) { .male-figure--pair { grid-template-columns: 1fr; } }
/* 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. */
.male-dial-hero .hero__bg img { opacity: 0.8; transform: scaleX(-1); }
.dial--male .dial__kicker { color: var(--teal); }
.male-dial-hero .dial__caption::before, .male-dial-hero .dial__caption::after { background: var(--teal); }
/* The caption wraps on phones; keep both lines centred between the rules */
.dial__caption { text-align: center; }
/* Female fertility: the same dial hero as the male landing */
.female-dial-hero .hero__bg img { opacity: 0.55; }
.female-dial-hero .breadcrumb { margin-bottom: -0.6rem; }

/* 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. */
.dial--sperm .dial__orbit span::before { display: none; }
.dial__orbit span > svg {
  position: absolute; top: 0; left: 50%; width: calc(var(--cell, 15px) * 3.4); height: auto;
  color: #2f6b72; opacity: 0.88; transform: translate(-50%, -50%); animation: dial-swim 2.6s ease-in-out infinite;
}
.dial__orbit span:nth-child(3n + 2) > svg { color: #6f9aa0; animation-delay: -0.9s; }
.dial__orbit span:nth-child(3n) > svg { color: #8fb0a6; animation-delay: -1.7s; }
.dial__orbit--outer span > svg { color: #4f7f86; opacity: 0.7; animation-name: dial-swim-back; }
@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); } }
@media (prefers-reduced-motion: reduce) { .dial__orbit span > svg { animation: none; } }

/* 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; }
.box__label.box__label--kara { font-family: var(--font-script); font-size: 1.45rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.1; color: var(--rose-ink-deep); }
.box--takeaway .box__label.box__label--kara { color: var(--rose-light); }
.script-kara { font-family: var(--font-script); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--rose-ink); font-size: 1.12em; }
.signature { font-family: var(--font-script); font-style: normal; font-size: 2.8rem; line-height: 1.2; }
.hero h1 em.ln { font-family: var(--font-script); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.05; font-size: 0.92em; padding-top: 0.08em; }
.inside__list b.script-kara { font-family: var(--font-script); font-weight: 400; font-size: 1.5rem; color: var(--rose-ink); }

/* Footer: the four male fertility guides (+ Book Four preview) as a shortcut row under the topics */
.footer-topics--male { margin-top: calc(-1 * clamp(1.2rem, 1rem + 1vw, 2rem)); }
.footer-topics--male h2 a { display: inline-block; height: auto; padding: 0.4rem 0; border-radius: 0; background: none; box-shadow: none; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.footer-topics--male h2 a:hover { background: none; }
.footer-topics--male h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-topics--male ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer-topics--male a { background: rgb(160 196 204 / 0.12); box-shadow: inset 0 0 0 1px rgb(190 214 220 / 0.22); }
.footer-topics--male small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(250 247 241 / 0.78); }
.footer-topics__icon--book { border-radius: 4px; width: 1.75rem; height: 2.45rem; background: transparent; }
.footer-topics__icon--book img { width: 100%; box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); }
@media (max-width: 1100px) { .footer-topics--male ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-topics--male ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-topics--male li:last-child { grid-column: 1 / -1; } }

/* Footer shortcut groups (12 Oct 2026): female topics, male guides, then the other library topics.
   Group headings are links; tiles keep the shared .footer-topics style with a light tint per group. */
.footer-topics--female, .footer-topics--male { margin-bottom: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.footer-topics--male { margin-top: 0; }
.footer-topics h2 a { display: inline-block; height: auto; padding: 0.4rem 0; /* taller tap target on phones */ border-radius: 0; background: none; box-shadow: none; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.footer-topics h2 a:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.footer-topics--female a { background: rgb(216 170 165 / 0.12); box-shadow: inset 0 0 0 1px rgb(226 190 186 / 0.22); }
.footer-topics--female small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(250 247 241 / 0.78); }
.footer-topics--more ul { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .footer-topics--female ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-topics--more ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-topics--female ul, .footer-topics--more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-topics--more li:last-child { grid-column: 1 / -1; } }

/* Dial variant: small egg cells orbit the dial (female fertility), the counterpart of .dial--sperm. */
.dial--eggs .dial__orbit span::before { display: none; }
.dial--eggs .dial__orbit span > svg { width: calc(var(--cell, 15px) * 2.2); color: #b9706a; opacity: 0.95; filter: drop-shadow(0 2px 4px rgb(156 91 85 / 0.18)); animation: dial-egg 7s ease-in-out infinite; }
.dial--eggs .dial__orbit span:nth-child(3n + 2) > svg { color: #d8aaa5; animation-delay: -2.3s; }
.dial--eggs .dial__orbit span:nth-child(3n) > svg { color: #d9b48f; animation-delay: -4.6s; }
.dial--eggs .dial__orbit--outer span > svg { opacity: 0.7; animation-name: dial-egg; }
@keyframes dial-egg { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dial--eggs .dial__orbit span > svg { animation: none; } }

/* Homepage hero: tabs above the dial (option C, chosen 12 Oct 2026) */
.dial-tabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; position: relative; z-index: 1; }
.dial-tabs__list [role="tab"] { font: 700 0.78rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 1.05rem; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.dial-tabs__list [role="tab"]:hover { color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.dial-tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.dial-tabs__list [role="tab"][aria-selected="true"] { background: var(--teal-ink); color: var(--white); box-shadow: none; }
.dial-tabs__list #dial-tab-female[aria-selected="true"] { background: var(--rose-ink); }
.dial-tabs__list #dial-tab-male[aria-selected="true"] { background: #33566a; }

/* Learn page: the tabbed dial beside the search and filters (12 Oct 2026) */
.library-hero { overflow: hidden; }
.page-hero .container.library-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; justify-items: stretch; }
.library-hero__copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.library-hero__dial { min-width: 0; }
.library-hero__dial .dial { width: min(100%, 460px); }
@media (max-width: 1000px) {
  .page-hero .container.library-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .library-hero__dial { max-width: 500px; justify-self: center; width: 100%; }
}

/* Start Here: the tabbed dial after the six steps (12 Oct 2026) */
.start-dial { overflow: hidden; }
.start-dial__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.start-dial__copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.start-dial__copy h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.start-dial__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.start-dial__dial { min-width: 0; }
.start-dial__dial .dial { width: min(100%, 460px); }
@media (max-width: 1000px) {
  .start-dial__grid { grid-template-columns: minmax(0, 1fr); }
  .start-dial__dial { max-width: 500px; justify-self: center; width: 100%; }
}

/* ================= 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 */
  .hero--dial h1 .ln { animation: motion-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .hero--dial h1 .ln:nth-child(2) { animation-delay: 0.12s; }
  .hero--dial h1 em.ln { animation: motion-write 1.5s cubic-bezier(0.55, 0.05, 0.3, 1) 0.5s backwards; }
  .hero--dial .hero__copy > .lead { animation: motion-rise 0.7s ease 1.2s backwards; }
  .hero--dial .hero-search { animation: motion-rise 0.7s ease 1.35s backwards; }
  .hero--dial .hero-popular { animation: motion-rise 0.7s ease 1.5s backwards; }
  .hero--dial .hero__bg img { animation: motion-breathe 16s ease-in-out infinite alternate; }

  /* 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 .dial__seg--band > * { animation-name: motion-sweep; animation-duration: 0.8s; }
  .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; }
  .dial .dial__core { animation: motion-rise 0.6s ease 0.9s backwards; }
  .dial .dial__orbit > span { animation: motion-fade 1s ease 1.3s backwards; }
  .dial + .dial__caption { animation: motion-fade 0.8s ease 1.4s backwards; }
  /* The female and male tab panels turn in instead (C), and the Start Here dial waits until it is seen */
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__seg > *,
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__core,
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__orbit > span,
  .dial-tabs__panel + .dial-tabs__panel .dial__caption { animation-name: none; }
  .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) */
  .dial-tabs__panel.is-out { animation: motion-turn-out 0.38s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
  .dial-tabs__panel.is-in { animation: motion-turn-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

  /* F · Cards lift and lean towards the pointer (main.js sets --rx/--ry on fine pointers) */
  .pcard { 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; }
  .pcard, .pcard:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .pcard:hover, .pcard:focus-visible { translate: 0 -6px; box-shadow: inset 0 0 0 1px var(--line), 0 22px 40px -22px rgb(23 59 59 / 0.45); }
  .pcard__pic img { transition: scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pcard:hover .pcard__pic img, .pcard:focus-visible .pcard__pic img { scale: 1.06; rotate: -2deg; }
  .footer-topics a { transition: background-color 0.2s, translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; }
  .footer-topics ul a:hover, .footer-topics ul a:focus-visible { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgb(250 247 241 / 0.3), 0 10px 20px -12px rgb(0 0 0 / 0.5); }
  .guide-stage__book { transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; }
  .guide-stage__book:hover { translate: 0 -10px; filter: drop-shadow(0 16px 18px rgb(0 0 0 / 0.25)); }

  /* 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) */
.sperm-egg { margin: 0; }
.sperm-egg svg { display: block; width: 100%; height: auto; }
.sperm-egg figcaption { margin-top: 0.3rem; font-size: 0.75rem; font-style: italic; color: var(--muted); text-align: center; }
.male-shared__art.male-shared__art--motion { height: auto; padding: 1rem clamp(1rem, 3vw, 2rem) 0.4rem; background: linear-gradient(120deg, var(--rose-soft), var(--ivory) 60%); }
.box--partners .sperm-egg { margin: 0.6rem auto 1.1rem; max-width: 520px; }
/* The watercolour banner sits on top, the sperm animation directly beneath it (13 Oct 2026) */
.male-shared__art + .male-shared__art--motion { width: auto; margin: -1.2rem calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 1.2rem; border-radius: 0; background: linear-gradient(180deg, var(--ivory), var(--rose-soft)); padding-top: 0.6rem; }

/* Homepage male band: the sperm-meets-egg animation on the right (13 Oct 2026) */
.male-feature--motion { overflow: hidden; }
.male-feature--motion .male-feature__grid { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 400px); max-width: none; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.male-feature__motion { min-width: 0; }
@media (max-width: 1000px) { .male-feature--motion .male-feature__grid { grid-template-columns: 140px minmax(0, 1fr); } .male-feature__motion { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; } }
@media (max-width: 600px) { .male-feature--motion .male-feature__grid { grid-template-columns: 1fr; } }

/* Homepage female band (13 Oct 2026): mirrors the male band, with the egg orbit on the right */
.female-feature { background: linear-gradient(120deg, var(--rose-soft), var(--ivory) 70%); overflow: hidden; }
.female-feature__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center; }
.female-feature__grid > img { width: 100%; height: auto; }
.female-feature__copy, .male-feature__copy { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.female-feature__motion { min-width: 0; }
@media (max-width: 1000px) { .female-feature__grid { grid-template-columns: 140px minmax(0, 1fr); } .female-feature__motion { grid-column: 1 / -1; } }
@media (max-width: 600px) { .female-feature__grid { grid-template-columns: 1fr; } .female-feature__grid > img { width: 130px; } }

/* Egg orbit (views/partials/egg-orbit.ejs) */
.egg-orbit { margin: 0 auto; width: min(100%, 300px); }
.egg-orbit__stage { position: relative; aspect-ratio: 1; }
.egg-orbit__egg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.egg-orbit__ring { position: absolute; inset: 2%; }
.egg-orbit__ring--outer { inset: -6%; }
.egg-orbit__ring span { position: absolute; inset: 0; }
.egg-orbit__ring span svg { position: absolute; top: 0; left: 50%; width: 30px; height: auto; transform: translate(-50%, -50%); color: #b9706a; }
.egg-orbit__ring span:nth-child(3n + 2) svg { color: #d8aaa5; width: 24px; }
.egg-orbit__ring span:nth-child(3n) svg { color: #d9b48f; width: 20px; }
.egg-orbit__ring--outer span svg { opacity: 0.7; width: 18px; }
.egg-orbit__ring span:nth-child(1) { transform: rotate(8deg); }
.egg-orbit__ring span:nth-child(2) { transform: rotate(58deg); }
.egg-orbit__ring span:nth-child(3) { transform: rotate(112deg); }
.egg-orbit__ring span:nth-child(4) { transform: rotate(166deg); }
.egg-orbit__ring span:nth-child(5) { transform: rotate(214deg); }
.egg-orbit__ring span:nth-child(6) { transform: rotate(262deg); }
.egg-orbit__ring span:nth-child(7) { transform: rotate(318deg); }
.egg-orbit__ring--outer span:nth-child(1) { transform: rotate(34deg); }
.egg-orbit__ring--outer span:nth-child(2) { transform: rotate(104deg); }
.egg-orbit__ring--outer span:nth-child(3) { transform: rotate(178deg); }
.egg-orbit__ring--outer span:nth-child(4) { transform: rotate(240deg); }
.egg-orbit__ring--outer span:nth-child(5) { transform: rotate(296deg); }
.egg-orbit figcaption { margin-top: 2rem; text-align: center; font-size: 0.75rem; font-style: italic; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .egg-orbit__ring { animation: dial-orbit 60s linear infinite; }
  .egg-orbit__ring--outer { animation-duration: 90s; animation-direction: reverse; }
  .egg-orbit__ring span svg { animation: egg-orbit-pulse 7s ease-in-out infinite; }
  .egg-orbit__ring span:nth-child(3n + 2) svg { animation-delay: -2.3s; }
  .egg-orbit__ring span:nth-child(3n) svg { animation-delay: -4.6s; }
}
@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-timeline-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none !important; padding: 0 !important; margin: 1rem 0 0 !important; text-align: center; }
.male-timeline-steps li { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.male-timeline-steps__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal-ink); color: var(--white); font-size: 0.75rem; font-weight: 700; margin-bottom: 0.2rem; }
.male-timeline-steps b { font-size: 0.95rem; color: var(--teal-ink); }
.male-timeline-steps li > span:last-child { font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.male-ruler { margin: 1.4rem 0.4rem 0; }
.male-ruler__head { display: flex; justify-content: space-between; align-items: end; font-size: 0.8rem; font-weight: 700; color: var(--teal-ink); }
.male-ruler__head span:last-child { position: relative; padding-bottom: 0.2rem; }
.male-ruler__head span:last-child::after { content: ""; position: absolute; right: 0; top: 100%; width: 2px; height: 2.4rem; background: var(--teal-ink); }
.male-ruler__track { position: relative; height: 4px; margin-top: 0.75rem; border-radius: 2px; background: var(--line); }
.male-ruler__track span { position: absolute; left: 0; top: -4px; width: 83%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #cfe0d8, #5f8f86 66%, rgb(95 143 134 / 0.35)); }
.male-ruler__ticks { display: flex; justify-content: space-between; list-style: none !important; padding: 0 0.6rem 0 0 !important; margin: 0.55rem 0 0 !important; font-size: 0.75rem; color: var(--muted); }
.male-ruler__ticks li { margin: 0 !important; }
.male-ruler__note { margin: 0.9rem 0 0 !important; text-align: center; font-size: 0.88rem; color: var(--teal-ink); }
@media (max-width: 600px) {
  .male-timeline-steps { grid-template-columns: 1fr; gap: 0.7rem; text-align: left; padding-inline: var(--gutter) !important; }
  .male-timeline-steps li { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 0.7rem; align-items: start; }
  .male-timeline-steps__n { grid-row: span 2; margin: 0; }
  .male-ruler { margin-inline: calc(var(--gutter) + 0.2rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .male-ruler__track span { transform-origin: left; transition: scale 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .js .male-ruler:not(.is-inview) .male-ruler__track span { scale: 0 1; }
}

/* ================= Meet Kara · her background (verified qualifications, 13 Oct 2026) ================= */
.mk-bg { background: linear-gradient(180deg, var(--sage-soft), var(--ivory)); }
.mk-bg__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.mk-bg__text h2 { margin: 0.7rem 0 1.3rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
.mk-bg__text p { max-width: 60ch; color: var(--muted); }
.mk-bg__text p + p { margin-top: 1rem; }
.mk-bg__text .lead { color: var(--teal-ink); }
.mk-quals { list-style: none; margin: 0; padding: 0.4rem 1.5rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgb(23 59 59 / 0.35); }
.mk-qual { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; }
.mk-qual + .mk-qual { border-top: 1px solid var(--line); }
.mk-qual__year { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.3; color: var(--rose-ink); font-variant-numeric: tabular-nums; }
.mk-qual__what b { font-weight: 700; color: var(--teal-ink); }
.mk-qual__honour { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); white-space: nowrap; }
.mk-qual__inst { display: block; margin-top: 0.15rem; font-size: 0.88rem; color: var(--muted); }
.mk-qual--reg .mk-qual__year { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; line-height: 2.4; color: var(--teal-ink); }
.mk-qual--reg { margin-inline: -1.5rem; padding-inline: 1.5rem; background: var(--sage-soft); border-radius: var(--panel-radius) 18px 0 0; }
.mk-research { margin-top: 1.4rem; padding: 1.3rem 1.5rem; border-radius: var(--panel-radius); background: var(--sand-soft); }
.mk-research ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.mk-research li { display: grid; gap: 0.2rem; font-size: 0.9rem; color: var(--muted); }
.mk-research b { color: var(--teal-ink); font-size: 0.98rem; }
@media (max-width: 860px) { .mk-bg__grid { grid-template-columns: minmax(0, 1fr); } }
.mk-qual--reg:first-child { margin-top: -0.4rem; }
@media (max-width: 480px) { .mk-quals { padding-inline: 1.1rem; } .mk-qual { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.75rem; } .mk-qual--reg { margin-inline: -1.1rem; padding-inline: 1.1rem; } }
.byline__cred { display: block; margin-top: 0.3rem; font-family: var(--font-sans); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.guide-hero .byline__cred { color: rgb(250 247 241 / 0.85); }
/* With her real photo, keep the badges off her face */
.kara-feature .chip-float:nth-of-type(2) { top: auto; bottom: 30%; right: -9%; }
.kara-feature .chip-float:nth-of-type(3) { bottom: 7%; left: -10%; }
/* 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. */
.evidence-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid transparent; border-radius: 999px; font: 700 0.74rem/1.2 var(--font-sans); letter-spacing: 0.03em; white-space: nowrap;
}
.evidence-pill--strong { background: var(--sage); color: var(--teal-ink); border-color: rgb(23 59 59 / 0.35); }
.evidence-pill--moderate { background: var(--sand); color: var(--charcoal); border-color: rgb(41 45 45 / 0.3); }
.evidence-pill--limited { background: var(--rose-soft); color: var(--rose-ink-deep); border-color: rgb(138 75 69 / 0.4); }
.evidence-pill__dots { display: inline-flex; gap: 3px; }
.evidence-pill__dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.evidence-pill--strong .evidence-pill__dots i,
.evidence-pill--moderate .evidence-pill__dots i:nth-child(-n + 2),
.evidence-pill--limited .evidence-pill__dots i:first-child { background: currentColor; }
.box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.box__head .box__label { margin-bottom: 0; }

.box--disagree { background: var(--sand-soft); border: 0; border-left: 4px solid var(--teal-ink); }
.box--disagree .box__label { color: var(--rose-ink-deep); }
.prose .box--disagree__topic { margin: 0 0 0.9rem; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.35; color: var(--teal-ink); }
.box--disagree__list { list-style: none; margin: 0; padding: 0; }
.prose .box--disagree__list li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.25rem 1.25rem; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.box--disagree__list a { font-size: 0.92rem; font-weight: 700; color: var(--teal-ink); overflow-wrap: anywhere; }
.box--disagree__list span { font-size: 0.95rem; color: #3b4343; }
.prose .box--disagree__ask { margin-top: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 700; color: var(--teal-ink); }
@media (max-width: 600px) { .prose .box--disagree__list li { grid-template-columns: minmax(0, 1fr); } }

.evidence-legend { scroll-margin-top: 110px; }
.evidence-legend__list { display: grid; gap: 0.85rem; margin: 1rem 0; }
.evidence-legend__list div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start; }
.evidence-legend__list dd { margin: 0; font-size: 0.92rem; color: #3b4343; }
@media (max-width: 600px) { .evidence-legend__list div { grid-template-columns: minmax(0, 1fr); } }
.prose .evidence-legend-link { font-size: 0.88rem; color: var(--muted); }
.prose .male-kara-note { padding: 0.8rem 1.1rem; border-left: 3px solid var(--teal); border-radius: var(--panel-radius); background: var(--sage-soft); font-size: 0.92rem; color: var(--teal-ink); }
.prose .male-review--flag { font-size: 0.92rem; }

/* 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--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.prose .sec-pic--flip figure { order: 2; }
.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); }
  .prose .sec-pic--flip figure { order: 0; }
}
.glance { margin: 2.2rem 0 2.6rem; }
.glance h2 { margin-bottom: 0.3rem; }
.glance__lead { margin: 0 0 1rem; color: var(--muted); }
.glance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.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); }
.glance__pic { width: 88px; height: 88px; margin-bottom: 0.35rem; border-radius: 50%; overflow: hidden; background: var(--ivory, #FAF7F1); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line); }
.prose .glance__pic img { width: 100%; height: 100%; object-fit: cover; padding: 0; border: 0; border-radius: 0; }
.prose .glance__card h3 { margin: 0; font-size: 1.15rem; }
.prose .glance__card p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.prose .glance__card .glance__who { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.glance__tag { align-self: flex-start; margin-top: auto; padding: 0.42rem 0.7rem; border-radius: 99px; font-size: 0.68rem; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.glance__tag--essential { background: var(--teal); color: var(--white); }
.glance__tag--gain { background: #dcebe2; color: #1f5a3d; }
.glance__tag--limited { background: #efe4d6; color: #6b4a22; }
.glance__tag--caution { background: #f4e1de; color: #8d3b33; }
@media (max-width: 560px) { .glance__grid { grid-template-columns: minmax(0, 1fr); } }

/* 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__count { font-size: 0.85rem; color: var(--muted); }
.sources__hint { margin-left: auto; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.sources__hint::after { content: ' +'; }
details.sources--fold[open] .sources__hint { font-size: 0; }
details.sources--fold[open] .sources__hint::after { content: 'Hide the research −'; font-size: 0.78rem; }
.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; }
.prose .sec-pic--contain figure img { object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 0.6rem; }
@media print { details.sources--fold > ul { display: block; } }