/* Work Sans + Caveat, self-hosted (see README: "Fonts"). */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/caveat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('assets/fonts/work-sans.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* VERGER — immersive client demo */

:root{
  --paper:#f3ede1;
  --paper-2:#e9e1d1;
  --ink:#22201c;
  --ink-soft:#5d574d;
  --accent:#7d9280;
  --shadow:0 8px 30px rgba(30,26,20,.16);
  --shadow-lg:0 18px 60px rgba(30,26,20,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ui:'Work Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --stage-h:100vh;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--ui);
  background:#141210;color:var(--ink);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------------------------------------------------------------- screens */
.screen{position:fixed;inset:0;display:none;isolation:isolate}
.screen.is-on{display:block}
.screen[data-fade]{transition:opacity .5s var(--ease)}

/* ------------------------------------------------------------------- gate */
#gate{
  display:none;place-items:center;
  background:#1b1815;
}
#gate.is-on{display:grid}
#gate .gate-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.62) saturate(.85);will-change:transform;
}
#gate .gate-in{position:relative;text-align:center;color:#f6f1e6;padding:24px;
  will-change:transform}
.wordmark{
  font-weight:700;letter-spacing:.34em;text-indent:.34em;
  font-size:clamp(30px,7vw,64px);line-height:1;
}
.wordmark-sub{
  margin-top:16px;font-size:clamp(9px,1.5vw,11px);font-weight:500;
  letter-spacing:.4em;text-indent:.4em;opacity:.72;
}
.gate-rule{width:52px;height:1px;background:currentColor;opacity:.4;margin:34px auto}
.gate-note{
  max-width:34ch;margin:0 auto 34px;font-size:13.5px;line-height:1.7;
  opacity:.78;font-weight:300;
}

/* ------------------------------------------------------------------ chips */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  background:#fdfbf6;color:var(--ink);
  padding:15px 26px;border-radius:3px;
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn--ghost{background:rgba(253,251,246,.14);color:#f6f1e6;
  box-shadow:inset 0 0 0 1px rgba(246,241,230,.4)}
.btn--ghost:hover{background:rgba(253,251,246,.24)}

.chip{
  position:absolute;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(253,251,246,.94);border-radius:3px;
  padding:12px 15px;box-shadow:var(--shadow);
  font-size:12px;font-weight:600;letter-spacing:.12em;
}
.chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.chip--btn{cursor:pointer;transition:transform .3s var(--ease)}
.chip--btn:hover{transform:translateY(-2px)}

/* --------------------------------------------------------------- chapters */
/* The aperture is placed in percentages of the EXTERIOR IMAGE, so the image
   must have its own box — a cover-cropped background would slide the window
   out from under it on any viewport that is not 16:9. */
.ext-bleed{position:absolute;inset:-6%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.42) saturate(.7);transition:background-image .6s}
.ext-clip{position:absolute;left:0;right:0;top:50%;translate:0 -50%;overflow:hidden}
.ext-strip{position:absolute;left:50%;display:flex;will-change:transform}
.ext-strip.is-gliding{transition:transform 1.15s cubic-bezier(.62,.02,.24,1)}
.ext-panel{position:relative;flex:none;overflow:hidden}
#chapter .ext{position:absolute;inset:0;background-size:100% 100%;will-change:transform}
/* the three facades are separate photographs — soften the joins into a
   shadowed recess so the dolly reads as architecture, not a cut */
.ext-panel::before,.ext-panel::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.ext-panel::before{left:0;background:linear-gradient(to right,rgba(48,40,28,.42),transparent)}
.ext-panel::after{right:0;background:linear-gradient(to left,rgba(48,40,28,.42),transparent)}
#chapter .ext-shade{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(28,24,18,.34))}
.aperture{
  position:absolute;overflow:hidden;background:#000;
}
.aperture img{
  position:absolute;top:50%;left:50%;
  transform:translate(calc(-50% + var(--apx,0px)),calc(-50% + var(--apy,0px)));
  height:132%;width:auto;max-width:none;
  filter:brightness(.94);will-change:transform;
}
.aperture::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 8px 26px rgba(20,16,10,.55);
}
.chapter-head{
  position:absolute;left:0;right:0;top:clamp(24px,6vh,58px);
  transition:opacity .34s var(--ease);
  text-align:center;color:#fff;z-index:20;
  text-shadow:0 2px 22px rgba(30,24,14,.45);
  pointer-events:none;padding:0 20px;
}
.chapter-eyebrow{font-size:11px;font-weight:600;letter-spacing:.42em;
  text-indent:.42em;opacity:.9}
.chapter-title{margin-top:9px;font-size:clamp(26px,4.4vw,50px);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.chapter-foot{position:absolute;left:0;right:0;bottom:clamp(26px,7vh,60px);
  display:grid;place-items:center;z-index:20}
.arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:20;
  width:54px;height:54px;border-radius:50%;
  background:#fdfbf6;display:grid;place-items:center;
  box-shadow:var(--shadow);transition:transform .35s var(--ease),opacity .3s
}
.arrow svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{transform:scale(1.07)}
.arrow[disabled]{opacity:.32;pointer-events:none}
.arrow--prev{left:clamp(14px,3vw,44px)}
.arrow--next{right:clamp(14px,3vw,44px)}
.chapter-done{
  position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:50%;
  background:var(--ink);display:none;place-items:center
}
.chapter-done svg{width:13px;height:13px;fill:none;stroke:#fdfbf6;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.is-complete .chapter-done{display:grid}

/* ------------------------------------------------------------------- room */
#room{background:#100e0c}
.stage{position:absolute;inset:0;overflow:hidden}
.stage-bleed{
  position:absolute;inset:-6%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.5) saturate(.7);
}
.stage-box{
  position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  height:var(--stage-h);overflow:hidden;
}
#world{
  position:absolute;top:0;left:50%;height:100%;
  transform:translateX(-50%);will-change:transform;
}
#world.is-gliding{transition:transform 1.05s cubic-bezier(.3,.02,.2,1)}
#hotspots{transition:opacity .45s var(--ease)}
#hotspots.is-hidden{opacity:0;pointer-events:none}
#plate{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;backface-visibility:hidden;
}
.stage-fg{position:absolute;pointer-events:none;will-change:transform}
.stage-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%,transparent 52%,rgba(26,20,12,.42))}
.gobo{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:multiply;
  opacity:.5;filter:blur(26px)}
.gobo i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,rgba(96,86,64,.55),transparent 72%)}

#grain{position:fixed;inset:0;pointer-events:none;z-index:60;
  mix-blend-mode:overlay;opacity:.32}

.room-foot{position:absolute;left:0;right:0;bottom:clamp(20px,4.5vh,42px);
  display:grid;place-items:center;z-index:40}

/* --------------------------------------------------------------- hotspots */
.hs{
  position:absolute;z-index:35;width:64px;height:64px;
  translate:-50% -50%;display:grid;place-items:center;
  transition:opacity .4s var(--ease);
}
.hs-blob{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(253,251,246,.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 6px 26px rgba(40,32,20,.32);
  animation:pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(.82);opacity:.5}
  50%{transform:scale(1.06);opacity:.95}
}
.hs-dot{
  position:relative;width:42px;height:42px;border-radius:50%;
  background:#fdfbf6;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(30,24,16,.45),0 1px 3px rgba(30,24,16,.3);
  transition:transform .35s var(--ease);
}
.hs:hover .hs-dot{transform:scale(1.12)}
.hs-dot svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.hs.is-done .hs-blob{animation:none;opacity:.28}
.hs.is-done .hs-dot{background:var(--ink)}
.hs.is-done .hs-dot svg{stroke:#fdfbf6;stroke-width:2.2}
.hs-ring{position:absolute;inset:2px;transform:rotate(-90deg);pointer-events:none}
.hs-ring circle{fill:none;stroke:#fdfbf6;stroke-width:2.5;
  stroke-linecap:round;opacity:.95}

/* ------------------------------------------------------------------ sheet */
.sheet{
  position:fixed;inset:0;z-index:70;display:none;
  background:rgba(22,18,13,.55);backdrop-filter:blur(7px);
}
.sheet.is-on{display:grid;place-items:center}
.sheet-card{
  position:relative;width:min(1020px,92vw);max-height:88vh;
  background:var(--paper);border-radius:4px;box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  animation:rise .55s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.985)}}
.sheet-card--solo{grid-template-columns:1fr;max-width:560px}
.sheet-media{position:relative;overflow:hidden;background:var(--paper-2);min-height:280px}
.sheet-media img{width:100%;height:100%;object-fit:cover}
.sheet-body{padding:clamp(28px,3.4vw,50px);overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center}
.sheet-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.34em;
  text-indent:.34em;text-transform:uppercase;color:var(--accent)}
.sheet-title{margin-top:14px;font-size:clamp(24px,2.6vw,34px);font-weight:700;
  letter-spacing:.01em;line-height:1.12}
.sheet-text{margin-top:18px;font-size:14.5px;line-height:1.78;color:var(--ink-soft);
  font-weight:300;max-width:44ch}
.sheet-line{
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(34,32,28,.14);
  font-family:var(--hand);font-size:26px;line-height:1.35;
}
.sheet-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sheet-close{
  position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;
  border-radius:50%;background:rgba(253,251,246,.9);display:grid;place-items:center;
  box-shadow:var(--shadow);transition:transform .3s var(--ease)
}
.sheet-close:hover{transform:rotate(90deg)}
.sheet-close svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round}

/* price row — the commerce layer, present on every object view */
.price-row{
  margin-top:24px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid rgba(34,32,28,.14);
}
.price{font-size:26px;font-weight:600;letter-spacing:.01em}
.price-meta{font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.price-note{margin-top:9px;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);
  font-weight:300;font-style:italic}
.btn--reserve{background:var(--ink);color:var(--paper)}
.btn--reserve.is-on{background:var(--accent);color:#fff}

/* hold-to-act */
.hold{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border-radius:3px;background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;user-select:none;touch-action:none;
}
.hold-fill{position:absolute;inset:0;background:var(--accent);
  transform-origin:left;transform:scaleX(0);pointer-events:none}
.hold span{position:relative}

/* texture scrub */
.scrub{position:absolute;inset:0;cursor:ew-resize;touch-action:none}
.scrub-top{position:absolute;inset:0;background:var(--paper-2);
  display:grid;place-items:center}
.scrub-top img{filter:grayscale(1) brightness(1.06) contrast(.7);opacity:.5}
.scrub-hint{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3;
  background:rgba(253,251,246,.92);padding:9px 16px;border-radius:99px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:var(--shadow);white-space:nowrap;transition:opacity .4s
}

/* gallery */
.gal{position:absolute;inset:0;background:var(--paper-2)}
.gal-frame{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.gal-frame.is-on{opacity:1}
.gal-frame img{width:100%;height:100%;object-fit:cover}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 24px 20px;
  background:linear-gradient(transparent,rgba(20,16,10,.72));
  color:#f6f1e6;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;text-align:center;
}
.gal-nav{position:absolute;left:0;right:0;bottom:14px;z-index:4;
  display:flex;gap:7px;justify-content:center}
.gal-nav i{width:22px;height:2px;background:rgba(253,251,246,.45);cursor:pointer;
  transition:background .3s}
.gal-nav i.is-on{background:#fdfbf6}

/* ------------------------------------------------------------- formulary */
#formulary{background:rgba(22,18,13,.62);backdrop-filter:blur(7px)}
.form-card{
  position:relative;width:min(880px,93vw);max-height:90vh;overflow-y:auto;
  background:var(--paper);background-size:cover;border-radius:3px;
  box-shadow:var(--shadow-lg);padding:clamp(30px,4.5vw,64px);
  animation:rise .55s var(--ease) both;
}
.form-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap}
.form-title{font-size:11px;font-weight:600;letter-spacing:.36em;text-transform:uppercase}
.form-count{font-family:var(--hand);font-size:30px;line-height:1}
.form-list{margin-top:34px;display:grid;gap:22px}
.form-item{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.form-num{font-family:var(--hand);font-size:26px;line-height:1.1;opacity:.5}
.form-line{font-family:var(--hand);font-size:clamp(23px,2.7vw,31px);line-height:1.3;
  border-bottom:1px solid rgba(34,32,28,.2);padding-bottom:9px}
.form-item.is-locked .form-line{
  color:transparent;background:rgba(34,32,28,.055);border-radius:2px;
  min-height:34px;user-select:none;
}
.form-foot{margin-top:38px;padding-top:24px;border-top:1px solid rgba(34,32,28,.14);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form-hint{font-size:12.5px;color:var(--ink-soft);font-weight:300;line-height:1.6}

/* -------------------------------------------------------------------- end */
#end{background:#1b1815;overflow-y:auto}
#end .end-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.4) saturate(.8)}
.end-wrap{position:relative;min-height:100%;display:grid;place-items:center;
  padding:clamp(40px,7vh,90px) 20px}
.end-card{width:min(940px,94vw);background:var(--paper);border-radius:4px;
  box-shadow:var(--shadow-lg);padding:clamp(30px,4.4vw,64px)}
.end-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--accent);text-align:center}
.end-title{margin-top:16px;text-align:center;font-size:clamp(34px,6vw,64px);
  font-weight:700;letter-spacing:.3em;text-indent:.3em;line-height:1}
.end-text{margin:18px auto 0;max-width:46ch;text-align:center;font-size:14px;
  line-height:1.8;color:var(--ink-soft);font-weight:300}
.end-formula{margin-top:40px;padding:28px 0;border-block:1px solid rgba(34,32,28,.14);
  display:grid;gap:14px}
.end-formula p{font-family:var(--hand);font-size:clamp(21px,2.5vw,28px);line-height:1.3}
.end-shelf{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.piece{background:var(--paper-2);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column}
.piece img{width:100%;aspect-ratio:4/5;object-fit:cover}
.piece-b{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.piece-n{font-size:14.5px;font-weight:600}
.piece-m{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}
.piece-p{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.piece-p b{font-size:17px;font-weight:600}
.piece-add{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 13px;border:1px solid rgba(34,32,28,.3);border-radius:2px;
  transition:background .3s,color .3s}
.piece-add:hover{background:var(--ink);color:var(--paper)}
.piece-add.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.end-order{margin-top:34px;padding:26px;background:var(--ink);color:var(--paper);
  border-radius:3px;display:flex;justify-content:space-between;align-items:center;
  gap:22px;flex-wrap:wrap}
.end-order-l{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  opacity:.7}
.end-order-t{margin-top:7px;font-size:27px;font-weight:600}
.end-order .btn{background:var(--paper)}
.end-foot{margin-top:26px;text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.end-foot a{color:inherit}

/* ------------------------------------------------------------------ toast */
#toast{
  position:fixed;left:50%;bottom:clamp(84px,13vh,128px);translate:-50% 0;z-index:65;
  width:min(400px,88vw);background:var(--paper);border-radius:3px;
  box-shadow:var(--shadow-lg);padding:22px 24px;text-align:center;
  display:none;
}
#toast.is-on{display:block;animation:rise .5s var(--ease) both}
.toast-badge{width:56px;height:56px;border-radius:50%;background:#fdfbf6;
  margin:0 auto 14px;display:grid;place-items:center;box-shadow:var(--shadow)}
.toast-badge svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.toast-t{font-size:15px;line-height:1.55;font-weight:300}
.toast-t b{font-weight:600;color:var(--accent)}
#toast .btn{margin-top:18px}

/* ------------------------------------------------------------------- wipe */
#wipe{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(245,239,227,.55),rgba(245,239,227,.55)),
                   url("assets/paper/sheet.webp");
  background-size:auto,cover;background-position:center;
  clip-path:polygon(0 -40%,100% -40%,100% -40%,0 -40%);
}

/* ----------------------------------------------------------------- loader */
#loader{position:fixed;inset:0;z-index:120;background:#1b1815;display:grid;
  place-items:center;transition:opacity .7s var(--ease)}
#loader.is-off{opacity:0;pointer-events:none}
.load-in{text-align:center;color:#f6f1e6}
.load-bar{width:min(220px,52vw);height:1px;background:rgba(246,241,230,.2);
  margin:26px auto 0;overflow:hidden}
.load-bar i{display:block;height:100%;width:0;background:#f6f1e6;
  transition:width .3s linear}

/* --------------------------------------------------------------- helpers */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dev-grid{position:absolute;inset:0;z-index:80;pointer-events:none;display:none;
  background-image:linear-gradient(to right,rgba(255,0,80,.35) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(255,0,80,.35) 1px,transparent 1px);
  background-size:10% 10%}
body.dev .dev-grid{display:block}
#devout{position:fixed;left:10px;bottom:10px;z-index:100;background:#000;color:#0f0;
  font:11px monospace;padding:6px 9px;display:none}
body.dev #devout{display:block}

/* ------------------------------------------------------------------ ≤900 */
@media (max-width:900px){
  .sheet-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    max-width:520px;max-height:86vh}
  .sheet-media{min-height:180px;max-height:30vh}
  .sheet-body{justify-content:flex-start}
  .end-shelf{grid-template-columns:1fr}
  .piece{flex-direction:row}
  .piece img{width:118px;aspect-ratio:4/5;flex:none}
  .arrow{width:46px;height:46px}
  .hs{width:56px;height:56px}
  .hs-dot{width:34px;height:34px}
  .btn{padding:14px 20px;font-size:11.5px}
  .end-order{flex-direction:column;align-items:stretch;text-align:center}
  .end-order .btn{justify-content:center}
}
@media (max-width:560px){
  .chip{padding:10px 12px;font-size:11px}
  .form-item{grid-template-columns:26px 1fr;gap:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* room title — fills the letterbox band on mobile */
.room-title{
  position:absolute;left:0;right:0;z-index:40;text-align:center;
  color:#efe7d8;pointer-events:none;display:none;padding:0 20px;
}
.room-title span{font-size:10px;font-weight:600;letter-spacing:.4em;
  text-indent:.4em;opacity:.62;display:block}
.room-title b{display:block;margin-top:7px;font-size:20px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
@media (max-width:860px){.room-title{display:block}}

/* ------------------------------------------------------------ ext inner */
.ext-inner{position:absolute;inset:0;will-change:transform}

/* ------------------------------------------------------------------ book */
/* A real openable book: two paper pages and a leaf that rotates about the
   spine. Used for the notebook-flavoured views and for the formulary. */
.book-wrap{
  position:relative;display:grid;place-items:center;
  width:min(1040px,95vw);
}
.book{position:relative;width:100%;animation:rise .6s var(--ease) both}
.book-inner{
  position:relative;width:100%;aspect-ratio:1.46/1;
  perspective:2800px;perspective-origin:50% 46%;
}
.book-page,.book-face{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(247,241,229,.66),rgba(247,241,229,.66)),
                   url("assets/paper/sheet.webp");
  background-size:auto,168% 168%;
  background-repeat:no-repeat;
  background-position:center,58% 42%;
  overflow:hidden;
}
/* vary the sheet so a spread does not read as one mirrored texture */
.book-page--l{background-position:center,32% 60%}
.book-face--b{background-position:center,74% 30%}
.book-page{position:absolute;top:0;height:100%;width:50%}
.book-page--l{left:0;border-radius:4px 0 0 4px;
  box-shadow:inset -26px 0 40px -26px rgba(40,32,20,.6),-14px 16px 40px rgba(20,16,10,.34)}
.book-page--r{right:0;border-radius:0 4px 4px 0;
  box-shadow:inset 26px 0 40px -26px rgba(40,32,20,.6),14px 16px 40px rgba(20,16,10,.34)}
.book-spine{
  position:absolute;top:0;bottom:0;left:50%;width:34px;translate:-50% 0;z-index:4;
  pointer-events:none;
  background:linear-gradient(to right,rgba(40,32,20,.02),rgba(40,32,20,.24),
    rgba(40,32,20,.02));
}
.book-leaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  z-index:6;pointer-events:none;opacity:0;
}
.book-leaf.is-live{opacity:1}
.book-leaf.is-turning{transition:transform .86s cubic-bezier(.44,.05,.28,1)}
.book-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:0 4px 4px 0;
  box-shadow:14px 16px 40px rgba(20,16,10,.34);
}
.book-face--b{transform:rotateY(180deg);border-radius:4px 0 0 4px}

/* page content */
.bp{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:clamp(22px,3.2vw,46px);overflow:hidden}
.bp--img{padding:0}
.bp-img{position:absolute;inset:0}
.bp-img img{width:100%;height:100%;object-fit:cover}
.bp-tape{position:absolute;width:104px;height:30px;background:rgba(233,225,205,.72);
  box-shadow:0 1px 4px rgba(40,32,20,.22);z-index:2}
.bp-tape--a{top:16px;left:-24px;rotate:-38deg}
.bp-tape--b{bottom:26px;right:-26px;rotate:-32deg}
.bp-eyebrow{font-size:10px;font-weight:600;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--accent)}
.bp-title{margin-top:12px;font-size:clamp(21px,2.4vw,31px);font-weight:700;
  line-height:1.14;color:#1d1b17}
.bp-text{margin-top:15px;font-size:14.5px;line-height:1.76;color:#4a453c;
  font-weight:400}
.bp-hand{font-family:var(--hand);font-size:clamp(22px,2.6vw,30px);line-height:1.36;
  color:#241f19}
.bp-rule{height:1px;background:rgba(34,32,28,.16);margin:18px 0}
.bp-foot{margin-top:auto;padding-top:16px}
.bp-num{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.28em;color:rgba(34,32,28,.4)}
.bp-lines{display:grid;gap:16px;margin-top:6px}
.bp-line{border-bottom:1px solid rgba(34,32,28,.2);padding-bottom:7px;
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:end}
.bp-line i{font-family:var(--hand);font-size:22px;opacity:.5;font-style:normal}
.bp-line.is-locked span{color:transparent;background:rgba(34,32,28,.055);
  border-radius:2px;min-height:26px;display:block}

.book-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:9;
  width:50px;height:50px;border-radius:50%;background:#fdfbf6;
  display:grid;place-items:center;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),opacity .3s;
}
.book-nav svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.book-nav:hover{transform:scale(1.08)}
.book-nav[disabled]{opacity:.26;pointer-events:none}
.book-nav--prev{left:clamp(-60px,-4vw,-14px)}
.book-nav--next{right:clamp(-60px,-4vw,-14px)}
.book-close{
  position:absolute;top:-52px;right:0;z-index:9;width:40px;height:40px;
  border-radius:50%;background:rgba(253,251,246,.92);display:grid;place-items:center;
  box-shadow:var(--shadow);transition:transform .3s var(--ease)
}
.book-close:hover{transform:rotate(90deg)}
.book-close svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round}

@media (max-width:820px){
  .book-wrap{width:min(440px,90vw)}
  .book-inner{aspect-ratio:.78/1;perspective:1600px}
  .book-page--l{display:none}
  .book-page--r{width:100%;border-radius:4px}
  .book-leaf{left:0;width:100%}
  .book-spine{display:none}
  .book-nav--prev{left:-8px}
  .book-nav--next{right:-8px}
  .book-nav{width:42px;height:42px;background:rgba(253,251,246,.96)}
}

.book-host{display:contents}
.bp--photo{padding:clamp(24px,3vw,42px)}
.bp-photo{position:relative;flex:1;min-height:0;
  box-shadow:0 10px 26px rgba(30,24,16,.26)}
.bp-photo img{width:100%;height:100%;object-fit:cover}
.bp-cap{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center}
.bp-price{margin-top:auto;padding-top:18px;border-top:1px solid rgba(34,32,28,.16)}
.bp-price .price{font-size:24px}
.bp-price .btn{margin-top:14px}

/* ==========================================================================
   PHONE PASS
   A phone is not a narrow desktop. There is no hover, the pointer is a
   fingertip rather than a 1px cursor, the notch and the home indicator eat
   the corners, and the URL bar changes the viewport height while you use it.
   Everything below exists for that, and is appended so it wins the cascade.
   ========================================================================== */

:root{
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --tap:46px;                       /* every control clears a fingertip */
}

/* the stage owns its gesture — no browser pan/zoom stealing the drag */
.stage{touch-action:none}
.book-inner{touch-action:none}

/* a panel taller than the screen still has to be reachable */
.sheet.is-on,#formulary.is-on{overflow:auto;padding:10px}

/* ------------------------------------------------------------ safe areas */
/* These were inline in the markup, which beat every stylesheet rule and so
   could never be inset. They live here now. */
#counter{top:calc(var(--sat) + clamp(14px,2.4vh,26px));
         left:calc(var(--sal) + clamp(14px,3vw,32px))}
#openForm{top:calc(var(--sat) + clamp(14px,2.4vh,26px));
          right:calc(var(--sar) + clamp(14px,3vw,32px))}
#sound{bottom:calc(var(--sab) + clamp(14px,2.4vh,26px));
       right:calc(var(--sar) + clamp(14px,3vw,32px))}
.room-foot{bottom:calc(var(--sab) + clamp(20px,4.5vh,42px))}
.chapter-foot{bottom:calc(var(--sab) + clamp(26px,7vh,60px))}
.arrow--prev{left:calc(var(--sal) + clamp(14px,3vw,44px))}
.arrow--next{right:calc(var(--sar) + clamp(14px,3vw,44px))}
#toast{bottom:calc(var(--sab) + clamp(92px,13vh,128px))}
.end-wrap{padding:calc(clamp(40px,7vh,90px) + var(--sat)) 20px
                  calc(clamp(40px,7vh,90px) + var(--sab))}

/* --------------------------------------------------------- touch targets */
@media (pointer:coarse){
  .btn{min-height:var(--tap)}
  .chip{min-height:var(--tap);padding:0 15px}
  .chip--btn{justify-content:center;min-width:var(--tap)}
  .sheet-close,.book-close{width:var(--tap);height:var(--tap)}
  .book-nav{width:48px;height:48px}
  .arrow{width:52px;height:52px}
  .hs{width:62px;height:62px}
  .hs-dot{width:38px;height:38px}
  .hs-dot svg{width:21px;height:21px}
  .hold{min-height:52px}
  .piece-add{min-height:var(--tap);display:inline-flex;align-items:center}
  .btn--reserve{min-height:var(--tap)}
  .gal-nav{bottom:10px}
  .gal-nav i{height:4px;width:26px;padding:10px 0;background-clip:content-box}
}

/* ------------------------------------------------------------- the room */
/* On a phone the plate is now shown FULL BLEED and panned, instead of
   floating as a letterboxed strip in a field of grey. The chrome therefore
   sits on the photograph, so it gets its own scrims to stay legible. */
.room-scrim{position:absolute;left:0;right:0;z-index:38;pointer-events:none;display:none}
.room-scrim--t{top:0;height:200px;
  background:linear-gradient(rgba(18,15,11,.66),rgba(18,15,11,.26) 48%,transparent)}
.room-scrim--b{bottom:0;height:240px;
  background:linear-gradient(transparent,rgba(18,15,11,.32) 44%,rgba(18,15,11,.74))}
body.is-phone .room-scrim{display:block}
/* nothing shows through a full-bleed plate, so skip the 38px blur entirely */
body.is-phone .stage-bleed{display:none}
body.is-phone .stage-vig{
  background:radial-gradient(120% 78% at 50% 44%,transparent 56%,rgba(26,20,12,.5))}
body.is-phone .room-title{display:block;top:calc(var(--sat) + clamp(66px,8.4vh,92px));
  bottom:auto}
body.is-phone .room-title span{opacity:.72}
body.is-phone .room-title b{font-size:17px;margin-top:5px}

/* look left / right — the pan gesture, made visible and tappable */
.look{
  position:absolute;top:50%;translate:0 -50%;z-index:42;
  width:46px;height:66px;display:none;place-items:center;
  background:rgba(253,251,246,.9);border-radius:3px;
  box-shadow:var(--shadow);transition:opacity .3s var(--ease);
}
.look.is-on{display:grid}
.look svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.look[disabled]{opacity:0;pointer-events:none}
.look--prev{left:calc(var(--sal) + 8px)}
.look--next{right:calc(var(--sar) + 8px)}
/* a slow pulse while something undiscovered is still that way */
.look.has-spot::after{
  content:'';position:absolute;inset:-5px;border-radius:5px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(253,251,246,.6);
  animation:pulse 3.2s var(--ease) infinite;
}

/* the drag hint. Setting `top` inline while the class set `bottom` once
   stretched this pill into a 212px blob, so it owns both edges here. */
.look-hint{
  position:absolute;left:50%;translate:-50% 0;top:auto;
  bottom:calc(var(--sab) + clamp(78px,12vh,104px));z-index:45;
}

/* ---------------------------------------------------------------- books */
/* Size the book from whichever constraint is tighter. Sizing from width
   alone produced a 549px-tall book inside a 390px-tall landscape viewport. */
@media (max-width:820px) and (orientation:portrait){
  .book-wrap{width:min(440px,90vw,calc((100svh - 220px) * .78))}
}
/* a landscape phone has the width for a proper spread, so give the <=820px
   single-page rules their two-page behaviour back */
@media (max-width:820px) and (orientation:landscape){
  .book-inner{aspect-ratio:1.46/1;perspective:2400px}
  .book-page--l{display:block}
  .book-page--r{width:50%;border-radius:0 4px 4px 0}
  .book-leaf{left:50%;width:50%}
  .book-spine{display:block}
}
@media (orientation:landscape) and (max-height:620px){
  .book-wrap{width:min(1040px,94vw,calc((100svh - 90px) * 1.46))}
}

.book-pager{
  position:absolute;left:50%;translate:-50% 0;bottom:-44px;z-index:9;
  font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1;
  color:rgba(246,241,230,.7);display:none;white-space:nowrap;
}
@media (pointer:coarse){
  .book-pager{display:block}
  /* arrows under the book rather than over the page, where a thumb lands */
  .book-nav{top:auto;bottom:-58px;translate:0 0;background:rgba(253,251,246,.96)}
  .book-nav--prev{left:calc(50% - 76px);right:auto}
  .book-nav--next{right:calc(50% - 76px);left:auto}
  /* the close button is easier to hit parked in the corner of the screen */
  .book-close{position:fixed;top:calc(var(--sat) + 12px);
    right:calc(var(--sar) + 12px);background:rgba(253,251,246,.96)}
}
@media (pointer:coarse) and (orientation:landscape){
  .book-nav{top:50%;bottom:auto;translate:0 -50%}
  .book-nav--prev{left:-56px;right:auto}
  .book-nav--next{right:-56px;left:auto}
  .book-pager{bottom:-28px}
}

/* --------------------------------------------------------- panels, perf */
/* backdrop-filter over a full-screen blend canvas is the single most
   expensive thing on the page; a phone gets a plain scrim instead. */
@media (max-width:900px){
  .sheet,#formulary{backdrop-filter:none;-webkit-backdrop-filter:none}
  .sheet{background:rgba(20,16,12,.76)}
  #formulary{background:rgba(20,16,12,.8)}
  .sheet-media{min-height:150px;max-height:26vh}
  .sheet-body{padding:24px 22px 26px}
  .sheet-text{font-size:14px}
  .sheet-line{font-size:23px;margin-top:20px;padding-top:16px}
  .price-row{margin-top:18px;padding-top:16px}
}

/* -------------------------------------------------- chapter, on a phone */
/* Top-centre of an 844px-tall screen is nowhere near a thumb, so the
   chapter arrows drop to the bottom band beside "Enter the room". */
@media (max-width:860px) and (orientation:portrait){
  .arrow{top:auto;translate:0 0;bottom:calc(var(--sab) + clamp(26px,7vh,60px))}
  .arrow--prev{left:calc(var(--sal) + 14px)}
  .arrow--next{right:calc(var(--sar) + 14px)}
  .chapter-head{top:calc(var(--sat) + clamp(22px,5vh,52px))}
}

/* ---------------------------------------------- the chapter surround, phone */
/* A 16:9 facade in a 9:19.5 window leaves a band above and below. It cannot be
   closed without cropping the shutters clean off, so instead of a flat grey
   card it reads as the same wall, thrown out of focus behind the plate. */
body.is-phone .ext-bleed{filter:blur(30px) brightness(.56) saturate(.8)}
body.is-phone .ext-clip{
  box-shadow:0 24px 60px rgba(12,10,7,.55),0 -24px 60px rgba(12,10,7,.55)}
body.is-phone #chapter .ext-shade{
  background:radial-gradient(130% 78% at 50% 46%,transparent 42%,rgba(24,20,14,.42))}

/* --------------------------------------------------------------- end page */
@media (max-width:560px){
  .end-card{padding:26px 20px 30px}
  .end-title{font-size:clamp(30px,10vw,44px);letter-spacing:.22em;text-indent:.22em}
  .end-shelf{gap:12px}
  .piece img{width:96px}
  .piece-b{padding:14px}
  .end-order{padding:20px}
}


/* ------------------------------------------------------------ tappability */
/* A full-width centred foot strip lies on top of anything sharing its band and
   silently eats the taps: moving the chapter arrows down beside "Enter the
   room" made both of them unreachable on every portrait phone. The container
   must not take pointer events at all — only its children. */
.chapter-foot,.room-foot{pointer-events:none}
.chapter-foot > *,.room-foot > *{pointer-events:auto}
@media (max-width:860px) and (orientation:portrait){
  .arrow{z-index:24}
}

/* ------------------------------------------------ the book, short landscape */
/* At 390px of height the page box is about 300px tall, so the prose has to come
   down with it. Whatever still will not fit scrolls rather than being
   guillotined by the overflow:hidden on .bp. */
@media (orientation:landscape) and (max-height:620px){
  .book-wrap{width:min(1040px,94vw,calc((100svh - 62px) * 1.46))}
  .bp{padding:16px 18px;overflow-y:auto}
  .bp--photo,.bp--img{padding:13px}
  .bp-eyebrow{font-size:9px}
  .bp-title{font-size:18px;margin-top:8px;line-height:1.16}
  .bp-text{font-size:12.5px;line-height:1.6;margin-top:10px}
  .bp-hand{font-size:19px}
  .bp-rule{margin:11px 0}
  .bp-cap{margin-top:8px;font-size:9.5px}
  .bp-num{bottom:7px}
  .bp-foot{padding-top:10px}
  .bp-price{padding-top:11px}
  .bp-price .price{font-size:19px}
  .bp-price .btn{margin-top:9px}
  .bp-lines{gap:10px}
  .bp-line i{font-size:17px}
}


/* ------------------------------------------- the room chrome, landscape */
/* Bottom-right in landscape is exactly where the product hotspot lands, and
   the sound chip was sitting on top of it. Park it beside the counter. */
@media (orientation:landscape) and (max-width:900px){
  #sound{top:calc(var(--sat) + clamp(14px,2.4vh,26px));bottom:auto;
         right:auto;left:calc(var(--sal) + 104px)}
}

/* a panel has to end above the home indicator, not under it */
.sheet-card{max-height:min(88vh,calc(100svh - var(--sat) - var(--sab) - 20px))}
.sheet-body{padding-bottom:calc(clamp(28px,3.4vw,50px) + var(--sab))}
@media (max-width:900px){
  .sheet-body{padding-bottom:calc(26px + var(--sab))}
}


/* ------------------------------------------- the panels, short landscape */
/* Stacking media over prose is right on a tall phone and wrong on a wide short
   one: at 844x390 it pushed the hold-to-distil control and the Reserve button
   below the fold of a scroll nobody knows is there. There is width here for the
   two columns desktop uses, so use them and give the body the full height. */
@media (orientation:landscape) and (max-height:620px){
  .sheet-card{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);
    max-width:min(760px,94vw)}
  .sheet-card--solo{grid-template-columns:1fr}
  .sheet-media{min-height:0;max-height:none}
  .sheet-body{padding:18px 20px calc(16px + var(--sab));justify-content:center}
  .sheet-eyebrow{font-size:9.5px}
  .sheet-title{font-size:20px;margin-top:8px}
  .sheet-text{font-size:12.5px;line-height:1.55;margin-top:10px}
  .sheet-line{font-size:19px;margin-top:14px;padding-top:12px}
  .sheet-actions{margin-top:16px}
  .price-row{margin-top:14px;padding-top:12px}
  .price{font-size:20px}
  .price-note{margin-top:6px;font-size:11px}
}


/* --------------------------------------------- landscape, notch and bar */
/* A landscape phone shows the whole plate at once, so there is no pan to move
   a hotspot out from under the notch. Inset the STAGE instead: the picture
   stops at the safe box and the cut-out corners become background, which is
   what a safe area is for. Scaling the plate up to create pan headroom just
   trades a hotspot under the notch for one off the screen entirely. */
@media (orientation:landscape) and (max-width:900px){
  .stage{left:var(--sal);right:var(--sar)}
}