/* ══════════════════════════════════════════════════════════════════════════
   meldoria.css — the site-wide layer.
   Loaded once from Webflow → Project Settings → Custom Code → Head.
   Everything on meldoria.com inherits from here: tokens, chrome, components.

   Sections
     1  Tokens            the Ember palette, type, space, motion
     2  Base              resets that must not fight Webflow
     3  Chrome            nav + footer, restyled in place (incl. mobile menu)
     4  Components        .m-* — the copy-from library
     5  Responsive
   Token values are transcribed from the Claude Design system
   (_ds/meldoria-design-system-871a5652…/tokens/*.css). Change them HERE, never
   in a page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --ember-base:#0E0E0F; --ember-surface:#161618; --ember-surface-2:#1C1C1F;
  --ember-gold:#CBB98A; --on-accent:#0E0E0F; --accent-hi:#D8C79C;
  --accent:#CBB98A; --accent-rgb:203,185,138;
  --text-heading:#E9E6DF; --text-body:#E4E1DB; --text-letter:#DDD9D2;
  --text-secondary:#B9B3A6; --text-tertiary:#8F8A80; --muted-rgb:200,196,188;

  --bg-body:var(--ember-base); --bg:var(--ember-surface); --bg-raised:var(--ember-surface-2);
  --surface-card:var(--ember-surface); --surface-glass:rgba(22,22,24,.72);

  --line-faint:rgba(255,255,255,.06); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --link:var(--accent); --link-hover:var(--text-heading);

  --font-display:'Cinzel',Georgia,'Times New Roman',serif;
  --font-body:'Lora',Georgia,'Times New Roman',serif;

  --fs-display:clamp(38px,6vw,72px); --fs-hero:34px; --fs-h1:30px; --fs-h2:22px; --fs-h3:16px;
  --fs-section-label:14px; --fs-body-lg:20px; --fs-body:18px; --fs-body-sm:16px;
  --fs-caption:15px; --fs-micro:11px;

  --track-mark:.14em; --track-caps:.12em; --track-micro:.16em; --track-hero:.03em; --track-h:.05em;
  --lh-tight:1.12; --lh-heading:1.24; --lh-body:1.72; --lh-refl:1.55;

  --r-pill:999px; --r-panel:20px; --r-card:14px; --r-thumb:10px;

  --aura:radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.07) 42%,transparent 62%);
  --aura-soft:radial-gradient(circle at 50% 30%,rgba(var(--accent-rgb),.16),transparent 55%);
  --aura-wide:radial-gradient(120% 90% at 50% 24%,rgba(var(--accent-rgb),.22),transparent 62%);
  --scrim-bottom:linear-gradient(to top,rgba(14,14,15,.92),rgba(14,14,15,.55) 38%,transparent 78%);
  --shadow-orb:inset 0 6px 26px rgba(0,0,0,.7),inset 0 -12px 34px rgba(0,0,0,.55);
  --shadow-lift:0 10px 34px rgba(0,0,0,.42);
  --glow-accent:0 0 24px rgba(var(--accent-rgb),.22);

  --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:160ms; --dur:280ms; --dur-slow:620ms;

  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:16px; --sp-5:20px; --sp-6:26px;
  --sp-7:30px; --sp-8:40px; --sp-9:56px; --sp-10:80px; --sp-11:120px; --sp-12:160px;

  --container-site:1180px; --container-narrow:720px;
  --measure-letter:620px; --measure-prose:760px;
  --page-pad:clamp(20px,5vw,72px);
  --band:clamp(120px,15vw,220px);    /* standard section rhythm — subtraction pass 2026-08-11 */
  --band-lg:clamp(160px,20vw,280px); /* statement sections */
}
/* the light/legible set — for report-style pages when they come */
.theme-manuscript{
  --ember-base:#E2D7BD; --ember-surface:#EFE6D3; --ember-surface-2:#F6F0E2;
  --accent:#8A6A30; --accent-rgb:138,106,48;
  --text-heading:#2A2318; --text-body:#3A3327; --text-letter:#4B4433;
  --text-secondary:#6C6350; --text-tertiary:#8A8069; --muted-rgb:74,64,46;
  --line-faint:rgba(46,38,20,.10); --line:rgba(46,38,20,.16); --line-strong:rgba(46,38,20,.26);
}

/* ── 1b · REMAP WEBFLOW'S OWN PALETTE ───────────────────────────────────────
   The Beacon theme paints everything through its own variables — .bg-dark,
   .section, .blog-grid-link and hundreds of other rules all resolve var(--dark),
   var(--primary-1) and so on. Overriding those variables once re-themes every
   Beacon rule on every page, instead of out-specificity-ing them one at a time.
   Webflow's originals, for reference: --dark #08262a (teal), --primary-1 #264c51,
   --_meldoria---gold-text #d4af37, --accent #ffc857.
   NOTE: --light and --white are deliberately NOT remapped. They carry dark text,
   so inverting them would make that text invisible; light blocks are handled in §3. */
:root{
  --dark:var(--ember-base);
  --_meldoria---dark-deep:var(--ember-base);
  --_meldoria---dark-light:var(--ember-surface);
  --primary-1:var(--ember-gold);
  --_meldoria---primary-1-2:var(--ember-gold);
  --_meldoria---gold-text:var(--ember-gold);
  --_meldoria---light-gold:var(--ember-gold);
  --accent:var(--ember-gold);
  --_meldoria---accent-2:var(--ember-gold);
  /* .section and .section-large paint var(--light) by default, so a bare section
     came out parchment on a black site. Remap it too — the six rules that use
     --dark as a TEXT colour are corrected explicitly in §3. */
  --light:var(--ember-base);
  --_meldoria---light-2:var(--ember-base);
  --border-white:var(--line);
  --_meldoria---border-white-2:var(--line);
  --border-white-bold:var(--line-strong);
  --_meldoria---border-white-bold-2:var(--line-strong);
}

/* ── 2 · BASE ───────────────────────────────────────────────────────────── */
body{background:var(--bg-body);color:var(--text-body);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,.display-heading,.heading{font-family:var(--font-display);color:var(--text-heading)}
a{color:var(--link)} a:hover{color:var(--link-hover)}
::selection{background:rgba(var(--accent-rgb),.28);color:var(--text-heading)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── 3 · CHROME — the Webflow nav & footer, restyled in place ───────────── */
/* Webflow ships .navbar-container.bg-dark.sticky-top.nav-light-text at specificity 0,4,0
   painting var(--dark) — the old Lifemap teal. Match its four classes and add html to
   win outright, rather than relying on load order. */
html .navbar-container,
html .navbar-container.bg-dark,
html .navbar-container.bg-dark.sticky-top,
html .navbar-container.bg-dark.sticky-top.nav-light-text{
  background-color:var(--surface-glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-faint);box-shadow:none}
html .navbar,html .navbar.w-nav,html .navbar-container .main-container{background-color:transparent}
@supports not (backdrop-filter:blur(1px)){
  html .navbar-container.bg-dark.sticky-top.nav-light-text{background-color:rgba(14,14,15,.94)}}
.navbar-row{align-items:center}
.logo-text,.logo-text.logo-light{
  font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:var(--track-mark);text-transform:uppercase;color:var(--text-heading)}
.nav-link,.nav-link.text-white{
  font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:rgba(var(--muted-rgb),.66);
  transition:color var(--dur) var(--ease)}
.nav-link:hover,.nav-link.w--current{color:var(--text-heading)}
.left-nav-links,.right-nav-links{display:flex;align-items:center;gap:28px}
/* hamburger */
.menu-button.w-nav-button{background:transparent;border-radius:var(--r-pill);padding:10px}
.menu-button.w-nav-button:hover{background:rgba(var(--accent-rgb),.10)}
.w-nav-button.w--open{background:rgba(var(--accent-rgb),.14)}
/* mobile drawer */
@media (max-width:991px){
  .nav-menu.w-nav-menu{background:var(--bg);border-top:1px solid var(--line-faint);
    padding:var(--sp-5) var(--page-pad) var(--sp-8)}
  .left-nav-links,.right-nav-links{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .nav-menu .nav-link{display:block;width:100%;padding:16px 0;font-size:var(--fs-section-label);
    border-bottom:1px solid var(--line-faint)}
  .div-block-17{display:none}
}
/* Beacon blocks that painted white or parchment. Each needs its TEXT colour set in
   the same rule, or it inherits dark-on-dark and vanishes. */
.bg-white,.section.bg-white,.bg-light,.section.bg-light,
.post-text-box,.featured-post-box,.boxed-form,.boxed-form.bg-white{
  background-color:transparent;color:var(--text-body)}
.bg-white h1,.bg-white h2,.bg-white h3,.bg-white h4,
.bg-light h1,.bg-light h2,.bg-light h3,
.featured-post-box h1,.featured-post-box h2,
.post-text-box h1,.post-text-box h2,.post-text-box h3{color:var(--text-heading)}

/* the six Beacon helpers that set colour:var(--dark) — now near-black on near-black */
.dark,.large-text.dark-text,.italic-text,
.small-caps-text.subtitle.dark,.small-caps-text.section-title.dark{color:var(--text-secondary)}
.large-text.dark{color:var(--text-secondary)}

/* featured story block.
   Beacon lays this out as a flex ROW — a fixed-width text box beside a filling image —
   and stacks it itself at 991px. An earlier `display:block` here collapsed that row, so on
   desktop the 448px box sat alone above a full-bleed, cropped photo. Keep Beacon's flex and
   scope the desktop widths above its own breakpoint so its mobile rules still work. */
.featured-post-link{display:flex;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:var(--surface-card)}
.featured-post-box{border:0;border-radius:0;background:transparent;text-align:left;
  align-items:flex-start;justify-content:center;gap:var(--sp-5);padding:clamp(30px,3.4vw,46px)}
.medium-heading.featured-post-heading{margin:0;max-width:none}
.featured-post-image-container{min-height:0}
.featured-post-image{height:100%}
/* Beacon paints this bar with --primary-1, which now remaps to gold — a gold slab carrying
   white text. Quiet it to match the grid cards. */
.featured-post-meta,.featured-post-meta div{background-color:transparent;padding:0;
  font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-tertiary);line-height:1.4}
.featured-post-meta{display:flex;gap:18px;flex-wrap:wrap}
.featured-post-meta .meta-category{color:var(--accent)}
@media (min-width:992px){
  .featured-post-box{flex:none;width:min(448px,40%);min-height:0}
  .featured-post-image-container{flex:1}
}
.featured-post-heading,.medium-heading{font-family:var(--font-display);font-weight:600;
  color:var(--text-heading);letter-spacing:var(--track-h);line-height:var(--lh-heading)}
.featured-post-link:hover .featured-post-heading{color:var(--accent)}
.small-caps-text{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
.squiggle,.bg-squiggle,.squiggle-container{display:none}   /* Beacon decoration, off-brand */

/* Beacon's accent button sets colour AND background to the same variable —
   .button.alternative.button-accent { color:var(--accent); background:var(--accent) }
   which is invisible text by construction. Every gold-ground button needs dark ink. */
.button.alternative.button-accent,
.button.bg-primary-1,.button.alternative.gold,
.button.alternative.button-accent div,.button.bg-primary-1 div,
.button.alternative.button-accent *,.button.bg-primary-1 *{
  color:var(--on-accent)}
.button.alternative.button-accent,.button.bg-primary-1,.button.alternative.gold{
  background-color:var(--accent);border-color:var(--accent);
  font-family:var(--font-display);font-weight:600;letter-spacing:var(--track-h);
  border-radius:var(--r-pill)}
.button.alternative.button-accent:hover,.button.bg-primary-1:hover{
  background-color:var(--accent-hi,#D8C79C);box-shadow:var(--glow-accent)}
.button.outline,.button.outline-white,.button.small.outline-white{
  color:var(--text-heading);border-color:var(--line-strong);border-radius:var(--r-pill)}
.button.outline:hover,.button.outline-white:hover{
  background-color:transparent;color:var(--accent);border-color:var(--accent)}

/* Beacon's floating back-to-top pill — off-brand and unrequested */
.back-to-top-container,.back-to-top-button{display:none!important}

/* Legacy page-level chrome, superseded by the shared Meldoria Nav/Footer components.
   Tagged with data-m-legacy on the element itself (2026-08-12) rather than matched by
   class, because .navbar-container is also worn by the real nav. Reversible: remove the
   attribute in the Designer and the element comes back. Delete the elements when settled. */
[data-m-legacy]{display:none!important}

/* one nav item left, so no hamburger — show it inline at every width */
html .menu-button,html .menu-button.w-nav-button{display:none}
@media (max-width:991px){
  html .nav-menu.w-nav-menu{position:static;display:flex;align-items:center;
    background:transparent;border-top:0;padding:0;margin-left:auto}
  html .nav-menu .nav-link{display:inline-block;width:auto;padding:0;border-bottom:0;
    font-size:var(--fs-micro)}
  html .left-nav-links,html .right-nav-links{flex-direction:row;gap:22px;width:auto}
}

/* ── blog cards — the index and the related-posts rail ───────────────────── */
.blog-grid-link{border:0;border-top:1px solid var(--line);background:none;
  padding-top:22px;display:block;transition:border-color var(--dur) var(--ease)}
.blog-grid-link:hover{border-top-color:rgba(var(--accent-rgb),.5)}
.blog-grid-link img{border-radius:var(--r-thumb)}
/* --fs-h3 is 16px, which is a caption size, not a headline — card titles read as small
   print next to a full-width thumbnail. */
.grid-post-heading{font-family:var(--font-display);font-weight:600;color:var(--text-heading);
  font-size:clamp(18px,2.1vw,21px);letter-spacing:var(--track-h);line-height:var(--lh-heading)}
.blog-grid-link:hover .grid-post-heading{color:var(--accent)}
.post-text-box{background:none;padding:18px 0 0}  /* was 0 — the title sat flush against the thumbnail */
.post-meta{margin-top:12px}
.post-meta,.post-meta div{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-tertiary)}
.meta-category,a.meta-category{color:var(--accent)}

/* ── the article page — where the traffic actually lands ─────────────────── */
.display-heading{font-family:var(--font-display);font-weight:600;color:var(--text-heading);
  letter-spacing:var(--track-hero);line-height:var(--lh-heading)}
.w-richtext{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-letter)}
.w-richtext>*+*{margin-top:1.35em}
.w-richtext h2{font-family:var(--font-display);font-weight:600;color:var(--text-heading);
  font-size:clamp(24px,3vw,32px);letter-spacing:var(--track-h);line-height:var(--lh-heading);
  margin-top:2.2em}
.w-richtext h3{font-family:var(--font-display);font-weight:600;color:var(--text-heading);
  font-size:var(--fs-h2);letter-spacing:var(--track-h);margin-top:1.8em}
.w-richtext a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.34);
  text-decoration:none}
.w-richtext a:hover{border-bottom-color:var(--accent)}
.w-richtext strong,.w-richtext b{color:var(--text-heading);font-weight:600}
.w-richtext ul,.w-richtext ol{padding-left:1.3em}
.w-richtext li+li{margin-top:.5em}
.w-richtext li::marker{color:var(--accent)}
.w-richtext blockquote{border-left:2px solid rgba(var(--accent-rgb),.42);padding-left:1.2em;
  font-style:italic;color:var(--text-secondary);margin-left:0}
.w-richtext img{border-radius:var(--r-card)}
.alan-voice-intro{color:var(--text-secondary);font-style:italic}

/* footer — the Beacon footer, restyled to Ember and quietened.
   The kitchen-sink rows are hidden from the component; what remains is the
   wordmark, the tagline and three quiet links (see .m-footer). */
/* the world field is position:fixed, so it paints above any UNpositioned element.
   The footer therefore needs its own stacking position or it disappears behind it. */
.footer{position:relative;z-index:1;
  background:var(--bg-body);border-top:1px solid var(--line-faint);
  padding:var(--sp-10) var(--page-pad) var(--sp-8)}
.footer a{color:var(--text-secondary);text-decoration:none;
  font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;
  transition:color var(--dur) var(--ease)}
.footer a:hover{color:var(--accent)}
.footer .footer-heading,.footer h5{font-family:var(--font-display);color:var(--text-heading);
  font-size:var(--fs-h3);letter-spacing:var(--track-h)}
.footer .text-block-15,.footer .text-block-16{color:var(--text-tertiary);
  font-family:var(--font-body);font-size:var(--fs-caption)}
.footer .logo-text{font-family:var(--font-display);font-weight:600;font-size:21px;
  letter-spacing:var(--track-mark);text-transform:uppercase;color:var(--text-heading)}
.footer .form-input,.footer input[type=email]{background:transparent;color:var(--text-body);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 20px;
  font-family:var(--font-body)}
.footer .form-input::placeholder{color:var(--text-tertiary)}
.footer .social-link-image{filter:invert(88%) sepia(12%) saturate(420%) hue-rotate(3deg) brightness(92%);
  opacity:.5;transition:opacity var(--dur) var(--ease)}
.footer .social-link-item:hover .social-link-image{opacity:1}
.footer-bottom-row{border-top:1px solid var(--line-faint);margin-top:var(--sp-8);padding-top:var(--sp-6)}

/* the minimal footer block from the design — wordmark, tagline, three links */
.m-footer{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:baseline;
  justify-content:space-between;max-width:var(--container-site);margin-inline:auto}
.m-footer__mark{font-family:var(--font-display);font-weight:600;font-size:21px;
  letter-spacing:var(--track-mark);text-transform:uppercase;color:var(--text-heading)}
.m-footer__tag{font-family:var(--font-body);font-style:italic;font-size:var(--fs-caption);
  color:var(--text-tertiary);margin-top:12px}
.m-footer__links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
@media (max-width:600px){.m-footer{gap:var(--sp-6)}.m-footer__links{gap:20px}}

/* ── 3b · THE WHEEL HUB ──────────────────────────────────────────────────
   /wheel-of-life loads its own `wheel-hub.css` from inside the page embed, authored
   against the Manuscript (parchment) palette: near-black ink on a light ground. On the
   Ember site that meant body text at #3A3327 and headings at #2A2318 — near-invisible —
   with #E2D7BD rules glaring across them.

   Every colour in that sheet funnels through five custom properties on `.wol`, so
   remapping those five re-themes the whole hub. `html` prefix because the hub sheet
   loads from the body, i.e. AFTER this one — specificity has to win, not source order.
   (Same lever as §1b for Beacon and §3 for the navbar.)

   Fold wheel-hub.css into this file when the hub is next touched; the page should not
   be carrying its own stylesheet at all. */
html .wol{
  --a:var(--accent);
  --ink:var(--text-heading);
  --body:var(--text-body);
  --mut:var(--text-tertiary);
  --rule:var(--line);
  /* the hub sheet sets max-width but no inline padding, so on a phone the prose ran
     edge-to-edge. border-box keeps the measure at 760px rather than 760+padding. */
  box-sizing:border-box;padding-inline:22px;font-size:17.5px}
@media (max-width:600px){
  html .wol{font-size:17px;padding-inline:20px}   /* hub sheet drops to 16px — too small for a long read */
  html .wol h2{margin-top:1.8em}
}

/* The scorer's range input is 3px TALL, so the touch target was 3px no matter how big the
   thumb looked. Give the input a real height, move the visible track onto the pseudo-element,
   and size the thumb for a finger. */
html .mld-row input[type=range]{height:34px;background:transparent}
html .mld-row input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:999px;background:var(--line)}
html .mld-row input[type=range]::-moz-range-track{
  height:3px;border-radius:999px;background:var(--line)}
html .mld-row input[type=range]::-webkit-slider-thumb{
  width:26px;height:26px;margin-top:-11.5px}      /* centre the thumb on a 3px track */
html .mld-row input[type=range]::-moz-range-thumb{width:26px;height:26px}
/* the hub's in-body handoff — quiet, but it has to read as an offer rather than a footnote */
html .wol-cta{border-left:2px solid rgba(var(--accent-rgb),.45);padding:2px 0 2px 18px;
  margin:1.8em 0;color:var(--text-secondary);font-style:normal}
html .wol-cta strong{color:var(--text-heading);display:block;margin-bottom:6px}
html .wol-cta a{color:var(--accent);font-weight:600}
html .mld-card + .wol-cta{margin-top:22px}
html .mld-row label{font-size:15px}
html .mld-val{font-size:15px}
@media (max-width:600px){
  html .mld-row input[type=range]{height:40px}
  html .mld-row input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-13.5px}
  html .mld-row input[type=range]::-moz-range-thumb{width:30px;height:30px}
  html .mld-controls{gap:16px}
}

/* ── 3c · THE ATTACHMENT QUIZ ────────────────────────────────────────────
   Lives here rather than in its own sheet, unlike the wheel hub — that page loads its
   own CSS from the body and needed an `html` override to re-theme (§3b). One stylesheet. */
/* .m-wrap and .mq-wrap both set max-width at 0,1,0 and .m-wrap is declared later in
   this file, so it won. The quiz stretched to the full container while the prose inside
   stayed at 760px and centred — the items looked shoved to the left. Match both classes
   to win on specificity instead of relying on order (same fix as the navbar in §3). */
.mq-wrap,.m-wrap.mq-wrap{max-width:var(--measure-prose);margin-inline:auto}
.mq-row{padding:22px 0;border-bottom:1px solid var(--line-faint)}
.mq-row:last-child{border-bottom:0}
.mq-stmt{font-size:var(--fs-body);line-height:1.5;color:var(--text-body);margin:0 0 14px}
.mq-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:420px}
/* 46px minimum — the wheel sliders taught us what a small target costs on a phone */
.mq-dot{min-height:46px;border:1px solid var(--line-strong);border-radius:var(--r-thumb);
  background:transparent;color:var(--text-tertiary);font-family:var(--font-display);
  font-size:var(--fs-body);cursor:pointer;transition:all var(--dur) var(--ease)}
.mq-dot:hover{border-color:var(--accent);color:var(--text-heading)}
.mq-dot.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.mq-anchors{display:flex;justify-content:space-between;max-width:420px;margin-top:8px;
  font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-tertiary)}
.mq-progress{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-tertiary)}
.mq-result{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.mq-grid{width:100%;max-width:340px;margin:0 auto;display:block}
.mq-axis{stroke:var(--line);stroke-width:.5}
.mq-quad{fill:rgba(var(--accent-rgb),.05);stroke:var(--line-faint);stroke-width:.4}
.mq-qlabel{font-family:'Cinzel',serif;font-size:4px;fill:var(--text-tertiary);
  letter-spacing:.1em;text-transform:uppercase}
.mq-alabel{font-family:'Cinzel',serif;font-size:3.4px;fill:var(--text-tertiary);letter-spacing:.14em}
.mq-dotmark{fill:var(--accent);opacity:0;transition:opacity var(--dur) var(--ease)}
.mq-scores{display:flex;gap:34px;justify-content:center;margin:22px 0 6px}
.mq-score{font-family:var(--font-display);font-size:26px;color:var(--accent);display:block;line-height:1.1}
.mq-scorelabel{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-tertiary)}
.mq-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
@media (max-width:600px){
  .mq-scale{gap:8px;max-width:none}
  .mq-anchors{max-width:none}
  .mq-dot{min-height:50px}
}

/* ── 3e · LOVE LANGUAGE RANKING ──────────────────────────────────────────
   Reuses the quiz item styles from §3c (.mq-row/.mq-scale/.mq-dot); only the result
   differs — a ranked bar chart rather than a quadrant plot. */
.m-ll{display:flex;flex-direction:column;gap:14px;margin:6px 0 4px}
.m-ll__row{display:grid;grid-template-columns:minmax(120px,10em) 1fr auto;gap:14px;align-items:center}
.m-ll__label{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-tertiary)}
.m-ll__row.is-top .m-ll__label{color:var(--text-heading)}
.m-ll__track{height:8px;border-radius:999px;background:var(--line-faint);overflow:hidden}
.m-ll__fill{display:block;height:100%;border-radius:999px;
  background:rgba(var(--accent-rgb),.42);transition:width .5s var(--ease)}
.m-ll__row.is-top .m-ll__fill{background:var(--accent)}
.m-ll__val{font-family:var(--font-display);font-size:var(--fs-caption);
  color:var(--text-tertiary);min-width:2ch;text-align:right}
@media (max-width:600px){
  .m-ll__row{grid-template-columns:1fr auto;gap:6px 10px}
  .m-ll__label{grid-column:1/-1}
}

/* ── 3f · BIG FIVE PROFILE ───────────────────────────────────────────────
   A position between two named poles, not a bar that fills up. Low conscientiousness is
   spontaneity, not a shortfall — a filling bar would smuggle in a judgement the model
   does not make. Item styles come from §3c. */
.m-bf{display:flex;flex-direction:column;gap:var(--sp-7);margin-top:8px}
.m-bf__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.m-bf__trait{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--text-heading);
  letter-spacing:var(--track-h)}
.m-bf__word{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
.m-bf__track{position:relative;height:8px;margin-top:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--line-faint),rgba(var(--accent-rgb),.20),var(--line-faint))}
.m-bf__mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--line-strong)}
.m-bf__mark{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;
  transform:translateY(-50%);border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 4px var(--bg-body);transition:left .5s var(--ease)}
.m-bf__poles{display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-tertiary)}
.m-bf__note{margin:12px 0 0;font-size:var(--fs-caption);line-height:1.55;
  color:var(--text-secondary);max-width:42em}

/* ── 3g · DOSHA — three-option rows ──────────────────────────────────────
   Not a 1-5 scale: each question offers three descriptions and you pick the one that fits,
   so the options need to be readable blocks rather than numbered buttons. */
.m-dosha__opts{display:grid;gap:10px}
.m-dosha__opt{text-align:left;min-height:52px;padding:13px 16px;border-radius:var(--r-thumb);
  border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:1.45;cursor:pointer;
  transition:all var(--dur) var(--ease)}
.m-dosha__opt:hover{border-color:var(--accent);color:var(--text-heading)}
.m-dosha__opt.on{background:rgba(var(--accent-rgb),.12);border-color:var(--accent);
  color:var(--text-heading)}
@media (min-width:700px){.m-dosha__opts{grid-template-columns:repeat(3,1fr)}}

/* ── 3d · SOCIAL PROOF FEED ──────────────────────────────────────────────
   Live cards of the newest published archetype profiles. The section is hidden by the
   script until there are enough of them to actually read as proof — see profiles-feed.js. */
.m-proof{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--sp-5);margin-top:38px}
.m-proof__card{display:flex;gap:16px;align-items:center;text-decoration:none;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface-card);transition:border-color var(--dur) var(--ease),
  transform var(--dur) var(--ease)}
.m-proof__card:hover{border-color:rgba(var(--accent-rgb),.42);transform:translateY(-1px)}
.m-proof__emblem{width:54px;height:54px;flex:none;border-radius:var(--r-thumb);
  object-fit:contain;background:var(--ember-base)}
.m-proof__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-proof__name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);
  color:var(--text-heading);letter-spacing:var(--track-h)}
.m-proof__hero{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
.m-proof__essence{font-size:var(--fs-caption);color:var(--text-tertiary);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){
  .m-proof{grid-template-columns:1fr;gap:var(--sp-4)}
}

/* ── 4 · COMPONENTS — the copy-from library ─────────────────────────────
   Everything below is prefixed .m- and is safe to drop into any HtmlEmbed.
   Nothing here depends on page context, so a block copied from one page
   behaves identically on the next. See style-guide.html for live markup.  */

/* 4.1 layout ---------------------------------------------------------- */
.m-sec{position:relative;padding:var(--band) var(--page-pad)}
.m-sec--lg{padding-block:var(--band-lg)}
.m-sec--flush{padding-inline:0}
.m-wrap{max-width:var(--container-site);margin-inline:auto}
.m-narrow{max-width:var(--container-narrow);margin-inline:auto}
.m-prose{max-width:var(--measure-prose);margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)}
.m-prose--left{text-align:left;align-items:flex-start}
/* the banded section — a darker plate that lets the world field show through between */
.m-band{background:linear-gradient(to bottom,rgba(14,14,15,0),rgba(14,14,15,.86) 14%,
  rgba(14,14,15,.86) 86%,rgba(14,14,15,0))}
/* the world field is brightest mid-page, which is exactly where the cards sit.
   .m-shade is a wider, softer floor for sections that must stay readable over it. */
.m-shade{background:radial-gradient(120% 80% at 50% 50%,rgba(14,14,15,.90),rgba(14,14,15,.62) 70%,transparent)}
.m-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.m-center{text-align:center}

/* 4.2 type ------------------------------------------------------------ */
.m-display{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);
  letter-spacing:var(--track-hero);line-height:var(--lh-tight);color:var(--text-heading);
  margin:0;text-wrap:balance}
.m-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.8vw,46px);
  letter-spacing:var(--track-hero);line-height:var(--lh-heading);color:var(--text-heading);
  margin:0;text-wrap:balance}
.m-h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);
  letter-spacing:var(--track-h);line-height:var(--lh-heading);color:var(--text-heading);margin:0}
.m-lead{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-secondary);
  margin:0;max-width:28em;text-wrap:pretty}
.m-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary);margin:0}
.m-note{font-style:italic;font-size:var(--fs-body);line-height:var(--lh-refl);color:var(--accent);
  margin:0;max-width:30em;text-wrap:pretty}
.m-label{font-family:var(--font-display);font-size:var(--fs-section-label);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
.m-micro{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-tertiary)}
.m-eyebrow{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--accent);line-height:1.7;max-width:34em}

/* 4.3 actions --------------------------------------------------------- */
.m-btn{display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-body-sm);letter-spacing:var(--track-h);padding:13px 30px;
  border-radius:var(--r-pill);border:1px solid var(--accent);background:var(--accent);
  color:#161618;text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.m-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-accent);color:#161618}
.m-btn--ghost{background:transparent;color:var(--text-heading);border-color:var(--line-strong);
  padding:10px 22px;font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase}
.m-btn--ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.m-btn--text{background:none;border:0;padding:0;color:var(--accent);
  font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;
  border-bottom:1px solid rgba(var(--accent-rgb),.34);border-radius:0}
.m-btn--text:hover{transform:none;box-shadow:none;color:var(--text-heading);
  border-bottom-color:var(--text-heading)}
.m-fine{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-tertiary)}

/* 4.4 surfaces -------------------------------------------------------- */
.m-card{display:flex;flex-direction:column;gap:var(--sp-4);padding:34px 0 0;
  border:0;background:none;border-top:1px solid var(--line)}
.m-card--lead{border-top-color:rgba(var(--accent-rgb),.42)}
.m-card--soon{border-top-color:var(--line-faint);opacity:.66}
.m-card__action{margin-top:auto;padding-top:var(--sp-5)}
.m-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-9)}
.m-panel{border:1px solid var(--line-strong);border-radius:var(--r-panel);
  background:var(--surface-card);overflow:hidden;box-shadow:var(--shadow-lift)}
.m-panel__top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line-faint)}
.m-panel__body{padding:44px 40px 40px;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.m-tag{align-self:flex-start;font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:rgba(var(--muted-rgb),.72);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 14px}
.m-tag--on{color:var(--accent);border-color:rgba(var(--accent-rgb),.34)}

/* 4.5 the emblem plate — the signature object ------------------------- */
.m-plate{position:relative;aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;
  background:var(--ember-base);box-shadow:var(--shadow-orb);border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease)}
.m-plate--lg{width:min(300px,72vw);border-radius:var(--r-panel);border:0}
.m-plate:hover{border-color:var(--line-strong)}
.m-plate > i{position:absolute;display:block}
.m-plate .aura{inset:0;background:var(--aura)}
.m-plate .orb{left:50%;top:44%;transform:translate(-50%,-50%);width:33%;aspect-ratio:1;
  border-radius:999px;background:radial-gradient(circle,rgba(var(--accent-rgb),.56),transparent 69%);
  filter:blur(7px)}
.m-plate .frame{inset:13%;border:1px solid rgba(var(--accent-rgb),.12);border-radius:12px}
.m-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.m-crest{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.m-crest .m-plate{width:100%}
.m-crest figcaption{font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-letter);text-align:center}
/* the 2-3 word nature under each hero name — sentence case on purpose, so it reads as
   description rather than a second label competing with the name above it */
.m-crest__tag{display:block;margin-top:6px;font-family:var(--font-body);
  font-size:var(--fs-caption);letter-spacing:0;text-transform:none;
  color:var(--text-tertiary);text-wrap:balance}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(18px,2.4vw,30px)}
.m-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-hero);
  letter-spacing:var(--track-h);color:var(--text-heading)}
.m-creed{font-style:italic;font-size:var(--fs-body);line-height:var(--lh-refl);
  color:var(--accent);margin:0;max-width:22em;text-wrap:pretty}

/* 4.6 hero ------------------------------------------------------------ */
.m-hero{position:relative;min-height:88svh;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.m-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.9)}
.m-hero__veil{position:absolute;inset:0}
.m-hero__veil--aura{background:var(--aura-wide)}
.m-hero__veil--scrim{background:var(--scrim-bottom)}
.m-hero__veil--vignette{background:radial-gradient(70% 60% at 50% 44%,transparent,
  rgba(14,14,15,.4) 78%,rgba(14,14,15,.72))}
.m-hero__body{position:relative;width:100%;max-width:var(--container-site);
  padding:120px var(--page-pad) 128px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:0}
.m-hero .m-display{max-width:12em;text-shadow:0 2px 44px rgba(14,14,15,.7)}
.m-hero .m-lead{color:var(--text-letter);max-width:30em;text-shadow:0 1px 18px rgba(14,14,15,.8)}
.m-hero .m-eyebrow{text-shadow:0 1px 20px rgba(14,14,15,.9)}
.m-cue{width:1px;height:46px;background:linear-gradient(to bottom,rgba(var(--accent-rgb),.62),transparent);
  animation:m-cue 2800ms var(--ease) infinite}
@keyframes m-cue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1}}

/* 4.7 the world field ------------------------------------------------- */
.m-world{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.m-above{position:relative;z-index:1}

/* 4.8 motion ---------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── 5 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:767px){
  :root{--fs-body-lg:18px;--fs-body:17px;--fs-hero:27px;--fs-h1:24px}
  .m-hero{min-height:76svh}
  .m-hero__body{padding:92px var(--page-pad) 96px}
  .m-cards{gap:var(--sp-8)}
  .m-card{padding-top:26px}
  .m-panel__body{padding:32px 24px 28px}
  .m-card{padding:24px}
  .m-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:16px}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .m-cue{animation:none}
  .m-btn:hover{transform:none}
}