/* Master Peace 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 · Master Peace — Unified Design System
   Derived from spiritualresearch.net
   Signature teal #1C6E72 · crimson #2F6E3E · 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, #F3EBDD); }

.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), #124A4E); color: #E9F2F1; }

.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, #3A8488, 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:#F3EBDD; }

.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:#EEF6EC; color:#2F6E3E; }

.pill.crimson { background:#EAF5EC; 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,#F3EBDD); }
.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:#F3EBDD; 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:#E9F2F1; }
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),#F3EBDD); 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; }

/* ---- 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; }
.mp-topbar-lang{ display:flex; align-items:center; gap:.55rem; text-transform:uppercase; letter-spacing:.07em; font-weight:500; }
.mp-topbar-lang .mp-lang-current{ font-weight:700; }
.mp-topbar-lang ul{ list-style:none; display:flex; gap:.55rem; margin:0; padding:0; }
.mp-topbar-lang li{ margin:0; }
.mp-topbar-lang a{ color:#fff; opacity:.65; text-decoration:none; }
.mp-topbar-lang a:hover{ opacity:1; }
.mp-topbar-lang .current-lang, .mp-topbar-lang .current-lang > a{ opacity:1; font-weight:700; }
/* 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:#EAF5EC; color:#2F6E3E; }

/* ---- 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, #F3EBDD); 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; }

/* ---- 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; }
.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; }
.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:#124A4E; }
.rd-tags .rd-tag:nth-child(2){ background:#efe4c8; color:#8a6a1e; }
.rd-tags .rd-tag:nth-child(3){ background:#D9ECD9; color:#2F6E3E; }
.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; }

/* ===================== Master Peace 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:#F3EBDD; border:1px solid #e7d9c4; }
.diff .col.yes { background:var(--teal-tint); border:1px solid #CFE3E2; }
.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 (Master Peace 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; }

/* Master Peace 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,#CFE3E2,#3A8488); }
.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 #CFE3E2; 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:#A7CCCB; }
/* 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) ===== */
/* Master Peace nav item rendered as a crimson button */
.mp-header .nav-mp-btn .wp-block-navigation-item__content { background:#2F6E3E !important; color:#fff !important; border-radius:40px; padding:.45em 1.15em !important; text-decoration:none !important; }
.mp-header .nav-mp-btn .wp-block-navigation-item__content:hover { background:#22582F !important; color:#fff !important; }

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

/* Master Peace nav button: no "current page" underline (it's a button, not a text link) */
body.page-id-16 .mp-header .nav-mp-btn .wp-block-navigation-item__content,
.mp-header .nav-mp-btn a[aria-current="page"],
.mp-header .nav-mp-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) {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
/* ===== /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 Master Peace 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-mp-btn{ border-bottom: 0 !important; margin-top: 1.2rem !important; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-mp-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:#E9F2F1; border-color:#A7CCCB; }
.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:#2F6E3E; 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),#124A4E); color:#E9F2F1; }
.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 ============================================================ */

/* ===== Emergence — barre supérieure (top bar) ===== */
.emg-topbar{background:#0C3538;color:#cfe3e2;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:.8rem;line-height:1;}
.emg-topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:1.4rem;padding:.5rem 0;}
.emg-topbar a{color:#cfe3e2;text-decoration:none;}
.emg-topbar a:hover{color:#fff;}
.emg-topbar .tb-home{margin-right:auto;}
.emg-topbar .has-sub{position:relative;}
.emg-topbar .sub{position:absolute;top:100%;right:0;background:#0C3538;min-width:230px;padding:.35rem 0;display:none;z-index:200;box-shadow:0 12px 26px rgba(0,0,0,.28);border-radius:0 0 10px 10px;}
.emg-topbar .has-sub:hover .sub,.emg-topbar .has-sub:focus-within .sub{display:block;}
.emg-topbar .sub a{display:block;padding:.5rem 1.1rem;white-space:nowrap;font-size:.82rem;}
.emg-topbar .sub a:hover{background:rgba(255,255,255,.07);color:#fff;}
@media (max-width:782px){.emg-topbar .wrap{gap:1rem;justify-content:center;}.emg-topbar .tb-home{margin-right:0;}.emg-topbar .sub{display:none !important;}}