/* The Call of Being design system — ported into the theme (Phase 3).
   Component styles scoped to body; tokens bridged to theme.json presets so
   Appearance -> Styles controls colours/fonts. Generated from mp-design.css. */


/* Scoped to for WordPress (avoids theme collisions) */
/* ============================================================
   Amir Freimann · The Call of Being — Unified Design System
   Derived from spiritualresearch.net
   Signature teal #2A9496 · crimson #991919 · warm cream #ECEBE3
   ============================================================ */



:root{
  /* colours -> theme.json presets (Appearance -> Styles pilote le design) */
  --teal:         var(--wp--preset--color--mp-teal);
  --teal-deep:    var(--wp--preset--color--mp-teal-deep);
  --teal-dark:    var(--wp--preset--color--mp-teal-dark);
  --teal-tint:    var(--wp--preset--color--mp-teal-tint);
  --crimson:      var(--wp--preset--color--mp-crimson);
  --crimson-dark: var(--wp--preset--color--mp-crimson-dark);
  --gold:         var(--wp--preset--color--mp-gold);
  --gold-dark:    var(--wp--preset--color--mp-gold-dark);
  --ink:          var(--wp--preset--color--mp-ink);
  --graphite:     var(--wp--preset--color--mp-graphite);
  --slate:        var(--wp--preset--color--mp-slate);
  --mist:         var(--wp--preset--color--mp-mist);
  --line:         var(--wp--preset--color--mp-line);
  --off:          var(--wp--preset--color--mp-off);
  --cream:        var(--wp--preset--color--mp-cream);
  --cream-deep:   var(--wp--preset--color--mp-cream-deep);
  /* fonts -> theme.json presets */
  --serif: var(--wp--preset--font-family--mp-serif);
  --sans:  var(--wp--preset--font-family--mp-sans);
  /* not exposed in Styles - kept literal */
  --shadow-sm: 0 10px 30px -18px rgba(0,0,0,.35);
  --shadow: 0 24px 60px -30px rgba(13,110,119,.35);
  /* semantic aliases derive from the above */
  --c-research: var(--teal-deep);
  --c-dialogues: var(--gold-dark);
  --c-mp: var(--crimson);
  --c-topics: var(--teal);
  --c-interview: var(--ink);
  --c-home: var(--teal-deep);
  /* layout tokens (were in the design's :root; not exposed to Global Styles) */
  --maxw: 1160px;
  --gap: clamp(1.5rem, 4vw, 4rem);
  --radius: 4px;
  --paper: var(--wp--preset--color--mp-white);
  --terracotta: var(--crimson);
}


* { box-sizing: border-box; }

body { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

img { max-width: 100%; display: block; }

a { color: var(--teal-deep); text-decoration: none; }

a:hover { text-decoration: underline; }


/* Typo des titres (police, poids, tailles, interligne, interlettrage, couleur)
   pilotee par theme.json -> onglet « Styles » de l'editeur (modifiable sans code).
   On ne garde ici que la marge basse, non exposee dans l'UI. */
h1, h2, h3, h4 { margin: 0 0 .5em; }

p { margin: 0 0 1.1em; }

.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--slate); line-height: 1.6; }


.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }

.narrow { max-width: 780px; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }


/* Micro-label */
.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--teal-deep);
  margin: 0 0 1.1rem;
}

.eyebrow.crimson { color: var(--crimson); }

.eyebrow.gold { color: var(--gold); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 500; font-size: .98rem;
  padding: .85em 1.6em; border-radius: 40px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all .22s ease; text-decoration: none;
}

.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -12px rgba(42,148,150,.8); }

.btn-primary:hover { background: var(--teal-dark); }

.btn-ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal); }

.btn-ghost:hover { background: var(--teal-tint); }

.btn-warm { background: var(--crimson); color: #fff; box-shadow: 0 10px 24px -12px rgba(153,25,25,.7); }

.btn-warm:hover { background: var(--crimson-dark); }

.btn-dark { background: var(--ink); color: #fff; }

.btn-dark:hover { background: #000; }

.btn-lg { font-size: 1.05rem; padding: 1em 1.9em; }

.link-arrow { font-weight: 500; color: var(--teal-deep); display: inline-flex; align-items: center; gap: .4em; }

.link-arrow::after { content: "→"; transition: transform .2s; }

.link-arrow:hover { text-decoration: none; }

.link-arrow:hover::after { transform: translateX(4px); }


/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: grid; grid-template-columns: auto auto; grid-template-areas: "dot name" "dot tag"; column-gap: .55rem; row-gap: 1px; align-items: center; text-decoration: none; }

.brand:hover { text-decoration: none; }

.brand .dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); display: inline-block; align-self: center; }

.brand .brand-name { grid-area: name; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.05; }

.brand small { grid-area: tag; font-family: var(--sans); font-size: .7rem; font-weight: 400; letter-spacing: .01em; color: var(--mist); line-height: 1.2; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-family: var(--sans); font-size: .92rem; }

.nav-links a { color: var(--graphite); font-weight: 450; }

.nav-links a:hover { color: var(--teal-deep); text-decoration: none; }

.nav-links a.active { color: var(--teal-deep); font-weight: 600; }
@media (max-width: 860px) {
 .nav-links a:not(.btn) { display:none; }
}


/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--off) 100%); }

.hero-screen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(42,148,150,.16), transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(201,154,63,.12), transparent 60%);
}

.hero .wrap { position: relative; z-index: 1; padding-top: clamp(3rem,7vw,5.5rem); padding-bottom: clamp(3rem,7vw,5.5rem); }

.hero h1 { max-width: 15ch; }

.hero .lead { max-width: 46ch; margin-bottom: 2rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.hero-tertiary { margin-top: 1.6rem; font-size: .95rem; color: var(--slate); }


/* ---------- Authority strip ---------- */
.authority { background: var(--ink); color: #d9d9d9; }

.authority .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: clamp(2.2rem,4vw,3rem) clamp(1.2rem,4vw,2.5rem); }

.authority .stat { }

.authority .num { font-family: var(--serif); font-size: 2.4rem; color: #fff; line-height: 1; margin-bottom: .35rem; }

.authority .num .accent { color: var(--teal); }

.authority .label { font-size: .82rem; color: #9a9a9a; line-height: 1.45; }
@media (max-width: 760px) {
 .authority .wrap { grid-template-columns: repeat(2,1fr); }
}


/* ---------- Two doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 820px) {
 .doors { grid-template-columns: 1fr; }
}

.door {
  position: relative; padding: clamp(1.8rem,3vw,2.6rem); border-radius: 10px;
  border: 1px solid var(--line); overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; min-height: 320px;
}

.door:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }

.door-research { background: linear-gradient(160deg, #fff, var(--teal-tint)); }

.door-mp { background: linear-gradient(160deg, #fff, #f6efe6); }

.door .eyebrow { margin-bottom: .8rem; }

.door h3 { color: var(--ink); }

.door p { color: var(--slate); flex: 1; }

.door .door-foot { margin-top: 1.2rem; }


/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 820px) {
 .pillars { grid-template-columns: 1fr; }
}

.pillar { padding: 1.8rem; border-radius: 10px; background: var(--off); border: 1px solid var(--line); transition: .2s; }

.pillar:hover { border-color: var(--teal); background: #fff; box-shadow: var(--shadow-sm); }

.pillar .glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--teal-tint); color: var(--teal-deep); }

.pillar h3 { font-size: 1.5rem; margin-bottom: .5rem; }

.pillar p { font-size: .96rem; color: var(--slate); }


/* ---------- Section heading ---------- */
.sec-head { max-width: 640px; margin-bottom: 2.6rem; }

.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }


/* ---------- Portrait / narrative ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) {
 .split { grid-template-columns: 1fr; }
}

.portrait {
  aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--teal-deep), var(--ink) 70%);
  display: grid; place-items: center; color: rgba(255,255,255,.35);
  box-shadow: var(--shadow);
}

.portrait .initials { font-family: var(--serif); font-size: 5rem; letter-spacing: .05em; }

.portrait::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 20%, rgba(42,148,150,.4), transparent 60%); }


/* ---------- Bands / alt backgrounds ---------- */
.band-cream { background: var(--cream); }

.band-teal { background: linear-gradient(160deg, var(--teal-deep), #0a565e); color: #eaf6f6; }

.band-teal h2, .band-teal h3 { color: #fff; }

.band-teal .lead { color: #cfeaea; }

.band-dark { background: var(--ink); color: #d9d9d9; }

.band-dark h2, .band-dark h3 { color: #fff; }


/* ---------- Bridge modes (Understand/Encounter/...) ---------- */
.modes { display: grid; gap: 1rem; }

.mode {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: start;
  padding: 1.8rem; border-radius: 10px; background: #fff; border: 1px solid var(--line);
}
@media (max-width: 720px) {
 .mode { grid-template-columns: 1fr; gap: .6rem; }
}

.mode-tag { font-family: var(--serif); font-size: 1.5rem; color: var(--teal-deep); }

.mode-tag small { display:block; font-family: var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--mist); margin-top:.3rem; }

.mode p { color: var(--slate); margin: 0; }

.mode .mini-cta { margin-top: .9rem; }


/* ---------- Cards / dialogues archive ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 900px) {
 .grid-cards { grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 620px) {
 .grid-cards { grid-template-columns: 1fr;}
}

.card { border-radius: 10px; overflow: hidden; background:#fff; border:1px solid var(--line); transition:.22s; display:flex; flex-direction:column; }

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration:none; }

.card-media { aspect-ratio: 16/10; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); position: relative; display:grid; place-items:center; }

.card-media.v2 { background: linear-gradient(150deg, #4a7c7d, var(--ink)); }

.card-media.v3 { background: linear-gradient(150deg, var(--crimson), var(--crimson-dark)); }

.card-media .play { width: 52px; height:52px; border-radius:50%; background: rgba(255,255,255,.9); display:grid; place-items:center; color: var(--teal-deep); }

.card-media .dur { position:absolute; bottom:10px; right:10px; background: rgba(0,0,0,.6); color:#fff; font-size:.72rem; padding:.2em .6em; border-radius:4px; }

.card-body { padding: 1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }

.card-body .tradition { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom:.5rem; }

.card-body h3 { font-size:1.35rem; margin-bottom:.4rem; color: var(--ink); }

.card-body p { font-size:.92rem; color: var(--slate); flex:1; }

.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }

.tag { font-size:.72rem; padding:.25em .7em; border-radius:20px; background: var(--teal-tint); color: var(--teal-deep); }


/* ---------- Pricing tiers ---------- */
.tiers { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; align-items:stretch; }
@media (max-width: 860px) {
 .tiers { grid-template-columns:1fr; }
}

.tier { border:1px solid var(--line); border-radius:12px; padding:2rem 1.8rem; background:#fff; display:flex; flex-direction:column; }

.tier.featured { border-color: var(--teal); box-shadow: var(--shadow); position:relative; }

.tier.featured::before { content:"Most chosen"; position:absolute; top:-12px; left:1.8rem; background:var(--teal); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.3em .9em; border-radius:20px; }

.tier .tname { font-family:var(--serif); font-size:1.5rem; color:var(--ink); margin-bottom:.3rem; }

.tier .price { font-family:var(--serif); font-size:2.6rem; color:var(--teal-deep); line-height:1; margin:.4rem 0; }

.tier .price small { font-family:var(--sans); font-size:.85rem; color:var(--mist); font-weight:400; }

.tier .tmeta { font-size:.9rem; color:var(--slate); margin-bottom:1.2rem; }

.tier ul { list-style:none; padding:0; margin:0 0 1.6rem; font-size:.94rem; color:var(--slate); flex:1; }

.tier li { padding:.4em 0 .4em 1.6em; position:relative; }

.tier li::before { content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:600; }

.tier .btn { width:100%; justify-content:center; }


/* ---------- Interest / newsletter tracks ---------- */
.tracks { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1.8rem 0; }
@media (max-width: 720px) {
 .tracks { grid-template-columns:1fr; }
}

.track { border:1.5px solid var(--line); border-radius:10px; padding:1.3rem; cursor:pointer; transition:.18s; background:#fff; }

.track:hover, .track.sel { border-color:var(--teal); background:var(--teal-tint); }

.track h4 { font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink); margin:0 0 .3rem; }

.track p { font-size:.85rem; color:var(--slate); margin:0; }

.track .check { width:20px;height:20px;border-radius:50%;border:2px solid var(--line); display:inline-block; float:right; }

.track.sel .check { background:var(--teal); border-color:var(--teal); }


.field { display:flex; gap:.6rem; flex-wrap:wrap; max-width:520px; }

.field input { flex:1; min-width:220px; padding:.85em 1.1em; border:1.5px solid var(--line); border-radius:40px; font-family:var(--sans); font-size:1rem; }

.field input:focus { outline:none; border-color:var(--teal); }

.consent { font-size:.78rem; color:var(--mist); margin-top:.9rem; max-width:520px; }


/* ---------- Callout / disclaimer ---------- */
.callout { border-left:3px solid var(--teal); background:var(--teal-tint); padding:1.4rem 1.6rem; border-radius:0 8px 8px 0; font-size:.96rem; color:var(--graphite); }

.callout.warm { border-left-color:var(--terracotta); background:#f6efe6; }

.disclaimer { font-size:.86rem; color:var(--mist); border:1px dashed var(--line); padding:1.1rem 1.3rem; border-radius:8px; }


/* ---------- Steps ---------- */
.steps { counter-reset: s; display:grid; gap:1.1rem; }

.step { display:grid; grid-template-columns:52px 1fr; gap:1.2rem; align-items:start; }

.step .n { counter-increment:s; width:52px;height:52px;border-radius:50%; background:var(--teal-tint); color:var(--teal-deep); font-family:var(--serif); font-size:1.5rem; display:grid; place-items:center; }

.step .n::before { content: counter(s); }

.step h4 { font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin:.2rem 0 .3rem; }

.step p { font-size:.94rem; color:var(--slate); margin:0; }


/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color:#b8b8b8; padding: clamp(3rem,6vw,4.5rem) 0 2rem; font-size:.92rem; }

.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); margin-bottom:2.5rem; }
@media (max-width: 780px) {
 .footer-grid { grid-template-columns:1fr 1fr; }
}

.site-footer h5 { font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1rem; }

.site-footer a { color:#b8b8b8; display:block; padding:.28em 0; }

.site-footer a:hover { color:var(--teal); text-decoration:none; }

.site-footer .brand { color:#fff; margin-bottom:.8rem; display:grid; grid-template-columns:auto auto; grid-template-areas:"dot name" "dot tag"; column-gap:.55rem; row-gap:2px; align-items:center; width:max-content; }

.site-footer .brand .brand-name { color:#fff; }

.site-footer .brand small { color:#9a9a9a; }

.footer-note { color:#8a8a8a; max-width:34ch; font-size:.86rem; }

.footer-bottom { border-top:1px solid #333; padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:#7a7a7a; font-size:.82rem; }


/* utilities */
.center { text-align:center; }

.mt0 { margin-top:0; }
 .mb0 { margin-bottom:0; }

.divider { height:1px; background:var(--line); border:0; margin:0; }

.pill { display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.06em; padding:.35em .9em; border-radius:20px; background:var(--teal-tint); color:var(--teal-deep); }

.pill.free { background:#eef7ee; color:#2e7d32; }

.pill.crimson { background:#f7ebeb; color:var(--crimson); }


/* ============================================================
   V2 — High-contrast, per-strand navigation
   Each strand owns a colour; the nav bar visibly changes
   between the different parts of the site.
   ============================================================ */
:root {
  --c-research:  var(--teal-deep);   /* teal   */
  --c-dialogues: var(--gold-dark);   /* gold   */
  --c-mp:        var(--crimson);      /* crimson */
  --c-topics:    var(--teal);         /* teal   */
  --c-interview: var(--ink);          /* ink    */
  --c-home:      var(--teal-deep);
}

/* per-page strand accent driving --nav */
body.strand-research { --nav: var(--c-research); }

body.strand-dialogues { --nav: var(--c-dialogues); }

body.strand-mp { --nav: var(--c-mp); }

body.strand-topics { --nav: var(--c-topics); }

body.strand-interview { --nav: var(--c-interview); }

body.strand-home { --nav: var(--c-home); }


/* header: bold strand-coloured top rule + faint strand tint */
.site-header {
  border-top: 5px solid var(--nav, var(--teal));
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.site-header::before {
  content:""; position:absolute; inset:0 0 auto 0; height:100%;
  background: var(--nav, var(--teal)); opacity:.045; pointer-events:none;
}

.site-header { position: sticky; }

.nav { position: relative; z-index:1; }

.brand .dot { background: var(--nav, var(--teal)); transition: background .2s; }


/* menu items coloured by their destination strand = a legend of the worlds */
.nav-links a[href$="/research/"] { color: var(--c-research); }

.nav-links a[href$="/dialogues/"] { color: var(--c-dialogues); }

.nav-links a[href$="/master-peace/"] { color: var(--c-mp); }

.nav-links a[href$="/experience-of-being/"] { color: var(--c-topics); }

.nav-links a:not(.btn) {
  position: relative; font-weight: 550; padding: .3em 0;
}

.nav-links a:not(.btn)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background: currentColor; transition: right .22s ease;
}

.nav-links a:not(.btn):hover { text-decoration:none; }

.nav-links a:not(.btn):hover::after { right:0; }


/* active page = solid filled pill in the strand colour */
.nav-links a:not(.btn).active {
  color:#fff !important; background: var(--nav);
  padding:.4em 1.05em; border-radius:22px; font-weight:600;
}

.nav-links a:not(.btn).active::after { display:none; }


/* the Personal-Interview CTA carries the ink strand */
.nav-links a.btn.btn-ghost, .nav-links a.btn.btn-warm {
  border-color: var(--c-interview); color: var(--c-interview); background: transparent;
}

.nav-links a.btn.btn-ghost:hover, .nav-links a.btn.btn-warm:hover { background: var(--c-interview); color:#fff; }

.nav-links a.btn.active { background: var(--c-interview); color:#fff; border-color: var(--c-interview); }
/* ---- Type sizes exposed as variables so the Appearance settings can override them
   (default = the original clamp values via the var() fallback). ---- */
h1{ font-size: var(--fs-h1, clamp(2.6rem, 6vw, 4.4rem)); }
h2{ font-size: var(--fs-h2, clamp(2rem, 4vw, 3rem)); }
h3{ font-size: var(--fs-h3, clamp(1.4rem, 2.4vw, 1.9rem)); }


/* ---- Bridge: native core/button rendered as an MP .btn (pricing tiers) ---- */
.tier .wp-block-buttons{ display:block; margin:0; }
.wp-block-button.mp-btn{ width:100%; }
.wp-block-button.mp-btn > .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em; width:100%;
  font-family:var(--sans); font-weight:500; font-size:.98rem;
  padding:.85em 1.6em; border-radius:40px; border:1.5px solid transparent;
  transition:all .22s ease; text-decoration:none; box-shadow:none;
}
.wp-block-button.mp-btn.primary > .wp-block-button__link{ background:var(--teal); color:#fff; }
.wp-block-button.mp-btn.primary > .wp-block-button__link:hover{ background:var(--teal-dark); }
.wp-block-button.mp-btn.warm > .wp-block-button__link{ background:var(--crimson); color:#fff; }
.wp-block-button.mp-btn.warm > .wp-block-button__link:hover{ background:var(--crimson-dark); }
.wp-block-button.mp-btn.ghost > .wp-block-button__link{ background:transparent; color:var(--teal-deep); border-color:var(--teal); }
.wp-block-button.mp-btn.ghost > .wp-block-button__link:hover{ background:var(--teal-tint); }
.wp-block-button.mp-btn.dark > .wp-block-button__link{ background:var(--ink); color:#fff; }

/* ---- Cosmetic styles moved out of markup so those blocks could go native ---- */
body.strand-research  .hero{ background:linear-gradient(180deg,#fff,var(--teal-tint)); }
body.strand-dialogues .hero{ background:linear-gradient(180deg,#fff,#f4f2ec); }
body.strand-mp        .hero{ background:linear-gradient(180deg,#fff,#f6efe6); }
.authority{ padding:0; }
.pillar{ text-decoration:none; }
.pillar .link-arrow{ margin-top:1rem; display:inline-flex; }
.modes .mode:nth-child(2){ background:var(--teal-tint); border-color:transparent; }
.modes .mode:nth-child(4){ background:#f6efe6; border-color:transparent; }
.modes .mode:nth-child(4) .mode-tag{ color:var(--crimson); }

/* ---- HubSpot forms, styled to match the design system ---- */
.mp-hsform{ max-width:560px; margin:1.6rem auto 0; }
.mp-hsform .hs-form-field{ margin-bottom:.9rem; text-align:left; }
.mp-hsform label{ font-size:.9rem; font-weight:500; }
.mp-hsform .hs-input,
.mp-hsform input[type=email],
.mp-hsform input[type=text]{ width:100%; padding:.85em 1.1em; border:1.5px solid var(--line); border-radius:12px; font-family:var(--sans); font-size:1rem; background:#fff; box-sizing:border-box; }
.mp-hsform .hs-input:focus{ outline:none; border-color:var(--teal); }
.mp-hsform .hs-button,
.mp-hsform input[type=submit]{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:500; font-size:1rem; padding:.9em 1.8em; border-radius:40px; border:0; background:var(--teal); color:#fff; cursor:pointer; transition:.2s; margin-top:.4rem; }
.mp-hsform .hs-button:hover{ background:var(--teal-dark); }
.mp-hsform .hs-error-msgs{ list-style:none; padding:0; margin:.3rem 0 0; color:var(--crimson); font-size:.85rem; }
/* interview form sits on the dark teal band */
body.strand-interview .mp-hsform label,
body.strand-interview .mp-hsform .hs-richtext,
body.strand-interview .mp-hsform .hs-form-field{ color:#eaf6f6; }
body.strand-interview .mp-hsform .hs-button,
body.strand-interview .mp-hsform input[type=submit]{ background:var(--ink); }

/* ---- Calendly embed framed as a white card (sits on the dark interview band) ---- */
.mp-calendly{ max-width:840px; margin:1.8rem auto 0; background:#fff; border-radius:14px; padding:.4rem; box-shadow:var(--shadow); overflow:hidden; }
.mp-calendly .calendly-inline-widget{ min-width:320px; }

/* ============================================================
   Global header/footer as template parts + WordPress Navigation menu
   ============================================================ */
/* kill stray vertical spacing so header/content/footer sit flush */
body{ margin-top:0 !important; margin-bottom:0 !important; }
.mp-header, .mp-footer{ margin:0 !important; }
.mp-header .wrap.nav{ min-height:72px; }

/* header shell (the .site-header base is scoped .site-header and the header
   IS the element, so restate the shell directly on .mp-header) */
.mp-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:5px solid var(--teal-deep);
  border-bottom:1px solid var(--line);
}
.mp-header .nav-right{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.4rem); flex-wrap:wrap; }

/* WordPress Navigation block styled like the mock nav */
.mp-header .wp-block-navigation{ font-family:var(--sans); font-size:.9rem; }
.mp-header .wp-block-navigation .wp-block-navigation__container{ gap:clamp(.5rem,1.4vw,1.3rem); align-items:center; }
.mp-header .wp-block-navigation-item{ margin:0; }
.mp-header .wp-block-navigation-item__content{ color:var(--graphite); font-weight:550; text-decoration:none; padding:.35em 0; }
.mp-header .wp-block-navigation-item__content:hover{ color:var(--teal-deep); }
/* per-destination colour legend */
.mp-header a[href*="/research/"]{ color:var(--teal-deep) !important; }
.mp-header a[href*="/dialogues/"]{ color:var(--gold-dark) !important; }
.mp-header a[href*="/master-peace"]{ color:var(--crimson) !important; }
.mp-header .nav-blog a, .mp-header a[href*="/blog/"]{ color:var(--teal) !important; }
.mp-header .nav-about a, .mp-header a[href*="/about/"]{ color:var(--ink) !important; }
/* current page = keep its colour + a visible underline (so you can locate yourself) */
.mp-header a[aria-current="page"],
.mp-header .current-menu-item > .wp-block-navigation-item__content,
.mp-header .current_page_item > .wp-block-navigation-item__content{
  text-decoration: underline !important; text-decoration-thickness:2px; text-underline-offset:6px; font-weight:700;
}
/* Fallback for custom-link menus (WP doesn't mark custom links current):
   drive the underline from the body page-id class. IDs are per install —
   adjust if your page IDs differ. */
body.page-id-11 .mp-header .nav-home a, body.page-id-11 .mp-header .nav-links a[href="/"],
body.page-id-14 .mp-header a[href*="/research/"],
body.page-id-16 .mp-header a[href*="/master-peace/"],
body.page-id-20 .mp-header a[href*="/dialogues/"],
body.page-id-22 .mp-header a[href*="/experience-of-being/"],
body.page-id-24 .mp-header a[href*="/personal-interview/"],
body.page-id-51 .mp-header a[href*="/about/"],
body.page-id-52 .mp-header a[href*="/blog/"]{
  text-decoration: underline !important; text-decoration-thickness:2px; text-underline-offset:6px; font-weight:700;
}
/* the brand/logo is never underlined */
.mp-header a.brand, .mp-header a.brand:hover{ text-decoration:none !important; }
/* the Personal-Interview CTA (ink ghost pill) */
.mp-header .nav-cta{ white-space:nowrap; border-color:var(--ink); color:var(--ink); }
.mp-header .nav-cta:hover{ background:var(--ink); color:#fff; }

/* ---- No gap between header and content; tighter hero top ---- */
.mp-header{ margin-bottom:0 !important; }
.mp-header + *{ margin-top:0 !important; }
.hero{ margin-top:0 !important; padding-top: clamp(1.4rem, 3.5vw, 2.6rem) !important; }

/* ---- Hero: full width, two columns (text + media slot) ---- */
.hero .wrap.hero-grid{
  max-width:100%;
  padding: clamp(1.4rem,3vw,2.4rem) clamp(1.6rem,7vw,7rem) clamp(2.4rem,5vw,3.8rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:900px){ .hero .wrap.hero-grid{ grid-template-columns:1fr; } }
.hero-copy h1{ margin-top:.2rem; }
.hero-media{
  position:relative; aspect-ratio:4/3; min-height:280px; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,var(--teal-tint),#f6efe6); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hero-media > *{ width:100%; margin:0; }
.hero-media img,
.hero-media video,
.hero-media .wp-block-video{ width:100%; height:100%; object-fit:cover; }
.hero-media-hint{ font-family:var(--sans); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); text-align:center; }

/* ---- Hero video (Home + Call of Being): autoplay/muted/loop, 16:9, mobile headline overlay ---- */
.hero-media.has-hero-video{ aspect-ratio:16/9; min-height:0; }
.hero-media.has-hero-video video.hero-vid{ width:100%; height:100%; object-fit:cover; display:block; background:#0d1f22; }
.hero-vid-cap{ display:none; }
@media (min-width:901px){
  /* give the video column a touch more width than the 4/3 image used */
  .hero .wrap.hero-grid.hero-grid-vid{ grid-template-columns:1fr 1.12fr; }
}
@media (max-width:900px){
  /* video full-bleed on top; copy below */
  .hero .wrap.hero-grid .hero-media.has-hero-video{ order:-1; border-radius:12px; }
  /* Home: the h1 becomes the video overlay, eyebrow stays below */
  .hero-grid-vid:not(.gv-cob):not(.gv-plain) .hero-copy > h1.wp-block-heading{ display:none; }
  /* Call of Being: the eyebrow ("The Call of Being") becomes the overlay, h1 stays below */
  .hero-grid-vid.gv-cob .hero-copy > .eyebrow{ display:none; }
  .hero-vid-cap{ display:flex; position:absolute; inset:0; align-items:flex-end;
    padding:1.1rem 1.1rem 1rem;
    background:linear-gradient(to top, rgba(10,24,26,.72) 0%, rgba(10,24,26,.18) 48%, rgba(10,24,26,0) 72%); }
  .hero-vid-cap span{ color:#fff; font-family:var(--serif); font-weight:600; line-height:1.08;
    font-size:clamp(1.55rem,6.4vw,2.1rem); text-shadow:0 1px 12px rgba(0,0,0,.28); max-width:18ch; }
  .hero-vid-cap.cap-gold span{ color:var(--gold); }
}
/* Phone: hero video edge-to-edge (full screen width); overlay + copy unchanged */
@media (max-width:600px){
  .hero-grid-vid .hero-media.has-hero-video{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    border-radius:0;
  }
}

/* ---- Inline steps: run-in heading ("Begin: text…"), sentence wraps to the margin ---- */
.wp-block-columns.inline-steps{ display:block !important; max-width:820px; margin-inline:auto; }
.inline-steps .step{ display:block !important; width:auto !important; margin:0 0 .8rem !important; padding:0; }
.inline-steps .step:last-child{ margin-bottom:0 !important; }
.inline-steps .step > .n{ display:none !important; }
.inline-steps .step > h4{ display:inline; margin:0; font-family:var(--sans); font-weight:700;
  font-size:1rem; color:var(--ink); line-height:1.5; }
.inline-steps .step > h4::after{ content:":"; }
.inline-steps .step > p{ display:inline; margin:0; color:var(--slate); line-height:1.5; font-size:1rem; }

/* ---- Personal Interview "Yes / Not" — two matched boxes, top-aligned, even spacing ---- */
.split.yesno{ align-items:start; }
.split.yesno .whatbox{ border:1px solid var(--line); border-radius:10px;
  padding:clamp(1.4rem,2.6vw,1.9rem); background:#fff; }
.split.yesno .whatbox > .eyebrow{ margin-top:0; }
.split.yesno .whatbox > h2{ margin-top:.55rem; margin-bottom:1rem; }
.split.yesno .whatbox > p,
.split.yesno .whatbox .dis-body{ margin:0 0 .95rem; }
.split.yesno .whatbox > p:last-child,
.split.yesno .whatbox .dis-body:last-child{ margin-bottom:0; }
/* Personal Interview: the two boxes equal in width */
.wp-block-columns.split.yesno{ grid-template-columns:1fr 1fr; }
@media (max-width:768px){ .wp-block-columns.split.yesno{ grid-template-columns:1fr; } }

/* ---- Testimonials ("In participants' words"): quote on top, photo (1/3) + source (2/3) below ---- */
.tmony{ display:grid; grid-template-columns:1fr 2fr; column-gap:1.3rem; row-gap:1rem;
  align-items:start; grid-template-areas:"quote quote" "photo src"; }
.tmony > figure.wp-block-image{ grid-area:photo; margin:0; align-self:start; }
.tmony > figure.wp-block-image img{ width:100%; height:auto; max-width:150px; border-radius:8px; display:block; }
.tmony > p:not(.src){ grid-area:quote; }
.tmony > .src{ grid-area:src; align-self:center; }

/* ---- Lectures & discussions: video cards (square thumbnail + caption), expandable ---- */
.wp-block-columns.lec-cards{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:.6rem; }
@media (max-width:900px){ .wp-block-columns.lec-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .wp-block-columns.lec-cards{ grid-template-columns:1fr; } }
.lec-card{ display:flex; flex-direction:column; }
.lec-card .lec-thumb{ position:relative; display:block; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:var(--teal-tint); box-shadow:var(--shadow-sm); }
.lec-card .lec-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.lec-card .lec-thumb:hover img{ transform:scale(1.04); }
.lec-card a.lec-thumb::after{ content:""; position:absolute; left:50%; top:50%; width:58px; height:58px;
  transform:translate(-50%,-50%); border-radius:50%; background:rgba(13,31,34,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:55% 50%; transition:.2s; }
.lec-card a.lec-thumb:hover::after{ background:rgba(13,31,34,.75); }
.lec-card .lec-text{ margin:.85rem 0 0; font-size:1rem; color:var(--slate); line-height:1.5; }
.lec-card .lec-text strong{ color:var(--ink); }

/* ---- Newsletter without tracks: center the field + consent under the lead ---- */
.mp-subscribe.mp-subscribe--simple{ max-width:560px; margin-inline:auto; }
.mp-subscribe--simple .field{ max-width:100%; justify-content:center; }
.mp-subscribe--simple .consent{ text-align:center; margin-left:auto; margin-right:auto; }
.mp-subscribe--simple .mp-subscribe-msg{ margin-left:auto; margin-right:auto; }

/* ---- Personal Interview hero video: starts muted, with an unmute toggle ---- */
.hero-vid-sound{ position:absolute; right:.7rem; bottom:.7rem; z-index:3;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:rgba(13,31,34,.55); color:#fff;
  backdrop-filter:blur(2px); transition:.2s; }
.hero-vid-sound:hover{ background:rgba(13,31,34,.8); }
.hero-vid-sound svg{ width:20px; height:20px; display:block; fill:currentColor; }
.hero-vid-sound .icon-on{ display:none; }
.hero-vid-sound.is-on .icon-on{ display:block; }
.hero-vid-sound.is-on .icon-off{ display:none; }

/* ---- Blog: WordPress Query Loop styled as MP cards ---- */
.mp-bloglist{ margin-top:1rem; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.5rem; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; transition:.22s; display:flex; flex-direction:column; height:100%; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.blog-media{ margin:0; aspect-ratio:16/10; overflow:hidden; }
.blog-media img{ width:100%; height:100%; object-fit:cover; }
.blog-body{ padding:1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.blog-date{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:.5rem; }
.blog-card .wp-block-post-title{ font-size:1.35rem; margin:0 0 .5rem; line-height:1.15; }
.blog-card .wp-block-post-title a{ color:var(--ink); text-decoration:none; }
.blog-card .wp-block-post-title a:hover{ color:var(--teal-deep); }
.blog-card .wp-block-post-excerpt{ font-size:.94rem; color:var(--slate); flex:1; margin:0; }
.blog-card .wp-block-post-excerpt__more-link{ color:var(--teal-deep); font-weight:500; display:inline-block; margin-top:.6rem; text-decoration:none; }

/* ---- Research: four lines of inquiry (4-up) + academic profile links ---- */
.pillars.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .pillars.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pillars.four{ grid-template-columns:1fr; } }
.acad-links{ margin-top:1.2rem; font-size:1.02rem; color:var(--mist); }
.acad-links a{ color:var(--teal-deep); font-weight:500; }

/* ---- Plain WordPress buttons (e.g. the About strand cards) → compact teal pill, white text, one line ---- */
.pillar .wp-block-buttons{ width:100%; }
.wp-block-button:not(.mp-btn){ width:auto !important; }
.wp-block-button:not(.mp-btn) > .wp-block-button__link{
  background: var(--teal) !important; color:#fff !important;
  border-radius:40px; font-family:var(--sans); font-weight:500; font-size:.85rem;
  padding:.5em 1.2em; border:0; white-space:nowrap; width:auto;
}
.wp-block-button:not(.mp-btn) > .wp-block-button__link:hover{ background: var(--teal-dark) !important; }
/* equal-height & equal-width strand cards, button pinned to the bottom.
   Two things are BOTH required for true equality on the live site (verified via CDP):
   1) height:100% so each card fills its (definite) grid-row track. align-items:stretch
      alone is defeated by the button's margin-top:auto — the auto margin makes the
      flex height indefinite, creating a circular sizing that inflates the tallest card.
   2) Kill WordPress's flow-layout blockGap. The core rule
      `:root :where(.is-layout-flow) > *{ margin-block-start:1.2rem }` adds ~20px of top
      margin to every card EXCEPT the first (the first-child reset zeroes card 1 only),
      which pushes cards 2..N down by 20px inside their grid cells → misaligned tops.
      Our `.pillars > *` (specificity 0,2,0) beats it (0,1,0), no !important needed. */
.pillars{ align-items:stretch; }
.pillars > *{ margin-top:0; margin-block-start:0; }
.pillar{ display:flex; flex-direction:column; min-width:0; height:100%; }
.pillar .wp-block-buttons{ margin-top:auto; }
/* exactly 4 strand cards → grid becomes 4-up (5+ stays 3-up) */
.pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:1fr; } }

/* ---- Full-bleed colour bands must touch: kill the WP flow blockGap that leaks a
   ~19px white strip between top-level sections (same is-layout-flow rule as the cards).
   `section` (0,1,1) beats `:root :where(.is-layout-flow) > *` (0,1,0). ---- */
section{ margin-top:0; margin-block-start:0; }

/* ---- Top bar: social (left) + language switcher (right). Reused at the very top of
   the header and inside the footer via the [mp_topbar] shortcode. ---- */
.mp-topbar{ background:var(--ink,#1c1c1c); color:#fff; font-family:var(--sans); font-size:.8rem; }
.mp-topbar .mp-topbar-inner{ max-width:1240px; margin:0 auto; padding:.45rem clamp(1rem,4vw,2.4rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mp-topbar-social{ display:flex; align-items:center; gap:.9rem; }
.mp-topbar-social a{ color:#fff; display:inline-flex; opacity:.82; transition:.15s; text-decoration:none; }
.mp-topbar-social a:hover{ opacity:1; color:var(--teal-tint,#d9efec); }
.mp-topbar-social svg{ width:18px; height:18px; fill:currentColor; display:block; }
/* Language switcher = country flags (Polylang show_flags). No text → no hover/overlap. */
.mp-topbar-lang{ display:flex; align-items:center; gap:.5rem; }
.mp-topbar-lang ul{ list-style:none; display:flex; align-items:center; gap:.5rem; margin:0; padding:0; }
.mp-topbar-lang li{ margin:0; display:flex; }
.mp-topbar-lang a{ display:flex; align-items:center; line-height:0; padding:3px; border-radius:4px;
  opacity:.55; transition:opacity .15s ease, box-shadow .15s ease; text-decoration:none; }
.mp-topbar-lang a:hover{ opacity:1; }
.mp-topbar-lang img{ display:block; width:19px !important; height:auto !important; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.mp-topbar-lang .current-lang > a{ opacity:1; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.mp-topbar-lang .mp-lang-current{ opacity:1; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#fff; }
/* the core/shortcode wrapper must not add spacing or constrain width */
.wp-block-shortcode:has(.mp-topbar), .mp-footer .wp-block-shortcode:has(.mp-topbar){ margin:0; padding:0; }
/* footer variant: the .mp-footer WRAPPER has no background of its own (the dark fill
   lives on the inner .site-footer), so a transparent bar would show the white page and
   render white-on-white. Keep the bar's dark fill (inherited) + a hairline divider. */
.mp-footer{ background:var(--ink,#1c1c1c); }
.mp-footer .mp-topbar{ border-top:1px solid rgba(255,255,255,.14); }

/* ---- Reusable 2-column "media + text" row for the editor. Add "mp-media-row" as the
   Columns block's Additional CSS class (Block → Advanced) to get vertical centring, a
   comfortable gap, and the site's rounded/shadowed media treatment. The !important on
   align-items is required because core ships `.wp-block-columns{align-items:normal!important}`. ---- */
.mp-media-row.wp-block-columns{ align-items:center !important; gap:clamp(1.6rem,4vw,3.6rem); }
.mp-media-row .wp-block-image{ margin:0; }
.mp-media-row .wp-block-image img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--shadow); }
@media (max-width:781px){ .mp-media-row.wp-block-columns{ gap:1.6rem; } }

/* ---- Portrait photo shown IN FULL (whole head, no crop). Add "mp-photo-full" to the
   Image block. Inside a hero media slot we ONLY drop the fixed 4/3 crop box so the
   picture keeps its natural height — the tinted gradient background + shadow + rounded
   corners of .hero-media are deliberately kept (the cut-out PNG shows the tint behind it). ---- */
.hero-media:has(.mp-photo-full){ aspect-ratio:auto; }
.mp-photo-full{ margin:0; }
.mp-photo-full img{ width:100%; height:auto; display:block; object-fit:contain; border-radius:14px; }

/* ---- Subscription "tracks" selector driven by real radio inputs (accessible + the
   selected card highlights). Hides the raw radio; the card border/tint shows the choice. ---- */
.track{ position:relative; display:block; }
.track input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.track:has(input[type="radio"]:checked){ border-color:var(--teal); background:var(--teal-tint); }
.track:focus-within{ outline:2px solid var(--teal); outline-offset:2px; }
/* visible radio indicator (top-right dot) — pure CSS, no markup change: empty ring
   when unselected, solid teal when the card's radio is checked. */
.track::after{ content:""; position:absolute; top:1.5rem; right:1.4rem; width:20px; height:20px; border-radius:50%; border:2px solid var(--mist); background:#fff; box-sizing:border-box; transition:.15s; }
.track:has(input[type="radio"]:checked)::after{ background:var(--teal); border-color:var(--teal); }
.track h4{ padding-right:1.9rem; }
form.mp-subscribe{ margin:0; }
.mp-subscribe-msg{ font-size:.92rem; margin:.9rem 0 0; padding:.6rem .95rem; border-radius:8px; max-width:520px; }
.mp-subscribe-msg.is-ok{ background:var(--teal-tint); color:var(--teal-deep); }
.mp-subscribe-msg.is-err{ background:#fdecec; color:#991919; }

/* ---- Responsive burger menu (tablet + phone). core/navigation overlayMenu:"mobile"
   collapses to a hamburger below 600px on its own; we raise that to 900px so tablets
   collapse too, and style the hamburger + full-screen overlay to match the design. ---- */
/* hamburger button — hidden on desktop, shown ≤900px */
.mp-header .wp-block-navigation__responsive-container-open{ color:var(--ink); padding:.3em; }
.mp-header .wp-block-navigation__responsive-container-open svg{ width:28px; height:28px; fill:currentColor; }
@media (max-width:900px){
  .mp-header .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex !important; }
  .mp-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.always-shown){ display:none !important; }
  /* CRITICAL: backdrop-filter on the header creates a containing block for position:fixed
     descendants, which traps WordPress's full-screen overlay inside the ~72px header
     (it renders as a tiny box top-right). Drop the blur ≤900px so the overlay fills the
     viewport; keep a near-solid background so the sticky header stays legible. */
  .mp-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,255,255,.98) !important; }
}
/* the open overlay */
.mp-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--cream, #f6efe6); padding:clamp(1.6rem,6vw,4rem);
}
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ width:100%; max-width:520px; margin-inline:auto; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:.4rem; align-items:stretch; justify-content:flex-start; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ border-bottom:1px solid var(--line); width:100%; text-align:left; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ display:block; padding:.9em .2em !important; font-size:1.15rem; text-align:left; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ color:var(--ink); top:1.4rem; right:1.4rem; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{ width:30px; height:30px; fill:currentColor; }
/* the Home house-icon stays an icon inside the overlay too */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-home-icon .wp-block-navigation-item__content::before{ vertical-align:middle; }
/* submenu inside the overlay: show indented, not as a floating dropdown */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ position:static !important; opacity:1 !important; visibility:visible !important; border:0; box-shadow:none; background:transparent; padding:0 0 0 1rem; min-width:0; width:auto !important; }

/* ---- About dropdown submenu ---- */
.mp-header .wp-block-navigation__submenu-container{ background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.4rem; min-width:250px; width:max-content; }
.mp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ padding:.55em .85em !important; color:var(--graphite) !important; font-weight:500; text-decoration:none !important; white-space:nowrap; }
.mp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ color:var(--teal-deep) !important; }

/* ---- Sub-page (About strand) layout: breadcrumb + centred editorial hero ---- */
.breadcrumb{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin:0 0 1.1rem; }
.breadcrumb a{ color:var(--teal-deep); font-weight:600; }
.subhero{ text-align:center; }
.subhero .lead{ margin-left:auto; margin-right:auto; max-width:58ch; }
.subpage-nav{ display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; font-size:.95rem; margin-top:1.2rem; }

/* ---- Home nav item shown as a house icon only (first position, before Research) ---- */
.mp-header .nav-home-icon .wp-block-navigation-item__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mp-header .nav-home-icon .wp-block-navigation-item__content{ display:inline-flex; align-items:center; padding:.35em 0; }
.mp-header .nav-home-icon .wp-block-navigation-item__content::before{
  content:""; width:22px; height:22px; display:inline-block; background:var(--teal-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011.2%2012%204l8.5%207.2%27%2F%3E%3Cpath%20d%3D%27M5.5%209.8V19a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1V9.8%27%2F%3E%3Cpath%20d%3D%27M10%2020v-5h4v5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011.2%2012%204l8.5%207.2%27%2F%3E%3Cpath%20d%3D%27M5.5%209.8V19a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1V9.8%27%2F%3E%3Cpath%20d%3D%27M10%2020v-5h4v5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.mp-header .nav-home-icon .wp-block-navigation-item__content:hover::before{ background:var(--teal); }
body.page-id-11 .mp-header .nav-home-icon .wp-block-navigation-item__content::before{ background:var(--teal); }

/* tighten the gap between the reflection-domain filter and the cards grid */
section:has(.d-filter) { padding-bottom: .5rem; }
section:has(.grid-cards) { padding-top: 0; }

/* Dialogues archive — reflection domains as non-clickable reference words + note */
.reflection-domains .rd-list { font-size:1.02rem; font-weight:500; color: var(--graphite); line-height:1.7; margin-bottom:.45rem; }
.reflection-domains .rd-note { font-size:.85rem; font-style:italic; color: var(--slate); margin:0; }
section:has(.reflection-domains) { padding-bottom: .5rem; }
section:has(.grid-cards) { padding-top: 0; }

/* Dialogues archive — reflection domains as multi-colour non-clickable pills */
.reflection-domains .rd-tags { display:flex; flex-wrap:wrap; gap:.6rem; }
.rd-tags .rd-tag { font-size:.8rem; padding:.4em .95em; border-radius:20px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.rd-tags .rd-tag:nth-child(1){ background:#d7e9e9; color:#0d6e77; }
.rd-tags .rd-tag:nth-child(2){ background:#efe4c8; color:#8a6a1e; }
.rd-tags .rd-tag:nth-child(3){ background:#f1dcdc; color:#991919; }
.rd-tags .rd-tag:nth-child(4){ background:#e2e8d6; color:#566b34; }
.rd-tags .rd-tag:nth-child(5){ background:#f4e0cf; color:#a04f26; }
.rd-tags .rd-tag:nth-child(6){ background:#dde2f1; color:#3a4780; }
.rd-tags .rd-tag:nth-child(7){ background:#ebdcec; color:#6c3a6c; }
.rd-tags .rd-tag:nth-child(8){ background:#d6e6e9; color:#235f6b; }

/* ===================== The Call of Being v2 — added components ===================== */
/* "not this / but this" difference grid */
.diff { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem; }
@media(max-width:700px){ .diff{ grid-template-columns:1fr; } }
.diff .col { padding:1.6rem 1.8rem; border-radius:12px; }
.diff .col.no { background:#f6efe6; border:1px solid #e7d9c4; }
.diff .col.yes { background:var(--teal-tint); border:1px solid #cfe6e6; }
.diff h4 { font-family:var(--serif); font-size:1.2rem; margin:0 0 .8rem; }
.diff .col.no h4 { color:var(--crimson); }
.diff .col.yes h4 { color:var(--teal-deep); }
.diff ul { list-style:none; padding:0; margin:0; font-size:.96rem; color:var(--slate); }
.diff li { padding:.4em 0 .4em 1.6em; position:relative; }
.diff .col.no li::before { content:"\2715"; position:absolute; left:0; color:var(--crimson); font-weight:600; }
.diff .col.yes li::before { content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:600; }

/* reflection-statement example card */
.mp-statement { max-width:70ch; margin:1.9rem auto 0; padding:2rem 2.2rem; background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; }
.mp-statement .rs-label { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .6rem; }
.mp-statement .rs-text { font-family:var(--serif); font-size:1.55rem; line-height:1.4; color:var(--ink); margin:0; font-style:italic; }

/* voices from the archive */
.voices { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:.4rem; }
@media(max-width:900px){ .voices{ grid-template-columns:1fr; } }
.voice { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.7rem; display:flex; flex-direction:column; }
.voice .qt { font-family:var(--serif); font-size:1.16rem; line-height:1.5; color:var(--graphite); font-style:italic; margin:0 0 1.1rem; flex:1; }
.voice .who { display:flex; align-items:center; gap:.7rem; }
.voice .av { width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,var(--gold),var(--terracotta)); flex:0 0 auto; }
.voice .nm { font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.25; }
.voice .tr { font-size:.78rem; color:var(--mist); }

/* testimonials */
.tmonies { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
@media(max-width:760px){ .tmonies{ grid-template-columns:1fr; } }
.tmony { background:var(--cream); border-radius:12px; padding:1.7rem 1.9rem; }
.tmony p { font-family:var(--serif); font-size:1.2rem; line-height:1.5; color:var(--ink); margin:0 0 .8rem; }
.tmony .src { font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dark); font-weight:600; }

/* Native-block grids (The Call of Being v2 etc.): kill WP flow blockGap top-margin on the
   direct children so grid columns/cards stay top-aligned (matches the hand-HTML look). */
.hero-grid > *, .split > *, .diff > *, .tiers > *,
.voices > *, .tmonies > *, .steps > *, .step > *{ margin-top:0; margin-block-start:0; }

/* The Call of Being v2 — native-block utility helpers (styling via classes, not inline styles) */
.note-mist { color:var(--mist); font-size:.92rem; max-width:60ch; margin-inline:auto; text-align:center; }
.steps.u-mid { max-width:760px; margin-inline:auto; }
.crimson-bullets li::marker { color:var(--crimson); }

/* ===================== Research theme sub-page (Living Transcendence, etc.) ===================== */
.snap-label { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 .5rem; }
.snap-block + .snap-block { margin-top:1.6rem; }
.collage { display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
@media(max-width:520px){ .collage { grid-template-columns:repeat(4,1fr); } }
.collage .cel { aspect-ratio:1; border-radius:6px; background:linear-gradient(150deg,#cfe6e6,#4a7c7d); }
.collage .cel:nth-child(3n){ background:linear-gradient(150deg,#e6ddc9,var(--gold-dark)); }
.collage .cel:nth-child(4n){ background:linear-gradient(150deg,#dfeceb,var(--teal-deep)); }
.collage .cel:nth-child(7n){ background:linear-gradient(150deg,#eae4d6,#9a8347); }
.pubgrid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media(max-width:760px){ .pubgrid { grid-template-columns:1fr; } }
.pub { border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.7rem; background:#fff; }
.pub.is-featured { border-left:4px solid var(--teal); }
.pub .plabel { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); margin:0 0 .5rem; }
.lt-cap { color:var(--slate); font-size:.96rem; max-width:72ch; margin-inline:auto; text-align:center; }

/* open research questions as cards */
.qcards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:820px){ .qcards { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .qcards { grid-template-columns:1fr; } }
.qcards > * { margin-top:0; margin-block-start:0; }
.qcard { border:1px solid var(--line); border-radius:12px; padding:1.4rem 1.5rem; background:#fff; display:flex; flex-direction:column; gap:.9rem; transition:.2s; }
.qcard:hover { border-color:var(--teal); box-shadow:0 8px 24px rgba(42,148,150,.1); }
.qcard .q { font-family:var(--serif); font-size:1.28rem; line-height:1.3; color:var(--ink); flex:1; margin:0; }
.qcard .qmeta { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep); margin:0; }
/* featured publication with book cover */
.pub-lead { display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start; }
.pub-lead > * { margin-top:0; margin-block-start:0; }
.pub-cover { width:92px; aspect-ratio:3/4.3; border-radius:4px; background:linear-gradient(150deg,var(--teal-deep),var(--ink)); box-shadow:0 6px 18px rgba(0,0,0,.18); }
/* watch-clip link on voice cards */
.voice .clip { margin-top:.9rem; }

/* research hero — question as a centered card (narrower than body) */
.qbox { max-width:600px; margin-inline:auto; background:var(--teal-tint); border:1px solid #cfe6e6; border-radius:12px; padding:1.15rem 1.7rem; text-align:center; }
.qbox .mb0 { margin:0; }
/* 4-column collage variant (20 faces, 4x5) */
.collage.cols-4 { grid-template-columns:repeat(4,1fr); }
/* research notes & conversations cards */
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media(max-width:820px){ .notes { grid-template-columns:1fr; } }
.notes > * { margin-top:0; margin-block-start:0; }
.note-card { border:1px solid var(--line); border-radius:12px; padding:1.5rem 1.6rem; background:#fff; display:flex; flex-direction:column; gap:.55rem; }
.note-card h3 { font-size:1.3rem; margin:0; }
.note-card .ndesc { font-size:.94rem; color:var(--slate); flex:1; margin:0; }
.note-card .ntype { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); margin:0; }

.pub-cover-img { width:120px; height:auto; border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.18); display:block; }
@media(max-width:520px){ .pub-cover-img { width:96px; } }

/* Arrow link styled via PARENT class, so the <a> stays class-free (native Paragraph friendly) */
.arrowlink a { font-weight:500; color:var(--teal-deep); display:inline-flex; align-items:center; gap:.4em; text-decoration:none; }
.arrowlink a::after { content:"\2192"; transition:transform .2s; }
.arrowlink a:hover::after { transform:translateX(4px); }
/* light eyebrow on the dark teal band (replaces inline style, keeps native Paragraph) */
.band-teal .eyebrow { color:#bfe9e9; }
/* nav dropdown: align the submenu flush-LEFT with its parent item (was flush-right) */
.mp-header li.wp-block-navigation-item .wp-block-navigation__submenu-container{ left:0 !important; right:auto !important; margin-left:0 !important; }


/* ============================================================
   COLUMNS-FIRST LAYOUT OVERRIDES (marqueterie refont, 2026-08-13)
   Bands are now full-bleed wp:columns (a <div>, not <section>),
   so restore the vertical rhythm the <section> tag used to give,
   and let ported grid classes (.doors/.split/.authority .wrap)
   keep driving exact layout + original responsive on the
   wp:columns/wp:column STRUCTURE.
   ============================================================ */

/* Vertical rhythm previously from the <section> tag */
.wp-block-columns.alignfull.af-section,
.wp-block-columns.alignfull.band-dark,
.wp-block-columns.alignfull.band-cream { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Hero band keeps its bespoke padded full-width 2-col */
.wp-block-columns.alignfull.hero {
  padding: clamp(1.4rem,3vw,2.4rem) clamp(1.6rem,7vw,7rem) clamp(2.4rem,5vw,3.8rem);
}
.wp-block-columns.alignfull.hero { align-items: center; }

/* A full-bleed band's single pass-through column must not add core gap/basis */
.wp-block-columns.alignfull > .wp-block-column:only-child { flex-basis: 100% !important; }

/* Ported grid classes win display over core columns flex (kept intentionally) */
.doors, .split { align-items: initial; }
.split { align-items: center; }

/* .wrap used as a wp:columns constrain-wrapper: center it and kill core gap
   when it holds a single stacked column */
.wp-block-columns.wrap { margin-inline: auto; }
.wp-block-columns.sec-head { display: block; }


/* ===== Main-nav polish, replicated from live (2026-08-13) ===== */
/* The Call of Being nav item rendered as a crimson button */
.mp-header .nav-cob-btn .wp-block-navigation-item__content { background:#991919 !important; color:#fff !important; border-radius:40px; padding:.45em 1.15em !important; text-decoration:none !important; }
.mp-header .nav-cob-btn .wp-block-navigation-item__content:hover { background:#7d1414 !important; color:#fff !important; }

/* subtle "|" divider between Blog and Research in the main nav */
.mp-header .nav-research:not(.wp-block-navigation__submenu-container)::before { content:"|"; color:var(--mist); opacity:.6; margin-right:.55rem; font-weight:300; align-self:center; }

/* The Call of Being nav button: no "current page" underline (it's a button, not a text link) */
body.page-id-16 .mp-header .nav-cob-btn .wp-block-navigation-item__content,
.mp-header .nav-cob-btn a[aria-current="page"],
.mp-header .nav-cob-btn .current-menu-item > .wp-block-navigation-item__content { text-decoration:none !important; }


/* ===== Header bar layout fix — columns-based nav must be a horizontal flex bar (2026-08-14) ===== */
/* Root cause: the header .brand is display:grid without width:max-content, so inside
   its block column (.brand-col) it stretched to fill, starving .nav-right. Constrain it. */
.mp-header .brand{ width:max-content; }
.mp-header .wp-block-columns.wrap.nav{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; justify-content:space-between !important; align-items:center !important; gap:clamp(1rem,3vw,2rem); }
.mp-header .wrap.nav > .brand-col{ flex:0 1 auto !important; }
.mp-header .wrap.nav > .nav-right{ flex:0 0 auto !important; display:flex !important; justify-content:flex-end !important; align-items:center !important; }
.mp-header .nav-right .wp-block-navigation{ flex:0 1 auto; }
/* Mobile: brand flexes so the hamburger stays visible on the right */
@media (max-width:600px){
  .mp-header .brand{ width:auto; }
  .mp-header .wrap.nav > .brand-col{ flex:1 1 auto !important; min-width:0; }
  .mp-header .wrap.nav > .nav-right{ flex:0 0 auto !important; }
}

/* ===== FIX-v024-center-wrap-columns =====================================
   A .wrap/.narrow set on a wp-block-COLUMN is a flex item; core forces
   flex-basis:100% + flex-grow:1 on only-children, so `.wrap{margin:0 auto}`
   resolved to 0 and the capped column sat pinned to the left (flex-start).
   Kill the grow so max-width truly caps, then center the residual space. */
.wp-block-columns.alignfull > .wp-block-column.wrap,
.wp-block-columns.alignfull > .wp-block-column.narrow {
  flex-grow: 0 !important;
  margin-inline: auto !important;
}
.wp-block-columns.alignfull:has(> .wp-block-column.wrap),
.wp-block-columns.alignfull:has(> .wp-block-column.narrow),
.wp-block-columns.alignfull.subhero,
.wp-block-columns.alignfull.band-cream,
.wp-block-columns.alignfull.band-teal,
.wp-block-columns.alignfull.band-dark,
.wp-block-columns.alignfull.af-section {
  justify-content: center;
}
/* ===== /FIX-v024 ======================================================== */

/* ===== FIX-v024-grid-over-flex =========================================
   Theme grid layouts declared as single-class selectors (.steps, .tiers…)
   tie in specificity with core WordPress `.wp-block-columns-is-layout-flex`
   (0,1,0) and LOSE by source order when the class sits on a wp:columns block,
   collapsing the intended grid into cramped flex columns. Re-assert grid with
   a .wp-block-columns prefix (0,2,0) — matches only the columns-based (broken)
   instances; group-based instances already work and are untouched. The
   grid-template-columns from the base rules cascade in once display:grid wins. */
.wp-block-columns.steps,
.wp-block-columns.tiers,
.wp-block-columns.doors,
.wp-block-columns.pillars,
.wp-block-columns.grid-cards,
.wp-block-columns.tracks,
.wp-block-columns.voices,
.wp-block-columns.tmonies,
.wp-block-columns.collage,
.wp-block-columns.pubgrid,
.wp-block-columns.qcards,
.wp-block-columns.notes,
.wp-block-columns.diff,
.wp-block-columns.blog-grid,
.wp-block-columns.modes,
.wp-block-columns.split,
.wp-block-columns.pub-lead { display: grid !important; }
/* steps has no explicit template (stacked single column, icon+text per step) */
.wp-block-columns.steps { grid-template-columns: 1fr !important; }
/* ===== /FIX-v024-grid-over-flex ======================================== */

/* ===== FIX-v025-step-cols ==============================================
   .step is a grid 52px|1fr with three flat children (.n, h4, p). Auto-flow
   sent the paragraph back into the 52px column (one-word-per-line). Pin the
   number to col1 spanning all rows; force every other child into col2. */
.step > .n { grid-column: 1; grid-row: 1 / -1; }
.step > :not(.n) { grid-column: 2; }
/* ===== /FIX-v025-step-cols ============================================= */

/* ===== FIX-v027-band-rhythm ============================================
   Bands are now div.wp-block-columns (not <section>), so the old
   `section{margin-block-start:0}` no longer applies. Core's
   `:where(.is-layout-*) > *{margin-block-start:1.2rem}` (~24px) reappeared as
   white strips BETWEEN bands and BELOW the header (post-content margin-top).
   Fix: zero the flow margins on post-content + its top-level full-bleed bands,
   and move the vertical rhythm INSIDE every band as padding (incl. band-teal &
   unclassed bands, which had padding:0). Hero keeps its own padding. */
.wp-block-post-content { margin-block: 0 !important; }
.wp-block-post-content > .wp-block-columns.alignfull { margin-block: 0 !important; }
.wp-block-post-content > .wp-block-columns.alignfull:not(.hero) {
  /* 261023 B2 — tightened section rhythm (was clamp(3.5rem,8vw,6.5rem)): reduce the
     large gaps between sections while keeping a spacious, contemplative feel. */
  padding-block: clamp(2.4rem, 5.5vw, 4.4rem);
}
/* ===== /FIX-v027-band-rhythm =========================================== */

/* ===== FIX-v028-mobile-header + footer-gap =============================
   (a) Footer is a flow sibling of post-content inside .wp-site-blocks, so core's
   `is-layout margin-block-start:1.2rem` put a ~24px white strip above it (like the
   header gap). Zero it. (b) Mobile header: the nav-right column resolved to
   width:336px (WP columns layout), starving the brand column to 0 → the site name
   wrapped one letter per line. Pin nav-right to the hamburger's width so the brand
   gets the row. (c) Open overlay menu was right-aligned & the The Call of Being button
   had no breathing room — left-align the rows and space the button. */
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0 !important; }

@media (max-width: 781px){
  .mp-header .wrap.nav{ flex-wrap: nowrap !important; }
  .mp-header .wrap.nav > .brand-col{ flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: calc(100% - 60px) !important; }
  .mp-header .wrap.nav > .nav-right{ flex: 0 0 48px !important; width: 48px !important; max-width: 48px !important; min-width: 48px !important; }
  .mp-header .nav-right .wp-block-navigation{ width: auto !important; flex: 0 0 auto !important; }
  .mp-header .brand{ width: auto !important; max-width: 100%; }
  .mp-header .brand .brand-name{ white-space: nowrap; }
}

/* Open full-screen overlay: the nav's justifyContent:"right" maps to
   align-items:flex-end in core's column overlay → every row hugged the right edge.
   The horizontal axis in a column flex is align-items, so force it to flex-start
   (justify-content is the vertical axis here and had no effect). */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ align-items: flex-start !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ align-items: flex-start !important; width: 100% !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ align-items: flex-start !important; width: 100% !important; text-align: left !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ text-align: left !important; justify-content: flex-start !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-cob-btn{ border-bottom: 0 !important; margin-top: 1.2rem !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-cob-btn .wp-block-navigation-item__content{ display: inline-block !important; width: max-content !important; padding: .6em 1.4em !important; }
/* the desktop "|" Blog|Research divider is noise in the stacked mobile menu */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-research::before{ display: none !important; }
/* ===== /FIX-v028-mobile-header ========================================= */

/* ===== FIX-v212-native-cta ==============================================
   Buttons / eyebrows / arrow-links moved out of Custom HTML blocks into
   NATIVE Gutenberg blocks (client-editable). This bridges the native
   core/button to the MP pill look beyond the pricing tiers, and restyles
   the arrow link as a native paragraph. */
/* mp-btn was full-width for tiers only; standalone CTA pills stay inline */
.wp-block-button.mp-btn{ width:auto; }
.wp-block-button.mp-btn > .wp-block-button__link{ width:auto; }
.tier .wp-block-button.mp-btn,
.tier .wp-block-button.mp-btn > .wp-block-button__link{ width:100%; }
.wp-block-button.mp-btn.lg > .wp-block-button__link{ font-size:1.05rem; padding:1em 1.9em; }
.wp-block-button.mp-btn.ghost-light > .wp-block-button__link{ background:transparent; color:#eaf6f6; border-color:#bfe9e9; }
.wp-block-button.mp-btn.ghost-light > .wp-block-button__link:hover{ background:rgba(255,255,255,.10); color:#fff; }
.wp-block-buttons.cta-center{ justify-content:center; }
/* native arrow link (replaces <a class="link-arrow"> Custom HTML) */
.arrowlink{ margin:0; }
.arrowlink a{ font-weight:500; color:var(--teal-deep); text-decoration:none; display:inline-flex; align-items:center; gap:.4em; }
.arrowlink a::after{ content:"→"; transition:transform .2s; }
.arrowlink a:hover{ text-decoration:none; }
.arrowlink a:hover::after{ transform:translateX(4px); }
/* .door p{flex:1} would stretch the foot paragraph; pin it */
.door .door-foot{ flex:0 0 auto; margin-top:1.2rem; }
/* ===== /FIX-v212-native-cta ============================================= */

/* ===== FIX-v213-collage-gallery ========================================
   The decorative .collage placeholder (Custom HTML) is replaced by a native
   core/gallery so the client can swap each interviewee thumbnail. Keep the
   tight, rounded look. */
.collage-gallery.wp-block-gallery{ gap:.5rem; }
.collage-gallery.wp-block-gallery .wp-block-image{ border-radius:8px; overflow:hidden; }
.collage-gallery.wp-block-gallery .wp-block-image img{ border-radius:8px; }
/* ===== /FIX-v213-collage-gallery ======================================= */

/* ===== FIX-v214-voice-identity =========================================
   Voice-card identity (avatar + name + tradition) moved from a Custom HTML
   .who block to native columns + Image + paragraphs, so the client edits the
   name/tradition and replaces the interviewee photo. */
.voice .who.wp-block-columns{ margin:0 !important; gap:.7rem; align-items:center; width:100% !important; flex-wrap:nowrap !important; }
.voice .who > .who-av{ flex:0 0 46px !important; width:46px !important; min-width:46px; }
.voice .who > .wp-block-column:not(.who-av){ flex:1 1 auto !important; min-width:0 !important; }
.voice .who .wp-block-column{ padding:0; }
.voice .who .voice-photo{ margin:0; }
.voice .who .voice-photo img{ width:46px; height:46px; border-radius:50%; object-fit:cover; display:block; }
.voice .who .nm, .voice .who .tr{ margin:0; }
.voice .who .tr{ margin-top:.1rem; }
/* ===== /FIX-v214-voice-identity ======================================== */

/* ===== FIX-v216-dialogue-video-cards ===================================
   Dialogue video cards: the .card-media/.card-body Custom HTML becomes a
   native Image (replaceable, linked to the video) + native heading/paragraphs.
   Play button is a CSS overlay so it survives image replacement. */
.grid-cards .card.wp-block-column{ padding:0; overflow:hidden; }
.grid-cards .card > .v-thumb{ margin:0; position:relative; aspect-ratio:16/10; background:linear-gradient(150deg,var(--teal),var(--teal-deep)); }
.grid-cards .card > .v-thumb a{ display:block; width:100%; height:100%; }
.grid-cards .card > .v-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.grid-cards .card > .v-thumb::after{ content:"\25B6"; position:absolute; inset:0; width:52px; height:52px; margin:auto; border-radius:50%; background:rgba(255,255,255,.92); color:var(--teal-deep); display:grid; place-items:center; font-size:.95rem; pointer-events:none; }
.grid-cards .card > h3{ padding:1.2rem 1.4rem 0; margin:0 0 .35rem; font-size:1.3rem; color:var(--ink); }
.grid-cards .card > p{ padding-inline:1.4rem; margin:.35rem 0 0; font-size:.92rem; color:var(--slate); }
.grid-cards .card > p.tradition{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.grid-cards .card > p:last-child{ padding-bottom:1.5rem; }
/* ===== /FIX-v216-dialogue-video-cards ================================== */

/* callout kept its inline top margin — native version relies on this */
.callout{ margin-top:1.4rem; }
/* FIX-v217-callout-native */

/* ===== FIX-v218-native-images ==========================================
   Book cover (#58) & lecture video thumbnails (#59) moved from Custom HTML to
   native Image blocks (client-replaceable). Thumbnails reuse .v-thumb (v216). */
figure.wp-block-image.pub-cover-img{ margin:0; }
figure.wp-block-image.pub-cover-img img{ width:120px; height:auto; border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.18); display:block; }
@media(max-width:520px){ figure.wp-block-image.pub-cover-img img{ width:96px; } }
/* ===== /FIX-v218-native-images ========================================= */

/* ===== FIX-v219-last-content ===========================================
   Last Custom-HTML content → native blocks. Inline-styled <span>/<li> replaced
   by native <strong>/<em> (which validate) and styled here instead. */
.hero-tertiary strong{ color:#2e7d32; font-weight:600; }
.luminai-lines{ list-style:none; padding-left:0; margin:1rem 0; font-size:1.02rem; color:var(--slate); }
.luminai-lines li{ padding:.4em 0; }
.luminai-lines em{ color:var(--mist); font-style:normal; }
.disclaimer .dis-title{ margin:0 0 .6rem; }
.disclaimer .dis-body{ color:var(--slate); margin:0; }
/* ===== /FIX-v219-last-content ========================================== */

/* ===== FIX-v220-validation =============================================
   Hero CTAs / links that were native paragraphs holding classed <a>/<span>
   (block-validation errors) are now native buttons / class-free links. */
.hero-tertiary a{ color:var(--teal-deep); font-weight:500; text-decoration:none; }
.hero-tertiary a::after{ content:" \2192"; }
.hero-tertiary a:hover{ text-decoration:none; }
/* ===== /FIX-v220-validation ============================================ */

/* ===== FIX-v221-brand-clickable ========================================
   Desktop header: brand-col was shrinking to width:0 while nav-right expanded
   to ~1080px and overlapped the (overflowing) title — nav-right's empty area
   stole the clicks, so the "Dr. Amir Freimann" home link was unclickable.
   Keep brand-col at its content width, let nav-right take the remaining space,
   and lift the brand so it reliably receives the click. */
@media (min-width: 782px){
  .mp-header .wrap.nav > .brand-col{ flex:0 0 auto !important; width:auto !important; position:relative; z-index:2; }
  .mp-header .wrap.nav > .nav-right{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
}
/* ===== /FIX-v221-brand-clickable ======================================= */

/* ===== v222 — classe image "maison" =====================================
   A taper dans "Additional CSS class(es)" d'un bloc Image pour lui donner le
   meme rendu que les images du design system : coins arrondis 14px + ombre
   douce --shadow. Cible l'<img> qu'il soit ou non dans une figure. */
.mp-img img,
figure.mp-img img,
.wp-block-image.mp-img img{
  border-radius:14px;
  box-shadow:var(--shadow);
}
/* ===== /v222 ============================================================ */

/* ===== v223 — look image AUTOMATIQUE ===================================
   Toute image de contenu (bloc Image) prend coins 14px + ombre --shadow,
   sans rien taper. Pour laisser une image NUE (logo, picto, cas special),
   ajouter la classe "mp-img-plain" dans "Additional CSS class(es)".
   Non touches : header/nav, hero/cartes deja encadres, avatars. */
.wp-block-image img{
  border-radius:14px;
  box-shadow:var(--shadow);
}
/* Exceptions (specificite superieure + placees apres = elles gagnent) */
.mp-header .wp-block-image img,
.hero-media .wp-block-image img,
.card-media .wp-block-image img,
.blog-media .wp-block-image img,
.card .wp-block-image img,
.blog-card .wp-block-image img,
.portrait .wp-block-image img,
.voice .wp-block-image img,
.wp-block-image.mp-img-plain img{
  border-radius:0;
  box-shadow:none;
}
/* mp-photo-full garde ses coins 14px mais reste sans ombre */
.mp-photo-full img{ box-shadow:none; }
/* galerie collage : garde ses petits coins 8px, pas d'ombre par vignette */
.collage-gallery .wp-block-image img{ box-shadow:none; }
/* ===== /v223 ============================================================ */

/* ===== v225 — variations de style de bloc (menu « Styles », sans code) ==
   Enregistrees dans inc/editor-autonomy.php ; ce bloc mappe chaque variation
   au rendu correspondant de la charte. */
/* Boutons */
.wp-block-button.is-style-af-warm > .wp-block-button__link{ background:var(--crimson); color:#fff; }
.wp-block-button.is-style-af-warm > .wp-block-button__link:hover{ background:var(--crimson-dark); }
.wp-block-button.is-style-af-ghost > .wp-block-button__link{ background:transparent; color:var(--teal-deep); border:1.5px solid var(--teal); }
.wp-block-button.is-style-af-ghost > .wp-block-button__link:hover{ background:var(--teal-tint); }
.wp-block-button.is-style-af-dark > .wp-block-button__link{ background:var(--ink); color:#fff; }
.wp-block-button.is-style-af-dark > .wp-block-button__link:hover{ background:#000; }
/* Image sans cadre (l'emporte sur le rendu automatique) */
.wp-block-image.is-style-af-plain img{ border-radius:0; box-shadow:none; }
/* Paragraphe : sur-titre / accroche / encadre */
p.is-style-af-eyebrow{ font-family:var(--sans); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--teal-deep); margin:0 0 1.1rem; }
p.is-style-af-lead{ font-size:clamp(1.15rem,2vw,1.4rem); color:var(--slate); line-height:1.6; }
p.is-style-af-callout{ border-left:3px solid var(--teal); background:var(--teal-tint); padding:1.4rem 1.6rem; border-radius:0 8px 8px 0; font-size:.96rem; color:var(--graphite); }
/* Groupe : bandeaux pleine largeur */
.wp-block-group.is-style-af-band-cream{ background:var(--cream); }
.wp-block-group.is-style-af-band-teal{ background:linear-gradient(160deg,var(--teal-deep),#0a565e); color:#eaf6f6; }
.wp-block-group.is-style-af-band-teal :is(h1,h2,h3){ color:#fff; }
.wp-block-group.is-style-af-band-teal a{ color:#fff; }
/* ===== /v225 ============================================================ */

/* ===== v226 — Research Snapshot : variante large + ligne continue ======
   Utilisées sur la page Spiritual Transmission (#58) : collage à ~2/3, texte
   à gauche sur ~1/3, et sous-listes en ligne continue avec puces « · ». */
.split.snap-wide{ grid-template-columns:1fr 2fr; }
@media (max-width:820px){ .split.snap-wide{ grid-template-columns:1fr; } }
.snap-line{ font-size:.95rem; color:var(--slate); margin:0; line-height:1.6; }
/* ===== /v226 ============================================================ */

/* ===== v227 — resserre le vide « domains ↔ cartes » (Dialogues) =========
   Les sections sont des .wp-block-columns.alignfull (pas des <section>), donc
   les règles `section:has(.reflection-domains/.grid-cards)` d'origine (l.868-869)
   ne s'appliquaient pas → double padding de 104px + marge = ~246px de blanc.
   On cible le bon sélecteur (même spécificité que le padding-block, placé après). */
.wp-block-post-content > .wp-block-columns.alignfull:has(.reflection-domains){ padding-bottom:.5rem; }
.wp-block-post-content > .wp-block-columns.alignfull:has(.grid-cards):not(:has(.sec-head)){ padding-top:0; }
/* ===== /v227 ============================================================ */

/* ===== v228 (2026-09-24) — section-bg alternation + expandable card grids =====
   Requested by Dr Amir: adjacent content sections must not share the same
   background, and several card grids must collapse to N cards with an
   "Additional …" toggle to reveal the rest. */

/* (1) band-mist: a subtle third surface tone so two otherwise-white sections
       sitting next to each other read as distinct. Warm cream + teal bands are
       left untouched; this only fills plain sections we tag with .band-mist. */
.wp-block-columns.alignfull.band-mist{
  background:#eef2f1;                        /* cool light paper: distinct from #fff and from warm --cream */
  padding-block:clamp(2.4rem,5vw,3.8rem);
  justify-content:center;
}
/* "Reduce the space separating these sections": when a mist band is immediately
   followed by a plain (unbanded) section, tighten the seam between them. */
.wp-block-columns.alignfull.band-mist + .wp-block-columns.alignfull:not(.band-cream):not(.band-teal):not(.band-dark):not(.band-mist){
  padding-top:0;
}
.wp-block-columns.alignfull.band-mist + .wp-block-columns.alignfull:not(.band-cream):not(.band-teal):not(.band-dark):not(.band-mist) > .wp-block-column > .sec-head{
  margin-top:0;
}

/* (2) Expandable card grids. A grid container tagged .cards-expandable with
       data-expand="N" collapses to its first N card children; af-cards.js appends
       an "Additional …" toggle after it. Works for plugin grids (.voices/.notes/
       .grid-cards) and native .pillars alike. */
.af-card-hidden{ display:none !important; }
.cards-more{ width:100%; text-align:center; margin-top:1.7rem; }
.cards-more-btn{
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--teal-deep); background:transparent;
  border:1px solid var(--line); border-radius:40px; padding:.72em 1.7em; cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.cards-more-btn:hover,
.cards-more-btn:focus-visible{ background:var(--teal-deep); color:#fff; border-color:var(--teal-deep); }
.cards-more-btn::after{ content:" +"; font-weight:400; }
.cards-more-btn[aria-expanded="true"]::after{ content:" –"; }
/* ===== /v228 ============================================================= */

/* ===== v229 (2026-09-30) — EoB revisions + Notes system upgrades ==========
   Requested by Dr Amir (PDF « changes to the website pages »). */

/* (1)(2) Restore full top padding on sections whose eyebrow otherwise hugs the
   top — overrides the :has(.grid-cards) reset and the band-mist seam reset for
   the specific sections we tag. Same clamp as the base section rhythm, so the
   "In their own words" and "Publications" eyebrows line up with the band ones. */
.wp-block-post-content > .wp-block-columns.alignfull.sec-toppad{ padding-top:clamp(3.5rem,8vw,6.5rem) !important; }

/* (6) Publications right column split into two stacked cards */
.wp-block-columns.pub-stack{ display:grid !important; grid-template-columns:1fr; gap:1.4rem; align-content:start; }
.pub-stack > .wp-block-column.pub{ margin:0; }

/* (4) Research note card: featured image in the top-right quadrant */
.note-card .note-head{ display:flex; gap:1rem; align-items:flex-start; }
.note-card .note-head h3{ flex:1; margin:0; }
.note-card .note-thumb-tr{ flex:0 0 40%; max-width:150px; margin:0; }
.note-card .note-thumb-tr img{ width:100%; height:auto; border-radius:8px; display:block; }

/* (5) Video essay card: 16:9 thumbnail, full-bleed to the card edges, play badge */
.note-card.note-has-video{ overflow:hidden; }
.note-card .note-media{ position:relative; display:block; margin:-1.5rem -1.6rem 0; aspect-ratio:16/9; overflow:hidden; border-radius:11px 11px 0 0; background:#0d3b3e; }
.note-card .note-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.note-card .note-media .note-play{ position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .2s, background .2s; }
.note-card .note-media .note-play::after{ content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--teal-deep); }
.note-card .note-media:hover .note-play{ transform:scale(1.08); background:#fff; }

/* (5) YouTube lightbox modal (injected once by af-cards.js) */
.yt-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,5vw,4rem); background:rgba(9,20,20,.86); opacity:0; visibility:hidden; transition:opacity .22s ease; }
.yt-modal.is-open{ opacity:1; visibility:visible; }
.yt-modal__inner{ position:relative; width:min(1000px,100%); aspect-ratio:16/9; }
.yt-modal__inner iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); background:#000; }
.yt-modal__close{ position:absolute; top:-2.6rem; right:0; width:2.2rem; height:2.2rem; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; transition:background .2s; }
.yt-modal__close:hover{ background:rgba(255,255,255,.3); }
@media(max-width:600px){ .yt-modal__close{ top:-2.4rem; } }
/* ===== /v229 ============================================================= */

/* ===== v230 (2026-09-30) — batch 2 ======================================== */
/* Light bluish-green section band (teal-tint) — e.g. The Call of Being "Meet your guide". */
.wp-block-columns.alignfull.band-tint{ background:var(--teal-tint); }
/* ===== /v230 ============================================================= */

/* ===== v0.2.50 (2026-10-17) — language switcher re-enabled (HE/JA translated & indexable) ===== */

/* ============================================================
   RTL (Hebrew) — directional overrides for Polylang `he` locale
   WordPress sets <html dir="rtl"> for he_IL; grids/flex auto-flip,
   these handle the physical-direction rules that don't.
   ============================================================ */
[dir="rtl"] .callout,
[dir="rtl"] p.is-style-af-callout{ border-left:0; border-right:3px solid var(--teal); border-radius:8px 0 0 8px; }
[dir="rtl"] .callout.warm{ border-right-color:var(--terracotta); }
[dir="rtl"] .mp-statement{ border-left:1px solid var(--line); border-right:4px solid var(--gold); border-radius:12px 0 0 12px; }
[dir="rtl"] .pub.is-featured{ border-left:0; border-right:4px solid var(--teal); }

/* list check/cross markers move to the right */
[dir="rtl"] .tier li,
[dir="rtl"] .diff li{ padding:.4em 1.6em .4em 0; }
[dir="rtl"] .tier li::before,
[dir="rtl"] .diff .col.no li::before,
[dir="rtl"] .diff .col.yes li::before{ left:auto; right:0; }

/* arrow links point left in RTL and nudge left on hover */
[dir="rtl"] .arrowlink a::after{ content:"\2190"; }
[dir="rtl"] .hero-tertiary a::after{ content:" \2190"; }
[dir="rtl"] .arrowlink a:hover::after{ transform:translateX(-4px); }

/* hero video unmute button to the left */
[dir="rtl"] .hero-vid-sound{ right:auto; left:.7rem; }

/* nav separator pipe sits on the other side */
[dir="rtl"] .mp-header .nav-research:not(.wp-block-navigation__submenu-container)::before{ margin-right:0; margin-left:.55rem; }

/* big stat numbers / latin tokens stay LTR ("50+", "PhD+") */
[dir="rtl"] .num,
[dir="rtl"] .price,
[dir="rtl"] .stat .num{ direction:ltr; unicode-bidi:isolate; }

/* mobile nav overlay + close button */
[dir="rtl"] .mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
[dir="rtl"] .mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ text-align:right !important; }
[dir="rtl"] .mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ right:auto; left:1.4rem; }

/* HubSpot-style form fields */
[dir="rtl"] .mp-hsform .hs-form-field{ text-align:right; }

/* submenu dropdown aligns to the right edge of its parent */
[dir="rtl"] .mp-header li.wp-block-navigation-item .wp-block-navigation__submenu-container{ left:auto !important; right:0 !important; }

/* ============================================================
   Language display fonts (loaded conditionally via functions.php)
   Hebrew  -> Frank Ruhl Libre (serif) + Heebo (sans)
   Japanese-> Noto Serif JP (serif) + Noto Sans JP (sans)
   Override both the mp.css aliases and the theme.json preset vars
   so core blocks (headings) and component CSS both pick them up.
   ============================================================ */
:root:lang(he), body:lang(he){
  --serif: 'Frank Ruhl Libre', Georgia, serif;
  --sans:  'Heebo', system-ui, sans-serif;
  --wp--preset--font-family--mp-serif: 'Frank Ruhl Libre', Georgia, serif;
  --wp--preset--font-family--mp-sans:  'Heebo', system-ui, sans-serif;
}
:root:lang(ja), body:lang(ja){
  --serif: 'Noto Serif JP', Georgia, serif;
  --sans:  'Noto Sans JP', system-ui, sans-serif;
  --wp--preset--font-family--mp-serif: 'Noto Serif JP', Georgia, serif;
  --wp--preset--font-family--mp-sans:  'Noto Sans JP', system-ui, sans-serif;
}
/* Hebrew headings read better a touch tighter; Frank Ruhl Libre is lighter than Cormorant */
:lang(he) h1, :lang(he) h2, :lang(he) h3{ letter-spacing:0; }

/* ---- Blog topic filter bar ([af_topics]) ---- */
.af-topics{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 2rem; }
.af-topics .af-topic{ font-family:var(--sans); font-size:.9rem; font-weight:500; line-height:1;
  padding:.55em 1em; border:1px solid var(--line); border-radius:40px; color:var(--graphite);
  text-decoration:none; transition:.18s ease; white-space:nowrap; }
.af-topics .af-topic:hover{ border-color:var(--teal); color:var(--teal-deep); background:var(--teal-tint); }
.af-topics .af-topic.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* ── The Call of Being — exploration cards moved INSIDE the hero (261023 B1) ──── */
.hero .wrap.hero-grid.gv-cob { padding-bottom: clamp(1.1rem, 2.4vw, 1.7rem); }
.hero .wrap.hero-paths { padding-top: 0; padding-bottom: clamp(2rem, 5vw, 3.2rem); }
.hero-paths > .wp-block-column { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.4rem); }
.hero-paths .is-style-af-eyebrow { margin: 0; }
.path-cards { align-items: stretch; margin: 0; }
.path-cards > .wp-block-column { display: flex; flex-direction: column; gap: .55rem; }
.path-cards .wp-block-buttons { margin-top: auto; }

/* ── CoB B3 — "Begin, continue, deepen": scannable 3-step row (stacked on mobile) ── */
.wp-block-post-content .wp-block-columns.steps-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(1.4rem, 3.2vw, 2.4rem); max-width: 940px; margin-inline: auto; }
.steps-3 .step { display: flex !important; flex-direction: column; align-items: flex-start; gap: .5rem; width: auto !important; margin: 0 !important; padding: 0; }
.steps-3 .step > .n { display: grid !important; place-items: center; width: 46px; height: 46px; margin-bottom: .1rem; }
.steps-3 .step > h4 { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin: 0; }
.steps-3 .step > h4::after { content: none; }
.steps-3 .step > p { display: block; font-size: .95rem; color: var(--slate); line-height: 1.55; margin: 0; }
@media (max-width: 781px) { .wp-block-post-content .wp-block-columns.steps-3 { grid-template-columns: 1fr !important; gap: 1.5rem; max-width: 520px; } }

/* ── CoB B4 — Voices from the archive: clearer name / label / metadata hierarchy ──
   Cards are already uniform (square thumb, equal height); this sharpens the text
   tiers so they scan faster: name + tradition lead, metadata recedes. */
.grid-cards .card > h3 { font-size: 1.32rem; line-height: 1.2; margin-bottom: .3rem; }
.grid-cards .card > p.tradition { margin-bottom: .6rem; }
.grid-cards .card > p.d-type { font-size: .85rem; margin-top: .5rem; color: var(--slate); }
.grid-cards .card > p.d-meta { font-size: .8rem; line-height: 1.45; margin-top: .25rem; color: var(--mist); }
.grid-cards .card > p.d-topics { font-size: .78rem; letter-spacing: .01em; margin-top: .5rem; color: var(--slate); }
.grid-cards .card > p:last-child { padding-bottom: 1.4rem; }

/* ── CoB B5 — "Meet your guide" (Luminai): balanced image/text + legible disclaimer ──
   Preserve the 2-col composition; make the image a full-height panel so the two
   columns read as balanced, and lift the disclaimer from near-invisible mist to a
   readable slate while keeping it quiet (small, dashed, no fill). */
.band-tint .split { align-items: stretch; }
.band-tint .split > .wp-block-column:first-child { display: flex; }
.band-tint .split .wp-block-image { margin: 0; width: 100%; }
.band-tint .split .wp-block-image img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: 14px; }
.disclaimer { color: var(--slate); }
.disclaimer strong, .disclaimer .dis-title { color: var(--ink); }