/* ====================================================================
   ETHANOL — /cocktails/ (2026-10-31)
   The site's own HUD world (site/index.html's FLAT DARK PASS tokens,
   restated here because these pages do not load that file): black
   ground, warm-white mono ink, hairlines, bracketed labels, ONE green —
   the served mark on the strength gauge, and nothing else on the page.
   Source of truth: tools/site-cocktails/cocktails.css (build.py copies it).
   ==================================================================== */
@font-face{font-family:"WordmarkThin";font-style:normal;font-weight:100;font-display:swap;src:url("/assets/wordmark-thin.woff2") format("woff2")}
:root{
  --void:#000000;--panel:#0A0A0A;--panel-hi:#121212;
  --rule:#2E2E2E;--rule-hi:#666662;
  --ink:#EDEDE8;--ink-2:#A8A8A3;--ink-3:#8A8A85;
  --phosphor:#4BFF9B;--oxygen:#FF3344;--amber:#D0A94E; /* the homepage's amber, not the app's signalWarn — one token on the site */
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --thin:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --wordmark:"WordmarkThin",var(--thin);
  --maxw:1040px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
:focus-visible{outline:1px solid var(--phosphor);outline-offset:3px}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--mono);font-size:15.5px;line-height:1.65;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--void)}
html{scrollbar-color:var(--rule-hi) var(--void)}
b,strong{font-weight:600}
.dim{color:var(--ink-3)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px);position:relative}

/* ---- label: [ LABEL // CONTEXT ] — the house section heading ---- */
.label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;margin:0}
.label .tick{width:7px;height:7px;background:var(--ink-3);flex:none;display:inline-block}
.label i{font-style:normal;color:var(--ink-3);font-weight:400}
h2.label{display:flex;margin:0 0 18px}

/* ---- nav (the homepage's, verbatim in grammar) ---- */
header.nav{position:sticky;top:0;z-index:50;background:var(--void);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px}
.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;background:var(--void)}
.brand img{height:40px;width:auto;mix-blend-mode:lighten;flex:none}
.brand .word{font-family:var(--wordmark);font-weight:100;font-size:18px;letter-spacing:.2em;color:#fff;-webkit-text-stroke:.4px #fff;white-space:nowrap}
.nav nav{display:flex;align-items:center;gap:22px;flex:none}
.nav nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);transition:color .15s}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a.cta{border:1px solid var(--ink-2);padding:9px 11px;color:var(--ink)}
.nav nav a.cta:hover{border-color:var(--ink);background:var(--panel)}
@media(max-width:560px){.nav-only-wide{display:none}.nav .wrap{height:72px}.brand img{height:34px}.brand .word{font-size:15px;letter-spacing:.16em}.nav nav{gap:14px}.nav nav a.cta{font-size:11px;padding:8px 9px}}
@media(max-width:420px){.brand .word{display:none}}

/* ---- breadcrumb ---- */
.crumb{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:26px 0 0;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink-2)}

/* ---- head: name, tease, glass ---- */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:26px 0 26px;border-bottom:1px solid var(--rule)}
h1{font-family:var(--thin);font-weight:200;font-size:clamp(36px,7vw,68px);letter-spacing:.06em;line-height:1;margin:0;color:var(--ink);text-wrap:balance}
.tease{margin:14px 0 0;color:var(--ink-2);font-size:14px;letter-spacing:.02em;max-width:52ch}
.glass{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.glass figcaption{font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.glass-svg .out{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.glass-svg .liq{opacity:.9}
@media(max-width:560px){.head{grid-template-columns:minmax(0,1fr) auto;align-items:center}.glass-svg{width:64px;height:77px}}

/* ---- readings: the plate ---- */
.readings{margin:22px 0 0;background:var(--panel);border:1px solid var(--rule);border-top-color:var(--rule-hi);padding:20px 22px 18px;position:relative}
.readings::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(237,237,232,.08)}
.gauge-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.gauge-val{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gauge-val b{color:var(--phosphor);font-size:20px;letter-spacing:.04em;font-weight:600;margin-right:4px}
.gauge-track{position:relative;height:36px;border-bottom:1px solid var(--rule-hi);margin:0 0 30px}
.gauge-track .tk{position:absolute;bottom:-1px;width:1px;height:8px;transform:translateX(-.5px)}
.gauge-track .tk::before{content:"";position:absolute;inset:0;background:var(--rule-hi)}
.gauge-track .tk i{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
.gauge-track .tk:first-child i{transform:none;left:0}
.gauge-track .tk:last-child i{transform:none;left:auto;right:0}
.gauge-track .mark{position:absolute;bottom:0;width:1px;height:22px;transform:translateX(-.5px)}
.gauge-track .mark.pre{background:var(--ink-2);height:16px;border-left:1px dashed var(--ink-2);background:none}
.gauge-track .mark.served{width:2px;background:var(--phosphor);height:30px;transform:translateX(-1px)}
/* the signature move: the served mark arrives from the pre-melt mark, so
   the melt is seen as the distance the drink travelled. Still under
   Reduce Motion. */
@media(prefers-reduced-motion:no-preference){
  .gauge-track .mark.served{animation:melt 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:.25s}
  @keyframes melt{from{left:var(--pre)}to{left:var(--served)}}
}
.gauge-track{padding-top:0}
.readings-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:8px}
.channels{display:flex;gap:18px}
.ch{display:flex;flex-direction:column;align-items:center;gap:6px;width:46px}
.ch .cells{display:flex;flex-direction:column;gap:3px}
.ch .cells i{display:block;width:26px;height:6px;border:1px solid var(--rule-hi)}
.ch .cells i.on{background:var(--ink);border-color:var(--ink)}
.ch b{font-size:13px;color:var(--ink);font-weight:600;line-height:1}
.ch span{font-size:11px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.glass figcaption{white-space:nowrap}
.line{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:0 10px;flex-wrap:wrap;align-items:baseline}
.line>span{white-space:nowrap}
.line>span+span::before{content:"·";color:var(--rule-hi);margin-right:10px}
.line b{color:var(--ink);font-weight:600}
.band{padding:1px 6px;border:1px solid var(--ink-2)}
.band.high{color:var(--amber);border-color:var(--amber)}
@media(max-width:560px){.readings{padding:12px 14px 10px;margin-top:12px}.channels{gap:6px}.ch{width:48px}.ch .cells i{width:24px;height:5px}.ch .cells{gap:2px}
  .readings-row{margin-top:2px;gap:10px 16px}.gauge-track{height:28px;margin-bottom:24px}.gauge-head{margin-bottom:6px}
  .line{width:100%;gap:2px 14px;font-size:11px;padding-top:6px;border-top:1px solid var(--rule)}.line>span+span::before{content:none}
  .crumb{padding-top:14px}.head{padding:10px 0 12px}.tease{margin-top:8px;font-size:13px}h1{font-size:30px;letter-spacing:.04em}
  .make{padding:14px 0 16px;gap:20px}.spec td{padding:3px 0}.spec h2.label,.method h2.label{margin-bottom:10px}.spec .fine{display:none}.method .fine{display:block;margin-top:12px}}

/* ---- spec + method ---- */
.make{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);padding:34px 0 26px}
@media(max-width:700px){.make{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 0 20px}}
.spec table{border-collapse:collapse;width:100%;font-size:14.5px}
.spec td{padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.spec tr:last-child td{border-bottom:0}
.spec .qty{white-space:nowrap;color:var(--ink);width:1%;padding-right:18px}
.spec .qty .ml{color:var(--ink-3);font-size:12px;letter-spacing:.04em}
.spec .ing{color:var(--ink);letter-spacing:.06em;font-size:13px;text-transform:uppercase}
.spec .abv{text-align:right;color:var(--ink-3);font-size:12px;white-space:nowrap;padding-left:12px}
.method .fine{display:none}
.fine{margin:10px 0 0;font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.method ol{list-style:none;margin:0;padding:0}
.method li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;letter-spacing:.06em;line-height:1.55}
.method li:last-child{border-bottom:0}
.method .k{color:var(--ink-3);font-size:11px;letter-spacing:.14em;padding-top:2px}
.kin{margin:16px 0 0;font-size:13px;color:var(--ink-2)}
.kin a{border-bottom:1px solid var(--rule-hi)}
.kin a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- the one app row ---- */
.app-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:6px 0 38px}
.app-row p{margin:0;font-size:13px;color:var(--ink-2);max-width:62ch}
.app-row b{color:var(--ink)}
.btn{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink-2);padding:11px 14px;white-space:nowrap;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--ink);background:var(--panel)}

/* ---- sections ---- */
main>section{padding:0 0 38px}
main>section p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.75;max-width:68ch}

/* the working: a small ruled table whose lines add up */
.working{border-collapse:collapse;width:100%;max-width:72ch;font-size:14px}
.working th{text-align:left;font-weight:400;color:var(--ink-3);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px 9px 0;vertical-align:top;white-space:nowrap;width:1%}
.working td{padding:9px 0;color:var(--ink-2);border-bottom:1px solid var(--rule);line-height:1.55}
.working tr:last-child td{border-bottom:0}
.working tr.sum td{color:var(--ink);border-bottom:1px solid var(--rule-hi)}
.working b{color:var(--ink)}

/* molecules */
/* THE MOLECULE CARDS (2026-11-01 polish): one grid, every card the same
   rows — the well, the name, its source line, the three readings, the
   story, and a footer pinned to the bottom — so three cards align across
   whatever each molecule's name, IUPAC string or story needs. The well is
   a fixed height: the turntable (canvas) draws there, the skeletal SVG is
   the no-JavaScript drawing beneath it and leaves once the canvas paints. */
.mols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-auto-rows:auto;gap:1px;background:var(--rule);border:1px solid var(--rule)}
/* each card spans the six rows and lays its children on the grid's own
   rows (subgrid), so the name, the readings and the story start on one
   line across the row of cards whatever each one's source line needs */
.mol{background:var(--void);display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:10px;padding:0 0 20px;min-height:0}
.mol>.from,.mol>.mol-meta,.mol>.story,.mol>.mol-foot{margin-left:18px;margin-right:18px}
.mol-draw{position:relative;height:220px;background:var(--void);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mol-draw .mol-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.mol-draw .mol-3d.is-dragging{cursor:grabbing}
.mol-svg{width:100%;max-width:300px;height:auto;max-height:200px}
@media(max-width:560px){.mol-draw{height:190px}}
.mol-svg line{stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}
.mol-svg .mask{fill:var(--void)}
.mol-svg text{font-family:var(--mono);font-size:12px;fill:var(--ink);font-weight:600}
.mol-svg text.o{fill:var(--oxygen)}
.mol h3{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em;margin:16px 18px 0;color:var(--ink);line-height:1.3}
.mol .from{margin-top:-4px;font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;line-height:1.6;max-width:none}
.mol .from .sep{color:var(--rule-hi);margin:0 2px}
.mol-meta{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 12px;margin-top:2px;margin-bottom:0;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:12.5px;align-items:baseline}
.mol-meta dt{color:var(--ink-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.mol-meta dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere;line-height:1.5}
.mol .story{font-size:13.5px;line-height:1.7;color:var(--ink-2);margin-top:0;margin-bottom:0;max-width:none}
.mol-foot{align-self:end;padding-top:4px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mol .ext{display:inline-block;font-size:11px;letter-spacing:.16em;color:var(--ink-2);border:1px solid var(--rule-hi);padding:9px 12px}
.mol .ext:hover{color:var(--ink);border-color:var(--ink)}
.mol .also{font-size:12px;line-height:1.9;color:var(--ink-2);margin:0;max-width:none}
@supports not (grid-template-rows:subgrid){.mol{display:flex;flex-direction:column;gap:10px}.mol-foot{margin-top:auto}}
.mol .also .dim{letter-spacing:.16em;font-size:11px;margin-right:6px}
.mol .also a{border-bottom:1px solid var(--rule-hi)}
.mol .also a:hover{color:var(--ink);border-color:var(--ink)}

.pour p{border-left:1px solid var(--rule-hi);padding-left:16px}

/* nearby */
.sibs{list-style:none;margin:0;padding:4px 0 0;border-top:1px solid var(--rule)}
.sibs li a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:13.5px;letter-spacing:.04em;transition:background .15s}
.sibs li a:hover{background:var(--panel)}
.sibs .n{color:var(--ink)}
.sibs .m{color:var(--ink-3);font-size:12px}
.all-link{margin:18px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.all-link a{color:var(--ink-2);border-bottom:1px solid var(--rule-hi)}
.all-link a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- index ---- */
.index-head{display:block;padding-bottom:28px}
.index .lead{margin:18px 0 0;color:var(--ink-2);font-size:15px;line-height:1.7;max-width:64ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:22px 0 10px;position:sticky;top:84px;background:var(--void);z-index:5}
@media(max-width:560px){.filters{top:72px}}
.chip{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:1px solid var(--rule-hi);padding:10px 11px;height:33px;cursor:pointer;transition:color .15s,border-color .15s}
.chip i{font-style:normal;color:var(--ink-3);margin-left:4px}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.list-head{display:grid;grid-template-columns:34px minmax(0,1.2fr) minmax(0,1.4fr) 58px;gap:12px;font-size:11px;letter-spacing:.2em;color:var(--ink-3);padding:14px 0 8px;border-bottom:1px solid var(--rule-hi)}
.fam{padding:26px 0 8px}
.fam h2.label{margin-bottom:6px}
.list{list-style:none;margin:0;padding:0}
.list li a{display:grid;grid-template-columns:34px minmax(0,1.2fr) minmax(0,1.4fr) 58px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px;transition:background .15s}
.list li a:hover{background:var(--panel)}
.list .g{display:flex;align-items:center;justify-content:center}
.list .g .glass-svg .out{stroke-width:2.2}
.list .n{color:var(--ink);letter-spacing:.03em}
.list .m{color:var(--ink-3);font-size:12px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .s{text-align:right;color:var(--ink-2);font-size:12.5px}
@media(max-width:560px){.list-head,.list li a{grid-template-columns:28px minmax(0,1fr) 48px}.list .m,.list-head span:nth-child(3){display:none}}

/* ---- footer (the homepage's) ---- */
footer{border-top:1px solid var(--rule);padding:46px 0 56px;margin-top:30px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.foot-brand{display:flex;align-items:center;gap:9px;background:var(--void)}
.foot-brand img{height:40px;width:auto;mix-blend-mode:lighten;flex:none}
.foot-brand .word{font-family:var(--wordmark);font-weight:100;font-size:17px;letter-spacing:.2em;color:#fff;-webkit-text-stroke:.4px #fff}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:color .15s}
.foot-links a:hover{color:var(--ink)}
.notice{border:1px solid var(--rule);padding:18px 20px;margin-bottom:26px;background:var(--void)}
.notice .label{margin-bottom:8px}
.notice p{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-2);max-width:80ch}
.foot-fine{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}