/* spencerzvoice.com · page layer. The engine (scrollcraft.css) is untouched;
   everything here is this site's own markup. */

:root {
  --sc-canvas:     #0B0F15;
  --sc-surface:    #141B25;
  --sc-ink:        #F1ECE3;
  --sc-ink-soft:   #A9B2BE;
  --sc-accent:     #F0B13C;
  --sc-accent-ink: #1C1405;
  --sc-font-display: "Space Grotesk", system-ui, sans-serif;
  --sc-font-text:    "Work Sans", system-ui, sans-serif;
  --sc-font-mono:    "Work Sans", system-ui, sans-serif; /* two families, no costume mono */
  --sc-shadow-color: 216 45% 3%;

  --bar-h: 64px;
  --vu: 0;          /* the voice level, 0..1, written by site.js */
  --mx: 0; --my: 0; /* pointer, -1..1, hero only */
  --lamp: #FFB24A;
}

body { font-size: var(--sc-t-base); }
h1, h2, h3 { font-weight: 600; }
.anchor-alias { position: absolute; }

.skip {
  position: fixed; left: var(--sc-4); top: -4rem; z-index: 100;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-sm); text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--sc-4); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  min-height: 44px; padding: 0 var(--sc-5);
  border-radius: var(--sc-r-pill); border: 1px solid transparent;
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.28); }
.btn--ghost { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); }
.btn--line { color: var(--sc-ink); border-color: var(--sc-hairline-strong); background: transparent; }
.btn--big { min-height: 56px; padding: 0 var(--sc-6); font-size: var(--sc-t-base); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
  .btn--ghost:hover, .btn--line:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.link { color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--sc-accent); } }

/* ---------------------------------------------------------------- transport
   The chrome IS the player. Fixed, slim, and the one place the level shows. */
.transport {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 0 clamp(var(--sc-4), 2.4vw, var(--sc-6));
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--sc-hairline);
}
.transport__mark {
  font: 600 1.05rem/1 var(--sc-font-display); letter-spacing: -0.01em;
  text-decoration: none; color: var(--sc-ink); white-space: nowrap;
}
.transport__deck { display: flex; align-items: center; gap: var(--sc-3); min-width: 0; }
.tp-play, .listen__play {
  display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  transition: transform 140ms var(--sc-ease-out);
}
.tp-play { width: 40px; height: 40px; }
.tp-play svg, .listen__play svg { width: 46%; height: 46%; fill: currentColor; }
.tp-play:active, .listen__play:active { transform: scale(0.94); }
.i-pause { display: none; }
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: block; }
.tp-info { display: grid; line-height: 1.2; min-width: 0; }
.tp-name { font-size: var(--sc-t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-time { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.tp-meter { display: flex; align-items: flex-end; gap: 3px; height: 20px; width: 31px; flex: none; }
.tp-meter i {
  flex: 1; height: 100%; border-radius: 1px; background: var(--sc-accent);
  transform-origin: 50% 100%;
  transform: scaleY(calc(0.12 + var(--vu) * var(--k, 1) * 0.88));
  opacity: calc(0.35 + var(--vu) * 0.65);
}
.tp-meter i:nth-child(1) { --k: 0.7; } .tp-meter i:nth-child(2) { --k: 1; } .tp-meter i:nth-child(3) { --k: 0.85; }
.tp-meter i:nth-child(4) { --k: 0.6; } .tp-meter i:nth-child(5) { --k: 0.45; }
.tp-swap {
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill); padding: 6px 12px; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .tp-swap:hover { color: var(--sc-ink); border-color: var(--sc-hairline-strong); } }

.transport__chapters { display: flex; gap: var(--sc-1); margin-left: auto; }
.transport__chapters a {
  position: relative; padding: 10px 10px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.transport__chapters a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 1px;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 240ms var(--sc-ease-out);
}
.transport__chapters a[aria-current="true"] { color: var(--sc-ink); }
.transport__chapters a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .transport__chapters a:hover { color: var(--sc-ink); } }
.transport__menu { display: none; }
.transport__book { flex: none; }

/* language switcher (EN · PT · ES), written by build.py: far right of the bar.
   Where the bar collapses to the Sections menu (<=1180px) it moves into the menu panel,
   top right, so it never squeezes the player or overflows a phone screen. */
.lang { display: flex; align-items: center; flex: none; margin-left: calc(var(--sc-3) * -1); }
.lang a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px;
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.06em; color: var(--sc-ink-soft); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.lang a + a::before { content: "·"; content: "·" / ""; margin-right: 8px; color: var(--sc-ink-soft); opacity: 0.6; }
.lang a[aria-current="true"] { color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--sc-ink); } }

@media (max-width: 1440px) {
  .tp-swap { display: none; }
}
@media (max-width: 1300px) {
  .transport { gap: var(--sc-4); }
}
/* The Sections menu takes over at 1180px (was 900px) to leave room for the language switcher. */
@media (max-width: 1180px) {
  .transport { gap: var(--sc-3); }
  .transport__chapters {
    position: fixed; top: var(--bar-h); left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: var(--sc-2) var(--sc-4) var(--sc-4);
    background: color-mix(in oklab, var(--sc-canvas) 96%, transparent);
    border-bottom: 1px solid var(--sc-hairline);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s 180ms;
  }
  .transport.is-open .transport__chapters { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .transport__chapters a { padding: 12px 4px; font-size: var(--sc-t-base); }
  .transport__chapters a::after { left: 4px; right: auto; width: 24px; }
  .transport__menu {
    display: inline-flex; align-items: center; min-height: 40px; margin-left: auto;
    background: none; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
    padding: 0 14px; font-size: var(--sc-t-xs); cursor: pointer; color: var(--sc-ink);
  }
  .lang {
    position: fixed; top: var(--bar-h); right: var(--sc-4); margin: 0; padding-top: var(--sc-2);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s 180ms;
  }
  .transport.is-open .lang { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .lang a { min-height: 48px; padding: 0 6px; font-size: var(--sc-t-sm); }
}
@media (max-width: 900px) {
  :root { --bar-h: 58px; }
}
@media (max-width: 560px) {
  .transport__mark { display: none; }
  .tp-meter { display: none; }
  .transport__book { padding: 0 var(--sc-4); }
  .tp-name { max-width: 9.5rem; }
}
@media (max-width: 380px) {
  .tp-time { display: none; }
}

/* -------------------------------------------------------------------- booth
   Layer contract (front to back): near foreground, mic + pop filter,
   headline, scrim, dimmer, lamp haze, far room. Each plane has its own
   scroll rate (off --sc-p) and pointer rate (off --mx/--my). */
.booth__stage { background: #040507; }
.booth__plane { position: absolute; inset: 0; pointer-events: none; }
.booth__plane img { position: absolute; max-width: none; }
.booth__far img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.booth__far {
  transform:
    translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px + var(--sc-p, 0) * -2vh), 0)
    scale(calc(1.04 + var(--sc-p, 0) * 0.07));
  transform-origin: 62% 45%;
}
.booth__mic { z-index: calc(var(--sc-z-copy) + 1); }
.booth__mic img {
  height: 100vh; height: 100svh; width: auto; right: -3vw; bottom: -13vh;
  transform:
    translate3d(calc(var(--mx) * -22px), calc(var(--my) * -12px + var(--sc-p, 0) * -6vh), 0)
    scale(calc(1 + var(--sc-p, 0) * 0.16));
  transform-origin: 50% 40%;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.45));
}
/* The lamp: practical light behind the mic. The voice drives it. */
.booth__lamp, .listen__lamp {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(38vmax 30vmax at var(--lamp-x, 67%) var(--lamp-y, 22%), color-mix(in oklab, var(--lamp) 58%, transparent), transparent 70%),
    radial-gradient(70vmax 50vmax at var(--lamp-x, 67%) var(--lamp-y, 22%), color-mix(in oklab, var(--lamp) 18%, transparent), transparent 75%);
}
.booth__lamp { opacity: calc((0.30 + var(--vu) * 0.75) * (1 - var(--sc-p, 0) * 0.85)); }
.booth__dim { position: absolute; inset: 0; background: #040507; opacity: calc(var(--sc-p, 0) * 0.82); pointer-events: none; }
/* The exit: the whole booth, mic and foreground included, settles to the
   listen stage's exact ground before it slides away, so there is no seam. */
.booth__fade {
  position: absolute; inset: 0; z-index: calc(var(--sc-z-copy) + 3); pointer-events: none;
  background: #040507; opacity: clamp(0, (var(--sc-p, 0) - 0.5) / 0.42, 1);
}
.booth__scrim { z-index: 2; }
.booth__copy {
  top: auto; bottom: clamp(3rem, 11vh, 8rem); max-width: min(44rem, 62vw);
}
.booth__title { font-size: min(var(--sc-t-4xl), 10.5vh); max-width: 12ch; text-shadow: 0 2px 30px rgb(4 6 9 / 0.55); }
.booth__sub { margin: var(--sc-5) 0 0; max-width: 46ch; color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-canvas)); font-size: var(--sc-t-lg); line-height: 1.45; text-wrap: pretty; }
.booth__langs { margin: var(--sc-3) 0 0; max-width: 46ch; color: var(--sc-accent); font-size: var(--sc-t-sm); font-weight: 500; line-height: 1.45; text-shadow: 0 1px 14px rgb(4 6 9 / 0.6); }
.booth__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

@media (max-width: 760px) {
  .booth__copy { max-width: none; bottom: clamp(1.5rem, 6vh, 3rem); }
  .booth__title { font-size: min(var(--sc-t-2xl), 7.2vh); max-width: 14ch; }
  .booth__sub { font-size: var(--sc-t-base); }
  .booth__langs { margin-top: var(--sc-2); font-size: var(--sc-t-xs); }
  .booth__mic img { height: 70svh; right: -8vw; bottom: 28svh; }
    .booth__scrim { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 34%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 58%, transparent 76%); }
  .booth__lamp, .listen__lamp { --lamp-x: 72%; --lamp-y: 22%; }
}

/* ------------------------------------------------------------------- listen */
.listen__stage { background: #040507; display: grid; place-items: center; }
.listen__room {
  position: absolute; inset: 0;
  background: url("assets/booth-far.webp") 60% 50% / cover no-repeat, #040507;
  opacity: calc(0.06 + var(--vu) * 0.22);
  filter: saturate(0.8);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
}
.listen__lamp { opacity: calc(var(--vu) * 0.95); }
.listen__hush {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0;
  font: 500 var(--sc-t-xl)/1.2 var(--sc-font-display); letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); text-align: center; white-space: nowrap;
}
.listen__wave {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%;
  height: clamp(90px, 22vh, 220px); translate: 0 -50%;
  --draw: clamp(0, (var(--sc-p, 0) - 0.25) / 0.27, 1);
  clip-path: inset(0 calc((1 - var(--draw)) * 100%) 0 0);
}
.wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave rect { rx: 1.5; }
.wave--base { fill: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.wave--played { fill: var(--sc-accent); clip-path: inset(0 calc((1 - var(--played, 0)) * 100%) 0 0); }
.listen__deck {
  position: absolute; z-index: 3;
  inset: calc(var(--bar-h) + 6vh) var(--sc-gutter) clamp(2rem, 8vh, 5rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sc-5);
  pointer-events: none;
}
.listen__deck > * { pointer-events: auto; }
.listen__title { max-width: 16ch; }
.listen__bottom { display: grid; gap: var(--sc-4); }
.listen__controls { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.listen__play { width: 72px; height: 72px; box-shadow: var(--sc-e2), 0 0 calc(var(--vu) * 60px) color-mix(in oklab, var(--lamp) 40%, transparent); }
.listen__reels { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.listen__reels button {
  min-height: 44px; padding: 0 var(--sc-5); border-radius: var(--sc-r-pill); cursor: pointer;
  background: transparent; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm); font-weight: 500;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.listen__reels button .t { font-variant-numeric: tabular-nums; opacity: 0.7; margin-left: 6px; }
.listen__reels button[aria-checked="true"] { color: var(--sc-ink); border-color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
@media (hover: hover) and (pointer: fine) { .listen__reels button:hover { color: var(--sc-ink); } }
.listen__dl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--sc-5);
  border-radius: var(--sc-r-pill); color: var(--sc-ink-soft); text-decoration: none;
  font-size: var(--sc-t-sm); font-weight: 500;
  transition: color 160ms var(--sc-ease-out);
}
.listen__dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.listen__dl:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .listen__dl:hover { color: var(--sc-accent); } }
.listen__seek { width: 100%; accent-color: var(--sc-accent); height: 24px; margin: 0; background: transparent; }

@media (max-width: 760px) {
  .listen__hush { white-space: normal; width: 80vw; }
  .listen__wave { height: clamp(70px, 16vh, 140px); top: 42%; }
  .listen__title { font-size: var(--sc-t-2xl); }
  .listen__deck { bottom: clamp(1.5rem, 5vh, 3rem); }
  .listen__play { width: 60px; height: 60px; }
}

/* ------------------------------------------------------------------ credits */
.credits { padding-top: clamp(3rem, 6vw, 6rem); }
.credits__title { max-width: 18ch; margin-bottom: var(--sc-7); }
.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.log__row { border-bottom: 1px solid var(--sc-hairline); }
.log__btn {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 6.5rem; gap: var(--sc-4); align-items: baseline;
  padding: var(--sc-4) 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.log__btn--plain { cursor: default; }
.log__watch { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); white-space: nowrap; }
button.log__btn .log__watch::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231C1405' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50% / 14px no-repeat;
  transition: transform 160ms var(--sc-ease-out);
}
button.log__btn .log__name { transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  button.log__btn:hover .log__name { color: var(--sc-accent); }
  button.log__btn:hover .log__watch { color: var(--sc-ink); }
  button.log__btn:hover .log__watch::before { transform: scale(1.08); }
}
button.log__btn:active .log__watch::before { transform: scale(0.94); }
button.log__btn:focus-visible { outline-offset: 0; }
.log__name { font: 500 var(--sc-t-xl)/1.15 var(--sc-font-display); letter-spacing: var(--sc-track-snug); }
.log__what { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.credits__more { margin: var(--sc-6) 0 0; max-width: 60ch; color: var(--sc-ink-soft); }
.marks {
  list-style: none; margin: var(--sc-9) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-7) clamp(var(--sc-6), 5vw, var(--sc-9));
}
.marks img { height: clamp(22px, 2.6vw, 34px); width: auto; opacity: 0.82; }
.marks li:nth-child(3) img { height: clamp(16px, 1.8vw, 24px); }
.marks__you img { height: clamp(28px, 3.2vw, 42px); opacity: 1; }
.marks__you a { display: block; border-radius: var(--sc-r-sm); }
@media (hover: hover) and (pointer: fine) { .marks__you a:hover img { filter: drop-shadow(0 0 0 transparent); transform: translateY(-1px); } }
.marks__you img { transition: transform 160ms var(--sc-ease-out); }
@media (max-width: 760px) {
  .log__btn { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-1) var(--sc-4); }
  .log__what { grid-column: 1; grid-row: 2; }
  .log__watch { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .marks { gap: var(--sc-6) var(--sc-6); }
}

/* -------------------------------------------------------------------- words */
.words { background: var(--sc-canvas); }
.words__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.words__rating { margin: 0; font: 600 clamp(4.5rem, 3rem + 7vw, 9rem)/0.9 var(--sc-font-display); letter-spacing: var(--sc-track-tight); }
.words__of { font-size: 0.32em; color: var(--sc-ink-soft); letter-spacing: 0; }
.words__count { margin: var(--sc-4) 0 var(--sc-3); font-size: var(--sc-t-lg); }
.quote { margin: 0; }
.quote blockquote { margin: 0; text-wrap: pretty; }
.quote figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.quote--lead blockquote { font: 500 var(--sc-t-2xl)/1.12 var(--sc-font-display); letter-spacing: var(--sc-track-snug); }
.quote--lead blockquote::before { content: "\201C"; color: var(--sc-accent); }
.quote--lead blockquote::after { content: "\201D"; color: var(--sc-accent); }
.words__rest { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-7); }
.words__rest .quote:first-child { grid-column: 1 / -1; }
.words__rest blockquote { font-size: var(--sc-t-lg); line-height: 1.45; }
@media (max-width: 900px) {
  .words__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .words__rest { grid-column: 1; grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- about */
.about__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-9); align-items: center; }
.about__frame {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3); background: var(--sc-surface);
}
.about__frame img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; margin-top: -9%; }
.about__photo { margin: 0; }
.about__copy .sc-lede { max-width: 40ch; }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .about__photo { max-width: 26rem; }
}

/* -------------------------------------------------------------------- rates */
.rates__head { margin-bottom: var(--sc-7); }
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: var(--sc-7); align-items: start; }
.desk__tools { display: grid; gap: var(--sc-5); }
.tool {
  background: var(--sc-surface); border-radius: var(--sc-r-md); padding: var(--sc-6);
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.tool__title { margin: 0 0 var(--sc-5); font: 600 var(--sc-t-lg)/1.2 var(--sc-font-display); letter-spacing: var(--sc-track-snug); }
.tool__note { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 36ch; }
.tool-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.tool--flat { display: flex; flex-direction: column; }
.tool--flat .tool__foot { margin-top: auto; padding-top: var(--sc-5); }
.seg { border: 0; margin: 0 0 var(--sc-4); padding: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: var(--sc-2); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.seg > div { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap;
  transition: color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.seg input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg input:not(:checked):hover + span { color: var(--sc-ink); border-color: var(--sc-ink-soft); } }
.tool__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-5); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.price { margin: 0; display: grid; }
.price__n { font: 600 var(--sc-t-2xl)/1 var(--sc-font-display); letter-spacing: var(--sc-track-tight); font-variant-numeric: tabular-nums; color: var(--sc-accent); }
.price__what { margin-top: var(--sc-2); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.rates__fine { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 80ch; }

.invoice {
  position: sticky; top: calc(var(--bar-h) + var(--sc-5));
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); padding: var(--sc-6);
  background: color-mix(in oklab, var(--sc-surface) 60%, var(--sc-canvas));
}
.invoice__title { margin: 0 0 var(--sc-4); font: 600 var(--sc-t-lg)/1.2 var(--sc-font-display); }
.invoice__empty { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.invoice__list { list-style: none; margin: 0; padding: 0; }
.invoice__list li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sc-3); align-items: start; padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.invoice__list .amt { font-variant-numeric: tabular-nums; }
.invoice__list button { background: none; border: 0; color: var(--sc-ink-soft); cursor: pointer; padding: 0 4px; min-width: 28px; min-height: 28px; font-size: 1rem; line-height: 1; border-radius: var(--sc-r-sm); }
@media (hover: hover) and (pointer: fine) { .invoice__list button:hover { color: var(--sc-accent); } }
.invoice__total { display: flex; justify-content: space-between; margin: var(--sc-4) 0 0; font: 600 var(--sc-t-lg)/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.invoice__go { margin-top: var(--sc-5); width: 100%; }
@media (max-width: 980px) {
  .desk { grid-template-columns: 1fr; }
  .invoice { position: static; }
}
@media (max-width: 600px) {
  .tool { padding: var(--sc-5); }
  .tool-pair { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- terms */
.terms__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-8); align-items: start; }
.terms__head { position: sticky; top: calc(var(--bar-h) + var(--sc-6)); }
.terms__head h2 { max-width: 14ch; }
.terms__list details { border-top: 1px solid var(--sc-hairline); }
.terms__list details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.terms__list summary {
  list-style: none; cursor: pointer; padding: var(--sc-5) 0; display: flex; justify-content: space-between; gap: var(--sc-4);
  font: 500 var(--sc-t-lg)/1.25 var(--sc-font-display); letter-spacing: var(--sc-track-snug);
}
.terms__list summary::-webkit-details-marker { display: none; }
.terms__list summary::after { content: "+"; color: var(--sc-accent); font-weight: 400; transition: transform 200ms var(--sc-ease-out); }
.terms__list details[open] summary::after { transform: rotate(45deg); }
.terms__list details p, .terms__list details li { color: var(--sc-ink-soft); max-width: 66ch; font-size: var(--sc-t-sm); line-height: 1.65; }
.terms__list details p { margin: 0 0 var(--sc-4); }
.terms__list details ul { margin: 0 0 var(--sc-4); padding-left: 1.1em; }
.terms__list details li + li { margin-top: var(--sc-2); }
@media (max-width: 860px) {
  .terms__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .terms__head { position: static; }
}

/* --------------------------------------------------------------------- book
   The close: the lights come back up. */
/* The FAQ hands straight into the close: one section gap here, not two stacked. */
.faq.sc-section { padding-bottom: 0; }
.book { position: relative; padding-top: var(--sc-section); overflow: clip; }
.book__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 18% 100%, color-mix(in oklab, var(--lamp) 26%, transparent), transparent 70%),
    radial-gradient(40vmax 30vmax at 82% 0%, color-mix(in oklab, var(--lamp) 10%, transparent), transparent 70%);
  /* Fade the glow in from the section's top edge so it never shows as a hard seam. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--sc-section) * 2));
          mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--sc-section) * 2));
  opacity: calc(0.8 + var(--vu) * 0.4);
}
.book__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.book__lead h2 { max-width: 10ch; }
.book__mail { color: var(--sc-ink-soft); }
.sheet {
  display: grid; gap: var(--sc-4);
  background: color-mix(in oklab, var(--sc-surface) 75%, #17110A); border-radius: var(--sc-r-lg);
  padding: clamp(var(--sc-5), 3vw, var(--sc-7)); box-shadow: var(--sc-e3), var(--sc-edge);
}
.sheet__title { margin: 0; font: 600 var(--sc-t-lg)/1.2 var(--sc-font-display); }
.sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.sheet label { display: grid; gap: 6px; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft); }
.sheet input:not([type="checkbox"]), .sheet select, .sheet textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; font-size: var(--sc-t-base); font-weight: 400; letter-spacing: 0;
  color: var(--sc-ink); background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  transition: border-color 140ms var(--sc-ease-out);
}
.sheet textarea { resize: vertical; min-height: 110px; }
.sheet select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sheet select option { background: var(--sc-surface); }
.sheet :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
.sheet .check { display: flex; align-items: center; gap: var(--sc-3); font-size: var(--sc-t-sm); font-weight: 400; letter-spacing: 0; color: var(--sc-ink); }
.check input { width: 20px; height: 20px; accent-color: var(--sc-accent); }
.check__n { color: var(--sc-ink-soft); }
.sheet__send { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.sheet__gmail { font-size: var(--sc-t-sm); }
.sheet__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot {
  position: relative; display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap;
  margin-top: var(--sc-10); padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
@media (max-width: 860px) {
  .book__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .sheet__row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ reduced motion
   Fewer and gentler: the planes hold still, the lamp holds a steady glow. */
@media (prefers-reduced-motion: reduce) {
  .booth__far, .booth__mic img,   .booth__lamp { opacity: calc(0.3 + var(--vu-steady, 0) * 0.4); }
  .listen__lamp { opacity: calc(var(--vu-steady, 0) * 0.7); }
  .listen__room { opacity: calc(0.06 + var(--vu-steady, 0) * 0.18); }
  .listen__wave { clip-path: none; }
  .booth__dim { opacity: 0; }
}

/* optical sizing per mark: equal heights read unequal */
.marks img[alt="AWS"] { height: clamp(30px, 3.4vw, 44px); }
.marks img[alt="FootJoy"] { height: clamp(26px, 3vw, 40px); }
.marks img[alt="Workday"] { height: clamp(26px, 3vw, 38px); }

/* phone art direction: the mic sits above the copy and dissolves before it,
   so no stand or gooseneck ever crosses the headline */
@media (max-width: 760px) {
  .booth__mic {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 60%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 60%);
  }
  .booth__mic img { height: 66svh; right: -14vw; bottom: 30svh; }
}
@media (max-width: 560px) {
  .tp-time { white-space: nowrap; }
  .tp-name { max-width: 6.5rem; font-size: var(--sc-t-xs); }
  .transport__menu { padding: 0 12px; }
  .transport__book { min-height: 40px; }
  .transport__deck { gap: var(--sc-2); }
}
@media (max-width: 400px) {
  .transport__menu { font-size: 0; width: 40px; padding: 0; justify-content: center; }
  .transport__menu::before { content: ""; width: 16px; height: 10px; border-block: 2px solid currentColor; box-shadow: inset 0 4px 0 -2px transparent; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat; }
}
@media (prefers-reduced-motion: reduce) {
  .listen__hush { top: calc(50% - clamp(90px, 22vh, 220px) / 2 - 2.5rem); }
}

/* --------------------------------------------------------------- spot modal */
.spot {
  width: min(64rem, calc(100vw - 2 * var(--sc-4))); max-height: calc(100svh - 2 * var(--sc-4));
  padding: 0; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e3);
  overflow: auto; overscroll-behavior: contain;
}
.spot[open] { animation: spot-in 260ms var(--sc-ease-out); }
.spot::backdrop { background: rgb(3 4 6 / 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes spot-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spot[open] { animation: none; } }
.spot__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-4) var(--sc-5); }
.spot__client { margin: 0; font: 600 var(--sc-t-lg)/1.2 var(--sc-font-display); letter-spacing: var(--sc-track-snug); }
.spot__close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); background: none; color: var(--sc-ink); cursor: pointer; }
.spot__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .spot__close:hover { border-color: var(--sc-accent); color: var(--sc-accent); } }
.spot__stage { aspect-ratio: 16 / 9; background: #040507; display: grid; place-items: center; }
.spot__stage :is(video, iframe) { width: 100%; height: 100%; border: 0; background: #000; }
.spot__radio { display: grid; place-content: center; justify-items: center; gap: var(--sc-5); width: 100%; height: 100%; padding: var(--sc-6);
  background: radial-gradient(60% 70% at 50% 40%, color-mix(in oklab, var(--lamp) 14%, transparent), transparent 70%), #040507; }
.spot__radio p { margin: 0; font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.spot__radio audio { width: min(32rem, 80vw); }
.spot__title { margin: 0; padding: var(--sc-4) var(--sc-5) 0; font-size: var(--sc-t-base); font-weight: 500; }
.spot__list { list-style: none; margin: 0; padding: var(--sc-3) var(--sc-5) var(--sc-5); display: flex; flex-wrap: wrap; gap: 6px; }
.spot__list:empty { display: none; }
.spot__list button {
  min-height: 40px; padding: 0 14px; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong);
  background: none; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); cursor: pointer; text-align: left;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.spot__list button .d { opacity: 0.7; margin-left: 6px; font-variant-numeric: tabular-nums; }
.spot__list button[aria-current="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .spot__list button:not([aria-current="true"]):hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); } }

/* About: coached by */
.about__copy .coaches { margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.coaches__label { margin: 0 0 var(--sc-3); font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.coaches__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.coaches__list li { font: 500 var(--sc-t-lg)/1.3 var(--sc-font-display); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
.coaches__list li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: var(--sc-5); border-radius: 50%; background: var(--sc-accent); vertical-align: middle; transform: translateY(-2px); }
@media (max-width: 560px) {
  .coaches__list { flex-direction: column; gap: var(--sc-1); }
  .coaches__list li + li::before { display: none; }
}
.coaches__list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); text-underline-offset: 0.22em; transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .coaches__list a:hover { color: var(--sc-accent); } }