@font-face{font-family:"Boska";src:url(../../assets/lab/fumee/boska-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Boska";src:url(../../assets/lab/fumee/boska-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Boska";src:url(../../assets/lab/fumee/boska-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(../../assets/lab/fumee/generalsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(../../assets/lab/fumee/generalsans-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* Fumée (Concept) - phone build: CSS animation only, no WebGL. */
:root{--c1:#EEE7DC;--c2:#36302B;--c3:#A44A3F;--c2d:#2C2723;--c1a:rgba(238,231,220,.66);--c1b:rgba(238,231,220,.16);
 --f-disp:"Boska",Georgia,"Times New Roman",serif;--f-body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --e-out:cubic-bezier(.16,1,.3,1);--pad:22px}
html{background:var(--c2d);scroll-behavior:smooth}
body{margin:0;background:var(--c2);color:var(--c1);font:400 16px/1.55 var(--f-body);overflow-x:hidden}
::selection{background:var(--c3);color:var(--c1)}
img{display:block;max-width:100%;height:auto}
main{position:relative;z-index:2}
.zl-bar{z-index:95}.zl-foot{position:relative;z-index:3;background:var(--c2d)}
/* smoke: three blurred gradient plumes drifting on the compositor */
.m-smoke{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 70% 20%,#433a33 0%,var(--c2) 50%,var(--c2d) 100%)}
.m-smoke i{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform;opacity:.55}
.m-smoke .s1{width:120vw;height:70vh;left:-30vw;top:40vh;background:radial-gradient(closest-side,rgba(238,231,220,.30),rgba(238,231,220,0));animation:plume1 22s ease-in-out infinite alternate}
.m-smoke .s2{width:90vw;height:90vh;right:-40vw;top:-10vh;background:radial-gradient(closest-side,rgba(164,74,63,.32),rgba(164,74,63,0));animation:plume2 28s ease-in-out infinite alternate}
.m-smoke .s3{width:70vw;height:110vh;left:10vw;top:-20vh;background:radial-gradient(closest-side,rgba(238,231,220,.18),rgba(238,231,220,0));animation:plume3 34s ease-in-out infinite alternate}
@keyframes plume1{to{transform:translate3d(30vw,-38vh,0) scale(1.25) rotate(18deg)}}
@keyframes plume2{to{transform:translate3d(-30vw,30vh,0) scale(.85) rotate(-25deg)}}
@keyframes plume3{to{transform:translate3d(20vw,25vh,0) scale(1.3)}}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* loader: letters rise, panel lifts away. Pure CSS, ends itself. */
.m-loader{position:fixed;inset:0;z-index:100;background:var(--c1);color:var(--c2);display:grid;place-items:center;pointer-events:none;animation:ldOut .9s var(--e-out) 1.25s forwards}
.m-loader .ld-word{margin:0;font:400 italic 92px/.9 var(--f-disp);letter-spacing:-.04em;display:flex;overflow:hidden;padding-bottom:.1em}
.m-loader .c{display:inline-block;transform:translateY(110%);animation:rise .8s var(--e-out) forwards;animation-delay:calc(var(--i)*60ms + 100ms)}
@keyframes ldOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes rise{to{transform:none}}
/* type */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--c1a)}
.eyebrow .ln{width:32px;height:1px;background:currentColor}
section{padding:12vh var(--pad);position:relative}
.hero{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px;padding-bottom:9vh}
.brand-mark{position:absolute;top:84px;left:var(--pad);font:400 italic 24px/1 var(--f-disp);color:var(--c1);text-decoration:none;opacity:0;animation:fade .8s ease 1.9s forwards}
.hero-title{margin:0 0 22px;font:400 clamp(64px,21vw,96px)/.9 var(--f-disp);letter-spacing:-.045em}
.hero-title>span{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .ht-b{font-style:italic}
.hero-title .c{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;animation:charIn 1s var(--e-out) forwards;animation-delay:calc(var(--i)*45ms + 1.55s)}
.hero-title .acc{color:var(--c3)}
@keyframes charIn{to{transform:none;opacity:1}}
.hero-copy{margin:0 0 30px;max-width:30ch;color:var(--c1a);font-size:16px;opacity:0;animation:fadeUp .9s var(--e-out) 2.2s forwards}
.hero .btn{opacity:0;animation:fadeUp .9s var(--e-out) 2.35s forwards;align-self:flex-start}
@keyframes fade{to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;font:500 15px/1 var(--f-body);text-decoration:none;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;position:relative;z-index:1}.btn span{position:relative;z-index:1}
.btn-solid{background:var(--c1);color:var(--c2)}
.btn-solid::before{content:"";position:absolute;inset:0;background:var(--c3);transform:translateY(101%);transition:transform .5s var(--e-out);z-index:0}
.btn-solid:active::before,.btn-solid:focus-visible::before{transform:none}.btn-solid:active,.btn-solid:focus-visible{color:var(--c1)}
.btn:focus-visible{outline:2px solid var(--c3);outline-offset:3px}
/* manifesto words light up as they enter */
.mf-text{margin:0;font:400 34px/1.12 var(--f-disp);letter-spacing:-.02em}
.mf-text .w{color:rgba(238,231,220,.18);transition:color .6s ease;transition-delay:calc(var(--i)*40ms)}
.mf-text.in .w{color:var(--c1)}
.mf-text.in .w.k{color:#C9705F;font-style:italic}
/* collection: scroll-snap rail, clip-path reveal on the active card */
.col-title{margin:0 0 26px;font:400 52px/.95 var(--f-disp);letter-spacing:-.035em}
.collection{padding-left:0;padding-right:0}.col-head{padding:0 var(--pad)}
.m-rail{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 var(--pad)}
.m-rail::-webkit-scrollbar{display:none}
.mc{flex:0 0 82%;scroll-snap-align:start;scroll-snap-stop:always}
.mc-img{margin:0 0 20px;aspect-ratio:3/4;border-radius:200px 200px 14px 14px;overflow:hidden;background:var(--c2d);clip-path:inset(18% 10% 18% 10% round 200px 200px 14px 14px);transition:clip-path 1.1s var(--e-out)}
.mc-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.6s var(--e-out),filter 1.1s ease;filter:blur(6px) saturate(.6)}
.mc.on .mc-img{clip-path:inset(0 0 0 0 round 200px 200px 14px 14px)}
.mc.on .mc-img img{transform:scale(1);filter:none}
.mc .cs-no,.mc .cs-name,.mc .cs-line,.mc .cs-notes{opacity:.35;transform:translateY(10px);transition:opacity .7s ease,transform .9s var(--e-out)}
.mc.on .cs-no,.mc.on .cs-name,.mc.on .cs-line,.mc.on .cs-notes{opacity:1;transform:none}
.mc.on .cs-name{transition-delay:.08s}.mc.on .cs-line{transition-delay:.16s}.mc.on .cs-notes{transition-delay:.24s}
.cs-no{margin:0 0 10px;font:500 11px/1 var(--f-body);letter-spacing:.16em;color:#C9705F;text-transform:uppercase}.cs-no span{color:var(--c1a)}
.cs-name{margin:0;font:400 44px/.95 var(--f-disp);letter-spacing:-.03em}
.cs-line{margin:12px 0 18px;font:400 italic 19px/1.35 var(--f-disp);color:var(--c1a)}
.cs-notes{margin:0;border-top:1px solid var(--c1b)}
.cs-notes div{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--c1b);font-size:14px}
.cs-notes dt{color:var(--c1a);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}.cs-notes dd{margin:0}
.dots{display:flex;gap:6px;padding:26px var(--pad) 0}
.dot{height:40px;min-width:50px;padding:0 14px;border-radius:999px;border:1px solid var(--c1b);background:transparent;font:500 13px/1 var(--f-body);letter-spacing:.06em;color:var(--c1a);transition:all .4s var(--e-out)}
.dot[aria-current="true"]{background:var(--c1);color:var(--c2);border-color:var(--c1);min-width:70px}
/* notes */
.nt-title{margin:0 0 30px;font:400 36px/1.04 var(--f-disp);letter-spacing:-.025em}
.nt-card{position:relative;margin:0 0 14px;padding:24px 22px;border-radius:22px;background:rgba(238,231,220,.06);border:1px solid var(--c1b);overflow:hidden}
.nt-card h3{margin:6px 0 8px;font:400 34px/1 var(--f-disp);letter-spacing:-.02em}.nt-card p{margin:0;color:var(--c1a)}
.nt-card img{margin:18px -22px -24px;width:calc(100% + 44px);max-width:none;aspect-ratio:16/10;object-fit:cover}
.nt-k{font:400 italic 18px/1 var(--f-disp);color:#C9705F}
.nt-card--dark{background:var(--c2d)}
.nt-card--accent{background:var(--c3);border-color:var(--c3)}.nt-card--accent p{color:rgba(238,231,220,.85)}.nt-card--accent .nt-k{color:var(--c1)}
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s var(--e-out)}
[data-rv].in{opacity:1;transform:none}
/* flacon */
.fl-title{margin:0 0 20px;font:400 40px/1 var(--f-disp);letter-spacing:-.03em}
.fl-art{color:var(--c1);display:grid;place-items:center;margin:0 0 20px}
.flacon{width:min(300px,82%);height:auto;overflow:visible}
.flacon .dim{stroke:var(--c3);stroke-width:1}
.flacon .lbl{font:500 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;fill:var(--c1a)}
.flacon .dr{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1)}
.flacon .dim,.flacon .lbl{opacity:0;transition:opacity .8s ease 1.6s}
.fl-art.in .dr{stroke-dashoffset:0}.fl-art.in .dim,.fl-art.in .lbl{opacity:1}
.fl-specs{list-style:none;margin:0;padding:0;border-top:1px solid var(--c1b)}
.fl-specs li{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--c1b);align-items:baseline}
.fl-specs b{font:400 24px/1 var(--f-disp)}.fl-specs span{color:var(--c1a);font-size:14px}
.fl-note{margin:14px 0 0;font-size:12px;color:var(--c1a)}
/* cta */
.cta{padding-bottom:16vh}
.cta-title{margin:0 0 30px;font:400 italic 52px/.95 var(--f-disp);letter-spacing:-.035em}
.cta-toast{min-height:22px;margin:18px 0 0;font-size:14px;color:var(--c1a)}
/* reduced motion: everything visible and still */
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .m-loader{display:none}
 .hero-title .c,.hero-copy,.hero .btn,.brand-mark{opacity:1;transform:none}
 .mf-text .w{color:var(--c1)}.mf-text .w.k{color:#C9705F}
 .mc-img{clip-path:none}.mc-img img{transform:none;filter:none}
 .mc .cs-no,.mc .cs-name,.mc .cs-line,.mc .cs-notes{opacity:1;transform:none}
 [data-rv]{opacity:1;transform:none}
 .flacon .dr{stroke-dashoffset:0}.flacon .dim,.flacon .lbl{opacity:1}
 html{scroll-behavior:auto}
}

/* glass body (helper) */
.btn-solid.lg{--lg-ink:#EEE7DC}
.btn-ghost.lg,.arrow.lg{--lg-alpha-dark:34%}
.lg.lg--ink{--_al:96%}
.arrow.lg:hover{color:var(--c1)}