/* ---------- 1. TOKENS ---------- */
/* ============================================================
   TIER 1 — BASE PALETTE
   The ONLY place in the system where a raw colour value appears.
   Seven brand hues, plus their shades/tints and the neutral scale.
   Nothing outside this block may reference a hex. Rules never
   reference these directly — they go through a role (Tier 2).
   ============================================================ */
:root{
/* --- the seven brand hues --- */
--brand-forest:var(--wp--preset--color--forest,#0E3F22);
--brand-gold:var(--wp--preset--color--gold,#856220);
--brand-terracotta:var(--wp--preset--color--terracotta,#96502F);
--brand-rose:var(--wp--preset--color--rose,#9E5151);
--brand-navy:var(--wp--preset--color--navy,#1C2B5E);
--brand-cream:#FAF8F4;
--brand-ink:#1C201D;

/* --- shades & tints of the hues above --- */
--forest-deep:#0A2E22;
--forest-mid:#1B5240;
--forest-soft:#3B7059;
--forest-pale:#8FB3A3;
--forest-tint:var(--wp--preset--color--band-green,#E6EEEA);
--forest-tint-soft:#F3F7F5;
--gold-tint:var(--wp--preset--color--band-gold,#F3E9D6);
--terracotta-tint:#F1E1D9;

/* --- neutrals --- */
--white:#FFFFFF;
--neutral-600:#4B534E;
--neutral-500:#5E6661;
--neutral-300:#C7CCC8;
--neutral-200:#DEE2DF;

/* --- shadow ink (rgb channels only) --- */
--shadow-rgb:15,30,24;
--shadow-brand-rgb:15,61,46;
}

/* ============================================================
   TIER 2 — ROLES
   Every coloured thing on the site points at one of these,
   and each of these points at a base colour above.
   ============================================================ */
:root{
/* surfaces */
--surface-page:var(--white);
--surface-card:var(--white);
--surface-subtle:var(--brand-cream);
--surface-tint:var(--forest-tint-soft);
--surface-tint-strong:var(--forest-tint);
--surface-tint-gold:var(--gold-tint);
--surface-tint-navy:color-mix(in srgb, var(--brand-navy) 10%, var(--white));
--surface-inverse:var(--brand-forest);

/* text */
--text-primary:var(--brand-ink);
--text-secondary:var(--neutral-600);
--text-muted:var(--neutral-500);
--text-inverse:var(--white);
--text-brand:var(--brand-forest);
--text-link:var(--forest-mid);
--text-link-hover:var(--brand-forest);
--role-nav-link:var(--neutral-600);

/* borders & connectors */
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--forest-soft);
--border-focus:var(--forest-mid);
--connector:var(--forest-pale);

/* accents (buttons, card accent bars, step colours) */
--accent-primary:var(--brand-forest);
--accent-primary-hover:var(--forest-deep);
--accent-gold:var(--brand-gold);--current-veil:color-mix(in srgb, var(--accent-primary) 16%, transparent);--hover-veil:color-mix(in srgb,var(--accent-gold) 22%,transparent);
--accent-terracotta:var(--brand-terracotta);
--accent-rose:var(--brand-rose);
--accent-navy:var(--brand-navy);

/* badge backgrounds */
--badge-forest-bg:var(--forest-tint);
--badge-gold-bg:var(--gold-tint);
--badge-terracotta-bg:var(--terracotta-tint);--badge-rose-bg:color-mix(in srgb, var(--accent-rose) 14%, var(--white));

/* states */
--state-success:var(--forest-mid);
--state-warning:var(--brand-gold);
}


/* ---- typography.css ---- */
:root{
--text-display-xl:3.75rem;
--text-display-l:2.75rem;
--text-display-m:1.75rem;
--text-h1:2.25rem;
--text-h2:1.75rem;
--text-h3:1.375rem;
--text-h4:1.125rem;
--text-body-lg:1.3125rem;
--text-body:1rem;
--text-body-sm:0.9375rem;
--text-caption:0.8125rem;
--text-overline:0.75rem;

--leading-tight:1.15;
--leading-snug:1.3;
--leading-normal:1.5;
--leading-relaxed:1.55;

--tracking-tight:-0.02em;
--tracking-normal:0em;
--tracking-wide:0.04em;
--tracking-wider:0.12em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-extrabold:800;
}


/* ---- spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;
--space-20:80px;--space-24:96px;
--content-width:680px;
}


/* ---- effects.css ---- */
:root{
--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
--shadow-card:0 1px 2px rgba(var(--shadow-rgb),0.05);
--shadow-raised:0 8px 24px rgba(var(--shadow-rgb),0.08);
--shadow-focus:0 0 0 3px var(--surface-tint-strong);
--shadow-image:drop-shadow(0 22px 34px rgba(var(--shadow-brand-rgb),0.18));
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
}


/* ---- fonts.css ---- */
/* Fonts self-hosted in fonts/ — no external CDN dependency */
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/libre-franklin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/libre-franklin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/libre-franklin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/libre-franklin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/libre-franklin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/libre-franklin-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/public-sans-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/public-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/public-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/public-sans-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/public-sans-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--font-display:"Libre Franklin",-apple-system,"Segoe UI",sans-serif;--font-body:"Public Sans",-apple-system,"Segoe UI",sans-serif}



/* ============================================================
   Optimistic Brain — single stylesheet
   1. Tokens   2. Base elements   3. Shared components   4. Layout utilities
   Every heading level, paragraph, link, button and card is defined
   exactly once here and shared by every page.
   ============================================================ */

/* ---------- 2. BASE ELEMENTS ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary);background:var(--surface-page)}

h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--font-display);color:var(--text-primary);margin:0}
h3,.h3,h4,.h4{line-height:var(--leading-snug)}
h1,.h1{font-size:var(--text-display-l);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h2,.h2{font-size:var(--text-h2);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h3,.h3,h4,.h4{font-size:var(--text-h4);font-weight:700;line-height:var(--leading-snug)}

p,.p{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary);margin:0}

a{color:var(--text-link);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
.lnk{color:var(--text-link);font-weight:600}

.eyebrow{font-family:var(--font-body);font-size:var(--text-body);font-weight:400;line-height:var(--leading-normal);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--space-2)}
.meta{font-family:var(--font-body);font-size:var(--text-caption);line-height:var(--leading-normal);color:var(--text-muted)}

/* ---------- 3. SHARED COMPONENTS ---------- */
.btn{font-family:var(--font-body);font-weight:600;font-size:var(--text-body);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);background:var(--accent-primary);color:var(--text-inverse);border:1px solid var(--accent-primary);display:inline-block;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard)}
.btn:hover{background:var(--accent-primary-hover);border-color:var(--accent-primary-hover);color:var(--text-inverse)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-body)}
.btn--gold{background:var(--accent-gold);border-color:var(--accent-gold)}
.btn--gold:hover{background:var(--accent-gold);border-color:var(--accent-gold)}
.btn--terracotta{background:var(--accent-terracotta);border-color:var(--accent-terracotta)}
.btn--terracotta:hover{background:var(--accent-terracotta);border-color:var(--accent-terracotta)}
.btn--rose{background:var(--accent-rose);border-color:var(--accent-rose)}
.btn--rose:hover{background:var(--accent-rose);border-color:var(--accent-rose)}
.btn--navy{background:var(--accent-navy);border-color:var(--accent-navy)}
.btn--navy:hover{background:var(--accent-navy);border-color:var(--accent-navy)}

.card{--card-accent:var(--accent-primary);position:relative;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;text-align:left;display:block}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-accent);z-index:1;pointer-events:none}
.card--gold{--card-accent:var(--accent-gold)}
.card--terracotta{--card-accent:var(--accent-terracotta)}
.card--rose{--card-accent:var(--accent-rose)}
.card--navy{--card-accent:var(--accent-navy)}
.card--padded{padding:var(--space-6)}
.card__body{padding:var(--space-6)}
a.card:hover{box-shadow:var(--shadow-raised)}
/* a panel used as a whole-box link: keep the panel's own text colour, lift on hover */
a.panel:not(.panel--solid){color:inherit}
a.panel:hover{box-shadow:var(--shadow-raised)}
/* Type B — Panel: a tinted supporting block. No accent bar, no shadow. */
.panel{--panel-tint:var(--surface-tint-strong);background:var(--panel-tint);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6);display:block;text-align:left;text-decoration:none}
.panel--rose{--panel-tint:color-mix(in srgb, var(--accent-rose) 14%, var(--surface-card))}
.panel--gold{--panel-tint:color-mix(in srgb, var(--accent-gold) 14%, var(--surface-card))}
.panel--gold22{--panel-tint:color-mix(in srgb, var(--accent-gold) 22%, var(--surface-card))}
.panel--terracotta{--panel-tint:color-mix(in srgb, var(--accent-terracotta) 14%, var(--surface-card))}
.panel--t50{--panel-tint:color-mix(in srgb, var(--accent-terracotta) 50%, var(--surface-card))}
.panel--t28{--panel-tint:color-mix(in srgb, var(--accent-terracotta) 28%, var(--surface-card))}
.panel--navy{--panel-tint:var(--surface-tint-navy)}

/* Type C — Popover: navigation dropdown only. */
/* .popover is the nav dropdown only. For a content box use .card (with top bar) or .panel (without). */
.popover{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-raised)}

.badge--brand{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--surface-tint-strong);color:var(--text-brand);font-family:var(--font-display);font-weight:600;font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.checklist{list-style:none;margin:0;padding-left:0}
.checklist li{display:flex;gap:var(--space-2);align-items:flex-start}
.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}
.nav-dropdown{position:relative}
.nav-dropdown .nav-dropdown-menu{display:none !important}
.nav-dropdown:hover .nav-dropdown-menu{display:block !important}

/* --- tiles: a row of short, scannable items (senses, short lists) --- */
.tilerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:var(--space-3);list-style:none;margin:0;padding-left:0;grid-auto-rows:1fr}
.tilerow--six{grid-template-columns:repeat(3,minmax(0,1fr))}
.tilerow--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tilerow--incard{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.tilerow--six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;font-weight:600;color:var(--text-primary);overflow-wrap:break-word;min-width:0}
.tile__icon{display:block;margin:0 auto var(--space-3);color:var(--text-brand);height:auto}

/* --- flow: a short left-to-right process, arrows between steps --- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:var(--space-4)}
.flow--four{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.flow--rows{grid-template-rows:auto auto auto}
.flow--rows>*{grid-row:1 / span 3}
.flow--rows>.flow__op{align-self:center}
.flow--rows>.flow__arrow{align-self:center}
.flow--rows2{grid-template-rows:auto auto}
.flow--rows2>*{grid-row:1 / span 2}
.flow--rows2>.flow__op,.flow--rows2>.flow__arrow{align-self:center}
.flow__part{display:grid;grid-template-rows:subgrid;text-align:center}
.panel--white{--panel-tint:var(--surface-card)}
.panel--g14{--panel-tint:color-mix(in srgb, var(--accent-primary) 14%, var(--surface-card))}
.panel--g30{--panel-tint:color-mix(in srgb, var(--accent-primary) 30%, var(--surface-card))}
.panel--g22{--panel-tint:color-mix(in srgb, var(--accent-primary) 22%, var(--surface-card))}
.panel--g38{--panel-tint:color-mix(in srgb, var(--accent-primary) 38%, var(--surface-card))}
.panel--t34{--panel-tint:color-mix(in srgb, var(--accent-terracotta) 34%, var(--surface-card))}
.flow__step{display:flex;align-items:center;justify-content:center;text-align:center}
.flow__arrow{display:flex;align-items:center;justify-content:center;color:var(--accent-terracotta);font-size:0;min-width:var(--space-10)}.flow__arrow::after{content:"";width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-3.9px) rotate(45deg)}
.flow__op{display:flex;align-items:center;justify-content:center;color:var(--accent-gold);font-family:var(--font-display);font-size:var(--text-display-l);font-weight:700;line-height:1}
@media (max-width:760px){.flow{grid-template-columns:1fr}.flow__arrow{transform:rotate(90deg)}}

/* --- statement: a single large teaching line, used sparingly --- */
.statement{font-family:var(--font-display);font-size:var(--text-h1);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-brand);margin:0}

/* --- example: a small concrete illustration inside a teaching section --- */
.example__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-6)}
.example__label{font-size:var(--text-caption);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);margin:0}

/* --- section background rhythm: green -> gold -> white, repeating, on every page --- */
.band-green{background:var(--surface-tint-strong)}
.band-gold{background:var(--surface-tint-gold)}
.band-white{background:var(--surface-page)}
.band-navy{background:var(--surface-tint-navy)} /* exception: Unabridged edition only */

/* --- breadcrumb strip: left edge must match the content container below it ---
   In page content the strip is authored as a full-bleed .band-white section
   carrying .l-108 (820px) directly on the section, which left it narrower than
   the sections below and reading as neither centred nor left aligned.
   Here the section runs full width and the crumb itself takes the page's
   content width, so its left edge lands exactly on the content below. */
section.band-white.l-108:has(> p.meta:only-child){max-width:none}
section.band-white.l-108:has(> p.meta:only-child) > p.meta{
  max-width:1000px;margin-left:auto;margin-right:auto}

/* ---------- 4. SPACING (every value is one step of the scale) ---------- */
.mt-0{margin-top:0}
.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.mt-10{margin-top:var(--space-10)}
.mt-12{margin-top:var(--space-12)}
.mt-14{margin-top:var(--space-14)}
.mt-16{margin-top:var(--space-16)}
.mr-auto{margin-right:auto}
.mr-0{margin-right:0}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}
.mb-8{margin-bottom:var(--space-8)}
.mb-10{margin-bottom:var(--space-10)}
.mb-12{margin-bottom:var(--space-12)}
.ml-auto{margin-left:auto}
.ml-0{margin-left:0}
.ml-1{margin-left:var(--space-1)}
.pt-0{padding-top:0}
.pt-1{padding-top:var(--space-1)}
.pt-2{padding-top:var(--space-2)}
.pt-3{padding-top:var(--space-3)}
.pt-4{padding-top:var(--space-4)}
.pt-6{padding-top:var(--space-6)}
.pt-8{padding-top:var(--space-8)}
.pt-12{padding-top:var(--space-12)}
.pt-14{padding-top:var(--space-14)}
.pt-16{padding-top:var(--space-16)}
.pt-20{padding-top:var(--space-20)}
.pt-24{padding-top:var(--space-24)}
.pr-0{padding-right:0}
.pr-3{padding-right:var(--space-3)}
.pr-4{padding-right:var(--space-4)}
.pr-6{padding-right:var(--space-6)}
.pr-8{padding-right:var(--space-8)}
.pr-10{padding-right:var(--space-10)}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:var(--space-1)}
.pb-2{padding-bottom:var(--space-2)}
.pb-3{padding-bottom:var(--space-3)}
.pb-4{padding-bottom:var(--space-4)}
.pb-6{padding-bottom:var(--space-6)}
.pb-8{padding-bottom:var(--space-8)}
.pb-12{padding-bottom:var(--space-12)}
.pb-14{padding-bottom:var(--space-14)}
.pb-16{padding-bottom:var(--space-16)}
.pb-20{padding-bottom:var(--space-20)}
.pb-24{padding-bottom:var(--space-24)}
.pl-0{padding-left:0}
.pl-3{padding-left:var(--space-3)}
.pl-4{padding-left:var(--space-4)}
.pl-6{padding-left:var(--space-6)}
.pl-8{padding-left:var(--space-8)}
.pl-10{padding-left:var(--space-10)}
.gap-0{gap:0}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}
.gap-10{gap:var(--space-10)}
.gap-12{gap:var(--space-12)}
.gap-14{gap:var(--space-14)}
.rgap-2{row-gap:var(--space-2)}
.rgap-4{row-gap:var(--space-4)}
.rgap-8{row-gap:var(--space-8)}
.cgap-8{column-gap:var(--space-8)}
.cgap-10{column-gap:var(--space-10)}

/* ---------- 5. STRUCTURE (display / grid / position / size only) ---------- */
.l-1{align-items:center;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;position:sticky;top:0;z-index:20}
.l-2{color:var(--text-brand);cursor:pointer}
.l-3{align-items:center;display:flex}
.l-4{color:var(--role-nav-link);cursor:pointer;font-weight:600}
.l-5{font-size:11px;line-height:0;vertical-align:super;font-weight:inherit}
.l-6{display:inline-flex;position:relative}
.l-7{display:none;left:0;position:absolute;top:100%}
.l-8{min-width:200px}
.l-9{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:var(--text-body);white-space:nowrap}
.l-10{align-items:center;border-radius:var(--radius-md);border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;display:inline-flex;font-size:var(--text-body)}
.l-12{max-width:1180px}
.l-13{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.l-14{color:var(--text-brand)}
.l-15{display:flex;justify-content:center}
.l-16{display:block;filter:var(--shadow-image);height:auto;max-width:var(--content-width);transform:translateX(-24px);width:100%}
.l-18{max-width:860px;text-align:center}
.l-19{max-width:var(--content-width)}
.l-20{display:block;height:auto;max-width:291px;width:100%}
.l-21{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));max-width:1180px}
.l-21--tight{max-width:940px}
.l-21--pair{grid-template-columns:minmax(0,420px) auto;justify-content:center;max-width:940px}
.l-21--pair-wide{grid-template-columns:minmax(0,600px) auto;justify-content:center;max-width:1000px}
.l-21--3to1{grid-template-columns:3fr 1fr}
.l-22{display:flex;justify-content:center;order:-1}
.l-23{display:block;filter:var(--shadow-image);height:auto;max-width:304px;width:100%}
.l-24{max-width:900px;text-align:center}
.l-25{font-size:11px;line-height:0;vertical-align:super}
.l-26{max-width:1140px;position:relative}
.l-27{background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) 12.5%, var(--accent-rose) 37.5%, var(--accent-rose) 37.5%, var(--accent-gold) 62.5%, var(--accent-gold) 62.5%, var(--accent-terracotta) 87.5%, var(--accent-terracotta) 100%);height:5px;left:12.5%;position:absolute;right:12.5%;top:34px}
.l-28{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.l-29{cursor:pointer;display:block;text-align:center;text-decoration:none}
.l-30{align-items:center;background:var(--accent-primary);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:68px;justify-content:center;width:68px}
.l-31{color:var(--accent-primary)}
.l-32{align-items:center;background:var(--accent-rose);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:68px;justify-content:center;width:68px}
.l-33{color:var(--accent-rose)}
.l-34{align-items:center;background:var(--accent-gold);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:68px;justify-content:center;width:68px}
.l-35{color:var(--accent-gold)}
.l-36{align-items:center;background:var(--accent-terracotta);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:68px;justify-content:center;width:68px}
.l-37{color:var(--accent-terracotta)}
.l-38{max-width:420px;position:relative;text-align:left}
.l-39{background:linear-gradient(to bottom, var(--accent-primary) 0%, var(--accent-primary) 25%, var(--accent-rose) 25%, var(--accent-rose) 50%, var(--accent-gold) 50%, var(--accent-gold) 75%, var(--accent-terracotta) 75%, var(--accent-terracotta) 100%);bottom:26px;left:26px;position:absolute;top:26px;width:5px}
.l-40{align-items:center;cursor:pointer;display:flex;position:relative;text-decoration:none}
.l-41{align-items:center;background:var(--accent-primary);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;height:52px;justify-content:center;width:52px}
.l-42{align-items:center;background:var(--accent-rose);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;height:52px;justify-content:center;width:52px}
.l-43{align-items:center;background:var(--accent-gold);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;height:52px;justify-content:center;width:52px}
.l-44{align-items:center;background:var(--accent-terracotta);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;height:52px;justify-content:center;width:52px}
.l-45{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));max-width:1000px}
.l-46{display:block;height:auto;max-width:598px;width:100%}
.l-47{max-width:1080px;text-align:center}
.l-48{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));text-align:left}
.l-49{border-radius:var(--radius-md);max-width:100%;width:220px}
.l-50{text-align:center}
.l-51{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));max-width:1000px}
.l-52{aspect-ratio:4/5;max-width:360px;min-height:320px;order:2}
.l-53{border-radius:var(--radius-lg);display:block;height:100%;object-fit:cover;width:100%}
.l-54{text-align:center}
.l-55{background:var(--surface-tint);border-radius:var(--radius-lg);border:1px dashed var(--border-strong);max-width:900px;text-align:left}
.l-56{border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;justify-content:space-between}
.l-57{display:flex;flex-wrap:wrap}
.l-58{color:var(--text-muted)}
.l-59{display:flex;justify-content:center;width:100%}
.l-60{max-width:420px;width:100%}
.l-61{position:relative}
.l-62{background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) 12.5%, var(--accent-rose) 37.5%, var(--accent-rose) 37.5%, var(--accent-gold) 62.5%, var(--accent-gold) 62.5%, var(--accent-terracotta) 87.5%, var(--accent-terracotta) 100%);height:5px;left:12.5%;position:absolute;right:12.5%;top:20px}
.l-63{align-items:center;background:var(--accent-primary);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-64{color:var(--accent-primary);font-weight:600}
.l-65{align-items:center;background:var(--accent-rose);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-66{color:var(--accent-rose);font-weight:600}
.l-67{align-items:center;background:var(--accent-gold);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-68{color:var(--accent-gold);font-weight:600}
.l-69{align-items:center;background:var(--accent-terracotta);border-radius:50%;color:var(--text-inverse);display:flex;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-70{color:var(--accent-terracotta);font-weight:600}
.l-71{position:relative;text-align:left}
.l-72{background:linear-gradient(to bottom, var(--accent-primary) 0%, var(--accent-primary) 25%, var(--accent-rose) 25%, var(--accent-rose) 50%, var(--accent-gold) 50%, var(--accent-gold) 75%, var(--accent-terracotta) 75%, var(--accent-terracotta) 100%);bottom:20px;left:20px;position:absolute;top:20px;width:5px}
.l-73{align-items:center;display:flex;position:relative}
.l-74{align-items:center;background:var(--accent-primary);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-75{color:var(--accent-primary);font-size:var(--text-body);font-weight:600}
.l-76{align-items:center;background:var(--accent-rose);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-77{color:var(--accent-rose);font-size:var(--text-body);font-weight:600}
.l-78{align-items:center;background:var(--accent-gold);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-79{color:var(--accent-gold);font-size:var(--text-body);font-weight:600}
.l-80{align-items:center;background:var(--accent-terracotta);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:40px;justify-content:center;width:40px}
.l-81{color:var(--accent-terracotta);font-size:var(--text-body);font-weight:600}
.l-82{align-items:center;display:grid;grid-template-columns:0.9fr 1.1fr;max-width:1000px}
.l-83{display:block;height:auto;max-width:340px;width:100%}
.l-85{max-width:1100px}
.l-86{max-width:var(--content-width);text-align:center}
.l-87{align-items:stretch;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.l-88{cursor:pointer;display:flex;flex-direction:column;text-decoration:none}
.l-89{background:var(--accent-primary);height:8px}
.l-90{display:flex;flex-direction:column;flex:1}

.l-92{color:var(--text-primary);font-weight:600}
.l-93{font-weight:600;margin-top:auto}


.l-96{background:var(--accent-gold);height:8px}

.l-98{background:var(--accent-terracotta);height:8px}

.l-100{display:flex;flex-direction:column}
.l-101{cursor:pointer;display:block;text-decoration:none}

.l-103{max-width:820px;text-align:center}
.l-104{max-width:900px}
.l-105{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}

.l-107{color:var(--text-link);cursor:pointer;font-weight:600;text-decoration:none}
.l-108{max-width:820px}
.l-109{align-items:center;border-bottom:1px solid var(--border-subtle);display:flex}
.l-110{align-items:center;background:var(--surface-tint-strong);border-radius:50%;color:var(--text-brand);display:flex;flex-shrink:0;font-size:var(--text-caption);font-weight:600;height:28px;justify-content:center;width:28px}
.l-111{color:var(--text-brand);font-style:italic}
.l-112{background:var(--surface-tint);border-radius:var(--radius-lg)}
.l-113{font-style:italic}
.l-114{display:flex;flex-wrap:wrap;justify-content:center}
.l-115{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.l-116{max-width:1000px}
.l-117{align-items:center;display:grid;grid-template-columns:1fr auto 1fr}
.l-118{color:var(--text-muted);font-style:italic}
.l-119{color:var(--connector);font-size:var(--text-h4)}
.l-120{color:var(--text-brand);font-weight:600}
.l-121{max-width:540px}
.l-122{display:grid}
.l-123{align-items:center;color:var(--text-primary);display:flex;text-decoration:none}
.l-124{align-items:center;background:var(--accent-primary);border-radius:50%;color:var(--text-inverse);display:flex;flex:none;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:27px;justify-content:center;width:27px}
.l-125{color:inherit}
.l-126{scroll-margin-top:var(--space-20)}
.l-128{scroll-margin-top:var(--space-20)}
.l-129{max-width:1080px}
.l-130{max-width:416px;position:relative}
.l-131{display:block;height:auto;width:100%}
.l-132{color:var(--accent-primary);font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;left:1%;position:absolute;top:3%}
.l-133{color:var(--accent-gold);font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;position:absolute;right:1%;top:0}
.l-134{bottom:5%;color:var(--accent-terracotta);font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;position:absolute;right:1%;white-space:nowrap}
.l-135{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.l-135--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.l-135--even{grid-auto-rows:1fr}
.l-135--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.l-135--pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
.l-135--one{grid-template-columns:minmax(0,1fr)}
.l-136{background:var(--accent-terracotta);height:6px}

.l-138{border-top:1px solid var(--border-subtle);display:grid}
.l-139{display:flex;justify-content:space-between}
.l-140{color:var(--text-primary);font-weight:600;text-align:right}
.l-141{background:var(--accent-gold);height:6px}

.l-143{background:var(--accent-primary);height:6px}

.l-145{scroll-margin-top:var(--space-20)}
.l-146{max-width:var(--content-width)}
.l-147{display:block;height:auto;max-width:392px;width:100%}
.l-148{max-width:760px;text-align:center}
.l-149{display:block;height:auto;max-width:544px;width:100%}
.l-150{color:var(--text-primary);font-weight:600;max-width:var(--content-width)}
.l-151{display:block;height:auto;max-width:357px;width:100%}
.l-152{max-width:1080px;scroll-margin-top:var(--space-20);text-align:center}
.l-153{align-items:stretch;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;gap:var(--space-4);text-align:left}
.l-154::after{content:"";width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-3.9px) rotate(45deg)}
.l-155{cursor:pointer;display:flex;flex-direction:column;height:100%;text-decoration:none}
.l-156{max-width:420px;text-align:left}
.l-157{align-items:center;display:flex;flex-direction:column;gap:var(--space-4)}
.l-158::after{content:"";width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-3.9px) rotate(45deg)}
.l-159{cursor:pointer;display:block;text-decoration:none;width:100%}
.l-160{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));max-width:1080px}
.l-161{display:block;height:auto;max-width:420px;width:100%}
.l-167{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));max-width:1080px}
.l-168{display:block;height:auto;max-width:411px;width:100%}
.l-169{max-width:560px}
.l-170{align-items:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.l-171{align-items:flex-end;display:flex;justify-content:center}
.l-172{border-radius:var(--radius-md);max-width:44%;width:190px}
.l-173{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));max-width:820px}



.l-182{background:color-mix(in srgb, var(--accent-rose) 14%, var(--surface-card))}
.l-183{background:color-mix(in srgb, var(--accent-gold) 14%, var(--surface-card))}
.l-184{background:color-mix(in srgb, var(--accent-terracotta) 14%, var(--surface-card))}







.l-192{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));list-style:none}
.l-193{align-items:flex-start;display:flex}
.l-194{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));text-align:left}
.l-195{display:block;text-decoration:none}
.l-196{color:var(--accent-primary);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase}
.l-197{display:block;text-decoration:none}
.l-198{color:var(--accent-navy);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase}
.l-199{border-radius:var(--radius-md);max-width:100%;width:280px}
.l-200{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.l-201{display:flex;flex-direction:column;list-style:none}
.l-202{display:flex}
.l-203{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.l-204{color:var(--text-primary)}
.l-206{color:var(--accent-navy)}
.l-207{color:var(--accent-navy);font-weight:600}
.l-208{aspect-ratio:4/5;max-width:320px;min-height:280px}
.l-209{border-radius:var(--radius-lg);height:100%;object-fit:cover;width:100%}
.l-210{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));max-width:1000px}
.l-211{display:block;height:auto;max-width:435px;width:100%}
.l-212{align-items:center;background:var(--text-primary);border-radius:50%;color:var(--surface-card);display:flex;flex:none;font-family:var(--font-display);font-size:var(--text-body);font-weight:600;height:24px;justify-content:center;width:24px}
.l-213{align-items:center;display:flex;justify-content:center}
.l-214{display:block;height:auto;max-width:380px;width:100%}
.l-215{display:flex;flex-wrap:wrap;justify-content:center;list-style:none}
.l-216{align-items:center;border-radius:50%;border:6px solid var(--accent-primary);display:flex;height:225px;justify-content:center;width:225px}
.l-217{display:block;height:auto;width:145px}
.l-218{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));max-width:1000px}
.l-220{cursor:pointer;display:block;max-width:var(--content-width);text-align:center;text-decoration:none}
.l-221{align-items:center;border-radius:50%;border:6px solid var(--accent-rose);display:flex;height:225px;justify-content:center;width:225px}
.l-222{display:block;height:auto;width:129px}
.l-223{align-items:center;border-radius:50%;border:6px solid var(--accent-gold);display:flex;height:225px;justify-content:center;width:225px}
.l-224{display:block;height:auto;width:143px}
.l-225{align-items:center;border-radius:50%;border:6px solid var(--accent-terracotta);display:flex;height:225px;justify-content:center;width:225px}
.l-226{display:block;height:auto;width:179px}
.l-228{max-width:var(--content-width)}
.l-229{background:var(--surface-card);border-radius:var(--radius-pill);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-body)}
.l-230{border:0;clip:rect(0,0,0,0);height:1px;margin-bottom:-1px;margin-left:-1px;margin-right:-1px;margin-top:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.l-231{display:grid;max-width:860px}
.l-232{color:var(--text-link);font-weight:600}
.l-233{max-width:var(--content-width);text-align:center}
.l-234{max-width:520px}
.l-235{aspect-ratio:4/5;max-width:360px;min-height:320px}

/* ============================================================
   6. RESPONSIVE — phone layout
   ============================================================ */
img{max-width:100%;height:auto}
.steps-mobile{display:none}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:var(--space-1);width:44px;height:44px;padding-left:var(--space-2);padding-right:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer}
.nav-burger span{display:block;height:2px;background:var(--text-brand);border-radius:2px}
/* Nav collapses to the hamburger until the full horizontal menu actually fits (~900px).
   Kept separate from the 760px content breakpoint so tablet content layout is unaffected. */
@media (max-width:991px){.site-header nav{position:relative;flex-wrap:wrap}.nav-burger{display:flex}}

@media (max-width:760px){
  /* --- the top of the scale compresses on small screens, so everything
         stays on-scale and no section feels cavernous on a phone --- */
  :root{--space-24:64px;--space-20:56px;--space-16:48px}

  /* --- section gutters --- */
  section[class]{padding-left:var(--space-6);padding-right:var(--space-6)}

  /* --- header collapses to a hamburger --- */
  .site-header nav{position:relative;flex-wrap:wrap}
  .nav-burger{display:flex}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-raised);padding-top:var(--space-2);padding-bottom:var(--space-4);padding-left:var(--space-6);padding-right:var(--space-6)}
  .nav-toggle:checked ~ .nav-menu{display:flex}
  .nav-menu>*{padding-top:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle)}
  .nav-menu>*:last-child{border-bottom:0}
  .nav-dropdown{flex-direction:column;align-items:stretch}
  .nav-dropdown .nav-dropdown-menu{display:block !important;position:static;padding-top:var(--space-2)}
  .nav-dropdown .popover{box-shadow:none;border:0;min-width:0;padding-left:0;padding-right:0}

  /* --- every two-column section stacks TEXT FIRST, IMAGE SECOND --- */
.l-13>*:has(img),
.l-13>*:has(figure),
.l-13>*:has(image-slot),
.l-13>img,
.l-13>figure,
.l-21>*:has(img),
.l-21>*:has(figure),
.l-21>*:has(image-slot),
.l-21>img,
.l-21>figure,
.l-45>*:has(img),
.l-45>*:has(figure),
.l-45>*:has(image-slot),
.l-45>img,
.l-45>figure,
.l-48>*:has(img),
.l-48>*:has(figure),
.l-48>*:has(image-slot),
.l-48>img,
.l-48>figure,
.l-51>*:has(img),
.l-51>*:has(figure),
.l-51>*:has(image-slot),
.l-51>img,
.l-51>figure,
.l-82>*:has(img),
.l-82>*:has(figure),
.l-82>*:has(image-slot),
.l-82>img,
.l-82>figure,
.l-115>*:has(img),
.l-115>*:has(figure),
.l-115>*:has(image-slot),
.l-115>img,
.l-115>figure,
.l-135>*:has(img),
.l-135>*:has(figure),
.l-135>*:has(image-slot),
.l-135>img,
.l-135>figure,
.l-160>*:has(img),
.l-160>*:has(figure),
.l-160>*:has(image-slot),
.l-160>img,
.l-160>figure,
.l-167>*:has(img),
.l-167>*:has(figure),
.l-167>*:has(image-slot),
.l-167>img,
.l-167>figure,
.l-170>*:has(img),
.l-170>*:has(figure),
.l-170>*:has(image-slot),
.l-170>img,
.l-170>figure,
.l-173>*:has(img),
.l-173>*:has(figure),
.l-173>*:has(image-slot),
.l-173>img,
.l-173>figure,
.l-192>*:has(img),
.l-192>*:has(figure),
.l-192>*:has(image-slot),
.l-192>img,
.l-192>figure,
.l-194>*:has(img),
.l-194>*:has(figure),
.l-194>*:has(image-slot),
.l-194>img,
.l-194>figure,
.l-200>*:has(img),
.l-200>*:has(figure),
.l-200>*:has(image-slot),
.l-200>img,
.l-200>figure,
.l-203>*:has(img),
.l-203>*:has(figure),
.l-203>*:has(image-slot),
.l-203>img,
.l-203>figure,
.l-210>*:has(img),
.l-210>*:has(figure),
.l-210>*:has(image-slot),
.l-210>img,
.l-210>figure,
.l-218>*:has(img),
.l-218>*:has(figure),
.l-218>*:has(image-slot),
.l-218>img,
.l-218>figure{order:2}

  /* --- images always centred --- */
  img{display:block;margin-left:auto;margin-right:auto}
  figure{text-align:center;margin-left:0;margin-right:0}

  /* --- multi-column diagrams collapse to one column --- */
  .l-28,.l-82,.l-87,.l-117,.l-153{grid-template-columns:1fr}
  .l-27,.l-39,.l-62,.l-72{display:none}
  .steps-desktop{display:none}
  .steps-mobile{display:block}

  /* --- nothing may push the page sideways --- */
  [class]{min-width:0}
  table,pre{max-width:100%;overflow-x:auto}
}

/* ============================================================
   7. TEMPLATE LAYOUTS — shared by the WordPress page templates
   ============================================================ */
.wrap{max-width:var(--content-width);margin-left:auto;margin-right:auto}
.wrap--wide{max-width:1080px;margin-left:auto;margin-right:auto}
.lead{font-size:var(--text-body-lg);line-height:var(--leading-snug);color:var(--text-secondary)}
strong,b{font-weight:600}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.meta-row .dot{color:var(--text-muted)}

/* --- long-form article body --- */
.prose>*+*{margin-top:var(--space-4)}
.prose>h2{margin-top:var(--space-10)}
.prose>h3{margin-top:var(--space-8)}
.prose ul,.prose ol{padding-left:var(--space-6);display:grid;gap:var(--space-2);margin:0}
.prose li{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.prose blockquote{margin:0;border-left:3px solid var(--accent-gold);padding-left:var(--space-6);font-style:italic;color:var(--text-primary)}
.prose figure{margin:0}
.prose img{width:100%;border-radius:var(--radius-lg);display:block}
.prose figcaption{font-size:var(--text-caption);color:var(--text-muted);margin-top:var(--space-2);text-align:center}

/* --- article figure box: a hairline frame around in-body diagrams --- */
.prose .figbox{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);padding:var(--space-6);margin-left:auto;margin-right:auto}
.prose .figbox img{border-radius:0}
.prose .figbox figcaption{margin-top:var(--space-4)}

/* --- featured image --- */
.featured{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);display:block}

/* --- inline audio player (meditations) --- */
.audio{display:flex;align-items:center;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-top:4px solid var(--accent-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4) var(--space-6)}
.audio__play{flex:none;width:52px;height:52px;border-radius:var(--radius-pill);background:var(--accent-primary);color:var(--text-inverse);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.audio__main{flex:1;min-width:0}
.audio__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);color:var(--text-primary)}
.audio__track{position:relative;height:6px;border-radius:var(--radius-pill);background:var(--surface-tint-strong);margin-top:var(--space-2)}
.audio__fill{position:absolute;inset:0 auto 0 0;width:34%;border-radius:var(--radius-pill);background:var(--accent-primary)}
.audio__knob{position:absolute;top:50%;left:34%;width:14px;height:14px;border-radius:var(--radius-pill);background:var(--surface-card);border:2px solid var(--accent-primary);transform:translate(-50%,-50%)}
.audio__times{display:flex;justify-content:space-between;margin-top:var(--space-2)}
.audio__side{flex:none;display:flex;align-items:center;gap:var(--space-3);color:var(--text-muted)}

/* --- post grids and cards --- */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-6)}
.postcard{display:flex;flex-direction:column;height:100%}
.postcard__media{aspect-ratio:16/9;background:var(--surface-tint-strong);overflow:hidden}
.postcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.postcard__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.postcard__more{margin-top:auto;padding-top:var(--space-4);font-weight:600;color:var(--text-link)}

/* --- whole-card links: the entire box is the click target --- */
.is-linkcard{position:relative;cursor:pointer;transition:box-shadow 160ms ease,border-color 160ms ease}
.is-linkcard .linkcard__target::after{content:"";position:absolute;inset:0;z-index:2}
.is-linkcard .linkcard__target{position:static}
.is-linkcard a,.is-linkcard button,.is-linkcard input,.is-linkcard select,.is-linkcard textarea,.is-linkcard audio{position:relative;z-index:3}
.is-linkcard:hover{box-shadow:var(--shadow-raised)}
.is-linkcard:hover .linkcard__target{text-decoration:underline}
.is-linkcard:focus-within{box-shadow:var(--shadow-focus)}

/* --- filter chips (browse pages) --- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-secondary);font-size:var(--text-body);font-weight:600;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--border-strong);color:var(--text-brand)}
.chip--active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-inverse)}
.chip--count{color:var(--text-muted);font-weight:400}
.chip--active .chip--count{color:var(--text-inverse)}

/* --- pagination --- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2)}
.pager a,.pager span{min-width:44px;height:44px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-body);font-weight:600}
.pager a:hover{border-color:var(--border-strong);color:var(--text-brand)}
.pager .is-current{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-inverse)}
.pager .is-gap{border:0;background:transparent;min-width:24px}
.pager .is-disabled{color:var(--text-muted);background:var(--surface-page);opacity:.7}

/* --- empty / no-results state --- */
.empty{border:1px dashed var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);padding:var(--space-16) var(--space-8);text-align:center}
.empty__icon{width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-pill);background:var(--surface-tint-strong);color:var(--text-brand);display:flex;align-items:center;justify-content:center}

/* --- search --- */
.searchbox{display:flex;gap:var(--space-2);max-width:520px}
.searchbox input{flex:1;min-width:0;font-family:var(--font-body);font-size:var(--text-body);padding:var(--space-3) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary)}
.searchbox input:focus{outline:0;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}

/* --- simple index list --- */
.indexlist{display:grid;gap:0;border-top:1px solid var(--border-subtle)}
.indexlist a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary)}
.indexlist a:hover{color:var(--text-link)}

@media (max-width:760px){
  .audio{flex-wrap:wrap}
  .audio__side{width:100%;justify-content:flex-end}
}

/* --- full-width landing template (no site content column) --- */
.t-landing .band-green,.t-landing .band-gold,.t-landing .band-white{padding-left:var(--space-10);padding-right:var(--space-10)}
.t-landing .hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-12);align-items:center;max-width:1180px;margin-left:auto;margin-right:auto}
.signup{display:flex;flex-wrap:wrap;gap:var(--space-2);max-width:520px}
.signup input{flex:1;min-width:220px;font-family:var(--font-body);font-size:var(--text-body);padding:var(--space-3) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary)}
.signup input:focus{outline:0;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.t-landing .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-6);max-width:1080px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.t-landing .band-green,.t-landing .band-gold,.t-landing .band-white{padding-left:var(--space-6);padding-right:var(--space-6)}}

/* ---------- CYCLE DIAGRAM HOTSPOTS ---------- */
.brainhero{display:block;height:auto;max-width:520px;width:100%}
.cyclehero{display:block;height:auto;max-width:448px;width:100%}
.iconhero{display:block;height:auto;max-width:224px;width:100%}
.cyclemap{position:relative;display:block;margin-left:auto;margin-right:auto}
.cyclemap>img{display:block;width:100%;height:auto}
.cyclemap a,.cyclemap .hs-cur{position:absolute;width:34%;height:40%;border-radius:50%;display:block;text-indent:-9999px;overflow:hidden;transition:box-shadow var(--ease-standard),background var(--ease-standard)}
.cyclemap a:hover{background:var(--hover-veil)}
.cyclemap a:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.cyclemap .hs-tl{left:1%;top:.5%}
.cyclemap .hs-tr{left:65%;top:.5%}
.cyclemap .hs-bl{left:1%;top:59.5%}
.cyclemap .hs-br{left:65%;top:59.5%}

@media (max-width:760px){.l-135--two{grid-template-columns:1fr}}
@media (max-width:760px){.flow--four{grid-template-columns:1fr}}

/* --- meter: a stepped intensity scale --- */
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);align-items:end;height:var(--space-16)}
.meter__step{border-radius:var(--radius-md);background:var(--accent-terracotta)}
.meter__step:nth-child(1){height:24%;opacity:.26}
.meter__step:nth-child(2){height:42%;opacity:.45}
.meter__step:nth-child(3){height:61%;opacity:.63}
.meter__step:nth-child(4){height:80%;opacity:.81}
.meter__step:nth-child(5){height:100%;opacity:1}
.meter__labels{display:flex;justify-content:space-between}
@media (max-width:760px){.tilerow--incard{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* narrow-screen display type */
@media (max-width:380px){:root{--text-display-l:2.15rem;--text-display-xl:2.6rem}}

/* --- solid fills: for result and label elements. White text, no hairline. --- */
.panel--solid{--panel-tint:var(--accent-primary);border-color:transparent;color:var(--text-inverse)}
.panel--solid p,.panel--solid strong,.panel--solid .h4,.panel--solid .eyebrow{color:var(--text-inverse)}
.panel--solid.panel--s-gold{--panel-tint:var(--accent-gold)}
.panel--solid.panel--s-terracotta{--panel-tint:var(--accent-terracotta)}
.panel--solid.panel--s-rose{--panel-tint:var(--accent-rose)}
.tile--solid{background:var(--accent-primary);border-color:transparent;color:var(--text-inverse)}
.tile--solid.tile--s-terracotta{background:var(--accent-terracotta)}
.tile--solid.tile--s-gold{background:var(--accent-gold)}
.tile--solid.tile--s-rose{background:var(--accent-rose)}
.tile--g14{background:color-mix(in srgb, var(--accent-primary) 14%, var(--surface-card))}
.tile--t14{background:color-mix(in srgb, var(--accent-terracotta) 18%, var(--surface-card))}
@media (max-width:760px){.l-21--pair{grid-template-columns:1fr;justify-content:stretch}}
@media (max-width:760px){.l-21--pair-wide{grid-template-columns:1fr;justify-content:stretch}}

/* --- scale: a two-ended comparison bar --- */
.scale{display:block}
.scale__bar{height:var(--space-4);border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent-terracotta) 0%,var(--accent-terracotta) 33.33%,var(--surface-tint-strong) 33.33%,var(--surface-tint-strong) 66.66%,var(--accent-primary) 66.66%,var(--accent-primary) 100%)}
.scale__ends{display:flex;justify-content:space-between;align-items:baseline}
.scale__mid{display:flex;justify-content:center}
@media (max-width:760px){.tilerow--four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- image placeholder: awaiting a supplied asset --- */
.imgph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--space-24);padding:var(--space-6);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--text-muted)}
.flow--navy .flow__arrow{color:var(--accent-navy)}
/* --- quad cycle diagram: circles in the four corners --- */
.cyclemap--quad a,.cyclemap--quad .hs-cur{width:33.22%;height:38.45%}
.cyclemap--quad .hs-tl{left:1.42%;top:1.65%}
.cyclemap--quad .hs-tr{left:65.36%;top:1.65%}
.cyclemap--quad .hs-bl{left:1.42%;top:59.90%}
.cyclemap--quad .hs-br{left:65.36%;top:59.90%}
.cyclemap .hs-cur{background:var(--current-veil);cursor:default}
@media (max-width:760px){.l-135--pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}}
@media (max-width:760px){.l-21--3to1{grid-template-columns:1fr}}
@media (max-width:760px){.l-135--four{grid-template-columns:1fr}}

/* eyebrow on tinted panels */
.panel--g22 .eyebrow,.panel--g22 .meta,.panel--g22 .p,.panel--g30 .eyebrow,.panel--g30 .meta,.panel--g30 .p,.panel--g38 .eyebrow,.panel--g38 .meta,.panel--g38 .p,.panel--g14 .meta,.panel--t28 .eyebrow,.panel--t28 .meta,.panel--t28 .p,.panel--t34 .eyebrow,.panel--t34 .meta,.panel--t34 .p{color:var(--text-primary)}

/* --- vflow: a vertical step sequence --- */
.vflow{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
.vflow .panel{text-align:center}
.vflow__arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent-primary);font-size:0;min-height:var(--space-10)}.vflow__arrow::after{content:"";width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3.9px) rotate(45deg)}

/* --- inline mark before a statement --- */
.mark{display:inline-block;font-weight:700;margin-right:var(--space-2)}

/* --- chaingrid: parallel vertical chains whose rows align across columns --- */
.chaingrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);gap:var(--space-2) var(--space-6)}
.chaingrid>.chain{display:grid;grid-row:1 / span 7;grid-template-rows:subgrid;gap:var(--space-2)}
.chain .panel{text-align:center}
@supports not (grid-template-rows: subgrid){
  .chaingrid>.chain{display:flex;flex-direction:column}
  .chaingrid>.chain>.panel:nth-child(3){min-height:104px}
}
@media (max-width:760px){
  .chaingrid{grid-template-columns:1fr;grid-template-rows:none;gap:var(--space-8)}
  .chaingrid>.chain{grid-row:auto;display:flex;flex-direction:column}
  .chaingrid>.chain>.panel:nth-child(3){min-height:0}
}
.flow__op--ink{color:var(--text-primary)}

/* narrow pairs */
@media (max-width:400px){
  .l-135--pairs{gap:var(--space-2)}
  .l-135--pairs .panel{padding:var(--space-3);overflow-wrap:break-word}
  .l-135--pairs .h4{font-size:var(--text-body);overflow-wrap:break-word}
}

/* mobile tap targets */
@media (max-width:760px){
  .nav-menu a,.nav-dropdown-menu a,.nav-dropdown>a{display:block;min-height:44px;line-height:44px;padding-top:0;padding-bottom:0}
}

/* checkmark glyphs */
.l-64,.l-66,.l-68,.l-70,.l-207{flex:0 0 auto;min-width:1em}
@media (max-width:760px){.flow--rows{grid-template-rows:none}
.flow--rows2{grid-template-rows:none}
.flow--rows2>*{grid-row:auto}.flow--rows>*{grid-row:auto}.flow__part{grid-template-rows:auto auto auto}
.flow--rows2 .flow__part{grid-template-rows:auto auto}}

/* solid-fill text inherits inverse */
.panel--solid,.panel--solid *,.tile--solid,.tile--solid *{color:var(--text-inverse)}

/* --- paragraph separation ---
   A wrapped paragraph must read as one block, so the gap BETWEEN blocks is
   always larger than the leading INSIDE one. Two adjacent text blocks get a
   full 16px regardless of any smaller utility on them. */
p.p + p.p, p.p + p.lead, p.lead + p.p{margin-top:var(--space-4)}

/* --- heading leading --- */
h3,.h3,h4,.h4{line-height:var(--leading-snug)}

/* --- stacked text spacing ---
   Every gap between two stacked text elements is the same single step, so a
   heading, its subheading and its paragraphs read as one evenly spaced column.
   Class-qualified so these win over any smaller mt-* utility written inline. */
h2.h2 + p.lead, h2.h2 + p.p, h2.h2 + ul.checklist,
h3 + p.lead, h3 + p.p, h3 + ul.checklist,
p.lead + p.p, p.lead + ul.checklist,
p.p + p.p, p.p + p.lead, p.p + ul.checklist,
ul.checklist + p.p{margin-top:var(--space-4)}

/* --- subgrid parts ---
   A .flow__part shares row tracks with its siblings, so the grid's own row gap
   already separates title from body. Zero the margin or the two stack and the
   gap comes out double the rest of the site. */
.flow__part > p.p, .flow__part > p.lead, .flow__part > h3, .flow__part > ul{margin-top:0}

/* --- pill: a card's position in a graded or ordered set --- */
.pill{display:inline-block;padding:7px var(--space-3) 5px;line-height:1;border-radius:var(--radius-pill);font-size:var(--text-body);font-weight:400;letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:var(--space-2)}
.pill--forest{background:var(--badge-forest-bg);color:var(--accent-primary)}
.pill--gold{background:var(--badge-gold-bg);color:var(--accent-gold)}
.pill--terracotta{background:var(--badge-terracotta-bg);color:var(--accent-terracotta)}
.pill--rose{background:var(--badge-rose-bg);color:var(--accent-rose)}

/* --- banded card: the title sits in a full-width accent header --- */
.card--banded{padding:0}
.card--banded > :first-child{background:var(--card-accent);color:var(--text-inverse);margin:0;padding:var(--space-4) var(--space-6);font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;line-height:var(--leading-snug);text-transform:none;letter-spacing:0}
.card--banded > :first-child + *{margin-top:0}
.card--banded > :not(:first-child){margin-left:var(--space-6);margin-right:var(--space-6)}
.card--banded > :nth-child(2){margin-top:var(--space-6)}
.card--banded > :last-child{margin-bottom:var(--space-6)}

.card--banded > .eyebrow:first-child{text-transform:uppercase;letter-spacing:0.08em;font-family:var(--font-body);font-size:var(--text-body);font-weight:400}
/* connector never stretches */
.flow__arrow{align-self:center;justify-self:center}
.vflow__arrow{align-self:center;justify-self:center}

/* --- behaviour brain: labelled regions --- */
.bhero{max-width:520px;position:relative;margin-left:auto;margin-right:auto}
.bhero > img{display:block;height:auto;width:100%}
.bhero__lbl{position:absolute;font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;white-space:nowrap}
.bhero__lbl--actions{color:var(--accent-primary);left:7%;top:4%}
.bhero__lbl--reactions{color:var(--accent-gold);right:8%;top:3%}
.bhero__lbl--reflexes{color:var(--accent-rose);right:4%;bottom:7%}

/* --- PFC brain: observer label --- */
.phero{max-width:520px;position:relative;margin-left:auto;margin-right:auto}
.phero > img{display:block;height:auto;width:100%}
.phero__lbl{position:absolute;left:1%;top:1%;color:var(--accent-primary);font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;line-height:var(--leading-snug)}
/* label gap: chips and post cards */
.eyebrow + .chips{margin-top:0 !important}
.postcard .eyebrow + *{margin-top:0 !important}
.postcard__body .eyebrow{margin-bottom:0}

/* ---------- Exercise audio player ---------- */
.ex-audio{margin:var(--space-12) auto var(--space-4);max-width:var(--content-width)}
.ex-audio .wp-audio-shortcode,.ex-audio .mejs-container,.ex-audio .mejs-container .mejs-controls,.ex-audio audio{width:100% !important;max-width:100% !important}
.ex-audio .mejs-container,.ex-audio .mejs-container .mejs-controls{height:52px !important}
.ex-audio .mejs-controls{padding:0 var(--space-3)}
.ex-audio audio{border-radius:var(--radius-md);background:var(--surface-tint-strong)}
.ex-audio audio::-webkit-media-controls-enclosure{background:var(--surface-tint-strong);border-radius:var(--radius-md)}
.ex-audio audio::-webkit-media-controls-panel{background-color:var(--surface-tint-strong)}

/* ---------- Micro Practice box ---------- */
.micro-practice h3 + ol,.micro-practice h3 + ul{margin-top:var(--space-4)}

/* ---------- Single-post body spacing (post-content wrapper) ---------- */
.prose .wp-block-post-content>*+*{margin-top:var(--space-4)}
.prose .wp-block-post-content>h2{margin-top:var(--space-10)}
.prose .wp-block-post-content>h3{margin-top:var(--space-8)}
.prose .wp-block-post-content>.micro-practice{margin-top:var(--space-8)}
.prose .wp-block-post-content>.ex-audio{margin-top:var(--space-8)}
/* inline article figures: constrain so diagrams do not fill the column */
.prose figure img{max-width:380px;margin-left:auto;margin-right:auto}
@media (max-width:600px){.prose figure img{max-width:100%}}

/* ---------- Classic menus (Appearance -> Menus) styled to the design ---------- */
.ob-nav > ul.ob-menu{display:flex;align-items:center;gap:var(--space-8);list-style:none;margin:0;padding:0}
.ob-nav .menu-item{position:relative}
.ob-nav .menu-item > a{color:var(--role-nav-link);font-weight:600;text-decoration:none;white-space:nowrap}
.ob-nav .menu-item > a:hover,.ob-nav .menu-item > a:focus{color:var(--text-brand)}
/* dropdown = design popover */
.ob-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;list-style:none;margin:0;padding:var(--space-2);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);z-index:30}
/* bridge the header's bottom padding so the pointer never leaves the item before reaching the dropdown */
.ob-nav .menu-item-has-children::after{content:"";position:absolute;top:100%;left:0;right:0;height:var(--space-4)}
.ob-nav .menu-item-has-children:hover > .sub-menu,.ob-nav .menu-item-has-children:focus-within > .sub-menu{display:block}
.ob-nav .sub-menu a{display:block;color:var(--text-secondary);font-weight:400;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);white-space:nowrap;text-decoration:none}
.ob-nav .sub-menu a:hover{color:var(--text-brand);background:var(--surface-tint-strong)}
/* footer menu row */
.ob-foot > ul.ob-foot-menu{display:flex;flex-wrap:wrap;gap:var(--space-4);row-gap:var(--space-2);list-style:none;margin:0;padding:0}
.ob-foot .menu-item > a{color:var(--text-link);font-weight:600;font-size:var(--text-caption);text-decoration:none}
.ob-foot .menu-item > a:hover{color:var(--text-brand)}
@media (max-width:991px){
  /* Collapsed header order: wordmark left, then search, then the burger hard right. */
  .site-header .l-1{gap:var(--space-3)}
  .site-header .l-2{order:1}
  .site-header .l-10{order:2;margin-left:auto}
  .site-header .nav-burger{order:3}
  .ob-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-raised);padding:var(--space-2) var(--space-6) var(--space-4)}
  .nav-toggle:checked ~ .ob-nav{display:block}
  .ob-nav > ul.ob-menu{flex-direction:column;align-items:stretch;gap:0}
  .ob-nav .menu-item{position:static}
  .ob-nav .menu-item > a{display:block;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
  .ob-nav .sub-menu{display:block;position:static;box-shadow:none;border:0;min-width:0;padding:0 0 var(--space-2) var(--space-3)}
  .ob-nav .sub-menu a{padding:var(--space-2) 0}
}


/* --- browse footer (browse-meditations / browse-all parts) --- */
.bcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:clamp(24px,3.5vw,44px);margin-top:var(--space-6)}
.bcard .brow:first-child{margin-top:0}
.brow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);margin-top:var(--space-4)}
.brow .eyebrow{margin:0;flex:0 0 104px}
.brow .chips{flex:1 1 300px}
.bcard .brow--plain .chip{background:var(--surface-tint);border-color:var(--border-default)}
.chips--goal .chip{background:color-mix(in srgb,var(--accent-terracotta) 18%,var(--white));border-color:color-mix(in srgb,var(--accent-terracotta) 42%,var(--white));color:var(--text-primary)}
.chips--length .chip{background:color-mix(in srgb,var(--accent-primary) 14%,var(--white));border-color:color-mix(in srgb,var(--accent-primary) 36%,var(--white));color:var(--text-primary)}
.chips--type .chip{background:color-mix(in srgb,var(--accent-navy) 14%,var(--white));border-color:color-mix(in srgb,var(--accent-navy) 36%,var(--white));color:var(--text-primary)}
.brow--goal .eyebrow{color:var(--accent-terracotta)}
.brow--length .eyebrow{color:var(--accent-primary)}
.brow--type .eyebrow{color:var(--accent-navy)}
@media (max-width:640px){.brow .eyebrow{flex:0 0 100%}}

/* --- related reading row (Keep Reading, foot of every article) ---
   The [ob_related] shortcode emits the same .postgrid / .card.postcard markup
   as the listing templates, so it inherits card styling and whole-card linking.
   Only the rhythm inside the Keep Reading section needs setting here. */
.band-gold .postgrid{margin-top:var(--space-8)}
.band-gold .postgrid .postcard{background:var(--surface-card)}
.postcard h3 a,.postcard__more a{color:inherit;text-decoration:none}
.postcard__more a{color:var(--text-link)}

/* --- previous / next within a reading sequence ---
   Rendered by [ob_prevnext] at the foot of any page that belongs to one of the
   sequences declared in functions.php. Two whole-card links; when a page is at
   either end of its sequence only one side renders, and it keeps its side of
   the row rather than sliding to the middle. */
.pagenav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-4)}
.pagenav__side h3{margin-top:var(--space-1)}
.pagenav__side h3 a{color:inherit;text-decoration:none}
.pagenav__next{text-align:right;grid-column:-2}
@media (max-width:640px){.pagenav__next{text-align:left;grid-column:auto}}

/* the foot-of-page "next stage" note used inside page content */
.nextstage{margin-top:var(--space-6)}