/* =========================================================================
   v5: the carved wall carries its own words, the room starts at its title,
   the menu fits one screen, the flame that lights the room, and sound.
   ========================================================================= */

/* ---------- the carved wall: the words sit on the plaster ---------- */
.wall__stage { height: 100svh; max-height: none; aspect-ratio: auto; }
.wall__stage img { object-position: 48% 40%; }
.wall__stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(15 10 7 / .55) 0, transparent 22%, transparent 48%, rgb(15 10 7 / .82) 76%, #0f0a07 100%);
}
.wall__copy {
  position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: calc(var(--dock-h) + clamp(28px, 6vh, 64px));
  padding: 0; display: grid; gap: 14px; pointer-events: none;
}
.wall__copy h2 { max-width: 11ch; text-shadow: 0 4px 30px rgb(0 0 0 / .6); }
.wall__copy p { max-width: 40ch; color: #ecdcc0; text-shadow: 0 2px 14px rgb(0 0 0 / .7); }
@media (min-width: 900px) {
  .wall__stage { height: min(100svh, 52.4vw); min-height: 560px; }
  .wall__stage img { object-position: 50% 50%; }
  .wall__stage::after { background: linear-gradient(180deg, rgb(15 10 7 / .5) 0, transparent 20%, transparent 50%, rgb(15 10 7 / .78) 82%, #0f0a07 100%), linear-gradient(90deg, rgb(15 10 7 / .55), transparent 46%); }
  .wall__copy { grid-template-columns: auto minmax(0, 40ch); align-items: end; justify-content: start; gap: 6vw; bottom: clamp(36px, 7vh, 80px); }
  .wall__copy h2 { grid-row: auto; }
  .wall__copy p { padding-bottom: .5em; }
}

/* ---------- walk the room: the title waits in the room's own panel ---------- */
.walk.is-stage { padding-top: 0; }
.room__intro { grid-area: 1 / 1; display: grid; grid-template-columns: none; align-items: start; margin: 0; gap: 14px; opacity: 0; transform: translateY(22px); transition: opacity .35s, transform .7s var(--ease); pointer-events: none; }
.room__intro.is-on { opacity: 1; transform: none; transition-delay: .1s; }
.room__intro h2 { font-size: clamp(2.3rem, 9vw, 4.2rem); max-width: none; }
.room__intro p { max-width: 44ch; color: #e4d0ad; font-size: .97rem; line-height: 1.55; }
@media (min-width: 900px) {
  .room__intro { gap: 20px; }
  .room__intro h2 { font-size: clamp(3rem, 4.6vw, 4.9rem); }
  .room__intro p { font-size: 1.05rem; line-height: 1.6; }
}

/* ---------- menu: the platter is the table, and it stays at the table while the dishes go by ---------- */
.menu { overflow: clip; } /* hidden would stop the platter from sticking */
.thali__bar { display: contents; }
.thali__mini { display: none; }
@media (min-width: 900px) {
  .menu__grid { align-items: start; }
  .thali { position: sticky; top: calc(var(--nav-h) + 3vh); gap: 18px; transition: top .6s var(--ease); }
  .nav.is-away ~ main .thali { top: 4vh; }
  .thali__svg { width: min(32vw, 440px, calc(100svh - var(--nav-h) - 230px)); }
}
/* on a phone the big platter scrolls by, then a small one sticks under the nav with the four names beside it */
@media (max-width: 899px) {
  .thali { display: contents; }
  .thali__svg { justify-self: center; }
  .thali__bar {
    position: sticky; top: var(--nav-h); z-index: 5; align-self: start; display: flex; align-items: center; gap: 8px;
    margin: 0 calc(var(--gut) * -1); padding: 8px var(--gut); background: rgb(18 32 24 / .95); backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgb(0 0 0 / .25); transition: top .6s var(--ease);
  }
  .nav.is-away ~ main .thali__bar { top: 0; }
  .thali__mini { display: block; position: relative; flex: none; width: 46px; height: 46px; }
  .thali__mini i {
    position: absolute; inset: 0; border-radius: 50%; background: url('../assets/img/food/platter.webp') 50% 50% / cover;
    box-shadow: 0 0 0 2px #c9954c, 0 4px 12px rgb(0 0 0 / .5); transform: rotate(var(--turn, 0deg)); transition: transform 1.6s cubic-bezier(.3, 1.2, .3, 1);
  }
  .thali__mini::after { content: ''; position: absolute; left: 50%; top: -5px; margin-left: -4px; border: 4px solid transparent; border-top: 7px solid var(--redline); border-bottom: 0; }
  .thali__tabs { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .thali__tabs::-webkit-scrollbar { display: none; }
  .thali__tabs button { flex: none; min-height: 38px; padding: 0 clamp(7px, 2.2vw, 14px); font-size: clamp(.8rem, 3.5vw, .95rem); border-color: transparent; }
  .menu__key { justify-self: center; }
  .menu__grid { gap: 22px; }
}

/* ---------- the flame ---------- */
.ember { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .9s; will-change: transform; }
.ember.is-awake.is-on { opacity: 1; }
.ember__glow { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 222 150 / .6), rgb(255 170 80 / .2) 42%, transparent); animation: ember-breathe 2.6s ease-in-out infinite; }
.ember__flame {
  position: absolute; left: -6px; top: -19px; width: 12px; height: 22px; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(60% 52% at 50% 72%, #fffdf0, #ffe39a 40%, #ffab45 74%, rgb(255 120 40 / 0) 100%);
  box-shadow: 0 0 14px 4px rgb(255 190 100 / .55);
  transform-origin: 50% 88%; animation: ember-flicker 1.3s linear infinite; transition: scale .4s var(--ease);
}
.ember.is-held .ember__flame { scale: 1.3; }
.ember.is-held .ember__glow { scale: 1.2; }
.ember::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 220 150 / .7); opacity: 0; }
.ember.is-waiting::before { animation: ember-ring 1.8s var(--ease) infinite; }
.ember__tip {
  position: absolute; left: 26px; top: -9px; white-space: nowrap; font: 600 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: #ffe6b4; text-shadow: 0 1px 10px rgb(0 0 0 / .8); opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .6s var(--ease);
}
.ember.is-waiting .ember__tip { opacity: 1; transform: none; transition-delay: .3s; }
.ember.is-flare .ember__glow { animation: ember-flare .9s cubic-bezier(.2, .8, .3, 1), ember-breathe 2.6s .9s ease-in-out infinite; }
@keyframes ember-breathe { 0%, 100% { transform: scale(.9); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes ember-flicker {
  0% { transform: scale(1, 1) skewX(0); } 12% { transform: scale(.94, 1.08) skewX(3deg); } 23% { transform: scale(1.04, .95) skewX(-2deg); }
  37% { transform: scale(.97, 1.1) skewX(1deg); } 52% { transform: scale(1.03, .97) skewX(-3deg); } 68% { transform: scale(.95, 1.06) skewX(2deg); }
  83% { transform: scale(1.02, .98) skewX(-1deg); } 100% { transform: scale(1, 1) skewX(0); }
}
@keyframes ember-ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes ember-flare { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(3.2); opacity: .9; } 100% { transform: scale(1); opacity: .8; } }

/* the dark lanterns warm as the flame comes near, and the one it waits at tries to catch */
.lamp { --near: 0; }
.is-room .lamp:not(.is-lit) .lamp__glow { animation: none; opacity: calc(var(--near) * .8); transition: opacity .25s; }
.lamp:not(.is-lit) .lamp__off { opacity: calc(1 - var(--near) * .32); transition: opacity .25s; }
.is-room .lamp.is-called:not(.is-lit) .lamp__glow { animation: lamp-catch 1.6s steps(1, end) infinite; }
@keyframes lamp-catch { 0% { opacity: .5; } 9% { opacity: .2; } 15% { opacity: .75; } 27% { opacity: .35; } 41% { opacity: .7; } 63% { opacity: .45; } 78% { opacity: .8; } 88% { opacity: .4; } }
.hero__pin.is-carry, .hero__pin.is-carry .lamp { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .ember { display: none; }
  .is-room .lamp:not(.is-lit) .lamp__glow { opacity: .3; }
}

/* ---------- sound ---------- */
.sound {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 .9rem/1 var(--body);
}
.sound__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.sound__bars i { width: 2.5px; height: 4px; border-radius: 2px; background: var(--amber); transition: height .4s var(--ease); }
.is-sound .sound__bars i { animation: eq 1.1s ease-in-out infinite alternate; }
.is-sound .sound__bars i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.is-sound .sound__bars i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
.is-sound .sound__bars i:nth-child(4) { animation-duration: .95s; animation-delay: -.2s; }
@keyframes eq { from { height: 3px; } to { height: 15px; } }
.sound:not([aria-pressed='true']) .sound__bars i:nth-child(1) { height: 5px; }
.sound:not([aria-pressed='true']) .sound__bars i:nth-child(2) { height: 9px; }
.sound:not([aria-pressed='true']) .sound__bars i:nth-child(3) { height: 6px; }
.sound:not([aria-pressed='true']) .sound__bars i:nth-child(4) { height: 11px; }
.sound:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 899px) {
  .sound { margin-left: auto; }
  .sound__label { font-size: .8rem; letter-spacing: .04em; }
}
@media (max-width: 380px) { .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (prefers-reduced-motion: reduce) { .is-sound .sound__bars i { animation: none; height: 10px; } }

/* ---------- the nav carries the lockup carved on the wall: an FS monogram over a wide geometric name ---------- */
.wordmark { gap: 14px; letter-spacing: 0; color: #f1e2c6; }
.wordmark span { width: auto; height: auto; background: none; margin: 0; }
.wordmark .wordmark__fs { position: relative; flex: none; width: 30px; height: 38px; font-family: var(--display); color: var(--amber); }
.wordmark .wordmark__fs b { position: absolute; left: 1px; top: -2px; font: 400 30px/1 var(--display); }
.wordmark .wordmark__fs i { position: absolute; left: 9px; top: 9px; font: italic 500 31px/1 var(--display); }
.wordmark .wordmark__name {
  display: flex; align-items: center; padding-left: 14px; border-left: 1px solid rgb(242 192 120 / .35);
  font: 500 .92rem/1 'Jost', 'Futura', 'Century Gothic', var(--body); letter-spacing: .36em; text-transform: uppercase; white-space: nowrap;
}
/* the wall's A has no crossbar: a V turned over, drawn in the same stroke */
.wordmark .wordmark__a { display: inline-block; transform: rotate(180deg) translateY(-.02em); margin-right: .36em; letter-spacing: 0; }
@media (max-width: 899px) {
  .wordmark { gap: 10px; }
  .wordmark .wordmark__fs { width: 26px; height: 32px; }
  .wordmark .wordmark__fs b { font-size: 26px; }
  .wordmark .wordmark__fs i { left: 8px; top: 8px; font-size: 26px; }
  .wordmark .wordmark__name { padding-left: 10px; font-size: .8rem; letter-spacing: .3em; }
  .wordmark .wordmark__a { margin-right: .3em; }
}
@media (max-width: 380px) { .wordmark .wordmark__name { letter-spacing: .22em; font-size: .74rem; } }

/* ---------- hero: the top runner's name sits between the nav and the platter, never under the nav ---------- */
@media (min-width: 900px) {
  .runner--roots .runner__cloth span { top: var(--rl, calc(var(--td) / 2 + 5vmin)); }
  .hero.is-tight .runner--roots .runner__cloth span { opacity: 0; }
}

/* ---------- full menu: the course you are in stays pinned at the top ---------- */
.course { --stick: var(--nav-h); }
.nav.is-away ~ main .course { --stick: 0px; }
.course h3 {
  position: sticky; top: var(--stick); z-index: 4; display: flex; align-items: center; gap: 14px; padding: 14px 0 12px; margin: -14px 0 0;
  background: rgb(15 30 21 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 100vmax rgb(15 30 21 / .94), 0 1px 0 100vmax rgb(203 214 184 / .14); clip-path: inset(0 -100vmax -1px);
  transition: top .6s var(--ease);
}
.course__n { font: 500 .72rem/1 var(--measure); letter-spacing: .08em; color: #8fa27f; font-style: normal; order: -1; min-width: 4.2em; }
.course__jump {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(203 214 184 / .35); background: none; color: #cbd6b8; font: 500 .8rem/1 var(--body); font-style: normal; letter-spacing: .04em;
}
.course__jump:hover { border-color: #eef0dd; color: #eef0dd; }
.course__jump svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (min-width: 900px) {
  .course h4 { position: sticky; top: calc(var(--stick) + 62px); z-index: 3; padding: 10px 0 8px; margin: 12px 0 0; background: rgb(15 30 21 / .9); box-shadow: 0 0 0 100vmax rgb(15 30 21 / .9); clip-path: inset(0 -100vmax); transition: top .6s var(--ease); }
}
/* on a phone the pinned course is one slim line; the sub-heads stay in the flow */
@media (max-width: 899px) {
  .course h3 { font-size: 1.2rem; padding: 10px 0 9px; gap: 10px; }
  .course__n { min-width: 3.6em; font-size: .66rem; }
  .course__jump { min-height: 32px; padding: 0 11px; font-size: .74rem; }
  .course__jump span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .course h4 { margin-top: 18px; }
}

/* the course index: a short sheet you can open from any pinned course */
.courses {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: none; max-height: 78svh; background: #13241a; color: #eef0dd;
  border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgb(0 0 0 / .5);
}
.courses::backdrop { background: rgb(8 14 10 / .55); backdrop-filter: blur(3px); }
.courses[open] { animation: sheet-up .45s var(--ease); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.courses__head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gut) 10px; }
.courses__head p { font: italic 500 1.5rem/1 var(--display); }
.courses__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(203 214 184 / .35); background: none; color: inherit; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.courses ol { list-style: none; margin: 0; padding: 0 var(--gut) 24px; display: grid; }
.courses li button {
  width: 100%; display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border: 0; border-bottom: 1px solid rgb(203 214 184 / .14);
  background: none; color: inherit; text-align: left; cursor: pointer; font: 500 1.12rem/1.2 var(--display);
}
.courses li button small { font: 500 .68rem/1 var(--measure); color: #8fa27f; min-width: 2.4em; }
.courses li button em { margin-left: auto; flex: none; white-space: nowrap; font: 400 .8rem/1 var(--body); color: #8fa27f; font-style: normal; }
.courses li button[aria-current='true'] { color: var(--amber); }
@media (min-width: 900px) {
  .courses { margin: calc(var(--nav-h) + 20px) var(--gut) auto auto; width: 420px; max-height: calc(100svh - var(--nav-h) - 60px); border-radius: 16px; box-shadow: 0 30px 80px rgb(0 0 0 / .55); }
  .courses ol { padding: 0 26px 22px; }
  .courses__head { padding: 18px 26px 10px; }
}

/* ---------- the doors: a brass knob on the seam, the monogram engraved on it ---------- */
.js .doors { animation-delay: 22s; }
.doors__handle {
  position: absolute; left: 50%; top: 56%; z-index: 3; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 18px;
  transition: opacity .5s, transform .8s var(--ease);
}
.knob { position: relative; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.knob:focus-visible { outline: 2px solid var(--glow); outline-offset: 8px; }
.knob__ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); overflow: visible; }
.knob__ring circle { fill: none; stroke: rgb(255 224 160 / .85); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--load, 0)); transition: stroke-dashoffset .6s ease-out; filter: drop-shadow(0 0 6px rgb(255 200 120 / .6)); }
.knob__rose {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 58%, rgb(60 36 14 / .55) 59%, transparent 63%),
    conic-gradient(from 30deg, #9c7034, #f2d596, #b0813d, #e7c47d, #8a5f26, #f0d18f, #a8783a, #e9c983, #9c7034);
  box-shadow: 0 24px 50px rgb(0 0 0 / .65), 0 4px 10px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 240 200 / .45), inset 0 -6px 14px rgb(70 40 10 / .5);
}
.knob__dome {
  position: absolute; inset: 21px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #fff4d2 0, #f0cd83 18%, #c8964a 46%, #8e6026 78%, #5e3c14 100%);
  box-shadow: 0 10px 18px rgb(0 0 0 / .55), inset 0 2px 3px rgb(255 248 220 / .8), inset 0 -8px 16px rgb(60 34 8 / .55);
  transition: transform .45s cubic-bezier(.5, 0, .2, 1);
}
.knob__dome::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgb(255 250 230 / .55) 50%, transparent 60%); transform: translateX(-70%); }
.doors.is-waiting .knob__dome::after { animation: knob-glint 3.2s ease-in-out 1s infinite; }
@keyframes knob-glint { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.knob__fs { position: relative; width: 44px; height: 54px; color: rgb(72 44 12 / .82); text-shadow: 0 1px 0 rgb(255 238 196 / .55), 0 -1px 0 rgb(40 22 4 / .35); }
.knob__fs b { position: absolute; left: 2px; top: -3px; font: 400 44px/1 var(--display); }
.knob__fs i { position: absolute; left: 13px; top: 12px; font: italic 500 45px/1 var(--display); }
.doors.is-waiting .knob { animation: knob-ask 2.8s ease-in-out infinite; }
@keyframes knob-ask { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.knob:hover .knob__dome { transform: rotate(-12deg); }
.doors.is-turning .knob__dome { transform: rotate(-80deg); }
.doors.is-turning .knob { animation: none; }
.doors__hint { display: grid; justify-items: center; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .8s var(--ease); }
.doors.is-waiting .doors__hint { opacity: 1; transform: none; }
.doors__hint span { font: 500 .74rem/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #f6e3bf; text-shadow: 0 2px 10px rgb(0 0 0 / .8); }
.doors__quiet { padding: 6px 10px; border: 0; background: none; color: rgb(246 227 191 / .7); font: italic 400 .95rem/1 var(--display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(246 227 191 / .35); }
.doors__quiet:hover { color: #f6e3bf; }
.doors.is-open .doors__handle { opacity: 0; transform: translate(-50%, -50%) scale(.9); pointer-events: none; }
@media (max-width: 899px) {
  .knob { width: 112px; height: 112px; }
  .knob__dome { inset: 18px; }
  .knob__fs { transform: scale(.85); }
  .doors__handle { top: 77%; }
}

/* ---------- quiet art behind the flat stretches: palm fronds like the carved wall, a jaali lattice, and a fine grain ---------- */
.story { overflow-x: clip; }
.story__outro { position: relative; isolation: isolate; }
.story__outro::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: url('../assets/img/art/fronds.svg') 100% 60% / cover no-repeat; opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%); mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
}
.foot { position: relative; isolation: isolate; }
.foot::after { content: ''; position: absolute; inset: 26px 0 0; z-index: -1; background: url('../assets/img/art/jaali.svg') 50% 0 / 96px; opacity: .07; pointer-events: none; }
.room::before { content: ''; position: absolute; inset: 0; background: url('../assets/img/art/jaali.svg') 0 0 / 120px; opacity: .045; pointer-events: none; }
.walk__head, .menu__head { position: relative; }
/* film grain over the whole page: one still tile, never repainted */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 85; pointer-events: none; opacity: .05;
  background: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the up-and-down runners are narrow: their names are sized to sit inside the woven borders */
.runner--roots .runner__cloth span, .runner--discovery .runner__cloth span { font-size: min(clamp(1.25rem, 4.2vmin, 3rem), calc(var(--rw) * .155)); }

/* ---------- the knob, refined: dark bronze rosette with a knurled edge, a satin-turned brass knob, the monogram engraved ---------- */
.knob { width: 156px; height: 156px; }
.doors.is-waiting .knob { animation: none; }
.knob__ring { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
.knob__ring circle { stroke: rgb(232 205 150 / .75); stroke-width: .8; filter: none; }
.knob__rose {
  background:
    radial-gradient(circle, transparent 0 60%, rgb(0 0 0 / .55) 61.5%, transparent 67%),
    repeating-conic-gradient(rgb(255 236 200 / .14) 0 .7deg, transparent .7deg 3.6deg),
    radial-gradient(circle at 38% 28%, #4b3521, #2a1b0e 55%, #170e07 100%);
  box-shadow:
    0 34px 70px rgb(0 0 0 / .7), 0 8px 16px rgb(0 0 0 / .55),
    inset 0 0 0 1px rgb(236 206 150 / .6), inset 0 0 0 5px rgb(18 11 5 / .65), inset 0 0 0 6px rgb(236 206 150 / .22), inset 0 2px 6px rgb(255 230 180 / .12);
}
.knob__dome {
  inset: 28px;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgb(255 255 255 / .045) 0 1px, transparent 1px 2.6px),
    radial-gradient(120% 95% at 30% 20%, #f7e7bf 0%, #dcbb7d 24%, #ae8545 56%, #6e4c20 100%);
  box-shadow:
    0 14px 24px rgb(0 0 0 / .6), 0 2px 4px rgb(0 0 0 / .5),
    inset 0 1px 1px rgb(255 248 225 / .9), inset 0 -12px 20px rgb(50 30 8 / .45), inset 0 0 0 1px rgb(110 76 30 / .7);
  transition: transform .6s cubic-bezier(.5, 0, .2, 1);
}
.knob__dome::after { background: linear-gradient(115deg, transparent 42%, rgb(255 250 232 / .38) 50%, transparent 58%); }
.doors.is-waiting .knob__dome::after { animation: knob-glint 4.6s ease-in-out 1.2s infinite; }
.knob__fs { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: rgb(70 45 14 / .86);
  box-shadow: inset 0 0 0 1px rgb(80 52 18 / .38), 0 1px 0 rgb(255 240 205 / .35); }
.knob__fs b { left: 9px; top: 4px; font: 400 30px/1 var(--display); }
.knob__fs i { left: 16px; top: 12px; font: italic 500 30px/1 var(--display); }
.knob:hover .knob__dome { transform: rotate(-10deg); }
.doors.is-turning .knob__dome { transform: rotate(-85deg); }
.doors__hint span { display: flex; align-items: center; gap: 12px; font: 500 .68rem/1 var(--body); letter-spacing: .36em; color: rgb(246 227 191 / .9); }
.doors__hint span::before, .doors__hint span::after { content: ''; width: 26px; height: 1px; background: rgb(232 205 150 / .55); }
.doors__quiet { font-size: .9rem; color: rgb(246 227 191 / .6); }
@media (max-width: 899px) {
  .knob { width: 124px; height: 124px; }
  .knob__dome { inset: 22px; }
  .knob__fs { transform: scale(.82); }
}

/* ---------- the film: a full-screen room of its own, above the nav ---------- */
.hero__film.film { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: #050302; opacity: 0; transition: opacity .6s; }
.hero__film.film[hidden] { display: none; }
.is-film .hero__film.film { opacity: 1; }
.film video { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; background: #050302; }
.film .film-close { position: absolute; top: calc(18px + env(safe-area-inset-top)); right: calc(18px + env(safe-area-inset-right)); bottom: auto; z-index: 2; }
html.is-film { overflow: hidden; }

/* ---------- hero dive: a round window scaled on the GPU, the room counter-scaled inside it ---------- */
.hero__iris { position: absolute; z-index: 1; border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; will-change: transform; transform: scale(0.0005); visibility: hidden; }
.hero__iris > .hero__room { position: absolute; inset: auto; clip-path: none; will-change: transform; }

/* dust motes: compositor-only, no per-frame drawing */
.hero__dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s; }
.hero.is-open .hero__dust { opacity: 1; }
.hero__dust i {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff3d4 0, rgb(255 220 160 / .6) 45%, rgb(255 220 160 / 0) 72%);
  will-change: transform, opacity; animation: mote var(--d) linear var(--dl) infinite;
}
@keyframes mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: var(--a); }
  50% { opacity: calc(var(--a) * .55); }
  85% { opacity: var(--a); }
  100% { transform: translate3d(var(--dx), -36vh, 0); opacity: 0; }
}
.hero:not(.is-open) .hero__dust { visibility: hidden; transition: none; }
.hero:not(.is-open) .hero__dust i, .hero.is-asleep .hero__dust i { animation-play-state: paused; }
.hero.is-diving .hero__thali-img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__dust { display: none; } }
/* the lanterns' breathing waits until the circle has finished opening */
.hero:not(.is-open) .lamp__glow { animation-play-state: paused; }