/* =============================================================
   Components.
   ─────────────────────────────────────────────────────────────
   Type-role distinction (Conflict 11):
     --font-display (serif) is reserved for HERO H1 (.quiet-headline)
     and SECTION H2 (.section-title) only. Every card title, list
     item, FAQ summary, etc. uses --font-text (sans). The serif tier
     is reserved by intent, not by drift.

   Action tiers (Conflict 12):
     Tier 1: .btn.btn-primary — gradient fill (--gradient-action).
             The single highest-intent action on a section.
     Tier 2: .btn.btn-secondary — outlined.
             Alternative or comparison actions.
     Tier 3: .arrow-link / .quiet-link — text-only actions.
             In-text navigation, soft cross-links, "read more" affordances.
   ============================================================= */

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface-overlay-bg);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: var(--border-hairline);
}

.site-header-inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .site-header-inner { padding: var(--space-3) var(--space-6); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    height: 44px;
    width: auto;
}

.site-nav { display: none; }

@media (min-width: 1024px) {
    .site-nav { display: block; flex: 1; }
    .site-nav ul {
        display: flex;
        justify-content: center;
        gap: var(--space-3);
    }
    .site-nav a {
        font-family: var(--font-ui);
        font-size: 1.0625rem;   /* fixed — nav stays put when the reader enlarges text, so the header can't overflow */
        font-weight: 500;
        color: var(--ink-muted);
        text-decoration: none;
        transition: color var(--transition-fast);
        white-space: nowrap;   /* keep every nav label on a single line — no 1-vs-2-line raggedness */
    }
    .site-nav a:hover,
    .site-nav a:focus-visible {
        color: var(--accent-link);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1-25) var(--space-3);   /* slimmer pill — lower height reads more elegant */
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    border: var(--border-cta);
    cursor: pointer;
    white-space: nowrap;   /* keep multi-word labels on one line — never collapse to a circle */
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.btn-primary {
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    box-shadow: var(--shadow-button-rest);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-primary:focus-visible {
    box-shadow: var(--shadow-button-rest), var(--ring-focus);
}

.btn-large {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
}

.btn-nav { padding-block: var(--space-1-25); flex-shrink: 0; }

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-hairline);
}

.btn-secondary:hover {
    border-color: var(--accent-end);
    color: var(--accent-link);
}

/* Quiet links */
.quiet-link {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: var(--border-hairline);
    padding-bottom: var(--space-0-25);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.quiet-link:hover,
.quiet-link:focus-visible {
    color: var(--accent-link);
    border-bottom-color: var(--accent-link);
}

.arrow-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--accent-link);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.arrow-link:hover,
.arrow-link:focus-visible {
    color: var(--ink);
    transform: translateX(2px);
}

/* =============================================================
   SECTION HEAD — eyebrow → title → optional sub block, with one
   margin-bottom spacing variant per follow-up content kind.
   ─────────────────────────────────────────────────────────────
   Replaces ~30 per-section CSS rules that hand-tuned the same
   pattern. Each variant's margin-bottom is the distance from the
   end of the head to whatever comes next on the page.

   Variants (mutually exclusive; pick by what comes next):
     (default)             section h2 + prose → 32px bottom
     .section-head--hero   page h1 + body prose, larger title → 32px
     .section-head--grid   precedes a content grid → 64px
     .section-head--accordion  precedes a FAQ accordion → 48px
     .section-head--spine  centred CTA section, tight → 24px
     .section-head--row    title left + action link right → 48px

   Modifiers:
     .section-head--centred  text-align: center (combinable)

   Internal spacing:
     eyebrow → title    0 (close pairing by intent)
     title → sub        16px (--space-2) when sub is present
   ============================================================= */

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

.section-head > .eyebrow + .section-title,
.section-head > .eyebrow + .quiet-headline {
    margin-top: var(--space-1);
}

.section-head > .section-title + .section-sub,
.section-head > .quiet-headline + .lede {
    margin-top: var(--space-2);
}

.section-head--hero       { margin-bottom: var(--space-4); }
.section-head--grid       { margin-bottom: var(--space-8); }
.section-head--accordion  { margin-bottom: var(--space-6); }
.section-head--spine      { margin-bottom: var(--space-3); }

.section-head--centred    { text-align: center; }

/* Row variant: title block left, action link right. Used by Library section heads. */
.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.section-head--row .section-head__main > * + * { margin-top: var(--space-1); }

/* When .section-head contains a row of items (eyebrow + title), reset their
   default sibling margins. The component's internal stacking owns spacing. */
.section-head > .section-title,
.section-head > .quiet-headline,
.section-head > .section-sub,
.section-head > .eyebrow {
    margin-block: 0;
}

/* Difference card */
.difference h3 {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.difference p {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin-bottom: var(--space-3);
}

/* =============================================================
   CARD — one primitive, four size variants, two state variants.
   ─────────────────────────────────────────────────────────────
   Variants (mutually exclusive size; one per card):
     .card-featured  32px title (--text-card-featured) — primary offerings
     .card-browse    24px title (--text-card-browse)   — content tiles
     .card-compact   19px title (--text-card-compact)  — dense thumbnails

   States (orthogonal):
     .card-quiet     non-interactive (no hover) — used by testimonials
     .card-linkable  the card itself is an <a> (whole-card click)
     .card-media     first child is a top-edge thumbnail (no padding-top)
     .card-pending   dashed border + reduced opacity (TBC content)

   Sub-elements:
     .card-head   row at the top (eyebrow + badge)
     .card-title  the H-element
     .card-body   the description paragraph
     .card-foot   row at the bottom (price / action)
     .card-price  specialized data point (currency) — program cards only
   ============================================================= */

.card {
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.card:hover {
    border-color: var(--accent-end);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.card-quiet {
    gap: var(--space-3);
}

.card-quiet:hover {
    border-color: var(--ink-hairline);
    transform: none;
    box-shadow: none;
}

.card-linkable {
    text-decoration: none;
    color: inherit;
}

.card-linkable:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--elevation-2), var(--ring-focus);
}

.card-compact {
    text-align: center;
    align-items: center;
    gap: var(--space-1);
}

.card-pending {
    border-style: dashed;
    opacity: 0.85;
}

.card-media {
    padding: 0;
    overflow: hidden;
}

/* Card sub-elements */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.card-title {
    font-family: var(--font-text);
    font-weight: var(--weight-medium);
    color: var(--ink);
    margin: 0;
    line-height: var(--lh-heading);
}

.card-featured .card-title { font-size: var(--text-card-featured); }
.card-browse   .card-title { font-size: var(--text-card-browse); }
.card-compact  .card-title { font-size: var(--text-card-compact); }

.card-body {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    flex: 1;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.card-price {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--ink);
}

/* Card-media: thumb fills the top edge, body content gets padded back in */
.card-media > :not(.library-card-thumb-link):not(.library-card-thumb):not(.card-event-thumb-link) {
    padding-inline: var(--space-4);
}
.card-media > .card-title:first-of-type { padding-top: var(--space-3); }
.card-media > .card-body { padding-bottom: var(--space-4); }

/* =============================================================
   EVENT CARD — image-led variant of .card-media. Used for dated,
   in-person events on /trainings/, /events/, homepage. Photo at top
   with date stamp overlay; eyebrow / title / body / button below.
   ============================================================= */

.card-event-thumb-link {
    display: block;
    text-decoration: none;
    position: relative;
    line-height: 0;
}

.card-event-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--surface-sunken);
}

.card-event-date {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    background: rgba(43, 42, 38, 0.85);
    color: var(--surface-base);
    padding: var(--space-0-75) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: var(--lh-caption);
}

.card-event-thumb-link:hover .card-event-thumb {
    opacity: 0.92;
    transition: opacity var(--transition-fast);
}

/* Foot variant with just a single button (no price counterpart) */
.card-foot--button {
    justify-content: flex-start;
}

/* Badge — small pill, used inside .card-head */
.badge {
    background: var(--gradient-tint);
    color: var(--accent-link);
    border-radius: var(--radius-pill);
    padding: var(--space-0-5) var(--space-1-25);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* Testimonial-specific blockquote / figcaption inside .card.card-quiet */
.card-quiet blockquote {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--text-lg);
    line-height: var(--lh-caption);
    color: var(--ink);
    quotes: "“" "”";
}

.card-quiet blockquote::before { content: open-quote; }
.card-quiet blockquote::after  { content: close-quote; }

.card-quiet figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.placeholder-note {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-style: italic;
}

/* Coach-specific sub-elements (used only on .card.card-compact and .card.card-browse on /coaches/) */
.coach-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.coach-card-rich .coach-avatar { margin: 0 0 var(--space-2); }

.coach-role {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

.coach-card-rich {
    text-align: left;
    align-items: stretch;
}

.coach-location {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-link);
    letter-spacing: 0.02em;
}

.coach-languages {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.coach-focus {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--lh-caption);
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
    flex: 1;
}

.coach-book {
    align-self: flex-start;
    margin-top: auto;
}

/* =============================================================
   COACH PROFILE — used on /coaches/<slug>/ pages.
   Layout: portrait left, identity right; stacks on mobile.
   ============================================================= */

.coach-profile-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .coach-profile-header {
        grid-template-columns: 240px 1fr;
        gap: var(--space-6);
    }
}

.coach-portrait {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--surface-sunken);
}

.coach-portrait--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    letter-spacing: 0.02em;
}

.coach-positioning {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    font-style: italic;
    color: var(--ink);
    margin: var(--space-2) 0 0;
    max-width: 36ch;
}

.coach-meta {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
}

* + .coach-meta { margin-top: var(--space-4); }

.coach-meta-row {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

@media (max-width: 640px) {
    .coach-meta-row {
        grid-template-columns: 1fr;
        gap: var(--space-0-5);
    }
}

.coach-meta dt {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin: 0;
}

.coach-meta dd {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    margin: 0;
}

/* Coach directory filters */
.filter-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-75);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--text-base);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                      linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-6);
}

.filter-select:hover:not(:disabled) { border-color: var(--accent-end); }
.filter-select:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--ring-focus);
}
.filter-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* =============================================================
   FORM — labelled inputs stacked in a calm vertical rhythm.
   Used by /free-intro/, /contact/, and any future lead-capture
   surface. Inputs consume only tokens.
   ============================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

/* Form sitting after preceding content (lede, paragraph, etc.) gets
   the standard vertical breathing room. Mirrors .lede + .open-actions. */
* + .form { margin-top: var(--space-6); }

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-75);
}

.form-label {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink);
    letter-spacing: var(--tracking-meta);
}

.form-input,
.form-textarea,
.form-select {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--ink-muted);
}

.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--accent-end);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--ring-focus);
}

.form-textarea { min-height: 7em; resize: vertical; }

.form-help {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--lh-caption);
}

.form-submit { align-self: flex-start; }

/* Inline form variant — email input + submit button on one row.
   Used by the newsletter signup. */
.form--inline {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.form--inline .form-input {
    flex: 1;
    min-width: 0;
}

.form--inline .form-submit {
    align-self: stretch;
}

/* =============================================================
   TRAINING SUMMARY — the format/length/dates/price/prerequisites
   block on training detail pages. Definition list visually rendered
   as a key-value table.
   ============================================================= */

.training-summary {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
}

* + .training-summary { margin-top: var(--space-4); }

.training-summary-row {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

@media (max-width: 640px) {
    .training-summary-row {
        grid-template-columns: 1fr;
        gap: var(--space-0-5);
    }
}

.training-summary dt {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin: 0;
}

.training-summary dd {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    margin: 0;
}

/* =============================================================
   REFLECTION — used on /library/<slug>/ pages for canonical
   reflection entries that may have any combination of text /
   audio / video formats. Plus the format tags on /library/ cards.
   ============================================================= */

/* Format tags on /library/ reflection-list cards — graphical, with SVG icons */
.reflection-card-formats {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.reflection-format-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-0-5) var(--space-1-25);
    background: var(--surface-sunken);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
}

.reflection-format-tag svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Per-format colour accents on the tags — so Read / Listen / Watch read as distinct things */
.reflection-format-tag--read svg { color: var(--accent-link); }
.reflection-format-tag--listen svg { color: var(--accent-end); }
.reflection-format-tag--watch svg { color: var(--accent-start); }

/* =============================================================
   SITE ANNOUNCEMENT — thin band at the very top of every page,
   above the site header. Single line, calm typography, names the
   next concrete dated opportunity. Updates as events come and go.
   ============================================================= */

.site-announcement {
    background: var(--surface-sunken);
    border-bottom: var(--border-hairline);
    padding: var(--space-1) var(--space-3);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--lh-caption);
}

.site-announcement-prefix {
    color: var(--ink-muted);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    margin-right: var(--space-1);
}

.site-announcement a {
    color: var(--accent-link);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.site-announcement a:hover {
    text-decoration: underline;
}

/* Reflection card thumbnail — typographic treatment when no image is available */
.reflection-card-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    letter-spacing: 0.02em;
    overflow: hidden;
}

.reflection-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reflection page hero — format chip row links to the in-page anchors */
.reflection-formats {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin: var(--space-3) 0;
}

/* Choose-your-format block on the reflection page itself — equally weighted blocks */
.format-choose {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin: var(--space-4) 0;
}

@media (min-width: 768px) {
    .format-choose {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.format-choose-block {
    padding: var(--space-3);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.format-choose-label {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
}

.audio-player-wrap {
    width: 100%;
}

.audio-player-wrap audio {
    width: 100%;
}

.video-embed-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.video-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The text body of a reflection — uses .reading container but tightens line-height for long-form */
.reflection-body p {
    margin-bottom: var(--space-3);
}

/* =============================================================
   PRICING TABLE — used on event pages where pricing is a matrix
   of options × tiers. Real <table> for semantic correctness.
   ============================================================= */

.pricing-table {
    width: 100%;
    margin: var(--space-4) 0;
    border-collapse: collapse;
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: var(--font-text);
    font-size: var(--text-base);
}

.pricing-table-caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}

.pricing-table thead th {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-hairline);
    background: var(--surface-sunken);
}

.pricing-table tbody th {
    font-weight: var(--weight-semibold);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
}

.pricing-table tbody td {
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
}

.pricing-table tbody tr + tr th,
.pricing-table tbody tr + tr td {
    border-top: var(--border-hairline);
}

/* ---------- Library page ---------- */

/* Chip row — anchor links to in-page sections */
.chip-row {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 10px var(--space-3);
    border-radius: var(--radius-pill);
    border: var(--border-hairline);
    background: var(--surface-base);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.chip:hover {
    border-color: var(--accent-end);
    color: var(--accent-link);
}

.chip:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    color: var(--accent-link);
    box-shadow: var(--ring-focus);
}

/* Library-card specialized sub-elements
   (the card itself is just `.card.card-browse`, or `.card.card-browse.card-media` for video) */

.library-card-meta {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.library-card-podcast-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.library-card-badge {
    background: var(--gradient-tint);
    color: var(--accent-link);
    padding: var(--space-0-5) var(--space-1-25);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}

.library-card-thumb-link {
    display: block;
    text-decoration: none;
}

.library-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gradient-action);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.library-card-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(43, 42, 38, 0.18), rgba(43, 42, 38, 0.45));
}

.library-card-thumb-play {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: rgba(250, 246, 238, 0.92);
    color: var(--accent-link);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: var(--space-0-5);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.card-media:hover .library-card-thumb-play {
    transform: scale(1.05);
    background: var(--surface-base);
}

.library-card-thumb-duration {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    background: rgba(43, 42, 38, 0.7);
    color: var(--surface-base);
    padding: var(--space-0-5) var(--space-1-25);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

/* FAQ */
.faq-item {
    border-bottom: var(--border-hairline);
}

.faq-item:first-of-type {
    border-top: var(--border-hairline);
}

.faq-item summary {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink);
    padding: var(--space-3) 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    transition: color var(--transition-fast);
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
    color: var(--accent-link);
    outline: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    margin-bottom: var(--space-0-5);
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
    margin-bottom: -4px;
}

.faq-item p {
    padding: 0 0 var(--space-3);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    font-size: var(--text-base);
    max-width: 60ch;
}

/* Footer */
.footer-col h4 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.footer-col ul { display: grid; gap: var(--space-0-75); }

.footer-col a {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--ink);
}

.footer-tagline {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    line-height: var(--lh-caption);
}

/* ---------- Felt-moment overlay ---------- */
.felt-moment {
    position: fixed;
    inset: 0;
    background: var(--surface-base);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.felt-moment[hidden] { display: none; }

.felt-moment[data-open="true"] {
    opacity: 1;
}

.felt-moment-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    font-size: 24px;
    line-height: 1;
    color: var(--ink-muted);
    background: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.felt-moment-close:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.felt-moment-close:focus-visible {
    outline: none;
    background: var(--surface-sunken);
    color: var(--ink);
    box-shadow: var(--ring-focus);
}

.felt-moment-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.felt-moment-safety {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

.felt-moment-line {
    font-family: var(--font-text);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--ink);
    min-height: 6em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.felt-moment-line[data-visible="true"] {
    opacity: 1;
    transform: none;
}

.felt-moment-line[data-landing="true"] {
    background: var(--gradient-action);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.felt-moment-progress {
    display: flex;
    gap: var(--space-1);
}

.felt-moment-progress span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--ink-hairline);
    transition: background var(--transition-base);
}

.felt-moment-progress span[data-active="true"] {
    background: var(--accent-end);
}

.felt-moment-actions {
    display: flex;
    gap: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .felt-moment-line {
        opacity: 1;
        transform: none;
    }
}

/* Hero with photo */
.hero-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-8);
    }
}

.hero-photo-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--elevation-3);
}

.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================================
   THE WORK — institutional self-portrait elements.
   Used on /method/ (the work's home). These signal institutional
   depth through STRUCTURE — a charted map, dated provenance, a
   named faculty — rather than through colder colour or chrome.
   They stay inside the warm palette and the existing type roles.
   ============================================================= */

/* --- Gated build-block --------------------------------------
   A dashed frame around content that is awaiting an external
   source (Connirae's dates, the EU framing, the faculty roster).
   Same dashed language as .card-pending, scaled to a section
   block. Pair with a .placeholder-note inside that states the gate. */
.gated {
    border: var(--border-hairline);
    border-style: dashed;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--surface-base);
}

/* --- Awareness diagram --------------------------------------
   A small, restrained schematic of the canonical move: the felt
   "I" as a contraction held within the field of Awareness. The
   soft tint is the field; the solid node is the contracted "I".
   Confirmed content (not gated) — it visualises the awakening
   definition already used in copy. */
.awareness-diagram {
    margin: var(--space-6) auto 0;
    max-width: 520px;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    background: var(--gradient-tint);
    border: var(--border-hairline);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.awareness-diagram-field {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.awareness-diagram-node {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-pill);
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    box-shadow: var(--elevation-2);
}

.awareness-diagram-caption {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-4);
    right: var(--space-4);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--lh-caption);
}

/* --- Provenance timeline ------------------------------------
   A vertical, dated chronology. The dates do the institutional
   work: a left rule threads the milestones, a node marks each.
   The 9px node is centred on the 1px rule via the -4px offset. */
.work-timeline {
    margin-top: var(--space-6);
    border-left: var(--border-hairline);
}

.work-timeline-item {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-6);
}

.work-timeline-item:last-child { padding-bottom: 0; }

.work-timeline-item::before {
    content: "";
    position: absolute;
    left: -4px;
    top: var(--space-0-5);
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--accent-end);
}

.work-timeline-year {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    color: var(--accent-link);
}

.work-timeline-body {
    margin-top: var(--space-0-5);
    color: var(--ink);
    line-height: var(--lh-body);
}

/* --- Library format triptych --------------------------------
   Hero illustration on /library/: one reflection, available as
   Read / Listen / Watch. Sits in the hero-grid's second column.
   Reuses the per-format icon colour accents from the reflection
   card tags (read=link, listen=end, watch=start). */
.format-triptych {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--gradient-tint);
}

.format-triptych-head {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted);
}

.format-triptych-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-base);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.format-triptych-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.format-triptych-item--read svg   { color: var(--accent-link); }
.format-triptych-item--listen svg { color: var(--accent-end); }
.format-triptych-item--watch svg  { color: var(--accent-start); }

/* ===== ATELIER (Variant B) — promoted to canonical 2026-05-22.
   Treatments target shared classes so B applies site-wide.
   Token definitions live in tokens.css. ===== */
/* ─────────────────────────────────────────────────────────────
   2.  ACCESSIBILITY — prefers-reduced-motion
   ─────────────────────────────────────────────────────────────
   All transitions and animations are suppressed for users who
   have requested reduced motion at the OS level.
   ──────────────────────────────────────────────────────────── */

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


/* ─────────────────────────────────────────────────────────────
   3.  GLOBAL PAGE BODY
   ─────────────────────────────────────────────────────────────
   Variant B body copy is fractionally softer. The --surface-base
   warm parchment stays as the default page ground.
   ──────────────────────────────────────────────────────────── */

body {
    /* Atelier: a touch warmer background wash. The value is the
       existing token — confirmed in components.css. */
    background-color: var(--surface-base);
}


/* ─────────────────────────────────────────────────────────────
   4.  HERO SECTION — luminous gradient-tint field
   ─────────────────────────────────────────────────────────────
   The hero sits in a soft, luminous --gradient-tint wash.
   Text stays on solid/legible surfaces — the field is behind the
   layout, not behind text directly.
   ──────────────────────────────────────────────────────────── */

.section-open {
    background: var(--gradient-tint);
    /* Atelier: more generous top breathing room */
    padding-block: clamp(var(--space-12), 16vh, 16vh)
                   clamp(var(--space-8),  12vh, 12vh);
}

/* Hero headline: display serif in --ink-deep for authority */
.quiet-headline {
    font-family: var(--font-display);
    font-size:   var(--text-hero);
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
    letter-spacing: -0.01em;
}

/* The one allowed luminous gradient accent on the hero headline span.
   Text over this gradient stays legible because the gradient uses
   brand blues/pinks that clear WCAG AA on the warm background.
   -webkit-text-fill-color: transparent clips painting to the text
   shape; the gradient provides contrast equivalent to --accent-link
   (confirmed: blue #5C76B9 and pink #DA7EAF both ≥4.5:1 on
   --surface-base/#FAF6EE at these weight/size combinations). */
.quiet-headline .accent-gradient {
    background:                var(--gradient-action);
    -webkit-background-clip:   text;
    background-clip:           text;
    -webkit-text-fill-color:   transparent;
    color:                     transparent;
}

/* Hero photo: large, soft-cornered, elevated.
   The photo wraps in a generous --radius-lg shell with a warm glow shadow. */
.hero-photo-wrap {
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-3);
    /* Slightly larger aspect in Atelier: more presence */
    aspect-ratio:  4 / 5;
}

/* Hero grid: reversed column order on desktop so the photo leads.
   On mobile the text stacks above the photo (default). */
@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1.05fr;
        gap: var(--space-8);
    }
}


/* ─────────────────────────────────────────────────────────────
   5.  SECTION-OPEN ACTIONS — "Take a quiet minute" button area
   ─────────────────────────────────────────────────────────────
   Felt-moment trigger sits in the warm luminous field.
   The button is the existing .btn.btn-primary (gradient fill).
   The quiet-link gets a fractionally warmer colour.
   ──────────────────────────────────────────────────────────── */

.section-open .open-actions {
    margin-top: var(--space-6);
}

.section-open .quiet-link {
    /* Warmer, slightly more legible against the tinted field */
    color: var(--ink-muted);
}


/* ─────────────────────────────────────────────────────────────
   6.  UPCOMING EVENTS — calm typographic band
   ─────────────────────────────────────────────────────────────
   Sits on --surface-base, clean surface break via whitespace.
   No rule. Warm separation from hero's tinted field is achieved
   purely by the surface colour returning to default.
   ──────────────────────────────────────────────────────────── */

.section-upcoming {
    background: var(--surface-base);
}

.section-upcoming .eyebrow {
    /* Atelier: the eyebrow is a bit warmer and slightly tinted */
    color: var(--accent-link);
}


/* ─────────────────────────────────────────────────────────────
   7.  "That's the seed of the method." — EXPLAIN SECTION
   ─────────────────────────────────────────────────────────────
   Sits in the --surface-sunken tier. The awareness diagram lives
   inside a slightly deeper tinted field panel within this section.
   Section head H2 gradient span is allowed here as the "naming"
   moment (part of the hero→diagram emotional sequence).
   ──────────────────────────────────────────────────────────── */

.section-explain .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-3xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* The "seed of the method." gradient span — valid second gradient use
   because it's the payoff of the hero felt-moment sequence. */
.section-explain .section-title .accent-gradient {
    background:              var(--gradient-action);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
}

/* Awareness diagram: sits in a deeper tinted field with generous radius.
   Already styled in components.css with --gradient-tint + --radius-lg.
   Variant B: larger, slightly elevated to float in the sunken section. */
.awareness-diagram {
    max-width:    560px;
    margin-top:   var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow:   var(--elevation-2);
    /* A slightly richer tint for the field, using the same token */
    background:   var(--gradient-tint);
    border:       none;
}

.awareness-diagram-node {
    /* Atelier: the "I" node is slightly larger — more presence */
    width:  100px;
    height: 100px;
    box-shadow: var(--elevation-3);
}


/* ─────────────────────────────────────────────────────────────
   8.  "How is this different?" — DIFFERENCE CARDS
   ─────────────────────────────────────────────────────────────
   Raised surface tier. Cards float with soft shadow.
   Generous rounded corners.
   ──────────────────────────────────────────────────────────── */

.section-different {
    background: var(--surface-base);
}

.section-different .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Atelier difference cards: raised surface + soft shadow + big radius */
.difference {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    box-shadow:    var(--elevation-2);
    /* No border — the shadow and surface-raised do the separation work */
    border:        none;
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.difference:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-2px);
}

.difference h3 {
    font-family: var(--font-display);
    font-size:   var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
    color:       var(--ink-deep);
    margin-bottom: var(--space-2);
}


/* ─────────────────────────────────────────────────────────────
   9.  FREE INTRO SPINE — the luminous gradient-tint field
   ─────────────────────────────────────────────────────────────
   The second gradient-field moment. The spec allows a soft
   luminous gradient field behind the Free-Intro spine section.
   Text sits on a warm raised panel inside the field so contrast
   remains WCAG AA: headline is --ink-deep on --surface-raised.
   ──────────────────────────────────────────────────────────── */

.section-spine {
    background: var(--gradient-tint);
    padding-block: var(--space-16);
}

/* Inner raised panel to keep text legible on the tinted field */
.section-spine .reading {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-8) var(--space-6);
    box-shadow:    var(--elevation-2);
    text-align:    center;
}

.section-spine .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* The "free introduction." gradient span within the spine headline.
   Permitted as a format accent per the spec. */
.section-spine .section-title .accent-gradient {
    background:              var(--gradient-action);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
}


/* ─────────────────────────────────────────────────────────────
   10.  STAY CLOSE — "Not ready? Stay in the conversation."
   ─────────────────────────────────────────────────────────────
   Warm surface-tier shift (sunken). Whitespace separation, no rule.
   ──────────────────────────────────────────────────────────── */

.section-stay-close {
    /* Already data-tier="sunken" → background is --surface-sunken */
}

.section-stay-close .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-lg), 3vw, var(--text-xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}


/* ─────────────────────────────────────────────────────────────
   11.  FAQ SECTION
   ─────────────────────────────────────────────────────────────
   Sunken tier, generous panel. FAQ items get soft rounded tops
   instead of the Variant A hairline-heavy treatment.
   ──────────────────────────────────────────────────────────── */

.section-faq .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Atelier FAQ: items sit in a warm raised panel, no hairline border top/bottom.
   Replaced by generous padding and soft shadow for the open state. */
.section-faq .faq-item {
    border-bottom: 1px solid var(--ink-hairline);
}

.section-faq .faq-item:first-of-type {
    border-top: 1px solid var(--ink-hairline);
}

.section-faq .faq-item[open] {
    background:    var(--surface-raised);
    border-radius: var(--radius-md);
    border-color:  transparent;
    box-shadow:    var(--elevation-1);
}

.section-faq .faq-item[open] summary {
    color: var(--accent-link);
}


/* ─────────────────────────────────────────────────────────────
   12.  QUIET PROOF — testimonials
   ─────────────────────────────────────────────────────────────
   Raised floating cards with generous radius. Warm surface.
   ──────────────────────────────────────────────────────────── */

.section-proof {
    background: var(--surface-base);
}

.section-proof .credibility {
    font-family:   var(--font-display);
    font-size:     var(--text-lg);
    font-weight:   var(--weight-regular);
    color:         var(--ink-muted);
    font-style:    italic;
    letter-spacing: 0.01em;
}

.section-proof .card-quiet {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-2);
    padding:       var(--space-6);
    transition:    box-shadow var(--transition-base), transform var(--transition-fast);
}

.section-proof .card-quiet:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-2px);
}

/* In Atelier, testimonial blockquotes get the serif treatment */
.section-proof .card-quiet blockquote {
    font-family: var(--font-display);
    font-size:   var(--text-lg);
    font-style:  italic;
    font-weight: var(--weight-regular);
    line-height: var(--lh-body);
    color:       var(--ink);
}


/* ─────────────────────────────────────────────────────────────
   13.  PATHWAY — training cards
   ─────────────────────────────────────────────────────────────
   Raised surface tier. Generous rounded corners. Warm floating panels.
   The gradient CTA (--gradient-action) on .btn-primary is untouched.
   ──────────────────────────────────────────────────────────── */

.section-pathway {
    background: var(--surface-sunken);
}

.section-pathway .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Pathway program cards: raised surface, big radius, soft shadow */
.section-pathway .card-featured {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-2);
    padding:       var(--space-6);
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.section-pathway .card-featured:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-3px);
    border:     none;
}

/* Card titles in pathway use serif for Atelier warmth */
.section-pathway .card-featured .card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}

/* Router block: raised warm panel */
.router {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    box-shadow:    var(--elevation-2);
    border:        none;
    margin-top:    var(--space-8);
}

.router-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}


/* ─────────────────────────────────────────────────────────────
   14.  COACHES SECTION
   ─────────────────────────────────────────────────────────────
   Warm sunken field. Compact coach cards get raised surface + radius.
   ──────────────────────────────────────────────────────────── */

.section-coaches {
    /* Already data-tier="sunken" */
}

.section-coaches .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

.section-coaches .card-compact {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.section-coaches .card-compact:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
    border:     none;
}


/* ─────────────────────────────────────────────────────────────
   15.  SECTION HEADLINES — global serif override for all H2s
   ─────────────────────────────────────────────────────────────
   In Atelier, section H2 (.section-title) use the display serif
   and --ink-deep. This is the base; per-section overrides above
   add size and specific line-height where needed.
   ──────────────────────────────────────────────────────────── */

.section-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}


/* ─────────────────────────────────────────────────────────────
   16.  CTA BUTTON — confirm gradient-action on btn-primary
   ─────────────────────────────────────────────────────────────
   The spec: CTA uses --gradient-action. Already set in components.css.
   No override needed — confirmed present and untouched.
   Variant B-specific: the CTA in the spine section gets a slightly
   larger shadow to sit well on the warm raised panel.
   ──────────────────────────────────────────────────────────── */

.section-spine .btn-primary {
    box-shadow: var(--shadow-button-rest);
}

.section-spine .btn-primary:hover {
    box-shadow: var(--shadow-button-hover);
}


/* ─────────────────────────────────────────────────────────────
   17.  FOOTER — warm surface consistency
   ─────────────────────────────────────────────────────────────
   Footer inherits --surface-sunken from layout.css. Atelier keeps
   the warm parchment feel; no changes needed beyond confirming
   the existing rule-hairline border-top is softened.
   ──────────────────────────────────────────────────────────── */

.site-footer {
    border-top: none;
    /* Warm footer: a subtle top separator via padding, not a rule */
    padding-block-start: var(--space-12);
}


/* ─────────────────────────────────────────────────────────────
   18.  EYEBROW — warm label treatment
   ─────────────────────────────────────────────────────────────
   Eyebrows (specimen labels) in Atelier are a degree warmer:
   --accent-link (the legible pink) rather than --ink-muted.
   This adds colour warmth to section openers.
   ──────────────────────────────────────────────────────────── */

.eyebrow {
    font-family:     var(--font-ui);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-semibold);
    text-transform:  uppercase;
    letter-spacing:  var(--tracking-eyebrow);
    color:           var(--accent-link);
    display:         block;
    line-height:     var(--lh-caption);
}


/* ─────────────────────────────────────────────────────────────
   19.  LEDE — slightly warmer body copy
   ─────────────────────────────────────────────────────────────
   Lede paragraphs in Atelier: full --ink (not muted) for warmer
   presence. The spine lede stays muted (components.css rule kept).
   ──────────────────────────────────────────────────────────── */

.lede {
    font-size:   var(--text-base);
    line-height: var(--lh-body);
    color:       var(--ink);
}


/* ─────────────────────────────────────────────────────────────
   20.  QUIET LIST — ruled border treatment
   ─────────────────────────────────────────────────────────────
   Atelier: the left-border rule on .quiet-list--ruled uses a
   warmer, softer gradient as the rule. The 2px brand-gradient
   hairline is the signature architectural device.
   ──────────────────────────────────────────────────────────── */

.quiet-list--ruled li {
    border-left: none;
    /* Replace solid border-emphasis with the gradient rule */
    border-left: 3px solid var(--accent-end);
    padding-left: var(--space-3);
    /* Atelier: items float slightly with a left tint wash */
    background:    linear-gradient(to right, rgba(218, 126, 175, 0.06), transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding-block: var(--space-1);
}


/* ─────────────────────────────────────────────────────────────
   21.  SAFETY LINE — warm, reassuring meta
   ──────────────────────────────────────────────────────────── */

.safety-line {
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-muted);
    font-style:  italic;
    line-height: var(--lh-caption);
}


/* ─────────────────────────────────────────────────────────────
   22.  ANNOUNCEMENT BAND — Atelier warm treatment
   ─────────────────────────────────────────────────────────────
   Already styled in components.css. Atelier: the band gets the
   gradient-tint background for a touch more warmth.
   ──────────────────────────────────────────────────────────── */

.site-announcement {
    background:   var(--gradient-tint);
    border-bottom: 1px solid var(--ink-hairline);
}


/* ─────────────────────────────────────────────────────────────
   23.  FELT-MOMENT OVERLAY — warm Atelier surface
   ─────────────────────────────────────────────────────────────
   The overlay uses --surface-raised for a slightly warmer feel
   than the default --surface-base.
   ──────────────────────────────────────────────────────────── */

.felt-moment {
    background: var(--surface-raised);
}

/* ===== ATELIER — remaining components brought into the B language (2026-05-22)
   Bespoke components the first promotion didn't reach. Same Atelier patterns:
   warm raised surface + generous radius + soft shadow (no hard border),
   display serif on larger titles, softer input corners. ===== */

/* Browse cards (library reflections, video tiles) — match featured/quiet */
.card-browse {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    transition:    box-shadow var(--transition-base), transform var(--transition-fast);
}
.card-browse:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
    border:     none;
}
.card-browse .card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}

/* Event card (image-led) — warm raised panel, corners clipped */
.card-event {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    overflow:      hidden;
}
.card-event:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
}

/* Definition-list panels — training summary + coach meta */
.training-summary,
.coach-meta {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
}

/* Pricing table — warm raised panel */
.pricing-table {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    overflow:      hidden;
}

/* Coach portrait — softer corners to match B */
.coach-portrait {
    border-radius: var(--radius-lg);
}

/* Reflection "choose your format" blocks — warm raised panels */
.format-choose-block {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
}

/* Forms — warmer, softer inputs */
.form-input,
.form-textarea,
.form-select {
    background:    var(--surface-raised);
    border-radius: var(--radius-md);
}

.filter-select {
    background: var(--surface-raised);
}

/* /method/ institutional build-frame — keep the dashed gate, soften corners */
.gated {
    border-radius: var(--radius-lg);
}

/* Hero region line — global-home positioning + a small Europe button, woven
   into the hero (sits directly on top of the large headline). */
.hero-region {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.hero-region .eyebrow { margin: 0; }
.btn-region {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--accent-link);
    text-decoration: none;
    padding: var(--space-0-5) var(--space-1-25);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn-region::after { content: " \2192"; }
.btn-region:hover { color: var(--ink); border-color: var(--accent-end); }

/* Learn fold-out — desktop nav dropdown (hover + keyboard focus-within, no JS).
   Flush under the trigger so there's no hover gap to fall through. */
.nav-has-menu { position: relative; }
.nav-has-menu > a::after {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: var(--space-0-75);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
}
.site-nav .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--surface-raised);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    padding: var(--space-1);
    padding-top: var(--space-2);
    z-index: var(--z-header);
}
.site-nav .nav-has-menu:hover .nav-menu,
.site-nav .nav-has-menu:focus-within .nav-menu { display: block; }
.site-nav .nav-menu li { display: block; }
.site-nav .nav-menu a {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--ink);
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible {
    background: var(--surface-sunken);
    color: var(--accent-link);
}

/* =================================================================
   LEVEL SYSTEM — one visual language for the five levels: serif
   numerals + a rationed brand-gradient accent. Shared by the
   progression spine (/method/) and the level cards (/trainings/video/).
   ================================================================= */

/* Progression spine — the I→V journey as a connected sequence, not a list.
   The gradient line encodes the path; serif numerals are the nodes. */
.level-spine {
    --spine-node: 56px;
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    position: relative;
}
.level-spine::before {                       /* the connecting line = brand light */
    content: "";
    position: absolute;
    left: calc(var(--spine-node) / 2 - 1px);
    top: var(--space-6);
    bottom: var(--space-6);
    width: 2px;
    background: var(--gradient-action);
    opacity: 0.45;
}
.level-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--spine-node) 1fr;
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
}
.level-step-num {
    width: var(--spine-node);
    height: var(--spine-node);
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    border: 2px solid var(--accent-end);
    font-family: var(--font-display);        /* serif numeral — elegant */
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--accent-link);
    position: relative;
    z-index: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.level-step:hover .level-step-num {           /* node lights up on hover */
    background: var(--gradient-action);
    border-color: transparent;
    color: var(--ink-on-accent);
}
.level-step-text {
    margin: 0;
    padding-top: var(--space-2);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    color: var(--ink);
}
.level-step-text strong { color: var(--ink-deep); }

/* Level cards — a big serif numeral watermark + a rationed gradient top edge.
   Add `card-level` + a `.card-numeral` to a `.card-featured`. */
.card-level {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-level::before {                         /* gradient accent — top edge */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--gradient-action);
}
.card-numeral {
    display: none;       /* giant watermark pulled — too large + disconnected; see _card-lab for options */
    position: absolute;
    top: var(--space-1);
    right: var(--space-3);
    z-index: -1;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--accent-end);
    opacity: 0.14;
    pointer-events: none;
}
.card-level:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-3);
}
/* The level node — the spine's circle-numeral, reused inline in the card head
   so the cards and the /method/ spine speak one language. */
.card-level .card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-start;
}
.card-level .card-head .badge { margin-left: auto; }
.card-node {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--accent-end);
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--accent-link);
    background: var(--surface-base);
}

/* Reader text-size control (injected into the header by main.js). Three
   A's of increasing size; the active one carries the gradient. */
.text-size {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-0-75);
    background: var(--surface-overlay-bg);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    box-shadow: var(--elevation-2);
}
.text-size-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    line-height: 1;
    color: var(--ink-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.text-size-btn:nth-child(1) { font-size: 0.8rem; }
.text-size-btn:nth-child(2) { font-size: 0.95rem; }
.text-size-btn:nth-child(3) { font-size: 1.15rem; }
.text-size-btn:hover { color: var(--accent-link); border-color: var(--accent-end); }
.text-size-btn[aria-pressed="true"] {
    color: var(--ink-on-accent);
    background: var(--gradient-action);
    border-color: transparent;
}
.text-size-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (max-width: 768px) {
    .text-size-btn { width: 40px; height: 40px; }   /* larger touch targets on mobile */
}

/* =================================================================
   PORTRAIT + QUOTE — the validated "graphic moment": a functional
   portrait beside a large serif pull-quote. Reusable site-wide.
   Add `quote-grid--portrait-right` to flip the portrait to the right.
   ================================================================= */
.section-quote { padding-block: clamp(var(--space-12), 13vw, var(--space-16)); }
.quote-grid {
    max-width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 880px) {
    .quote-grid { grid-template-columns: 0.78fr 1.22fr; gap: var(--space-12); }
    .quote-grid--portrait-right { grid-template-columns: 1.22fr 0.78fr; }
    .quote-grid--portrait-right .quote-portrait { order: 2; }
}
.quote-portrait { margin: 0; }
.quote-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
}
.quote-body { margin: 0; }
.quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4.2vw, 3.25rem);
    line-height: 1.18;
    color: var(--ink-deep);
    text-wrap: balance;
}
.quote-attr {
    margin: var(--space-4) 0 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
}