/* ==========================================================================
   AUDÉCIOUS — v9 "Ascent"
   Ground: deep alpine blue. Type: Archivo (expanded) / Newsreader / JetBrains Mono.
   Signature: the elevation gauge + the contour ground.
   Every section declares a [data-theme]; components only ever read --fg/--bg/--rule.
   ========================================================================== */

/* ---------- fonts (self-hosted, subset — no third-party render block) ---------- */
@font-face{
  font-family:'Archivo VF';src:url('fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader VF';src:url('fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader VF';src:url('fonts/newsreader-var-italic.woff2') format('woff2-variations');
  font-weight:200 800;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Mono VF';src:url('fonts/mono-var.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  /* palette — six values, each earning its place */
  --nightfall:#0C1B2E;   /* alpine blue-black: the primary dark ground */
  --depth:#16365C;       /* brand blue */
  --glacier:#DCE4EA;     /* cool pale band */
  --snow:#F7F5F0;        /* warm paper */
  --ember:#E87722;       /* brand orange — rationed */
  --ember-deep:#B25210;  /* the same orange, dark enough to carry snow text */
  --slate:#55636F;       /* secondary text, AA on snow */

  --font-display:'Archivo VF','Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Newsreader VF','Newsreader',Georgia,'Times New Roman',serif;
  --font-mono:'Mono VF','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --fs-mono:.68rem;
  --fs-body:clamp(1rem,.955rem + .22vw,1.14rem);
  --fs-lede:clamp(1.12rem,1.02rem + .5vw,1.42rem);
  --fs-statement:clamp(1.45rem,1.1rem + 1.6vw,2.45rem);
  --fs-h2:clamp(1.85rem,1.35rem + 2.2vw,3.3rem);
  --fs-h1:clamp(2.5rem,1.5rem + 4.4vw,5.6rem);

  --track-mono:.22em;
  --shell:1320px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --rail-w:4.75rem;
  --mast-h:4.25rem;
  --ease:cubic-bezier(.22,.9,.24,1);

  /* default theme = snow */
  --bg:var(--snow);
  --fg:var(--nightfall);
  --fg-2:var(--slate);
  --rule:rgba(12,27,46,.14);
  --label:var(--depth);
  --accent:var(--depth);
  --contour:.038;
}

/* ---------- themes: the only place colour is decided ---------- */
[data-theme="snow"]{--bg:var(--snow);--fg:var(--nightfall);--fg-2:var(--slate);
  --rule:rgba(12,27,46,.14);--label:var(--depth);--accent:var(--depth);--contour:.038}
[data-theme="glacier"]{--bg:var(--glacier);--fg:var(--nightfall);--fg-2:#4B5966;
  --rule:rgba(12,27,46,.16);--label:var(--depth);--accent:var(--depth);--contour:.05}
[data-theme="night"]{--bg:var(--nightfall);--fg:var(--snow);--fg-2:rgba(247,245,240,.66);
  --rule:rgba(247,245,240,.16);--label:rgba(247,245,240,.72);--accent:var(--ember);--contour:.05}
[data-theme="depth"]{--bg:var(--depth);--fg:var(--snow);--fg-2:rgba(247,245,240,.72);
  --rule:rgba(247,245,240,.22);--label:rgba(247,245,240,.78);--accent:var(--ember);--contour:.07}
/* media bands: text always sits on a scrim, so they behave as night */
[data-theme="media"]{--bg:var(--nightfall);--fg:var(--snow);--fg-2:rgba(247,245,240,.82);
  --rule:rgba(247,245,240,.2);--label:rgba(247,245,240,.75);--accent:var(--ember);--contour:0}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--snow);color:var(--nightfall);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.72;
  font-variation-settings:'opsz' 16,'wght' 380;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-top:var(--mast-h);
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--ember);color:var(--snow)}

.skip{
  position:absolute;left:var(--gutter);top:.5rem;z-index:300;
  transform:translateY(-160%);transition:transform .25s var(--ease);
  background:var(--nightfall);color:var(--snow);padding:.75rem 1.25rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;
}
.skip:focus{transform:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type roles ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-variation-settings:'wght' 560,'wdth' 115;
  font-weight:normal;letter-spacing:-.012em;line-height:1.02;
  text-wrap:balance;
}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2);line-height:1.06}
.h3{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.12}

/* the mono data layer — coordinates, altitudes, chapter stamps, captions */
.mono,.stamp,.cap,.metric{
  font-family:var(--font-mono);font-variation-settings:'wght' 450;
  font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;
}
.stamp{display:flex;align-items:center;gap:.85rem;color:var(--label);margin-bottom:1.5rem}
/* The hero has no data-theme but sits on a dark photograph, so the light-ground
   --label (depth, 1.42:1 there) has to be overridden or the kicker is unreadable. */
.hero{--label:var(--snow);--accent:var(--ember)}
.stamp::before{content:"";width:1.9rem;height:1px;background:var(--accent);flex:none}
.stamp b{font-variation-settings:'wght' 600;color:var(--accent)}

.lede{font-size:var(--fs-lede);font-variation-settings:'opsz' 28,'wght' 340;line-height:1.62;max-width:62ch;color:var(--fg)}
.statement{
  font-family:var(--font-display);font-variation-settings:'wght' 420,'wdth' 108;
  font-size:var(--fs-statement);line-height:1.16;letter-spacing:-.018em;
  text-wrap:balance;max-width:26ch;
}
.statement.is-wide{max-width:34ch}
.prose{max-width:66ch}
.prose p + p{margin-top:1.35rem}
.prose a{border-bottom:1px solid var(--accent);transition:background .3s}
.prose a:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.prose em{font-style:italic;font-variation-settings:'opsz' 16,'wght' 380}
.fine{font-size:.86rem;line-height:1.62;color:var(--fg-2)}

/* ---------- layout primitives ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell.is-narrow{max-width:900px}
.shell.is-mid{max-width:1040px}

.band{
  --band-y:clamp(4.5rem,9vh,8rem);
  position:relative;isolation:isolate;
  padding-block:var(--band-y);
  background:var(--bg);color:var(--fg);
}
.band.is-tight{--band-y:clamp(2.75rem,6vh,4.75rem)}
.band.is-flush{--band-y:0}
.band.is-half-top{padding-top:clamp(2.75rem,6vh,4.75rem)}
.band.is-half-bottom{padding-bottom:clamp(2.75rem,6vh,4.75rem)}

/* the contour ground — the bottle's topographic map, at a whisper */
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('contour.svg') center/min(1500px,200%) no-repeat;
  opacity:var(--contour);
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 30%,transparent 82%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 30%,transparent 82%);
}
[data-theme="night"].band::before,[data-theme="depth"].band::before{filter:invert(1) brightness(2)}

.rule{height:1px;background:var(--rule);border:0}

/* ---------- masthead ---------- */
.mast{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--mast-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-inline:var(--gutter);
  background:var(--depth);
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
}
.mast.is-scrolled{
  background:color-mix(in srgb,var(--snow) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(12,27,46,.12);
}
.mast .wordmark img{height:1.85rem;width:auto}
.mast-right{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.4rem)}

.mast-link{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--snow);
  padding:.65rem 1.35rem;border:1px solid rgba(247,245,240,.5);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.mast-link:hover{background:var(--ember);border-color:var(--ember);color:var(--snow)}
.mast.is-scrolled .mast-link{color:var(--nightfall);border-color:rgba(12,27,46,.4)}
.mast.is-scrolled .mast-link:hover{background:var(--ember);border-color:var(--ember);color:var(--snow)}

.menu-btn{
  display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--snow);padding:.65rem 0;
}
.mast.is-scrolled .menu-btn{color:var(--nightfall)}
.menu-btn .glyph{position:relative;width:1.4rem;height:.62rem;flex:none}
.menu-btn .glyph i{position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:.4s var(--ease)}
.menu-btn .glyph i:first-child{top:0}
.menu-btn .glyph i:last-child{bottom:0}
body.nav-open .mast{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.nav-open .menu-btn{color:var(--snow)}
body.nav-open .mast-link{color:var(--snow);border-color:rgba(247,245,240,.5)}
body.nav-open .menu-btn .glyph i:first-child{top:50%;transform:rotate(45deg)}
body.nav-open .menu-btn .glyph i:last-child{bottom:calc(50% - 1px);transform:rotate(-45deg)}

@media(max-width:560px){
  .mast .wordmark img{height:1.5rem}
  .mast-right{gap:.45rem}
  .mast-link{padding:.55rem .8rem;font-size:.6rem;letter-spacing:.13em}
  .menu-btn{font-size:.6rem;letter-spacing:.13em;gap:.5rem}
}

/* ---------- overlay menu: the whole site, in chapters ---------- */
.nav-overlay{
  position:fixed;inset:0;z-index:110;background:var(--nightfall);color:var(--snow);
  display:grid;place-items:center;padding:calc(var(--mast-h) + 2rem) var(--gutter) 2rem;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;
}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
.nav-cols{
  width:100%;max-width:var(--shell);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.nav-col h2{
  font-family:var(--font-mono);font-variation-settings:'wght' 500;
  font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;
  color:rgba(247,245,240,.5);padding-bottom:1rem;margin-bottom:1.25rem;
  border-bottom:1px solid rgba(247,245,240,.18);
}
.nav-col ul{list-style:none}
.nav-col li{margin-bottom:.5rem}
.nav-col a{
  font-family:var(--font-display);font-variation-settings:'wght' 500,'wdth' 112;
  font-size:clamp(1.1rem,1.7vw,1.55rem);letter-spacing:-.01em;line-height:1.2;
  display:inline-block;padding:.28rem 0;position:relative;
  transition:color .3s var(--ease);
}
.nav-col a::after{
  content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);
}
.nav-col a:hover::after,.nav-col a[aria-current="page"]::after{transform:scaleX(1)}
.nav-col a[aria-current="page"]{color:var(--ember)}
.nav-col .sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:var(--track-mono);
  color:rgba(247,245,240,.42);display:block;margin-top:.1rem}
.nav-foot{
  grid-column:1/-1;margin-top:clamp(2rem,5vh,3.5rem);padding-top:1.5rem;
  border-top:1px solid rgba(247,245,240,.18);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.5);
}
.nav-foot b{color:var(--ember);font-variation-settings:'wght' 600}
@media(max-width:860px){
  .nav-cols{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .nav-overlay{place-items:start center}
}
@media(max-width:520px){.nav-cols{grid-template-columns:1fr}}

/* ==========================================================================
   SIGNATURE — the elevation gauge
   Whistler village 675 m → Whistler Mountain 2,182 m, mapped to scroll depth.
   ========================================================================== */
.gauge{
  position:fixed;left:0;top:var(--mast-h);bottom:0;width:var(--rail-w);z-index:90;
  pointer-events:none;color:var(--nightfall);
  /* The two labels at the foot are vertical text whose height is however long
     the words are — "The ascent · 675–2,182 m" runs to 166px. Anchoring them
     at fixed offsets from the bottom put the readout inside the base and the
     rail read as a jumble. Stack them instead and let the scale take what is
     left, so the length of a page name can never collide with anything. */
  display:flex;flex-direction:column;align-items:center;padding-bottom:1.4rem;
  transition:color .5s var(--ease);
}
.gauge[data-on="night"],.gauge[data-on="depth"],.gauge[data-on="media"]{color:var(--snow)}
/* the scale */
.gauge .track{position:relative;flex:1 1 auto;min-height:0;width:100%;margin-top:6%}
.gauge .track::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);
  background:linear-gradient(to bottom,transparent,currentColor 7%,currentColor 93%,transparent);
  opacity:.4;
}
.gauge .track i{
  position:absolute;left:50%;top:calc((1 - var(--a,0)) * 100%);transform:translateX(-50%);
  width:.72rem;height:1px;background:currentColor;opacity:.6;
}
.gauge .track i b{
  position:absolute;left:calc(100% + .4rem);top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;
  font-variation-settings:'wght' 500;opacity:.95;white-space:nowrap;
}
/* the needle — climbs as you scroll */
.gauge .mark{
  position:absolute;left:50%;top:calc((1 - var(--p,0)) * 100%);transform:translate(-50%,-50%);
  width:1.3rem;height:1px;background:var(--ember);
}
.gauge .mark::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;background:var(--ember);border-radius:50%;
}
/* the digital readout, held at the foot of the scale */
.gauge .readout{
  position:relative;flex:none;margin:1.5rem 0 .9rem;transform:rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--font-mono);font-variation-settings:'wght' 600;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
}
.gauge .readout .alt{font-variation-settings:'wght' 700;font-variant-numeric:tabular-nums;color:var(--ember)}
.gauge .readout .sep{opacity:.35;padding-block:.4rem}
.gauge .base{
  position:relative;flex:none;transform:rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.7;white-space:nowrap;
}
@media(max-height:620px){
  .gauge .readout,.gauge .base{display:none}
  .gauge{padding-bottom:6%}
}
/* mobile: the gauge becomes a hairline of progress */
.gauge-bar{
  position:fixed;top:var(--mast-h);left:0;height:2px;width:0;z-index:119;
  background:var(--ember);display:none;transition:width .1s linear;
}
/* Below 1180px the rail lies down rather than disappearing. The altitude is
   the signature — a bare progress hairline is the generic version of it — so
   the scale, the needle and the readout all survive, just along the top. */
@media(max-width:1180px){
  .gauge{
    top:var(--mast-h);bottom:auto;left:0;right:0;width:auto;height:1.55rem;
    display:block;padding-bottom:0;                /* the column is a rail again */
  }
  .gauge .track{
    /* width:100% from the column layout would beat `right` and run the rail
       off the end of the screen, so it is handed back too */
    position:absolute;flex:none;margin-top:0;width:auto;
    left:var(--gutter);right:calc(var(--gutter) + 5.25rem);top:.7rem;bottom:auto;height:1px;
  }
  .gauge .track::before{
    left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;transform:translateY(-.5px);
    background:linear-gradient(to right,transparent,currentColor 4%,currentColor 96%,transparent);
  }
  .gauge .track::after{                       /* the climb so far */
    content:"";position:absolute;left:0;top:50%;height:1px;
    width:calc(var(--p,0) * 100%);background:var(--ember);transform:translateY(-.5px);
  }
  .gauge .track i{
    left:calc(var(--a,0) * 100%);top:50%;transform:translate(-50%,-50%);
    width:1px;height:.42rem;
  }
  .gauge .track i b{display:none}             /* no room for three labels */
  .gauge .mark{
    left:calc(var(--p,0) * 100%);top:50%;transform:translate(-50%,-50%);
    width:1px;height:.62rem;
  }
  .gauge .readout{
    position:absolute;margin:0;
    writing-mode:horizontal-tb;transform:none;
    left:auto;right:var(--gutter);top:.15rem;bottom:auto;
    font-size:.56rem;letter-spacing:.13em;
  }
  .gauge .readout .sep{padding-block:0;padding-inline:.35rem}
  .gauge .base{display:none}
  .gauge-bar{display:none}                    /* the rail does this job now */
}
@media(max-width:560px){
  .gauge .track{right:calc(var(--gutter) + 3.4rem)}
  .gauge .readout .rd-page{display:none}      /* just the altitude at this width */
  .gauge .readout .sep{display:none}
}

/* ---------- hero: the brand film ---------- */
.hero{
  position:relative;min-height:calc(100svh - var(--mast-h));
  background:var(--nightfall);color:var(--snow);overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.9)}
.hero-media iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;
  border:0;pointer-events:none;filter:saturate(.92) brightness(.88);
}
.hero-poster{
  position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  transition:opacity 1.6s var(--ease);pointer-events:none;
}
.hero-poster.is-gone{opacity:0}
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,27,46,.86) 0%,rgba(12,27,46,.22) 46%,rgba(12,27,46,.32) 100%);
}
.hero-inner{position:relative;z-index:3;width:100%;padding-block:clamp(2.5rem,7vh,5rem)}
.hero-line{
  font-family:var(--font-display);font-variation-settings:'wght' 480,'wdth' 118;
  font-size:clamp(2.1rem,1rem + 4.6vw,5rem);line-height:.98;letter-spacing:-.022em;
  max-width:16ch;text-wrap:balance;
}
.hero-line .em{color:var(--ember)}
.hero-sub{margin-top:1.5rem;max-width:44ch;color:rgba(247,245,240,.86);font-variation-settings:'opsz' 24,'wght' 330;font-size:var(--fs-lede)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.25rem;align-items:center}
.hero-meta{
  position:absolute;right:var(--gutter);bottom:clamp(2.5rem,7vh,5rem);z-index:3;
  text-align:right;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,245,240,.6);line-height:2.1;
}
@media(max-width:900px){.hero-meta{display:none}}

/* page hero (image) */
.page-hero{
  position:relative;min-height:min(72svh,620px);display:flex;align-items:flex-end;
  background:var(--nightfall);color:var(--snow);overflow:hidden;isolation:isolate;
}
.page-hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.86)}
/* the bottle sits right of centre — keep it in frame on narrow viewports */
.page-hero .bg img.bias-right{object-position:68% 52%}
/* A held bottle is a tall subject in a wide band, and a cover crop eats the
   ends. Size this hero off its own width so nearly the whole 3:2 frame shows
   — sky, ridgeline and valley — instead of a letterboxed slice of it. */
.page-hero.is-wideshot{min-height:max(420px,min(88svh,66vw))}
/* Backlit frame: the sun flares are the point, so it settles at the
   photograph's own brightness — but it opens dim like every other hero and
   lifts into full light as the frame settles. Held until the gate clears, or
   the lift would play out behind it and never be seen. */
.page-hero.is-wideshot .bg img{filter:saturate(.9) brightness(.86);
  transition:transform 3s var(--ease),filter 2.4s var(--ease)}
.page-hero.is-wideshot.is-lit .bg img{filter:none}
.page-hero.is-wideshot .scrim{background:linear-gradient(to top,
  rgba(12,27,46,.82) 0%,rgba(12,27,46,.46) 22%,rgba(12,27,46,0) 52%)}
.page-hero.is-wideshot .inner{text-shadow:0 1px 24px rgba(12,27,46,.55)}
.page-hero .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,27,46,.88),rgba(12,27,46,.15) 62%)}
.page-hero .inner{position:relative;width:100%;padding-block:clamp(2.5rem,7vh,4.5rem)}
/* no media behind it — the chapter mark carries the page on its own */
.page-hero.is-plain{min-height:0;background:var(--bg);color:var(--fg)}
.page-hero.is-plain .inner{padding-block:clamp(3.25rem,9vh,5.75rem)}

/* page opener without an image */
.opener{padding-top:clamp(3rem,8vh,5.5rem)}

/* ---------- controls ---------- */
.btn{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);text-transform:uppercase;
  padding:1rem 2.2rem;border:1px solid currentColor;background:none;cursor:pointer;
  position:relative;overflow:hidden;z-index:0;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.btn:hover{color:var(--snow);border-color:var(--ember)}
.btn:hover::before{transform:scaleX(1)}
.btn.is-solid{background:var(--ember);border-color:var(--ember);color:var(--snow)}
.btn.is-solid::before{background:var(--nightfall)}
.btn.is-solid:hover{border-color:var(--nightfall)}

.quiet-link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;padding-bottom:.35rem;border-bottom:1px solid var(--accent);
  transition:gap .35s var(--ease);
}
.quiet-link:hover{gap:1rem}

.sound{
  display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;
  background:rgba(12,27,46,.42);border:1px solid rgba(247,245,240,.42);color:var(--snow);
  padding:.72rem 1.15rem;backdrop-filter:blur(8px);
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;
  transition:border-color .35s var(--ease);
}
.sound:hover{border-color:var(--ember)}
.sound .bars{display:inline-flex;gap:2px;align-items:flex-end;height:11px}
.sound .bars i{width:2px;height:3px;background:var(--ember);transition:height .2s}
.sound.is-on .bars i{animation:eq .9s ease-in-out infinite alternate}
.sound.is-on .bars i:nth-child(2){animation-delay:.15s}
.sound.is-on .bars i:nth-child(3){animation-delay:.3s}
@keyframes eq{from{height:3px}to{height:11px}}

/* ---------- cinematic media band ---------- */
.cine{
  position:relative;min-height:min(82svh,760px);display:flex;align-items:flex-end;
  color:var(--snow);overflow:hidden;isolation:isolate;background:var(--nightfall);
}
.cine .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cine .bg img{width:100%;height:112%;object-fit:cover;will-change:transform}
.cine .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,27,46,.88),rgba(12,27,46,.1) 64%)}
.cine .inner{position:relative;width:100%;padding-block:clamp(3rem,7vh,5rem)}
.cine .inner .lede{max-width:56ch}

/* a wide plate for process/journey artwork — never cropped, it is a diagram */
.plate-wide{position:relative;background:var(--bg);margin:0}
.plate-wide img{width:100%;height:auto;display:block}
.plate-wide figcaption{display:block;padding-block:clamp(1.1rem,2.5vh,1.6rem)}
.plate-wide .mono{display:block;font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--accent)}
.plate-wide .cap-note{display:block;margin-top:.55rem;color:var(--fg-2);
  font-size:.95rem;line-height:1.6;max-width:62ch}

/* full image, nothing cropped */
.plate{position:relative;isolation:isolate;background:var(--nightfall);color:var(--snow)}
/* <picture> wraps every local image (tools/build_images.py). display:contents
   keeps the <img> as the layout child so no flex/grid parent gains a box. */
picture{display:contents}
.plate > img,.plate > picture > img{width:100%;height:auto}
.plate .inner{
  position:absolute;left:0;right:0;bottom:0;padding-block:clamp(2rem,5vh,3.5rem);
  background:linear-gradient(to top,rgba(12,27,46,.86),transparent);
}

.diptych{position:relative;isolation:isolate;background:var(--nightfall);color:var(--snow);overflow:hidden}
.diptych .panes{display:grid;grid-template-columns:1fr 1fr;min-height:min(76svh,700px)}
.diptych .panes > div{overflow:hidden;position:relative}
.diptych .panes img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.88)}
.diptych .inner{
  position:absolute;left:0;right:0;bottom:0;padding-block:clamp(2.5rem,6vh,4.5rem);
  background:linear-gradient(to top,rgba(12,27,46,.88),transparent);
}
@media(max-width:720px){
  .diptych .panes{grid-template-columns:1fr;min-height:auto}
  .diptych .panes > div{aspect-ratio:16/11}
}

/* ---------- grids ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.duo.is-start{align-items:start}
.duo.is-flip > .media{order:2}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo.is-flip > .media{order:0}}

.media{overflow:hidden;position:relative;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.media:hover img{transform:scale(1.04)}
.media.is-tall{aspect-ratio:4/5}
/* a bottle shot much taller than the frame loses its cap to a centre crop */
.media img.is-tallshot{object-position:50% 14%}
.media.is-wide{aspect-ratio:16/10}
/* Show the photograph whole. The bartender features use photographs that were
   chosen as photographs — some near square, one over 2:1 — and a fixed 4:5
   frame with object-fit:cover was slicing them down to an unrecognisable
   strip. Here the frame takes the picture's shape instead of the reverse. */
.media.is-asis{aspect-ratio:auto;background:none}
.media.is-asis img{height:auto;object-fit:contain}
.media.is-video{aspect-ratio:16/9;background:var(--nightfall)}
.media.is-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.cine-video{position:relative;background:var(--nightfall);overflow:hidden}
.cine-video .frame{position:relative;width:100%;height:clamp(260px,42.86vw,600px)}
.cine-video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:720px){.cine-video .frame{height:clamp(220px,56.25vw,400px)}}

/* film poster */
.poster{position:relative;display:block;width:100%;overflow:hidden;background:var(--nightfall);
  height:clamp(240px,42.86vw,560px)}
@media(max-width:720px){.poster{height:clamp(220px,62.5vw,420px)}}
.poster img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:transform 1.4s var(--ease)}
.poster:hover img{transform:scale(1.03)}
.poster .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:5rem;height:5rem;border-radius:50%;border:1px solid rgba(247,245,240,.85);
  background:rgba(12,27,46,.4);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .35s,border-color .35s;
}
.poster:hover .play{background:var(--ember);border-color:var(--ember)}
.poster .play::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:14px solid var(--snow);border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.poster .cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.15rem var(--gutter);color:var(--snow);
  background:linear-gradient(to top,rgba(12,27,46,.8),transparent);
}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.2vw,1.1rem)}
.gallery .g{position:relative;overflow:hidden;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.gallery .g img{width:100%;height:100%;object-fit:cover;filter:saturate(.93);transition:transform 1.5s var(--ease)}
.gallery .g:hover img{transform:scale(1.05)}
.gallery .w2{grid-column:span 2;aspect-ratio:4/5}
.gallery .w3{grid-column:span 3;aspect-ratio:3/2}
.gallery .w4{grid-column:span 4;aspect-ratio:16/9}
.gallery .w6{grid-column:span 6;aspect-ratio:21/9}
@media(max-width:720px){.gallery .w2,.gallery .w3,.gallery .w4{grid-column:span 6;aspect-ratio:16/10}}
.gallery .g figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;color:var(--snow);
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);text-transform:uppercase;
  background:linear-gradient(to top,rgba(12,27,46,.78),transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.gallery .g:hover figcaption,.gallery .g:focus-within figcaption{opacity:1}

/* a gallery frame is a button now, so it needs to say so */
.gallery .g{cursor:zoom-in}
.gallery .g:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- lightbox ---------- */
.lbox{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(12,27,46,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lbox.is-on{display:grid}
.lbox figure{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:.9rem}
.lbox img{max-width:100%;max-height:82svh;width:auto;height:auto;display:block;
  box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lbox figcaption{font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--glacier);
  text-align:center;max-width:70ch}
.lb-count{position:absolute;left:0;right:0;bottom:clamp(.9rem,2.5vh,1.6rem);
  text-align:center;font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);color:var(--glacier);opacity:.65;margin:0}
.lbox button{
  position:absolute;background:none;border:0;color:var(--snow);cursor:pointer;
  font-size:2rem;line-height:1;padding:.6rem .9rem;opacity:.7;
  transition:opacity .2s var(--ease);
}
.lbox button:hover{opacity:1}
.lb-close{top:clamp(.5rem,2vh,1.4rem);right:clamp(.5rem,2vw,1.4rem);font-size:2.4rem}
.lb-nav{top:50%;transform:translateY(-50%);font-size:3rem}
.lb-nav.is-prev{left:clamp(.2rem,1.5vw,1rem)}
.lb-nav.is-next{right:clamp(.2rem,1.5vw,1rem)}
@media(max-width:720px){
  .lb-nav{top:auto;bottom:3.2rem;transform:none;font-size:2.4rem}
  .lbox img{max-height:70svh}
}

/* ---------- the spirits (new) ---------- */
.bottle-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.bottle-row.is-flip > .media{order:2}
@media(max-width:900px){.bottle-row{grid-template-columns:1fr}.bottle-row.is-flip > .media{order:0}}
.spec{
  list-style:none;margin-top:2.25rem;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}
/* Values that are long unbroken strings — an email address has no place to
   wrap — need a wider track, or they run straight into the next column. */
.spec.is-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  column-gap:clamp(1.25rem,3vw,2.5rem)}
.spec.is-wide .v{overflow-wrap:anywhere}
.spec li{padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.spec dt,.spec .k{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);display:block;margin-bottom:.4rem;
}
.spec .v{font-family:var(--font-display);font-variation-settings:'wght' 500,'wdth' 112;font-size:1.02rem;letter-spacing:-.01em}
.notes{list-style:none;margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem}
.notes li{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);text-transform:uppercase;
  border:1px solid var(--rule);padding:.5rem .85rem;color:var(--fg-2);
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
}
/* Each note fills on hover. --ember-deep rather than --ember: the brand orange
   carries snow text at 2.72:1, and these are 9px uppercase — the one place the
   accent cannot be used at full strength behind text. */
.notes li:hover{
  background:var(--ember-deep);border-color:var(--ember-deep);color:var(--snow);
}
@media(prefers-reduced-motion:reduce){.notes li{transition:none}}
@media(hover:none){.notes li:hover{background:none;border-color:var(--rule);color:var(--fg-2)}}
.awards{display:flex;gap:clamp(1.5rem,5vw,4rem);align-items:center;flex-wrap:wrap;justify-content:center}
.awards img{max-height:9.5rem;width:auto}

/* ---------- experience: permanent galleries + the agenda ---------- */
/* wide cinematic panels that cycle their own photography */
.perm{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.perm-card{
  position:relative;display:flex;align-items:flex-end;min-height:min(68svh,620px);
  overflow:hidden;isolation:isolate;background:#07121F;color:var(--snow);
}
.perm-card .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.perm-card .bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) brightness(.8);
  opacity:0;z-index:0;transition:opacity 1.5s var(--ease);
  will-change:opacity,transform;backface-visibility:hidden;
}
/* the outgoing frame holds at full opacity underneath while the incoming one
   fades in above it — cross-fading both at once would dip to the card colour */
.perm-card .bg img.is-prev{opacity:1;z-index:1}
.perm-card .bg img.is-on{opacity:1;z-index:2}
/* the slow drift is what keeps a still frame feeling alive. Applied from JS so
   the outgoing frame keeps its transform instead of snapping back to scale(1). */
@keyframes permDrift{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.perm-card .scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(7,18,31,.93),rgba(7,18,31,.1) 72%),
    linear-gradient(to right,rgba(7,18,31,.62),rgba(7,18,31,0) 60%)}
.perm-card .dots{position:absolute;right:clamp(1.25rem,3vw,2.25rem);bottom:clamp(1.4rem,3vw,2.4rem);
  display:flex;gap:.45rem;z-index:1}
.perm-card .dots i{width:1.4rem;height:2px;background:rgba(247,245,240,.3);transition:background .5s}
.perm-card .dots i.is-on{background:var(--ember)}
@media(prefers-reduced-motion:reduce){
  .perm-card .bg img{transition:none;animation:none !important}
}
.perm-card .inner{position:relative;width:100%;padding:clamp(1.5rem,3.5vw,2.5rem)}
.perm-card .kind{
  display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.74);
}
.perm-card .kind::before{content:"";width:1.6rem;height:1px;background:var(--ember);flex:none}
.perm-card .name{font-family:var(--font-display);font-variation-settings:'wght' 550,'wdth' 114;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);line-height:1.08;letter-spacing:-.016em}
.perm-card .note{margin-top:.7rem;max-width:40ch;color:rgba(247,245,240,.8);font-size:.94rem;line-height:1.55}

/* the agenda — one continuous run, most recent first. Deliberately not grouped
   by year: the date rides in each row so a thin year never reads as a gap. */
.agenda{border-top:1px solid var(--rule)}
.evt{
  display:grid;grid-template-columns:10.5rem minmax(0,1fr) auto 1.5rem;
  gap:.5rem 1.75rem;align-items:baseline;
  padding:1.2rem .9rem;margin-inline:-.9rem;
  border-bottom:1px solid var(--rule);transition:background .35s;
}
.evt:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.evt .when,.evt .where{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);
}
.evt .when{white-space:nowrap}
.evt .where{text-align:right}
.evt .what{
  font-family:var(--font-display);font-variation-settings:'wght' 520,'wdth' 112;
  font-size:clamp(1.02rem,.94rem + .35vw,1.28rem);letter-spacing:-.012em;line-height:1.22;
  transition:color .3s;
}
.evt:hover .what{color:var(--accent)}
.evt .go{justify-self:end;color:var(--fg-2);opacity:0;transform:translateX(-.35rem);
  transition:opacity .3s,transform .3s var(--ease)}
.evt:hover .go,.evt:focus-visible .go{opacity:1;transform:none;color:var(--accent)}
.evt.is-tbc .when{color:var(--accent)}
@media(max-width:760px){
  .evt{grid-template-columns:1fr auto;gap:.35rem 1rem;padding-block:1.35rem}
  .evt .when{grid-column:1/-1}
  .evt .where{text-align:left;grid-column:1/2}
  .evt .go{grid-row:2;align-self:center}
}

/* the range shot — white studio product line-up */
.range-shot{margin:0}
.range-shot img{width:100%;height:auto;display:block}

/* trademark marks — present, but quiet */
.tm{font-size:max(7.5px,.52em);vertical-align:.55em;color:inherit;
  letter-spacing:.02em;margin-left:.06em;font-weight:400}

/* inline EU organic mark beside a product description */
.euo{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2)}
.euo img,.euo .slot{width:2.4rem;height:1.6rem;flex:none;object-fit:contain}
.euo .slot{display:grid;place-items:center;border:1px dashed var(--rule);
  font-size:.44rem;line-height:1.1;text-align:center;color:var(--fg-2)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:clamp(2rem,4vw,3.25rem) clamp(1.4rem,3vw,2.4rem)}
.person .media{aspect-ratio:4/5;margin-bottom:1.25rem}
.person .media img{filter:saturate(.9)}
.person h2{font-size:1rem;display:flex;align-items:baseline;gap:.8rem;margin-bottom:.3rem}
.person h2::after{content:"";flex:1;height:1px;background:var(--rule);transition:background .4s}
.person:hover h3::after{background:var(--accent)}
.person .role{font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--fg-2);margin-bottom:.9rem}
.person p{font-size:.94rem;line-height:1.66;color:var(--fg-2)}

/* feature (audécity) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feature.is-flip > .media{order:2}
@media(max-width:900px){.feature{grid-template-columns:1fr}.feature.is-flip > .media{order:0}}

/* bartenders */
.bar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:clamp(1.75rem,3.5vw,2.75rem)}
.bar-card{border:1px solid var(--rule);display:flex;flex-direction:column;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.bar-card .media{aspect-ratio:4/5}
.bar-card .body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.bar-card .name{font-family:var(--font-display);font-variation-settings:'wght' 550,'wdth' 112;font-size:1rem;letter-spacing:-.01em}
.bar-card .role{font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--fg-2);margin-top:.4rem}
.bar-card .serve{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--rule)}
.bar-card .serve h4{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);text-transform:uppercase;
  color:var(--accent);margin-bottom:.75rem;font-variation-settings:'wght' 500;
}
.bar-card .serve ul{list-style:none;font-size:.9rem;line-height:1.85}
.bar-card .serve .method{font-size:.85rem;color:var(--fg-2);margin-top:.75rem;line-height:1.6}

/* venues */
.venue{position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end;
  color:var(--snow);overflow:hidden;isolation:isolate;background:var(--nightfall)}
.venue .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.venue .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82)}
.venue .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,27,46,.88),rgba(12,27,46,.06) 62%)}
.venue .inner{position:relative;width:100%;padding-block:clamp(2.25rem,5.5vh,3.75rem)}
.venue .name{font-family:var(--font-display);font-variation-settings:'wght' 550,'wdth' 116;
  font-size:clamp(1.7rem,4vw,3.1rem);letter-spacing:-.018em;line-height:1.04}
.venue .tag{display:block;margin-top:.75rem;max-width:52ch;color:rgba(247,245,240,.85)}
.venue .assoc{display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.56rem;
  letter-spacing:var(--track-mono);text-transform:uppercase;color:rgba(247,245,240,.58)}

/* ---------- testimonials ---------- */
.voices .head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}
.v-track{display:flex;gap:clamp(1rem,2.2vw,1.75rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.25rem;scrollbar-width:none;cursor:grab}
.v-track::-webkit-scrollbar{display:none}
.v-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.v-card{flex:0 0 clamp(260px,25vw,340px);scroll-snap-align:start;border:1px solid var(--rule);
  display:flex;flex-direction:column;transition:border-color .4s var(--ease)}
.v-card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.v-card .shot{aspect-ratio:4/5;overflow:hidden}
.v-card .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform 1.4s var(--ease)}
.v-card:hover .shot img{transform:scale(1.05)}
.v-card .body{padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.v-card .name{font-family:var(--font-display);font-variation-settings:'wght' 550,'wdth' 112;font-size:.98rem;letter-spacing:-.01em}
.v-card .role{font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);margin-top:-.55rem}
.v-card blockquote{font-size:.95rem;line-height:1.66;color:var(--fg)}
.v-nav{display:flex;gap:.55rem;flex:none}
.v-nav button{width:2.85rem;height:2.85rem;border:1px solid var(--rule);background:none;cursor:pointer;
  display:grid;place-items:center;transition:border-color .3s,background .3s}
.v-nav button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(2rem,4vw,3.25rem)}
.post .media{aspect-ratio:16/10;margin-bottom:1.35rem}
.post h3{font-size:1.3rem;margin:.7rem 0 .7rem;line-height:1.16}
.post p{font-size:.94rem;color:var(--fg-2)}

/* cinematic story panels — each is a full-bleed link, built on .cine so it
   inherits the same geometry and the parallax already wired in site.js */
.stories{background:var(--nightfall)}
.story{display:flex;align-items:flex-end;color:var(--snow)}
.story + .story{border-top:1px solid rgba(247,245,240,.14)}
/* bottom scrim carries the type; the side wash keeps it legible over busy frames */
.story .scrim,.cine.is-editorial .scrim{background:
  linear-gradient(to top,rgba(12,27,46,.92),rgba(12,27,46,.12) 72%),
  linear-gradient(to right,rgba(12,27,46,.7),rgba(12,27,46,0) 64%)}
.story .bg img{filter:saturate(.86) brightness(.8);
  transition:transform 1.8s var(--ease),filter .9s var(--ease)}
.story:hover .bg img,.story:focus-visible .bg img{transform:scale(1.05);filter:saturate(.96) brightness(.9)}
.story:focus-visible{outline:2px solid var(--ember);outline-offset:-5px}
.story .idx{
  display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.74);
}
.story .idx::after{content:"";width:2.75rem;height:1px;background:var(--ember);flex:none}
.story .title{
  font-family:var(--font-display);font-variation-settings:'wght' 560,'wdth' 115;
  font-size:clamp(1.75rem,1.15rem + 2.5vw,3.4rem);line-height:1.04;letter-spacing:-.016em;
  text-wrap:balance;max-width:21ch;
}
.story .sell{
  margin-top:1.15rem;max-width:54ch;color:rgba(247,245,240,.84);
  font-size:var(--fs-lede);font-variation-settings:'opsz' 28,'wght' 330;line-height:1.55;
}
.story .cue{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.9rem;padding-bottom:.4rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;border-bottom:1px solid rgba(247,245,240,.42);
  transition:color .35s,border-color .35s;
}
.story:hover .cue{color:var(--ember);border-color:var(--ember)}
.story .cue i{font-style:normal;transition:transform .35s var(--ease)}
.story:hover .cue i{transform:translateX(.35rem)}
@media(max-width:720px){.story .title,.story .sell{max-width:none}}

.article{max-width:68ch;margin-inline:auto}
.article h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);line-height:1.08;margin-bottom:1rem}
.article .standfirst{font-size:var(--fs-lede);font-variation-settings:'opsz' 28,'wght' 330;color:var(--fg-2);margin-bottom:2.25rem}
.article .byline{display:flex;gap:1.4rem;align-items:center;margin-bottom:1.5rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2)}
.pager{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:3.5rem;padding-top:1.75rem}
.pager a{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;max-width:40ch}
.pager a:hover{color:var(--accent)}

/* ---------- the bar: cinematic recipe features ---------- */
.pour{position:relative;isolation:isolate;background:#07121F;color:var(--snow);overflow:hidden}
.pour + .pour{border-top:1px solid rgba(247,245,240,.1)}
.pour .frame{position:relative;min-height:min(72svh,660px);display:flex;align-items:flex-end}
.pour .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* bias the crop upward: faces sit in the top third of these frames, and a
   centred cover crop was cutting them off */
.pour .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(.94) brightness(.92);
  transition:transform 1.8s var(--ease),filter .9s var(--ease)}
.pour:hover .bg img{transform:scale(1.03);filter:saturate(1) brightness(.98)}
/* the type sits in a shallow band at the foot, so the photograph stays visible */
.pour .scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(7,18,31,.95) 0%,rgba(7,18,31,.82) 22%,rgba(7,18,31,0) 52%)}
.pour .inner{position:relative;width:100%;padding-block:clamp(2.5rem,6vh,4.25rem)}
.pour .who{display:flex;align-items:center;gap:.85rem;margin-bottom:1.15rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.76)}
.pour .who::before{content:"";width:1.9rem;height:1px;background:var(--ember);flex:none}

.pour .drink{font-family:var(--font-display);font-variation-settings:'wght' 560,'wdth' 116;
  font-size:clamp(2rem,1.3rem + 3vw,4rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
/* the classic name, under the landmark the house named it for */
.pour .also{margin-top:.5rem;font-family:var(--font-body);
  font-size:var(--fs-lede);font-variation-settings:'opsz' 28,'wght' 330;
  color:var(--ember)}
.pour .by{margin-top:.9rem;font-size:var(--fs-lede);font-variation-settings:'opsz' 28,'wght' 330;
  color:rgba(247,245,240,.84)}

/* the spec sheet sits under its own frame */
.pour .sheet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.75rem,4vw,3.5rem);padding-block:clamp(2rem,5vh,3.25rem);align-items:start}
@media(max-width:820px){.pour .sheet{grid-template-columns:1fr}}
.pour .sheet h3,.sidebar h4{font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--ember);margin-bottom:1rem}
.spec-list{list-style:none;display:grid;gap:.05rem}
.spec-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid rgba(247,245,240,.12);font-size:.98rem;line-height:1.5}
.spec-list li::before{content:"";width:.3rem;height:.3rem;background:var(--ember);
  border-radius:50%;transform:translateY(-.2rem)}
.pour .how{font-size:.96rem;line-height:1.68;color:rgba(247,245,240,.82)}
.pour .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.pour .meta span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;border:1px solid rgba(247,245,240,.22);padding:.42rem .7rem;
  color:rgba(247,245,240,.78)}
.sidebar{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(247,245,240,.16)}
.sidebar ol{list-style:none;counter-reset:s;display:grid;gap:.85rem}
.sidebar li{display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;
  font-size:.92rem;line-height:1.6;color:rgba(247,245,240,.8)}
.sidebar li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  color:var(--ember);padding-top:.28rem}

/* ---------- the spec, folded away until asked for ----------
   31 serves with their specifications open made the page 36 screens long.
   Folded, it is 24. <details> rather than a scripted toggle so it still works
   with JavaScript off, still prints, and can still be found in the page. */
.pour .drop{border-top:1px solid rgba(247,245,240,.14)}
.pour .drop-bar{list-style:none;cursor:pointer;display:block}
.pour .drop-bar::-webkit-details-marker{display:none}
.pour .drop-bar::marker{content:""}
.pour .drop-bar .shell{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.3rem;color:var(--snow);transition:color .3s;
}
.pour .drop-bar:hover .shell{color:var(--ember)}
.pour .drop-bar .lab{
  display:flex;align-items:center;gap:.85rem;flex:none;
  font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:var(--track-mono);text-transform:uppercase;
}
.pour .drop-bar .lab::before{content:"";width:1.9rem;height:1px;background:var(--ember);
  flex:none;transition:width .3s var(--ease)}
.pour .drop-bar:hover .lab::before,
.pour .drop[open] .lab::before{width:3rem}
.pour .drop[open] .lab{font-variation-settings:'wght' 500}
/* the sign alone leaves you guessing what it will do; swap the verb with it,
   in CSS, so it still reads correctly with no script running */
.pour .drop-bar .lab b{font-variation-settings:inherit;font-weight:inherit}
.pour .drop-bar .lab .b{display:none}
.pour .drop[open] .lab .a{display:none}
.pour .drop[open] .lab .b{display:inline}
.pour .drop-bar .cnt{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,245,240,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pour .drop-bar .x{position:relative;width:.85rem;height:.85rem;flex:none}
.pour .drop-bar .x::before,.pour .drop-bar .x::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
  background:currentColor;transition:transform .35s var(--ease)}
.pour .drop-bar .x::after{transform:rotate(90deg)}
.pour .drop[open] .x::after{transform:rotate(0)}
.pour .drop .sheet{padding-top:0}
@media(max-width:560px){
  .pour .drop-bar .cnt{display:none}         /* the label and the sign are enough */
}
/* a printed page has no way to open anything, so it opens everything */
@media print{
  .pour .drop > *{display:revert !important}
  .pour .drop-bar{display:none}
}

/* the play control only exists once a film does */
.pour .film{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.9rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--snow);transition:color .35s}
.pour .film em{font-style:normal;width:2.6rem;height:2.6rem;border-radius:50%;flex:none;
  border:1px solid rgba(247,245,240,.6);display:grid;place-items:center;
  transition:background .35s,border-color .35s}
.pour .film em::after{content:"";width:0;height:0;margin-left:3px;
  border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.pour .film:hover{color:var(--ember)}
.pour .film:hover em{background:var(--ember);border-color:var(--ember);color:var(--snow)}
.pour .soon{margin-top:1.75rem;font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:rgba(247,245,240,.45)}
.pour .tbc{margin-top:1rem;font-size:.94rem;line-height:1.6;color:rgba(247,245,240,.7);max-width:52ch}

/* A serve with no photograph yet. Rather than borrow a picture of something
   else, the frame becomes type on a ground — shorter than a photographed
   pour, so the page reads it as a different kind of entry and not as a
   picture that failed to load. Delete nothing when the shoot lands: dropping
   the file into assets/bar/drinks/ removes .is-typeset on the next build. */
.pour.is-typeset .frame{min-height:min(34svh,300px);
  background:linear-gradient(152deg,#0C1B2E 0%,#07121F 55%,#112741 100%)}
.pour.is-typeset .frame::before{content:"";position:absolute;left:0;top:0;
  width:clamp(3rem,12vw,7rem);height:1px;background:var(--ember)}
.pour.is-typeset .soon{color:rgba(247,245,240,.34)}


/* ==========================================================================
   ASK THE BAR — the house bar, docked bottom-right.

   A corner widget rather than a modal: it never takes the page hostage, so
   there is no veil, no scroll lock and no focus trap.

   Two rules the first build broke, both declared here rather than left to
   drift:

   1. The scale, declared on the element below. Only the two glyphs in the
      field and the launcher's own label sit outside it — the launcher is not
      a child of .ask, so the custom properties are not in scope there.

      The first pass set the mono tier at .64rem, which is smaller than the
      site's own --fs-mono. Interface controls were literally being drawn
      below the size this site uses for captions, which is why they read as
      small print. Controls now sit a tier above labels, not below them.

   2. Anything you can press looks pressed-able. A control gets a border, a
      hit area and a hover; text that only reports something (a counter, an
      attribution) never does. Mono uppercase on its own is not an affordance.
   ========================================================================== */

/* ---------- the launcher ---------- */
.ask-open{
  position:fixed;right:24px;bottom:24px;z-index:200;
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  background:var(--ember);border:1px solid var(--ember);color:var(--snow);
  padding:1.05rem 1.6rem;
  font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             background .3s,border-color .3s;
}
.ask-open.is-ready{opacity:1;transform:none}
.ask-open i{width:1.1rem;height:1px;background:var(--snow);flex:none;
  transition:width .35s var(--ease)}
.ask-open:hover{background:var(--ember-deep);border-color:var(--ember-deep)}
.ask-open:hover i{width:1.7rem}
/* stand down for anything with a stronger claim on the screen */
body.nav-open .ask-open,
body.ask-is-open .ask-open,
html:not(.gate-done) .ask-open{opacity:0;pointer-events:none;transform:translateY(12px)}
@supports selector(body:has(*)){
  body:has(.cookie.is-up) .ask-open{opacity:0;pointer-events:none;transform:translateY(12px)}
}

/* ---------- the widget ---------- */
.ask{
  /* the scale — mono layer, then content. Nothing in here uses a size that
     is not one of these seven. */
  --t-label:.7rem;     /* mono uppercase: eyebrows, footer, attribution */
  --t-ctrl:.78rem;     /* mono uppercase: anything pressable — a tier above */
  --t-meta:.74rem;     /* mono: the ticket's build list */
  --t-sm:.92rem;       /* body: subtitles, method, fine print */
  --t-md:1.02rem;      /* body: prose */
  --t-opt:1.12rem;     /* display: a choice */
  --t-q:1.42rem;       /* display: the question */
  --t-name:1.72rem;    /* display: the serve */

  position:fixed;right:24px;bottom:24px;z-index:200;
  width:min(408px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--rule);box-shadow:0 24px 70px rgba(12,27,46,.28);
  opacity:0;transform:translateY(14px);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.ask[hidden]{display:none}
.ask.is-up{opacity:1;transform:none}
@media(max-width:480px){
  .ask{right:10px;left:10px;bottom:10px;width:auto;max-height:calc(100vh - 20px)}
  .ask-open{right:12px;bottom:12px}
}

/* ---------- head, climb, foot ---------- */
.ask-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem .9rem .9rem 1.2rem;border-bottom:1px solid var(--rule);
}
.ask-id{display:inline-flex;align-items:center;gap:.65rem;min-width:0;
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--track-mono);text-transform:uppercase}
/* the mark is dark on a transparent ground, so it needs the paper behind it */
.ask-id img{height:1.05rem;width:auto;flex:none;mix-blend-mode:multiply}
.ask-x{
  /* 44px: the smallest target anything on this panel is allowed to be */
  flex:none;width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:none;border:1px solid var(--rule);cursor:pointer;color:var(--fg-2);
  transition:color .25s,border-color .25s,background .25s;
}
.ask-x:hover{color:var(--fg);border-color:var(--ember);
  background:color-mix(in srgb,var(--ember) 8%,transparent)}
.ask-x span{position:relative;display:block;width:.72rem;height:.72rem}
.ask-x span::before,.ask-x span::after{content:"";position:absolute;left:0;top:50%;
  width:100%;height:1px;background:currentColor}
.ask-x span::before{transform:rotate(45deg)}
.ask-x span::after{transform:rotate(-45deg)}

/* four questions, four segments — the count is the content */
.ask-climb{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  padding:0;background:var(--bg)}
.ask-climb[hidden]{display:none}
.ask-climb i{height:2px;background:color-mix(in srgb,var(--fg) 9%,transparent);
  transition:background .4s var(--ease)}
.ask-climb i.is-on{background:var(--ember)}

.ask-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:1.4rem 1.2rem 1.5rem}
.ask-foot{
  flex:none;margin:0;padding:.85rem 1.2rem;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-2);
  display:flex;justify-content:space-between;gap:.9rem;
}
/* the counter gives way; the responsible-drinking line is never clipped */
.ask-foot span{white-space:nowrap}
.ask-foot span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ask-foot span:last-child{flex:none}

/* ---------- the opening line ---------- */
.ask-hi{margin:.9rem 0 1.6rem;font-size:var(--t-md);line-height:1.6;color:var(--fg-2)}
.ask-hi[hidden]{display:none}

/* ---------- the questions ---------- */
.ask-q{border:0;margin:0;padding:0;min-inline-size:0}
.ask-q legend{
  display:block;padding:0;margin:0 0 1rem;
  font-family:var(--font-display);font-variation-settings:'wght' 560,'wdth' 112;
  font-weight:normal;font-size:var(--t-q);line-height:1.14;letter-spacing:-.018em;
  text-wrap:balance;
}
/* one column: at this width a two-up grid gives 170px tracks, and
   "Rich & indulgent" does not fit one without breaking */
.ask-opts{display:grid;gap:.45rem}
.opt-btn{
  display:grid;gap:.22rem;width:100%;text-align:left;cursor:pointer;
  background:none;border:1px solid var(--rule);padding:.9rem 1.05rem;
  color:var(--fg);transition:border-color .25s,background .25s,padding-left .25s;
}
.opt-btn b{font-family:var(--font-display);
  font-variation-settings:'wght' 540,'wdth' 108;font-weight:normal;
  font-size:var(--t-opt);letter-spacing:-.014em;line-height:1.2}
.opt-btn small{font-family:var(--font-body);font-size:var(--t-sm);line-height:1.45;
  color:var(--fg-2)}
.opt-btn:hover{border-color:var(--ember);padding-left:1.25rem;
  background:color-mix(in srgb,var(--ember) 5%,transparent)}
.opt-btn.is-on{border-color:var(--ember);
  background:color-mix(in srgb,var(--ember) 10%,transparent)}

/* the answers so far, as a quiet trail rather than a row of chips */
.ask-trail{list-style:none;margin:0 0 1.2rem;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ask-trail li{display:flex;align-items:center;gap:.45rem}
.ask-trail li + li::before{content:"";width:.6rem;height:1px;background:var(--rule)}

/* ---------- controls ----------
   Every one of these is pressable, so every one of them is drawn as a thing
   you can press. Reporting text uses .ask-count and never this. */
.ask-mini{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:none;border:1px solid var(--rule);color:var(--fg-2);
  padding:.72rem 1rem;text-decoration:none;
  font-family:var(--font-mono);font-size:var(--t-ctrl);
  letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .25s,color .25s,background .25s;
}
.ask-mini:hover{border-color:var(--ember);color:var(--fg);
  background:color-mix(in srgb,var(--ember) 8%,transparent)}
.ask-mini.is-lead{border-color:color-mix(in srgb,var(--ember) 60%,transparent);
  color:var(--fg)}
.ask-mini.is-lead:hover{background:color-mix(in srgb,var(--ember) 14%,transparent)}
/* text that reports rather than acts */
.ask-count{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}

.ask-nav{display:flex;justify-content:space-between;align-items:center;
  gap:.5rem;margin-top:1.25rem;flex-wrap:wrap}
.ask-nav:empty{display:none}

/* ---------- the field, when asked for ---------- */
.ask-field{display:flex;align-items:center;gap:.6rem;margin:1.15rem 0 0;
  border:1px solid var(--rule);padding:.75rem .9rem;
  transition:border-color .25s,background .25s}
.ask-field[hidden]{display:none}
.ask-field:focus-within{border-color:var(--ember);
  background:color-mix(in srgb,var(--ember) 5%,transparent)}
.ask-field .cue{flex:none;line-height:1;color:var(--ember);
  font-family:var(--font-mono);font-size:.8rem}
.ask-field input{flex:1;min-width:0;border:0;background:none;outline:none;
  color:var(--fg);font-family:var(--font-body);font-size:var(--t-sm)}
.ask-field input::placeholder{color:var(--fg-2)}
.ask-go{flex:none;background:none;border:0;cursor:pointer;padding:.2rem .25rem;
  color:var(--fg-2);font-size:.95rem;line-height:1;transition:color .25s}
.ask-go:hover{color:var(--ember)}

/* what it heard, printed back — a word it could not use stays unlit */
.ask-read{margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ask-read[hidden]{display:none}
.ask-read b{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);
  font-variation-settings:'wght' 500;margin-right:.2rem}
.ask-read span{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);
  padding:.3rem .55rem;color:var(--fg-2)}
.ask-read span.is-lit{border-color:color-mix(in srgb,var(--ember) 55%,transparent);
  color:var(--fg)}

/* ---------- the serve ---------- */
.ask-out[hidden]{display:none}
.ask-serve h3{font-family:var(--font-display);
  font-variation-settings:'wght' 560,'wdth' 112;font-weight:normal;
  font-size:var(--t-name);letter-spacing:-.02em;line-height:1.04;margin:0 0 .35rem}
/* the drink's own name, under the one the mountain gave it */
.ask-also{margin:.2rem 0 .5rem;font-family:var(--font-body);
  font-size:var(--t-md);line-height:1.3;color:var(--accent)}
.ask-from{margin:0;font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ask-why{margin:.9rem 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--fg-2)}
/* said out loud when an answer could not be honoured */
.ask-note{margin:.9rem 0 0;padding-left:.85rem;border-left:2px solid var(--ember);
  font-size:var(--t-sm);line-height:1.5;color:var(--fg-2)}

/* a compact two-up, not the page-width .spec component */
.ask-facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
  margin:1.2rem 0 0;padding-top:1.05rem;border-top:1px solid var(--rule)}
.ask-facts > div{min-width:0}
.ask-facts dt{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.ask-facts dd{margin:.35rem 0 0;font-family:var(--font-display);
  font-variation-settings:'wght' 520,'wdth' 108;font-size:var(--t-md);
  letter-spacing:-.01em;line-height:1.28}

/* the build, in the same idiom the recipe book uses */
.ask-build{list-style:none;margin:1.15rem 0 0;padding:1.05rem 0 0;
  border-top:1px solid var(--rule);display:grid;gap:.55rem}
.ask-build li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;
  align-items:baseline;font-size:var(--t-sm);line-height:1.5}
.ask-build li::before{content:"";width:.3rem;height:.3rem;flex:none;
  background:var(--ember);border-radius:50%;transform:translateY(-.15rem)}
.ask-method{margin:1rem 0 0;font-size:var(--t-sm);line-height:1.58;color:var(--fg-2)}

.ask-acts{display:flex;gap:.6rem;align-items:center;margin-top:1.4rem;flex-wrap:wrap}
.ask-acts .btn{padding:.9rem 1.5rem;white-space:nowrap;font-size:var(--t-ctrl)}
.ask-meta{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---------- saved: the spec ticket ---------- */
.ask-ticket{border:1px solid var(--rule);padding:1.15rem 1.05rem;
  background:color-mix(in srgb,var(--fg) 3%,transparent)}
.ask-ticket .no{margin:0 0 .4rem;font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.ask-ticket h3{font-family:var(--font-display);
  font-variation-settings:'wght' 560,'wdth' 112;font-weight:normal;
  font-size:var(--t-q);letter-spacing:-.018em;line-height:1.08;margin:0 0 .3rem}
.ask-ticket .by{margin:0 0 1rem;font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ask-ticket ul{list-style:none;margin:0;padding:.9rem 0 0;
  border-top:1px solid var(--rule);font-family:var(--font-mono);
  font-size:var(--t-meta);letter-spacing:.04em;line-height:1.95;color:var(--fg)}
.ask-ticket .how{margin:.9rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--rule);font-size:var(--t-sm);line-height:1.55;
  color:var(--fg-2)}
.ask-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}

/* ---------- the miss ---------- */
.ask-none p{margin:0;font-size:var(--t-sm);line-height:1.58;color:var(--fg-2)}
.ask-none .tries{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.ask-none .tries button{cursor:pointer;background:none;border:1px solid var(--rule);
  padding:.55rem .8rem;color:var(--fg-2);
  font-family:var(--font-mono);font-size:var(--t-ctrl);letter-spacing:.1em;
  text-transform:uppercase;transition:border-color .25s,color .25s,background .25s}
.ask-none .tries button:hover{border-color:var(--ember);color:var(--fg);
  background:color-mix(in srgb,var(--ember) 8%,transparent)}

/* the failure a static site can actually have: the file did not arrive */
.ask-failed{position:fixed;right:24px;bottom:24px;z-index:201;max-width:22rem;
  padding:1rem 1.15rem;background:var(--nightfall);color:var(--snow);
  border:1px solid var(--ember);font-size:var(--t-sm);line-height:1.5;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ask-failed.is-up{opacity:1;transform:none;pointer-events:auto}
.ask-failed a{border-bottom:1px solid var(--ember);white-space:nowrap}


/* ---------- the loading mark: a rotating Audécious A ----------
   Two back-to-back faces so the glyph reads correctly from both sides
   instead of flipping mirror-image halfway through the turn. */
.aud-load{
  position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  perspective:460px;pointer-events:none;
  background:color-mix(in srgb,var(--nightfall) 55%,transparent);
  transition:opacity .45s var(--ease);
}
.aud-load.is-done{opacity:0}
.aud-load .a3{position:relative;width:2.6em;height:2.6em;transform-style:preserve-3d;
  animation:aSpin 2.6s cubic-bezier(.55,.1,.45,.9) infinite}
.aud-load .a3 b{
  position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;
  font-family:var(--font-display);font-variation-settings:'wght' 640,'wdth' 120;
  font-size:2.2em;line-height:1;color:var(--ember);
}
.aud-load .a3 b + b{transform:rotateY(180deg)}
.aud-load.is-sm .a3{width:1.5em;height:1.5em}
.aud-load.is-sm .a3 b{font-size:1.25em}
@keyframes aSpin{to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){
  .aud-load .a3{animation:aSpin 5s linear infinite}
}

/* ---------- distribution map ---------- */
.mapwrap{position:relative;background:#07121F;overflow:hidden;isolation:isolate}
.mapwrap .wmap{display:block;width:100%;height:auto}
.wmap-land path{fill:#12263D}
.wmap-regions .rgn{fill:transparent;stroke:transparent;stroke-width:1.5;
  transition:fill .5s var(--ease),stroke .5s var(--ease)}
/* a territory only lights up when the data says someone holds it */
.wmap-regions .rgn.is-open{fill:rgba(232,119,34,.13);stroke:rgba(232,119,34,.34)}
/* phase 2 sits back — visible reach, clearly not the current offer */
.wmap-regions .rgn.is-open.is-p2{fill:rgba(220,228,234,.07);stroke:rgba(220,228,234,.2)}
.pin.is-p2 i{width:.42rem;height:.42rem;background:rgba(220,228,234,.42);box-shadow:none}
.pin.is-p2:hover i,.pin.is-p2.is-hot i{background:var(--ember);box-shadow:0 0 0 6px rgba(232,119,34,.28)}
/* dim the other phase while one is being browsed */
.mapwrap.show-1 .rgn.is-p2,.mapwrap.show-1 .pin.is-p2{opacity:.25}
.mapwrap.show-2 .rgn.is-p1,.mapwrap.show-2 .pin.is-p1{opacity:.2}
.mapwrap .rgn,.mapwrap .pin{transition:opacity .5s var(--ease)}
/* a search narrows the map too, so the two never disagree */
.mapwrap .rgn.is-filtered,.mapwrap .pin.is-filtered{opacity:.08}

/* ---------- ledger: search + collapsible continents ---------- */
.ledger-tools{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  justify-content:space-between;margin-top:1.75rem}
.tsearch{position:relative;flex:1 1 18rem;max-width:26rem}
.tsearch input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.7rem 2rem .7rem 1.6rem;color:inherit;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;transition:border-color .35s;
}
.tsearch input::placeholder{color:var(--fg-2);opacity:1}
.tsearch input:focus{outline:none;border-color:var(--accent)}
.tsearch::before{content:"";position:absolute;left:.15rem;top:50%;width:.72rem;height:.72rem;
  margin-top:-.42rem;border:1px solid var(--fg-2);border-radius:50%}
.tsearch::after{content:"";position:absolute;left:.95rem;top:50%;width:.42rem;height:1px;
  margin-top:.16rem;background:var(--fg-2);transform:rotate(45deg)}
.tsearch .clear{position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--fg-2);font-size:1.1rem;line-height:1;
  padding:.25rem .35rem;opacity:0;transition:opacity .3s}
.tsearch .clear.is-on{opacity:1}
.tsearch .clear:hover{color:var(--accent)}
.no-hits{padding:2.5rem 0;color:var(--fg-2);font-size:.95rem;border-bottom:1px solid var(--rule)}
.no-hits[hidden]{display:none}

.cgroup{border-bottom:1px solid var(--rule)}
.cgroup[hidden]{display:none}
.cgroup-head{
  width:100%;display:flex;align-items:center;gap:1rem;padding:1.15rem .9rem;
  margin-inline:-.9rem;width:calc(100% + 1.8rem);
  background:none;border:0;cursor:pointer;text-align:left;transition:background .3s;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg);
}
.cgroup-head:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.cgroup-head .c-count{color:var(--fg-2)}
.cgroup-head .c-rule{flex:1;height:1px;background:var(--rule)}
.cgroup-head .c-chev{width:.6rem;height:.6rem;flex:none;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s var(--ease);color:var(--fg-2)}
.cgroup-head[aria-expanded="false"] .c-chev{transform:rotate(-45deg) translate(-2px,2px)}
/* grid-rows 0fr→1fr animates a container of unknown height */
.cgroup-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s var(--ease)}
.cgroup-head[aria-expanded="false"] + .cgroup-body{grid-template-rows:0fr}
.cgroup-body > div{overflow:hidden;min-height:0}
.cgroup .terr:last-child{border-bottom:0}
@media(prefers-reduced-motion:reduce){.cgroup-body{transition:none}}

/* the form acknowledging a pick from the map */
.apply-card{transition:box-shadow .8s var(--ease)}
.apply-card.is-receiving{box-shadow:0 0 0 1px var(--ember),0 18px 60px -20px rgba(232,119,34,.45)}
@keyframes fieldFlash{0%{background:color-mix(in srgb,var(--ember) 26%,transparent)}
                      100%{background:transparent}}
.field.is-flash select{animation:fieldFlash 1.5s var(--ease)}

.phase-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:0}
.phase-tabs button{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;padding:.6rem 1.1rem;border:1px solid var(--rule);
  background:none;cursor:pointer;color:var(--fg-2);transition:all .3s;
}
.phase-tabs button:hover{color:var(--fg);border-color:var(--fg)}
.phase-tabs button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.terr[hidden]{display:none}
.tag.is-p2{color:var(--fg-2);border-color:var(--rule)}
.phase-rule{display:flex;align-items:center;gap:1.1rem;margin:2.75rem 0 .25rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2)}
.phase-rule::after{content:"";flex:1;height:1px;background:var(--rule)}
.phase-rule[hidden]{display:none}
.wmap-regions .rgn.is-signed{fill:rgba(232,119,34,.42);stroke:rgba(232,119,34,.85)}
.wmap-regions .rgn.is-house{fill:rgba(220,228,234,.34);stroke:rgba(247,245,240,.75)}
.wmap-regions .rgn.is-hot{fill:rgba(232,119,34,.62);stroke:var(--ember)}

.mappins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  background:none;border:0;padding:0;cursor:pointer;line-height:0}
.pin i{display:block;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 3px rgba(232,119,34,.22);transition:box-shadow .4s,transform .4s var(--ease)}
.pin.is-house i{background:var(--snow);box-shadow:0 0 0 3px rgba(247,245,240,.25)}
.pin.is-open i{background:rgba(247,245,240,.5);box-shadow:0 0 0 2px rgba(247,245,240,.14)}
.pin:hover i,.pin.is-hot i{transform:scale(1.5);box-shadow:0 0 0 7px rgba(232,119,34,.3)}
.pin.is-signed i{animation:pinPulse 2.8s ease-out infinite}
@keyframes pinPulse{0%{box-shadow:0 0 0 3px rgba(232,119,34,.5)}70%{box-shadow:0 0 0 14px rgba(232,119,34,0)}100%{box-shadow:0 0 0 3px rgba(232,119,34,0)}}
.pin .lbl{position:absolute;left:1rem;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);text-transform:uppercase;
  color:var(--snow);opacity:0;transition:opacity .35s;text-shadow:0 1px 6px rgba(7,18,31,.9)}
.pin:hover .lbl,.pin.is-hot .lbl{opacity:1}

.map-legend{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2)}
.map-legend span{display:flex;align-items:center;gap:.6rem}
.map-legend b{width:.75rem;height:.75rem;flex:none}
.map-legend .k-house{background:rgba(220,228,234,.7);outline:1px solid rgba(247,245,240,.7)}
.map-legend .k-signed{background:rgba(232,119,34,.75)}
.map-legend .k-open{background:rgba(232,119,34,.16);outline:1px solid rgba(232,119,34,.4)}
.map-legend .k-p2{background:rgba(220,228,234,.1);outline:1px solid rgba(220,228,234,.28)}

/* territory ledger */
.terr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem 1.75rem;
  align-items:baseline;padding:1.05rem .9rem;margin-inline:-.9rem;
  border-bottom:1px solid var(--rule);transition:background .35s;cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;width:calc(100% + 1.8rem);text-align:left}
.terr:hover,.terr.is-hot{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.terr .t-name{font-family:var(--font-display);font-variation-settings:'wght' 520,'wdth' 112;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);letter-spacing:-.012em;transition:color .3s}
.terr:hover .t-name,.terr.is-hot .t-name{color:var(--accent)}
.terr .t-area{display:block;margin-top:.25rem;font-family:var(--font-mono);font-size:.56rem;
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--fg-2)}
.terr .t-who{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);text-align:right}
.tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;padding:.32rem .6rem;white-space:nowrap;border:1px solid var(--rule)}
.tag.is-open{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tag.is-signed{background:var(--ember);color:var(--snow);border-color:var(--ember)}
.tag.is-house{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media(max-width:720px){
  .terr{grid-template-columns:1fr auto;gap:.4rem 1rem}
  .terr .t-who{grid-column:1/-1;text-align:left}
}

/* third-party proof, on the distributor pitch */
.proof{margin-top:clamp(2.5rem,6vh,4rem);padding-top:clamp(1.75rem,4vh,2.5rem);
  border-top:1px solid var(--rule);max-width:64ch}
.proof .lede{font-size:var(--fs-body);max-width:60ch}
.proof-alt{display:inline-block;margin-left:1.5rem}
@media(max-width:560px){.proof-alt{display:block;margin:1rem 0 0}}

/* the pitch */
.claim{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem}
.claim div{border-top:1px solid var(--rule);padding-top:1.15rem}
.claim dt{font-family:var(--font-display);font-variation-settings:'wght' 560,'wdth' 114;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);letter-spacing:-.02em;line-height:1}
.claim dd{margin-top:.6rem;font-size:.92rem;line-height:1.6;color:var(--fg-2)}
.gate-list{list-style:none;margin-top:1.75rem;display:grid;gap:.9rem;max-width:62ch}
.gate-list li{display:grid;grid-template-columns:1.6rem 1fr;gap:.9rem;align-items:start;
  font-size:.95rem;line-height:1.6;color:var(--fg-2)}
.gate-list li::before{content:"";width:1.6rem;height:1px;background:var(--accent);margin-top:.75rem}

/* ---------- distributor application ---------- */
.apply-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.apply-grid{grid-template-columns:1fr}}
.apply-say .lede{max-width:34ch}

/* what happens after they hit send — the reassurance that earns the form */
.steps{list-style:none;margin-top:2.5rem;display:grid;gap:1.5rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.5rem 1fr;gap:1.1rem;align-items:start}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:var(--track-mono);
  color:var(--accent);padding-top:.55rem;border-top:1px solid var(--accent);
}
.steps b{display:block;margin-bottom:.3rem;font-family:var(--font-display);
  font-variation-settings:'wght' 520,'wdth' 112;font-size:1.02rem;letter-spacing:-.012em;color:var(--fg)}
.steps span{font-size:.93rem;line-height:1.6;color:var(--fg-2)}

.apply-card{
  position:relative;border:1px solid var(--rule);
  padding:clamp(1.6rem,3.5vw,2.75rem);
  background:color-mix(in srgb,var(--fg) 5%,transparent);
}
.apply-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--ember)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.25rem,2.5vw,2rem)}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.field select{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.7rem 0;font-family:var(--font-body);font-size:1rem;color:inherit;
  appearance:none;transition:border-color .35s;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 7px center,right 2px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select:focus{outline:none;border-color:var(--accent)}
.field select option{color:#0C1B2E;background:#F7F5F0}   /* dark-theme menus stay readable */
.apply-foot{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;
  margin-top:1.75rem;padding-top:1.35rem;border-top:1px solid var(--rule);color:var(--fg-2)}
.apply-foot b{color:var(--accent)}

/* ---------- form ---------- */
.field{margin-bottom:1.6rem}
.field label{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.7rem 0;font-family:var(--font-body);font-size:1rem;
  font-variation-settings:'opsz' 16,'wght' 380;transition:border-color .35s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:8rem;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.85rem;color:var(--fg-2);margin-top:1.25rem}
.form-note.is-error{color:#B4341C}

/* ---------- footer ---------- */
.foot{background:var(--nightfall);color:var(--snow);--fg:var(--snow);--fg-2:rgba(247,245,240,.62);--rule:rgba(247,245,240,.16);--accent:var(--ember)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.75rem,3vw,3rem);
  padding-block:clamp(3.25rem,7vh,5.25rem) 2.5rem}
.foot-top.is-second{padding-block:0 2.5rem}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot .wordmark img{height:2.2rem;margin-bottom:1.35rem}
.foot-tag{color:rgba(247,245,240,.72);max-width:32ch}
.foot h3{font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.5);margin-bottom:1.1rem;font-variation-settings:'wght' 500}
.foot ul{list-style:none}
.foot li{margin-bottom:.6rem}
/* the cookie link is a <button> among <a>s: font:inherit gave it the body
   size while the links sit at .92rem, so it has to be named here too */
.foot li a,.foot li .cookie-reopen{font-size:.92rem;color:rgba(247,245,240,.86);transition:color .3s}
.foot li a:hover,.foot li .cookie-reopen:hover{color:var(--ember)}
.foot-base{border-top:1px solid rgba(247,245,240,.16);padding-block:1.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap}
.foot-base p,.foot-base .mono{font-size:.6rem;color:rgba(247,245,240,.55);letter-spacing:.16em}
.foot-base .mono b{color:var(--ember);font-variation-settings:'wght' 600}
.socials{display:flex;gap:1.1rem}
.socials a{color:rgba(247,245,240,.72);transition:color .3s}
.socials a:hover{color:var(--ember)}
.socials svg{width:1.1rem;height:1.1rem;fill:currentColor}
.responsibly{
  padding-block:1.1rem;border-top:1px solid rgba(247,245,240,.16);
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,245,240,.58);text-align:center;
}

/* ---------- cookie consent ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:280;
  background:var(--nightfall);color:var(--snow);
  border-top:1px solid rgba(247,245,240,.18);
  transform:translateY(110%);transition:transform .7s var(--ease);
}
.cookie.is-up{transform:none}
.cookie .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem;
  align-items:center;padding-block:clamp(1.25rem,3vh,1.9rem)}
@media(max-width:820px){.cookie .inner{grid-template-columns:1fr}}
.cookie h2{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--ember);margin-bottom:.6rem;font-weight:normal}
.cookie p{font-size:.94rem;line-height:1.6;color:rgba(247,245,240,.82);max-width:70ch}
.cookie a{border-bottom:1px solid rgba(247,245,240,.4)}
.cookie .acts{display:flex;flex-wrap:wrap;gap:.6rem}
.cookie button{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;padding:.85rem 1.35rem;cursor:pointer;transition:all .3s;
  background:none;border:1px solid rgba(247,245,240,.4);color:var(--snow);white-space:nowrap;
}
.cookie button:hover{border-color:var(--snow)}
.cookie .ok{background:var(--ember);border-color:var(--ember);color:var(--nightfall)}
.cookie .ok:hover{background:transparent;color:var(--ember)}
.cookie-reopen{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  text-align:left;transition:color .3s}
.cookie-reopen:hover{color:var(--accent)}
.cookie .detail{grid-column:1/-1;border-top:1px solid rgba(247,245,240,.16);
  margin-top:.5rem;padding-top:1.35rem;display:none}
.cookie.is-open .detail{display:grid;gap:1rem}
.cookie .row{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.cookie .row b{display:block;margin-bottom:.25rem}
.cookie .row .fine{color:rgba(247,245,240,.62)}
.cookie input[type=checkbox]{margin-top:.3rem;accent-color:var(--ember);width:1rem;height:1rem}

/* remember-me on the gate */
.gate .remember{display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-bottom:1.2rem;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:var(--track-mono);text-transform:uppercase;color:rgba(247,245,240,.7);cursor:pointer}
.gate .remember input{accent-color:var(--ember);width:.95rem;height:.95rem;cursor:pointer}

/* ---------- submit your Audécious Tale ---------- */
.tale-bar{
  width:100%;display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;
  padding-block:clamp(1.5rem,4vh,2.5rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease);
}
.tale-bar:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.tale-bar .t-say{flex:1;min-width:0}
.tale-bar .t-kick{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem;
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2)}
.tale-bar .t-kick::before{content:"";width:1.9rem;height:1px;background:var(--ember);flex:none}
.tale-bar .t-say{display:block}
.tale-bar .t-h{display:block;font-family:var(--font-display);
  font-variation-settings:'wght' 560,'wdth' 115;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);line-height:1.05;letter-spacing:-.018em;
  transition:color .35s}
.tale-bar:hover .t-h{color:var(--accent)}
.tale-bar .t-sub{display:block;margin-top:.8rem;color:var(--fg-2);
  font-size:.98rem;line-height:1.55;max-width:56ch}
.tale-bar .t-plus{position:relative;width:3.25rem;height:3.25rem;flex:none;border-radius:50%;
  border:1px solid var(--rule);transition:background .35s,border-color .35s,transform .5s var(--ease)}
.tale-bar:hover .t-plus{border-color:var(--ember);background:var(--ember)}
.tale-bar .t-plus::before,.tale-bar .t-plus::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  transform-origin:center;transition:background .35s}
.tale-bar .t-plus::before{width:34%;height:1px;transform:translate(-50%,-50%)}
.tale-bar .t-plus::after{width:1px;height:34%;transform:translate(-50%,-50%)}
.tale-bar:hover .t-plus{color:var(--snow)}
.tale-bar[aria-expanded="true"] .t-plus{transform:rotate(135deg);background:var(--ember);border-color:var(--ember);color:var(--snow)}

/* the drawer */
.tale-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.tale-bar[aria-expanded="true"] + .tale-box{grid-template-rows:1fr}
.tale-box > div{overflow:hidden;min-height:0}
.tale-form{padding-block:clamp(2rem,5vh,3.25rem);max-width:64rem}
.tale-form .f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.25rem,2.5vw,2rem)}
@media(max-width:560px){.tale-form .f-row{grid-template-columns:1fr}}
.tale-form textarea{min-height:12rem}
.tale-count{font-family:var(--font-mono);font-size:.56rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);text-align:right;margin-top:-1.1rem;margin-bottom:1.6rem}
.tale-count.is-over{color:#B4341C}
@media(prefers-reduced-motion:reduce){.tale-box{transition:none}}

/* ---------- newsletter ---------- */
.signup{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media(max-width:820px){.signup{grid-template-columns:1fr}}
.signup .say .h2{margin-bottom:.9rem}
.signup form{display:flex;gap:0;align-items:flex-end;flex-wrap:wrap}
.signup .field{flex:1 1 15rem;margin-bottom:0}
.signup .btn{white-space:nowrap}
.signup .fine{margin-top:1rem}
.signup .done{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--accent)}

/* ---------- certification + serving facts ---------- */
/* certification — two cards that carry their own detail, so the band is not
   two small pills adrift in a lot of empty space */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  gap:clamp(1rem,2vw,1.5rem);margin-top:2rem}
.cert{display:flex;align-items:flex-start;gap:clamp(1.1rem,2vw,1.6rem);
  padding:clamp(1.4rem,2.5vw,1.9rem);border:1px solid var(--rule);
  background:color-mix(in srgb,var(--bg) 55%,transparent)}
.cert img,.cert .mark{width:clamp(4.4rem,7vw,5.6rem);height:auto;flex:none;object-fit:contain}
/* the dashed box is the empty-slot placeholder only — real artwork sits clean */
.cert .mark{aspect-ratio:1;display:grid;place-items:center;border:1px dashed var(--rule);
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-align:center;
  color:var(--fg-2);line-height:1.2;padding:.3rem}
.cert-body{min-width:0}
.cert b{display:block;font-family:var(--font-display);font-variation-settings:'wght' 540,'wdth' 112;
  font-size:clamp(1.05rem,.95rem + .3vw,1.25rem);letter-spacing:-.01em}
.cert-note{margin:.55rem 0 0;font-size:.9rem;line-height:1.6;color:var(--fg-2)}
.cert-facts{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  display:grid;gap:.5rem}
.cert-facts > div{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;align-items:baseline}
.cert-facts dt{font-family:var(--font-mono);font-size:.54rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.cert-facts dd{margin:0;font-size:.88rem;line-height:1.4;text-align:right}
@media(max-width:520px){
  .cert{flex-direction:column;align-items:flex-start}
  .cert-facts > div{grid-template-columns:1fr}
  .cert-facts dd{text-align:left}
}

.facts{border:1px solid var(--fg);max-width:26rem;padding:1.1rem 1.3rem;background:var(--bg)}
.facts h3{font-family:var(--font-display);font-variation-settings:'wght' 640,'wdth' 112;
  font-size:1.5rem;letter-spacing:-.02em;border-bottom:6px solid var(--fg);padding-bottom:.35rem}
.facts dl{display:grid;grid-template-columns:1fr auto;gap:0}
.facts dt,.facts dd{padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.facts dd{text-align:right;font-variation-settings:'wght' 500}
.facts .lead{border-bottom:3px solid var(--fg)}
.facts .fine{margin-top:.8rem;font-size:.76rem;line-height:1.5}

/* ---------- age gate ---------- */
.gate{
  position:fixed;inset:0;z-index:300;background:var(--depth);color:var(--snow);
  display:grid;place-items:center;text-align:center;padding:2rem;
  transition:opacity .7s var(--ease),visibility .7s;
}
.gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.gate .bg{position:absolute;inset:0;background:url('whistler-key.jpg') center 15%/cover no-repeat;
  opacity:0;animation:fadeIn .9s var(--ease) .1s forwards}
.gate .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,54,92,.9) 0%,rgba(22,54,92,.5) 46%,rgba(12,27,46,.55) 100%)}
@keyframes fadeIn{to{opacity:1}}
.gate .panel{
  position:relative;max-width:480px;width:100%;
  background:rgba(12,27,46,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(247,245,240,.22);box-shadow:0 30px 80px rgba(0,0,0,.5);
  padding:clamp(2rem,5vh,3rem) clamp(1.6rem,4vw,2.6rem);
  animation:riseIn .7s var(--ease) .9s both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* the farewell — shown when a visitor tells us they are under age.
   Fades over the whole gate rather than snapping straight to a redirect. */
.gate .farewell{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:var(--nightfall);padding:var(--gutter);
  opacity:0;transition:opacity 1s var(--ease);
}
.gate .farewell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('contour.svg') center/cover no-repeat;opacity:.05;
}
.gate.is-leaving .farewell{opacity:1}
.gate.is-gone .farewell{opacity:0}
.farewell .fw{
  position:relative;max-width:44ch;text-align:center;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s .45s var(--ease),transform 1.1s .45s var(--ease);
}
.gate.is-leaving .farewell .fw{opacity:1;transform:none}
.gate.is-gone .farewell .fw{opacity:0;transform:translateY(-10px);transition-delay:0s}
.farewell .logo{height:2.4rem;width:auto;margin:0 auto 1.9rem}
.farewell .hair{width:2.4rem;height:1px;background:var(--ember);margin:0 auto 1.9rem}
.farewell .fw-1{
  font-family:var(--font-display);font-variation-settings:'wght' 520,'wdth' 112;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);line-height:1.2;letter-spacing:-.012em;
  color:var(--snow);margin-bottom:1rem;text-wrap:balance;
}
.farewell .fw-2{
  font-family:var(--font-body);font-size:var(--fs-lede);line-height:1.6;
  font-variation-settings:'opsz' 28,'wght' 330;color:rgba(247,245,240,.76);
  margin-bottom:2.25rem;text-wrap:balance;
}
.farewell .fw-3{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.45);
}
@media(prefers-reduced-motion:reduce){
  .gate .farewell,.farewell .fw{transition-duration:.01s;transition-delay:0s}
}

.gate .logo{height:2.8rem;width:auto;margin:0 auto 2rem}
.gate .hair{width:2.4rem;height:1px;background:var(--ember);margin:0 auto 1.85rem}
.gate h2{font-size:1.15rem;margin-bottom:.75rem}
.gate p{color:rgba(247,245,240,.86);margin-bottom:1.85rem;font-size:1rem}
.gate .countries{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1.4rem}
@media(max-width:420px){.gate .countries{grid-template-columns:1fr}}
.gate .countries button{
  background:rgba(22,54,92,.35);border:1px solid rgba(247,245,240,.32);color:var(--snow);cursor:pointer;
  padding:.95rem .5rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .3s,background .3s;
}
.gate .countries button:hover{border-color:rgba(247,245,240,.7)}
.gate .countries button[aria-pressed="true"]{border-color:var(--ember);background:rgba(232,119,34,.18)}
.gate .countries button small{display:block;margin-top:.45rem;font-family:var(--font-body);
  font-size:.72rem;letter-spacing:0;text-transform:none;color:rgba(247,245,240,.62)}
.gate .enter{
  width:100%;background:var(--ember);border:1px solid var(--ember);color:var(--snow);cursor:pointer;
  padding:1rem;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);
  text-transform:uppercase;margin-bottom:1rem;transition:background .3s;
}
.gate .enter[hidden]{display:none}
.gate .enter:hover{background:#CF6718;border-color:#CF6718}
.gate .leave{background:none;border:0;color:rgba(247,245,240,.68);cursor:pointer;
  font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.gate .leave:hover{color:var(--snow)}
.gate .note{margin-top:2rem;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,245,240,.5);line-height:1.9}

/* ---------- h1 with a descriptive subline (visible, indexable) ---------- */
.h1-sub{
  display:block;margin-top:1rem;
  font-family:var(--font-body);font-variation-settings:'opsz' 28,'wght' 330;
  font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);line-height:1.45;letter-spacing:0;
  text-transform:none;max-width:34ch;color:var(--fg-2);
}
[data-theme="media"] .h1-sub,[data-theme="night"] .h1-sub{color:rgba(247,245,240,.82)}

/* ---------- breadcrumbs ---------- */
.crumbs{border-bottom:1px solid var(--rule);background:var(--bg);color:var(--fg)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding-block:.9rem;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--fg-2)}
.crumbs li{display:flex;align-items:center;gap:.6rem}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--fg)}

/* ---------- continue the ascent: no page is a dead end ---------- */
.onward{border-top:1px solid var(--rule)}
.onward-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
@media(max-width:720px){.onward-grid{grid-template-columns:1fr}}
.onward-cell{background:var(--bg);padding:clamp(2rem,4.5vh,3.25rem) 0;position:relative}
.onward-cell.is-next{padding-inline-start:clamp(1.5rem,3vw,3rem)}
.onward-cell.is-prev{padding-inline-end:clamp(1.5rem,3vw,3rem)}
@media(max-width:720px){.onward-cell{padding-inline:0!important}}
.onward .dir{font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--fg-2);display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.onward .dir::before{content:"";width:1.6rem;height:1px;background:var(--accent)}
.onward .to{font-family:var(--font-display);font-variation-settings:'wght' 550,'wdth' 114;
  font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.015em;line-height:1.1;display:block}
.onward a:hover .to{color:var(--accent)}
.onward .why{margin-top:.6rem;font-size:.92rem;color:var(--fg-2);max-width:38ch}
.onward .alt-c{font-size:.62rem}

/* the closing frame — an onward card that carries its own image */
.onward-shot{border-top:0;background:#07121F}
.ons{position:relative;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;
  min-height:min(52svh,440px);color:var(--snow)}
.ons .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ons .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(.94) brightness(.9);transition:transform 1.6s var(--ease)}
.ons:hover .bg img{transform:scale(1.04)}
.ons .scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(7,18,31,.92) 0%,rgba(7,18,31,.72) 26%,rgba(7,18,31,0) 62%)}
.ons .inner{position:relative;width:100%;padding-block:clamp(2rem,5vh,3.25rem)}
.ons .dir{font-family:var(--font-mono);font-size:.58rem;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:rgba(247,245,240,.78);display:flex;align-items:center;
  gap:.7rem;margin-bottom:.9rem}
.ons .dir::before{content:"";width:1.6rem;height:1px;background:var(--ember)}
.ons .to{display:block;font-family:var(--font-display);
  font-variation-settings:'wght' 550,'wdth' 114;
  font-size:clamp(1.8rem,1.3rem + 2vw,3rem);letter-spacing:-.018em;line-height:1.05;
  transition:color .35s}
.ons:hover .to{color:var(--ember)}
.ons .why{display:block;margin-top:.7rem;font-size:var(--fs-lede);line-height:1.55;
  font-variation-settings:'opsz' 28,'wght' 330;color:rgba(247,245,240,.84);max-width:44ch}

.faq{border-top:1px solid var(--rule)}
.faq-item{padding-block:1.6rem;border-bottom:1px solid var(--rule)}
.faq-item p{max-width:70ch;color:var(--fg-2)}

/* ---------- utilities ---------- */
.mt-1{margin-top:1.25rem}
.mt-2{margin-top:1.75rem}
.mt-3{margin-top:2.25rem}
.mt-4{margin-top:3rem}
.center{text-align:center}
.center .lede,.center .statement,.center .prose{margin-inline:auto}
.stamp.is-center{justify-content:center}
.sig{height:3.6rem;width:auto;margin-top:2.5rem;filter:brightness(0) invert(1);opacity:.9}
.attrib{display:block;margin-top:.75rem;color:var(--fg-2)}
.lede.is-sm{font-size:1.05rem}
.statement.is-sm{font-size:clamp(1.2rem,1rem + .8vw,1.45rem)}
.h2.is-tight{max-width:28ch}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rise.is-in{opacity:1;transform:none}
.rise.d1{transition-delay:.1s}
.rise.d2{transition-delay:.2s}
.rise.d3{transition-delay:.3s}
.settle{overflow:hidden}
.settle img,.settle iframe{transform:scale(1.07);transition:transform 3s var(--ease)}
.settle.is-in img,.settle.is-in iframe{transform:scale(1)}
.plate.settle > img,.plate.settle > picture > img{transform:scale(1.05)}
.plate.settle.is-in > img,.plate.settle.is-in > picture > img{transform:scale(1)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
  .settle img,.settle iframe,.plate.settle > img,.plate.settle > picture > img{transform:none}
}

/* ---------- print ---------- */
@media print{
  .mast,.gauge,.gauge-bar,.nav-overlay,.gate,.sound{display:none!important}
  body{padding-top:0;background:#fff;color:#000}
  .band::before{display:none}
}


/* ---------- intro: the flythrough, played once after the gate ---------- */
.intro{
  position:fixed;inset:0;z-index:180;
  background:var(--nightfall);
  transition:opacity .9s var(--ease);
}
.intro video{width:100%;height:100%;object-fit:cover;display:block}
.intro.is-done{opacity:0;pointer-events:none}
.intro .skip{
  position:absolute;right:clamp(1.25rem,4vw,3rem);bottom:clamp(1.25rem,4vw,2.4rem);
  background:rgba(12,27,46,.45);border:1px solid rgba(247,245,240,.4);
  color:var(--snow);cursor:pointer;
  padding:.55rem 1.2rem;
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  backdrop-filter:blur(8px);
  transition:border-color .3s;
}
.intro .skip:hover{border-color:var(--ember)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}