/* Maison Ambeka: concept demo by Amana Commerce. Fonts self-hosted (OFL). */
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/cormorant-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/cormorant-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/intertight-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2")}

:root{
  --ink:#0b0908; --ink2:#14100c; --cream:#f2ebdf; --cream2:#e8dfcf;
  --muted:rgba(242,235,223,.64); --line:rgba(242,235,223,.16);
  --gold:#c9a46a; --ed:#d08a2e;
  --serif:"Cormorant","Iowan Old Style","Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tight:"Inter Tight","Inter",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--cream);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* film grain, static, cheap */
body::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* type */
.eyebrow{font:500 11px/1.4 var(--tight);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.display{font:300 clamp(56px,10.5vw,168px)/.9 var(--serif);letter-spacing:-.02em}
.display--sm{font-size:clamp(48px,8vw,128px)}
.h2{font:300 clamp(40px,5.6vw,84px)/1 var(--serif);letter-spacing:-.01em;margin-top:14px}
.lede{font-size:clamp(15px,1.15vw,17px);color:var(--muted);max-width:34ch;margin-top:28px}
.split .line{padding-bottom:.06em}

/* hover underline that draws in */
.ln{text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.ln:hover{background-position:0 100%;background-size:100% 1px}

/* loader */
.loader{position:fixed;inset:0;z-index:80;background:var(--ink);display:none;place-items:center;align-content:center;gap:28px}
.intro .loader{display:grid}
.loader__mark{display:flex;gap:.42em;font:500 clamp(18px,2vw,24px)/1 var(--tight);letter-spacing:.1em;overflow:hidden}
.loader__mark span{display:inline-block;transform:translateY(110%)}
.loader__bar{width:140px;height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}

/* webgl canvas sits behind the whole story */
canvas.gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.6s var(--ease)}
.gl-on canvas.gl{opacity:1}
.rm canvas.gl,.nogl canvas.gl{display:none}
main,.ftr{position:relative;z-index:1}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gut);font:500 12px/1 var(--tight);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .9s var(--ease),color .6s var(--ease),background-color .6s var(--ease)}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr.is-light{color:var(--ink)}
.hdr__mark{text-decoration:none;font-size:15px;letter-spacing:.42em;font-weight:600}
.hdr__nav{display:flex;gap:32px}
.hdr__nav a,.hdr__cta{text-decoration:none;opacity:.86}
@media (max-width:899px){.hdr__nav{display:none}.hdr{padding:18px var(--gut)}}

/* small fixed honesty tag */
.demo-tag{position:fixed;left:12px;bottom:12px;z-index:45;max-width:calc(100vw - 24px);padding:8px 12px;border-radius:999px;
  background:rgba(11,9,8,.72);border:1px solid var(--line);color:var(--cream);text-decoration:none;
  font:500 11px/1.3 var(--tight);letter-spacing:.02em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.demo-tag:hover{border-color:var(--gold)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px var(--gut) clamp(56px,9vh,110px)}
.hero__copy{position:relative;z-index:2;width:min(100%,760px)}
.hero .display{margin-top:22px}
.hero__cue{position:absolute;right:var(--gut);bottom:clamp(56px,9vh,110px);display:flex;flex-direction:column;align-items:center;gap:14px;
  font:500 10px/1 var(--tight);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hero__cue i{width:1px;height:64px;background:var(--line);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(-100%);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{60%,100%{transform:translateY(100%)}}
.still{display:none}
.rm .still--hero,.nogl .still--hero{display:block;position:absolute;z-index:0;right:max(0px,calc(50% - 560px));top:50%;transform:translateY(-50%);height:min(88vh,880px);width:auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
@media (max-width:899px){
  .hero{align-items:flex-end;padding-bottom:84px}
  .hero__cue{display:none}
  .rm .still--hero,.nogl .still--hero{right:50%;top:10svh;transform:translateX(50%);height:56svh}
  .lede{margin-top:18px}
}

/* craft chapter */
.craft{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.craft__inner{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--gut) 90px;margin-left:auto;width:min(100%,560px);margin-right:max(var(--gut),calc(50% - 600px))}
.steps{position:relative;margin-top:44px;min-height:220px}
.step{position:absolute;inset:0 0 auto}
.motion .step:not(.is-on){opacity:0;visibility:hidden}
.step__no{font:500 12px/1 var(--tight);letter-spacing:.24em;color:var(--gold)}
.step__t{font:300 clamp(30px,3.2vw,46px)/1.05 var(--serif);margin:14px 0 14px}
.step p{color:var(--muted);max-width:40ch}
.craft__meter{display:flex;align-items:center;gap:18px;margin-top:28px;font:500 11px/1 var(--tight);letter-spacing:.2em;color:var(--muted)}
.craft__meter i{flex:1;max-width:180px;height:1px;background:var(--line)}
.craft__meter b{display:block;height:100%;background:var(--gold);transform:scaleX(.333);transform-origin:0 50%}
.craft__ghosts{position:absolute;inset:0;z-index:1;pointer-events:none}
.craft__ghosts span{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);font:300 clamp(90px,17vw,300px)/1 var(--serif);
  color:transparent;-webkit-text-stroke:1px rgba(201,164,106,.15);opacity:0;white-space:nowrap}
.motion .craft__ghosts span:first-child{opacity:1}
.rm .steps,.nogl .steps{min-height:0}
.rm .step{position:relative;margin-bottom:40px}
.rm .craft__ghosts,.rm .craft__meter{display:none}
@media (max-width:899px){
  .craft__inner{justify-content:flex-end;width:100%;margin:0;padding-bottom:70px}
  .steps{margin-top:24px;min-height:190px}
  .craft__ghosts span{top:30%;left:50%;transform:translate(-50%,-50%)}
}

/* up close */
.closeup{position:relative;min-height:100vh;min-height:100svh;padding:120px var(--gut) 80px;display:flex;flex-direction:column;justify-content:space-between}
.notes{position:relative;max-width:420px;min-height:110px}
.note{position:absolute;inset:auto 0 0;display:grid;gap:8px}
.motion .note{opacity:0;visibility:hidden}
.note__k{font:500 11px/1 var(--tight);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.note__v{font:300 clamp(24px,2.4vw,34px)/1.15 var(--serif)}
.dot{position:fixed;left:0;top:0;z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid var(--gold);opacity:0;pointer-events:none}
.dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold)}
.dot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(201,164,106,.5);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.rm .notes,.nogl .notes{min-height:0}
.rm .note,.nogl .note{position:relative;margin-top:32px}
.rm .dot,.nogl .dot{display:none}

/* editions */
.editions{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px var(--gut) 100px}
.editions__copy{position:relative;z-index:2;width:min(100%,520px);margin-left:max(0px,calc(50% - 600px))}
.ed{margin-top:40px;min-height:230px}
.ed__no{font:500 12px/1 var(--tight);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ed__name{font:300 clamp(54px,6.4vw,96px)/1 var(--serif);margin-top:10px}
.ed__notes{font:italic 300 clamp(20px,1.7vw,24px)/1.3 var(--serif);color:var(--ed);margin-top:10px;transition:color 1s var(--ease)}
.ed__desc{color:var(--muted);max-width:40ch;margin-top:18px}
.picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.pick{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--line);border-radius:999px;
  font:500 12px/1 var(--tight);letter-spacing:.14em;text-transform:uppercase;transition:border-color .6s var(--ease),background-color .6s var(--ease)}
.pick i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0,transparent 45%),var(--c);box-shadow:inset 0 0 0 1px #fff3;transition:transform .8s var(--ease)}
.pick:hover{border-color:rgba(242,235,223,.4)}
.pick:hover i{transform:scale(1.12)}
.pick.is-on{border-color:var(--gold);background:rgba(201,164,106,.08)}
.editions__still{display:none}
.rm .editions__still,.nogl .editions__still{display:block;position:absolute;right:max(0px,calc(50% - 560px));top:50%;transform:translateY(-50%);width:min(44vw,520px);aspect-ratio:900/1100}
.rm .editions__still .still,.nogl .editions__still .still{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.editions__still .still.is-on{opacity:1}
@media (max-width:899px){
  .editions{align-items:flex-end;padding-top:46svh;padding-bottom:80px}
  .ed{margin-top:20px;min-height:200px}
  .rm .editions__still,.nogl .editions__still{right:50%;top:70px;transform:translateX(50%);width:min(70vw,340px)}
}

/* gallery: light chapter, covers the canvas */
.gallery{position:relative;z-index:2;background:var(--cream);color:var(--ink);overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 60px}
.gallery .eyebrow{color:#9a7438}
.gallery__head{padding:0 var(--gut);display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 40px}
.gallery__head .h2{flex-basis:100%;margin-top:6px}
.gallery__head .eyebrow{flex-basis:100%}
.gallery__meter{width:180px;height:1px;background:rgba(11,9,8,.15);margin-top:14px}
.gallery__meter i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.g-viewport{margin-top:clamp(28px,5vh,56px)}
.g-track{display:flex;gap:clamp(16px,2.4vw,36px);padding:0 var(--gut);width:max-content}
.card{width:clamp(250px,27vw,420px);flex:none}
.card__art{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#d9cdb8}
.card__art svg{width:100%;height:100%;transform:scale(1.14);transform-origin:50% 50%}
.card__k{font:500 11px/1.3 var(--tight);letter-spacing:.22em;text-transform:uppercase;margin-top:18px;color:#7d6a52}
.card__v{font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif);margin-top:8px;max-width:28ch}
.card:hover .card__art svg{transform:scale(1.2);transition:transform 1.6s var(--ease)}
.rm .g-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;padding-bottom:12px}
.rm .card{scroll-snap-align:start}
@media (max-width:899px){
  .card{width:74vw}
  .gallery{padding-top:90px}
}

/* closing */
.closing{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:120px var(--gut) clamp(70px,12vh,140px)}
.closing__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.closing .display{margin-top:18px}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;
  font:500 12px/1 var(--tight);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;overflow:hidden;isolation:isolate}
.btn span{position:relative;z-index:1;display:inline-block}
.btn--solid{background:var(--cream);color:var(--ink)}
.btn--ghost{border:1px solid rgba(242,235,223,.35)}
.btn::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--gold);transform:translateY(101%);transition:transform .8s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--ghost:hover{color:var(--ink)}
.rm .closing{align-items:center}

/* footer */
.ftr{padding:64px var(--gut) 90px;border-top:1px solid var(--line);background:var(--ink);display:grid;gap:14px;font-size:14px;color:var(--muted)}
.ftr__mark{font:600 15px/1 var(--tight);letter-spacing:.42em;color:var(--cream)}
.ftr a{color:var(--cream)}
.ftr__small{font-size:12px;opacity:.7}

/* entrance helpers (motion only, set by JS) */
.motion.intro .fade{opacity:0}

/* phones: keep copy readable where it sits over the flacon */
@media (max-width:899px){
  .closeup::before{content:"";position:absolute;inset:auto 0 0;height:46%;z-index:0;pointer-events:none;background:linear-gradient(to top,rgba(11,9,8,.92),rgba(11,9,8,.6) 45%,transparent)}
  .closeup>*{position:relative;z-index:1}
  .closeup .dot{position:fixed}
}
@media (max-width:480px){
  .demo-tag{font-size:10px;letter-spacing:0;padding:7px 10px;left:8px;bottom:8px;max-width:calc(100vw - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:480px){
  .picker{gap:8px;flex-wrap:nowrap}
  .pick{gap:8px;padding:9px 12px 9px 9px;font-size:10.5px;letter-spacing:.1em}
  .pick i{width:18px;height:18px}
  .editions{padding-top:40svh;padding-bottom:64px}
  .ed{min-height:0}
  .ed__name{font-size:48px}
}