/* ==========================================================================
   Aliya's Beauty — homepage (immersive scroll story)
   --------------------------------------------------------------------------
   Page composition on top of the abx design system (css/ds/aliya-ds.css).
   Colour, spacing, radius and motion come from --abx-* tokens; anything this
   page adds is an --alt-* token or an .alt-* class. No legacy classes.

   Sections 1–3 (tokens, base, chrome) are also the frame of the booking flow
   (css/booking.css), which loads this file for them: a change to the top
   bar, the menu or the cookie notice shows on both.

   Written in two layers:

     1. The page as ordinary flowing sections. This is what renders with
        JavaScript off, WebGL unavailable, or reduced motion requested.
     2. html.alt-live — switched on by script/landing/main.js —
        turns chapters into tall scroll tracks with a pinned 100svh stage,
        and hands every background to the WebGL canvas.

   Sections: 1 Tokens · 2 Base · 3 Chrome · 4 Chapters · 5 Sheet + footer
             6 Live layer · 7 Motion preferences
   ========================================================================== */

/* The brand display face — declared WITHOUT its numerals (U+0030–0039).
   Giaza's figures are easy to misread at text sizes (its 3 passes for a 5),
   which is not acceptable in an address, a phone number or a price. With
   the range excluded, digits fall through to the next family in --alt-serif
   (Abril Fatface, loaded with digits only), so nothing has to remember to
   set numbers in a different font. */
@font-face {
  font-family: 'Giaza';
  src: url('/fonts/Giaza.otf') format('opentype');
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-FFFF;
}

/* 1. TOKENS ================================================================ */

.abx-app.alt {
  --alt-ink: var(--abx-ink-900);
  --alt-paper: var(--abx-beige-300);
  --alt-sheet: var(--abx-beige-100);

  --alt-serif: 'Giaza', 'Abril Fatface', 'Didot', 'Bodoni 72', Georgia, serif;

  /* One "viewport height" unit that tracks the small viewport where the
     browser has it, so pinned stages never jump as mobile toolbars retract. */
  --alt-vh: 1vh;

  --alt-gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --alt-bar-h: clamp(3.75rem, calc(var(--alt-vh) * 8.5), 5.25rem);

  --alt-fs-hero: clamp(2.5rem, min(11.4vw, calc(var(--alt-vh) * 13.2)), 8.75rem);
  --alt-fs-mega: clamp(2.75rem, min(11.6vw, calc(var(--alt-vh) * 14.5)), 10rem);
  --alt-fs-h2: clamp(2.35rem, min(8.6vw, calc(var(--alt-vh) * 10.5)), 6.25rem);
  --alt-fs-h3: clamp(1.6rem, min(5vw, calc(var(--alt-vh) * 6)), 3rem);
  --alt-fs-lede: clamp(1.02rem, calc(0.92rem + 0.42vw), 1.3rem);
  --alt-fs-meta: 0.72rem;

  --alt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --alt-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

@supports (height: 1svh) {
  .abx-app.alt {
    --alt-vh: 1svh;
  }
}

/* On wide screens the headline is held to two lines, which leaves the eye
   above it the room it needs. */
@media (min-width: 60rem) {
  .abx-app.alt {
    --alt-fs-hero: clamp(2.5rem, min(8.3vw, calc(var(--alt-vh) * 13.2)), 8.75rem);
  }
}

/* Dark surfaces re-point the system's semantic tokens, so every abx
   component (buttons, tags, eyebrows) inverts without a second variant. */
.alt [data-tone="ink"],
.alt [data-cover="ink"],
.alt .alt-bar,
.alt .alt-rail,
.alt .alt-menu {
  --abx-text: var(--abx-beige-300);
  --abx-text-muted: rgba(214, 211, 205, 0.74);
  --abx-text-subtle: rgba(214, 211, 205, 0.5);
  --abx-accent: var(--abx-beige-300);
  --abx-accent-hover: var(--abx-beige-50);
  --abx-inverse: var(--abx-ink-900);
  --abx-on-accent: var(--abx-ink-900);
  --abx-border: rgba(214, 211, 205, 0.16);
  --abx-border-strong: rgba(214, 211, 205, 0.34);
  --abx-surface-sunken: rgba(214, 211, 205, 0.08);
  --abx-surface-solid: #201f1d;
  --abx-focus: #aab6ff;
  color: var(--abx-text);
}

.alt [data-tone="paper"],
.alt [data-cover="paper"],
html[data-alt-top="paper"] .alt .alt-bar,
html[data-alt-side="paper"] .alt .alt-rail {
  --abx-text: var(--abx-ink-900);
  --abx-text-muted: var(--abx-ink-500);
  --abx-text-subtle: var(--abx-ink-400);
  --abx-accent: var(--abx-ink-900);
  --abx-accent-hover: #2c2b27;
  --abx-inverse: var(--abx-beige-300);
  --abx-on-accent: var(--abx-beige-300);
  --abx-border: rgba(23, 23, 22, 0.1);
  --abx-border-strong: rgba(23, 23, 22, 0.2);
  --abx-surface-sunken: rgba(23, 23, 22, 0.05);
  --abx-surface-solid: var(--abx-beige-50);
  --abx-focus: #4459d0;
  color: var(--abx-text);
}

/* 2. BASE ================================================================== */

html {
  background: #171716;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(140, 137, 127, 0.6) transparent;
}

/* .abx-app is an app shell elsewhere (fixed height, clipped flex column).
   Here it is the whole document, so those constraints are released. */
.abx-app.alt {
  display: block;
  height: auto;
  max-height: none;
  min-height: 100vh;
  margin: 0;
  overflow: visible;
  background: var(--alt-ink);
  font-weight: 400;
}

.alt a {
  color: inherit;
  text-decoration: none;
}

.alt ul,
.alt ol,
.alt dl,
.alt dd,
.alt blockquote {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt address {
  font-style: normal;
}

.alt :where(h1, h2, h3, h4) {
  font-size: inherit;
  font-weight: inherit;
}

.alt :focus-visible {
  outline: 2px solid var(--abx-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.alt ::selection {
  background: var(--abx-text);
  color: var(--abx-inverse);
}

.alt-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 110;
  padding: 0.7rem 1rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-beige-50);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  transform: translateY(-200%);
}

.alt a.alt-skip {
  color: var(--abx-ink-900);
}

.alt-skip:focus {
  transform: none;
}

/* Typography ---------------------------------------------------------------- */

.alt-h2 {
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-h2);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.alt-h3 {
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-h3);
  line-height: 1.04;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.alt-lede {
  max-width: 36ch;
  font-size: var(--alt-fs-lede);
  font-weight: 300;
  line-height: 1.5;
  color: var(--abx-text-muted);
  text-wrap: pretty;
}

.alt-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt-kicker b {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 600;
  color: var(--abx-text);
}

.alt-kicker b::after {
  content: '';
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.alt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-block: 0.35rem;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--abx-dur-3) var(--alt-ease-out);
}

.alt-link svg {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform var(--abx-dur-3) var(--alt-ease-out);
}

@media (hover: hover) {
  .alt-link:hover {
    background-size: 0% 1px;
    background-position: 100% 100%;
  }

  .alt-link:hover svg {
    transform: translateX(0.3rem);
  }
}

/* Name · duration · price rows, shared by brows and skin. */
.alt-price-list {
  width: 100%;
  border-top: 1px solid var(--abx-border-strong);
}

.alt-price-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(3.4ch, auto);
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.5rem, calc(var(--alt-vh) * 1.25), 0.85rem) 0;
  border-bottom: 1px solid var(--abx-border);
  font-size: clamp(0.95rem, calc(0.88rem + 0.25vw), 1.08rem);
  line-height: 1.3;
}

.alt-price-list__meta {
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  color: var(--abx-text-muted);
  white-space: nowrap;
}

.alt-price-list__price {
  font-family: var(--abx-font-display);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.alt-ticks {
  display: grid;
  gap: 0.6rem;
  max-width: 34rem;
}

.alt .alt-ticks li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.4;
}

.alt-ticks li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.32em;
  width: 0.72rem;
  height: 0.38rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

/* Empty boxes the WebGL figures are fitted into. Where the lash line, the
   droplet and so on sit at every breakpoint is decided here, by layout. */
.alt-anchor {
  pointer-events: none;
}

/* 3. CHROME ================================================================ */

.alt-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: none;
  pointer-events: none;
}

.alt-main {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

/* Loading curtain ----------------------------------------------------------- */

.alt-curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  background: var(--abx-beige-300);
  color: var(--abx-ink-900);
}

.no-js .alt-curtain {
  display: none;
}

.alt-fallback .alt-curtain {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.alt-curtain__mark {
  width: clamp(3.5rem, 9vw, 5rem);
  height: auto;
}

.alt-curtain__rule {
  display: block;
  width: clamp(7rem, 22vw, 11rem);
  height: 1px;
  background: rgba(23, 23, 22, 0.16);
  overflow: hidden;
}

.alt-curtain__rule i {
  display: block;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

.alt-curtain__count {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.alt-curtain__count b {
  font-weight: 600;
}

/* Top bar ------------------------------------------------------------------- */

.alt-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--alt-bar-h);
  padding: 0 var(--alt-gutter);
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
  transition: color var(--abx-dur-3) var(--abx-ease);
}

.alt-bar > * {
  pointer-events: auto;
}

.alt-bar__logo {
  display: block;
  line-height: 0;
}

.alt-bar__logo svg {
  width: auto;
  height: clamp(2.1rem, calc(var(--alt-vh) * 5), 2.9rem);
  aspect-ratio: 200 / 73;
}

.alt-bar__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

.alt .alt-bar__book {
  height: 2.5rem;
  padding: 0 1.35rem;
  transition: background-color var(--abx-dur-3) var(--abx-ease), color var(--abx-dur-3) var(--abx-ease), transform var(--abx-dur-2) var(--abx-ease);
}

.alt-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.5rem;
  padding: 0 0.25rem;
  color: inherit;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.alt-bar__toggle-icon {
  position: relative;
  width: 1.5rem;
  height: 0.6rem;
}

.alt-bar__toggle-icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--abx-dur-3) var(--alt-ease-out);
}

.alt-bar__toggle-icon i:first-child {
  top: 0;
}

.alt-bar__toggle-icon i:last-child {
  bottom: 0;
}

.alt-bar__toggle[aria-expanded="true"] .alt-bar__toggle-icon i:first-child {
  transform: translateY(0.24rem) rotate(45deg);
}

.alt-bar__toggle[aria-expanded="true"] .alt-bar__toggle-icon i:last-child {
  transform: translateY(-0.24rem) rotate(-45deg);
}

/* While the menu is open the bar sits on the menu's dark panel. */
html.alt-menu-open .alt .alt-bar {
  --abx-text: var(--abx-beige-300);
  --abx-accent: var(--abx-beige-300);
  --abx-accent-hover: var(--abx-beige-50);
  --abx-inverse: var(--abx-ink-900);
  color: var(--abx-beige-300);
  z-index: 55;
}

/* Menu ---------------------------------------------------------------------- */

.alt-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 2rem;
  padding: calc(var(--alt-bar-h) + 1.5rem) var(--alt-gutter) max(var(--alt-gutter), env(safe-area-inset-bottom));
  background: var(--alt-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Opens as a circle growing out of the button that was pressed (--mx/--my
   are set by the script); the links then rise out of their own baselines. */
.alt-menu {
  clip-path: circle(0% at var(--mx, 100%) var(--my, 0%));
  transition: clip-path 0.75s var(--alt-ease-in-out);
}

.alt-menu.is-open {
  clip-path: circle(150% at var(--mx, 100%) var(--my, 0%));
}

.alt-menu__list {
  display: grid;
  gap: clamp(0.1rem, calc(var(--alt-vh) * 0.6), 0.6rem);
}

.alt-menu__list li {
  overflow: hidden;
  overflow: clip;
  padding-bottom: 0.08em;
}

.alt-menu__list li > a {
  transform: translateY(112%);
}

.alt-menu.is-open .alt-menu__list li > a {
  transform: none;
  transition-delay: 0s, calc(0.22s + var(--i, 0) * 0.055s);
}

.alt-menu__secondary,
.alt-menu__aside {
  opacity: 0;
  transition: opacity 0.6s var(--abx-ease);
}

.alt-menu.is-open .alt-menu__secondary,
.alt-menu.is-open .alt-menu__aside {
  opacity: 1;
  transition-delay: 0.45s;
}

.alt-menu__list a {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  font-family: var(--alt-serif);
  font-size: clamp(2.1rem, min(9vw, calc(var(--alt-vh) * 9.5)), 5.5rem);
  line-height: 1.08;
  transition: opacity var(--abx-dur-2) var(--abx-ease), transform 0.9s var(--alt-ease-out);
}

.alt-menu__no {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--abx-text-subtle);
}

@media (hover: hover) {
  .alt-menu__list:hover a {
    opacity: 0.35;
  }

  .alt-menu__list a:hover {
    opacity: 1;
  }

  .alt-menu.is-open .alt-menu__list li > a:hover {
    transform: translateX(0.6rem);
    transition-delay: 0s;
    transition-duration: var(--abx-dur-2), var(--abx-dur-3);
  }
}

.alt-menu__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.75rem;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  color: var(--abx-text-muted);
}

.alt-menu__aside {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--abx-border);
  font-weight: 300;
  line-height: 1.55;
  color: var(--abx-text-muted);
}

.alt-menu__aside a {
  color: var(--abx-text);
}

@media (min-width: 56rem) {
  .alt-menu {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
    align-content: center;
    align-items: end;
    gap: 4rem;
  }

  .alt-menu__aside {
    padding-top: 0;
    padding-left: 2rem;
    border-top: 0;
    border-left: 1px solid var(--abx-border);
  }
}

/* Chapter rail + progress (only exist once the story is live) --------------- */

.alt-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 41;
  height: 2px;
  background: currentColor;
  color: var(--abx-beige-300);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  transition: color var(--abx-dur-3) var(--abx-ease);
}

html[data-alt-top="paper"] .alt-progress {
  color: var(--abx-ink-900);
}

.alt-rail {
  position: fixed;
  top: 50%;
  right: calc(var(--alt-gutter) * 0.45);
  z-index: 40;
  display: none;
  transform: translateY(-50%);
  transition: color var(--abx-dur-3) var(--abx-ease), opacity var(--abx-dur-3) var(--abx-ease);
}

.alt-rail ol {
  display: grid;
  justify-items: end;
}

.alt-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  padding: 0.42rem 0;
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.alt-rail span {
  opacity: 0;
  transform: translateX(0.4rem);
  transition: opacity var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-3) var(--alt-ease-out);
}

.alt-rail i {
  width: 0.7rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: width var(--abx-dur-3) var(--alt-ease-out), opacity var(--abx-dur-2) var(--abx-ease);
}

.alt-rail a[aria-current="true"] i {
  width: 1.9rem;
  opacity: 1;
}

.alt-rail a[aria-current="true"] span,
.alt-rail a:focus-visible span {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .alt-rail a:hover span {
    opacity: 1;
    transform: none;
  }

  .alt-rail a:hover i {
    opacity: 1;
  }
}

/* Cookie notice (ids + behaviour from script/cookie-consent.js) ------------- */

.alt-cookie {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  gap: 0.85rem;
  max-width: 25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(23, 23, 22, 0.08);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-beige-50);
  box-shadow: var(--abx-elev-toast);
  font-size: var(--abx-fs-100);
  line-height: 1.45;
  /* Held back so it never lands on top of the opening scene. */
  animation: alt-cookie-in 0.7s var(--alt-ease-out) 4.2s both;
}

.alt .alt-cookie,
.alt .alt-cookie-modal__dialog {
  color: var(--abx-ink-900);
}

.alt .alt-cookie a,
.alt .alt-cookie-modal__dialog a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alt-cookie__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.alt .alt-cookie .abx-btn {
  height: 2.5rem;
}

@keyframes alt-cookie-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

/* On a phone the notice is one compact row, so it sits below the opening
   scene's booking button instead of on top of it. "Learn more" is dropped
   there: on small screens it only opens the Cookie Policy the text already
   links to (see script/cookie-consent.js). */
@media (max-width: 40rem) {
  .alt-cookie {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem 0.65rem 0.9rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .alt-cookie__more {
    display: none;
  }
}

.alt-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.alt-cookie-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 22, 0.6);
}

.alt-cookie-modal__dialog {
  position: relative;
  display: grid;
  gap: 1rem;
  width: min(100%, 34rem);
  max-height: 90vh;
  padding: 1.5rem;
  border-radius: var(--abx-radius-lg);
  background: var(--abx-beige-50);
  overflow-y: auto;
  font-size: var(--abx-fs-100);
  line-height: 1.5;
}

.alt-cookie-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.alt-cookie-modal__close {
  font-size: 1.6rem;
  line-height: 1;
  color: inherit;
}

.alt-cookie-modal__option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(23, 23, 22, 0.1);
}

.alt-cookie-modal__option h3 {
  font-family: var(--abx-font-display);
  font-weight: 600;
}

.alt-cookie-modal__option .abx-tag {
  flex: none;
  white-space: nowrap;
}

.alt-cookie-modal__actions {
  display: flex;
  justify-content: flex-end;
}

/* 4. CHAPTERS ============================================================== */

.alt-ch {
  position: relative;
}

.alt-ch[data-tone="ink"] {
  background: var(--alt-ink);
}

.alt-ch[data-tone="paper"] {
  background: var(--alt-paper);
}

.alt-ch__pin {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, calc(var(--alt-vh) * 3), 2.5rem);
  padding: clamp(4.5rem, calc(var(--alt-vh) * 12), 8rem) var(--alt-gutter);
}

.alt-ch__pin > .alt-anchor {
  display: none;
}

/* Hero ---------------------------------------------------------------------- */

.alt-hero .alt-ch__pin {
  min-height: 100vh;
  min-height: calc(var(--alt-vh) * 100);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.alt-hero__copy {
  display: grid;
  justify-items: center;
  gap: clamp(0.85rem, calc(var(--alt-vh) * 2.2), 1.6rem);
}

.alt-hero__eyebrow span {
  color: var(--abx-text-subtle);
}

.alt-hero__title {
  max-width: 13.5em;
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-hero);
  line-height: 0.96;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

/* Long headings (it is a staff-editable setting) step down in size. */
.alt-hero__title--long {
  max-width: 16em;
  font-size: calc(var(--alt-fs-hero) * 0.78);
}

.alt-hero__title--xlong {
  max-width: 20em;
  font-size: calc(var(--alt-fs-hero) * 0.6);
}

.alt-hero__sub {
  max-width: 34ch;
  font-size: var(--alt-fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
  text-wrap: balance;
}

.alt-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(0.25rem, calc(var(--alt-vh) * 1), 0.75rem);
}

.alt-hero__meta {
  display: none;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.alt-cue i {
  position: relative;
  width: 1px;
  height: clamp(1.5rem, calc(var(--alt-vh) * 4.5), 2.75rem);
  background: var(--abx-border-strong);
  overflow: hidden;
}

.alt-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--abx-text);
  animation: alt-cue 2.2s var(--alt-ease-in-out) infinite;
}

@keyframes alt-cue {
  0% {
    transform: translateY(-100%);
  }

  55%,
  100% {
    transform: translateY(100%);
  }
}

/* Method -------------------------------------------------------------------- */

.alt-creed__lines {
  display: grid;
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-mega);
  line-height: 0.98;
  letter-spacing: -0.016em;
}

.alt-creed__line {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

/* The outlined "ghost" only exists for the live fill effect. */
.alt-creed__ghost {
  display: none;
}

.alt-creed__note {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, calc(var(--alt-vh) * 2.6), 2rem);
}

.alt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3.4vw, 3.25rem);
}

.alt-stats__item {
  display: grid;
  gap: 0.35rem;
}

/* Label first in the markup (a <dt> must precede its <dd>), figure first
   on the page. */
.alt-stats__item dd {
  order: -1;
}

.alt-stats dd {
  display: flex;
  align-items: flex-start;
  font-family: var(--alt-serif);
  font-size: clamp(1.9rem, min(4.4vw, calc(var(--alt-vh) * 6.2)), 4.25rem);
  line-height: 1;
}

/* The figures count up on scroll. A hidden copy of the final number holds
   the space; the visible one is laid over it, so nothing reflows as the
   digits change. */
.alt-count {
  position: relative;
  display: inline-block;
}

.alt-count > span {
  visibility: hidden;
}

.alt-count > b {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  white-space: nowrap;
}

.alt-stats dd i {
  margin: 0.08em 0 0 0.08em;
  font-family: var(--abx-font-display);
  font-size: 0.42em;
  font-style: normal;
  font-weight: 500;
}

.alt-stats dt {
  max-width: 12ch;
  font-size: var(--abx-fs-100);
  line-height: 1.3;
  color: var(--abx-text-muted);
}

/* Lashes -------------------------------------------------------------------- */

.alt-lashes__head {
  display: grid;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 1.8), 1.25rem);
}

.alt-lashes__sets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.alt-set {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: clamp(0.6rem, calc(var(--alt-vh) * 1.5), 1rem);
}

.alt-set__no {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.alt-set__no span {
  color: var(--abx-text-subtle);
}

.alt-set__name {
  font-family: var(--alt-serif);
  font-size: clamp(2.6rem, min(13vw, calc(var(--alt-vh) * 13)), 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.alt-set__desc {
  max-width: 34ch;
  font-size: var(--alt-fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
  text-wrap: pretty;
}

.alt-set__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt-set__price {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, calc(var(--alt-vh) * 3.6), 2.1rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--abx-text);
}

.alt-lashes__tabs {
  display: none;
}

.alt-lashes__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

/* Brows --------------------------------------------------------------------- */

.alt-brows__copy,
.alt-skin__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, calc(var(--alt-vh) * 2.4), 1.75rem);
  width: 100%;
  max-width: 34rem;
}

.alt-brows__copy header,
.alt-skin__copy header {
  display: grid;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 1.8), 1.25rem);
}

.alt-steps {
  display: none;
}

/* Skin ---------------------------------------------------------------------- */

.alt-skin__panels {
  display: grid;
  gap: clamp(1.5rem, calc(var(--alt-vh) * 4), 2.5rem);
  width: 100%;
}

.alt-skin__panel {
  display: grid;
  gap: 0.9rem;
}

.alt-skin__word {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-h3);
  line-height: 1;
}

.alt-skin__cat {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

/* Work ---------------------------------------------------------------------- */

.alt-work__head {
  display: grid;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 1.8), 1.25rem);
}

.alt-work__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.alt-work__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--abx-radius-md);
}

.alt-work__item figcaption {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.55rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt-work__item figcaption span {
  color: var(--abx-text-subtle);
}

.alt-work__caption {
  display: none;
}

.alt-work__end {
  display: grid;
  justify-items: start;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 1.8), 1.25rem);
}

.alt-work__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}

/* Words --------------------------------------------------------------------- */

.alt-words__stack {
  display: grid;
  gap: clamp(2rem, calc(var(--alt-vh) * 6), 4rem);
}

.alt-quote {
  display: grid;
  gap: clamp(1rem, calc(var(--alt-vh) * 2.5), 1.75rem);
  max-width: 22em;
  font-family: var(--alt-serif);
  font-size: clamp(1.85rem, min(6.6vw, calc(var(--alt-vh) * 7.4)), 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.alt-quote--short {
  max-width: 17em;
  font-size: clamp(2.1rem, min(8.4vw, calc(var(--alt-vh) * 10.5)), 6.5rem);
}

.alt-quote--long {
  max-width: 26em;
  font-size: clamp(1.5rem, min(5vw, calc(var(--alt-vh) * 5.4)), 3.4rem);
}

.alt-quote blockquote p {
  text-wrap: balance;
}

.alt-quote blockquote p::before {
  content: '\201C';
}

.alt-quote blockquote p::after {
  content: '\201D';
}

.alt-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt-quote figcaption::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

.alt-words__count {
  display: none;
}

/* Guide --------------------------------------------------------------------- */

.alt-guide .alt-ch__pin {
  align-items: center;
}

.alt-guide__stage {
  display: grid;
  place-items: center;
  min-height: clamp(15rem, 46vw, 26rem);
}

.alt-guide__copy {
  display: grid;
  justify-items: start;
  gap: clamp(0.85rem, calc(var(--alt-vh) * 2), 1.4rem);
  max-width: 36rem;
}

.alt-guide__copy .alt-lede {
  max-width: 46ch;
}

.alt-guide__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.25rem;
}

.alt-guide__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
}

.alt-guide__price strong {
  font-family: var(--alt-serif);
  font-size: clamp(2rem, calc(var(--alt-vh) * 5), 3rem);
  font-weight: 400;
  line-height: 1;
}

.alt-guide__price s {
  color: var(--abx-text-muted);
}

.alt-guide__price span {
  flex-basis: 100%;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

/* The book: a real CSS 3D box — cover, page block, loose leaves. */
.alt-book {
  --book-w: clamp(9.5rem, min(40vw, calc(var(--alt-vh) * 31)), 17rem);
  --book-d: calc(var(--book-w) * 0.11);
  position: relative;
  width: var(--book-w);
  aspect-ratio: 3 / 4.2;
  perspective: 1500px;
}

/* Posed through custom properties (--rx/--ry/--lift here, --open on the
   cover, --turn on each leaf) so the script can animate the pose without
   ever owning the transforms that give the book its size and depth. */
.alt-book__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0%)) rotateX(var(--rx, 7deg)) rotateY(calc(var(--ry, -26deg) + var(--tilt, 0deg)));
}

.alt-book__back,
.alt-book__block,
.alt-book__leaf,
.alt-book__cover,
.alt-book__face,
.alt-book__inside {
  position: absolute;
  inset: 0;
}

.alt-book__back {
  border-radius: 2px 5px 5px 2px;
  background: #0f0f0e;
  transform: translateZ(calc(var(--book-d) / -2));
}

/* Page block: a slab inset from the boards, with its fore-edge as a strip of
   hairlines turned 90° into depth. */
.alt-book__block {
  inset: 1.6% 2.5% 1.6% 0;
  background: #efe9df;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--book-d) / 2 - 2px));
}

.alt-book__block::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(var(--book-d) - 3px);
  background: repeating-linear-gradient(90deg, #e9e2d6 0 1px, #cfc6b6 1px 2px);
  transform-origin: left center;
  transform: rotateY(90deg);
}

/* Loose leaves: paper with the faintest ruling, shaded into the gutter. */
.alt-book__leaf {
  inset: 1.6% 2.5% 1.6% 0;
  background:
    linear-gradient(90deg, rgba(120, 108, 90, 0.34), rgba(120, 108, 90, 0) 12%),
    repeating-linear-gradient(180deg, rgba(23, 23, 22, 0) 0 5.2%, rgba(23, 23, 22, 0.075) 5.2% 5.5%) 22% 18% / 62% 66% no-repeat,
    #f4efe6;
  box-shadow: inset -1px 0 0 rgba(23, 23, 22, 0.08);
  transform-origin: left center;
  transform: translateZ(calc(var(--book-d) / 2 - 1px)) rotateY(var(--turn, 0deg));
  backface-visibility: hidden;
}

.alt-book__cover {
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(calc(var(--book-d) / 2)) rotateY(var(--open, 0deg));
}

.alt-book__face {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: start;
  gap: 0.5rem;
  padding: 9% 9% 8%;
  border-radius: 2px 5px 5px 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0) 5%, rgba(0, 0, 0, 0.22) 6.5%, rgba(0, 0, 0, 0) 9%),
    linear-gradient(140deg, #24231f, #171716 60%);
  color: var(--abx-beige-300);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(214, 211, 205, 0.08);
}

.alt-book__inside {
  border-radius: 5px 2px 2px 5px;
  background: #efe9df;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.alt-book__badge {
  padding: 0.3em 0.75em;
  border: 1px solid rgba(214, 211, 205, 0.4);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: calc(var(--book-w) * 0.036);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.alt-book__mark {
  align-self: center;
  justify-self: center;
  width: 46%;
  height: auto;
  opacity: 0.92;
}

.alt-book__title {
  font-family: var(--alt-serif);
  font-size: calc(var(--book-w) * 0.108);
  font-weight: 400;
  line-height: 1;
}

.alt-book__by {
  font-family: var(--abx-font-display);
  font-size: calc(var(--book-w) * 0.036);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.alt-book__shadow {
  position: absolute;
  left: 4%;
  right: -14%;
  bottom: -9%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 23, 22, 0.34), rgba(23, 23, 22, 0));
  filter: blur(6px);
}

/* Finale -------------------------------------------------------------------- */

/* Sticky at both ends: it waits at the bottom edge while the sheet above is
   still passing (so it is uncovered rather than scrolled in), then holds at
   the top edge while the footer slides up over it. */
.alt-finale {
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 1;
  height: 100vh;
  height: calc(var(--alt-vh) * 100);
}

.alt-finale__inner {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  padding: calc(var(--alt-bar-h) + 1rem) var(--alt-gutter) clamp(2.5rem, calc(var(--alt-vh) * 9), 6rem);
  text-align: center;
}

.alt-finale__copy {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, calc(var(--alt-vh) * 2.6), 1.75rem);
}

.alt-finale__title {
  font-family: var(--alt-serif);
  font-size: var(--alt-fs-hero);
  line-height: 0.96;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.alt-finale .alt-lede {
  max-width: none;
}

/* 5. SHEET + FOOTER ======================================================== */

.alt-outro {
  position: relative;
  z-index: 1;
}

/* An opaque sheet of paper that slides over the story, then lifts away to
   uncover the closing scene beneath it. */
.alt-sheet {
  position: relative;
  z-index: 2;
  min-height: 110vh;
  min-height: calc(var(--alt-vh) * 110);
  border-radius: clamp(1.25rem, 3.4vw, 2.75rem);
  background: var(--alt-sheet);
  box-shadow: 0 -1.5rem 3.5rem rgba(23, 23, 22, 0.1), 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.alt-sheet__inner {
  display: grid;
  gap: clamp(3rem, calc(var(--alt-vh) * 9), 6rem);
  max-width: 88rem;
  margin: 0 auto;
  padding: clamp(4rem, calc(var(--alt-vh) * 13), 8.5rem) var(--alt-gutter) clamp(4rem, calc(var(--alt-vh) * 12), 8rem);
}

.alt-sheet__head {
  display: grid;
  gap: clamp(0.85rem, calc(var(--alt-vh) * 2), 1.4rem);
}

.alt-visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}

.alt-visit__block {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1rem;
}

.alt-visit__address {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, calc(1.1rem + 1.4vw), 2.25rem);
  line-height: 1.12;
}

.alt-visit__postcode {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.alt-visit__today {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, calc(1.1rem + 1.4vw), 2.25rem);
  line-height: 1.12;
}

.alt-hours {
  width: 100%;
  max-width: 24rem;
}

.alt-hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--abx-border);
  font-variant-numeric: tabular-nums;
  color: var(--abx-text-muted);
}

.alt-hours li.is-today {
  color: var(--abx-text);
  font-weight: 500;
}

.alt-hours li.is-closed span:last-child {
  font-style: italic;
}

.alt-hours .abx-tag {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.alt-contact {
  display: grid;
  gap: 0.35rem;
}

.alt-contact a {
  font-family: var(--alt-serif);
  font-size: clamp(1.3rem, calc(1rem + 1.05vw), 1.85rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--abx-dur-3) var(--alt-ease-out);
}

@media (hover: hover) {
  .alt-contact a:hover {
    background-size: 100% 1px;
  }
}

.alt-faq {
  display: grid;
  gap: clamp(1.5rem, calc(var(--alt-vh) * 4), 2.5rem);
  padding-top: clamp(2.5rem, calc(var(--alt-vh) * 7), 4.5rem);
  border-top: 1px solid var(--abx-border-strong);
}

.alt-faq__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.alt-faq__group {
  display: grid;
  align-content: start;
}

.alt-faq__group h4 {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--abx-border-strong);
}

.alt-faq__item {
  border-bottom: 1px solid var(--abx-border);
}

.alt-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 0;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.alt-faq__item summary::-webkit-details-marker {
  display: none;
}

.alt-faq__item summary i {
  position: relative;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.3rem;
}

.alt-faq__item summary i::before,
.alt-faq__item summary i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--abx-dur-3) var(--alt-ease-out);
}

.alt-faq__item summary i::after {
  transform: rotate(90deg);
}

.alt-faq__item[open] summary i::after {
  transform: rotate(0deg);
}

.alt-faq__answer {
  display: grid;
  gap: 0.75rem;
  padding: 0 2rem 1.25rem 0;
  font-weight: 300;
  line-height: 1.55;
  color: var(--abx-text-muted);
}

.alt .alt-faq__answer a {
  color: var(--abx-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alt-faq__answer strong {
  font-weight: 500;
  color: var(--abx-text);
}

/* Footer -------------------------------------------------------------------- */

.alt-footer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, calc(var(--alt-vh) * 7), 4.5rem);
  padding: clamp(3rem, calc(var(--alt-vh) * 9), 5.5rem) var(--alt-gutter) max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--abx-border);
  background: #121211;
}

.alt-footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.alt-footer__logo {
  display: block;
  width: clamp(8rem, 16vw, 11rem);
  line-height: 0;
}

.alt-footer__logo svg {
  width: 100%;
  height: auto;
}

.alt-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}

.alt-footer__cols > div {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.alt-footer__cols ul {
  display: grid;
  gap: 0.5rem;
  font-size: var(--abx-fs-100);
}

.alt-footer__cols a {
  color: var(--abx-text-muted);
  overflow-wrap: anywhere;
  transition: color var(--abx-dur-2) var(--abx-ease);
}

.alt-footer__cols a:hover {
  color: var(--abx-text);
}

.alt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--abx-border);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.alt-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.alt-footer__credit a {
  display: inline-flex;
  line-height: 0;
}

/* The agency wordmark is black-on-clear; flip it for the dark footer while
   keeping its accent dot in the blue family. */
.alt-footer__credit img {
  width: auto;
  height: 1rem;
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.85;
}

@media (min-width: 60rem) {
  .alt-footer__top {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
  }
}

/* Plain page only ----------------------------------------------------------- */

/* Without the stage there is nothing to tell the header which tone it is
   over, so it stays with the (dark) opening section instead of following. */
html:not(.alt-live) .alt-bar {
  position: absolute;
}

html:not(.alt-live) .alt-set__name {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
}

/* Square shoulders: with no stage behind it, a rounded top would show the
   closing scene waiting underneath. */
html:not(.alt-live) .alt-sheet {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

html:not(.alt-live) .alt-skin__copy {
  max-width: 62rem;
}

@media (min-width: 60rem) {
  html:not(.alt-live) .alt-guide .alt-ch__pin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  html:not(.alt-live) .alt-skin__panels {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* 6. LIVE LAYER ============================================================ */

html.alt-live .alt-stage {
  display: block;
}

/* The canvas paints every backdrop from here on. */
html.alt-live .alt-ch[data-tone] {
  background: none;
}

html.alt-live .alt-ch[style*="--len"] {
  height: calc(var(--len) * var(--alt-pace, 1) * 100vh);
  height: calc(var(--len) * var(--alt-pace, 1) * var(--alt-vh) * 100);
}

html.alt-live .alt-ch__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: calc(var(--alt-vh) * 100);
  padding: var(--alt-bar-h) var(--alt-gutter) clamp(1.25rem, calc(var(--alt-vh) * 4.5), 3.25rem);
  overflow: hidden;
  overflow: clip;
}

/* Panels that share a cell are cross-faded with opacity alone, so every one
   of them stays in the accessibility tree. Only the one on show takes
   clicks; focusing into another scrolls the story to it (see dom.js). */
html.alt-live [data-alt-layer]:not(.is-on) {
  pointer-events: none;
}

html.alt-live .alt-ch__pin > .alt-anchor {
  display: block;
}

html.alt-live .alt-rail {
  display: block;
}

/* Phones scroll a little less far for the same story. */
@media (max-width: 47.99rem) {
  html.alt-live .alt {
    --alt-pace: 0.88;
  }

  html.alt-live .alt-rail {
    display: none;
  }
}

/* Where a pinned scene splits into copy beside a figure, its heading is set
   for the column rather than for the full width of the frame. */
@media (min-width: 60rem) {
  html.alt-live .alt-lashes__head,
  html.alt-live .alt-brows__copy,
  html.alt-live .alt-skin__copy,
  html.alt-live .alt-guide__copy {
    --alt-fs-h2: clamp(2.1rem, min(5vw, calc(var(--alt-vh) * 8)), 5rem);
  }

  html.alt-live .alt-creed .alt-stats {
    flex-wrap: nowrap;
  }
}

/* Squat desktop windows: keep the essentials, drop the supporting lines. */
@media (min-width: 60rem) and (max-height: 47rem) {
  html.alt-live .alt-lashes__head .alt-lede,
  html.alt-live .alt-set__no,
  html.alt-live .alt-guide .alt-ticks {
    display: none;
  }
}

/* Hero (live) --------------------------------------------------------------- */

html.alt-live .alt-hero .alt-ch__pin {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.5rem, calc(var(--alt-vh) * 2), 1.5rem);
  align-content: stretch;
  padding-bottom: clamp(1.5rem, calc(var(--alt-vh) * 6.5), 4.5rem);
}

html.alt-live .alt-hero__eye {
  width: 100%;
  max-width: 78rem;
  min-height: calc(var(--alt-vh) * 20);
}

html.alt-live .alt-hero__meta {
  position: absolute;
  bottom: clamp(1.25rem, calc(var(--alt-vh) * 4.5), 3rem);
  text-align: left;
}

html.alt-live .alt-hero__meta--start {
  left: var(--alt-gutter);
}

html.alt-live .alt-hero__meta--end {
  right: var(--alt-gutter);
}

@media (min-width: 60rem) and (min-height: 34rem) {
  html.alt-live .alt-hero__meta {
    display: block;
  }
}

/* Method (live) ------------------------------------------------------------- */

html.alt-live .alt-creed .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 2.4), 1.75rem);
  padding-top: calc(var(--alt-bar-h) + clamp(0.5rem, calc(var(--alt-vh) * 3), 2rem));
}

html.alt-live .alt-creed__ghost {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px var(--abx-border-strong);
}

html.alt-live .alt-creed__fill {
  position: absolute;
  inset: 0;
  clip-path: inset(-10% 100% -10% 0);
}

html.alt-live .alt-creed__figure {
  grid-row: 3;
  min-height: calc(var(--alt-vh) * 18);
}

html.alt-live .alt-creed__note {
  grid-row: 4;
}

@media (min-width: 60rem) {
  /* Type across the top; beneath it the note on the left and the figure —
     the tray, then the fan — on the right. */
  html.alt-live .alt-creed .alt-ch__pin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  html.alt-live .alt-creed .alt-kicker,
  html.alt-live .alt-creed__lines {
    grid-column: 1 / -1;
  }

  html.alt-live .alt-creed__figure {
    grid-column: 2;
    grid-row: 3;
  }

  html.alt-live .alt-creed__note {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
  }
}

/* Lashes (live) ------------------------------------------------------------- */

html.alt-live .alt-lashes .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(0.6rem, calc(var(--alt-vh) * 2), 1.5rem);
  padding-top: calc(var(--alt-bar-h) + clamp(0.25rem, calc(var(--alt-vh) * 2), 1.5rem));
}

html.alt-live .alt-lashes__figure {
  min-height: calc(var(--alt-vh) * 20);
}

/* Every set shares one cell; the script shows one at a time. */
html.alt-live .alt-lashes__sets {
  grid-template-columns: minmax(0, 1fr);
}

html.alt-live .alt-set {
  grid-area: 1 / 1;
}

html.alt-live .alt-lashes__tabs {
  display: inline-flex;
  justify-self: start;
}

html.alt-live .alt-lashes__tabs .abx-segmented__radio {
  min-height: 2.25rem;
  padding: 0 clamp(0.6rem, 2.4vw, 1rem);
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html.alt-live .alt-lashes__more {
  display: none;
}

@media (max-width: 59.99rem) {
  html.alt-live .alt-lashes__head .alt-lede,
  html.alt-live .alt-set__no {
    display: none;
  }

  html.alt-live .alt-lashes__head .alt-h2 {
    font-size: clamp(1.9rem, min(8vw, calc(var(--alt-vh) * 5.6)), 3rem);
  }

  html.alt-live .alt-set__name {
    font-size: clamp(2.6rem, min(15vw, calc(var(--alt-vh) * 9.5)), 5rem);
  }
}

@media (min-width: 60rem) {
  html.alt-live .alt-lashes .alt-ch__pin {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }

  html.alt-live .alt-lashes__head {
    grid-column: 1;
    grid-row: 1;
  }

  html.alt-live .alt-lashes__sets {
    grid-column: 1;
    grid-row: 2;
    align-content: center;
  }

  html.alt-live .alt-lashes__tabs {
    grid-column: 1;
    grid-row: 3;
  }

  html.alt-live .alt-lashes__figure {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  html.alt-live .alt-lashes__more {
    display: flex;
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-end;
  }
}

/* Brows + skin (live) ------------------------------------------------------- */

html.alt-live .alt-brows .alt-ch__pin,
html.alt-live .alt-skin .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.6rem, calc(var(--alt-vh) * 2), 1.5rem);
}

html.alt-live .alt-brows__figure,
html.alt-live .alt-skin__figure {
  min-height: calc(var(--alt-vh) * 19);
}

html.alt-live .alt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem clamp(0.9rem, 2.5vw, 1.75rem);
  font-family: var(--alt-serif);
  font-size: clamp(1.45rem, min(6.4vw, calc(var(--alt-vh) * 4.6)), 2.6rem);
  line-height: 1.1;
}

/* Upcoming steps wait as outlines; the active one is filled in. */
html.alt-live .alt-steps li {
  color: transparent;
  -webkit-text-stroke: 1px var(--abx-border-strong);
  transition: color var(--abx-dur-3) var(--abx-ease), -webkit-text-stroke-color var(--abx-dur-3) var(--abx-ease);
}

html.alt-live .alt-steps li.is-on {
  color: var(--abx-text);
  -webkit-text-stroke-color: transparent;
}

html.alt-live .alt-skin__panels {
  grid-template-columns: minmax(0, 1fr);
}

html.alt-live .alt-skin__panel {
  grid-area: 1 / 1;
  align-content: start;
}

html.alt-live .alt-skin__word {
  font-size: clamp(2.6rem, min(14vw, calc(var(--alt-vh) * 10)), 6rem);
  flex-wrap: wrap;
}

@media (max-width: 59.99rem) {
  html.alt-live .alt-brows__copy,
  html.alt-live .alt-skin__copy {
    max-width: none;
  }

  html.alt-live .alt-brows__copy .alt-lede {
    display: none;
  }

  html.alt-live .alt-brows__copy .alt-h2,
  html.alt-live .alt-skin__copy .alt-h2 {
    font-size: clamp(1.9rem, min(8vw, calc(var(--alt-vh) * 5.6)), 3rem);
  }

  /* A pinned phone screen only has room for so many rows; the rest live on
     the booking page, and the last row says so. */
  html.alt-live .alt-price-list li.is-over-sm {
    display: none;
  }
}

html.alt-live .alt-price-list li.is-over-lg {
  display: none;
}

.alt-price-list li.alt-price-list__more {
  display: none;
}

html.alt-live .alt-price-list li.alt-price-list__more.is-lg {
  display: block;
  color: var(--abx-text-muted);
  font-size: var(--abx-fs-100);
}

@media (max-width: 59.99rem) {
  html.alt-live .alt-price-list li.alt-price-list__more.is-lg {
    display: none;
  }

  html.alt-live .alt-price-list li.alt-price-list__more.is-sm {
    display: block;
    color: var(--abx-text-muted);
    font-size: var(--abx-fs-100);
  }
}

@media (min-width: 60rem) {
  html.alt-live .alt-brows .alt-ch__pin {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  html.alt-live .alt-brows__figure {
    align-self: stretch;
  }

  html.alt-live .alt-skin .alt-ch__pin {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  html.alt-live .alt-skin__copy {
    grid-column: 1;
    grid-row: 1;
  }

  html.alt-live .alt-skin__figure {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }
}

/* Work (live) --------------------------------------------------------------- */

html.alt-live .alt-work .alt-ch__pin {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}

html.alt-live .alt-work__head,
html.alt-live .alt-work__end {
  grid-area: 1 / 1;
  justify-items: center;
  text-align: center;
}

html.alt-live .alt-work__head .alt-h2,
html.alt-live .alt-work__end .alt-h3 {
  font-size: var(--alt-fs-hero);
  line-height: 0.96;
}

html.alt-live .alt-work__end .alt-h3 {
  max-width: 12em;
  font-size: var(--alt-fs-h2);
}

html.alt-live .alt-work__links {
  justify-content: center;
}

/* The photographs are drawn on the stage; the list stays for assistive tech. */
html.alt-live .alt-work__list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.alt-live .alt-work__caption {
  position: absolute;
  left: var(--alt-gutter);
  bottom: clamp(1.25rem, calc(var(--alt-vh) * 4.5), 3rem);
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.alt-work__no {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--alt-serif);
  font-size: clamp(2.5rem, min(11vw, calc(var(--alt-vh) * 9)), 5.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.alt-work__no b {
  font-weight: 400;
}

.alt-work__no i {
  margin-left: 0.5em;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--abx-text-subtle);
}

.alt-work__tag {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

/* Words (live) -------------------------------------------------------------- */

html.alt-live .alt-words .alt-ch__pin {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: calc(var(--alt-bar-h) + clamp(0.5rem, calc(var(--alt-vh) * 3), 2rem));
}

html.alt-live .alt-words__stack {
  align-items: center;
  gap: 0;
}

html.alt-live .alt-quote {
  grid-area: 1 / 1;
}

html.alt-live .alt-words__count {
  display: block;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--abx-text-muted);
}

html.alt-live .alt-words__count b {
  font-weight: 600;
  color: var(--abx-text);
}

/* Guide (live) -------------------------------------------------------------- */

html.alt-live .alt-guide .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 2.4), 2rem);
}

html.alt-live .alt-guide__stage {
  min-height: 0;
}

@media (max-width: 59.99rem) {
  html.alt-live .alt-guide .alt-ticks,
  html.alt-live .alt-guide__copy .alt-lede {
    display: none;
  }

  html.alt-live .alt-guide__copy .alt-h2 {
    font-size: clamp(1.9rem, min(8vw, calc(var(--alt-vh) * 5.6)), 3rem);
  }
}

@media (min-width: 60rem) {
  html.alt-live .alt-guide .alt-ch__pin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  html.alt-live .alt-book {
    --book-w: clamp(13rem, min(24vw, calc(var(--alt-vh) * 42)), 21rem);
  }
}

/* Short phones (iPhone SE and smaller): the supporting lines give way so
   the figure in each scene keeps its room. */
@media (max-width: 47.99rem) and (max-height: 41rem) {
  html.alt-live .alt-hero__eyebrow span,
  html.alt-live .alt-creed__note .alt-lede {
    display: none;
  }
}

@media (max-width: 47.99rem) and (max-height: 36rem) {
  html.alt-live .alt-hero__eyebrow {
    display: none;
  }

  html.alt-live .alt-hero__sub {
    font-size: 0.95rem;
  }
}

/* Short, wide screens (landscape phones, squat laptops): drop the garnish
   so the essentials of each pinned scene still fit. */
@media (max-height: 33rem) {
  html.alt-live .alt-hero__eyebrow,
  html.alt-live .alt-hero__sub,
  html.alt-live .alt-lashes__head .alt-lede,
  html.alt-live .alt-set__desc,
  html.alt-live .alt-brows__copy .alt-lede,
  html.alt-live .alt-skin__copy .alt-lede,
  html.alt-live .alt-creed__note .alt-lede,
  html.alt-live .alt-guide .alt-ticks,
  html.alt-live .alt-guide__copy .alt-lede {
    display: none;
  }
}

/* 7. MOTION PREFERENCES ==================================================== */

@media (prefers-reduced-motion: reduce) {
  .alt-cue i::after,
  .alt-cookie {
    animation: none;
  }

  .alt *,
  .alt *::before,
  .alt *::after {
    transition-duration: 0.01ms !important;
  }
}