/* no bar: the film, the pieces opening on scroll, the collection */
:root,[data-theme]{--bg:#fff;--ink:#19110b;--mute:#6f675e;--accent:#8b6b3d;--rule:rgba(25,17,11,.12);--field:rgba(25,17,11,.3);--dot:#19110b;--btn-ink:#fff;--soft:#f6f5f3}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 "Jost",system-ui,sans-serif;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4{font-weight:400;margin:0}
.title{text-align:center;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:.01em;font-weight:400}
.link{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:14px;transition:opacity .2s}
.link:hover{opacity:.7}
.link.light{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border-radius:999px;background:var(--ink);color:#fff;border:0;cursor:pointer;font:400 15px/1 "Jost",sans-serif;letter-spacing:.02em;transition:opacity .25s}
.btn:hover{opacity:.85}
.btn.small{min-height:42px;padding:0 24px;font-size:14px}

/* floating clear-glass header */
.top{position:fixed;top:16px;left:0;right:0;z-index:30;display:flex;justify-content:center;padding:0 20px;pointer-events:none}
.glass{pointer-events:auto;position:relative;height:48px;border-radius:999px;display:flex;align-items:center;gap:4px;padding:0 5px 0 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.32),0 10px 40px rgba(25,17,11,.08);overflow:hidden;transition:color .4s}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 140% at 18% -30%,rgba(255,255,255,.55),transparent 46%);pointer-events:none}
.top.dark .glass{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.glass .words{display:flex;align-items:center;gap:24px;position:relative;margin:0 14px 0 18px;padding-left:18px;border-left:1px solid rgba(127,127,127,.3);font-size:14px}
.glass .words a{text-decoration:none;opacity:.9;white-space:nowrap}
.glass .words a:hover{opacity:1}
.ig{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-right:4px;position:relative;transition:background .2s}
.ig:hover{background:rgba(127,127,127,.16)}
.ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.ig .dot{fill:currentColor;stroke:none}
.ig svg.x{width:15px;height:15px;fill:currentColor;stroke:none}
.ig + .ig{margin-left:-6px}
.glass .logo{position:relative;display:block;height:18px}
.glass .logo img{height:18px;width:auto;transition:opacity .4s}
.glass .logo .w{position:absolute;inset:0;opacity:0}
.top.dark .glass .logo .w{opacity:1}
.top.dark .glass .logo .k{opacity:0}
.pill{position:relative;border:0;cursor:pointer;height:38px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;transition:background .4s,color .4s}
.top.dark .pill{background:#fff;color:var(--ink)}
.progress{position:absolute;left:20px;right:20px;bottom:0;height:1px;background:currentColor;opacity:.55;transform-origin:left;transform:scaleX(0)}

/* film first */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#0c0907;color:#fff}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 26%,transparent 60%,rgba(0,0,0,.5));pointer-events:none}
.hero .copy{position:absolute;left:0;right:0;bottom:9vh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:0 24px}
.hero .kicker{margin:0;font-size:13px;letter-spacing:.04em;opacity:.9}
.hero h1{font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:.01em;margin-top:-6px}
.hero .links{display:flex;gap:28px;margin-top:4px}
.hero button.link{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 3px}
.sound{position:absolute;right:28px;bottom:28px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;border:0;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .2s}
.sound:hover{background:rgba(255,255,255,.24)}
.sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;grid-area:1/1}
.sound .on,.sound[aria-pressed="true"] .off{display:none}
.sound[aria-pressed="true"] .on{display:block}

/* the 3D acts: a lit studio in colour */
.story{position:relative}
#matryoshka{height:560vh;--c1:#f4ece0;--c2:#dccbb3;--c3:#b79f80}
#treasure{height:440vh;--c1:#eef0ea;--c2:#cfd5c8;--c3:#9fa996}
.story .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.backdrop{position:absolute;inset:0;background:radial-gradient(70% 62% at 62% 52%,var(--c1),var(--c2) 58%,var(--c3) 120%)}
.backdrop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(25,17,11,.07))}
.beam{position:absolute;left:62%;top:-10%;width:60vw;height:90%;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 0,rgba(255,250,240,.75),rgba(255,250,240,0) 70%);filter:blur(10px);opacity:.9}
.gl{position:absolute;inset:0}
.gl canvas{display:block;width:100%!important;height:100%!important}
.still{position:absolute;top:54%;left:64%;width:min(44vw,620px);height:auto;transform:translate(-50%,-50%);transition:opacity .8s;pointer-events:none}
.story.ready .still{opacity:0}
.story.nogl .gl{display:none}
.beats{position:absolute;left:7vw;top:54%;transform:translateY(-50%);width:min(30vw,440px);height:50vh;pointer-events:none}
.beat{position:absolute;left:0;right:0;top:50%;transform:translateY(-40%);opacity:0;filter:blur(6px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.1,1),filter .7s ease}
.beat.on{opacity:1;transform:translateY(-50%);filter:none}
.beat .kicker{margin:0 0 14px;font-size:13px;color:var(--mute)}
.beat h2{font-size:clamp(30px,3.2vw,48px);line-height:1.1;letter-spacing:-.005em;font-weight:300}
.beat p{margin:16px 0 0;color:var(--mute);font-size:16px}

/* materials: three in a straight line */
.matter{padding:16vh 40px 16vh}
.matter .title{margin-bottom:48px}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1400px;margin:0 auto}
.row figure{margin:0}
.row .ph{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.row img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.row figure:hover img{transform:scale(1.03)}
.row figcaption{display:flex;flex-direction:column;gap:2px;padding:16px 2px 0;font-size:14px}
.row figcaption span{color:var(--mute)}

/* rooms slide by as you scroll down */
.rooms{height:340vh;position:relative;background:var(--soft)}
.rooms .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:6vh;padding-top:70px}
.track{display:flex;gap:16px;padding:0 40px;overflow-x:hidden;scrollbar-width:none}
.track::after{content:"";flex:0 0 24px}
.track figure{flex:0 0 auto;width:min(36vw,560px,calc((100svh - 250px) * .8));margin:0}
.track .ph{aspect-ratio:4/5;overflow:hidden;background:#ebe8e3}
.track img{width:100%;height:100%;object-fit:cover}
.track figcaption{padding-top:12px;font-size:14px}

/* the collection: small, neat product cards */
.collection{padding:16vh 40px 18vh}
.collection .sub{text-align:center;color:var(--mute);margin:10px 0 56px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,460px));justify-content:center;gap:20px}
.card{display:flex;flex-direction:column}
.card .shot{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:4/5;background:var(--soft);overflow:hidden}
.card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.1,1)}
.card .shot .b{opacity:0}
.card .shot:hover .a,.card .shot:focus-visible .a{opacity:0}
.card .shot:hover .b,.card .shot:focus-visible .b{opacity:1}
.card .shot:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.card .info{padding:16px 2px 0}
.card h3{font-size:15px;line-height:1.35}
.card .info p{margin:4px 0 0;color:var(--mute);font-size:14px;line-height:1.5}
.card .price{color:var(--ink)!important;margin-top:10px!important}
.card .acts{display:flex;align-items:center;gap:20px;margin-top:18px}

/* enquiry sheet */
.sheet{position:fixed;inset:0;z-index:60;visibility:hidden}
.sheet.open{visibility:visible}
.scrim{position:absolute;inset:0;background:rgba(25,17,11,.28);opacity:0;transition:opacity .4s}
.sheet.open .scrim{opacity:1}
.panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:#fff;padding:28px 36px 36px;overflow-y:auto;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.sheet.open .panel{transform:none}
.panel .x{all:unset;cursor:pointer;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:2px;float:right}
.panel .pick{clear:both;margin:24px 0 20px;background:var(--soft);aspect-ratio:5/4;overflow:hidden}
.panel .pick img{width:100%;height:100%;object-fit:cover}
.panel h3{font-size:20px}
.panel .muted{color:var(--mute);margin:6px 0 24px}
#vform{display:grid;gap:18px}
.field{display:grid;gap:2px}
.field label{color:var(--mute);font-size:13px}
.field input,.field select{font:400 16px/1.4 "Jost",sans-serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--field);padding:8px 0;border-radius:0;min-height:46px;width:100%}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--ink)}
#vform .btn{margin-top:10px;width:100%}

/* footer, like a house: columns, then the dotted finale */
footer.end{border-top:1px solid var(--rule)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1180px;margin:0 auto;padding:72px 40px 24px}
.cols h4{font-size:14px;margin-bottom:16px}
.cols a,.cols button{display:block;text-decoration:none;color:var(--mute);font-size:14px;padding:5px 0;background:none;border:0;cursor:pointer;text-align:left}
.cols a:hover,.cols button:hover{color:var(--ink)}
.finale{position:relative;height:88vh;min-height:520px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh}
footer.end canvas,#loader canvas{image-rendering:pixelated;image-rendering:crisp-edges}
canvas.pillar{position:absolute;top:0;pointer-events:none;opacity:.42}
canvas.pillar.l{left:clamp(-40px,-1.5vw,-8px)}
canvas.pillar.r{right:clamp(-40px,-1.5vw,-8px);transform:scaleX(-1)}
.stage{display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,5vw,80px)}
.piece{display:block}
.piece button.art{all:unset;cursor:pointer;position:relative;display:block}
.piece button.art:focus-visible{outline:1px solid var(--ink);outline-offset:10px}
.piece canvas{display:block}
.mark{width:clamp(120px,14vw,200px);height:auto}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.1,1),transform 1s cubic-bezier(.2,.7,.1,1)}
.rv.in{opacity:1;transform:none}

/* loader */
#loader{position:fixed;inset:0;z-index:70;background:var(--bg);display:grid;place-items:center;transition:opacity .6s ease,filter .6s ease,visibility .6s}
#loader.out{opacity:0;filter:blur(6px);visibility:hidden}
#loader .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5vh,48px)}
#loader .line{position:relative;width:min(340px,62vw);height:1px;background:var(--rule)}
#loader .line i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--accent) 55%,var(--ink))}
#loader .line b{position:absolute;top:50%;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px 1px rgba(139,107,61,.6)}

@media (max-width:1000px){
  .still{left:50%;top:60%;width:min(78vw,520px)}
  .beam{left:50%;width:120vw}
  .backdrop{background:radial-gradient(90% 60% at 50% 60%,var(--c1),var(--c2) 60%,var(--c3) 130%)}
  .beats{left:24px;right:24px;width:auto;top:104px;transform:none;height:30vh}
  .beat{top:0;transform:translateY(12px);text-align:center}
  .beat.on{transform:none}
}
@media (max-width:760px){
  .top{top:10px;padding:0 10px}
  .glass{padding:0 5px 0 16px}
  .glass .words{display:none}
  .glass{gap:14px}
  .progress{left:16px;right:16px}
  .hero{height:auto;min-height:0;aspect-ratio:4/5}
  .hero .copy{bottom:28px;gap:12px}
  .sound{right:16px;bottom:18px}
  .beat h2{font-size:clamp(26px,7.4vw,34px)}
  .beat p{font-size:15px}
  .matter{padding:12vh 0}
  .matter .title{padding:0 20px;margin-bottom:28px}
  .row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:0 20px;gap:10px;scrollbar-width:none}
  .row::-webkit-scrollbar{display:none}
  .row figure{flex:0 0 76vw;scroll-snap-align:start}
  .track{padding:0 20px;gap:10px}
  .track figure{width:min(84vw,calc((100svh - 230px) * .8))}
  .collection{padding:12vh 16px 14vh}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .acts{flex-direction:column;align-items:flex-start;gap:12px}
  .card h3{font-size:14px}
  .card .info p{font-size:13px}
  .cols{grid-template-columns:1fr 1fr;gap:28px 20px;padding:56px 20px 8px}
  .cols > div:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:24px}
  .cols > div:last-child h4{flex-basis:100%}
  .hero .links{gap:22px}
  .panel{padding:22px 22px 30px}
  .finale{height:auto;min-height:0;padding:9vh 0 7vh;gap:5vh}
  .stage{flex-direction:column;align-items:center;gap:4vh}
  .stage .piece[data-k="t"]{display:none}
  canvas.pillar.l{left:-12vw}
  canvas.pillar.r{right:-12vw}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .beat{transition:none;filter:none}
}