@font-face{
  font-family:"Geist";
  src:url("fonts/Geist-Latin.woff2") format("woff2");
  font-weight:400 700;
  font-display:block;
}

:root{
  --ink:#ffffff;
  --dim:rgba(255,255,255,.70);
  --faint:rgba(255,255,255,.44);
  --hair:rgba(255,255,255,.22);
  --gutter:clamp(20px,4.6vw,88px);
  --shadow:0 1px 18px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#08080a;
  color:var(--ink);
  font-family:"Geist",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

.skip{
  position:fixed; left:-9999px; top:12px; z-index:40;
  background:#fff; color:#000; padding:10px 16px; border-radius:6px;
  font-size:13px; letter-spacing:.02em;
}
.skip:focus{left:12px}

/* ---- the surface ------------------------------------------------------- */

#surface{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  opacity:0;
  transition:opacity 1s ease;
}
body.live #surface{opacity:1}

/* Until the surface is live (and forever, without WebGL2) the page is a
   perfectly ordinary dark document. Nothing here depends on the canvas. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(130% 95% at 72% 16%, #4c4e53 0%, #1b1c1f 48%, #0a0a0c 100%),
    #0a0a0c;
}

/* ---- document ---------------------------------------------------------- */

#doc{position:relative; z-index:2}

.sec{
  position:relative;
  min-height:100svh;
  padding:clamp(70px,9vh,120px) var(--gutter) clamp(54px,7vh,92px);
  display:flex;
  flex-direction:column;
}

.eyebrow{
  display:flex; gap:clamp(18px,4vw,64px);
  margin:0 0 clamp(14px,2.2vh,26px);
  font-size:clamp(9px,.72vw,11px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}
.eyebrow span{position:relative; padding-left:15px; white-space:nowrap}
.eyebrow span:empty{display:none}
.eyebrow span::before{
  content:""; position:absolute; left:0; top:.42em;
  width:5px; height:5px; border-radius:50%; background:currentColor;
}

.head{
  margin:0;
  font-size:clamp(42px,8.2vw,146px);
  line-height:.92;
  letter-spacing:-.035em;
  font-weight:500;
  text-shadow:var(--shadow);
}

/* Once the liquid owns the headline the DOM copy stops painting - but it keeps
   its box. meniscus.js measures these elements every frame to place the
   typography inside the texture, so taking them out of flow (clip, absolute,
   display:none) collapses them to 1px and the liquid draws the headline in the
   wrong place. Transparent ink is the only variant that keeps layout, the
   accessibility tree, text selection and find-in-page all intact. */
body.live .head,
body.live .eyebrow{
  color:transparent;
  text-shadow:none;
}
body.live .eyebrow span::before{background:transparent}

.body{
  margin:clamp(16px,2.4vh,28px) 0 0;
  max-width:36ch;
  font-size:clamp(12.5px,1.02vw,15.5px);
  line-height:1.55;
  color:var(--dim);
  border-left:1px solid var(--hair);
  padding-left:15px;
  white-space:pre-line;
  text-shadow:var(--shadow);
}

.spacer{flex:1 1 auto; min-height:18px}

/* ---- 00 opening -------------------------------------------------------- */

.s-stir{justify-content:flex-end}

/* ---- 01 vessel --------------------------------------------------------- */

.s-pool .specs{
  align-self:flex-end;
  margin:0;
  width:min(360px,80vw);
  border-top:1px solid var(--hair);
}
.s-pool .specs div{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--hair);
  font-size:clamp(11px,.86vw,13px);
  letter-spacing:.02em;
  text-shadow:var(--shadow);
}
.s-pool .specs dt{color:var(--faint); margin:0; text-transform:uppercase; letter-spacing:.16em; font-size:.86em}
.s-pool .specs dd{margin:0; color:var(--ink)}

/* the level the liquid is filling to, drawn as a real line on the page */
.level{
  position:absolute; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 12%,rgba(255,255,255,.5) 88%,transparent);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
body.live .s-pool .level{opacity:1}
.level span{
  position:absolute; right:var(--gutter); top:-1.7em;
  font-size:clamp(9px,.68vw,10.5px);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
}

/* ---- 02 notes ---------------------------------------------------------- */

.s-bands .groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3.4vw,60px);
  max-width:820px;
}
.s-bands .group h3{
  margin:0 0 12px;
  font-size:clamp(9px,.68vw,10.5px);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
  border-bottom:1px solid var(--hair);
  padding-bottom:9px;
}
.s-bands .group ul{margin:0; padding:0; list-style:none}
.s-bands .group li{margin:0 0 3px}
.note{
  appearance:none; background:none; border:0; padding:5px 0;
  font:inherit; color:var(--dim); cursor:pointer;
  font-size:clamp(12.5px,1vw,15px);
  letter-spacing:-.005em;
  text-align:left;
  text-shadow:var(--shadow);
  transition:color .25s ease, transform .25s ease;
}
.note:hover,.note:focus-visible{color:var(--ink); transform:translateX(4px); outline:none}
.note:focus-visible{text-decoration:underline; text-underline-offset:4px}

/* ---- 03 collection ----------------------------------------------------- */

.s-select .rack{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px);
  max-width:900px;
}
.card{
  appearance:none; text-align:left; cursor:pointer;
  background:rgba(12,12,14,.34);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:clamp(14px,1.5vw,22px);
  color:var(--dim);
  font:inherit;
  transition:border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.card:hover,.card:focus-visible{border-color:rgba(255,255,255,.55); color:var(--ink); transform:translateY(-3px); outline:none}
.card[aria-pressed="true"]{
  background:rgba(255,255,255,.08);
  border-color:var(--ink);
  color:var(--ink);
}
.card-index{
  display:block; margin-bottom:auto;
  font-size:clamp(9px,.68vw,10.5px); letter-spacing:.22em; color:var(--faint);
}
.card-name{
  display:block; margin:26px 0 8px;
  font-size:clamp(17px,1.7vw,26px); letter-spacing:-.02em; color:var(--ink);
}
.card-note{display:block; font-size:clamp(11.5px,.9vw,13.5px); line-height:1.5}
.card-long{
  margin:clamp(18px,2.4vh,30px) 0 0;
  max-width:44ch;
  font-size:clamp(12.5px,1vw,15px);
  line-height:1.55;
  color:var(--dim);
  text-shadow:var(--shadow);
  min-height:4.6em;
}

/* ---- 04 ending --------------------------------------------------------- */

.s-settle{justify-content:center; align-items:center; text-align:center}
.s-settle .eyebrow{justify-content:center}
.s-settle .body{
  border-left:0; padding-left:0; text-align:center; max-width:30ch;
  margin-left:auto; margin-right:auto;
}
.action{
  display:inline-block;
  margin:clamp(26px,4vh,46px) 0 0;
  padding:15px 30px;
  border:1px solid var(--ink);
  border-radius:2px;
  color:var(--ink);
  text-decoration:none;
  font-size:clamp(11px,.86vw,13px);
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .3s ease, color .3s ease;
}
.action:hover,.action:focus-visible{background:var(--ink); color:#08080a; outline:none}
.credit{
  margin:clamp(30px,5vh,58px) 0 0;
  font-size:clamp(9.5px,.7vw,11px);
  letter-spacing:.06em;
  color:var(--faint);
}
.credit a{color:inherit}

/* ---- chrome ------------------------------------------------------------ */

.chrome{
  position:fixed; inset:0; z-index:3;
  pointer-events:none;
  opacity:0; transition:opacity 1.2s ease .25s;
}
body.live .chrome{opacity:1}

.spectrum{
  position:absolute;
  left:var(--gutter); bottom:clamp(18px,2.4vh,30px);
  width:clamp(110px,16vw,240px); height:2px; border-radius:2px;
  background:linear-gradient(90deg,#ff3b2f,#ffd23f,#5fe08a,#3fa9ff,#a45cff,#ff3b2f);
  filter:saturate(.85);
}
.dial{
  position:absolute;
  right:var(--gutter); bottom:clamp(24px,4.4vh,58px);
  display:flex; align-items:center; gap:12px; flex-direction:row-reverse;
}
.dial-label{
  font-size:clamp(8px,.6vw,10px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.dial-ring{
  width:clamp(26px,2.4vw,40px); height:clamp(26px,2.4vw,40px); border-radius:50%;
  background:conic-gradient(from 0deg,#ff3b2f,#ffd23f,#5fe08a,#3fa9ff,#a45cff,#ff3b2f);
  mask:radial-gradient(circle,transparent 54%,#000 56%);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%);
  animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- noscript ---------------------------------------------------------- */

.fallback{
  position:relative; z-index:4;
  padding:22vh var(--gutter);
  max-width:46ch;
}
.fallback-mark{font-size:clamp(34px,6vw,72px); letter-spacing:-.03em; margin:0 0 18px}
.fallback p{color:var(--dim); line-height:1.6}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width:760px){
  .s-bands .groups{grid-template-columns:1fr; gap:22px; max-width:none}
  .s-select .rack{grid-template-columns:1fr}
  .card-name{margin-top:14px}
  .card-long{min-height:0}
  .s-pool .specs{width:100%}
  .body{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dial-ring{animation:none}
  #surface{transition:none}
  .note,.card,.action{transition:none}
}