/* ==========================================================================
   Martha — the reading surface
   The lesson body + audio player, shared by the landing preview and the
   full reader page so the preview is literally the product.
   ========================================================================== */

.lesson {
  --reader-scale: 1;
  max-width: var(--measure);
  margin-inline: auto;
  font-size: calc(var(--text-read) * var(--reader-scale));
  line-height: var(--lh-read);
  color: var(--c-text-dim);
}

/* Text-size control on the reader page swaps this value. */
.lesson[data-size="s"] { --reader-scale: 0.92; }
.lesson[data-size="m"] { --reader-scale: 1; }
.lesson[data-size="l"] { --reader-scale: 1.14; }

.lesson__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-amber);
}

.lesson__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c-amber) 40%, transparent), transparent);
}

.lesson__title {
  font-size: clamp(1.85rem, 1.35rem + 2.3vw, 2.85rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-text);
}

.lesson__standfirst {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.06em;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--c-text-mute);
}

.lesson__body { margin-top: 2rem; }
.lesson__body > * + * { margin-top: 1.35em; }

/* First paragraph gets a touch of editorial weight. */
.lesson__body > p:first-child {
  font-size: 1.06em;
  color: var(--c-text);
}

/* The landing preview nests the lesson under an h2, so its sub-heads are h3;
   the reader page owns the h1, so its sub-heads are h2. Same look either way. */
.lesson__body h2,
.lesson__body h3 {
  margin-top: 2.4em;
  font-size: 1.16em;
  font-weight: 500;
  color: var(--c-text);
}

.lesson__body strong {
  color: var(--c-text);
  font-weight: 600;
}

/* Numbered steps — the part a parent actually reads at 3 a.m. */
.lesson__steps {
  margin-top: 1.5em;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.lesson__steps > li {
  position: relative;
  counter-increment: step;
  padding-left: 3.1rem;
  padding-block: 0.15em;
}

.lesson__steps > li + li {
  margin-top: 1.15em;
  border-top: 1px solid var(--c-line-soft);
  padding-top: 1.15em;
}

.lesson__steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--c-amber) 34%, transparent);
  background: color-mix(in oklab, var(--c-amber) 10%, transparent);
  color: var(--c-amber);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}

/* Martha's Quiet Note — safety, always visually distinct, never alarming. */
.quiet-note {
  margin-top: 2.4em;
  padding: 1.35rem 1.4rem;
  border: 1px solid color-mix(in oklab, var(--c-lavender) 30%, transparent);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--c-lavender-dim);
  font-size: 0.95em;
  line-height: 1.62;
}

.quiet-note__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-lavender);
}

/* Some quiet notes run to more than one paragraph — Lesson 7's, for one,
   which has to say the hard thing about postpartum depression separately
   from the safe-sleep reminder. The label is already a block, so only the
   gaps between paragraphs need declaring. Hand-written notes hold a bare
   text node and are untouched by this. */
.quiet-note p + p { margin-top: 0.9em; }

.lesson__foot {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--c-line-soft);
}

/* --------------------------------------------------------------------------
   Audio — the browser's own <audio> element in a card of ours.

   Deliberately native. A hand-drawn transport would have to fake buffering,
   seeking, background playback and the lock-screen controls; the browser has
   all four already. The same element is used on safety.html, on the free
   Lesson 1 and on all twelve pages inside the private folder.
   -------------------------------------------------------------------------- */

.lesson-audio {
  margin-top: 2.6em;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  box-shadow: var(--shadow-soft);
}

.lesson-audio__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 0.75rem;
}

.lesson-audio audio {
  display: block;
  width: 100%;
  height: 2.6rem;
}

/* The native transport ships light-on-light and cannot be restyled. On the
   night palette it glares like a torch; inverting is the only lever we get. */
.zone--night .lesson-audio audio,
[data-reading="night"] .lesson-audio audio {
  filter: invert(0.92) hue-rotate(180deg);
}

/* Fallback link, shown only if the browser cannot play the file at all. */
.lesson-audio a { color: var(--c-lavender); text-underline-offset: 3px; }

.lesson-audio__note {
  margin-top: 0.75rem;
  color: var(--c-text-mute);
}

@media (max-width: 26rem) {
  .lesson-audio { padding-inline: 0.85rem; }
}