/* ==========================================================================
   The Embryology Course with Kara: the course layer.
   Loaded after the website's own styles.css, and built only from its tokens
   (teal, ivory, sage, rose, sand; Lora, Manrope, Satisfy), so the course is
   the website's design system, extended with course components.
   ========================================================================== */

/* ---------- Header: the course name beside the logo ---------- */
.course-brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.course-brand__tag {
  padding-left: 0.8rem; border-left: 1px solid var(--rose);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.25; color: var(--teal);
  max-width: 9.5rem;
}
/* On phones the tag stays (25 Oct 2026), in its short form, so the header never looks like the website's
   while behaving differently; the way back to the website is in the menu and the breadcrumb */
@media (max-width: 520px) {
  .course-brand { gap: 0.5rem; }
  .course-brand__tag { padding-left: 0.5rem; font-size: 0.64rem; letter-spacing: 0.06em; max-width: 6.4rem; }
  .course-brand__the { display: none; }
}
/* Small phones: the logo and the course tag need the room, so "Start the course" lives in the menu (it is also on every page) */
@media (max-width: 440px) { .course-brand ~ .header-actions .header-cta { display: none; } }
/* The smallest phones (6 Nov 2026 audit: at 320 px the menu button sat partly off screen) */
@media (max-width: 360px) { .course-brand { gap: 0.4rem; } .course-brand img { width: 104px; height: auto; } .course-brand__tag { padding-left: 0.4rem; font-size: 0.58rem; max-width: 5.2rem; } }
.nav-mobile-site { display: none; }
@media (max-width: 1180px) { .primary-nav .nav-mobile-site { display: block; } .primary-nav .nav-mobile-site a { color: var(--teal); } }
.course-review-strip { margin: 0; padding: 0.45rem 0; background: var(--rose-soft); color: var(--rose-ink-deep); font-size: 0.8rem; }
.course-review-strip .container { display: block; }
/* Modules menu (1 Nov 2026): the website's Learn panel look, a round painting beside each module */
.course-mega .nav-mega__h { display: block; }
.course-mega .nav-mega__h:not(:first-child) { margin-top: 1.5rem; }
.course-mega li img { object-fit: cover; padding: 0; border: 1px solid var(--line); }
.course-mega__n { flex: none; width: 1.35rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rose-ink); font-size: 0.85rem; }
.course-mega__art { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: var(--picture-radius, 8px); margin-bottom: 0.85rem; }
.course-mega__lead { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 1181px) { .course-mega { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); } }
@media (max-width: 1180px) { .course-mega__art { display: none; } }

/* ---------- Home hero ---------- */
.course-hero h1 { max-width: 14ch; }
.course-hero__with { display: block; font-size: 0.62em; line-height: 1.1; color: var(--rose-ink); letter-spacing: 0; font-weight: 400; }
.course-hero__fig svg, .course-hero__fig img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.course-resume { font-size: 0.9rem; color: var(--muted); }
.course-resume a { font-weight: 700; }
.course-review-line { margin: 0; font-size: 0.8rem; color: var(--rose-ink-deep); }
@media (max-width: 860px) { .topic-hero__grid { grid-template-columns: 1fr; } }

/* ---------- Teacher band ---------- */
.course-teacher__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 860px) { .course-teacher__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.course-teacher__pic { margin: 0; max-width: 380px; }
@media (max-width: 859px) { .course-teacher__pic { max-width: 280px; } }
.course-teacher__pic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--picture-radius) var(--picture-radius); box-shadow: var(--shadow-l); }
.course-teacher .box { margin-top: 1.5rem; }
.course-teacher .box--explains p { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); }

/* ---------- Module cards ---------- */
.module-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.module-card {
  height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 0.45rem; padding: 1.3rem 1.3rem 1.1rem;
  background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.module-card:hover, .module-card:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow); color: inherit; }
.module-card__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; 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); margin-bottom: 0.4rem; }
.module-card__icon svg { width: 78%; height: 78%; }
/* Module covers: the module's own watercolour, cropped into the round badge */
.module-card__icon--art { overflow: hidden; background: #faf6ec; box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.12), 0 6px 14px -10px rgb(23 59 59 / 0.45); }
.module-card__icon--art img { width: 100%; height: 100%; object-fit: cover; }
.module-card__icon--art { width: 76px; height: 76px; }
.module-hero__art { display: grid; place-items: center; background: #faf6ec; padding: clamp(0.6rem, 0.4rem + 1vw, 1.1rem); }
.module-hero__art img { width: 100%; height: auto; max-height: 400px; object-fit: contain; border-radius: calc(var(--picture-radius) * 0.75); }
.module-card__num-big { font-family: var(--font-serif); font-size: 1.5rem; color: var(--teal); }
.module-card__meta { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.module-card__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); line-height: 1.2; color: var(--teal-ink); }
.module-card__lead { font-size: 0.92rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.module-card__progress { display: flex; align-items: center; gap: 0.7rem; padding-top: 0.7rem; margin-top: 0.3rem; border-top: 1px solid var(--line); }
.module-card__bar { flex: 1; height: 4px; border-radius: 4px; background: var(--sage-soft); overflow: hidden; }
.module-card__bar > span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--teal); transition: width 0.6s var(--ease); }
.module-card__state { font-size: 0.74rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.is-complete .module-card__state, .module-card__state.is-complete { color: var(--teal); }

/* ---------- Module and lesson heroes ---------- */
.module-hero__icon svg { width: 62%; height: auto; }
.lesson-hero .topic-hero__copy { max-width: 820px; }
.lesson-hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); }
.lesson-progress { display: flex; align-items: center; gap: 0.9rem; width: min(100%, 420px); margin-top: 0.3rem; }
.lesson-progress__bar { flex: 1; height: 4px; border-radius: 4px; background: rgb(40 93 93 / 0.12); overflow: hidden; }
.lesson-progress__bar > span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--rose); transition: width 0.6s var(--ease); }
.lesson-progress__label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-section { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ---------- Lesson sidebar: on-page rail (the website's .toc) plus the module's lessons ---------- */
.lesson-aside { display: none; }
@media (min-width: 1000px) {
  .lesson-aside { display: grid; gap: 2.2rem; align-content: start; position: sticky; top: 7rem; align-self: start; max-height: calc(100vh - 8rem); overflow: auto; padding-bottom: 1rem; scrollbar-width: thin; }
  .lesson-aside .toc { position: static; }
}
.course-lessons__h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--teal-ink); margin: 0; }
.course-lessons__h a { color: var(--muted); text-decoration: none; }
.course-lessons ol { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.course-lessons a { display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.45rem 0; font-size: 0.86rem; line-height: 1.35; color: var(--muted); text-decoration: none; }
.course-lessons a span { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); }
.course-lessons a:hover { color: var(--teal); }
.course-lessons a[aria-current='page'] { color: var(--teal-ink); font-weight: 700; }
.course-lessons a.is-done::after { content: '✓'; grid-column: 2; font-size: 0.75rem; color: var(--teal); }

/* ---------- Lesson body ---------- */
.lesson-body > .box, .lesson-body > .myths, .lesson-body > .deeper, .lesson-body > .check, .lesson-body > .fig { margin-block: 2rem; }
.lesson-body > p:first-child { font-size: var(--step-1); line-height: 1.6; color: var(--charcoal); }
.lesson-body h2 { scroll-margin-top: 7rem; }
.lesson-body ul, .lesson-body ol:not([class]) { padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.box--note { background: var(--sand-soft); border-color: transparent; }
.box--note .box__label { color: var(--rose-ink-deep); }
.box--words .terms { margin: 0; }
.box--words { background: var(--white); }
.module-summary ul { padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.module-summary li { font-family: var(--font-serif); font-size: var(--step-0); line-height: 1.5; color: var(--ivory); }
.module-summary li::marker { color: var(--rose-light); }

.table-wrap:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.table-wrap { overflow-x: auto; margin-block: 1.75rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table-wrap th, .table-wrap td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap th { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); background: var(--sage-soft); }
.table-wrap tr:last-child td { border-bottom: 0; }

/* ---------- Delving deeper: the student layer ---------- */
.deeper { border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--rose); }
.deeper summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.3rem; }
.deeper summary::-webkit-details-marker { display: none; }
.deeper summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--teal); transition: transform 0.25s var(--ease); }
.deeper[open] summary::after { transform: rotate(45deg); }
.deeper__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink-deep); white-space: nowrap; }
.deeper__hint { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--muted); }
@media (max-width: 560px) { .deeper summary { grid-template-columns: 1fr auto; } .deeper__hint { grid-column: 1; } .deeper summary::after { grid-row: 1 / span 2; grid-column: 2; } }
.deeper__body { padding: 0 1.3rem 1.3rem; border-top: 1px dashed var(--line); }
.deeper__body > * + * { margin-top: 1rem; }
.deeper__body > :first-child { margin-top: 1rem; }
.deeper__body p, .deeper__body li { font-size: 0.95rem; }

/* ---------- Figures (hand-drawn SVGs, inlined) ---------- */
.fig { margin: 0; }
.fig__art { position: relative; padding: clamp(0.9rem, 0.5rem + 1.5vw, 1.6rem); border-radius: var(--picture-radius); background: var(--white); border: 1px solid var(--line); }
.fig__art > svg, .fig__pan > svg { display: block; width: 100%; height: auto; }
/* Painted pictures reused from the website */
/* The site's .prose figure img frame (border, padding) would double the card's own frame */
.prose .fig--art .fig__art > img { display: block; width: 100%; height: auto; padding: 0; border: 0; background: none; border-radius: calc(var(--picture-radius) * 0.75); }
.zoom__art img { width: 100%; height: auto; }
/* Painted figures: the watercolour fills the card, on the same warm paper colour as the painting */
.fig--painted .fig__art { padding: 0; background: #faf6ec; }
/* Drawn figures (charts, timelines) sit on the same warm paper as the paintings */
/* Charts sit on a sheet of the course's own painted paper, like the paintings */
.fig--drawn .fig__art { background: #faf6ec url("/art/c-paper.webp") center / cover no-repeat; }
.fig--painted .fig__art > svg, .fig--painted .fig__pan > svg { border-radius: var(--picture-radius); overflow: hidden; }
.prose .fig figcaption { margin-top: 0.75rem; padding-right: 3rem; font-size: 0.86rem; font-style: normal; color: var(--muted); text-align: left; }
.fig__num { font-weight: 700; letter-spacing: 0.06em; color: var(--teal); margin-right: 0.35rem; }
/* The enlarge button sits just below the picture, at the right of the caption line, so it never covers a label */
.fig__zoom { position: absolute; right: 0; top: calc(100% + 0.55rem); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ivory); color: var(--teal); box-shadow: 0 0 0 1px var(--line); opacity: 0.85; }
.fig__zoom:hover { opacity: 1; background: var(--sage-soft); }
.fig__zoom svg { width: 1.2rem; height: 1.2rem; }
.no-js .fig__zoom { display: none; }
.fig__missing, .fig__loading { margin: 0; padding: 2rem 1rem; text-align: center; font-style: italic; color: var(--muted); }

.zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgb(23 59 59 / 0.82); }
.zoom__inner { position: relative; width: min(100%, 1200px); max-height: 100%; overflow: auto; padding: clamp(1rem, 3vw, 2.5rem); border-radius: var(--picture-radius); background: var(--white); }
.zoom__art svg { width: 100%; height: auto; min-width: 640px; }
.zoom__cap { margin-top: 0.8rem; font-size: 0.9rem; color: var(--muted); }
.zoom__close { position: sticky; float: right; top: 0; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--teal); color: var(--ivory); font-size: 1.5rem; line-height: 1; z-index: 2; }

/* ---------- Check your understanding ---------- */
.check { padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-radius: var(--panel-radius); background: var(--sage-soft); }
.check__label { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.check__q { margin: 0 0 1rem; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.4; color: var(--teal-ink); }
.check__opts { display: grid; gap: 0.55rem; }
.check__opt { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 0.6rem; width: 100%; padding: 0.75rem 1rem; text-align: left; border: 0; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.97rem; line-height: 1.45; transition: box-shadow 0.2s, background-color 0.2s; }
.check__opt:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--teal); }
.check__key, .quiz__key { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--sage); font-size: 0.78rem; font-weight: 700; color: var(--teal); }
.check__opt.is-right { background: var(--white); box-shadow: inset 0 0 0 2px var(--teal); }
.check__opt.is-right .check__key { background: var(--teal); color: var(--ivory); box-shadow: none; }
.check__opt.is-wrong { background: var(--rose-soft); box-shadow: inset 0 0 0 1.5px var(--rose); }
.check__opt.is-wrong .check__key { background: var(--white); color: var(--rose-ink); box-shadow: inset 0 0 0 1px var(--rose); }
.check__opt:disabled { cursor: default; color: inherit; }
.check__result { margin: 0.9rem 0 0; font-weight: 700; color: var(--teal-ink); min-height: 1px; }
.check__result:empty { margin: 0; }
.check__why p { margin-top: 0.3rem; color: #3b4343; }
.check__reveal { margin-top: 1rem; }

/* ---------- Sources, done button, pager ---------- */
/* Sources use the website's sources--fold (25 Oct 2026); the course only adds the space above */
.lesson-sources { margin-top: 2.5rem; }
/* The review notice: the website's male-review box, at the top of each lesson, module and quiz */
.course-review { margin: 0 0 1.6rem; font-size: 0.9rem; }
/* The end of a lesson: Watch with Kara, then Read next on Fertility with Kara (the website's box--links) */
.lesson-body .box--links { margin-top: 2.2rem; }
.lesson-body .box--links + .box--links { margin-top: 1rem; }
.lesson-done { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.lesson-done p { margin: 0; }
.lesson-done .btn.is-done { --btn-bg: var(--sage-soft); --btn-fg: var(--teal-ink); --btn-bd: var(--sage); }
.course-pager { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.course-pager__link { display: grid; gap: 0.3rem; padding: 1.1rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.course-pager__link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
.course-pager__link--next { text-align: right; background: var(--teal); box-shadow: none; }
.course-pager__link--next:hover { box-shadow: var(--shadow); }
.course-pager__link--next .course-pager__dir { color: var(--rose-light); }
.course-pager__dir { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.course-pager__link b { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); line-height: 1.25; color: var(--teal-ink); }
.course-pager__link.course-pager__link--next b { color: var(--ivory); }

/* ---------- Module page ---------- */
.lesson-list { list-style: none; padding: 0 !important; display: grid; gap: 0.6rem !important; }
.lesson-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.lesson-row:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); color: inherit; }
.lesson-row__n { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--rose-ink); }
.lesson-row__body { display: grid; gap: 0.15rem; }
.lesson-row__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.08rem; color: var(--teal-ink); }
.lesson-row__body span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.lesson-row__meta { display: grid; justify-items: end; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.lesson-row__done { color: var(--teal); font-weight: 700; }
.lesson-row--quiz { background: var(--sand-soft); box-shadow: none; }
@media (max-width: 560px) { .lesson-row { grid-template-columns: 2.2rem 1fr; } .lesson-row__meta { grid-column: 2; justify-items: start; } }
.deeper-links { list-style: none; padding: 0 !important; display: grid; gap: 0.6rem !important; }
.deeper-links a { display: grid; gap: 0.2rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--rose); background: var(--white); text-decoration: none; border-radius: var(--panel-radius); }
.deeper-links b { font-weight: 600; }
.deeper-links span { font-size: 0.88rem; color: var(--muted); }
/* Module page "Keep learning" (25 Oct 2026): first the website, with its topic icons, then further reading */
.deeper-links--site a { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem; border-left-color: var(--teal); }
.deeper-links__icon { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; }
.deeper-links__icon img { width: 74%; height: auto; }
.deeper-links__body { display: grid; gap: 0.15rem; }
.deeper-links__body small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.keep-books { margin-top: 1rem; font-size: 0.92rem; }

/* ---------- Quizzes ---------- */
.quiz__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; counter-reset: q; }
.quiz__q { padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.quiz__q fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.quiz__q legend { display: grid; grid-template-columns: 2.2rem 1fr; margin-bottom: 0.7rem; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.4; color: var(--teal-ink); }
.quiz__n { font-style: italic; color: var(--rose-ink); }
.quiz__from { grid-column: 2; display: block; margin-top: 0.3rem; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quiz__opt { display: grid; grid-template-columns: auto 2rem 1fr; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--panel-radius); background: var(--ivory); cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
.quiz__opt:hover { box-shadow: inset 0 0 0 1px var(--teal); }
.quiz__opt input { accent-color: var(--teal); width: 1.05rem; height: 1.05rem; }
.quiz__opt:has(input:checked) { background: var(--sage-soft); box-shadow: inset 0 0 0 1.5px var(--teal); }
.quiz__opt.is-right { background: var(--white); box-shadow: inset 0 0 0 2px var(--teal); }
.quiz__opt.is-wrong { background: var(--rose-soft); box-shadow: inset 0 0 0 1.5px var(--rose); }
.quiz__why { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); font-size: 0.95rem; }
.quiz__q.is-unanswered { box-shadow: inset 0 0 0 2px var(--rose); }
.quiz__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.quiz__result { margin-top: 2rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); }
.quiz__result h2 { color: var(--ivory); font-size: var(--step-3); }
.quiz__result p { color: rgb(250 247 241 / 0.88); margin-top: 0.6rem; }
.quiz__result .btn-row { margin-top: 1.2rem; }

/* ---------- Syllabus ---------- */
.syllabus-final { margin-top: 3rem; }

/* ---------- Glossary ---------- */
.course-search input { width: 100%; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--white); font-size: 1rem; }
.course-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ---------- Search ---------- */
.course-search { display: flex; gap: 0.6rem; }
.course-search__count { margin-top: 1rem; }

/* ---------- Progress ---------- */
.progress-summary { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 3rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 860px) { .progress-summary { grid-template-columns: 150px 1fr auto; } }
.progress-ring { position: relative; width: 150px; height: 150px; }
.progress-ring svg { width: 100%; height: 100%; }
.progress-ring [data-ring-arc] { transition: stroke-dashoffset 0.9s var(--ease); }
.progress-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 2rem; color: var(--teal-ink); }

/* ---------- Certificate ---------- */
.cert-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem 1rem; margin-bottom: 2rem; }
.cert-tools label { width: 100%; font-weight: 600; }
.cert-tools input { flex: 1 1 260px; padding: 0.85rem 1.1rem; border: 1px solid var(--line); background: var(--white); font-size: 1rem; }
/* The painted certificate (25 Oct 2026): c-certificate.webp at 3:2, text placed as in the figure m25-certificate.svg
   (a 720 x 480 box, so 1cqw = 7.2 units there). Container units keep the layout the same on a phone, a laptop and paper. */
.certificate { position: relative; container-type: inline-size; max-width: 1000px; margin-inline: auto; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ivory); box-shadow: var(--shadow-l); text-align: center; }
.certificate__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.certificate > p, .certificate__sign { position: absolute; margin: 0; line-height: 1.2; }
.certificate > p { left: 12%; right: 12%; text-wrap-style: balance; }
.certificate__kicker { top: 21.6%; font-size: 2.08cqw; font-weight: 700; letter-spacing: 0.56cqw; text-transform: uppercase; color: var(--teal); }
.certificate__this { top: 29.8%; font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: 2.36cqw; }
.certificate__name { top: 36.25%; left: 18% !important; right: 18% !important; height: 10.8%; display: grid; align-items: end; justify-items: center; font-family: var(--font-serif); font-size: 4.44cqw; line-height: 1.1; color: var(--teal-ink); white-space: nowrap; }
.certificate__name::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 41.7cqw; transform: translateX(-50%); border-bottom: 0.21cqw solid var(--rose); }
.certificate__name span { padding-bottom: 0.6cqw; max-width: 100%; }
.certificate__did { top: 49.6%; left: 10% !important; right: 10% !important; font-size: 1.72cqw; line-height: 1.5; color: #3b4343; }
.certificate__small { top: 59.6%; left: 22% !important; right: 22% !important; font-size: 1.25cqw; line-height: 1.4; color: var(--muted); }
.certificate__sign { top: 64%; height: 6.9%; width: 20.8%; display: grid; grid-template-rows: 1fr auto; align-items: end; }
.certificate__sign--author { left: 20.8%; }
.certificate__sign--date { left: 58.3%; }
.certificate__sig, .certificate__date { border-bottom: 0.21cqw solid var(--sage); padding-bottom: 0.5cqw; white-space: nowrap; }
.certificate__sig { font-size: 2.9cqw; line-height: 1; color: var(--rose-ink); }
.certificate__date { font-family: var(--font-serif); font-size: 1.9cqw; color: var(--teal-ink); }
.certificate__role { position: absolute; top: calc(100% + 1.2cqw); left: -20%; right: -20%; font-size: 1.3cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body[data-page='certificate'] > *:not(main), body[data-page='certificate'] main > *:not(.section), body[data-page='certificate'] .cert-tools, body[data-page='certificate'] .cert-locked, body[data-page='certificate'] .cert-ready { display: none !important; }
  body[data-page='certificate'] .section { padding: 0; }
  body[data-page='certificate'] .certificate { box-shadow: none; width: 297mm; max-width: none; margin: 6mm 0 0; break-inside: avoid; }
  body[data-page='certificate'] main { padding: 0; }
  body[data-page='certificate'] .section > .container { width: auto; margin: 0; padding: 0; max-width: none; }
  body[data-page='lesson'] .site-header, body[data-page='lesson'] .site-footer, body[data-page='lesson'] .lesson-aside, body[data-page='lesson'] .course-pager, body[data-page='lesson'] .lesson-done, body[data-page='lesson'] .disclaimer-strip, body[data-page='lesson'] .fig__zoom { display: none !important; }
  .deeper { break-inside: avoid; }
  .deeper:not([open]) .deeper__body { display: block; }
}


/* ==========================================================================
   Interactive figures
   ========================================================================== */
.ix { display: grid; gap: 1.2rem; }
.ix__tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; }
.ix__tab { flex: none; padding: 0.5rem 0.85rem; border: 0; border-radius: var(--btn-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.ix__tab[aria-selected='true'] { background: var(--teal); color: var(--ivory); box-shadow: none; }
.ix__range { width: 100%; accent-color: var(--teal); }
.ix__panel { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 700px) { .ix__panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.ix__visual { display: grid; place-items: center; min-height: 220px; padding: 1rem; border-radius: var(--panel-radius); background: radial-gradient(circle at 50% 40%, var(--white), var(--sage-soft)); }
.ix__visual svg, .ix__visual img { width: 100%; max-width: 320px; height: auto; }
.ix--wide .ix__panel { grid-template-columns: 1fr; }
.ix--wide .ix__visual { min-height: 0; padding: 0.6rem; }
.ix--wide .ix__visual svg, .ix--wide .ix__visual img { max-width: 680px; }
/* Stage paintings sit on their own paper, at one steady height so the stepper does not jump */
.ix__visual--art { background: #fcf9f1; box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.1); }
.ix__visual--art .ix__art, .prose figure .ix__visual--art .ix__art { width: auto; max-width: 100%; height: clamp(200px, 30vw, 300px); object-fit: contain; mix-blend-mode: multiply; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.ix--wide .ix__visual--art { padding: 1rem; }
.ix--wide .ix__visual--art .ix__art { height: clamp(220px, 38vw, 360px); }
.ix__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-ink-deep); }
.ix__title { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.2; color: var(--teal-ink); margin: 0.2rem 0 0.5rem; }
.ix__text { color: #3b4343; }
.ix__lab { margin-top: 0.8rem; padding: 0.8rem 1rem; border-left: 3px solid var(--teal); background: var(--sage-soft); font-size: 0.92rem; }
.ix__lab b { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.ix__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.6rem 0; font-size: 0.85rem; color: var(--muted); }
.ix__facts b { color: var(--teal-ink); font-weight: 700; }
.ix__list { padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.93rem; }
.ix__nav { display: flex; justify-content: space-between; gap: 0.6rem; }
.ix__note { font-size: 0.8rem; color: var(--muted); font-style: italic; }

/* Fertile window */
.fw { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; align-items: end; }
.fw__day { display: grid; gap: 0.4rem; justify-items: center; padding: 0; border: 0; background: none; font-size: 0.72rem; color: var(--muted); text-align: center; }
.fw__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--sage); transition: background-color 0.2s, transform 0.2s var(--ease); }
.fw__bar[data-level='low'] { height: 40px; }
.fw__bar[data-level='moderate'] { height: 80px; background: var(--rose-soft); box-shadow: inset 0 0 0 1px var(--rose); }
.fw__bar[data-level='higher'] { height: 125px; background: var(--rose); }
.fw__bar[data-level='highest'] { height: 165px; background: var(--rose-ink); }
.fw__bar[data-level='none'] { height: 12px; background: var(--line); }
.fw__day[aria-pressed='true'] .fw__bar { outline: 2px solid var(--teal); outline-offset: 2px; }
.fw__day[aria-pressed='true'] { color: var(--teal-ink); font-weight: 700; }
.fw__ov { grid-column: 6; }

/* Chromosome pairs */
.karyo { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 0.6rem 0.4rem; padding: 1rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.karyo__pair { display: grid; justify-items: center; gap: 0.25rem; font-size: 0.7rem; color: var(--muted); }
.karyo__set { display: flex; gap: 3px; align-items: end; height: 54px; }
.karyo__c { width: 7px; border-radius: 4px; background: linear-gradient(var(--teal) 0 38%, var(--white) 38% 44%, var(--teal) 44%); }
.karyo__c--y { background: linear-gradient(var(--rose-ink) 0 30%, var(--white) 30% 36%, var(--rose-ink) 36%); }
.karyo__pair.is-changed { color: var(--rose-ink); font-weight: 700; }
.karyo__pair.is-changed .karyo__set { padding: 2px; border-radius: 4px; box-shadow: 0 0 0 2px var(--rose); }

/* IVF funnel */
.funnel { display: grid; gap: 0.6rem; }
.funnel__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.funnel__bar { height: 2.4rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0 0.9rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); font-weight: 700; min-width: 3.4rem; width: calc(var(--w, 1) * 100%); transition: width 0.6s var(--ease); }
.funnel__row:nth-child(2) .funnel__bar { background: var(--teal-deep); }
.funnel__row:nth-child(3) .funnel__bar { background: var(--rose-ink); }
.funnel__row:nth-child(4) .funnel__bar { background: var(--rose); color: var(--teal-ink); }
.funnel__label { font-size: 0.85rem; color: var(--charcoal); }
.funnel__label small { color: var(--muted); }
.funnel__why { font-size: 0.85rem; color: var(--muted); }
.funnel__ctl { display: grid; gap: 0.4rem; }
.funnel__ctl output { font-family: var(--font-serif); font-size: 1.4rem; color: var(--teal-ink); }

/* Grading decoder */
.grade { display: grid; gap: 1rem; }
.grade__pickers { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.grade__pickers label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.grade__pickers select { padding: 0.6rem 0.7rem; border: 1px solid var(--line); background: var(--white); font-size: 0.95rem; }
.grade__code { font-family: var(--font-serif); font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--teal-ink); }
.grade__parts { display: grid; gap: 0.6rem; }
.grade__parts p { padding: 0.7rem 0.9rem; background: var(--ivory); border-left: 3px solid var(--sage); font-size: 0.92rem; }
.grade__parts b { color: var(--teal); }

/* ==========================================================================
   Polish (24 Oct 2026): painted covers on cards and lesson rows, the lesson
   hero picture, readable figures on phones, a reading bar, and motion in the
   website's own language (rise, wash, draw). Nothing moves for visitors who
   ask for reduced motion.
   ========================================================================== */

/* ---------- Module cards: the module's painting across the top ---------- */
.module-card--cover { padding: 0; overflow: hidden; gap: 0.45rem; }
.module-card--cover > :not(.module-card__cover) { margin-inline: 1.3rem; }
.module-card--cover .module-card__meta { margin-top: 0.8rem; }
.module-card--cover .module-card__progress { margin-bottom: 1.1rem; }
.module-card__cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #faf6ec url("/art/c-paper.webp") center / cover; border-bottom: 1px solid var(--line); }
.module-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.7s var(--ease); }
.module-card__cover.is-round img { object-fit: contain; padding: 0.7rem; }
.module-card:hover .module-card__cover img, .module-card:focus-visible .module-card__cover img { transform: scale(1.05); }
.module-card__num { position: absolute; left: 0.8rem; top: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgb(255 253 252 / 0.88); box-shadow: 0 1px 0 rgb(40 93 93 / 0.08); font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--rose-ink); }

/* ---------- Module page: each lesson shows its painting ---------- */
.lesson-row { grid-template-columns: 2.6rem 92px minmax(0, 1fr) auto; }
.lesson-row--quiz { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.lesson-row__thumb { display: block; width: 92px; aspect-ratio: 4 / 3; border-radius: var(--picture-radius); overflow: hidden; background: #faf6ec; box-shadow: inset 0 0 0 1px var(--line); }
.lesson-row__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); }
.lesson-row:hover .lesson-row__thumb img { transform: scale(1.07); }
.lesson-row__thumb.is-crop img { object-fit: cover; padding: 0; }
@media (max-width: 560px) {
  .lesson-row { grid-template-columns: 64px minmax(0, 1fr); }
  .lesson-row__n { display: none; }
  .lesson-row__thumb { width: 64px; grid-row: span 2; }
  .lesson-row__meta { grid-column: 2; }
  .lesson-row--quiz { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .lesson-row--quiz .lesson-row__n { display: block; }
}

/* ---------- Syllabus: bigger painted badges ---------- */

/* ---------- Lesson hero: the lesson's own painting beside the title ---------- */
.lesson-hero .topic-hero__grid { align-items: center; }
.lesson-hero__art { width: 100%; max-width: 560px; justify-self: end; padding: 0; overflow: hidden; border-radius: var(--picture-radius, 8px); background: #faf6ec; box-shadow: var(--shadow); }
.lesson-hero__art img { width: 100%; height: auto; max-height: 400px; object-fit: contain; mix-blend-mode: multiply; }
/* Lesson polish A (10 Nov 2026): the painting shows on phones too, under the title */
@media (max-width: 860px) { .lesson-hero__art { width: auto; max-width: none; justify-self: stretch; margin-top: 0.4rem; border-radius: 0; box-shadow: none; } .lesson-hero__art img { max-height: 260px; } }

/* ---------- Reading bar: how far through the lesson you are ---------- */
.read-bar { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.read-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--rose)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Figures on phones (6 Nov 2026 audit): the whole picture fits the screen, its labels are listed as text
   under it ("In the picture"), and the enlarge button opens it bigger to pan. Before, the figure was 560 px wide
   in a 335 px frame, so the first view showed no labels at all. ---------- */
.fig__swipe { display: none; }
.fig__labels { display: none; }
@media (max-width: 640px) {
  .fig__pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .fig__pan::-webkit-scrollbar { display: none; }
  .fig__pan > svg { min-width: 0; width: 100%; }
  .fig__art.can-pan .fig__swipe { display: none !important; }
  .prose .fig .fig__labels { display: block; margin: 0.55rem 0 0; padding-right: 3rem; font-size: 0.86rem; line-height: 1.45; color: var(--ink); }
  .fig__labels b { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-right: 0.35rem; }
  .fig__art.can-pan .fig__swipe {
    display: flex; position: absolute; right: 0.7rem; bottom: 0.7rem; padding: 0.35rem 0.75rem; border-radius: 999px;
    background: rgb(23 59 59 / 0.78); color: var(--ivory); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; pointer-events: none;
    transition: opacity 0.4s;
  }
  .fig__art.is-panned .fig__swipe { opacity: 0; }
}

/* ---------- Quiz: answered counter and the score ring ---------- */
.quiz__count { position: sticky; top: 5.4rem; z-index: 4; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; padding: 0.6rem 1rem; border-radius: 999px; background: rgb(250 247 241 / 0.94); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s); font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.quiz__count-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--sage-soft); overflow: hidden; }
.quiz__count-bar span { display: block; height: 100%; width: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.5s var(--ease); }
.quiz__result-grid { display: grid; gap: 1.2rem 1.8rem; align-items: center; }
@media (min-width: 620px) { .quiz__result-grid { grid-template-columns: 132px 1fr; } }
.quiz__ring { position: relative; width: 132px; height: 132px; }
.quiz__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz__ring circle { fill: none; stroke-width: 9; }
.quiz__ring .bg { stroke: rgb(250 247 241 / 0.18); }
.quiz__ring .arc { stroke: var(--rose-light); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset 1.1s var(--ease) 0.2s; }
.quiz__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; color: var(--ivory); }

/* ---------- Check your understanding: a small answer moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .check__opt.is-right .check__key { animation: answer-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .check__opt.is-wrong { animation: answer-shake 0.4s ease; }
  .check__why:not([hidden]) { animation: motion-rise 0.5s ease both; }
}
@keyframes answer-pop { 40% { transform: scale(1.35); } }
@keyframes answer-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Heroes arrive the way the website's do */
  .topic-hero .breadcrumb, .topic-hero .eyebrow { animation: motion-fade 0.8s ease both; }
  .topic-hero h1 { animation: motion-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s backwards; }
  .topic-hero .lead { animation: motion-rise 0.8s ease 0.3s backwards; }
  .topic-hero .topic-facts, .topic-hero .btn-row, .topic-hero .lesson-progress { animation: motion-rise 0.8s ease 0.45s backwards; }
  .topic-hero__fig { animation: hero-art-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; }
  .module-hero__art, .lesson-hero__art { overflow: hidden; }
  .module-hero__art img, .lesson-hero__art img { animation: motion-breathe 18s ease-in-out infinite alternate; }

  /* Blocks rise into place as you reach them */
  .js .rise { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
  .js .rise.is-in { opacity: 1; transform: none; }

  /* Paintings wash in from the left, like a brush stroke across the paper */
  .js .rise .fig__pan > svg, .js .fig--art.rise .fig__art > img, .js .rise .module-card__cover img {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    transition: -webkit-mask-position 1.6s cubic-bezier(0.35, 0.55, 0.2, 1) 0.15s, mask-position 1.6s cubic-bezier(0.35, 0.55, 0.2, 1) 0.15s, transform 0.7s var(--ease);
  }
  .js .rise.is-in .fig__pan > svg, .js .fig--art.rise.is-in .fig__art > img, .js .rise.is-in .module-card__cover img { -webkit-mask-position: 0 0; mask-position: 0 0; }

  /* Labels follow the paint: leader lines draw, dots settle, names fade up */
  .js .rise [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease calc(0.7s + var(--dl, 0s)); }
  .js .rise.is-in [data-draw] { stroke-dashoffset: 0; }
  .js .fig--painted.rise .fig__pan circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1.1s + var(--dl, 0s)); }
  .js .fig--painted.rise.is-in .fig__pan circle { transform: none; }
  .js .rise .fig__pan text { opacity: 0; transition: opacity 0.7s ease calc(0.9s + var(--dl, 0s)); }
  .js .rise.is-in .fig__pan text { opacity: 1; }

  /* Stepper pictures (timeline, atlas) settle in at each step */
  .ix__visual > * { animation: stage-in 0.6s var(--ease) both; }
}
@keyframes hero-art-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes stage-in { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Home hero: the first five days, one painted stage after another ---------- */
.course-hero__fig { background: #faf6ec url("/art/c-paper.webp") center / cover; }
.hero-stages { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin-inline: auto; }
.hero-stages__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; opacity: 0; transform: scale(0.94) rotate(-6deg); transition: opacity 1.1s var(--ease), transform 1.8s var(--ease); }
.hero-stages__img.is-on { opacity: 1; transform: none; }
.hero-stages__cap { min-height: 2.6em; font-style: normal !important; }
.hero-stages__cap b { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-ink-deep); }
.hero-stages__cap span { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--teal-ink); }

/* ---------- Closing call: the six stages again, as a little journey ---------- */
.cta-stages { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(0.4rem, 2vw, 1.2rem); margin-bottom: 0.6rem; }
.cta-stages::before { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--rose), transparent); }
.cta-stages img { position: relative; width: clamp(38px, 8vw, 64px); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .cta-stages img { opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js .cta-stages.is-in img { opacity: 1; transform: none; }
  .js .cta-stages.is-in img:nth-child(2) { transition-delay: 0.12s; } .js .cta-stages.is-in img:nth-child(3) { transition-delay: 0.24s; }
  .js .cta-stages.is-in img:nth-child(4) { transition-delay: 0.36s; } .js .cta-stages.is-in img:nth-child(5) { transition-delay: 0.48s; }
  .js .cta-stages.is-in img:nth-child(6) { transition-delay: 0.6s; }
}

/* 24 Oct 2026: grid children may shrink, so a wide figure pans inside its frame instead of widening the text column on phones */
.article-layout > * { min-width: 0; }

/* Stepper crossfade (24 Oct 2026) */
.ix__visual { display: grid; }
.ix__layer { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; opacity: 0; transition: opacity 0.45s var(--ease, ease); }
.ix__layer.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ix__info.is-fresh > * { animation: ix-fresh 0.45s var(--ease, ease) both; }
  .ix__info.is-fresh > :nth-child(2) { animation-delay: 0.05s; } .ix__info.is-fresh > :nth-child(n+3) { animation-delay: 0.1s; }
  .zoom:not([hidden]) { animation: lightbox-fade 0.3s var(--ease, ease); }
  .zoom:not([hidden]) .zoom__art, .zoom:not([hidden]) > :first-child { animation: zoom-in 0.35s var(--ease, ease); }
}
@media (prefers-reduced-motion: reduce) { .ix__layer { transition: none; } }
@keyframes ix-fresh { from { opacity: 0; transform: translateY(6px); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes lightbox-fade { from { opacity: 0; } }

/* Paintings that only fill part of a card or hero fade into the paper instead of showing their own
   paper as a rectangle (24 Oct 2026) */
.module-card__cover.is-round img, .module-hero__art img {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
  mix-blend-mode: multiply;
}

/* Grading decoder: the chosen expansion stage as a painting beside the grade (24 Oct 2026) */
.grade__show { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 640px) { .grade__show { grid-template-columns: 200px minmax(0, 1fr); } }
.grade__pic { margin: 0; display: grid; justify-items: center; gap: 0.3rem; padding: 0.8rem; border-radius: var(--panel-radius); background: #faf6ec url("/art/c-paper.webp") center / cover; }
.grade__pic img { width: 170px; height: auto; mix-blend-mode: multiply; }
.grade__pic figcaption { font-size: 0.82rem; color: var(--teal); font-weight: 700; letter-spacing: 0.04em; }

/* IVF funnel as painted eggs and embryos (24 Oct 2026) */
.funnel__eggs { display: flex; align-items: center; gap: 0.8rem; padding: 0.45rem 0.7rem; border-radius: var(--panel-radius); background: #faf6ec url("/art/c-paper.webp") center / cover; }
.funnel__pics { display: flex; flex-wrap: wrap; gap: 0.15rem; flex: 1; min-height: 40px; }
.funnel__pics img { width: 40px; height: 40px; mix-blend-mode: multiply; }
.funnel__eggs b { flex: none; font-size: 1.05rem; color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .funnel__pics img { animation: funnel-pop 0.4s var(--ease, ease) both; animation-delay: calc(var(--k) * 25ms); }
}
@keyframes funnel-pop { from { opacity: 0; transform: scale(0.6); } }
@media (max-width: 520px) { .funnel__pics img { width: 30px; height: 30px; } }
/* the lesson's figure-image frame must not apply to these small paintings */
.prose .funnel__pics img, .prose .grade__pic img { padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
.prose .funnel__pics img { width: 40px; height: 40px; flex: none; }
.prose .grade__pic img { width: 170px; }
@media (max-width: 520px) { .prose .funnel__pics img { width: 30px; height: 30px; } }

/* Enrol page as a sales page (25 Oct 2026): the price card, the four parts, who it is for, what is included */
[data-signed-in][hidden], [data-signed-out][hidden], [data-locked-note][hidden] { display: none !important; }
.enrol-hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .enrol-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.enrol-hero h1 { max-width: 15ch; }
.enrol-hero h1 .script-kara { display: block; font-size: 0.82em; margin-top: 0.15em; }
.enrol-hero__free { margin: 0; color: var(--muted); }
.enrol-locked { margin: 0; padding: 0.8rem 1rem; background: var(--rose-soft); border-color: transparent; font-size: 0.95rem; }
.enrol-card { display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 4px 0 var(--teal), var(--shadow); }
.enrol-card__kicker { margin: 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.enrol-card__price { margin: 0; font-family: var(--font-serif); font-size: clamp(2.6rem, 2.2rem + 1.5vw, 3.4rem); color: var(--teal-ink); line-height: 1; }
.enrol-card__price small { font-family: var(--font-sans); font-size: 0.9rem; color: var(--muted); margin-left: 0.35rem; }
.enrol-card__ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.enrol-card__ticks li { position: relative; padding-left: 1.7rem; font-size: 0.95rem; }
.enrol-card__ticks li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285d5d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.enrol-card__buy, .enrol-card__in { display: grid; gap: 0.8rem; }
.enrol-card__buy p, .enrol-card__in p { margin: 0; }
.enrol-card__btn { justify-content: center; width: 100%; }
.enrol-card__note, .enrol-card__signin { font-size: 0.85rem; color: var(--muted); }
.enrol-card .form { gap: 0.7rem; }
.enrol-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .enrol-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.enrol-part { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.enrol-part__pic { display: block; margin: -0.4rem 0 0.2rem; }
.enrol-part__pic img { display: block; width: 100%; max-height: 170px; object-fit: contain; border-radius: var(--picture-radius); }
.enrol-part__n { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rose-ink-deep); }
.enrol-part h3 { margin: 0; font-size: var(--step-2); }
.enrol-part > p { margin: 0; color: var(--muted); }
.enrol-part__mods { list-style: none; margin: 0.3rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; font-size: 0.92rem; }
.enrol-part__mods li { display: flex; gap: 0.6rem; }
.enrol-part__mods span { flex: none; min-width: 1.6rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.enrol-more { margin: 1.5rem 0 0; }
.enrol-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .enrol-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .enrol-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.enrol-who li { display: grid; gap: 0.5rem; align-content: start; }
.enrol-who__pic { display: flex; align-items: center; justify-content: center; height: 190px; padding: 0.6rem; overflow: hidden; border-radius: var(--picture-radius); background: #faf6ec url("/art/c-paper.webp") center / cover; }
.enrol-who__pic img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
.enrol-who h3 { margin: 0.3rem 0 0; font-size: var(--step-1); }
.enrol-who p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.enrol-free { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .enrol-free { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.enrol-free__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: free; }
.enrol-free__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; background: var(--white); border-radius: var(--panel-radius); counter-increment: free; }
.enrol-free__list li::before { content: counter(free); flex: none; width: 1.4rem; font-weight: 700; color: var(--rose-ink-deep); }
.enrol-free__list a { flex: 1; }
.enrol-free__list span { flex: none; font-size: 0.85rem; color: var(--muted); }
.enrol-free__fig { margin: 0; }
.enrol-free__fig img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); box-shadow: var(--shadow); }
.enrol-included { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.enrol-included li { display: grid; gap: 0.25rem; align-content: start; padding: 1.2rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 3px 0 var(--rose-light), inset 0 0 0 1px var(--line); }
.enrol-included b { font-family: var(--font-serif); font-weight: 500; font-size: 2.2rem; line-height: 1; color: var(--teal-ink); }
.enrol-included__what { font-weight: 700; color: var(--teal-ink); }
.enrol-included li > span:last-child { font-size: 0.9rem; color: var(--muted); }
.enrol-terms { margin-top: 1.5rem; }
.enrol-end { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .enrol-end { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.enrol-end .cta-stages { justify-content: flex-start; }

/* Checkout, sign-in and thank-you pages (25 Oct 2026) */
.checkout { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
.checkout__form { padding: clamp(1.2rem, 1rem + 1.5vw, 2rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.checkout__consent { padding: 0.9rem 1rem; border-radius: var(--panel-radius); background: var(--sand-soft); color: var(--charcoal); }
.checkout__summary { display: grid; gap: 0.9rem; padding: clamp(1.2rem, 1rem + 1.5vw, 2rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 4px 0 var(--teal), var(--shadow); }
.checkout__summary p { margin: 0; }
.checkout__item, .checkout__total { display: flex; justify-content: space-between; gap: 1rem; }
.checkout__item b { font-family: var(--font-serif); font-weight: 500; color: var(--teal-ink); }
.checkout__total { padding-top: 0.8rem; border-top: 1px solid var(--line); font-weight: 700; }
.checkout__total b { font-family: var(--font-serif); font-size: 1.5rem; color: var(--teal-ink); }
/* What happens next (10 Nov 2026): three numbered steps under the total */
.checkout__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: step; font-size: 0.9rem; color: var(--charcoal); }
.checkout__steps li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; counter-increment: step; }
.checkout__steps li::before { content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 0.78rem; font-weight: 800; }
.account-form { display: grid; gap: 1rem; max-width: 460px; }
.pay-handoff { display: flex; }
.account-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; counter-reset: step; }
.account-steps li { display: grid; gap: 0.2rem; padding: 1rem 1.2rem 1rem 3.4rem; position: relative; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); counter-increment: step; }
.account-steps li::before { content: counter(step); position: absolute; left: 1.1rem; top: 1rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--ivory); font-weight: 700; font-size: 0.85rem; }
.account-steps b { color: var(--teal-ink); }
.account-steps span { color: var(--muted); font-size: 0.95rem; }
/* Thank-you page, option C (10 Nov 2026): the four parts of the package, then a short note from Kara */
.paid-has { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .paid-has { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paid-has li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.2rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 3px 0 var(--rose-light), inset 0 0 0 1px var(--line); }
.paid-has img { grid-row: span 3; width: 56px; height: 56px; object-fit: contain; }
.paid-has img.paid-has__book { width: 40px; height: 56px; justify-self: center; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.paid-has b { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; color: var(--teal-ink); }
.paid-has span { color: var(--muted); font-size: 0.95rem; }
.paid-has .link-arrow { font-size: 0.9rem; justify-self: start; }
.paid-note { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: center; margin: 0 0 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-left: 4px solid var(--rose); }
.paid-note img { width: 64px; height: 80px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; box-shadow: 0 0 0 3px var(--rose-soft); }
.paid-note p { margin: 0; font-size: 1.02rem; }
.paid-note__sign { display: block; margin-top: 0.4rem; }
/* Password sign-in (25 Oct 2026): the emailed-link option folds under the password form; choosing a password is optional on the link page */
.account-link { max-width: 460px; padding: 1rem 1.2rem; border-radius: var(--panel-radius); background: var(--sage-soft); }
.account-link > summary { cursor: pointer; font-weight: 600; color: var(--teal-ink); }
.account-link[open] > summary { margin-bottom: 1rem; }
.account-optional { display: grid; gap: 0.8rem; margin: 0; padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); }
.account-optional legend { padding: 0 0.4rem; font-family: var(--font-serif); color: var(--teal-ink); }
.account-optional p { margin: 0; }

/* Painted charts (scripts/lib/paintify.mjs): the pigment grain over gradient washes is multiplied into them */
.pgrain { mix-blend-mode: multiply; }

/* Audit fixes (1 Nov 2026) */
/* (the Modules panel's height limit moved to the website's .nav-mega__panel rule, 6 Nov 2026: the whole panel scrolls) */

/* ---------- Lesson guide (7 Nov 2026): where you are, what you will learn, the summary and one clear way on ---------- */
.lesson-plan { margin: 0 0 2.4rem; padding: 1.4rem 1.5rem 1.3rem; border-radius: var(--panel-radius); background: var(--sage-soft); box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.1); }
.lesson-steps { margin: 0 0 1.2rem; }
.lesson-steps__where { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--muted); }
.lesson-steps__where b { color: var(--teal-ink); }
.prose .lesson-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.prose .lesson-steps li { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0; }
.prose .lesson-steps li + li::before { content: ''; width: 1.1rem; height: 2px; border-radius: 2px; background: rgb(40 93 93 / 0.22); }
.prose .lesson-steps li::marker { content: none; }
.lesson-steps__step { display: block; text-decoration: none; border-radius: 50%; }
.lesson-steps__dot { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px rgb(40 93 93 / 0.3); font-size: 0.85rem; font-weight: 700; color: var(--teal); transition: box-shadow 0.2s, background 0.2s; }
.lesson-steps__step:hover .lesson-steps__dot { box-shadow: inset 0 0 0 2px var(--teal); }
.lesson-steps__step.is-done .lesson-steps__dot { background: var(--sage); box-shadow: none; color: var(--teal-ink); }
.lesson-steps__step.is-done .lesson-steps__dot::after { content: '✓'; margin-left: 1px; font-size: 0.7rem; }
.lesson-steps__step[aria-current] .lesson-steps__dot { background: var(--teal); color: var(--ivory); box-shadow: 0 0 0 4px rgb(216 170 165 / 0.55); }
.lesson-steps__step[aria-current].is-done .lesson-steps__dot::after { content: none; }
.lesson-steps__step--quiz .lesson-steps__dot { background: var(--sand-soft); font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--rose-ink); }
.prose .lesson-plan__h { margin: 0 0 0.6rem; font-size: var(--step-1); line-height: 1.25; color: var(--teal-ink); }
.prose .lesson-plan__list { list-style: none; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.5rem; }
.prose .lesson-plan__list li { position: relative; margin: 0; padding-left: 1.7rem; line-height: 1.5; color: var(--teal-ink); }
.prose .lesson-plan__list li::before { content: ''; position: absolute; left: 0.15rem; top: 0.42em; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--rose); }
.prose .lesson-plan__how { margin: 0; font-size: 0.86rem; color: var(--muted); }

@media (max-width: 560px) {
  .lesson-plan { padding: 1.1rem 1.1rem 1rem; }
  .prose .lesson-steps ol, .prose .lesson-steps li { gap: 0.25rem; }
  .prose .lesson-steps li + li::before { width: 0.5rem; }
  .lesson-steps__dot { width: 1.75rem; height: 1.75rem; font-size: 0.78rem; }
}
.lesson-recap { margin: 2.6rem 0 0; padding: 1.5rem 1.6rem 1.4rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-left: 4px solid var(--rose); }
.prose .lesson-recap h2 { margin: 0 0 0.35rem; font-size: var(--step-1); color: var(--teal-ink); }
.prose .lesson-recap__lead { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--muted); }
.prose .lesson-recap__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; counter-reset: recap; }
.prose .lesson-recap__list li { position: relative; margin: 0; padding-left: 2.1rem; line-height: 1.55; counter-increment: recap; }
.prose .lesson-recap__list li::before { content: counter(recap); position: absolute; left: 0; top: 0.05em; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: var(--rose-soft, #f3e3e0); color: var(--rose-ink); font-size: 0.78rem; font-weight: 700; }

.up-next { margin: 2.6rem 0 0; }
.prose .up-next__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0 0 0.5rem; font-size: var(--step-1); color: var(--teal-ink); }
.up-next__h > span { font-family: var(--font-sans, inherit); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.prose .up-next__note { margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--muted); }
.prose a.up-next__card { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: 'thumb body' 'thumb btn'; gap: 0.9rem 1.3rem; align-items: center; padding: 1.1rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); text-decoration: none; box-shadow: var(--shadow-s); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.prose a.up-next__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ivory); }
.up-next__card--plain { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: 'body' 'btn' !important; padding: 1.3rem 1.5rem !important; }
.up-next__thumb { grid-area: thumb; align-self: stretch; border-radius: var(--picture-radius); overflow: hidden; background: #faf6ec; }
.up-next__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.up-next__body { grid-area: body; display: grid; gap: 0.3rem; }
.up-next__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); line-height: 1.25; color: var(--ivory); }
.up-next__lead { font-size: 0.92rem; line-height: 1.5; color: rgb(250 247 241 / 0.85); }
.up-next__meta { font-size: 0.78rem; color: var(--rose-light); }
.up-next__btn { grid-area: btn; justify-self: start; --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); pointer-events: none; }
.up-next__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; margin-top: 0.9rem; font-size: 0.88rem; }
.up-next__done { appearance: none; border: 0; background: none; padding: 0.3rem 0; font: inherit; font-size: 0.86rem; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.up-next__done.is-done { color: var(--muted); text-decoration: none; cursor: default; }
.prose .up-next__saved { margin: 0.2rem 0 0; }
@media (max-width: 560px) {
  .prose a.up-next__card { grid-template-columns: 1fr; grid-template-areas: 'thumb' 'body' 'btn'; }
  .up-next__thumb { aspect-ratio: 16 / 9; }
  .up-next__btn { justify-self: stretch; justify-content: center; }
}

.course-lessons a.course-lessons__next { display: grid; grid-template-columns: 1fr; gap: 0.15rem; margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); }
.course-lessons a.course-lessons__next span { font-family: inherit; font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-light); }
.course-lessons a.course-lessons__next b { font-weight: 600; color: var(--ivory); }
.course-lessons a.course-lessons__next:hover { color: var(--ivory); background: var(--teal-ink); }

.lesson-row__flag { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--rose-ink); color: var(--white); /* was --rose: 2:1 (11 Nov 2026 audit) */ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lesson-row.is-next { box-shadow: inset 0 0 0 2px var(--rose); }

.lesson-dock { display: none; }
@media (max-width: 999px) {
  .lesson-dock { position: fixed; left: 0.6rem; right: 0.6rem; bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); z-index: 55; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.4rem; border-radius: 8px; background: rgb(255 253 252 / 0.97); box-shadow: 0 6px 24px rgb(23 59 59 / 0.18), inset 0 0 0 1px var(--line); transform: translateY(calc(100% + 1.2rem)); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .lesson-dock.is-shown { transform: none; visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .lesson-dock__prev { display: grid; place-items: center; height: 2.6rem; border-radius: 8px; color: var(--teal); text-decoration: none; font-size: 1.15rem; }
  .lesson-dock__prev:not(.is-empty):hover { background: var(--sage-soft); }
  .lesson-dock__where { display: grid; gap: 0.05rem; min-width: 0; padding: 0.15rem 0.3rem; text-decoration: none; color: var(--teal-ink); }
  .lesson-dock__where b { font-size: 0.86rem; }
  .lesson-dock__where > span:not(.lesson-dock__bar) { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lesson-dock__bar { display: block; height: 3px; margin-top: 0.25rem; border-radius: 3px; background: rgb(40 93 93 / 0.12); overflow: hidden; }
  .lesson-dock__bar > span { display: block; height: 100%; background: var(--rose); transform-origin: 0 50%; transform: scaleX(0); }
  .lesson-dock__next { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.6rem; padding: 0 1.1rem; border-radius: 8px; background: var(--teal); color: var(--ivory); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
  .lesson-dock__next:hover { background: var(--teal-ink); color: var(--ivory); }
  body[data-page='lesson'] .site-footer { padding-bottom: 4.5rem; }
}
@media print { .lesson-dock, .up-next, .lesson-steps, .course-lessons__next { display: none !important; } }

/* ---------- Encouragement, badges, exams and direction markers (7 Nov 2026) ---------- */
/* "Start the lesson" in the lesson header, with a gently bobbing arrow */
.lesson-start { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0.2rem 0 0.9rem; font-size: 0.86rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.lesson-start__arrow { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rose); color: var(--rose-ink); animation: bob 2.4s var(--ease) infinite; }
.lesson-start:hover { color: var(--teal-ink); }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } }

/* "You are here" above the current step */
.prose .lesson-steps ol { padding-top: 1.55rem; }
.lesson-steps__step { position: relative; }
.lesson-steps__step[aria-current]::before { content: 'You are here'; position: absolute; left: 50%; bottom: calc(100% + 0.45rem); transform: translateX(-50%); white-space: nowrap; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--rose-ink); color: var(--white); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lesson-steps__step[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 0.1rem); transform: translateX(-50%); border: 0.28rem solid transparent; border-top-color: var(--rose-ink); }
.lesson-steps li:first-child .lesson-steps__step[aria-current]::before { left: 0; transform: none; }

/* The Up next arrows nudge forward when they come into view */
.up-next__card.is-in .arrow, .course-lessons__next.is-in b::after, .lesson-dock__next.is-in > span[aria-hidden] { display: inline-block; animation: nudge 1.1s var(--ease) 0.2s 3; }
.course-lessons__next b::after { content: ' →'; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(6px); } }
.up-next__card.is-in { animation: glow 1.6s var(--ease) 0.1s 1; }
@keyframes glow { 0% { box-shadow: var(--shadow-s); } 40% { box-shadow: 0 0 0 6px rgb(216 170 165 / 0.45), var(--shadow); } 100% { box-shadow: var(--shadow-s); } }

/* Continue here: the module to carry on with, on every module list */
[data-module-card] { position: relative; }
.here-flag { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--rose-ink); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-s); }
.here-flag span { display: inline-block; animation: nudge 1.4s var(--ease) 0.4s 3; }
[data-module-card].is-current { box-shadow: inset 0 0 0 2px var(--rose), var(--shadow-s); }

/* Toasts: a lesson read, a milestone, a finished module */
.kara-toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(calc(100% - 1.4rem), 430px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; padding: 0.9rem 0.9rem 0.9rem 1rem; border-radius: 8px; background: var(--white); box-shadow: 0 12px 40px rgb(23 59 59 / 0.22), inset 0 0 0 1px var(--line); transform: translate(-50%, calc(100% + 2rem)); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s; }
.kara-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 999px) { body[data-page='lesson'] .kara-toast { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); } }
.kara-toast__tick { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--sage); color: var(--teal-ink); }
.kara-toast__tick svg { width: 1.2rem; height: 1.2rem; stroke-dasharray: 24; stroke-dashoffset: 24; }
.kara-toast.is-in .kara-toast__tick svg { animation: draw 0.5s var(--ease) 0.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.kara-toast__pic { width: 52px; height: 65px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; }
.kara-toast__body { display: grid; gap: 0.2rem; min-width: 0; }
.kara-toast__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; color: var(--teal-ink); line-height: 1.3; }
.kara-toast__body p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--charcoal, #292d2d); }
.kara-toast__sig { font-size: 1.35rem; line-height: 1; }
.kara-toast__cta { justify-self: start; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--teal); }
.kara-toast__x { appearance: none; border: 0; background: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; }
.kara-toast__x:hover { background: var(--sage-soft); color: var(--teal-ink); }
.kara-toast--big { width: min(calc(100% - 1.4rem), 480px); padding: 1.1rem 1rem 1.1rem 1.1rem; background: linear-gradient(160deg, var(--white), var(--rose-soft)); border-top: 4px solid var(--rose); }
.kara-toast--big .kara-toast__body b { font-size: 1.2rem; }

/* Petals: a short burst, then gone */
.petals { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; overflow: visible; z-index: 1; }
.petals i { position: absolute; width: 0.55rem; height: 0.8rem; border-radius: 60% 40% 60% 40%; opacity: 0; animation: petal var(--d, 1.4s) cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0s) forwards; }
@keyframes petal { 0% { opacity: 0.95; transform: translate(0, 0) rotate(0) scale(0.6); } 100% { opacity: 0; transform: translate(calc(var(--x) * 220px), calc(var(--y) * -170px + 90px)) rotate(var(--r)) scale(1); } }

/* Kara's welcome letter */
.kara-letter { color: var(--teal-ink); }
.kara-letter--dialog { margin: auto; inset: 0; width: min(calc(100% - 1.6rem), 620px); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.8rem 1.8rem 1.5rem; border: 0; border-radius: 8px; background: var(--ivory); box-shadow: 0 30px 80px rgb(23 59 59 / 0.35); }
.kara-letter--dialog[open] { animation: letter-in 0.5s var(--ease); }
.kara-letter--dialog::backdrop { background: rgb(23 59 59 / 0.55); backdrop-filter: blur(2px); }
@keyframes letter-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.kara-letter--page { margin: 0 0 2rem; padding: 1.6rem 1.6rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-top: 4px solid var(--rose); }
.kara-letter__close { position: sticky; top: 0; float: right; margin: -0.8rem -0.8rem 0 0; appearance: none; border: 0; background: var(--white); width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.3rem; color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.kara-letter__head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1.1rem; align-items: center; margin-bottom: 1rem; }
.kara-letter__pic { width: 76px; height: 95px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; box-shadow: 0 0 0 4px var(--rose-soft); }
.kara-letter__eyebrow { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); margin-bottom: 0.25rem; }
.kara-letter__title { margin: 0; font-size: var(--step-2); line-height: 1.2; color: var(--teal-ink); }
.kara-letter__body p { margin: 0 0 0.8rem; line-height: 1.65; }
.kara-letter__tips { list-style: none; margin: 1rem 0; padding: 0.9rem 1rem; display: grid; gap: 0.5rem; border-radius: var(--panel-radius); background: var(--sage-soft); font-size: 0.9rem; }
.kara-letter__tips li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.kara-letter__tips li::before { content: '→'; position: absolute; left: 0; color: var(--rose-ink); font-weight: 700; }
.kara-letter__sign { margin: 1rem 0 0; display: flex; align-items: baseline; gap: 0.5rem; }
.kara-letter__sign .script-kara { font-size: 2.1rem; line-height: 1; }
.kara-letter__actions { margin-top: 1.2rem; }
.account-steps__h { margin: 0 0 0.6rem; font-size: var(--step-1); }
@media (max-width: 520px) { .kara-letter--dialog { padding: 1.3rem 1.2rem 1.2rem; } .kara-letter__head { grid-template-columns: 60px minmax(0, 1fr); } .kara-letter__pic { width: 60px; height: 75px; } }

/* Kara's note and the badge in a passed quiz */
.quiz-kara { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--ivory); color: var(--teal-ink); text-align: left; animation: letter-in 0.6s var(--ease); }
.quiz-kara__body { display: grid; gap: 0.3rem; }
.quiz-kara__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; }
.quiz-kara__body p { margin: 0; line-height: 1.55; color: var(--teal-ink); }
.quiz-kara .script-kara { font-size: 1.6rem; line-height: 1; }
.quiz-kara__link { justify-self: start; font-size: 0.86rem; font-weight: 700; color: var(--teal); }
.quiz-kara__badge { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; overflow: visible; background: var(--sand-soft); box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--rose); animation: medal 0.8s var(--ease) 0.15s backwards; }
.quiz-kara__badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.quiz-kara__badge > span { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--teal); color: var(--ivory); font-size: 0.85rem; font-weight: 700; box-shadow: 0 0 0 3px var(--white); }
.quiz-kara__badge--big b { font-family: var(--font-serif); font-size: 1.6rem; color: var(--rose-ink); }
@keyframes medal { from { transform: scale(0.4) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); } }
@media (max-width: 520px) { .quiz-kara { grid-template-columns: 1fr; justify-items: start; } }

/* My progress: Kara's line, badges, exams */
.progress-kara { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; align-items: center; margin: 2rem 0 0; padding: 1rem 1.2rem; border-radius: var(--panel-radius); background: var(--rose-soft); }
.progress-kara img { width: 60px; height: 75px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; }
.progress-kara__msg { margin: 0 0 0.3rem; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.45; color: var(--teal-ink); }
.progress-kara__link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.progress-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin: 3rem 0 0.4rem; scroll-margin-top: 6rem; }
.progress-h__count { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-ink); }
.progress-h__lead { margin: 0 0 1.2rem; max-width: 62ch; }
.badge-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.4rem 1rem; }
.badge { display: grid; justify-items: center; gap: 0.25rem; text-align: center; text-decoration: none; color: inherit; }
.badge__medal { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 0.4rem; border-radius: 50%; background: var(--sand-soft); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--line); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.badge__medal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(1) opacity(0.45); transition: filter 0.4s; }
.badge__num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--muted); }
.badge__tick { position: absolute; right: -2px; bottom: -2px; display: none; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--teal); color: var(--ivory); font-size: 0.8rem; font-weight: 700; box-shadow: 0 0 0 3px var(--white); }
.badge__n { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.badge__t { font-family: var(--font-serif); font-weight: 500; font-size: 0.95rem; line-height: 1.3; color: var(--teal-ink); }
.badge__state { font-size: 0.75rem; color: var(--muted); }
.badge.is-earned .badge__medal { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--rose); }
.badge.is-earned .badge__medal img { filter: none; }
.badge.is-earned .badge__tick { display: grid; }
.badge.is-earned .badge__state { color: var(--teal); font-weight: 700; }
.badge:hover .badge__medal { transform: translateY(-3px) rotate(-3deg); }
.exam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.exam-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.9rem 1.1rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.exam-row:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); color: inherit; }
.exam-row__medal { display: grid; place-items: center; align-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sand-soft); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--line); line-height: 1; }
.exam-row__medal span { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.exam-row__medal b { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; color: var(--rose-ink); }
.exam-row__body { display: grid; gap: 0.15rem; }
.exam-row__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.08rem; color: var(--teal-ink); }
.exam-row__body span { font-size: 0.85rem; color: var(--muted); }
.exam-row__state { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.exam-row.is-earned .exam-row__medal { background: var(--teal); box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--rose); }
.exam-row.is-earned .exam-row__medal span { color: var(--rose-light); }
.exam-row.is-earned .exam-row__medal b { color: var(--ivory); }
.exam-row.is-earned .exam-row__state { color: var(--teal); font-weight: 700; }
.exam-row--final { background: var(--sand-soft); box-shadow: none; }
.syllabus-exam { margin-top: 1.4rem; }
@media (max-width: 560px) { .exam-row { grid-template-columns: 52px minmax(0, 1fr); } .exam-row__medal { width: 52px; height: 52px; } .exam-row__state { grid-column: 2; } .badge-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .lesson-start__arrow, .here-flag span, .up-next__card.is-in, .up-next__card.is-in .arrow, .course-lessons__next.is-in b::after, .lesson-dock__next.is-in > span[aria-hidden], .quiz-kara, .quiz-kara__badge, .kara-letter--dialog[open] { animation: none !important; }
  .kara-toast { transition: opacity 0.2s; }
}
@media print { .kara-toast, .kara-letter--dialog, .here-flag, .lesson-start { display: none !important; } }

/* ==========================================================================
   Course home, option A for every section (10 Nov 2026)
   ========================================================================== */
/* Hero: the six days as a strip under the hero; each button shows its stage in the big painting */
.stage-strip { list-style: none; margin: clamp(2rem, 1.2rem + 2.5vw, 3rem) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.stage-strip::before { content: ''; position: absolute; left: 8%; right: 8%; top: 56px; border-top: 2px dotted var(--rose); }
.stage-strip__btn { all: unset; box-sizing: border-box; position: relative; display: grid; justify-items: center; gap: 0.15rem; width: 100%; text-align: center; cursor: pointer; border-radius: var(--panel-radius); padding: 0 0.2rem 0.3rem; }
.stage-strip__btn img { width: 112px; height: 112px; object-fit: contain; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-s); padding: 6px; box-sizing: border-box; transition: transform 0.4s var(--ease), outline-color 0.3s; outline: 3px solid transparent; outline-offset: 3px; }
.stage-strip__btn b { margin-top: 0.6rem; font: 700 0.72rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.stage-strip__btn span { font-size: 0.84rem; line-height: 1.35; color: var(--muted); max-width: 15em; }
.stage-strip__btn[aria-current='true'] img { outline-color: var(--rose); }
.stage-strip__btn:hover img { transform: translateY(-3px); }
.stage-strip__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 900px) {
  .stage-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .stage-strip::-webkit-scrollbar { display: none; }
  .stage-strip::before { display: none; }
  .stage-strip li { scroll-snap-align: start; }
  .stage-strip__btn img { width: 96px; height: 96px; }
}

/* Teacher: arch portrait (above) and Kara's facts as a ticked two-column list */
.kara-facts.kara-facts--ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.6rem; margin-block: 0.4rem; }
.kara-facts--ticks li { display: grid; grid-template-columns: 26px 1fr; column-gap: 0.75rem; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.kara-facts--ticks li::before { content: '✓'; grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--rose-soft); color: var(--rose-ink-deep); display: grid; place-items: center; font: 700 0.8rem/1 var(--font-sans); }
.kara-facts--ticks b, .kara-facts--ticks span { grid-column: 2; }
@media (max-width: 480px) { .kara-facts.kara-facts--ticks { grid-template-columns: 1fr; } }

/* How it works: six round pictures on a dashed path */
.how-path { list-style: none; margin: clamp(2rem, 1rem + 3vw, 3.2rem) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; }
.how-path::before { content: ''; position: absolute; left: 7%; right: 7%; top: 70px; border-top: 2px dashed var(--rose); }
.how-path__step { position: relative; text-align: center; }
.how-path__ring { position: relative; width: 140px; height: 140px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); display: grid; place-items: center; }
.how-path__icon { width: 70%; height: 70%; object-fit: contain; }
.how-path__ring i { position: absolute; top: 2px; right: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: var(--ivory); font: 700 0.8rem/34px var(--font-sans); font-style: normal; text-align: center; }
.how-path h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.35rem; }
.how-path p { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .how-path__icon { transition: transform 0.6s var(--ease); }
  .how-path__step:hover .how-path__icon { transform: rotate(-4deg) scale(1.06); }
}
@media (max-width: 1080px) {
  .how-path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.2rem; }
  .how-path::before { display: none; }
}
@media (max-width: 640px) {
  .how-path { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .how-path::before { display: block; left: 45px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed var(--rose); }
  .how-path__step { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; text-align: left; }
  .how-path__ring { width: 90px; height: 90px; margin: 0; }
  .how-path__ring i { width: 28px; height: 28px; line-height: 28px; top: -4px; right: -4px; }
}

/* The modules: every part listed in turn with all its modules (10 Nov 2026, user); the part buttons jump to each part */
.course-parts { background: var(--ivory); }
.part-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2rem; }
.part-tabs__tab { box-sizing: border-box; display: grid; gap: 0.1rem; min-width: 210px; padding: 0.75rem 1.1rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); text-decoration: none; transition: background-color 0.25s, border-color 0.25s; }
.part-tabs__tab small { font: 700 0.68rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.part-tabs__tab b { font: 500 1.08rem/1.25 var(--font-serif); color: var(--teal-ink); }
.part-tabs__tab span { font-size: 0.76rem; color: var(--muted); }
.part-tabs__tab:hover { border-color: var(--teal); background: var(--sage-soft, #e4ece7); }
.part-tabs__tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.course-part { scroll-margin-top: 6rem; }
.course-part + .course-part { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.course-part__title { display: flex; align-items: baseline; gap: 0.7rem; font-size: var(--step-2); margin-bottom: 0.4rem; }
.course-part__title small { font: 700 0.72rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.course-part__lead { margin-bottom: 1.4rem; }
/* Home part panels, option C (11 Nov 2026): a coloured panel per part, its introduction beside compact module cards */
.course-part--panel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(1.2rem, 0.8rem + 1.5vw, 2rem); padding: clamp(1.1rem, 0.7rem + 1.4vw, 1.8rem); border-radius: calc(var(--panel-radius) * 1.5); background: var(--sand-soft); }
.course-part--2 { background: var(--sage-soft); } .course-part--3 { background: var(--rose-soft); } .course-part--4 { background: #e6efee; }
.course-part__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.course-part__big { font-family: var(--font-serif); font-size: clamp(3.6rem, 2.6rem + 3vw, 5.6rem); line-height: 0.9; color: var(--rose); opacity: 0.6; }
.course-part--panel .course-part__title { display: block; margin: 0.2rem 0 0; font-size: var(--step-2); line-height: 1.15; }
.course-part--panel .course-part__title small { display: block; margin-bottom: 0.3rem; }
.course-part--panel .course-part__lead { margin: 0 0 0.3rem; color: var(--muted); }
.course-part__totals { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.course-part__done { margin-top: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--white); font-size: 0.84rem; color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.module-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-content: start; }
.module-grid--compact .module-card--cover { position: relative; display: grid; grid-template-columns: clamp(104px, 28%, 140px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; row-gap: 0.2rem; align-items: start; padding: 0.6rem 1rem 0.7rem 0.6rem; overflow: visible; }
.module-grid--compact .module-card--cover > :not(.module-card__cover) { margin-inline: 0; grid-column: 2; }
.module-grid--compact .module-card__cover { grid-row: 1 / span 4; grid-column: 1; align-self: center; aspect-ratio: 4 / 3; border-radius: 6px; border-bottom: 0; }
.module-grid--compact .module-card__cover img, .module-grid--compact .module-card__cover.is-round img { object-fit: contain; padding: 0.25rem; }
.module-grid--compact .module-card__num, .module-grid--compact .module-card__lead { display: none; }
.module-grid--compact .module-card--cover .module-card__meta { margin-top: 0.4rem; }
.module-grid--compact .module-card__title { font-size: 1.12rem; line-height: 1.25; }
.module-grid--compact .module-card--cover .module-card__progress { align-self: end; margin: 0.35rem 0 0; padding-top: 0.5rem; border-top: 0; }
.module-grid--compact .module-card.is-current { box-shadow: inset 0 0 0 2px var(--rose), var(--shadow-s); }
.module-grid--compact .here-flag { top: -0.65rem; right: 0.8rem; }
@media (max-width: 980px) {
  .course-part--panel { grid-template-columns: minmax(0, 1fr); }
  .course-part__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .course-part__intro > :not(.course-part__big) { grid-column: 2; }
  .course-part__big { grid-row: 1 / span 4; align-self: start; }
  .course-part__done { justify-self: start; }
}
.module-grid--compact .module-card__meta { letter-spacing: 0.1em; }
@media (max-width: 680px) {
  .module-grid--compact { grid-template-columns: minmax(0, 1fr); }
  .module-grid--compact .module-card--cover { grid-template-columns: 92px minmax(0, 1fr); column-gap: 0.85rem; }
}
@media (max-width: 760px) {
  .part-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.4rem; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .part-tabs::-webkit-scrollbar { display: none; }
  .part-tabs__tab { min-width: 172px; scroll-snap-align: start; }
}

/* Why this course: who it is written for */
.for-who { list-style: none; margin: clamp(2rem, 1rem + 2.5vw, 2.8rem) 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.for-who__card { background: var(--ivory); border-radius: var(--panel-radius); overflow: hidden; box-shadow: var(--shadow-s); }
.for-who__card img { display: block; width: 100%; height: 230px; object-fit: cover; }
.for-who__card div { padding: 1.2rem 1.35rem 1.4rem; display: grid; gap: 0.3rem; }
.for-who__card small { font: 700 0.68rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.for-who__card b { font: 500 1.25rem/1.25 var(--font-serif); color: var(--teal-ink); }
.course-why__text { margin-inline: auto; }
@media (max-width: 820px) {
  .for-who { grid-template-columns: 1fr; }
  .for-who__card { display: grid; grid-template-columns: 130px 1fr; align-items: center; }
  .for-who__card img { height: 100%; min-height: 110px; }
}

/* Closing call: what the package holds, beside the four ebooks */
.course-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.package-list { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; display: grid; gap: 0.6rem; }
.package-list li { display: flex; align-items: center; gap: 0.8rem; background: var(--white); border-radius: var(--panel-radius); padding: 0.65rem 1rem; box-shadow: var(--shadow-s); }
.package-list img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.package-list b { font-weight: 600; color: var(--teal-ink); }
.package-books { position: relative; height: 420px; max-width: 520px; width: 100%; margin-inline: auto; }
.package-books img { position: absolute; width: 42%; height: auto; border-radius: 4px; box-shadow: var(--shadow-l); }
.package-books img:nth-child(1) { left: 0; top: 40px; transform: rotate(-6deg); }
.package-books img:nth-child(2) { left: 19%; top: 10px; transform: rotate(-2deg); }
.package-books img:nth-child(3) { left: 38%; top: 50px; transform: rotate(3deg); }
.package-books img:nth-child(4) { left: 57%; top: 20px; transform: rotate(7deg); }
@media (max-width: 860px) {
  .course-cta__grid { grid-template-columns: 1fr; }
  .package-books { order: -1; height: 250px; max-width: 420px; }
}
.course-cta h2 + .lead { margin-top: 0.7rem; }

/* ==========================================================================
   About page, option B (10 Nov 2026): contents list beside the paper sheet;
   and the "Website ↗" link back to fertilitywithkara.com in the menu
   ========================================================================== */
.primary-nav .nav-site a { color: var(--rose-ink-deep); font-weight: 600; }
@media (max-width: 1180px) { .primary-nav .nav-site { display: none; } }
.about-grid { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 820px); justify-content: center; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.about-toc { position: sticky; top: 7rem; padding: 1.1rem 1.1rem 0.6rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); }
.about-toc b { display: block; margin-bottom: 0.5rem; font: 700 0.7rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.about-toc ol { list-style: none; margin: 0; padding: 0; }
.about-toc a { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--teal-ink); text-decoration: none; }
.about-toc a:hover { color: var(--rose-ink-deep); }
.about-toc img { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 50%; }
.about-paper { margin: 0; }
.about-paper h2 { display: flex; align-items: center; gap: 0.8rem; scroll-margin-top: 7rem; }
.about-paper h2::before { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; margin: 0; border-radius: 50%; background: var(--teal); color: var(--ivory); font: 700 0.85rem/1 var(--font-sans); font-style: normal; content: counter(doc); }
.about-paper .box { margin-top: 2.4rem; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-toc { position: static; }
  .about-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
@media (max-width: 420px) { .about-toc ol { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
   My progress, option A (10 Nov 2026): Up next card beside the ring,
   then the four parts with a bar and a dot for every module
   ========================================================================== */
.pg-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
.pg-next { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; padding: 0.9rem 1.4rem 0.9rem 0.9rem; border-left: 4px solid var(--rose); border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.pg-next:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.pg-next img { width: 170px; height: 110px; object-fit: cover; border-radius: 8px; background: var(--sand-soft); }
.pg-next__body { display: grid; gap: 0.25rem; }
.pg-next__body small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.pg-next__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.25; color: var(--teal-ink); }
.pg-next__body span { font-size: 0.88rem; color: var(--muted); }
.pg-next__btn { pointer-events: none; }
.pg-stats { display: flex; gap: 1.4rem; align-items: center; padding: 1.1rem 1.4rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); }
.pg-stats .progress-ring { flex: none; width: 130px; height: 130px; }
.pg-stats .progress-ring span { font-size: 1.7rem; }
.pg-stats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.pg-stats b { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; color: var(--teal-ink); }
.pg-parts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pg-part { display: grid; align-content: start; gap: 0.2rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); }
.pg-part__n { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.pg-part__t { font-family: var(--font-serif); font-weight: 500; font-size: 1.12rem; color: var(--teal-ink); }
.pg-part__count { font-size: 0.8rem; color: var(--muted); }
.pg-part.is-done .pg-part__count { color: var(--teal); font-weight: 700; }
.pg-part__bar { display: block; height: 8px; margin: 0.7rem 0 0.6rem; border-radius: 4px; background: var(--sage-soft); overflow: hidden; }
.pg-part__bar span { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: 4px; background: var(--teal); transition: width 0.9s var(--ease); }
.pg-part__dots { display: flex; flex-wrap: wrap; gap: 0; }
/* 24 px tap target (WCAG 2.2), the dot still drawn 15 px: a clear border round it (11 Nov 2026 audit) */
.pg-dot { box-sizing: border-box; width: 24px; height: 24px; border: 4.5px solid transparent; background-clip: padding-box; border-radius: 50%; background-color: var(--sage-soft); box-shadow: inset 0 0 0 1px var(--sage); transition: transform 0.2s var(--ease); }
.pg-dot:hover { transform: scale(1.25); }
.pg-dot.is-part { background: linear-gradient(90deg, var(--teal) 50%, var(--sage-soft) 50%) padding-box; box-shadow: inset 0 0 0 1px var(--teal); }
.pg-dot.is-done { background: var(--teal) padding-box; box-shadow: none; }
.pg-exams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 2.6rem 0 0; }
@media (max-width: 1100px) { .pg-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .pg-top { grid-template-columns: minmax(0, 1fr); } .pg-exams { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pg-next { grid-template-columns: minmax(0, 1fr); padding: 0.9rem; gap: 0.8rem; }
  .pg-next img { width: 100%; height: 150px; }
  .pg-next__btn { justify-self: start; }
  .pg-stats { padding: 1rem; gap: 1rem; }
  .pg-stats .progress-ring { width: 104px; height: 104px; }
  .pg-stats .progress-ring span { font-size: 1.4rem; }
}
@media (max-width: 480px) { .pg-parts { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
   Glossary, option D (10 Nov 2026): a dark header with the search,
   a tile for every letter, then one letter at a time
   ========================================================================== */
.gl-hero, .dark-hero { background: var(--teal-ink); }
.gl-hero h1, .dark-hero h1 { color: var(--ivory); }
.gl-hero .lead, .dark-hero .lead { color: #d8e4df; }
.gl-hero .breadcrumb, .gl-hero .breadcrumb a, .dark-hero .breadcrumb, .dark-hero .breadcrumb a { color: rgb(250 247 241 / 0.72); }
.gl-hero .breadcrumb a:hover, .dark-hero .breadcrumb a:hover { color: var(--ivory); }
.gl-hero .breadcrumb li + li::before, .dark-hero .breadcrumb li + li::before { color: var(--rose-light); }
.gl-search { position: relative; max-width: 640px; margin-top: 0.6rem; }
.gl-search svg { position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--teal); pointer-events: none; }
.gl-search input { width: 100%; padding: 1.05rem 1.1rem 1.05rem 3rem; border: 0; border-radius: var(--btn-radius); background: var(--white); font: inherit; font-size: 1.05rem; box-shadow: var(--shadow); }
.gl-search input:focus { outline: 3px solid var(--rose-light); outline-offset: 2px; }
.gl-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.5rem; }
.gl-tiles a, .gl-tiles .is-empty { display: grid; justify-items: center; padding: 0.6rem 0 0.5rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--teal-ink); transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s; }
.gl-tiles a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); color: var(--teal-ink); }
.gl-tiles b { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; line-height: 1; }
.gl-tiles span { min-height: 0.8rem; margin-top: 0.2rem; font-size: 0.66rem; color: var(--muted); }
.gl-tiles a.is-on { background: var(--teal); color: var(--ivory); box-shadow: 0 0 0 3px var(--rose-light); }
.gl-tiles a.is-on span { color: var(--sage); }
.gl-tiles .is-empty { background: none; opacity: 0.35; }
.gl-status { margin: 1.6rem 0 0; font-size: 0.9rem; color: var(--muted); }
.gl-group { scroll-margin-top: 7rem; }
[data-glossary] { scroll-margin-top: 6rem; } /* a letter tap on a phone scrolls here, below the sticky header (10 Nov 2026) */
.gl-group__head { display: flex; align-items: baseline; gap: 0.9rem; margin: 2.2rem 0 0.3rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--teal-ink); }
.gl-group__head h2 { margin: 0; font-size: 4rem; line-height: 1; color: var(--rose-ink); }
.gl-group__head span { font-size: 0.9rem; color: var(--muted); }
.gl-list { margin: 0; }
.gl-item { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.8rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 7rem; }
.gl-item dt { display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 0.6rem; }
.gl-item dt b { width: 100%; font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--teal-ink); }
.gl-item__icons { display: flex; gap: 0.5rem; }
.gl-item__icons img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line); }
.gl-item dd { margin: 0; }
.gl-item dd p { margin: 0 0 0.5rem; line-height: 1.6; color: #3b4343; }
.gl-where { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.82rem; }
.gl-where a { color: var(--teal); }
.gl-empty { margin-top: 2rem; }
.gl-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.gl-nav__prev { font-weight: 700; color: var(--teal); }
.gl-nav__prev:empty { visibility: hidden; }
@media (max-width: 900px) { .gl-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gl-item { grid-template-columns: 200px minmax(0, 1fr); gap: 1.2rem; } }
@media (max-width: 640px) {
  .gl-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
  .gl-tiles b { font-size: 1.2rem; }
  .gl-item { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .gl-item__icons img { width: 34px; height: 34px; }
  .gl-group__head h2 { font-size: 3rem; }
}
/* ==========================================================================
   The atlas page, option C (10 Nov 2026): a week-of-pregnancy stepper,
   the matching card, then every week as a tile
   ========================================================================== */
.at-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-bottom: 1.6rem; padding: 1.6rem 1.9rem; border-radius: var(--panel-radius); background: var(--teal-ink); color: var(--ivory); }
.at-conv[hidden] { display: none; }
.at-conv__k { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.at-step { display: flex; align-items: center; gap: 1.1rem; margin: 0.6rem 0; }
.at-step button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--ivory); color: var(--teal-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: transform 0.2s var(--ease), background 0.2s; }
.at-step button:hover { transform: scale(1.08); background: var(--white); }
.at-step button:disabled { opacity: 0.35; cursor: default; transform: none; }
.at-step button:focus-visible { outline: 3px solid var(--rose-light); outline-offset: 2px; }
.at-step output { min-width: 4.4rem; font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; text-align: center; }
.at-conv__q p { margin: 0; max-width: 30em; font-size: 0.85rem; color: #c9d9d2; }
.at-conv__arrow { font-size: 2.4rem; color: var(--rose-light); }
.at-conv__a b { display: block; margin: 0.5rem 0 0.25rem; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; }
.at-conv__a span:last-child { color: #d8e4df; }
.at-cards { display: grid; gap: 1.4rem; }
.at-detail { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2.1rem; align-items: center; padding: 1.6rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow); scroll-margin-top: 7rem; }
.at-detail[hidden] { display: none; }
.at-detail__pic { display: grid; place-items: center; height: 380px; border-radius: var(--panel-radius); background: radial-gradient(circle at 50% 45%, #fff, var(--sand-soft)); }
.at-detail__pic img { width: auto; height: auto; max-width: 86%; max-height: 330px; object-fit: contain; }
.at-detail h2 { margin: 0.9rem 0 0.4rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.at-detail p { margin: 0.5rem 0 0; line-height: 1.6; color: #3b4343; }
.at-clocks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.at-clocks span { display: grid; padding: 0.5rem 0.9rem; border-radius: var(--panel-radius); background: var(--sage-soft); font-size: 0.75rem; color: var(--muted); }
.at-clocks span + span { background: var(--rose-soft); }
.at-clocks b { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; color: var(--teal-ink); }
.at-size { font-size: 0.95rem; }
.at-size b { margin-right: 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.at-ms { display: grid; gap: 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.at-ms li { position: relative; padding-left: 1.25rem; font-size: 0.93rem; }
.at-ms li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.at-h { margin: 2.8rem 0 1rem; scroll-margin-top: 6rem; }
.at-mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.at-mini a { display: grid; justify-items: center; gap: 0.1rem; padding: 0.6rem 0.4rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-align: center; text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.at-mini a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); color: inherit; }
.at-mini a.is-on { box-shadow: 0 0 0 2px var(--teal); }
.at-mini img { width: 100%; height: 70px; margin-bottom: 0.25rem; object-fit: contain; }
.at-mini b { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--teal-ink); }
.at-mini span { font-size: 0.72rem; color: var(--muted); }
.at-note { margin: 1rem 0 0; font-size: 0.82rem; color: var(--muted); }
.at-about { margin-top: 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.at-about summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; font-weight: 700; color: var(--teal-ink); cursor: pointer; list-style: none; }
.at-about summary::-webkit-details-marker { display: none; }
.at-about summary::after { content: '+'; color: var(--rose-ink); }
.at-about[open] summary::after { content: '−'; }
.at-about__body { padding: 0 1.1rem 1.1rem; }
.at-about__body h3 { margin-top: 1rem; }
@media (max-width: 900px) {
  .at-conv { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 1.3rem; }
  .at-conv__arrow { transform: rotate(90deg); justify-self: start; font-size: 1.8rem; line-height: 1; }
  .at-detail { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .at-detail__pic { height: 260px; }
  .at-detail__pic img { max-height: 220px; }
  .at-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .at-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } .at-step output { font-size: 2.8rem; } }
/* ==========================================================================
   Quizzes and exams, option A with D's results (10 Nov 2026): one question
   at a time with numbered dots, then a marked paper with every explanation
   ========================================================================== */
.quiz-step { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.2rem; margin-bottom: 1rem; scroll-margin-top: 7rem; }
.quiz-step[hidden] { display: none; }
.quiz-step__dots { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.quiz-step__dots button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 600 0.8rem var(--font-sans); color: var(--muted); cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.quiz-step__dots button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--teal); }
.quiz-step__dots button.is-done { background: var(--sage-soft); color: var(--teal); box-shadow: inset 0 0 0 1px var(--sage); }
.quiz-step__dots button.is-missing { box-shadow: inset 0 0 0 2px var(--rose); color: var(--rose-ink-deep); }
.quiz-step__dots button.is-on { background: var(--teal); color: var(--ivory); box-shadow: 0 0 0 3px var(--rose-light); }
.quiz-step__dots button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.quiz-step__where { font-size: 0.85rem; color: var(--muted); }
.quiz.is-stepped .quiz__count { display: none; }
.quiz.is-stepped .quiz__list { gap: 0; }
.quiz.is-stepped .quiz__q { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) clamp(1.2rem, 1rem + 2vw, 2.6rem); border-top: 4px solid var(--rose); background: var(--white); box-shadow: var(--shadow); animation: quiz-in 0.35s var(--ease); }
.quiz.is-stepped .quiz__q:focus { outline: none; }
.quiz.is-stepped .quiz__q:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.quiz.is-stepped .quiz__q.is-unanswered { box-shadow: inset 0 0 0 2px var(--rose), var(--shadow); }
.quiz.is-stepped .quiz__q legend { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.3rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.3; }
.quiz.is-stepped .quiz__n { display: block; margin-bottom: 0.5rem; font: 700 0.7rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--rose-ink-deep); }
.quiz.is-stepped .quiz__n::before { content: 'Question '; }
.quiz.is-stepped .quiz__from { grid-column: 1; }
.quiz.is-stepped .quiz__q fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.quiz.is-stepped .quiz__q legend { grid-column: 1 / -1; }
.quiz.is-stepped .quiz__opt { grid-template-columns: 2.2rem minmax(0, 1fr); min-height: 5rem; padding: 0.9rem 1rem; box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; line-height: 1.45; }
.quiz.is-stepped .quiz__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz.is-stepped .quiz__opt:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.quiz.is-stepped .quiz__key { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sand-soft); font-size: 0.82rem; font-weight: 700; color: var(--teal-ink); transition: background 0.2s, color 0.2s; }
.quiz.is-stepped .quiz__opt:has(input:checked) { background: var(--sage-soft); box-shadow: inset 0 0 0 2px var(--teal); }
.quiz.is-stepped .quiz__opt:has(input:checked) .quiz__key { background: var(--teal); color: var(--ivory); }
.quiz.is-stepped .quiz__actions { justify-content: space-between; margin-top: 1.4rem; }
.quiz.is-stepped .quiz__hint { flex-basis: 100%; order: 3; margin: 0; color: var(--rose-ink-deep); }
.quiz-step__back { padding: 0.4rem 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiz-step__back[hidden] + .btn, .quiz-step__back[hidden] ~ .btn { margin-left: auto; }
.quiz-step__note { margin: 0.8rem 0 0; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz__status { margin: 0 0 0.2rem !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light) !important; }
.quiz-paper { margin-top: 1.6rem; }
.quiz-paper[hidden] { display: none; }
.quiz-paper__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.quiz-paper__filter button { padding: 0.5rem 0.95rem; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 600 0.82rem var(--font-sans); color: var(--teal-ink); cursor: pointer; }
.quiz-paper__filter button.is-on { background: var(--teal-ink); color: var(--ivory); box-shadow: none; }
.quiz-paper__list { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.quiz-paper__row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); }
.quiz-paper__row[hidden] { display: none; }
.quiz-paper__row.is-miss { box-shadow: inset 0 0 0 2px var(--rose-soft), var(--shadow-s); }
.quiz-paper__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e6f2eb; font-weight: 700; color: #2f6f53; }
.quiz-paper__row.is-miss .quiz-paper__mark { background: var(--rose-soft); color: var(--rose-ink-deep); }
.quiz-paper__body h3 { margin: 0.35rem 0 0.4rem; font-size: 1.12rem; line-height: 1.4; }
.quiz-paper__from { display: block; margin: -0.1rem 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quiz-paper__body p { margin: 0.3rem 0 0; font-size: 0.93rem; line-height: 1.55; }
.quiz-paper__you b { font-weight: 600; color: var(--rose-ink-deep); text-decoration: line-through; text-decoration-color: var(--rose); }
.quiz-paper__ans span { margin-right: 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.quiz-paper__ans b { font-weight: 600; color: #2f6f53; }
.quiz-paper__why { color: #3b4343; }
@media (max-width: 640px) {
  .quiz.is-stepped .quiz__q fieldset { grid-template-columns: minmax(0, 1fr); }
  .quiz.is-stepped .quiz__opt { min-height: 0; }
  .quiz-step__dots button { width: 2rem; height: 2rem; font-size: 0.74rem; }
  .quiz-paper__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .quiz.is-stepped .quiz__q { animation: none; } }
/* ==========================================================================
   All modules, option B (10 Nov 2026): picture tiles per part, a tile opens
   its lessons in a dark panel under its row
   ========================================================================== */
.md-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.md-jump a { padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.82rem; font-weight: 600; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s; }
.md-jump a:hover { box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal-ink); }
.md-part { scroll-margin-top: 6rem; }
.md-part + .md-part { margin-top: clamp(2.8rem, 2rem + 2vw, 4rem); }
.md-part__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; }
.md-part__n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.md-part__head h2 { margin: 0; }
.md-part__count { font-size: 0.85rem; color: var(--muted); }
.md-part__lead { margin: 0.3rem 0 1.1rem; color: var(--muted); }
.md-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.md-grid__tile { display: grid; }
.md-tile { position: relative; display: grid; align-content: start; gap: 0.25rem; padding: 0.75rem 0.9rem 0.9rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.md-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.md-tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.md-tile__pic { position: relative; display: block; margin-bottom: 0.4rem; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #faf6ec; }
.md-tile__pic img { width: 100%; height: 100%; object-fit: cover; }
.md-tile__n { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 8px; background: var(--white); font-size: 0.75rem; font-weight: 600; color: var(--rose-ink-deep); }
.md-tile__t { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: var(--teal-ink); }
.md-tile__meta { font-size: 0.78rem; color: var(--muted); }
.md-tile__bar { display: block; height: 6px; margin: 0.5rem 0 0.1rem; border-radius: 3px; background: var(--sage-soft); overflow: hidden; }
.md-tile__bar span { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: 3px; background: var(--teal); transition: width 0.8s var(--ease); }
.md-tile__state { font-size: 0.76rem; }
.md-tile .here-flag { top: 0.4rem; right: 0.4rem; }
.md-tile.is-open { box-shadow: 0 0 0 2px var(--teal), var(--shadow-s); }
.md-tile.is-open::after { content: ''; position: absolute; left: 50%; bottom: -1rem; border: 0.55rem solid transparent; border-top-color: var(--teal); transform: translateX(-50%); }
.md-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.6rem; padding: 1.4rem 1.5rem; border-radius: var(--panel-radius); background: var(--teal-ink); color: var(--ivory); animation: quiz-in 0.3s var(--ease); }
.md-panel[hidden] { display: none; }
.md-panel__k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.md-panel h3 { margin: 0.3rem 0 0.5rem; font-size: 1.5rem; line-height: 1.2; }
.md-panel h3 a { color: var(--ivory); text-decoration: none; }
.md-panel h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.md-panel p { margin: 0 0 1rem; font-size: 0.93rem; line-height: 1.55; color: #d8e4df; }
.md-panel .btn-row { align-items: center; gap: 0.6rem 1.2rem; }
.md-panel__more { font-size: 0.86rem; font-weight: 700; color: var(--rose-light); }
.md-panel__more:hover { color: var(--ivory); }
.md-panel__lessons { display: grid; gap: 0.5rem; align-content: start; margin: 0; padding: 0; list-style: none; }
.md-panel__lessons a { display: grid; grid-template-columns: 70px 2.4rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: var(--panel-radius); background: rgb(250 247 241 / 0.08); text-decoration: none; color: var(--ivory); transition: background 0.2s; }
.md-panel__lessons a:hover { background: rgb(250 247 241 / 0.16); color: var(--ivory); }
.md-panel__lessons a.md-panel__quiz { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding-left: 1rem; }
.md-panel__thumb { display: block; width: 70px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #faf6ec; }
.md-panel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-panel__num { font-family: var(--font-serif); color: var(--rose-light); }
.md-panel__lt { font-size: 0.95rem; line-height: 1.35; }
.md-panel__lessons small { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c9d9d2; white-space: nowrap; }
.md-panel__read { display: none; color: var(--sage); }
.md-panel__lessons a.is-done .md-panel__read { display: inline; }
@media (max-width: 1100px) { .md-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem; } }
@media (max-width: 480px) {
  .md-grid { gap: 0.7rem; }
  .md-tile { padding: 0.6rem 0.65rem 0.75rem; }
  .md-tile__t { font-size: 0.95rem; }
  .md-panel__lessons a { grid-template-columns: 56px minmax(0, 1fr); gap: 0.2rem 0.7rem; }
  .md-panel__thumb { width: 56px; grid-row: span 2; }
  .md-panel__num { display: none; }
  .md-panel__lessons a small { grid-column: 2; }
  .md-panel__lessons a.md-panel__quiz { grid-template-columns: 2rem minmax(0, 1fr); }
  .md-panel__lessons a.md-panel__quiz .md-panel__num { display: block; }
}
@media (prefers-reduced-motion: reduce) { .md-panel { animation: none; } }
/* ==========================================================================
   Module pages, option B2 (10 Nov 2026): the module as a path down the page,
   each lesson's painting shown whole, then the quiz and the badge
   ========================================================================== */
.mod-way { padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem) 0 clamp(2rem, 1.4rem + 2vw, 3rem); background: var(--white); border-bottom: 1px solid var(--line); scroll-margin-top: 5rem; }
.mod-way__k { margin: 0 0 1rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.mod-path { position: relative; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.mod-path::before { content: ''; position: absolute; left: 27px; top: 1.8rem; bottom: 1.8rem; border-left: 3px dashed var(--sage); }
.mod-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 420px) minmax(0, 1fr); gap: 1.5rem; align-items: center; text-decoration: none; color: inherit; }
.mod-step:hover { color: inherit; }
.mod-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--line); font-family: var(--font-serif); font-size: 1rem; color: var(--rose-ink); transition: background 0.2s, box-shadow 0.2s; }
.mod-step__tick { display: none; }
.mod-step.is-done .mod-step__dot { background: var(--teal); color: var(--ivory); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--teal); }
.mod-step.is-done .mod-step__n { display: none; }
.mod-step.is-done .mod-step__tick { display: block; font-family: var(--font-sans); font-weight: 700; }
.mod-step.is-next .mod-step__dot { box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--rose); }
.mod-step__pic { display: block; aspect-ratio: 16 / 9; border-radius: var(--picture-radius, 8px); overflow: hidden; background: #fbf8f1; box-shadow: var(--shadow-s); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.mod-step__pic img { width: 100%; height: 100%; object-fit: contain; }
.mod-step:hover .mod-step__pic { transform: translateY(-3px); box-shadow: var(--shadow); }
.mod-step.is-next .mod-step__pic { box-shadow: 0 0 0 3px var(--rose), var(--shadow); }
.mod-step__body { display: grid; justify-items: start; gap: 0.3rem; }
.mod-step__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-ink-deep); }
.mod-step__flags:empty, .mod-step__flags:not(:has(:not([hidden]))) { display: none; }
.mod-step__flag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--rose-ink); color: var(--white); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mod-step__flag--done { background: var(--teal); }
.mod-step__flag[hidden] { display: none; }
.mod-step__t { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.2; color: var(--teal-ink); }
.mod-step:hover .mod-step__t { text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 4px; }
.mod-step__lead { max-width: 34em; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.mod-step:focus-visible { outline: none; }
.mod-step:focus-visible .mod-step__pic { outline: 3px solid var(--teal); outline-offset: 3px; }
.mod-path__end { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.mod-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; }
.mod-end__quiz, .mod-end__badge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.75rem 1.1rem 0.75rem 0.8rem; border-radius: var(--panel-radius); background: var(--sand-soft); text-decoration: none; color: var(--teal-ink); transition: box-shadow 0.2s; }
.mod-end__quiz:hover, .mod-end__badge:hover { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal-ink); }
.mod-end__q { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); font-family: var(--font-serif); font-size: 1.8rem; color: var(--rose-ink); }
.mod-end small { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.mod-end b { display: block; font-weight: 600; font-size: 0.92rem; }
.mod-end__score, .mod-end__badge [data-badge-state] { font-size: 0.8rem; color: var(--muted); }
.mod-end__arrow { font-size: 1.3rem; color: var(--sage); }
.mod-end__pic { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--line); }
.mod-end__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) opacity(0.55); transition: filter 0.4s; }
.mod-end__badge.is-earned .mod-end__pic { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--rose); }
.mod-end__badge.is-earned .mod-end__pic img { filter: none; }
.mod-end__badge.is-earned [data-badge-state] { color: var(--teal); font-weight: 700; }
.mod-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); align-items: start; }
.mod-sheet__main > h2:first-of-type { margin-top: 0; }
.mod-ticks { display: grid; gap: 0.7rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.mod-ticks li { position: relative; padding-left: 2rem; line-height: 1.55; }
.mod-ticks li::before { content: '✓'; position: absolute; left: 0; top: 0.15rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sage-soft); color: var(--teal); font-size: 0.72rem; font-weight: 700; }
.mod-sheet__side { display: grid; gap: 1rem; }
.mod-side { padding: 1.2rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); scroll-margin-top: 6rem; }
.mod-side__k { margin: 0 0 0.7rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.mod-side__k + * { margin-top: 0; }
.mod-side .deeper-links + .mod-side__k, .mod-side .keep-books + .mod-side__k { margin-top: 1.3rem; }
.mod-pre { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.mod-pre li { padding: 0.7rem 0.8rem; border-radius: var(--panel-radius); background: var(--sand-soft); font-size: 0.9rem; line-height: 1.45; }
.mod-sheet__pager { margin-top: 2.4rem; }
@media (max-width: 960px) {
  .mod-step { grid-template-columns: 56px minmax(0, 1fr); gap: 0.8rem 1.1rem; }
  .mod-step__pic { grid-column: 2; }
  .mod-step__body { grid-column: 2; }
  .mod-step__dot { grid-row: 1; align-self: start; margin-top: 1rem; }
  .mod-sheet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mod-path::before { left: 19px; }
  .mod-step, .mod-path__end { grid-template-columns: 40px minmax(0, 1fr); gap: 0.6rem 0.8rem; }
  .mod-step__dot, .mod-path__end .mod-step__dot { width: 40px; height: 40px; font-size: 0.82rem; }
  .mod-end__arrow { display: none; }
  .mod-end__quiz, .mod-end__badge { width: 100%; }
}
/* ==========================================================================
   Certificate and Search, option D with the dark header (10 Nov 2026)
   ========================================================================== */
.dark-hero .eyebrow { color: var(--rose-light); }
.dark-hero .eyebrow::before { background: var(--rose-light); }
/* Certificate before you pass: "Getting ready" rings beside a faded preview */
.cert-ready { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 2vw, 2.8rem); align-items: center; }
.cert-ready[hidden] { display: none; }
.cert-ready__main h2 { margin: 0 0 1rem; }
.cert-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.cert-rings li { display: grid; justify-items: center; gap: 0.25rem; padding: 1rem 0.6rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); text-align: center; }
.cert-ring { position: relative; display: block; width: 96px; height: 96px; margin-bottom: 0.3rem; }
.cert-ring svg { width: 100%; height: 100%; }
.cert-ring__arc { transition: stroke-dashoffset 0.9s var(--ease); }
.cert-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.4rem; color: var(--teal-ink); }
.cert-rings b { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; line-height: 1.25; color: var(--teal-ink); }
.cert-rings li > span:last-child { font-size: 0.82rem; color: var(--muted); }
.cert-ready__note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); }
.cert-ready__final { margin: 0.6rem 0 0; font-weight: 600; color: var(--rose-ink-deep); }
.cert-ready__main .btn { margin-top: 1.2rem; }
.cert-ready__preview { margin: 0; }
.certificate--preview { box-shadow: var(--shadow); }
.certificate--preview > p, .certificate--preview .certificate__sign { opacity: 0.6; }
.certificate--preview .certificate__name span { filter: blur(1.2px); }
.cert-ready__preview figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 900px) { .cert-ready { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .cert-rings { gap: 0.5rem; } .cert-ring { width: 72px; height: 72px; } .cert-ring > span { font-size: 1.1rem; } .cert-rings b { font-size: 0.88rem; } }
/* Search: the box and words to try in the header, results as picture cards */
.course-search--hero { position: relative; display: flex; gap: 0.5rem; max-width: 720px; margin-top: 0.6rem; padding: 0.4rem 0.4rem 0.4rem 2.9rem; border-radius: var(--btn-radius); background: var(--white); box-shadow: var(--shadow); }
.course-search--hero svg { position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--teal); pointer-events: none; }
.course-search--hero input { flex: 1; min-width: 0; padding: 0.75rem 0.3rem; border: 0; background: none; font-size: 1.05rem; }
.course-search--hero input:focus { outline: none; }
.course-search--hero:focus-within { outline: 3px solid var(--rose-light); outline-offset: 2px; }
.search-try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0; }
.search-try > span { margin-right: 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.search-try a { padding: 0.45rem 0.85rem; border-radius: 999px; background: rgb(250 247 241 / 0.1); font-size: 0.82rem; font-weight: 600; color: var(--ivory); text-decoration: none; transition: background 0.2s; }
.search-try a:hover { background: rgb(250 247 241 / 0.2); color: var(--ivory); }
.search-try a.is-on { background: var(--rose-ink); }
.course-search__count { margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.search-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.search-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; align-items: center; height: 100%; padding: 0.75rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow-s); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.search-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.search-card__pic { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #fbf8f1; }
.search-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.search-card__pic img[src*='/images/'] { width: 62%; height: 62%; object-fit: contain; }
.search-card--word .search-card__pic { background: var(--sage-soft); }
.search-card__pic b { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 500; color: var(--teal); }
.search-card__body { display: grid; gap: 0.25rem; }
.search-card__body small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-ink-deep); }
.search-card__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.12rem; line-height: 1.3; color: var(--teal-ink); }
.search-card__body > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.search-card mark { padding: 0 0.1em; border-radius: 3px; background: var(--rose-soft); color: inherit; }
@media (max-width: 900px) { .search-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .search-card { grid-template-columns: 96px minmax(0, 1fr); gap: 0.75rem; } .course-search--hero .btn { padding-inline: 1rem; } }
/* ==========================================================================
   Lessons, polish A (10 Nov 2026): figures, boxes and questions use the full
   article width; paragraphs, headings and lists keep a 65-character line
   ========================================================================== */
.lesson-body.prose { max-width: none; }
.lesson-body > :is(p, h2, h3, ul, ol, blockquote) { max-width: 65ch; }
.lesson-body > .fig { margin-block: 2.6rem; }
.lesson-body > .fig .fig__art { border-radius: var(--picture-radius, 8px); box-shadow: var(--shadow); }
.lesson-body > .fig figcaption { max-width: 72ch; font-size: 0.95rem; }

/* A module overview tells visitors its lessons need the package (10 Nov 2026 audit, CRS-04); hidden once signed in */
.mod-locked { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; max-width: 36rem; border-radius: 8px; background: var(--sand-soft); color: var(--charcoal); font-size: 0.92rem; }
.mod-locked[hidden] { display: none; }
.mod-locked a { color: var(--teal-ink); font-weight: 600; }
/* PERF-03 (10 Nov 2026 audit): on phones the hero lead is the largest text, so it shows at once instead of fading in */
@media (max-width: 700px) { .topic-hero .lead { animation: none; } }