/* ==========================================================================
   PRIMAL MOVES VENICE — DESIGN 7
   Visual territory: QUIET WELLNESS  (after mossvenice.com)
   calm · wabi-sabi · unhurried · warm · plainly spoken

   The deliberate inverse of design-6. Where that shouted in bold uppercase
   with chartreuse, this speaks in lowercase light type on warm cream, with
   sage and clay, and separates things with air rather than rules.

   Type      Helvetica Neue. HYBRID CASE, per the working session: the hero
             headline, nav, buttons and kickers are UPPERCASE to match the
             parent brand; section headings stay lowercase so the page keeps
             design-8's warmth. To go fully uppercase, see the CASE block at
             the foot of this file — it is four rules.
             Inter is the webfont fallback for non-Apple devices.
             Caveat for handwritten pointers only.
   Colour    warm cream, soft charcoal, sage, clay — no pure black, no neon
   Devices   generous margins, full-bleed photography, soft corners,
             text-link CTAs, one idea per screen
   ========================================================================== */

:root{
  /* ---- BRAND PALETTE (brand/palette.md) — green as the accent ---------- */
  --ink:#132238;          /* navy, the dark neutral — body copy, headings   */
  --deep:#303F16;         /* forest — dark sections, footer, primary button */
  --paper:#EDE8D2;        /* cream — the default ground                     */
  --paper-2:#DCCFB9;      /* taupe — alternate sections                     */
  --paper-3:#CFC6B0;      /* sage grey, lifted — placeholders, panels       */
  --mid:#57534A;          /* body-secondary — 6.2:1 on cream                */
  --soft:#6B685A;         /* captions, meta — 4.6:1 on cream                */
  --line:#CFC5AE;         /* hairlines                                      */
  --sage:#303F16;         /* THE ACCENT: forest green                       */
  --sage-btn:#303F16;     /* button fill — cream label clears 9.2:1         */
  --sage-txt:#4C5B2A;     /* the accent when it carries words — 6.0:1       */
  --sage-dk:#22300F;
  --clay:#AE411C;         /* burnt red — the secondary accent, used sparely */
  --cream:#F7F3E7;

  /* palette colours held for photography surrounds and panels */
  --pm-blush:#CD826A; --pm-orange:#C16838; --pm-mushroom:#A68460;
  --pm-olive:#888151; --pm-dark-olive:#453A1D; --pm-light-sage:#B9B784;
  --pm-rust:#9F663A;  --pm-brown:#945A38;    --pm-gold:#CE9C3B;

  /* Cherish, warmer still */
  --mustard:#CE9C3B;
  --oxblood:#7A3A34;
  --cherish-paper:#F3E9D9;

  --sans:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --serif:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;

  --maxw:1140px;
  --gut:clamp(22px,6vw,84px);
  --radius:3px;
}
/* --------------------------------------------------------------------------
   DERIVED TINTS
   Every light-on-dark tint, muted label and calendar mark used to be a
   hardcoded hex, which meant a colour swap in the EDIT panel moved the big
   surfaces and left the small type behind. They are tokens now: a literal
   first, so an old browser still gets the right colour, then the same token
   mixed from the live palette — so changing the accent or the dark ground
   carries every one of these with it.
   -------------------------------------------------------------------------- */
:root{
  --on-dark:#C9C4B0;         /* body text on the dark sections and footer */
  --on-dark-2:#D6D1BE;       /* a step brighter — cards on dark           */
  --on-dark-strong:#E2DECF;  /* links on dark                             */
  --on-dark-soft:#ADA894;    /* labels, fine print on dark                */
  --accent-soft:#B9C79E;     /* the accent, lifted to read on dark        */
  --accent-deep:#3F4A26;     /* the accent, dropped to read on taupe      */
  --ink-soft:#4E4A42;        /* muted type on the pale grounds            */
  --day-mark:#E2DCCE;        /* a calendar day with something on it       */
  --day-mark-dark:#43552A;   /* the same, on dark                         */

  /* Tea & Cafe runs its own warmer palette */
  --cherish-ink:#33201A; --cherish-mid:#63492F; --cherish-soft:#7A6046;
  --cherish-line:#DCC9AC; --cherish-paper-2:#EADCC5; --cherish-paper-3:#E0CEB2;
  --cherish-deep:#5E2A26; --cherish-on-dark:#F7EEDF;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  :root{
    --on-dark:        color-mix(in srgb, var(--cream) 78%, var(--deep));
    --on-dark-2:      color-mix(in srgb, var(--cream) 86%, var(--deep));
    --on-dark-strong: color-mix(in srgb, var(--cream) 92%, var(--deep));
    --on-dark-soft:   color-mix(in srgb, var(--cream) 60%, var(--deep));
    --accent-soft:    color-mix(in srgb, var(--sage) 34%, var(--cream));
    --accent-deep:    color-mix(in srgb, var(--sage) 82%, var(--ink));
    --ink-soft:       color-mix(in srgb, var(--ink) 62%, var(--soft));
    --day-mark:       color-mix(in srgb, var(--sage) 12%, var(--paper-2));
    --day-mark-dark:  color-mix(in srgb, var(--sage) 74%, var(--cream));
    --cherish-mid:    color-mix(in srgb, var(--cherish-ink) 74%, var(--cherish-paper));
    --cherish-soft:   color-mix(in srgb, var(--cherish-ink) 58%, var(--cherish-paper));
    --cherish-line:   color-mix(in srgb, var(--cherish-ink) 18%, var(--cherish-paper));
    --cherish-paper-2:color-mix(in srgb, var(--cherish-ink) 9%,  var(--cherish-paper));
    --cherish-paper-3:color-mix(in srgb, var(--cherish-ink) 16%, var(--cherish-paper));
    --cherish-deep:   color-mix(in srgb, var(--oxblood) 78%, var(--cherish-ink));
    --cherish-on-dark:color-mix(in srgb, var(--cherish-paper) 88%, #fff);
  }
}


*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100%;scroll-behavior:smooth}
body{
  overflow-x:hidden;max-width:100%;
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;
  color:var(--mid);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 var(--gut);width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[id]{scroll-margin-top:90px}

/* --------------------------------------------------------------- TYPE ---- */
.display{
  font-family:var(--sans);font-weight:300;color:var(--ink);
  font-size:clamp(40px,7.4vw,96px);line-height:1.02;
  letter-spacing:-.012em;text-transform:lowercase;
}
.display-sm{
  font-family:var(--sans);font-weight:300;color:var(--ink);
  font-size:clamp(30px,4.6vw,58px);line-height:1.08;
  letter-spacing:-.008em;text-transform:lowercase;
}
.ed,.ed-it{font-family:var(--sans);font-weight:300;text-transform:none;letter-spacing:-.01em}
.ed-it{font-style:italic}
h1,h2,h3,h4{font-weight:300;color:var(--ink);letter-spacing:-.006em;line-height:1.12}
h2{font-size:clamp(26px,3.4vw,44px);text-transform:lowercase}
h3{font-size:clamp(19px,1.9vw,24px);text-transform:lowercase;letter-spacing:0}
p{max-width:36em}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:var(--mid);max-width:33em}
.kicker{
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--soft);margin-bottom:22px;
}
/* no leading rule — air does the separating here */
.aside{font-family:var(--sans);font-style:italic;font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;color:var(--clay);max-width:30em}
.hand{font-family:var(--hand);font-size:clamp(19px,2.1vw,27px);line-height:1.2;color:var(--clay);transform:rotate(-2.2deg);display:inline-block}

/* --------------------------------------------------------------- NAV ----- */
header.site{background:var(--paper);position:sticky;top:0;z-index:60}
.nav-inner{display:flex;align-items:center;gap:28px;padding:26px var(--gut);
  max-width:1440px;margin:0 auto}
.brand{font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink);flex:none;line-height:1.4}
.brand span{display:block;font-size:9.5px;letter-spacing:.3em;color:var(--soft)}
.nav-links{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav-links a{font-size:13.5px;font-weight:400;letter-spacing:.04em;text-transform:lowercase;
  color:var(--mid);padding-bottom:2px;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav-links a.current{color:var(--ink);border-bottom-color:var(--sage)}
.nav-cta{display:flex;gap:20px;flex:none;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.16em;text-transform:lowercase;
  padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-menu{display:none;background:var(--paper)}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;padding:8px var(--gut) 34px}
.mobile-menu li{border-bottom:1px solid var(--line)}
.mobile-menu li:last-child{border-bottom:0}
.mobile-menu a{display:block;padding:18px 0;font-size:22px;font-weight:300;
  text-transform:lowercase;color:var(--ink);letter-spacing:-.01em}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:inline-block;margin-left:auto}
  .nav-cta{gap:14px}
}
@media (max-width:620px){
  .nav-cta .btn.secondary{display:none}
  .nav-inner{gap:14px;padding:18px var(--gut)}
  .nav-cta .btn{padding:12px 18px;font-size:11.5px;letter-spacing:.05em}
}
@media (max-width:400px){
  .nav-cta .btn{padding:11px 14px;font-size:10.5px}
  .brand{font-size:13px;letter-spacing:.1em}
}

/* --------------------------------------------------------------- BTN -----
   Moss uses quiet text links far more than filled buttons. One soft pill
   for the primary conversion; everything else is an underline. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:100px;padding:15px 30px;
  font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:lowercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{border-color:var(--ink)}
.btn.sage{background:var(--sage);border-color:var(--sage);color:var(--cream)}
.btn.sage:hover{background:var(--sage-dk);border-color:var(--sage-dk)}
.btn.secondary{background:transparent}
.btn.on-dark{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn.on-dark:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
.btn.ghost-dark{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.4)}
.btn.ghost-dark:hover{border-color:var(--cream)}
.btn.lg{padding:18px 38px;font-size:13.5px}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
@media (max-width:520px){ .cta-row{flex-direction:column;align-items:stretch} }

.link-arrow{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:lowercase;
  color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px}
.link-arrow:hover{border-bottom-color:var(--ink)}

/* ------------------------------------------------------------ SECTIONS --- */
section{padding:clamp(72px,13vh,150px) 0}   /* much more air than design-6 */
section.pad-sm{padding:clamp(52px,8vh,96px) 0}
section.ink{background:var(--deep);color:var(--on-dark)}
section.ink .display,section.ink .display-sm,section.ink h2,section.ink h3{color:var(--cream)}
section.ink .kicker{color:var(--accent-soft)}
section.ink .lede,section.ink p{color:var(--on-dark)}
section.ink .aside{color:var(--on-dark-soft)}
section.alt{background:var(--paper-2)}
section.flush{padding:0}
.section-head{margin-bottom:clamp(40px,6vw,72px)}
.section-head.row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap}

/* ---------------------------------------------------------------- HERO --- */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--paper-3)}
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,28,22,.30) 0%,rgba(30,28,22,.08) 38%,rgba(30,28,22,.72) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
  padding:0 var(--gut) clamp(48px,9vh,96px);color:var(--cream)}
.hero .display{color:var(--cream);max-width:16ch;text-shadow:0 1px 24px rgba(20,18,14,.45)}
.hero .display em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none}
.hero-sub{color:rgba(251,248,243,.9);font-size:clamp(16px,1.5vw,19px);
  max-width:30em;margin-top:26px;line-height:1.7}
.hero .cta-row{margin-top:38px}
/* the hero sits under the nav (flush pulls it up), so this has to clear it —
   otherwise the palm disappears behind the bar and the two lines look shoved
   into the corner */
.hero.flush .hero-meta{top:calc(var(--nav-h,84px) + clamp(20px,3vh,38px))}
.hero-meta{position:absolute;top:clamp(24px,5vh,52px);right:var(--gut);z-index:2;
  text-align:right;color:rgba(251,248,243,.85);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;line-height:2.4}
@media (max-width:760px){ .hero-meta{display:none} }

/* interior page hero — quieter, shorter */
.phero{position:relative;min-height:clamp(340px,44vh,460px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--paper-3)}
.phero>img,.phero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,28,22,.20) 0%,rgba(30,28,22,.30) 45%,rgba(30,28,22,.78) 100%)}
.phero-inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
  padding:0 var(--gut) clamp(34px,5vh,58px);color:var(--cream)}
.phero .display-sm,.phero .display{color:var(--cream);text-shadow:0 1px 20px rgba(20,18,14,.5)}
.phero p{color:rgba(251,248,243,.9);margin-top:16px;max-width:32em}
.phero .kicker{color:rgba(251,248,243,.7)!important}

/* ------------------------------------------------------- TWO WAYS IN ----- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.way{padding:clamp(38px,5vw,64px);background:var(--paper);
  display:flex;flex-direction:column;gap:14px}
.way.feature{background:var(--paper-2)}
.way .num{display:none}                      /* the numbering was a d6 device */
.way h3{font-size:clamp(23px,2.6vw,32px);line-height:1.12;text-transform:lowercase}
.way .price{font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,4.2vw,54px);line-height:1.1;color:var(--ink)}
.way p{font-size:16px;color:var(--mid);flex:1;line-height:1.7}
.way .btn{align-self:flex-start;margin-top:12px}
@media (max-width:820px){ .ways{grid-template-columns:1fr} }

/* --------------------------------------------------------- EXPERIENCE ----
   Moss shows its rooms as a quiet named list with photography, not a
   dense tile grid. Two up, lots of air. */
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
@media (max-width:700px){ .exp-grid{grid-template-columns:1fr;gap:38px} }
.exp{background:transparent;padding:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.exp-shot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  margin-bottom:14px;height:auto}
.exp .n{display:none}
.exp h3{font-size:20px}
.exp p{font-size:15.5px;line-height:1.7;color:var(--mid)}

/* ------------------------------------------------------------- DAY ------- */
.day{margin-top:8px}
.day-row{
  display:grid;grid-template-columns:130px 190px 1fr 220px;gap:28px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);
}
section.ink .day-row{border-bottom-color:rgba(255,255,255,.14)}
.day-row .time{font-family:var(--serif);font-weight:300;
  font-size:clamp(22px,2.3vw,30px);line-height:1;color:var(--ink)}
section.ink .day-row .time{color:var(--cream)}
.day-row .act{font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
section.ink .day-row .act{color:var(--accent-soft)}
.day-row .desc{font-size:15.5px;color:var(--mid);line-height:1.65}
section.ink .day-row .desc{color:var(--on-dark)}
.day-row .shot{height:74px;overflow:hidden;border-radius:var(--radius)}
.day-row .shot img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){
  .day-row{grid-template-columns:96px 1fr;gap:4px 22px;padding:22px 0}
  .day-row .desc{grid-column:2}
  .day-row .shot{display:none}
}

/* ---------------------------------------------------------- CLASSES ------ */
.cls-list{margin-top:8px}
.cls{display:grid;grid-template-columns:1fr 180px 130px;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line)}
section.ink .cls{border-bottom-color:rgba(255,255,255,.14)}
.cls .n{display:none}
.cls h3{font-size:clamp(20px,2.1vw,26px)}
.cls .desc{font-size:15.5px;color:var(--mid);margin-top:8px;line-height:1.7;max-width:42em}
.cls .lvl{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.cls .lvl.beginner{color:var(--sage);background:transparent;padding:0}
@media (max-width:820px){ .cls{grid-template-columns:1fr;gap:6px} }

/* ------------------------------------------------------------ EVENTS ----- */
.ev-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px}
.chip{border:1px solid var(--line);border-radius:100px;background:transparent;
  padding:10px 20px;font:inherit;font-size:12.5px;letter-spacing:.1em;
  text-transform:lowercase;color:var(--mid);cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--sage);border-color:var(--sage);color:var(--cream)}

/* -------------------------------------------------------- MEMBERSHIP ----- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.plans.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){ .plans.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .plans,.plans.four{grid-template-columns:1fr} }
.plan{background:var(--paper);padding:40px 32px 34px;display:flex;flex-direction:column;gap:12px}
.plan.hero-plan{background:var(--deep);color:var(--on-dark-2)}
.plan.hero-plan .tier{color:var(--accent-soft)}
.plan.hero-plan .amt,.plan.hero-plan .plan-line{color:var(--cream)}
.plan.hero-plan ul li,.plan.hero-plan .fine{color:var(--on-dark)}
.plan.hero-plan small,.plan.hero-plan summary{color:var(--on-dark)}
.plan .tier{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}
.plan .amt{font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,4.2vw,54px);line-height:1.05;color:var(--ink)}
.plan .amt small{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--soft)}
.plan-line{font-size:16px;font-weight:400;color:var(--ink);margin:2px 0 6px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px;flex:1}
.plan ul li{font-size:15px;color:var(--mid);line-height:1.65;padding-left:16px;position:relative}
.plan ul li::before{content:"";position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:var(--sage)}
.plan .fine{font-family:var(--sans);font-style:italic;font-size:14.5px;color:var(--soft);line-height:1.6}
.plan .btn{margin-top:14px;align-self:flex-start}

.plan-more{margin-top:6px}
.plan-more summary{list-style:none;cursor:pointer;padding:12px 0;
  font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft);display:flex;justify-content:space-between;gap:12px;align-items:center}
.plan-more summary::-webkit-details-marker{display:none}
.plan-more summary::after{content:"+";font-family:var(--serif);font-size:18px}
.plan-more[open] summary::after{content:"–"}
.plan-more ul{margin-top:6px}
.plan-more li{font-size:14.5px}

/* --------------------------------------------------------- IMAGERY -------
   Softer, fewer pieces, more air. The d6 12-column collage becomes a
   simple two- or three-up with rounded corners. */
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,20px);
  grid-auto-rows:clamp(150px,19vw,250px)}
.collage img,.collage .slot{width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);min-width:0}
.c-a{grid-column:span 4;grid-row:span 2}
.c-b{grid-column:span 2;grid-row:span 2}
.c-c{grid-column:span 3}
.c-d{grid-column:span 3}
.c-e{grid-column:span 3}
.c-f{grid-column:span 3}
@media (max-width:820px){
  .collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,30vw,190px)}
  .c-a{grid-column:span 2;grid-row:span 1}
  .c-b,.c-c,.c-d,.c-e,.c-f{grid-column:span 1;grid-row:span 1}
}
.slot{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  background:var(--paper-3);border-radius:var(--radius)}
.slot span{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* a quiet full-width statement, set in the serif rather than shouted */
/* The statement is the page's held breath. It goes dark in both layouts —
   two pale bands in a row read as one long band and the moment is lost. */
.statement{background:var(--deep);padding:clamp(70px,11vw,140px) 0}
.statement .big{font-family:var(--serif);font-weight:300;font-style:normal;
  font-size:clamp(30px,4.6vw,60px);line-height:1.18;letter-spacing:-.01em;
  color:var(--cream);text-transform:lowercase;max-width:22ch}
.statement .big em{font-style:italic;color:var(--accent-soft)}
.statement p{color:var(--on-dark)}
.statement a{color:var(--on-dark-strong)}
.statement .kicker{color:var(--accent-soft)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,88px);align-items:center}
.split img{width:100%;height:clamp(320px,44vw,560px);object-fit:cover;border-radius:var(--radius)}
@media (max-width:880px){ .split{grid-template-columns:1fr;gap:34px} }

/* --------------------------------------------------------- EMBEDS -------- */
.embed{border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);overflow:hidden}
.embed iframe{display:block;width:100%;border:0;min-height:760px}
.embed-note{font-family:var(--sans);font-style:italic;font-size:15px;color:var(--soft);
  margin-top:18px;max-width:42em;line-height:1.6}
.embed-placeholder{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);padding:clamp(44px,7vw,84px) 30px;text-align:center}
section.ink .embed-placeholder{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.embed-placeholder .ph-title{font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--soft);margin-bottom:16px}
.embed-placeholder p{font-size:16px;color:var(--mid);max-width:38em;margin:0 auto;line-height:1.7}
.schedule-widget{border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);padding:10px}

/* ---------------------------------------------------------- PEOPLE ------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);background:transparent}
@media (max-width:1000px){ .people{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .people{grid-template-columns:repeat(2,1fr)} }
.person{background:transparent;display:flex;flex-direction:column}
section.ink .person{background:transparent}
.person .portrait{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);border-radius:var(--radius)}
.person .portrait img{width:100%;height:100%;object-fit:cover}
.person .portrait.empty{display:flex;align-items:center;justify-content:center;background:var(--paper-3)}
section.ink .person .portrait.empty{background:rgba(255,255,255,.07)}
.person .portrait.empty span{font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}
.person-body{padding:16px 0 0;display:flex;flex-direction:column;gap:4px}
.person h3{font-size:18px}
.person .role{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
section.ink .person .role{color:var(--accent-soft)}
.person p{font-size:14.5px;color:var(--mid);line-height:1.65;margin-top:6px}
section.ink .person p{color:var(--on-dark)}

/* ---------------------------------------------------------- VOICES ------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
@media (max-width:900px){ .voices{grid-template-columns:1fr} }
.voice{background:var(--paper);padding:40px 32px;display:flex;flex-direction:column;gap:20px}
.voice .q{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.9vw,24px);
  line-height:1.45;color:var(--ink)}
.voice .who{margin-top:auto;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}
.voice .theme{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.voice.placeholder{background:var(--paper-2)}

/* ------------------------------------------------------- INFO ROWS ------- */
.info-list{margin-top:6px}
.info-row{border-bottom:1px solid var(--line);padding:24px 0;
  display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:baseline}
section.ink .info-row{border-bottom-color:rgba(255,255,255,.14)}
.info-row .i-label{font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink)}
section.ink .info-row .i-label{color:var(--cream)}
.info-row .i-val{font-size:16px;color:var(--mid);line-height:1.7;max-width:44em}
section.ink .info-row .i-val{color:var(--on-dark)}
.info-row .i-note{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--soft);margin-top:8px}
@media (max-width:760px){ .info-row{grid-template-columns:1fr;gap:8px} }

/* ------------------------------------------------------------- FAQ ------- */
.faq,.faq-block{margin-top:8px}
.faq details,.faq-block{border-bottom:1px solid var(--line)}
.faq-block{border-top:1px solid var(--line)}
.faq summary,.faq-block summary{padding:26px 0;font-size:clamp(17px,1.8vw,21px);
  font-weight:300;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:24px;align-items:center}
.faq summary::-webkit-details-marker,.faq-block summary::-webkit-details-marker{display:none}
.faq summary::after,.faq-block summary::after{content:"+";font-family:var(--serif);
  font-size:24px;line-height:1;color:var(--soft);flex:none}
.faq details[open] summary::after,.faq-block[open] summary::after{content:"–"}
.faq .a{padding:0 0 28px;color:var(--mid);font-size:16px;line-height:1.75;max-width:50em}

.note{border-left:1px solid var(--clay);padding:6px 0 6px 20px;
  font-family:var(--sans);font-style:italic;font-size:15px;color:var(--soft);max-width:44em}
.pending{display:inline-block;font-family:var(--sans);font-style:normal;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);border:1px solid var(--line);border-radius:100px;padding:3px 10px;margin-right:6px}
.mark{background:transparent;color:var(--sage);font-weight:500}

/* --------------------------------------------------------- CHERISH ------- */
.cherish-scope{
  --ink:var(--cherish-ink); --paper:var(--cherish-paper); --paper-2:var(--cherish-paper-2); --paper-3:var(--cherish-paper-3);
  --mid:var(--cherish-mid); --soft:var(--cherish-soft); --line:var(--cherish-line);
  --sage:var(--oxblood); --sage-dk:var(--cherish-deep); --clay:var(--oxblood);
  --deep:var(--cherish-deep);
  background:var(--cherish-paper);color:var(--cherish-mid);
}
.cherish-scope .btn.sage{background:var(--oxblood);border-color:var(--oxblood);color:var(--cherish-on-dark)}
.cherish-scope .day-row .act,.cherish-scope .person .role,.cherish-scope .voice .theme{color:var(--oxblood)}
.cherish-scope .plan ul li::before{background:var(--mustard)}
.menu-list{margin-top:6px}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.menu-item .nm{font-family:var(--serif);font-weight:300;font-size:23px;color:var(--ink)}
.menu-item .de{font-size:15px;color:var(--mid);margin-top:5px;max-width:38em;line-height:1.65}
.menu-item .pr{font-family:var(--serif);font-size:20px;white-space:nowrap;color:var(--soft)}

/* ----------------------------------------------------------- FOOTER ------ */
footer{background:var(--deep);color:var(--on-dark);padding:clamp(70px,11vh,120px) 0 40px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  padding-bottom:56px}
.foot-top h4{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:20px}
.foot-top ul{list-style:none}
.foot-top li{margin:0}
.foot-top li a{display:block;padding:9px 0;font-size:15px;color:var(--on-dark);text-transform:lowercase}
.foot-top li a:hover{color:var(--cream)}
.foot-brand .display-sm{font-size:clamp(26px,3.4vw,42px);line-height:1.1;color:var(--cream)}
.foot-brand p{color:var(--on-dark-soft);font-size:15px;line-height:1.8}
.foot-bottom{margin-top:20px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--on-dark-soft)}
@media (max-width:860px){ .foot-top{grid-template-columns:1fr 1fr;gap:34px} }
@media (max-width:520px){ .foot-top{grid-template-columns:1fr} }

/* the palm stays, but quieter and greener */
.palm{display:inline-block;width:.72em;height:1.08em;flex:none;background:currentColor;
  vertical-align:-.16em;
  -webkit-mask:url(../assets/images/palm.svg) center/contain no-repeat;
          mask:url(../assets/images/palm.svg) center/contain no-repeat}
.palm.lg{width:1.4em;height:2.1em}
footer{position:relative;overflow:hidden}
.foot-palm{position:absolute;right:-10px;bottom:-8%;width:clamp(140px,18vw,260px);
  aspect-ratio:64/96;background:currentColor;opacity:.05;pointer-events:none;z-index:0;
  -webkit-mask:url(../assets/images/palm.svg) center/contain no-repeat;
          mask:url(../assets/images/palm.svg) center/contain no-repeat}
footer .wrap-wide{position:relative;z-index:1}
.hero-meta .palm{width:26px;height:39px;opacity:.85;margin-bottom:12px}

/* --------------------------------------------------------------- FILM ----
   Any photo slot will take a video instead. It inherits the shape of the
   picture it replaces, plays silently on a loop, and shows the photograph
   it replaced as its poster while it loads. */
video[data-pm-photo]{display:block;width:100%;height:100%;object-fit:cover;
  background:var(--paper-3)}
.split video[data-pm-photo]{height:clamp(320px,44vw,560px);border-radius:var(--radius)}
.serie video[data-pm-photo]{height:clamp(280px,34vw,460px);border-radius:3px}
.person .portrait video[data-pm-photo],
.day-row .shot video[data-pm-photo]{height:100%}
@media (max-width:860px){ .serie video[data-pm-photo]{height:clamp(220px,52vw,320px)} }
body.tight .serie video[data-pm-photo]{height:clamp(230px,26vw,340px)}

/* --------------------------------------------------- MOBILE TAP TARGETS -- */
@media (max-width:820px){
  .nav-toggle{min-height:44px}
  .nav-cta .btn{min-height:44px}
  .foot-top li a{padding:13px 0;min-height:44px;display:flex;align-items:center}
  .foot-brand p a,.foot-bottom a{display:inline-block;padding:8px 0}
  .link-arrow{padding-top:14px;padding-bottom:12px}
  .brand{display:flex;flex-direction:column;justify-content:center;min-height:44px}
  .plan-more summary{min-height:44px}
  .faq summary,.faq-block summary{min-height:56px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  section{padding:clamp(56px,9vh,92px) 0}
}
@media (max-width:420px){
  .display{font-size:clamp(34px,10vw,52px)}
  .exp-grid{grid-template-columns:1fr}
}

/* ---- pull quote — for lines that should stop the reader --------------- */
.pull{font-size:clamp(20px,2.4vw,30px);line-height:1.28;font-weight:300;
  color:var(--ink);letter-spacing:-.015em;max-width:20em;
  border-left:2px solid var(--sage);padding-left:22px}
section.ink .pull{color:var(--paper)}

/* ---- events strip — concise, horizontal, scrolls on small screens ----- */
.ev-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.ev-item{background:var(--paper-2);border-radius:var(--radius);padding:24px 22px 26px;display:flex;flex-direction:column;gap:8px}
.ev-item:hover{background:var(--paper-2)}

.ev-when{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.ev-what{font-size:clamp(17px,1.7vw,21px);font-weight:300;letter-spacing:-.005em;line-height:1.25;text-transform:lowercase}
.ev-where{font-size:13px;color:var(--mid);margin-top:auto}
@media (max-width:900px){ .ev-strip{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ev-strip{grid-template-columns:1fr} }

/* ---- the trial banner on the memberships page ------------------------- */
.trial-cta{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:var(--deep);color:var(--on-dark);padding:clamp(28px,4vw,46px);border-radius:var(--radius);margin-bottom:48px}
.trial-cta .kicker{color:var(--sage)}
.trial-cta h3{color:var(--cream)}
.trial-cta p{color:var(--on-dark);font-size:15.5px;max-width:44em}
@media (max-width:820px){ .trial-cta{grid-template-columns:1fr} .trial-cta .btn{justify-self:start} }


/* ==========================================================================
   DESIGN 9 ADDITIONS
   ========================================================================== */

/* --- CASE ---------------------------------------------------------------
   Hybrid: brand-voice elements in caps, reading headings lowercase.
   To match the parent brand fully, change `lowercase` to `uppercase` on
   .display-sm, h2 and h3 in the base sheet above and delete nothing here. */
.hero .display{text-transform:uppercase;letter-spacing:-.02em}
.nav-links a{text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:500}
.btn,.nav-cta .btn{text-transform:uppercase;letter-spacing:.13em;font-weight:500}
.brand{text-transform:uppercase;letter-spacing:.18em}

/* --- HERO EYEBROW + INVITATION ------------------------------------------ */
.hero-eyebrow{color:rgba(255,255,255,.85);margin-bottom:18px;letter-spacing:.2em}
.hero-invite{margin-top:20px;font-size:clamp(15px,1.5vw,18px);line-height:1.5;
  color:rgba(255,255,255,.9);font-style:italic;max-width:26em;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media (max-width:520px){ .hero-invite{font-size:15px} }

/* --- MEMBERSHIP GROUP HEADINGS ------------------------------------------
   The group name leads; the descriptive line sits under it, smaller. */
.group-h{font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-.012em;
  text-transform:lowercase;margin:0 0 6px;font-weight:400}
.group-sub{font-size:clamp(15px,1.5vw,17.5px);line-height:1.6;color:var(--mid);
  margin:0 0 30px;max-width:44em}

/* --- CAFE STRIP (the homepage door, replacing the full block) ----------- */
.cafe-strip{display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap}

/* --- SPLIT WITH A MISSING IMAGE ---------------------------------------- */
.split.no-img{grid-template-columns:1fr;--split-ratio:1fr}

/* --- MONTH CALENDAR ----------------------------------------------------- */
.pm-cal-loading,.pm-cal-empty{color:var(--soft);font-size:15px;padding:26px 0}
.pm-cal-empty a{text-decoration:underline}
.pm-cal-grid{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,40px);
  max-width:420px;margin:0 0 clamp(30px,4vw,48px)}
.pm-month-name{font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.pm-dows,.pm-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pm-dows span{font-size:10.5px;letter-spacing:.1em;text-align:center;
  color:var(--soft);opacity:.6;padding-bottom:6px}
.pm-day{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:40px;font-size:13.5px;color:var(--soft);border-radius:3px;
  position:relative;text-decoration:none}
.pm-day.pad{visibility:hidden}
.pm-day.today{font-weight:600;color:var(--ink)}
.pm-day.has{color:var(--ink);font-weight:500;background:rgba(124,132,113,.13)}
.pm-day.has:hover{background:var(--sage);color:#fff}
.pm-day.has i{display:block;width:4px;height:4px;border-radius:50%;
  background:var(--clay);margin-top:3px}
.pm-day.has:hover i{background:#fff}
section.ink .pm-day{color:var(--on-dark)}
section.ink .pm-day.today{color:#fff}
section.ink .pm-day.has{color:#fff;background:rgba(255,255,255,.13)}
section.ink .pm-day.has:hover{background:var(--sage)}
section.ink .pm-month-name,section.ink .pm-dows span{color:var(--on-dark-soft)}

.pm-cal-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pm-cal-list li{border-bottom:1px solid var(--line)}
.pm-cal-list a{display:grid;grid-template-columns:130px 1fr auto;gap:20px;
  align-items:baseline;padding:17px 0;text-decoration:none;color:inherit}
.pm-cal-list a:hover .pm-what{color:var(--clay)}
.pm-when{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.pm-what{font-size:clamp(16px,1.6vw,19px);line-height:1.35}
.pm-time{font-size:13px;color:var(--soft);white-space:nowrap}
section.ink .pm-cal-list{border-color:rgba(255,255,255,.14)}
section.ink .pm-cal-list li{border-color:rgba(255,255,255,.14)}
section.ink .pm-when,section.ink .pm-time{color:var(--on-dark-soft)}
section.ink .pm-cal-list a:hover .pm-what{color:var(--sage-light,var(--accent-soft))}
@media (max-width:620px){
  .pm-cal-list a{grid-template-columns:1fr auto;gap:4px 14px}
  .pm-when{grid-column:1/-1}
}

/* --- LABELLED PHOTO SLOT (Mickey's `page - section - slot` convention) --- */
.photo-slot{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(240px,32vw,420px);background:var(--paper-3);border-radius:3px;
  padding:24px}
.photo-slot span{font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);max-width:22ch;line-height:2}
section.ink .photo-slot{background:rgba(255,255,255,.07)}

/* ==========================================================================
   CONTRAST FIXES
   Light-on-tan: cards that carry their own pale background sit inside
   section.ink, which sets a light inherited colour. Anything on a pale
   panel must restate a dark colour rather than inherit.
   ========================================================================== */
.ev-item,
section.ink .ev-item{color:var(--ink)}
.ev-item .ev-what,
section.ink .ev-item .ev-what{color:var(--ink)}
.ev-item .ev-where,
section.ink .ev-item .ev-where{color:var(--mid)}
.ev-item .ev-when,
section.ink .ev-item .ev-when{color:var(--clay)}
section.ink .embed-placeholder,
section.ink .plan,
section.ink .faq{color:var(--ink)}

/* ==========================================================================
   THE METHOD PAGE
   ========================================================================== */
.obj-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(30px,4vw,54px);margin-top:clamp(44px,6vw,72px)}
.obj h3{font-size:clamp(18px,1.8vw,22px);line-height:1.3;margin-bottom:12px;
  padding-top:18px;border-top:1px solid var(--line)}
.obj p{color:var(--mid);font-size:15.5px;line-height:1.7}

/* Four series — one per row, alternating, with real air between them */
.series{display:flex;flex-direction:column;gap:clamp(56px,9vw,120px);
  margin-top:clamp(50px,7vw,90px)}
.serie{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);
  align-items:center}
.serie:nth-child(even){grid-template-columns:1fr 1.05fr}
.serie:nth-child(even) img{order:2}
.serie img{width:100%;height:clamp(280px,34vw,460px);object-fit:cover;border-radius:3px}
.serie-body .s-n{font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.serie-body h3{font-size:clamp(28px,3.8vw,50px);line-height:1.05;margin-bottom:18px}
.serie-body p{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--mid)}
.serie-body .s-note{margin-top:20px;padding-left:18px;border-left:2px solid var(--clay);
  font-size:14.5px;line-height:1.65;color:var(--soft);font-style:italic}
@media (max-width:820px){
  .serie,.serie:nth-child(even){grid-template-columns:1fr;gap:24px}
  .serie:nth-child(even) img{order:0}
  .serie img{height:clamp(220px,52vw,320px)}
}

.faq-block .a ul{margin:10px 0 0;padding-left:20px}
.faq-block .a li{margin-bottom:10px;line-height:1.65}
.faq-block .a p{line-height:1.7}

/* ==========================================================================
   CONTRAST TOKENS
   --mid, --soft and --clay were darkened so body copy, captions, kickers and
   meta all clear WCAG AA (4.5:1) on every ground in this palette. --sage is
   unchanged as an accent; button fills use --sage-btn so white label text
   clears AA too.
   ========================================================================== */
.btn.sage{background:var(--sage-btn);border-color:var(--sage-btn)}
.btn.sage:hover{background:var(--ink);border-color:var(--ink)}
.photo-slot span,.person .portrait.empty span{color:var(--mid)}
.pm-day.has{background:var(--day-mark)}
section.ink .pm-day.has{background:var(--day-mark-dark);color:#fff}
section.ink .pm-day.has:hover{background:var(--sage)}

/* ==========================================================================
   CONTRAST ROUND 2
   .ghost-dark is a light-on-dark button; on a pale ground it disappears.
   Empty portrait/photo slots need a light label inside dark sections.
   ========================================================================== */
section:not(.ink):not(.statement):not(.hero):not(.phero) .btn.ghost-dark,
.light .btn.ghost-dark{color:var(--ink);border-color:var(--ink)}
section:not(.ink):not(.statement):not(.hero):not(.phero) .btn.ghost-dark:hover,
.light .btn.ghost-dark:hover{background:var(--ink);color:var(--cream)}
section.ink .photo-slot span,
section.ink .person .portrait.empty span{color:var(--on-dark)}
.embed-placeholder .ph-title{color:var(--ink)}
section.ink .embed-placeholder .ph-title{color:var(--ink)}
.menu-item .pr{color:var(--mid)}
.cls .lvl{color:var(--mid)}

/* ==========================================================================
   CONTRAST ROUND 3
   --sage is a beautiful accent and a poor text colour on cream (3.16:1).
   Wherever it was used AS TEXT it becomes --sage-txt; as a fill or a rule
   it stays exactly as it was.
   ========================================================================== */
:root{--sage-txt:#5A6350}
.day-row .act,
.cls .lvl.beginner,
.voice .theme,
.mark,
.person .role{color:var(--sage-txt)}
section.ink .day-row .act,
section.ink .voice .theme,
section.ink .person .role{color:var(--accent-soft)}

/* footer: labels and fine print on deep forest */
.foot-top h4{color:var(--on-dark-soft)}
.foot-bottom{color:var(--on-dark-soft)}
.foot-brand p{color:var(--on-dark)}
footer{color:var(--on-dark)}

/* hero plan card: white-ish everything, it sits on deep forest */
.plan.hero-plan small,
.plan.hero-plan summary,
.plan.hero-plan .plan-more summary{color:var(--on-dark-2)}
.plan.hero-plan .plan-more summary::after{color:var(--on-dark-2)}

/* design-7 has no chartreuse in its palette — .acid was a leftover class name
   with no background, so it rendered dark-on-dark. Give it a real fill. */
.btn.acid{background:var(--sage-btn);border-color:var(--sage-btn);color:var(--cream)}
.btn.acid:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}

/* ==========================================================================
   CONTRAST ROUND 4 — light-on-dark meta text
   ========================================================================== */
section.ink .embed-note,
section.ink .note,
section.ink .fine,
section.ink .aside{color:var(--on-dark)}
section.ink .embed-note a,
section.ink .note a{color:var(--on-dark-strong)}
section.ink .kicker{color:var(--accent-soft)}
section.ink .pm-month-name,
section.ink .pm-dows span,
section.ink .pm-when,
section.ink .pm-time{color:var(--on-dark-soft)}
section.ink .pm-day{color:var(--on-dark)}

/* ==========================================================================
   CONTRAST ROUND 5 — the last stragglers, all four designs
   ========================================================================== */
.embed-note{color:var(--mid)}
.pending{color:var(--mid)}
.photo-slot span,
.person .portrait.empty span,
.shot.empty span,
.collage .empty span{color:var(--mid)}
section.ink .photo-slot span,
section.ink .person .portrait.empty span,
section.ink .shot.empty span,
section.ink .collage .empty span{color:var(--on-dark)}
.voice .theme{color:var(--mid)}
.ev-item .ev-when{color:var(--mid)}
/* .ghost-dark on any pale ground */
.light .btn.ghost-dark,
.alt .btn.ghost-dark,
section:not(.ink):not(.statement):not(.hero):not(.phero) .btn.ghost-dark{color:var(--ink);border-color:var(--ink)}
section:not(.ink):not(.statement):not(.hero):not(.phero) .btn.ghost-dark:hover{background:var(--ink);color:#fff}

/* ==========================================================================
   CONTRAST ROUND 6 — dark CTA bands and the Cherish scope
   ========================================================================== */
.trial-cta{color:var(--on-dark-2)}
.trial-cta .kicker{color:var(--accent-soft)}
.trial-cta p,.trial-cta .lede{color:var(--on-dark)}
.pending{color:var(--ink-soft);background:rgba(0,0,0,.06)}
.cherish-scope .pending{color:var(--cherish-mid)}
.cherish-scope .note,.cherish-scope .lede,.cherish-scope .de,
.cherish-scope p{color:var(--mid)}
.cherish-scope .phero-inner .kicker,
.cherish-scope .phero-inner p{color:var(--cherish-on-dark)}

/* ROUND 7 — the feature way-card is pale in this palette; kickers stay dark */
.way.feature .kicker{color:var(--clay)}
.cherish-scope .photo-slot span,
.cherish-scope .collage .empty span,
.cherish-scope .shot.empty span{color:var(--cherish-mid)}
.cherish-scope .kicker{color:var(--mid)}

/* ==========================================================================
   PALETTE APPLICATION — green accent
   ========================================================================== */
.btn.sage{background:var(--sage-btn);border-color:var(--sage-btn);color:var(--cream)}
.btn.sage:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pm-day.has i{background:var(--sage)}
.pm-day.has{background:var(--day-mark)}
.pm-day.has:hover{background:var(--sage);color:var(--cream)}
.note{border-left-color:var(--sage)}
.serie-body .s-note{border-left-color:var(--sage)}
.hand{color:var(--clay)}
.pull{color:var(--sage-txt)}

/* calendar: days already gone read back, not gone */
.pm-day.past{opacity:.42}
.pm-day.today{box-shadow:inset 0 0 0 1px currentColor}

/* ghost-dark lives over photography in the hero — always light there */
.hero .btn.ghost-dark,
.phero .btn.ghost-dark{color:var(--cream);border-color:rgba(255,255,255,.55);background:transparent}
.hero .btn.ghost-dark:hover,
.phero .btn.ghost-dark:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* nav labels must never wrap onto two lines */
.nav-links a{white-space:nowrap}
@media (max-width:1180px){ .nav-links a{font-size:11px;letter-spacing:.08em} }

/* new palette: --soft sits at 4.55 on the OLD cream and lower on the new one.
   Anything small and uppercase uses --mid instead. */
.kicker{color:var(--mid)}
.note,.i-note,.voice .who,.pending,.photo-slot span,
.person .portrait.empty span,.cls .lvl,.day-row .act{color:var(--mid)}
section.ink .kicker{color:var(--accent-soft)}
section.ink .note,section.ink .i-note,section.ink .voice .who{color:var(--on-dark)}

/* last stragglers — these sit on taupe/paper-3, which is a step darker */
.way .kicker,.plan .fine,.i-note,.cls .lvl.beginner,.pending,
.photo-slot span,.shot.empty span{color:var(--ink-soft)}
.i-note{color:var(--ink-soft)}

/* specificity: these three were losing to earlier, more specific rules */
.info-list .info-row .i-note{color:var(--ink-soft)}
.ways .way .kicker,.ways .way.feature .kicker{color:var(--ink-soft)}
section:not(.ink) .photo-slot span{color:var(--ink-soft)}

/* Months stack in one column; the event list sits beside them on desktop
   so the single column doesn't leave half the section empty. */
.pm-cal{display:grid;grid-template-columns:minmax(260px,340px) 1fr;
  gap:clamp(30px,5vw,72px);align-items:start}
.pm-cal-grid{margin-bottom:0}
.pm-cal-list{margin-top:0}
@media (max-width:860px){
  .pm-cal{grid-template-columns:1fr;gap:34px}
  .pm-cal-grid{max-width:340px}
}

/* ----------------------------------------------------- FOOTER HOURS ------ */
.foot-hours{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  max-width:20em}
.hr-status{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:14px;color:var(--accent-soft)}
.hr-status.shut{color:var(--on-dark-soft)}
.hr-status span{letter-spacing:.06em;text-transform:none;font-weight:400;font-size:12.5px;
  color:var(--on-dark-soft)}
.hr-list{display:grid;gap:5px}
.hr-row{display:flex;justify-content:space-between;gap:20px;font-size:13.5px;
  color:var(--on-dark-soft);line-height:1.5}
.hr-row.is-today{color:var(--on-dark-strong);font-weight:500}
.hr-day{letter-spacing:.06em}
.cherish-scope .foot-hours{border-top-color:rgba(255,255,255,.16)}
@media (max-width:520px){ .foot-hours{max-width:none} }


/* ==========================================================================
   TYPE HIERARCHY — REFORM
   The old scale inverted the information hierarchy: an 11px label nobody
   could read, a 58px/300-weight tagline carrying no information, and the
   actual content at 17px underneath. The eye landed on the least useful
   text and the biggest thing on screen was also the thinnest.

   Three changes:
     1. Section headings come DOWN in size and UP in weight — 400 not 300.
        Light weights read as decoration at display size; 400 reads as a
        heading you're meant to use.
     2. Kickers come UP — 12.5px, tighter tracking, accent colour. They're
        the section's NAME, so they have to be legible as a label.
     3. Ledes come up and darken. This is the sentence that answers the
        visitor's question; it should be the second thing read, not the
        fourth.
   ========================================================================== */

.display-sm{
  font-size:clamp(26px,3vw,40px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.014em;
}
h2{font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1.15;letter-spacing:-.012em}
h3{font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-.004em}

.kicker{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.15em;
  color:var(--sage-txt);
  margin-bottom:14px;
}
section.ink .kicker{color:var(--accent-soft)}
.cherish-scope .kicker{color:var(--oxblood)}

.lede{
  font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.65;
  color:var(--mid);
  max-width:36em;
}

/* the hero can still shout — it's the front door, not a reference page */
.hero .display{font-weight:300;font-size:clamp(38px,6.6vw,86px)}

/* body copy that was set at display-ish sizes inline comes back to earth */
section p[style*="clamp(17px,1.6vw"]{font-size:clamp(16.5px,1.5vw,18.5px) !important;
  line-height:1.7}

.section-head{margin-bottom:clamp(32px,4.5vw,56px)}


/* ==========================================================================
   STICKY NAV — made to actually stick
   position:sticky was already declared but the header sits inside a body
   that some browsers treat as a scroll container with the flush sections;
   pinning it as fixed with a body offset is the reliable version, and it
   gains a shadow + tighter padding once you scroll past the hero.
   ========================================================================== */
header.site{
  position:fixed;top:0;left:0;right:0;
  /* solid, not translucent: a see-through nav over photography puts dark
     labels on an unpredictable background — fine on one hero, unreadable
     on the next. */
  background:var(--paper);
  transition:padding .18s ease, box-shadow .18s ease, background .18s ease;
}
body{padding-top:var(--nav-h,84px)}
.hero.flush,.phero.flush{margin-top:calc(var(--nav-h,84px) * -1)}
header.site.scrolled{box-shadow:0 1px 0 rgba(19,34,56,.10),0 8px 28px rgba(19,34,56,.06)}
header.site.scrolled .nav-inner{padding-top:15px;padding-bottom:15px}
@media (max-width:820px){ body{padding-top:var(--nav-h,70px)} }

/* ==========================================================================
   FOOTER — reduced to identity, address, hours, phone
   ========================================================================== */
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,5vw,70px);
  padding-bottom:clamp(40px,6vw,64px);align-items:start}
.foot-brand-mark{display:inline-block;font-size:clamp(20px,2.2vw,27px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);line-height:1.2}
.foot-brand-mark span{display:block;font-size:.46em;letter-spacing:.42em;
  color:var(--on-dark-soft);margin-top:8px;font-weight:400}
.foot-block h4{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:16px}
.foot-block p{font-size:15px;line-height:1.7;color:var(--on-dark);margin:0}
.foot-block a{color:var(--on-dark)}
.foot-block a:hover{color:var(--cream);text-decoration:underline}
.foot-grid .foot-hours{margin-top:0;padding-top:0;border-top:0;max-width:none}
.foot-grid .hr-status{margin-bottom:12px}
@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-id{grid-column:1/-1}
}
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ==========================================================================
   EVENTS PAGE LAYOUT
   Calendar holds the left edge and starts at the top; the heading, the
   answer sentence and the list run down the right. Fills the space and
   puts the informational heading where the eye lands first.
   ========================================================================== */
.ev-layout{display:grid;grid-template-columns:minmax(240px,300px) 1fr;
  gap:clamp(34px,5vw,80px);align-items:start}
.ev-cal-col{position:sticky;top:calc(var(--nav-h,84px) + 24px)}
.ev-cal-col .pm-cal{display:block}
.ev-cal-col .pm-cal-grid{max-width:none;margin:0}
.pm-cal-listwrap .pm-cal-list{margin-top:0}
/* the column runs full height so its last row of buttons lands on the
   calendar's bottom edge instead of floating mid-column */
.ev-layout{align-items:stretch}
.ev-main{display:flex;flex-direction:column}
.ev-cta{margin-top:auto;padding-top:clamp(26px,3vw,40px)}
@media (max-width:900px){
  .ev-layout{grid-template-columns:1fr;gap:34px}
  .ev-cal-col{position:static;order:2}
  .ev-main{order:1}
  .ev-cal-col .pm-cal-grid{max-width:340px}
}

/* homepage teaser: list only, full width, no month grid */
.pm-cal.pm-cal-listonly{display:block}
.pm-cal-listonly .pm-cal-list{margin-top:0}

/* kickers on taupe bands need the darker step */
.alt .kicker,section.alt .kicker{color:var(--accent-deep)}
section:not(.ink) .photo-slot span{color:var(--ink-soft)}
.shop .photo-slot span,.photo-slot span{color:var(--ink-soft)}

/* ==========================================================================
   MEMBERSHIPS — TWO READS OF THE SAME DATA
   Cards tell a story; the table answers "what do I actually get".
   ========================================================================== */
.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}

.mem-tabs{display:inline-flex;gap:3px;padding:3px;background:var(--paper-2);
  border-radius:999px;margin-bottom:clamp(26px,3.5vw,40px)}
.mem-tabs button{border:0;background:transparent;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 22px;color:var(--mid);transition:background .16s ease,color .16s ease}
.mem-tabs button.on{background:var(--deep);color:var(--cream)}
.mem-tabs button:not(.on):hover{color:var(--ink)}

.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:960px;font-size:14px;
  table-layout:fixed}
.cmp col,.cmp th,.cmp td{width:auto}
.cmp .cmp-rowhead,.cmp tbody th{width:168px}
.cmp th,.cmp td{text-align:left;padding:14px 15px;vertical-align:top}

/* --- header: every plan name gets the same footprint so prices line up --- */
.cmp thead th{vertical-align:top;padding-bottom:17px;border-bottom:1px solid var(--ink)}
.cmp thead th>.cmp-name{margin-top:0}
.cmp thead th.cmp-rowhead{border-bottom-color:var(--line)}
.cmp-flag{display:block;height:20px;margin-bottom:8px}
.cmp-flag:not(.empty){font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:var(--deep);border-radius:999px;padding:5px 9px;
  width:max-content;line-height:1}
.cmp-name{display:block;font-size:14px;font-weight:600;line-height:1.25;
  min-height:2.5em;margin-bottom:4px}          /* two lines, so prices align */
.cmp-price{display:block;font-size:clamp(20px,2vw,25px);font-weight:400;line-height:1;
  letter-spacing:-.014em}
.cmp-per{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);margin-top:6px}

/* --- grouped bands ------------------------------------------------------ */
.cmp tbody th{font-weight:500;color:var(--ink);position:sticky;left:0;
  background:var(--paper);z-index:2}
.cmp thead th:first-child{position:sticky;left:0;background:var(--paper);z-index:3}
.cmp-group th{font-size:10.5px !important;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage-txt) !important;
  padding:30px 0 10px !important;background:var(--paper)}
.cmp tbody tr:not(.cmp-group):not(.cmp-cta) th,
.cmp tbody tr:not(.cmp-group):not(.cmp-cta) td{border-bottom:1px solid var(--line)}

.cmp td{color:var(--mid)}
.cmp td b{color:var(--ink);font-weight:600}
.cmp td.y{color:var(--ink)}
.cmp td.n{color:var(--soft)}
.cmp td.y::before{content:"✓";color:var(--sage-txt);font-weight:700;margin-right:7px}

.cmp .is-hero{background:rgba(48,63,22,.07)}
.cmp thead th.is-hero{border-bottom-color:var(--deep)}
.cmp td.n.is-hero{color:var(--mid)}
.cmp-cta td{padding-top:24px;padding-bottom:28px}
.cmp-cta .btn{padding:11px 19px;font-size:11px}

@media (max-width:620px){
  .cmp{min-width:880px;font-size:13.5px}
  .cmp th,.cmp td{padding:12px 12px}
  .cmp .cmp-rowhead,.cmp tbody th{width:140px}
  .mem-tabs{width:100%}
  .mem-tabs button{flex:1;padding:11px 10px;font-size:11.5px;letter-spacing:.06em}
}


/* homepage: two months beside the next four events, no photograph — the
   calendar is the visual interest in this band */
.third-head{display:grid;grid-template-columns:minmax(240px,1fr) 1.3fr;
  gap:clamp(26px,4.5vw,72px);align-items:start;
  margin-bottom:clamp(40px,6vw,72px)}
@media (max-width:820px){ .third-head{grid-template-columns:1fr;gap:20px} }
.home-cal{display:grid;grid-template-columns:minmax(300px,420px) 1fr;
  gap:clamp(34px,5vw,76px);align-items:start}
.home-cal-months{display:flex;flex-direction:column}
.home-cal-cta{margin-top:clamp(24px,2.6vw,34px);justify-content:flex-start}
.home-cal .pm-cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.home-cal .pm-cal{display:block}
.home-cal .pm-cal-grid{max-width:none;margin:0}
@media (max-width:820px){
  .home-cal{grid-template-columns:1fr;gap:32px}
  .home-cal .pm-cal-grid{grid-template-columns:1fr 1fr;max-width:none}
}
@media (max-width:520px){ .home-cal .pm-cal-grid{grid-template-columns:1fr;max-width:320px} }
@media (max-width:820px){ .home-cal-cta{margin-top:22px} }

/* a two-up band: heading left, the argument and its CTAs right */
.band{display:grid;grid-template-columns:minmax(240px,1fr) 1.25fr;
  gap:clamp(26px,4.5vw,72px);align-items:start}
@media (max-width:820px){ .band{grid-template-columns:1fr;gap:22px} }

/* ==========================================================================
   MINDBODY SCHEDULE WIDGET
   Renders as a cross-origin iframe from widgets.mindbodyonline.com, so its
   insides can't be styled from here — theme it in Mindbody's Branded Web
   settings. What we CAN do is give it a frame that belongs to this page.
   ========================================================================== */
.schedule-widget{background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:clamp(10px,1.6vw,18px);min-height:520px}
.schedule-widget iframe{width:100%!important;border:0;display:block;min-height:500px}
.schedule-widget healcode-widget{display:block}

/* --- the durations that share The Primal's column ----------------------- */
.cmp-durs{margin-top:14px;padding-top:12px;border-top:1px solid rgba(48,63,22,.22);min-height:74px}
.cmp-durs.empty{border-top:0;visibility:hidden}
.cmp-durs-lab{display:block;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-txt);margin-bottom:7px}
.cmp-dur{display:block;font-size:12.5px;color:var(--mid);line-height:1.6}
.cmp-dur b{color:var(--ink);font-weight:600;font-size:13.5px}
.cmp-sub{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}
.cmp-btns{display:grid;gap:7px;justify-items:start}
/* two weeks and a day are the same product bought short — they read as
   their own offer under the table, not as small print inside a cell */
.cmp-try{display:grid;grid-template-columns:minmax(240px,1fr) auto;
  gap:clamp(20px,3vw,48px);align-items:center;
  margin:clamp(22px,3vw,34px) 0 clamp(30px,4vw,44px);
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.6vw,30px);
  background:var(--paper-2);border-radius:var(--radius)}
.cmp-try p{color:var(--mid);max-width:42em}
.cmp-try .cta-row{justify-content:flex-end}
@media (max-width:820px){
  .cmp-try{grid-template-columns:1fr;align-items:start;gap:20px}
  .cmp-try .cta-row{justify-content:flex-start}
}
.btn.tiny{padding:8px 13px;font-size:10.5px;letter-spacing:.09em}

/* ==========================================================================
   THE TIMETABLE
   Rendered from schedule.json — Mindbody's own public class-times feed — so
   it lives inside our type system instead of a cross-origin iframe.
   ========================================================================== */
.sched{display:grid;gap:clamp(26px,3.4vw,44px)}
.sched-day{display:grid;grid-template-columns:minmax(120px,180px) 1fr;
  gap:clamp(18px,3vw,44px);align-items:start;
  padding-top:20px;border-top:1px solid var(--line)}
.sched-date{font-size:12.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sage-txt);position:sticky;top:calc(var(--nav-h,84px) + 20px)}
.sched-day ul{list-style:none;margin:0;padding:0}
.sched-day li + li{border-top:1px solid var(--line)}
.sched-day a{display:grid;grid-template-columns:96px 1fr auto;gap:18px;
  align-items:baseline;padding:13px 0;text-decoration:none;color:inherit}
.sched-day a:hover .s-name{color:var(--sage-txt)}
.s-time{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.02em}
.s-name{font-size:clamp(16px,1.6vw,18.5px);line-height:1.35;color:var(--ink)}
.s-meta{font-size:13px;color:var(--mid);text-align:right;white-space:nowrap}
.s-dur{display:block;font-size:11.5px;color:var(--soft);margin-top:3px}
section.ink .sched-day{border-top-color:rgba(255,255,255,.14)}
section.ink .sched-day li + li{border-top-color:rgba(255,255,255,.14)}
section.ink .s-time,section.ink .s-name{color:var(--cream)}
section.ink .s-meta{color:var(--on-dark)}
section.ink .sched-date{color:var(--accent-soft)}
@media (max-width:720px){
  .sched-day{grid-template-columns:1fr;gap:12px}
  .sched-date{position:static}
  .sched-day a{grid-template-columns:76px 1fr;gap:12px}
  .s-meta{grid-column:2;text-align:left;white-space:normal;margin-top:2px}
  .s-dur{display:inline;margin-left:8px}
}

/* ==========================================================================
   LAYOUT B — "TIGHTENED"
   The design critique applied as a switchable theme. Everything below is
   scoped to body.tight, so the current design is untouched and the two can
   be compared by flipping one class in the EDIT panel.

   What it changes, in the order the critique ranked them:
     1. Section rhythm — big moments stay big, everything else becomes a band
     2. Fewer competing CTAs — secondary buttons become text links
     3. Type scale collapsed from nine-plus sizes to six
     4. More tonal breaks — the statement band goes dark
     5. Shorter pages — series images, teacher grid, page heroes
   What it CANNOT change: the shortage of photography. That's a supply
   problem, and no stylesheet fixes it.
   ========================================================================== */

/* --- 1 · rhythm ---------------------------------------------------------- */
body.tight section{padding-top:clamp(50px,6.5vh,80px) !important;
  padding-bottom:clamp(50px,6.5vh,80px) !important}
body.tight section.pad-sm{padding-top:clamp(34px,4.5vh,54px) !important;
  padding-bottom:clamp(34px,4.5vh,54px) !important}
/* the two moments per page that keep their scale */
body.tight section.ink,
body.tight section.statement{padding-top:clamp(74px,10vh,124px) !important;
  padding-bottom:clamp(74px,10vh,124px) !important}
body.tight section.hero,body.tight section.phero{padding:0 !important}
/* inner wrappers carrying their own padding */
body.tight section > .wrap[style*="padding"],
body.tight section > .wrap-wide[style*="padding"]{padding-top:0 !important;padding-bottom:0 !important}
/* the split/band gaps were doing as much as the padding */
body.tight .split{gap:clamp(26px,3.6vw,56px)}
body.tight .info-list{margin-top:0}
body.tight .info-row{padding:15px 0}
body.tight .obj h3{padding-top:14px}
body.tight .section-head{margin-bottom:clamp(26px,3.4vw,42px)}
body.tight .band,body.tight .third-head{gap:clamp(24px,3.6vw,56px)}

/* --- 2 · one primary action per screen ---------------------------------- */
body.tight .cta-row{align-items:center;gap:22px}
body.tight .cta-row .btn:not(.sage):not(.on-dark):not(.tiny):not(.acid):not(.ghost-dark){
  background:transparent;border:0;border-radius:0;padding:0;
  color:var(--sage-txt);text-transform:none;letter-spacing:0;
  font-size:15.5px;font-weight:500;
  border-bottom:1px solid currentColor;padding-bottom:2px}
body.tight .cta-row .btn:not(.sage):not(.on-dark):not(.tiny):not(.acid):not(.ghost-dark)::after{content:" →"}
body.tight .cta-row .btn:not(.sage):not(.on-dark):not(.tiny):not(.acid):not(.ghost-dark):hover{
  color:var(--ink);background:transparent}
body.tight section.ink .cta-row .btn:not(.sage):not(.on-dark):not(.ghost-dark){color:var(--accent-soft)}
body.tight .cmp-cta .btn,body.tight .plan .btn,body.tight .mem-tabs button{}

/* --- 3 · six type sizes, not nine --------------------------------------- */
body.tight .display{font-size:clamp(38px,6.2vw,78px)}
body.tight .display-sm{font-size:clamp(25px,2.7vw,36px)}
body.tight h2{font-size:clamp(23px,2.5vw,32px)}
body.tight h3{font-size:19px}
body.tight .lede{font-size:18.5px;line-height:1.6}
body.tight section p{font-size:17px !important;line-height:1.7}
body.tight .kicker{font-size:12px}
body.tight .s-name,body.tight .pm-what,body.tight .cmp td,body.tight .i-val{font-size:16.5px}

/* --- 4 · more tonal breaks, and clay stops shouting --------------------- */
body.tight section.alt{background:var(--paper-2)}

/* --- 5 · shorter pages -------------------------------------------------- */
body.tight .serie img{height:clamp(230px,26vw,340px)}
body.tight .series{gap:clamp(42px,6vw,84px)}
body.tight .phero{min-height:clamp(280px,34vh,360px)}
body.tight .hero{min-height:min(78vh,720px)}
/* empty portrait frames read as neglect — hide until there's a photograph */
body.tight .person:has(.portrait.empty){display:none}
body.tight .obj-list{gap:clamp(24px,3vw,40px)}
body.tight .obj p{font-size:15.5px !important}

/* --- 6 · the hero eyebrow was unreadable over photography --------------- */
body.tight .hero-eyebrow{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.75)}
body.tight .hero-invite{color:#fff}

/* stop layout B flashing as A before the class lands */
html.tight-pending body{visibility:hidden}


/* ==========================================================================
   LIMEWASH
   The studio's wall finish: mineral paint troweled on, so it dries cloudy
   instead of flat.

   Three things had to be true or it reads as wallpaper rather than a wall:

   1 · The cloud must not tile. It is one 1600px panel scaled to cover and
       pinned with background-attachment, so the whole site is one continuous
       wall and scrolling moves the page across it. Tiling a mid-scale texture
       is what makes patterning visible — the eye finds that motif instantly.
   2 · Pale and dark grounds need opposite treatment. Lime on a pale wall
       reads as soft shadow, so there the noise is black and multiplies. On
       the dark walls it reads as bloom, so there it is white and screens.
       One mode for both either washes the greens out or does nothing at all.
   3 · It has to be quiet. Measured: about 4% variation on cream, which is
       visible across a whole band and invisible behind text.

   Drawn in CSS. No image file, and the colour is whatever the section already
   is, so it follows the palette.
   ========================================================================== */
:root{
  --lime-cloud:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1600'%3E%3Cfilter%20id='c'%20x='-10%25'%20y='-10%25'%20width='120%25'%20height='120%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0022%200.0031'%20numOctaves='5'%20seed='19'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.05'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Crect%20width='1600'%20height='1600'%20filter='url%28%23c%29'/%3E%3C/svg%3E");
  --lime-grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='3'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.018'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='170'%20height='170'%20filter='url%28%23g%29'/%3E%3C/svg%3E");
  --lime-cloud-up:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1600'%3E%3Cfilter%20id='c'%20x='-10%25'%20y='-10%25'%20width='120%25'%20height='120%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0022%200.0031'%20numOctaves='5'%20seed='19'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.022'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Crect%20width='1600'%20height='1600'%20filter='url%28%23c%29'/%3E%3C/svg%3E");
  --lime-grain-up:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='3'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.008'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='170'%20height='170'%20filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* pale walls — the wash sits as shadow */
body.texture section:not(.hero):not(.phero):not(.ink):not(.statement),
html.texture-pending body section:not(.hero):not(.phero):not(.ink):not(.statement){
  background-image:var(--lime-cloud),var(--lime-grain);
  background-size:cover,170px 170px;
  background-repeat:no-repeat,repeat;
  background-attachment:fixed,fixed;
  background-position:center,center;
  background-blend-mode:multiply,multiply;
}

/* dark walls — it sits as bloom instead, or the green just goes grey */
body.texture section.ink,body.texture section.statement,body.texture footer,
html.texture-pending body section.ink,
html.texture-pending body section.statement,
html.texture-pending body footer{
  background-image:var(--lime-cloud-up),var(--lime-grain-up);
  background-size:cover,170px 170px;
  background-repeat:no-repeat,repeat;
  background-attachment:fixed,fixed;
  background-position:center,center;
  background-blend-mode:screen,screen;
}

/* iOS stutters on fixed backgrounds; there the cloud scrolls with the section
   and is big enough that no repeat lands inside one screen */
@media (max-width:900px),(hover:none){
  body.texture section,body.texture footer{
    background-attachment:scroll,scroll;
    background-size:170vmax 170vmax,170px 170px;
  }
}

/* a photograph does not want a wash over it */
body.texture .hero,body.texture .phero{background-image:none}

/* A second, heavier coat. Same wall, more trowel. */
body.texture.lime-strong section:not(.hero):not(.phero):not(.ink):not(.statement){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1600'%3E%3Cfilter%20id='c'%20x='-10%25'%20y='-10%25'%20width='120%25'%20height='120%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0022%200.0031'%20numOctaves='5'%20seed='19'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.13'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Crect%20width='1600'%20height='1600'%20filter='url%28%23c%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='3'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='170'%20height='170'%20filter='url%28%23g%29'/%3E%3C/svg%3E");
}
body.texture.lime-strong section.ink,
body.texture.lime-strong section.statement,
body.texture.lime-strong footer{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1600'%3E%3Cfilter%20id='c'%20x='-10%25'%20y='-10%25'%20width='120%25'%20height='120%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0022%200.0031'%20numOctaves='5'%20seed='19'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.06'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Crect%20width='1600'%20height='1600'%20filter='url%28%23c%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='3'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.34%200.34%200.34%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.022'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='170'%20height='170'%20filter='url%28%23g%29'/%3E%3C/svg%3E");
}