/* ==========================================================================
   The Realistic Romantic
   Palette is fixed by the client: six colours, no others. Everything not in
   that six is a color-mix of them. See DESIGN.md for the measured contrast law.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* The six. Exact client hexes, never altered. */
  --green:    #31594c;
  --cream:    #f6f1e9;
  --espresso: #3b302a;
  --wine:     #5c1f2b;
  --blush:    #d8b3ae;
  --sand:     #c8b28a;

  /* Derived, by perceptual mix only. No new hues enter the system. */
  --green-deep: color-mix(in oklab, var(--green) 74%, var(--espresso));
  --green-lift: color-mix(in oklab, var(--green) 91%, var(--cream));
  --cream-sink: color-mix(in oklab, var(--cream) 93%, var(--sand));
  --cream-deep: color-mix(in oklab, var(--cream) 84%, var(--sand));
  --wine-deep:  color-mix(in oklab, var(--wine) 82%, var(--espresso));

  /* Type */
  --font-display: "Bodoni Moda", "Bauer Bodoni", Didot, "Bodoni MT", "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-note: "Courier Prime", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.75rem, 6.2vw, 4.75rem);
  --fs-h1:      clamp(2.375rem, 5.5vw, 4rem);
  --fs-h2:      clamp(1.875rem, 3.6vw, 2.75rem);
  --fs-h3:      clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 76rem;
  --shell-narrow: 46rem;
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --section-y-tight: clamp(3rem, 7vw, 5.5rem);

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  /* Depth. Semantic, never arbitrary. */
  --z-base: 0;
  --z-rise: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;

  --radius: 2px;
  --radius-lg: 4px;
}

/* --------------------------------------------------------------------------
   2. Surfaces

   Every section declares a surface. The surface sets ink, rules, accent and
   the two monogram fills, so nested components never have to know where they
   are. Only pairs that clear the contrast law appear here.
   -------------------------------------------------------------------------- */

.s-green,
.s-deep,
.s-wine {
  --bg: var(--green);
  --ink: var(--cream);
  /* Both muted tiers clear 4.5:1 against green. On a mid dark surface a third,
     genuinely faint text tone cannot pass, so the quiet register is carried by
     the typewriter face and size, never by dropping contrast. */
  --ink-mute: color-mix(in oklab, var(--cream) 82%, transparent);
  --ink-faint: color-mix(in oklab, var(--cream) 74%, transparent);
  --rule: color-mix(in oklab, var(--blush) 26%, transparent);
  --accent: var(--blush);
  /* Blush is 4.1:1 on green, so it is legal for headings and illegal for the
     12px labels. Lifted toward cream it clears 4.5 and still reads as blush. */
  --label-ink: color-mix(in oklab, var(--blush) 70%, var(--cream));
  --panel: var(--green-lift);
  --mark-a: var(--cream);
  --mark-b: var(--blush);
  --btn-bg: var(--blush);
  --btn-ink: var(--espresso);
  --btn-bg-hover: var(--cream);
  --focus: var(--blush);
  --line-height-body: 1.72;
}

.s-deep { --bg: var(--green-deep); --panel: var(--green); }

.s-wine {
  --bg: var(--wine);
  --rule: color-mix(in oklab, var(--blush) 30%, transparent);
  --panel: var(--wine-deep);
}

.s-cream {
  --bg: var(--cream);
  --ink: var(--espresso);
  --ink-mute: color-mix(in oklab, var(--espresso) 80%, transparent);
  --ink-faint: color-mix(in oklab, var(--espresso) 72%, transparent);
  --rule: color-mix(in oklab, var(--sand) 52%, transparent);
  --accent: var(--wine);
  --label-ink: var(--wine);
  --panel: var(--cream-sink);
  --mark-a: var(--green);
  --mark-b: var(--blush);
  --btn-bg: var(--green);
  --btn-ink: var(--cream);
  --btn-bg-hover: var(--wine);
  --focus: var(--wine);
  --line-height-body: 1.65;
}

/* A deeper beige field, cream carried toward sand. It exists so a cream object
   can sit on cream ground and still read as an object: the press clipping needs
   the same paper family as the page, not a contrasting one. Also keeps two
   cream sections from merging into a single continuous field when stacked. */
.s-sand {
  --bg: var(--cream-deep);
  --ink: var(--espresso);
  --ink-mute: color-mix(in oklab, var(--espresso) 80%, transparent);
  --ink-faint: color-mix(in oklab, var(--espresso) 72%, transparent);
  --rule: color-mix(in oklab, var(--sand) 62%, transparent);
  --accent: var(--wine);
  --label-ink: var(--wine);
  --panel: var(--cream);
  --mark-a: var(--green);
  --mark-b: var(--blush);
  --btn-bg: var(--green);
  --btn-ink: var(--cream);
  --btn-bg-hover: var(--wine);
  --focus: var(--wine);
  --line-height-body: 1.65;
}

/* The app surface, sampled off the live product page at
   studio.com/apps/drew-henry/realisticromantic: a pure black field carrying a
   faint green cast, over the same #31594c the app already uses for its bands.
   Not a new hue, a depth tone, so the app sub site reads as the product it
   sells while the rest of the site stays on the six. */
.s-app {
  --bg: #080e0c;
  --ink: var(--cream);
  --ink-mute: color-mix(in oklab, var(--cream) 76%, transparent);
  --ink-faint: color-mix(in oklab, var(--cream) 64%, transparent);
  --rule: color-mix(in oklab, var(--blush) 22%, transparent);
  /* At 17:1 the black lets blush carry small text, which the mid green never
     could, so the app pages get the saturated accent rather than a lifted one. */
  --accent: var(--blush);
  --label-ink: var(--blush);
  --panel: #17231f;
  --mark-a: var(--cream);
  --mark-b: var(--blush);
  --btn-bg: var(--blush);
  --btn-ink: var(--espresso);
  --btn-bg-hover: var(--cream);
  --focus: var(--blush);
  --line-height-body: 1.72;
}

.s-green, .s-deep, .s-wine, .s-cream, .s-sand {
  background: var(--bg);
  color: var(--ink);
}

.s-app {
  color: var(--ink);
  background:
    radial-gradient(118% 86% at 74% 34%,
      color-mix(in oklab, var(--green) 46%, #000) 0%,
      #060b09 44%,
      #000 100%);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Bodoni Moda carries an optical size axis from 6 to 96. Left on auto the
     browser maps opsz to the font size, so a 76px heading gets the display cut,
     whose hairlines thin out to almost nothing and read as faint however high
     the measured contrast is. Pin the text cut instead: same didone character,
     hairlines that survive. Inter and Courier Prime have no opsz axis, so this
     is ignored on them. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.16; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--blush); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--focus, var(--blush));
  outline-offset: 3px;
  border-radius: 1px;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--z-overlay);
  padding: 0.75rem 1.25rem;
  background: var(--cream);
  color: var(--espresso);
  font: 500 var(--fs-small)/1 var(--font-body);
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease-out-quart);
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: var(--ink-mute);
  max-width: 34ch;
}

.prose { max-width: 68ch; line-height: var(--line-height-body); color: var(--ink-mute); }
.prose strong { color: var(--ink); font-weight: 600; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* A section tag. One system, used where a section genuinely needs naming,
   not stamped above every heading. */
.tag {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.tag::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Typewriter marginalia. The sarcastic aside, kept out of the headline. */
.note {
  font: 400 var(--fs-small)/1.6 var(--font-note);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   5. Brand marks
   -------------------------------------------------------------------------- */

/* The interlocked RR, carried as two masks lifted off the client's own logo
   sheet and traced to vector, so it recolours per surface and stays sharp at
   any size. The sheet only holds the mark at about 215px, so the raster version
   was visibly soft anywhere above thumbnail scale. */
.mark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2052 / 1957;
}
.mark::before,
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.mark::before {
  background: var(--mark-a);
  -webkit-mask-image: url("/assets/logo/rr-a.svg");
          mask-image: url("/assets/logo/rr-a.svg");
}
.mark::after {
  background: var(--mark-b);
  -webkit-mask-image: url("/assets/logo/rr-b.svg");
          mask-image: url("/assets/logo/rr-b.svg");
}

/* The wordmark, set live so it stays selectable and scales without a raster.
   REALISTIC takes the surface ink, ROMANTIC always takes blush. */
.lockup {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}
.lockup__the {
  display: block;
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 0.34em;
  letter-spacing: 0.34em;
  line-height: 1;
  margin-bottom: 0.35em;
  color: var(--ink-mute);
}
.lockup__a { color: var(--ink); }
.lockup__b { color: var(--blush); }
.lockup__tag {
  display: block;
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 0.24em;
  letter-spacing: 0.3em;
  line-height: 1;
  margin-top: 0.9em;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-y: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--btn-y) 1.6rem;
  font: 500 var(--fs-small)/1 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-ink);
  transition:
    background-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in oklab, var(--ink) 34%, transparent);
}
.btn--ghost:hover {
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  border-color: var(--ink);
}

.btn--lg { --btn-y: 1.15rem; padding-inline: 2rem; font-size: var(--fs-body); }

.btn__arrow { transition: transform var(--dur) var(--ease-out-quart); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Inline text link with a rule that grows from the left. */
.link {
  color: var(--label-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size var(--dur) var(--ease-out-quart);
}
.link:hover { background-size: 0% 1px; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg, var(--green));
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
}
.nav.is-stuck {
  border-bottom-color: var(--rule);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.75rem;
}

.nav__brand { font-size: 1.05rem; margin-right: auto; }
.nav__brand .lockup__the { font-size: 0.42em; letter-spacing: 0.28em; margin-bottom: 0.3em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav__links a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--ink-mute);
  padding-block: 0.4rem;
  position: relative;
  transition: color var(--dur) var(--ease-out-quart);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-quart);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { flex-shrink: 0; }

/* The link list carries its own CTA for the mobile panel. At desktop the
   standalone .nav__cta is the one on show, so the duplicate stays hidden. */
.nav__links .btn { display: none; }

.nav__toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out-quart),
              opacity var(--dur-fast) linear;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 60rem) {
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__links .btn { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--green-deep);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out-quart),
                transform var(--dur) var(--ease-out-expo);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--cream);
    padding-block: 0.85rem;
    border-bottom: 1px solid color-mix(in oklab, var(--blush) 18%, transparent);
  }
  .nav__links a::after { display: none; }
  .nav__links .btn {
    margin-top: 1.25rem;
    border: 0;
    background: var(--blush);
    color: var(--espresso);
    font-family: var(--font-body);
    font-size: var(--fs-small);
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem) var(--section-y); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero__title {
  font-size: var(--fs-display);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: var(--z-rise);
}
.hero__title em { font-style: italic; color: var(--blush); }

.hero__lead { margin-bottom: 2.25rem; max-width: 38ch; }

/* The mark bleeds past the column edge so the headline crosses it.
   Interlock is the brand's structural idea, so nothing sits in its own box. */
.hero__mark {
  position: relative;
  margin-inline: -12% -18%;
  opacity: 0.96;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.hero__meta li { font: 400 var(--fs-small)/1.4 var(--font-note); color: var(--ink-faint); }

@media (max-width: 62rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark {
    position: absolute;
    inset: auto -25% -12% auto;
    width: 62%;
    opacity: 0.16;
    z-index: var(--z-base);
    pointer-events: none;
  }
  .hero__body { position: relative; z-index: var(--z-rise); }
}

/* Page heads on the inner pages. Shorter than the home hero, same family. */
.pagehead { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.pagehead__title { margin-block: 0.9rem 1.25rem; }

/* --------------------------------------------------------------------------
   9. The correction

   The signature device. Delusion struck out, the truth set beside it. The <s>
   carries the meaning for assistive tech; the drawn line is the performance.
   -------------------------------------------------------------------------- */

.corrections { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }

.correction {
  margin: 0;
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.correction:last-child { border-bottom: 0; padding-bottom: 0; }

.correction__was {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  font-style: italic;
  line-height: 1.24;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 0.55rem;
}
.correction__was::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 0.58em;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
}
.correction__is {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Default state is fully drawn, so a page with no JS, a background tab, or a
   headless render still shows the device. JS opts in to the animation. */
.js .correction__was::after { transform: scaleX(0); }
.js .correction__is { opacity: 0; transform: translateY(10px); }
.js .correction.is-in .correction__was::after {
  transform: scaleX(1);
  transition: transform 420ms var(--ease-out-quart);
}
.js .correction.is-in .correction__is {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart) 260ms,
              transform var(--dur-slow) var(--ease-out-expo) 260ms;
}

/* --------------------------------------------------------------------------
   10. Marquee: the signature series band
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 1.15rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item:hover { color: var(--ink); }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-right: clamp(1.75rem, 4vw, 3rem);
}
.marquee__item {
  text-decoration: none;
  transition: color var(--dur) var(--ease-out-quart);
  font: 400 var(--fs-small)/1 var(--font-note);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.marquee__item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   11. Content blocks
   -------------------------------------------------------------------------- */

.head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.head--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 52rem) { .head--split { grid-template-columns: 1fr; align-items: start; } }

/* Pillars. Deliberately unequal: the first two carry more weight than the
   last two, so this never reads as four identical boxes. */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.pillar {
  background: var(--bg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.pillar:hover { background: var(--panel); }
.pillar__n {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  color: var(--label-ink);
}
.pillar h3 { font-size: var(--fs-h3); }
.pillar p { color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.6; }
.pillar--wide { grid-column: span 2; }
.pillar--wide h3 { font-size: var(--fs-h2); max-width: 20ch; }
.pillar--wide p { font-size: var(--fs-body); max-width: 52ch; }
@media (max-width: 44rem) {
  .pillars { grid-template-columns: 1fr; }
  .pillar--wide { grid-column: span 1; }
}

/* Offers. Sized by weight, not stamped into a uniform grid. */
.offers { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.offer {
  background: var(--bg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
  transition: background-color var(--dur) var(--ease-out-quart);
}
.offer:hover { background: var(--panel); }
.offer__name { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.offer__for { font: 400 var(--fs-small)/1.5 var(--font-note); color: var(--ink-faint); }
.offer__body { color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.62; }
.offer__body ul { display: grid; gap: 0.4rem; margin-top: 0.85rem; }
.offer__body li { display: flex; gap: 0.65rem; }
.offer__body li::before { content: "→"; color: var(--label-ink); flex-shrink: 0; }
.offer__side { display: grid; gap: 0.75rem; justify-items: start; min-width: 9rem; }
.offer__price { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.offer__price small { display: block; font: 400 var(--fs-label)/1.4 var(--font-note); color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; }
@media (max-width: 60rem) {
  .offer { grid-template-columns: 1fr; }
  .offer__side { justify-items: start; }
}

/* Phases: an actual ordered progression, so the numbering carries information. */
.phases { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.phase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.phase__n {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.8;
  color: var(--accent);
  opacity: 0.85;
}
.phase h3 { margin-bottom: 0.35rem; }
.phase__q { font: italic 400 var(--fs-lead)/1.4 var(--font-display); color: var(--ink-mute); margin-bottom: 1rem; }
.phase__mods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.phase__mods li {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
}
@media (max-width: 40rem) {
  .phase { grid-template-columns: 1fr; gap: 0.75rem; }
  .phase__n { font-size: 2.25rem; }
}

/* A plain two column fact list. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.fact dt { font: 400 var(--fs-label)/1 var(--font-note); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-ink); margin-bottom: 0.6rem; }
.fact dd { margin: 0; color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.6; }

/* Is / is not */
.contrast-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.contrast-pair > div { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.contrast-pair h3 { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.contrast-pair li { display: flex; gap: 0.7rem; padding-block: 0.5rem; color: var(--ink-mute); font-size: var(--fs-small); }
.contrast-pair li::before { flex-shrink: 0; font-family: var(--font-note); }
.is-list li::before { content: "+"; color: var(--label-ink); }
.not-list li::before { content: "\2013"; color: var(--ink-faint); }
.not-list li { color: var(--ink-faint); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; }
.step { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  color: var(--label-ink);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.step p { color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.6; }

/* Channel cards for the watch page */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.channel {
  background: var(--bg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.channel:hover { background: var(--panel); }
.channel__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.channel__meta { font: 400 var(--fs-label)/1 var(--font-note); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-ink); }
.channel p { font-size: var(--fs-small); color: var(--ink-mute); margin: 0; }
.channel__go { margin-top: auto; padding-top: 1rem; font-size: var(--fs-small); color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.channel:hover .btn__arrow { transform: translateX(3px); }

/* Portrait slot. Designed as a frame, never a grey rectangle. Fixed 4:5 so a
   real photograph drops in with no layout shift. */
/* A mounted portrait rather than a photo in a box. The sand rule is the frame,
   the padding is the mount, and the photograph's own studio cream sits inside
   it, so on the green it reads as a framed print instead of a white rectangle. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--sand) 80%, transparent);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait::after {
  /* the inner line of the mount */
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--sand) 55%, transparent);
  pointer-events: none;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait__mark { width: 42%; opacity: 0.4; }
.portrait__cap {
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  padding: 0.8rem 1rem;
  font: 400 var(--fs-label)/1.4 var(--font-note);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
}

/* Quote */
.quote { margin: 0; }
.quote blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-style: italic;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.quote figcaption { font: 400 var(--fs-small)/1.5 var(--font-note); color: var(--ink-faint); }

/* Split section: copy beside a visual */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 56rem) { .split, .split--wide-left { grid-template-columns: 1fr; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.plan { background: var(--bg); padding: clamp(1.75rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; }
.plan--featured { background: var(--panel); }
.plan__name { font: 400 var(--fs-label)/1 var(--font-note); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-ink); }
.plan__price { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.plan__price span { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-mute); letter-spacing: 0; }
.plan__note { font-size: var(--fs-small); color: var(--ink-mute); }
.plan .btn { margin-top: auto; }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.35rem;
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease-out-quart);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem; top: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out-quart);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 0.35rem; top: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform: rotate(90deg);
  transition: transform var(--dur) var(--ease-out-quart), opacity var(--dur) linear;
}
.faq details[open] summary::before { transform: rotate(90deg) scaleX(0); opacity: 0; }
.faq__a { padding-bottom: 1.5rem; max-width: 62ch; color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.68; }

/* --------------------------------------------------------------------------
   12. Sign up
   -------------------------------------------------------------------------- */

.signup__form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.signup__field { flex: 1 1 16rem; min-width: 0; }
.signup input[type="email"] {
  width: 100%;
  padding: 1.05rem 1.1rem;
  font: 400 var(--fs-body)/1 var(--font-body);
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart);
}
.signup input[type="email"]::placeholder { color: var(--ink-mute); opacity: 1; }
.signup input[type="email"]:focus { border-color: var(--accent); }
.signup__small { margin-top: 1rem; font: 400 var(--fs-label)/1.6 var(--font-note); color: var(--ink-faint); }
.signup__msg { margin-top: 1rem; font-size: var(--fs-small); color: var(--label-ink); min-height: 1.5em; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.footer__brand .lockup { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.25rem; }
.footer__col h4 { font: 400 var(--fs-label)/1 var(--font-note); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-ink); margin-bottom: 1.1rem; }
.footer__col li { margin-bottom: 0.7rem; }
.footer__col a { font-size: var(--fs-small); color: var(--ink-mute); text-decoration: none; transition: color var(--dur) var(--ease-out-quart); }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font: 400 var(--fs-label)/1.6 var(--font-note);
  color: var(--ink-faint);
}
@media (max-width: 48rem) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }

/* --------------------------------------------------------------------------
   14. Reveal

   Additive only. Content renders visible; JS adds the class that hides it and
   the observer that brings it back. If the observer never runs, nothing is
   ever hidden.
   -------------------------------------------------------------------------- */

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
}
.js [data-reveal][data-delay="1"].is-in { transition-delay: 90ms; }
.js [data-reveal][data-delay="2"].is-in { transition-delay: 180ms; }
.js [data-reveal][data-delay="3"].is-in { transition-delay: 270ms; }
.js [data-reveal][data-delay="4"].is-in { transition-delay: 360ms; }

/* One orchestrated load on the hero, not a fade on every section. */
.js .hero [data-load] { opacity: 0; transform: translateY(18px); }
.js .hero.is-loaded [data-load] {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-out-quart),
              transform 900ms var(--ease-out-expo);
}
.js .hero.is-loaded [data-load="2"] { transition-delay: 120ms; }
.js .hero.is-loaded [data-load="3"] { transition-delay: 220ms; }
.js .hero.is-loaded [data-load="4"] { transition-delay: 320ms; }
.js .hero .hero__mark { opacity: 0; }
.js .hero.is-loaded .hero__mark {
  opacity: 0.96;
  transition: opacity 1100ms var(--ease-out-quart) 160ms;
}
@media (max-width: 62rem) {
  .js .hero.is-loaded .hero__mark { opacity: 0.16; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ship every state resolved rather than mid animation. */
  .js [data-reveal],
  .js .hero [data-load] { opacity: 1; transform: none; }
  .js .hero .hero__mark { opacity: 0.96; transform: none; }
  .js .correction__was::after { transform: scaleX(1); }
  .js .correction__is { opacity: 1; transform: none; }

  /* A paused marquee still has to be readable, so let it scroll by hand. */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 62rem) {
  .js .hero .hero__mark { opacity: 0.16; }
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
  .nav, .marquee, .signup, .skip { display: none; }
  body, .s-green, .s-deep, .s-wine, .s-cream { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   17. Stage: pointer driven 3D

   One shared parallax rig. A perspective container, a preserve-3d inner that
   rotates toward the pointer, and layers separated on Z so the depth comes from
   real 3D rather than from faking offsets per element. Damped in rAF rather
   than by a CSS transition, so it has weight instead of lag.
   -------------------------------------------------------------------------- */

.stage {
  perspective: 1500px;
  perspective-origin: 50% 46%;
  position: relative;
}

.stage__inner {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--stage-y, 0) * -8deg))
    rotateY(calc(var(--stage-x, 0) * 11deg));
}

.layer { transform: translateZ(calc(var(--depth, 0) * 34px)); transform-style: preserve-3d; }

/* --- the device ---------------------------------------------------------- */

.device {
  position: relative;
  width: min(19rem, 72%);
  margin-inline: auto;
  aspect-ratio: 9 / 19.2;
  border-radius: 2.75rem;
  padding: 0.6rem;
  background: linear-gradient(157deg, #3a3f3d 0%, #141a18 38%, #050807 100%);
  box-shadow:
    0 0 0 1px rgba(246, 241, 233, 0.09),
    0 18px 34px -14px rgba(0, 0, 0, 0.85);
}
.device::after {
  /* the sheen that sells it as glass rather than a rounded rectangle */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(122deg,
    rgba(246, 241, 233, 0.16) 0%,
    rgba(246, 241, 233, 0.03) 22%,
    transparent 46%);
  pointer-events: none;
}

.device__screen {
  position: relative;
  height: 100%;
  border-radius: 2.2rem;
  overflow: hidden;
  background: #050807;
  isolation: isolate;
}
.device__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 8, 7, 0.5) 0%, transparent 26%, transparent 52%, rgba(5, 8, 7, 0.82) 100%);
}

.device__notch {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 1.35rem;
  border-radius: 1rem;
  background: #050807;
  z-index: var(--z-rise);
}

.device__ui {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-rise);
  padding: 1.1rem;
  display: grid;
  gap: 0.6rem;
}
.device__eyebrow {
  font: 400 0.6rem/1 var(--font-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blush);
}
.device__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
}

/* --- floating app cards -------------------------------------------------- */

.chip {
  position: absolute;
  width: min(15.5rem, 62%);
  padding: 0.95rem 1.05rem;
  border-radius: 0.9rem;
  background: rgba(14, 20, 18, 0.9);
  border: 1px solid rgba(246, 241, 233, 0.14);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9);
  text-align: left;
}
.chip__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.72rem/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--blush);
  margin-bottom: 0.5rem;
}
.chip p {
  margin: 0;
  font: 400 0.8rem/1.45 var(--font-body);
  color: color-mix(in oklab, var(--cream) 88%, transparent);
}
.chip--coach { top: 22%; right: -4%; }
.chip--session { bottom: 20%; left: -6%; }

.chip__bar {
  margin-top: 0.7rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(246, 241, 233, 0.2);
  overflow: hidden;
}
.chip__bar i {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: var(--blush);
}

@media (max-width: 52rem) {
  .device { width: min(16rem, 66%); }
  .chip { width: 12.5rem; padding: 0.8rem 0.9rem; }
  .chip p { font-size: 0.74rem; }
  .chip--coach { right: -2%; }
  .chip--session { left: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold the rig at a fixed, flattering angle rather than tracking anything. */
  .stage__inner { transform: rotateX(-2deg) rotateY(4deg) !important; }
}

/* The device hero. Unlike .hero__mark this stays a real column on small
   screens rather than dropping behind the copy, because it is the product
   shot, not a watermark. */
.hero__stage {
  position: relative;
  padding-block: 1.5rem;
  padding-inline: 1.25rem;
}

@media (max-width: 62rem) {
  .hero__stage { margin-top: 2.5rem; padding-inline: 2rem; }
}
@media (max-width: 30rem) {
  .hero__stage { padding-inline: 1rem; }
  .chip { width: 11rem; }
  .chip--coach { right: 0; top: 16%; }
  .chip--session { left: 0; bottom: 14%; }
}

/* --------------------------------------------------------------------------
   18. Reel: the clip strip on the watch page
   -------------------------------------------------------------------------- */

.reel {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  /* the strip runs to the viewport edge, so the gutter comes back as padding */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.reel::-webkit-scrollbar { height: 3px; }
.reel::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.clip {
  flex: 0 0 min(23rem, 80vw);
  scroll-snap-align: start;
  text-decoration: none;
  display: grid;
  gap: 0.85rem;
}
.clip__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.clip__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out-quart), filter 500ms var(--ease-out-quart);
}
.clip:hover .clip__media img,
.clip:focus-visible .clip__media img { transform: scale(1.09); filter: brightness(1.08); }

.clip__play {
  position: absolute;
  inset: auto auto 0.85rem 0.85rem;
  width: 2.9rem; height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--blush) 92%, transparent);
  color: var(--espresso);
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out-expo), opacity var(--dur) var(--ease-out-quart);
}
.clip:hover .clip__play,
.clip:focus-visible .clip__play { transform: none; opacity: 1; }

.clip__dur {
  position: absolute;
  inset: 0.85rem 0.85rem auto auto;
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.1em;
  padding: 0.4rem 0.55rem;
  border-radius: 2px;
  background: rgba(5, 8, 7, 0.72);
  color: var(--cream);
}
.clip__series {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.clip__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   19. Thread: the communication review demo

   A real conversation with Drew's read hidden behind each message. Buttons,
   not divs, so it is keyboard operable and announces its own state.
   -------------------------------------------------------------------------- */

.thread { display: grid; gap: 0.6rem; max-width: 32rem; }

.msg { display: grid; gap: 0.5rem; justify-items: start; }
.msg--you { justify-items: end; }

.msg__btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 1.15rem;
  padding: 0.8rem 1.05rem;
  max-width: 82%;
  font-size: var(--fs-small);
  line-height: 1.5;
  position: relative;
  transition: border-color var(--dur) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.msg--them .msg__btn {
  background: var(--panel);
  color: var(--ink);
  border-bottom-left-radius: 0.35rem;
}
.msg--you .msg__btn {
  background: color-mix(in oklab, var(--blush) 88%, transparent);
  color: var(--espresso);
  border-bottom-right-radius: 0.35rem;
}
.msg__btn:hover { border-color: var(--accent); }
.msg__btn[aria-expanded="true"] { border-color: var(--accent); }

/* The tell that there is something underneath, without a tooltip icon. */
.msg__btn::after {
  content: "";
  position: absolute;
  right: 0.5rem; bottom: 0.45rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease-out-quart);
}
.msg--you .msg__btn::after { background: var(--wine); }
.msg__btn[aria-expanded="true"]::after { opacity: 1; }

.msg__note {
  justify-self: stretch;
  border-left: 0;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  margin-top: 0.35rem;
}
.msg__note p {
  margin: 0;
  font: 400 var(--fs-small)/1.6 var(--font-note);
  color: var(--ink-mute);
}
.msg__note strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin-bottom: 0.5rem;
}

.thread__hint {
  font: 400 var(--fs-label)/1.6 var(--font-note);
  color: var(--ink-mute);
  margin-top: 1.25rem;
}

/* The portrait slot, dressed while it waits. A brand texture behind the mark
   reads as an intentional holding frame rather than an empty grey box, and a
   real photograph replaces the whole stack without touching the layout. */
.portrait__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
.s-cream .portrait__fill { opacity: 0.2; }
.portrait__mark { position: relative; }

/* The show artwork, presented as a record sleeve rather than a content image. */
.artwork {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.artwork img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.55);
}
.artwork figcaption {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   20. The kiss

   The kiss emoji, rendered to PNG at cursor size. The photographic print off
   Drew's cheek was tried first and read as unsettling blown up under the
   pointer: a real mouth at that scale is too much detail. Interactive elements
   get a slightly larger copy, because replacing the pointer would otherwise
   remove the only cue that something is clickable.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  body { cursor: url("/assets/img/kiss-cursor.png") 15 13, auto; }

  a, button, summary, label, [role="button"], .reel, .msg__btn, input, select, textarea {
    cursor: url("/assets/img/kiss-cursor-on.png") 20 17, pointer;
  }
}

/* Stamped where you click, then it fades. */
.kiss-stamp {
  position: fixed;
  z-index: var(--z-overlay);
  width: 40px;
  margin: -18px 0 0 -20px;
  pointer-events: none;
  opacity: 0;
  animation: stamp 1100ms var(--ease-out-quart) forwards;
}
@keyframes stamp {
  0%   { opacity: 0;    transform: scale(0.55) rotate(var(--spin, -8deg)); }
  14%  { opacity: 0.92; transform: scale(1.06) rotate(var(--spin, -8deg)); }
  30%  { opacity: 0.88; transform: scale(1)    rotate(var(--spin, -8deg)); }
  100% { opacity: 0;    transform: scale(1.14) rotate(var(--spin, -8deg)); }
}

/* --------------------------------------------------------------------------
   21. The mark, alive

   The monogram is two R forms interlocked, so the pointer pulls them apart and
   lets them fall back together. It is the brand's own idea about two people,
   made touchable rather than decorative.
   -------------------------------------------------------------------------- */

.mark--live::before {
  transform: translate3d(calc(var(--pull-x, 0) * -9px), calc(var(--pull-y, 0) * -7px), 0);
}
.mark--live::after {
  transform: translate3d(calc(var(--pull-x, 0) * 16px), calc(var(--pull-y, 0) * 12px), 0);
}
.mark--live::before,
.mark--live::after {
  transition: transform 900ms var(--ease-out-expo);
}
.mark--live.is-pulling::before,
.mark--live.is-pulling::after {
  transition: transform 120ms linear;
}

/* --------------------------------------------------------------------------
   22. Magnetic buttons
   -------------------------------------------------------------------------- */

.btn { --mag-x: 0px; --mag-y: 0px; }
.btn--mag {
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: background-color var(--dur) var(--ease-out-quart),
              color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart),
              transform 600ms var(--ease-out-expo);
}
.btn--mag.is-mag { transition: transform 90ms linear; }

/* --------------------------------------------------------------------------
   23. Scene: a framed still on the 3D rig
   -------------------------------------------------------------------------- */

.scene {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.75);
}
.scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,7,0.34) 0%, transparent 34%, rgba(5,8,7,0.5) 100%);
}

.onair {
  position: absolute;
  left: 1rem; top: 1rem;
  z-index: var(--z-rise);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  background: rgba(5, 8, 7, 0.72);
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.onair i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blush);
  animation: pulse 2.4s var(--ease-out-quart) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

@media (prefers-reduced-motion: reduce) {
  .kiss-stamp { animation-duration: 0.01ms; }
  .mark--live::before, .mark--live::after { transform: none !important; }
  .btn--mag { transform: none !important; }
  .onair i { animation: none; }
}

/* The episode chip on the studio scene. Hangs off the frame on wide screens;
   tucks inside once the split collapses, where hanging out would push the
   document wider than the viewport. */
.chip--episode { top: auto; bottom: -8%; right: -5%; }
@media (max-width: 56rem) {
  .chip--episode { right: 0; bottom: -5%; }
}
@media (max-width: 30rem) {
  .chip--episode { right: 0; left: auto; bottom: -4%; width: 12rem; }
}

/* --------------------------------------------------------------------------
   24. Tracklist: the start here episodes

   Was a flat bulleted list with half the row empty. Now full width rows that
   are real links, with the number, series and runtime carrying the detail the
   plain list had no room for.
   -------------------------------------------------------------------------- */

.tracklist { border-top: 1px solid var(--rule); }

.track { border-bottom: 1px solid var(--rule); }

.track__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(0.75rem, 2vw, 1.25rem);
  text-decoration: none;
  isolation: isolate;
  transition: padding-left var(--dur) var(--ease-out-quart);
}
/* the fill sweeps in from the left rather than the whole row flicking colour */
.track__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out-expo);
}
.track__link:hover::before,
.track__link:focus-visible::before { transform: scaleX(1); }
.track__link:hover,
.track__link:focus-visible { padding-left: clamp(1.1rem, 2.6vw, 1.9rem); }

.track__n {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease-out-quart);
}
.track__link:hover .track__n { color: var(--label-ink); }

.track__body { display: grid; gap: 0.3rem; min-width: 0; }
.track__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.track__series {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.track__dur {
  font: 400 var(--fs-small)/1 var(--font-note);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.track__go {
  font-size: 1.1rem;
  color: var(--label-ink);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur) var(--ease-out-quart),
              transform var(--dur) var(--ease-out-expo);
}
.track__link:hover .track__go,
.track__link:focus-visible .track__go { opacity: 1; transform: none; }

@media (max-width: 40rem) {
  .track__link { grid-template-columns: auto minmax(0, 1fr); }
  .track__go { display: none; }
}

/* --------------------------------------------------------------------------
   25. Making the flat cream sections answer back
   -------------------------------------------------------------------------- */

/* Is / is not. Each line reacts, and the marker is what moves, so the eye
   follows the claim rather than a colour wash. */
.contrast-pair > div { transition: background-color var(--dur) var(--ease-out-quart); }
.contrast-pair > div:hover { background: var(--panel); }

.contrast-pair li {
  transition: transform var(--dur) var(--ease-out-expo),
              color var(--dur) var(--ease-out-quart);
}
.contrast-pair li::before {
  transition: transform var(--dur) var(--ease-out-expo);
  display: inline-block;
}
.contrast-pair li:hover { transform: translateX(5px); color: var(--ink); }
.contrast-pair li:hover::before { transform: scale(1.45); }

/* Pricing. The cards sit flush in a 1px grid, so lifting them would tear the
   seams. A rule that draws across the top plus a growing price does the work. */
.plan { position: relative; transition: background-color var(--dur) var(--ease-out-quart); }
.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--label-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease-out-expo);
}
.plan:hover { background: var(--panel); }
.plan:hover::before { transform: scaleX(1); }
.plan--featured::before { transform: scaleX(1); }

.plan__price {
  display: block;
  transform-origin: left bottom;
  transition: transform 460ms var(--ease-out-expo);
}
.plan:hover .plan__price { transform: scale(1.045); }

/* --------------------------------------------------------------------------
   26. Press states

   Everything clickable should give under the finger. Fast down, eased back.
   -------------------------------------------------------------------------- */

.btn:active { transform: scale(0.972) translateY(1px); transition-duration: 60ms; }
.btn--mag:active { transform: translate3d(var(--mag-x), var(--mag-y), 0) scale(0.972); }

.channel, .clip, .offer, .track__link, .msg__btn, .faq summary {
  -webkit-tap-highlight-color: transparent;
}
.channel:active, .clip:active { transform: scale(0.988); transition-duration: 70ms; }
.msg__btn:active { transform: scale(0.985); transition-duration: 70ms; }
.track__link:active { transform: scale(0.995); transition-duration: 70ms; }
.faq summary:active { transform: translateX(2px); transition-duration: 70ms; }

.channel, .clip { transition: background-color var(--dur) var(--ease-out-quart),
                              transform 260ms var(--ease-out-expo); }

@media (prefers-reduced-motion: reduce) {
  .track__link::before, .plan::before { transform: scaleX(1); }
  .track__go { opacity: 1; transform: none; }
  .contrast-pair li:hover, .btn:active, .channel:active, .clip:active,
  .msg__btn:active, .track__link:active { transform: none !important; }
}

/* Four cards in an auto-fit grid fit three across and leave the fourth stranded
   beside an empty cell. Lay them out explicitly so every breakpoint is a full
   row: four, then two, then one. Never an orphan. */
.channels--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 70rem) { .channels--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .channels--four { grid-template-columns: 1fr; } }

/* Two sections on the same surface read as one continuous band, so their shared
   boundary was getting two full gaps stacked with no colour change to justify
   it. One gap between them, not two. */
/* Scoped to .section deliberately. Unscoped, this also matched the marquee,
   which sits directly after the s-green hero: it zeroed the strip's top
   padding while leaving its bottom padding intact, so every item in it sat
   high in the bar. A rule about the gap between sections should only ever
   touch sections. */
.section.s-cream + .section.s-cream,
.section.s-green + .section.s-green,
.section.s-app + .section.s-app,
.section.s-wine + .section.s-wine,
.section.s-deep + .section.s-deep,
.section.s-sand + .section.s-sand { padding-top: 0; }

/* Session length carries the slot on its own now that the price is not public.
   Without the price above it the <small> was left orphaned at label size. */
.offer__price:has(> small:only-child) { font-size: var(--fs-small); font-weight: 400; }
.offer__price:has(> small:only-child) small {
  margin-top: 0;
  font-size: var(--fs-label);
}

/* --------------------------------------------------------------------------
   27. The ladder

   The conversion path, and the most important block on the site, so it gets
   the room. Three full width bands rather than three narrow columns: the type
   can be large, nothing has to fit in a third of the shell, and a stack of
   rungs reads as a ladder far better than a row of cards does.

   The type grows as you descend, because the commitment does.
   -------------------------------------------------------------------------- */

.ladderwrap { overflow: hidden; }
.ladder__title { font-size: var(--fs-h1); }

.ladder {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.rung { border-bottom: 1px solid var(--rule); }

.rung__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(0.75rem, 2.5vw, 1.75rem);
  text-decoration: none;
  isolation: isolate;
  transition: padding-left 460ms var(--ease-out-expo);
}
/* the band fills from the left as you climb into it */
.rung__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 560ms var(--ease-out-expo);
}
.rung__link:hover::before,
.rung__link:focus-visible::before { transform: scaleX(1); }
.rung__link:hover,
.rung__link:focus-visible { padding-left: clamp(1.25rem, 3.5vw, 2.75rem); }

/* --- the numeral --------------------------------------------------------- */

.rung__step {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--label-ink) 72%, var(--bg));
  min-width: 2.5ch;
  transition: color 460ms var(--ease-out-quart),
              transform 560ms var(--ease-out-expo);
}
.rung__link:hover .rung__step,
.rung__link:focus-visible .rung__step {
  color: var(--label-ink);
  transform: translateY(-4px);
}

/* --- the middle ---------------------------------------------------------- */

.rung__main { display: grid; gap: 0.5rem; min-width: 0; }

.rung__tier {
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
}

.rung__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.rung__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 56ch;
}

/* --- the call to action -------------------------------------------------- */

.rung__go {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-small);
  color: var(--ink);
  white-space: nowrap;
}
.rung__arrow {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  font-size: 1.1rem;
  transition: background-color var(--dur) var(--ease-out-quart),
              color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart),
              transform 460ms var(--ease-out-expo);
}
.rung__link:hover .rung__arrow,
.rung__link:focus-visible .rung__arrow {
  background: var(--label-ink);
  border-color: var(--label-ink);
  color: var(--green);
  transform: translateX(5px);
}

/* --- the rung people are meant to end up on ------------------------------ */

.rung--top .rung__link {
  padding-block: clamp(2.25rem, 5vw, 4rem);
  background: var(--blush);
  --ink: var(--espresso);
  --ink-mute: color-mix(in oklab, var(--espresso) 90%, transparent);
  --label-ink: var(--wine);
  --rule: color-mix(in oklab, var(--espresso) 26%, transparent);
}
.rung--top .rung__link::before { background: var(--cream); }
.rung--top .rung__step { color: color-mix(in oklab, var(--label-ink) 80%, var(--blush)); }
.rung--top .rung__name { font-size: var(--fs-h1); }
.rung--top .rung__link:hover .rung__arrow,
.rung--top .rung__link:focus-visible .rung__arrow { color: var(--cream); }

@media (max-width: 62rem) {
  .rung__link { grid-template-columns: auto minmax(0, 1fr); row-gap: 1.25rem; }
  .rung__go { grid-column: 2; justify-content: flex-start; }
  .rung--top .rung__name { font-size: var(--fs-h2); }
}
@media (max-width: 34rem) {
  .rung__link { grid-template-columns: 1fr; }
  .rung__go { grid-column: 1; }
  .rung__step { font-size: 2rem; }
}

.rung__link:active { transform: scale(0.995); transition-duration: 70ms; }

@media (prefers-reduced-motion: reduce) {
  .rung__link::before { transform: scaleX(1); }
  .rung__step { opacity: 1; transform: none !important; }
  .rung__link, .rung__link:active { transform: none !important; }
}

/* --------------------------------------------------------------------------
   28. Phone

   Found by measuring rather than looking: tap targets under the 44px floor and
   text under 12px. The worst of it was the marquee, where the links were 15px
   tall AND moving, with no hover on touch to pause them. An unhittable moving
   target is not a small problem.
   -------------------------------------------------------------------------- */

/* Every button clears the touch floor. */
.btn { min-height: 44px; }

/* The brand lockup in the nav is a link, so it needs a real target. */
.nav__brand { display: block; padding-block: 0.4rem; min-height: 44px; }

/* The wordmark's micro labels are set as a fraction of the lockup, which put
   them at 5.8px and 7px on a phone. Floor them at something readable. */
.lockup__the { font-size: max(0.6875rem, 0.34em); }
.lockup__tag { font-size: max(0.625rem, 0.24em); }
.nav__brand .lockup__the { font-size: max(0.625rem, 0.42em); }

/* The floating annotation chips carry real copy, so they do not get to sit
   under 12px on the device where they are hardest to read. */
.chip__label { font-size: 0.75rem; }
.chip p { font-size: 0.8rem; }

@media (max-width: 52rem) {
  .chip p { font-size: 0.8rem; }
}

/* Footer links: keep the visual rhythm, grow the touch area into the gap. */
@media (hover: none) and (pointer: coarse) {
  .footer__col li { margin-bottom: 0; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- the marquee on touch ------------------------------------------------ */

@media (hover: none) {
  /* No hover means no pause, so it stops being an animation and becomes a
     strip you swipe. The duplicate group exists only to make the loop
     seamless, so it goes. */
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; width: max-content; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__item { padding-block: 1rem; }
}

/* --------------------------------------------------------------------------
   29. Phone layout

   Measured at 390px: section headings sat at the 20px gutter but card content
   sat at 45 to 49px, because every card grid adds its own padding on top of
   the shell's. On a wide screen that reads as a card. On a phone it reads as
   text that will not line up, and it costs a tenth of the usable width.

   So on a phone the card grids bleed to the screen edges and their own padding
   becomes the gutter. Everything then starts on the same vertical line.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .pillars,
  .offers,
  .channels,
  .plans,
  .contrast-pair,
  .ladder,
  .tracklist {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
  }

  .pillar,
  .offer,
  .channel,
  .plan,
  .contrast-pair > div,
  .rung__link,
  .track__link {
    padding-inline: var(--gutter);
  }

  /* the hover indent would push text past the gutter it now defines */
  .track__link:hover,
  .track__link:focus-visible,
  .rung__link:hover,
  .rung__link:focus-visible { padding-left: var(--gutter); }

  /* The tracklist number column pushed every title to 52px. On a phone that
     column is not worth a third of the row, so the number goes above. */
  .track__link { grid-template-columns: 1fr; gap: 0.35rem; }
  .track__n { order: -1; }

  /* a centred heading above left aligned rungs is the jar you notice first */
  .ladderwrap .head { text-align: left !important; max-width: none !important; }
  .ladderwrap .head .tag { justify-content: flex-start !important; }
  .ladderwrap .head .lead { margin-inline: 0 !important; }
}

/* The hero monogram is a bleed on desktop. On a phone there is no room for it
   to bleed into, so it clipped to a fragment at the right edge and read as a
   rendering fault rather than a watermark. */
@media (max-width: 62rem) {
  .hero__mark { display: none; }
}

/* --------------------------------------------------------------------------
   30. The stacked wordmark

   Stacked, REALISTIC and ROMANTIC do not end on the same vertical, because
   REALISTIC is 2.67% narrower. Measured at 200px: REALISTIC 1172.08, ROMANTIC
   1203.33.

   The gap is made up in tracking rather than with scaleX. Stretching a didone
   horizontally thickens its stems while leaving the hairlines alone, which is
   exactly the contrast the typeface is built on. Tracking leaves every
   letterform untouched.

   Letter-spacing also adds a gap after the final glyph, so each word pulls
   that back with a matching negative margin. Without it the two right edges
   would still sit apart by the width of their own trailing space.
   -------------------------------------------------------------------------- */

.lockup__a,
.lockup__b { display: inline; }

.footer__brand .lockup__a,
.footer__brand .lockup__b { display: block; }

.footer__brand .lockup__a { letter-spacing: 0.0395em; margin-right: -0.0395em; }
.footer__brand .lockup__b { letter-spacing: 0.02em;   margin-right: -0.02em; }

.nav__brand .lockup__a,
.nav__brand .lockup__b { display: block; }
.nav__brand .lockup__a { letter-spacing: 0.0395em; margin-right: -0.0395em; }
.nav__brand .lockup__b { letter-spacing: 0.02em;   margin-right: -0.02em; }

/* --------------------------------------------------------------------------
   31. Testimonials

   Three up. The one that came from a video carries a dropdown rather than an
   embedded player: the file only downloads when somebody opens it, and a
   closed <details> keeps the three cards the same height.
   -------------------------------------------------------------------------- */

.says {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.say {
  background: var(--bg);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.say:hover { background: var(--panel); }

.say__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.say__tag svg { flex: none; }

.say__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.say__body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-mute);
}

.say__by {
  margin: 0;
  padding-top: 0.25rem;
  font: 400 var(--fs-small)/1.4 var(--font-note);
  color: var(--ink-mute);
}

/* --- the video dropdown ---------------------------------------------------

   The clip does not live inside its card. A portrait video is tall, and a
   three column grid shares row height, so an inline player would have
   stretched the other two cards by five hundred empty pixels. Instead the
   panel is a full width row of the same grid: press the button, the video
   drops down underneath all three, and the cards do not move. */

.say__toggle {
  display: none;
  margin-top: 0.25rem;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 500 var(--fs-small)/1 var(--font-body);
  color: var(--ink);
  transition: color var(--dur) var(--ease-out-quart);
}
html.js .say__toggle { display: inline-flex; }
.say__toggle:hover { color: var(--label-ink); }
.say__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.say__toggle i {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--label-ink);
  transition: background-color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart),
              color var(--dur) var(--ease-out-quart),
              transform var(--dur) var(--ease-out-expo);
}
.say__toggle:hover i,
.say__toggle[aria-expanded="true"] i {
  background: var(--label-ink);
  border-color: var(--label-ink);
  color: var(--bg);
}
.say__toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* Both clips live in the top row, so the panel belongs between the rows,
   directly under the buttons that open it, rather than below all four. */
.say--video { order: 0; }
.say--text  { order: 2; }
.say__panel {
  order: 1;
  grid-column: 1 / -1;
  background: var(--bg);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  display: grid;
  justify-items: center;
  animation: say-drop var(--dur-slow) var(--ease-out-expo) both;
}
.say__panel[hidden] { display: none; }

.say__panel video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 32rem);
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.65);
}

@keyframes say-drop {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .say__toggle[aria-expanded="true"] i { transform: none; }
  .say__panel { animation: none; }
}


@media (max-width: 44rem) {
  .says { grid-template-columns: 1fr; }

  /* Stacked, every panel already follows its own card in the source, so
     dropping the desktop reordering puts each video under the button that
     opened it rather than at the bottom of all four. */
  .say--video, .say--text, .say__panel { order: 0; }
}

/* --------------------------------------------------------------------------
   32. Press

   The New York Post quote, shown as the clipping it came from. Cream paper on
   the deeper beige of .s-sand: same material family as the page, one step
   lighter, so the edge is carried by the lift of the shadow rather than by a
   colour change. The card keeps fixed cream and espresso rather than surface
   tokens, because it is a physical object on the page, not a panel of it.
   -------------------------------------------------------------------------- */

.press__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: 400 var(--fs-label)/1 var(--font-note);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.press__eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* The publication set in the brand's own display face. Reproducing the real
   masthead would need a licence we do not have, and this reads as attribution
   rather than imitation. */
.pubmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
}

.press__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font: 500 var(--fs-small)/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 35%, transparent);
  transition: color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
}
.press__link:hover { color: var(--label-ink); border-color: var(--label-ink); }
.press__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.press__link span { transition: transform var(--dur) var(--ease-out-expo); }
.press__link:hover span { transform: translateX(4px); }

.clip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.clip__paper {
  background: var(--cream);
  color: var(--espresso);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--sand) 44%, transparent);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--espresso) 10%, transparent),
    0 18px 38px -22px color-mix(in oklab, var(--espresso) 40%, transparent);
  /* Lift only, never tilt. The card sits square with the column it shares the
     row with, and the reveal animation owns transform on this element, so the
     hover state is carried by the shadow instead of fighting it. */
  transition: box-shadow var(--dur-slow) var(--ease-out-quart);
}
.clip:hover .clip__paper {
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--espresso) 12%, transparent),
    0 26px 52px -24px color-mix(in oklab, var(--espresso) 48%, transparent);
}

.clip__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--espresso);
}
.clip__masthead .pubmark { font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
.clip__masthead em {
  font: 400 10px/1 var(--font-note);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}

.clip__kicker {
  margin: 0.9rem 0 0.35rem;
  font: 700 10px/1 var(--font-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wine);
}
.clip__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.clip__byline {
  margin: 0.7rem 0 0;
  font: 400 11px/1.5 var(--font-note);
  opacity: 0.8;
}

.clip__q {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.17;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.clip__by {
  margin: 0 0 1.4rem;
  font: 400 var(--fs-small)/1.5 var(--font-note);
  color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .press__link:hover span { transform: none; }
}

@media (max-width: 56rem) {
  .clip { grid-template-columns: 1fr; }
  .clip__paper { max-width: 26rem; }
}