:root{
  --bg:#0e0c0a; --bg2:#15120e; --ink:#f2ebe0; --mute:#a89f92; --line:rgba(242,235,224,.14);
  --gold:#c9965b;
  --serif:"Cormorant", "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --out:cubic-bezier(.2,.8,.2,1); --enter:cubic-bezier(.22,1,.36,1);
  --gut:clamp(1.25rem,6vw,5.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.01em}
.kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;font-weight:500}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem);color:rgba(242,235,224,.84);max-width:36rem}
.title{font-size:clamp(2.5rem,5.2vw,4.8rem);margin-bottom:1.25rem}
.sec{padding:clamp(6rem,15vh,9rem) var(--gut) clamp(4rem,9vh,5.5rem)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.sec-head .title{margin-bottom:0}
.sec-head .lead{max-width:30rem}
.alt{background:var(--bg2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem var(--gut);transition:background .4s var(--out),padding .4s var(--out)}
.nav.solid{background:rgba(14,12,10,.88);padding-block:.85rem;border-bottom:1px solid var(--line)}
.logo{font-family:var(--serif);font-size:1.55rem;letter-spacing:.03em;white-space:nowrap}
.logo span{color:var(--gold)}
.links{display:flex;gap:2.2rem;font-size:.9rem;letter-spacing:.03em}
.links a{position:relative;padding:.35rem 0;opacity:.86;transition:opacity .15s var(--out)}
.links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--out)}
.links a:hover,.links a[aria-current]{opacity:1}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.75rem;border:1px solid var(--gold);background:var(--gold);color:#17110a;font-size:.95rem;font-weight:600;letter-spacing:.01em;border-radius:999px;transition:background .15s var(--out),color .15s var(--out),border-color .15s var(--out),transform .15s var(--out)}
.btn:hover{background:#d8a76c;border-color:#d8a76c;transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-small{min-height:40px;padding:0 1.15rem;font-size:.86rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(242,235,224,.4)}
.btn-ghost:hover{background:transparent;border-color:var(--gold);color:var(--ink)}
.burger{display:none;min-height:40px;padding:0 1rem;border:1px solid rgba(242,235,224,.4);border-radius:999px;background:none;color:var(--ink);font:500 .86rem var(--sans);cursor:pointer}
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:5rem var(--gut) 2rem;opacity:0;pointer-events:none;transition:opacity .2s var(--out)}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-family:var(--serif);font-size:2.6rem;line-height:1.25;border-bottom:1px solid var(--line);padding:.5rem 0}

/* HERO */
.hero{height:160vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-img,.hero-shade{position:absolute;inset:0}
.hero-img{background-size:cover;background-position:center;transform:scale(1.06);will-change:transform;animation:heroIn 1.6s var(--enter) both}
@keyframes heroIn{from{transform:scale(1.2);opacity:.2}to{transform:scale(1.06);opacity:1}}
.hero-shade{background:linear-gradient(180deg,rgba(14,12,10,.6) 0%,rgba(14,12,10,.3) 28%,rgba(14,12,10,.78) 62%,rgba(14,12,10,.95) 100%)}
.hero-text{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(3.5rem,10vh,6.5rem);will-change:transform,opacity}
.hero h1{font-size:clamp(2.9rem,min(9.2vw,14.5vh),9.2rem);margin-bottom:1.25rem}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero h1 .line>i{display:inline-block;font-style:normal;transform:translateY(115%);animation:rise 1s var(--enter) forwards}
.hero h1 .gold>i{color:var(--gold);font-style:italic}
@keyframes rise{to{transform:none}}
.hero .kicker,.hero .lead,.hero .actions{opacity:0;animation:fade .9s .7s var(--out) forwards}
@keyframes fade{to{opacity:1}}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* INTRO: a filmed hammer hits a nail on the wall, the nail drops to the floor and the four ways in appear */
.intro{position:relative;height:100vh;height:100svh;min-height:600px;background:#1b1714;overflow:hidden}
.asm{position:absolute;left:50%;top:50%;width:max(100%,calc(max(100svh,600px)*16/9));aspect-ratio:16/9;transform:translate(-50%,-50%);background:url(img/room.jpg) center/100% 100%}
.asm i{position:absolute;inset:0;background:url(img/blackbase.jpg) center/100% 100%;opacity:0}
.asm .f,.asm .fin{background-image:url(img/blackkitchen.jpg)}
.asm .pc{clip-path:inset(var(--c))}
.asm .pc.on{opacity:1}
.asm .fx{position:absolute;inset:0;width:100%;height:100%}
.asm .fin{transition:opacity .9s var(--out)}
.asm.done .fin{opacity:1}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,.6),rgba(14,12,10,0) 22%,rgba(14,12,10,0) 48%,rgba(14,12,10,.78) 78%,rgba(14,12,10,.92))}
.intro-head{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(clamp(1.5rem,5vh,3rem) + 5.6rem);text-align:left}
.intro h1{font-size:clamp(2rem,min(4.2vw,7.5vh),3.8rem);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.intro .kicker{margin-bottom:.9rem}
.opts{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.5rem,5vh,3rem);display:grid;grid-template-columns:repeat(4,1fr);gap:0 1.5rem;align-items:end;border-top:1px solid rgba(242,235,224,.18);padding-top:1rem}
.opt{display:block;opacity:0;transform:translateY(18px);text-shadow:0 1px 18px rgba(0,0,0,.7)}
.opt b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.1;white-space:nowrap;transition:color .15s var(--out)}
.opt b::after{content:" →";color:var(--gold);display:inline-block;transition:transform .3s var(--out)}
.opt span{display:block;color:rgba(242,235,224,.82);font-size:.9rem;margin-top:.25rem}
@media (hover:hover) and (pointer:fine){.opt:hover b{color:var(--gold)}.opt:hover b::after{transform:translateX(5px)}}
.show .opt{animation:up .7s var(--enter) forwards}
@keyframes up{to{opacity:1;transform:none}}
.show .opt.o2{animation-delay:.14s}
.replay{position:absolute;right:var(--gut);top:5.2rem;min-height:40px;padding:0 1.1rem;border-radius:999px;border:1px solid rgba(242,235,224,.35);background:rgba(14,12,10,.55);color:var(--ink);font:500 .86rem var(--sans);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s var(--out),background .15s}
.show .replay{opacity:1;pointer-events:auto}
.replay:hover{background:rgba(14,12,10,.85)}

/* MAGAZINE: V-Design visualizations as a book with turning pages */
.mag-wrap{perspective:2600px;display:flex;justify-content:center;padding:.5rem 0 1.5rem}
.book{position:relative;width:min(100%,1080px,calc((100svh - 13rem)*1.44));aspect-ratio:1.44;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.book.at-start{transform:translateX(-25%)}
.book.at-end{transform:translateX(25%)}
.book>.pg{display:none}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .5s}
.leaf.flipped{transform:rotateY(-180deg)}
.side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;overflow:hidden;border-radius:0 6px 6px 0;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.side.back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.side::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,0) 9%)}
.side.back::after{background:linear-gradient(270deg,rgba(0,0,0,.26),rgba(0,0,0,0) 9%)}
.pg{position:absolute;inset:0;background:#efe8dc;color:#1c1712;padding:6cqw 7cqw 4.5cqw;display:flex;flex-direction:column;cursor:pointer}
.pg header{display:flex;justify-content:space-between;font:500 clamp(8px,2.1cqw,13px) var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-bottom:3.5cqw;color:#6b5f51}
.pg .ph{flex:1 1 0;min-height:0;margin:0;border-radius:0;background:#d9cfbf;position:relative}
.pg .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg .cap{font:400 clamp(9px,2.4cqw,14px) var(--sans);color:#6b5f51;margin:1.6cqw 0 3cqw}
.pg footer{font:400 clamp(11px,3cqw,18px) var(--serif);text-align:center;color:#6b5f51;margin-top:auto;width:100%;display:block;padding:0;border:0}
.pg.cover{padding:0;background:#141210;color:#fff}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.72),rgba(10,8,6,.05) 34%,rgba(10,8,6,.1) 55%,rgba(10,8,6,.86))}
.mast{position:absolute;top:5cqw;left:0;right:0;text-align:center;font:400 17cqw/.9 var(--serif);letter-spacing:-.01em;text-transform:uppercase}
.mast-sub{position:absolute;top:22.5cqw;left:0;right:0;text-align:center;font:500 2.1cqw var(--sans);letter-spacing:.3em;text-transform:uppercase}
.love{position:absolute;left:7cqw;bottom:8cqw;font:italic 300 13cqw/.92 var(--serif);color:#e6b987}
.cover-lines{position:absolute;right:7cqw;top:40cqw;width:34cqw;text-align:right;font:400 2.5cqw/1.4 var(--sans)}
.cover-lines b{display:block;font:400 7cqw/1 var(--serif);margin-bottom:1cqw}
.issue{position:absolute;right:7cqw;bottom:8.5cqw;text-align:right;font:500 2.1cqw/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.pg.note>div{margin:auto 0}
.note-k{font:500 2.1cqw var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#9a6b34;margin-bottom:3cqw}
.pg.note h3{font-size:10cqw;line-height:1;margin-bottom:5cqw}
.pg.note p:not(.note-k):not(.sign){font:400 3.1cqw/1.6 var(--sans);margin-bottom:3cqw;max-width:62cqw}
.sign{font:italic 400 7cqw var(--serif);margin-top:5cqw;color:#9a6b34}
.pg.note .btn{margin-top:3cqw;min-height:0;padding:2.4cqw 4.5cqw;font-size:3cqw}
.mag-ui{display:flex;justify-content:center;align-items:center;gap:1.25rem;color:var(--mute);flex-wrap:wrap}
.mag-btn{min-height:52px;padding:0 1.5rem;border-radius:999px;border:1px solid rgba(242,235,224,.4);background:none;color:var(--ink);font:500 1rem var(--sans);cursor:pointer;transition:background .15s var(--out),border-color .15s var(--out),opacity .2s var(--out)}
.mag-btn:hover{border-color:var(--gold);background:rgba(201,150,91,.14)}
.mag-btn.mag-next{background:var(--gold);border-color:var(--gold);color:#17110a}
.mag-btn.mag-next:hover{background:#dcae77}
.mag-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.first .mag-next{animation:nudge 1.8s var(--out) infinite}
.btn.pulse{animation:pulse 2.2s ease-in-out infinite}
.btn.pulse:hover{animation:none}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(201,150,91,.6)}50%{transform:scale(1.045);box-shadow:0 0 0 14px rgba(201,150,91,0)}}
@keyframes nudge{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(201,150,91,.55)}50%{transform:translateX(5px);box-shadow:0 0 0 12px rgba(201,150,91,0)}}
.mag-pos{min-width:6.5rem;text-align:center}
.darkbook .side{box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.pg.dark{background:#131211;color:#e9e3d8}
.pg.dark header{color:#8d857a}
.pg.dark.left{padding:6cqw 7cqw 7cqw}
.pg.dark .mini{width:46%;margin-left:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.gnum{font:400 clamp(11px,3cqw,18px) var(--sans);letter-spacing:.1em;color:#8d857a;margin-top:6cqw}
.gtext{margin-top:auto}
.gpart{font:500 clamp(10px,2.5cqw,14px) var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2.5cqw}
.gtext h3{font-size:9cqw;line-height:1;margin-bottom:4cqw}
.gtext ul{list-style:none;display:grid;gap:1.2cqw;font:400 clamp(11px,3cqw,17px)/1.45 var(--sans);color:#bdb5a8;max-width:70cqw}
.gtext li{padding-left:3.2cqw;position:relative}
.gtext li::before{content:"";position:absolute;left:0;top:.72em;width:1.6cqw;height:1px;background:var(--gold)}
.pg.dark.full{padding:0}
.pg.dark.full .ph{position:absolute;inset:0;width:100%;height:100%;flex:none;background:#1d1b19}
.pg.gcover{justify-content:center;padding:9cqw}
.pg.gcover h3{font-size:12cqw;line-height:.98;margin-bottom:5cqw}
.pg.gcover .note-k{color:var(--gold)}
.gsub{font:400 clamp(12px,3.2cqw,18px)/1.55 var(--sans);color:#bdb5a8;max-width:64cqw}
.pg.gcover .btn{align-self:flex-start;margin-top:6cqw;min-height:0;padding:2.4cqw 4.5cqw;font-size:clamp(12px,3cqw,16px)}
.book.single{width:min(100%,calc((100svh - 13rem)*.72));aspect-ratio:.72;transform:none}
.single .leaf{left:0;width:100%}
.single .leaf.flipped{transform:rotateY(-100deg);opacity:0;pointer-events:none}
.single .side{border-radius:6px}

/* WAYS: three ways to work with us */
.ways{border-top:1px solid var(--line)}
.way{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:1.5rem 3rem;align-items:center;padding:2.25rem 0;border-bottom:1px solid var(--line)}
.way h3{font-size:clamp(2rem,3.6vw,3.3rem);transition:color .15s var(--out)}
.way p{color:var(--mute);max-width:34rem}
.way .go{width:52px;height:52px;border:1px solid rgba(242,235,224,.3);border-radius:50%;display:grid;place-items:center;transition:background .15s var(--out),border-color .15s var(--out),transform .3s var(--out)}
.way .go svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5;transition:stroke .15s}
@media (hover:hover) and (pointer:fine){
  .way:hover h3{color:var(--gold)}
  .way:hover .go{background:var(--gold);border-color:var(--gold);transform:translateX(6px)}
  .way:hover .go svg{stroke:#17110a}
}
.makes{margin-top:2.5rem;color:var(--mute);max-width:44rem}
.makes b{color:var(--ink);font-weight:400}

/* SHOWCASE */
.showcase{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip;background:#000}
.rail{display:flex;height:100%;transition:transform .75s cubic-bezier(.65,0,.2,1);will-change:transform}
.slide{position:relative;flex:0 0 100%;height:100%}
.stage{background:#0e0c0a}
.slide-img{position:absolute;inset:4.6rem var(--gut) 9rem;transition:transform .5s cubic-bezier(.6,0,.2,1),border-radius .5s var(--out);isolation:isolate}
.slide-img::before{content:"";position:absolute;inset:-4.6rem calc(var(--gut)*-1) -9rem;background:var(--img) center/cover;filter:blur(34px) brightness(.45)}
.slide-img::after{content:"";position:absolute;inset:0;background:var(--img) center/contain no-repeat}
.moving .slide-img{transform:scale(.72)}
.moving .slide-img::after{opacity:0}
.slide-text{position:absolute;z-index:2;left:var(--gut);right:calc(var(--gut) + 14rem);bottom:1.6rem;opacity:0;transform:translateY(24px);transition:opacity .35s var(--out),transform .6s var(--out)}
.slide.on .slide-text{opacity:1;transform:none;transition-delay:.25s}
.moving .slide-text{opacity:0!important;transform:translateY(24px)!important;transition-delay:0s!important}
.slide-text h2{font-size:clamp(1.6rem,3.2vw,3rem);letter-spacing:.14em;text-transform:uppercase;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid rgba(242,235,224,.35);max-width:max-content}
.slide-text p{color:rgba(242,235,224,.9);font-size:.98rem;max-width:34rem}
.stage-top{position:absolute;z-index:5;left:var(--gut);top:clamp(5.5rem,13vh,7.5rem);margin:0}
.stage-ui{position:absolute;z-index:5;right:var(--gut);bottom:2.2rem;display:flex;align-items:center;gap:1.25rem;color:var(--mute)}
.roman{display:flex;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.5rem;color:var(--ink);min-width:12rem}
.roman b{font-weight:400;min-width:1.6em;text-align:right}
.roman .bar{flex:1}
.bar{flex:1;height:1px;background:var(--line);position:relative}
.bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}

/* MASONRY photo walls */
.wall{columns:3;column-gap:1.5rem}
.ph{display:block;width:100%;break-inside:avoid;margin-bottom:1.5rem;overflow:hidden;border-radius:12px;background:#1b1713;cursor:zoom-in;border:0;padding:0;position:relative}
.ph img{width:100%;height:auto;transition:transform .6s var(--out)}
@media (hover:hover) and (pointer:fine){.ph:hover img{transform:scale(1.03)}}
.ph .tag{position:absolute;left:.75rem;top:.75rem;background:rgba(14,12,10,.84);color:var(--ink);font:500 .84rem var(--sans);letter-spacing:.04em;padding:.3rem .75rem;border-radius:999px}
.more{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;font-weight:500;color:var(--gold);position:relative;padding-bottom:.2rem}
.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--out)}
.more:hover::after{transform:scaleX(1)}

/* STRIP: sideways gallery */
.strip{position:relative;padding:clamp(6.5rem,13vh,8rem) 0 clamp(4rem,10vh,7rem)}
.strip-pin{display:flex;flex-direction:column;gap:2rem}
.strip-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.strip-head{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 2rem;flex-wrap:wrap}
.strip .title{margin-bottom:0}
.track{display:flex;gap:1.5rem;padding:0 var(--gut);align-items:stretch;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}
.track .ph{height:54vh;width:auto;margin:0;flex:none}
.track .ph img{height:100%;width:auto;max-width:84vw;object-fit:cover}
.track .end{flex:none;width:min(70vw,24rem);height:54vh;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;transition:border-color .15s var(--out),background .15s var(--out)}
.track .end b{font-family:var(--serif);font-weight:300;font-size:2.4rem;line-height:1.05;margin-bottom:.75rem}
.track .end span{color:var(--gold);font-weight:500}
.track .end:hover{border-color:var(--gold);background:rgba(201,150,91,.06)}

/* CATALOG COVERFLOW: glass cards in an arc over the blurred black kitchen */
.cflow{--cw:min(44vw,34rem,58svh);position:relative;padding:clamp(6.5rem,13vh,8rem) 0 clamp(3.5rem,8vh,5rem);overflow:hidden;isolation:isolate}
.cflow-bg{position:absolute;inset:-40px;z-index:-1;background:url(img/blackkitchen.jpg) center/cover;filter:blur(5px) brightness(.72)}
.cflow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(14,12,10,0) 22%,rgba(14,12,10,0) 78%,var(--bg))}
.cflow .title{margin-bottom:0}
.cf-stage{position:relative;height:calc(var(--cw)*.75 + 4.6rem);margin-top:1.75rem;perspective:1500px}
.cf-card{position:absolute;left:50%;top:0;width:var(--cw);margin-left:calc(var(--cw)/-2);padding:.7rem;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 34px 60px -22px rgba(0,0,0,.8);transition:transform .7s var(--enter),opacity .5s var(--out),filter .5s var(--out);cursor:pointer}
.cf-card .ph{margin:0;border-radius:14px;aspect-ratio:4/3}
.cf-card .ph img{height:100%;object-fit:cover}
.cf-card:not(.cur) .ph{cursor:pointer}
.cf-card .ph img{transition:filter .5s var(--out),transform .6s var(--out)}
.cf-card:not(.cur) .ph img{filter:brightness(.5)}
.cf-info{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem .5rem .35rem;transition:opacity .4s var(--out)}
.cf-info b{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1}
.cf-info span{color:rgba(242,235,224,.75);font-size:.86rem}
.cf-card:not(.cur) .cf-info{opacity:0}
.cf-end a{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;padding:1.75rem;border-radius:14px;border:1px solid rgba(201,150,91,.5);background:rgba(14,12,10,.55)}
.cf-end b{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;margin-bottom:.6rem}
.cf-end span{color:var(--gold);font-weight:500}
.cf-ui{display:flex;align-items:center;gap:1rem;width:max-content;margin:1.25rem auto 0;padding:.4rem;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cf-arrow{width:48px;height:48px;border-radius:50%;border:0;background:rgba(14,12,10,.55);color:var(--ink);font-size:1.15rem;cursor:pointer;transition:background .15s var(--out),color .15s var(--out)}
.cf-arrow:hover{background:var(--gold);color:#17110a}
.cf-arrow:disabled{opacity:.3;pointer-events:none}
.cf-dots{display:flex;gap:.45rem}
.cf-dots i{width:6px;height:6px;border-radius:50%;background:rgba(242,235,224,.35);transition:background .3s,width .3s var(--out)}
.cf-dots i.on{background:var(--gold);width:18px;border-radius:3px}

.ph[hidden]{display:none}
.wall.two{columns:2}
.ph-more{position:relative;break-inside:avoid;margin-bottom:1.5rem}
.ph-more .ph{margin-bottom:0}
.more-chip{position:absolute;right:.9rem;bottom:.9rem;z-index:2;min-height:48px;padding:0 1.35rem;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:#17110a;font:600 .95rem var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:background .15s var(--out),transform .2s var(--out)}
.more-chip:hover{background:#dcae77;transform:translateY(-2px)}

/* GROW */
.grow{height:260vh;position:relative}
.grow-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1vh;pointer-events:none}
.row{white-space:nowrap;font-family:var(--serif);font-size:clamp(4.5rem,16vw,16rem);line-height:1;color:var(--ink);will-change:transform}
.row.outline{color:transparent;-webkit-text-stroke:1px rgba(201,150,91,.75)}
.grow-img{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;will-change:clip-path}
.grow-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.86),rgba(14,12,10,0) 55%)}
.grow-text{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(3.5rem,10vh,6.5rem);opacity:0;will-change:transform,opacity}
.grow-text h2{font-size:clamp(2.2rem,5vw,4.8rem);margin-bottom:1rem}

/* PROCESS */
.process{display:grid;grid-template-columns:1fr 1fr;min-height:92vh}
.card-side{display:flex;align-items:center;justify-content:center;padding:clamp(4rem,10vh,7rem) var(--gut);background:radial-gradient(90% 70% at 45% 45%,#3a2f24,#17130f 75%)}
.vcard{width:min(100%,36rem);display:flex;flex-direction:column;gap:1.6rem;padding:clamp(1.5rem,3vw,2.4rem);border-radius:10px;background:linear-gradient(140deg,#1d1b19,#111010 55%,#171513);color:var(--ink);border:1px solid rgba(201,150,91,.28);box-shadow:0 40px 70px -24px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07) inset;rotate:-2.5deg;transition:rotate .5s var(--out),translate .5s var(--out);position:relative}
.vcard::before{content:"";position:absolute;left:clamp(1.5rem,3vw,2.4rem);right:clamp(1.5rem,3vw,2.4rem);top:0;height:3px;background:var(--gold)}
@media (hover:hover) and (pointer:fine){.vcard:hover{rotate:0deg;translate:0 -6px}}
.vc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.vc-name{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1}
.vc-name i{font-style:normal;color:var(--gold)}
.vc-what{font-size:.78rem;line-height:1.5;text-align:right;color:var(--mute);letter-spacing:.02em}
.vc-q{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2;max-width:22ch}
.vc-bottom{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;align-items:end}
.vc-tel{grid-column:1/-1;font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1;color:var(--gold)}
.vc-fb{font-weight:500;font-size:.92rem;color:var(--ink);min-height:32px;display:inline-flex;align-items:center}
.vc-tel:hover,.vc-fb:hover{color:#e6bd8a}
.vc-where{font-size:.82rem;color:var(--mute);text-align:right}
.vc-people{display:grid;gap:1.25rem}
.vc-person{padding-top:1.1rem;border-top:1px solid rgba(201,150,91,.3)}
.vc-person b{display:block;font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1}
.vc-role{display:block;font-size:.8rem;letter-spacing:.03em;color:var(--mute);margin:.3rem 0 .6rem;max-width:34ch}
.vc-num{font-family:var(--serif);font-size:1.55rem;color:var(--gold);line-height:1;margin-bottom:.7rem}
.vc-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.vc-btn{min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid rgba(242,235,224,.35);display:inline-flex;align-items:center;font-size:.88rem;font-weight:500;transition:background .15s var(--out),border-color .15s var(--out)}
.vc-btn:first-child{background:var(--gold);border-color:var(--gold);color:#17110a}
.vc-btn:hover{border-color:var(--gold);background:rgba(201,150,91,.16)}
.vc-btn:first-child:hover{background:#dcae77}
.vc-mail{display:inline-block;margin-top:.7rem;font-size:.84rem;color:var(--mute);word-break:break-all}
.vc-mail:hover{color:var(--ink)}
.process-body{padding:clamp(5rem,12vh,8rem) var(--gut);align-self:center}
.process ol{list-style:none;margin-top:2rem}
.process li{padding:1.4rem 0;border-top:1px solid var(--line)}
.process li b{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.2;margin-bottom:.25rem}
.process li span{color:var(--mute)}

/* CONTACT */
.contact{min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(6rem,15vh,9rem) var(--gut)}
.huge{font-size:clamp(2.9rem,9vw,8.6rem);margin-bottom:1.75rem}
.where{color:var(--mute);margin-top:2rem}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem var(--gut);border-top:1px solid var(--line);font-size:.88rem;color:var(--mute)}
footer a:hover{color:var(--ink)}

/* CATALOG PAGE */
.page-head{padding:clamp(8rem,22vh,12rem) var(--gut) 3rem}
.page-head h1{font-size:clamp(3rem,9vw,8rem);margin-bottom:1.5rem}
.cat{padding:0 var(--gut) clamp(4rem,9vh,6rem)}

/* HOLOGRAM CATALOG: a projector on the floor shows two kitchens at a time */
.holo{--hh:min(46svh,30vw);--cy:#7fe6ff;position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#05090b}
.holo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.holo-head{position:absolute;top:clamp(4.8rem,11vh,6.2rem);left:var(--gut);right:var(--gut);text-align:center}
.holo-head h1{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.holo-head .kicker{margin-bottom:.4rem;color:var(--cy)}
.holo-pair{position:absolute;left:0;right:0;top:calc(clamp(4.8rem,11vh,6.2rem) + clamp(5.4rem,12vh,7rem));display:flex;justify-content:center;align-items:flex-start;gap:clamp(1.5rem,6vw,6rem);perspective:1500px}
.hcard{position:relative;height:var(--hh);aspect-ratio:var(--r,1.333);max-width:44vw;border:1px solid rgba(127,230,255,.75);border-radius:4px;padding:0;background:rgba(127,230,255,.06);cursor:zoom-in;overflow:visible;box-shadow:0 0 34px rgba(90,220,255,.42),inset 0 0 22px rgba(90,220,255,.25);transition:transform .22s cubic-bezier(.65,0,.35,1),filter .22s,opacity .22s;animation:holo 4.2s infinite steps(1)}
.hcard.l{transform:rotateY(13deg)}
.hcard.r{transform:rotateY(-13deg)}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;opacity:.9;filter:saturate(.7) brightness(1.1) contrast(1.05);transition:filter .3s var(--out),opacity .3s var(--out)}
.hcard .tint,.hcard .scan{position:absolute;inset:0;border-radius:3px;pointer-events:none;transition:opacity .3s var(--out)}
.hcard .tint{background:linear-gradient(180deg,rgba(90,220,255,.26),rgba(40,160,220,.14));mix-blend-mode:screen}
.hcard .scan{background:repeating-linear-gradient(0deg,rgba(0,20,30,.28) 0 1px,transparent 1px 3px);animation:scan 6s linear infinite}
@keyframes scan{to{background-position:0 60px}}
@keyframes holo{0%,100%{opacity:.96}47%{opacity:.86}49%{opacity:.97}71%{opacity:.9}73%{opacity:.96}}
.hnum{position:absolute;left:0;top:100%;margin-top:.6rem;color:var(--cy);font:500 .95rem var(--sans);letter-spacing:.16em;text-shadow:0 0 12px rgba(90,220,255,.8)}
.hcard.r .hnum{left:auto;right:0}
.hcard.off{transform:scaleY(.004);filter:brightness(5);opacity:.5}
.hcard[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .hcard:hover img{filter:none;opacity:1}
  .hcard:hover .tint,.hcard:hover .scan{opacity:0}
}
.holo-ui{position:absolute;left:0;right:0;bottom:1.25rem;display:flex;justify-content:center;align-items:center;gap:1.25rem;color:var(--ink)}
.holo-ui .lb-btn{border-color:rgba(127,230,255,.6);background:rgba(5,9,11,.55)}
.holo-ui .lb-btn:hover{border-color:var(--cy);background:rgba(90,220,255,.18)}
#holoPos{min-width:10rem;text-align:center;text-shadow:0 1px 10px #000}
.cat-head{padding-bottom:2.5rem}
.cat-head .sec-head{margin-bottom:1.5rem}
@media (max-width:760px){
  .holo{--hh:24svh;min-height:640px}
  .holo-pair{flex-direction:column;align-items:center;gap:2.6rem}
  .hcard{max-width:86vw}
  .hcard.l,.hcard.r{transform:none}
  .hcard.r .hnum{left:0;right:auto}
}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--enter),transform .8s var(--enter)}
.reveal.in{opacity:1;transform:none}
.ph.wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--enter),transform .6s var(--out)}
.ph.wipe.in img{clip-path:inset(0)}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,7,6,.96);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s var(--out)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox>img{max-width:92vw;max-height:78vh;border-radius:8px;transform:scale(.97);transition:transform .3s var(--out)}
.lightbox.open>img{transform:none}
.lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.1rem var(--gut);flex-wrap:wrap}
.lb-cap{color:var(--ink);font-weight:500;min-width:4.5rem;text-align:center}
.lb-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(242,235,224,.35);background:none;color:var(--ink);font-size:1.2rem;cursor:pointer;transition:border-color .15s,background .15s}
.lb-btn:hover{border-color:var(--gold);background:rgba(201,150,91,.12)}
.lb-close{position:absolute;top:1rem;right:var(--gut)}

/* MOBILE */
@media (max-width:980px){
  .links{display:none}.burger{display:inline-flex;align-items:center}
  .wall{columns:2;column-gap:1rem}.ph{margin-bottom:1rem}
  .way{grid-template-columns:1fr auto;gap:.5rem 1.5rem}
  .way p{grid-column:1;grid-row:2}
  .way .go{grid-row:1 / span 2;grid-column:2}
  .process{grid-template-columns:1fr}
  .track .ph,.track .end{height:44vh}
}
@media (max-width:980px){
  .intro{min-height:640px}
  .intro-head{bottom:calc(clamp(1.5rem,5vh,3rem) + 10.5rem)}
  .replay{top:4.6rem}
  .opts{grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
  .opt:nth-child(3){grid-column:auto}
  .opt.r{text-align:left}
  .opt b{font-size:1.45rem;white-space:normal}
}
}
@media (max-width:560px){
  .nav .btn-small{display:none}
  .wall,.wall.two{columns:1}
  .sec-head{margin-bottom:2rem}
  .track{gap:1rem}
  .hero .actions .btn{flex:1}
}
@media (max-width:760px){
  /* phone: show the whole kitchen, with the headline and choices under it */
  .intro{height:auto;min-height:0;padding-top:4.25rem}
  .asm{position:relative;left:auto;top:auto;transform:none;width:100%}
  .intro-shade{display:none}
  .intro-head{position:static;padding:1.5rem var(--gut) 0}
  .opts{position:static;margin:1.25rem var(--gut) 2.25rem}
  .replay{top:4.9rem;right:.75rem;min-height:34px;font-size:.8rem}
  .cflow{--cw:min(76vw,58svh)}
  .cf-card,.cf-ui{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(34,29,24,.88)}
  .cflow-bg{filter:brightness(.5);inset:0}
  /* phone: finished kitchens are shown whole, not cropped */
  .slide-img{inset:4.2rem .6rem 12.5rem}
  .slide-img::before{inset:-4.2rem -.6rem -12.5rem}
  .slide-text{right:var(--gut);bottom:5rem}
  .slide-text h2{font-size:1.45rem;letter-spacing:.1em}
  .stage-ui{left:50%;right:auto;transform:translateX(-50%);bottom:1.2rem}
  .card-side{order:2;padding:1rem var(--gut) 4rem}
  .vcard{rotate:-1deg}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .line>i,.hero .kicker{animation:none;opacity:1;transform:none}
  .opt{opacity:1;transform:none;animation:none}
  .leaf,.book{transition:none}
  .first .mag-next,.btn.pulse{animation:none}
  .cf-card,.rail,.slide-img{transition:none}
  .hcard,.hcard .scan{animation:none}
  .reveal,.ph.wipe img{opacity:1;transform:none;clip-path:none;transition:none}
  .ph img{transition:none}
}