/* Alexia Kay, variation A: "Barefoot Editorial"
   The Lillet Blanc anatomy (editorial, typographic, black and white photos)
   worn in Lexie's world: faith, dance, self care, blush and mauve.
   PLUG IN: every colour, font and the logo live in the :root block below. */

:root {
  /* colours: Lexie's own five, exactly as her brand guide gives them (10/16), and her roles for them:
     cream carries most layouts, black for text and main buttons, soft pink for welcoming
     sections, olive for nature, cloudy pink for quote sections. No light pink or olive text on cream. */
  --k-paper: #FAF5EB;      /* cream, about 55% of the page */
  --k-ink: #171717;        /* black */
  --k-accent: #CFAFB8;     /* cloudy pink: lines, washes, quote section; never small text on cream */
  --k-secondary: #171717;  /* accent words stay black, set in italic (her pairing rule) */
  --k-deep: #171717;       /* black bands and footer */
  --k-tint: #F1D6D8;       /* soft pink sections */
  --k-on-deep: #FAF5EB;
  --k-olive: #A8AD91;      /* soft olive sections */
  --k-cloud: #CFAFB8;      /* cloudy pink sections */
  --k-white: #FFFFFF;      /* the shop: Olive Tree People product photos sit on white, as in their store */

  /* photo treatment: 1 = black and white, 0 = her photos in full colour.
     0.6 keeps the Lillet softness but lets her pinks and greens through, under a blush wash. */
  --k-photo-mono: 0.6;
  --k-photo-wash: 0.42;
  --k-photo-blend: soft-light;

  /* fonts */
  --k-display: "Instrument Serif", "Times New Roman", serif;  /* stand-in for her Adlery Blockletter until we have the web font */
  --k-body: "Lato", "Helvetica Neue", sans-serif;   /* her body font */
  --k-label: "Lato", "Helvetica Neue", sans-serif;  /* her guide: Lato bold for buttons and labels */
  --k-script: "Blackstone", cursive;

  /* logo: drop files in assets/, point these at them, set --k-wordmark to none */
  --k-logo: url("assets/logo.png");             /* her Canva lockup, 11/5: heart + Alexia Kay, black */
  --k-logo-light: url("assets/logo-light.png"); /* the cream one, for photos and the footer */
  --k-wordmark: none;
  --k-logo-w: 176px;
  --k-logo-h: 55px;
  --k-logo-hero-light: url("assets/logo-stacked-light.png"); /* stacked for the hero, 11/6: her heart over her script name */
  --k-logo-hero: url("assets/logo-stacked.png");   /* the black stacked lockup, for the colour field hero (11/7) */
  --k-logo-hero-w: 620px;
  --k-logo-hero-h: 411px;
  --k-logo-hero-ratio: 1400 / 928;
}

[data-palette="b"] {
  /* palette b, "Blush Editorial": the first direction, plum and mauve, kept to compare */
  --k-paper: #FBF2F0;
  --k-ink: #2B2125;
  --k-accent: #C9939B;
  --k-secondary: #8E6878;
  --k-deep: #3F2C34;
  --k-tint: #F4E0DD;
  --k-on-deep: #FBF2F0;
  --k-olive: #F4E0DD;
  --k-cloud: #F4E0DD;
  --k-white: #FFFFFF;
  --k-photo-mono: 0.45;
  --k-photo-wash: 0.3;
  --k-photo-blend: soft-light;
  --k-logo: url("assets/logo.png");             /* her Canva lockup, 11/5: heart + Alexia Kay, black */
  --k-logo-light: url("assets/logo-light.png"); /* the cream one, for photos and the footer */
  --k-wordmark: none;
  --k-logo-w: 176px;
  --k-logo-h: 55px;
  --k-logo-hero-light: url("assets/logo-stacked-light.png"); /* stacked for the hero, 11/6: her heart over her script name */
  --k-logo-hero: url("assets/logo-stacked.png");   /* the black stacked lockup, for the colour field hero (11/7) */
  --k-logo-hero-w: 620px;
  --k-logo-hero-h: 411px;
  --k-logo-hero-ratio: 1400 / 928;
}

@font-face { font-family: "Selino"; src: url("assets/fonts/Selino.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Blackstone"; src: url("assets/fonts/Blackstone.woff2") format("woff2"); font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-body);
  font-size: 18px;
  line-height: 1.62;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--k-display); font-weight: 400; margin: 0; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
em, i { font-style: italic; }
.wrap { width: min(1180px, 100% - 64px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label.label {
  font-family: var(--k-label);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.5;
}
.script { font-family: var(--k-script); text-transform: none; font-weight: 400; letter-spacing: 0; }

/* the long thin arrow link, used everywhere a Lillet page says "shop all" */
.more {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--k-label); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0;
}
.more::after {
  content: ""; width: 44px; height: 1px; background: currentColor;
  transition: width .35s ease;
  mask: none;
}
.more:hover::after, .more:focus-visible::after { width: 72px; }

.btn {
  display: inline-block;
  font-family: var(--k-label); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; padding: 17px 30px;
  background: var(--k-on-deep); color: var(--k-deep);
  border: 1px solid var(--k-on-deep);
  transition: background .3s ease, color .3s ease;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--k-on-deep); }
.btn--ink { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: transparent; color: var(--k-ink); }
.btn--line { background: transparent; color: var(--k-ink); border-color: var(--k-ink); }
.btn--line:hover, .btn--line:focus-visible { background: var(--k-ink); color: var(--k-paper); }

/* ---------- photos: one treatment, so her photos match on arrival ---------- */
.ph { position: relative; overflow: hidden; background: var(--k-tint); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--k-photo-mono)) contrast(1.04); }
.ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--k-photo-mono)) contrast(1.04); }
@media (prefers-reduced-motion: reduce) { .ph video { display: none; } }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--k-accent); mix-blend-mode: var(--k-photo-blend); opacity: var(--k-photo-wash);
}
/* product covers keep their true colours, so people know them in a store */
.ph--true img { filter: none; }
.ph--true::after { display: none; }

/* ---------- brand / logo ---------- */
.brand {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit;
  background: var(--k-logo) center / contain no-repeat;
  min-width: var(--k-logo-w); min-height: var(--k-logo-h);
}
.brand .wordmark { display: var(--k-wordmark); font-family: var(--k-display); }
.on-photo .brand, .site-foot .brand { background-image: var(--k-logo-light); }

/* ---------- header ---------- */
.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  color: var(--k-on-deep);
}
.site-head__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px 40px;
}
.site-head--paper { position: relative; color: var(--k-ink); border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.nav { display: flex; gap: 38px; justify-content: center; }
.nav a { text-decoration: none; font-family: var(--k-label); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.head-right { display: flex; gap: 18px; justify-content: flex-end; align-items: center; }
.icon { width: 18px; height: 18px; display: block; }
.icon-link { display: inline-flex; padding: 6px; color: inherit; }

/* the menu: a details element, so it opens with no JavaScript at all */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font-family: var(--k-label); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; padding: 6px 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu__lines { width: 34px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.menu__panel {
  position: fixed; inset: 0; z-index: 40;
  background: var(--k-deep); color: var(--k-on-deep);
  display: grid; align-content: center; justify-items: center; gap: 6px;
  padding: 80px 24px;
}
.menu__panel a { font-family: var(--k-display); font-size: clamp(40px, 7vw, 76px); text-decoration: none; line-height: 1.1; }
.menu__panel a:nth-child(even) { font-style: italic; }
.menu[open] summary { position: relative; z-index: 50; color: var(--k-on-deep); }
.head-left { display: flex; align-items: center; gap: 30px; }
.brand-small { font-size: 32px; line-height: 1; }
.menu__when-open { display: none; }
.menu[open] .menu__when-open { display: inline; }
.menu[open] .menu__when-closed { display: none; }

/* ---------- hero ---------- */
/* --paper-h: how much of the portrait hangs below the photo onto the paper. --frame: the offset of the hairline frame. */
.hero { --paper-h: 260px; --frame: 18px; position: relative; text-align: center; padding: 120px 0 0; color: var(--k-on-deep); }
.hero__bg { position: absolute; inset: 0 0 var(--paper-h) 0; }
.hero__bg.ph { background: var(--k-deep); }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--k-deep) 58%, transparent) 0%, color-mix(in srgb, var(--k-deep) 42%, transparent) 42%, color-mix(in srgb, var(--k-deep) 14%, transparent) 72%, color-mix(in srgb, var(--k-deep) 30%, transparent) 100%); }
.hero__inner { position: relative; z-index: 2; text-shadow: 0 1px 18px color-mix(in srgb, var(--k-deep) 55%, transparent); }
.hero__inner .portrait { text-shadow: none; }
.hero .brand--hero { background-image: var(--k-logo-hero-light, var(--k-logo-light)); font-size: clamp(64px, 10.4vw, 156px); line-height: 0.95; letter-spacing: -0.02em; max-width: 100%; min-width: min(var(--k-logo-hero-w), 86vw); min-height: var(--k-logo-hero-h); }
.hero__tag { display: inline-block; margin-top: 18px; padding: 10px 0; text-shadow: 0 1px 12px color-mix(in srgb, var(--k-deep) 60%, transparent), 0 0 2px color-mix(in srgb, var(--k-deep) 35%, transparent); }
.hero__tag.label { font-size: 13px; letter-spacing: 0.32em; }
.hero__tag span + span::before { content: "\00B7"; margin: 0 16px; opacity: .75; }
.portrait { position: relative; width: min(470px, 78vw); margin: 56px auto 0; }
.portrait .ph { aspect-ratio: 4 / 5; }
/* the offset hairline frame only shows on the paper, below the hero photo, so it never reads as a stray line over the trees */
.portrait__frame { position: absolute; inset: var(--frame) calc(var(--frame) * -1) calc(var(--frame) * -1) var(--frame); border: 1px solid var(--k-accent); z-index: -1; clip-path: inset(calc(100% - var(--paper-h) - var(--frame)) 0 0 0); }
.portrait__word { position: absolute; right: -64px; bottom: 36px; z-index: 3; font-size: 54px; color: var(--k-accent); transform: rotate(-6deg); line-height: 1; }
.portrait__word { color: var(--k-ink); }

/* ---------- intro: the identity stack ---------- */
.intro { text-align: center; padding: 120px 0 90px; }
.intro .label { margin-bottom: 30px; }
.stack { list-style: none; margin: 0 0 44px; padding: 0; font-family: var(--k-display); font-size: clamp(40px, 5.6vw, 80px); line-height: 1.1; }
.stack li:nth-child(even) { font-style: italic; color: var(--k-secondary); }
.stack .caps { text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.08em; }
.intro p { max-width: 660px; margin: 0 auto; font-size: 18px; }

/* rising with: the honest stand-in for an "as seen in" row */
.with { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; padding: 0 24px 110px; }
/* partner names are set as plain spaced labels; only a partner's own logo file (like her U|S mark) sits beside one */
.with__mark { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; font-family: var(--k-label); font-size: 15px; letter-spacing: 0.42em; text-transform: uppercase; }
.with__logo { height: 48px; width: auto; }

/* ---------- start here: full-bleed band, chapter links, inset photo that follows your hover ---------- */
.start { position: relative; color: var(--k-on-deep); padding: 140px 0; overflow: hidden; }
.start__bg { position: absolute; inset: 0; }
.start__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 52%, transparent); }
.start__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 9%; align-items: center; }
.start .label { margin-bottom: 26px; }
.door { display: block; text-decoration: none; padding: 26px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-on-deep) 34%, transparent); }
.door:last-child { border-bottom: 0; }
.door h3 { font-size: clamp(44px, 5.2vw, 72px); display: flex; align-items: baseline; gap: 18px; }
.door h3 small { font-family: var(--k-label); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: .7; transform: translateY(-6px); }
.door p { margin: 8px 0 0; max-width: 470px; font-size: 16.5px; opacity: .92; }
.door h3 em { transition: transform .4s ease; display: inline-block; }
.door:hover h3 em, .door:focus-visible h3 em { transform: translateX(10px); }
.inset { position: relative; aspect-ratio: 4 / 5; }
.inset .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.inset .ph:first-child { opacity: 1; }
.start:has(.door:hover, .door:focus-visible) .inset .ph:first-child { opacity: 0; }
.start:has(.door[data-i="1"]:hover, .door[data-i="1"]:focus-visible) .inset .ph[data-i="1"],
.start:has(.door[data-i="2"]:hover, .door[data-i="2"]:focus-visible) .inset .ph[data-i="2"],
.start:has(.door[data-i="3"]:hover, .door[data-i="3"]:focus-visible) .inset .ph[data-i="3"],
.start:has(.door[data-i="4"]:hover, .door[data-i="4"]:focus-visible) .inset .ph[data-i="4"] { opacity: 1; }

/* ---------- the heal shelf ---------- */
.shelf { background: var(--k-tint); padding: 140px 0 120px; }
.title-mix { text-align: center; font-size: clamp(42px, 5.4vw, 78px); margin-bottom: 64px; }
.title-mix em { color: var(--k-secondary); }
.shelf__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.item { text-decoration: none; display: block; }
.item .ph { aspect-ratio: 4 / 5; }
.item .ph img { transition: transform .8s ease; }
.item:hover .ph img, .item:focus-visible .ph img { transform: scale(1.04); }
.item .label { margin-top: 18px; color: var(--k-secondary); }
.item h3 { font-size: 36px; margin-top: 6px; }
.shelf__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 46px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.shelf__foot p { margin: 0; font-size: 16.5px; }

/* ---------- book band ---------- */
.book { position: relative; color: var(--k-on-deep); padding: 150px 0 170px; margin-bottom: 140px; }
.book__bg { position: absolute; inset: 0; }
.book__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--k-deep) 70%, transparent) 0%, color-mix(in srgb, var(--k-deep) 35%, transparent) 70%, color-mix(in srgb, var(--k-deep) 10%, transparent)); }
.book__copy { position: relative; z-index: 2; max-width: 560px; }
.book h2 { font-size: clamp(54px, 7vw, 104px); margin: 22px 0 26px; }
.book h2 em { font-size: 0.82em; }
.book h2 span { text-transform: uppercase; }
.book p { font-size: 17.5px; max-width: 470px; }
.signup { display: flex; gap: 0; margin-top: 30px; max-width: 500px; }
.signup input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 16px 18px;
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-right: 0; border-radius: 0;
}
.signup input::placeholder { color: inherit; opacity: .7; }
.signup .btn { border-radius: 0; }
.book__note { margin-top: 16px; font-size: 14.5px; opacity: .8; }
.book__inset { position: absolute; z-index: 3; right: max(5vw, calc((100vw - 1180px) / 2)); bottom: -110px; width: min(300px, 30vw); padding: 12px 12px 46px; background: var(--k-paper); transform: rotate(3deg); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--k-deep) 60%, transparent); }
.book__inset .ph { aspect-ratio: 4 / 5; }
.book__inset .script { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; color: var(--k-ink); font-size: 38px; line-height: 1.1; }

/* ---------- about teaser ---------- */
.about { display: grid; grid-template-columns: 44vw 1fr; gap: 7vw; align-items: center; padding: 60px 0 150px; position: relative; }
.about__photo .ph { aspect-ratio: 3 / 4; }
.about__copy { max-width: 520px; padding-right: 32px; }
.about__copy h2 { font-size: clamp(50px, 6vw, 88px); text-transform: uppercase; margin: 20px 0 10px; }
.about__copy .sub { font-family: var(--k-display); font-style: italic; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; color: var(--k-secondary); margin-bottom: 28px; }

/* ---------- shake teaser ---------- */
.shake { background: var(--k-olive); padding: 130px 0; text-align: center; }
.shake h2 { font-size: clamp(46px, 6vw, 88px); margin: 22px 0 30px; }
.shake h2 em { color: var(--k-secondary); }
.shake p { max-width: 640px; margin: 0 auto 34px; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 46px auto 0; max-width: 900px; align-items: baseline; }
.topics .label { color: var(--k-secondary); flex-basis: 100%; text-align: center; }
.topics span:not(.label) { font-family: var(--k-display); font-size: 26px; }

/* ---------- ways to move: numbered list ---------- */
.ways { padding: 140px 0 120px; }
.ways__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 56px; }
.ways__head h2 { font-size: clamp(46px, 5.6vw, 82px); }
.ways__head h2 em { color: var(--k-secondary); }
.ways__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
.way { padding: 30px 28px 10px 0; }
.way + .way { padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
.way .way__n { font-family: var(--k-display); font-style: italic; font-size: 64px; line-height: 1; color: var(--k-ink); }
.way h3 { font-size: 34px; margin: 18px 0 12px; }
.way p { font-size: 16.5px; }

/* ---------- verse ---------- */
.verse { background: var(--k-cloud); padding: 130px 0; text-align: center; }
.verse blockquote { margin: 0 auto; max-width: 980px; font-family: var(--k-display); font-style: italic; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.12; }
.verse cite { display: block; margin-top: 28px; font-style: normal; }

/* ---------- morning reset (the free gift) ---------- */
.reset { display: grid; grid-template-columns: 1fr 1fr; background: var(--k-deep); color: var(--k-on-deep); }
.reset .ph { min-height: 620px; height: 100%; }
.reset__copy { padding: clamp(60px, 8vw, 120px); align-self: center; }
.reset h2 { font-size: clamp(48px, 5.4vw, 80px); margin: 22px 0 24px; }
.reset h2 em { color: var(--k-accent); }
.reset p { max-width: 460px; }

/* ---------- follow ---------- */
.follow { padding: 140px 0 120px; text-align: center; }
.follow h2 { font-size: clamp(42px, 5.4vw, 78px); margin: 18px 0 50px; }
.follow h2 em { color: var(--k-secondary); }
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 56px; }
.grid6 .ph { aspect-ratio: 1; }
.grid6 + .more { margin-top: -18px; }

/* ---------- footer ---------- */
.site-foot { background: var(--k-deep); color: var(--k-on-deep); padding: 100px 0 36px; }
.foot__grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 60px; }
.foot__grid h4 { font-family: var(--k-label); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 20px; opacity: .75; }
.foot__grid ul { list-style: none; margin: 0; padding: 0; }
.foot__grid li a { font-family: var(--k-display); font-size: 26px; text-decoration: none; line-height: 1.4; }
.foot__grid li a:hover { font-style: italic; }
.foot__list p { font-size: 16px; opacity: .88; }
.foot__mark { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 90px; padding-top: 36px; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 22%, transparent); }
.site-foot .foot__mark .brand { background-image: url("assets/heart-light.png"); min-width: 46px; min-height: 51px; }  /* only her heart here, so the XOXO is the one sign-off (11/6) */
.foot__xo { padding-left: 8px; font-size: 44px; color: var(--k-accent); line-height: 1; margin-bottom: 12px; }
.foot__xo img { display: block; width: 150px; height: auto; }  /* her own XOXO sign-off, cream (11/6) */
.foot__small { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; opacity: .72; }
.foot__small a { text-decoration: none; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; color: var(--k-on-deep); text-align: center; padding: 190px 0 150px; }
.page-hero .ph { position: absolute; inset: 0; }
.page-hero .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 45%, transparent); }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(64px, 9vw, 140px); margin-top: 20px; }
.page-hero h1 em { color: var(--k-accent); }
.page-hero p { max-width: 560px; margin: 24px auto 0; font-size: 18px; }

.lede { padding: 120px 0 40px; text-align: center; }
.lede p { font-family: var(--k-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.22; }
.lede p em { color: var(--k-secondary); }

.chapter { padding: 110px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.chapter__head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 7%; align-items: end; margin-bottom: 64px; }
.chapter__head h2 { font-size: clamp(60px, 8vw, 120px); }
.chapter__head h2 em { color: var(--k-secondary); }
.chapter__head p { font-size: 18px; margin: 0; }
/* two quieter heads, so the big split is not a formula: stacked at left, and centred */
.chapter__head--stack { display: block; max-width: 640px; }
.chapter__head--stack p { margin-top: 22px; font-size: 19px; }
.chapter__head--center { display: block; text-align: center; max-width: 720px; margin-inline: auto; }
.chapter__head--center p { margin-top: 20px; font-size: 19px; }

/* Shake: a full-width photo band instead of the split head */
.chapter--band { padding-top: 0; border-top: 0; }
.band { position: relative; color: var(--k-on-deep); text-align: center; padding: 170px 0 160px; margin-bottom: 96px; }
.band__bg { position: absolute; inset: 0; }
.band__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--k-deep) 40%, transparent), color-mix(in srgb, var(--k-deep) 56%, transparent)); }
.band__inner { position: relative; z-index: 2; }
.band h2 { font-size: clamp(84px, 12.5vw, 190px); line-height: 0.9; margin: 20px 0 24px; }
.band h2 em { color: var(--k-on-deep); }
.band p:not(.label) { max-width: 560px; margin: 0 auto; font-size: 19px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card .ph { aspect-ratio: 4 / 5; margin-bottom: 22px; }
.card h3 { font-size: 34px; margin: 10px 0 12px; }
.card p { font-size: 16.5px; }
.card .label { color: var(--k-secondary); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.split .ph { aspect-ratio: 4 / 5; }
.split h3 { font-size: clamp(40px, 4.4vw, 64px); margin: 18px 0 20px; }
.split h3 em { color: var(--k-secondary); }

.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.partner { padding: 34px 30px 20px 0; }
.partner + .partner { padding-left: 30px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.partner h3 { font-size: 38px; margin: 12px 0 12px; }
.partner p { font-size: 16.5px; }
.partner .partner__tag { font-family: var(--k-display); font-style: italic; font-size: 25px; line-height: 1.2; color: var(--k-secondary); margin: -4px 0 12px; }
/* her own society leads the row, with her U|S mark and her mission in her words */
.partner--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 7%; align-items: end; padding: 46px 0 40px; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.partner--lead + .partner { padding-left: 0; border-left: 0; }
.partner--lead h3 { font-size: clamp(44px, 4.6vw, 64px); }
.partner__mark { height: 56px; width: auto; margin-bottom: 24px; }
.partner .partner__mission { font-family: var(--k-display); font-size: clamp(25px, 2.3vw, 32px); line-height: 1.25; margin-bottom: 22px; }

.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); padding: 22px 0; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--k-display); font-size: 30px; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
/* one drawn plus, turned 45deg when open, so the + and the x match in size and position */
.faq summary::after {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px; align-self: center;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; max-width: 700px; }

.connect { background: var(--k-olive); padding: 130px 0; }
.connect__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 8%; }
.connect h2 { font-size: clamp(54px, 6.4vw, 96px); margin: 20px 0 22px; }
.connect h2 em { color: var(--k-secondary); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.form label { display: grid; gap: 8px; font-family: var(--k-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  font: inherit; font-family: var(--k-body); font-size: 17px; letter-spacing: 0; text-transform: none;
  padding: 14px 0; background: transparent; color: var(--k-ink);
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 40%, transparent); border-radius: 0;
}
.form select { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 30px; cursor: pointer; }
.select { position: relative; display: grid; }
.select::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 8px; margin-top: -4px; pointer-events: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--k-ink); }
.form .btn { justify-self: start; }

/* My Story: the slot for her own telling */
.tale { padding: 130px 0 40px; }
.tale__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 8%; align-items: start; }
.tale__quote { margin: 26px 0 48px; font-family: var(--k-display); font-size: clamp(40px, 4.3vw, 64px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
.tale__quote em { color: var(--k-secondary); }
.tale__body { max-width: 540px; }
.tale__body p { font-size: 19px; }
.tale__photo { margin-top: 70px; }
.tale__photo .ph { aspect-ratio: 3 / 4; }
.dropcap::first-letter { font-family: var(--k-display); float: left; font-size: 100px; line-height: 0.8; padding: 6px 12px 0 0; color: var(--k-secondary); }
.dropcap + p { clear: left; }

.story { padding: 60px 0 40px; }
.story__duo { display: grid; grid-template-columns: 0.72fr 1fr; gap: 9%; align-items: center; margin: 40px auto 60px; }
.story__duo .ph { aspect-ratio: 4 / 5; order: -1; }
.story__pull { margin: 0; font-family: var(--k-display); font-size: clamp(60px, 8.4vw, 128px); line-height: 0.98; letter-spacing: -0.02em; }
.story__pull span { display: block; }
.story__pull span:nth-child(even) { font-style: italic; color: var(--k-secondary); padding-left: 0.6em; }
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.belief h3 { font-size: 40px; margin: 14px 0 12px; }
.belief h3 em { color: var(--k-secondary); }
.truths { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.truths li { text-wrap: balance; counter-increment: t; display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); font-family: var(--k-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.truths li::before { content: "0" counter(t); font-family: var(--k-label); font-size: 12px; letter-spacing: 0.2em; padding-top: 12px; color: var(--k-secondary); }

/* the about page: gentle writing prompts for Lexie. Draft view only (?draft=1), never shown to visitors. */
html:not([data-draft]) .prompts { display: none; }
html[data-draft] .prompts { outline: 2px dashed var(--k-secondary); outline-offset: 8px; }
.prompts { width: min(860px, 100% - 44px); margin: 70px auto 10px; padding: 50px clamp(22px, 5vw, 64px) 40px; background: var(--k-tint); text-align: center; }
.prompts .label { color: var(--k-secondary); margin-bottom: 14px; }
.prompts__lede { text-wrap: balance; font-family: var(--k-display); font-style: italic; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.2; margin: 0 auto 28px; max-width: 560px; }
.prompts ol { list-style: none; margin: 0; padding: 0; text-align: left; counter-reset: q; }
.prompts li { counter-increment: q; display: grid; grid-template-columns: 48px 1fr; padding: 15px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); font-size: 17.5px; line-height: 1.45; }
.prompts li::before { content: "0" counter(q); font-family: var(--k-label); font-size: 11px; letter-spacing: 0.2em; color: var(--k-secondary); padding-top: 5px; }

/* ---------- draft view: add ?draft=1 to any page to outline every block that still needs Lexie's words ---------- */
html[data-draft] [data-placeholder] { outline: 2px dashed var(--k-secondary); outline-offset: 8px; }
html[data-draft] .on-photo [data-placeholder], html[data-draft] .reset [data-placeholder] { outline-color: var(--k-accent); }
html[data-draft] body::after {
  content: "Draft view \00B7  dashed outlines still need something from Lexie \00B7  a few photos are still stand ins";
  position: fixed; z-index: 100; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px);
  padding: 10px 18px; background: var(--k-deep); color: var(--k-on-deep);
  font-family: var(--k-label); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; text-align: center;
}

/* ---------- motion: the words ease up as you reach them ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .brand--hero, .hero__tag, .portrait { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .hero__tag { animation-delay: .15s; }
  .portrait { animation-delay: .3s; }
  @supports (animation-timeline: view()) {
    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  }
}

/* ---------- phone ---------- */
@media (max-width: 1100px) {
  .nav { gap: 22px; }
}
@media (max-width: 900px) {
  body { font-size: 17px; }
  .wrap { width: calc(100% - 44px); }
  .site-head__bar { padding: 20px 22px; display: flex; justify-content: space-between; }
  .brand-small { white-space: nowrap; }
  .nav { display: none; }
  .head-right { grid-column: 3; }
  .head-left { gap: 18px; }
  .brand-small { font-size: 26px; }
  .hero { padding-top: 110px; }
  .hero { --paper-h: 170px; --frame: 12px; }
  .hero .brand--hero { min-height: auto; aspect-ratio: var(--k-logo-hero-ratio); }
  .portrait { margin-top: 40px; }
  .portrait__word { right: -10px; bottom: -34px; font-size: 44px; }
  .intro { padding: 100px 0 70px; }
  .stack { font-size: clamp(28px, 8.2vw, 46px); }
  .stack .caps { font-size: 0.76em; }
  .with { padding-bottom: 80px; gap: 22px 34px; }
  .with .label { flex-basis: 100%; text-align: center; }
  .with__mark { letter-spacing: 0.36em; font-size: 13px; }
  .with__mark--us { flex-direction: column; gap: 12px; }
  .with__logo { height: 40px; }
  .start { padding: 90px 0; }
  .start__grid { grid-template-columns: 1fr; gap: 40px; }
  .inset { display: none; }
  .shelf { padding: 100px 0 80px; }
  .shelf__row { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .shelf__row .item:first-child { grid-column: 1 / -1; }
  .item h3 { font-size: 27px; }
  .item .label { min-height: 3em; }
  .shelf__foot { flex-direction: column; align-items: flex-start; }
  .book { padding: 100px 0 200px; margin-bottom: 120px; }
  .book__bg::before { background: color-mix(in srgb, var(--k-deep) 60%, transparent); }
  .book__inset { width: 200px; right: 22px; bottom: -90px; }
  .book__inset .script { font-size: 30px; }
  .signup { flex-direction: column; }
  .signup input { border-right: 1px solid currentColor; border-bottom: 0; }
  .about { grid-template-columns: 1fr; padding: 40px 0 100px; gap: 44px; }
  .about__photo { width: 88%; }
  .about__copy { padding: 0 22px; }
  .shake { padding: 100px 0; }
  .ways { padding: 100px 0 80px; }
  .ways__head { flex-direction: column; align-items: flex-start; }
  .ways__grid { grid-template-columns: 1fr 1fr; }
  .way, .way + .way { padding: 26px 16px 8px 0; border-left: 0; }
  .way:nth-child(even) { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
  .way:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
  .way .way__n { font-size: 48px; }
  .way h3 { font-size: 28px; }
  .verse { padding: 90px 0; }
  .reset { grid-template-columns: 1fr; }
  .reset .ph { min-height: 380px; }
  .follow { padding: 100px 0 80px; }
  .grid6 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .foot__grid { grid-template-columns: 1fr; gap: 44px; }
  .foot__mark { flex-direction: column; align-items: center; gap: 22px; }
  .foot__xo { padding-left: 0; }
  .page-hero { padding: 150px 0 100px; }
  .chapter { padding: 80px 0; }
  .chapter__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
  .cards, .cards--3 { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .cards--3 .card:first-child { grid-column: 1 / -1; }
  .cards--3 .card:first-child .ph { aspect-ratio: 4 / 3; }
  .band { padding: 120px 0 110px; margin-bottom: 64px; }
  .tale { padding: 90px 0 20px; }
  .tale__grid { grid-template-columns: 1fr; gap: 50px; }
  .tale__quote { margin: 20px 0 34px; }
  .tale__photo { margin-top: 0; width: 86%; margin-left: auto; }
  .tale__body p { font-size: 18px; }
  .partner--lead { grid-template-columns: 1fr; gap: 6px; padding-top: 34px; border-bottom: 0; }
  .card h3 { font-size: 27px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .partners { grid-template-columns: 1fr; border-top: 0; }
  .partner, .partner + .partner { padding: 28px 0 14px; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
  .connect { padding: 90px 0; }
  .connect__grid { grid-template-columns: 1fr; gap: 40px; }
  .form { grid-template-columns: 1fr; }
  .story__duo { grid-template-columns: 1fr; gap: 40px; margin-bottom: 30px; }
  .story__duo .ph { width: 78%; order: 0; }
  .story__pull { font-size: clamp(54px, 15vw, 76px); }
  .beliefs { grid-template-columns: 1fr; gap: 30px; }
  .truths li { grid-template-columns: 50px 1fr; }
  .faq summary { font-size: 25px; }
}
@media (max-width: 520px) {
  /* phone header: the menu is its three lines (the word stays for screen readers), Book Alexia keeps one line,
     and Instagram lives in the footer, so her logo has room */
  .menu__when-closed { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head-right .icon-link { display: none; }
  .btn--head { white-space: nowrap; }
  .brand-small { min-width: 132px; min-height: 41px; }
  /* phone: the class and Shake cards sit two up, so the page is not a long run of identical blocks */
  .cards, .cards--3 { gap: 36px 14px; }
  .card .ph { margin-bottom: 14px; }
  .card .label.label { font-size: 10px; letter-spacing: 0.18em; }
  .card h3 { font-size: 23px; margin: 8px 0 8px; }
  .card p { font-size: 15px; line-height: 1.5; }
  .card .more { font-size: 10.5px; letter-spacing: 0.18em; padding: 2px 0; border-bottom: 1px solid currentColor; }
  .card .more::after { display: none; }
  .cards--3 .card:first-child h3 { font-size: 27px; }
  .cards--3 .card:first-child p:not(.label) { font-size: 16px; }
  .partner .partner__mission { font-size: 22px; }
}

/* her guide: Lato bold 700 for buttons, labels and navigation */
.label, .btn, .nav a, .menu summary, .with__mark, .door h3 small, .foot__grid h4, .form label { font-weight: 700; }
/* choose your path: each path name with its two offerings underneath */
.topics span:not(.label) em { display: block; font-family: var(--k-body); font-style: normal; font-size: 15px; letter-spacing: 0.04em; margin-top: 4px; text-align: center; }
.topics span:not(.label) { text-align: center; }

/* her guide: a visible "Book Alexia" button in the header for speaking and appearance inquiries */
.head-right { display: flex; align-items: center; gap: 18px; }
.btn--head { padding: 11px 16px 10px; font-size: 11px; }
@media (max-width: 760px) { .btn--head { padding: 9px 12px 8px; font-size: 10px; letter-spacing: 0.14em; } }

/* ---------- forms: the note under a form after it sends (forms.js) ---------- */
.form-note { display: grid; gap: 4px; max-width: 500px; margin: 16px 0 0; padding: 12px 16px; border-left: 2px solid var(--k-accent); font-size: 15.5px; line-height: 1.5; text-align: left; }
.form-note[hidden] { display: none; }
.form .form-note { grid-column: 1 / -1; margin-top: 4px; }
.form-note .label { font-size: 10.5px; }
@media (prefers-reduced-motion: no-preference) { .form-note.is-on { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; } }

/* ---------- GLOW (11/7): her three membership tiers as arched doors, light to dark as the
   commitment grows: pink, olive, black. Marks drawn in her kit, after the graphics she sent. ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.tier { display: flex; flex-direction: column; border-radius: 999px 999px 0 0; padding: 96px clamp(26px, 2.6vw, 40px) 40px; text-align: center; }
.tier--circle { background: var(--k-tint); color: var(--k-ink); }
.tier--academy { background: var(--k-olive); color: var(--k-ink); }
.tier--society { background: var(--k-deep); color: var(--k-on-deep); }
.tier__mark { position: relative; display: grid; justify-items: center; min-height: 168px; align-content: center; margin: 0 0 26px; font-weight: 400; }
.tier__script { font-family: var(--k-script); font-size: clamp(54px, 4.6vw, 70px); line-height: .9; position: relative; z-index: 1; }
.tier--circle .tier__script { font-size: clamp(38px, 3vw, 46px); line-height: 1.02; }
.tier--circle .tier__mark { min-height: 200px; }
.tier__word { font-family: var(--k-display); font-size: clamp(30px, 2.5vw, 38px); line-height: 1; margin-top: 2px; }
.tier__word--caps { font-family: var(--k-label); font-weight: 700; font-size: 13px; letter-spacing: .42em; text-transform: uppercase; margin: 12px -.42em 0 0; }
.tier__ring { position: absolute; left: 50%; top: 50%; width: 236px; height: 236px; transform: translate(-50%, -50%) rotate(-8deg); fill: none; stroke: color-mix(in srgb, var(--k-cloud) 62%, var(--k-ink)); stroke-width: 3.4; stroke-linecap: round; overflow: visible; }
.tier__ring .fine, .tier__book .fine { stroke-width: 1.2; }
.tier__book { width: 150px; height: 38px; margin-top: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tier__sprig { width: 128px; height: 64px; margin-bottom: 4px; fill: none; stroke: var(--k-olive); stroke-width: 1.6; stroke-linecap: round; }
.tier__sprig .leaf { fill: var(--k-olive); stroke: none; }
.tier__heart { width: 22px; height: auto; margin-top: 14px; }
.tier__price { font-family: var(--k-display); font-size: 22px; margin: 0 0 14px; }
.tier__price b { font-weight: 400; font-size: 44px; line-height: 1; }
.tier__price span { margin: 0 4px; }
.tier__for { font-size: 16.5px; margin: 0 auto 6px; max-width: 26ch; }
.tier__motto { font-family: var(--k-display); font-style: italic; font-size: 24px; margin: 0 0 22px; }
.tier__also { margin: 6px 0 4px; }
.tier__list { list-style: none; margin: 0 0 30px; padding: 0; text-align: left; }
.tier__list li { border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); padding: 12px 0; font-size: 15.5px; line-height: 1.45; }
.tier__list b { display: block; font-family: var(--k-display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.tier__list b + * , .tier__list li > b:not(:only-child) { margin-bottom: 2px; }
.tier__btn { margin-top: auto; align-self: center; }
.tier--society .tier__btn { background: var(--k-paper); color: var(--k-ink); border-color: var(--k-paper); }
.tier--society .tier__btn:hover, .tier--society .tier__btn:focus-visible { background: transparent; color: var(--k-on-deep); border-color: var(--k-on-deep); }
@media (max-width: 960px) {
  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .tier { padding-top: 84px; }
}

/* the Glow teaser on the home page, under "Choose your path" */
.glow-teaser { display: grid; justify-items: center; gap: 8px; max-width: 560px; margin: 56px auto 0; padding: 76px 30px 34px; background: var(--k-tint); border-radius: 999px 999px 0 0; text-decoration: none; color: var(--k-ink); }
.glow-teaser__script { font-family: var(--k-script); font-size: clamp(56px, 6vw, 76px); line-height: .9; }
.glow-teaser__tiers { font-family: var(--k-display); font-size: 22px; }
.glow-teaser__tiers i { font-size: .8em; }

/* GLOW CHOICE B (11/7, ?glow=b): her own graphics fill the arched top of each tier, untouched (scaled only) */
.tier__art { display: none; }
.glow-b .tier { padding-top: 0; overflow: hidden; }
.glow-b .tier__art { display: block; width: calc(100% + 2 * clamp(26px, 2.6vw, 40px)); max-width: none; height: auto; aspect-ratio: 1 / .88; object-fit: cover; margin: 0 calc(-1 * clamp(26px, 2.6vw, 40px)) 30px; }
/* cropped tight so each logo sits centred in the arch, no empty bokeh under it (McKenna 11/7) */
.glow-b .tier--circle .tier__art { object-position: 50% 42%; }
.glow-b .tier--academy .tier__art { object-position: 50% 21%; }
.glow-b .tier--society .tier__art { object-position: 50% 44%; }
.glow-b .tier__mark { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* GLOW CHOICE C (11/7, ?glow=c): the names only, set in her fonts, no drawings */
.glow-c .tier__ring, .glow-c .tier__book, .glow-c .tier__sprig, .glow-c .tier__heart { display: none; }
.glow-c .tier__mark { min-height: 150px; }
.glow-c .tier__script { font-size: clamp(62px, 5.4vw, 84px); }
.glow-c .tier--circle .tier__script { font-size: clamp(46px, 3.8vw, 58px); }
.glow-c .tier__word { font-size: clamp(34px, 2.9vw, 44px); }
.glow-c .tier__word--caps { font-size: 14px; }


/* GLOW NAMES (11/7, McKenna): all three set the same way. "Can academy circle and society be all the
   same font" then "I liked the serif font": her script for the first part, the serif for the last word */
.tier__script, .tier--circle .tier__script, .glow-c .tier__script, .glow-c .tier--circle .tier__script {
  font-family: var(--k-script); font-weight: 400; font-size: clamp(50px, 4.2vw, 64px); line-height: .95; margin: 0;
}
.tier__word, .glow-c .tier__word {
  font-family: var(--k-display); font-weight: 400; font-size: clamp(32px, 2.7vw, 40px); line-height: 1;
  letter-spacing: 0; text-transform: none; margin: 4px 0 0;
}
.tier__ring { width: 250px; height: 250px; }
.tier__mark, .tier--circle .tier__mark { min-height: 200px; }
.glow-c .tier__mark { min-height: 160px; }

/* GLOW RULE (11/7, McKenna): "a fine horizontal line between the title and the text under it".
   Looks A and C only; in B her graphic is the title */
.tier__mark, .tier--circle .tier__mark { margin-bottom: 0; }
.tier__price::before { content: ""; display: block; width: min(150px, 60%); margin: 22px auto 24px; border-top: 1px solid color-mix(in srgb, currentColor 55%, transparent); }
.glow-b .tier__price::before { display: none; }
.tier__mark, .tier--circle .tier__mark { min-height: 212px; }
.glow-c .tier__mark { min-height: 0; margin-top: 26px; }

/* =====================================================================
   LEXIE'S 11/7 EDITS ("Alexia Kay edits" email, kept word for word in
   Méora/clients/lexie/from-lexie-2026-11-07/alexia-kay-edits-email.md)
   Each section is its own page now: move, shake, heal (the shop), rise, glow.
   Work With Me is the door to all five, with the questions and Connect.
   ===================================================================== */

/* "I do not like the text with a line next to it as a button": every .more is a real button now */
.more { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 15px 26px; border: 1px solid var(--k-ink); background: var(--k-ink); color: var(--k-paper); font-weight: 700; transition: background .3s ease, color .3s ease; }
.more::after { display: none; }
.more:hover, .more:focus-visible { background: transparent; color: var(--k-ink); }
.on-photo .more, .is-dark .more { border-color: var(--k-on-deep); background: var(--k-on-deep); color: var(--k-deep); }
.on-photo .more:hover, .on-photo .more:focus-visible, .is-dark .more:hover, .is-dark .more:focus-visible { background: transparent; color: var(--k-on-deep); }
@media (max-width: 520px) {
  .card .more { padding: 12px 16px; font-size: 10.5px; letter-spacing: 0.16em; border: 1px solid var(--k-ink); }
}
.btn--sm { padding: 13px 22px; font-size: 10.5px; }
.btn + .btn, .more + .more { margin-left: 10px; }

/* her colours: black for Work With Me, mauve pink for Connect, green for Olive Tree People */
.shake { background: var(--k-deep); color: var(--k-on-deep); }
.shake h2 em { color: var(--k-accent); }
.shake .btn--ink { background: var(--k-on-deep); color: var(--k-deep); border-color: var(--k-on-deep); }
.shake .btn--ink:hover, .shake .btn--ink:focus-visible { background: transparent; color: var(--k-on-deep); }
.connect { background: var(--k-cloud); }

/* the header: one more path (Glow) and her Glow Memberships button, so the row needs room */
@media (max-width: 1240px) { .nav { gap: 22px; } }
@media (max-width: 1140px) {
  .nav { display: none; }
  .site-head__bar { display: flex; justify-content: space-between; }
}

/* HOME: the four doors each carry a real button (her words: register, book, buy, learn more) */
.door .btn { margin-top: 18px; }
.door h3 small { white-space: nowrap; }
/* the shelf: a button under each item */
.item .btn { margin-top: 14px; }
.shelf__foot p { font-family: var(--k-display); font-style: italic; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }

/* HOME section 7: the Glow memberships, three fine arches on black */
.glow-mini { list-style: none; margin: 50px auto 46px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 980px; }
.glow-mini li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 64px 22px 30px; border: 1px solid color-mix(in srgb, var(--k-on-deep) 45%, transparent); border-bottom: 0; border-radius: 999px 999px 0 0; }
.glow-mini .tier__script { font-size: clamp(40px, 3.4vw, 52px); }
.glow-mini .tier__word { font-size: clamp(26px, 2.2vw, 32px); margin: 0 0 10px; }
.glow-mini b { font-family: var(--k-display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.glow-mini span:last-child { font-size: 15.5px; line-height: 1.45; opacity: .9; max-width: 22ch; }
.shake .glow-mini + .btn { margin-top: 0; }

/* ---------- inner pages, shared ---------- */
.field { padding: 120px 0; }
.field--tint { background: var(--k-tint); }
.field--cloud { background: var(--k-cloud); }
.field--olive { background: var(--k-olive); }
.field--deep { background: var(--k-deep); color: var(--k-on-deep); }
.field--deep h2 em, .field--deep h3 em { color: var(--k-accent); }
.field__head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.field__head h2 { font-size: clamp(48px, 6vw, 92px); margin: 18px 0 18px; }
.field__head h2 em { color: var(--k-secondary); }
.field--deep .field__head h2 em { color: var(--k-accent); }
.field__head p:not(.label) { font-size: 19px; margin: 0 auto; max-width: 600px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

/* MOVE: every style, set big on blush */
.styles { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; text-align: center; font-family: var(--k-display); font-size: clamp(34px, 4.6vw, 66px); line-height: 1.12; }
.styles li { display: inline; }
.styles li:nth-child(even) { font-style: italic; }
.styles li + li::before { content: "\00B7"; margin: 0 .32em; opacity: .5; font-style: normal; }
.card .btn { margin-top: 6px; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card > p:last-of-type { flex: 1; }

/* SHAKE: two offerings as arched cards on blush and mauve, speaking as a wide photo with a panel */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.offer { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 40px; }
.offer--tint { background: var(--k-tint); }
.offer--cloud { background: var(--k-cloud); }
.offer .ph { width: 100%; aspect-ratio: 5 / 4; border-radius: 999px 999px 0 0; margin-bottom: 30px; }
.offer h3 { font-size: clamp(40px, 4vw, 58px); margin: 12px 0 16px; }
.offer h3 em { color: var(--k-secondary); }
.offer > p:not(.label) { font-size: 17.5px; max-width: 520px; }
.offer .label + .label { margin: -4px 0 22px; opacity: .8; }
.offer .btn { margin-top: auto; }
.stage { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; margin-top: 110px; }
.stage .ph { aspect-ratio: 3 / 2; }
.stage__panel { position: relative; z-index: 2; margin-left: -16%; padding: clamp(36px, 4.4vw, 64px); background: var(--k-deep); color: var(--k-on-deep); }
.stage__panel h3 { font-size: clamp(42px, 4.4vw, 64px); margin: 14px 0 18px; }
.stage__panel h3 em { color: var(--k-accent); }
.stage__panel p:not(.label) { font-size: 17px; }

/* HEAL, the shop */
.shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.product { display: flex; flex-direction: column; align-items: flex-start; }
.product .ph { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 20px; }
.product .label { color: var(--k-secondary); }
.product h3 { font-size: 32px; margin: 8px 0 10px; }
.product p:not(.label) { font-size: 16px; flex: 1; }
.product .btn { margin-top: 8px; }
.product--soon .ph { display: grid; place-items: center; background: var(--k-tint); }
.product--soon .ph::after { display: none; }
.soon-word { font-family: var(--k-script); font-size: clamp(54px, 5vw, 72px); line-height: 1; transform: rotate(-6deg); }
.otp__top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 7%; align-items: center; margin-bottom: 80px; }
.otp__photos { position: relative; display: grid; grid-template-columns: 1fr 0.78fr; align-items: end; gap: 18px; }
.otp__photos .ph { aspect-ratio: 4 / 5; }
.otp__photos .ph:first-child { border-radius: 999px 999px 0 0; }
.otp__photos .ph:last-child { margin-bottom: -40px; }
.otp__top h2 { font-size: clamp(44px, 5.2vw, 78px); margin: 18px 0 18px; }
.otp__top h2 em { color: var(--k-on-deep); }
.otp__top p:not(.label) { font-size: 19px; max-width: 480px; }
.lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
.line { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 26px 34px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
.line:not(:nth-child(4n+1)) { padding-left: 26px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
.line .label { opacity: .8; }
.line h3 { font-size: 30px; margin: 8px 0 10px; }
.line p:not(.label) { font-size: 15.5px; flex: 1; }
.line .btn { margin-top: 8px; }
.requests { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.request { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 30px; align-items: center; padding: 22px; border: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); }
.request .ph { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
.request h3 { font-size: clamp(36px, 3.4vw, 50px); margin: 10px 0 14px; }
.request h3 em { color: var(--k-accent); }
.request p:not(.label) { font-size: 16.5px; }

/* RISE: partners, each with their logo (or her name for it, until the logo comes) */
.partner .btn, .partner .more { margin-top: 6px; }
.partner--olive { background: var(--k-olive); padding: 40px 34px 34px !important; border-left: 0 !important; }
.partner--olive .partner__tag { color: var(--k-ink); }
.partner__logo { display: grid; place-items: center; width: 132px; height: 78px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-family: var(--k-label); font-weight: 700; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; padding: 8px; opacity: .75; }
.partners--four { grid-template-columns: repeat(2, 1fr); }

/* WORK WITH ME: the five doors, arched photos on black */
.paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.path { display: flex; flex-direction: column; align-items: flex-start; }
.path .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; margin-bottom: 22px; }
.path h3 { font-size: clamp(40px, 3.6vw, 54px); font-style: italic; }
.path .label { margin: 8px 0 10px; opacity: .8; }
.path p:not(.label) { font-size: 15.5px; flex: 1; }
.path .btn { margin-top: 8px; }

/* MY STORY: her third photo is wide, so its slot is too */
.split .ph--wide { aspect-ratio: 3 / 2; }

/* the form: her new phone field sits beside email */
.form .row3 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 22px; }

@media (max-width: 1100px) {
  .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 18px; }
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; }
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line, .line:not(:nth-child(4n+1)) { padding: 26px 18px 30px 0; border-left: 0; }
  .line:nth-child(even) { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
}
@media (max-width: 900px) {
  .field { padding: 84px 0; }
  .field__head { margin-bottom: 44px; }
  .glow-mini { grid-template-columns: 1fr; max-width: 360px; gap: 18px; margin: 40px auto; }
  .glow-mini li { padding: 46px 22px 22px; }
  .offers, .requests { grid-template-columns: 1fr; }
  .request { grid-template-columns: 1fr; }
  .request .ph { aspect-ratio: 5 / 4; }
  .stage { grid-template-columns: 1fr; margin-top: 70px; }
  .stage__panel { margin: -40px 18px 0; }
  .otp__top { grid-template-columns: 1fr; gap: 50px; }
  .otp__photos .ph:last-child { margin-bottom: 0; }
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .row3 { grid-template-columns: 1fr; }
  .styles { font-size: clamp(28px, 8vw, 44px); }
}
@media (max-width: 520px) {
  .shop, .lines { grid-template-columns: 1fr 1fr; gap: 34px 14px; }
  .line, .line:not(:nth-child(4n+1)), .line:nth-child(even) { padding: 22px 10px 24px 0; border-left: 0; }
  .line:nth-child(even) { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
  .line h3, .product h3 { font-size: 24px; }
  .line p:not(.label), .product p:not(.label) { font-size: 14.5px; line-height: 1.5; }
  .line .btn, .product .btn, .path .btn { padding: 11px 14px; font-size: 10px; letter-spacing: 0.16em; }
  .paths { gap: 34px 14px; }
  .path h3 { font-size: 34px; }
  .path p:not(.label) { font-size: 14.5px; line-height: 1.5; }
  .offer { padding: 18px 18px 30px; }
}

/* dance clips: hidden until ?dance=1 (dance-preview.js), then they cover their photo spot */
video.dance { display: none; }
.dance-on video.dance { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.follow h2 { margin-bottom: 18px; }
.follow__line { max-width: 560px; margin: 0 auto 44px; }
/* with "Hi, I'm Lexie" gone, the partner row sits straight under her photo, so it gets the room */
.hero + .with { padding-top: 110px; }
@media (max-width: 900px) { .hero + .with { padding-top: 90px; } }

/* the closing band on the new pages is blush, so it never runs into the black footer */
.shake--tint { background: var(--k-tint); color: var(--k-ink); }
.shake--tint h2 em { color: var(--k-secondary); }
.shake--tint .btn--ink { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.shake--tint .btn--ink:hover, .shake--tint .btn--ink:focus-visible { background: transparent; color: var(--k-ink); }
/* where a black band does meet the footer (My Story), a hairline keeps them two things */
.site-foot { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-on-deep) 16%, transparent); }
.partner--olive .otp__photos .ph:last-child { margin-bottom: 0; }
.styles li { white-space: nowrap; }
.request { border-color: color-mix(in srgb, var(--k-ink) 28%, transparent); }
.field--cloud h2 em, .field--cloud h3 em, .field--tint h2 em, .field--tint h3 em { color: var(--k-secondary); }

/* the shop: each Olive Tree People line shows one of its products, their own photo, on white */
.line__ph { width: 100%; aspect-ratio: 1; background: var(--k-white); display: grid; place-items: center; margin-bottom: 20px; overflow: hidden; }
.line__ph img { width: 84%; height: 88%; object-fit: contain; }
.line__ph--fill img { width: 100%; height: 100%; object-fit: cover; }
/* each product shows whole: the photo sits inside its white square, never cropped */
.line__ph { position: relative; }
.line__ph img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.line__ph--fill img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* every shop tile the same width, so the product squares line up */
.lines .line, .lines .line:not(:nth-child(4n+1)), .lines .line:nth-child(even) { padding: 30px 20px 34px; }
@media (max-width: 520px) { .lines .line, .lines .line:not(:nth-child(4n+1)), .lines .line:nth-child(even) { padding: 22px 10px 26px; } }

/* ---------- HOME HERO (11/7): her cut out photo on a plain colour field, her name big beside her ---------- */
.site-head--ink { color: var(--k-ink); }
.hero--field { padding: 0; background: var(--k-cloud); color: var(--k-ink); overflow: hidden; text-align: left; }
.hero--field .hero__stage { position: relative; width: min(1240px, 100% - 64px); margin-inline: auto; min-height: clamp(700px, 100svh, 960px); display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; }
.hero__cut { position: relative; z-index: 2; align-self: end; justify-self: center; width: auto; max-width: none; height: min(86svh, 840px); }
.hero__words { position: relative; z-index: 1; margin-left: -10%; padding-top: 70px; text-shadow: none; }
.hero--field .brand--hero { display: block; background-image: var(--k-logo-hero); background-position: left center; width: min(700px, 50vw); min-width: 0; min-height: 0; aspect-ratio: var(--k-logo-hero-ratio); font-size: 0; }
.hero--field .hero__tag { display: block; margin: 18px 0 0 6%; padding: 0; font-family: var(--k-display); font-style: italic; font-size: clamp(32px, 3.2vw, 50px); line-height: 1.1; letter-spacing: 0; text-transform: none; text-shadow: none; }
.hero--field .hero__tag span + span::before { content: none; }
.hero--field + .with { padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__cut { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
}
@media (max-width: 900px) {
  .hero--field .hero__stage { width: 100%; grid-template-columns: 1fr; min-height: 0; justify-items: center; }
  .hero__words { order: -1; margin: 0; padding: 104px 22px 0; text-align: center; }
  .hero--field .brand--hero { width: min(520px, 84vw); margin-inline: auto; background-position: center; }
  .hero--field .hero__tag { margin: 12px 0 0; font-size: clamp(28px, 8vw, 40px); }
  .hero__cut { height: min(62svh, 560px); margin-top: 18px; }
}
/* her line sits clear of her open hand */
.hero--field .hero__tag { margin-left: 15%; }
@media (max-width: 900px) { .hero--field .hero__tag { margin-left: 0; } }

/* HOME HERO, centred (McKenna 11/7): her name big behind her, Lexie in front at the centre,
   her line split either side of her. Her torso sits at a third of the photo's width (her open
   hand fills the rest), so the photo shifts by that third to put HER on the centre line. */
.hero--field .hero__stage { display: block; width: 100%; height: clamp(720px, 100svh, 980px); min-height: 0; }
.hero__words { position: absolute; inset: 0; margin: 0; padding: 0; z-index: 1; }
.hero--field h1 { position: absolute; left: 50%; top: clamp(86px, 11svh, 120px); transform: translateX(-50%); margin: 0; }
.hero--field .brand--hero { width: min(1040px, 78vw); background-position: center; }
.hero__cut { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-33%); height: min(78svh, 820px); }
.hero--field .hero__tag { position: static; margin: 0; }
.hero__tag-l, .hero__tag-r { position: absolute; z-index: 3; bottom: 13%; font-family: var(--k-display); font-style: italic; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; }
.hero__tag-l { right: calc(50% + clamp(170px, 15vw, 230px)); }
.hero__tag-r { left: calc(50% + clamp(250px, 22vw, 330px)); }
@media (prefers-reduced-motion: no-preference) {
  .hero__cut { animation: none; }
  .hero__cut { animation: cut-rise 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
  @keyframes cut-rise { from { opacity: 0; transform: translate(-33%, 26px); } to { opacity: 1; transform: translateX(-33%); } }
}
@media (max-width: 900px) {
  .hero--field .hero__stage { height: auto; min-height: 0; padding-top: 96px; display: grid; justify-items: center; }
  .hero__words { position: relative; inset: auto; }
  .hero--field h1 { position: relative; left: auto; top: auto; transform: none; }
  .hero--field .brand--hero { width: min(560px, 90vw); }
  .hero__cut { position: relative; left: auto; transform: translateX(14%); height: min(66svh, 600px); margin-top: -40px; }
  @keyframes cut-rise { from { opacity: 0; transform: translate(14%, 26px); } to { opacity: 1; transform: translateX(14%); } }
  .hero__tag-l, .hero__tag-r { position: static; font-size: clamp(28px, 8vw, 40px); }
  .hero--field .hero__tag { display: block; text-align: center; margin: 10px 0 0; position: relative; z-index: 3; }
}

/* HOME HERO v3 (McKenna 11/7): her name huge in the site serif, "Alexia" on her left and "Kay" on her
   right, Lexie centred between them, her own logo whole in a medallion at the foot of the colour */
.hero--name .hero__stage { position: relative; display: block; width: 100%; height: clamp(720px, 100svh, 980px); }
.hero__name { position: absolute; inset: 0; z-index: 1; margin: 0; font-family: var(--k-display); font-weight: 400; font-size: clamp(120px, 12.4vw, 210px); line-height: .9; letter-spacing: -0.03em; color: var(--k-ink); pointer-events: none; }
.hero__first, .hero__last { position: absolute; top: 44%; }
.hero__first { right: calc(50% + clamp(150px, 12vw, 190px)); }
.hero__last { left: calc(50% + clamp(150px, 12.6vw, 200px)); font-style: italic; }
.hero--name .hero__cut { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-33%); height: min(80svh, 830px); }
.medallion { position: absolute; z-index: 4; left: 50%; bottom: -84px; width: 168px; height: 168px; margin-left: -84px; border-radius: 50%; background: var(--k-paper); color: var(--k-ink); display: grid; place-items: center; text-decoration: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-ink) 12%, transparent); }
.medallion__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; font-family: var(--k-label); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.medallion__logo { width: 92px; aspect-ratio: var(--k-logo-hero-ratio); background: var(--k-logo-hero) center / contain no-repeat; }
.hero--name + .with { padding-top: 140px; }
@media (prefers-reduced-motion: no-preference) {
  .hero--name .hero__cut { animation: cut-rise 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
  .hero__first, .hero__last { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .hero__last { animation-delay: .12s; }
  @supports (animation-timeline: scroll()) {
    .medallion__ring { animation: ring-turn linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
    @keyframes ring-turn { to { transform: rotate(200deg); } }
  }
}
@media (max-width: 900px) {
  .hero--name .hero__stage { height: auto; padding-top: 104px; display: block; }
  .hero__name { position: relative; inset: auto; text-align: center; font-size: clamp(64px, 19vw, 120px); line-height: .92; }
  .hero__first, .hero__last { position: static; display: block; }
  .hero--name .hero__cut { position: relative; left: auto; display: block; margin: -86px auto 0; transform: translateX(16%); height: min(64svh, 580px); }
  @keyframes cut-rise { from { opacity: 0; transform: translate(16%, 26px); } to { opacity: 1; transform: translateX(16%); } }
  .medallion { width: 132px; height: 132px; margin-left: -66px; bottom: -66px; }
  .medallion__ring { font-size: 13px; }
  .medallion__logo { width: 72px; }
  .hero--name + .with { padding-top: 110px; }
}
/* the medallion hangs over the foot of the colour, into the next section */
.hero--name { overflow: visible; z-index: 3; }
.hero--name .hero__stage { overflow-x: clip; overflow-y: visible; }
@media (max-width: 900px) {
  .hero__first, .hero__last { display: inline; }
  .hero__name { font-size: clamp(54px, 16.5vw, 110px); white-space: nowrap; }
  .hero--name .hero__cut { margin-top: -14px; }
}
/* McKenna 11/7: the hero takes the pastel pink and the Favorites shelf takes the mauve, so the two alternate */
.hero--field { background: var(--k-tint); }
.shelf { background: var(--k-cloud); }
/* hero backdrop options (?hero=beach, ?hero=beachwash), to compare with the plain pastel pink */
.hero-beach .hero--field { background: var(--k-tint) url("assets/hero-beach.jpg") center 62% / cover no-repeat; }
.hero-beachwash .hero--field { background: linear-gradient(color-mix(in srgb, var(--k-tint) 62%, transparent), color-mix(in srgb, var(--k-tint) 62%, transparent)), url("assets/hero-beach.jpg") center 62% / cover no-repeat; }
/* the relit photo (11/7): her torso sits at 36% of its width, so it shifts by that to stay centred */
.hero--name .hero__cut { transform: translateX(-36%); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes cut-rise { from { opacity: 0; transform: translate(-36%, 26px); } to { opacity: 1; transform: translateX(-36%); } }
}
@media (max-width: 900px) {
  .hero--name .hero__cut { transform: translateX(14%); }
  @keyframes cut-rise { from { opacity: 0; transform: translate(14%, 26px); } to { opacity: 1; transform: translateX(14%); } }
}

/* =====================================================================
   HOME, AFTER ROBYN WARNER'S PAGE (11/7). Lexie's inspiration is a Tonic template; McKenna:
   "mimic the layout as much as we can". Same sections in the same order, Lexie's colours:
   Robyn's peach = Lexie's blush, her hot pink = Lexie's mauve, her black stays black.
   ===================================================================== */

/* 1. hero: darkened photo, her name and line, the pink card hanging into the page */
.r-hero { position: relative; color: var(--k-on-deep); text-align: center; padding: 120px 0 0; --hang: 230px; }
.r-hero__bg { position: absolute; inset: 0 0 var(--hang) 0; background: var(--k-deep); }
.r-hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 58%, transparent); }
.r-hero__in { position: relative; z-index: 2; }
.r-hero__name { font-size: clamp(60px, 7.4vw, 112px); line-height: 1; margin: 0; letter-spacing: -0.015em; }
.r-hero__tag.label { margin: 22px 0 0; color: var(--k-tint); font-size: 12.5px; letter-spacing: 0.3em; }
.r-card { position: relative; width: min(480px, 82vw); aspect-ratio: 4 / 5; margin: 46px auto 0; background: var(--k-tint); overflow: visible; }
.r-card::before { content: ""; position: absolute; inset: 0; background: var(--k-tint); }
.r-card__cut { position: absolute; z-index: 1; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-36%); }
.r-card__medallion.medallion { left: auto; right: -64px; bottom: 40px; margin-left: 0; width: 150px; height: 150px; z-index: 3; }
.r-card__medallion .medallion__logo { width: 82px; }

/* 2. hi, I'm: her five paths as the big stack */
.r-intro { text-align: center; padding: 110px 0 100px; }
.r-intro .label { margin-bottom: 26px; }
.r-stack { list-style: none; margin: 0 0 40px; padding: 0; font-family: var(--k-display); font-size: clamp(46px, 6.4vw, 92px); line-height: 1.04; }
.r-stack a { text-decoration: none; }
.r-stack li:nth-child(even) { font-style: italic; }
.r-stack li.caps { text-transform: uppercase; font-size: .84em; letter-spacing: .04em; }
.r-intro p:not(.label) { max-width: 620px; margin: 0 auto 30px; font-size: 18px; }

/* 3. as seen in */
.r-press { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 80px); flex-wrap: wrap; padding: 34px 24px; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }

/* 4. the book: a solid mauve band, covers left, words right */
.r-book { background: var(--k-cloud); padding: 70px 0; overflow: hidden; }
.r-book__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6%; align-items: center; }
.r-book__covers { position: relative; height: clamp(300px, 30vw, 420px); }
.r-book__covers img { position: absolute; bottom: 0; height: 92%; width: auto; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--k-deep) 30%, transparent)); }
.r-book__book { left: 14%; z-index: 2; }
.r-book__journal { left: 42%; height: 86% !important; transform: rotate(6deg); }
.r-book__copy { text-align: center; }
.r-book h2 { font-size: clamp(38px, 3.8vw, 58px); text-transform: uppercase; letter-spacing: -0.01em; }
.r-book__script { font-family: var(--k-script); font-size: clamp(44px, 4.4vw, 66px); line-height: 1.05; margin: 10px 0 14px; }
.r-book__copy p:not(.r-book__script) { font-size: 17px; max-width: 380px; margin: 0 auto 26px; }

/* 5. the mission line */
.r-mission { padding: 110px 0; text-align: center; }
.r-mission blockquote { margin: 0; font-family: var(--k-display); font-style: italic; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; }
.r-mission cite { display: block; margin-top: 22px; font-style: normal; }

/* 6. my brands: a soft blush wash, four paths left, one photo right */
.r-brands { padding: 100px 0; background:
  radial-gradient(42% 60% at 12% 18%, color-mix(in srgb, var(--k-tint) 92%, transparent), transparent 70%),
  radial-gradient(38% 50% at 30% 85%, color-mix(in srgb, var(--k-cloud) 70%, transparent), transparent 70%),
  radial-gradient(40% 55% at 78% 30%, color-mix(in srgb, var(--k-olive) 34%, transparent), transparent 70%),
  radial-gradient(45% 60% at 90% 90%, color-mix(in srgb, var(--k-tint) 85%, transparent), transparent 70%),
  var(--k-paper); }
.r-brands__in { display: grid; grid-template-columns: 1fr 0.78fr; gap: 7%; align-items: center; }
.r-brands .label { margin-bottom: 18px; }
.r-door { display: block; text-decoration: none; padding: 22px 0 26px; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.r-door:last-child { border-bottom: 0; }
.r-door h3 { font-size: clamp(46px, 5vw, 72px); display: flex; align-items: center; gap: 20px; }
.r-arrow { flex: 0 0 auto; width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; transition: transform .35s ease; }
.r-arrow::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; background: currentColor; }
.r-arrow::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(0, -50%) rotate(45deg); }
.r-door:hover .r-arrow, .r-door:focus-visible .r-arrow { transform: translateX(8px); }
.r-door p { margin: 10px 0 14px; max-width: 460px; font-size: 17px; }
.r-brands__photo { position: relative; aspect-ratio: 4 / 5.4; }
.r-brands__photo .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.r-brands__photo .ph:first-child { opacity: 1; }
.r-brands:has(.r-door:hover, .r-door:focus-visible) .r-brands__photo .ph:first-child { opacity: 0; }
.r-brands:has(.r-door[data-i="1"]:hover, .r-door[data-i="1"]:focus-visible) .ph[data-i="1"],
.r-brands:has(.r-door[data-i="2"]:hover, .r-door[data-i="2"]:focus-visible) .ph[data-i="2"],
.r-brands:has(.r-door[data-i="3"]:hover, .r-door[data-i="3"]:focus-visible) .ph[data-i="3"],
.r-brands:has(.r-door[data-i="4"]:hover, .r-door[data-i="4"]:focus-visible) .ph[data-i="4"] { opacity: 1; }

/* 7. let's hang on insta: four photos in a white frame on blush */
.r-insta { background: var(--k-tint); padding: 100px 0; text-align: center; }
.r-insta h2 { font-size: clamp(42px, 5vw, 72px); margin-bottom: 40px; }
.r-insta h2 em { color: var(--k-secondary); }
.r-insta__frame { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 900px; margin: 0 auto 30px; padding: 22px; background: var(--k-white); text-decoration: none; }
.r-insta__frame .ph { aspect-ratio: 1; }
.r-insta p { max-width: 460px; margin: 0 auto; font-size: 16.5px; }

/* 8. the list: one full width photo, words left */
.r-list { position: relative; color: var(--k-on-deep); padding: 160px 0; }
.r-list__bg { position: absolute; inset: 0; }
.r-list__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--k-deep) 62%, transparent), color-mix(in srgb, var(--k-deep) 10%, transparent) 70%); }
.r-list__copy { position: relative; z-index: 2; }
.r-list__copy > * { max-width: 500px; }
.r-list h2 { font-size: clamp(50px, 5.6vw, 84px); margin: 16px 0 18px; }
.r-list h2 em { color: var(--k-tint); }

/* 9. I'm Lexie: blush, three photos round the words */
.r-about { position: relative; background: var(--k-tint); display: grid; grid-template-columns: 0.36fr 0.64fr; padding: 120px 0 130px; min-height: 760px; }
.r-about__left { aspect-ratio: 4 / 5; align-self: center; width: 100%; }
.r-about__copy { max-width: 520px; padding: 0 30px 0 9%; align-self: center; }
.r-about h2 { font-size: clamp(54px, 6vw, 92px); text-transform: uppercase; margin: 16px 0 6px; }
.r-about__sub { font-family: var(--k-display); font-style: italic; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; margin-bottom: 24px; }
.r-about__top { position: absolute; right: 6vw; top: -80px; width: clamp(160px, 17vw, 250px); aspect-ratio: 4 / 5; z-index: 2; }
.r-about__low { position: absolute; right: 0; bottom: 70px; width: clamp(110px, 10vw, 160px); aspect-ratio: 4 / 5; }

/* 10. work with me: on black, two offers with a line between, a third below */
.r-work { background: var(--k-deep); color: var(--k-on-deep); padding: 120px 0; text-align: center; }
.r-work h2 { font-size: clamp(46px, 5.4vw, 80px); max-width: 860px; margin: 16px auto 60px; }
.r-work h2 em { color: var(--k-accent); }
.r-work__two { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 0 auto; }
.r-work__two .r-offer + .r-offer { border-left: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); }
.r-offer { padding: 10px 44px 46px; }
.r-offer h3 { font-size: clamp(40px, 4vw, 58px); margin-bottom: 18px; }
.r-offer--tint { color: var(--k-tint); }
.r-offer--cloud { color: var(--k-cloud); }
.r-offer--olive { color: var(--k-olive); }
.r-offer p { font-size: 16.5px; max-width: 380px; margin: 0 auto 26px; }
.r-offer--wide { max-width: 720px; margin: 0 auto; padding-top: 50px; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); }

/* 11. favorites from the shop: five products in a row */
.r-shop { padding: 110px 0 100px; }
.r-shop .title-mix { margin-bottom: 50px; }
.r-shop__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: end; }
.r-shop__row a { display: grid; place-items: end center; height: 240px; }
.r-shop__row img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .5s ease; }
.r-shop__row a:hover img { transform: translateY(-6px); }
.r-shop__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 46px; }
.r-shop__foot p { margin: 0; font-family: var(--k-display); font-style: italic; font-size: clamp(26px, 2.6vw, 36px); }

/* 12 and 14. the library and dance: darkened photo, a list or a tall frame, words in cream */
.r-cast, .r-dance { position: relative; color: var(--k-on-deep); padding: 110px 0; overflow: hidden; }
.r-cast__bg, .r-dance__bg { position: absolute; inset: 0; }
.r-cast__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 50%, transparent); }
.r-dance__bg img { filter: grayscale(1) contrast(1.05); }
.r-dance__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 55%, transparent); }
.r-cast__in, .r-dance__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.r-cast__list { background: color-mix(in srgb, var(--k-deep) 62%, transparent); border: 1px solid color-mix(in srgb, var(--k-on-deep) 26%, transparent); border-radius: 28px; padding: 34px 34px 18px; }
.r-cast__list ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: c; }
.r-cast__list li { counter-increment: c; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 22%, transparent); }
.r-cast__list li::before { content: ""; grid-row: 1 / 3; width: 30px; height: 30px; margin-top: 2px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) 55% 50% / 0 0 no-repeat; -webkit-mask: none; position: relative; }
.r-cast__list b { font-family: var(--k-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.r-cast__list span { font-size: 14.5px; opacity: .88; }
.r-cast__copy, .r-dance__copy { text-align: center; }
.r-cast__script { font-family: var(--k-script); font-size: clamp(40px, 4vw, 58px); line-height: 1; margin: 0; transform: rotate(-4deg); }
.r-cast h2, .r-dance h2 { font-size: clamp(52px, 6vw, 92px); margin: 8px 0 6px; }
.r-cast__copy p:not(.label):not(.r-cast__script), .r-dance__copy p:not(.label):not(.r-cast__script) { max-width: 380px; margin: 14px auto 26px; }
.r-dance__frame { width: min(340px, 80%); aspect-ratio: 9 / 16; justify-self: center; border-radius: 34px; border: 1px solid color-mix(in srgb, var(--k-on-deep) 40%, transparent); }
.r-dance__copy { order: -1; }

/* 13. get the goods = Glow: her cut out in front of the giant words, then three numbered rows */
.r-goods { padding: 100px 0 110px; text-align: center; }
.r-goods__stage { position: relative; height: clamp(380px, 40vw, 560px); margin-top: 14px; }
.r-goods__word { position: relative; z-index: 1; font-size: clamp(76px, 12vw, 190px); line-height: .9; letter-spacing: -0.03em; white-space: nowrap; margin: 0; }
.r-goods__cut { position: absolute; z-index: 2; left: 50%; bottom: 0; height: 88%; width: auto; max-width: none; transform: translateX(-68%); }
.r-goods__list { list-style: none; max-width: 900px; margin: 0 auto; padding: 0; text-align: left; border-top: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
.r-goods__list li { display: grid; grid-template-columns: 90px 1fr auto 80px; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 18%, transparent); }
.r-goods__n { font-family: var(--k-display); font-style: italic; font-size: 60px; line-height: 1; }
.r-goods__name { font-family: var(--k-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.r-goods__thumb { width: 80px; aspect-ratio: 1; }

/* 15. follow: script handle, three columns, then squares edge to edge */
.r-follow { background: linear-gradient(180deg, var(--k-tint), var(--k-cloud)); padding: 100px 0 0; text-align: center; }
.r-follow__script { font-family: var(--k-script); font-weight: 400; font-size: clamp(54px, 6vw, 92px); line-height: .95; letter-spacing: 0; margin-bottom: 26px; }
.r-follow__script span { display: block; }
.r-follow p { max-width: 560px; margin: 0 auto 40px; }
.r-follow__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0; margin-bottom: 90px; }
.r-follow__cols > div { padding: 6px 48px; display: grid; justify-items: center; gap: 14px; }
.r-follow__cols > div + div { border-left: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); }
.r-follow__cols h3 { font-size: clamp(40px, 4vw, 58px); }
.r-strip { display: grid; grid-template-columns: repeat(5, 1fr); }
.r-strip .ph { aspect-ratio: 1; }

@media (max-width: 900px) {
  .r-hero { padding-top: 104px; --hang: 160px; }
  .r-card__medallion.medallion { right: -10px; bottom: -40px; width: 120px; height: 120px; }
  .r-card__medallion .medallion__logo { width: 64px; }
  .r-intro { padding: 120px 0 80px; }
  .r-book__in, .r-brands__in, .r-cast__in, .r-dance__in { grid-template-columns: 1fr; gap: 44px; }
  .r-book__covers { height: 300px; }
  .r-brands__photo { display: none; }
  .r-about { grid-template-columns: 1fr; padding: 70px 0 90px; }
  .r-about__left { width: 72%; }
  .r-about__copy { padding: 40px 22px 0; }
  .r-about__top { top: -50px; right: 22px; width: 130px; }
  .r-about__low { display: none; }
  .r-work__two { grid-template-columns: 1fr; }
  .r-work__two .r-offer + .r-offer { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); padding-top: 40px; }
  .r-offer { padding: 10px 6px 40px; }
  .r-shop__row { grid-template-columns: repeat(3, 1fr); gap: 26px 14px; }
  .r-shop__row a { height: 170px; }
  .r-shop__foot { flex-direction: column; align-items: center; }
  .r-goods__stage { height: clamp(300px, 90vw, 420px); }
  .r-goods__word { font-size: clamp(54px, 15vw, 110px); white-space: normal; }
  .r-goods__list li { grid-template-columns: 54px 1fr; }
  .r-goods__n { font-size: 44px; grid-row: 1 / 3; }
  .r-goods__list .btn { justify-self: start; }
  .r-goods__thumb { display: none; }
  .r-dance__frame { width: 62%; }
  .r-follow__cols { grid-template-columns: 1fr; gap: 26px; margin-bottom: 60px; }
  .r-follow__cols > div + div { border-left: 0; }
  .r-strip { grid-template-columns: repeat(3, 1fr); }
  .r-strip .ph:nth-child(n+4) { display: none; }
  .r-insta__frame { grid-template-columns: repeat(2, 1fr); padding: 14px; gap: 12px; }
}
.r-card__clip { position: absolute; inset: 0; overflow: hidden; z-index: 1; }

/* ---------- MOTION (11/7): works in every browser (motion.js), not only the ones with scroll timelines.
   Words and cards ease up as you reach them, lists come in one after another, photos unveil,
   photo backgrounds drift, her Glow words slide in. Reduced motion = a still, complete page. ---------- */
.motion .rv { animation: none !important; opacity: 0; transform: translateY(34px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.motion .rv.is-in { opacity: 1; transform: none; }
/* photos: the frame stays put (so the page can tell it has arrived) and the picture inside wipes up */
.motion .ph.rv { opacity: 1; transform: none; }
.motion .ph.rv img, .motion .rv > .ph img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0s); }
.motion .ph.rv.is-in img, .motion .rv.is-in > .ph img { clip-path: inset(0 0 0 0); }
.motion .r-stack li, .motion .r-goods__list li, .motion .r-cast__list li { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.motion .is-in .r-stack li, .motion .r-stack.is-in li, .motion .r-goods__list li.is-in, .motion .r-cast__list.is-in li { opacity: 1; transform: none; }
.motion .r-goods__word { transform: translateX(-6%); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease; }
.motion .r-goods__stage.is-in .r-goods__word { transform: none; opacity: 1; }
.motion .r-goods__cut { opacity: 0; transform: translate(-68%, 40px); transition: transform 1.3s cubic-bezier(.2,.7,.2,1) .25s, opacity 1s ease .25s; }
.motion .r-goods__stage.is-in .r-goods__cut { opacity: 1; transform: translateX(-68%); }
.motion .r-hero__name, .motion .r-hero__tag, .motion .r-card { animation: rise 1.3s cubic-bezier(.2,.7,.2,1) both; }
.motion .r-hero__tag { animation-delay: .15s; }
.motion .r-card { animation-delay: .32s; }
.r-hero__bg img, .r-list__bg img, .r-cast__bg img, .r-dance__bg img { will-change: transform; }
.motion .r-hero__bg img, .motion .r-list__bg img, .motion .r-cast__bg img, .motion .r-dance__bg img { height: 118%; transform: translate3d(0, var(--py, 0px), 0); }
@media (max-width: 900px) {
  .motion .r-goods__cut { transform: translate(-68%, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion .rv, .motion .ph img, .motion .r-stack li, .motion .r-goods__list li, .motion .r-cast__list li, .motion .r-goods__word, .motion .r-goods__cut { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .motion .r-goods__cut { transform: translateX(-68%) !important; }
}
/* the shop row: every product sits on the same line at the same height */
.r-shop__row a { height: 230px; }
.r-shop__row img { height: auto; max-height: 220px; max-width: 86%; }
@media (max-width: 900px) { .r-shop__row a { height: 160px; } .r-shop__row img { max-height: 150px; } }

/* THE LIST POP UP (popup.js), after Robyn's: photo left, a black panel right, in the corner, never over the whole page */
.pop { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(560px, calc(100% - 48px)); display: grid; grid-template-columns: 0.42fr 0.58fr; background: var(--k-deep); color: var(--k-on-deep); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--k-deep) 70%, transparent); transform: translateY(24px); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.pop.is-on { transform: none; opacity: 1; }
.pop[hidden] { display: none; }
.pop__ph { min-height: 100%; }
.pop__copy { position: relative; padding: 34px 30px 30px; }
.pop__title { font-family: var(--k-display); font-size: 36px; line-height: 1.05; margin: 10px 0 10px; }
.pop__title em { color: var(--k-tint); }
.pop__text { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.pop__form { flex-direction: column; margin-top: 0; }
.pop__form input { border-right: 1px solid currentColor; border-bottom: 0; }
.pop__go { display: none; }
.pop__x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: inherit; cursor: pointer; }
.pop__x::before, .pop__x::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.pop__x::after { transform: rotate(-45deg); }
.pop .form-note { color: var(--k-on-deep); }
@media (prefers-reduced-motion: reduce) { .pop { transition: none; transform: none; } }
/* phones: a slim bar at the bottom, never covering the page */
@media (max-width: 600px) {
  .pop { left: 12px; right: 12px; bottom: 12px; width: auto; grid-template-columns: 1fr; }
  .pop__ph, .pop .label, .pop__text, .pop__form { display: none; }
  .pop__copy { display: flex; align-items: center; gap: 12px; padding: 12px 48px 12px 16px; }
  .pop__title { font-size: 21px; margin: 0; flex: 1; }
  .pop__go { display: inline-block; padding: 11px 14px; font-size: 10px; white-space: nowrap; }
  .pop__x { top: 50%; transform: translateY(-50%); right: 6px; }
}
/* the medallion sits on the card's left edge, so her open hand on the right stays clear (McKenna 11/7) */
.r-card__medallion.medallion { right: auto; left: -64px; }
@media (max-width: 900px) { .r-card__medallion.medallion { right: auto; left: -10px; } }
/* her whole open hand fits in the card: a little smaller, her body a little left of centre */
.r-card__cut { height: 86%; left: 42%; }
/* the pop up now offers the free Inner Glow Circle (Lexie, 11/7): her script and serif, as on the Glow page */
.pop__title { display: grid; }
.pop__script { font-family: var(--k-script); font-size: 46px; line-height: .95; color: var(--k-tint); }
.pop__join { margin-bottom: 14px; }
.pop__more { display: block; font-size: 13.5px; color: inherit; opacity: .85; }
@media (max-width: 600px) {
  .pop__join, .pop__more { display: none; }
  .pop__title { display: block; font-size: 20px; }
  .pop__script { font-size: 26px; display: inline; margin-right: 4px; }
}
/* less space above her head (McKenna 11/7): a slightly shorter card, her a little bigger, hand still inside */
.r-card { aspect-ratio: 4 / 4.6; }
.r-card__cut { height: 92%; left: 40%; }
/* pop up at Robyn's size: wide and short, flush in the corner, a narrow photo, the words centred */
@media (min-width: 601px) {
  .pop { right: 0; bottom: 0; width: min(760px, 100%); grid-template-columns: 0.3fr 0.7fr; }
  .pop__copy { text-align: center; padding: 30px 56px 28px; }
  .pop__title { justify-items: center; font-size: 40px; }
  .pop__script { font-size: 52px; }
  .pop__text { max-width: 420px; margin-inline: auto; }
  .pop__join { margin-bottom: 12px; }
}
.pop__ph img { object-position: 50% 12%; }

/* 14. MOVE WITH ME, after Robyn's second podcast: her clip behind in black and white, a tilted phone with her class library */
.r-dance__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.r-dance__bg img { filter: grayscale(1) contrast(1.05); }
.r-phone-wrap { justify-self: center; width: min(310px, 72%); }
.r-phone { position: relative; aspect-ratio: 9 / 19; padding: 11px; border-radius: 50px; background: var(--k-deep); transform: rotate(7deg);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-on-deep) 22%, transparent), 0 40px 70px -30px color-mix(in srgb, var(--k-deep) 85%, transparent); }
.r-phone::before { content: ""; position: absolute; z-index: 3; top: 22px; left: 50%; width: 88px; height: 25px; margin-left: -44px; border-radius: 20px; background: var(--k-deep); }
.r-phone::after { content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: var(--k-deep); }
.r-phone__screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; }
.r-phone__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-phone__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k-deep) 72%, transparent) 0%, color-mix(in srgb, var(--k-deep) 40%, transparent) 62%, color-mix(in srgb, var(--k-deep) 10%, transparent)); }
.r-phone__ui { position: relative; z-index: 2; padding: 64px 22px 0; color: var(--k-on-deep); text-align: left; }
.r-phone__top { font-family: var(--k-label); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 0; }
.r-phone__sub { font-family: var(--k-display); font-style: italic; font-size: 17px; margin: 2px 0 14px; opacity: .9; }
.r-phone__list { list-style: none; margin: 0; padding: 0; }
.r-phone__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 26%, transparent); font-family: var(--k-display); font-size: 19px; line-height: 1.15; }
.r-phone__play { flex: 0 0 auto; position: relative; width: 24px; height: 24px; border: 1.2px solid currentColor; border-radius: 50%; }
.r-phone__play::after { content: ""; position: absolute; left: 9px; top: 6.5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.motion .r-phone { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); transform: rotate(16deg) translateY(30px); }
.motion .r-phone-wrap.is-in .r-phone { transform: rotate(7deg); }
@media (max-width: 900px) {
  .r-phone-wrap { width: min(270px, 70%); }
}
/* the words sit over her clip, so the left side is a touch darker */
.r-dance__bg::before { background: linear-gradient(90deg, color-mix(in srgb, var(--k-deep) 72%, transparent) 0%, color-mix(in srgb, var(--k-deep) 50%, transparent) 55%, color-mix(in srgb, var(--k-deep) 40%, transparent) 100%); }
/* a bigger phone (McKenna 11/7, after Robyn's), running off the bottom of the section like hers */
.r-dance { padding: 120px 0 0; }
.r-dance__in { grid-template-columns: 0.9fr 1.1fr; align-items: end; }
.r-dance__copy { align-self: center; padding-bottom: 120px; }
.r-phone-wrap { width: min(440px, 88%); margin-bottom: -140px; }
.r-phone { padding: 14px; border-radius: 62px; }
.r-phone__screen { border-radius: 50px; }
.r-phone::before { top: 28px; width: 116px; height: 32px; margin-left: -58px; }
.r-phone::after { top: 200px; height: 86px; }
.r-phone__ui { padding: 88px 30px 0; }
.r-phone__top { font-size: 13px; }
.r-phone__sub { font-size: 22px; margin-bottom: 18px; }
.r-phone__list li { font-size: 26px; padding: 16px 0; gap: 16px; }
.r-phone__play { width: 32px; height: 32px; }
.r-phone__play::after { left: 12px; top: 9px; border-width: 6px 0 6px 10px; }
@media (max-width: 900px) {
  .r-dance { padding-top: 90px; }
  .r-dance__copy { padding-bottom: 20px; }
  .r-phone-wrap { width: min(330px, 82%); margin-bottom: -110px; }
  .r-phone__ui { padding: 70px 22px 0; }
  .r-phone__list li { font-size: 21px; padding: 12px 0; }
}
@media (max-width: 900px) {
  .r-dance__in { grid-template-columns: 1fr; gap: 40px; }
  .r-dance__copy { padding-bottom: 0; }
  .r-phone-wrap { justify-self: center; }
  .r-dance__bg img { object-position: 42% 50%; }
}
/* the phone sits out toward the right edge, so she has the middle (McKenna 11/7) */
@media (min-width: 901px) {
  .r-phone-wrap { justify-self: end; margin-right: min(0px, calc(36px - (100vw - 1180px) / 2)); }
}
/* Find your Glow: the smiling chair photo (relit R4); her face sits at 71% of its width */
.r-goods__cut { transform: translateX(-71%); }
.motion .r-goods__cut { transform: translate(-71%, 40px); }
.motion .r-goods__stage.is-in .r-goods__cut { transform: translateX(-71%); }
@media (prefers-reduced-motion: reduce) { .motion .r-goods__cut { transform: translateX(-71%) !important; } }

/* I'm Lexie, sized like Robyn's (McKenna 11/7): the left photo inset from the edge, the two right photos
   about half again bigger, the top one rising above the section, the low one running off the right edge */
.r-about { grid-template-columns: 35% 1fr; overflow-x: clip; overflow-y: visible; padding: 130px 0 140px; }
.r-about__left { width: auto; margin-left: 4.5vw; aspect-ratio: 2 / 3; }
.r-about__copy { max-width: 600px; padding: 0 30px 0 7%; }
.r-about__top { width: clamp(220px, 23vw, 340px); aspect-ratio: 1 / 1.08; right: 6vw; top: -90px; }
.r-about__low { width: clamp(150px, 15vw, 230px); aspect-ratio: 3 / 4; right: -2vw; bottom: 30px; }
.r-about__low img { object-position: 30% 50%; }
@media (max-width: 900px) {
  .r-about { grid-template-columns: 1fr; padding: 80px 0 90px; }
  .r-about__left { margin-left: 22px; width: 70%; aspect-ratio: 4 / 5; }
  .r-about__top { width: 140px; right: 22px; top: -50px; }
}
@media (max-width: 900px) { .r-about__copy { padding: 40px 22px 0; } }
/* 2. hi, I'm Lexie: one big sentence, the five path words in italic as links */
.r-intro p.r-say { max-width: 980px; margin: 0 auto 40px; font-family: var(--k-display); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; }
.r-say a { font-style: italic; color: var(--k-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: var(--k-cloud); transition: text-decoration-color .3s ease; }
.r-say a:hover, .r-say a:focus-visible { text-decoration-color: var(--k-ink); }
@media (max-width: 900px) { .r-intro p.r-say { font-size: clamp(30px, 8vw, 40px); } }
/* Olive Tree People's own wordmark beside her U|S mark */
.with__mark--otp .with__logo { height: 40px; }
.partner__mark--otp { height: 44px; }
@media (max-width: 900px) { .with__mark--otp .with__logo { height: 32px; } }

/* =====================================================================
   INNER PAGES AFTER ROBYN'S SERVICES PAGE (11/7), starting with Shake:
   full photo hero, offers as text beside a smaller photo, one big moment, a dark band of links, Follow.
   ===================================================================== */
.s-hero { position: relative; color: var(--k-on-deep); min-height: clamp(620px, 92svh, 860px); display: grid; align-items: end; padding: 0 0 90px; overflow: hidden; }
.s-hero__bg { position: absolute; inset: 0; }
.s-hero__bg img { object-position: 30% 62%; }
.s-hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--k-deep) 10%, transparent) 25%, color-mix(in srgb, var(--k-deep) 62%, transparent) 75%), linear-gradient(0deg, color-mix(in srgb, var(--k-deep) 45%, transparent), transparent 55%); }
.s-hero__in { position: relative; z-index: 2; display: grid; justify-items: end; }
.s-hero__copy { max-width: 560px; }
.s-hero h1 { font-size: clamp(84px, 11vw, 168px); line-height: .9; margin: 0 0 18px; }
.s-hero .label { margin: 0 0 22px; }
.s-hero__lede { font-family: var(--k-display); font-size: clamp(30px, 3vw, 44px); line-height: 1.12; margin: 0; }

.s-offers { background: var(--k-tint); padding: 110px 0 60px; }
.s-offer { display: grid; grid-template-columns: 1fr 0.62fr; gap: 9%; align-items: center; padding-bottom: 90px; }
.s-offer--flip { grid-template-columns: 0.62fr 1fr; }
.s-offer--flip .s-offer__ph { order: -1; }
.s-offer__copy { max-width: 520px; }
.s-offer h2 { font-size: clamp(46px, 4.6vw, 70px); margin: 14px 0 18px; }
.s-offer h2 em { color: var(--k-secondary); }
.s-offer__copy p:not(.label) { font-size: 16.5px; }
.s-offer__fine { font-size: 14.5px !important; opacity: .8; margin-bottom: 24px; }
.s-offer__ph { aspect-ratio: 4 / 5; width: 100%; box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--k-deep) 60%, transparent); }
.s-offer:not(.s-offer--flip) .s-offer__ph { transform: translateY(-30px); }

.s-big { padding: 100px 0 110px; text-align: center; background: linear-gradient(120deg, var(--k-tint) 0%, var(--k-paper) 55%, var(--k-cloud) 100%); }
.s-big__stage { position: relative; margin: 16px auto 40px; max-width: 980px; }
.s-big__word { font-size: clamp(90px, 15vw, 230px); line-height: .85; text-transform: uppercase; letter-spacing: -0.02em; margin: 0; position: relative; z-index: 2; }
.s-big__ph { width: min(620px, 82%); aspect-ratio: 3 / 2; margin: -0.42em auto 0; position: relative; z-index: 1; font-size: clamp(90px, 15vw, 230px); }
.s-big__text { max-width: 520px; margin: 0 auto 26px; font-family: var(--k-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; }

.s-moves { position: relative; color: var(--k-on-deep); padding: 110px 0; overflow: hidden; }
.s-moves__bg { position: absolute; inset: 0; }
.s-moves__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--k-deep) 55%, transparent); }
.s-moves__in { position: relative; z-index: 2; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8%; align-items: center; }
.s-moves h2 { font-size: clamp(46px, 5vw, 74px); text-transform: uppercase; line-height: .98; }
.s-moves h2 em { text-transform: none; color: var(--k-tint); }
.s-moves__links { list-style: none; margin: 0; padding: 0; }
.s-moves__links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-on-deep) 40%, transparent); text-decoration: none; font-family: var(--k-display); font-size: clamp(28px, 2.6vw, 38px); }
.s-moves__arrow { position: relative; width: 56px; height: 1px; background: currentColor; transition: width .35s ease; }
.s-moves__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.s-moves__links a:hover .s-moves__arrow, .s-moves__links a:focus-visible .s-moves__arrow { width: 80px; }

@media (max-width: 900px) {
  .s-hero { min-height: 680px; padding-bottom: 60px; }
  .s-hero__bg img { object-position: 22% 60%; }
  .s-hero__bg::before { background: linear-gradient(0deg, color-mix(in srgb, var(--k-deep) 72%, transparent), transparent 70%); }
  .s-hero__in { justify-items: start; }
  .s-offers { padding: 80px 0 30px; }
  .s-offer, .s-offer--flip { grid-template-columns: 1fr; gap: 34px; padding-bottom: 70px; }
  .s-offer__ph { width: 78%; justify-self: end; }
  .s-offer--flip .s-offer__ph { order: 0; justify-self: start; }
  .s-offer:not(.s-offer--flip) .s-offer__ph { transform: none; }
  .s-moves__in { grid-template-columns: 1fr; gap: 30px; }
}
.s-hero__bg img { object-position: 30% 42%; }
@media (max-width: 900px) { .s-hero__bg img { object-position: 22% 42%; } }

/* ---------- CONNECT (11/7), after Robyn Warner's contact page: her words and the form in a white card on her mauve ---------- */
.site-head--ink .btn--head { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.site-head--ink .btn--head:hover, .site-head--ink .btn--head:focus-visible { background: transparent; color: var(--k-ink); }
.c-hello { position: relative; padding: 180px 0 130px; color: var(--k-ink); background: var(--k-cloud); overflow: hidden; }
.c-hello__bg { position: absolute; inset: 0; }
.c-hello__bg img { width: 100%; height: 100%; object-fit: cover; }
.c-hello__in { position: relative; width: min(880px, 100% - 48px); margin-inline: auto; }
.c-hello__title { position: relative; z-index: 2; text-align: center; font-size: clamp(76px, 9.4vw, 140px); line-height: .9; margin: 0 0 -0.34em; }
.c-hello__script { display: block; width: fit-content; margin: 0 auto -0.12em; font-family: var(--k-script); font-weight: 400; font-size: .52em; line-height: 1; letter-spacing: 0; transform: translateX(-62%) rotate(-7deg); }
.c-card { position: relative; z-index: 1; background: var(--k-white); padding: clamp(84px, 9vw, 118px) clamp(28px, 7vw, 92px) clamp(50px, 6vw, 72px); }
.c-card__lede { max-width: 520px; margin: 0 auto 44px; text-align: center; font-size: 17.5px; }
.c-form { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid color-mix(in srgb, var(--k-ink) 60%, transparent); }
.c-form label { display: grid; align-content: start; gap: 6px; padding: 16px 18px 12px 2px; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 60%, transparent); font-family: var(--k-label); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: background .3s ease; }
.c-form label:nth-of-type(even) { border-left: 1px solid color-mix(in srgb, var(--k-ink) 60%, transparent); padding-left: 18px; }
.c-form label:focus-within { background: color-mix(in srgb, var(--k-tint) 40%, transparent); }
.c-form .c-form__full { grid-column: 1 / -1; }
.c-form input, .c-form select, .c-form textarea { font: inherit; font-family: var(--k-body); font-size: 16.5px; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 4px 0; background: transparent; color: var(--k-ink); border: 0; border-radius: 0; }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { outline: none; }
.c-form select { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 30px; cursor: pointer; }
.c-form textarea { min-height: 130px; resize: vertical; }
.c-form__send { grid-column: 1 / -1; justify-self: end; margin-top: 34px; }
.c-form .form-note { grid-column: 1 / -1; justify-self: end; }
.c-card__mail { margin: 34px 0 0; text-align: center; font-size: 15.5px; }
.c-faq { border-top: 0; }
.r-brands__lede { font-family: var(--k-display); font-size: clamp(25px, 2.3vw, 33px); line-height: 1.2; max-width: 500px; margin: 14px 0 18px; }
@media (max-width: 760px) {
  .c-hello { padding: 130px 0 80px; }
  .c-hello__in { width: calc(100% - 32px); }
  .c-hello__title { font-size: 64px; }
  .c-hello__script { transform: translateX(-46%) rotate(-7deg); }
  .c-card { padding: 64px 22px 40px; }
  .c-card__lede { font-size: 16.5px; margin-bottom: 32px; }
  .c-form { grid-template-columns: 1fr; }
  .c-form label:nth-of-type(even) { border-left: 0; padding-left: 2px; }
  .c-form__send { justify-self: stretch; text-align: center; }
}

/* =====================================================================
   LEXIE'S EDITS 2 (11/10, "Alexia Kay edits 2", word for word in Méora/clients/lexie/from-lexie-2026-11-11/)
   ===================================================================== */
/* HOME HERO: her shoreline walk video behind, her stacked logo on top, her line, her script over her photo */
.r-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-hero--video .r-hero__bg::before { z-index: 1; background: color-mix(in srgb, var(--k-deep) 42%, transparent); }
.r-hero--video .r-hero__bg img, .r-hero--video .r-hero__bg video { z-index: 0; }
.motion .r-hero--video .r-hero__bg img { height: 100%; transform: none; }
.r-hero__logo { margin: 0; line-height: 0; }
.r-hero .brand--hero { display: inline-block; width: min(440px, 70vw); min-width: 0; min-height: 0; aspect-ratio: var(--k-logo-hero-ratio); background-image: var(--k-logo-hero-light); font-size: 0; }
.r-hero__tag.label { margin-top: 18px; }
.r-hero__tag span { display: inline-block; white-space: nowrap; margin: 0 .35em; }
.motion .r-hero__logo { animation: rise 1.3s cubic-bezier(.2,.7,.2,1) both; }
.r-card__cut--chair { height: 94%; left: 50%; transform: translateX(-58%); }
.r-card__script { position: absolute; z-index: 3; left: -58px; bottom: 34px; margin: 0; font-family: var(--k-script); font-size: clamp(46px, 4.4vw, 64px); line-height: 1; color: var(--k-ink); text-align: left; transform: rotate(-7deg); text-shadow: 0 0 14px color-mix(in srgb, var(--k-tint) 90%, transparent); pointer-events: none; }
@media (max-width: 900px) {
  .r-hero .brand--hero { width: min(330px, 74vw); }
  .r-hero__tag.label { font-size: 11px; letter-spacing: .22em; }
  .r-card__script { left: 4px; bottom: 18px; font-size: 40px; }
}
/* the book band from before 11/7 sits under the partner row again; its tilted print hangs into the next section */
.r-press + .book { margin-top: 0; }
/* START HERE: the blazer photo (the old hero photo) on her blush, whole, as the first picture */
.r-brands__photo .ph--cut { background: var(--k-tint); }
.r-brands__photo .ph--cut img { object-fit: contain; object-position: 50% 100%; filter: none; }
/* LIFE HAPPENS: one tall video, no other photos */
.r-about--video { min-height: 0; }
.r-about__vid { position: relative; aspect-ratio: 9 / 16 !important; max-height: 720px; width: auto; justify-self: center; }
.r-about__vid img, .r-about__vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-about__vid video { z-index: 1; }
@media (max-width: 900px) { .r-about__vid { margin-left: 22px; width: 62%; max-height: none; justify-self: start; } }
/* WORK WITH ME: all three on one line, one colour */
.r-work__three { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1180px; margin: 0 auto; }
.r-work__three .r-offer + .r-offer { border-left: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); }
.r-work__three .r-offer { padding: 10px 34px 30px; display: flex; flex-direction: column; align-items: center; }
.r-work__three .r-offer p { flex: 1; }
@media (max-width: 900px) {
  .r-work__three { grid-template-columns: 1fr; }
  .r-work__three .r-offer + .r-offer { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 30%, transparent); padding-top: 40px; }
}
/* FIND YOUR GLOW: her lying on the table, cut out, in front of the words; the price under each tier name */
.r-goods__cut--table { height: 74%; transform: translateX(-50%) !important; }
.motion .r-goods__cut--table { transform: translate(-50%, 40px) !important; }
.motion .r-goods__stage.is-in .r-goods__cut--table { transform: translateX(-50%) !important; }
.r-goods__price { display: block; margin-top: 6px; font-family: var(--k-body); font-style: normal; font-size: 15px; letter-spacing: .02em; opacity: .8; }
.r-goods__thumb--logo img { object-fit: cover; filter: none; }
@media (max-width: 900px) {
  .r-goods__stage--table { height: clamp(260px, 70vw, 380px); }
  .r-goods__cut--table { height: 62%; }
}
.r-about__vid { width: min(100%, 420px); height: auto; margin-left: 4.5vw; justify-self: start; }
@media (max-width: 900px) { .r-about__vid { width: 62%; margin-left: 22px; } }
/* her script reads clearly: off her photo's lower right corner, mostly on the page below the video */
.r-card__script { left: auto; right: -170px; bottom: 26px; text-shadow: none; }
@media (max-width: 900px) { .r-card__script { left: auto; right: -4px; bottom: -58px; font-size: 38px; } .r-hero__in { padding-bottom: 40px; } }
/* MOVE: her clip behind the page header */
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* her styles on her four lines; the dot only between styles, never at the start of a line */
.styles--rows li { display: block; }
.styles--rows li + li::before { content: none; }
.styles--rows li:nth-child(even) { font-style: normal; }
.styles--rows span { white-space: nowrap; }
.styles--rows span:nth-child(even) { font-style: italic; }
.styles--rows span + span::before { content: "\00B7"; margin: 0 .32em; opacity: .5; font-style: normal; display: inline-block; }
@media (max-width: 900px) {
  .styles--rows li { margin-bottom: .2em; }
  .styles--rows span { white-space: normal; }
  .styles--rows span { display: block; }
  .styles--rows span + span::before { content: none; }
}
/* the Coming soon tag on a class card's photo */
.card .ph { position: relative; }
.card__soon { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 8px 12px 7px; background: var(--k-paper); color: var(--k-ink); font-family: var(--k-label); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
/* the class schedule: a plain week, one row a class */
.sched { background: var(--k-tint); padding: 110px 0; }
.sched__head { text-align: center; margin-bottom: 44px; }
.sched__head h2 { font-size: clamp(52px, 6vw, 92px); margin: 14px 0 10px; }
.sched__head h2 em { color: var(--k-secondary); }
.sched__empty { max-width: 640px; margin: 0 auto; padding: 46px 40px; background: var(--k-paper); text-align: center; }
.sched__soon { font-family: var(--k-display); font-style: italic; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; margin: 0 0 14px; }
.sched__empty .signup { justify-content: center; margin-top: 24px; }
.sched__list { list-style: none; max-width: 980px; margin: 0 auto; padding: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); }
.sched__list li { display: grid; grid-template-columns: 140px 110px 1fr 160px auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); }
.sched__day, .sched__where { font-family: var(--k-label); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.sched__class { font-family: var(--k-display); font-size: 28px; line-height: 1.1; }
@media (max-width: 760px) {
  .sched { padding: 80px 0; }
  .sched__empty { padding: 34px 20px; }
  .sched__list li { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .sched__class { grid-column: 1 / -1; }
}
.move-faq { padding-top: 100px; }
.sched__empty .signup { margin-inline: auto; }
/* SHAKE (11/10): her beach photo with two friends; her words lower left over the sand */
.s-hero--beach .s-hero__in { justify-items: start; }
.s-hero--beach .s-hero__bg img { object-position: 50% 40%; }
.s-hero--beach .s-hero__bg::before { background: linear-gradient(0deg, color-mix(in srgb, var(--k-deep) 66%, transparent) 0%, color-mix(in srgb, var(--k-deep) 20%, transparent) 50%, transparent 75%); }
.s-hero--beach .s-hero__copy { max-width: 760px; }
.nobr { white-space: nowrap; }
@media (max-width: 560px) { .s-hero__lede .nobr { white-space: normal; } }
/* her prices, one to a line, in the display serif; the qualification stays small */
.s-prices { list-style: none; margin: 18px 0 10px; padding: 0; }
.s-prices li { font-family: var(--k-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; }
.s-prices b { font-weight: 400; font-style: italic; margin-right: .3em; }
/* RISE (11/10): every partner the same layout as Unshakable Society, on the page colour */
.partners--even .partner--lead { align-items: start; }
.partners--even .partner--lead + .partner--lead { padding-left: 0; border-left: 0; }
.partners--even .partner__mark { display: block; }
.partners--even .partner__logo { margin-bottom: 24px; }
.partners--even .partner--lead > div:last-child { padding-top: 70px; }
.rise-line { display: inline-block; }
@media (min-width: 760px) { .rise-line { white-space: nowrap; } }
@media (max-width: 900px) { .partners--even .partner--lead > div:last-child { padding-top: 6px; } }
/* GLOW (11/10): her logos lead each tier (look B is the default), every tier black with white letters */
.tier--circle, .tier--academy, .tier--society { background: var(--k-deep); color: var(--k-on-deep); }
.tier .tier__btn { background: var(--k-paper); color: var(--k-ink); border-color: var(--k-paper); }
.tier .tier__btn:hover, .tier .tier__btn:focus-visible { background: transparent; color: var(--k-on-deep); border-color: var(--k-on-deep); }
.glow-title { font-size: clamp(56px, 7vw, 112px) !important; line-height: .98; }
.glow-lede span { display: block; }
.page-hero .glow-lede { max-width: 640px; }
/* MY STORY (11/10): pink behind "Move. Shake. Heal. Rise.", black with white words behind "Who I am" */
.story--pink { background: var(--k-tint); padding: 100px 0; }
.chapter--black { background: var(--k-deep); color: var(--k-on-deep); border-top: 0; }
.chapter--black .chapter__head h2 em, .chapter--black .belief h3 em { color: var(--k-accent); }
.chapter--black .belief { border-color: color-mix(in srgb, var(--k-on-deep) 26%, transparent); }
.chapter--black + .chapter { border-top: 0; }
/* phone: keep Lexie (right of the photo) in the Shake crop; keep her Rise line on one line; balance the Glow lede */
@media (max-width: 900px) { .s-hero--beach .s-hero__bg img { object-position: 80% 40%; } }
.rise-line { white-space: nowrap; }
@media (max-width: 759px) { .rise-line { font-size: min(1em, 4.05vw); } }
.glow-lede span { text-wrap: balance; }

/* 11/11: stacked partner logos (anya, Energy & Body Work) read at the same weight as the OTP wordmark */
.partner__mark--stack { height: 92px; }

/* 11/13: two booking buttons per offer, in a row that wraps cleanly */
.s-offer__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.s-offer__btns .btn { margin: 0; }