/* =====================================================================
   EXTILL — The Quiet Mastery of Nature
   Design grammar of the great houses: one centred axis, the object at
   the heart of every scene, four type sizes, and silence between them.
   ===================================================================== */
:root{
  color-scheme:dark;
  --night:#030508;          /* the gallery, after dark */
  --stone:#0c1116;          /* granite */
  --frost:#eef3f4;          /* snow light — primary text */
  --mist:#9aa8af;           /* secondary text */
  --ice:#9fdde6;            /* the bottle's glacial blue — used sparingly */
  --hair:rgba(238,243,244,.14);
  --f-mark:"Cinzel","Trajan Pro",Georgia,serif;
  --f-poem:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --f-label:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  /* Four sizes, nothing else */
  --t-caption:clamp(12.5px,.85vw,14px);
  --t-body:clamp(19px,1.3vw,22px);
  --t-statement:clamp(28px,2.7vw,44px);
  --t-display:clamp(36px,4.2vw,68px);
  --gut:max(20px,env(safe-area-inset-left,0px));
  --gutr:max(20px,env(safe-area-inset-right,0px));
  --measure:34em;
}
[hidden]{display:none!important}
html,body{margin:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--frost);font-family:var(--f-poem);font-size:var(--t-body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
:focus-visible{outline:1px solid var(--ice);outline-offset:4px}
.wrap{padding-left:var(--gut);padding-right:var(--gutr)}

/* ---------- The four voices ---------- */
.caption,.label{font-family:var(--f-label);font-size:var(--t-caption);font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--mist);line-height:1.6}
.title{font-family:var(--f-mark);font-size:clamp(22px,2.1vw,34px);font-weight:400;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;line-height:1.3;color:var(--frost)}
.statement{font-size:var(--t-statement);line-height:1.3;font-weight:300;color:var(--frost);max-width:20em;text-wrap:balance}
.statement em,.display em{font-style:italic}
.display{font-size:var(--t-display);line-height:1.12;font-weight:300;color:#fff;max-width:16em;text-wrap:balance}
.prose{font-size:var(--t-body);color:var(--mist);max-width:var(--measure);display:grid;gap:1.15em}
.prose em{color:var(--frost)}
.verse{display:grid;gap:.15em}
.verse .ln{display:block}
.quiet{font-style:italic;color:var(--frost)}

/* ---------- Header: the wordmark at the centre ---------- */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gutr) 22px var(--gut);transition:background .9s,backdrop-filter .9s}
.top.solid{background:rgba(3,5,8,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.top .left{justify-self:start;display:flex;gap:4px}
.top .right{justify-self:end;display:flex;gap:4px}
.mark{grid-column:2;font-family:var(--f-mark);font-size:clamp(18px,1.6vw,24px);letter-spacing:.55em;padding-left:.55em;text-decoration:none;color:#fff}
.ghost{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.26em;text-transform:uppercase;color:var(--frost);background:none;border:1px solid transparent;padding:11px 14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .6s;display:inline-flex;align-items:center}
.ghost:hover{border-color:var(--hair)}
.ghost.line{border-color:var(--hair)}
@media (max-width:640px){.top{padding-top:16px;padding-bottom:16px}.top .right .ghost{padding:10px 8px}.top .left .ghost{padding:10px 8px}.mark{letter-spacing:.42em;padding-left:.42em}}

/* ---------- Hero: the object at the heart ---------- */
.hero{position:relative;height:100svh;min-height:600px;max-height:1200px;overflow:hidden;background:#000}
.hero video,.hero .poster img{position:absolute;left:0;top:76px;width:100%;height:calc(100% - 76px);object-fit:contain;object-position:50% 40%}
.hero .poster{position:absolute;inset:0;transition:opacity 1.4s}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,8,.55) 0%,transparent 14%,transparent 74%,rgba(3,5,8,.75) 90%,var(--night) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(28px,5.5vh,64px);z-index:2;display:grid;justify-items:center;gap:12px;text-align:center}
.hero-copy h1{font-size:var(--t-statement);font-weight:300;line-height:1.2;opacity:0;animation:rise 2.6s 1.8s cubic-bezier(.2,.6,.2,1) forwards}
.hero-copy h1 em{font-style:italic}
.hero-copy .caption{opacity:0;animation:rise 2.2s 1.2s forwards}
.cue{margin-top:6px;font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.34em;text-transform:uppercase;color:var(--mist);text-decoration:none;display:grid;justify-items:center;gap:12px;opacity:0;animation:rise 2s 3.2s forwards}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--frost),transparent);animation:drip 3.4s infinite}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-aspect-ratio:1/1){
  .hero{height:auto;min-height:0;max-height:none}
  .hero video,.hero .poster img{position:relative;top:0;height:auto;aspect-ratio:720/1000;object-fit:cover;object-position:50% 0;margin-top:64px}
  .hero video{position:absolute;top:0}
  .hero-copy{position:relative;bottom:auto;padding-block:8px 56px}
}

/* ---------- Scenes: one axis, generous silence ---------- */
.scene{position:relative;padding-block:clamp(120px,19vh,220px);text-align:center;display:grid;justify-items:center;gap:clamp(26px,3.6vh,40px)}
.scene>*{min-width:0;max-width:100%}
.scene-head{display:grid;justify-items:center;gap:14px}
.numeral{font-family:var(--f-mark);font-size:var(--t-caption);letter-spacing:.4em;color:var(--ice);padding-left:.4em}
.rule{width:1px;height:46px;background:linear-gradient(transparent,var(--hair),transparent)}
.scene .prose{margin-inline:auto;text-align:center}
.divider{width:56px;height:1px;background:var(--hair);margin:6px auto}
.reveal{opacity:.4;transform:translateY(16px);transition:opacity 1.8s cubic-bezier(.2,.6,.2,1),transform 1.8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.scene.bordered{border-top:1px solid var(--hair)}

/* Full-bleed plates, feathered into the night */
.plate{width:100%;max-width:1400px;margin-inline:auto;position:relative;background:transparent}
.plate img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 52%,transparent 100%)}
.plate.square{max-width:720px}
.plate.square img{mix-blend-mode:screen;-webkit-mask-image:none;mask-image:none}
.plate .violet{filter:saturate(.55) brightness(.88)}
.plate-cap{margin-top:16px}

/* Facts in a single centred row */
.facts{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));width:min(100%,1180px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 auto}
.facts>div{padding:30px 18px;display:grid;gap:10px;align-content:start;justify-items:center;border-left:1px solid var(--hair)}
.facts>div:first-child{border-left:0}
.facts dt{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.3em;text-transform:uppercase;color:var(--mist)}
.facts dd{margin:0;font-size:clamp(19px,1.35vw,23px);line-height:1.45;color:var(--frost);text-wrap:balance}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts>div{border-left:0;border-top:1px solid var(--hair)}.facts>div:nth-child(-n+2){border-top:0}.facts>div:nth-child(2n){border-left:1px solid var(--hair)}.facts>div:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:460px){.facts{grid-template-columns:1fr}.facts>div,.facts>div:nth-child(2n){border-left:0}.facts>div:nth-child(2){border-top:1px solid var(--hair)}}

/* Elements */
.elements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1180px);margin:0 auto}
.elements article{display:grid;justify-items:center;gap:14px;padding:12px 22px;border-left:1px solid var(--hair)}
.elements article:first-child{border-left:0}
.elements svg{width:40px;height:40px;stroke:var(--ice);fill:none;stroke-width:1}
.elements h3{font-family:var(--f-mark);font-size:clamp(17px,1.3vw,21px);letter-spacing:.32em;padding-left:.32em}
.elements p{font-size:clamp(18px,1.2vw,20px);color:var(--mist);max-width:14em}
@media (max-width:900px){.elements{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.elements article:nth-child(3){border-left:0}}
@media (max-width:460px){.elements{grid-template-columns:1fr}.elements article{border-left:0}}

/* Winter */
.winter{overflow:hidden}
.winter canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.eighty{font-family:var(--f-mark);font-size:clamp(110px,15vw,220px);line-height:.9;background:linear-gradient(180deg,#fff 0%,#cfe9ee 60%,rgba(159,221,230,.12) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.days{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:6px;width:min(100%,440px);margin:0 auto}
.days span{height:14px;background:var(--hair);transition:background .4s}
.days span.on{background:var(--frost)}

/* Alchemy */
.sevens{display:grid;gap:30px;width:min(100%,640px);margin:0 auto}
.seven{display:grid;gap:12px;justify-items:center}
.bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;width:min(100%,420px);height:54px;align-items:end}
.bars i{display:block;height:100%;background:linear-gradient(180deg,var(--frost),rgba(238,243,244,.04));transform:scaleY(.12);transform-origin:bottom;opacity:.35;transition:transform 1.2s cubic-bezier(.2,.6,.2,1),opacity 1.2s}
.lit .bars i{transform:none;opacity:1}
.seven:nth-child(2) .bars i{background:linear-gradient(180deg,#9aa3a8,rgba(154,163,168,.04))}
.seven:nth-child(3) .bars i{background:linear-gradient(180deg,#cfc7bb,rgba(207,199,187,.04))}
.seven:nth-child(4) .bars i{background:linear-gradient(180deg,var(--ice),rgba(159,221,230,.04))}
.seven p{font-style:italic;color:var(--mist);font-size:clamp(18px,1.2vw,20px)}
.formula{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.26em;text-transform:uppercase;color:var(--mist);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px}
.formula b{font-weight:400;color:var(--frost)}.formula .eq{color:var(--ice)}

/* Tasting notes — four columns, perfectly even */
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1180px);margin:0 auto;border-top:1px solid var(--hair)}
.notes>div{display:grid;justify-items:center;align-content:start;gap:14px;padding:34px 22px;border-left:1px solid var(--hair)}
.notes>div:first-child{border-left:0}
.notes dt{font-family:var(--f-mark);font-size:var(--t-caption);letter-spacing:.34em;color:var(--ice);padding-left:.34em}
.notes dd{margin:0;font-size:clamp(19px,1.35vw,23px);line-height:1.5;font-style:italic;color:var(--frost)}
@media (max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}.notes>div:nth-child(3){border-left:0}.notes>div:nth-child(n+3){border-top:1px solid var(--hair)}}
@media (max-width:460px){.notes{grid-template-columns:1fr}.notes>div{border-left:0;border-top:1px solid var(--hair)}.notes>div:first-child{border-top:0}}

/* The bottle, as an object of study */
.stage{position:relative;width:min(620px,100%);aspect-ratio:1/1;perspective:1200px;cursor:crosshair;touch-action:pan-y;margin:0 auto}
.stage .tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen}
.sheen{position:absolute;left:33%;right:33%;top:20%;bottom:9%;mix-blend-mode:color-dodge;opacity:.4;pointer-events:none;background:linear-gradient(var(--a,115deg),transparent 30%,rgba(255,170,210,.35) 42%,rgba(170,255,240,.45) 50%,rgba(160,180,255,.35) 58%,transparent 70%);background-size:220% 220%;background-position:var(--px,50%) var(--py,50%);clip-path:polygon(6% 0,94% 0,100% 6%,82% 52%,96% 100%,4% 100%,18% 52%,0 6%)}

/* Philosophy */
.tenets{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tenets li{font-size:var(--t-display);line-height:1.12;font-style:italic;color:rgba(238,243,244,.2);transition:color 1.6s}
.tenets li.in{color:var(--frost)}
.tenets li span{display:block;font-style:normal;font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.34em;text-transform:uppercase;color:var(--mist);margin-bottom:4px}

/* Interludes — inscriptions */
.interlude{padding-block:clamp(140px,24vh,280px);text-align:center;display:grid;justify-items:center;gap:30px;border-top:1px solid var(--hair)}
.litany{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;max-width:1000px}
.litany li{font-family:var(--f-mark);font-size:clamp(15px,1.25vw,19px);letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}

/* The Ritual Atelier */
.atelier{width:min(100%,820px);margin:0 auto;display:grid;gap:30px;justify-items:center}
.atelier fieldset{border:0;margin:0;padding:0;display:grid;gap:14px;justify-items:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips button{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.2em;text-transform:uppercase;background:none;color:var(--mist);border:1px solid var(--hair);padding:13px 18px;cursor:pointer;transition:all .5s}
.chips button[aria-pressed="true"]{color:var(--night);background:var(--frost);border-color:var(--frost)}
.serve-card{width:100%;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:40px;display:grid;gap:16px;justify-items:center}
.serve-card h3{font-size:var(--t-statement);font-style:italic}
.serve-card .glass{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.26em;text-transform:uppercase;color:var(--ice)}
.serve-card .why{color:var(--mist);max-width:30em}
.serve-card ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;max-width:30em;counter-reset:s}
.serve-card ol li{counter-increment:s}
.serve-card ol li::before{content:counter(s,upper-roman) ".  ";font-family:var(--f-mark);font-size:.8em;color:var(--ice);letter-spacing:.1em}
.serve-card .fine{max-width:30em}

/* Recognition */
.honours{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1180px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.honours li{display:grid;justify-items:center;align-content:start;gap:10px;padding:36px 22px;border-left:1px solid var(--hair)}
.honours li:first-child{border-left:0}
.honours .yr{font-family:var(--f-mark);font-size:var(--t-caption);letter-spacing:.34em;color:var(--ice)}
.honours b{font-weight:300;font-style:italic;font-size:clamp(23px,1.9vw,30px);line-height:1.25;color:var(--frost)}
.honours .by{font-size:clamp(17px,1.15vw,19px);color:var(--mist);line-height:1.5}
@media (max-width:820px){.honours{grid-template-columns:1fr}.honours li{border-left:0;border-top:1px solid var(--hair)}.honours li:first-child{border-top:0}}
.medals{width:min(100%,520px);margin:0 auto;background:#f3f1ec;padding:clamp(14px,2vw,24px);box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.press-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(100%,1180px);margin:0 auto}
.press-grid>*{min-width:0}
@media (max-width:820px){.press-grid{grid-template-columns:1fr}}
.press-card{display:grid;justify-items:center;align-content:start;gap:14px;padding:32px 26px;border:1px solid var(--hair);text-decoration:none;transition:border-color .6s,background .6s}
.press-card:hover{border-color:var(--ice);background:rgba(159,221,230,.04)}
.press-card .pt{font-size:clamp(20px,1.5vw,24px);font-style:italic;line-height:1.35;color:var(--frost)}
.press-card .pm{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.14em;color:var(--mist)}
.press-logo{width:180px;filter:invert(1);mix-blend-mode:screen;opacity:.8;margin:0 auto}

/* The Collection — a single object on a plinth */
.plinth{width:min(100%,520px);margin:0 auto;position:relative}
.plinth img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:screen}
.plinth::after{content:"";display:block;height:10px;margin:-3% 18% 0;background:radial-gradient(ellipse at center,rgba(159,221,230,.32),transparent 70%);filter:blur(6px)}
.gallery{background:radial-gradient(ellipse 46% 50% at 50% 30%,rgba(159,221,230,.08),transparent 70%),var(--night)}
.accession{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.3em;text-transform:uppercase;color:var(--mist)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.3em;text-transform:uppercase;color:var(--night);background:var(--frost);border:1px solid var(--frost);padding:18px 30px;cursor:pointer;text-decoration:none;transition:background .6s,color .6s}
.cta:hover{background:#fff}
.cta.alt{background:none;color:var(--frost);border-color:var(--hair)}
.cta.alt:hover{border-color:var(--frost)}
.discover{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.32em;text-transform:uppercase;color:var(--frost);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:6px;transition:border-color .6s}
.discover:hover{border-color:var(--frost)}

/* Finale */
.finale{padding-block:clamp(120px,18vh,200px);text-align:center;display:grid;gap:22px;justify-items:center;border-top:1px solid var(--hair)}

/* Pillar-page opener */
.page-hero{padding-block:calc(160px + env(safe-area-inset-top,0px)) 40px;text-align:center;display:grid;justify-items:center;gap:26px}
.crumbs{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.26em;text-transform:uppercase;color:var(--mist);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.crumbs a{text-decoration:none}
.next-ch{display:grid;justify-items:center;gap:14px;border-top:1px solid var(--hair);padding-block:80px;text-decoration:none;text-align:center}

/* FAQ */
.faq{width:min(100%,860px);margin:0 auto;border-top:1px solid var(--hair);text-align:left}
.faq details{border-bottom:1px solid var(--hair);padding:24px 0}
.faq summary{cursor:pointer;font-size:clamp(21px,1.6vw,26px);list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--frost)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-label);color:var(--ice);transition:transform .5s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist);margin-top:14px}

/* Private Client Office */
.office{display:grid;gap:60px;width:min(100%,860px);margin:0 auto;text-align:left}
.office-chat{border:1px solid var(--hair);background:linear-gradient(180deg,#0a0f14,#05080b);display:grid;grid-template-rows:minmax(360px,56vh) auto;min-width:0}
.enquiry{display:grid;gap:24px}
.field{display:grid;gap:8px}
.field label{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.28em;text-transform:uppercase;color:var(--mist)}
.field input,.field select,.field textarea{background:none;border:0;border-bottom:1px solid var(--hair);color:var(--frost);font:inherit;font-size:var(--t-body);padding:8px 0;border-radius:0;width:100%}
.field select option{background:var(--stone)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ice)}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--mist);font-size:clamp(16px,1.1vw,18px)}
.check input{margin-top:6px;accent-color:var(--ice)}
.form-note{min-height:1.4em;color:var(--mist)}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.contact-row span{user-select:all;color:var(--frost);overflow-wrap:anywhere}

/* Prose page */
.legal{max-width:40em;margin:0 auto;display:grid;gap:1.1em;color:var(--mist);text-align:left}
.legal h2{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.28em;text-transform:uppercase;color:var(--frost);margin-top:1.6em}

/* Footer */
footer{border-top:1px solid var(--hair);padding-block:80px 56px;display:grid;gap:44px;justify-items:center;text-align:center}
.foot-mark{font-family:var(--f-mark);font-size:clamp(40px,8vw,120px);letter-spacing:.32em;padding-left:.32em;line-height:1;color:rgba(238,243,244,.07);user-select:none}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;width:min(100%,1100px)}
.foot-grid>*{min-width:0;display:grid;gap:10px;justify-items:center;align-content:start}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.fine{font-family:var(--f-label);font-size:clamp(13px,.9vw,14.5px);letter-spacing:.04em;color:var(--mist);line-height:1.8}
.fine a{text-decoration:none;border-bottom:1px solid var(--hair)}
.contact-line{font-size:var(--t-body);user-select:all;overflow-wrap:anywhere}

/* Index (menu) */
.index{position:fixed;inset:0;z-index:70;background:rgba(3,5,8,.97);backdrop-filter:blur(20px);display:grid;align-content:center;justify-items:center;text-align:center;padding:calc(90px + env(safe-area-inset-top,0px)) var(--gutr) 40px var(--gut);overflow:auto}
.index ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.index a{display:grid;justify-items:center;gap:2px;text-decoration:none;font-size:var(--t-statement);font-style:italic;color:var(--mist);transition:color .5s;padding:4px 0}
.index a:hover,.index a:focus-visible{color:var(--frost)}
.index a span{font-family:var(--f-mark);font-style:normal;font-size:var(--t-caption);letter-spacing:.34em;color:var(--ice)}
.index .chap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;max-width:900px;margin-top:40px}
.index .chap a{font-size:var(--t-body);font-style:normal;display:inline}
.close{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:var(--gutr)}

/* Age gate */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(2,3,5,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:24px var(--gutr) 24px var(--gut);text-align:center}
.gate-card{display:grid;gap:26px;justify-items:center;max-width:32em}
.gate .mark{font-size:28px}
.gate p{color:var(--mist)}
.gate-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gate .no{display:none}

/* Concierge */
.conc-launch{position:fixed;z-index:55;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;background:rgba(12,17,22,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);color:var(--frost);padding:15px 20px;cursor:pointer;font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.3em;text-transform:uppercase}
.conc-launch i{width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--ice);animation:breathe 4s infinite}
@keyframes breathe{50%{opacity:.35}}
@media (max-width:560px){.conc-launch{padding:12px 15px}}
.conc{position:fixed;z-index:80;top:0;right:0;bottom:0;width:min(520px,100%);background:linear-gradient(180deg,#0a0f14,#04070a);border-left:1px solid var(--hair);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);transform:translateX(102%);transition:transform 1s cubic-bezier(.2,.7,.1,1)}
.conc.open{transform:none}
.conc-head{padding:28px 28px 20px;border-bottom:1px solid var(--hair);display:grid;gap:6px;position:relative}
.conc-head h2{font-size:var(--t-statement);font-style:italic}
.conc-head .close{top:22px;right:16px}
.conc-log{overflow:auto;padding:24px 28px;display:grid;gap:18px;align-content:start;min-width:0}
.msg{font-size:var(--t-body);line-height:1.6;max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left}
.msg.host{color:var(--frost)}
.msg.guest{justify-self:end;max-width:85%;color:var(--mist);font-style:italic;border-right:1px solid var(--ice);padding-right:14px;text-align:right}
.msg.pending{color:var(--mist)}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topics button{font-family:var(--f-label);font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--frost);background:none;border:1px solid var(--hair);padding:12px 14px;cursor:pointer;white-space:normal;text-align:left;max-width:100%;transition:border-color .5s}
.topics button:hover{border-color:var(--ice)}
.conc-form{border-top:1px solid var(--hair);padding:14px 18px 18px 28px;display:flex;gap:10px;align-items:end;min-width:0}
.conc-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.conc-form textarea{flex:1;min-width:0;resize:none;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--frost);font:inherit;font-size:var(--t-body);padding:8px 0;max-height:140px}
.conc-form textarea:focus{outline:none;border-color:var(--ice)}
.copyrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.copyrow code{font-family:var(--f-label);font-size:15px;user-select:all;color:var(--frost);overflow-wrap:anywhere}

/* Consent */
.consent{position:fixed;z-index:85;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(480px,calc(100% - 32px));background:rgba(10,15,20,.95);backdrop-filter:blur(16px);border:1px solid var(--hair);padding:24px;display:grid;gap:14px}
.consent p{font-size:17px;color:var(--mist);line-height:1.6}
.consent .row{display:flex;gap:10px;flex-wrap:wrap}
.consent .cta{padding:14px 18px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--frost);color:var(--night);padding:10px 14px}
.skip:focus{left:12px;top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-copy h1,.hero-copy .caption,.cue{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- refinements ---- */
.scene .prose{max-width:var(--measure)}
.scene .statement{max-width:20em}
.scene .display{max-width:16em}
/* Desktop hero: the bottle rests above a quiet band reserved for the words */
@media (min-aspect-ratio:1/1){
  .hero video,.hero .poster img{top:80px;height:calc(100% - 80px - clamp(150px,21vh,210px));object-position:50% 50%}
}
/* Square studio photographs: feather the edges so no frame is ever visible */
.stage img,.plinth img,.plate.square img{-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 78%,transparent 100%)}
/* Phone hero: the film first, then the words, never stacked on each other */
@media (max-aspect-ratio:1/1){
  .hero{height:auto;min-height:0;max-height:none;padding-top:64px;display:block}
  .hero .poster{position:absolute;top:64px;left:0;right:0;bottom:auto}
  .hero .poster img,.hero video{position:relative;top:auto;left:auto;margin:0;width:100%;height:auto;aspect-ratio:720/1000;object-fit:cover;object-position:50% 0;display:block}
  .hero-copy{position:relative;bottom:auto;left:auto;right:auto;padding-block:4px 60px}
  .hero::after{background:linear-gradient(180deg,rgba(3,5,8,.5) 0%,transparent 10%,transparent 60%,var(--night) 92%)}
}
/* Phone header and concierge: compact and clear of the reading line */
.hide-xs{display:inline}
@media (max-width:560px){
  .hide-xs{display:none}
  .mark{font-size:17px;letter-spacing:.36em;padding-left:.36em}
  .conc-launch{padding:0;width:52px;height:52px;border-radius:50%;justify-content:center}
  .conc-launch .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
:root{--t-caption:clamp(13px,.9vw,15px);--t-body:clamp(20px,1.45vw,24px)}

/* =================== v5 — pictures that breathe =================== */
:root{--night:#040404}
/* A picture scene: the image alone, edge to edge, one caption beneath */
.frame-scene{padding-block:clamp(40px,7vh,90px);display:grid;justify-items:center;gap:22px;text-align:center}
.bleed{margin:0;width:100%;position:relative;overflow:hidden;background:#040404}
.bleed img{width:100%;height:min(88vh,56.25vw);object-fit:cover;object-position:50% 45%}
.square-frame .bleed{width:min(100%,900px)}
.square-frame .bleed img{height:auto;aspect-ratio:1/1;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
.triptych,.diptych{display:grid;gap:clamp(10px,1.2vw,18px);width:min(100%,1400px);margin:0 auto;padding-inline:var(--gut) var(--gutr)}
.triptych{grid-template-columns:repeat(3,minmax(0,1fr))}
.diptych{grid-template-columns:repeat(2,minmax(0,1fr))}
.triptych figure,.diptych figure{margin:0;display:grid;gap:14px;justify-items:center;min-width:0}
.triptych img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.diptych img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.triptych,.diptych{grid-template-columns:1fr}}
/* The bottle on its own, no effects */
.sheen{display:none}
/* The age gate: a threshold, the bottle softly present behind the question */
.gate{background:#020202;padding:24px var(--gutr) 24px var(--gut)}
.gate-bg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.gate-bg img{width:min(78vh,90vw);height:auto;opacity:.28;filter:blur(2px);mix-blend-mode:screen}
.gate-card{position:relative;gap:20px}
.gate .mark{font-size:clamp(26px,2.6vw,36px)}
.gate .statement{max-width:16em}
.gate .fine a{color:var(--frost)}
.gate{display:flex;align-items:center;justify-content:center}
.gate-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100%,600px);gap:20px}
.gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.gate .no{display:none}
.gate-bg img{-webkit-mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 60%,transparent 100%)}
@media (min-aspect-ratio:1/1){ .hero video,.hero .poster img{height:calc(100% - 80px - clamp(200px,28vh,280px))} }
/* The glint on the interactive bottle */
.glint{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none;opacity:1}
/* Photographs now share the page's exact black: no blending needed, so no lifted halo or rings */
.stage img,.plinth img,.plate.square img{mix-blend-mode:normal}
/* The bottle is the highlight: the film takes almost the full screen, one quiet line beneath */
@media (min-aspect-ratio:1/1){
  .hero video,.hero .poster img{top:72px;height:calc(100% - 72px - clamp(104px,14vh,140px))}
  .hero-copy{bottom:clamp(20px,3.2vh,36px);gap:8px}
  .hero-copy h1{font-size:clamp(22px,1.9vw,32px)}
  .cue{margin-top:0;gap:8px}
  .cue i{height:24px}
}
@media (max-aspect-ratio:1/1){ .hero .poster img,.hero video{aspect-ratio:720/940} }
@media (min-aspect-ratio:1/1){ .hero video,.hero .poster img{height:calc(100% - 72px - clamp(140px,18vh,180px))} }
@media (max-aspect-ratio:1/1){ .hero-copy{padding-top:22px} }
.hero{background:var(--night)}