/* ============================================================
   system.css · the MvE design system, 27 Sept 2026
   One type scale, one label, one button set, one black,
   one accent, three section spacings. Loaded last on every
   page. Every font-size, tracking, section padding and dark
   background elsewhere in the site now points at these tokens.
   ============================================================ */
:root{
  /* type scale: nine steps */
  --fs-label:  .72rem;                                   /* 11.5px  small caps labels   */
  --fs-small: .875rem;                                  /* 14px */
  --fs-body: clamp(.9375rem, .9rem + .15vw, 1rem);      /* 15 to 16px */
  --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 to 19px */
  --fs-h4: clamp(1.25rem, 1.1rem + .5vw, 1.625rem);    /* 20 to 26px */
  --fs-h3: clamp(1.375rem, 1.15rem + .8vw, 2rem);    /* 22 to 32px */
  --fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);     /* 30 to 48px */
  --fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 4.25rem);   /* 36 to 68px */
  --fs-display: clamp(2.625rem, 1.5rem + 3.8vw, 5.5rem);/* 42 to 88px */
  --fs-mega:   clamp(4rem, 1rem + 13vw, 15rem);          /* footer name                 */

  /* spacing: three section rhythms */
  --sp-s: clamp(3.5rem, 2rem + 4vw, 6rem);
  --sp-m: clamp(5rem, 3rem + 6vw, 9.5rem);
  --sp-l: clamp(6.5rem, 3rem + 9vw, 13rem);

  /* colour: one black, one paper, one accent */
  --ink:#121212; --espresso:#121212; --wood:#121212; --void:#121212;
  --char:#121212; --navy:#121212; --plum:#121212; --aubergine:#121212;
  --accent:#5A2438;   /* oxblood, used sparingly: active nav, hover, selection, map marker */
  --acc:#5A2438;
}

/* ---------- body copy ---------- */
html body{font-size:var(--fs-body);line-height:1.7}
html body p{line-height:1.7}

/* ---------- one label ---------- */
/* size and tracking are snapped at source; this sets the weight */
html body [class*="eyebrow"],html body .kicker,html body .label,html body .lbl{
  font-size:var(--fs-label);letter-spacing:.16em;font-weight:500}

/* ---------- one button set ---------- */
html body .btn,html body .wa-go,html body button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 34px;border-radius:0;border-width:1px;border-style:solid;
  font-family:var(--wide,'Archivo Expanded'),sans-serif;font-size:var(--fs-label);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1}
@media (max-width:560px){html body .btn{min-height:50px;padding:0 26px}}
/* text links with arrow: one style */
html body a.go,html body a.wk-go,html body a.quiet,html body a.sv-cap,html body a.hl{
  font-size:var(--fs-label);letter-spacing:.16em;padding-bottom:7px}

/* ---------- display headings: sentence case only ---------- */
html body .mixcase{text-transform:none;letter-spacing:-.012em}
html body .mixcase em{text-transform:none;font-size:1em;letter-spacing:-.005em}
html body .dh-title{text-transform:none;letter-spacing:-.018em;line-height:.95}

/* ---------- accent ---------- */
::selection{background:var(--accent);color:#FAFAF9}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------- WhatsApp button: smaller on phones, hidden over the hero ---------- */
@media (max-width:760px){
  html body .wa-btn{width:46px;height:46px;right:14px;bottom:14px}
  html body.wa-hold .wa-btn{opacity:0;transform:translateY(12px);pointer-events:none}
}

/* WhatsApp card text, injected by motion.js */
html body .wa-role,html body .wa-note{font-size:var(--fs-label);letter-spacing:.16em}

/* Shell Theory title: one word pair, not split across the page */
html body .splitline{justify-content:flex-start;gap:.28em;flex-wrap:wrap;text-transform:none;letter-spacing:-.012em}
@media (max-width:760px){html body .splitline{font-size:var(--fs-h2)}}

/* About: In the field, three photographs with a label and a sentence-case caption */
html body .field-grid .fcard{margin:0}
html body .field-grid .thumb{aspect-ratio:3/2;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.04)}
html body .field-grid figcaption{margin-top:16px}
html body .field-grid .k{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(241,241,240,.5)}
html body .field-grid .t{display:block;margin-top:6px;font-family:var(--display,'Cormorant'),serif;font-weight:300;font-size:var(--fs-lead);line-height:1.3;color:rgba(241,241,240,.88)}
/* About: closing quote band */
html body .ab-quote .ab-more{margin-top:26px;text-align:center}
html body .ab-quote .ab-more a{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px}
html body .ab-quote .ab-more a:hover{color:var(--ink)}
@media(min-width:900px){html body .voices{columns:2}}
/* "Read in full" style links: one text-link style, not tiny spaced italics */
html body .lux-caption a.hl{font-family:var(--sans);font-style:normal;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px}
html body .dark .lux-caption a.hl{color:var(--paper);border-bottom-color:rgba(250,250,249,.3)}


/* ===== Elite pass, 28 Sept: one footer sitewide ===== */
footer .ft-news{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:var(--sp-s) 0;border-bottom:1px solid rgba(250,250,249,.12)}
footer .ft-news p{margin:0;font-family:var(--dsp,'Cormorant','Cormorant Garamond',Georgia,serif);font-weight:300;font-size:var(--fs-h4);color:var(--paper)}
footer .ft-news p span{display:block;font-family:var(--sans);font-size:var(--fs-small);color:rgba(250,250,249,.6);margin-top:6px}
footer .ft-news .btn{border:1px solid var(--paper);color:var(--paper);background:transparent}
footer .ft-news .btn:hover{background:var(--paper);color:var(--ink)}
footer .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,56px);padding:var(--sp-m) 0 var(--sp-s);border-bottom:1px solid rgba(250,250,249,.12);margin-bottom:var(--sp-s)}
footer .ft-cols b{display:block;font-family:var(--sans);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,249,.6);margin-bottom:16px}
footer .ft-cols a{display:block;font-size:var(--fs-small);line-height:2.1;color:rgba(250,250,249,.8);transition:color .3s}
footer .ft-cols a:hover{color:var(--paper)}
@media(max-width:860px){footer .ft-cols{grid-template-columns:1fr 1fr;row-gap:36px}}

/* no two dark bands back to back: the closing band before the dark footer turns light */
.sec.dark:has(+ #site-footer),.sec.plum:has(+ #site-footer){background:#F1F1F0!important;background-image:none!important;color:var(--ink)!important;border-top:0!important}
.sec.dark:has(+ #site-footer) :is(h1,h2,h3,h4,blockquote,blockquote p,.said,b,strong),.sec.plum:has(+ #site-footer) :is(h1,h2,h3,h4,blockquote,blockquote p,.said,b,strong){color:var(--ink)!important}
.sec.dark:has(+ #site-footer) :is(p,li,cite,.cap,.lux-caption,span),.sec.plum:has(+ #site-footer) :is(p,li,cite,.cap,.lux-caption,span){color:var(--body)!important}
.sec.dark:has(+ #site-footer) .label,.sec.plum:has(+ #site-footer) .label{color:var(--muted)!important}
.sec.dark:has(+ #site-footer) a:not(.btn),.sec.plum:has(+ #site-footer) a:not(.btn){color:var(--ink)!important;border-color:var(--stone)!important}
.sec.dark:has(+ #site-footer) .btn,.sec.plum:has(+ #site-footer) .btn{background:transparent!important;color:var(--ink)!important;border:1px solid var(--ink)!important}
.sec.dark:has(+ #site-footer) .btn.primary,.sec.plum:has(+ #site-footer) .btn.primary{background:var(--ink)!important;color:var(--paper)!important}
.sec.dark:has(+ #site-footer) :is(input,textarea),.sec.plum:has(+ #site-footer) :is(input,textarea){color:var(--ink)!important;border-color:var(--stone)!important;background:transparent!important}
.sec.dark:has(+ #site-footer) .btn.primary span,.sec.plum:has(+ #site-footer) .btn.primary span{color:var(--paper)!important}
html body footer > .wrap{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
footer .ft-news p{font-family:var(--dsp,'Cormorant','Cormorant Garamond',Georgia,serif)!important;font-weight:300!important;font-size:var(--fs-h4)!important;color:var(--paper)!important}footer .ft-news p span{font-family:var(--sans)!important;font-size:var(--fs-small)!important}@media(min-width:761px){footer .fine{padding-right:72px}}

/* audit 29 Sept: WhatsApp button hides while scrolling down on phones (class set by system.js) */
@media (max-width:760px){html body.wa-down .wa-btn{opacity:0;transform:translateY(12px);pointer-events:none}html body .wa-btn{transition:opacity .3s ease,transform .3s ease}}

/* audit pass 2, 29 Sept: narrow two-column blocks stack on phones; current menu item no longer shifts right */
@media (max-width:600px){html body .fwk-stack{grid-template-columns:1fr!important;gap:28px!important}html body .cis-fig{grid-template-columns:1fr!important;gap:12px!important}html body .cis-fig figcaption{max-width:none!important}}
html body .mvmenu-primary a[aria-current="page"]{padding-left:0}

/* footer sign-up, inline email (30 Sep 2026) */
footer .ft-news p{max-width:560px}
footer .ft-news p span a{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer .ft-join{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:0}
footer .ft-join input{min-width:0;flex:1 1 220px;background:transparent;border:1px solid rgba(250,250,249,.35);color:var(--paper);padding:12px 16px;font:inherit;font-size:var(--fs-small);border-radius:0}
footer .ft-join input::placeholder{color:rgba(250,250,249,.5)}
footer .ft-join input:focus{outline:none;border-color:var(--paper)}
@media (max-width:640px){footer .ft-join{width:100%}footer .ft-join .btn{flex:1 1 100%}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:641px){footer .ft-join{flex:0 1 480px;flex-wrap:nowrap}footer .ft-join .btn{white-space:nowrap}}