/* ————————————————————————————————————————————————
   Malika Sharma — Portfolio
   A night gallery: umber walls, gilded frames, warm light.
   Every colour is sampled from her paintings.
   ———————————————————————————————————————————————— */

:root {
  /* walls (from Reflection's background) */
  --wall:   oklch(22% 0.022 62);
  --wall-2: oklch(17.5% 0.02 62);
  --wall-3: oklch(13% 0.018 62);

  /* light (halo gold, sail ivory) */
  --ink:    oklch(93% 0.022 85);
  --ink-2:  oklch(80% 0.028 83);
  --gold:   oklch(78% 0.105 87);
  --gold-2: oklch(64% 0.1 82);
  --gold-3: oklch(46% 0.075 76);

  /* placards */
  --card:     oklch(93% 0.02 85);
  --card-ink: oklch(25% 0.02 62);
  --card-ink-2: oklch(40% 0.025 62);

  /* room accents (hydrangea sage · storm slate) */
  --sage:  oklch(74% 0.07 135);
  --slate: oklch(76% 0.055 245);

  --accent: var(--gold);

  --display: 'Marcellus', 'Times New Roman', serif;
  --serif: 'EB Garamond', Georgia, serif;

  /* wallpapers, one motif per room */
  --pat-trellis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 48L48 0l48 48-48 48z' fill='none' stroke='%23d9b45e' stroke-opacity='0.05'/%3E%3Ccircle cx='48' cy='48' r='1.3' fill='%23d9b45e' fill-opacity='0.08'/%3E%3C/svg%3E");
  --pat-halos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23d9b45e' stroke-opacity='0.055'%3E%3Ccircle cx='42' cy='58' r='17'/%3E%3Ccircle cx='42' cy='58' r='11'/%3E%3Ccircle cx='178' cy='34' r='9'/%3E%3Ccircle cx='196' cy='168' r='19'/%3E%3Ccircle cx='196' cy='168' r='13'/%3E%3Ccircle cx='96' cy='196' r='8'/%3E%3C/g%3E%3Cg fill='%23d9b45e' fill-opacity='0.07'%3E%3Cpath d='M130 96l2.2 6.6 6.6 2.2-6.6 2.2-2.2 6.6-2.2-6.6-6.6-2.2 6.6-2.2z'/%3E%3Cpath d='M28 150l1.7 5 5 1.7-5 1.7-1.7 5-1.7-5-5-1.7 5-1.7z'/%3E%3C/g%3E%3C/svg%3E");
  --pat-garden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%239db07f' stroke-opacity='0.06'%3E%3Cpath d='M40 190c6-18 2-34 14-48'/%3E%3Ccircle cx='58' cy='136' r='7'/%3E%3Ccircle cx='47' cy='128' r='5'/%3E%3Ccircle cx='66' cy='127' r='5'/%3E%3Cpath d='M170 60c-8 14-4 26-16 38'/%3E%3Ccircle cx='150' cy='52' r='6'/%3E%3Ccircle cx='163' cy='45' r='5'/%3E%3Ccircle cx='158' cy='63' r='4.5'/%3E%3Cpath d='M120 200c4-10 12-12 14-24'/%3E%3C/g%3E%3C/svg%3E");
  --pat-tide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='140'%3E%3Cg fill='none' stroke='%237f9cc0' stroke-opacity='0.055'%3E%3Cpath d='M0 40c16-12 32-12 48 0s32 12 48 0 32-12 48 0 32 12 48 0 32-12 48 0'/%3E%3Cpath d='M0 108c16-12 32-12 48 0s32 12 48 0 32-12 48 0 32 12 48 0 32-12 48 0'/%3E%3C/g%3E%3Ccircle cx='210' cy='24' r='9' fill='%237f9cc0' fill-opacity='0.065'/%3E%3C/svg%3E");
  --pat-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 3.5h14M0 10.5h14' stroke='%23d9b45e' stroke-opacity='0.035'/%3E%3Cpath d='M3.5 0v14M10.5 0v14' stroke='%23d9b45e' stroke-opacity='0.025'/%3E%3C/svg%3E");

  /* z scale */
  --z-nav: 10;
  --z-doors: 20;
  --z-lens: 30;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* quint-ish */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* plaster grain over everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: -200vw; top: 0;
  background: var(--card); color: var(--card-ink);
  padding: 0.6rem 1.2rem; z-index: 40; font-family: var(--display);
}
.skip:focus { left: 1rem; top: 1rem; }

::selection { background: var(--gold-3); color: var(--ink); }

/* MPA crossfade between the house and the gallery */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.55s; }

/* ————————————————— shared chrome ————————————————— */

.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 4vw, 3.5rem);
}
.site-nav.fixed { position: fixed; }

.wordmark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  view-transition-name: wordmark;
}
.wordmark:hover { color: var(--gold); }

.nav-links { display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); }
.nav-links a {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.nav-links a:hover { color: var(--gold); border-color: var(--gold-3); }

/* gold hairline with a small diamond, used as a section rule */
.rule {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.4rem 0 2rem;
}
.rule::before, .rule::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-3));
}
.rule::after { background: linear-gradient(90deg, var(--gold-3), transparent); }
.rule svg { flex: none; }

/* ————————————————— landing: hero ————————————————— */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(5.5rem, 10vh, 8rem) clamp(1.4rem, 5vw, 4.5rem) clamp(3rem, 6vh, 5rem);
  position: relative;
  background:
    radial-gradient(120% 90% at 70% 0%, oklch(28% 0.035 70 / 0.55), transparent 60%),
    radial-gradient(100% 100% at 50% 115%, var(--wall-3), transparent 55%),
    var(--pat-trellis),
    var(--wall);
}

.hero-text { position: relative; z-index: 2; }

/* the ring passes behind the letters, never through them */
.hero-kicker, .hero-name, .hero-line {
  text-shadow:
    0 0 16px var(--wall),
    0 0 8px var(--wall),
    0 0 3px var(--wall),
    0 0 2px var(--wall);
}

.hero-halo {
  position: absolute;
  width: clamp(250px, 27vw, 410px);
  aspect-ratio: 1;
  top: 0; left: 10%;
  translate: -12% -16%;
  z-index: -1;
  opacity: 0.9;
}
.hero-halo .ring {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1550;
  stroke-dashoffset: 1550;
  animation: draw-halo 2.4s var(--ease-out) 0.35s forwards;
}
.hero-halo .ring.inner {
  stroke-width: 1.4;
  stroke-dasharray: 1470;
  stroke-dashoffset: -1470;
  animation-delay: 0.55s;
}
.hero-halo .glow {
  opacity: 0;
  animation: spark-in 2.6s ease 0.8s forwards;
}
.hero-halo .spark {
  fill: var(--gold);
  opacity: 0;
  animation: spark-in 1.2s var(--ease-out) forwards;
}
.hero-halo .spark:nth-of-type(3) { animation-delay: 1.9s; }
.hero-halo .spark:nth-of-type(4) { animation-delay: 2.2s; }
.hero-halo .spark:nth-of-type(5) { animation-delay: 2.5s; }

@keyframes draw-halo { to { stroke-dashoffset: 0; } }
@keyframes spark-in { to { opacity: 0.85; } }

.hero-kicker {
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.hero-name {
  font-size: clamp(2.9rem, 8.2vw, 6rem);
  letter-spacing: 0.045em;
  color: var(--ink);
}
.hero-name span { display: block; }
.hero-name .last { margin-left: clamp(1.5rem, 6vw, 5rem); color: var(--gold); }

.hero-line {
  margin-top: 1.6rem;
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-style: italic;
  color: var(--ink-2);
}
.hero-line cite {
  display: block;
  font-style: normal;
  font-size: 0.85em;
  margin-top: 0.5rem;
  color: var(--gold-2);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid var(--gold-3);
  border-radius: 999px 999px 6px 6px; /* an arched door */
  padding: 1rem 1.9rem;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.hero-cta:hover {
  background: oklch(30% 0.045 80 / 0.5);
  border-color: var(--gold-2);
  color: var(--ink);
}
.hero-cta svg { transition: translate 0.4s var(--ease-out); }
.hero-cta:hover svg { translate: 4px 0; }

/* her portrait, hung from a picture rail */
.hero-portrait { position: relative; z-index: 2; justify-self: center; }

.hero-portrait .cords {
  position: absolute;
  left: 50%; bottom: 100%;
  translate: -50% 0;
  width: 100%;
  height: clamp(3rem, 8vh, 6rem);
  overflow: visible;
}

.portrait-frame {
  width: min(34vw, 420px);
  border-radius: 46% 46% 4px 4px / 32% 32% 4px 4px;
  padding: 10px;
  background: linear-gradient(160deg, #9c7a37, #e5c476 22%, #f6e3a8 34%, #b08a38 58%, #71581f 82%, #cfa851);
  box-shadow:
    0 30px 60px -18px oklch(0% 0 0 / 0.75),
    0 6px 18px oklch(0% 0 0 / 0.5);
  rotate: 0.4deg;
}
.portrait-frame .inner {
  border-radius: inherit;
  padding: 6px;
  background: var(--wall-3);
  box-shadow: inset 0 0 0 1px var(--gold-3);
}
.portrait-frame img {
  border-radius: inherit;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-portrait figcaption {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-2);
}

/* ————————————————— landing: leaning canvases ————————————————— */

.collection {
  padding: clamp(4rem, 10vh, 8rem) clamp(1.4rem, 5vw, 4.5rem);
  background:
    radial-gradient(130% 90% at 50% 40%, transparent 55%, oklch(9% 0.012 60 / 0.5) 100%),
    linear-gradient(oklch(22% 0.022 62 / 0.45), oklch(17.5% 0.02 62 / 0.75)),
    var(--pat-trellis),
    var(--wall);
  text-align: center;
}
.collection h2, .about h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: 0.06em;
}
.collection > p {
  max-width: 52ch;
  margin: 0 auto 1em;
  color: var(--ink-2);
}

.lean-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-bottom: 2.5rem;
  position: relative;
}
/* the shelf they rest on */
.lean-row::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3) 20%, var(--gold-3) 80%, transparent);
}

.lean {
  width: clamp(130px, 17vw, 230px);
  padding: 8px;
  background: linear-gradient(150deg, #8f6f30, #dcbb6b 25%, #f2dc9c 36%, #a5812f 62%, #6a5220 85%);
  box-shadow: 0 22px 40px -14px oklch(0% 0 0 / 0.7);
  transition: rotate 0.6s var(--ease-out), translate 0.6s var(--ease-out), box-shadow 0.6s;
}
.lean img { box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.4); }
.lean:nth-child(1) { rotate: -2.4deg; translate: 0 6px; }
.lean:nth-child(2) { rotate: 1.6deg; z-index: 2; }
.lean:nth-child(3) { rotate: -1.2deg; translate: 0 10px; }
.lean:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 34px 54px -16px oklch(0% 0 0 / 0.8); }

/* ————————————————— landing: the artist ————————————————— */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.4rem, 5vw, 4.5rem);
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 60%, oklch(9% 0.012 60 / 0.45) 100%),
    radial-gradient(90% 70% at 15% 20%, oklch(26% 0.03 40 / 0.35), transparent 60%),
    var(--pat-weave),
    var(--wall-2);
}

.about-photo { position: sticky; top: 4rem; }
.about-photo img {
  border: 1px solid var(--gold-3);
  outline: 6px solid var(--wall-3);
  box-shadow: 0 26px 50px -18px oklch(0% 0 0 / 0.75);
}
.about-photo figcaption {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-2);
}

.about-text .lede {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-style: italic;
  color: var(--ink);
  max-width: 30ch;
  line-height: 1.4;
}
.about-text p:not(.lede) { max-width: 62ch; color: var(--ink-2); }
.about-text p:not(.lede)::first-letter { color: var(--gold); }

/* ————————————————— landing: the doorway ————————————————— */

.entrance {
  min-height: 92svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) 1.4rem;
  background:
    radial-gradient(60% 45% at 50% 100%, oklch(24% 0.03 70 / 0.7), transparent 70%),
    linear-gradient(oklch(17.5% 0.02 62 / 0.55), oklch(13% 0.018 62 / 0.8)),
    var(--pat-trellis),
    var(--wall-2);
}

.doorway { display: inline-block; }
.doorway h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
.doorway > p { color: var(--ink-2); font-style: italic; }

.door-btn {
  position: relative;
  display: block;
  width: min(320px, 74vw);
  aspect-ratio: 0.62;
  margin: 2.6rem auto 0;
  border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
  border: 1px solid var(--gold-3);
  padding: 10px;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.door-scene {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
  /* warm room beyond */
  background:
    radial-gradient(75% 60% at 50% 42%, oklch(92% 0.1 88), oklch(70% 0.11 82) 55%, oklch(34% 0.06 72) 100%);
}
/* a tiny far-away frame glowing inside */
.door-scene::before {
  content: '';
  position: absolute;
  left: 50%; top: 38%;
  width: 24%; aspect-ratio: 0.8;
  translate: -50% -50%;
  border: 3px solid var(--gold-2);
  background: var(--wall-3);
  box-shadow: 0 0 34px oklch(88% 0.1 88 / 0.7);
}
.door {
  position: absolute;
  top: 0; bottom: 0;
  width: 48.9%; /* the sliver between the doors glows */
  background:
    linear-gradient(90deg, oklch(37% 0.055 62), oklch(52% 0.075 70) 55%, oklch(30% 0.045 60));
  box-shadow:
    inset 0 0 0 2px oklch(70% 0.1 82 / 0.85),
    inset 0 0 34px oklch(0% 0 0 / 0.45);
  transition: transform 1.1s var(--ease-out);
}
.door.left  { left: 0;  border-radius: 100% 0 0 0 / 62% 0 0 0; transform-origin: left center; }
.door.right { right: 0; border-radius: 0 100% 0 0 / 0 62% 0 0; transform-origin: right center; }
/* engraved panels on the doors */
.door::after {
  content: '';
  position: absolute; inset: 16% 20% 10%;
  border: 2px solid oklch(68% 0.09 80 / 0.9);
  border-radius: 46% 46% 3px 3px / 30% 30% 3px 3px;
  box-shadow: inset 0 0 22px oklch(0% 0 0 / 0.4);
}
/* brass knobs by the centre gap */
.door::before {
  content: '';
  position: absolute;
  top: 52%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d896, #8d6d2e 75%);
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.6);
}
.door.left::before  { right: 7%; }
.door.right::before { left: 7%; }
.door-btn:hover .door.left, .door-btn:focus-visible .door.left { transform: translateX(-14%) skewY(1.5deg); }
.door-btn:hover .door.right, .door-btn:focus-visible .door.right { transform: translateX(14%) skewY(-1.5deg); }
.door-btn.opening .door.left  { transform: translateX(-103%); }
.door-btn.opening .door.right { transform: translateX(103%); }

.door-word {
  position: absolute;
  left: 50%; bottom: -3.4rem;
  translate: -50% 0;
  white-space: nowrap;
  font-family: var(--display);
  letter-spacing: 0.18em;
  font-size: 1rem;
  color: var(--gold);
}

footer {
  padding: 6rem 1.4rem 2.4rem;
  text-align: center;
  background: var(--wall-3);
  color: var(--ink-2);
  font-size: 0.95rem;
}
footer .fname { font-family: var(--display); letter-spacing: 0.14em; color: var(--ink); margin-bottom: 0.3rem; }

/* ————————————————— gallery: vestibule ————————————————— */

.vestibule {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem 1.4rem 4rem;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 60%, transparent 55%, oklch(9% 0.012 60 / 0.5) 100%),
    radial-gradient(90% 60% at 50% -5%, oklch(34% 0.05 80 / 0.5), transparent 62%),
    var(--pat-trellis),
    var(--wall);
}
.vestibule h1 {
  font-size: clamp(2.1rem, 9vw, 5.5rem);
  letter-spacing: 0.1em;
}
/* words stay whole; letters animate inside them */
.vestibule h1 .word { display: inline-block; white-space: nowrap; }
.vestibule .sub {
  margin-top: 1.2rem;
  font-style: italic;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}
.vestibule .rooms-index {
  margin: 2.6rem auto 0;
  display: flex;
  gap: clamp(1.2rem, 4vw, 3rem);
  justify-content: center;
  flex-wrap: wrap;
}
.rooms-index a {
  font-family: var(--display);
  color: var(--ink-2);
  letter-spacing: 0.08em;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--gold-3);
  padding-bottom: 3px;
  transition: color 0.3s;
}
.rooms-index a:hover { color: var(--gold); }
.rooms-index .num { color: var(--gold); margin-right: 0.4em; }

.walk-hint {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  translate: -50% 0;
  color: var(--ink-2);
  font-style: italic;
  font-size: 0.95rem;
}
.walk-hint svg { display: block; margin: 0.5rem auto 0; animation: hint-drift 2.6s ease-in-out infinite; }
@keyframes hint-drift { 50% { translate: 0 7px; opacity: 0.6; } }

/* ————————————————— gallery: room dividers ————————————————— */

.room-door {
  min-height: 72svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 5rem 1.4rem;
  position: relative;
}
.room-door .numeral {
  font-family: var(--display);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-3);
  text-stroke: 1.5px var(--gold-3);
}
.room-door h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
}
.room-door .note {
  max-width: 46ch;
  margin: 1.2rem auto 0;
  font-style: italic;
  color: var(--ink-2);
}
.room-door .ornament { margin: 1.6rem auto 0; display: block; }

/* per-room accents, wall temperature, and wallpaper motif */
.room[data-room='1'] {
  --accent: var(--gold);
  background: var(--pat-halos) var(--wall);
}
.room[data-room='2'] {
  --accent: var(--sage);
  background:
    linear-gradient(oklch(21% 0.024 90 / 0.4), oklch(19% 0.026 120 / 0.55) 50%, oklch(21% 0.024 90 / 0.4)),
    var(--pat-garden),
    oklch(20% 0.025 105);
}
.room[data-room='3'] {
  --accent: var(--slate);
  background:
    linear-gradient(oklch(20% 0.02 62 / 0.4), oklch(18% 0.025 250 / 0.55) 50%, oklch(20% 0.02 62 / 0.4)),
    var(--pat-tide),
    oklch(19% 0.022 250);
}

/* ————————————————— gallery: artwork walls ————————————————— */

.artwork {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 9vh, 6rem) clamp(1.4rem, 5vw, 4.5rem) clamp(5rem, 11vh, 8rem);
  position: relative;
  overflow: clip;
}
/* the floor */
.artwork::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(2.2rem, 6vh, 4rem);
  background: linear-gradient(oklch(12% 0.015 55), oklch(9% 0.012 55));
  border-top: 1px solid oklch(30% 0.03 70 / 0.5);
}

.wall {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1250px;
  margin: 0 auto;
  width: 100%;
}
.artwork.flip .wall > .frame-side { order: 2; }

/* spotlight — fades up as you approach */
.frame-side { position: relative; }
.spot {
  position: absolute;
  left: 50%; top: -18%;
  width: 150%; height: 150%;
  translate: -50% 0;
  pointer-events: none;
  background:
    radial-gradient(45% 42% at 50% 34%, oklch(88% 0.07 88 / 0.16), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 40%, oklch(88% 0.08 88 / 0.1) 50%, transparent 60%);
  opacity: 0;
}
/* the lamp warms up: a flicker, then steady light */
.js .artwork.lit .spot { animation: lamp-on 1.5s ease-out forwards; }
html:not(.js) .spot { opacity: 1; }
@keyframes lamp-on {
  0%, 38% { opacity: 0; }
  44% { opacity: 0.75; }
  50% { opacity: 0.18; }
  58% { opacity: 0.92; }
  66% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* the frame itself */
.frame-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 auto;
  cursor: zoom-in;
  perspective: 1300px;
  -webkit-tap-highlight-color: transparent;
}

.frame {
  --w: min(100%, calc((72vh - 6rem) * var(--ar, 0.8)));
  position: relative;
  display: block;
  width: var(--w);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 22px);
  background:
    linear-gradient(148deg, #8d6d2e, #dcbb6b 20%, #f4e0a1 32%, #c49b41 48%, #6d5520 70%, #a5822f 88%, #866729);
  box-shadow:
    0 40px 70px -22px oklch(0% 0 0 / 0.8),
    0 10px 26px -8px oklch(0% 0 0 / 0.55);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--settle, 1));
  transform-style: preserve-3d;
  rotate: 0deg;
  transition: transform 0.9s var(--ease-out), rotate 1.2s var(--ease-out);
  will-change: transform;
}
.js .artwork:not(.lit) .frame { --settle: 0.975; rotate: -0.8deg; }
.frame.tilting { transition: transform 0.18s ease-out; }

/* carved bevel step between molding and canvas */
.frame .bevel {
  position: absolute;
  inset: clamp(8px, 1.1vw, 15px);
  border: 1px solid oklch(35% 0.05 75);
  box-shadow:
    inset 0 0 0 2px oklch(78% 0.1 85 / 0.55),
    inset 0 0 0 5px oklch(30% 0.04 70);
  transform: translateZ(14px);
  pointer-events: none;
}
.frame img {
  width: 100%;
  aspect-ratio: var(--ar, 0.8);
  object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
  transition: filter 1.3s ease 0.5s; /* brightens once the lamp is on */
  box-shadow: inset 0 0 24px oklch(0% 0 0 / 0.5);
}
.js .artwork.lit .frame img, html:not(.js) .frame img { filter: brightness(1) saturate(1); }

/* varnish sheen that follows the light */
.frame .glass {
  position: absolute;
  inset: clamp(12px, 1.6vw, 22px);
  pointer-events: none;
  background: radial-gradient(55% 45% at var(--gx, 30%) var(--gy, 20%), oklch(97% 0.02 90 / 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s;
  transform: translateZ(16px);
}
.frame-btn:hover .glass { opacity: 1; }

/* placard + statement column */
.label-col { max-width: 54ch; }

/* an engraved brass plaque, screwed to the wall */
.placard {
  display: inline-block;
  background:
    linear-gradient(165deg, oklch(80% 0.1 88), oklch(64% 0.095 82) 32%, oklch(55% 0.085 78) 62%, oklch(64% 0.09 80) 100%);
  color: oklch(20% 0.03 65);
  padding: 1.15rem 2rem 1.05rem;
  position: relative;
  border-radius: 2px;
  box-shadow:
    0 14px 28px -10px oklch(0% 0 0 / 0.7),
    inset 0 0 0 1px oklch(34% 0.05 70 / 0.9),
    inset 0 0 0 3px oklch(78% 0.09 86 / 0.35),
    inset 0 1px 0 oklch(93% 0.06 90 / 0.5);
}
/* screws in opposite corners */
.placard::before, .placard::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e3a8, #6f5522 78%);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.5);
}
.placard::before { top: 7px; left: 8px; }
.placard::after { bottom: 7px; right: 8px; }
.placard h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.04em;
  color: inherit;
  text-shadow: 0 1px 0 oklch(91% 0.07 90 / 0.45);
}
.placard .tomb {
  margin: 0.35rem 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: oklch(21% 0.035 65);
  font-variant-numeric: oldstyle-nums;
  text-shadow: 0 1px 0 oklch(91% 0.07 90 / 0.4);
}

.statement {
  margin-top: 1.8rem;
  color: var(--ink-2);
  font-size: 1.1rem;
  max-width: 58ch;
}
.statement p::first-letter { color: var(--accent); }
.statement .inscription { font-style: italic; }

.step-closer {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  font-style: italic;
  color: oklch(from var(--accent) l calc(c * 0.8) h / 0.9);
}
.step-closer::before { content: '☩ '; color: var(--accent); font-style: normal; }

/* ————————————————— gallery: focus lens (step closer) ————————————————— */

.lens {
  border: 1px solid oklch(45% 0.06 78 / 0.5);
  padding: 0;
  background: linear-gradient(160deg, oklch(16% 0.018 62), oklch(12% 0.015 60));
  color: var(--ink);
  width: min(1200px, 94vw);
  max-height: 92svh;
  z-index: var(--z-lens);
  box-shadow: 0 60px 140px oklch(0% 0 0 / 0.85);
}
.lens::backdrop {
  background: oklch(5% 0.008 60 / 0.97);
}
.lens[open] { animation: lens-in 0.55s var(--ease-out); }
@keyframes lens-in {
  from { opacity: 0; transform: scale(0.965) translateY(10px); }
}
.lens-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.lens-art img {
  max-height: 82svh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  background: linear-gradient(148deg, #8d6d2e, #dcbb6b 20%, #f4e0a1 32%, #c49b41 48%, #6d5520 70%, #a5822f 88%);
  box-shadow: 0 40px 90px -20px oklch(0% 0 0 / 0.9);
}
.lens-info { max-height: 82svh; overflow-y: auto; padding-right: 0.5rem; }
.lens-info h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.lens-info .tomb { color: var(--gold-2); margin: 0.4rem 0 1.4rem; font-variant-numeric: oldstyle-nums; }
.lens-info .statement { margin-top: 0; }

.lens-close {
  position: absolute;
  z-index: 2;
  top: 0.6rem; right: 0.6rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-3);
  background: oklch(15% 0.02 60 / 0.8);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.lens-close svg { display: block; }
.lens-close:hover { background: var(--gold-3); color: var(--ink); }

/* ————————————————— gallery: floor plan wayfinding ————————————————— */

.floor-plan {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.8rem);
  top: 50%;
  translate: 0 -50%;
  z-index: var(--z-nav);
  display: grid;
  gap: 6px;
}
.floor-plan a { display: block; line-height: 0; }
.floor-plan rect {
  fill: transparent;
  stroke: var(--gold-3);
  stroke-width: 1.2;
  transition: fill 0.5s, stroke 0.5s;
}
.floor-plan a.here rect { fill: oklch(60% 0.1 82 / 0.35); stroke: var(--gold); }
.floor-plan a:hover rect { stroke: var(--gold); }
.floor-plan text {
  font-family: var(--display);
  font-size: 10px;
  fill: var(--ink-2);
}
.floor-plan a.here text { fill: var(--ink); }

/* exit wall */
.exit-wall {
  min-height: 80svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 5rem 1.4rem;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 50%, oklch(8% 0.01 60 / 0.6) 100%),
    linear-gradient(oklch(22% 0.022 62 / 0.4), oklch(13% 0.018 62 / 0.85)),
    var(--pat-trellis),
    var(--wall);
}
.exit-wall h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 0.07em; }
.exit-wall p { color: var(--ink-2); font-style: italic; margin-top: 1rem; }
.exit-wall .hero-cta { margin-top: 2rem; }

/* ————————————————— responsive ————————————————— */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 6.5rem; }
  .hero-halo { left: 50%; translate: -50% -12%; }
  .hero-name .last { margin-left: 0; }
  .hero-line { margin-inline: auto; }
  .hero-portrait { margin-top: 1.5rem; }
  .portrait-frame { width: min(72vw, 380px); }
  .about { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 480px; }
  .wall { grid-template-columns: 1fr; gap: 2.2rem; }
  .artwork.flip .wall > .frame-side { order: 0; }
  .frame { --w: min(100%, calc((60vh) * var(--ar, 0.8)), 560px); }
  .label-col { max-width: 100%; }
  .floor-plan { display: none; }
  .lens-body { grid-template-columns: 1fr; }
  .lens-art img { max-height: 52svh; }
  .lens-info { max-height: 34svh; }
}

@media (max-width: 560px) {
  body { font-size: 1.05rem; }

  /* chrome that fits a phone */
  .site-nav { padding: 1rem 1.2rem; }
  .wordmark { font-size: 0.92rem; letter-spacing: 0.1em; }
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: 0.82rem; padding-block: 0.4rem; }
  .nav-links .rm { display: none; }

  /* the entrance */
  .hero { padding-top: 5.5rem; padding-inline: 1.2rem; }
  .hero-kicker { font-size: 0.95rem; }
  .hero-halo { width: min(66vw, 300px); }
  .hero-line { font-size: 1.1rem; }
  .portrait-frame { width: min(78vw, 340px); }
  .hero-portrait figcaption { font-size: 0.88rem; padding-inline: 1rem; }

  .collection { padding-inline: 1.2rem; }
  .lean-row { gap: 0.8rem; }
  .lean { width: 27vw; }
  .about { padding-inline: 1.2rem; }
  .about-photo { margin-inline: auto; }

  /* the rooms */
  .vestibule { padding-inline: 1rem; }
  .vestibule h1 { letter-spacing: 0.07em; }
  .vestibule .sub { font-size: 1rem; }
  .rooms-index { gap: 0.7rem 1.4rem; }
  .rooms-index a { font-size: 0.9rem; }
  .room-door .note { font-size: 1rem; }
  .artwork { padding-inline: 1.2rem; }
  .wall { gap: 1.8rem; }
  .placard { padding: 1rem 1.5rem 0.9rem; }
  .placard h3 { font-size: 1.45rem; }
  .placard .tomb { font-size: 0.9rem; }
  .statement { font-size: 1.02rem; margin-top: 1.4rem; }
  .step-closer { margin-top: 1.1rem; }
  .exit-wall { padding-inline: 1.2rem; }
  footer { padding-top: 4rem; }
}

/* ————————————————— the story: entrances & choreography ————————————————— */

/* a picture rail runs along every gallery wall */
.artwork {
  background-image: linear-gradient(
    transparent 0 11%,
    oklch(52% 0.07 78 / 0.35) 11% calc(11% + 1px),
    oklch(0% 0 0 / 0.12) calc(11% + 1px) calc(11% + 4px),
    transparent calc(11% + 4px)
  );
}

/* each wall tells itself in order: lamp → painting → plaque → words */
.js .artwork .placard {
  opacity: 0;
  translate: 0 -14px;
  rotate: -1.2deg;
  transition: opacity 0.7s var(--ease-out) 0.5s, translate 0.7s var(--ease-out) 0.5s, rotate 0.7s var(--ease-out) 0.5s;
}
.js .artwork .statement {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.9s var(--ease-out) 0.8s, translate 0.9s var(--ease-out) 0.8s;
}
.js .artwork .step-closer {
  opacity: 0;
  transition: opacity 0.9s ease 1.25s;
}
.js .artwork.lit .placard { opacity: 1; translate: 0 0; rotate: 0deg; }
.js .artwork.lit .statement { opacity: 1; translate: 0 0; }
.js .artwork.lit .step-closer { opacity: 1; }

/* the house lights come up on arrival */
@keyframes rise {
  from { opacity: 0; translate: 0 22px; }
}
.hero-kicker { animation: rise 0.8s var(--ease-out) 0.15s both; }
.hero-name span:first-child { animation: rise 0.9s var(--ease-out) 0.3s both; }
.hero-name .last { animation: rise 0.9s var(--ease-out) 0.5s both; }
.hero-line { animation: rise 0.9s var(--ease-out) 0.8s both; }
.hero-text .hero-cta { animation: rise 0.9s var(--ease-out) 1.05s both; }

/* her portrait is hung, swings once, and settles */
@keyframes hang {
  0% { opacity: 0; rotate: 2.4deg; translate: 0 -18px; }
  50% { opacity: 1; rotate: -0.9deg; }
  78% { rotate: 0.8deg; }
  100% { opacity: 1; rotate: 0deg; translate: 0 0; }
}
.hero-portrait { transform-origin: top center; animation: hang 1.7s var(--ease-out) 0.45s both; }

/* the gallery title flickers on letter by letter (JS splits it) */
.vestibule h1 .glyph {
  display: inline-block;
  opacity: 0;
  translate: 0 16px;
  filter: blur(7px);
  animation: glyph-in 0.9s var(--ease-out) calc(0.2s + var(--i) * 0.065s) forwards;
}
@keyframes glyph-in {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
.js .vestibule .sub { animation: rise 0.9s var(--ease-out) 1.15s both; }
.js .vestibule .rooms-index a { animation: rise 0.8s var(--ease-out) both; }
.js .vestibule .rooms-index a:nth-child(1) { animation-delay: 1.35s; }
.js .vestibule .rooms-index a:nth-child(2) { animation-delay: 1.5s; }
.js .vestibule .rooms-index a:nth-child(3) { animation-delay: 1.65s; }
.js .vestibule .walk-hint { animation: rise 1s ease 2s both; }

/* room numerals drift past like wall lettering as you walk (where supported) */
@supports (animation-timeline: view()) {
  .room-door .numeral {
    animation: numeral-drift linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 85%;
  }
  @keyframes numeral-drift {
    from { translate: 0 52px; opacity: 0.2; }
    to { translate: 0 -36px; opacity: 1; }
  }
  .room-door .note, .room-door .ornament {
    animation: note-in linear both;
    animation-timeline: view();
    animation-range: entry 25% entry 70%;
  }
  @keyframes note-in {
    from { opacity: 0; translate: 0 20px; }
    to { opacity: 1; translate: 0 0; }
  }
}

/* stepping through the doors */
.door-scene {
  transition: scale 1.15s cubic-bezier(0.55, 0, 0.85, 0.35);
  transform-origin: 50% 46%;
}
.door-btn.opening { pointer-events: none; }
.door-btn.opening .door-scene { scale: 7.5; }
.door-btn.opening + .door-word, .door-btn.opening .door-word { opacity: 0; }
.door-word { transition: opacity 0.3s; }
.walk-flash {
  position: fixed;
  inset: 0;
  z-index: var(--z-doors);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 55%, oklch(96% 0.06 92), oklch(88% 0.1 88) 45%, oklch(38% 0.06 72) 100%);
  transition: opacity 0.55s ease-in 0.5s;
}
.walk-flash.on { opacity: 1; }

/* the leaning canvases arrive one at a time; the artist steps forward */
.js .collection .lean { opacity: 0; transition: opacity 0.9s var(--ease-out), rotate 0.6s var(--ease-out), translate 0.6s var(--ease-out), box-shadow 0.6s; }
.js .collection.lit .lean { opacity: 1; }
.js .collection.lit .lean:nth-child(1) { transition-delay: 0.1s, 0s, 0s, 0s; }
.js .collection.lit .lean:nth-child(2) { transition-delay: 0.3s, 0s, 0s, 0s; }
.js .collection.lit .lean:nth-child(3) { transition-delay: 0.5s, 0s, 0s, 0s; }
.js .about .about-photo, .js .about .about-text {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
}
.js .about .about-text { transition-delay: 0.2s; }
.js .about.lit .about-photo, .js .about.lit .about-text { opacity: 1; translate: 0 0; }

/* ————————————————— hero collage: the artist among her works ————————————————— */

.hero-portrait .satellite {
  position: absolute;
  padding: 5px;
  background: linear-gradient(150deg, #8f6f30, #dcbb6b 25%, #f2dc9c 36%, #a5812f 62%, #6a5220 85%);
  box-shadow: 0 18px 34px -12px oklch(0% 0 0 / 0.7);
  z-index: 3;
}
.hero-portrait .satellite img { box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.35); }
.satellite.s-a { width: 34%; left: -16%; top: 6%; rotate: -4deg; animation: hang 1.7s var(--ease-out) 0.9s both; }
.satellite.s-b { width: 31%; right: -10%; top: 38%; rotate: 3deg; animation: hang 1.7s var(--ease-out) 1.1s both; }
.satellite.s-c { width: 31%; left: -10%; bottom: 9%; rotate: 2.4deg; animation: hang 1.7s var(--ease-out) 1.3s both; }

/* ————————————————— honours ————————————————— */

.honours { margin-top: 2.6rem; max-width: 62ch; }
.honours h3 {
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.honours ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.honours li {
  padding: 0.85rem 0;
  border-top: 1px solid oklch(40% 0.05 75 / 0.35);
  color: var(--ink);
}
.honours li:last-child { border-bottom: 1px solid oklch(40% 0.05 75 / 0.35); }
.honours li span {
  display: block;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

/* ————————————————— featured walls: the works she loves most ————————————————— */

.artwork.feature { min-height: 106svh; }
.artwork.feature .frame { --w: min(100%, calc((84vh - 6rem) * var(--ar, 0.8))); }
.artwork.feature .spot {
  background:
    radial-gradient(48% 45% at 50% 34%, oklch(90% 0.075 88 / 0.24), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 38%, oklch(90% 0.085 88 / 0.16) 50%, transparent 62%);
}

/* ————————————————— the salon ————————————————— */

.salon-head {
  padding: clamp(6.5rem, 14vh, 9rem) 1.4rem 1rem;
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% -5%, oklch(34% 0.05 80 / 0.5), transparent 62%),
    var(--pat-trellis),
    var(--wall);
}
.salon-head h1 { font-size: clamp(2.1rem, 6vw, 4rem); letter-spacing: 0.1em; }
.salon-head .sub { font-style: italic; color: var(--ink-2); margin-top: 0.8rem; }

.salon-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.2rem, 3vw, 3rem) 5rem;
  align-items: start;
}

.salon-wall {
  columns: 3;
  column-gap: clamp(0.9rem, 1.8vw, 1.6rem);
}
.piece {
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.6rem);
  break-inside: avoid;
}
.piece button {
  display: block;
  width: 100%;
  padding: 6px;
  border: none;
  cursor: pointer;
  background: linear-gradient(150deg, #8f6f30, #dcbb6b 25%, #f2dc9c 36%, #a5812f 62%, #6a5220 85%);
  box-shadow: 0 14px 26px -12px oklch(0% 0 0 / 0.65);
  transition: translate 0.45s var(--ease-out), box-shadow 0.45s;
}
.piece button:hover { translate: 0 -4px; box-shadow: 0 22px 36px -14px oklch(0% 0 0 / 0.75); }
.piece img { width: 100%; box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.35); }
.piece.chosen button {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.dossier {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100svh - 7rem);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, oklch(17% 0.02 62), oklch(13% 0.016 60));
  border: 1px solid oklch(45% 0.06 78 / 0.45);
  box-shadow: 0 30px 60px -25px oklch(0% 0 0 / 0.8);
}
.d-body {
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.8rem;
}
.d-hint { color: var(--ink-2); font-style: italic; margin: 0; }
.d-body img {
  max-height: 34svh;
  width: auto;
  max-width: 100%;
  margin: 0 auto 1.2rem;
  padding: 6px;
  background: linear-gradient(150deg, #8f6f30, #dcbb6b 25%, #f2dc9c 36%, #a5812f 62%, #6a5220 85%);
}
.d-body h2 { font-size: 1.7rem; letter-spacing: 0.04em; }
.d-body .tomb { color: var(--gold-2); margin: 0.35rem 0 1rem; font-variant-numeric: oldstyle-nums; }
.d-body .statement { margin-top: 0; font-size: 1.02rem; }
.walk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--gold-3);
  padding-bottom: 3px;
}
.d-close { display: none; }

.exit-alt { margin-top: 1.6rem; font-size: 0.95rem; }
.exit-alt a { color: var(--ink-2); border-bottom: 1px solid var(--gold-3); padding-bottom: 2px; }
.exit-alt a:hover { color: var(--gold); }

@media (max-width: 1020px) {
  .salon-layout { grid-template-columns: 1fr; }
  .salon-wall { columns: 2; }
  /* dossier becomes a bottom sheet */
  .dossier {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    max-height: 72svh;
    z-index: var(--z-lens);
    translate: 0 105%;
    transition: translate 0.55s var(--ease-out);
    border-left: none; border-right: none; border-bottom: none;
  }
  .dossier.open { translate: 0 0; }
  .d-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    width: 42px; height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--gold-3);
    background: oklch(15% 0.02 60 / 0.85);
    color: var(--gold);
    cursor: pointer;
    z-index: 2;
  }
  .d-body img { max-height: 26svh; }
}
@media (max-width: 560px) {
  .salon-wall { columns: 2; column-gap: 0.7rem; }
  .piece { margin-bottom: 0.7rem; }
  .satellite.s-a { left: -4%; }
  .satellite.s-b { right: -2%; }
  .satellite.s-c { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dossier { transition: none; }
}

/* ————————————————— reduced motion ————————————————— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    transition-delay: 0ms !important;
  }
  .hero-halo .ring { stroke-dashoffset: 0; }
  .hero-halo .spark { opacity: 0.85; }
  .frame { transform: none !important; }
  .lean:hover { rotate: inherit; translate: inherit; }
}