/* ==========================================================================
   Leigh Harris · Gallery Noir
   An after-hours private gallery: warm near-black, bone type, one antique gold.
   Motion is transform/opacity only. Everything calms down under reduced motion.
   Smallest text on the page is 12px; muted and gold text clear 4.5:1 on the base.
   ========================================================================== */

:root {
  --bg: #0c0b0a;
  --bg-1: #100f0d;
  --bg-2: #161412;
  --bg-3: #1e1b18;
  --ink: #ece6da;
  --ink-2: #cdc5b7;
  --muted: #a8a092;
  --line: rgba(236, 230, 218, 0.12);
  --line-2: rgba(236, 230, 218, 0.22);
  --gold: #c9a45c;
  --gold-2: #dcbc7e;
  --gold-ink: #16110a;
  /* The Highness room (and the viewer/player when they show his work): spray-paint colour in place of gold */
  --pop-pink: #ff5fa2;
  --pop-orange: #ff8a3d;
  --pop-yellow: #ffd23f;
  --pop-cyan: #42d9e8;
  --pop-lime: #a6e34f;
  --pop-spray: linear-gradient(100deg, var(--pop-pink) 6%, var(--pop-orange) 40%, var(--pop-yellow) 66%, var(--pop-cyan) 96%);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1480px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --topbar: 72px;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--gold); color: var(--gold-ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* landmarks and sections focused by the skip link / in-page links, and dialog stages, draw no ring */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus, [data-lb-stage]:focus, [data-player-frame]:focus { outline: none; }

[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

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

/* ---------------------------------------------------------------- grain + progress */
.grain {
  position: fixed; inset: -12%; z-index: 150; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  17% { transform: translate3d(-3%, 2%, 0); }
  33% { transform: translate3d(2%, -4%, 0); }
  50% { transform: translate3d(-4%, -1%, 0); }
  67% { transform: translate3d(3%, 3%, 0); }
  83% { transform: translate3d(-1%, 4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; }

/* "Pause motion" (WCAG 2.2.2): everything that loops on its own holds still */
.is-still .grain, .is-still .marquee__track, .is-still .hn-tape__track, .is-still .pill__dot::after,
.is-still .reel__live::before, .is-still .lhb .lhb-dot::after { animation-play-state: paused; }
.motion {
  display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; transition: color 0.3s;
}
.motion__i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink); transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.motion__i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.motion__i .i-play { display: none; fill: currentColor; stroke: none; }
.motion[aria-pressed="true"] .i-pause { display: none; }
.motion[aria-pressed="true"] .i-play { display: block; }
.motion:hover { color: var(--ink); }
.motion:hover .motion__i { border-color: var(--ink); }
.motion[aria-pressed="true"] .motion__i { border-color: var(--gold); color: var(--gold); }
.motion--bar { min-width: 44px; justify-content: center; }
.motion--bar .motion__i { width: 36px; height: 36px; }

.progress span {
  display: block; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* ---------------------------------------------------------------- type + buttons */
.display {
  font-family: var(--serif);
  font-size: clamp(46px, 7.2vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display em, .hero__title em, .footer__title em, .paint__title em, .covers__title em { font-style: italic; }
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow__room { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; }
.eyebrow__room::after { content: ""; width: 36px; height: 1px; background: var(--line-2); }

.btn {
  --h: 54px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--h); padding: 0 26px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 1px solid transparent; overflow: hidden; isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold);
  transform: translateY(101%); transition: transform 0.55s var(--ease);
}
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: none; }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--gold-ink); }
.btn--line { border-color: var(--line-2); color: var(--ink); background: rgba(12, 11, 10, 0.2); }
.btn--line:hover, .btn--line:focus-visible { border-color: var(--ink); }
.btn__arrow { display: inline-block; transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.iconbtn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12, 11, 10, 0.45); color: var(--ink);
  cursor: pointer; transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { border-color: var(--ink); background: rgba(236, 230, 218, 0.06); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }
.inline-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* reveal on scroll (only when JS is running) */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* "Pause motion" holds the page still: anything still waiting to reveal is simply there (also when the
   switch is turned on mid-page), like under reduced motion */
.js.is-still [data-reveal], .js.is-still .route .route__stop { opacity: 1; transform: none; transition: none; }
.js.is-still .route::after { transform: none; transition: none; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px; height: var(--topbar);
  padding: 0 var(--edge);
  transition: transform 0.6s var(--ease), background-color 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.topbar.is-solid {
  background: rgba(12, 11, 10, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line);
}
.topbar.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
/* the LH monogram (client artwork, traced to a vector symbol #lh-mark) */
.brand__mark { flex: none; display: block; height: 40px; width: auto; aspect-ratio: 1652 / 2416; fill: currentColor; color: var(--ink); }
.brand:hover .brand__mark { color: var(--gold-2); }
.menu__brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__name { font: 400 22px/1 var(--serif); letter-spacing: 0.01em; white-space: nowrap; }
.topnav { display: flex; gap: 6px; }
.topnav a {
  position: relative; padding: 10px 12px; text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  transition: color 0.3s;
}
.topnav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease);
}
.topnav a:hover, .topnav a.is-current { color: var(--ink); }
.topnav a:hover::after, .topnav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.topbar__cta {
  display: inline-flex; align-items: center; flex: none; min-height: 42px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(201, 164, 92, 0.6); color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.topbar__cta:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.topbar__menu {
  display: none; align-items: center; gap: 12px; flex: none; min-height: 44px; min-width: 44px; padding: 0 4px 0 10px;
  background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.topbar__menu i { position: relative; width: 22px; height: 8px; }
.topbar__menu i::before, .topbar__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.topbar__menu i::before { top: 0; }
.topbar__menu i::after { bottom: 0; left: 6px; }

/* ---------------------------------------------------------------- hero (one piece, fully lit)
   LH.hero[0] is a square studio photo on a pure black backdrop. The image is blended with "lighten"
   over a frame painted in the page colour, so its black turns into exactly the page's warm near-black
   and the square has no visible edge; only the floor gets a soft fade.
   Default (phones, portrait tablets): the photo sits full width under the topbar and the name overlaps
   its lower edge on a dark gradient. Landscape screens from 861px: an editorial split (see below). */
.hero {
  --mw: min(100vw, 64vh); /* the square photo panel; app.js HERO_SIZES and the preload follow it */
  position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: var(--bg);
  display: flex; flex-direction: column;
  padding: var(--topbar) var(--edge) clamp(22px, 3.4vw, 40px);
}
@supports (height: 100svh) { .hero { min-height: max(640px, 100svh); --mw: min(100vw, 64svh); } }
.hero__media {
  position: relative; z-index: 0; flex: none; width: var(--mw); aspect-ratio: 1 / 1;
  margin: 0 calc(50% - var(--mw) / 2); will-change: transform;
}
.hero__frame { position: absolute; inset: 0; overflow: hidden; background: var(--bg); isolation: isolate; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; transform-origin: 42% 66%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(12, 11, 10, 0.86) 14%, rgba(12, 11, 10, 0.35) 34%, rgba(12, 11, 10, 0) 52%);
}
/* the hero's own floor: the photo drifts down a little as the page scrolls, so its lower edge always melts
   into the page here instead of meeting the section's edge (above the photo, below the type) */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: clamp(56px, 10vh, 110px); pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 8%, rgba(12, 11, 10, 0.6) 45%, rgba(12, 11, 10, 0));
}
/* a slow settle once the photo has decoded (app.js adds .is-set); nothing under reduced motion or "Pause motion" */
.js .hero__frame img { transform: scale(1.06) translate3d(0, 1.2%, 0); }
.js .hero.is-set .hero__frame img { transform: none; transition: transform 3s var(--ease); }
.js.is-still .hero .hero__frame img, .js.is-still .hero.is-set .hero__frame img { transform: none; transition: none; }

.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 860px; margin-top: calc(var(--mw) * -0.3); padding-bottom: 24px; }
.hero.hero--bare { --mw: 0px; }
.hero--bare .hero__inner { margin-top: auto; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2);
}
.hero__eyebrow, .hero__subject { text-shadow: 0 1px 14px rgba(12, 11, 10, 0.85); }
.rule { width: 48px; height: 1px; background: var(--gold); transform-origin: left; flex: none; }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(74px, 12.4vw, 216px); line-height: 0.84; letter-spacing: -0.035em;
  margin-left: -0.04em; text-shadow: 0 2px 30px rgba(12, 11, 10, 0.55);
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__line--2 { padding-left: 0.62em; }
.hero__title .ch { display: inline-block; will-change: transform; }
/* each letter is its own inline-block: never let a word break between letters */
.hero__line, .hero__eyebrow { white-space: nowrap; }
.js .hero__title .ch { transform: translate3d(0, 105%, 0); }
.js .hero.is-ready .hero__title .ch { transform: none; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 45ms + 100ms); }

/* rotating subject line: every word shares one grid cell, so the line never reflows. Words slide through a
   clipped line (transform only) and are never part-transparent, so the text always keeps its full contrast. */
.hero__subject { display: flex; align-items: center; gap: 16px; margin-top: 26px; font: italic 400 clamp(26px, 2.3vw, 36px)/1.2 var(--serif); color: var(--ink); }
.hero__subject::before { content: ""; width: 32px; height: 1px; background: var(--gold); flex: none; }
.rot { display: inline-grid; overflow: hidden; padding: 0 0.25em 0.08em 0; margin: 0 -0.25em -0.08em 0; }
.rot > i { grid-area: 1 / 1; white-space: nowrap; }
.js .rot > i { visibility: hidden; transform: translate3d(0, 110%, 0); transition: none; }
.js .rot > i.is-on { visibility: visible; transform: none; transition: transform 0.9s var(--ease) 0.12s; }
.js .rot > i.is-out { visibility: hidden; transform: translate3d(0, -110%, 0); transition: transform 0.55s var(--ease-io), visibility 0s linear 0.55s; }

.hero__lede { max-width: 470px; margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.hero__proof a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; }
.hero__proof a:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.hero__proof svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.hero__proof b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.js .hero__eyebrow, .js .hero__subject, .js .hero__lede, .js .hero__proof, .js .hero__foot { opacity: 0; transform: translate3d(0, 16px, 0); }
.js .hero__ctas { transform: translate3d(0, 16px, 0); }
.js .hero.is-ready .hero__eyebrow, .js .hero.is-ready .hero__subject, .js .hero.is-ready .hero__lede, .js .hero.is-ready .hero__ctas, .js .hero.is-ready .hero__proof, .js .hero.is-ready .hero__foot {
  opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.js .hero.is-ready .hero__eyebrow { transition-delay: 0.1s; }
.js .hero.is-ready .hero__subject { transition-delay: 0.5s; }
.js .hero.is-ready .hero__lede { transition-delay: 0.6s; }
.js .hero.is-ready .hero__ctas { transition-delay: 0.7s; }
.js .hero.is-ready .hero__proof { transition-delay: 0.85s; }
.js .hero.is-ready .hero__foot { transition-delay: 1s; }

/* the caption (from the gallery entry) and the hero's own "Pause motion" switch */
.hero__foot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
}
.hero__cap { display: flex; align-items: baseline; gap: 14px; min-width: 0; white-space: nowrap; }
.hero__cap-k { flex: none; color: var(--gold); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.hero__cap-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero__cap i { font: italic 400 18px/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.hero__cap-p { color: var(--muted); }

/* Landscape screens from 861px (client, 19 Oct): name, copy and CTAs on the LEFT; the photo is a square
   panel of up to 900px on the RIGHT, bottom-aligned, bleeding off the right edge until the page is wider
   than --maxw. Charlie sits in profile facing right, so her back faces the type: the text column runs up
   to her back (--tuck lets it overlap the empty black margin behind her) and the photo's left edge fades
   into the page, so type and figure read as one composition. --mw also shrinks to fit a short window. */
@media (min-width: 861px) and (orientation: landscape) {
  .hero {
    --ml: max(0px, calc((100vw - var(--maxw)) / 2));
    --mw: min(54vw, 900px, calc(100vh - var(--topbar) - 16px));
    --tuck: calc(var(--mw) * 0.05);
    /* as tall as the photo (+ topbar), not the whole window: no empty band above the name on tall screens */
    min-height: calc(var(--mw) + var(--topbar) + clamp(20px, 3vh, 40px));
    justify-content: flex-end;
    padding: calc(var(--topbar) + clamp(12px, 3vh, 28px)) calc(var(--ml) + var(--mw) - var(--tuck)) clamp(24px, 3.4vw, 40px) var(--edge); /* --edge already holds the centring offset (--ml) */
  }
  @supports (height: 100svh) { .hero { --mw: min(54vw, 900px, calc(max(640px, 100svh) - var(--topbar) - 16px)); } }
  .hero__media { position: absolute; left: auto; right: var(--ml); bottom: 0; margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
  .hero__media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(12, 11, 10, 0) 10%); }
  .hero__frame img { transform-origin: 58% 66%; }
  /* the type block sits at the right of its column, so it runs right up to Charlie's back */
  .hero__inner { margin-top: 0; padding-bottom: 0; align-self: flex-end; }
  /* the name is sized by the column it sits in and by the window height, so the whole hero fits a 768px laptop */
  .hero__title {
    font-size: clamp(72px, min(calc((100vw - var(--edge) - var(--ml) - var(--mw) + var(--tuck)) / 3), 17.5vh), 210px); /* the column / 3: "Harris" + its 0.5em indent is ~2.98em */
    text-shadow: none;
  }
  .hero__line--2 { padding-left: 0.5em; }
  .hero__subject { margin-top: clamp(14px, 2.6vh, 26px); }
  .hero__ctas { margin-top: clamp(18px, 3.4vh, 30px); }
  .hero__foot { margin-top: clamp(24px, 4.4vh, 64px); }
}
/* a narrow text column (small landscape tablets and windows): slimmer CTAs keep them on one row */
@media (min-width: 861px) and (max-width: 1100px) and (orientation: landscape) {
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { --h: 50px; padding: 0 20px; font-size: 13.5px; }
}

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding-block: clamp(96px, 12vw, 180px); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.sec-head__lede { max-width: 440px; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; padding-bottom: 8px; }

/* ---------------------------------------------------------------- filters */
.filters { display: flex; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
/* Tablets and up: the chips wrap onto a second row when they need it (the gold bar follows in both axes).
   Phones (max-width: 640px, below): one row that scrolls sideways with soft edge fades. Chip labels never break. */
.filters__scroll {
  position: relative; display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.2vw, 32px); flex: 1; min-width: 0;
  padding: 4px 2px 0; margin-bottom: -1px;
}
.filters__scroll.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.filters__scroll.is-clipped.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); }
.filters__scroll.is-clipped.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.chip {
  position: relative; flex: none; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: 12px 3px 18px; background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  transition: color 0.35s;
}
.chip__n { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.35s; }
.chip:hover, .chip[aria-pressed="true"] { color: var(--ink); }
.chip[aria-pressed="true"] .chip__n { color: var(--gold); }
.chip:focus-visible { outline-offset: 0; }
.filters__scroll.is-wrapped .chip { padding: 10px 3px 14px; }
.filters__bar {
  position: absolute; left: 0; top: 0; width: 100px; height: 2px; background: var(--gold);
  transform-origin: 0 50%; transform: translateX(0) scaleX(0);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.filters__count { flex: none; padding-bottom: 18px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters__count b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- works (JS-packed exhibition wall) */
.works { position: relative; list-style: none; margin: 0; padding: 0; min-height: 200px; }
.work { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.work.is-hidden { visibility: hidden; pointer-events: none; }
.js .work .work__btn { opacity: 0; transform: translate3d(0, 44px, 0); }
.js .work.is-in .work__btn { opacity: 1; transform: none; transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.js.is-still .work .work__btn { opacity: 1; transform: none; transition: none; } /* "Pause motion": tiles are simply there */
.work__btn {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.work__btn:focus-visible { outline-offset: 6px; }
.work__frame { position: relative; display: block; width: 100%; flex: none; overflow: hidden; background: var(--bg-2); }
.work__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1.4s var(--ease), opacity 0.8s;
  opacity: 0;
}
.work__frame img.is-loaded { opacity: 1; }
.work__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(12, 11, 10, 0) 45%, rgba(12, 11, 10, 0.45) 100%);
  transition: opacity 0.8s var(--ease);
}
.work__view {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(12, 11, 10, 0.55); border: 1px solid rgba(236, 230, 218, 0.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.7); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.work__view svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.work__slides {
  position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px;
  background: rgba(12, 11, 10, 0.66); font-size: 12px; letter-spacing: 0.08em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.work__btn:hover .work__frame img, .work__btn:focus-visible .work__frame img { transform: scale(1.05); }
.work__btn:hover .work__frame::after, .work__btn:focus-visible .work__frame::after { opacity: 0.2; }
.work__btn:hover .work__view, .work__btn:focus-visible .work__view { opacity: 1; transform: none; }
.has-cursor .work__btn:hover:not(:focus-visible) .work__view { opacity: 0; transform: scale(0.7); }

.work__label { display: block; padding-top: 14px; min-width: 0; }
.work__row { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.work__no { color: var(--gold); font-variant-numeric: tabular-nums; }
.work__row::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--line); }
.work__year { order: 2; font-variant-numeric: tabular-nums; }
.work__title {
  display: block; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 23px/1.2 var(--serif); letter-spacing: -0.005em; color: var(--ink);
}
.work__title span { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease); padding-bottom: 1px; }
.work__btn:hover .work__title span, .work__btn:focus-visible .work__title span { background-size: 100% 1px; }
.work__place { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.work--big .work__title { font-size: 30px; }
/* tablets: the placement/style line under a tile may take two lines (app.js geometry() gives the
   caption the room for it below 1024px), instead of cutting off mid-word */
@media (max-width: 1024px) {
  .work__place { line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

.works__more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 72px); }

/* ---------------------------------------------------------------- marquee */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; background: var(--bg-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 36px; width: max-content;
  font: italic 400 clamp(30px, 3.6vw, 52px)/1 var(--serif); color: var(--ink-2); white-space: nowrap;
  animation: marquee 90s linear infinite; will-change: transform;
}
.marquee__track i { font-style: normal; font-size: 0.4em; color: var(--gold); }
@keyframes marquee { to { transform: translate3d(calc(-50% - 18px), 0, 0); } }

/* ---------------------------------------------------------------- reel tile (shared) */
.reel {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0;
  overflow: hidden; background: #0a0908; cursor: pointer; color: var(--ink);
  border-radius: 4px; text-align: left; isolation: isolate;
}
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0a0908; }
.reel__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.62) 100%);
}
.reel__play {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(236, 230, 218, 0.94); color: var(--bg);
  opacity: 0; transform: scale(0.6); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.reel__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.reel:hover .reel__play, .reel:focus-visible .reel__play, .rtile:hover .reel__play, .rtile:focus-visible .reel__play { opacity: 1; transform: none; }
.has-cursor .reel:hover:not(:focus-visible) .reel__play, .has-cursor .rtile:hover:not(:focus-visible) .reel__play { opacity: 0; }
.reel__sound {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}
.reel__sound svg, .reel__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.reel__time {
  position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55);
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: #fff; font-variant-numeric: tabular-nums;
}
.reel__live {
  position: absolute; top: 13px; left: 13px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.reel__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.6); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(201, 164, 92, 0); } }
.reel__live + .reel__time { left: auto; right: 12px; }
.reel__cta {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 12px; border-radius: 999px;
  background: rgba(12, 11, 10, 0.66); border: 1px solid rgba(236, 230, 218, 0.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; white-space: nowrap;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.reel:hover .reel__cta, .reel:focus-visible .reel__cta { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* ---------------------------------------------------------------- ROOM II: reel wall */
.sec--reels { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 30%, var(--bg-1) 70%, var(--bg) 100%); }
.rwall {
  --p: 0; --lift: 90px;
  list-style: none; margin: 0; padding: 0 0 var(--lift);
  /* five columns drawn on a 10-track grid (every tile spans two), so an unfinished last row can be centred */
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(12px, 1.6vw, 26px);
}
.rwall__item { grid-column: span 2; transform: translate3d(0, calc(var(--stag, 0px) + var(--p) * var(--f, 0) * 1px), 0); will-change: transform; }
.rwall__item:nth-child(5n + 1) { --f: -26; }
.rwall__item:nth-child(5n + 2) { --f: 34; --stag: var(--lift); }
.rwall__item:nth-child(5n + 3) { --f: -10; --stag: calc(var(--lift) * 0.35); }
.rwall__item:nth-child(5n + 4) { --f: 44; --stag: var(--lift); }
.rwall__item:nth-child(5n + 5) { --f: -20; }
/* a short last row sits centred on the lower, staggered line, so it never meets the lifted tiles above */
@media (min-width: 1025px) {
  .rwall__item:nth-child(5n + 1):nth-last-child(4) { grid-column: 2 / span 2; }
  .rwall__item:nth-child(5n + 1):nth-last-child(3) { grid-column: 3 / span 2; }
  .rwall__item:nth-child(5n + 1):nth-last-child(2) { grid-column: 4 / span 2; }
  .rwall__item:nth-child(5n + 1):nth-last-child(1) { grid-column: 5 / span 2; }
  .rwall__item:nth-child(5n + 1):nth-last-child(-n + 4), .rwall__item:nth-child(5n + 1):nth-last-child(-n + 4) ~ .rwall__item { --f: 34; --stag: var(--lift); }
}
.rtile { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.rtile:focus-visible { outline-offset: 6px; }
.rtile .reel { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(236, 230, 218, 0.06); transition: transform 0.8s var(--ease), box-shadow 0.6s; }
.rtile:hover .reel, .rtile:focus-visible .reel { transform: translate3d(0, -6px, 0); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(201, 164, 92, 0.5); }
.rtile__label { display: block; padding-top: 14px; min-width: 0; }
.rtile__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rtile__no { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtile__meta { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.06em; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtile__meta svg { width: 12px; height: 12px; fill: var(--gold); }
.rtile__title { display: block; margin-top: 6px; font: 400 21px/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.rtile__title { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease); }
.rtile:hover .rtile__title, .rtile:focus-visible .rtile__title { background-size: 100% 1px; }

/* ---------------------------------------------------------------- ROOM III: before / after + cover-up reels */
/* the sliders, then the cover-up call to action under them (left); the cover-up reels down the right */
.fixes {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 0.82fr); grid-template-rows: auto 1fr;
  grid-template-areas: "ba covers" "cta covers"; gap: 0 clamp(32px, 4vw, 72px); align-items: start;
}
.ba-list { grid-area: ba; }
.covers { grid-area: covers; }
.fixcta { grid-area: cta; }
.ba-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ba:nth-child(2) { margin-top: clamp(0px, 5vw, 80px); }
.ba__frame {
  --p: 50;
  position: relative; overflow: hidden; background: var(--bg-2);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ba__before { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc((var(--p) - 100) * 1%), 0, 0); will-change: transform; }
.ba__before img { transform: translate3d(calc((100 - var(--p)) * 1%), 0, 0); will-change: transform; }
.ba__handle { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc((var(--p) - 50) * 1%), 0, 0); will-change: transform; }
.ba__handle::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(201, 164, 92, 0), var(--gold) 12%, var(--gold) 88%, rgba(201, 164, 92, 0));
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}
.ba__knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; pointer-events: auto; cursor: ew-resize; touch-action: none;
  background: rgba(12, 11, 10, 0.72); border: 1px solid var(--gold); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease), background-color 0.3s;
}
.ba__knob svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ba__frame.is-dragging .ba__knob, .ba__knob:hover { transform: scale(1.08); background: rgba(201, 164, 92, 0.92); color: var(--gold-ink); }
.ba__tag {
  position: absolute; top: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px;
  background: rgba(12, 11, 10, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none;
  transition: opacity 0.35s;
}
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; color: var(--gold-2); }
.ba__cap { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding-top: 18px; }
.ba__no { grid-row: span 2; font: italic 400 40px/1 var(--serif); color: var(--gold); }
.ba__title { font: 400 27px/1.15 var(--serif); }
.ba__blurb { grid-column: 2; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }
.ba__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.ba__meta a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--gold); }

.covers { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.covers__tile { width: 100%; max-width: 330px; }
.covers__title { font: 400 clamp(30px, 2.6vw, 38px)/1.05 var(--serif); }
.covers__note { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.reel--cover { border-radius: 6px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(201, 164, 92, 0.3); }
.reel--cover .reel__video { transition: opacity 0.26s; }
.reel--cover.is-swapping .reel__video { opacity: 0.15; }
.cover__bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 1; }
.cover__bars span { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.cover__bars i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.26s linear; }
.cover__top { position: absolute; top: 24px; left: 13px; right: 13px; display: flex; justify-content: space-between; align-items: center; }
.cover__top .reel__live { position: static; }
.cover__pager { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.cover__bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.cover__title { padding: 0 4px; font: 400 25px/1.1 var(--serif); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); text-wrap: balance; }
.cover__bottom .reel__cta { position: static; }

.covers__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.covers__list li { border-top: 1px solid var(--line); }
.covers__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 8px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.covers__n { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--gold); font-variant-numeric: tabular-nums; }
.covers__t { font: 400 19px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.covers__d { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.covers__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.covers__go svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.covers__row:hover .covers__go, .covers__row:focus-visible .covers__go { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.covers__row.is-now .covers__t { color: var(--gold-2); }
.covers__row.is-now .covers__go { border-color: rgba(201, 164, 92, 0.7); }

/* the cover-up call to action: a quiet framed panel under the sliders and reels */
.fixcta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "copy action";
  gap: clamp(20px, 2.2vw, 30px) clamp(28px, 4vw, 64px); align-items: end;
  margin-top: clamp(48px, 5.4vw, 96px); padding: clamp(30px, 3.6vw, 56px);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px;
}
.fixcta::before {
  content: ""; position: absolute; z-index: -1; left: -12%; top: -60%; width: 70%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, 0.11), transparent);
}
.fixcta::after { content: ""; position: absolute; left: clamp(30px, 3.6vw, 56px); top: 0; width: 64px; height: 1px; background: var(--gold); }
.fixcta__title { grid-area: title; max-width: 15em; font: 400 clamp(34px, 3.3vw, 56px)/1.04 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.fixcta__title em { font-style: italic; color: var(--gold-2); }
.fixcta__body { display: contents; }
.fixcta__body p { grid-area: copy; max-width: 460px; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.fixcta__body .btn { grid-area: action; }

/* ---------------------------------------------------------------- story */
.sec--story { background: var(--bg-1); border-block: 1px solid var(--line); overflow: hidden; }
.sec--story::before {
  content: ""; position: absolute; left: -10%; top: 0; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, 0.07), transparent);
}
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.story__media { position: sticky; top: calc(var(--topbar) + 40px); display: flex; justify-content: center; }
.arch { position: relative; width: min(100%, 440px); }
.arch::before, .arch::after {
  content: ""; position: absolute; border: 1px solid rgba(201, 164, 92, 0.42); border-radius: 999px 999px 0 0; pointer-events: none; z-index: 1;
}
.arch::before { inset: -16px -16px 44px -16px; border-bottom: 0; }
.arch::after { inset: -30px -30px 45% -30px; border-bottom: 0; border-color: rgba(201, 164, 92, 0.16); }
.reel--arch { aspect-ratio: 5 / 8; border-radius: 999px 999px 0 0; }
.reel--arch .reel__live { top: auto; bottom: 64px; left: 50%; transform: translateX(-50%); }
.reel--arch .reel__cta { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; padding: 0 16px; }
.arch__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.arch__cap b { font: italic 400 19px/1.2 var(--serif); letter-spacing: 0; color: var(--ink); }
.story__copy { margin-top: clamp(28px, 3vw, 44px); max-width: 620px; }
.story__copy p + p { margin-top: 18px; }
.story__copy p { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }
.story__copy .story__lead { font: 400 clamp(22px, 2vw, 28px)/1.4 var(--serif); color: var(--ink); }

.route {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  list-style: none; margin: clamp(44px, 5vw, 64px) 0 0; padding: 30px 0 0;
}
.route::before, .route::after { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 1px; }
.route::before { background: var(--line); }
.route::after { background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform 2.2s var(--ease-io); }
.route.is-in::after { transform: scaleX(1); }
.route__stop { position: relative; display: flex; flex-direction: column; gap: 4px; }
.route__dot { position: absolute; top: -30px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--gold); }
.route__stop--now .route__dot { background: var(--gold); box-shadow: 0 0 0 6px rgba(201, 164, 92, 0.14); }
.route__city { font: 400 26px/1.1 var(--serif); }
.route__note { font-size: 13px; color: var(--muted); }
.js .route .route__stop { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .route.is-in .route__stop { opacity: 1; transform: none; }
.js .route.is-in .route__stop:nth-child(2) { transition-delay: 0.7s; }
.js .route.is-in .route__stop:nth-child(3) { transition-delay: 1.4s; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(48px, 5vw, 72px) 0 0; border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 22px 16px 0 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 18px; }
.stat:last-child { border-right: 0; }
.stat dt { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; text-wrap: balance; }
.stat dd { margin: 0; font: 400 clamp(38px, 3.8vw, 58px)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat dd sup { font-size: 0.45em; color: var(--gold); vertical-align: top; position: relative; top: 0.25em; margin-left: 2px; }

.quote { margin: clamp(48px, 5vw, 72px) 0 0; padding-left: 28px; border-left: 1px solid var(--gold); max-width: 620px; }
.quote blockquote { margin: 0; }
.quote p { font: italic 400 clamp(28px, 2.8vw, 40px)/1.2 var(--serif); text-wrap: balance; }
.quote figcaption { margin-top: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.paint { margin-top: clamp(80px, 9vw, 140px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.paint__title { font: 400 clamp(36px, 4vw, 56px)/1 var(--serif); }
.paint__note { margin-top: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.paint__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; align-items: end; }
.paint__item a { display: block; text-decoration: none; }
.paint__frame {
  position: relative; display: block; padding: clamp(8px, 1vw, 14px); background: #15120e;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.55), inset 0 0 0 5px #15120e, inset 0 0 0 6px rgba(201, 164, 92, 0.22), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.7s var(--ease);
}
.paint__frame img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.paint__item a:hover .paint__frame { transform: translate3d(0, -6px, 0); }
.paint__cap { display: block; margin-top: 14px; font: italic 400 19px/1.2 var(--serif); }
.paint__cap small { display: block; margin-top: 2px; font: 400 12px/1.4 var(--sans); letter-spacing: 0.08em; color: var(--muted); font-style: normal; }

/* ---------------------------------------------------------------- ROOM V: The Highness
   The one loud room. Same near-black and type, but lit with spray-paint colour (pink, orange, yellow, cyan,
   lime) where the rest of the house uses gold: a gradient name, a bio tape, a mosaic of square tiles (2x2 for
   featured pieces, laid out by app.js) and pop-art offset shadows on hover. Colour sits on marks and fills;
   text on it is near-black (6:1 and up), text on the dark stays bone. */
.sec--hn { overflow: hidden; isolation: isolate; background: var(--bg); }
.hn__haze {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 26% at 6% 4%, rgba(255, 95, 162, 0.15), transparent 72%),
    radial-gradient(34% 24% at 98% 16%, rgba(66, 217, 232, 0.11), transparent 72%),
    radial-gradient(40% 22% at 4% 62%, rgba(255, 210, 63, 0.06), transparent 72%),
    radial-gradient(44% 26% at 92% 96%, rgba(255, 95, 162, 0.08), transparent 72%);
}
/* Ben-Day dots: a pop-art halftone drifting out of the top right corner */
.hn__haze::after {
  content: ""; position: absolute; right: 0; top: 0; width: min(64vw, 860px); height: min(70vw, 620px); opacity: 0.32;
  background: radial-gradient(circle, rgba(255, 95, 162, 0.75) 1.3px, transparent 1.9px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 72%);
}
/* Coloured light, after studio.frasermalyk.com: a slow multi-colour wash with blurred orbs drifting through
   it, dimmed for the dark page and faded out at the room's top and bottom edges. Everything moves by
   transform only (composited, no repaints on a ~2500px-tall room) and holds still under Pause motion. */
.hn__haze { overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%); }
.hn__wash {
  position: absolute; top: 0; bottom: 0; left: 0; width: 300%; opacity: 0.26; will-change: transform;
  background: linear-gradient(115deg, #ff4f9a 0%, #8b5cff 17%, #2fd3e6 33%, #ff6a4f 48%, #c04dff 63%, #2fd3e6 80%, #ff4f9a 100%);
  animation: hnWash 14s ease-in-out infinite alternate, hnHueWash 9s ease-in-out infinite alternate;
}
/* Moving lights: four soft colour lamps on looping paths, out of phase so the room never sits still */
.hn__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; will-change: transform; }
.hn__orb--1 { width: 42vmax; height: 42vmax; left: -10vmax; top: 2%; background: #ff4f9a; opacity: 0.45; animation: hnOrb1 13s ease-in-out infinite, hnHuePink 7s ease-in-out infinite alternate; }
.hn__orb--2 { width: 36vmax; height: 36vmax; right: -8vmax; top: 30%; background: #2fd3e6; opacity: 0.36; animation: hnOrb2 16s ease-in-out infinite, hnHueTeal 9s ease-in-out infinite alternate; }
.hn__orb--3 { width: 34vmax; height: 34vmax; left: 18%; bottom: -4%; background: #8b5cff; opacity: 0.38; animation: hnOrb3 19s ease-in-out infinite, hnHueViolet 8s ease-in-out infinite alternate -3s; }
.hn__orb--4 { width: 26vmax; height: 26vmax; left: 46%; top: 12%; background: #ff8a3d; opacity: 0.24; animation: hnOrb4 22s ease-in-out infinite, hnHueWarm 6s ease-in-out infinite alternate -2s; }
@keyframes hnWash { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-66.666%, 0, 0); } }
/* Changing colour: each lamp sweeps its own arc of the pop palette (pink, magenta, violet, blue, teal, warm
   orange) on its own clock. The arcs skip the yellow-greens, which turn muddy over near-black. */
@keyframes hnHuePink { from { filter: blur(80px) hue-rotate(-150deg); } to { filter: blur(80px) hue-rotate(30deg); } }
@keyframes hnHueTeal { from { filter: blur(80px) hue-rotate(0deg); } to { filter: blur(80px) hue-rotate(150deg); } }
@keyframes hnHueViolet { from { filter: blur(80px) hue-rotate(-70deg); } to { filter: blur(80px) hue-rotate(100deg); } }
@keyframes hnHueWarm { from { filter: blur(80px) hue-rotate(-70deg); } to { filter: blur(80px) hue-rotate(10deg); } }
@keyframes hnHueWash { from { filter: hue-rotate(-50deg); } to { filter: hue-rotate(50deg); } }
@keyframes hnOrb1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(26vmax, 8vmax, 0) scale(1.15); }
  50% { transform: translate3d(40vmax, 30vmax, 0) scale(0.9); } 75% { transform: translate3d(8vmax, 22vmax, 0) scale(1.1); } }
@keyframes hnOrb2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 30% { transform: translate3d(-30vmax, -12vmax, 0) scale(0.9); }
  60% { transform: translate3d(-44vmax, 14vmax, 0) scale(1.2); } 80% { transform: translate3d(-14vmax, 20vmax, 0) scale(1); } }
@keyframes hnOrb3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); } 33% { transform: translate3d(30vmax, -24vmax, 0) scale(1.15); }
  66% { transform: translate3d(-16vmax, -36vmax, 0) scale(1); } }
@keyframes hnOrb4 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-28vmax, 18vmax, 0) scale(1.25); }
  50% { transform: translate3d(-10vmax, 44vmax, 0) scale(0.85); } 75% { transform: translate3d(20vmax, 24vmax, 0) scale(1.15); } }
.is-still .hn__wash, .is-still .hn__orb { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hn__wash, .hn__orb { animation: none; } }

.hn-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px clamp(32px, 6vw, 96px); align-items: end; }
.hn-title { font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 13.4vw, 236px); line-height: 0.84; letter-spacing: -0.035em; }
.hn-title__the { display: block; margin: 0 0 0.04em 0.05em; font-size: 0.36em; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.hn-title__name {
  display: inline-block; padding: 0 0.12em 0.12em 0; margin: 0 -0.12em -0.12em 0; font-style: italic;
  background: var(--pop-spray); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hn-head__side { min-width: 0; }
.hn-lede { max-width: 500px; margin-top: clamp(26px, 2.6vw, 40px); font-size: 16.5px; line-height: 1.7; color: var(--ink); text-wrap: pretty; text-shadow: 0 1px 16px rgba(12, 11, 10, 0.75); }
/* the moving coloured light passes right behind the intro: a soft dark pool under the head copy keeps the
   lede at 4.5:1 or better whatever colour and position the lamps are at */
.hn-head__main { position: relative; isolation: isolate; }
.hn-head__main::before {
  content: ""; position: absolute; inset: -40px calc(-1 * var(--gutter)); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 11, 10, 0.55), rgba(12, 11, 10, 0));
}

/* his Instagram profile, as a card: name + handle, the bio's motto and tags, Follow */
.hn-profile {
  position: relative; display: grid; gap: 18px; max-width: 500px; padding: 22px clamp(20px, 2vw, 28px) 24px;
  background: rgba(20, 18, 16, 0.78); border: 1px solid var(--line); border-radius: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hn-profile::before { content: ""; position: absolute; left: clamp(20px, 2vw, 28px); top: -1px; width: 96px; height: 2px; background: var(--pop-spray); }
.hn-profile__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hn-profile__avatar {
  flex: none; width: 54px; aspect-ratio: 1; padding: 2.5px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--pop-pink), var(--pop-orange), var(--pop-yellow), var(--pop-cyan), var(--pop-pink));
}
.hn-profile__avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg); border: 2.5px solid #141210; font: italic 400 19px/1 var(--serif); color: var(--ink);
}
.hn-profile__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hn-profile__who b { font-size: 17px; font-weight: 600; }
.hn-profile__who span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.hn-profile__motto { font: italic 400 clamp(28px, 2.5vw, 38px)/1.08 var(--serif); color: var(--ink); text-wrap: balance; }
.hn-profile__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: -4px 0 0; padding: 0; }
.hn-profile__tags li {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.hn-follow { justify-self: start; max-width: 100%; background: var(--pop-pink); color: var(--gold-ink); font-weight: 600; }
.hn-follow > span:not(.btn__arrow) { overflow: hidden; text-overflow: ellipsis; }
.hn-follow svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hn-follow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pop-yellow);
  transform: translateY(101%); transition: transform 0.55s var(--ease);
}
.hn-follow:hover::before, .hn-follow:focus-visible::before { transform: none; }

/* the threshold into The Highness: the bio tape sits across the section boundary. A 180px clip box with
   -90px margins: zero net layout, and the over-long, tilted tape can't cause sideways scroll. */
.hn-threshold { position: relative; z-index: 5; height: 180px; margin: -90px 0; overflow: hidden; pointer-events: none; display: flex; align-items: center; }
.hn-threshold .hn-tape { flex: none; width: calc(100% + 12vw); margin: 0 -6vw; } /* sized to the screen, not to its long track */
.hn-gallery { margin-top: clamp(64px, 7vw, 112px); }

/* the tape: his bio, on a strip of yellow slapped across the threshold at an angle */
.hn-tape {
  --tp-t: 15px; --tp-b: 14px;
  position: relative; z-index: 1; margin: clamp(64px, 7vw, 112px) -6vw clamp(56px, 6.4vw, 104px); padding: var(--tp-t) 0 var(--tp-b);
  background: var(--pop-yellow); color: var(--gold-ink); transform: rotate(-2.2deg);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9);
}
.hn-tape::before, .hn-tape::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: rgba(12, 11, 10, 0.18); }
.hn-tape::before { top: 5px; }
.hn-tape::after { bottom: 5px; }
.hn-tape__track { display: flex; width: max-content; animation: hnTape 46s linear infinite; will-change: transform; }
.hn-tape__track > div { display: flex; flex: none; align-items: center; }
.hn-tape__track span { padding: 0 0.85em; font: 600 clamp(15px, 1.5vw, 23px)/1.1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
/* separators: one black diagonal stripe the full height of the tape, caution-tape style */
.hn-tape__hz { flex: none; align-self: stretch; width: clamp(36px, 3.15vw, 48px); margin: calc(var(--tp-t) * -1) 1em calc(var(--tp-b) * -1);
  background: #141210; transform: skewX(-32deg); }
@keyframes hnTape { to { transform: translate3d(-50%, 0, 0); } }

/* the mosaic: square cells (100cqi = the grid's width); app.js places the 2x2 tiles and the closing tile */
.hn-gallery { container-type: inline-size; }
.hn-grid {
  --cols: 4; --gap: clamp(6px, 0.75vw, 12px);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  grid-auto-flow: row dense; gap: var(--gap);
  list-style: none; margin: 0; padding: 0;
}
@supports not (width: 1cqi) {
  .hn-grid { grid-auto-rows: auto; }
  .hn-item:not(.hn-item--big), .hn-cta { aspect-ratio: 1; }
}
.hn-item { position: relative; min-width: 0; }
.hn-item[data-tone="pink"] { --pop: var(--pop-pink); }
.hn-item[data-tone="cyan"] { --pop: var(--pop-cyan); }
.hn-item[data-tone="yellow"] { --pop: var(--pop-yellow); }
.hn-item[data-tone="lime"] { --pop: var(--pop-lime); }
.hn-item__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.hn-item__btn:focus-visible { outline-offset: 4px; }
.hn-item__frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--bg-2);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hn-item__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.8s, transform 1.4s var(--ease);
}
.hn-item__frame img.is-loaded { opacity: 1; }
.hn-item__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 7, 6, 0) 48%, rgba(8, 7, 6, 0.5) 72%, rgba(8, 7, 6, 0.86) 100%);
}
.hn-item__slides {
  position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px;
  background: rgba(12, 11, 10, 0.7); font-size: 12px; letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hn-item__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 15px); }
.hn-item__kind {
  padding: 3px 8px 2px; border-radius: 3px; background: var(--pop); color: var(--gold-ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35; white-space: nowrap;
}
.hn-item__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
  font: 400 clamp(17px, 1.45vw, 22px)/1.12 var(--serif); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); text-wrap: balance;
}
.hn-item--big .hn-item__title { font-size: clamp(24px, 2.5vw, 40px); line-height: 1.04; }
.hn-item--big .hn-item__cap { padding: 0 clamp(14px, 1.8vw, 26px) clamp(14px, 1.7vw, 24px); gap: 10px; }
/* pop-art offset: the tile lifts off a block of its colour */
.hn-item__btn:hover .hn-item__frame, .hn-item__btn:focus-visible .hn-item__frame { transform: translate3d(-5px, -5px, 0); box-shadow: 10px 10px 0 var(--pop); }
.hn-item__btn:hover .hn-item__frame img, .hn-item__btn:focus-visible .hn-item__frame img { transform: scale(1.045); }

/* the closing tile: the rest of the last row, in his colours */
.hn-cta { container-type: inline-size; min-width: 0; }
.hn-cta__link {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%;
  padding: clamp(14px, 1.6vw, 24px); border-radius: 3px; overflow: hidden; isolation: isolate; text-decoration: none;
  background: linear-gradient(135deg, var(--pop-pink) 0%, var(--pop-orange) 52%, var(--pop-yellow) 100%); color: var(--gold-ink);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hn-cta__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22;
  background: radial-gradient(circle, rgba(12, 11, 10, 0.9) 1.2px, transparent 1.8px) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.hn-cta__top { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hn-cta__top svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hn-cta__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; font: italic 400 clamp(17px, 10.5cqi, 96px)/1.02 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.hn-cta__go { flex: none; font: 400 0.8em/1 var(--sans); transition: transform 0.45s var(--ease); }
.hn-cta__link:hover, .hn-cta__link:focus-visible { transform: translate3d(-5px, -5px, 0); box-shadow: 10px 10px 0 var(--pop-cyan); }
.hn-cta__link:hover .hn-cta__go { transform: translate3d(3px, -3px, 0); }
.hn-cta__link:focus-visible { outline-offset: 4px; }

.hn-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }

/* reels: four muted loops in his colours; a click plays the "highness" list in the reel player */
.hn-reels { margin-top: clamp(80px, 9vw, 140px); }
.hn-reels__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px clamp(32px, 6vw, 96px); margin-bottom: clamp(26px, 3vw, 44px); }
.hn-reels__title { font: 400 clamp(40px, 4.6vw, 72px)/0.98 var(--serif); letter-spacing: -0.02em; }
.hn-reels__title em { font-style: italic; color: var(--pop-cyan); }
.hn-reels__note { max-width: 440px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.hn-reels__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px) clamp(12px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; }
.hn-reel:nth-child(4n + 1) { --pop: var(--pop-pink); }
.hn-reel:nth-child(4n + 2) { --pop: var(--pop-cyan); }
.hn-reel:nth-child(4n + 3) { --pop: var(--pop-yellow); }
.hn-reel:nth-child(4n + 4) { --pop: var(--pop-lime); }
.hn-reel__btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.hn-reel__btn:focus-visible { outline-offset: 6px; }
.reel--hn { aspect-ratio: 4 / 5; border-radius: 4px; transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease); }
.hn-reel__btn:hover .reel--hn, .hn-reel__btn:focus-visible .reel--hn { transform: translate3d(-5px, -5px, 0); box-shadow: 10px 10px 0 var(--pop); }
.hn-reel__btn:hover .reel__play, .hn-reel__btn:focus-visible .reel__play { opacity: 1; transform: none; }
.has-cursor .hn-reel__btn:hover:not(:focus-visible) .reel__play { opacity: 0; }
.hn-reel__label { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding-top: 16px; }
.hn-reel__title { font: 400 21px/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.hn-reel__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hn-reel__meta svg { width: 12px; height: 12px; fill: var(--pop); }

/* the viewer and the player, when they show his work, swap gold for his colours */
.lb.is-hn .lb__no { color: var(--pop-pink); }
.lb.is-hn .lb__dots span.is-on { background: var(--pop-pink); }
.lb.is-hn .lb__meta svg { fill: var(--pop-pink); }
.player.is-hn .player__avatar { box-shadow: 0 0 0 1.5px var(--pop-pink); }

/* ---------------------------------------------------------------- IG feed */
.ig { padding: clamp(18px, 2.6vw, 36px); background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; }
.ig__head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px clamp(18px, 3vw, 44px); padding-bottom: clamp(20px, 2.6vw, 30px); margin-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line); }
.ig__avatar {
  flex: none; position: relative; width: clamp(68px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--gold), #f1dca8, #8a6a33, var(--gold));
}
.ig__avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--bg-1);
  font: italic 400 clamp(24px, 2.6vw, 34px)/1 var(--serif); color: var(--ink);
}
/* the LH monogram inside round avatars (feed header, reel player) */
.lh-mark { display: block; width: auto; aspect-ratio: 1652 / 2416; fill: currentColor; }
.ig__avatar .lh-mark { height: 58%; color: var(--ink); }
.player__avatar .lh-mark { height: 64%; color: #fff; }
.ig__who { min-width: 0; flex: 1 1 220px; }
.ig__handle { font-size: 20px; font-weight: 600; letter-spacing: 0.005em; }
.ig__bio { margin-top: 4px; font-size: 14px; color: var(--muted); }
.ig__stats { display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ink-2); }
.ig__stats li { display: flex; flex-direction: column; line-height: 1.25; }
.ig__stats b { font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.ig__follow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 8px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.ig__follow:hover, .ig__follow:focus-visible { background: var(--gold); color: var(--gold-ink); }
.ig__follow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ig__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.ig__item a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ig__glyph { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.ig__glyph svg { width: 100%; height: 100%; fill: #fff; }
.ig__over {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 26px;
  background: rgba(8, 7, 6, 0.55); color: #fff; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 0.35s;
}
.ig__over span { display: inline-flex; align-items: center; gap: 8px; }
.ig__over svg { width: 21px; height: 21px; fill: #fff; }
.ig__item a:hover .ig__over, .ig__item a:focus-visible .ig__over { opacity: 1; }
.ig__item a:hover img, .ig__item a:focus-visible img { transform: scale(1.04); }
.ig__item a:focus-visible { outline-offset: -3px; }
.ig__foot { display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
@media (hover: none) {
  /* touch: like counts always visible, like the IG grid on a phone */
  .ig__over { opacity: 1; align-items: flex-end; justify-content: flex-start; padding: 8px; gap: 12px; font-size: 12px; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.6)); }
  .ig__over svg { width: 14px; height: 14px; }
  .ig__item a:hover .ig__over, .ig__item a:focus-visible .ig__over { opacity: 1; }
}
@media (min-width: 1600px) { .ig__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- booking */
.sec--book { overflow: hidden; }
.sec--book::before {
  content: ""; position: absolute; right: -10%; top: 5%; width: 70%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, 0.09), rgba(201, 164, 92, 0.03) 50%, transparent);
}
.book { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(40px, 7vw, 120px); align-items: start; }
.book__intro { position: sticky; top: calc(var(--topbar) + 32px); }
.book__lede { max-width: 460px; margin-top: 26px; font-size: 17px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.how { list-style: none; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; max-width: 480px; }
.how li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); transition: opacity 0.5s; }
.how li:last-child { border-bottom: 1px solid var(--line); }
.how__n {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.5); color: var(--gold); font: italic 400 26px/1 var(--serif);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s;
}
.how__n::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(201, 164, 92, 0.45); opacity: 0; transform: scale(0.8); transition: opacity 0.5s, transform 0.6s var(--ease); }
.how h3 { font: 400 23px/1.2 var(--serif); margin-top: 2px; transition: color 0.5s; }
.how p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.how li.is-active .how__n { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.how li.is-active .how__n::after { opacity: 1; transform: none; }
.how li.is-active h3 { color: var(--gold-2); }
.how li.is-done .how__n { background: rgba(201, 164, 92, 0.14); border-color: var(--gold); }
.book__alt { margin-top: 28px; font-size: 14px; color: var(--muted); }
.book__alt a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--gold); }
.book__card { position: relative; min-width: 0; }
.book__glow {
  position: absolute; left: 50%; top: 45%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, 0.12), transparent 70%);
}
.book__glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(0.6);
  background: radial-gradient(closest-side, rgba(220, 188, 126, 0.3), rgba(201, 164, 92, 0.1) 45%, transparent 72%);
}
.book__card.is-success .book__glow::after { animation: bookGlow 2.6s var(--ease) forwards; }
@keyframes bookGlow { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0.55; transform: scale(1.06); } }
.booking-fallback { padding: 28px; border: 1px solid var(--line); color: var(--ink-2); }

/* Theme the LHBooking card ONLY through its documented custom properties, set on the wrapper. */
.booking-host {
  position: relative;
  --lhb-bg: #13110f;
  --lhb-surface: #1a1714;
  --lhb-surface-2: #25211c;
  --lhb-border: rgba(236, 230, 218, 0.11);
  --lhb-text: #ece6da;
  --lhb-muted: #aba293;
  --lhb-accent: #c9a45c;
  --lhb-accent-rgb: 201, 164, 92;
  --lhb-accent-contrast: #15100a;
  --lhb-danger: #ff8f7d;
  --lhb-radius: 6px;
  --lhb-radius-sm: 4px;
  --lhb-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --lhb-font-body: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lhb-shadow: 0 0 0 1px rgba(201, 164, 92, 0.12), 0 1px 0 0 rgba(236, 230, 218, 0.06) inset, 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 160px -70px rgba(201, 164, 92, 0.3);
  --lhb-max-width: 560px;
}

/* ---------------------------------------------------------------- footer */
.footer { position: relative; padding: clamp(80px, 10vw, 150px) 0 32px; border-top: 1px solid var(--line); background: var(--bg-1); overflow: hidden; }
.footer::before {
  content: ""; position: absolute; left: 50%; bottom: -40%; width: 90%; height: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, 0.08), transparent);
}
.footer__top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(28px, 3.4vw, 44px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.footer__title { font: 400 clamp(52px, 9vw, 148px)/0.9 var(--serif); letter-spacing: -0.03em; }
/* the monogram, large, leading the footer */
/* the monogram, large, in the footer's bottom-right corner (it sits up into the empty space under the last
   column on wide screens and simply right-aligns once the columns stack) */
.footer__sign { position: relative; display: flex; justify-content: flex-end; pointer-events: none; }
.footer__mark { flex: none; display: block; height: clamp(150px, 14vw, 230px); width: auto; aspect-ratio: 1652 / 2416; fill: var(--ink); }
@media (min-width: 1025px) {
  /* reserve a lane on the right of the columns, so the mark never touches the last column's text */
  .footer .footer__grid { padding-right: calc(clamp(150px, 14vw, 230px) * 0.684 + clamp(40px, 5vw, 80px)); }
  .footer__sign { margin-top: calc(clamp(150px, 14vw, 230px) * -1 - clamp(40px, 5vw, 64px)); margin-bottom: clamp(40px, 5vw, 64px); }
}
@media (max-width: 1024px) { .footer__sign { margin-bottom: 32px; } .footer__mark { height: 140px; } }

/* "Book a consultation call", made prominent: a solid pill with a drifting, colour-changing glow behind it
   (the Highness lights in miniature). Held still by Pause motion / reduced motion. */
.footer__cta { position: relative; display: inline-flex; isolation: isolate; }
.footer__book { --h: 64px; padding: 0 38px; font-size: 16px; font-weight: 600; box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.8); }
.footer__glow, .footer__ring {
  position: absolute; z-index: -1; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, #ff4f9a, #8b5cff, #2fd3e6, #ff8a3d, #ff4f9a, #8b5cff) 0 50% / 300% 100%;
  animation: ctaFlow 6s linear infinite, ctaHue 9s ease-in-out infinite alternate;
}
.footer__glow { inset: -16px -26px; filter: blur(26px); opacity: 0.7; }
.footer__ring { inset: -2px; }
@keyframes ctaFlow { to { background-position: 100% 50%; } }
@keyframes ctaHue { from { filter: hue-rotate(-40deg); } to { filter: hue-rotate(40deg); } }
.footer__glow { animation-name: ctaFlow, ctaHueBlur; }
@keyframes ctaHueBlur { from { filter: blur(26px) hue-rotate(-40deg); } to { filter: blur(26px) hue-rotate(40deg); } }
.footer__cta:hover .footer__glow { opacity: 0.95; }
.is-still .footer__glow, .is-still .footer__ring { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .footer__glow, .footer__ring { animation: none; } }
.footer__title em { color: var(--gold-2); }
/* "Find the" is a small upright lead-in on the same baseline as the big italic "Gold Room" */
.footer__title-pre { font-size: 0.46em; letter-spacing: -0.02em; margin-right: 0.08em; }
.footer__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: clamp(40px, 5vw, 64px) 0; }
.footer__col h3 { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.footer__col p, .footer__col li, .footer__col address { font-size: 15px; line-height: 1.7; color: var(--ink-2); font-style: normal; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); padding-bottom: 2px; }
.footer__col a:hover, .footer__col a:focus-visible { background-size: 100% 1px; }
.footer__col .footer__maps { display: inline-block; margin-top: 12px; }
.footer__col .footer__small { font-size: 13px; color: var(--muted); }
.footer__base { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer__base a { color: var(--ink-2); text-underline-offset: 4px; }
.footer__top-link { text-decoration: none; }

/* ---------------------------------------------------------------- floating pill */
.pill {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(201, 164, 92, 0.3);
  opacity: 0; transform: translate3d(0, 140%, 0); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), background-color 0.3s;
}
.pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pill:hover { background: var(--gold); color: var(--gold-ink); }
.pill__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pill:hover .pill__dot { background: var(--gold-ink); }
.pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: ping 2.4s var(--ease) infinite; }

/* magnetic buttons: a small pull toward the pointer (transform only) */
.magnet { translate: var(--mx, 0px) var(--my, 0px); transition: translate 0.5s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease), opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.magnet:hover { transition: translate 0.15s linear, color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease), opacity 0.5s var(--ease), transform 0.6s var(--ease); }

/* ---------------------------------------------------------------- cursor label (fine pointers only) */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: none; will-change: transform; }
.cursor span {
  position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-indent: 0.18em;
  transform: scale(0); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s;
}
.cursor.is-on span { transform: scale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ---------------------------------------------------------------- dialogs (shared) */
dialog { color: var(--ink); }
.menu, .lb, .player {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
}
.menu::backdrop, .lb::backdrop, .player::backdrop { background: transparent; }
.menu[open], .lb[open], .player[open] { animation: dlgIn 0.5s var(--ease) both; }
.lb { background: transparent; }
.lb::before { content: ""; position: absolute; inset: 0; background: rgba(9, 8, 7, 0.992); }
.lb[open] { animation: none; }
.lb[open]::before { animation: dlgIn 0.45s var(--ease) both; }
.lb[open] .lb__inner { animation: dlgIn 0.6s 0.1s var(--ease) both; }
.menu.is-closing, .lb.is-closing, .player.is-closing { animation: dlgOut 0.35s var(--ease-io) both; }
@keyframes dlgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
html.is-locked { overflow: hidden; }

/* menu */
.menu { background: var(--bg); }
.menu__inner { display: flex; flex-direction: column; height: 100%; padding: 14px var(--gutter) max(24px, env(safe-area-inset-bottom)); overflow-y: auto; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.menu__list { list-style: none; margin: 8vh 0 0; padding: 0; }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; text-decoration: none; font: 400 clamp(36px, 10vw, 54px)/1.05 var(--serif); }
.menu__list span { width: 32px; font: 500 12px/1 var(--sans); letter-spacing: 0.16em; color: var(--gold); }
.menu[open] .menu__list li { animation: fadeUp 0.7s var(--ease) both; }
.menu[open] .menu__list li:nth-child(2) { animation-delay: 0.04s; }
.menu[open] .menu__list li:nth-child(3) { animation-delay: 0.08s; }
.menu[open] .menu__list li:nth-child(4) { animation-delay: 0.12s; }
.menu[open] .menu__list li:nth-child(5) { animation-delay: 0.16s; }
.menu[open] .menu__list li:nth-child(6) { animation-delay: 0.2s; }
.menu[open] .menu__list li:nth-child(7) { animation-delay: 0.24s; }
.menu__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: auto; padding-top: 32px; }
.menu__foot p { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- lightbox */
.lb__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px); height: 100%; }
.lb__stage { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb__track { display: flex; height: 100%; will-change: transform; }
.lb__track.is-anim { transition: transform 0.6s var(--ease); }
.lb__slide { position: relative; flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 60px) clamp(20px, 4vw, 60px) clamp(48px, 6vw, 72px); }
.lb__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9); -webkit-user-drag: none; }
.lb__arrow { position: absolute; top: 50%; margin-top: -24px; z-index: 2; }
.lb__arrow--prev { left: 20px; }
.lb__arrow--next { right: 20px; }
.lb__photo { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.lb__photo span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb__dots { display: flex; justify-content: center; gap: 8px; }
.lb__dots span { width: 26px; height: 2px; background: rgba(236, 230, 218, 0.25); transition: background-color 0.3s; }
.lb__dots span.is-on { background: var(--gold); }
.lb__info { position: relative; display: flex; flex-direction: column; padding: clamp(72px, 9vh, 110px) clamp(24px, 3vw, 44px) 32px; border-left: 1px solid var(--line); overflow-y: auto; background: var(--bg); }
.lb__no { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.lb__title { margin-top: 14px; font: 400 clamp(38px, 3.4vw, 56px)/1 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.lb__blurb { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.lb__meta { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 28px 0 0; padding: 20px 0; border-block: 1px solid var(--line); font-size: 14px; }
.lb__meta dt { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.lb__meta dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.lb__meta svg { display: inline-block; width: 14px; height: 14px; fill: var(--gold); vertical-align: -2px; margin-right: 6px; }
.lb__count { margin-top: 18px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb__pieces { display: flex; gap: 8px; margin-top: 14px; }
.lb__piece {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); white-space: nowrap;
  transition: border-color 0.3s, color 0.3s;
}
.lb__piece:hover { border-color: var(--ink); color: var(--ink); }
.lb__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lb__keys { margin-top: auto; padding-top: 28px; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.lb__close { position: absolute; top: 18px; right: 18px; z-index: 3; }
.lb__ghost { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 0 0; object-fit: cover; will-change: transform, opacity; }

/* ---------------------------------------------------------------- reel player */
.player { background: #050404; }
.player__bg { position: absolute; inset: 0; overflow: hidden; }
.player__bg img { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(48px) saturate(0.7) brightness(0.32); transform: scale(1.1); }
.player__wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 36px); height: 100%; padding: 2vh 16px 5vh; }
.player__frame {
  --fh: min(88vh, 960px);
  position: relative; height: var(--fh); aspect-ratio: 9 / 16; max-width: calc(100vw - 32px); flex: none;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(236, 230, 218, 0.08);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  will-change: transform;
}
@supports (height: 100svh) { .player__frame { --fh: min(88svh, 960px); } }
.player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.player__peek {
  flex: none; height: calc(var(--peek-h, min(88vh, 960px)) * 0.6); aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #000; cursor: pointer; opacity: 0.55; transition: opacity 0.4s, transform 0.5s var(--ease);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(236, 230, 218, 0.08);
}
.player__peek img { width: 100%; height: 100%; object-fit: cover; }
.player__peek:hover { opacity: 0.85; transform: scale(1.03); }
.player__bars { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.player__bars span { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.player__bars i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.player__top { position: absolute; top: 24px; left: 12px; right: 6px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.player__top::before { content: ""; position: absolute; inset: -24px -6px -30px -12px; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0)); pointer-events: none; }
.player__avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--bg); box-shadow: 0 0 0 1.5px var(--gold); font: italic 400 14px/1 var(--serif);
}
.player__who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; font-size: 13px; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }
.player__who b { font-weight: 600; }
.player__who span { font-size: 12px; color: rgba(255, 255, 255, 0.92); }
.player__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.player__btn:hover { background: rgba(255, 255, 255, 0.12); }
.player__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player__btn .i-play { fill: currentColor; stroke: none; }
.player__btn .i-play, .player__btn .i-muted { display: none; }
.player.is-paused .player__btn .i-play, .player.is-muted .player__btn .i-muted { display: block; }
.player.is-paused .player__btn .i-pause, .player.is-muted .player__btn .i-sound { display: none; }
.player__zone { position: absolute; top: 80px; bottom: 190px; z-index: 1; width: 30%; cursor: pointer; }
.player__zone--prev { left: 0; }
.player__zone--next { right: 0; }
.player__state {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); pointer-events: none;
  opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.4s var(--ease);
}
.player__state svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.player.is-paused .player__state { opacity: 1; transform: none; }
.player__unmute {
  position: absolute; left: 50%; top: 84px; z-index: 4; transform: translateX(-50%);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 600; cursor: pointer;
}
.player__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 90px 18px 18px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38) 44px, rgba(0, 0, 0, 0.72) 86px, rgba(0, 0, 0, 0.9)); pointer-events: none; }
/* light reels (white-wall murals): the shade is in px, so it is already ~0.72 where the gold reel number starts
   (90px down) whatever the caption's height, and a soft shadow keeps the caption legible over bright frames */
.player__no, .player__title, .player__blurb { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.player__bottom > * { pointer-events: auto; }
.player__no { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.player__title { margin-top: 6px; font: 400 28px/1.1 var(--serif); color: #fff; }
.player__blurb { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }
.player__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.player__book {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.player__book:hover, .player__book:focus-visible { background: var(--gold); color: var(--gold-ink); }
.player__ig { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.player__nav { flex: none; }
.player.is-single .player__nav, .player.is-single .player__peek, .player.is-single .player__zone { display: none; }
.player__keys { position: absolute; left: 0; right: 0; bottom: 1.4vh; text-align: center; font-size: 12px; letter-spacing: 0.12em; color: rgba(236, 230, 218, 0.74); pointer-events: none; }
.player__frame.is-swap { animation: swapIn 0.5s var(--ease) both; }
@keyframes swapIn { from { opacity: 0.2; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .player__peek { display: none; }
  /* the chips get the whole row; the count drops underneath */
  .filters { flex-direction: column; align-items: stretch; gap: 0; border-bottom: 0; }
  .filters__scroll { border-bottom: 1px solid var(--line); column-gap: clamp(16px, 1.8vw, 28px); }
  .filters__count { padding: 14px 0 0; }
}
/* The Highness mosaic: columns by width (app.js reads --cols to place the 2x2 tiles and the closing tile) */
@media (min-width: 1181px) { .hn-grid { --cols: 5; } }
@media (min-width: 1600px) { .hn-grid { --cols: 6; } }
@media (max-width: 767px) { .hn-grid { --cols: 3; } }
@media (max-width: 560px) { .hn-grid { --cols: 2; } }
@media (max-width: 1180px) {
  /* the hero caption stacks (label over title) in narrower columns, so it is never cut short */
  .hero__cap { flex-direction: column; align-items: flex-start; gap: 3px; padding-block: 4px; white-space: normal; }
  .hero__cap-t { overflow: visible; }
  .topnav, .motion--bar { display: none; }
  .topbar { gap: 16px; }
  .topbar__menu { display: inline-flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .fixes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "ba" "covers" "cta"; row-gap: clamp(32px, 4vw, 72px); }
  .fixcta { margin-top: clamp(16px, 3vw, 40px); }
  .covers { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px clamp(24px, 4vw, 56px); align-items: start; }
  .covers__tile { grid-row: span 2; }
  .covers__list { align-self: start; }
}
@media (max-width: 1024px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__media { position: relative; top: 0; }
  .arch { width: min(78%, 400px); }
  .book { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px; }
  .paint { grid-template-columns: minmax(0, 1fr); }
  .rwall { grid-template-columns: repeat(6, minmax(0, 1fr)); --lift: 70px; }
  .rwall__item:nth-child(n) { --f: -14; --stag: 0px; }
  .rwall__item:nth-child(3n + 2) { --f: 26; --stag: var(--lift); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .rwall__item:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .rwall__item:nth-child(3n + 1):nth-last-child(1) { grid-column: 3 / span 2; }
  .rwall__item:nth-child(3n + 1):nth-last-child(-n + 2), .rwall__item:nth-child(3n + 1):nth-last-child(-n + 2) ~ .rwall__item { --f: 26; --stag: var(--lift); }
}
/* lightbox: on landscape tablets the notes stay in a side column so the photo keeps the height */
@media (min-width: 861px) and (max-width: 1024px) {
  .lb__inner { grid-template-columns: minmax(0, 1fr) 320px; }
  .lb__info { padding: 72px 24px 24px; }
  .lb__title { font-size: 34px; }
  .lb__piece { padding: 0 8px; font-size: 12.5px; }
}
/* narrow or portrait screens: photo on top, notes underneath */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  .lb__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lb__info { border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; padding: 22px var(--gutter) 24px; }
  .lb__keys { display: none; }
  .lb__title { font-size: 34px; }
}
@media (max-width: 860px) {
  .topbar { gap: 14px; }
  .topbar__cta { min-height: 38px; padding: 0 16px; }
  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ba-list { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .ba:nth-child(2) { margin-top: 0; }
  .fixcta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "copy" "action"; align-items: start; justify-items: start; }
  .book { grid-template-columns: minmax(0, 1fr); }
  .book__intro { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 22px; }
  .player__nav, .player__keys { display: none; }
  .hn-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hn-lede { max-width: 560px; }
  .hn-profile { max-width: 560px; }
  .hn-reel__label { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 640px) {
  :root { --topbar: 60px; }
  /* phones: one chip row that scrolls sideways (wrapping would take four or five rows) */
  .filters__scroll {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .filters__scroll::-webkit-scrollbar { display: none; }
  .filters__scroll.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .filters__scroll.is-clipped.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 78%, transparent); }
  .filters__scroll.is-clipped.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
  .hero { padding-bottom: 22px; }
  .hero__inner { padding-bottom: 22px; }
  .hero__title { order: 1; text-shadow: 0 2px 30px rgba(12, 11, 10, 0.6); }
  .hero__eyebrow { order: 2; margin: 18px 0 0; gap: 12px; font-size: 12px; letter-spacing: 0.2em; }
  .hero__eyebrow .rule { width: 32px; }
  .hero__subject { order: 3; margin-top: 12px; gap: 12px; font-size: 25px; }
  .hero__subject::before { display: none; }
  .hero__lede { order: 4; font-size: 15px; margin-top: 12px; }
  .hero__ctas { order: 5; margin-top: 22px; gap: 8px; }
  .hero__proof { order: 6; margin-top: 16px; gap: 4px 14px; font-size: 12.5px; }
  .hero__ctas .btn { flex: 1 1 auto; --h: 48px; padding: 0 18px; }
  .hero__line--2 { padding-left: 0.4em; }
  .hero__foot { gap: 14px; padding-top: 6px; }
  .hero__cap i { font-size: 17px; }
  .brand__name { font-size: 20px; }
  .brand__mark { height: 34px; }
  .display { font-size: clamp(44px, 12.4vw, 60px); }
  .work__title { font-size: 18px; }
  .work--big .work__title { font-size: 24px; }
  /* two lines on phones so the style is never cut off mid-word (the packer reserves the room) */
  .work__place { font-size: 12px; line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .work__row { font-size: 12px; letter-spacing: 0.1em; gap: 8px; }
  .work__view { display: none; }
  .rwall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 12px; --lift: 56px; }
  .rwall__item:nth-child(n) { --f: -10; --stag: 0px; }
  .rwall__item:nth-child(2n) { --f: 16; --stag: var(--lift); }
  .rwall__item:nth-child(2n + 1):last-child { grid-column: 2 / span 2; --f: 16; --stag: var(--lift); }
  .rtile__title { font-size: 18px; }
  .rtile__row { letter-spacing: 0.08em; }
  .rtile__date { display: none; }
  .reel__time { top: 8px; left: 8px; padding: 2px 8px; }
  .reel__sound { top: 7px; right: 7px; width: 28px; height: 28px; }
  .covers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; }
  .covers__tile { grid-row: auto; }
  .covers__text { align-self: end; }
  .covers__title { font-size: 28px; }
  .covers__note { font-size: 14px; }
  .covers__list { grid-column: 1 / -1; }
  .fixcta { padding: 34px 22px 26px; margin: 8px calc(var(--gutter) * -1 + 4px) 0; }
  .fixcta::after { left: 22px; }
  .fixcta__title { font-size: clamp(32px, 9vw, 40px); }
  .fixcta__body p { font-size: 15px; }
  .fixcta { justify-items: stretch; }
  .fixcta__body .btn { --h: 52px; }
  .cover__title { font-size: 19px; }
  .cover__top { left: 10px; right: 10px; }
  .cover__top .reel__live { gap: 6px; letter-spacing: 0.1em; }
  .reel--cover .reel__cta { min-height: 34px; padding: 0 8px; font-size: 12px; gap: 6px; }
  .route { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 0 0 0 36px; }
  .route::before, .route::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .route::after { transform-origin: top; transform: scaleY(0); }
  .route.is-in::after { transform: scaleY(1); }
  .route__dot { top: 4px; left: -36px; }
  .arch { width: min(82%, 360px); }
  .arch__cap { flex-direction: column; gap: 2px; }
  .quote { padding-left: 20px; }
  .paint__list { gap: 12px; }
  .hn-title { font-size: clamp(64px, 22vw, 96px); }
  .hn-head { gap: 28px; }
  .hn-lede { font-size: 15.5px; }
  .hn-profile { padding: 20px 18px 20px; gap: 16px; }
  .hn-profile__motto { font-size: 28px; }
  .hn-tape { --tp-t: 12px; --tp-b: 11px; }
  .hn-gallery { margin-top: 52px; }
  .hn-tape__track span { font-size: 14px; letter-spacing: 0.14em; }
  .hn-item__cap { gap: 5px; padding: 0 10px 10px; }
  .hn-item__title { font-size: 16px; }
  .hn-item--big .hn-item__title { font-size: 26px; }
  .hn-item__slides { left: 8px; top: 8px; padding: 2px 8px; }
  .hn-reels__title { font-size: 40px; }
  .hn-reels__note { font-size: 14.5px; }
  .hn-reels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .hn-reel__label { padding-top: 12px; }
  .hn-reel__title { font-size: 18px; }
  .paint__cap { font-size: 15px; }
  .ig { padding: 16px 12px; margin-inline: calc(var(--gutter) * -1 + 4px); border-radius: 0; border-inline: 0; }
  .ig__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who who" "stats stats follow"; gap: 16px; }
  .ig__avatar { grid-area: av; width: 68px; }
  .ig__who { grid-area: who; align-self: center; }
  .ig__handle { font-size: 17px; }
  .ig__bio { font-size: 13px; }
  .ig__stats { grid-area: stats; align-self: center; gap: 22px; font-size: 13px; }
  .ig__stats b { font-size: 24px; }
  .ig__follow { grid-area: follow; align-self: center; padding: 0 20px; }
  .ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .ig__glyph { width: 17px; height: 17px; top: 7px; right: 7px; }
  .how li { grid-template-columns: 44px 1fr; gap: 16px; }
  .how__n { width: 44px; height: 44px; font-size: 22px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pill { left: 50%; right: auto; min-height: 48px; transform: translate3d(-50%, 140%, 0); }
  .pill.is-on { transform: translate3d(-50%, 0, 0); }
  .player__wrap { padding: 0; }
  .player__frame { height: 100%; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .player__title { font-size: 25px; }
  .lb__arrow { display: none; }
  .lb__slide { padding: 16px 16px 44px; }
  .lb__info { max-height: 52vh; padding: 18px var(--gutter) 20px; }
  .lb__title { margin-top: 8px; font-size: 30px; }
  .lb__blurb { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .lb__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; padding: 0; border: 0; font-size: 13px; color: var(--ink-2); }
  .lb__meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lb__meta dt:nth-of-type(4), .lb__meta dd:nth-of-type(4) { display: none; }
  .lb__count { margin-top: 8px; }
  .lb__pieces { margin-top: 12px; }
  .lb__actions { margin-top: 12px; flex-wrap: nowrap; }
  .lb__actions .btn { --h: 46px; padding: 0 18px; font-size: 13.5px; }
  .lb__close { top: 12px; right: 12px; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .hero__lede { display: none; }
  .hero__inner { margin-top: calc(var(--mw) * -0.36); }
  .hero__eyebrow { margin-top: 14px; }
  .hero__ctas { margin-top: 18px; }
  .hero__proof { margin-top: 12px; }
}
@media (max-width: 640px) and (max-height: 690px) {
  .hero__subject { font-size: 23px; }
}
@media (max-width: 420px) {
  .topbar { gap: 10px; }
  .topbar__menu-t { display: none; }
  .topbar__menu { padding: 0 6px; justify-content: center; }
  .brand { gap: 10px; }
  .topbar__cta { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 380px) {
  .hero__title { font-size: 72px; }
  .btn { padding: 0 18px; }
  .brand__name { font-size: 19px; }
  .lb__piece { font-size: 12.5px; padding: 0 8px; }
}
@media (min-width: 1700px) {
  :root { --maxw: 1640px; }
  .hero__inner { max-width: 1000px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .marquee__track, .hn-tape__track { animation: none; transform: none; }
  .hero__frame img, .hero__media { transform: none !important; }
  .js [data-reveal], .js .hero__eyebrow, .js .hero__subject, .js .hero__lede, .js .hero__ctas, .js .hero__proof, .js .hero__foot, .js .hero__title .ch, .js .route .route__stop { opacity: 1 !important; transform: none !important; }
  .motion { display: none !important; }
  .js .rot > i:not(.is-on) { visibility: hidden !important; }
  .route::after { transform: none !important; }
  .rwall__item { transform: translate3d(0, var(--stag, 0px), 0) !important; }
  .js .work .work__btn { opacity: 1 !important; transform: none !important; }
  .pill__dot::after, .reel__live::before { animation: none; }
}