@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
/* coffee-bean palette: dark roast brown, latte cream text, caramel accent */
:root{--bg:#1d130d;--bg2:#26180f;--fg:#f4e8d8;--mut:#a89280;--line:#3b2a1f;--card:#2a1b12;--acc:#c58a50;--ease:cubic-bezier(.76,0,.24,1);--out:cubic-bezier(.16,1,.3,1);--glow:#ffb066}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:'Outfit',system-ui,Arial,sans-serif;line-height:1.4;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--fg);color:var(--bg)}
body.lock{overflow:hidden}
main,.foot,.cta{position:relative;z-index:2}

/* ---------- loader + curtain ---------- */
.pre{position:fixed;inset:0;background:var(--bg);z-index:100;display:grid;place-items:center;transition:transform 1s var(--ease)}
.pre.out{transform:translateY(-100%)}
.pre-in{display:flex;align-items:center;gap:28px;font-weight:600;letter-spacing:.12em;font-size:clamp(14px,1.6vw,20px)}
.pre-in i{display:block;width:clamp(90px,16vw,240px);height:1px;background:#4a372a;position:relative;overflow:hidden}
.pre-in b{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease)}
.pre.go b{transform:scaleX(1)}
.pre-in span{opacity:0;transition:opacity .8s .1s}.pre.go .pre-in span{opacity:1}
.curtain{position:fixed;inset:0;background:var(--bg);z-index:90;transform:translateY(100%);pointer-events:none;transition:transform .8s var(--ease)}
.curtain.in{transform:none;pointer-events:all}
.curtain.out{transform:translateY(-100%)}
html.cover .curtain{transform:none;transition:none}
.curtain::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(244,232,216,.4)}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;z-index:200;pointer-events:none;transition:width .3s,height .3s,margin .3s}
.cur.big{width:60px;height:60px;margin:-30px 0 0 -30px}
@media(hover:none){.cur{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 3.2vw;transition:transform .6s var(--out)}
.nav.hide{transform:translateY(-120%)}
.brand{display:flex;align-items:center;font-weight:700;letter-spacing:.06em;font-size:clamp(20px,2vw,28px)}
.brand .mono{display:grid;place-items:center;width:38px;height:38px;font-size:30px;font-weight:700;letter-spacing:0}
.brand .word{display:none}
body[data-page=home] .brand .mono{display:none}
body[data-page=home] .brand .word{display:block}
.nav nav{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500}
.nav nav a:not(.glow){display:flex;align-items:center;gap:10px;opacity:.85;transition:opacity .3s}
.nav nav a:not(.glow):hover{opacity:1}
.nav nav a i{display:block;width:6px;height:6px;border-radius:50%;background:var(--fg);transform:scale(0);transition:transform .4s var(--out)}
.nav nav a.on i{transform:scale(1)}
body[data-page=home] .nav nav a:not(.on) i{width:18px;height:1px;border-radius:0;transform:scaleX(0)}
.glow{background:var(--fg);color:var(--bg);padding:14px 28px;border-radius:99px;font-weight:600;box-shadow:0 0 28px 4px rgba(255,170,90,.55);transition:box-shadow .4s,transform .4s var(--out)}
.glow:hover{box-shadow:0 0 50px 10px rgba(255,170,90,.8);transform:scale(1.05)}
@media(max-width:700px){.nav nav a:not(.glow){display:none}.glow{padding:11px 20px}}

/* ---------- shared bits ---------- */
.cpill{display:inline-block;border:1px solid var(--pc);color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);padding:7px 20px;border-radius:99px;font-size:14px;font-weight:500;white-space:nowrap}
.pillbtn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:99px;border:1px solid rgba(244,232,216,.35);font-weight:500;transition:.4s var(--out)}
.pillbtn:hover{background:var(--fg);color:var(--bg)}
.pillbtn.solid{background:var(--fg);color:var(--bg)}
.pillbtn.solid:hover{box-shadow:0 0 40px rgba(255,170,90,.7)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(115%);transition:transform 1.1s var(--out);transition-delay:calc(var(--i)*35ms)}
.in .w>span,.w.in>span{transform:none}
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1.1s var(--out),transform 1.1s var(--out)}
.reveal.in{opacity:1;transform:none}
.label{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
.wrap{padding:0 3.2vw}
h2.big{font-size:clamp(34px,6.2vw,96px);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.hr{height:1px;background:var(--line)}

/* art */
.art{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 38%,var(--a) -40%,var(--b) 75%)}
.art .glow{position:absolute;inset:auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--a);filter:blur(60px);opacity:.35;box-shadow:none;padding:0}
.art svg{position:relative;width:62%;max-width:360px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.art .st path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round;animation:steam 3s infinite ease-in-out}
.art .st path:nth-child(2){animation-delay:.5s}.art .st path:nth-child(3){animation-delay:1s}
@keyframes steam{0%,100%{transform:translateY(8px);opacity:.1}50%{transform:translateY(-8px);opacity:.9}}

/* ---------- HOME ---------- */
.hero{position:relative;height:100vh;min-height:560px;display:grid;place-items:center;overflow:hidden}
#fx{position:absolute;inset:0;width:100%;height:100%}
.hero .side{position:absolute;top:50%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#b9a590;opacity:0;transition:opacity 1.4s 1.2s}
.hero .side.l{left:3.2vw}.hero .side.r{right:3.2vw}
html.ready .hero .side{opacity:1}
.hero-in{position:relative;text-align:center;pointer-events:none}
.hero h1{font-size:clamp(40px,10vw,170px);font-weight:700;letter-spacing:.04em;line-height:.95;display:flex;flex-direction:column;align-items:center}
.hero h1 .w{padding-bottom:.08em}
html.ready .hero h1 .w>span{transform:none}
.hero .scroll{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);padding:13px 26px;border-radius:99px;background:rgba(244,232,216,.08);backdrop-filter:blur(10px);font-size:14px;display:flex;gap:10px;align-items:center;opacity:0;transition:opacity 1s 1.6s}
html.ready .hero .scroll{opacity:1}
.scroll b{display:inline-block;animation:bob 1.6s infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.intro{padding:24vh 3.2vw}
.intro p{font-size:clamp(26px,4.4vw,68px);font-weight:500;line-height:1.12;letter-spacing:-.02em;max-width:1300px}
.intro p span{opacity:.2;transition:opacity .25s}
.intro p span.on{opacity:1}
.feat{padding:8vh 3.2vw 16vh}
.feat .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:5vh}
.frow{display:flex;justify-content:space-between;align-items:center;padding:clamp(22px,3.4vw,44px) 0;border-top:1px solid var(--line);position:relative}
.frow:last-child{border-bottom:1px solid var(--line)}
.frow h3{font-size:clamp(26px,4.2vw,64px);font-weight:500;letter-spacing:-.02em;transition:transform .6s var(--out),opacity .4s}
.frow .cpill{opacity:0;transform:translateX(-14px);transition:.5s var(--out)}
.frow .arr{font-size:34px;transition:transform .5s var(--out)}
.frow:hover h3{transform:translateX(26px)}
.frow:hover .cpill{opacity:1;transform:none}
.frow:hover .arr{transform:translateX(-12px)}
.feat:hover .frow:not(:hover) h3{opacity:.3}
.prev{position:fixed;left:0;top:0;width:min(26vw,360px);aspect-ratio:4/5;z-index:30;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s var(--out);border-radius:14px;overflow:hidden}
.prev.on{opacity:1;transform:scale(1)}
@media(max-width:800px){.prev{display:none}.frow .cpill{opacity:1;transform:none}}
.cta{padding:20vh 3.2vw 16vh;text-align:center}
.cta h2{margin:0 auto 5vh;max-width:1100px}
.cta .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:34px 3.2vw;border-top:1px solid var(--line);color:var(--mut);font-size:14px}
.foot a:hover{color:var(--fg)}

/* ---------- MENU (works) ---------- */
body[data-page=menu]{overflow:hidden;height:100vh}
.stage-wrap{position:fixed;inset:0;perspective:1500px;overflow:hidden}
.stage{position:absolute;left:0;right:0;top:11vh;height:46vh;transform-style:preserve-3d;transition:transform .2s linear}
.panel{position:absolute;left:50%;top:0;width:25vw;min-width:200px;height:100%;border-radius:6px;overflow:hidden;cursor:pointer;will-change:transform,opacity;backface-visibility:hidden}
.panel .art{height:100%}
.floor{position:fixed;left:0;right:0;top:38vh;height:34vh;background:linear-gradient(transparent,var(--bg) 85%);z-index:2;pointer-events:none}
.shade{position:fixed;inset:0;z-index:3;pointer-events:none;background:linear-gradient(var(--bg) 0,transparent 16%,transparent 52%,var(--bg) 96%)}
.rows{position:fixed;left:0;right:0;top:73vh;height:0;z-index:5}
.band{position:fixed;left:0;right:0;top:calc(73vh - 42px);height:84px;background:rgba(244,232,216,.13);backdrop-filter:blur(14px);z-index:4;pointer-events:none}
.row{position:absolute;left:50%;top:-40px;height:80px;width:min(540px,88vw);margin-left:calc(min(540px,88vw)/-2);display:flex;align-items:center;justify-content:space-between;font-size:clamp(20px,2.1vw,30px);font-weight:500;cursor:pointer;will-change:transform,opacity;user-select:none}
.count{position:fixed;left:3.2vw;bottom:5vh;z-index:6;font-size:14px;color:var(--mut);letter-spacing:.1em}
.count b{color:var(--fg);font-weight:500}
.hint{position:fixed;left:50%;bottom:5vh;transform:translateX(-50%);z-index:6;font-size:13px;color:var(--mut);transition:opacity .6s}
.fbtn{position:fixed;right:3.2vw;bottom:4vh;z-index:60;display:flex;align-items:center;gap:14px;padding:16px 26px;border-radius:99px;background:rgba(244,232,216,.12);backdrop-filter:blur(14px);font-weight:500;transition:background .3s}
.fbtn:hover{background:rgba(244,232,216,.22)}
.fbtn i{font-style:normal;transition:transform .4s var(--out)}
.fbtn.open i{transform:rotate(90deg)}
.fpanel{position:fixed;right:3.2vw;bottom:calc(4vh + 70px);z-index:60;width:min(340px,92vw);padding:24px;border-radius:24px;background:rgba(38,24,15,.88);backdrop-filter:blur(20px);border:1px solid var(--line);opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;transition:.5s var(--out)}
.fpanel.open{opacity:1;transform:none;pointer-events:all}
.fpanel h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:16px;font-weight:500}
.fpanel .pills{display:flex;flex-wrap:wrap;gap:10px}
.fpanel .cpill{cursor:pointer;opacity:.4;transition:.3s}
.fpanel .cpill.on{opacity:1}
.fpanel .reset{margin-top:18px;font-size:13px;color:var(--mut);text-decoration:underline}

/* ---------- ITEM (project) ---------- */
.close{position:fixed;top:22px;left:3.2vw;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 22px;border-radius:99px;background:rgba(244,232,216,.12);backdrop-filter:blur(14px);font-weight:500;font-size:15px}
.close:hover{background:var(--fg);color:var(--bg)}
.item-hero{position:relative;height:100vh;min-height:620px;display:flex;align-items:flex-end;padding:0 3.2vw 7vh;overflow:hidden}
.item-hero .bg{position:absolute;inset:-10% 0;opacity:.9}
.item-hero .bg .art svg{width:min(46vw,520px);margin-left:auto;margin-right:12vw}
.item-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--bg) 100%),linear-gradient(90deg,var(--bg) 0,transparent 60%)}
.item-hero .t{position:relative;z-index:2;max-width:900px}
.item-hero h1{font-size:clamp(46px,9vw,150px);font-weight:700;letter-spacing:-.03em;line-height:.95;margin:18px 0 22px}
.item-hero .tags{display:flex;flex-direction:column;gap:6px;color:#d6c4b0;font-size:clamp(16px,1.6vw,22px)}
.brief{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:16vh 3.2vw}
.brief h3{font-size:clamp(28px,3.4vw,54px);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin-bottom:26px}
.brief p{color:#c8b6a2;font-size:clamp(17px,1.5vw,22px);max-width:560px}
.meta{display:grid;gap:30px;align-content:start}
.meta div{border-top:1px solid var(--line);padding-top:16px}
.meta small{display:block;font-size:12px;letter-spacing:.16em;color:var(--mut);margin-bottom:6px}
.meta span{font-size:clamp(20px,2vw,30px);font-weight:500}
.blk{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:8vh 3.2vw}
.blk:nth-of-type(even) .bimg{order:2}
.bimg{aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.bimg .art svg{transition:transform 1.4s var(--out)}
.blk:hover .bimg .art svg{transform:scale(1.08) rotate(-3deg)}
.blk h3{font-size:clamp(26px,3.4vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin-bottom:22px}
.blk p{color:#c8b6a2;font-size:clamp(17px,1.5vw,21px);margin-bottom:16px;max-width:520px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:12vh 3.2vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8vh 0}
.stats b{display:block;font-size:clamp(40px,6.4vw,100px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stats span{color:var(--mut);font-size:15px}
.related{padding:12vh 3.2vw}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:5vh}
.rcard{display:block;transition:transform .6s var(--out)}
.rcard .im{aspect-ratio:4/3;border-radius:6px;overflow:hidden;margin-bottom:16px}
.rcard:hover{transform:translateY(-8px)}
.rcard div.n{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:500}
@media(max-width:800px){.brief,.blk{grid-template-columns:1fr}.blk:nth-of-type(even) .bimg{order:0}.stats{grid-template-columns:1fr 1fr}.rgrid{grid-template-columns:1fr}.item-hero .bg .art svg{margin-right:auto;width:70vw}}

/* ---------- ABOUT ---------- */
.a-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:16vh 3.2vw 8vh;position:relative}
.a-hero .sc{position:absolute;top:14vh;right:3.2vw;font-size:13px;color:var(--mut)}
.a-hero h1{font-size:clamp(44px,9.4vw,160px);font-weight:700;line-height:.96;letter-spacing:-.03em;margin-bottom:6vh}
.a-hero p{max-width:620px;color:#c8b6a2;font-size:clamp(17px,1.5vw,22px)}
.a-hero .tg{margin-top:5vh;font-size:clamp(20px,2.4vw,34px);font-weight:500;line-height:1.2}
.a-hero .tg em{font-style:normal;color:var(--mut)}
.mq-rows{padding:10vh 0;overflow:hidden}
.mq{white-space:nowrap;font-size:clamp(46px,9vw,150px);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.mq div{display:inline-block;animation:mq 30s linear infinite}
.mq.rev div{animation-direction:reverse}
.mq span{margin-right:.5em}
.mq .soon{color:transparent;-webkit-text-stroke:1px #7a6554}
.mq.o div{animation-duration:42s}
@keyframes mq{to{transform:translateX(-50%)}}
.exp{display:grid;grid-template-columns:1.1fr 2fr;gap:6vw;padding:14vh 3.2vw}
.exp h2{font-size:clamp(34px,5vw,80px);font-weight:600;letter-spacing:-.02em;line-height:1}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cols h4{font-size:14px;letter-spacing:.16em;color:var(--mut);margin-bottom:22px;font-weight:500}
.cols li{list-style:none;padding:12px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.5vw,22px);transition:padding .4s var(--out)}
.cols li:hover{padding-left:12px}
.who{padding:8vh 3.2vw 14vh}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:5vh}
.chips span{padding:14px 30px;border:1px solid #4a372a;border-radius:99px;font-size:clamp(16px,1.6vw,24px);transition:.4s var(--out)}
.chips span:hover{background:var(--fg);color:var(--bg);transform:translateY(-4px)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:12vh 3.2vw;border-top:1px solid var(--line)}
.story h2{font-size:clamp(30px,4.6vw,72px);font-weight:600;letter-spacing:-.02em;line-height:1.04}
.story p{color:#c8b6a2;font-size:clamp(17px,1.5vw,22px);margin-bottom:22px;max-width:640px}
.proc{padding:12vh 3.2vw}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:6vh;border-top:1px solid var(--line)}
.step{padding:34px 28px 50px 0;border-bottom:1px solid var(--line);transition:background .5s}
.step small{display:block;color:var(--mut);margin-bottom:60px;font-size:15px}
.step h4{font-size:clamp(22px,2.2vw,34px);font-weight:600;margin-bottom:12px}
.step p{color:var(--mut);max-width:340px}
.step:hover{background:rgba(244,232,216,.04)}
.testi{padding:12vh 3.2vw}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:5vh}
.tc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;transition:.5s var(--out)}
.tc:hover{border-color:#5a4434;transform:translateY(-6px)}
.tc p{font-size:clamp(17px,1.4vw,20px);color:#eadbc8}
.tc b{display:block;font-weight:600}.tc span{color:var(--mut);font-size:14px}
@media(max-width:900px){.exp,.story{grid-template-columns:1fr}.cols,.steps,.tcards{grid-template-columns:1fr}}

/* ---------- CONTACT ---------- */
.c-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:20vh 3.2vw 10vh}
.c-wrap h1{font-size:clamp(44px,8vw,130px);font-weight:700;letter-spacing:-.03em;line-height:.95}
.c-info{margin-top:6vh;color:#c8b6a2;display:grid;gap:22px;font-size:clamp(17px,1.5vw,22px)}
.c-info small{display:block;font-size:12px;letter-spacing:.16em;color:var(--mut);margin-bottom:4px}
form{display:grid;gap:18px;align-content:start}
.fld{position:relative}
.fld input,.fld textarea,.fld select{width:100%;background:transparent;border:0;border-bottom:1px solid #4a372a;color:var(--fg);font:inherit;font-size:clamp(18px,1.6vw,24px);padding:26px 0 12px;outline:none;transition:border .3s;border-radius:0}
.fld label{position:absolute;left:0;top:26px;color:var(--mut);transition:.3s var(--out);pointer-events:none;font-size:clamp(18px,1.6vw,24px)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--fg)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{top:0;font-size:13px}
.thanks{font-size:clamp(26px,3vw,44px);font-weight:600}
@media(max-width:900px){.c-wrap{grid-template-columns:1fr}}




/* ================= TERRA-STYLE UI: typography ================= */
body{font-family:'Manrope','Outfit',system-ui,sans-serif}
h1,h2,h3,.big,.frow h3,.pre-in span{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:italic;color:#e3c39a}
.nav nav a,.pillbtn,.cpill,.label,.foot,.hero .scroll,.fbtn,.close{font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.03em}
.nav nav a{font-size:13px}
.brand .word{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:500;letter-spacing:0;text-transform:none}

/* ================= TOUR (scroll-driven video chapters) ================= */
.tour{position:relative;height:640vh;z-index:3;background:#120b07}
.tr-stage{position:sticky;top:0;height:100vh;overflow:hidden;color:#f4e8d8}
.tr-vids{position:absolute;inset:0;background:#120b07;z-index:0;isolation:isolate}.tr-shade{z-index:1}.tr-copy,.tr-prog,.tr-side,.tr-est,.tr-ctl,.tr-chap{z-index:3}
.tr-vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,transform;transform-origin:60% 50%}
.tr-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,8,4,.82) 0%,rgba(14,8,4,.5) 38%,rgba(14,8,4,.1) 72%),linear-gradient(0deg,rgba(14,8,4,.65),transparent 32%),linear-gradient(180deg,rgba(14,8,4,.55),transparent 22%)}
.tr-chap{position:absolute;top:30px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5;font-family:'DM Mono',monospace;font-size:13px}
.tr-chap button{background:none;border:0;color:rgba(244,232,216,.7);cursor:pointer;padding:8px 12px;border-radius:99px;font:inherit;transition:color .3s,background .3s}
.tr-chap button i{font-style:normal;color:#c58a50;margin-right:6px}
.tr-chap button:hover{color:#fff}.tr-chap button.on{color:#fff;background:rgba(244,232,216,.12);backdrop-filter:blur(8px)}
.tr-copy{position:absolute;left:4.2vw;bottom:15vh;width:min(560px,86vw);height:46vh}
.tc-b{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden;will-change:transform,opacity}
.tc-b small{display:block;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.2em;color:#c58a50;margin-bottom:18px}
.tc-b h1{font-size:clamp(40px,6vw,92px);line-height:.98;font-weight:500;letter-spacing:-.03em;margin-bottom:22px;text-transform:none}
.tc-b p{font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(244,232,216,.82);max-width:440px}
.tr-link{display:inline-flex;gap:10px;margin-top:26px;font-family:'DM Mono',monospace;font-size:14px;padding-bottom:8px;border-bottom:1px solid rgba(244,232,216,.5);transition:gap .3s,border-color .3s}
.tr-link:hover{gap:16px;border-color:#fff}
.tr-stat{margin-top:26px}.tr-stat b{display:block;font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(40px,4.4vw,64px);color:#e3c39a}
.tr-stat span{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.18em;color:rgba(244,232,216,.7)}
.tr-prog{position:absolute;left:4.2vw;bottom:5.5vh;display:flex;align-items:center;gap:14px;font-family:'DM Mono',monospace;font-size:13px;color:rgba(244,232,216,.8)}
.tr-prog i{display:block;width:clamp(90px,12vw,170px);height:1px;background:rgba(244,232,216,.3);overflow:hidden}
.tr-prog b{display:block;height:100%;background:#e3c39a;transform-origin:0 0;transform:scaleX(0)}
.tr-side{position:absolute;right:3vw;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.25em;color:rgba(244,232,216,.6)}
.tr-est{position:absolute;right:4vw;bottom:15vh;text-align:right;display:flex;flex-direction:column;font-family:'DM Mono',monospace}
.tr-est small{font-size:11px;letter-spacing:.2em;color:rgba(244,232,216,.7)}
.tr-est b{font-family:'Playfair Display',serif;font-weight:500;font-size:34px;line-height:1.2}
.tr-ctl{position:absolute;right:3vw;bottom:4vh;display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(20,12,7,.6);backdrop-filter:blur(14px);border:1px solid rgba(244,232,216,.14)}
.tr-ctl button{border:0;cursor:pointer;border-radius:99px;font:600 13px 'Manrope',sans-serif;padding:11px 18px;background:transparent;color:#f4e8d8;display:flex;gap:10px;align-items:center;transition:background .3s}
.tr-ctl #trPlay{background:#f4e8d8;color:#1d130d}.tr-ctl #trPlay.on{background:#e3c39a}
.tr-ctl #trPlay i{font-style:normal;font-size:11px}
.tr-ctl #trSpd{font-family:'DM Mono',monospace}.tr-ctl #trSpd:hover{background:rgba(244,232,216,.12)}
@media(max-width:900px){.tr-chap,.tr-side,.tr-est{display:none}.tr-copy{bottom:20vh}.tr-ctl{left:4.2vw;right:auto}.tr-prog{display:none}.tr-shade{background:linear-gradient(0deg,rgba(14,8,4,.9),rgba(14,8,4,.2) 70%)}}


/* ================= menu photos ================= */
.art.photo{background:var(--b)}
.art.photo .glow,.art.photo svg{display:none}
.art.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--out);user-select:none}
.panel .art.photo img{transform:scale(1.04)}
.panel:hover .art.photo img{transform:scale(1.1)}
.item-hero .bg .art.photo img{object-position:center 45%;filter:saturate(1.05) brightness(.82)}
.blk:hover .bimg .art.photo img{transform:scale(1.07)}
.blk:nth-of-type(2) .bimg .art.photo img{object-position:75% 40%;transform:scale(1.25)}
.blk:nth-of-type(3) .bimg .art.photo img{object-position:30% 75%;transform:scale(1.4)}
.rcard:hover .im .art.photo img{transform:scale(1.07)}
.frow{gap:clamp(14px,2vw,28px)}
.frow .th{flex:0 0 auto;width:clamp(54px,6.4vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;transition:transform .7s var(--out),border-radius .7s var(--out)}
.frow .th img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);transition:transform 1s var(--out)}
.frow h3{flex:1}
.frow:hover .th{transform:translateX(18px) scale(1.08);border-radius:18px}
.frow:hover .th img{transform:scale(1.3)}
.feat:hover .frow:not(:hover) .th{opacity:.35}
.prev .art.photo img{transform:none}
.item-hero .bg .art.photo{width:64%;margin-left:36%}
.item-hero .bg .art.photo img{object-position:center 62%}
@media(max-width:800px){.item-hero .bg .art.photo{width:100%;margin-left:0}}
.item-hero .bg .art.photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}

/* ================= pointer tracker (bean / cup) ================= */
.cur{width:0;height:0;margin:0;border-radius:0;background:none;mix-blend-mode:normal;z-index:300;transition:none}
body.has-pt,body.has-pt *{cursor:none!important}
.cur .pt-bean{position:absolute;left:-14px;top:-14px;width:28px;height:28px;transition:opacity .25s,scale .3s var(--out);filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.cur .pt-bean svg,.cur .pt-cup svg{width:100%;height:100%;display:block;overflow:visible}
.cur .pt-cup{position:absolute;left:-30px;top:-30px;width:60px;height:60px;opacity:0;scale:.3;transition:opacity .25s,scale .45s var(--out);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.cur .pt-cup .st path{fill:none;stroke:rgba(244,232,216,.85);stroke-width:2.6;stroke-linecap:round;animation:steam 2.4s infinite ease-in-out}
.cur .pt-cup .st path:nth-child(2){animation-delay:.4s}.cur .pt-cup .st path:nth-child(3){animation-delay:.8s}
.cur.hot .pt-bean{opacity:0;scale:.4}
.cur.hot .pt-cup{opacity:1;scale:1}
.cur.down .pt-cup{scale:.82}.cur.down .pt-bean{scale:.8}
.cur .pt-lab{position:absolute;left:24px;top:14px;padding:5px 11px;border-radius:99px;background:#f4e8d8;color:#1d130d;font:500 11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s var(--out)}
.cur.lab .pt-lab{opacity:1;transform:none}
.pt-tr{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;z-index:299;pointer-events:none;opacity:0;transition:opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pt-tr svg{width:100%;height:100%;display:block}
@media(hover:none){.pt-tr{display:none}}

/* ================= menu: info card + arrows ================= */
.qinfo{position:fixed;left:3.2vw;top:50%;transform:translateY(-50%);z-index:20;width:min(280px,26vw);padding:22px;border-radius:20px;background:rgba(26,16,10,.55);backdrop-filter:blur(16px);border:1px solid rgba(244,232,216,.12)}
.qinfo small{display:block;font:500 11px 'DM Mono',monospace;letter-spacing:.2em;color:var(--acc);margin-bottom:10px}
.qinfo b{display:block;font:500 clamp(24px,2.4vw,34px)/1.05 'Playfair Display',serif;margin-bottom:16px}
.qinfo .qrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.qinfo .qrow span{font:500 12px 'DM Mono',monospace;padding:6px 10px;border-radius:99px;border:1px solid rgba(244,232,216,.18);color:rgba(244,232,216,.85)}
.qinfo .qgo{display:inline-flex;font:500 13px 'DM Mono',monospace;padding-bottom:5px;border-bottom:1px solid rgba(244,232,216,.5);transition:gap .3s,letter-spacing .3s}
.qinfo .qgo:hover{letter-spacing:.04em}
.qinfo.pop{animation:qpop .6s var(--out)}
@keyframes qpop{from{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}
.marr{position:fixed;right:3.2vw;top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:10px}
.marr button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,232,216,.25);background:rgba(26,16,10,.55);backdrop-filter:blur(10px);font-size:20px;transition:background .3s,color .3s,transform .4s var(--out)}
.marr button:hover{background:var(--fg);color:var(--bg);transform:scale(1.1)}
@media(max-width:900px){.qinfo{left:50%;top:auto;bottom:16vh;transform:translateX(-50%);width:min(340px,88vw);padding:14px 18px}.qinfo b{margin-bottom:8px}.qinfo .qrow{margin-bottom:10px}.marr{display:none}@keyframes qpop{from{opacity:0}to{opacity:1}}}

/* ================= item: product information ================= */
.pinfo{padding:8vh 3.2vw 4vh}
.pinfo .label{margin-bottom:30px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{padding:26px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:transform .6s var(--out),border-color .4s}
.pcard:hover{transform:translateY(-6px);border-color:var(--acc)}
.pcard h4{font:500 22px 'Playfair Display',serif;margin-bottom:6px}
.pcard .sub{font:400 12px 'DM Mono',monospace;color:var(--mut);margin-bottom:16px}
.pcard table{width:100%;border-collapse:collapse;font-size:15px}
.pcard td{padding:9px 0;border-top:1px solid var(--line)}.pcard td:last-child{text-align:right;font-weight:600}
.pcard p{font-size:15px;line-height:1.6;color:var(--mut);margin-bottom:14px}
.pcard ol{padding-left:20px;display:grid;gap:10px;font-size:15px;color:var(--mut);line-height:1.5}
.pcard ol li::marker{color:var(--acc);font-weight:700}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:15px;margin-bottom:14px}
.pcard dt{color:var(--mut)}.pcard dd{text-align:right;font-weight:500}
.pcard .chips{display:flex;flex-wrap:wrap;gap:7px}
.pcard .chips span{font:500 11px 'DM Mono',monospace;padding:6px 10px;border-radius:99px;border:1px solid var(--line);color:var(--fg)}
.pinfo .fine{margin-top:18px;font:400 12px 'DM Mono',monospace;color:var(--mut)}
@media(max-width:1100px){.pgrid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.pgrid{grid-template-columns:1fr}}

/* smaller cup pointer */
.cur .pt-cup{left:-19px;top:-19px;width:38px;height:38px}
.cur .pt-lab{left:15px;top:9px;font-size:10px;padding:4px 9px}

/* ================= intro paragraph (after the tour) ================= */
.intro{position:relative;max-width:1320px;margin:0 auto;padding:24vh 6vw 16vh;text-align:center}
.intro::before{content:"";position:absolute;left:50%;top:44%;width:min(900px,90vw);aspect-ratio:1.6;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(197,138,80,.13),transparent);pointer-events:none}
.in-label{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:46px;font:500 12px 'DM Mono',monospace;letter-spacing:.34em;text-transform:uppercase;color:var(--acc)}
.in-label i{display:block;width:clamp(36px,6vw,72px);height:1px;background:linear-gradient(90deg,transparent,var(--acc))}
.in-label i:last-child{background:linear-gradient(270deg,transparent,var(--acc))}
.intro p{position:relative;max-width:1060px;margin:0 auto;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(30px,4.2vw,64px);line-height:1.22;letter-spacing:-.015em}
.intro p span{opacity:.16;transition:opacity .5s var(--out),color .5s}
.intro p span.on{opacity:1}
.intro p span.em{font-style:italic;color:#e3c39a}
.in-facts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:10vh;border-top:1px solid var(--line)}
.in-facts div{padding:30px 18px 6px;border-right:1px solid var(--line);transition:transform .6s var(--out)}
.in-facts div:last-child{border-right:0}
.in-facts div:hover{transform:translateY(-4px)}
.in-facts b{display:block;margin-bottom:10px;font:500 clamp(20px,2vw,28px) 'Playfair Display',serif}
.in-facts span{font:400 11px 'DM Mono',monospace;letter-spacing:.2em;color:var(--mut)}
@media(max-width:700px){.in-facts{grid-template-columns:1fr}.in-facts div{border-right:0;border-bottom:1px solid var(--line);padding:22px 8px}.in-facts div:last-child{border-bottom:0}}

/* ================= intro card: light box + handwritten mix ================= */
.intro{max-width:none;padding:20vh 5vw 14vh;text-align:center}
.intro::before{display:none}
.in-card{position:relative;max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,92px) clamp(24px,5vw,80px) clamp(30px,4vw,56px);border-radius:30px;color:#3a2416;
 background:radial-gradient(120% 90% at 20% 0%,#fbf3e6,#f2e3cf 70%,#ead7bd);box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.5);
 clip-path:inset(46% 46% 46% 46% round 30px);opacity:0;transform:scale(.92) translateY(40px);
 transition:clip-path 1.5s cubic-bezier(.16,1,.3,1),opacity .8s ease,transform 1.5s cubic-bezier(.16,1,.3,1)}
.in-card.in{clip-path:inset(0 0 0 0 round 30px);opacity:1;transform:none}
.in-card::before{content:"";position:absolute;inset:14px;border-radius:20px;border:1px solid rgba(58,36,22,.16);pointer-events:none}
.in-card .in-label{margin-bottom:30px;font:400 clamp(34px,3.4vw,50px)/1 'Great Vibes',cursive;letter-spacing:0;text-transform:none;color:#a8532f;opacity:0;transform:translateY(14px);transition:opacity 1s .9s,transform 1s .9s var(--out)}
.in-card.in .in-label{opacity:1;transform:none}
.in-card .in-label i{width:clamp(30px,6vw,80px);background:linear-gradient(90deg,transparent,#a8532f)}
.in-card .in-label i:last-child{background:linear-gradient(270deg,transparent,#a8532f)}
.in-card p{max-width:900px;margin:0 auto;font:500 clamp(27px,3.5vw,54px)/1.3 'Cormorant Garamond','Playfair Display',serif;letter-spacing:0;color:#3a2416}
.in-card p span{display:inline-block;opacity:0;transform:translateY(10px);clip-path:inset(-20% 100% -20% 0);transition:none}
.in-card.in p span{animation:wr .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.2s + var(--i)*.075s)}
@keyframes wr{to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% 0)}}
.in-card p span.em{font:400 1.5em/.8 'Great Vibes',cursive;font-style:normal;color:#a8532f;padding:0 .06em;vertical-align:-.04em}
.in-card.in p span.em{animation-duration:1.5s}
.in-card .in-facts{margin-top:clamp(34px,5vw,64px);border-top:1px solid rgba(58,36,22,.16);opacity:0;transform:translateY(16px);transition:opacity 1s 3.2s,transform 1s 3.2s var(--out)}
.in-card.in .in-facts{opacity:1;transform:none}
.in-card .in-facts div{border-right-color:rgba(58,36,22,.16)}
.in-card .in-facts b{font:600 clamp(21px,2vw,30px) 'Cormorant Garamond',serif;color:#3a2416}
.in-card .in-facts span{color:#8a6a52}
@media(prefers-reduced-motion:reduce){.in-card,.in-card p span,.in-label,.in-facts{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}}

/* ================= home: minor size trim + smoky coffee-shop serif ================= */
.in-card p,.in-card .in-facts b,.frow h3,.feat .head h2.big,.cta h2.big{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-optical-sizing:auto}
.in-card p{font-weight:400;font-size:clamp(25px,3.1vw,48px);line-height:1.3;color:#3b261a}
.in-card .in-label{font-size:clamp(30px,3vw,44px)}
.in-card .in-facts b{font-weight:500;font-size:clamp(19px,1.8vw,27px)}
.feat .head h2.big{font-weight:500;font-size:clamp(32px,5.5vw,84px);letter-spacing:-.02em}
.frow h3{font-weight:400;font-size:clamp(24px,3.7vw,56px);letter-spacing:-.015em}
.frow .th{width:clamp(50px,5.8vw,94px)}
.cta h2.big{font-weight:500;font-size:clamp(30px,5.4vw,82px);letter-spacing:-.02em}

/* logo: show the full 'Coffee Corner' wordmark on every page (not just the C) */
.brand .mono{display:none!important}
.brand .word{display:block!important}


/* SEO: chapters 2-5 use h2, menu has a hidden h1 */
.tc-b h2{font-size:clamp(40px,6vw,92px);line-height:.98;font-weight:500;letter-spacing:-.03em;margin-bottom:22px;text-transform:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* nav: solid bar once scrolled, so the logo never sits on top of any text */
.nav{transition:transform .6s var(--out),background-color .4s,padding .4s var(--out),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(29,19,13,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line);padding-top:12px;padding-bottom:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media(max-width:700px){
 .nav{padding:14px 16px}
 .nav.solid{padding-top:10px;padding-bottom:10px}
 .nav .brand .word{font-size:17px;white-space:nowrap}
 .nav nav{gap:14px}
 .nav nav a:not(.glow){display:flex!important;font-size:12px;gap:6px}
 .nav nav a i{display:none}
 .nav nav a{text-transform:capitalize}
 .nav .lg{display:none}
 .glow{padding:9px 15px;font-size:12px;box-shadow:0 0 18px 2px rgba(255,170,90,.45)}
}

/* featured drinks on phones: heading on top, one-line button under it, compact rows */
.pillbtn{white-space:nowrap}
@media(max-width:700px){
 .feat{padding:9vh 16px 12vh}
 .feat .head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:28px}
 .feat .head h2.big{font-size:clamp(34px,10vw,46px)}
 .feat .head .pillbtn{padding:11px 22px;font-size:13px}
 .frow{gap:14px;padding:18px 0}
 .frow .th{width:48px}
 .frow h3{font-size:clamp(21px,6vw,26px);line-height:1.15;min-width:0}
 .frow .cpill{font-size:11px;padding:5px 11px}
 .frow .arr{font-size:22px}
 .frow:hover h3,.frow:hover .th,.frow:hover .arr{transform:none}
 .feat:hover .frow:not(:hover) h3,.feat:hover .frow:not(:hover) .th{opacity:1}
}
@media(max-width:380px){.frow .cpill{display:none}}

/* menu on phones: wheel on top, info card below it, controls in one bottom row (nothing overlaps) */
@media(max-width:700px){
 .stage{top:max(78px,10vh);height:46vh}
 .panel{width:58vw;min-width:0}
 .rows,.band,.hint{display:none}
 .floor{top:34vh}
 .qinfo{top:calc(max(78px,10vh) + 46vh + 22px);bottom:auto;width:calc(100vw - 32px);max-width:420px}
 .qinfo b{font-size:26px}
 .count{left:16px;bottom:calc(22px + env(safe-area-inset-bottom))}
 .fbtn{right:16px;bottom:calc(14px + env(safe-area-inset-bottom));padding:12px 18px;font-size:14px}
 .marr{display:flex;top:auto;right:auto;left:84px;bottom:calc(14px + env(safe-area-inset-bottom));transform:none;gap:8px}
 .marr button{width:44px;height:44px;font-size:17px}
}
@media(max-width:700px) and (max-height:700px){.stage{height:36vh}.qinfo{top:calc(max(74px,10vh) + 36vh + 14px);padding:12px 16px}.qinfo .qrow{margin-bottom:8px}}

/* item page: 'Close' sits under the logo bar instead of on top of the wordmark */
.close{position:absolute;top:104px;padding:10px 18px;font-size:14px}
@media(max-width:700px){.close{top:76px;left:16px;padding:8px 14px;font-size:12px}}
/* menu hint: readable pill so it does not mix with the faded row behind it */
.hint{background:rgba(29,19,13,.88);padding:8px 16px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}

/* phones: tour frames painted on a canvas above the poster */
.tr-vids .tr-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;transition:opacity .4s}
.tr-vids .tr-canvas.on{opacity:1}
/* menu: let the finger drive the wheel in every direction */
body[data-page=menu]{touch-action:none;overscroll-behavior:none}