/* RichGold Studio — global shell. SOURCE. Hand-edited.
 *
 * Palette is not invented. #F3EAD6 and #040000 are the two colors the client
 * named in her brief; the golds were sampled out of the Q&A cards she publishes
 * on her own Facebook page, where the mark sits at #9A7B4B on a #EFDEC9 ground.
 * Her body copy there is a warm #251504, not the pure black she wrote down, so
 * both exist below: the brief's ink for the brand, the warm ink for reading.
 */

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

:root {
  /* dark plane — the hero and the booking block. The suite's own furniture is
   * black with gold hardware, so the dark is warmed toward brown, never neutral. */
  --ink:        #140B04;
  --ink-deep:   #040000;
  --ink-raised: #1F1208;
  --ink-edge:   #33210F;

  /* light plane — everything you actually read */
  --bone:       #F3EAD6;
  --bone-warm:  #EFDEC9;
  --bone-edge:  #E0CFB6;

  /* gold. Flat, antique, never a gradient and never saturated: her mark is a
   * single flat ink, and a gradient at small sizes just reads as a print fault. */
  --gold:       #9A7B4B;
  /* Buttons only. Cream on #9A7B4B measures 3.72:1 against the lightest pixel
   * underneath and WCAG AA wants 4.5 — render-check caught it on "Send it over".
   * #8A6C3E measures 4.59 with the same cream and is still unmistakably her
   * gold; dark text on the lighter gold only reaches 4.47, so it misses too. */
  --gold-btn:   #8A6C3E;
  /* Type on the bone plane. Her #9A7B4B measures 3.31:1 on #F3EAD6 and the
   * kickers are 13px, so AA is not negotiable there. This has to clear 4.5 on
   * BOTH light grounds — #F3EAD6 and the warmer #EFDEC9 the FAQ sits on — and
   * #7D6135 cleared the first at 4.83 and missed the second at 4.39. #74592F
   * clears both. The hairlines stay #9A7B4B: a 1px rule is not text and is not
   * measured. */
  --gold-ink:   #74592F;
  --gold-lit:   #C4A470;
  --gold-deep:  #57452E;

  /* type on dark */
  --on-ink:       #F3EAD6;
  --on-ink-muted: #C0AC90;

  /* type on light */
  --on-bone:       #251504;
  --on-bone-muted: #6B5942;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter:  clamp(20px, 5vw, 64px);
  --measure: 62ch;
  --radius:  2px;

  --mo-dur:  .55s;
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--on-bone);
  font-family: var(--font-body);
  /* 17px floor on the body. Her audience reads this on a phone between clients. */
  font-size: clamp(17px, .55vw + 15px, 19px);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Nothing on this page may scroll sideways. A single overflowing card makes
   * every card look broken on a 390px screen. */
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6.4vw, 92px); }
h2 { font-size: clamp(32px, 4.4vw, 58px); }
h3 { font-size: clamp(21px, 1.6vw, 26px); line-height: 1.25; }
p  { margin: 0 0 var(--s-5); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

/* The eyebrow device she uses on every one of her own graphics: letterspaced
 * serif caps in gold, sitting above the heading. Reproduced, not reinvented. */
.kicker {
  font-family: var(--font-display);
  font-size: clamp(13px, .9vw, 15px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s-4);
}
.kicker--on-ink { color: var(--gold-lit); }

/* Her hairline-rule-and-fleuron divider, as a reusable element. */
.rule {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--gold);
  margin-block: var(--s-6);
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .42;
}
.rule__mark { font-family: var(--font-display); font-size: 17px; letter-spacing: .3em; }

.section { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .kicker { color: var(--gold-lit); }
.section__lede { color: var(--on-bone-muted); max-width: 54ch; }
.section--ink .section__lede { color: var(--on-ink-muted); }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  /* 52px tall. A thumb, not a mouse. */
  min-height: 52px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mo-dur) var(--mo-ease), color var(--mo-dur) var(--mo-ease),
              border-color var(--mo-dur) var(--mo-ease);
}
.btn--gold { background: var(--gold-btn); color: #FFF7E9; border-color: var(--gold-btn); }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(196,164,112,.5); }
.btn--ghost:hover { border-color: var(--gold-lit); background: rgba(196,164,112,.1); }
.btn--ink { background: transparent; color: var(--on-bone); border-color: var(--gold); }
.btn--ink:hover { background: var(--gold-btn); color: #FFF7E9; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--on-ink);
  padding: var(--s-3) var(--s-5); z-index: 999;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* -------------------------------------------------------------- header --- */

.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  padding-block: var(--s-5);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); position: relative; }

.wordmark { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-ink); }
.wordmark__mark { width: 34px; height: auto; flex: none; }
.wordmark__type { display: grid; gap: 2px; }
.wordmark__name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; line-height: 1;
}
.wordmark__sub {
  font-family: var(--font-display);
  /* 12px is the floor, not a suggestion, and this sat at 10. Tracking comes
   * down a touch so the wider glyphs do not push the lockup off the mark. */
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  line-height: 1; color: var(--gold-lit);
}

.site-nav { display: flex; align-items: center; gap: var(--s-6); }
.site-nav__links { display: flex; gap: var(--s-6); }
.site-nav__links a {
  font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--on-ink-muted);
  transition: color var(--mo-dur) var(--mo-ease);
}
.site-nav__links a:hover { color: var(--gold-lit); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.nav-panel { display: none; }

@media (max-width: 900px) {
  .site-nav__links { display: none; }
  .site-nav__book { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 44px; padding-inline: var(--s-2);
    font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-ink); cursor: pointer;
  }
  .nav-burger__bars { display: grid; gap: 4px; }
  .nav-burger__bars i { display: block; width: 20px; height: 1px; background: currentColor; }
  /* Sibling that FOLLOWS the checkbox: :checked ~ .nav-panel cannot reach a
   * descendant. It opens without JS, so it still works on a phone whose
   * script never arrived. */
  .nav-toggle:checked ~ .nav-panel { display: grid; }
  .nav-panel {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--s-4));
    gap: var(--s-2); padding: var(--s-5);
    background: var(--ink-raised); border: 1px solid var(--ink-edge);
  }
  .nav-panel a {
    padding-block: var(--s-3);
    font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; color: var(--on-ink);
  }
  .nav-panel__book { margin-top: var(--s-3); color: var(--gold-lit); }
}

/* -------------------------------------------------------------- footer --- */

.site-footer { background: var(--ink-deep); color: var(--on-ink-muted); padding-block: var(--s-9) var(--s-6); font-size: 15.5px; }
.site-footer a { color: var(--on-ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold-lit); }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--s-4);
}
.site-footer__top { display: grid; gap: var(--s-8); grid-template-columns: 1.5fr 1fr 1fr; }
.site-footer__blurb { margin-top: var(--s-4); max-width: 40ch; color: var(--on-ink-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink-edge); font-size: 14px; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); font-size: 13.5px; opacity: .8; }
.site-footer .wordmark { color: var(--on-ink); }

@media (max-width: 900px) {
  /* Never three across on a phone. */
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ------------------------------------------------------------- motion ----
 *
 * Entrance only, and small. The hero is already playing a 27-second video, and
 * scroll choreography competes with it for attention while a phone is still
 * decoding frames — a short rise and a fade is the ceiling, not a floor to
 * build on. Expensive-looking motion here is SLOW and FEW: one long easing
 * curve, a held stagger, nothing bouncing and nothing sliding sideways.
 *
 * The hidden state is applied by the SCRIPT, never by the stylesheet. `.reveal`
 * on its own does nothing, and only `.js-motion .reveal` hides anything, so a
 * browser that never ran the script shows a finished page rather than a blank
 * one. That ordering is the whole safety property.
 */

.js-motion .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .85s var(--mo-ease) var(--reveal-delay, 0ms),
    transform .85s var(--mo-ease) var(--reveal-delay, 0ms);
}
.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* The hairline rules draw outward from the fleuron rather than fading in. It
 * is her own device on the page, so it is the one thing worth animating as a
 * gesture instead of a fade. */
.js-motion .rule::before,
.js-motion .rule::after {
  transform: scaleX(0);
  transition: transform 1.1s var(--mo-ease) 180ms;
}
.js-motion .rule::before { transform-origin: right center; }
.js-motion .rule::after { transform-origin: left center; }
.js-motion .rule.is-in::before,
.js-motion .rule.is-in::after { transform: scaleX(1); }

.js-motion .rule__mark {
  opacity: 0;
  transform: scale(.7);
  transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease);
}
.js-motion .rule.is-in .rule__mark { opacity: 1; transform: none; }

/* A stagger you can feel but not count. Beyond about six the last item waits
 * long enough that it reads as a bug rather than a rhythm, so it caps. */
.reveal--1 { --reveal-delay:  70ms; }
.reveal--2 { --reveal-delay: 140ms; }
.reveal--3 { --reveal-delay: 210ms; }
.reveal--4 { --reveal-delay: 280ms; }
.reveal--5 { --reveal-delay: 350ms; }
.reveal--6 { --reveal-delay: 420ms; }

/* Buttons lift a single pixel. Anything more on a 52px target reads as a
 * wobble under a cursor that is already moving. */
.btn { transform: translateZ(0); transition:
  background var(--mo-dur) var(--mo-ease),
  color var(--mo-dur) var(--mo-ease),
  border-color var(--mo-dur) var(--mo-ease),
  transform .3s var(--mo-ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}

/* NO sticky header, and that is a decision rather than an omission. A version
 * that switched to position: fixed on scroll looked right in a browser and
 * PHOTOGRAPHED as nothing at all: a full-page screenshot paints a fixed element
 * against the scrolled viewport, so the wordmark vanished from the top of every
 * render and mobile-smoke reported "no identity link found in header". The
 * capture was telling the truth about a real fragility. The header stays
 * absolute over the hero, where it has passed every gate since the build, and
 * the page earns its premium feel from the entrance motion instead. */

@media (prefers-reduced-motion: reduce) {
  /* Everything arrives already arrived. */
  .js-motion .reveal,
  .js-motion .rule__mark { opacity: 1; transform: none; transition: none; }
  .js-motion .rule::before,
  .js-motion .rule::after { transform: scaleX(1); transition: none; }
  .btn:hover { transform: none; }
}

/* ---- section: hero ---- */
#hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    align-items: center;
    background: var(--ink);
    color: var(--on-ink);
    overflow: hidden;
    padding-block: clamp(104px, 13vh, 150px) clamp(var(--s-7), 7vh, var(--s-9));
  }

  /* A single wash of warm light from the upper right, the same direction the
   * neon on her feature wall throws it. Cheap, and it stops the dark plane
   * reading as flat black behind a bright video. */
  #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 90% at 78% 18%, rgba(196,164,112,.17) 0%, rgba(196,164,112,0) 58%),
      radial-gradient(90% 70% at 8% 88%, rgba(154,123,75,.12) 0%, rgba(154,123,75,0) 60%);
  }

  #hero .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    /* The copy keeps clear of the full-bleed video column on its right. */
    padding-inline-end: clamp(340px, 39%, 620px);
  }

  /* Sized down from the global h1 scale. Two sentences on two lines is the
   * shape; at 6.4vw the second one wrapped as well, making four lines in a
   * column that only ever had room for two. */
  #hero .hero__h1 {
    margin-bottom: var(--s-5);
    font-size: clamp(38px, 4.5vw, 74px);
  }
  /* The second sentence is the promise, so it carries the italic and the gold.
   * One accent word is her own device; this is the same move at sentence scale. */
  #hero .hero__h1 em {
    display: block;
    font-style: italic;
    color: var(--gold-lit);
  }

  #hero .hero__lede {
    color: var(--on-ink-muted);
    max-width: 44ch;
    margin-bottom: var(--s-6);
  }

  #hero .hero__from {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
    font-family: var(--font-display);
  }
  #hero .hero__from b {
    font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 500;
    line-height: 1;
    color: var(--on-ink);
  }
  #hero .hero__from span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-lit);
  }

  #hero .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); }
  #hero .hero__copy { position: relative; z-index: 1; }

  /* ---- the video panel ---- */

  /* FULL BLEED, flush to the top, right and bottom edges of the hero. A
   * bordered panel floating in the middle of the dark plane read as a widget;
   * the footage is the product and it should touch the edges of the page.
   *
   * The column is ~35% wide because that is what a 9:16 source needs to fill a
   * full-height hero with almost nothing cropped: at a 900px hero it wants
   * 506px of width, and 506/1440 is 35%. Wider than that and object-fit starts
   * eating the ceiling and the floor, which is most of what tells you the room
   * is finished. */
  #hero .hero__media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: clamp(320px, 35%, 600px);
    z-index: 0;
  }
  #hero .hero__frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--ink-raised);
  }
  /* A soft seam on the left edge only, so the footage resolves into the dark
   * ground instead of ending on a hard vertical line beside the headline. */
  #hero .hero__frame::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: clamp(48px, 9vw, 120px);
    z-index: 2;
    background: linear-gradient(90deg, var(--ink) 0%, rgba(20,11,4,0) 100%);
    pointer-events: none;
  }
  #hero .hero__frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #hero .hero__sound {
    position: absolute;
    z-index: 3;
    inset-block-end: var(--s-6);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-5);
    border: 1px solid rgba(243,234,214,.32);
    border-radius: 999px;
    background: rgba(20,11,4,.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--on-ink);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--mo-dur) var(--mo-ease), background var(--mo-dur) var(--mo-ease);
  }
  #hero .hero__sound:hover { border-color: var(--gold-lit); background: rgba(20,11,4,.8); }
  #hero .hero__sound i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold-lit); flex: none;
  }

  @media (max-width: 900px) {
    /* Copy first, video after, and the hero is TALLER THAN THE FOLD on a phone
     * on purpose. Two other layouts were built and measured first:
     *
     * - Shrinking the panel until the hero fitted 844px left the video 180px
     *   wide, a postage stamp of the one asset the page is built on.
     * - Full-bleed video with the copy over a scrim fitted perfectly and FAILED
     *   contrast: the kicker measured 1.79:1 and the headline 1.93:1. A
     *   gradient cannot be tuned against MOVING footage anyway — the checker
     *   samples one frame and the next bright frame washes the text out.
     *
     * So the hero still runs a little past an 844px fold. What has to be
     * above the fold is the offer and the button, and the button's bottom edge
     * measures 519px. The rest of the video is the reason to scroll. */
    #hero { padding-block: 84px var(--s-5); min-height: 0; }
    #hero .hero__grid { grid-template-columns: 1fr; gap: var(--s-5); padding-inline-end: 0; }
    /* Back into the flow under the copy. Full bleed is a desktop shape: over a
     * phone hero the copy would have to sit on moving footage, which measured
     * 1.79:1 when it was tried. */
    #hero .hero__media { position: static; width: auto; }
    #hero .hero__frame { aspect-ratio: 9 / 16; width: auto; margin-inline: auto; }
    #hero .hero__frame::before { display: none; }
    #hero .hero__h1 { margin-bottom: var(--s-4); }
    #hero .hero__lede { margin-bottom: var(--s-5); font-size: 16.5px; }
    #hero .hero__from { margin-bottom: var(--s-5); }
    #hero .hero__frame { max-height: 32svh; max-width: 190px; }
    /* The offset hairline behind the frame is a desktop gesture. Against a
     * 190px panel it reads as a stray box, not a frame. */
    #hero .hero__media::after { display: none; }
    /* The pill is laid out against the FRAME, and the frame is 190px wide on a
     * phone. At the desktop size the label ran 172px into a 159px box and the
     * frame simply ate the overflow — nothing scrolled, nothing else noticed,
     * and "Tap for sound" read as "Tap for soun". Tracking comes down rather
     * than the type: 12px is the legibility floor and is not available to
     * spend. */
    #hero .hero__sound {
      inset-block-end: var(--s-2);
      padding: 0 var(--s-3);
      min-height: 34px;
      font-size: 12px;
      letter-spacing: .08em;
      gap: 6px;
    }
    #hero .hero__sound i { width: 5px; height: 5px; }
  }

/* ---- section: rates ---- */
#rates {
    background: var(--bone-warm);
    border-block: 1px solid var(--bone-edge);
    padding-block: clamp(var(--s-7), 6vw, var(--s-9));
  }

  #rates .rates__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--bone-edge);
    border: 1px solid var(--bone-edge);
  }

  #rates .rate {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--s-2);
    padding: clamp(var(--s-6), 4vw, var(--s-8)) var(--s-4);
    background: var(--bone-warm);
    text-align: center;
  }

  #rates .rate__label {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }
  #rates .rate__price {
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 500;
    line-height: 1;
    color: var(--on-bone);
  }
  /* "4 hours" / "8 hours" is the thing people actually check, so it gets its
   * own line rather than being folded into the label in parentheses. */
  #rates .rate__detail {
    font-size: 14px;
    color: var(--on-bone-muted);
    min-height: 1.5em;
  }

  #rates .rates__note {
    margin: var(--s-6) auto 0;
    max-width: 46ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(20px, 1.9vw, 26px);
    font-style: italic;
    line-height: 1.35;
    color: var(--gold-deep);
  }

  @media (max-width: 760px) {
    /* Two across, never four and never three. Four $-figures on a 390px screen
     * shrink the price to the size of the label and the whole point is lost. */
    #rates .rates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

/* ---- section: the-space ---- */
#the-space { background: var(--bone); }

  #the-space .space__head { max-width: 62ch; margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }

  /* ---- the lead image ---- */

  #the-space .space__lead {
    position: relative;
    width: min(880px, 100%);
    margin: 0 auto;
  }
  /* 880px is not an arbitrary cap. The source is 1320px square, so this is
   * exactly 1.5x and it stays sharp on a retina screen. Stretch it wider and
   * the one image the whole page turns on goes soft. */
  #the-space .space__lead img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--bone-edge);
  }
  #the-space .space__lead::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: clamp(16px, 2.6vw, 30px) calc(-1 * clamp(16px, 2.6vw, 30px)) calc(-1 * clamp(16px, 2.6vw, 30px)) clamp(16px, 2.6vw, 30px);
    border: 1px solid rgba(154,123,75,.36);
  }

  #the-space .space__caption {
    margin: var(--s-4) 0 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  /* ---- the rail ---- */

  #the-space .space__railhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-top: clamp(var(--s-8), 7vw, var(--s-10));
    margin-bottom: var(--s-5);
  }
  #the-space .space__railhead h3 { max-width: 22ch; }

  #the-space .space__nav { display: flex; gap: var(--s-3); flex: none; }
  #the-space .space__nav button {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: transparent;
    color: var(--gold-deep);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--mo-dur) var(--mo-ease), color var(--mo-dur) var(--mo-ease);
  }
  #the-space .space__nav button:hover:not(:disabled) { background: var(--gold); color: #FFF7E9; }
  /* Without this, the click at either end does nothing and the button looks
   * broken rather than finished. */
  #the-space .space__nav button:disabled {
    opacity: .3;
    cursor: default;
    background: transparent;
    color: var(--gold-deep);
  }

  #the-space .space__rail {
    /* Flex, not grid. `grid-auto-columns: 46%` inside a horizontally scrolling
     * grid resolved against the max-content contribution rather than the
     * container, and every slide collapsed to a thumbnail. A flex-basis on the
     * slide is measured against the container and cannot do that. */
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    padding-bottom: var(--s-4);
    /* The native bar is HIDDEN because the progress bar below replaces it.
     * Shipping both put two gold bars under the row, one of them a browser
     * widget that ignores the design and one of them ours. */
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  #the-space .space__rail::-webkit-scrollbar { display: none; }

  /* Slides are narrower than the rail ON PURPOSE. The sliver of the next image
   * is the only thing that tells a thumb this row moves; dots under a
   * full-width slide do not read as an affordance. */
  /* Deliberately NOT a .reveal. A slide waiting off to the right is hidden
   * until it intersects, and the sliver of the next image IS the affordance —
   * revealing it would hide the one thing telling a thumb the row moves. */
  #the-space .space__slide {
    flex: 0 0 46%;
    margin: 0;
    scroll-snap-align: start;
  }
  #the-space .space__slide img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--bone-edge);
  }

  /* ---- the swipe affordance ----
   * A row that scrolls and does not SAY it scrolls is a row most people never
   * scroll. The peek does some of the work; on a phone, where there are no
   * arrows, it needs saying out loud. Two signals, because they fail
   * differently: a nudge that animates until it is obeyed, and a progress bar
   * that keeps telling you where you are after the nudge has gone. */

  #the-space .space__cue {
    display: none;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-ink);
    transition: opacity .5s var(--mo-ease), transform .5s var(--mo-ease);
  }
  /* Once they have swiped, the instruction has done its job and becomes
   * clutter. It goes, and it does not come back. */
  #the-space .space__cue.is-done {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
  #the-space .space__cue-arrow {
    display: inline-block;
    font-size: 15px;
    animation: rg-nudge 1.9s var(--mo-ease) infinite;
  }
  @keyframes rg-nudge {
    0%, 62%, 100% { transform: translateX(0); opacity: .6; }
    28%           { transform: translateX(9px); opacity: 1; }
  }

  /* The bar is the honest one: its width is the fraction of the row you can
   * see, so a glance says how much is left as well as where you are. */
  #the-space .space__progress {
    position: relative;
    height: 2px;
    margin-top: var(--s-4);
    background: var(--bone-edge);
    overflow: hidden;
  }
  #the-space .space__progress span {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 30%;
    will-change: transform;
    background: var(--gold);
    transform: translateX(0);
    transition: transform .18s linear;
  }

  @media (prefers-reduced-motion: reduce) {
    #the-space .space__cue-arrow { animation: none; }
  }

  @media (max-width: 900px) {
    #the-space .space__cue { display: flex; }

    #the-space .space__lead::after { display: none; }
    #the-space .space__railhead { flex-direction: column; align-items: flex-start; }
    #the-space .space__nav { display: none; }
    /* 78% leaves a real sliver of the next slide on a 390px screen. */
    #the-space .space__slide { flex-basis: 78%; }
  }

/* ---- section: who-its-for ---- */
#who-its-for { background: var(--ink); color: var(--on-ink); }

  #who-its-for .who__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: start;
  }

  #who-its-for .who__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--ink-edge);
    border: 1px solid var(--ink-edge);
  }
  #who-its-for .who__list li {
    display: grid;
    place-items: center;
    /* A fixed height would clip "Permanent makeup artists" at two lines on a
     * narrow column; a min-height lets the tallest tile set the row. */
    min-height: 104px;
    padding: var(--s-5) var(--s-4);
    background: var(--ink);
    text-align: center;
    font-size: 14.5px;
    letter-spacing: .05em;
    line-height: 1.4;
    color: var(--on-ink);
  }

  #who-its-for .who__closing {
    margin-top: var(--s-6);
    font-family: var(--font-display);
    font-size: clamp(21px, 2vw, 27px);
    font-style: italic;
    line-height: 1.4;
    color: var(--gold-lit);
    max-width: 40ch;
  }

  @media (max-width: 900px) {
    #who-its-for .who__grid { grid-template-columns: 1fr; gap: var(--s-7); }
    /* Two across. Three 14px tiles on a 390px screen wrap every label to three
     * lines and the block stops reading as a list. */
    #who-its-for .who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Nine items into two columns leaves a hole in the bottom right, and with a
     * 1px gap over a darker backing that hole reads as a tile that failed to
     * load. The last one takes the whole row instead. */
    #who-its-for .who__list li:last-child { grid-column: 1 / -1; }
  }

/* ---- section: whats-included ---- */
#whats-included { background: var(--bone); }

  #whats-included .inc__head { max-width: 54ch; margin-bottom: clamp(var(--s-7), 5vw, var(--s-8)); }

  #whats-included .inc__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6) clamp(var(--s-6), 4vw, var(--s-8));
  }

  #whats-included .inc__item {
    padding-top: var(--s-5);
    border-top: 1px solid var(--gold);
  }
  #whats-included .inc__item h3 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--s-3);
  }
  #whats-included .inc__item p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--on-bone);
  }
  #whats-included .inc__item b { font-weight: 500; }

  @media (max-width: 900px) {
    #whats-included .inc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    #whats-included .inc__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  }

/* ---- section: questions ---- */
#questions {
    background: var(--bone-warm);
    border-block-start: 1px solid var(--bone-edge);
  }

  #questions .q__head { text-align: center; margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }
  #questions .q__head h2 { margin-inline: auto; }
  #questions .q__head .rule { max-width: 320px; margin-inline: auto; }

  #questions .q__list {
    display: grid;
    gap: clamp(var(--s-6), 4vw, var(--s-8));
    max-width: 880px;
    margin-inline: auto;
  }

  #questions .qa {
    padding-bottom: clamp(var(--s-6), 4vw, var(--s-8));
    border-bottom: 1px solid var(--bone-edge);
  }
  #questions .q__list .qa:last-child { border-bottom: 0; padding-bottom: 0; }

  #questions .qa__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
  }
  #questions .qa__row + .qa__row { margin-top: var(--s-5); }

  /* Her drop-cap device: an outsized serif Q and A in gold, sitting in their
   * own column so the question and the answer share one left edge. */
  #questions .qa__mark {
    font-family: var(--font-display);
    font-size: clamp(38px, 3.4vw, 50px);
    font-weight: 400;
    line-height: .86;
    color: var(--gold);
    text-align: right;
  }

  #questions .qa__q {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.3vw, 31px);
    line-height: 1.22;
    color: var(--on-bone);
    margin: 0;
    max-width: none;
    padding-top: 2px;
  }
  #questions .qa__a {
    margin: 0;
    max-width: 58ch;
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--on-bone-muted);
    padding-top: 6px;
  }

  @media (max-width: 620px) {
    /* The marks drop to their own line rather than eating a third of a 390px
     * screen and squeezing the question to two words per line. */
    #questions .qa__row { grid-template-columns: 1fr; gap: var(--s-1); }
    #questions .qa__mark { text-align: left; font-size: 34px; line-height: 1; }
  }

/* ---- section: book ---- */
#book { background: var(--ink); color: var(--on-ink); }

  #book .book__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: start;
  }

  #book .book__lede { color: var(--on-ink-muted); max-width: 42ch; margin-bottom: var(--s-6); }
  #book .book__cta { margin-bottom: var(--s-8); }

  #book .book__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
  #book .book__facts dt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-lit);
    margin-bottom: var(--s-1);
  }
  #book .book__facts dd { margin: 0; font-size: 16.5px; color: var(--on-ink); }
  #book .book__facts a { color: var(--on-ink); text-decoration: none; border-bottom: 1px solid rgba(196,164,112,.5); }
  #book .book__facts a:hover { color: var(--gold-lit); }
  #book .book__facts small { display: block; margin-top: var(--s-2); font-size: 14px; color: var(--on-ink-muted); }

  /* ---- the form ---- */

  #book .book__panel {
    padding: clamp(var(--s-6), 4vw, var(--s-8));
    background: var(--ink-raised);
    border: 1px solid var(--ink-edge);
  }
  #book .book__panel h3 {
    font-family: var(--font-display);
    font-size: clamp(23px, 2vw, 29px);
    margin-bottom: var(--s-3);
  }
  #book .book__panel > p { font-size: 16px; color: var(--on-ink-muted); margin-bottom: var(--s-6); }

  #book .field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
  #book .field label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-lit);
  }
  #book .field__input {
    width: 100%;
    /* 48px minimum, and a 16px font. Anything under 16px makes iOS Safari zoom
     * the whole page on focus, which looks like the layout broke. */
    min-height: 48px;
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    border: 1px solid var(--ink-edge);
    border-radius: var(--radius);
    color: var(--on-ink);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
  }
  #book textarea.field__input { min-height: 120px; resize: vertical; line-height: 1.6; }
  #book .field__input::placeholder { color: rgba(192,172,144,.55); }
  #book .field__input:focus { border-color: var(--gold); outline: none; }

  #book .field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  #book .book__submit { width: 100%; margin-top: var(--s-2); }
  #book .book__fine { margin-top: var(--s-4); font-size: 14px; color: var(--on-ink-muted); }

  @media (max-width: 900px) {
    #book .book__grid { grid-template-columns: 1fr; gap: var(--s-8); }
    #book .book__cta .btn { width: 100%; }
  }
  @media (max-width: 480px) {
    #book .field--pair { grid-template-columns: 1fr; gap: 0; }
  }