@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Text:wght@400;500&display=swap');

/* =============================================================================
   IJULA v2 — chrome over a 3D scene.
   Same tokens as v1, inverted: the gallery is dark, so the UI is warm glass
   sitting on top of it rather than cream pages.
   ========================================================================== */
:root{
  --surface:#F3EFEA;
  --ink:#1A1A1A;
  --on-dark:#F3EFEA;
  --on-dark-dim:rgba(243,239,234,.68);
  --accent:#DDD3C7;
  --accent-soft:#E8DFD5;
  --ember:#A84A2D;
  --glass:rgba(20,20,19,.62);
  --glass-line:rgba(243,239,234,.16);

  --radius-card:2.4rem;
  --radius-media:1.6rem;
  --radius-pill:999rem;

  --space-2xs:.8rem; --space-xs:1rem; --space-sm:1.2rem; --space-md:1.6rem;
  --space-lg:2rem; --space-xl:2.4rem; --space-2xl:3rem; --space-3xl:4rem; --space-4xl:4.8rem;
  --inset:2.4rem;

  --display:'Google Sans','Google Sans Text',Helvetica,Arial,sans-serif;
  --sans:'Google Sans Text','Google Sans',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%}
body{
  margin:0;height:100dvh;overflow:hidden;background:#0d0d0c;color:var(--on-dark);
  font:400 1.6rem/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;
}
h1,h2,p,dl,dd,dt{margin:0}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

.stage{position:fixed;inset:0;z-index:0}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}

.eyebrow{
  display:inline-block;font:500 1.25rem/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-dim)
}
.hint{font-size:1.3rem;color:var(--on-dark-dim);margin-top:var(--space-sm)}

/* --- actions -------------------------------------------------------------- */
.button{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  min-height:4.8rem;padding:1.5rem 2.8rem;border:0;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink);
  font:500 1.6rem/1 var(--display);
  transition:transform .3s var(--ease),background .3s var(--ease)
}
.button:hover{background:#fff;transform:translateY(-.2rem)}
.button.small{min-height:4.4rem;padding:1.2rem 2.2rem;font-size:1.5rem}
.button.ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 .1rem var(--glass-line)}
.button.ghost:hover{background:rgba(243,239,234,.1)}
.arrow{line-height:0;transition:transform .3s var(--ease)}
.button:hover .arrow{transform:translate(.25rem,-.25rem)}

.chip{
  min-height:4.4rem;padding:1rem 1.8rem;border:0;border-radius:var(--radius-pill);
  background:rgba(243,239,234,.12);color:var(--on-dark);
  font:500 1.4rem/1 var(--sans);backdrop-filter:blur(1.2rem);
  transition:background .3s var(--ease)
}
.chip:hover{background:rgba(243,239,234,.22)}
.chip.solid{background:var(--surface);color:var(--ink)}
.chip.solid:hover{background:#fff}

/* --- loader + doorstep ---------------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;
  gap:var(--space-lg);background:#0d0d0c;transition:opacity .6s var(--ease)
}
.loader.out{opacity:0;pointer-events:none}
.loader p{font:500 1.4rem/1 var(--display);letter-spacing:.4em;text-transform:uppercase;color:var(--on-dark-dim)}
.loader-mark{display:flex;gap:.6rem}
.loader-mark span{width:.5rem;height:3.2rem;border-radius:var(--radius-pill);background:var(--accent);animation:pulse 1.1s var(--ease) infinite}
.loader-mark span:nth-child(2){animation-delay:.14s}
.loader-mark span:nth-child(3){animation-delay:.28s}
@keyframes pulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

.doorstep{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--inset);
  background:radial-gradient(120% 90% at 50% 40%,rgba(26,26,25,.72),rgba(8,8,8,.94));
  backdrop-filter:blur(1.4rem);transition:opacity .8s var(--ease)
}
.doorstep.out{opacity:0;pointer-events:none}
.doorstep-inner{max-width:62rem;text-align:center;display:grid;justify-items:center;gap:var(--space-md)}
.doorstep h1{font:500 clamp(4rem,9vw,8.4rem)/1.02 var(--display);letter-spacing:-.025em}
.doorstep p{color:var(--on-dark-dim);max-width:46ch}
.doorstep .button{margin-top:var(--space-sm)}


/* --- topbar --------------------------------------------------------------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:var(--space-md);
  justify-content:space-between;padding:var(--space-md) var(--inset);
  background:linear-gradient(180deg,rgba(8,8,8,.62),transparent)
}
.brand{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:4.4rem;background:none;border:0;
  font:500 1.9rem/1 var(--display);letter-spacing:-.01em;color:var(--on-dark)}
.brand img{height:2.4rem;width:auto;max-width:3.4rem;object-fit:contain}
.topbar-mid{flex:1;text-align:center;min-width:0}
.crumb{font:500 1.3rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-dim)}
.topbar-actions{display:flex;gap:var(--space-2xs)}

/* --- hall hud ------------------------------------------------------------- */
.hall-hud{
  position:fixed;left:50%;bottom:calc(var(--space-3xl) + var(--safe-b));transform:translateX(-50%);
  z-index:30;display:grid;justify-items:center;gap:var(--space-2xs);text-align:center;
  width:min(58rem,calc(100% - var(--inset) * 2));pointer-events:none
}
.hall-hud h2{font:500 clamp(2.8rem,4.4vw,4.4rem)/1.08 var(--display);letter-spacing:-.02em;text-shadow:0 .2rem 2.4rem rgba(0,0,0,.6)}
.hall-hud .button{pointer-events:auto;margin-top:var(--space-2xs)}

/* Turn controls. A round hall gives no clue that there is anything either
   side of you; on a phone especially, an arrow is the difference between a
   room and a dead end. */
.turn{
  position:fixed;top:50%;transform:translateY(-50%);z-index:31;
  width:4.8rem;height:4.8rem;display:grid;place-items:center;
  border:0;border-radius:50%;pointer-events:auto;
  background:rgba(20,20,19,.42);color:var(--on-dark);
  backdrop-filter:blur(1.2rem);box-shadow:inset 0 0 0 .1rem var(--glass-line);
  transition:background .3s var(--ease),opacity .3s var(--ease)
}
.turn svg{width:2.2rem;height:2.2rem}
.turn:hover{background:rgba(20,20,19,.7)}
.turn-l{left:var(--inset)}
.turn-r{right:var(--inset)}
@media (max-width:560px){
  .turn{width:4.4rem;height:4.4rem}
  .turn-l{left:1.2rem}
  .turn-r{right:1.2rem}
}

/* --- room hud ------------------------------------------------------------- */
.room-hud{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;justify-items:center;gap:var(--space-sm);
  padding:var(--space-3xl) var(--inset) calc(var(--space-xl) + var(--safe-b));
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.78) 46%);pointer-events:none
}
.room-hud>*{pointer-events:auto}
.station-rail{width:min(72rem,100%)}
.station-line{height:.3rem;border-radius:var(--radius-pill);background:rgba(243,239,234,.2);overflow:hidden}
.station-line i{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:var(--surface);transition:width .2s linear}
.station-dots{display:flex;justify-content:space-between;margin-top:var(--space-2xs)}
.station-dot{width:3.2rem;height:3.2rem;border:0;background:none;display:grid;place-items:center}
.station-dot::after{content:'';width:.7rem;height:.7rem;border-radius:50%;background:rgba(243,239,234,.34);transition:all .3s var(--ease)}
.station-dot.active::after{background:var(--surface);transform:scale(1.5)}
.room-caption{text-align:center;max-width:56ch}
.room-caption p{color:var(--on-dark-dim);font-size:1.5rem;margin-top:.4rem}
.button.collect{margin-top:var(--space-2xs)}

/* A full-bleed vertical wall leaves no margin, so the room furniture becomes a
   single translucent bar across the bottom rather than stacked centred blocks. */
.room-hud{grid-template-columns:1fr;justify-items:center}
.room-hud .room-caption{max-width:64ch}
.room-hud .station-rail{order:-1}
@media(min-width:821px){
  .room-hud{
    grid-template-columns:1fr auto auto;align-items:end;justify-items:start;
    gap:var(--space-md) var(--space-lg);text-align:left
  }
  .room-hud .station-rail{grid-column:1 / -1;order:-1;width:100%}
  .room-hud .room-caption{text-align:left;max-width:52ch}
  .room-hud .hint{grid-column:1;margin-top:0}
  .lights-switch,.button.collect{margin-top:0}
}

/* --- lights switch -------------------------------------------------------- */
/* Deliberately unsubtle: it is the most interesting thing about these works. */
.lights-switch{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  min-height:4.8rem;padding:1.2rem 2rem 1.2rem 1.4rem;border:0;
  border-radius:var(--radius-pill);background:rgba(243,239,234,.14);
  color:var(--on-dark);font:500 1.5rem/1 var(--sans);
  backdrop-filter:blur(1.2rem);transition:background .3s var(--ease)
}
.lights-switch:hover{background:rgba(243,239,234,.24)}
.lights-switch .bulb{
  width:3.4rem;height:1.9rem;border-radius:var(--radius-pill);flex:none;position:relative;
  background:var(--accent);transition:background .3s var(--ease)
}
.lights-switch .bulb::after{
  content:'';position:absolute;top:.25rem;left:.25rem;width:1.4rem;height:1.4rem;
  border-radius:50%;background:#fff;box-shadow:0 0 1.2rem rgba(255,238,200,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.lights-switch.off .bulb{background:rgba(243,239,234,.2)}
.lights-switch.off .bulb::after{transform:translateX(1.5rem);background:#7d7a75;box-shadow:none}

/* --- corridor hud --------------------------------------------------------- */
.corridor-hud{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;justify-items:center;gap:var(--space-2xs);
  padding:var(--space-3xl) var(--inset) calc(var(--space-xl) + var(--safe-b));
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.74) 50%);pointer-events:none
}
.corridor-hud>*{pointer-events:auto}
.walk-rail{width:min(64rem,100%);height:.3rem;border-radius:var(--radius-pill);background:rgba(243,239,234,.18);overflow:hidden}
.walk-rail i{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:var(--surface);transition:width .12s linear}
.door-name{
  min-height:3.4rem;font:500 clamp(2rem,3vw,2.8rem)/1.2 var(--display);letter-spacing:-.01em;
  text-shadow:0 .2rem 2rem rgba(0,0,0,.7);transition:opacity .3s var(--ease)
}
.door-name:empty{opacity:0}

/* --- filmstrip ------------------------------------------------------------ */
/* 35mm negative: perforations down both edges, exposures in a row. */
.filmstrip{background:#141312;border-radius:.6rem;padding:.5rem 0;overflow:hidden}
.sprockets{
  height:1.1rem;
  background-image:radial-gradient(closest-side,#0b0a0a 78%,transparent 80%);
  background-size:2.2rem 1.1rem;background-position:.4rem center;background-repeat:repeat-x;
  opacity:.9
}
.filmstrip .frames{
  display:flex;gap:.35rem;padding:.35rem;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity
}
.filmstrip .frames::-webkit-scrollbar{display:none}
.frame{
  position:relative;flex:0 0 11rem;aspect-ratio:3/2;padding:0;border:0;overflow:hidden;
  border-radius:.2rem;background:#000;scroll-snap-align:start;cursor:zoom-in;
  filter:saturate(.94) contrast(1.04);transition:filter .3s var(--ease),outline-color .2s var(--ease);
  outline:.2rem solid transparent;outline-offset:-.2rem
}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame:hover{filter:none}
.frame.active{outline-color:var(--accent)}
.frame-no{position:absolute;left:.3rem;bottom:.2rem;font:500 .9rem/1 var(--sans);color:rgba(255,180,90,.9);letter-spacing:.06em}
.frame .play{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;color:#fff;text-shadow:0 0 1rem #000}
.frame-view{margin-top:var(--space-sm);border-radius:var(--radius-media);overflow:hidden;background:#0b0a0a}
.frame-view img,.frame-view video{width:100%;max-height:46vh;object-fit:contain;display:block}

.work-sheet-media{cursor:zoom-in}
.work-sheet-media img{transition:transform .4s var(--ease)}
.work-sheet-media:hover img{transform:scale(1.02)}
.zoom{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:var(--inset);background:rgba(6,6,6,.94);cursor:zoom-out
}
.zoom img{max-width:96vw;max-height:92dvh;object-fit:contain;border-radius:var(--radius-media)}

/* --- transition wipe -------------------------------------------------------
   Rebuilding a scene is instantaneous and therefore jarring: the old room is
   simply gone. Holding a black wipe over the swap gives the eye somewhere to
   be while the geometry changes underneath. */
.wipe{
  position:fixed;inset:0;z-index:70;background:#0d0d0c;opacity:0;pointer-events:none;
  transition:opacity .34s var(--ease)
}
.wipe.on{opacity:1;pointer-events:auto}

/* --- room hub -------------------------------------------------------------
   The collection film fills the screen; scrolling lifts the works up over it.
   DOM rather than 3D: the type stays crisp and a phone renders it for free. */
.hub{
  position:fixed;inset:0;z-index:35;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y proximity;background:#0d0d0c;
  animation:hubIn .6s var(--ease)
}
@keyframes hubIn{from{opacity:0}to{opacity:1}}
.hub.leaving{animation:hubOut .7s var(--ease) forwards}
@keyframes hubOut{to{opacity:0}}
.hub-film{position:relative;height:100dvh;scroll-snap-align:start;display:grid;align-items:end}
.hub-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.5) 0%,rgba(8,8,8,.08) 34%,rgba(8,8,8,.86) 100%)}
.hub-intro{
  position:relative;display:grid;justify-items:center;gap:var(--space-sm);text-align:center;
  padding:0 var(--inset) calc(var(--space-4xl) + var(--safe-b));max-width:64rem;margin:0 auto
}
.hub-intro h2{font:500 clamp(3.6rem,7vw,7.2rem)/1.02 var(--display);letter-spacing:-.025em;text-shadow:0 .2rem 3rem rgba(0,0,0,.6)}
.hub-intro p{color:var(--on-dark-dim);max-width:48ch}
.hub-cue{
  display:inline-flex;align-items:center;gap:var(--space-2xs);margin-top:var(--space-md);
  min-height:4.8rem;padding:1.3rem 2.4rem;border:0;border-radius:var(--radius-pill);
  background:rgba(243,239,234,.14);color:var(--on-dark);font:500 1.5rem/1 var(--sans);
  backdrop-filter:blur(1.2rem)
}
.hub-cue svg{width:1.8rem;animation:nudge 1.9s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(.4rem)}}
.hub-works{
  min-height:100dvh;scroll-snap-align:start;display:grid;align-content:center;gap:var(--space-xl);
  padding:var(--space-5xl) var(--inset) calc(var(--space-5xl) + var(--safe-b));
  grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));max-width:132rem;margin:0 auto
}
.hub-card{
  display:grid;gap:var(--space-sm);padding:0;border:0;background:none;text-align:left;
  transition:transform .4s var(--ease)
}
.hub-card:hover{transform:translateY(-.6rem)}
.hub-card .shot{aspect-ratio:4/5;border-radius:var(--radius-card);overflow:hidden;background:#141312}
.hub-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hub-card:hover img{transform:scale(1.04)}
.hub-card b{font:500 2.2rem/1.15 var(--display);letter-spacing:-.01em}
.hub-card span{font-size:1.4rem;color:var(--on-dark-dim)}
@media(max-width:820px){
  .hub-works{grid-template-columns:1fr;gap:var(--space-lg);padding-top:var(--space-3xl)}
  .hub-card .shot{aspect-ratio:16/10}
}

/* --- sheets --------------------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(6,6,6,.62);backdrop-filter:blur(.8rem)}
.sheet{
  position:fixed;z-index:60;right:var(--inset);top:var(--inset);bottom:var(--inset);
  width:min(46rem,calc(100% - var(--inset) * 2));
  display:flex;flex-direction:column;gap:var(--space-md);
  padding:var(--space-2xl);overflow-y:auto;overscroll-behavior:contain;
  background:var(--glass);border:.1rem solid var(--glass-line);border-radius:var(--radius-card);
  backdrop-filter:blur(2.2rem);-webkit-backdrop-filter:blur(2.2rem);
  animation:sheetIn .45s var(--ease-expo)
}
@keyframes sheetIn{from{opacity:0;transform:translateX(2.4rem)}to{opacity:1;transform:none}}
.sheet h2{font:500 clamp(2.6rem,3.4vw,3.6rem)/1.1 var(--display);letter-spacing:-.02em}
.sheet-close{
  position:absolute;top:var(--space-md);right:var(--space-md);
  width:4.4rem;height:4.4rem;border:0;border-radius:var(--radius-pill);
  background:rgba(243,239,234,.12);color:var(--on-dark);font-size:2.2rem;line-height:0
}
.sheet-close:hover{background:rgba(243,239,234,.24)}
.work-sheet-media{border-radius:var(--radius-media);overflow:hidden;background:#141413;flex:none}
.work-sheet-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-sheet-body{display:grid;gap:var(--space-sm)}
.price{font:500 2.8rem/1.1 var(--display);letter-spacing:-.02em}
.story{color:var(--on-dark-dim)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.6rem var(--space-md);margin:var(--space-2xs) 0;font-size:1.4rem}
.facts dt{color:var(--on-dark-dim)}
.facts dd{margin:0}
.note{font-size:1.3rem;color:var(--on-dark-dim)}

.room-list{display:grid;gap:var(--space-2xs)}
.room-list button{
  display:flex;align-items:center;gap:var(--space-md);width:100%;text-align:left;
  padding:var(--space-2xs);border:0;border-radius:var(--radius-media);
  background:rgba(243,239,234,.06);transition:background .3s var(--ease)
}
.room-list button:hover,.room-list button.current{background:rgba(243,239,234,.16)}
.room-list img{width:6.4rem;height:6.4rem;border-radius:1.2rem;object-fit:cover;flex:none}
.room-list b{display:block;font:500 1.7rem/1.2 var(--display)}
.room-list span{font-size:1.3rem;color:var(--on-dark-dim)}

/* --- forms ---------------------------------------------------------------- */
.form-sheet-body{display:grid;gap:var(--space-sm)}
label{display:block;font:500 1.25rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-dim);margin-bottom:.6rem}
input{
  width:100%;min-height:4.8rem;padding:1.3rem 1.8rem;border:.1rem solid var(--glass-line);
  border-radius:var(--radius-pill);background:rgba(243,239,234,.06);color:var(--on-dark);
  font:400 1.6rem var(--sans);outline:none;transition:border-color .2s var(--ease)
}
input:focus{border-color:var(--accent)}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.amount{min-height:4.4rem;border:.1rem solid var(--glass-line);border-radius:var(--radius-pill);
  background:transparent;color:var(--on-dark);font:500 1.4rem/1 var(--sans)}
.amount.active,.amount:hover{background:var(--surface);color:var(--ink);border-color:transparent}
.summary{display:flex;gap:var(--space-md);align-items:center;padding:var(--space-sm);
  border-radius:var(--radius-media);background:rgba(243,239,234,.06)}
.summary img{width:7rem;height:7rem;border-radius:1.2rem;object-fit:cover}
.receipt{padding:var(--space-lg);border-radius:var(--radius-media);background:rgba(243,239,234,.06);display:grid;gap:.6rem}
.receipt .ref{font:500 1.3rem/1 var(--sans);letter-spacing:.1em;color:var(--on-dark-dim)}

/* --- responsive ----------------------------------------------------------- */
/* App-like on a phone: nothing rubber-bands, nothing selects, taps do not
   flash, and every fixed edge respects the notch and the home indicator. */
@media(max-width:820px){
  html,body{overscroll-behavior:none;touch-action:manipulation}
  body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
       padding-top:env(safe-area-inset-top,0px)}
  .topbar{padding-top:calc(var(--space-sm) + env(safe-area-inset-top,0px))}
  .stage canvas{touch-action:none}
  input,textarea{-webkit-user-select:text;user-select:text;font-size:1.6rem}
  .sheet{max-height:88dvh}
  .doorstep-inner{gap:var(--space-sm)}
  .room-hud,.corridor-hud{padding-bottom:calc(var(--space-lg) + var(--safe-b))}
  .zoom{padding:var(--space-sm)}

  :root{--inset:1.6rem}
  .sheet{left:var(--inset);right:var(--inset);top:auto;bottom:0;width:auto;
    max-height:86dvh;border-radius:var(--radius-card) var(--radius-card) 0 0;
    padding-bottom:calc(var(--space-2xl) + var(--safe-b));
    animation:sheetUp .45s var(--ease-expo)}
  @keyframes sheetUp{from{opacity:0;transform:translateY(3.2rem)}to{opacity:1;transform:none}}
  .topbar{padding:var(--space-sm) var(--inset)}
  .topbar-mid{display:none}
  .hall-hud{bottom:calc(var(--space-2xl) + var(--safe-b))}
  .room-hud{padding-top:var(--space-2xl)}
  .room-caption p{font-size:1.4rem}
  .work-sheet-media img{aspect-ratio:16/10}
  .hint{display:none}
}
@media(max-height:560px){
  .doorstep h1{font-size:clamp(3.2rem,7vw,4.8rem)}
    .room-hud{padding-top:var(--space-lg)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

button[disabled]{opacity:.5;cursor:not-allowed}
button[disabled]:hover{transform:none;background:var(--surface)}