/* ==================================================================
   MERU JEWELLERY WORKS
   Monochrome — black, white and silver — with gold as the only colour.
================================================================== */
:root {
  --ink: #060606;
  --ink-2: #111;
  --white: #f2f2f0;
  --grey: #a3a3a0;
  --grey-2: #6c6c6a;
  --hair: rgba(255, 255, 255, .12);

  --gold: #cfa968;
  --gold-hi: #f0d9a8;
  --gold-lo: #8f6d3c;
  --gold-line: rgba(207, 169, 104, .45);
  --maroon: #5c1020;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --roman: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 80px);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.on-intro, body.room-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gold, .mjw span, .room__title {
  background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold-hi) 38%, var(--gold) 55%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==================================================================
   1. INTRO — the turntable
================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3.5vh, 44px);
  padding: 24px 0 max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(255, 255, 255, .09), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #151515 0%, #080808 60%, #030303 100%);
}

.stage { width: min(92vw, 880px, 110vh); perspective: 1700px; perspective-origin: 50% 20%; }

.deck {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1.32;
  transform-origin: 38% 50%;          /* centre of the record */
  transform: rotateX(26deg);
  will-change: transform;
}

/* piano-black lacquer with a long soft reflection */
.deck__top {
  position: absolute; inset: 0;
  border-radius: 1.4cqw;
  background:
    linear-gradient(112deg, transparent 8%, rgba(255,255,255,.075) 16%, rgba(255,255,255,.02) 30%, transparent 42%),
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(165deg, #1d1d1d 0%, #0d0d0d 48%, #070707 100%);
  box-shadow:
    inset 0 0 0 .12cqw rgba(255, 255, 255, .10),
    inset 0 .2cqw .2cqw rgba(255, 255, 255, .14),
    0 1.1cqw 0 #0c0c0c,                              /* the deck's front edge */
    0 1.2cqw 0 rgba(207, 169, 104, .28),
    0 4cqw 6cqw -1cqw rgba(0, 0, 0, .9),
    0 1.2cqw 2cqw rgba(0, 0, 0, .7);
}
.deck__top::after {    /* fine gold pin-stripe inset */
  content: ''; position: absolute; inset: 1.2cqw; border-radius: .8cqw;
  border: 1px solid rgba(207, 169, 104, .22);
  pointer-events: none;
}
.deck__front {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  height: 3.6cqw;
  transform-origin: top; transform: rotateX(-90deg);
  border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(#202020, #050505);
  border-top: 1px solid var(--gold-line);
}

.deck__badge {
  position: absolute; left: 3.4cqw; top: 2.8cqw; margin: 0;
  font-family: var(--roman); font-size: 1.9cqw; letter-spacing: .5em;
  color: var(--gold); line-height: 1.2;
  pointer-events: none;
}
.deck__badge small {
  display: block; margin-top: .3cqw;
  font-family: var(--sans); font-size: .95cqw; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(255, 255, 255, .38);
}

/* --- platter & record --- */
.platter {
  position: absolute; left: 6cqw; top: 5.9cqw;
  width: 64cqw; height: 64cqw; border-radius: 50%;
  box-shadow: 0 1.2cqw 2.2cqw rgba(0, 0, 0, .75), 0 0 0 .35cqw rgba(0, 0, 0, .6);
  touch-action: none;
  cursor: grab;
}
.platter.is-held { cursor: grabbing; }
.spin { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, #e6e6e4 0%, #7c7c7a 38%, #d6d6d3 58%, #5c5c5a 100%);
}
.rim::before {          /* strobe dots */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(#f6f6f4 0 1deg, #3a3a3a 1deg 2.5deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 95.2%, #000 95.6% 98.4%, transparent 98.8%);
          mask: radial-gradient(circle closest-side, transparent 0 95.2%, #000 95.6% 98.4%, transparent 98.8%);
}
.record {
  position: absolute; inset: 2cqw; border-radius: 50%;
  background:
    radial-gradient(circle closest-side,
      transparent 0 38%, #050505 38% 39.5%, transparent 39.5% 52%,
      rgba(255,255,255,.04) 52% 52.6%, transparent 52.6% 66%,
      rgba(255,255,255,.04) 66% 66.6%, transparent 66.6% 80%,
      rgba(255,255,255,.045) 80% 80.6%, transparent 80.6% 95%,
      rgba(255,255,255,.06) 95% 96%, transparent 96%),
    repeating-radial-gradient(circle, #111 0 1px, #1b1b1b 1px 2px, #0d0d0d 2px 3px),
    #0d0d0d;
  box-shadow: 0 0 0 .12cqw #000, 0 .3cqw .8cqw rgba(0, 0, 0, .6);
}
.record__sheen {
  position: absolute; inset: 2cqw; border-radius: 50%;
  background: conic-gradient(from 15deg,
    transparent 0deg, rgba(255,255,255,.12) 26deg, transparent 58deg,
    transparent 180deg, rgba(255,255,255,.09) 206deg, transparent 238deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 38%, #000 39%);
          mask: radial-gradient(circle closest-side, transparent 0 38%, #000 39%);
  pointer-events: none;
}
.spindle {
  position: absolute; left: 50%; top: 50%;
  width: 1cqw; height: 1cqw; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #a5a5a2 45%, #353535);
  box-shadow: 0 .1cqw .25cqw rgba(0, 0, 0, .8);
  pointer-events: none;
}

.label {
  position: absolute; left: 50%; top: 50%;
  width: 36%; height: 36%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #85203a 0%, var(--maroon) 50%, #3a0812 100%);
  box-shadow: inset 0 0 0 .15cqw rgba(240, 217, 168, .5), inset 0 0 2cqw rgba(0, 0, 0, .45);
  overflow: hidden; isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.label__logo {
  position: absolute; left: 50%; top: 50%;
  height: 74%; width: auto; max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen; filter: contrast(1.25) brightness(1.05);
  pointer-events: none;
}
.label__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  font-family: var(--roman); font-size: 8.6px; letter-spacing: 1.6px;
  fill: rgba(240, 217, 168, .72);
  pointer-events: none;
}

/* --- strobe lamp --- */
.lamp {
  position: absolute; left: 4.4cqw; top: 62cqw;
  width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8d8d8b, #222 70%);
  box-shadow: 0 .2cqw .4cqw rgba(0,0,0,.7);
}
.lamp::after {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 1.4cqw .5cqw rgba(240, 200, 120, .5);
  transition: opacity .6s;
}
.intro.motor-off .lamp::after { opacity: .12; }

/* --- tonearm hardware --- */
.armbase {
  position: absolute; left: 81cqw; top: 11cqw;
  width: 10cqw; height: 10cqw; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(207,169,104,.7) 31% 32.5%, transparent 33.5%),
    conic-gradient(from 0deg, #8d8d8b, #ecece9, #747472, #d8d8d5, #7e7e7c, #f0f0ed, #8d8d8b);
  box-shadow: 0 .5cqw 1cqw rgba(0,0,0,.7), inset 0 0 0 .15cqw rgba(0,0,0,.35);
}
.antiskate {
  position: absolute; left: 92.6cqw; top: 21cqw;
  width: 3cqw; height: 3cqw; border-radius: 50%;
  background: conic-gradient(#7c7c7a, #ecece9, #7c7c7a, #d0d0cd, #7c7c7a);
  box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.7);
}
.cue {
  position: absolute; left: 75.2cqw; top: 21.5cqw;
  width: 4cqw; height: 6.5cqw;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.cue span {
  display: block; width: 1.2cqw; height: 5cqw; border-radius: .6cqw;
  background: linear-gradient(90deg, #6c6c6a, #efefec, #6c6c6a);
  box-shadow: 0 .3cqw .5cqw rgba(0,0,0,.7);
  transform: rotate(-30deg);
  transition: transform .35s var(--ease-out);
}
.cue span::after {
  content: ''; display: block; width: 100%; height: 1.2cqw; border-radius: .6cqw;
  background: var(--gold);
}
.intro.cue-up .cue span { transform: rotate(18deg); }

.armrest {
  position: absolute; left: 84.6cqw; top: 50cqw;
  width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #cfcfcc, #464644 70%);
  box-shadow: 0 .4cqw .7cqw rgba(0,0,0,.7);
}

.tonearm {
  position: absolute; left: 81cqw; top: 7cqw;
  width: 10cqw; height: 60cqw;
  z-index: 3;
  transform-origin: 50% 15%;      /* the pivot */
  transform: rotate(var(--arm, 0deg));
  transition: transform 1.3s var(--ease), filter .4s;
  filter: drop-shadow(-.6cqw 1cqw .5cqw rgba(0, 0, 0, .7));
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.tonearm.is-lifted { filter: drop-shadow(-1.8cqw 2.8cqw 1.1cqw rgba(0, 0, 0, .5)); }
.tonearm.is-dragging { transition: filter .3s; cursor: grabbing; }
.tonearm { pointer-events: none; }               /* only the arm itself is grabbable… */
.tonearm svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tonearm svg * { pointer-events: none; }
.tonearm .tonearm__hit { pointer-events: all; }   /* …through this strip along it */
.tonearm__hint { fill: none; stroke: var(--gold-hi); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* --- controls --- */
.controls {
  position: absolute; left: 3.4cqw; bottom: 3cqw;
  display: flex; align-items: center; gap: 1.2cqw;
}
.startstop, .speed {
  height: 4.2cqw;
  font-family: var(--sans); font-weight: 400;
  font-size: 1.15cqw; letter-spacing: .18em; text-transform: uppercase;
  color: #1a1a1a;
  border-radius: .6cqw;
  background: linear-gradient(#f1f1ee, #b6b6b2);
  box-shadow: 0 .45cqw 0 #5f5f5c, 0 .8cqw 1.2cqw rgba(0,0,0,.7), inset 0 .1cqw 0 #fff;
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.startstop { width: 13cqw; }
.speed { width: 5cqw; position: relative; }
.speed::after {
  content: ''; position: absolute; left: 50%; top: -1.6cqw;
  width: .7cqw; height: .7cqw; margin-left: -.35cqw; border-radius: 50%;
  background: #2a2a2a; transition: background .3s, box-shadow .3s;
}
.speed.is-on::after { background: var(--gold-hi); box-shadow: 0 0 .8cqw var(--gold); }
.startstop:active, .speed:active, .is-pressed {
  transform: translateY(.35cqw);
  box-shadow: 0 .1cqw 0 #5f5f5c, 0 .3cqw .6cqw rgba(0,0,0,.6), inset 0 .1cqw 0 #fff;
}

.pitch {
  position: absolute; right: 3.6cqw; top: 46cqw;
  width: 4.4cqw; height: 22cqw;
  margin-right: -1.5cqw;
  touch-action: none; cursor: ns-resize;
}
.pitch::before {       /* the slot */
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.4cqw; margin-left: -.7cqw;
  border-radius: .7cqw; background: #020202;
  box-shadow: inset 0 .2cqw .4cqw rgba(0,0,0,.9), 0 .1cqw 0 rgba(255,255,255,.08);
}
.pitch::after {        /* centre detent mark */
  content: ''; position: absolute; left: -1cqw; width: 1cqw; top: 50%; height: 1px; background: var(--gold);
}
.pitch__knob {
  position: absolute; left: 50%; top: var(--p, 50%);
  width: 3.6cqw; height: 2.4cqw; transform: translate(-50%, -50%);
  border-radius: .4cqw;
  background: linear-gradient(#ececea, #9a9a97);
  box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.7);
}
.pitch__knob::after { content: ''; position: absolute; left: 15%; right: 15%; top: 50%; height: 1px; background: #4a4a48; }
.pitch__read {
  position: absolute; right: 2.4cqw; top: 70cqw;
  font-family: var(--sans); font-size: 1cqw; letter-spacing: .15em; color: var(--gold);
  pointer-events: none;
}

/* --- the instructions (appear after a pause) --- */
.hints {
  text-align: center; padding: 0 20px;
  min-height: 86px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.4s, transform 1.4s var(--ease-out);
  pointer-events: none;
}
.intro.show-hints .hints { opacity: 1; transform: none; }
.hint {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2vw, 23px); color: var(--white); line-height: 1.4;
}
.hint--sound { color: var(--grey); font-size: clamp(17px, 1.7vw, 19px); }
.hint--small { margin-top: 6px; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hint--sound span { display: none; }
.intro[data-sound="playing"] .when-playing,
.intro[data-sound="paused"]  .when-paused,
.intro[data-sound="blocked"] .when-blocked { display: inline; }

.intro.show-hints .label { animation: halo 2.6s ease-out infinite; }
.intro.show-hints .tonearm__hint { animation: ping 2.6s ease-out 1.3s infinite; }
@keyframes halo {
  0%   { box-shadow: inset 0 0 0 .15cqw rgba(240,217,168,.5), inset 0 0 2cqw rgba(0,0,0,.45), 0 0 0 0 rgba(240,217,168,.55); }
  100% { box-shadow: inset 0 0 0 .15cqw rgba(240,217,168,.5), inset 0 0 2cqw rgba(0,0,0,.45), 0 0 0 3.5cqw rgba(240,217,168,0); }
}
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }

.intro__flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, #6b1426 0%, #24050d 60%, var(--ink) 100%);
  opacity: 0; pointer-events: none;
}

/* --- the superzoom --- */
.intro.is-entering .deck { transition: transform 1.9s var(--ease); transform: rotateX(0deg) scale(17); }
.intro.is-entering .tonearm,
.intro.is-entering .controls,
.intro.is-entering .pitch,
.intro.is-entering .pitch__read,
.intro.is-entering .deck__badge,
.intro.is-entering .spindle { opacity: 0; transition: opacity .5s; }
.intro.is-entering .hints { opacity: 0; transition: opacity .4s; }
.intro.is-entering .intro__flash { transition: opacity .8s ease-in .9s; opacity: 1; }
.intro.is-gone { opacity: 0; transition: opacity .7s; pointer-events: none; }

@media (max-aspect-ratio: 4/5) {
  .stage { width: 96vw; perspective: 1100px; }
  .deck { transform: rotateX(18deg); }
}

/* ==================================================================
   2. HOME — one picture, one room
================================================================== */
.home {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  background: #050505;
}
.home.is-arriving { animation: arrive 1.6s var(--ease-out) both; }
@keyframes arrive {
  from { opacity: 0; transform: scale(1.06); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* The photograph IS the background. It fades into black on every side,
   so there is no edge, frame or box anywhere. */
.home__bg {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(64%, 1000px);
  pointer-events: none;
}
.home__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  filter: contrast(1.05);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, #000 30%),
    linear-gradient(0deg, transparent 0%, #000 34%),
    linear-gradient(180deg, transparent 0%, #000 10%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, #000 30%),
    linear-gradient(0deg, transparent 0%, #000 34%),
    linear-gradient(180deg, transparent 0%, #000 10%);
          mask-composite: intersect;
  transform: scale(1.04) translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0);
  transition: transform 1.4s var(--ease-out);
  animation: breathe-in 30s ease-in-out infinite alternate;
}
@keyframes breathe-in { to { scale: 1.04; } }
.home::before {        /* film grain over everything ties text and photo together */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--noise); opacity: .06; mix-blend-mode: overlay;
}
.home::after {         /* soft vignette */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 60% 40%, transparent 55%, rgba(0,0,0,.65) 100%);
}

.topbar {               /* no z-index, so the monogram can blend with the photo */
  position: absolute; top: 0; left: 0;
  padding: 26px var(--gutter);
}
.mark { position: relative; display: block; width: 30px; height: 52px; overflow: hidden; }
.mark img {
  position: absolute; left: -10px; top: -6.5px;
  height: 75.6px; width: auto; max-width: none;
  mix-blend-mode: screen; filter: contrast(1.25);
}

.home__hero {
  position: relative; z-index: 3;
  align-self: center;
  padding: 90px var(--gutter) 20px;
  max-width: 720px;
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase; color: var(--grey);
}
.mjw {
  margin: 0 0 0 -.04em;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(96px, 13vw, 210px);
  line-height: .9; letter-spacing: .02em;
  display: flex; gap: .14em;
}
.mjw span {
  display: inline-block; animation: rise 1.6s var(--ease-out) both;
  /* room for the J's tail, so the gold fill doesn't stop at the baseline */
  padding-bottom: .22em; margin-bottom: -.22em;
}
.mjw span:nth-child(2) { animation-delay: .12s; }
.mjw span:nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.home__name {
  margin: 20px 0 0;
  font-family: var(--roman); font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .5em; text-transform: uppercase; color: var(--white);
}
.home__line {
  margin: 18px 0 0; max-width: 30ch;
  font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--grey);
}

/* --- the room buttons: one quiet row along the bottom --- */
.notes {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 0 var(--gutter);
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
}
.notes::after {         /* soft shade so the row always reads over the photo */
  content: ''; position: absolute; z-index: -1;
  left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: 0; top: -90px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .72) 55%, rgba(5, 5, 5, .9));
  pointer-events: none;
}
.note {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 18px 6px 0;
  text-decoration: none;
  opacity: 0; animation: rise 1.2s var(--ease-out) forwards;
}
.note + .note { padding-left: 22px; }
.note + .note::before {
  content: ''; position: absolute; left: 0; top: 26px; height: 46px; width: 1px; background: var(--hair);
}
.note:nth-child(1) { animation-delay: .6s; }
.note:nth-child(2) { animation-delay: .7s; }
.note:nth-child(3) { animation-delay: .8s; }
.note:nth-child(4) { animation-delay: .9s; }
.note:nth-child(5) { animation-delay: 1s; }
.note__no { font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.note__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2;
  color: var(--white); transition: color .4s;
}
.note__sub { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--grey-2); line-height: 1.3; transition: color .4s; }
.note__line {      /* gold rule that draws in on hover, on the top border */
  position: absolute; left: 0; right: 18px; top: -1px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.note + .note .note__line { left: 22px; }
.note:hover .note__line, .note:focus-visible .note__line { transform: scaleX(1); }
.note:hover .note__title, .note:focus-visible .note__title { color: var(--gold-hi); }
.note:hover .note__sub, .note:focus-visible .note__sub { color: var(--grey); }

/* --- quiet sound control, top right --- */
.sound {
  position: fixed; z-index: 40;
  top: max(26px, env(safe-area-inset-top)); right: var(--gutter);
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 4px;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey);
  transition: color .3s;
}
.sound:hover { color: var(--white); }
.sound__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.sound__bars i { width: 2px; height: 100%; background: var(--gold); transform-origin: bottom; transform: scaleY(.25); }
.sound[aria-pressed="true"] .sound__bars i { animation: eq 1.1s ease-in-out infinite alternate; }
.sound__bars i:nth-child(2) { animation-delay: -.4s !important; }
.sound__bars i:nth-child(3) { animation-delay: -.8s !important; }
.sound__bars i:nth-child(4) { animation-delay: -.2s !important; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* ==================================================================
   3. ROOMS
================================================================== */
.room {
  position: fixed; inset: 0; z-index: 30;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 0%, #1a1a1a 0%, var(--ink) 55%);
  padding: 0 var(--gutter) 120px;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease);
}
.room.is-open { clip-path: inset(0 0 0 0); }
.room > * { opacity: 0; transform: translateY(24px); transition: opacity .8s .45s, transform 1s var(--ease-out) .45s; }
.room.is-open > * { opacity: 1; transform: none; }

.back {
  position: sticky; top: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; margin-top: 18px; padding: 10px 20px;
  border: 1px solid var(--hair); border-radius: 999px;
  font-size: 16px; text-decoration: none; color: var(--white);
  background: rgba(6, 6, 6, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s, color .3s;
}
.back:hover { border-color: var(--gold); color: var(--gold-hi); }
/* the text rooms: the back button lives in its own top bar. The text scrolls UNDER the bar (solid
   behind the button and the sound control, fading below) instead of showing through the button. */
.room__bar {
  position: sticky; top: 0; z-index: 3;
  margin: 0 calc(var(--gutter) * -1); padding: 18px var(--gutter) 26px;
  background: linear-gradient(180deg, #060606 0, #060606 80%, rgba(6, 6, 6, 0) 100%);
  pointer-events: none;
}
.room__bar > .back { position: relative; top: auto; margin: 0; pointer-events: auto; }
.room__head { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; text-align: center; }
.room__no { margin: 0 0 6px; font-size: 13px; letter-spacing: .4em; color: var(--gold); }
.room__title { margin: 0; padding-bottom: .12em; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 7vw, 92px); line-height: 1.05; }
.room__lede { margin: 18px auto 0; max-width: 560px; font-family: var(--serif); font-style: italic; color: var(--grey); font-size: 21px; line-height: 1.5; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 28px; border-radius: 999px;
  background: linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 50%, var(--gold));
  color: #111; font-weight: 500; font-size: 16px; letter-spacing: .04em; text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(207, 169, 104, .6); }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--hair); font-weight: 400; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); box-shadow: none; }
.center { text-align: center; margin-top: 48px; }

/* photo crop helper: shows a chosen point of a photo, zoomed (Instagram tiles) */
.insta__tile img {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--z, 1) * 100%); max-width: none; height: auto;
  transform: translate(calc(var(--fx, 50) * -1%), calc(var(--fy, 50) * -1%));
}

/* --- PRODUCTS: the full-screen try-on showroom --- */
.room--gallery {
  padding: 0;
  overflow: hidden;
  background: #050505;
}
.room--gallery > * { transition-delay: .25s; }
.showroom { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.showroom__ambient {       /* the painting, blurred, fills any space around it */
  position: absolute; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(40px) brightness(.32) saturate(.85);
  transition: background-image .6s;
}
.painting__stage {         /* positioned & scaled every frame by js/gallery.js */
  position: absolute; left: 0; top: 0;
  width: 1000px; height: calc(1000px / var(--ar, .67));
  transform-origin: 0 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--s, 1));
  will-change: transform;
}
.painting__front { pointer-events: none; }
.painting__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painting__img:not([src]) { visibility: hidden; }
.painting__img--next { opacity: 0; transition: opacity .65s; }
.painting__img--next.is-in { opacity: 1; }
.painting__jewel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity .45s;
  pointer-events: none;
}
.painting__jewel.is-out { opacity: 0; }
.showroom__shade {         /* gentle vignette so the controls always read */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 18%, transparent 62%, rgba(0,0,0,.78) 100%),
    radial-gradient(ellipse 85% 85% at 55% 45%, transparent 60%, rgba(0,0,0,.45) 100%);
}
.painting__note {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 40px)); margin: 0; z-index: 2;
  padding: 22px 26px; border-radius: 14px;
  background: rgba(5, 5, 5, .78); border: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.45; text-align: center; color: var(--white);
}
.painting__loading {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--grey);
}
.dropzone {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 4;
  width: min(560px, calc(100% - 32px));
  padding: 12px 14px; border: 1px dashed var(--gold); border-radius: 10px;
  background: rgba(0, 0, 0, .75); text-align: center; font-size: 13px; line-height: 1.5; color: var(--white);
  cursor: pointer;
}
.dropzone p { margin: 0 0 6px; }
.dropzone select { margin-left: 6px; font: inherit; color: var(--white); background: #111; border: 1px solid var(--hair); border-radius: 6px; padding: 4px 6px; }
.dropzone.is-over { background: rgba(207, 169, 104, .3); }

/* the controls, floating over the painting */
.showroom__ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.showroom__ui > * { pointer-events: auto; }
.room--gallery .back { position: absolute; top: max(18px, env(safe-area-inset-top)); left: var(--gutter); margin: 0; }
.muses {
  position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; max-width: calc(100% - 2 * var(--gutter) - 460px);
  overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.muses::-webkit-scrollbar { display: none; }
.muse {
  flex: none; display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 5px 16px 5px 5px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(6, 6, 6, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14px; letter-spacing: .04em; color: var(--grey);
  transition: border-color .3s, color .3s;
}
.muse:hover { color: var(--white); border-color: rgba(255,255,255,.35); }
.muse[aria-pressed="true"] { color: var(--white); border-color: var(--gold); }
.muse__face { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 1px solid var(--gold-line); flex: none; background: #222; }
.muse__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* The panel sits between the top controls (back button, portraits) and the piece slider. --dock and
   --ceil are measured by js/gallery.js, so it can never ride up over either — at any screen size.
   Whatever doesn't fit scrolls inside it; "Details" folds the long text away. */
.plaque {
  position: absolute; left: var(--gutter); bottom: var(--dock, 190px);
  width: min(360px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100% - var(--dock, 190px) - var(--ceil, 96px));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold-line) transparent;
  padding: 22px 24px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(6, 6, 6, .62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.plaque__toggle {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  min-height: 34px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: rgba(6, 6, 6, .55); color: var(--gold-hi);
  font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.plaque__toggle:hover { border-color: var(--gold); }
.plaque__muse { padding-right: 96px; }
.plaque.is-compact { padding: 16px 18px; }
.plaque.is-compact .plaque__eyebrow, .plaque.is-compact .plaque__artist, .plaque.is-compact .plaque__quip,
.plaque.is-compact .plaque__credit, .plaque.is-compact #pieceMeta, .plaque.is-compact .plaque__size,
.plaque.is-compact .plaque__set { display: none; }
.plaque.is-compact .plaque__muse { font-size: 24px; margin-bottom: 14px; min-height: 34px; display: flex; align-items: center; }
.plaque.is-compact .plaque__piece { padding: 8px 0; margin-bottom: 10px; }
.plaque.is-compact #pieceName { font-size: 20px; }
.plaque__eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.plaque__muse { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; color: var(--white); }
.plaque__artist { margin: 6px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.plaque__quip { margin: 12px 0 14px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: #dcdcd8; }
.plaque__piece { display: grid; gap: 1px; padding: 12px 0; margin-bottom: 14px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.plaque__label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2); }
#pieceName { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--gold-hi); }
#pieceMeta { font-family: var(--serif); font-size: 16px; color: var(--grey); }
.plaque__size { font-size: 13px; letter-spacing: .04em; color: var(--white); opacity: .85; }
.plaque__size:empty { display: none; }
.plaque__set { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--grey); }
.plaque__set:empty { display: none; }
.plaque__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.plaque__actions .btn { min-height: 46px; padding: 10px 20px; }
.zoom-btn[hidden] { display: none !important; }
.plaque__credit { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--grey-2); }

.slider {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
}
.slider__arrow { flex: none; background: rgba(6,6,6,.6); }
.slider__track {
  flex: 1; display: flex; gap: 10px; justify-content: safe center;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 6px 4px 6px;
}
.slider__track::-webkit-scrollbar { display: none; }
.piece {
  flex: 0 0 auto; width: 138px; scroll-snap-align: center;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 8px 10px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: rgba(8, 8, 8, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.piece:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.piece.is-worn { border-color: rgba(207, 169, 104, .55); }
.piece.is-worn .piece__where { color: var(--gold); font-style: normal; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.piece[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 12px 30px -14px rgba(207, 169, 104, .6); }
.piece__thumb { width: 70px; height: 70px; display: grid; place-items: center; }
.piece__thumb img { width: 100%; height: 100%; object-fit: contain; }
.piece__thumb img:not([src]) { visibility: hidden; }
.piece__name { font-family: var(--serif); font-size: 16px; line-height: 1.15; text-align: center; color: var(--white); }
.piece__type { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.piece__where { font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.1; color: var(--grey); }
.piece__where:empty { display: none; }

/* inside Meru Admin's fitting room: the dashboard handles leaving, uploads and publishing */
.is-embedded .back, .is-embedded .sound, .is-embedded #dropzone,
.is-embedded #adjPublish, .is-embedded #adjRemove, .is-embedded #museAdd, .is-embedded #museRemove { display: none !important; }

/* atelier fine-tuning panel (only with ?atelier) */
.adjuster {
  position: absolute; right: var(--gutter); top: 84px; z-index: 6;
  width: min(380px, calc(100% - 32px)); max-height: calc(100% - 300px); overflow-y: auto;
  padding: 18px 20px; border: 1px dashed var(--gold-line); border-radius: 14px;
  background: rgba(6, 6, 6, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.adjuster__title { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; color: var(--gold-hi); }
.adjuster__hint { margin: 0 0 12px; font-size: 12px; color: var(--grey); }
.adjuster__fields { display: grid; gap: 8px; margin-bottom: 14px; }
.adjuster__fields label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--grey); }
.adjuster__fields input, .adjuster__fields select {
  font: inherit; font-size: 14px; color: var(--white); background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 7px 9px; min-width: 0;
}
.adjuster__fields input:focus, .adjuster__fields select:focus { outline: none; border-color: var(--gold); }
.adjuster__status { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gold-hi); }
.adjuster__status:empty { display: none; }
.adjuster__status.is-bad { color: #ff9b8a; }
.adjuster__actions .btn[disabled] { opacity: .5; cursor: progress; }
.adjuster__title span { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--grey); margin-left: 6px; }
.adjuster__grid { display: grid; gap: 10px; }
.adjuster__grid label { display: grid; grid-template-columns: 108px 1fr 52px; align-items: center; gap: 8px; font-size: 13px; color: var(--grey); }
.adjuster__grid input { accent-color: var(--gold); width: 100%; }
.adjuster__grid output { font-size: 12px; color: var(--white); text-align: right; }
.adjuster__only { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; color: var(--grey); }
.adjuster__only input { accent-color: var(--gold); width: 18px; height: 18px; }
.adjuster__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adjuster__portrait { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.adjuster__portrait summary { cursor: pointer; font-size: 13px; letter-spacing: .08em; color: var(--gold-hi); min-height: 32px; display: flex; align-items: center; gap: 6px; }
.adjuster__portrait summary span { color: var(--ink, #fff); }
.adjuster__portrait[open] summary { margin-bottom: 10px; }
.adjuster__report { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--grey); white-space: pre-line; max-height: 160px; overflow: auto; }
.adjuster__report:empty { display: none; }
.adjuster__actions .btn { min-height: 42px; padding: 8px 18px; }
.adjuster__code {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #050505; border: 1px solid var(--hair);
  font-size: 12px; line-height: 1.5; color: var(--gold-hi); white-space: pre-wrap; word-break: break-word; user-select: all;
}

@media (max-width: 1100px) {
  .muses { top: 78px; left: var(--gutter); right: var(--gutter); transform: none; max-width: none; }
  .adjuster { top: 140px; }
}
@media (max-width: 760px) {
  .room--gallery .back { padding: 8px 14px; min-height: 44px; font-size: 14px; }
  .muses { top: 72px; left: 0; right: 0; padding: 2px 16px; }
  .muse { min-height: 44px; padding: 4px 12px 4px 4px; font-size: 13px; }
  .muse__face { width: 34px; height: 34px; }
  .plaque { left: 12px; right: 12px; width: auto; padding: 14px 16px; }
  .plaque__muse { font-size: 24px; }
  #pieceName { font-size: 20px; }
  /* in the showroom on a phone the sound control is just the little bars, so it never sits on the portraits */
  body:has(#room-products.is-open) .sound__text { display: none; }
  body:has(#room-products.is-open) .sound { padding: 0 12px; }
  .slider { left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); }
  .slider__arrow { display: none; }
  .slider__track { padding: 4px 12px; justify-content: flex-start; }
  .piece { width: 108px; padding: 6px 6px 8px; }
  .piece__thumb { width: 52px; height: 52px; }
  .piece__name { font-size: 14px; }
  .painting__note { font-size: 18px; top: 38%; }
  .adjuster { top: auto; bottom: 300px; max-height: 40vh; }
}

/* --- TESTIMONIALS --- */
.quotes { max-width: 860px; margin: 0 auto; text-align: center; display: grid; }
.quote {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .7s, transform .9s var(--ease-out), visibility 0s .7s;
}
.quote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s, transform .9s var(--ease-out); }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.35; }
.quote figcaption { margin-top: 26px; color: var(--gold); letter-spacing: .14em; font-size: 15px; text-transform: uppercase; }
.quotes__nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.quotes__count { margin: 0; color: var(--grey); min-width: 60px; }
.round-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--hair); font-size: 20px; color: var(--white); transition: border-color .3s, color .3s; }
.round-btn:hover { border-color: var(--gold); color: var(--gold-hi); }

/* --- INSTAGRAM --- */
.insta { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.insta__tile { position: relative; overflow: hidden; aspect-ratio: 1; background: #000; border-radius: 2px; }
.insta__tile::after {
  content: '↗'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; color: var(--gold-hi); background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .4s;
}
.insta__tile:hover::after, .insta__tile:focus-visible::after { opacity: 1; }

/* --- STORY OF GOLD --- */
.chapters { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
.chapters::before { content: ''; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--gold), transparent); opacity: .5; }
.chapter { position: relative; padding: 0 0 56px 92px; }
.chapter__no {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--roman); font-size: 20px; color: var(--gold-hi);
  background: #0b0b0b; border: 1px solid var(--gold-line);
}
.chapter h3 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); color: var(--white); line-height: 1.15; }
.chapter p { margin: 0; font-size: 18px; color: #c9c9c6; line-height: 1.75; }

/* --- CONTACT --- */
.contact { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 0 auto; align-items: start; }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact__item {
  display: flex; align-items: center; gap: 20px;
  min-height: 76px; padding: 16px 4px;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}
a.contact__item:hover .contact__value { color: var(--gold-hi); }
.contact__icon { flex: none; width: 26px; height: 26px; color: var(--gold); }
.contact__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.contact__label { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2); }
.contact__value { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.35; transition: color .3s; }
.contact__form { display: grid; gap: 18px; padding: 30px; border-radius: 4px; border: 1px solid var(--hair); background: linear-gradient(#131313, #0a0a0a); }
.contact__form-title { margin: 0; font-family: var(--serif); font-size: 28px; color: var(--gold-hi); }
.contact__form label { display: grid; gap: 6px; font-size: 15px; color: var(--grey); }
.contact__form input, .contact__form textarea {
  font: inherit; font-size: 17px; color: var(--white);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px;
  padding: 14px 16px; min-height: 52px;
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--gold); }
.contact__small { margin: 0; font-size: 14px; color: var(--grey); }

/* ==================================================================
   TABLETS: room buttons wrap more gently
================================================================== */
@media (max-width: 1100px) and (min-width: 861px) {
  .note__sub { display: none; }
}

/* ==================================================================
   PHONES & PORTRAIT TABLETS
================================================================== */
@media (max-width: 860px) and (orientation: portrait), (max-width: 600px) {
  .topbar { padding: 18px 22px; }
  .sound { top: max(20px, env(safe-area-inset-top)); right: 18px; }

  .home__bg { left: 0; width: 100%; height: 74%; bottom: auto; }
  .home__bg img {
    object-position: 58% 22%;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .home__hero { align-self: end; padding: 0 22px 18px; }
  .mjw { font-size: clamp(80px, 26vw, 130px); }
  .eyebrow { font-size: 11px; letter-spacing: .3em; }
  .home__name { letter-spacing: .36em; font-size: 12px; }
  .home__line { font-size: 18px; margin-top: 10px; }

  /* the row of rooms becomes a swipeable strip */
  .notes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 22px;
    margin: 0; padding: 0 22px max(18px, env(safe-area-inset-bottom));
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .notes::-webkit-scrollbar { display: none; }
  .note { flex: 0 0 44%; scroll-snap-align: start; padding: 18px 16px 8px 0; min-height: 96px; }
  .note + .note { padding-left: 16px; }
  .note + .note .note__line { left: 16px; }
  .note__line { transform: scaleX(1); opacity: .35; right: 16px; }
  .note__title { font-size: 21px; }
  .note__sub { font-size: 15px; }

  .contact { grid-template-columns: 1fr; }
  .insta { grid-template-columns: repeat(2, 1fr); }
  .chapter { padding-left: 76px; }
  .chapter__no { width: 52px; height: 52px; font-size: 17px; }
  .chapters::before { left: 25px; }
}
@media (max-width: 420px) {
  .contact__form { padding: 20px; }
}
/* a short window (a laptop with a bookmarks bar, a phone on its side): the piece slider shrinks too,
   so the painting and the panel keep their room */
@media (max-height: 760px) and (min-width: 761px) {
  .piece { width: 122px; padding: 6px 6px 8px; }
  .piece__thumb { width: 46px; height: 46px; }
  .piece__name { font-size: 15px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  /* a phone on its side: the portraits share the top line with the back button and the sound control */
  .muses { top: max(18px, env(safe-area-inset-top)); left: 232px; right: calc(var(--gutter) + 140px); transform: none; max-width: none; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .piece { width: 104px; padding: 4px 6px 6px; }
  .piece__thumb { width: 34px; height: 34px; }
  .piece__name { font-size: 13px; }
  .piece__type, .piece__where { display: none; }
  .plaque__label { display: none; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .home__hero { padding-top: 70px; }
  .mjw { font-size: clamp(64px, 16vh, 120px); }
  .note__sub { display: none; }
}

/* ==================================================================
   Reduced motion
================================================================== */
@media (prefers-reduced-motion: reduce) {
  .intro.is-entering .deck { transform: rotateX(0deg) scale(1.15); transition-duration: .6s; }
  .intro.is-entering .intro__flash { transition-delay: 0s; }
  .home.is-arriving, .mjw span, .note, .home__bg img { animation: none; opacity: 1; }
  .sound__bars i { animation: none !important; }
  .room, .room > * { transition: none; }
}