/* ──────────────────────────────────────────────────────────────────────────
   Bruma — design system
   calm · luminous · embodied · editorial · nervous-system aware
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand palette (docs/brand.md, docs/brand/tokens.json) ──────────────
     Only Petrol and Ink are approved for text. Sage, Mist, Cream and Coral
     are the mark, surfaces and accents. Coral is scarce on purpose — it marks
     the current focus or the active breath, nothing else. */
  --petrol:          #254F59;
  --petrol-deep:     #1C3D45;
  --petrol-hover:    #16323A;
  --sage:            #739A96;
  --mist:            #B7C9C1;
  --mist-soft:       #D6E1DB;
  --mist-whisper:    #EAF0EC;
  --cream:           #F4EDDF;
  --cream-deep:      #EAE0CD;
  --coral:           #F47F63;
  --coral-soft:      #FBDDD4;
  /* Coral is the brand's focus colour, but #F47F63 is only 2.5:1 on Canvas —
     a focus ring has to clear 3:1 to be perceivable. This is the same hue
     deepened until it passes on canvas, card and the player night alike. */
  --coral-ring:      #DC5334;
  /* Coral is 2.5:1 on Canvas, so it can never carry text. This is the
     darkened form for the rare case that needs a readable warm accent. */
  --coral-text:      #A8422A;
  --coral-rgb:       244, 127, 99;
  --canvas:          #FBF9F5;
  --ink:             #17363D;

  /* Field guide (landing). The paper is Cream warmed toward the elemental
     artwork's own ground so the drawings sit on the page instead of in a
     box; terracotta is Coral aged down for hairline accents — it clears 3:1
     as an underline but not 4.5:1, so terracotta text uses --coral-text. */
  --paper:           #F3EDE1;
  --paper-panel:     #EFE8D8;
  --terracotta:      #C4693B;
  --terracotta-text: var(--coral-text);

  /* Semantic. The whole product sits on the field guide's warm paper; cards
     read as lighter sheets laid on it, not floating white panels. */
  --bg:              var(--paper);
  --bg-paper:        #FCF8EF;
  --bg-card:         #FBF7ED;
  --bg-subtle:       #EDE6D7;
  --bg-elevated:     #FDFBF4;

  --fg:              var(--ink);          /* 12.2:1 on canvas */
  --fg-muted:        var(--petrol);       /*  8.5:1 */
  --fg-soft:         #3F6068;             /*  6.5:1 */
  --fg-faint:        #5C767B;             /*  4.6:1 — safe for text */
  --fg-inverse:      var(--cream);

  --accent:          var(--petrol);
  --accent-deep:     var(--petrol-deep);
  --accent-hover:    var(--petrol-hover);
  --accent-light:    var(--mist);
  --accent-whisper:  var(--mist-whisper);
  --accent-warm:     var(--coral);
  --accent-warm-light: var(--coral-soft);

  --mist-light:      var(--mist-soft);
  --sage-light:      #DDE7E1;

  --border:          rgba(23, 54, 61, 0.12);
  --border-soft:     rgba(23, 54, 61, 0.07);
  --border-accent:   rgba(37, 79, 89, 0.22);

  /* Focus. A saturated ring reads as an error state, so the ring is Petrol —
     the same colour as the type it sits beside, and 8.5:1 on canvas — and the
     warmth comes from a diffuse Coral halo instead of a hard line. Kept at 2px
     so it still meets WCAG 2.2 focus appearance; the subtlety is in the hue
     and the offset, not in a thinner stroke. */
  --focus-ring:      var(--petrol);
  --focus-halo:      rgba(var(--coral-rgb), 0.18);

  /* Player (petrol night) */
  --player-deep:     #0E2429;
  --player-ink:      #132F36;
  --player-mid:      #1A3C44;
  --player-fg:       #EDE9E1;             /* 13.3:1 on player-deep */
  --player-fg-muted: rgba(237, 233, 225, 0.72);
  --player-fg-faint: rgba(237, 233, 225, 0.60);  /* 4.6:1 on the panel ground */
  --player-accent-glow: rgba(115, 154, 150, 0.45);

  /* Instrument panel */
  --panel-from:      #1D4048;
  --panel-mid:       #17343B;
  --panel-to:        #122B31;
  --panel-border:    rgba(183, 201, 193, 0.12);
  --panel-glow:      rgba(115, 154, 150, 0.15);

  /* Gradients. The body wash stays within the paper's own value range — a
     breath of mist at the top, never a cool white. */
  --gradient-body:
    radial-gradient(ellipse 100% 50% at 50% -8%, rgba(183, 201, 193, 0.07), transparent 58%),
    linear-gradient(180deg, #F4EEE3 0%, var(--paper) 100%);

  /* Kept faint on purpose: the mark carries its own cream disc, so a strong
     glow behind it just reads as a smudge around the logo. */
  --gradient-hero-glow:
    radial-gradient(circle at 50% 46%, rgba(244, 237, 223, 0.42) 0%, rgba(183, 201, 193, 0.10) 40%, transparent 70%);

  --gradient-state:
    linear-gradient(128deg,
      rgba(183, 201, 193, 0.75) 0%,
      rgba(244, 237, 223, 0.70) 42%,
      rgba(244, 127, 99, 0.22) 100%);

  --gradient-player:
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(115, 154, 150, 0.20), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(37, 79, 89, 0.16), transparent 50%),
    linear-gradient(168deg, var(--player-mid) 0%, var(--player-ink) 45%, var(--player-deep) 100%);

  /* White on Petrol is 9.0:1. White on Coral is 2.6:1, so Coral is never a
     button fill with a light label. */
  --gradient-btn-accent:
    linear-gradient(165deg, #2F626F 0%, var(--petrol) 55%, var(--petrol-deep) 100%);

  --gradient-btn-primary:
    linear-gradient(165deg, #22505B 0%, var(--ink) 100%);

  /* Shadows. On paper, depth comes from the hairline border; shadows only
     whisper. Anything that read as "floating" got grounded. */
  --shadow-xs:  0 1px 2px rgba(23, 54, 61, 0.04);
  --shadow-sm:  0 1px 3px rgba(23, 54, 61, 0.05);
  --shadow:     0 2px 4px rgba(23, 54, 61, 0.03), 0 10px 28px rgba(23, 54, 61, 0.05);
  --shadow-lg:  0 4px 10px rgba(23, 54, 61, 0.04), 0 18px 44px -10px rgba(23, 54, 61, 0.08);
  --shadow-card:
    0 1px 2px rgba(23, 54, 61, 0.04),
    0 8px 24px rgba(23, 54, 61, 0.04);
  --shadow-glow:
    0 0 48px rgba(115, 154, 150, 0.20),
    0 0 96px rgba(115, 154, 150, 0.08);
  --shadow-btn: 0 1px 2px rgba(23, 54, 61, 0.12);

  /* Radius — restrained, per the field-guide direction. */
  --radius-xs:   6px;
  --radius-sm:   12px;
  --radius:      14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Layout */
  --max-w:        680px;
  --max-w-wide:   960px;
  --max-w-narrow: 520px;

  /* Fluid spacing */
  --space-1:  clamp(0.4rem, 0.4vw + 0.3rem, 0.55rem);
  --space-2:  clamp(0.6rem, 0.5vw + 0.5rem, 0.85rem);
  --space-3:  clamp(0.9rem, 0.6vw + 0.75rem, 1.15rem);
  --space-4:  clamp(1.15rem, 0.8vw + 1rem, 1.5rem);
  --space-5:  clamp(1.5rem, 1.2vw + 1.25rem, 2rem);
  --space-6:  clamp(2rem, 2vw + 1.5rem, 2.75rem);
  --space-7:  clamp(2.5rem, 3vw + 2rem, 4rem);
  --space-8:  clamp(3.5rem, 4vw + 2.5rem, 5.5rem);
  --space-9:  clamp(5rem, 6vw + 3rem, 7.5rem);

  /* ── Type scale (docs/brand.md) ─────────────────────────────────────────
     Every size below is the brand system's, expressed as clamp() between its
     mobile and desktop values so the two documented breakpoints interpolate
     instead of snapping. Nothing here goes below 14px or weight 400. */
  --type-display-xl: clamp(2.5rem, 3.2vw + 1.6rem, 3.5rem);   /* 40 -> 56 */
  --type-display:    clamp(2rem, 1.6vw + 1.5rem, 2.5rem);     /* 32 -> 40 */
  --type-h1:         clamp(1.75rem, 0.8vw + 1.5rem, 2rem);    /* 28 -> 32 */
  --type-h2:         1.5rem;                                   /* 24       */
  --type-h3:         1.25rem;                                  /* 20       */
  --type-lead:       clamp(1.125rem, 0.4vw + 1rem, 1.25rem);  /* 18 -> 20 */
  --type-body-lg:    clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);/* 17 -> 18 */
  --type-body:       1rem;                                     /* 16       */
  --type-body-sm:    0.875rem;                                 /* 14       */
  --type-button:     0.9375rem;                                /* 15       */
  --type-label:      0.8125rem;                                /* 13       */
  --type-caption:    0.75rem;                                  /* 12       */
  --type-eyebrow:    0.75rem;                                  /* 12       */

  --lh-display-xl: 1.15;
  --lh-display:    1.2;
  --lh-h1:         1.25;
  --lh-h2:         1.333;
  --lh-h3:         1.4;
  --lh-lead:       1.6;
  --lh-body-lg:    1.667;
  --lh-body:       1.625;
  --lh-body-sm:    1.571;
  --lh-button:     1.333;
  --lh-label:      1.385;
  --lh-caption:    1.5;

  --tracking-display-xl: -0.025em;
  --tracking-display:    -0.02em;
  --tracking-h1:         -0.015em;
  --tracking-h2:         -0.01em;
  --tracking-h3:         -0.01em;
  --tracking-label:      0.01em;
  --tracking-eyebrow:    0.08em;

  /* Reading widths: prose 45-68ch, guided practice copy near 52ch. */
  --measure:          66ch;
  --measure-narrow:   52ch;

  /* The existing scale maps onto the roles above, so every call site that
     already asks for --text-* lands on a brand size. */
  --text-xs:   var(--type-caption);
  --text-sm:   var(--type-body-sm);
  --text-base: var(--type-body);
  --text-md:   var(--type-body-lg);
  --text-lg:   var(--type-h3);
  --text-xl:   var(--type-h2);
  --text-2xl:  var(--type-h1);
  --text-3xl:  var(--type-display);
  --text-4xl:  var(--type-display-xl);

  --leading-tight:  var(--lh-display);
  --leading-snug:   var(--lh-h2);
  --leading-normal: var(--lh-body);
  --leading-relaxed: var(--lh-body-lg);

  /* Styled selects (combos): shared vertical metrics */
  --combo-padding-y: 0.65rem;
  --combo-line-height: var(--leading-snug);

  /* Typography — Lora carries reflective display type, Inter the interface. */
  --font-serif: var(--bruma-font-display);
  --font-logo:  var(--bruma-font-display);
  --font-sans:  var(--bruma-font-ui);

  /* Motion */
  --t-fast:   140ms;
  --t:        240ms;
  --t-slow:   520ms;
  --t-breath: 4s;
  --ease:     cubic-bezier(0.32, 0.72, 0.42, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  --mark-glow:           rgba(37, 79, 89, 0.18);
  --atmosphere-duration: 20s;
  --breath-scale:        1;
  --breath-duration:     4s;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--gradient-body);
  background-color: var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  line-height: var(--leading-normal);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--accent-light);
  color: var(--ink);
}

main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent-deep);
  text-decoration: none;
  text-underline-offset: 0.2em;
  /* Here rather than on :focus-visible, so a link with its own radius keeps
     it — the outline traces the radius, and the lockups need the larger one. */
  border-radius: var(--radius-xs);
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
/* Heading levels map onto the brand roles: h1 is the page or ritual title
   (Display, Lora 500), h2 and h3 are Lora 600, h4 is the interface subsection
   (H3, Inter 600). Only 400/500/600 are loaded, so nothing synthesises. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--type-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}
h2 {
  font-size: var(--type-h1);
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-h1);
}
h3 {
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
}
h4 {
  font-size: var(--type-h3);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
}

p { margin-bottom: 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.serif { font-family: var(--font-serif); }
.serif--italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--mid {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* The library's column. The tiles set the measure of that page, and the head
   and the toolbar hang from the same left edge as the first tile under them. */
.container--shelf {
  max-width: var(--shelf-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* 47rem was the measure of two book jackets, where the whole of a card was
   picture. A tile spends its first hundred pixels on the mark and the rest on
   words, so the column has to grow with the number of tiles across it or the
   titles have no room to set — the one thing a text-led index cannot afford.
   Below each cap the column runs to the viewport on the container's own
   padding, the way every other container on the site does. */
:root { --shelf-w: 47rem; }

@media (min-width: 700px) {
  :root { --shelf-w: 58rem; }
}

@media (min-width: 1180px) {
  :root { --shelf-w: 76rem; }
}

.section { padding-block: var(--space-8); }
.section--sm { padding-block: var(--space-6); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 237, 225, 0.78);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  border-bottom: 1px solid rgba(23, 54, 61, 0.08);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* The nav sits on the same rail as the page under it: on the library the
   logo and the language picker line up with the shelf's edges, not a
   narrower column floating inside it. */
.nav__inner--shelf { max-width: var(--shelf-w); }

.nav__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--fg);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
/* The outline traces the border-radius, and without one it draws a hard
   rectangle around a circular mark. */
.nav__logo { border-radius: var(--radius-sm); }
.nav__logo:hover { color: var(--accent-deep); }
.nav__logo:hover .bruma-wordmark { color: var(--petrol-hover); }

.bruma-wordmark {
  font-family: var(--bruma-font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--petrol);
  transition: color var(--t-fast) var(--ease);
}

/* Size only. The tracking is the wordmark's own and does not change with
   the optical size — the old uppercase logo tracked out here, and inheriting
   that left the footer looser than the nav. */
.bruma-wordmark--sm {
  font-size: 1.25rem;
}

.bruma-wordmark--player {
  font-size: 1.35rem;
  color: var(--player-fg);
}

.nav__logo-glyph { flex-shrink: 0; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--accent-deep); }

.nav__lang {
  margin: 0;
  display: flex;
  align-items: center;
}

.nav__lang-select {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 400;
  color: var(--fg-faint);
  letter-spacing: 0;
  width: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0.35rem 1.4rem 0.35rem 0.4rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%235C767B' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.3rem center;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.nav__lang-select:hover,
.nav__lang-select:focus {
  color: var(--fg-soft);
  border-color: var(--border-soft);
  outline: none;
  box-shadow: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Player nav */
.nav--player {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  /* Petrol disappears against the night, so the ring inverts and the halo
     carries a little more weight to stay visible over the cue video. */
  --focus-ring: rgba(237, 233, 225, 0.85);
  --focus-halo: rgba(var(--coral-rgb), 0.30);
}

/* The header reads over any video frame, not just the dark ones. */
.nav--player::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 26, 30, 0.55) 0%,
    rgba(8, 26, 30, 0.28) 45%,
    transparent 100%);
}
.nav--player .nav__inner { position: relative; }

.nav--player .nav__logo {
  color: var(--player-fg);
}
.nav--player .nav__logo:hover { color: var(--player-fg); }
.nav--player .nav__link {
  font-size: var(--text-xs);
  color: var(--player-fg-faint);
  letter-spacing: 0.04em;
}
.nav--player .nav__link:hover { color: var(--player-fg-muted); }

/* The player's two controls, as pills.
   They sit over footage that changes from pale fog to dark water, so plain text
   could not hold a contrast — the tinted ground travels with them and gives the
   pair an edge to read against whatever is behind. They also never wrap: in
   Spanish "Detalles de la práctica" broke onto a second line and the header
   collapsed into two ragged stacks. */
.nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.34rem 0.72rem;
  border: 1px solid rgba(var(--cue-aura-rgb, 183, 201, 193), 0.16);
  border-radius: var(--radius-full);
  background: rgba(18, 16, 28, 0.28);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  color: var(--player-fg-muted);
  /* A <button> would otherwise fall back to the system face here. */
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.nav--player .nav__pill:hover {
  background: rgba(28, 25, 42, 0.42);
  border-color: rgba(var(--cue-aura-rgb, 183, 201, 193), 0.3);
  color: var(--player-fg);
}

.nav__pill-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

/* The sound name is the one variable-length thing up here; give it the slack
   that is left and cut it rather than let it push the row wider. */
.nav__pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
}

#sound-open[aria-pressed="true"] .nav__pill-icon--off,
#sound-open[aria-pressed="false"] .nav__pill-icon--on { display: none; }

/* Muted is a state worth seeing without reading the label. */
#sound-open[aria-pressed="false"] {
  color: var(--player-fg-faint);
  border-style: dashed;
}

/* And so is sound being on — a coral pip, the same warmth as the breath. */
#sound-open[aria-pressed="true"] .nav__pill-icon--on { color: var(--coral); }

@media (max-width: 27rem) {
  /* Below this the back label is what forces the wrap, and the arrow alone is
     unambiguous — the accessible name is on the link either way. */
  .nav__pill-label--wide { display: none; }
  .nav__pill--back { padding-inline: 0.5rem; }
  .nav__pill-label { max-width: 7.5rem; }
  .nav__inner { padding-inline: 1rem; }
  .nav__actions { gap: var(--space-2); }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(23, 54, 61, 0.1);
  padding-block: var(--space-5);
  margin-top: var(--space-8);
  background: transparent;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-faint);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__logo { border-radius: var(--radius-sm); }
.footer__logo:hover { color: var(--accent-deep); }

.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem;
}

.footer__link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
}

.footer__link:hover { color: var(--accent-deep); }

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--fg-faint);
  font-family: var(--font-serif);
  font-style: italic;
  margin: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.65rem;
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: 600;
  line-height: var(--lh-button);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease),
    filter var(--t) var(--ease);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

/* Flat petrol plates: on paper a button is ink, not a lit surface. Hovers
   deepen the ink instead of lifting the plate. */
.btn--primary {
  background: var(--ink);
  color: var(--fg-inverse);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
  color: var(--fg-inverse);
  background: var(--petrol-hover);
  text-decoration: none;
}

.btn--accent {
  background: var(--petrol-deep);
  color: #FFFDF9;
  box-shadow: var(--shadow-btn);
}
.btn--accent:hover {
  color: #FFFDF9;
  background: var(--petrol-hover);
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border-accent);
  box-shadow: none;
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-whisper);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--fg-soft);
  border-color: transparent;
}
.btn--ghost:hover {
  color: var(--accent-deep);
  background: var(--accent-whisper);
  text-decoration: none;
}

.btn--sm   { padding: 0.52rem 1.15rem; font-size: var(--text-xs); }
.btn--lg   { padding: 0.95rem 2rem; font-size: var(--text-base); }
.btn--full { width: 100%; }

.btn:disabled,
.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

.btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.intake-form-error {
  font-size: var(--text-sm);
  color: #9A4D42;
  text-align: right;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(201, 154, 139, 0.12);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 154, 139, 0.35);
}

.intake-form-error[hidden] { display: none; }

.choice-list.intake-form-error--highlight .choice-card,
.choice-grid.intake-form-error--highlight .choice-card {
  border-color: rgba(201, 154, 139, 0.45);
}

@keyframes choice-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(calc(-3px * var(--bruma-unit))); }
  75%      { transform: translateX(3px); }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  box-shadow: var(--shadow-xs);
}

.card--lift { box-shadow: var(--shadow); }
.card--lift-lg { box-shadow: var(--shadow-lg); }

.card--subtle {
  background: rgba(255, 252, 247, 0.65);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xs);
}

.card--accent-border {
  border-left: 3px solid var(--accent);
  background: linear-gradient(105deg, var(--bg-paper) 0%, var(--accent-whisper) 100%);
}

/* Ritual / curated note cards */
.note-card {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

/* An editorial callout, not a panel: one flat rule down the margin, the way
   a field guide marks an aside. The gradient fills read as UI chrome. */
.note-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--sage);
}

.note-card--lineage::before {
  background: var(--terracotta);
}

.ritual-note__body {
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  /* 60-75 characters: past that the eye loses the line on the way back. */
  max-width: 68ch;
}

/* Provenance is explanation, not epigraph — several sentences of italic
   serif is a slower read than the same words set in the interface face. */
.ritual-note__body--serif {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-base);
  color: var(--fg-soft);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.75rem; }

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-soft);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input, textarea, select {
  display: block;
  width: 100%;
  padding: 0.78rem 1.05rem;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 79, 89, 0.14);
}

/* Styled dropdowns (library filters, nav language, player sound picks) */
.library-toolbar__select,
.nav__lang-select,
.sound-dialog select.sound-dialog__select {
  line-height: var(--combo-line-height);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(3.5rem, 7vw + 0.75rem, 5.5rem) 0 clamp(3rem, 5vw + 1rem, 4.5rem);
  text-align: center;
  overflow: hidden;
}

.hero .container--narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__atmosphere {
  pointer-events: none;
  position: absolute;
  inset: -20% -10% 0;
  background: var(--gradient-hero-glow);
  animation: atmosphere-drift 18s ease-in-out infinite alternate;
}

@keyframes atmosphere-drift {
  0%   { opacity: 0.85; transform: scale(1) translateY(0); }
  100% { opacity: 1; transform: scale(1.06) translateY(-2%); }
}

.hero__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__eyebrow {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0;
}

.hero__headline {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(2.35rem, 4.8vw + 0.85rem, 3.75rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 var(--space-5);
  max-width: 14ch;
  margin-inline: auto;
}

.hero__sub {
  position: relative;
  font-size: var(--text-md);
  color: var(--fg-soft);
  max-width: 45ch;
  margin: 0 0 var(--space-6);
  line-height: 1.8;
}

.hero__cta-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hero__cta-note {
  font-size: var(--text-sm);
  color: var(--fg-faint);
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.01em;
  margin: 0;
}

.hero__beginner-link {
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  margin-bottom: var(--space-2);
}

/* ── Bruma identity ────────────────────────────────────────────────────────
   Source of truth: docs/brand.md. The mark's geometry, colours and motion are
   fixed by the brand system — no gradients, glows, drop shadows or extra
   outlines, and the outer circle never scales, rotates or pulses.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --bruma-petrol: #254F59;
  --bruma-sage:   #739A96;
  --bruma-mist:   #B7C9C1;
  --bruma-cream:  #F4EDDF;
  --bruma-coral:  #F47F63;
  --bruma-canvas: #FBF9F5;
  --bruma-ink:    #17363D;

  --bruma-font-display: Lora, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --bruma-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The player overwrites this inline with the real step duration, so the
     mark moves at the pace the practitioner is actually breathing. */
  --bruma-phase-duration: 4000ms;
  --bruma-motion-ease: cubic-bezier(0.45, 0, 0.2, 1);
}

.bruma-mark {
  display: block;
  flex: none;
  /* Phase offsets below are in the 512-viewBox's units; the micro drawing is
     a 64 viewBox, so it scales them to stay visually equivalent. */
  --bruma-unit: 1;
}
.bruma-mark--micro { --bruma-unit: 0.125; }

.bruma-mark__layer,
.bruma-mark__sun {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--bruma-phase-duration) var(--bruma-motion-ease);
}

/* Hold holds: it keeps the inhale endpoint rather than easing back to neutral. */
.bruma-mark--phase-inhale .bruma-mark__layer--mist,
.bruma-mark--phase-hold   .bruma-mark__layer--mist { transform: translateY(calc(-6px * var(--bruma-unit))); }
.bruma-mark--phase-inhale .bruma-mark__layer--base,
.bruma-mark--phase-hold   .bruma-mark__layer--base { transform: translateY(calc(4px * var(--bruma-unit))); }
.bruma-mark--phase-inhale .bruma-mark__sun,
.bruma-mark--phase-hold   .bruma-mark__sun { transform: translateY(calc(-1px * var(--bruma-unit))); }

.bruma-mark--phase-exhale .bruma-mark__layer--mist   { transform: translateX(calc(4px * var(--bruma-unit))); }
.bruma-mark--phase-exhale .bruma-mark__layer--middle { transform: translateX(calc(-3px * var(--bruma-unit))); }
.bruma-mark--phase-exhale .bruma-mark__layer--base   { transform: translateX(calc(2px * var(--bruma-unit))); }

/* Loop is for intentional loading only — never the header, favicon or icon. */
.bruma-mark--loop .bruma-mark__layer--mist   { animation: bruma-mist-loop   8s var(--bruma-motion-ease) infinite; }
.bruma-mark--loop .bruma-mark__layer--middle { animation: bruma-middle-loop 8s var(--bruma-motion-ease) infinite; }
.bruma-mark--loop .bruma-mark__layer--base   { animation: bruma-base-loop   8s var(--bruma-motion-ease) infinite; }
.bruma-mark--loop .bruma-mark__sun           { animation: bruma-sun-loop    8s var(--bruma-motion-ease) infinite; }

@keyframes bruma-mist-loop {
  0%, 100% { transform: translate(0, 0); }
  38%, 50% { transform: translate(0, -6px); }
  88%      { transform: translate(4px, 0); }
}
@keyframes bruma-middle-loop {
  0%, 50%, 100% { transform: translate(0, 0); }
  88%           { transform: translate(-3px, 0); }
}
@keyframes bruma-base-loop {
  0%, 100% { transform: translate(0, 0); }
  38%, 50% { transform: translate(0, 4px); }
  88%      { transform: translate(2px, 0); }
}
@keyframes bruma-sun-loop {
  0%, 100% { transform: translate(0, 0); }
  38%, 50% { transform: translate(0, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .bruma-mark__layer,
  .bruma-mark__sun {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Lockup: mark + wordmark. */
.bruma-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.26em;
}
.bruma-logo--stacked { flex-direction: column; gap: 0.08em; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-bar {
  height: 3px;
  background: var(--border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--petrol), var(--mist));
  border-radius: var(--radius-full);
  transition: width 0.45s var(--ease-out);
}

/* ── Intake step ─────────────────────────────────────────────────────────── */
.intake-step {
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-7);
}

.intake-step__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
}

.intake-step__meta {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.intake-step__question {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.15rem);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--fg);
  margin-bottom: var(--space-2);
  letter-spacing: -0.025em;
}

.intake-step__hint {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--fg-faint);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

/* ── Choice grid ─────────────────────────────────────────────────────────── */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.choice-grid--2col { grid-template-columns: repeat(2, 1fr); }
.choice-grid--3col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 480px) {
  .choice-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

.choice-card {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-soft);
  box-shadow: none;
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease),
    color var(--t) var(--ease);
  line-height: 1.35;
  user-select: none;
}

.choice-card:hover {
  border-color: var(--border-accent);
  background: rgba(255, 252, 248, 0.95);
}

.choice-card.selected {
  border-color: var(--accent);
  background: var(--accent-whisper);
  color: var(--accent-deep);
  box-shadow: none;
}

.choice-card.selected .choice-card__label {
  color: var(--accent-deep);
}

.choice-card.selected .ui-icon {
  color: var(--accent-deep);
  border-color: rgba(37, 79, 89, 0.35);
  background: rgba(255, 255, 255, 0.5);
}

.choice-card__label {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg);
  text-align: left;
}

.choice-card__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--fg-faint);
  font-weight: 500;
  text-align: left;
  line-height: 1.45;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.choice-card--list {
  flex-direction: row;
  align-items: center;
  padding: 0.95rem 1.1rem;
  gap: var(--space-3);
}

.choice-card--list .choice-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

/* ── UI icons (monochrome) ─────────────────────────────────────────────── */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent-deep);
  background: rgba(37, 79, 89, 0.08);
  border: 1px solid rgba(37, 79, 89, 0.16);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.ui-icon__svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.ui-icon__fa {
  display: block;
  font-size: 0.95rem;
  line-height: 1;
}

.ui-icon__typo {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* The feature chips are the one icon tier that carries Coral: they appear
   once per card on the editorial pages, never in a grid. The dense tiers
   (--pill on every library card, --choice, --prompt) stay Petrol — repeating
   Coral across a list would spend the whole scarcity budget on chrome.
   The glyph is --coral-text, not Coral: #F47F63 is 2.5:1 here. */
.ui-icon--feature {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--coral-text);
  background: rgba(var(--coral-rgb), 0.10);
  border-color: rgba(220, 83, 52, 0.22);
}

.ui-icon--feature .ui-icon__svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-icon--feature .ui-icon__fa {
  font-size: 1.1rem;
}

.ui-icon--choice {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(37, 79, 89, 0.06);
  flex-shrink: 0;
}

.ui-icon--choice .ui-icon__fa {
  font-size: 1.05rem;
}

.ui-icon--choice .ui-icon__typo {
  font-size: 1.25rem;
}

.ui-icon--choice .ui-icon__svg {
  width: 1.3rem;
  height: 1.3rem;
}

.ui-icon--pill {
  width: 1.35rem;
  height: 1.35rem;
  border: none;
  background: transparent;
  border-radius: 0;
}

.ui-icon--pill .ui-icon__svg,
.ui-icon--pill .ui-icon__fa {
  font-size: 0.85rem;
  width: auto;
  height: auto;
}

.ui-icon--pill .ui-icon__typo {
  font-size: 0.95rem;
}

.ui-icon--prompt {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(37, 79, 89, 0.06);
  flex-shrink: 0;
}

.ui-icon--prompt .ui-icon__svg,
.ui-icon--prompt .ui-icon__fa {
  font-size: 0.9rem;
}

.ui-icon--prompt .ui-icon__typo {
  font-size: 1rem;
}

.choice-grid--time {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* ── Body scan guide ─────────────────────────────────────────────────────── */
.body-scan {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.body-scan__lead {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-faint);
  margin-bottom: var(--space-3);
}

.body-scan__steps {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.body-scan__steps li + li { margin-top: 0.5rem; }

.body-scan__outro {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.intake-inspirations-label {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  margin-bottom: var(--space-2);
}

/* ── Text input intake ───────────────────────────────────────────────────── */
.intake-text-wrap {
  position: relative;
  margin-bottom: var(--space-5);
}

.intake-text-input,
.intake-textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-soft);
  color: var(--fg);
  resize: vertical;
  line-height: var(--leading-relaxed);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.intake-textarea { min-height: 7rem; }

.intake-text-input:focus,
.intake-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 79, 89, 0.12);
}

.intake-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.chip {
  padding: 0.4rem 0.9rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.chip:hover, .chip.selected {
  background: var(--accent-whisper);
  border-color: var(--border-accent);
  color: var(--accent-deep);
}

/* ── Nav actions row ─────────────────────────────────────────────────────── */
.intake-nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.intake-nav .btn-wrap {
  margin-left: auto;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.loading-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-7);
  padding: var(--space-6) var(--space-5);
}

.loading-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 34rem;
}

.loading-quote-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--space-7) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.loading-quote-wrap::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 11vw, 4.75rem);
  font-style: normal;
  line-height: 1;
  color: var(--petrol);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.loading-quote {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 30rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.loading-quote p {
  margin: 0;
}

.loading-quote p::after {
  content: "\201D";
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.35em;
  line-height: 0;
  color: var(--petrol);
  opacity: 0.55;
  margin-left: 0.08em;
  vertical-align: -0.12em;
}

.loading-quote-author {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.loading-quote-author::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0 auto var(--space-3);
  background: var(--border-accent);
}

/* The mark itself is the loading state. No gradient, glow or scale pulse —
   the layers drift, the outer circle holds still. */
.loading-mark {
  flex-shrink: 0;
  display: flex;
}

.loading-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 22rem;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.loading-text {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--fg-soft);
}

.loading-subtext {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* ── Recommendation ──────────────────────────────────────────────────────── */
.recommendation {
  padding-top: clamp(var(--space-6), 7vh, var(--space-8));
  padding-bottom: var(--space-8);
}

.lineage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  background: var(--accent-whisper);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-xs);
}

.lineage-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(37, 79, 89, 0.5);
  flex-shrink: 0;
}

.lineage-section { margin-bottom: var(--space-4); }

.lineage-inspired-by {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--space-3);
}

.recommendation__eyebrow {
  margin-bottom: var(--space-3);
}

.practice-header {
  margin-bottom: var(--space-6);
}

/* ── Practice intro ───────────────────────────────────────────────────────
   The detail screen opens as a spread: what the practice asks of you on the
   left, its watercolour on the right, painted straight onto the page. The
   art column is capped rather than fluid — past ~380px the mark stops being
   an illustration and starts being a poster. */
.practice-intro {
  display: grid;
  gap: var(--space-5) var(--space-6);
  align-items: center;
}

.practice-intro--with-art {
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.practice-intro__body {
  min-width: 0;
  max-width: var(--max-w);
}

.practice-intro__art {
  display: block;
  width: 100%;
  height: auto;
  justify-self: end;
}

.practice-intro__reason {
  margin-bottom: 0;
}

/* With a watercolour on the right, the intro sets a left rail and everything
   below hangs from it — the sections keep their reading measure but stop
   being centred, so "Source current" lines up under "Why this practice"
   instead of drifting toward the middle of the page. A generated practice
   has no art and no rail, and stays centred the way it always was. */
.recommendation__sections {
  max-width: var(--max-w);
  margin-inline: auto;
}

.recommendation--illustrated .recommendation__sections {
  margin-inline: 0;
}

/* Stacked, the artwork leads: it is the first thing the chosen practice says,
   and the title reads under it the way a plate caption does. */
@media (max-width: 900px) {
  .practice-intro--with-art {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .practice-intro__body {
    width: 100%;
  }

  .practice-intro__art {
    order: -1;
    justify-self: center;
    width: clamp(210px, 58vw, 320px);
  }
}

.practice-title {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3vw + 1rem, 2.75rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 0.55rem;
}

.practice-subtitle-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.practice-subtitle-row .practice-subtitle {
  margin: 0;
}

.practice-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
  max-width: var(--measure-narrow);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.meta-row--with-cta {
  align-items: center;
  gap: var(--space-3);
}

.meta-row__cta {
  margin-left: auto;
  flex-shrink: 0;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-soft);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.meta-pill:hover {
  border-color: var(--border-accent);
}

.duration-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem;
  line-height: 1;
}

.duration-stepper__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--bg-base);
  color: var(--fg-soft);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color var(--t-fast),
    color var(--t-fast),
    background var(--t-fast);
}

.duration-stepper__btn--dec::before,
.duration-stepper__btn--inc::before,
.duration-stepper__btn--inc::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
}

.duration-stepper__btn--dec::before,
.duration-stepper__btn--inc::before {
  width: 0.55rem;
  height: 2px;
  transform: translate(-50%, -50%);
}

.duration-stepper__btn--inc::after {
  width: 2px;
  height: 0.55rem;
  transform: translate(-50%, -50%);
}

.duration-stepper__btn:hover:not(:disabled) {
  border-color: var(--border-accent);
  color: var(--fg);
  background: var(--bg-elevated);
}

.duration-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.duration-stepper__value {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 3.25rem;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  line-height: 1;
  text-transform: lowercase;
}

.duration-stepper__unit {
  text-transform: lowercase;
}

.state-shift {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--gradient-state);
  border: 1px solid rgba(183, 201, 193, 0.5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 40px rgba(37, 79, 89, 0.1);
}

.state-from, .state-to {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.state-from { color: var(--fg-soft); }
.state-to {
  color: var(--accent-deep);
  font-weight: 500;
}

.state-arrow {
  color: var(--fg-faint);
  font-size: 1.25rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Breath rhythm instrument panel */
.breath-pattern-card {
  --breath-control-width: 7.75rem;
  --breath-stepper-btn-size: 1.5rem;
  position: relative;
  background: linear-gradient(152deg, var(--panel-from), var(--panel-mid) 48%, var(--panel-to));
  color: var(--fg-inverse);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(183, 201, 193, 0.06),
    0 20px 48px rgba(23, 54, 61, 0.18),
    0 0 60px var(--panel-glow);
  overflow: hidden;
}

.breath-pattern-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(183, 201, 193, 0.12), transparent 70%);
  pointer-events: none;
}

.breath-pattern-card__toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.breath-pattern-card--personal .breath-pattern-card__toolbar {
  margin-bottom: var(--space-2);
}

.breath-pattern-card__toolbar-spacer {
  flex: 1;
}

.breath-pattern-label {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 233, 225, 0.5);
  margin: 0;
}

.breath-pattern-card--personal .breath-pattern-label {
  margin: 0;
}

.breath-pattern-card__edit-toggle {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237, 233, 225, 0.55);
  cursor: pointer;
  transition: color 0.15s ease;
}

.breath-pattern-card__edit-toggle:hover {
  color: rgba(237, 233, 225, 0.88);
}

.breath-pattern-card--personal .breath-pattern-card__edit-toggle {
  color: var(--fg-muted);
}

.breath-pattern-card--personal .breath-pattern-card__edit-toggle:hover {
  color: var(--fg);
}

.breath-pattern-card--editing .breath-pattern-card__edit-toggle {
  color: rgba(183, 201, 193, 0.88);
}

.breath-pattern-card--personal.breath-pattern-card--editing .breath-pattern-card__edit-toggle {
  color: var(--accent-deep);
}

.breath-phase {
  position: relative;
}

.breath-phase--follows {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(183, 201, 193, 0.1);
}

.breath-phase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.breath-phase__name {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237, 233, 225, 0.72);
}

.breath-phase__duration-stepper {
  flex-shrink: 0;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(237, 233, 225, 0.14);
}

.breath-pattern-card--personal .breath-phase__duration-stepper {
  background: var(--bg-elevated);
  border-color: var(--border-soft);
}

.breath-pattern-card .breath-phase__duration-stepper .duration-stepper__btn {
  width: var(--breath-stepper-btn-size);
  height: var(--breath-stepper-btn-size);
  border-color: rgba(237, 233, 225, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(237, 233, 225, 0.72);
}

.breath-pattern-card .breath-phase__duration-stepper .duration-stepper__btn:hover:not(:disabled) {
  border-color: rgba(183, 201, 193, 0.45);
  background: rgba(255, 255, 255, 0.14);
  color: var(--fg-inverse);
}

.breath-pattern-card--personal .breath-phase__duration-stepper .duration-stepper__btn {
  border-color: var(--border-soft);
  background: var(--bg-elevated);
  color: var(--fg-soft);
}

.breath-pattern-card--personal .breath-phase__duration-stepper .duration-stepper__btn:hover:not(:disabled) {
  border-color: var(--border-accent);
  color: var(--fg);
}

.breath-phase__duration-count {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgba(237, 233, 225, 0.88);
}

.breath-pattern-card--personal .breath-phase__duration-count {
  color: var(--fg);
}

.breath-phase__duration-stepper .duration-stepper__unit {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(237, 233, 225, 0.42);
}

.breath-pattern-card--personal .breath-phase__duration-stepper .duration-stepper__unit {
  color: var(--fg-muted);
}

.breath-phase__desc {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(237, 233, 225, 0.52);
  line-height: var(--leading-relaxed);
}

.breath-segments {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.breath-segment { text-align: center; min-width: 3.5rem; }

.breath-segment__count {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 400;
  line-height: 1;
  color: var(--fg-inverse);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

.breath-segment__count--rhythm {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: 0.02em;
  font-variant-numeric: normal;
}

.breath-segment__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(237, 233, 225, 0.48);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.45rem;
}

.breath-segment__divider {
  align-self: center;
  color: rgba(237, 233, 225, 0.22);
  font-size: 1.4rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-serif);
}

.cycle-desc {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(183, 201, 193, 0.1);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(237, 233, 225, 0.58);
  line-height: var(--leading-relaxed);
}

.instructions-list {
  list-style: none;
  counter-reset: steps;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.instructions-list li {
  display: flex;
  gap: var(--space-3);
  counter-increment: steps;
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

.instructions-list li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-whisper);
  color: var(--accent-deep);
  border: 1px solid var(--border-accent);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 0.05rem;
}

.visualization-block {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--sage-light), rgba(183, 201, 193, 0.4));
  border-radius: var(--radius);
  border-left: 3px solid var(--sage);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
}

.somatic-block {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--coral-soft), rgba(251, 221, 212, 0.5));
  border-radius: var(--radius);
  border-left: 3px solid var(--coral);
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

.optional-folds {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.optional-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: none;
  overflow: hidden;
}

.optional-fold--follows {
  margin-top: var(--space-3);
}

.optional-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.optional-fold__summary::-webkit-details-marker {
  display: none;
}

.optional-fold__summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--accent-deep);
  line-height: 1;
}

.optional-fold[open] .optional-fold__summary::after {
  content: '−';
}

.optional-fold__summary:hover {
  color: var(--fg);
  background: var(--accent-whisper);
}

.optional-fold__body,
.optional-fold__ideas li {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-style: normal;
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

.optional-fold__body {
  padding: 0 var(--space-5) var(--space-5);
}

.optional-fold__ideas {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.optional-fold__ideas li {
  padding-left: 1rem;
  border-left: 2px solid var(--border-accent);
}

.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--space-3);
}

.section-block { margin-bottom: var(--space-5); }

/* Source current: one panel, accent runs full height */
/* Provenance is the page's quiet authority: flat paper and one terracotta
   rule, not a tinted panel with a three-stop gradient down its edge. */
.source-current-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: none;
  overflow: hidden;
}

.source-current-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--terracotta);
  pointer-events: none;
}

.source-current-panel__intro {
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
}

.source-current-panel__offer {
  padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  border-top: 1px solid rgba(183, 201, 193, 0.65);
}

.source-current-panel__intro + .source-current-panel__offer,
.source-current-panel__intro + #source-extras-slot .source-current-panel__offer {
  border-top: 1px solid rgba(183, 201, 193, 0.65);
}

#source-extras-slot > .source-current-panel__fold:first-child {
  border-top: 1px solid rgba(183, 201, 193, 0.65);
}

.source-current-panel__load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast);
}

.source-current-panel__load:hover:not(:disabled) {
  color: var(--accent-deep);
}

.source-current-panel__load:disabled {
  cursor: wait;
  opacity: 0.7;
}

.source-current-panel__load-icon {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--accent-deep);
  line-height: 1;
}

.source-current-panel__load-hint {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  color: var(--fg-faint);
  line-height: var(--leading-relaxed);
}

.source-current-panel__load-status {
  margin: 0.75rem 0 0;
}

.source-current-panel__load-status--loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0 0.1rem;
  animation: fade-up 0.45s var(--ease-out) both;
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.source-current-panel__load-orb {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(183, 201, 193, 0.95),
    rgba(37, 79, 89, 0.42) 55%,
    rgba(37, 79, 89, 0.1));
  box-shadow: 0 0 10px rgba(37, 79, 89, 0.22);
  animation: orb-pulse 3s ease-in-out infinite;
}

.source-current-panel__load-message {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
}

.source-current-panel__load-status--error {
  font-size: var(--text-sm);
  color: var(--accent-deep);
  line-height: var(--leading-relaxed);
}

.source-current-panel__retry {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.source-current-panel__fold {
  border-top: 1px solid rgba(183, 201, 193, 0.65);
}

.source-current-panel__fold + .source-current-panel__fold {
  border-top-color: rgba(183, 201, 193, 0.65);
}

.source-current-panel__intro + .source-current-panel__fold {
  border-top: 1px solid rgba(183, 201, 193, 0.65);
}

.source-current-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 4px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.source-current-panel__summary::-webkit-details-marker {
  display: none;
}

.source-current-panel__summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--accent-deep);
  line-height: 1;
}

.source-current-panel__fold[open] .source-current-panel__summary::after {
  content: '−';
}

.source-current-panel__fold[open] .source-current-panel__summary {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.35);
}

.source-current-panel__summary:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.45);
}

.source-current-panel__body {
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

.reference-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reference-item {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.reference-item:first-child {
  padding-top: 0;
  border-top: none;
}

.reference-list--panel {
  padding-top: 0;
}

.reference-item__type {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.reference-item__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--fg);
  line-height: var(--leading-snug);
  margin: 0 0 0.25rem;
}

.reference-item__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-underline-offset: 0.15em;
}

.reference-item__link:hover {
  color: var(--accent-deep);
}

.reference-item__link--search {
  text-decoration-style: dotted;
}

.reference-item__search-hint {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  vertical-align: middle;
}

.reference-item__creator {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.reference-item__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

.cta-block {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

/* ── Practice player ─────────────────────────────────────────────────────── */
.practice-screen {
  min-height: 100dvh;
  --focus-ring: rgba(237, 233, 225, 0.85);
  --focus-halo: rgba(var(--coral-rgb), 0.30);
  background: var(--gradient-player);
  background-color: var(--player-ink);
  color: var(--player-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.practice-screen::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(20, 16, 28, 0.4), transparent 58%),
    radial-gradient(ellipse 60% 45% at 20% 15%, rgba(217, 228, 211, 0.04), transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 25%, rgba(183, 201, 193, 0.05), transparent 50%);
}

/* Player atmosphere (drifting light + motes) */
.bruma-atmosphere {
  pointer-events: none;
  user-select: none;
}

.bruma-atmosphere__drift {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  animation: atmosphere-shift var(--atmosphere-duration) ease-in-out infinite alternate;
}

.bruma-atmosphere__drift--1 {
  width: 52%;
  height: 48%;
  top: 8%;
  left: 10%;
  background: radial-gradient(circle, var(--atmo-a, var(--mark-glow)), transparent 68%);
}

.bruma-atmosphere__drift--2 {
  width: 42%;
  height: 38%;
  bottom: 12%;
  right: 8%;
  background: radial-gradient(circle, var(--atmo-b, rgba(217, 228, 211, 0.12)), transparent 70%);
  animation-delay: -7s;
  animation-direction: alternate-reverse;
}

.bruma-atmosphere__drift--3 {
  width: 34%;
  height: 30%;
  top: 44%;
  right: 18%;
  background: radial-gradient(circle, var(--atmo-c, rgba(221, 234, 240, 0.08)), transparent 72%);
  animation-delay: -14s;
}

.bruma-atmosphere__mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--atmo-mote, rgba(183, 201, 193, 0.35));
  filter: blur(0.5px);
  animation: atmosphere-mote 14s ease-in-out infinite;
}

.bruma-atmosphere__mote--1 { top: 22%; left: 28%; animation-delay: 0s; }
.bruma-atmosphere__mote--2 { top: 58%; left: 72%; animation-delay: -4.5s; }
.bruma-atmosphere__mote--3 { top: 38%; left: 48%; animation-delay: -9s; width: 2px; height: 2px; opacity: 0.6; }

@keyframes atmosphere-shift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.35; }
  100% { transform: translate(2%, -2.5%) scale(1.05); opacity: 0.58; }
}

@keyframes atmosphere-mote {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  50%      { transform: translate(12px, -18px); opacity: 0.55; }
}

.practice-screen > .bruma-atmosphere--player {
  position: absolute;
  inset: 0;
  z-index: 0;
  --atmosphere-duration: 26s;
}

.bruma-atmosphere--paused .bruma-atmosphere__drift,
.bruma-atmosphere--paused .bruma-atmosphere__mote {
  animation-play-state: paused;
}

/* ── Cue-themed atmosphere ──────────────────────────────────────────────────
   The player takes its colour from the chosen sound: rain is cool and wet,
   fire is warm and close, forest is green. `data-cue` on .practice-screen is
   set from the selected pack, and everything below is inherited variables, so
   switching sound repaints without touching a single element.

   Two extra layers do the heavy lifting. `__veil` is a flat tint over the whole
   screen; `__fall` is a precipitation curtain, invisible unless a cue opts in
   by setting --atmo-fall. Both are single composited elements — a meditation
   screen that drops frames is worse than one that is plain.

   The controls follow the same rule: the --cue-* variables below re-tint the
   player's buttons, progress bar, volume track and completion glyph, each hue
   drawn from its cue's own --atmo-* palette. The base rules fall back to the
   default petrol, so a cue that sets none of them is untouched. */

.bruma-atmosphere__veil {
  position: absolute;
  inset: 0;
  background: var(--atmo-veil, transparent);
  transition: background 1.2s ease;
}

.bruma-atmosphere__fall {
  position: absolute;
  inset: -30% -15%;
  opacity: var(--atmo-fall, 0);
  transition: opacity 1.2s ease;
  /* Elliptical radial gradients, not repeating-linear ones. A linear gradient always
     spans the full perpendicular axis, so it paints edge-to-edge lines — which read as
     striped wallpaper rather than weather. A radial gradient is bounded on both axes, so
     each tile holds one short streak with space around it.

     Three layers at different sizes and speeds give depth: the near ones are longer and
     faster, the far ones finer and slower. The streak shape is a variable too, so a cue
     can stretch short drops into long threads without a second element. */
  background-image:
    radial-gradient(var(--atmo-drop-near, 1.2px 14px) at 50% 50%, var(--atmo-fall-colour, rgba(198, 219, 236, 0.55)) 0 55%, transparent 100%),
    radial-gradient(var(--atmo-drop-mid, 1px 9px) at 50% 50%, var(--atmo-fall-colour, rgba(198, 219, 236, 0.40)) 0 55%, transparent 100%),
    radial-gradient(var(--atmo-drop-far, 0.8px 6px) at 50% 50%, var(--atmo-fall-colour, rgba(198, 219, 236, 0.30)) 0 55%, transparent 100%);
  /* Deliberately awkward numbers. Tidy ones share factors, the layers line up, and the
     tiling reads as a grid of dashes instead of weather. */
  background-size:
    var(--atmo-fall-near, 173px 211px),
    var(--atmo-fall-mid, 97px 139px),
    var(--atmo-fall-far, 61px 89px);
  background-position: 0 0, 43px 37px, 19px 71px;
  /* Rain falls at a slant; the oversized inset above hides the rotated corners. */
  transform: rotate(var(--atmo-fall-tilt, 11deg));
  animation:
    atmosphere-fall-near var(--atmo-fall-speed, 1.1s) linear infinite,
    atmosphere-fall-mid calc(var(--atmo-fall-speed, 1.1s) * 1.7) linear infinite,
    atmosphere-fall-far calc(var(--atmo-fall-speed, 1.1s) * 2.6) linear infinite;
  will-change: background-position;
}

/* Each layer scrolls its own background rather than transforming the element, so the
   three can travel at different speeds without three stacked elements.

   Each layer travels exactly one tile height, so the loop is seamless. That means the
   travel has to follow the tile size a cue picks — a fixed distance against a resized
   tile lands mid-tile and the curtain visibly jumps once per cycle. The heights are
   named separately from --atmo-fall-* because those are `width height` shorthands and
   there is no way to read one component back out. */
@keyframes atmosphere-fall-near {
  to { background-position: 0 var(--atmo-h-near, 211px), 43px 37px, 19px 71px; }
}
@keyframes atmosphere-fall-mid {
  to { background-position: 0 0, 43px calc(37px + var(--atmo-h-mid, 139px)), 19px 71px; }
}
@keyframes atmosphere-fall-far {
  to { background-position: 0 0, 43px 37px, 19px calc(71px + var(--atmo-h-far, 89px)); }
}

.bruma-atmosphere--paused .bruma-atmosphere__fall { animation-play-state: paused; }

/* Hero-cue background loop. First in the stack, so the veil tint and the
   drifts paint over it — at half opacity under the veil it stays atmosphere
   rather than becoming a backdrop, and the text keeps its contrast.

   In the markup for every cue, but src-less and idle until bruma-video.js
   switches it on for a cue with a committed file. */
.bruma-atmosphere__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* Half strength suits most footage, but a cue can ask for less: this is an
   atmosphere, and the level that reads as weather for fog is a bonfire behind
   the quote for fire. Bright, high-contrast clips set their own. */
.bruma-atmosphere__video--on { opacity: var(--cue-video, 0.5); }

/* The painted weather, grouped so a video can retire all of it together.
   Fading the group rather than each layer matters: the drifts and motes carry
   their opacity inside a keyframe, so cancelling their animations to fade them
   individually would snap each one to full strength on the way out. */
.bruma-atmosphere__procedural {
  position: absolute;
  inset: 0;
  transition: opacity 1.2s ease;
}

.bruma-atmosphere--video .bruma-atmosphere__procedural { opacity: 0; }

/* Nothing under a finished fade is worth animating; the frozen frame is
   invisible behind opacity 0. */
.bruma-atmosphere--video .bruma-atmosphere__drift,
.bruma-atmosphere--video .bruma-atmosphere__mote,
.bruma-atmosphere--video .bruma-atmosphere__fall {
  animation-play-state: paused;
}

/* Each cue names its own palette. Anything unlisted keeps the default drift. */
.practice-screen[data-cue] {
  transition: background 1.2s ease;
}

.practice-screen[data-cue='rain'] {
  --atmo-a: rgba(120, 152, 186, 0.26);
  --atmo-b: rgba(150, 176, 199, 0.14);
  --atmo-c: rgba(176, 200, 217, 0.10);
  --atmo-mote: rgba(198, 219, 236, 0.40);
  --atmo-veil: linear-gradient(180deg, rgba(30, 52, 78, 0.55), rgba(18, 30, 46, 0.40));
  --atmo-fall: 0.55;
  --atmo-fall-speed: 1.1s;
  --cue-accent: rgba(168, 199, 226, 0.75);
  --cue-accent-strong: #BCD4E8;
  --cue-accent-gradient: linear-gradient(90deg, #4A6B8C, #BCD4E8);
  --cue-btn-accent: linear-gradient(165deg, #5E7FA0 0%, #46617E 55%, #33485E 100%);
  --cue-btn-glow: rgba(70, 97, 126, 0.35);
  --cue-btn-glow-soft: rgba(120, 152, 186, 0.22);
  --cue-btn-bg: rgba(198, 219, 236, 0.07);
  --cue-btn-border: rgba(198, 219, 236, 0.16);
  --cue-btn-bg-hover: rgba(198, 219, 236, 0.12);
  --cue-btn-border-hover: rgba(198, 219, 236, 0.30);
  --cue-sphere-rgb: 198, 219, 236;
  --cue-glow-rgb: 90, 130, 170;
  --cue-aura-rgb: 198, 219, 236;
}

.practice-screen[data-cue='ocean'] {
  --atmo-a: rgba(96, 128, 178, 0.24);
  --atmo-b: rgba(128, 158, 196, 0.13);
  --atmo-c: rgba(160, 188, 214, 0.09);
  --atmo-mote: rgba(206, 220, 240, 0.36);
  --atmo-veil: linear-gradient(180deg, rgba(26, 42, 68, 0.36), rgba(18, 28, 46, 0.26));
  --cue-accent: rgba(172, 196, 230, 0.75);
  --cue-accent-strong: #C0D2EA;
  --cue-accent-gradient: linear-gradient(90deg, #50698F, #C0D2EA);
  --cue-btn-accent: linear-gradient(165deg, #66809F 0%, #4E6483 55%, #394A62 100%);
  --cue-btn-glow: rgba(78, 100, 131, 0.35);
  --cue-btn-glow-soft: rgba(96, 128, 178, 0.22);
  --cue-btn-bg: rgba(206, 220, 240, 0.07);
  --cue-btn-border: rgba(206, 220, 240, 0.16);
  --cue-btn-bg-hover: rgba(206, 220, 240, 0.12);
  --cue-btn-border-hover: rgba(206, 220, 240, 0.30);
  --cue-sphere-rgb: 206, 220, 240;
  --cue-glow-rgb: 78, 110, 150;
  --cue-aura-rgb: 206, 220, 240;
  --cue-video: 0.38;
}

.practice-screen[data-cue='fire'] {
  --atmo-a: rgba(214, 122, 62, 0.26);
  --atmo-b: rgba(198, 88, 52, 0.15);
  --atmo-c: rgba(232, 164, 96, 0.10);
  --atmo-mote: rgba(255, 196, 132, 0.55);
  --atmo-veil: linear-gradient(180deg, rgba(58, 28, 20, 0.34), rgba(34, 18, 14, 0.30));
  --cue-accent: rgba(255, 178, 112, 0.75);
  --cue-accent-strong: #F5C08A;
  --cue-accent-gradient: linear-gradient(90deg, #A85C34, #F5C08A);
  --cue-btn-accent: linear-gradient(165deg, #C97B47 0%, #A85C34 55%, #7E4226 100%);
  --cue-btn-glow: rgba(168, 92, 52, 0.35);
  --cue-btn-glow-soft: rgba(214, 122, 62, 0.22);
  --cue-btn-bg: rgba(255, 196, 132, 0.07);
  --cue-btn-border: rgba(255, 196, 132, 0.16);
  --cue-btn-bg-hover: rgba(255, 196, 132, 0.12);
  --cue-btn-border-hover: rgba(255, 196, 132, 0.30);
  --cue-sphere-rgb: 255, 212, 164;
  --cue-glow-rgb: 190, 100, 50;
  --cue-aura-rgb: 255, 212, 164;
  --cue-video: 0.3;
}

.practice-screen[data-cue='forest'] {
  --atmo-a: rgba(96, 148, 106, 0.24);
  --atmo-b: rgba(126, 170, 122, 0.13);
  --atmo-c: rgba(164, 196, 150, 0.09);
  --atmo-mote: rgba(214, 234, 200, 0.36);
  --atmo-veil: linear-gradient(180deg, rgba(26, 48, 36, 0.34), rgba(18, 32, 26, 0.26));
  --cue-accent: rgba(174, 208, 160, 0.75);
  --cue-accent-strong: #C2DCAE;
  --cue-accent-gradient: linear-gradient(90deg, #4E7A50, #C2DCAE);
  --cue-btn-accent: linear-gradient(165deg, #648D62 0%, #4C6F4C 55%, #375138 100%);
  --cue-btn-glow: rgba(76, 111, 76, 0.35);
  --cue-btn-glow-soft: rgba(96, 148, 106, 0.22);
  --cue-btn-bg: rgba(214, 234, 200, 0.07);
  --cue-btn-border: rgba(214, 234, 200, 0.16);
  --cue-btn-bg-hover: rgba(214, 234, 200, 0.12);
  --cue-btn-border-hover: rgba(214, 234, 200, 0.30);
  --cue-sphere-rgb: 214, 234, 200;
  --cue-glow-rgb: 86, 130, 90;
  --cue-aura-rgb: 214, 234, 200;
}

.practice-screen[data-cue='canyon'] {
  --atmo-a: rgba(198, 146, 96, 0.24);
  --atmo-b: rgba(176, 126, 92, 0.14);
  --atmo-c: rgba(214, 178, 138, 0.09);
  --atmo-mote: rgba(240, 216, 186, 0.38);
  --atmo-veil: linear-gradient(180deg, rgba(56, 40, 30, 0.32), rgba(36, 26, 20, 0.26));
  --cue-accent: rgba(226, 190, 148, 0.75);
  --cue-accent-strong: #E8CBA2;
  --cue-accent-gradient: linear-gradient(90deg, #96683E, #E8CBA2);
  --cue-btn-accent: linear-gradient(165deg, #AC7E50 0%, #8A623C 55%, #66472C 100%);
  --cue-btn-glow: rgba(138, 98, 60, 0.35);
  --cue-btn-glow-soft: rgba(198, 146, 96, 0.22);
  --cue-btn-bg: rgba(240, 216, 186, 0.07);
  --cue-btn-border: rgba(240, 216, 186, 0.16);
  --cue-btn-bg-hover: rgba(240, 216, 186, 0.12);
  --cue-btn-border-hover: rgba(240, 216, 186, 0.30);
  --cue-sphere-rgb: 240, 216, 186;
  --cue-glow-rgb: 168, 116, 70;
  --cue-aura-rgb: 240, 216, 186;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the colour, drop the falling. Motion is the part that intrudes. */
  .bruma-atmosphere__fall { animation: none; opacity: calc(var(--atmo-fall, 0) * 0.5); }
}

.practice-screen__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
}

.practice-idle__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
  margin-bottom: var(--space-5);
}

.practice-idle__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--player-fg-muted);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  max-width: 32ch;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

.practice-quote {
  position: relative;
  margin: var(--space-4) auto var(--space-7);
  padding-top: var(--space-5);
  max-width: 30ch;
  text-align: center;
}

.practice-quote::before {
  content: "\201C";
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 7vw, 3rem);
  font-style: normal;
  line-height: 1;
  color: var(--petrol);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

.practice-quote__text {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--player-fg-muted);
}

.practice-quote__text p {
  display: inline;
  margin: 0;
}

.practice-quote__text p::after {
  content: "\201D";
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.3em;
  line-height: 0;
  color: var(--petrol);
  opacity: 0.55;
  margin-left: 0.06em;
  vertical-align: -0.12em;
}

.practice-quote__author {
  display: inline;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
  white-space: nowrap;
}

.practice-quote__author::before {
  content: "\00A0\00A0-\00A0";
  color: var(--player-fg-faint);
  opacity: 0.7;
}

/* Breath guide (soft halo: expands with inhale, settles with exhale) */
.breath-guide-wrap {
  position: relative;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  --breath-duration: 4s;
}

.breath-guide--interactive { cursor: pointer; }

.breath-guide__stage {
  position: relative;
  width: 13rem;
  height: 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--breath-duration) ease;
}

/* ── The Open Portal breath guide ──────────────────────────────────────────
   Five hand-drawn rings that open outward on the inhale and gather back
   around the coral core on the exhale (_open_portal.html).

   No transition or animation appears here on purpose: bruma-portal.js writes
   these variables every frame from the player's own tick, so there is no
   second clock for the portal to drift against. Pausing the tick freezes the
   portal on the same frame as the countdown.

   Only transform and opacity move — never the path data — and the paint is
   inline in the SVG: the portal keeps its concept palette in every scene,
   translucent enough that the cue video reads through all of it. The
   variable defaults below are the nested rest state, shown until the first
   tick writes over them.
   ──────────────────────────────────────────────────────────────────────── */
.open-portal {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.open-portal__ring,
.open-portal__haze,
.open-portal__core {
  transform-box: view-box;
  transform-origin: 160px 160px;
  will-change: transform, opacity;
}

.open-portal__ring {
  transform: scale(var(--ring-scale, 1));
  opacity: var(--ring-opacity, 0.48);
}

.open-portal__ring[data-ring="1"] { --ring-scale: 0.72; }
.open-portal__ring[data-ring="2"] { --ring-scale: 0.69; }
.open-portal__ring[data-ring="3"] { --ring-scale: 0.66; }
.open-portal__ring[data-ring="4"] { --ring-scale: 0.63; }
.open-portal__ring[data-ring="5"] { --ring-scale: 0.6; }

.open-portal__haze {
  transform: scale(var(--haze-scale, 0.58));
  opacity: var(--haze-opacity, 0.1);
}

.open-portal__core {
  transform: scale(var(--core-scale, 0.94));
}

/* Reduced motion is handled where the motion is: bruma-portal.js parks the
   expansion half-open, so there is nothing here to switch off. */
@media (prefers-reduced-motion: reduce) {
  .open-portal__ring,
  .open-portal__haze,
  .open-portal__core {
    will-change: auto;
  }
}

.breath-guide__labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  pointer-events: none;
  min-height: 3.5rem;
}

/* Cream, not Coral: this is now a spoken instruction, not a one-word phase
   name, and the cue video can put bright foam under it. Coral stays on the
   portal core. The halo is the same treatment as .btn--begin, so the line
   still reads when a wave breaks behind it. */
.breath-guide__phase {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--player-fg);
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 14px rgba(10, 6, 16, 0.65);
  transition: opacity var(--breath-duration) ease;
}

.breath-guide__countdown {
  font-family: var(--font-sans);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 252, 248, 0.95);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

.practice-screen--rhythmic .breath-guide__countdown { display: none; }

.rhythm-cycle {
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-sm);
  color: var(--player-fg-muted);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
  text-align: center;
}

.practice-active__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
  margin-bottom: var(--space-4);
}

.breath-cue {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--player-fg-muted);
  min-height: 1.4rem;
  transition: opacity var(--t-slow);
  margin-bottom: var(--space-5);
}

.practice-stage-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(237, 233, 225, 0.55);
  letter-spacing: 0.01em;
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-5);
  min-height: 1.2em;
  transition: opacity 0.5s ease;
}

/* ── Paused state ─────────────────────────────────────────────────────────── */

.practice-resume-hint {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-5);
}

.practice-screen--paused .practice-resume-hint,
.practice-screen--sound-blocked .practice-resume-hint {
  opacity: 1;
}

/* The same slot says what the wait is for. Sound loses to a pause: someone who
   paused has already touched the screen, so the tap they are owed is resume. */
.practice-resume-hint__sound {
  display: none;
}

.practice-screen--sound-blocked:not(.practice-screen--paused) .practice-resume-hint__resume {
  display: none;
}

.practice-screen--sound-blocked:not(.practice-screen--paused) .practice-resume-hint__sound {
  display: inline;
}

.practice-screen--paused .breath-guide__stage {
  filter: saturate(0.35) brightness(0.75);
  opacity: 0.65;
}

.practice-timer-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--player-fg-faint);
}

.practice-timer {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--player-fg-muted);
}

.practice-timer__suffix {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(237, 233, 225, 0.32);
}

.practice-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nav__link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

body.sound-dialog-open {
  overflow: hidden;
}

.sound-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.sound-dialog[hidden] {
  display: none !important;
}

.sound-dialog__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(8, 26, 30, 0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.sound-dialog__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 20rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg, 1rem);
  /* --panel-from → --panel-to with a hair of alpha, so the dialog reads as the
     same instrument-panel material floating over the blurred scene. */
  background: linear-gradient(
    165deg,
    rgba(29, 64, 72, 0.98) 0%,
    rgba(18, 43, 49, 0.98) 100%);
  border: 1px solid rgba(183, 201, 193, 0.16);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  color: var(--player-fg, #EDE9E1);
  text-align: left;
}

.sound-dialog__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0 0 var(--space-1);
  color: var(--player-fg, #EDE9E1);
}

.sound-dialog__hint {
  font-size: var(--text-xs);
  color: var(--player-fg-muted, rgba(237, 233, 225, 0.65));
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}

.sound-dialog__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sound-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.sound-dialog__header .sound-dialog__title {
  margin: 0;
}

.sound-dialog__group {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(183, 201, 193, 0.1);
  border-radius: var(--radius-sm, 0.35rem);
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  /* reset any fieldset defaults in case tag is ever changed back */
  appearance: none;
}

.sound-dialog__level {
  margin-top: var(--space-2);
}

.sound-dialog__group[hidden] {
  display: none;
}

.sound-dialog__legend {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--player-fg-muted, rgba(237, 233, 225, 0.75));
  padding: 0 0 var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid rgba(183, 201, 193, 0.08);
}

.sound-dialog__combo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.sound-dialog label.sound-dialog__combo-label {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--player-fg-muted, rgba(237, 233, 225, 0.65));
  white-space: nowrap;
}

.sound-dialog select.sound-dialog__select {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--combo-padding-y) 1.75rem var(--combo-padding-y) 0.65rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(237, 233, 225, 0.95);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(183, 201, 193, 0.2);
  border-radius: var(--radius-sm, 0.35rem);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B7C9C1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  box-shadow: none;
}

.sound-dialog select.sound-dialog__select:focus {
  outline: none;
  border-color: rgba(183, 201, 193, 0.45);
}

.sound-dialog select.sound-dialog__select:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sound-dialog__preview:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sound-dialog__preview {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: var(--player-fg);
}

.sound-dialog__preview svg {
  display: block;
  flex-shrink: 0;
}

.sound-dialog__field {
  margin-bottom: 0;
}

.sound-dialog__field--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0.15rem;
}

.sound-dialog__field--compact .sound-dialog__label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.sound-dialog__field--compact .sound-dialog__value {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.sound-dialog__field--compact .sound-dialog__range {
  grid-column: 1 / -1;
  grid-row: 2;
}

.sound-dialog input.sound-dialog__range {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.sound-dialog__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.sound-dialog__label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--player-fg-muted, rgba(237, 233, 225, 0.7));
}

.sound-dialog__value {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--player-fg, #EDE9E1);
}

.sound-dialog__range {
  --thumb-size: 1.125rem;
  --track-h: 0.35rem;
  --range-pct: 100%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--thumb-size);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sound-dialog__range::-webkit-slider-runnable-track {
  height: var(--track-h);
  margin: 0 calc(var(--thumb-size) / 2);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--cue-accent, rgba(183, 201, 193, 0.75)) 0%,
    var(--cue-accent, rgba(183, 201, 193, 0.75)) var(--range-pct),
    rgba(255, 255, 255, 0.12) var(--range-pct),
    rgba(255, 255, 255, 0.12) 100%
  );
}

.sound-dialog__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-top: calc((var(--track-h) - var(--thumb-size)) / 2);
  border: none;
  border-radius: 50%;
  background: var(--mist-whisper);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

.sound-dialog__range::-moz-range-track {
  height: var(--track-h);
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.sound-dialog__range::-moz-range-progress {
  height: var(--track-h);
  border-radius: 999px 0 0 999px;
  background: var(--cue-accent, rgba(183, 201, 193, 0.75));
}

.sound-dialog__range::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: none;
  border-radius: 50%;
  background: var(--mist-whisper);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

.sound-dialog__range:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sound-dialog__range:disabled::-webkit-slider-thumb,
.sound-dialog__range:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.sound-dialog__value--muted {
  opacity: 0.45;
}

.sound-dialog label.sound-dialog__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--player-fg-muted, rgba(237, 233, 225, 0.8));
  margin: 0;
  cursor: pointer;
}

.sound-dialog__check--compact .sound-dialog__check-input {
  width: auto;
  display: inline-block;
}

.sound-dialog input.sound-dialog__check-input {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  accent-color: rgba(183, 201, 193, 0.95);
  cursor: pointer;
}

.sound-dialog__actions {
  display: flex;
  justify-content: stretch;
  padding-top: var(--space-1);
}

.sound-dialog__done {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: var(--text-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#paced-display[hidden],
.rhythm-display[hidden] {
  display: none !important;
}

.practice-stage-label[hidden] {
  display: none;
}

.practice-screen--rhythmic .practice-stage-label {
  margin-bottom: var(--space-4);
}

.practice-stage-desc {
  font-size: var(--text-sm);
  color: rgba(237, 233, 225, 0.45);
  text-align: center;
  max-width: 28ch;
  margin-inline: auto;
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-5);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.practice-stage-desc[hidden] {
  display: none;
}

.rhythm-display:not([hidden]) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.rhythm-display__rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rhythm-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(183, 201, 193, 0.2);
  width: 200px;
  height: 200px;
  animation: rhythm-ring-spin 12s linear infinite;
}

.rhythm-ring:nth-child(2) {
  width: 228px;
  height: 228px;
  animation-direction: reverse;
  opacity: 0.65;
}

@keyframes rhythm-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rhythm-core {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(253, 250, 244, 0.95) 0%,
    rgba(37, 79, 89, 0.65) 70%,
    rgba(23, 54, 61, 0.4) 100%);
  box-shadow:
    0 0 32px rgba(37, 79, 89, 0.45),
    inset 0 0 24px rgba(255, 255, 255, 0.12);
  transform: scale(0.82);
  will-change: transform;
  cursor: pointer;
}

.rhythm-core--inhale {
  box-shadow:
    0 0 40px rgba(37, 79, 89, 0.55),
    inset 0 0 24px rgba(255, 255, 255, 0.14);
}

.rhythm-core--exhale {
  box-shadow:
    0 0 20px rgba(37, 79, 89, 0.28),
    inset 0 0 20px rgba(255, 255, 255, 0.08);
}

@keyframes rhythm-pulse {
  0%, 100% { transform: scale(0.78); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

.rhythm-cycle {
  position: absolute;
  bottom: -0.25rem;
  font-size: var(--text-sm);
  color: var(--player-fg-muted);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}

/* The player's controls take their tint from the chosen sound via --cue-*
   variables, set per cue next to the --atmo-* palettes. Every use carries the
   pre-theme literal as its fallback, so a cue that defines nothing — the
   meditation packs, deliberately — renders exactly as before. */
.btn--practice {
  background: var(--cue-btn-bg, rgba(8, 26, 30, 0.38));
  color: var(--player-fg);
  border: 1px solid var(--cue-btn-border, rgba(237, 233, 225, 0.26));
  border-radius: var(--radius-full);
  padding: 0.68rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  backdrop-filter: blur(8px);
}

.btn--practice:hover {
  background: var(--cue-btn-bg-hover, rgba(255, 255, 255, 0.1));
  color: var(--player-fg);
  border-color: var(--cue-btn-border-hover, rgba(183, 201, 193, 0.28));
  transform: translateY(-1px);
}

/* The primary keeps the secondary's type and pill metrics — the fill is the
   hierarchy, not a second size. Two pills of different heights and weights
   sitting in one row read as two designs rather than a choice. */
.btn--practice-primary {
  /* The cue tint alone lands within a shade of the video it sits on — every
     hero is a deep-toned scene, and the accent gradients are drawn from it.
     A white sheen over the top half gives the fill a value of its own. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 78%),
    var(--cue-btn-accent, var(--gradient-btn-accent));
  color: #FFFDF9;
  /* A lit top edge and a shaded bottom one keep the fill from reading as a
     flat slab of colour against the video. One highlight, carried by the
     inset — doubling it with a bright border-top reads as a seam. */
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0.82rem 1.9rem;
  box-shadow:
    /* A coloured glow can't separate the pill from a scene of its own hue —
       it reads as more of the same light. The neutral occlusion shadow does
       the lifting; the cue glows stay on as the halo around it. */
    0 2px 6px rgba(8, 12, 20, 0.32),
    0 12px 32px rgba(8, 12, 20, 0.28),
    0 6px 22px var(--cue-btn-glow, rgba(23, 54, 61, 0.32)),
    0 0 36px var(--cue-btn-glow-soft, rgba(37, 79, 89, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.btn--practice-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(8, 12, 20, 0.34),
    0 18px 44px rgba(8, 12, 20, 0.30),
    0 10px 30px var(--cue-btn-glow, rgba(23, 54, 61, 0.38)),
    0 0 44px var(--cue-btn-glow-soft, rgba(37, 79, 89, 0.25)),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

/* The player is a phone surface first, where there is no hover to answer the
   tap — the press has to be the feedback. */
.btn--practice-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    0 1px 3px rgba(8, 12, 20, 0.34),
    0 0 24px var(--cue-btn-glow-soft, rgba(37, 79, 89, 0.18)),
    inset 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* The invitation to begin is the breath sphere before it exists: concentric
   rings on a cue-tinted disc, drifting at rest. Tapping the circle is what
   turns it into the guide, so the two share a shape rather than sitting a
   solid marketing pill in front of a screen asking you to settle. It borrows
   the sphere's --cue-*-rgb triplets for exactly that reason. */
.btn--begin {
  /* The floor is set by the longest label, not by taste: "Comenzar" has to
     clear the inner ring on the narrowest phone. */
  --begin-size: clamp(8rem, 24vw, 9.25rem);
  position: relative;
  width: var(--begin-size);
  height: var(--begin-size);
  padding: 0;
  /* Tracking trails the last letter; the nudge puts the word back on centre. */
  padding-left: 0.2em;
  border-radius: 50%;
  border: 1px solid rgba(var(--cue-aura-rgb, 183, 201, 193), 0.32);
  /* The tint sits on a scrim because the disc can land anywhere over a hero
     video — over flames the word has to stay readable. */
  background:
    radial-gradient(circle at 50% 36%,
      rgba(var(--cue-sphere-rgb, 244, 237, 223), 0.22) 0%,
      rgba(var(--cue-glow-rgb, 115, 154, 150), 0.13) 58%,
      rgba(var(--cue-glow-rgb, 37, 79, 89), 0.04) 100%),
    radial-gradient(circle at 50% 50%,
      rgba(8, 26, 30, 0.46) 0%,
      rgba(8, 26, 30, 0.34) 68%,
      rgba(8, 26, 30, 0.16) 100%);
  backdrop-filter: blur(6px);
  color: var(--player-fg);
  /* Same metrics as the .practice-idle__label above it. */
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(10, 6, 16, 0.55);
  box-shadow:
    0 0 34px rgba(var(--cue-glow-rgb, 115, 154, 150), 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
  /* The fade-up entrance owns `transform` (it fills both ways), so the press
     and hover states move through `scale` instead. */
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    color var(--t) var(--ease),
    scale var(--t) var(--ease);
}

.btn--begin::before,
.btn--begin::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--cue-aura-rgb, 183, 201, 193), 0.18);
  pointer-events: none;
  /* drop-shadow follows the stroke rather than the disc, which is what keeps
     a hairline ring visible over a bright frame of the video. */
  filter: drop-shadow(0 0 5px rgba(10, 6, 16, 0.5));
  transition: border-color var(--t) var(--ease);
}

/* The outer ring carries the resting breath. Keeping it on a pseudo-element
   leaves the button's own transform to the entrance animation. */
.btn--begin::before {
  inset: calc(var(--begin-size) / -11);
  animation: begin-breathe 7s ease-in-out infinite;
}

.btn--begin::after {
  inset: calc(var(--begin-size) / 11);
  border-color: rgba(var(--cue-aura-rgb, 183, 201, 193), 0.10);
}

@keyframes begin-breathe {
  0%, 100% { transform: scale(0.97); opacity: 0.45; }
  50%      { transform: scale(1.04); opacity: 0.95; }
}

.btn--begin:hover {
  color: #FFFDF9;
  border-color: rgba(var(--cue-aura-rgb, 183, 201, 193), 0.52);
  background:
    radial-gradient(circle at 50% 36%,
      rgba(var(--cue-sphere-rgb, 244, 237, 223), 0.30) 0%,
      rgba(var(--cue-glow-rgb, 115, 154, 150), 0.17) 58%,
      rgba(var(--cue-glow-rgb, 37, 79, 89), 0.05) 100%),
    radial-gradient(circle at 50% 50%,
      rgba(8, 26, 30, 0.42) 0%,
      rgba(8, 26, 30, 0.30) 68%,
      rgba(8, 26, 30, 0.14) 100%);
  box-shadow:
    0 0 52px rgba(var(--cue-glow-rgb, 115, 154, 150), 0.34),
    inset 0 1px 1px rgba(255, 255, 255, 0.16);
  scale: 1.02;
}

.btn--begin:hover::before,
.btn--begin:hover::after {
  border-color: rgba(var(--cue-aura-rgb, 183, 201, 193), 0.30);
}

.btn--begin:active { scale: 0.98; }

.btn--begin:focus-visible {
  outline-color: var(--cue-accent-strong, var(--mist));
  outline-offset: 6px;
}

.practice-done__glyph {
  font-size: 2.25rem;
  margin-bottom: var(--space-4);
  color: var(--cue-accent-strong, var(--mist));
  opacity: 0.9;
}

.practice-done__title {
  font-family: var(--font-serif);
  color: var(--player-fg);
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
}

/* The done screen's one line: set in the cue's accent and a step up from
   body copy so it lands as the moment, not a caption under the title. */
.practice-done__phrase {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--cue-accent-strong, var(--mist));
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-snug);
}

/* Sized as one unit so the primary can never come out the smaller pill:
   "Practice again" is the longer label in both catalogs, and left to their
   own content widths the secondary wins the row. */
.practice-done__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  width: min(23rem, 100%);
  margin-inline: auto;
}

.practice-done__actions .btn {
  flex: 1 1 9rem;
  padding: 0.82rem 1.2rem;
}

.practice-progress-zone::before {
  content: "";
  position: absolute;
  inset: -120% -50vw -200% -50vw;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(8, 26, 30, 0.55) 0%,
    rgba(8, 26, 30, 0.26) 55%,
    transparent 100%);
}

.practice-progress-zone {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: min(280px, 74vw);
}

.practice-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.practice-progress__seg {
  flex-basis: 0;
  height: 3px;
  background: rgba(183, 201, 193, 0.12);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.practice-progress__fill {
  width: 0;
  min-width: 3px;
  height: 100%;
  background: var(--cue-accent-gradient, linear-gradient(90deg, var(--petrol), var(--mist)));
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px var(--cue-btn-glow-soft, rgba(37, 79, 89, 0.5));
  transition: width 1s linear;
  position: relative;
}

/* Coral marks where the practice is *now*; the trail behind it keeps the sound
   pack's own colour, so scene identity survives. Recolouring the whole fill
   would have erased it. */
.practice-progress__fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--coral);
  box-shadow: 0 0 6px rgba(var(--coral-rgb), 0.9);
}

/* A finished stage has no "now" in it. */
.practice-progress__seg--done .practice-progress__fill::after { display: none; }

/* ── Completion screen ───────────────────────────────────────────────────── */
.completion-screen {
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
}

.completion-glyph {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    var(--accent-whisper),
    rgba(37, 79, 89, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-glow);
  color: var(--accent-deep);
}

/* display:flex above would beat the hidden attribute when the ambiente
   drawing takes the glyph's place. */
.completion-glyph[hidden] { display: none; }

.completion-reflection {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--fg-soft);
  max-width: var(--measure-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.completion-prompts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.completion-prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--fg-muted);
  text-align: left;
  box-shadow: var(--shadow-card);
}

.completion-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-4);
}

.completion-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.completion-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-1);
}

.completion-next__reason {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: var(--measure-narrow);
}

.completion-share-status {
  width: 100%;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.error-state {
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  gap: var(--space-4);
}

.error-illustration {
  width: min(480px, 90vw);
  height: auto;
  display: block;
  margin-bottom: var(--space-2);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
/* Dashed like the drawings' breath paths — the artwork's line language
   carried into the page furniture. */
.divider {
  border: none;
  border-top: 1px dashed rgba(23, 54, 61, 0.18);
  margin-block: var(--space-6);
}

.divider--wide {
  max-width: var(--max-w-wide);
  margin-inline: auto;
}

/* ── Feature grid ────────────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.feature-item {
  padding: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.feature-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.feature-item__icon {
  margin-bottom: 0;
}

.feature-item__title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.35rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.feature-item__desc {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.features-intro {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--fg-soft);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.landing-close {
  position: relative;
  overflow: hidden;
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(234, 240, 236, 0.55), transparent 68%),
    var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.section--landing-close {
  position: relative;
}

.landing-close__copy {
  position: relative;
  margin-bottom: var(--space-4);
}

.landing-close__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--fg);
  line-height: var(--leading-snug);
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-2);
  max-width: 24ch;
}

.landing-close__sub {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  margin: 0 auto;
  max-width: 32ch;
}

.landing-close__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.landing-close .btn--accent {
  width: 100%;
  white-space: normal;
}

/* ── Eyebrow / label ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  line-height: 1.333;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep);
}

.eyebrow--center { text-align: center; margin-bottom: 0.5rem; }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 0.65s var(--ease-out) both;
}

.animate-fade-up--delay-1 { animation-delay: 0.1s; }
.animate-fade-up--delay-2 { animation-delay: 0.2s; }
.animate-fade-up--delay-3 { animation-delay: 0.3s; }
.animate-fade-up--delay-4 { animation-delay: 0.4s; }

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

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-grid--2col { grid-template-columns: repeat(2, 1fr); }
  .meta-row { gap: var(--space-2); }
  .breath-segments {
    gap: var(--space-3);
    justify-content: center;
  }
  .state-shift {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }
  .breath-pattern-card {
    padding: var(--space-4) var(--space-4);
  }
  .hero__headline { font-size: clamp(2rem, 7vw, 2.75rem); }
  .breath-guide__stage { width: 11rem; height: 11rem; }
}

/* ── Choose-path screen ──────────────────────────────────────────────────── */
.path-screen {
  padding-block: var(--space-4);
  min-height: calc(100dvh - 8rem);
  display: flex;
  align-items: center;
}

.path-screen .container--narrow {
  width: 100%;
}

.path-screen__head {
  text-align: center;
  margin-bottom: var(--space-4);
}

.path-screen__title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.2vw + 0.85rem, 2rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: var(--space-2) 0 0;
}

.path-screen__sub {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: var(--measure-narrow);
  margin-inline: auto;
}

.path-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 40rem;
  margin-inline: auto;
}

.path-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.path-card:hover {
  border-color: var(--border-accent);
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
}

.path-card__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-sm);
}

.path-card__icon .ui-icon__svg,
.path-card__icon .ui-icon__fa {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1rem;
}

.path-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.path-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg);
  line-height: var(--leading-snug);
}

.path-card__desc {
  font-size: var(--text-xs);
  color: var(--fg-soft);
  line-height: 1.45;
}

.path-card__cta {
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--accent-deep);
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.path-card:hover .path-card__cta {
  opacity: 1;
  transform: translateX(2px);
}

@media (min-width: 48rem) {
  .path-screen {
    padding-block: var(--space-5);
  }

  .path-choices {
    max-width: 44rem;
    gap: var(--space-3);
  }

  .path-card {
    padding: var(--space-3) var(--space-5);
  }
}

/* ── Practice library ────────────────────────────────────────────────────── */
.library {
  padding-block: clamp(var(--space-6), 7vh, var(--space-8));
}

/* One rail down the page: the head, the controls and the shelf all start at
   the same left edge. A centred masthead over a left-aligned grid reads as a
   mistake rather than a choice. */
.library__head {
  text-align: left;
  margin-bottom: var(--space-3);
}

.library__title {
  font-family: var(--font-serif);
  /* The library is a place to scan, not a landing: the intro gives up about
     a fifth of its height so more of the shelf is visible on a laptop. */
  font-size: clamp(1.75rem, 2.6vw + 0.95rem, 2.4rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: var(--space-2) 0 var(--space-3);
}

.library__sub {
  font-size: var(--text-base);
  color: var(--fg-soft);
  line-height: 1.65;
  max-width: var(--measure-narrow);
}

/* The shelf sets the width of the page it is on, so the toolbar and the
   browse context simply fill it: the controls run edge to edge with the two
   covers under them rather than stopping short of the right-hand one. */
.library-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  width: 100%;
  /* The shelf runs to three tiles on a wide screen and the controls do not
     grow with it: a category dropdown a thousand pixels long is a shape
     nothing else on the site has. It keeps the rail's left edge and stops. */
  max-width: 47rem;
}

.library-context {
  margin: 0 0 var(--space-5);
  text-align: left;
}

.library-context__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 0.35rem;
  line-height: var(--leading-snug);
}

.library-context__desc {
  font-size: var(--text-sm);
  color: var(--fg-faint);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  max-width: var(--measure-narrow);
}

.library-context__level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

/* Same control language as the landing's element names: a name, a thin
   terracotta underline when it is the one in force. */
.library-level__link {
  padding: 0.6rem 0.15rem;
  min-height: 44px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-faint);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.library-level__link:hover {
  color: var(--fg);
}

.library-level__link.is-active {
  color: var(--terracotta-text);
  border-bottom-color: var(--terracotta);
}

.library-level__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

.library-level__sep {
  font-size: 0.75rem;
  color: var(--border-soft);
  user-select: none;
  pointer-events: none;
}

.library-slider {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.library-slider__option {
  padding: 0.55rem 0.9rem;
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-sm) - 3px);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-soft);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.library-slider__option:hover { color: var(--accent-deep); }

.library-slider__option.is-active {
  background: var(--bg-elevated);
  color: var(--accent-deep);
  box-shadow: var(--shadow-xs);
}

.library-toolbar__select {
  flex: 1;
  min-width: 0;
  appearance: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-deep);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  padding: var(--combo-padding-y) 2rem var(--combo-padding-y) 0.9rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236E6389' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  transition: border-color var(--t-fast) var(--ease);
}

.library-toolbar__select:focus {
  outline: none;
  border-color: var(--accent);
}

.library-empty {
  text-align: center;
  margin: var(--space-5) 0;
}

.library-empty__img {
  width: min(480px, 90%);
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .library-slider {
    width: 100%;
    justify-content: center;
  }
}

.library-group {
  margin-bottom: var(--space-5);
}

/* ── Practice tiles ───────────────────────────────────────────────────────
   The library is an index, not a gallery. Covers gave every practice the
   same portrait field and let the painting do the talking, which reads well
   at two-up and badly as a way to find something: the eye has to cross a
   picture to reach the name. So the row leads with the words — title, what
   the practice promises, then how hard, how long and where it comes from —
   and the watercolour comes along at thumbnail size as the mark that
   identifies the line. The detail screen is still where a painting is hung
   at any size. */
.practice-grid {
  display: grid;
  /* Two up is the default measure; the shelf widens at 1180px and takes a
     third column with it. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (min-width: 1180px) {
  .practice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A phone gets a list, not a grid of one: no surface, no corners, just rows
   under one another with a hairline between them. */
@media (max-width: 699px) {
  .practice-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* The tile is a band, not a jacket: art on the left at a fixed square, the
   type filling the rest, the arrow holding a column of its own. Its height is
   what the square and the padding come to, so a row of them lands around
   2.3:1 — flatter than the 1.6–1.8 a mock of one tile suggests, because the
   square has a floor and the text column has to clear roughly 160px before a
   title stops breaking mid-phrase. Between a tidier proportion and titles
   that read, the titles win: this is an index.
   The mark is sized off the viewport rather than pinned, so the type keeps a
   workable column at 700px — the width where two tiles first have to share
   a row — without the square shrinking to an icon on a wide screen. */
.practice-tile {
  --tile-art: clamp(80px, 9vw, 96px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

@media (min-width: 1180px) {
  /* Three across is the narrowest a tile ever gets, so the mark gives the
     type back a few pixels rather than crowding it. */
  .practice-tile { --tile-art: 88px; }
}

.practice-tile[hidden],
.practice-tile.is-filtered-out,
.library-group[hidden],
.library-group.is-filtered-out,
.library__view[hidden],
.library__view.is-filtered-out,
.library-empty[hidden],
.library-empty.is-filtered-out {
  display: none !important;
}

/* Nothing lifts, scales or casts. The whole response is the ink and the
   hairline coming forward by one step, and the arrow arriving. */
.practice-tile:hover,
.practice-tile:focus-visible {
  border-color: var(--border);
  color: var(--accent-deep);
}

.practice-tile:hover .practice-tile__arrow,
.practice-tile:focus-visible .practice-tile__arrow {
  opacity: 1;
}

.practice-tile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* The masters are transparent, so the cream the tile is printed on is the
   painting's own negative space; `contain` keeps whatever margin the artist
   left around the mark. The hairline is there to seat the square, not to
   make a card inside a card — anything heavier and the row reads as two. */
.practice-tile__frame {
  flex: none;
  width: var(--tile-art);
  height: var(--tile-art);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
}

.practice-tile__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.practice-tile__body { min-width: 0; }

/* Both lines are capped at two: the tiles in a row share a height, and a
   title that runs on would set that height for every practice beside it. */
.practice-tile__title,
.practice-tile__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.practice-tile__title {
  font-family: var(--font-serif);
  /* A cover could carry 20px because it had the whole card to set it in;
     three tiles to a row cannot, and a title broken after every third word
     stops being scannable. What makes this read as the heading is the italic
     under it and the metadata under that, not its size. */
  font-size: var(--text-base);
  font-weight: 500;
  color: inherit;
  line-height: var(--leading-snug);
  margin: 0;
}

.practice-tile__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.5;
  margin: 0.2rem 0 0;
}

/* Everything a choice is made on, in one line, and it stays one line: the
   tiles in a row share a height, and metadata that wraps in one of them sets
   that height for all of them. Difficulty and duration lead, so the lineage
   is the only part the ellipsis can ever reach. */
.practice-tile__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-faint);
  line-height: 1.5;
  margin: var(--space-2) 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The lineage is the third fact, and it only earns its place where the whole
   line fits: two tiles to a row halve the line, and on a phone the thumbnail
   has already taken a third of it. Either way the group heading above the
   shelf has just said which effect or tradition you are standing in, so the
   line drops to the two facts a choice actually turns on rather than ending
   on a clipped word. The list carries all three from the width where it can. */
@media (min-width: 700px), (max-width: 559px) {
  .practice-tile__lineage { display: none; }
}

/* The level is the one thing on a tile that can stop somebody, so an
   advanced practice says so in the warm ink the difficulty chip uses. */
.practice-tile__level--advanced { color: #6b4f62; }

.practice-tile__sep { padding: 0 0.15rem; opacity: 0.6; }

.practice-tile__advanced-note {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--fg-faint);
  line-height: 1.45;
  margin: 0.25rem 0 0;
}

/* The column is held whether or not the arrow is showing, so nothing moves
   under the pointer when it arrives. */
.practice-tile__arrow {
  width: 0.85em;
  font-size: var(--text-sm);
  line-height: 1;
  text-align: right;
  color: var(--fg-faint);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .practice-tile,
  .practice-tile__arrow { transition: none; }
}

@media (max-width: 699px) {
  .practice-tile {
    --tile-art: 84px;

    border: none;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background-color: transparent;
    padding: var(--space-3) 0;
  }

  .practice-tile__title { font-size: var(--text-lg); }

  /* A row is the full width of the page here, so the focus ring belongs
     just inside it rather than out in the margin. */
  .practice-tile:focus-visible { outline-offset: -2px; }

  /* Nothing to reveal on a touch screen, and the row needs the column. */
  .practice-tile__arrow { display: none; }
}

.library__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ── Difficulty level chips & advanced notice ────────────────────────────── */
.difficulty-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  color: var(--fg-soft);
}

.difficulty-chip--beginner {
  border-color: rgba(110, 99, 137, 0.18);
  color: var(--fg-soft);
}

.difficulty-chip--intermediate {
  border-color: rgba(31, 68, 77, 0.28);
  background: rgba(31, 68, 77, 0.08);
  color: var(--accent-deep);
}

.difficulty-chip--advanced {
  border-color: rgba(156, 108, 124, 0.32);
  background: linear-gradient(
    135deg,
    rgba(156, 108, 124, 0.1) 0%,
    rgba(31, 68, 77, 0.12) 100%
  );
  color: #6b4f62;
}

.advanced-notice {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(31, 68, 77, 0.22);
  background: linear-gradient(
    180deg,
    rgba(31, 68, 77, 0.06) 0%,
    rgba(31, 68, 77, 0.03) 100%
  );
}

.advanced-notice--player {
  max-width: 36ch;
  margin-inline: auto;
  text-align: center;
}

.advanced-notice__text {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.65;
  margin: 0;
}

.advanced-notice__sub {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--fg-faint);
  line-height: 1.55;
  margin: 0.65rem 0 0;
}

/* ── Breathwork Basics page ─────────────────────────────────────────────── */
.basics-page #what-is,
.basics-page #phases,
.basics-page #tips,
.basics-page #safety,
.basics-page #glossary {
  scroll-margin-top: 5rem;
}

.basics-hero {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
  overflow: hidden;
}

.basics-hero .container--narrow {
  position: relative;
}

.basics-hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 6vw, 3rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: var(--space-2) 0 var(--space-3);
}

.basics-hero__sub {
  font-size: var(--text-base);
  color: var(--fg-soft);
  max-width: 36ch;
  margin: 0 auto var(--space-5);
  line-height: var(--leading-relaxed);
}

.basics-toc-wrap {
  margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.basics-toc-wrap::-webkit-scrollbar {
  display: none;
}

.basics-toc {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-2);
  width: max-content;
  min-width: 100%;
  padding-bottom: 0.15rem;
}

.basics-toc__link {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  background: rgba(255, 252, 248, 0.75);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.basics-toc__link:hover {
  color: var(--accent-deep);
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}

.basics-prose-card {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-4);
  background: rgba(255, 252, 248, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.basics-prose-card p {
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.legal-page .legal-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 52rem;
  margin: 0 auto;
}

.legal-page .basics-prose-card {
  max-width: none;
  margin: 0;
}

.legal-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.5vw + 1rem, 1.55rem);
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.legal-page .basics-prose-card p + p,
.legal-page .basics-prose-card p + ul,
.legal-page .basics-prose-card ul + p {
  margin-top: var(--space-3);
}

.legal-page .basics-list {
  margin: 0;
}

.basics-phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.basics-phase {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.basics-phase__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.basics-phase .ui-icon--feature {
  flex-shrink: 0;
  margin: 0;
}

.basics-phase__title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}

.basics-phase__desc {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.basics-safety-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 52rem;
  margin: 0 auto;
}

.basics-card {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}

.basics-card--calm {
  background: linear-gradient(180deg, rgba(217, 228, 211, 0.25) 0%, rgba(255, 252, 248, 0.6) 100%);
  border-color: rgba(168, 184, 158, 0.3);
}

.basics-card--caution {
  background: linear-gradient(180deg, rgba(183, 201, 193, 0.2) 0%, rgba(255, 252, 248, 0.6) 100%);
  border-color: rgba(31, 68, 77, 0.22);
}

.basics-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--space-3);
}

.basics-card__text {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.basics-card__sub {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--fg-faint);
  line-height: 1.55;
  margin: var(--space-3) 0 0;
}

.basics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.basics-list li {
  padding-left: 1.4em;
  position: relative;
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.basics-list li::before {
  content: "·";
  position: absolute;
  left: 0.25em;
  color: var(--sage);
  font-weight: 600;
}

.basics-glossary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 52rem;
  margin: 0 auto;
}

.basics-glossary__entry {
  padding: var(--space-4);
  background: rgba(255, 252, 248, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.basics-glossary__term {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--fg);
  margin-bottom: 0.4rem;
}

.basics-glossary__def {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.basics-cta__secondary {
  margin: 0;
}

@media (max-width: 640px) {
  .hero__cta-row .btn {
    width: 100%;
    white-space: normal;
  }

  /* Phone heroes are budgeted against the fold: the beginner link, "Begin
     your practice" and "Just breathe" all have to land inside the first
     screen, so the mark, the sub and every gap above them are tightened. */
  .hero {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .hero__brand {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .hero__headline {
    margin-bottom: var(--space-4);
  }

  .hero__sub {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-4);
  }

  .hero__cta-row {
    gap: var(--space-2);
  }

  .hero__beginner-link {
    margin-bottom: 0;
  }

  .basics-page .section--sm {
    padding-block: var(--space-5);
  }

  .basics-page .features-intro {
    font-size: var(--text-md);
    margin-bottom: var(--space-5);
  }

  .basics-page .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
}

/* Squat phone viewports — an SE-class screen with the browser chrome showing
   leaves under 500px below the nav. The mark and the remaining gaps give up
   the last pixels rather than pushing "Just breathe" past the fold. */
@media (max-width: 640px) and (max-height: 620px) {
  .hero {
    padding-top: var(--space-4);
  }

  .hero__brand {
    margin-bottom: var(--space-3);
  }

  .hero__headline {
    margin-bottom: var(--space-3);
  }

  .hero__sub {
    margin-bottom: var(--space-3);
  }

  .hero__cta-row {
    gap: var(--space-1);
  }
}

@media (min-width: 641px) {
  .landing-close {
    padding: var(--space-7) var(--space-6) var(--space-6);
  }

  .landing-close__copy {
    margin-bottom: var(--space-5);
  }

  .landing-close__title {
    font-size: var(--text-2xl);
    max-width: 20ch;
    margin-bottom: var(--space-3);
  }

  .landing-close__sub {
    font-size: var(--text-base);
    max-width: 34ch;
  }

  .landing-close .btn--accent {
    width: auto;
    white-space: nowrap;
  }

  .basics-hero {
    padding-block: var(--space-8) var(--space-6);
  }

  .basics-hero__headline {
    margin-bottom: var(--space-4);
  }

  .basics-hero__sub {
    font-size: var(--text-md);
    max-width: 45ch;
    margin-bottom: var(--space-6);
  }

  .basics-toc {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    min-width: 0;
  }

  .basics-prose-card {
    padding: var(--space-5) var(--space-6);
  }

  .hero__cta-row .btn {
    width: auto;
  }
}

@media (min-width: 769px) {
  /* Two across, not four: the phases sit in a 680px container, so four
     columns left the descriptions breaking a word or two per line. */
  .basics-phases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .basics-phase {
    padding: var(--space-5);
  }

  .basics-phase:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .basics-phase__title {
    font-size: var(--text-base);
  }

  .basics-safety-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .basics-card {
    padding: var(--space-5);
  }

  .basics-glossary {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .basics-glossary__entry {
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--t) var(--ease);
  }

  .basics-glossary__entry:hover {
    border-color: var(--border-accent);
  }
}

/* ── Intake depth + style preference sections ────────────────────────────── */
.intake-preference-section {
  margin-bottom: var(--space-6);
}

.intake-preference-section--primary {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-soft);
}

.intake-step__question--secondary {
  font-size: clamp(1.35rem, 2vw + 0.9rem, 1.75rem);
}

.choice-card--difficulty {
  min-height: 9.5rem;
  text-align: center;
  align-items: center;
}

.choice-card--difficulty .choice-card__desc {
  max-width: 22ch;
  margin-inline: auto;
}

.choice-card__note {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--fg-faint);
  line-height: 1.4;
}

/* ── Rhythm steppers (design page + practice detail) ───────────────────── */
.rhythm-steppers {
  display: grid;
  gap: var(--space-3);
}

.rhythm-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rhythm-stepper__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  min-width: 4.5rem;
}

.rhythm-stepper__controls {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.design-rhythm {
  padding: var(--space-8) 0 var(--space-10);
}

.design-rhythm__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.design-rhythm__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  margin: var(--space-3) 0;
}

.design-rhythm__hint {
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: 1.65;
  max-width: 36ch;
  margin: 0 auto;
}

.design-rhythm__card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 0.35rem 1rem 1.1rem;
}

.design-rhythm__card .rhythm-steppers {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.design-rhythm__card .rhythm-stepper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.design-rhythm__card .rhythm-stepper:last-child {
  border-bottom: none;
}

.design-rhythm__card .rhythm-stepper__label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-soft);
  min-width: 4.5rem;
  text-align: left;
  flex-shrink: 0;
}

.design-rhythm__card .rhythm-stepper__controls {
  padding: 0.2rem 0.35rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
}

.design-rhythm__card .rhythm-stepper__count {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--fg);
}

.design-rhythm__card .duration-stepper__unit {
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
  color: var(--fg-faint);
}

.design-rhythm__duration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.8rem 0 0.2rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--border-soft);
}

.design-rhythm__duration-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  flex-shrink: 0;
}

.design-rhythm__duration .duration-stepper {
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.design-rhythm__submit {
  width: 100%;
  margin-top: var(--space-5);
}

/* Personal / editable rhythm layout */
.recommendation--rhythm .practice-header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.recommendation--rhythm .practice-title {
  margin-bottom: var(--space-2);
}

.recommendation--rhythm .practice-subtitle-row {
  justify-content: center;
}

.recommendation--rhythm .practice-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-soft);
}

.recommendation--rhythm .recommendation__breath-card {
  margin-top: var(--space-1);
}

.recommendation--rhythm .recommendation__instructions-fold {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.recommendation--rhythm .meta-row {
  justify-content: center;
}

/* Personal rhythm: light card matching design page */
.breath-pattern-card--personal {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0.35rem 1rem 0.5rem;
  box-shadow: var(--shadow-card);
}

.breath-pattern-card--personal::before {
  display: none;
}

/* Rhythm editor: vertical list rows */
.breath-rhythm-editor {
  margin-top: 0;
}

.breath-pattern-card .breath-pattern-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.breath-pattern-card .breath-phase__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  align-self: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
}

.breath-pattern-card .breath-rhythm-editor {
  width: min(100%, 18rem);
}

.breath-pattern-card .rhythm-steppers {
  display: grid;
  grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
  grid-template-rows: repeat(2, minmax(8.5rem, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.breath-pattern-card .rhythm-stepper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(183, 201, 193, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
}

.breath-pattern-card--personal .rhythm-stepper {
  border-color: var(--border-soft);
  background: var(--bg-subtle);
}

.breath-pattern-card .breath-phase__duration-stepper {
  flex-shrink: 0;
  justify-content: center;
  width: var(--breath-control-width);
  box-sizing: border-box;
}

.breath-pattern-card .rhythm-stepper__controls {
  align-self: center;
  justify-content: center;
  max-width: 100%;
  width: var(--breath-control-width);
  box-sizing: border-box;
}

.breath-pattern-card .rhythm-stepper__label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: rgba(237, 233, 225, 0.72);
}

.breath-pattern-card--personal .rhythm-stepper__label {
  color: var(--fg-soft);
}

.breath-pattern-card .rhythm-stepper__controls {
  padding: 0.2rem 0.35rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(183, 201, 193, 0.1);
  border-radius: var(--radius-full);
}

.breath-pattern-card--personal .rhythm-stepper__controls {
  background: var(--bg-subtle);
  border-color: var(--border-soft);
}

.breath-pattern-card .rhythm-stepper__controls .duration-stepper__btn {
  width: var(--breath-stepper-btn-size);
  height: var(--breath-stepper-btn-size);
  border-color: rgba(237, 233, 225, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(237, 233, 225, 0.9);
  font-size: 1rem;
}

.breath-pattern-card--personal .rhythm-stepper__controls .duration-stepper__btn {
  border-color: var(--border-soft);
  background: var(--bg-elevated);
  color: var(--fg-soft);
}

.breath-pattern-card .rhythm-stepper__controls .duration-stepper__btn:hover:not(:disabled) {
  border-color: rgba(183, 201, 193, 0.45);
  background: rgba(255, 255, 255, 0.14);
  color: var(--fg-inverse);
}

.breath-pattern-card--personal .rhythm-stepper__controls .duration-stepper__btn:hover:not(:disabled) {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
  color: var(--fg);
}

.breath-pattern-card .rhythm-stepper__controls .duration-stepper__btn:disabled {
  opacity: 0.28;
}

.breath-pattern-card .rhythm-stepper__value,
.breath-pattern-card .breath-phase__duration-stepper .duration-stepper__value {
  min-width: 2.5rem;
  flex: 0 0 auto;
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem;
  white-space: nowrap;
  text-transform: none;
  color: var(--fg-inverse);
}

.breath-pattern-card--personal .rhythm-stepper__value,
.breath-pattern-card--personal .breath-phase__duration-stepper .duration-stepper__value {
  color: var(--fg);
}

.breath-pattern-card .rhythm-stepper__count,
.breath-pattern-card .breath-phase__duration-count {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  color: inherit;
}

.breath-pattern-card .rhythm-stepper__controls .duration-stepper__unit,
.breath-pattern-card .breath-phase__duration-stepper .duration-stepper__unit {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-transform: lowercase;
  color: rgba(237, 233, 225, 0.55);
}

.breath-pattern-card--personal .rhythm-stepper__controls .duration-stepper__unit,
.breath-pattern-card--personal .breath-phase__duration-stepper .duration-stepper__unit {
  color: var(--fg-muted);
}

.breath-pattern-card .rhythm-stepper[data-value="0"] .rhythm-stepper__count {
  color: rgba(237, 233, 225, 0.38);
}

.breath-pattern-card--personal .rhythm-stepper[data-value="0"] .rhythm-stepper__count {
  color: var(--fg-faint);
}

/* Readonly: keep stepper geometry fixed; reveal +/- only while editing */
.breath-pattern-card .rhythm-stepper__controls,
.breath-pattern-card .breath-phase__duration-stepper {
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}

.breath-pattern-card .duration-stepper__btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-fast);
}

.breath-pattern-card:not(.breath-pattern-card--editing) .duration-stepper__btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.breath-pattern-card--editing {
  touch-action: manipulation;
}

.breath-pattern-card:not(.breath-pattern-card--editing) .rhythm-stepper__controls,
.breath-pattern-card:not(.breath-pattern-card--editing) .breath-phase__duration-stepper {
  background: transparent;
  border-color: transparent;
}

@media (pointer: coarse) {
  .breath-pattern-card {
    --breath-control-width: 10.25rem;
    --breath-stepper-btn-size: 2.75rem;
  }

  .breath-pattern-card .rhythm-stepper__controls,
  .breath-pattern-card .breath-phase__duration-stepper {
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
  }

  .breath-pattern-card__edit-toggle {
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Field guide landing ──────────────────────────────────────────────────
   The approved editorial direction: warm ivory paper, deep blue-green ink,
   the ambiente drawing as the emotional center, terracotta only on the
   active element. References live in the bruma-claude-handoff bundle. */
.guide-hero {
  /* The composition used to sit a full section-padding under the nav. Pull
     it up so the two columns start near the header, not after a blank band. */
  padding: clamp(0.85rem, 1.4vw + 0.4rem, 1.15rem) 0 clamp(2rem, 3.5vw, 3.25rem);
}

.guide-hero__inner {
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  grid-template-areas:
    "copy"
    "interaction";
  gap: var(--space-3);
}

.guide-hero__copy { grid-area: copy; }

/* Label, drawing, tabs and the breathe action are one selector: they share
   a single stack so the choice and the way to act on it never separate. */
.guide-hero__interaction {
  grid-area: interaction;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guide-hero__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--space-2);
}

.guide-hero__headline {
  font-family: var(--font-serif);
  /* ~12% off the old scale: the headline was crowding the artwork and, on a
     phone, pushing the action itself below the fold. */
  font-size: clamp(1.85rem, 2.6vw + 1.05rem, 3rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 var(--space-3);
  max-width: 15ch;
  text-wrap: balance;
}

.guide-hero__sub {
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 34ch;
  margin: 0;
}

.guide-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: 0.35rem;
}

/* Sized to its label so a stacked tablet does not stretch a petrol plate
   across the full measure. min-width keeps short names feeling like a button. */
.guide-hero__breathe {
  width: auto;
  max-width: 100%;
  min-width: min(100%, 14rem);
}

/* Quieter than the breath: a link, not a second button competing with it. */
.guide-hero__secondary {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  padding: 0.6rem 0.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--border-accent);
}

.guide-hero__secondary:hover {
  color: var(--accent-deep);
  text-decoration-color: currentColor;
}

/* ── Ambiente carousel ─────────────────────────────────────────────────── */
.ambientes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ambientes__label {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}

.ambientes__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Match the sheet (3:2) so the whole drawing stays in view. A 4:3 window
     plus the per-drawing zoom used to crop the wash and, on some slides,
     the breath-path labels. */
  aspect-ratio: 3 / 2;
  min-height: 200px;
  max-height: none;
}
.ambientes__viewport::-webkit-scrollbar { display: none; }

.ambientes__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* No frame: scripts/prepare_element_art.py bakes each drawing onto the
   page's own paper with feathered edges, so the art is painted on the page
   rather than pinned to it. Narrow layouts zoom just enough to crop that
   wash, so the subject and the painted inhala/exhala labels fill the
   window instead of floating in empty paper. A touch of contrast lifts
   the labels without recasting the watercolor. */
.ambientes__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform:
    translate(var(--art-x, 0), var(--art-y, 0))
    scale(var(--art-scale, 1));
  transform-origin: center;
  filter: contrast(1.08);
}

.ambientes__nav {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ambientes__nav::-webkit-scrollbar { display: none; }

.ambientes__tab {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  padding: 0.45rem 0.15rem;
  min-height: 44px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ambientes__tab:hover { color: var(--fg); }

.ambientes__tab[aria-selected="true"] {
  color: var(--terracotta-text);
  border-bottom-color: var(--terracotta);
}

.ambientes__tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

@media (min-width: 769px) {
  .guide-hero {
    padding-top: 0.35rem;
  }

  .guide-hero__inner {
    grid-template-areas: "copy interaction";
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.5rem, 2.5vw, 2.25rem);
    /* The drawing column runs ~200px taller than the copy. Top-aligning the
       two left that difference as a hole under the sub; centering spends it
       as margin on both sides, so the headline reads against the artwork. */
    align-items: center;
  }

  .ambientes {
    gap: 0.4rem;
  }

  .ambientes__label { text-align: center; }

  .ambientes__viewport {
    aspect-ratio: 3 / 2;
    min-height: 0;
    max-height: none;
  }

  .ambientes__slide img {
    transform: scale(1.12);
  }

  .guide-hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: 0.55rem;
  }

  .guide-hero__breathe { width: auto; min-width: 15rem; }

  .guide-hero__secondary { align-self: auto; }

  .ambientes__nav {
    justify-content: center;
    gap: clamp(1.25rem, 2.5vw, 2.75rem);
    overflow-x: visible;
  }
}

/* The ambiente the practice was breathed with, arriving with you on the
   completion page. The baked feather melts it into the paper. */
.completion-art {
  width: min(30rem, 86vw);
  margin: 0 auto var(--space-2);
}

.completion-art img {
  width: 100%;
  height: auto;
}

/* ── Fundamentals band ─────────────────────────────────────────────────────
   First-time guidance as an editorial band on the page's own grid. Label,
   text and the action sit in one column so they read as a single note, not
   a card with a button stranded on the far edge. */
.fundamentals-band {
  padding-block: var(--space-4);
}

.fundamentals-band__inner {
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.fundamentals-band__copy {
  border-left: 2px solid var(--terracotta);
  padding-left: var(--space-4);
  max-width: 36ch;
}

.fundamentals-band__body {
  min-width: 0;
}

.fundamentals-band__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 0.4rem;
}

.fundamentals-band__title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 0.45rem;
}

.fundamentals-band__text {
  font-size: var(--text-base);
  color: var(--fg-soft);
  margin: 0 0 var(--space-3);
}

.fundamentals-band__cta {
  width: auto;
}

/* Desktop splits the note across the same 5/7 grid as the hero above it, so
   the band spans the page's measure instead of hanging in its left third.
   The action still sits under the paragraph it belongs to — the split moves
   the heading aside, it does not strand the button on the far edge. */
@media (min-width: 769px) {
  .fundamentals-band__copy {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.5rem, 2.5vw, 2.25rem);
    align-items: start;
  }

  .fundamentals-band__title {
    margin-bottom: 0;
  }

  .fundamentals-band__text {
    max-width: 46ch;
  }
}

/* ── Practice action group ─────────────────────────────────────────────────
   Session length and Begin are one decision, so they read as one control:
   the stepper sets the number, the button acts on it. The group spans the
   same column as the notes below. The button grows into the leftover space
   so the two stay adjacent, rather than a shrink-wrapped strip floating
   above the cards. Previously the button was pushed to the far edge by
   margin-left:auto, which left the two looking unrelated. */
.practice-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.practice-action .duration-stepper {
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.practice-action__start {
  flex: 1 1 auto;
  min-width: 9rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .practice-action .duration-stepper {
    flex: 1 1 auto;
    justify-content: space-between;
  }
}

/* ── Journeys ──────────────────────────────────────────────────────────────
   Custom meditation and hypnosis: the gate, the builder, and the player.

   Two grounds, deliberately. Everything up to pressing Begin sits on the
   product's warm paper like the rest of the site — it is a form, and a form
   read in the dark is a form nobody fills in carefully. The player alone
   switches to the petrol night the practice player uses, because by then the
   screen has one job and most of it is meant to be listened to with the eyes
   closed. */

/* ── Landing band ───────────────────────────────────────────────────────── */

.journeys-band {
  padding-block: var(--space-8);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-soft);
}

.journeys-band__inner {
  width: min(var(--max-w), calc(100% - 2 * var(--space-5)));
  margin-inline: auto;
  text-align: center;
}

.journeys-band__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: var(--space-2);
}

.journeys-band__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--fg);
  margin-bottom: var(--space-3);
}

.journeys-band__text {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  color: var(--fg-soft);
}

/* ── List ───────────────────────────────────────────────────────────────── */

.journey-home { padding-block: var(--space-7) var(--space-9); }

.journey-home__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.journey-home__headline {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
}

.journey-list { list-style: none; margin: 0; padding: 0; }

.journey-list__item {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.journey-list__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.journey-list__link:hover { background: var(--bg-elevated); }

.journey-list__body { display: flex; flex-direction: column; gap: 0.2rem; }

.journey-list__title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--fg);
}

.journey-list__subtitle { font-size: var(--text-sm); color: var(--fg-soft); }

.journey-list__meta {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  text-transform: lowercase;
}

.journey-list__state {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.journey-list__state--ready { color: var(--accent); }
.journey-list__state--failed { color: var(--coral-text); }

.journey-list__delete { display: flex; }

.journey-list__delete-button {
  border: none;
  background: transparent;
  border-left: 1px solid var(--border-soft);
  padding-inline: var(--space-4);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  cursor: pointer;
}

.journey-list__delete-button:hover { color: var(--coral-text); }

.journey-empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border-accent);
  border-radius: var(--radius-lg);
}

.journey-empty__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.journey-empty__body {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-soft);
}

.journey-empty__note {
  max-width: 44ch;
  margin-inline: auto;
  margin-top: var(--space-4);
  font-size: var(--type-caption);
  line-height: 1.55;
  color: var(--fg-faint);
}

/* ── Builder ────────────────────────────────────────────────────────────────
   The closest thing on the site is the intake: ask the visitor something, give
   them choices. So the headings follow .intake-step__question (serif, weight
   400, tight tracking) and the choice cards follow .path-card (elevated sheet,
   soft border, serif title, sans description).

   The reset below is not optional. Every choice here is a <label>, and the
   site's bare `label` rule makes it 12px, 600 weight, uppercase, letterspaced —
   which cascaded into the card titles and descriptions and made them shout.
   `input` is likewise width:100% with padding and a border, which turned each
   radio into a stretched box. Both are undone at the top of this section rather
   than fought one property at a time further down. */

.journey-build { padding-block: var(--space-7) var(--space-9); }

.journey-build__head { margin-bottom: var(--space-7); }

.journey-build__headline {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.15rem);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-top: var(--space-2);
}

/* Matches .advanced-notice, the site's existing way of saying something
   about the session before it starts. */
.journey-build__notice {
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(31, 68, 77, 0.22);
  background: linear-gradient(
    180deg,
    rgba(31, 68, 77, 0.06) 0%,
    rgba(31, 68, 77, 0.03) 100%
  );
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

/* The broken state, as opposed to the merely-informational one. Coral is the
   brand's attention colour; --coral-text is its readable form. */
.journey-build__notice--warn {
  border-color: rgba(var(--coral-rgb), 0.45);
  background: var(--coral-soft);
  color: var(--coral-text);
}

.journey-field {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

/* A legend cannot be a flex container in every browser, so the number rides
   inside it as an inline run instead. */
.journey-field__legend {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--fg);
  margin-bottom: var(--space-2);
  padding: 0;
}

.journey-field__step {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-deep);
  opacity: 0.55;
  margin-inline-end: var(--space-2);
}

.journey-field__help {
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-soft);
}

.journey-field__help--quiet {
  color: var(--fg-faint);
  font-style: italic;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.journey-options { display: grid; gap: var(--space-3); }
/* Sized so each row fills: three beds abreast and four narrators abreast in
   the 960px column, rather than leaving an orphan on a row of its own. */
.journey-options--two { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.journey-options--three { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.journey-options--four { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }

.journey-option {
  /* Undo the site's bare `label` rule — see the note at the top. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;

  position: relative;
  padding: var(--space-4);
  padding-inline-end: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.journey-option:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm);
}

/* The native control stays in the accessibility tree and under the keyboard —
   a hidden input cannot be tabbed to — but is taken out of the site's input
   sizing, which would otherwise stretch it across the card. */
.journey-option input[type="radio"],
.journey-duration input[type="radio"] {
  appearance: auto;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  accent-color: var(--accent);
}

.journey-option input[type="radio"] {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
}

.journey-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}

.journey-option:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.journey-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.journey-option__name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.journey-option__desc {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--fg-soft);
}

.journey-option__tag {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Auditioning a bed is not choosing it, so the control reads as secondary to
   the card it sits in — a quiet outline, not a second call to action. */
.journey-preview {
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.journey-preview:hover { background: var(--accent-whisper); }

.journey-preview.is-playing {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-inverse);
}

.journey-preview:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* The intake's textarea, which this is the same gesture as. Capped at a
   reading measure rather than the full column: it takes one or two sentences,
   and a 960px-wide box invites neither. */
.journey-textarea {
  width: 100%;
  max-width: var(--measure);
  box-sizing: border-box;
  padding: var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  resize: vertical;
}

.journey-textarea::placeholder { color: var(--fg-faint); }

.journey-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 79, 89, 0.14);
}

.journey-textarea__count {
  max-width: var(--measure);
  margin-top: var(--space-2);
  text-align: end;
  font-size: var(--type-caption);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.journey-durations { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.journey-duration {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  /* Undo the bare `label` rule here too. */
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;

  padding: var(--space-3) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.journey-duration:hover { border-color: var(--border-accent); }

/* The number is the label, so the radio covers the chip rather than sitting
   beside it. */
.journey-duration input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.journey-duration:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}

.journey-duration:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.journey-duration__value {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.journey-duration__unit {
  font-size: var(--type-caption);
  color: var(--fg-faint);
}

.journey-build__submit {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.journey-build__submit-note {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-faint);
}

/* ── Building ───────────────────────────────────────────────────────────────
   A wait screen, shaped like .loading-screen — the site's existing answer to
   the same question. One column, centred, nothing else on the page.

   The mark is centred with flex, not with text-align: .bruma-mark is
   display:block, so a centred text container leaves it against the left edge.
   That is what put it off to one side. */

.journey-building {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
}

.journey-building__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 30rem;
}

.journey-building__mark {
  display: flex;
  justify-content: center;
}

.journey-building__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

/* Reported by the server passage by passage, never paced on a timer — so it
   is allowed to look like it means something. */
.journey-building__track {
  width: min(18rem, 100%);
  height: 2px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}

.journey-building__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
  transition: transform 700ms var(--ease);
}

.journey-building__stage {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.journey-building__note {
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-soft);
}

/* What is being written, kept to one quiet line. It is confirmation, not a
   pull quote — somebody's own unedited sentence set in display italic makes
   them read their typing instead of waiting. */
.journey-building__brief {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 38ch;
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--fg-faint);
}

.journey-building__kind {
  color: var(--fg-soft);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.journey-building__dot { padding-inline: 0.35em; opacity: 0.5; }

.journey-building__intent {
  font-style: italic;
  /* Long enough to recognise, short enough not to become the subject of the
     screen. The full text is on the journey once it exists. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journey-building__panel--error {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--coral-soft);
  color: var(--coral-text);
}

.journey-building__panel--error .journey-building__stage { color: var(--coral-text); }

.journey-building__panel--error[hidden] { display: none; }

.journey-building__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .journey-building__fill { transition: none; }
}

/* ── Player ─────────────────────────────────────────────────────────────── */

.journey-body { background: var(--player-deep); }

.journey-player {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-5) var(--space-6);
  background: radial-gradient(120% 80% at 50% 12%, var(--player-mid), var(--player-deep) 70%);
  color: var(--player-fg);
  text-align: center;
}

.journey-player__stage {
  width: min(42rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* A class setting `display` out-specifies the browser's own [hidden] rule, so
   the running controls and the closing screen were both visible behind the
   Begin screen. Stated per component, the way the rest of the stylesheet does
   it (.intake-form-error, .sound-dialog, .practice-tile …). */
.journey-player__stage[hidden] { display: none; }

/* The session itself: progress at the top, words in the middle, controls at
   the bottom, rather than everything bunched with a gap underneath. */
.journey-player__stage--running {
  justify-content: space-between;
  min-height: min(32rem, 70vh);
}

.journey-script[hidden] { display: none; }

.journey-player__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
}

.journey-player__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--player-fg);
}

.journey-player__subtitle,
.journey-player__setup,
.journey-player__advice {
  max-width: 44ch;
  color: var(--player-fg-muted);
  font-size: var(--text-sm);
}

.journey-player__silent {
  max-width: 44ch;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(237, 233, 225, 0.08);
  color: var(--player-fg-muted);
  font-size: var(--text-xs);
}

.journey-player__begin { margin-top: var(--space-3); }

.journey-player__progress {
  width: min(28rem, 100%);
  height: 2px;
  border-radius: var(--radius-full);
  background: rgba(237, 233, 225, 0.16);
  overflow: hidden;
}

.journey-player__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--player-fg-faint);
  transition: transform 0.6s linear;
}

/* The spoken line. Large, centred, and the only thing with weight on the
   screen — someone with their eyes closed opens them to check where they are,
   not to read a layout. */
.journey-player__line {
  /* Tall enough that a two-line passage and a five-line one do not move the
     controls, short enough not to leave a dead band under a short one. */
  min-height: 4.5em;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw + 0.7rem, 2rem);
  line-height: 1.5;
  color: var(--player-fg);
  max-width: 26ch;
  transition: opacity 0.8s ease;
}

/* During a silence the words recede rather than vanish — an empty screen reads
   as the session having stopped — but they stay readable. At 0.32 the passage
   somebody opened their eyes to re-read was barely there. Nothing new is said:
   an added line would be a second voice in the session. */
.journey-player.is-resting .journey-player__line { opacity: 0.5; }
.journey-player.is-paused .journey-player__line { opacity: 0.32; }

.journey-player__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.journey-player__control {
  padding: 0.6rem 1.6rem;
  border: 1px solid rgba(237, 233, 225, 0.28);
  border-radius: var(--radius-full);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--player-fg);
  cursor: pointer;
}

.journey-player__control:hover { background: rgba(237, 233, 225, 0.1); }
.journey-player__control--quiet { border-color: transparent; color: var(--player-fg-faint); }

/* A <label> wrapping a range input, so the site's bare `label` and `input`
   rules both land here: 600-weight uppercase text, and a range control given a
   border, a background and full width. Undone so it sits beside Pause and End
   as a peer rather than shouting over them. */
.journey-player__volume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-size: var(--type-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--player-fg-faint);
}

.journey-player__volume input[type="range"] {
  appearance: auto;
  width: 7rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  accent-color: var(--sage);
}

.journey-player__done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.journey-script {
  width: min(42rem, 100%);
  margin-top: var(--space-6);
  text-align: start;
  border-top: 1px solid rgba(237, 233, 225, 0.14);
  padding-top: var(--space-4);
}

.journey-script__summary {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--player-fg-faint);
  cursor: pointer;
}

.journey-script__body { margin-top: var(--space-4); }

.journey-script__line {
  color: var(--player-fg-muted);
  margin-bottom: var(--space-2);
  line-height: 1.7;
}

.journey-script__pause {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--player-fg-faint);
}

@media (max-width: 640px) {
  .journey-list__item { flex-direction: column; }

  .journey-list__delete-button {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-soft);
    padding-block: var(--space-3);
  }

  .journey-player__controls { gap: var(--space-3); }
  .journey-player__volume input { width: 5.5rem; }
}

/* A session is meant to be listened to, not watched. With reduced motion the
   progress bar stops animating and the line stops fading — the words simply
   change. */
@media (prefers-reduced-motion: reduce) {
  .journey-player__progress-fill { transition: none; }
  .journey-player__line { transition: none; }
}