/* ==========================================================================
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:#3C3402; /* chartreuse, dark — sections, footer, statement */
--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:#D4B906; /* THE ACCENT: chartreuse (brand) */
--sage-btn:#D4B906; /* button fill — INK label clears 8.2:1 */
--sage-txt:#6E5E00; /* the accent when it carries words — 5.2:1 */
--sage-dk:#BBA305;
--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(14px,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) 42%, 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}
/* the word "menu" replaced by the icon everyone already recognises, and it
sits at the far right of the bar rather than beside the day-pass button */
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;
padding:0;width:42px;height:42px;align-items:center;justify-content:center}
.burger{display:block;position:relative;width:22px;height:1.5px;background:currentColor;
transition:background .18s ease}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:22px;height:1.5px;
background:currentColor;transition:top .18s ease,transform .18s ease}
.burger::before{top:-7px}
.burger::after{top:7px}
/* open, the same three strokes become a cross */
.nav-toggle[aria-expanded="true"] .burger{background:transparent}
.nav-toggle[aria-expanded="true"] .burger::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .burger::after{top:0;transform:rotate(-45deg)}
.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-flex;order:3;margin-left:14px}
.nav-cta{order:2;margin-left:auto;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:600;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(--ink)}
.btn.sage:hover{background:var(--sage-dk);border-color:var(--sage-dk);color:var(--ink)}
.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(560px,86vh,940px);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 ------ */
/* Ten classes, one screen. Title, level and duration are always readable;
the description unfolds on hover — and on tap, for anything without one. */
/* Three across, always. Nine classes make a 3x3 square, and letting the
grid auto-fill to six columns at desktop width stretched the cards back
into letterboxes — the shape was the point. */
.cls-list{margin-top:8px;display:grid;gap:14px;align-items:start;
grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
body.house .cls-list{margin-inline:auto}
/* three across at every width — the 3x3 square is the shape, and collapsing
to one column on a phone turned nine classes into nine screens */
@media (max-width:720px){
.cls-list{gap:8px}
.cls{min-height:0;padding:14px 12px}
.cls h3{font-size:15px;line-height:1.2}
.cls .lvl{font-size:9px;letter-spacing:.12em}
}
.cls{display:flex;flex-direction:column;width:100%;min-height:196px;
text-align:left;font:inherit;cursor:pointer;
background:var(--paper);border:1px solid var(--line);border-radius:8px;
padding:20px;transition:border-color .16s ease,transform .16s ease}
.cls:hover,.cls:focus-visible{border-color:var(--sage);transform:translateY(-2px)}
.cls:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
section.ink .cls{background:transparent;border-color:rgba(255,255,255,.18)}
.cls .n{display:none}
.cls h3{font-size:19px;margin:0;line-height:1.15}
.cls-head{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.cls-meta{display:flex;flex-direction:column;gap:5px}
.cls .lvl{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--soft)}
.cls .lvl.beginner{color:var(--sage-txt);background:transparent;padding:0}
.cls .lvl.dur{color:var(--mid);font-weight:500}
/* the description is the thing that was eating the page */
.cls .desc{font-size:15px;color:var(--mid);line-height:1.6;max-width:40em;
display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
transition:grid-template-rows .22s ease,opacity .18s ease,margin-top .22s ease;
overflow:hidden}
.cls .desc > span{min-height:0;display:block}
/* Opened by the plus, and only by the plus. Hover-to-reveal never worked on
a phone, and the @media(hover:none) fallback that pinned it open was what
made the grid so tall there in the first place. */
.cls.open .desc{grid-template-rows:1fr;opacity:1;margin-top:12px}
.cls{position:relative;cursor:default}
.cls-head{text-decoration:none;color:inherit}
.cls-more{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;
border:0;background:transparent;color:var(--soft);cursor:pointer;
border-radius:50%;display:grid;place-items:center}
.cls-more::before,.cls-more::after{content:"";position:absolute;background:currentColor;
transition:transform .18s ease,opacity .18s ease}
.cls-more::before{width:11px;height:1.5px}
.cls-more::after{width:1.5px;height:11px}
.cls-more:hover{color:var(--ink)}
.cls.open .cls-more{color:var(--ink)}
.cls.open .cls-more::after{transform:rotate(90deg);opacity:0}
.cls-more:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
section.ink .cls-more{color:var(--on-dark-soft)}
section.ink .cls-more:hover,section.ink .cls.open .cls-more{color:var(--cream)}
/* the head must not run under the plus */
.cls-head h3{padding-right:26px}
@media (max-width:720px){
.cls-more{top:4px;right:4px;width:26px;height:26px}
.cls-head h3{padding-right:22px}
.cls .desc{font-size:13px}
/* a description in a 109px column is one word per line. The open card takes
the whole row instead, which is the only width it reads at. */
.cls.open{grid-column:1 / -1}
.cls.open .cls-head{flex:0 0 auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:12px}
.cls.open .cls-meta{flex-direction:row;gap:10px}
}
/* ------------------------------------------------------------ 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(--ink)}
/* -------------------------------------------------------- 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;text-transform:none}
.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}
/* one coach on the roster shouldn't sit as a lonely quarter-width tile in a
four-up grid — it reads as a page with seven things missing. Side by side,
the same card reads as a deliberate founder block. */
.people.one{grid-template-columns:1fr}
.people.one .person{flex-direction:row;align-items:center;gap:clamp(24px,4vw,48px);max-width:760px}
.people.one .person .portrait{flex:0 0 clamp(190px,26vw,270px)}
.people.one .person-body{padding:0}
.people.one .person h3{font-size:clamp(22px,2.4vw,30px)}
.people.one .person p{font-size:16px;max-width:34em}
@media (max-width:640px){ .people.one .person{flex-direction:column;align-items:stretch} }
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:600}
.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:var(--ink)}
.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:var(--ink)}
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);color:var(--ink)}
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) --- */
/* The frame owns its size; the photograph fills it. Before this, the slot
had only a min-height and no rule for the filled image, so every upload
re-sized the section to the photo's own proportions — a tall portrait made
the kids block a full screen. Cropping is the focus dial's job. */
.photo-slot{display:flex;align-items:center;justify-content:center;text-align:center;
position:relative;overflow:hidden;
height:clamp(320px,44vw,560px);
background:var(--paper-3);border-radius:3px;
padding:24px}
.photo-slot img[data-pm-fill],.photo-slot video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:var(--pm-focus,50% 50%);padding:0;border-radius:inherit}
/* the family block sits beside four short paragraphs — the default frame
leaves it towering over its own text, so it runs a size down */
.photo-slot[data-pm-photo="home.family"]{height:clamp(280px,34vw,440px)}
.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:var(--ink)}
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(--ink)}
.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(--ink)}
.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(--ink)}
.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 auto;gap:12px 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(500px,74vh,820px)}
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
Not generated any more. assets/images/limewash.webp is Miki's own swatch,
photographed, then stripped down to structure alone: high-passed to remove
the lighting gradient of the photo, centred on mid grey so it neither
darkens nor lightens on average, and offset-blended so it tiles seamlessly.
What survives is the trowel — which is the part fractal noise could never
fake, and the reason the generated version read as "nothing but a bit
darker".
It goes on as an overlay, not as a background-image, so strength is a plain
opacity: 0.45 for a coat, 0.8 for a heavy one. soft-light means it lifts
where the plaster catches light and drops where it pools, in whatever
colour the section already is.
========================================================================== */
:root{ --lime:url(../assets/images/limewash.webp); --lime-op:.45 }
/* a lighter coat, for pages where the plaster should barely register */
body.texture.lime-faint{ --lime-op:.24 }
body.texture section:not(.hero):not(.phero),
body.texture footer,
html.texture-pending body section:not(.hero):not(.phero),
html.texture-pending body footer{ position:relative }
body.texture section:not(.hero):not(.phero)::before,
body.texture footer::before,
html.texture-pending body section:not(.hero):not(.phero)::before,
html.texture-pending body footer::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:var(--lime) 0 0/760px 760px repeat;
mix-blend-mode:overlay;
opacity:var(--lime-op);
}
/* the wash sits under the words, never over them.
Only the content wrappers are lifted — never `section > *`, which would
catch the hero's absolutely-positioned ![]()
and drop it back into the
flow, pushing the whole hero down by its own height. */
body.texture section > .wrap,
body.texture section > .wrap-wide,
body.texture footer > .wrap,
body.texture footer > .wrap-wide,
body.texture section > .cmp-scroll,
body.texture section > .mem-view{position:relative;z-index:1}
/* dark grounds swallow soft-light; overlay keeps the trowel visible there */
body.texture section.ink::before,
body.texture section.statement::before,
body.texture footer::before{ mix-blend-mode:overlay;opacity:calc(var(--lime-op) * .55) }
/* a photograph does not want a wash over it */
body.texture .hero::before,body.texture .phero::before{content:none}
/* ==========================================================================
LAYOUT C · HOUSE
primalmoves.com's structure, in our colours and our words.
THE INVERSION, which is the whole point of this layout.
Our markup writes every section like this:
bring your family
← the actual subject
the kids train here too
← a poetic aside
Kids' Primal runs on the same floor…
← a paragraph
Layouts A and B render that literally: a 10px label, a 40px poem, and a
wall of text. primalmoves.com does the opposite — the plain informational
phrase IS the heading ("Come to Class", "Find your primal studio"), and
there is at most one short line under it.
So here the roles swap. The eyebrow becomes the heading. The poetic line
drops to one quiet line beneath it. The paragraph shrinks. Same HTML,
read the way their site reads. Nothing else in the site changes, because
layouts A and B never see these rules.
========================================================================== */
/* the block becomes a column so the two can trade places */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)){display:flex;flex-direction:column}
/* anything not named below sorts after the head — otherwise a card grid
or a list renders above the heading that introduces it */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > *{order:6}
/* 0 · every eyebrow outside the hero reads as a title in this layout —
including the odd one that sits on its own with no heading beside it
(studio's "Room by room"), which the swap rule below never sees */
body.house section:not(.hero):not(.phero) .kicker{
font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:400;
letter-spacing:-.015em;text-transform:none;color:var(--ink);margin-bottom:12px}
body.house section.ink:not(.hero):not(.phero) .kicker{color:var(--cream)}
/* 1 · the eyebrow is now the title */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .kicker{
order:1;margin:0 0 12px;max-width:20ch;
font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:400;
letter-spacing:-.015em;text-transform:none;color:var(--ink)}
/* 2 · the old headline is now the quiet line under it */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(h1, h2, h3, .display, .display-sm){
order:2;margin:0 0 16px !important;max-width:46ch !important;
font-size:17px !important;line-height:1.6;font-weight:400;
letter-spacing:0;color:var(--mid)}
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(h1, h2, h3, .display, .display-sm) :is(em,.ed-it,span){font-style:italic;color:inherit}
/* the demoted line is one line — the source now carries a space before every
, so hiding it joins the words rather than welding them together */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(h1,h2,h3,.display,.display-sm) br{display:none}
/* 3 · and the paragraph stops shouting (inline styles need the !important) */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(p,.lede):not(.embed-note){order:3;font-size:16px !important;line-height:1.65;
color:var(--mid);max-width:52ch !important}
body.house section.ink:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(p,.lede):not(.embed-note){color:var(--on-dark)}
/* the heading-only case on a dark band (no eyebrow beside it) */
body.house section.ink:not(.hero):not(.phero) *:not(:has(> .kicker)) > :is(h2,.display-sm){color:var(--cream)}
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(ul,ol,.info-list,.plans,.ways){order:5}
/* a footnote sits under whatever it annotates, and the buttons come last —
on /events/ the old order:4 put both above the list of events they follow */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .embed-note{order:7;margin-top:18px}
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .cta-row{order:8;margin-top:clamp(22px,2.6vw,32px)}
/* on the dark bands the same two roles, in the light palette */
body.house section.ink:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .kicker{color:var(--cream)}
body.house section.ink:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(h1, h2, h3, .display, .display-sm){color:var(--on-dark)}
/* --- where a section has no eyebrow, the heading stays the heading ------- */
body.house section:not(.hero):not(.phero) *:not(:has(> .kicker)) > :is(h2,.display-sm){
font-size:clamp(27px,3.2vw,42px);line-height:1.08;letter-spacing:.015em}
/* --- the hero keeps its scale; it is the one place a big line belongs ---- */
body.house .hero .display{font-size:clamp(44px,7vw,92px);line-height:1.02}
body.house .hero .kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--cream)}
/* --- everything else keeps the alignment it has in the other layouts ----- */
body.house .btn{border-radius:999px;padding:15px 30px;font-size:12px;letter-spacing:.14em}
/* House runs tighter than the base layout — but .flush means "no padding,
this section owns its own spacing" (the hero, the closing block) and
.pad-sm is already the tight one. Overriding both was what pushed the
hero copy off the bottom edge and opened a hole above "two ways to start". */
body.house section:not(.flush):not(.hero):not(.phero):not(.pad-sm){padding:clamp(64px,8vw,110px) 0}
body.house section.pad-sm{padding:clamp(46px,6vw,84px) 0}
body.house .split img,body.house .split video[data-pm-photo]{
height:clamp(300px,40vw,500px);border-radius:6px}
body.house .photo-slot{height:clamp(320px,42vw,460px)}
body.house .way,body.house .obj{
background:var(--paper);border:1px solid var(--line);border-radius:8px;
padding:clamp(22px,2.6vw,32px)}
@media (max-width:820px){
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .kicker{font-size:clamp(25px,6.6vw,34px)}
}
/* ==========================================================================
THE DAY RAIL
A week of classes stacked was eight screens nobody reaches the end of.
One day at a time, picked from a rail that scrolls sideways — the pattern
Mindbody's own embed uses, in our type.
========================================================================== */
.daybar{display:flex;align-items:center;justify-content:center;gap:8px;
margin:0 0 clamp(22px,3vw,34px)}
.daybar .dnav{flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
background:transparent;border:1px solid var(--line);color:var(--mid);
font:inherit;font-size:17px;line-height:1;display:grid;place-items:center}
.daybar .dnav:hover{border-color:var(--ink);color:var(--ink)}
.days{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
scrollbar-width:none;padding:2px;
/* centred while the week fits; `safe` keeps the first day reachable
once it overflows, instead of clipping it off the left edge */
justify-content:safe center}
.days::-webkit-scrollbar{display:none}
.dchip{flex:none;min-width:66px;padding:10px 6px 12px;border-radius:10px;cursor:pointer;
background:transparent;border:1px solid var(--line);font:inherit;color:var(--mid);
display:grid;gap:3px;justify-items:center;transition:background .15s ease,color .15s ease}
.dchip .dw{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.dchip .dd{font-size:19px;font-weight:500;color:var(--ink)}
.dchip:hover{border-color:var(--ink)}
.dchip.on{background:var(--sage-btn);border-color:var(--sage-btn);color:var(--ink)}
.dchip.on .dd{color:var(--cream)}
section.ink .dchip{border-color:rgba(255,255,255,.2);color:var(--on-dark-soft)}
section.ink .dchip .dd{color:var(--on-dark)}
section.ink .dchip.on{background:var(--cream);border-color:var(--cream);color:var(--deep)}
section.ink .dchip.on .dd{color:var(--deep)}
section.ink .daybar .dnav{border-color:rgba(255,255,255,.2);color:var(--on-dark-soft)}
/* one day showing at a time */
.sched-day{display:none}
.sched-day.on{display:block}
.sched-day .sched-date{margin-bottom:6px}
/* the closing pair now sits on its own band — the feature card needs to lift
off taupe rather than blend into it */
section.alt .way.feature{background:var(--paper);border-color:var(--line)}
section.alt .way{background:transparent}
/* the timetable block reads as one centred module: rail, then the two
actions under it, then the one line of advice */
.sched-cta{justify-content:center}
.sched-note{text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
/* a class card is a link to the timetable now */
a.cls{text-decoration:none;color:inherit}
a.cls h3{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* the sticky nav must not sit on top of the section you just jumped to */
#schedule{scroll-margin-top:calc(var(--nav-h,84px) + 18px)}
/* a picture dropped into a frame fills it exactly — same size every time,
whatever shape the photograph itself is */
[data-pm-photo] > img[data-pm-fill],
[data-pm-photo] > video[data-pm-fill]{
width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.person .portrait{aspect-ratio:4/5;overflow:hidden}
.person .portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* ==========================================================================
HOUSE TEMPLATE · /house/
Its own markup, so this is a design rather than a reinterpretation.
The rhythm is theirs: full-bleed picture, centred statement, picture,
card grid, picture. One action per band. Nothing is 34% of the page
width with two thirds of empty paper beside it.
========================================================================== */
/* --- the hero: one picture, one line ------------------------------------- */
.hs-hero{position:relative;min-height:min(88vh,880px);display:flex;align-items:flex-end;
overflow:hidden;background:var(--deep)}
.hs-hero > img,.hs-hero > video{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover}
.hs-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,18,14,.34) 0%,rgba(20,18,14,.12) 42%,rgba(20,18,14,.72) 100%)}
.hs-hero-inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
padding:0 var(--gut) clamp(52px,8vh,96px);color:var(--cream);text-align:center}
.hs-hero .hs-eyebrow{position:static;font-size:11px;letter-spacing:.26em;
text-transform:uppercase;color:var(--cream);opacity:.85;margin:0 0 20px;
text-align:center}
.hs-display{font-size:clamp(40px,6.6vw,86px);line-height:1.04;font-weight:300;
letter-spacing:-.02em;color:var(--cream);text-shadow:0 1px 26px rgba(20,18,14,.4)}
.hs-hero .cta-row{justify-content:center;margin-top:34px}
/* --- a statement: centred, narrow, one action ---------------------------- */
.hs-statement{padding:clamp(86px,12vw,152px) 0}
.hs-statement.tight-top{padding-top:clamp(64px,8vw,104px)}
.hs-statement.alt{background:var(--paper-2)}
.hs-narrow{max-width:46rem;margin:0 auto;padding:0 var(--gut);text-align:center}
.hs-narrow h2{font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-.02em;
font-weight:400;max-width:18ch;margin:0 auto}
.hs-narrow p{font-size:17.5px;line-height:1.7;color:var(--mid);max-width:52ch;
margin:22px auto 0}
.hs-narrow .cta-row{justify-content:center;margin-top:32px}
/* --- a photograph, edge to edge ------------------------------------------ */
.hs-band{padding:0;line-height:0;background:var(--paper-3)}
.hs-band img,.hs-band video{width:100%;height:clamp(320px,52vh,620px);object-fit:cover;
display:block}
/* --- the ways in, as cards ----------------------------------------------- */
.hs-cards-wrap{padding:clamp(76px,10vw,128px) 0}
.hs-head{text-align:center;margin-bottom:clamp(38px,5vw,64px)}
.hs-head h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;
font-weight:400}
.hs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.hs-card{display:block;text-decoration:none;color:inherit;border-radius:10px;
overflow:hidden;background:var(--paper);border:1px solid var(--line);
transition:transform .18s ease,border-color .18s ease}
.hs-card:hover{transform:translateY(-3px);border-color:var(--sage)}
.hs-card-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.hs-card-img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s ease}
.hs-card:hover .hs-card-img img{transform:scale(1.03)}
.hs-card-body{padding:20px 20px 24px}
.hs-card-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--sage-txt);margin-bottom:8px}
.hs-card h3{font-size:21px;font-weight:400;margin:0 0 8px}
.hs-card p{font-size:14.5px;line-height:1.6;color:var(--mid);margin:0}
@media (max-width:1000px){ .hs-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hs-cards{grid-template-columns:1fr} }
/* --- the calendar sits inside a statement -------------------------------- */
.hs-cal{margin-top:clamp(34px,4.5vw,56px);display:grid;
grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(30px,5vw,68px);align-items:start}
.hs-cal .pm-cal{display:block}
.hs-cal .pm-cal-grid{max-width:none;margin:0}
@media (max-width:860px){ .hs-cal{grid-template-columns:1fr} }
/* the /house/ page is its own design — the layout-B and overlay rules that
reinterpret the shared markup must not also fire here */
body.house .hs-narrow .kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* a constrained block under a centred head is centred too */
.hs-module-body .cls-list,
.hs-module-body .cmp-try{margin-left:auto;margin-right:auto}
.hs-module-body{margin-top:clamp(30px,4vw,48px)}
.hs-module{padding:clamp(76px,10vw,128px) 0}
.hs-module.alt{background:var(--paper-2)}
.hs-module .hs-narrow h2{margin-bottom:0}
/* ==========================================================================
HOUSE · primalmoves.com's treatment, in our palette
--------------------------------------------------------------------------
The brief, stated plainly: the ONLY things House keeps from our own design
are the colours and the limewash. Everything else follows their site.
What theirs actually does, once you stop guessing and look:
· type at weight 200-300 — never bold, never italic, anywhere
· a small uppercase label, or one large uppercase heading. Never both a
heading and a poetic second line underneath it.
· body copy in sentence case, ~62 characters, generous leading
· a great deal of vertical air — a section is mostly empty
· outline pill buttons, uppercase and tracked out
· tall photographs, one to a section, held to one side
Our lowercase headings and italic serif accents were ours, not theirs.
Both are gone here. The cream, the taupe, the forest and the limewash all
stay exactly as they are — that is the whole of what we keep.
Scoped to body.house throughout: layouts A and B are untouched.
========================================================================== */
body.house{
/* our palette, named for the roles their layout needs */
--h-fg:var(--ink);
--h-mid:var(--mid);
--h-line:var(--line);
}
/* on the forest bands the same three roles, in the light values */
body.house :is(section.ink,.statement,.hero,.phero){
--h-fg:var(--cream);
--h-mid:var(--on-dark);
--h-line:rgba(247,243,231,.22);
}
/* --- air ------------------------------------------------------------------ */
body.house section:not(.flush):not(.hero):not(.phero):not(.pad-sm){padding:clamp(88px,12vw,170px) 0}
body.house section.pad-sm{padding:clamp(70px,9vw,128px) 0}
body.house .hs-module{padding:clamp(88px,12vw,170px) 0}
/* --- the heading system ---------------------------------------------------
One large uppercase line at weight 200. House promotes the eyebrow into
that role because the eyebrow is where our real section names live. */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .kicker,
body.house section:not(.hero):not(.phero) .kicker,
body.house section:not(.hero):not(.phero) *:not(:has(> .kicker)) > :is(h2,.display-sm),
body.house .hs-narrow h2,body.house .hs-hero h1{
font-family:var(--sans);font-weight:200;text-transform:uppercase;
font-size:clamp(28px,3.7vw,50px);line-height:1.08;letter-spacing:.015em;
color:var(--h-fg);margin:0 0 20px;max-width:22ch;
}
/* the poetic line that used to be the headline does not appear in this
layout — demoting it to a subhead was the "massive subtitles, just moved"
problem, and their site has no such line at all */
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(h1,h2,h3,.display,.display-sm){display:none}
/* no italic serif accents — theirs has none */
body.house *{font-style:normal !important}
body.house :is(h1,h2,h3,h4,.display,.display-sm,.kicker) :is(em,.ed,.ed-it,span){
font-family:inherit;font-weight:inherit;color:inherit;
text-transform:inherit;letter-spacing:inherit}
body.house :is(h1,h2,h3,h4,.display,.display-sm) br{display:none}
/* --- sub-headings: card titles, class names, coach names ------------------ */
body.house :is(h3,h4),body.house :is(.person h3,.cls h3,.exp h3,.ev h3,.way h3,.obj h3){
font-weight:300;text-transform:uppercase;letter-spacing:.09em;
font-size:clamp(14px,1.15vw,16px);line-height:1.4;color:var(--h-fg)}
/* --- body copy ------------------------------------------------------------ */
body.house :is(p,li,dd,td,.lede,.a,.desc,.meta,.aside){
font-weight:300;color:var(--h-mid);letter-spacing:.005em}
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > :is(p,.lede):not(.embed-note){
order:3;font-size:clamp(17px,1.35vw,20px) !important;line-height:1.75;
color:var(--h-mid);max-width:62ch !important}
body.house .lede{font-size:clamp(17px,1.35vw,20px);line-height:1.75;max-width:62ch}
body.house .faq summary{font-weight:300;text-transform:none;letter-spacing:0;
font-size:clamp(16px,1.3vw,19px);color:var(--h-fg)}
/* the small tracked-out labels, theirs and ours alike */
body.house :is(.role,.theme,.tag,.lvl,.n,.foot-top h4,th,.cmp-per,.day-head){
font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
/* --- nav and buttons: their form, our colours ----------------------------- */
/* The chrome was rendering in Light — Harmonia has no Regular here yet, so
anything asking for 400 falls DOWN to 300, and 12px caps at weight 300 is
genuinely hard to read. The nav and the wordmark take SemiBd, the one
heavier weight we have; the ink colour instead of the grey for the same
reason. Swap to 400 when the Regular file lands, if SemiBd reads heavy. */
body.house :is(.brand,.nav-links a){text-transform:uppercase;font-weight:600;letter-spacing:.1em}
body.house .brand{color:var(--ink)}
body.house .nav-links a{font-size:12px;color:var(--ink);opacity:.75}
body.house .nav-links a:hover,body.house .nav-links a.current{opacity:1}
body.house .mobile-menu a{font-weight:600}
body.house .brand span{font-weight:600;color:var(--soft)}
body.house .btn{border-radius:999px;padding:15px 32px;font-size:11.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase}
body.house .btn.lg{padding:17px 38px;font-size:12.5px}
/* --- photographs: tall, one to a section ---------------------------------- */
body.house .split img,body.house .split video[data-pm-photo]{
height:clamp(420px,46vw,700px);border-radius:2px;object-fit:cover}
body.house .photo-slot{height:clamp(420px,46vw,700px)}
body.house .person .portrait{aspect-ratio:3/4}
body.house .hs-band img{height:clamp(380px,44vw,640px)}
/* --- the standing statement: one centred uppercase line ------------------- */
body.house .statement .big{
font-family:var(--sans);font-weight:200;text-transform:uppercase;
font-size:clamp(30px,4.4vw,62px);line-height:1.1;letter-spacing:.015em;
color:var(--cream);text-align:center;max-width:20ch;margin-inline:auto}
body.house .statement .big :is(em,span){color:inherit}
body.house .statement :is(p,.kicker){text-align:center;margin-inline:auto}
/* prices read as headings here, not as sentences */
body.house :is(.price,.amt){text-transform:uppercase;font-weight:200;letter-spacing:.01em}
/* --- footer --------------------------------------------------------------- */
body.house .foot-top li a{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:300}
body.house .foot-brand .display-sm{text-transform:uppercase;font-weight:200;letter-spacing:.015em;
font-size:clamp(28px,3.8vw,52px)}
/* --- the hero keeps its photograph and its scale -------------------------- */
body.house .hero .display{font-size:clamp(44px,7.4vw,100px);font-weight:200;
letter-spacing:.01em;text-transform:uppercase;color:var(--cream)}
body.house .hero .kicker{font-size:11px;font-weight:400;letter-spacing:.22em;
text-transform:uppercase;color:var(--cream);max-width:none;margin-bottom:18px}
@media (max-width:820px){
body.house section:not(.hero):not(.phero) *:has(> .kicker):has(> :is(h1,h2,h3,.display,.display-sm)) > .kicker,
body.house section:not(.hero):not(.phero) .kicker{font-size:clamp(26px,7vw,36px)}
}
/* --- page heroes ----------------------------------------------------------
The interior page title is the same role as the hero headline, so it takes
the same treatment: caps at weight 200. And the small label above it goes —
on /events/ it read "WHAT'S ON" directly above a section heading that also
read "WHAT'S ON", which is the same words twice and text we don't need. */
body.house .phero :is(h1,.display,.display-sm){
text-transform:uppercase;font-weight:200;letter-spacing:.015em;
font-size:clamp(38px,6vw,84px);line-height:1.04;color:var(--cream)}
body.house .phero .kicker{display:none}
/* the mobile menu follows the same rule as the rest of House: caps, light */
body.house .mobile-menu a{text-transform:uppercase;font-weight:300;
letter-spacing:.09em;font-size:17px}
body.house .nav-toggle{color:var(--ink)}
/* ==========================================================================
CLASS TILES ON A PHONE
Appended deliberately at the end: the earlier mobile block sits *above*
the base .cls rules in the file, so `min-height:196px` was beating its
own override on source order alone — which is why the tiles stayed tall
no matter what the media query said.
========================================================================== */
@media (max-width:720px){
/* a narrower page so three columns are not fighting for room */
:root{--gut:14px}
.cls-list{gap:6px;max-width:none;align-items:stretch}
/* the tile hugs its content: no floor, no space-between pushing the meta
to the bottom of a height nothing asked for */
.cls{min-height:0;padding:12px 9px 28px;text-align:center;align-items:center}
.cls-head{flex:0 0 auto;justify-content:flex-start;align-items:center;
gap:7px;width:100%}
.cls-meta{align-items:center;gap:2px}
/* PROGRESSION is the longest word in the set and it sets the size —
tracking comes off first, then a point of type */
.cls h3,body.house .cls h3{font-size:12.5px;line-height:1.2;letter-spacing:.02em;
padding-right:0;overflow-wrap:break-word}
.cls .lvl,body.house .cls .lvl{font-size:8.5px;letter-spacing:.07em;line-height:1.3}
/* lower right, out of the way of the title */
.cls-more{top:auto;bottom:1px;right:1px;width:26px;height:26px}
/* opened, the tile takes the row — and the level and length stack under
the title rather than running along beside it */
.cls.open{grid-column:1 / -1;padding-bottom:30px}
.cls.open .cls-head{flex-direction:column;align-items:center;gap:7px}
.cls.open .cls-meta{flex-direction:column;align-items:center;gap:2px}
.cls.open h3,body.house .cls.open h3{font-size:15px}
.cls .desc{text-align:left;font-size:13px}
}
/* the chartreuse pill carries an ink label everywhere — cream on #D4B906 is
1.8:1, ink is 8.2:1 */
body.house .btn.sage,body.house .btn.on-dark{color:var(--ink)}
body.house .btn.sage:hover,body.house .btn.on-dark:hover{color:var(--h-fg)}
/* ==========================================================================
THE PRIMAL MOVES LAYOUT RUNS THEIR TYPEFACE
primalmoves.com is set in Jost — the double-story a, the open single-story
g, the slant-cut t, the circular rounds. Until now this layout borrowed
the site's Helvetica stack, which is why it never quite read as theirs.
Scoped to body.house; layouts A and B stay on Helvetica Neue.
========================================================================== */
/* Harmonia Sans Std, self-hosted — the files came out of primalmoves.com's
own brand assets (Jeremy pulled them through the site's console; direct
URLs are hotlink-blocked). Light carries the headings; SemiBd the rare
emphasis. Regular (400) is still to come — until it lands, body text
resolves to Light, which is a shade thinner than theirs. */
@font-face{
font-family:"Harmonia";font-style:normal;font-weight:300;font-display:swap;
src:url("fonts/HarmoniaSansStd-Light.woff2") format("woff2")}
@font-face{
font-family:"Harmonia";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/HarmoniaSansStd-SemiBd.woff2") format("woff2")}
/* CORRECTION: their computed body font is Harmonia (Harmonia Sans, Monotype)
— read straight off primalmoves.com in DevTools, not guessed. It is a
licensed face, so the files have to come from their brand kit or their
server; "Harmonia" leads the stack now and activates the moment an
@font-face for it lands here. Until then Jost is the stand-in — the
closest free geometric — not the destination. */
body.house{--sans:"Harmonia","Jost","Helvetica Neue",Helvetica,"Inter",Arial,sans-serif}
body.house,body.house :is(input,button,select,textarea){
font-family:var(--sans)}
/* Jost runs a touch smaller than Helvetica at the same size — the weights
were tuned on Helvetica, so the lightest tier comes up one step */
body.house :is(h1,h2,h3,.display,.display-sm,.kicker,.price,.amt){font-weight:300}
body.house .hero .display{font-weight:300}
/* The panel-wash experiment is gone: overlaying the wash on components
painted grey boxes over TRANSPARENT tiles (the objectives, the what-to-
bring grid) - a second coat where there was no panel at all. The wash
lives on the walls; anything transparent shows it naturally, and solid
cards read as clean surfaces against the washed ground. */
/* ==========================================================================
THE REAL LOGO
The wordmark was set in the site's own type; the brand mark exists, so it
goes in — black on the light header, white in the footer. The files are
2x for retina; height is set here, width follows.
========================================================================== */
.brand img{display:block;height:46px;width:auto}
.foot-brand-mark img{display:block;height:56px;width:auto}
@media (max-width:620px){ .brand img{height:36px} }
/* the old text styling no longer applies to anything, but the link keeps
its hit area */
.brand{display:inline-flex;align-items:center}
/* ==========================================================================
THE REVIEW BATCH
========================================================================== */
/* the definition line, in the hand — bold, slanted, unmistakably not body
copy. The house layout's no-italics rule stands down for this one line:
a handwritten aside is the exception that proves it. */
.hand-line{font-family:var(--hand);font-style:italic;font-weight:600;
font-size:clamp(24px,2.4vw,34px);line-height:1.3;color:var(--ink);
letter-spacing:0;text-transform:none;max-width:24em}
body.house .hand-line{font-style:italic !important;font-family:var(--hand)}
section.ink .hand-line{color:var(--cream)}
/* the four objectives sit as a 2x2 square at every desktop width — they
used to auto-fill, which reflowed them 3+1 or 4-across depending on how
wide the window happened to be */
.obj-list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,34px)}
@media (max-width:640px){ .obj-list{grid-template-columns:1fr} }
/* on the method page the tiles dissolve into the wall: no panel ground, no
second coat of wash — the whole section is one textured tone and the four
parts are just type sitting on it, in their square */
body.page-method .obj{background:transparent;border:0;padding:0}
body.page-method .obj::before{content:none}
/* coach portraits on the timetable, from our own slots */
/* the row is a grid: time | class | ......... portrait | teacher, right.
The portrait sits beside the name it belongs to, both on the right edge. */
.s-ava{display:none;width:34px;height:34px;border-radius:50%;
background-size:cover;background-position:var(--pm-focus,50% 18%);
border:1px solid var(--line);grid-column:3;grid-row:1;align-self:center}
.s-ava.on{display:block}
.s-time{grid-column:1}
.s-name{grid-column:2}
.s-meta{grid-column:4;grid-row:1;align-self:center}
section.ink .s-ava{border-color:rgba(255,255,255,.25)}
/* class-group headings — small caps rails between the tile blocks */
.cls-group{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
color:var(--soft);margin:clamp(30px,4vw,44px) 0 4px}
.cls-group:first-of-type{margin-top:0}
body.house .cls-group{font-size:11.5px;letter-spacing:.24em;color:var(--soft);max-width:none}
body.house .cls-groups .cls-group{text-align:center}
/* the online-portal nudge under the schedule */
.online-nudge{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
margin-top:clamp(26px,3.5vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.online-nudge p{margin:0;color:var(--mid);font-size:15.5px}
/* the four spaces of the studio — squares, labelled */
.spaces{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.spaces figure{margin:0}
.spaces img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block}
.spaces figcaption{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--soft)}
@media (max-width:860px){ .spaces{grid-template-columns:repeat(2,1fr)} }