/* ==========================================================================
   VISION STUDIOS — "Third Eye Noir"  ·  the shop after dark
   Mobile-first. Base = 360–430px phones; enhanced at 600 / 768 / 1024 / 1440.
   Type: Instrument Serif (display) · Inter Tight (UI/body) · IBM Plex Mono (labels)
   Tones: ink night everywhere, ONE warm paper insert (Our Vision).

   Contents
   1. Tokens            7. Manifesto + studio     13. Booking dialog
   2. Base              8. About (paper page)     14. Tablet ≥ 768
   3. Labels/buttons    9. Mind poster            15. Desktop ≥ 1024
   4. Header           10. Artists                16. Wide ≥ 1440
   5. Menu dialog      11. Book (inline embed)    17. No-JS fallbacks
   6. Hero             12. Visit/Follow/Footer    18. Reduced motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
/* Metric-matched local fallbacks (measured against the web fonts): text wraps the same before and after
   the Google Fonts swap, so the page doesn't reflow (and #anchors don't overshoot) when they arrive. */
@font-face { font-family: "Instrument Serif Fallback"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 80.2%; ascent-override: 123%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); size-adjust: 84.8%; ascent-override: 117%; descent-override: 37%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 95.2%; ascent-override: 102%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 97.2%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 93.9%; ascent-override: 103%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; font-weight: 400 600; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%; }

:root {
  /* ink + walls */
  --ink: #0a0b16;
  --ink-2: #0e1024;
  --ink-3: #12153a;
  --wall: #161a48;
  /* text on ink */
  --paper: #f2ece2;
  --paper-2: #cdc7d4;
  --muted: #9d98b0;
  /* accents */
  --brass: #c9a45c;
  --brass-hi: #e2c88e;
  --brass-line: rgba(201, 164, 92, .3);
  --brass-faint: rgba(201, 164, 92, .16);
  --coral: #ff6a4d;
  --coral-hi: #ff8669;
  --mint: #b0e0af;         /* booking accent: the logo's mint filigree (mean colour) */
  --mint-hi: #c8f0c6;      /* paler tips of the filigree, for hover */
  --lilac: #c4b5ff;
  --violet: #9b7cf4;
  --violet-deep: #6c4bd8;
  /* the paper insert (all text colours verified ≥ 4.5:1 on #f2ece2) */
  --pp-bg: #f2ece2;
  --pp-ink: #12131f;      /* 16:1 */
  --pp-text: #2a2a3c;     /* 12:1 */
  --pp-muted: #55506a;    /* 6.5:1 */
  --pp-brass: #6e5019;    /* 6.3:1 — darkened brass for small text */
  --pp-violet: #5b3cc4;   /* 6.2:1 */
  --pp-rule: rgba(110, 80, 25, .3);
  /* unlit state of scroll-scrubbed type: 4.1:1 on ink, so text is never below AA-large mid-animation */
  --dim: #74708a;

  --f-serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sans: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale (fluid) */
  --t-micro: .75rem;                                         /* 12 — mono labels */
  --t-small: .9375rem;                                       /* 15 */
  --t-body: 1.0625rem;                                       /* 17 */
  --t-read: clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem);     /* 19 → 21 long-form reading */
  --t-lead: clamp(1.25rem, 1.08rem + .8vw, 1.625rem);        /* 20 → 26 */
  --t-h2: clamp(3.5rem, 2rem + 6.6vw, 8.75rem);              /* 56/58 → 140 */

  /* rhythm */
  --gutter: 20px;
  --gap: 12px;
  --hdr-h: 64px;
  --hdr-x: 0px;            /* extra header height (no-JS nav row) */
  --sec: clamp(4rem, 2.6rem + 5.6vw, 9.5rem);                 /* 64 → 152; sections use 1 × top + .5 × bottom */
  --r: 14px;

  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --gap: 20px; --hdr-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --gap: 28px; --hdr-h: 76px; --t-body: 1.125rem; }
}
@media (min-width: 1440px) {
  :root { --gutter: 56px; --gap: 32px; }
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  color-scheme: dark;
  scroll-padding-top: calc(var(--hdr-h) + var(--hdr-x) + 8px);
}
/* smooth only once the page has settled: a deep link (/#book) jumps instantly, so a late font swap
   can't make a smooth initial scroll overshoot its target. No-JS keeps instant jumps. */
@media (prefers-reduced-motion: no-preference) { html.is-ready { scroll-behavior: smooth; } }

/* shared scroll lock (menu + booking) with scrollbar-width compensation; no overscroll chaining
   (pull-to-refresh / bounce) from inside an open sheet */
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
html.is-locked body { padding-right: var(--sbw, 0px); }
html.is-locked .hdr { padding-right: var(--sbw, 0px); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper-2);
  font: 400 var(--t-body)/1.62 var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
/* notched phones: keep the footer clear of the home indicator */
body { padding-bottom: env(safe-area-inset-bottom); }

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
em, .it { font-style: italic; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
figure { margin: 0; }
dialog { color: inherit; }
:where(ul[role="list"], ol) { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--coral); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

.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;
  top: 8px; left: 8px;
  z-index: 200;
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 600 var(--t-small)/1 var(--f-sans);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }
/* desktop hero panel: lets keyboard users jump past the live widget's many tab stops */
.skip--local { position: absolute; top: 8px; left: 8px; z-index: 5; transform: translateY(-200%); }
.skip--local:not(:focus) { opacity: 0; pointer-events: none; }

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

.mono { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; }
.i { width: 1.15em; height: 1.15em; flex: none; }

/* pictures: LQIP + dominant colour placeholders */
.ph { background-size: cover; background-position: center; }
.ph img { width: 100%; }

/* 3. LABELS + BUTTONS ------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 500 var(--t-micro)/1.2 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow .rule { width: 40px; height: 1px; background: var(--brass-line); }

/* section heads: bigger + tighter; the formula varies per section */
.h2 {
  margin-top: 18px;
  font: 400 var(--t-h2)/.84 var(--f-serif);
  letter-spacing: -.035em;
  color: var(--paper);
}
.h2 em { color: var(--lilac); }
.h2--stagger.split .ln { display: block; width: fit-content; }
.h2--stagger.split .ln + .ln { margin-left: 22%; }
.h2--caps { text-transform: uppercase; letter-spacing: -.02em; font-size: calc(var(--t-h2) * .94); }
.h2__accent { color: var(--mint); }


.btn {
  --bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg);
  font: 500 1rem/1 var(--f-sans);
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .4s;
}
.btn:active { transform: scale(.965); transition-duration: .08s; }
.btn .i-arrow { transition: transform .35s var(--ease); }

.btn--book {
  --bg: var(--mint);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(214, 245, 212, .45) inset,
    0 14px 32px -14px rgba(176, 224, 175, .6),
    0 0 46px -10px rgba(155, 124, 244, .5);
}
.btn--ghost {
  color: var(--paper);
  border-color: var(--brass-line);
  background: rgba(242, 236, 226, .025);
}
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn--book:hover { --bg: var(--mint-hi); box-shadow: 0 0 0 1px rgba(230, 255, 228, .55) inset, 0 18px 40px -14px rgba(176, 224, 175, .8), 0 0 60px -8px rgba(155, 124, 244, .65); }
  .btn:hover .i-arrow { transform: translateX(4px); }
  .btn--ghost:hover { border-color: var(--brass); background: rgba(201, 164, 92, .08); }
}

/* Instagram handle pills (artists) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 44px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  background: rgba(242, 236, 226, .03);
  color: var(--paper);
  font: 500 .8125rem/1.15 var(--f-mono);
  letter-spacing: .01em;
  text-decoration: none;
  overflow-wrap: anywhere; /* enlarged default text: wrap the handle instead of overflowing the card */
  transition: background-color .3s, border-color .3s, color .3s;
}
.pill .i { width: 16px; height: 16px; color: var(--brass-hi); }
@media (hover: hover) {
  .pill:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
  .pill:hover .i { color: var(--ink); }
}
@media (max-width: 389.98px) {
  .pill { padding: 0 12px; font-size: .75rem; }
  .pill .i { display: none; }
}

/* 4. HEADER ---------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 11, 22, .9); /* dense enough that a sliver of cream paper beneath can't tint it */
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--brass-faint);
  opacity: 0;
  transition: opacity .4s, background-color .4s, border-color .4s;
}
.hdr.is-scrolled::before { opacity: 1; }
/* iOS 26 Safari lays fixed elements out below the status bar and lets the page scroll visibly behind it,
   tinting that strip from the fixed header's own background-color. So the header carries a real one
   (the frosted ::before still sits on top), plus a cap in the same colour that reaches up into the strip
   as a backstop; elsewhere the cap sits above the viewport, out of sight. */
.hdr { transition: background-color .4s; }
.hdr.is-scrolled, html:not(.js) .hdr, html.no-menu .hdr { background-color: #0a0b16; }
.hdr.is-paper { background-color: #f2ece2; }
.hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 160px;
  background-color: inherit;
  pointer-events: none;
}

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--hdr-h);
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hdr__id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}
.hdr__brand {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}
.hdr__eye { width: 42px; flex: none; }

/* running head: current section, crossfading.
   Phones: a deliberate two-line stacked label ("Barbershop & / Art Studio") in a fixed-height slot,
   so the header never shifts when a one-line label ("01 — Manifesto") crossfades in. */
.hdr__run {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  max-width: 24ch;
  min-height: 2.6em;
  max-height: calc(var(--hdr-h) - 6px); /* enlarged default text: clip the decorative label inside the bar */
  overflow: hidden;
  font: 500 .6875rem/1.3 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-hi);
  transition: color .4s;
}
.hdr__run-t {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transform: translateY(6px);
  text-wrap: balance;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.hdr__run-t.is-on { opacity: 1; transform: none; }
.hdr__run-t.is-out { transform: translateY(-6px); }
@media (max-width: 359.98px) { .hdr__run { display: none; } }
.hdr__run.is-clipped { visibility: hidden; }
/* wherever it fits, one line */
@media (min-width: 600px) {
  .hdr__run { max-width: none; min-height: 0; }
  .hdr__run-t { white-space: nowrap; }
}

.hdr__nav { display: none; }

.hdr__book {
  flex: none;
  min-height: 44px;
  padding: 0 18px 0 16px;
  font-size: .9375rem;
  gap: 8px;
}
.hdr__book-now { display: none; }
.hdr__book-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 11, 22, .16);
}
/* when a bigger booking control is already under the thumb, the header pill steps back (ghost) */
@media (max-width: 1023.98px) {
  .pill-quiet .hdr__book {
    --bg: rgba(10, 11, 22, .4);
    color: var(--paper);
    border-color: var(--brass-line);
    box-shadow: none;
  }
  .pill-quiet .hdr__book-dot { background: var(--mint); box-shadow: 0 0 0 3px rgba(176, 224, 175, .2); }
}

.hdr__menu {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--brass-line);
  border-radius: 50%;
  background: rgba(10, 11, 22, .35);
  cursor: pointer;
  transition: border-color .4s, background-color .4s;
}
.hdr__menu-bars { position: relative; width: 16px; height: 8px; }
.hdr__menu-bars span {
  position: absolute; left: 0; right: 0;
  height: 1.5px; border-radius: 1px;
  background: var(--paper);
  transition: background-color .4s;
}
.hdr__menu-bars span:first-child { top: 0; }
.hdr__menu-bars span:last-child { top: 6.5px; }
/* Windows High Contrast strips backgrounds: draw the bars (and the menu's X) in the system text colour */
@media (forced-colors: active) {
  .hdr__menu-bars span, .menu__x span { background: CanvasText; forced-color-adjust: none; }
}

/* over the paper page the header turns to paper too (theme-color follows in JS) */
.hdr.is-paper::before { opacity: 1; background: rgba(242, 236, 226, .94); border-bottom-color: var(--pp-rule); }
.hdr.is-paper .hdr__run { color: var(--pp-brass); }
.hdr.is-paper .hdr__menu { border-color: rgba(18, 19, 31, .28); background: transparent; }
.hdr.is-paper .hdr__menu-bars span { background: var(--pp-ink); }
.hdr.is-paper :focus-visible { outline-color: var(--pp-violet); }
@media (max-width: 1023.98px) {
  .pill-quiet .hdr.is-paper .hdr__book { --bg: transparent; color: var(--pp-ink); border-color: rgba(18, 19, 31, .28); }
}

@media (min-width: 400px) {
  .hdr__run { font-size: .75rem; }
}
@media (min-width: 768px) {
  .hdr__book-now { display: inline; }
  .hdr__eye { width: 46px; }
}

/* 5. MENU (native modal dialog) ------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink); /* flat night: the iris glow is reserved for the two eye moments */
  color: var(--paper);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.menu[open] { display: flex; flex-direction: column; }
.menu.is-open { opacity: 1; }
.menu::backdrop { background: transparent; }

.menu__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: calc(var(--hdr-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
.menu__eye { width: 42px; }
.menu__label { margin-right: auto; font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
.menu__close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--brass-line);
  border-radius: 50%;
  background: rgba(10, 11, 22, .35);
  cursor: pointer;
}
.menu__x { position: relative; width: 16px; height: 16px; }
.menu__x span { position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; border-radius: 1px; background: var(--paper); transform: rotate(45deg); }
.menu__x span + span { transform: rotate(-45deg); }

.menu__nav { margin-top: 12px; }
.menu__list { border-top: 1px solid var(--brass-faint); }
.menu__list li { border-bottom: 1px solid var(--brass-faint); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-height: 64px;
  padding: 14px 0 10px;
  color: var(--paper);
  font: 400 clamp(2.375rem, 10.5vw, 3.5rem)/1 var(--f-serif);
  letter-spacing: -.02em;
  text-decoration: none;
}
.menu__list a em { color: var(--lilac); }
.menu__list a:active { color: var(--brass-hi); }
.menu__foot { display: grid; gap: 18px; margin-top: auto; padding-top: 28px; }
.menu__meta { display: grid; }
.menu__meta a {
  display: flex; align-items: center;
  min-height: 44px;
  color: var(--paper-2);
  font: 400 var(--t-small)/1.3 var(--f-mono);
  letter-spacing: .02em;
  text-decoration: none;
}
.menu .menu__list li,
.menu .menu__foot { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.menu.is-open .menu__list li,
.menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: .16s; }
.menu.is-open .menu__foot { transition-delay: .2s; }
@media (max-height: 640px) {
  .menu__list a { min-height: 50px; padding: 9px 0 7px; font-size: 2rem; }
  .menu__foot { gap: 10px; padding-top: 18px; }
}
@media (max-height: 600px) {
  .menu__list a { min-height: 48px; font-size: 1.75rem; }
  .menu__meta a { min-height: 44px; }
}
/* landscape phones: list left, Book Now + contacts right (all in the thumb zone, no scrolling) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1023.98px) {
  .menu[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 32px;
    align-content: start;
  }
  .menu__bar { grid-column: 1 / -1; }
  .menu__nav { grid-column: 1; grid-row: 2; margin-top: 0; }
  .menu__foot { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; padding-top: 0; gap: 6px; }
  .menu__list a { min-height: 44px; padding: 6px 0 4px; font-size: 1.625rem; }
  .menu__meta a { min-height: 44px; }
}

/* 6. HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* the booking card keeps ~20px of air inside the hairline frame */
  padding: calc(var(--hdr-h) + var(--hdr-x) + env(safe-area-inset-top)) 0 calc(30px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 80%, var(--ink) 100%), /* ends in page ink: no seam into the first photo */
    radial-gradient(60% 34% at 50% 38%, rgba(108, 75, 216, .30), transparent 72%),
    radial-gradient(120% 55% at 50% 108%, rgba(22, 26, 72, .95), transparent 70%),
    linear-gradient(180deg, #090a14 0%, #0b0d1f 55%, #0d1029 100%);
}
/* hairline "mirror frame" around the hero */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: calc(var(--hdr-h) + var(--hdr-x) + 6px) 10px 10px;
  border: 1px solid var(--brass-faint);
  border-radius: 18px;
  pointer-events: none;
}

.hero__in {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(22px, 2.8svh, 28px); /* the eyebrow keeps ≥16px of air under the frame's top hairline */
}
.hero__lockup {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* the supplied wordmark carries two stray crown fragments under the "S I O" — mask them out */
.hero__word, .ftr__word img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 62% 87%, 37% 87%, 37% 100%, 0 100%);
}
.hero__eyebrow { justify-content: center; gap: 12px; letter-spacing: .14em; }
.hero__eyebrow::before, .hero__eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--brass-line); }
.hero__eyebrow-loc::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px 0 0; vertical-align: .2em; transform: rotate(45deg); background: var(--brass); }
@media (max-width: 419.98px) {
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; }
}

.hero__title { margin-top: clamp(10px, 1.8svh, 26px); line-height: 0; }
.hero__word { width: min(60vw, 420px); margin-inline: auto; }

.hero__eye {
  --mx: 0; --my: 0; /* cursor position, -1…1, eased by main.js (fine pointers only) */
  position: relative;
  width: min(88vw, 620px);
  margin-top: clamp(2px, 1svh, 14px);
  /* slight 3D tilt toward the cursor; the glow and brass ring sit deeper, so they parallax against the lids */
  transform: perspective(900px) rotateX(calc(var(--my) * -9deg)) rotateY(calc(var(--mx) * 12deg));
  transform-style: preserve-3d;
}
/* short phones (SE, 320×568): a slightly smaller eye pays for the frame's breathing room */
@media (max-height: 700px) and (orientation: portrait) {
  .hero__eye { width: min(76vw, 620px); }
}
.hero__lids { position: relative; z-index: 1; display: block; }
.hero__eye-img { width: 100%; }
.hero__iris {
  position: absolute;
  left: 49.4%; top: 61.5%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  translate: calc(-50% + var(--mx) * 10px) calc(-50% + var(--my) * 8px) -24px;
  background: radial-gradient(circle, rgba(255, 106, 77, .62) 0%, rgba(224, 57, 62, .32) 26%, rgba(155, 124, 244, .30) 46%, transparent 70%);
  filter: blur(14px);
  z-index: 0;
}
.hero__ring {
  position: absolute;
  left: 49.4%; top: 61.5%;
  width: 76%;
  aspect-ratio: 1;
  translate: -50% -50%;
  translate: calc(-50% - var(--mx) * 8px) calc(-50% - var(--my) * 6px) -36px; /* drifts against the tilt */
  color: var(--brass);
  opacity: .26;
  z-index: 0;
  overflow: visible;
}
.hero__studios {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(4px, 1svh, 12px);
  font: 500 var(--t-micro)/1 var(--f-mono);
  letter-spacing: .62em;
  text-indent: .62em;
  text-transform: uppercase;
  color: var(--brass-hi);
}
.hero__studios::before, .hero__studios::after { content: ""; width: 26px; height: 1px; background: var(--brass-line); }

/* hero booking card (phones, tablets, no-JS desktop) */
.hero__book {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 18px 16px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(26, 30, 80, .62), rgba(13, 15, 36, .78));
  border: 1px solid var(--brass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero__book::before { /* inner mirror hairline */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 164, 92, .12);
  border-radius: 19px;
  pointer-events: none;
}
/* phones: one frame line is enough (the hero hairline already frames the card) */
@media (max-width: 767.98px) {
  .hero__book::before { display: none; }
}
.hero__book-title {
  margin: 0 4px 14px;
  font: 400 clamp(1.625rem, 1.2rem + 1.8vw, 2rem)/1.05 var(--f-serif);
  color: var(--paper);
  letter-spacing: -.01em;
  text-align: center; /* the hero shares one axis: lockup, title, CTA */
}
.hero__book-title em { color: var(--lilac); }
.hero__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hero__quick .btn { min-height: 48px; font-size: .9375rem; padding: 0 12px; gap: 8px; }
/* hero buttons may wrap (400% zoom, enlarged default text) instead of spilling out of their pills */
.hero__cta, .hero__quick .btn { white-space: normal; text-align: center; min-width: 0; }
.hero__quick .i { color: var(--brass); }

.hero__panel { display: none; }
.hero__foot { display: none; }

/* hero intro motion (JS only); the glow breathes a few times, then rests (no endless motion) */
.js .hero__lids { animation: lids-open 1.6s .08s var(--ease-io) both; }
.js .hero__iris { animation: iris-wake 2.4s .7s var(--ease) both, iris-breathe 7s 3.1s ease-in-out 3; }
.js .hero__ring { animation: fade-in 1.6s 1.2s var(--ease) both; }
.js .hero__word { animation: rise 1.1s .15s var(--ease) both; }
.js .hero__eyebrow { animation: rise 1s .05s var(--ease) both; }
.js .hero__studios { animation: rise 1s 1.25s var(--ease) both; }
.js .hero__book { animation: rise .9s .45s var(--ease) both; }
.js .hero__foot { animation: rise 1s 1.3s var(--ease) both; }
/* main.js booted after the fail-safe already showed everything: don't replay the intro */
.no-intro .hero__lids, .no-intro .hero__iris, .no-intro .hero__ring, .no-intro .hero__word, .no-intro .hero__eyebrow,
.no-intro .hero__studios, .no-intro .hero__book, .no-intro .hero__foot { animation: none !important; }
.hero__eye-img.is-blink { animation: blink .5s var(--ease-io); }

@keyframes lids-open {
  0%   { clip-path: ellipse(48% 3% at 50% 61.5%); }
  45%  { clip-path: ellipse(48% 21% at 50% 61.5%); }
  62%  { clip-path: ellipse(52% 26% at 50% 61.5%); }
  100% { clip-path: ellipse(100% 100% at 50% 61.5%); }
}
@keyframes blink {
  0%, 100% { clip-path: ellipse(100% 100% at 50% 61.5%); }
  40%, 55% { clip-path: ellipse(60% 0% at 50% 61.5%); }
}
@keyframes iris-wake { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes iris-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .82; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- mirror panel (desktop hero + inline Book embed) ---------- */
.mirror {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(201, 164, 92, .45);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(201, 164, 92, .10), rgba(10, 11, 22, .4) 40%, rgba(201, 164, 92, .06));
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95), 0 0 140px -50px rgba(108, 75, 216, .55);
}
/* brief brass pulse when a Book button sends focus here instead of opening the drawer */
.mirror::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 2px var(--brass-hi), 0 0 70px 6px rgba(201, 164, 92, .4);
}
.mirror.is-pulse::after { animation: brass-pulse 1.5s var(--ease) both; }
@keyframes brass-pulse { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* while keyboard focus sits in the widget (sent there by a Book button), keep a quiet brass ring */
.mirror.is-focused::after { opacity: 1; box-shadow: 0 0 0 2px var(--brass-hi); }
.mirror.is-focused.is-pulse::after { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 70px 6px rgba(201, 164, 92, .4); }
@keyframes brass-pulse-hold { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
.mirror.is-focused.is-pulse::after { animation-name: brass-pulse-hold; }

.mirror__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(201, 164, 92, .22);
  border-radius: 19px;
  background: var(--ink-2);
}
.mirror__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--brass-faint);
}
.mirror__title { font: 400 1.5rem/1.05 var(--f-serif); color: var(--paper); }
.mirror__title em { color: var(--lilac); }
.mirror__live {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 .75rem/1.2 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.mirror__live > span[aria-hidden] { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(176, 224, 175, .18); }
.mirror__body { position: relative; flex: 1; min-height: 0; background: var(--ink-2); }
.mirror__foot { position: relative; z-index: 2; display: flex; justify-content: center; padding: 2px 12px; border-top: 1px solid var(--brass-faint); }

/* the iframe always sits ABOVE the loader and is never hidden: a blocked frame still shows its own page */
.embed-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.embed-frame:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -3px; }
/* No dark-to-white flash: once its src is set the frame waits over the eye loader and fades in just after
   'load'. Time-bounded in CSS, so it is visible after 2.9s even if 'load' never fires. */
.is-loading .embed-frame { animation: frame-wait 2.9s linear both; }
.is-loading.is-loaded .embed-frame { animation: frame-in .45s .2s var(--ease) both; }
.is-loading.is-shown .embed-frame { animation: none; }
@keyframes frame-wait { 0%, 84% { opacity: 0; } 100% { opacity: 1; } }
@keyframes frame-in { from { opacity: 0; } }

/* the escape hatch is a real control: 48px tall, readable size, brass underline */
.fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--paper);
  font: 400 .9375rem/1.25 var(--f-sans);
  text-align: center;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: rgba(201, 164, 92, .6);
  text-underline-offset: 3px;
  transition: color .3s;
}
.fallback .i { color: var(--brass-hi); }
.fallback:focus-visible { outline-offset: -2px; } /* ring drawn inside: never clipped by the panel edges */
.fallback:hover, .is-slow .fallback, .is-suspect .fallback { color: var(--brass-hi); text-decoration-color: var(--brass); }

/* branded loading state: legible from the first frame */
.loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  transition: opacity .5s, visibility .5s;
}
.is-loaded .loader { opacity: 0; visibility: hidden; }
.is-loaded .loader *, .is-loaded .loader *::before, .is-loaded .loader *::after { animation: none; } /* stop the loops once hidden */
/* no JS: the inline iframe covers the loader anyway; don't leave a never-ending status in the a11y tree */
html:not(.js) .book__embed .loader { display: none; }
.loader__eye { position: relative; width: 124px; }
.loader__eye::before {
  content: "";
  position: absolute;
  left: 50%; top: 61%;
  width: 84px; height: 84px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 77, .5), rgba(155, 124, 244, .22) 50%, transparent 70%);
  filter: blur(10px);
  animation: iris-breathe 2.4s ease-in-out infinite;
}
.loader__img { position: relative; width: 100%; animation: loader-blink 3.2s var(--ease-io) infinite; }
.loader__txt { font: 500 .8125rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.loader__bar { position: relative; width: 140px; height: 1px; overflow: hidden; background: var(--brass-faint); }
.loader__bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--brass-hi), transparent);
  animation: sweep 1.3s var(--ease-io) infinite;
}
.loader__slow { display: none; max-width: 30ch; font-size: var(--t-small); color: var(--paper-2); }
.is-slow .loader__slow { display: block; }
@keyframes loader-blink {
  0%, 40%, 60%, 100% { clip-path: ellipse(100% 100% at 50% 61.5%); }
  48%, 52% { clip-path: ellipse(70% 3% at 50% 61.5%); }
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(225%); } }

/* ---------- full-bleed figures ---------- */
.inside { padding-top: clamp(8px, 2vw, 24px); }
.inside__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; }
.inside__media .ph { position: absolute; inset: 0; }
.inside__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- eyelid reveal: photos open like the logo's eye ---------- */
.js .eyelid { clip-path: ellipse(100% 0% at 50% 50%); }
.js .eyelid.is-in { clip-path: ellipse(100% 100% at 50% 50%); transition: clip-path .7s var(--ease-out); }
.js .eyelid img { transform: scale(1.06); transform-origin: 50% 50%; }
.js .eyelid.is-in img { transform: none; transition: transform 1s var(--ease-out); }
.js .inside__media img, .js .inside__media.is-in img { transform: none; } /* full-bleed: no overscale */
@media (hover: none) and (pointer: coarse) {
  .js .eyelid.is-in { transition-duration: .55s; }
  .js .eyelid.is-in img { transition-duration: .8s; }
}

/* generic fade-up */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }

/* split-line headline reveal */
.split .ln { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em 0; margin-bottom: -.12em; }
.split .ln > span { display: inline-block; }
.js .split .ln > span { transform: translateY(105%); }
.js .split.is-in .ln > span { transform: none; transition: transform .85s var(--ease-out); }
.js .split.is-in .ln + .ln > span { transition-delay: .08s; }

/* revealed instantly (already passed / anchor jump): no animation at all */
.js .no-anim, .js .no-anim *, .js .no-anim.is-in, .js .no-anim.is-in * { transition: none !important; }

/* photo frame: thin brass inset, like the shop's gilt mirrors */
.frame { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink-3); }
.frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(226, 200, 142, .38);
  border-radius: calc(var(--r) - 6px);
  pointer-events: none;
}
.frame .ph { height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* 7. MANIFESTO + STUDIO ---------------------------------------------------- */
.manifesto { position: relative; padding: var(--sec) 0 calc(var(--sec) * .5); }
/* the five lines run on as one paragraph, separated only by their own full stops */
.manifesto__lines {
  margin-top: 28px;
  font: 400 clamp(2.25rem, 1.4rem + 4vw, 5.25rem)/1.06 var(--f-serif); /* 36 → 84 */
  letter-spacing: -.018em;
  color: var(--paper);
  text-wrap: pretty; /* no one-word last line */
}
.line em { color: var(--lilac); }
.line .big { font-size: 1.08em; letter-spacing: .01em; color: var(--coral); }
/* scroll-scrubbed reveal (JS only): each sentence blooms from muted to full colour in turn */
.js .line__t {
  color: color-mix(in srgb, var(--paper) calc(var(--p, 1) * 100%), var(--dim));
}
.js .line__t em { color: color-mix(in srgb, var(--lilac) calc(var(--p, 1) * 100%), var(--dim)); }
.js .line__t .big { color: color-mix(in srgb, var(--coral) calc(var(--p, 1) * 100%), var(--dim)); }

.studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  row-gap: 0;
  margin-top: var(--sec);
}
.studio__text { grid-column: 1 / -1; }
.studio__lead {
  font: 400 var(--t-lead)/1.45 var(--f-sans);
  color: var(--paper);
  letter-spacing: -.005em;
  max-width: 34ch;
}
.studio__pull {
  margin-top: 22px;
  font: italic 400 clamp(2rem, 1.3rem + 3.2vw, 3.75rem)/1.02 var(--f-serif);
  color: var(--lilac);
  letter-spacing: -.01em;
  max-width: 18ch;
}
.studio__cta { margin-top: 30px; }
.studio__fig .frame { aspect-ratio: 2 / 3; }
.studio__fig--noah { grid-column: 1; margin-top: 48px; }
.studio__fig--kevin { grid-column: 2; margin-top: 96px; }
.studio__fig--dunny { grid-column: 1 / -1; margin-top: 32px; }
.studio__fig--dunny .frame { aspect-ratio: 3 / 2; }

/* 8. ABOUT — the paper page ------------------------------------------------ */
.about { position: relative; }
.page {
  position: relative;
  padding-bottom: var(--sec);
  background: var(--pp-bg);
  color: var(--pp-text);
  box-shadow: 0 -1px 0 rgba(201, 164, 92, .5), 0 1px 0 rgba(201, 164, 92, .5);
}
/* the same brass thread that leaves the insert at its foot also binds it at the top */
.page::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: calc(var(--sec) * .42);
  background: linear-gradient(180deg, transparent, rgba(201, 164, 92, .7));
}
.page::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 7px; height: 7px;
  translate: -50% -50%;
  transform: rotate(45deg);
  border: 1px solid var(--brass);
  background: var(--ink);
}
.page ::selection { background: var(--pp-ink); color: var(--pp-bg); }
.page :focus-visible { outline-color: var(--pp-violet); }

/* magazine-style running folio over a double brass rule */
.page__folio {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0 14px;
  border-bottom: 3px double var(--pp-rule);
  font: 500 .6875rem/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-brass);
}
.page__folio-mid { display: none; }

.page .eyebrow { color: var(--pp-brass); }
.page .eyebrow .rule { background: var(--pp-rule); }
.page .h2 { color: var(--pp-ink); }
.page .h2 em { color: var(--pp-violet); }
.page .frame { background: #ddd5c6; box-shadow: 0 30px 50px -36px rgba(18, 19, 31, .55); }

.about__head { padding-top: calc(var(--sec) * .75); }
.about__p1 {
  margin-top: 32px;
  font: 400 clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem)/1.12 var(--f-serif);
  color: var(--pp-ink);
  letter-spacing: -.012em;
}
.about__wide { margin-top: calc(var(--sec) * .75); }
.about__wide-media { aspect-ratio: 4 / 3.4; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  padding-top: calc(var(--sec) * .75);
}
.about__p2 p, .about__p4 p {
  max-width: 36ch;
  font-size: var(--t-read);
  line-height: 1.55;
  color: var(--pp-text);
}
/* drop cap: exactly three lines deep, its foot on line 3's baseline (initial-letter where supported) */
.about__p2 p::first-letter {
  float: left;
  margin: .1em .1em 0 -.02em;
  font: 400 4.05em/.74 var(--f-serif);
  color: var(--pp-brass);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .about__p2 p::first-letter {
    float: none;
    margin: 0 .12em 0 0;
    font-size: 1em;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}
.about__decal { margin-top: 40px; }
.about__decal .frame { aspect-ratio: 4 / 3; }
.mindset {
  margin: var(--sec) 0 calc(var(--sec) * .7);
  font: 400 clamp(min(3.5rem, 15vw), 1.4rem + 10vw, 12rem)/.86 var(--f-serif); /* floor capped by width: fits at 200% text */
  color: var(--pp-ink);
  letter-spacing: -.03em;
}
.mindset em { color: var(--pp-violet); }
.about__capes .frame { aspect-ratio: 3 / 2; }
.about__p4 { margin-top: 40px; }
.about__art { margin-top: 40px; }
.about__art .frame { aspect-ratio: 3 / 2; }

/* closing rule with a small brass diamond — the end of the printed insert */
.page__end { display: flex; justify-content: center; padding-top: calc(var(--sec) * .75); }
.page__end-mark {
  position: relative;
  width: min(100%, 360px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pp-brass) 30%, var(--pp-brass) 70%, transparent);
  opacity: .7;
}
.page__end-mark::before { /* the thread starts here and runs down into the night */
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 1px;
  height: calc(var(--sec) - 4px);
  background: var(--pp-brass);
}
.page__end-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  translate: -50% -50%;
  transform: rotate(45deg);
  border: 1px solid var(--pp-brass);
  background: var(--pp-bg);
}

/* 9. THE MIND IS THE WEAPON — poster (not pinned) ------------------------- */
.mind {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92svh;           /* a poster, not a pinned stage: no dead scroll on phones */
  padding: var(--sec) var(--gutter);
  overflow: hidden;
  background: var(--ink);
}
/* a brass thread runs from the paper's closing diamond down into the statement */
.mind::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(50% - 11.5rem);
  background: linear-gradient(180deg, rgba(201, 164, 92, .7), rgba(201, 164, 92, .22) 70%, transparent);
  transform-origin: top;
}
.js .mind::before { transform: scaleY(calc(.15 + var(--mp, 1) * .85)); }
/* phones/tablets: no forced poster height; more air above (the thread) than below (1 : .6) */
@media (max-width: 1023.98px) {
  .mind { min-height: 0; padding: calc(var(--sec) * 1.6) var(--gutter) calc(var(--sec) * .95); }
  .mind::before { height: calc(var(--sec) * 1.6 - 24px); }
}
/* the poster already breathes: the next section needs less top padding */
.about + .artists { padding-top: calc(var(--sec) * .5); }
.mind__glow { position: absolute; inset: 0; pointer-events: none; }
.mind__glow span {
  position: absolute;
  inset: 4% 6%;
  background: radial-gradient(closest-side, rgba(255, 106, 77, .30) 0%, rgba(224, 57, 62, .15) 26%, rgba(108, 75, 216, .26) 52%, transparent 100%);
}
/* breathes a few times as the poster arrives, then rests */
html:not(.js) .mind__glow span, .mind.is-live .mind__glow span { animation: iris-breathe 7s ease-in-out 3; }
.js .mind__glow { transform: scale(calc(.5 + var(--mp, 1) * .5)); opacity: calc(.25 + var(--mp, 1) * .75); }
.mind__text {
  position: relative;
  margin: 0;
  max-width: 100%;
  font: 400 min(19.5vw, 15.5rem)/.9 var(--f-serif); /* no rem floor: enlarged default text can't push it past the viewport */
  letter-spacing: -.012em;
  text-align: center;
  color: var(--paper);
}
.mind__text em { color: var(--lilac); }
.mind__text .br-d { display: none; }
.mind .w { display: inline-block; }
/* the italic comma of "WEAPON," descends deep: give its line (only) room so it never touches the next one */
.mind .w--comma { padding-bottom: .1em; }
.js .mind .w {
  color: color-mix(in srgb, var(--paper) calc(var(--p, 1) * 100%), var(--dim));
  transform: translateY(calc((1 - var(--p, 1)) * .1em));
}
.js .mind .w em { color: color-mix(in srgb, var(--lilac) calc(var(--p, 1) * 100%), var(--dim)); }

/* 10. ARTISTS -------------------------------------------------------------- */
.artists { position: relative; padding: var(--sec) 0 calc(var(--sec) * .5); }
.artists__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px var(--gap);
  margin-top: calc(var(--sec) * .6);
}
.artist { min-width: 0; }
.artist:nth-child(even) { margin-top: 48px; }
.artist__ph { aspect-ratio: 3 / 4; }
.artist__meta { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; padding-top: 14px; }
.artist__name {
  font: 400 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/.95 var(--f-serif);
  color: var(--paper);
  letter-spacing: -.01em;
  overflow-wrap: anywhere; /* only ever needed at very large default text sizes */
}
.artist__name em { display: block; color: var(--lilac); }
.artist .pill { margin-top: 6px; }
@media (hover: hover) {
  .artist__ph img { transition: transform 1.2s var(--ease); }
  .artist:hover .artist__ph.is-in img { transform: scale(1.04); }
}

.artists__cta {
  display: grid;
  gap: 24px;
  margin-top: var(--sec);
  padding-top: 32px;
  border-top: 1px solid var(--brass-faint);
}
.artists__cta-text {
  font: 400 clamp(2rem, 1.4rem + 3vw, 4.25rem)/1.02 var(--f-serif);
  color: var(--paper);
  letter-spacing: -.015em;
  max-width: 16ch;
  text-wrap: balance;
}
.artists__cta .btn { justify-self: start; }

/* 11. BOOK — inline Squire embed ------------------------------------------ */
/* the shop's navy wall, edged by single brass rules (no glow: that's reserved for the eye moments) */
.book {
  position: relative;
  padding: var(--sec) 0 calc(var(--sec) * .5);
  border-block: 1px solid var(--brass-faint);
  background: linear-gradient(180deg, #0f1236 0%, #12153f 50%, #0f1236 100%);
}
.book__grid { display: grid; gap: 28px; }
.book__main { display: grid; gap: 12px; min-width: 0; }
.book__full { justify-self: start; min-height: 44px; padding: 10px 18px; font-size: .9375rem; line-height: 1.2; white-space: normal; text-align: left; }
.book__full .i { color: var(--brass-hi); }
.book__embed .mirror__inner { height: auto; }
/* phones: capped so the page can always be scrolled past the frame; full gutters stay free as thumb strips */
.book__embed .mirror__body { flex: none; height: min(560px, 64svh); }

/* touch screens: a transparent shield lets page swipes pass over the widget until it is tapped once */
.book__shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(closest-side, rgba(10, 11, 22, .38), transparent);
  cursor: pointer;
  touch-action: pan-y;
}
.book__shield[hidden] { display: none; }
.book__shield-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 164, 92, .5);
  background: rgba(10, 11, 22, .86);
  color: var(--paper);
  font: 500 .9375rem/1 var(--f-sans);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
}
.book__shield-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(176, 224, 175, .2); }

/* poster in place of a second live widget */
.book__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: var(--ink-2);
}
.book__poster[hidden] { display: none; }
.book__poster-eye { width: 110px; }
.book__poster-t { font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem)/1.05 var(--f-serif); color: var(--paper); }
.book__poster-t em { color: var(--lilac); }
.is-poster .embed-frame, .is-poster .loader { display: none; }
/* poster mode: the frame hugs the poster, and the separate full-screen button would just repeat it */
.book__embed.is-poster .mirror__body { height: auto; }
.is-poster .book__poster { position: relative; inset: auto; }
.book__main:has(.is-poster) .book__full { display: none; }
@media (max-height: 500px) {
  .book__poster-eye { display: none; }
  .book__poster { gap: 12px; padding: 18px; }
}

.facts { display: grid; margin: 0; border-top: 1px solid var(--brass-faint); }
/* phones/tablets: Visit follows straight away with the same details (and Call/Directions buttons) */
@media (max-width: 1023.98px) {
  .facts { display: none; }
}
.facts > div { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--brass-faint); }
.facts dt { font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.facts dd { margin: 0; min-width: 0; }
.facts a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 0;
  color: var(--paper);
  font-size: 1rem; line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.facts a:hover { color: var(--brass-hi); }

/* 12. VISIT + FOLLOW + FOOTER --------------------------------------------- */
.visit { position: relative; padding: var(--sec) 0 calc(var(--sec) * .5); }
.visit__grid { display: grid; gap: 40px; }
.visit__addr { display: grid; gap: 12px; margin-top: 28px; }
.visit__street { font: 400 clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem)/1 var(--f-serif); color: var(--paper); letter-spacing: -.015em; }
.visit__street .it { color: var(--lilac); }
.visit__addr .mono { color: var(--paper-2); text-transform: none; letter-spacing: .06em; } /* the client's casing, in mono */
.visit__actions { display: grid; gap: 10px; margin-top: 28px; }
.visit__text, .visit__map { min-width: 0; }
.visit__actions .btn { white-space: normal; text-align: center; min-width: 0; }
.visit__actions .i { color: var(--brass); }
.map {
  /* the studio's point on the map (where Google's marker pointed, in % of the image): the pin,
     the image's object-position and the night wash all share it, so cover-cropping keeps them registered */
  --pin-x: 45.74%;
  --pin-y: 41.8%;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--brass-line);
  background: #1a1d3a;
}
.map .ph { position: absolute; inset: 0; }
.map .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pin-x) var(--pin-y);
  filter: invert(.9) hue-rotate(188deg) saturate(.5) brightness(.82) contrast(1.05);
}
.map::after { /* indigo night wash */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at var(--pin-x) var(--pin-y), transparent 0%, rgba(10, 11, 22, .45) 100%), rgba(40, 34, 120, .22);
  pointer-events: none;
}
/* custom pin: a coral point on the corner, the eye floating above it */
.map__pin {
  position: absolute;
  left: var(--pin-x); top: var(--pin-y);
  z-index: 2;
  width: 14px; height: 14px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(10, 11, 22, .7), 0 0 24px 4px rgba(255, 106, 77, .55);
}
.map__eye {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  width: 84px;
  max-width: none;
  translate: -50% 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6));
}
.map__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  opacity: 0;
}
/* two rings when the map comes into view, then still (no endless motion) */
html:not(.js) .map__pulse, .map.is-live .map__pulse { animation: pulse 2.4s var(--ease) 2; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }

/* Follow: an editorial band between double brass rules; the handle itself is the link, set large */
.follow { margin-top: var(--sec); }
.follow__in {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 36px 0 32px;
  border-block: 3px double var(--brass-line);
}
.follow__title { font: 400 clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem)/1 var(--f-serif); color: var(--paper); letter-spacing: -.015em; }
.follow__title em { display: block; color: var(--lilac); }
.follow__text { max-width: 40ch; }
.follow__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  margin-top: 8px;
  padding: 16px 0 6px;
  border-top: 1px solid var(--brass-faint);
  color: var(--paper);
  text-decoration: none;
}
.follow__label {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--t-micro)/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.follow__label .i { width: 16px; height: 16px; }
.follow__handle {
  min-width: 0;
  font: italic 400 clamp(1.875rem, 1.2rem + 3vw, 3.75rem)/1.05 var(--f-serif);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(201, 164, 92, .45);
  text-underline-offset: .14em;
  transition: color .3s, text-decoration-color .3s;
}
.follow__arrow { width: 36px; height: 36px; padding: 7px; border: 1px solid var(--brass-line); border-radius: 50%; color: var(--brass-hi); transition: transform .35s var(--ease), background-color .3s; }
@media (hover: hover) {
  .follow__link:hover .follow__handle { color: var(--lilac); text-decoration-color: var(--lilac); }
  .follow__link:hover .follow__arrow { transform: translate(3px, -3px); background: rgba(201, 164, 92, .1); }
}

.ftr {
  position: relative;
  padding-top: calc(var(--sec) * .7);
  border-top: 1px solid var(--brass-faint);
  background: #080912; /* flat ink with brass hairlines */
  overflow: hidden;
}
.ftr__top { display: grid; gap: 40px; }
.ftr__brand { display: flex; align-items: center; gap: 16px; }
.ftr__eye { width: 92px; }
.ftr__line { font: italic 400 1.625rem/1.1 var(--f-serif); color: var(--paper); }
.ftr__nav ul, .ftr__contact { list-style: none; margin: 0; padding: 0; }
.ftr__nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.ftr__nav a, .ftr__contact a {
  display: flex; align-items: center;
  min-height: 44px;
  color: var(--paper-2);
  text-decoration: none;
  transition: color .3s;
}
.ftr__nav a { gap: 10px; font: 400 1.5rem/1 var(--f-serif); color: var(--paper); }
/* Book is the primary action: its own row, in the booking mint, with the arrow */
.ftr__nav-book { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--brass-faint); }
.ftr__nav .ftr__nav-book a { color: var(--mint); }
.ftr__nav-book .i { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.ftr__nav a:hover, .ftr__contact a:hover { color: var(--brass-hi); }
.ftr__nav .ftr__nav-book a:hover { color: var(--mint-hi); }
.ftr__nav-book a:hover .i { transform: translateX(4px); }
/* contact rows carry mono micro-labels, like the Book section's facts */
.ftr__contact li { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--brass-faint); }
.ftr__contact li:first-child { border-top: 1px solid var(--brass-faint); }
.ftr__k { font: 500 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ftr__contact a { padding: 6px 0; font-size: var(--t-small); line-height: 1.35; overflow-wrap: break-word; }
.ftr__word { margin-top: calc(var(--sec) * .75); padding-inline: var(--gutter); }
/* never wider than the 1202px source (no upscaling at 1× on wide screens) */
.ftr__word img { width: 100%; max-width: 1202px; margin-inline: auto; }
.ftr__base {
  display: flex;
  flex-direction: column; /* © line, then the site credit beneath it */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px 20px;
  padding-top: 24px;
  padding-bottom: 24px;
  font: 400 var(--t-micro)/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--muted);
}
.ftr__base p { letter-spacing: .06em; } /* "© 2026 Vision Studios" keeps the client's casing */
/* site credit: the footer's fine-print colour (same as the © line), brass under the pointer like the
   other footer links; the wordmark crossfades to a brass copy. The 44px row is only a bigger thumb target. */
.made-by a {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 .5rem;
  font: 400 .625rem/1 var(--f-sans);
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  transition: color .35s ease;
}
.made-by__mark { position: relative; display: block; }
.made-by__mark img { display: block; height: 15px; width: auto; }
.made-by__hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
/* "design lab" finishes the logo's name, so it sits a little closer to it than the lead-in does */
.made-by .lab { margin-left: -.2rem; }
.made-by a:hover, .made-by a:focus-visible { color: var(--brass-hi); }
.made-by a:hover .made-by__hover, .made-by a:focus-visible .made-by__hover { opacity: 1; }

/* 13. BOOKING DIALOG — bottom sheet (phones/tablets) / drawer (desktop) --- */
.booking {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  height: 92dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(201, 164, 92, .4);
  border-radius: 24px 24px 0 0;
  background: var(--ink-2);
  color: var(--paper-2);
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .6);
}
.booking[open] { display: flex; flex-direction: column; animation: sheet-in .38s var(--ease) both; }
.booking.is-closing { animation: sheet-out .3s cubic-bezier(.5, 0, .75, 0) forwards; }
/* the backdrop lightens as the sheet is dragged down (--drag: 0…1, set while dragging) */
.booking::backdrop { background: rgba(5, 6, 14, .66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: calc(1 - var(--drag, 0) * 1.4); }
.booking[open]::backdrop { animation: fade-in .45s both; }
.booking.is-closing::backdrop { animation: fade-out .3s forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }

.booking__head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 22px 12px 14px 16px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.booking__handle {
  position: absolute;
  top: 8px; left: 50%;
  width: 44px; height: 5px;
  translate: -50% 0;
  border-radius: 3px;
  background: rgba(242, 236, 226, .3);
}
.booking__eye { width: 46px; flex: none; }
.booking__titles { flex: 1; min-width: 0; }
.booking__title { font: 400 1.625rem/1 var(--f-serif); color: var(--paper); letter-spacing: -.01em; }
.booking__title em { color: var(--lilac); }
.booking__sub { margin-top: 6px; font: 500 .8125rem/1.25 var(--f-sans); letter-spacing: .01em; color: var(--brass-hi); }
.booking__close {
  display: grid; place-items: center;
  flex: none;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--brass-line);
  border-radius: 50%;
  background: rgba(242, 236, 226, .03);
  cursor: pointer;
  transition: background-color .3s, transform .2s;
}
.booking__close:hover { background: rgba(201, 164, 92, .12); }
.booking__close:active { transform: scale(.94); }
.booking__close .i { width: 22px; height: 22px; }
/* phones: the widget runs edge-to-edge for maximum width */
.booking__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  border-top: 1px solid var(--brass-faint);
  background: var(--ink);
}
.booking__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  justify-content: center;
  padding: 2px 16px env(safe-area-inset-bottom);
  border-top: 1px solid var(--brass-faint);
}
/* keyboard exit from the widget: invisible until it receives focus (one Tab out of the iframe) */
.booking__done {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  z-index: 3;
  min-height: 48px;
  padding: 0 22px;
  translate: -50% 0;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 .9375rem/1 var(--f-sans);
  cursor: pointer;
}
.booking__done:not(:focus) { opacity: 0; pointer-events: none; transform: translateY(8px); }
.booking__done { transition: opacity .2s, transform .25s var(--ease); white-space: nowrap; }
/* 320px: compact head so the widget keeps ~400px */
@media (max-width: 359.98px) {
  .booking__eye { display: none; }
  .booking__title { font-size: 1.375rem; white-space: nowrap; }
  .booking__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .booking__head { padding: 18px 10px 8px 14px; }
  .booking__sub { margin-top: 4px; }
}

/* tablets: centred sheet */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .booking { width: min(760px, 100%); margin-inline: auto; border-inline: 1px solid rgba(201, 164, 92, .3); }
}
/* landscape phones: use the whole height, compact head */
@media (max-height: 500px) and (max-width: 1023.98px) {
  .booking { height: 100dvh; border-radius: 0; }
  .booking__handle { display: none; }
  .booking__head { padding: 8px 12px 8px 16px; }
  .booking__eye { width: 36px; }
  .booking__title { font-size: 1.25rem; }
  .booking__sub { display: none; }
  .booking__close { width: 44px; height: 44px; }
}

/* landscape phones: compact chrome */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1023.98px) {
  :root { --hdr-h: 58px; }
  .hero { padding-bottom: 12px; }
  .hero__bg::after { display: none; }
  .hero__in { padding-top: 4px; }
  /* narrow lockup column: a single-line eyebrow without the side rules */
  .hero__eyebrow { gap: 8px; letter-spacing: .1em; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; }
  .hero__eyebrow > span { white-space: nowrap; }
  .hero__eyebrow-loc::before { margin-right: 8px; }
}
/* …lockup and booking card side by side once there's real width for two columns (not at 400% zoom) */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) and (max-width: 1023.98px) {
  .hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .hero__title { margin-top: 10px; }
  .hero__word { width: min(26vw, 260px); }
  .hero__eye { width: min(34vw, 44svh * 1.55); margin-top: 0; }
  .hero__studios { margin-top: 2px; }
  .hero__book { max-width: 420px; padding: 16px 14px 14px; }
  .hero__book-title { font-size: 1.5rem; margin-bottom: 10px; }
}

/* 14. TABLET ≥ 768 --------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__book { padding: 22px 22px 20px; }
  .inside__media { aspect-ratio: 16 / 10; }
  .about__wide-media { aspect-ratio: 16 / 10; }
  .studio__fig--noah { margin-top: 72px; }
  .studio__fig--kevin { margin-top: 160px; }
  .artists__grid { gap: 56px var(--gap); }
  .artist:nth-child(even) { margin-top: 88px; }
  .visit__actions { grid-auto-flow: column; justify-content: start; }
  .follow__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: end; padding: 56px 0 48px; }
  .follow__title { grid-row: 1 / span 2; align-self: start; }
  .follow__link { grid-column: 1 / -1; }
  .ftr__top { grid-template-columns: 1.2fr 1fr 1.3fr; align-items: start; }
  .ftr__nav ul { grid-template-columns: 1fr; }
  .page__folio-mid { display: inline; }
}
/* real tablets only (not 844×390 landscape phones): a taller inline widget */
@media (min-width: 768px) and (min-height: 600px) {
  .book__embed .mirror__body { height: min(760px, 78svh); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .about__grid { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .about__p2 { grid-column: 1; grid-row: 1; align-self: center; }
  .about__decal { grid-column: 2; grid-row: 1; margin: 0; }
  .about__decal .frame { aspect-ratio: 4 / 5; }
  .mindset, .about__capes { grid-column: 1 / -1; }
  .about__p4 { grid-column: 1; margin-top: 56px; align-self: center; }
  .about__art { grid-column: 2; margin-top: 56px; }
  .studio__text { max-width: 600px; }
  .hero__book { max-width: 560px; }
}

/* 15. DESKTOP ≥ 1024 ------------------------------------------------------- */
@media (min-width: 1024px) {

  /* header: running head left, nav centred, Book right — a 1fr | auto | 1fr grid, so the running head
     truncates instead of colliding with the nav when text is enlarged */
  .hdr__menu { display: none; }
  .hdr__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; }
  .hdr__id { margin-right: 0; }
  .hdr__run-t { overflow: hidden; text-overflow: ellipsis; }
  .hdr__book { justify-self: end; }
  .hdr__nav { display: block; }
  .hdr__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .hdr__nav a {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 16px;
    color: var(--paper-2);
    font: 500 .9375rem/1 var(--f-sans);
    text-decoration: none;
    transition: color .3s;
  }
  .hdr__nav a::after {
    content: "";
    position: absolute; left: 16px; right: 16px; bottom: 9px;
    height: 1px; background: var(--brass);
    transform: scaleX(0); transform-origin: right;
    transition: transform .45s var(--ease);
  }
  .hdr__nav a:hover, .hdr__nav a.is-active { color: var(--paper); }
  .hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
  .hdr.is-paper .hdr__nav a { color: var(--pp-muted); }
  .hdr.is-paper .hdr__nav a:hover, .hdr.is-paper .hdr__nav a.is-active { color: var(--pp-ink); }
  .hdr.is-paper .hdr__nav a::after { background: var(--pp-brass); }
  .hdr__book { min-height: 46px; padding: 0 22px 0 18px; }

  /* hero: brand left, live booking panel right. The lockup is sized by width AND height, so on
     short laptops (1280×720, 1366×768) the address line and the frame stay above the fold. */
  .hero { padding-bottom: 40px; }
  .hero__bg::after {
    inset: calc(var(--hdr-h) + 4px) 16px 16px;
    /* ≥1600: the frame follows the 1600px content column instead of hugging the viewport */
    left: max(16px, calc((100% - 1600px) / 2 + 16px));
    right: max(16px, calc((100% - 1600px) / 2 + 16px));
    border-radius: 22px;
  }
  .hero__in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: var(--gap);
    row-gap: 12px;
    padding-top: clamp(20px, 3.4svh, 40px);
    padding-inline: calc(var(--gutter) + 8px);
  }
  .hero__lockup { grid-column: 1 / span 7; grid-row: 1; justify-content: center; padding-bottom: 8px; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: block; }
  .hero__title { margin-top: clamp(10px, 1.6svh, 22px); }
  .hero__word { width: min(31vw, 460px, calc((100svh - var(--hdr-h)) * .44)); }
  .hero__eye { width: min(44vw, 640px, calc((100svh - var(--hdr-h) - 330px) * 1.45)); }
  .hero__book { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; }
  .js .hero__book { display: none; }
  /* capped: Squire's light UI is mostly empty below its first cards; more night and brass frame around it */
  .js .hero__panel { display: block; grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; height: min(calc(100svh - var(--hdr-h) - 72px), 640px); }
  /* 1024–1199: one-line panel title, the "Online booking" label keeps only its dot */
  .mirror__title { white-space: nowrap; font-size: clamp(1.25rem, .9rem + .6vw, 1.5rem); }
  .hero__foot {
    display: flex;
    grid-column: 1 / span 7;
    grid-row: 2;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
  }
  .hero__addr { display: grid; gap: 6px; min-height: 44px; color: var(--paper-2); text-decoration: none; }
  .hero__addr .mono { text-transform: none; letter-spacing: .06em; }
  .hero__addr .mono:first-child { color: var(--paper); }
  .hero__addr:hover .mono { color: var(--brass-hi); }

  .inside__media { aspect-ratio: auto; height: min(88vh, 900px); }
  .js [data-parallax] img { height: 116%; margin-top: -8%; transform: translateY(var(--py, 0)); will-change: transform; }

  /* the figures zig-zag in number order: 02 right, 03 left, 04 right */
  .studio { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
  .studio__text { grid-column: 2 / span 5; grid-row: 1; align-self: center; }
  .studio__fig--noah { grid-column: 8 / span 4; grid-row: 1; margin-top: 0; }
  .studio__fig--kevin { grid-column: 2 / span 3; grid-row: 2; margin-top: 96px; }
  .studio__fig--dunny { grid-column: 6 / span 7; grid-row: 2; margin-top: 200px; }

  /* the paper page */
  .page__folio { padding-top: 26px; }
  .about__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .about__head .eyebrow { grid-column: 1 / -1; }
  .about__head .h2 { grid-column: 1 / span 6; }
  .about__p1 { grid-column: 7 / -1; margin-top: 0; padding-bottom: .4em; font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); }
  .about__wide-media { aspect-ratio: 21 / 9; }

  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about__p2 { grid-column: 2 / span 5; grid-row: 1; align-self: center; }
  .about__decal { grid-column: 8 / -1; grid-row: 1; margin: 0; }
  .about__decal .frame { aspect-ratio: 5 / 4; }
  .mindset { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .about__capes { grid-column: 1 / span 7; grid-row: 3; }
  .about__p4 { grid-column: 9 / -1; grid-row: 3; margin-top: 0; align-self: start; }
  .about__art { grid-column: 9 / -1; grid-row: 3; align-self: end; margin: 0; }

  .mind { min-height: min(100vh, 1100px); }
  .page::before { height: calc(var(--sec) * .3); } /* clear of the figure captions above */
  .mind__text { font-size: clamp(6rem, 12.6vw, 16rem); line-height: .86; }
  .mind__text .br-m { display: none; }
  .mind__text .br-d { display: inline; }
  .mind__text .br-m.br-d { display: inline; }

  .artists__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
  .artists__head .eyebrow { flex-basis: 100%; }
  .artists__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .artist:nth-child(even) { margin-top: 120px; }
  .artists__cta { grid-template-columns: 1fr auto; align-items: end; }

  .book__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    row-gap: 40px;
    align-items: start;
  }
  .book__head { grid-column: 1 / span 5; grid-row: 1; }
  /* heading top-left; the details sit right under it and stay pinned beside the tall embed
     while it scrolls past, so the left column never reads as an empty band */
  .facts { grid-column: 1 / span 4; grid-row: 2; align-self: start; position: sticky; top: calc(var(--hdr-h) + 32px); }
  .book__main { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .book__full { display: none; }

  .visit__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .visit__text { grid-column: 1 / span 5; }
  .visit__map { grid-column: 6 / -1; }
  .map { aspect-ratio: 16 / 10; }

  .follow__in { column-gap: 64px; padding: 72px 0 64px; }
  .follow__link { grid-column: 2; margin-top: 0; }
  .follow__title { grid-row: 1 / span 2; }

  .ftr__top { grid-template-columns: 1.5fr 1fr 1.4fr; }

  /* drawer */
  .booking {
    inset: 0 0 0 auto;
    width: min(640px, 48vw);
    height: 100dvh;
    border-top: 0;
    border-left: 1px solid rgba(201, 164, 92, .4);
    border-radius: 0;
  }
  .booking[open] { animation-name: drawer-in; animation-duration: .55s; }
  .booking.is-closing { animation-name: drawer-out; }
  .booking__handle { display: none; }
  .booking__head { padding: 22px 22px 18px 28px; cursor: auto; touch-action: auto; }
  .booking__title { font-size: 2rem; }
  .booking__body { margin: 0 16px; border: 1px solid var(--brass-faint); border-radius: 16px; }
  .booking__foot { border-top: 0; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero__panel .mirror__live-t { display: none; }
}

/* 16. WIDE ≥ 1440 ---------------------------------------------------------- */
@media (min-width: 1440px) {
  .hero__word { width: min(30vw, 500px, calc((100svh - var(--hdr-h)) * .44)); }
  .hero__eye { width: min(42vw, 680px, calc((100svh - var(--hdr-h) - 330px) * 1.45)); }
}
/* ≥1920: the lockup grows with the (capped) content column instead of floating small in the frame */
@media (min-width: 1920px) {
  .hero__word { width: min(28vw, 600px, calc((100svh - var(--hdr-h)) * .44)); }
  .hero__eye { width: min(40vw, 820px, calc((100svh - var(--hdr-h) - 330px) * 1.45)); }
  .js .hero__panel { height: min(calc(100svh - var(--hdr-h) - 72px), 700px); }
}

/* 17. NO-JS FALLBACKS ------------------------------------------------------ */
/* the hamburger needs JS: hide it and show the nav links as a second header row */
html:not(.js) .hdr__menu, html.no-menu .hdr__menu { display: none; }
html:not(.js) .hdr::before, html.no-menu .hdr::before { opacity: 1; }
html:not(.js) .book__full { display: none; }
@media (max-width: 1023.98px) {
  html:not(.js), html.no-menu { --hdr-x: 46px; }
  html:not(.js) .hdr__in, html.no-menu .hdr__in { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 10px; }
  html:not(.js) .hdr__nav, html.no-menu .hdr__nav {
    display: block;
    order: 9;
    flex: 1 0 100%;
    margin-inline: calc(var(--gutter) * -1);
    border-top: 1px solid var(--brass-faint);
  }
  html:not(.js) .hdr__nav ul, html.no-menu .hdr__nav ul {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin: 0;
    padding: 0 calc(var(--gutter) - 8px);
    list-style: none;
  }
  html:not(.js) .hdr__nav a, html.no-menu .hdr__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--paper);
    font: 500 .9375rem/1 var(--f-sans);
    text-decoration: none;
  }
}

/* 18. REDUCED MOTION: everything legible, nothing moves -------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__eye { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .eyelid, .js .eyelid.is-in { clip-path: none; }
  .js .eyelid img, .js [data-reveal], .js .split .ln > span { transform: none !important; opacity: 1 !important; }
  .js .line, .js .mind .w { --p: 1 !important; }
  .js .mind .w { transform: none; }
  .js .mind__glow { transform: none; opacity: 1; }
  .js .mind::before { transform: none; }
  .js [data-parallax] img { transform: none; height: 100%; margin-top: 0; }
}