/* ==========================================================================
   Copper and Patina: design tokens and components
   Every color, type size, duration and z-index traces to :root.
   ========================================================================== */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks, so the font swap does not shift layout */
@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial");
  size-adjust: 98%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* Sampled from the logo */
  --cream: #FFFCE9;
  --parchment: #E3E0C4;
  --rust: #8F3A12;
  --deep-oxide: #5A0F00;
  --verdigris: #4F8878;
  /* Derived from the logo, for contrast */
  --mine: #17110D;
  --oxide-brown: #2A1A12;
  --patina: #2F6657;
  --patina-bright: #9AD6C3;
  --copper: #D98A4E;
  --ash: #CFC6B2;
  --umber: #57463A;
  --error-on-light: #A1260D;
  --error-on-dark: #F4A68C;

  --mine-rgb: 23 17 13;
  --oxide-rgb: 42 26 18;
  --cream-rgb: 255 252 233;
  --copper-rgb: 217 138 78;
  --deep-oxide-rgb: 90 15 0;

  /* Type */
  --font-display: "Gloock", "Gloock Fallback", Georgia, serif;
  --font-body: "Instrument Sans", "Instrument Fallback", Arial, sans-serif;
  --fs-xl: clamp(2.875rem, 6.1vw, 6.75rem);
  --fs-l: clamp(2.375rem, 5.2vw, 5rem);
  --fs-m: clamp(1.75rem, 3vw, 2.75rem);
  --fs-s: clamp(1.375rem, 1.9vw, 1.75rem);
  --fs-lede: clamp(1.125rem, 1.45vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.15vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --track-label: 0.3em;
  --lh-tight: 1.02;
  --lh-body: 1.65;

  /* Space */
  --gutter: clamp(20px, 4.5vw, 72px);
  --max: 1560px;
  --section: clamp(88px, 12vw, 176px);
  --section-s: clamp(64px, 8vw, 112px);
  --gap: clamp(20px, 2.4vw, 36px);
  --topbar-h: 40px;
  --header-h: 88px;
  --header-h-shrunk: 64px;
  --masthead-h: calc(var(--topbar-h) + var(--header-h));
  --mobile-bar-h: 56px;
  --strata-h: clamp(34px, 6.4vw, 104px);

  /* Depth */
  --shadow-hung: 0 1px 1px rgb(var(--mine-rgb) / .25), 0 4px 8px rgb(var(--mine-rgb) / .22), 0 16px 32px rgb(var(--mine-rgb) / .22), 0 40px 80px rgb(var(--deep-oxide-rgb) / .28);
  --shadow-near: 0 2px 2px rgb(0 0 0 / .4), 0 10px 18px rgb(0 0 0 / .4), 0 32px 56px rgb(0 0 0 / .45), 0 70px 120px rgb(var(--deep-oxide-rgb) / .45);
  --shadow-far: 0 1px 1px rgb(0 0 0 / .4), 0 8px 18px rgb(0 0 0 / .4);

  /* Motion: one family of curves, heavy and physical, never a bounce */
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-micro: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-mask: cubic-bezier(0.76, 0, 0.24, 1);
  --t-micro: 240ms;
  --t-reveal: 900ms;
  --t-mask: 1200ms;

  /* Stack */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--header-h-shrunk) + 24px);
  background: var(--mine);
}
body {
  margin: 0;
  background: var(--mine);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; background: none; border: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus, var(--copper)); outline-offset: 3px; }
::selection { background: var(--patina); color: var(--cream); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: var(--z-modal);
  padding: 12px 20px; background: var(--cream); color: var(--mine); font-weight: 600;
  transition: transform var(--t-micro) var(--ease-micro);
}
.skip:focus { transform: translateY(92px); }

.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--solid { fill: currentColor; stroke: none; }

/* Field themes: each section sets its own room */
.on-mine, .on-brown, .on-cream, .on-parchment, .on-patina, .on-rust { background: var(--bg); color: var(--fg); position: relative; }
.on-mine { --bg: var(--mine); --fg: var(--cream); --muted: var(--ash); --label: var(--copper); --rule: rgb(var(--cream-rgb) / .18); --focus: var(--copper); }
.on-brown { --bg: var(--oxide-brown); --fg: var(--cream); --muted: var(--ash); --label: var(--copper); --rule: rgb(var(--cream-rgb) / .18); --focus: var(--copper); }
.on-cream { --bg: var(--cream); --fg: var(--mine); --muted: var(--umber); --label: var(--rust); --rule: rgb(var(--mine-rgb) / .18); --focus: var(--rust); }
.on-parchment { --bg: var(--parchment); --fg: var(--mine); --muted: var(--umber); --label: var(--rust); --rule: rgb(var(--mine-rgb) / .22); --focus: var(--rust); }
.on-patina { --bg: var(--patina); --fg: var(--cream); --muted: var(--cream); --label: var(--parchment); --rule: rgb(var(--cream-rgb) / .3); --focus: var(--cream); }
.on-rust { --bg: var(--rust); --fg: var(--cream); --muted: var(--cream); --label: var(--parchment); --rule: rgb(var(--cream-rgb) / .3); --focus: var(--cream); }

.section { padding-block: var(--section); }
.section--s { padding-block: var(--section-s); }

/* Type */
.display-xl, .display-l, .display-m, .display-s { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.015em; text-wrap: balance; }
.display-xl { font-size: var(--fs-xl); }
.display-l { font-size: var(--fs-l); }
.display-m { font-size: var(--fs-m); line-height: 1.08; }
.display-s { font-size: var(--fs-s); line-height: 1.15; letter-spacing: -0.005em; }
.label {
  display: block; font-size: var(--fs-label); font-weight: 600; line-height: 1.5;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--label);
}
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 42ch; }
.prose { max-width: 66ch; color: var(--muted); }
.prose > * + * { margin-top: 1.1em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a, .text-link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--label); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--t-micro) var(--ease-micro); }
.prose a:hover, .text-link:hover { text-decoration-color: var(--fg); text-decoration-thickness: 2px; }
.stack > * + * { margin-top: var(--stack, 24px); }
.head { max-width: 62rem; margin-bottom: clamp(40px, 5vw, 72px); }
.head .label { margin-bottom: 16px; }
.head .lede { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Buttons and links. The primary button "oxidizes" from rust to patina.
   -------------------------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 12px 30px;
  background: var(--rust); color: var(--cream);
  font-weight: 600; font-size: 1rem; letter-spacing: .01em; text-decoration: none; text-align: center; line-height: 1.2;
  box-shadow: var(--shadow-far);
  transition: transform var(--t-micro) var(--ease-micro);
}
.btn::before {
  content: ""; position: absolute; inset: -2px -24px; z-index: -1;
  background: var(--patina);
  transform: translateX(-104%) skewX(-18deg);
  transition: transform 460ms var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(-18deg); }
.btn:active { transform: translateY(2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn--cream { background: var(--cream); color: var(--mine); }
.btn--cream::before { background: var(--parchment); }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); }
.btn .icon { transition: transform var(--t-micro) var(--ease-micro); }
.btn:hover .icon { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; color: var(--fg); text-decoration: none;
}
.link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.link-arrow .icon { transition: transform var(--t-micro) var(--ease-micro); }
.link-arrow:hover .icon { transform: translateX(6px); }
.link-arrow:hover span { background-size: 100% 2px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* --------------------------------------------------------------------------
   Masthead: sticky top bar and shrinking header, with a hanging logo sign
   -------------------------------------------------------------------------- */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky); }
.progress {
  position: absolute; left: 0; right: 0; top: var(--topbar-h); height: 2px; z-index: 3;
  background: var(--copper); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.topbar {
  position: relative; z-index: 2; height: var(--topbar-h);
  background: var(--mine); color: var(--ash); font-size: 0.8125rem; line-height: 1;
  border-bottom: 1px solid rgb(var(--cream-rgb) / .1);
}
.topbar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-left: calc(var(--gutter) + clamp(112px, 11vw, 150px)); }
.topbar ul { display: flex; align-items: center; }
.topbar__contact { gap: clamp(14px, 2vw, 30px); min-width: 0; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; text-decoration: none; transition: color var(--t-micro) var(--ease-micro); }
.topbar a:hover { color: var(--cream); }
.topbar .icon { width: 14px; height: 14px; color: var(--copper); }
.topbar__social { gap: 4px; flex: none; }
.topbar__social a { justify-content: center; width: 40px; }
.topbar__social .icon { width: 15px; height: 15px; color: currentColor; }
.status { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--copper); flex: none; }
.status[data-state="open"]::before { background: var(--patina-bright); }
.status[data-state="closed"]::before { background: var(--ash); }

.header { position: relative; z-index: 3; height: var(--header-h); pointer-events: none; }
.header__glass {
  position: absolute; inset: 0; transform-origin: 50% 0;
  background: rgb(var(--oxide-rgb) / .5);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgb(var(--cream-rgb) / .14);
  transition: transform 420ms var(--ease), background-color 420ms var(--ease);
}
.header__in {
  position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 32px);
  transition: transform 420ms var(--ease);
}
.header__in > * { pointer-events: auto; }
.is-shrunk .header__glass { transform: scaleY(calc(64 / 88)); background: rgb(var(--oxide-rgb) / .82); }
.is-shrunk .header__in { transform: translateY(-12px); }

/* Logo image only, on a cream sign that hangs from the top bar like the real one out front */
.sign {
  position: absolute; left: var(--gutter); top: calc(var(--topbar-h) * -1); z-index: 4;
  width: clamp(112px, 11vw, 150px); padding: 10px 10px 8px;
  background: var(--cream);
  box-shadow: var(--shadow-near);
  transform-origin: 0 0;
  transition: transform 420ms var(--ease);
}
.sign img { width: 100%; height: auto; }
.is-shrunk .sign { transform: translateY(12px) scale(.66); }
.sign:focus-visible { outline-color: var(--copper); }

.nav > ul { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 16px); }
.nav a, .nav button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 clamp(4px, .5vw, 8px);
  font-size: 0.9688rem; font-weight: 500; color: var(--cream); text-decoration: none; white-space: nowrap;
}
.nav > ul > li > a::after, .nav > ul > li > button::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px; height: 1px;
  background: var(--copper); transform: scaleX(0); transition: transform var(--t-micro) var(--ease-micro);
}
.nav > ul > li > a:hover::after, .nav > ul > li > button:hover::after, .nav [aria-current="page"]::after, .nav button[aria-expanded="true"]::after { transform: scaleX(1); }
.nav .icon { width: 14px; height: 14px; transition: transform var(--t-micro) var(--ease-micro); }
.nav button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.has-drop { position: relative; }
.drop {
  position: absolute; left: -12px; top: 100%; z-index: var(--z-dropdown); min-width: 290px; padding: 10px;
  background: var(--oxide-brown);
  border: 1px solid rgb(var(--cream-rgb) / .14);
  box-shadow: var(--shadow-near);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-micro) var(--ease-micro), transform var(--t-micro) var(--ease-micro), visibility var(--t-micro);
}
.has-drop.is-open .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: flex; width: 100%; padding: 8px 14px; transition: background-color var(--t-micro) var(--ease-micro), color var(--t-micro) var(--ease-micro); }
.drop a:hover, .drop a:focus-visible { background: var(--patina); }
.header .btn { min-height: 46px; padding: 8px 22px; font-size: 0.9375rem; }

.menu-toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--cream); }
.menu-toggle .icon { width: 26px; height: 26px; }

/* Full-screen mobile menu */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column;
  padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: var(--mine); color: var(--cream);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 620ms var(--ease-mask), visibility 0s linear 620ms;
}
.mobile-nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 620ms var(--ease-mask), visibility 0s; }
.mobile-nav__top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mobile-nav__close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--cream); }
.mobile-nav__close .icon { width: 28px; height: 28px; }
.mobile-nav ul a { display: flex; align-items: center; min-height: 52px; font-family: var(--font-display); font-size: 1.875rem; line-height: 1.1; text-decoration: none; border-bottom: 1px solid rgb(var(--cream-rgb) / .14); }
.mobile-nav .sub { padding: 6px 0 12px 18px; border-bottom: 1px solid rgb(var(--cream-rgb) / .14); }
.mobile-nav .sub a { min-height: 44px; font-family: var(--font-body); font-size: 1.0625rem; border: 0; color: var(--ash); }
.mobile-nav .label { margin-top: 18px; }
.mobile-nav .btn { margin-top: 28px; width: 100%; }

/* --------------------------------------------------------------------------
   Strata: jagged rock layers between rooms, cut from the logo's rough edge
   -------------------------------------------------------------------------- */
.strata {
  position: absolute; left: 0; bottom: calc(100% - 1px); z-index: 2;
  width: 100%; height: var(--strata-h);
  pointer-events: none;
  --s1: var(--strata-back, var(--copper));
  --s2: var(--strata-mid, var(--verdigris));
  --s3: var(--bg);
}
.strata svg { display: block; width: 100%; height: 100%; }
.strata--flip { scale: -1 1; }

/* --------------------------------------------------------------------------
   The salon wall: real artwork hung on copper wires at three depths
   -------------------------------------------------------------------------- */
.wall {
  position: absolute; inset: 0; overflow: hidden;
  perspective: 1500px; perspective-origin: 50% 30%;
}
.wall__light {
  position: absolute; left: 0; top: 0; width: 80vmax; height: 80vmax; margin: -40vmax 0 0 -40vmax;
  background: radial-gradient(closest-side, rgb(var(--copper-rgb) / .2), rgb(var(--copper-rgb) / 0));
  transform: translate3d(var(--lx, 62vw), var(--ly, 30vh), 0);
  pointer-events: none;
}
.frame {
  --d: 1;
  position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--d);
  transform:
    translate3d(
      calc(var(--mx, 0) * var(--d) * -14px),
      calc(var(--my, 0) * var(--d) * -9px + var(--sy, 0) * var(--d) * -1px),
      calc(var(--d) * 26px))
    rotateY(calc(var(--mx, 0) * 2.4deg))
    rotateX(calc(var(--my, 0) * -1.8deg));
  transform-style: preserve-3d;
}
.tier-full .frame { will-change: transform; }
.frame__hang { position: relative; }
.frame__sway { position: relative; transform-origin: 50% -30%; }
.frame__mount {
  position: relative; display: block; padding: clamp(5px, .55vw, 10px);
  background: var(--cream);
  box-shadow: var(--shadow-far);
  transition: transform 640ms var(--ease);
}
.frame--d2 .frame__mount { box-shadow: var(--shadow-hung); }
.frame--d3 .frame__mount { box-shadow: var(--shadow-near); }
.frame img { width: 100%; height: auto; }
/* far frames sit further back in the dark */
.frame--d1 .frame__mount::after {
  content: ""; position: absolute; inset: 0; background: rgb(var(--mine-rgb) / .34);
  transition: opacity 640ms var(--ease); pointer-events: none;
}
.frame a:hover .frame__mount::after, .frame a:focus-visible .frame__mount::after { opacity: 0; }
/* two copper wires up to the rail */
.frame__sway::before {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 100%; height: 150vh;
  border-inline: 1px solid rgb(var(--copper-rgb) / .55);
  pointer-events: none;
}
.frame a { display: block; color: var(--cream); text-decoration: none; }
.frame a:hover .frame__mount, .frame a:focus-visible .frame__mount { transform: translateY(-6px) scale(1.035); }
.frame__label {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 170px; max-width: 230px; padding: 8px 12px;
  background: var(--cream); color: var(--mine); font-size: 0.8125rem; line-height: 1.3;
  box-shadow: var(--shadow-far);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--t-micro) var(--ease-micro), transform var(--t-micro) var(--ease-micro);
}
.frame__label b { display: block; font-weight: 600; }
.frame a:hover .frame__label, .frame a:focus-visible .frame__label { opacity: 1; transform: none; }

.js:not(.tier-minimal) .frame__hang { animation: lower 1500ms var(--ease) both; animation-delay: calc(240ms + var(--n, 0) * 70ms); }
.js:not(.tier-minimal) .frame__sway { animation: sway var(--sway, 8s) ease-in-out infinite alternate; animation-delay: calc(var(--n, 0) * -1.3s); }
.wall.is-paused .frame__sway { animation-play-state: paused; }
@keyframes lower {
  from { transform: translate3d(0, -78vh, 0) rotateX(-10deg); }
  to { transform: none; }
}
@keyframes sway {
  from { transform: translate3d(0, 3px, 0) rotate(-.6deg); }
  to { transform: translate3d(0, -4px, 0) rotate(.6deg); }
}

/* Home hero */
.hero {
  --bg: var(--mine); --fg: var(--cream); --muted: var(--ash); --label: var(--copper);
  position: relative; min-height: max(calc(100svh + var(--strata-h) - 28px), 760px); display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(var(--oxide-brown), var(--mine) 72%); color: var(--cream); overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--mine) 8%, rgb(var(--mine-rgb) / .78) 34%, rgb(var(--mine-rgb) / 0) 62%);
}
.hero__copy { position: relative; z-index: var(--z-raised); padding-bottom: calc(var(--strata-h) + clamp(24px, 3vh, 44px)); pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: end; gap: var(--gap); }
.hero .label { margin-bottom: 18px; }
.hero h1 { text-shadow: 0 2px 30px rgb(var(--mine-rgb) / .7); }
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; }
.js:not(.tier-minimal) .line > span { animation: rise 1000ms var(--ease) both; animation-delay: calc(300ms + var(--n, 0) * 80ms); }
@keyframes rise { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
.js:not(.tier-minimal) .fade-in { animation: fadeUp 900ms var(--ease) both; animation-delay: var(--delay, 700ms); }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
.hero__lede { margin-top: 18px; max-width: 60ch; }
.hero .actions { margin-top: 26px; }

.glass {
  background: rgb(var(--oxide-rgb) / .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgb(var(--cream-rgb) / .14);
  box-shadow: 0 1px 0 rgb(var(--cream-rgb) / .08) inset, var(--shadow-near);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .header__glass { background: var(--oxide-brown); }
}
.plaque { padding: 22px 24px; font-size: var(--fs-small); line-height: 1.45; pointer-events: auto; }
.plaque dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper); }
.plaque dd { color: var(--cream); margin-top: 4px; }
.plaque dd + dt { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(var(--cream-rgb) / .14); }
.plaque a { text-decoration: none; }
.plaque a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Inner page hero */
.page-hero {
  --bg: var(--mine); --fg: var(--cream); --muted: var(--ash); --label: var(--copper);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(560px, 78vh, 820px);
  padding-top: calc(var(--masthead-h) + 48px); padding-bottom: calc(var(--strata-h) + clamp(32px, 4vw, 64px));
  background: linear-gradient(var(--oxide-brown), var(--mine) 72%); color: var(--cream); overflow: hidden;
}
.page-hero .wall { left: 46%; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--mine) 36%, rgb(var(--mine-rgb) / 0) 62%);
}
.page-hero__copy { position: relative; z-index: var(--z-raised); max-width: min(44rem, 49vw); }
.page-hero__copy .label { margin: 26px 0 16px; }
.page-hero__copy .lede { margin-top: 22px; max-width: 48ch; }
.page-hero__copy .actions { margin-top: 28px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 0.875rem; color: var(--ash); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; background: var(--copper); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Scroll reveals: hidden only when JS can reveal them again
   -------------------------------------------------------------------------- */
.js:not(.tier-minimal) [data-reveal="up"], .js:not(.tier-minimal) [data-reveal="head"] { transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js:not(.tier-minimal) [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
.js:not(.tier-minimal) [data-reveal="mask"] > * { transition: clip-path var(--t-mask) var(--ease-mask); transition-delay: calc(var(--i, 0) * 110ms); }
.js:not(.tier-minimal) [data-reveal="mask"]:not(.is-in) > * { clip-path: inset(0 100% 0 0); }
.js:not(.tier-minimal) [data-reveal="head"]:not(.is-in) { opacity: 0; transform: translate3d(0, .35em, 0); }

/* --------------------------------------------------------------------------
   Layered image mount, used across inner sections
   -------------------------------------------------------------------------- */
.mount { position: relative; background: var(--cream); padding: clamp(8px, .9vw, 14px); box-shadow: var(--shadow-hung); }
.on-cream .mount { background: var(--mine); }
.mount img { width: 100%; height: auto; }
.mount--plain { padding: 0; background: none; }
.parallax-box { overflow: hidden; position: relative; }
.parallax-box img { transform: translate3d(0, var(--py, 0), 0) scale(1.1); }
.caption { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Home: the people behind the counter
   -------------------------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: var(--gap); }
.people__img { grid-column: 1 / span 8; grid-row: 1; }
.people__card {
  grid-column: 7 / span 6; grid-row: 1; z-index: var(--z-raised); align-self: end;
  margin-bottom: clamp(-96px, -5vw, -40px); padding: clamp(28px, 3.6vw, 56px);
  background: var(--mine); color: var(--cream); box-shadow: var(--shadow-near);
  --fg: var(--cream); --muted: var(--ash); --label: var(--copper); --focus: var(--copper);
}
.people__card .label { margin-bottom: 14px; }
.people__card p:not(.label) { margin-top: 18px; color: var(--ash); }
.people__card .link-arrow { margin-top: 14px; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(64px, 9vw, 150px); border-top: 1px solid var(--rule); }
.proof > div { padding-top: 22px; }
.proof dt { font-size: var(--fs-small); color: var(--muted); }
.proof dd { font-family: var(--font-display); font-size: var(--fs-l); line-height: 1; margin-bottom: 10px; }
.proof div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Diamond lattice: the logo's diamond as the way into each medium
   -------------------------------------------------------------------------- */
.lattice-wrap { container-type: inline-size; }
.lattice { --d: 28.5cqw; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lattice > li { grid-column: span 2; position: relative; }
.lattice > li:nth-child(1) { grid-column: 1 / span 2; }
.lattice > li:nth-child(2) { grid-column: 3 / span 2; }
.lattice > li:nth-child(3) { grid-column: 5 / span 2; }
.lattice > li:nth-child(4) { grid-column: 2 / span 2; margin-top: calc(var(--d) * -.5); }
.lattice > li:nth-child(5) { grid-column: 4 / span 2; margin-top: calc(var(--d) * -.5); }
.lattice > li:nth-child(6) { grid-column: 6 / span 2; margin-top: calc(var(--d) * -.5); }
.gem {
  --clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  position: relative; display: block; aspect-ratio: 1; color: var(--cream); text-decoration: none;
  transform-style: preserve-3d; perspective: 900px;
  clip-path: var(--clip);
}
.gem__tilt {
  position: absolute; inset: 1.4%; display: block; clip-path: var(--clip); background: var(--oxide-brown);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms var(--ease);
}
.gem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.gem__shade { position: absolute; inset: 0; background: rgb(var(--mine-rgb) / .58); transition: background-color 640ms var(--ease); }
.gem__shine {
  position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease);
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgb(var(--cream-rgb) / .3), rgb(var(--cream-rgb) / 0) 46%);
}
.gem__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22%; text-align: center; transform: translateZ(30px); }
.gem__name { font-family: var(--font-display); font-size: clamp(1.0625rem, 2.1cqw, 2rem); line-height: 1.08; text-shadow: 0 1px 14px rgb(var(--mine-rgb) / .9); }
.gem__count { margin-top: 8px; font-size: clamp(.6875rem, .95cqw, .8125rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 10px rgb(var(--mine-rgb) / .95); }
.gem:hover img, .gem:focus-visible img { transform: scale(1.06); }
.gem:hover .gem__shade, .gem:focus-visible .gem__shade { background: rgb(var(--mine-rgb) / .34); }
.gem:hover .gem__shine { opacity: 1; }
.gem:hover, .gem:focus-visible { background: var(--copper); }
.gem:focus-visible { outline: none; }
.gem:focus-visible .gem__name { text-decoration: underline; text-underline-offset: 5px; }

/* --------------------------------------------------------------------------
   Featured artists rail
   -------------------------------------------------------------------------- */
.rail-wrap { overflow: hidden; }
.rail {
  display: flex; align-items: flex-end; gap: clamp(24px, 3vw, 48px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 12px var(--gutter) 28px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: none; width: clamp(236px, 24vw, 360px); scroll-snap-align: center; }
.rail > li:nth-child(odd) { width: clamp(236px, 20vw, 300px); }
.rail > li:nth-child(3n) { padding-bottom: clamp(16px, 3vw, 56px); }
.rail a { display: block; text-decoration: none; }
.rail .mount { transition: transform 640ms var(--ease); overflow: hidden; }
.rail img { aspect-ratio: 4 / 5; object-fit: cover; }
.rail a:hover .mount, .rail a:focus-visible .mount { transform: translateY(-8px); }
.rail h3 { margin-top: 16px; font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.15; }
.rail p { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.rail-progress { margin: 8px var(--gutter) 0; height: 1px; background: var(--rule); overflow: hidden; }
.rail-progress span { display: block; height: 100%; background: var(--rust); transform: scaleX(var(--rp, .2)); transform-origin: 0 50%; }

/* --------------------------------------------------------------------------
   Art Walk band
   -------------------------------------------------------------------------- */
.walk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.walk__date { display: block; text-wrap: balance; margin-top: 18px; font-family: var(--font-display); font-size: var(--fs-l); line-height: 1.02; letter-spacing: -0.015em; }
.walk .prose { margin-top: 24px; color: var(--cream); }
.walk .actions { margin-top: 30px; }
.show { position: relative; }
.show .mount { rotate: 1.4deg; }
.show__note { position: relative; z-index: var(--z-raised); margin: -36px 0 0 clamp(16px, 3vw, 40px); padding: 20px 22px; background: var(--cream); color: var(--mine); box-shadow: var(--shadow-hung); }
.show__note .label { color: var(--rust); margin-bottom: 8px; }
.show__note h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.show__note p { font-size: var(--fs-small); margin-top: 6px; line-height: 1.45; color: var(--umber); }

/* --------------------------------------------------------------------------
   Google reviews, grouped by category
   -------------------------------------------------------------------------- */
.reviews { position: relative; overflow: hidden; }
.reviews__art { position: absolute; inset: 0; pointer-events: none; }
.reviews__art img { position: absolute; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, black 45%, transparent 100%); mask-image: radial-gradient(closest-side, black 45%, transparent 100%); }
.reviews__art picture:nth-child(1) img { left: 40%; top: 4%; width: 28vw; height: 34vw; }
.reviews__art picture:nth-child(2) img { right: -4%; top: 24%; width: 28vw; height: 34vw; }
.reviews__art picture:nth-child(3) img { left: 52%; bottom: 2%; width: 32vw; height: 24vw; }
.reviews__art::after { content: ""; position: absolute; inset: 0; background: rgb(var(--mine-rgb) / .34); }
.reviews__grid { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 90px); align-items: start; }
.reviews__side { position: sticky; top: calc(var(--topbar-h) + var(--header-h-shrunk) + 32px); }
.score { display: flex; align-items: flex-end; gap: 16px; margin-top: 30px; }
.score__num { font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6.5rem); line-height: .86; }
.score__meta { font-size: var(--fs-small); line-height: 1.4; color: var(--ash); }
.stars { display: inline-flex; gap: 2px; color: var(--copper); vertical-align: middle; }
.stars .icon { width: 17px; height: 17px; max-width: none; }
.stars__slot { position: relative; display: block; }
.stars__slot .off { color: rgb(var(--cream-rgb) / .24); }
.stars__slot .on { position: absolute; left: 0; top: 0; overflow: hidden; width: var(--fill, 100%); }
.reviews__side .actions { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
.source { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--ash); }
.source .icon { width: 14px; height: 14px; }

.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 26px; }
.tab {
  position: relative; min-height: 44px; padding: 8px 16px; background: var(--mine);
  font-size: var(--fs-small); font-weight: 500; color: var(--ash); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(var(--cream-rgb) / .2);
  transition: color var(--t-micro) var(--ease-micro), background-color var(--t-micro) var(--ease-micro);
}
.tab:hover { color: var(--cream); }
.tab[aria-selected="true"] { background: var(--cream); color: var(--mine); }
.review-list { columns: 2; column-gap: 20px; }
.review { break-inside: avoid; margin-bottom: 20px; padding: clamp(20px, 2vw, 28px); }
.review blockquote { margin-top: 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--cream); }
.review footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(var(--cream-rgb) / .14); }
.review cite { font-style: normal; font-weight: 600; font-size: var(--fs-small); }
.review time { font-size: 0.8125rem; color: var(--ash); }
.review__cat { display: block; margin-top: 6px; width: 100%; font-size: 0.75rem; letter-spacing: .08em; color: var(--copper); }
.review.is-filtered { display: none; }
.review-note { margin-top: 10px; font-size: 0.8125rem; color: var(--ash); max-width: 60ch; }
.tier-reduced .review.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--oxide-rgb) / .94); }

/* Light-field review cards, used on inner pages */
.on-cream .review.glass, .on-parchment .review.glass {
  background: var(--mine); border-color: transparent; box-shadow: var(--shadow-hung);
}
.review-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.review-row .review { margin: 0; }

/* --------------------------------------------------------------------------
   The Hotel Jerome
   -------------------------------------------------------------------------- */
.hotel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; position: relative; }
.hotel__num {
  position: absolute; left: -.04em; top: -.42em; z-index: 0;
  font-family: var(--font-display); font-size: clamp(7rem, 24vw, 24rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgb(var(--mine-rgb) / .24);
  pointer-events: none; user-select: none;
}
.hotel__copy { grid-column: 1 / span 5; position: relative; z-index: 1; padding-top: clamp(60px, 14.5vw, 230px); }
.hotel__copy .label { margin-bottom: 16px; }
.hotel__copy .prose { margin-top: 22px; }
.hotel__facts { margin-top: 24px; border-top: 1px solid var(--rule); }
.hotel__facts li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); }
.hotel__facts li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--rust); transform: rotate(45deg); }
.hotel__img { grid-column: 7 / span 6; position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band { --strata-back: var(--deep-oxide); --strata-mid: var(--copper); }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px clamp(40px, 6vw, 96px); }
.cta-band h2 { max-width: 20ch; }
.cta-band p { margin-top: 14px; max-width: 46ch; }

/* --------------------------------------------------------------------------
   Visit and inquire
   -------------------------------------------------------------------------- */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.visit__facts { margin-top: 30px; border-top: 1px solid var(--rule); }
.visit__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.visit__row dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--label); padding-top: 5px; }
.visit__row dd { color: var(--fg); }
.visit__row a { text-decoration-color: var(--label); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.visit__row small { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 4px; line-height: 1.45; }
.map { position: relative; margin-top: 28px; aspect-ratio: 16 / 10; background: var(--oxide-brown); overflow: hidden; box-shadow: var(--shadow-hung); }
.map img, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.map__shade { position: absolute; inset: 0; background: rgb(var(--mine-rgb) / .5); }
.map__cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.map__cta a { color: var(--cream); font-size: var(--fs-small); }

/* Inquiry form */
.form-panel { padding: clamp(26px, 3.6vw, 56px); background: var(--cream); color: var(--mine); box-shadow: var(--shadow-near); --fg: var(--mine); --muted: var(--umber); --label: var(--rust); --rule: rgb(var(--mine-rgb) / .22); --bg: var(--cream); --focus: var(--rust); }
.form-panel > .label { margin-bottom: 12px; }
.form-panel > p:not(.label) { margin-top: 12px; color: var(--umber); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 26px; }
.field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; margin-bottom: 7px; }
.field label span { font-weight: 400; color: var(--umber); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--parchment); color: var(--mine);
  border: 0; border-bottom: 1px solid var(--mine); appearance: none;
  font-size: 1.0625rem; line-height: 1.4;
  transition: background-color var(--t-micro) var(--ease-micro);
}
.field select {
  padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mine) 50%), linear-gradient(135deg, var(--mine) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.field textarea { min-height: 136px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background-color: var(--cream); box-shadow: inset 0 0 0 1px rgb(var(--mine-rgb) / .3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; background-color: var(--cream); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-bottom: 2px solid var(--error-on-light); }
.field__error { display: none; margin-top: 7px; font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--error-on-light); }
.field.has-error .field__error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.form-foot .btn { min-width: 210px; }
.form-foot small { flex: 1 1 220px; color: var(--umber); font-size: 0.875rem; line-height: 1.4; }
.form-status { display: none; margin-top: 18px; padding: 14px 16px; font-size: var(--fs-small); line-height: 1.45; }
.form-status.is-shown { display: flex; gap: 12px; align-items: flex-start; }
.form-status--ok { background: var(--patina); color: var(--cream); }
.form-status--err { background: var(--error-on-light); color: var(--cream); }
.form-status a { color: inherit; font-weight: 600; }
.form-status .icon { margin-top: 2px; }
.form-status--ok .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick 600ms var(--ease) 80ms forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Artists page: a salon hang of real work and bios
   -------------------------------------------------------------------------- */
.filter { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(32px, 4vw, 56px); }
.js .filter { display: flex; }
.filter__btn {
  min-height: 44px; padding: 8px 16px; font-size: var(--fs-small); font-weight: 500; color: var(--mine);
  box-shadow: inset 0 0 0 1px rgb(var(--mine-rgb) / .3);
  transition: background-color var(--t-micro) var(--ease-micro), color var(--t-micro) var(--ease-micro);
}
.filter__btn:hover { box-shadow: inset 0 0 0 1px var(--mine); }
.filter__btn[aria-pressed="true"] { background: var(--mine); color: var(--cream); }
.filter__btn span { opacity: .72; margin-left: 4px; }
.filter-status { margin-bottom: 20px; font-size: var(--fs-small); color: var(--umber); }
.artist-grid { columns: 3; column-gap: clamp(28px, 3.4vw, 56px); }
.artist { break-inside: avoid; padding-bottom: clamp(44px, 4.6vw, 72px); scroll-margin-top: calc(var(--topbar-h) + var(--header-h-shrunk) + 24px); }
.artist.is-filtered { display: none; }
.artist .mount { padding: clamp(6px, .7vw, 10px); transition: transform 640ms var(--ease); background: var(--mine); }
.artist:hover .mount { transform: translateY(-4px); }
.artist:target .mount { outline: 2px solid var(--rust); outline-offset: 4px; }
.artist__video { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mine); }
.artist__video video { width: 100%; height: 100%; object-fit: cover; }
.artist__body { margin-top: 18px; }
.artist__medium { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); line-height: 1.5; }
.artist h2, .artist h3 { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.1; letter-spacing: -.005em; }
.artist__bio { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--umber); }
.artist__bio p + p { margin-top: .8em; }
.artist__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: var(--fs-small); }
.artist__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--mine); text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 4px; }
.artist__links a:hover { text-decoration-thickness: 2px; }
.ext-note { position: relative; }

/* Category pages */
.cat-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.roster { padding: clamp(24px, 2.6vw, 36px); background: var(--parchment); box-shadow: var(--shadow-hung); }
.roster .label { margin-bottom: 12px; }
.roster li { border-bottom: 1px solid var(--rule); }
.roster li:last-child { border: 0; }
.roster a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; text-decoration: none; font-weight: 500; }
.roster a:hover { color: var(--rust); }
.roster .icon { width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease-micro); }
.roster a:hover .icon { transform: translateX(4px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 44px); align-items: start; }
.card-grid .artist { padding-bottom: 0; }
.card-grid img { aspect-ratio: 4 / 5; object-fit: cover; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.related a {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 180px; padding: 22px 24px;
  color: var(--cream); text-decoration: none; overflow: hidden; background: var(--mine); box-shadow: var(--shadow-hung);
}
.related img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.related a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--mine-rgb) / .86), rgb(var(--mine-rgb) / .2)); }
.related a:hover img, .related a:focus-visible img { transform: scale(1.05); }
.related b, .related .icon { position: relative; z-index: 1; }
.related b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.1; }
.related .icon { width: 22px; height: 22px; flex: none; }

/* Two-column story sections, used on About, Art Walk and Membership */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: center; }
.split__a { grid-column: 1 / span 6; }
.split__b { grid-column: 8 / span 5; }
.split--flip .split__a { grid-column: 7 / span 6; order: 2; }
.split--flip .split__b { grid-column: 1 / span 5; order: 1; }
.split .label { margin-bottom: 14px; }
.split .prose { margin-top: 20px; }
.tilted { rotate: -1.2deg; }
.overlap { position: relative; }
.overlap__small { position: absolute; right: clamp(-30px, -2vw, -12px); bottom: clamp(-60px, -4vw, -24px); width: 42%; }

/* Membership: a real sequence, so numbers are earned here */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding: clamp(24px, 2.6vw, 36px); background: var(--oxide-brown); box-shadow: var(--shadow-hung); counter-increment: step; }
.step::before { content: counter(step); display: block; font-family: var(--font-display); font-size: clamp(2.75rem, 4.4vw, 4rem); line-height: 1; color: var(--copper); margin-bottom: 18px; }
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.15; }
.step p { margin-top: 12px; color: var(--ash); font-size: 1.0625rem; }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 1px solid var(--rule); }
.terms li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--muted); }
.terms li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; background: var(--label); transform: rotate(45deg); }
.terms strong { color: var(--fg); font-weight: 600; }

/* Legal and 404 */
.legal { max-width: 70ch; }
.legal h2 { margin-top: 2.2em; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.15; color: var(--fg); }
.legal h2 + p { margin-top: .8em; }
.lost-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { --bg: var(--mine); --fg: var(--cream); --muted: var(--ash); --label: var(--copper); --rule: rgb(var(--cream-rgb) / .16); background: var(--mine); color: var(--cream); padding-top: clamp(64px, 8vw, 120px); position: relative; }
.footer__grid { display: grid; grid-template-columns: minmax(240px, 4fr) repeat(3, minmax(0, 3fr)); gap: clamp(36px, 4vw, 72px); }
.footer__sign { display: block; width: 148px; padding: 10px; background: var(--cream); box-shadow: var(--shadow-near); }
.footer__sign img { width: 100%; height: auto; }
.footer__about { margin-top: 20px; color: var(--ash); max-width: 34ch; font-size: var(--fs-small); }
.footer h2 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper); margin-bottom: 14px; line-height: 1.5; }
.footer li a, .footer address a { display: inline-flex; align-items: center; min-height: 36px; color: var(--cream); text-decoration: none; font-size: var(--fs-small); }
.footer li a:hover, .footer address a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--copper); }
.footer address, .footer__hours { font-size: var(--fs-small); color: var(--ash); line-height: 1.55; }
.footer__hours { margin-top: 12px; }
.footer__social { display: flex; gap: 6px; margin-top: 14px; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-shadow: inset 0 0 0 1px rgb(var(--cream-rgb) / .24); color: var(--cream); transition: background-color var(--t-micro) var(--ease-micro), color var(--t-micro) var(--ease-micro); }
.footer__social a:hover { background: var(--cream); color: var(--mine); }
.footer__bottom { margin-top: clamp(48px, 6vw, 88px); padding-block: 22px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ash); line-height: 1.6; }
.footer__bottom a { color: var(--cream); text-underline-offset: 3px; text-decoration-color: var(--copper); }
.footer__bottom .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; }

/* --------------------------------------------------------------------------
   Mobile call and WhatsApp bar
   -------------------------------------------------------------------------- */
.mobile-bar { display: none; }

/* --------------------------------------------------------------------------
   Demo popup
   -------------------------------------------------------------------------- */
.demo { padding: 0; border: 0; background: transparent; color: var(--cream); max-width: min(560px, calc(100vw - 32px)); width: 100%; overflow: visible; margin: auto; }
.demo::backdrop { background: rgb(var(--mine-rgb) / .72); }
.demo__panel { position: relative; padding: clamp(28px, 4vw, 44px); background: rgb(var(--oxide-rgb) / .82); }
.demo__panel::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 100%; height: 100vh; border-inline: 1px solid rgb(var(--copper-rgb) / .6); pointer-events: none; }
.demo[open] .demo__panel { animation: lowerPanel 900ms var(--ease) both; }
@keyframes lowerPanel { from { transform: translate3d(0, -60px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.demo h2 { text-wrap: balance; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.08; margin-top: 12px; padding-right: 32px; letter-spacing: -.01em; }
.demo p:not(.label) { margin-top: 14px; color: var(--cream); }
.demo .label { color: var(--copper); }
.demo .btn { margin-top: 24px; }
.demo__close { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--cream); transition: rotate var(--t-micro) var(--ease-micro); }
.demo__close:hover { rotate: 90deg; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .header .nav { display: none; }
  .header .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
  .artist-grid { columns: 2; }
}

@media (max-width: 1024px) {
  .people__img { grid-column: 1 / -1; }
  .people__card { grid-column: 2 / -1; grid-row: 2; margin-top: -56px; margin-bottom: 0; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .reviews__side { position: static; }
  .hotel__copy { grid-column: 1 / span 6; }
  .hotel__img { grid-column: 7 / -1; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit { grid-template-columns: minmax(0, 1fr); }
  .walk { grid-template-columns: minmax(0, 1fr); }
  .show { max-width: 560px; }
  .cat-intro { grid-template-columns: minmax(0, 1fr); }
  .split__a, .split__b, .split--flip .split__a, .split--flip .split__b { grid-column: 1 / -1; order: initial; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  :root { --topbar-h: 38px; --header-h: 62px; --header-h-shrunk: 54px; }

  .topbar { font-size: 0.8125rem; }
  .topbar__in { padding-left: var(--gutter); gap: 10px; }
  .topbar .hide-sm { display: none; }
  .topbar__contact { gap: 12px; }
  .status { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
  .topbar__social a { width: 36px; }
  .sign { top: -2px; width: 84px; padding: 6px 7px 5px; }
  .is-shrunk .sign { transform: translateY(0) scale(.82); }
  .is-shrunk .header__glass { transform: scaleY(calc(54 / 62)); }
  .is-shrunk .header__in { transform: translateY(-4px); }
  .menu-toggle { margin-right: -8px; }

  /* Home hero: the wall hangs above the copy */
  .hero { min-height: 0; padding-top: calc(var(--masthead-h) + min(96vw, 52svh)); justify-content: flex-start; }
  .hero::after { background: linear-gradient(to top, var(--mine) 40%, rgb(var(--mine-rgb) / 0) 66%); }
  .wall { bottom: auto; height: calc(var(--masthead-h) + min(104vw, 58svh)); }
  .frame { left: var(--xs, var(--x)); top: var(--ys, var(--y)); width: var(--ws, var(--w)); }
  .frame--desk { display: none; }
  .frame__label { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .line { display: inline; overflow: visible; margin: 0; padding: 0; }
  .line > span { display: inline; }
  .js:not(.tier-minimal) .line > span { animation: none; }
  .hero .actions .btn { width: 100%; }
  .plaque { padding: 18px 20px; }

  .page-hero { min-height: 0; padding-top: calc(var(--masthead-h) + min(72vw, 40svh)); padding-bottom: calc(var(--strata-h) + 36px); }
  .page-hero__copy { max-width: none; }
  .page-hero .wall { left: 0; height: calc(var(--masthead-h) + min(78vw, 44svh)); }
  .page-hero::after { background: linear-gradient(to top, var(--mine) 50%, rgb(var(--mine-rgb) / 0) 72%); }

  .proof { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
  .proof > div { border-top: 1px solid var(--rule); padding-block: 18px; }
  .people__card { grid-column: 1 / -1; margin-inline: 0; margin-top: -32px; }
  .people__img { margin-inline: calc(var(--gutter) * -1); }

  /* Lattice: 2, 1, 2, 1 */
  .lattice { --d: 50cqw; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lattice > li:nth-child(1) { grid-column: 1 / span 2; }
  .lattice > li:nth-child(2) { grid-column: 3 / span 2; }
  .lattice > li:nth-child(3) { grid-column: 2 / span 2; margin-top: calc(var(--d) * -.5); }
  .lattice > li:nth-child(4) { grid-column: 1 / span 2; margin-top: calc(var(--d) * -.5); }
  .lattice > li:nth-child(5) { grid-column: 3 / span 2; margin-top: calc(var(--d) * -.5); }
  .lattice > li:nth-child(6) { grid-column: 2 / span 2; margin-top: calc(var(--d) * -.5); }
  .gem__text { padding: 18%; }
  .gem__name { font-size: clamp(1rem, 4.5cqw, 1.5rem); }
  .gem__count { font-size: .6875rem; letter-spacing: .08em; margin-top: 4px; }

  .reviews__art picture:nth-child(1) img { left: 20%; top: 18%; width: 64vw; height: 80vw; }
  .reviews__art picture:nth-child(2) img { width: 56vw; height: 56vw; top: 50%; }
  .reviews__art picture:nth-child(3) img { left: 0; bottom: 6%; width: 70vw; height: 60vw; }
  .review-list { columns: 1; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }

  .hotel { display: flex; flex-direction: column; gap: 32px; }
  .hotel__img { width: 100%; }
  .hotel__copy { padding-top: 56px; }
  .hotel__num { font-size: 34vw; top: -.2em; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
  .visit__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .artist-grid { columns: 1; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .overlap__small { right: 0; }

  /* Sticky call and WhatsApp */
  body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom)); }
  .mobile-bar {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--mine);
    box-shadow: 0 -10px 30px rgb(0 0 0 / .4);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--mobile-bar-h);
    color: var(--cream); font-weight: 600; text-decoration: none;
  }
  .mobile-bar a:active { filter: brightness(.9); }
  .mobile-bar__call { background: var(--rust); }
  .mobile-bar__wa { background: var(--patina); }
  .mobile-bar .icon { width: 20px; height: 20px; }
}

@media (max-width: 400px) {
  .topbar__contact .status { display: none; }
}

/* Cross-page transition where browsers support it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease); }

/* Reduced motion is a full bypass: final state, immediately */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .form-status--ok .icon path { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}

@media print {
  .masthead, .mobile-bar, .wall, .demo, .strata { display: none !important; }
  body, .on-mine, .on-brown, .on-patina, .on-rust, .hero, .page-hero, .footer { background: #fff !important; color: #000 !important; }
}