/* ==========================================================================
   Layout and components. Mobile first.
   No colour, radius or shadow literals here. Everything comes from tokens.
   ========================================================================== */

/* --- Reset and base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-gap) + var(--s-4));
  /* No double-tap zoom on phones. Pinch zoom still works, on purpose. */
  touch-action: manipulation;
  /* No grey flash on tap. Keyboard focus rings still show. */
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* The UA rule for [hidden] is display:none, but any author rule that sets a
   display beats it, so .form{display:grid} would quietly un-hide a hidden
   form. This makes the attribute mean what it says. */
[hidden] { display: none !important; }
figure, figcaption { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
h3, h4 { letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Italic is the emphasis device, the way the reference site uses it. */
em, .em { font-style: italic; }

:focus-visible {
  outline: 2.5px solid var(--rust);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--rust); color: #fff; }

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

.skip-link {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:hover { background: var(--rust-deep); }
.skip-link:focus { transform: translateY(0); }

/* --- Glass --------------------------------------------------------------
   One surface, three weights. Flat faces: the lift comes from the drop
   shadow and the blur, not from a lit edge. */

.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 38%,
    rgba(255, 255, 255, 0) 62%);
}
.glass--light  { background: var(--glass-light); }
.glass--heavy  { background: var(--glass-heavy); -webkit-backdrop-filter: var(--blur-heavy); backdrop-filter: var(--blur-heavy); }
.glass--tint   { background: linear-gradient(158deg, rgba(255,255,255,0.5), rgba(255,255,255,0.24)), var(--glass-tint); }
.glass--xl     { border-radius: var(--r-xl); }
.glass--pill   { border-radius: var(--r-pill); }

/* Safari and Chrome have had backdrop-filter for years, but where it is
   missing the panels must still be readable, so they go near opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass        { background: rgba(255, 255, 255, 0.92); }
  .glass--light { background: rgba(255, 255, 255, 0.86); }
  .glass--heavy { background: rgba(255, 255, 255, 0.96); }
}

/* --- Layout -------------------------------------------------------------- */

.section { padding-block: var(--section-y); position: relative; }
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }

/* Grid children default to min-width:auto, which lets one wide cell push a
   track past the viewport and drag its siblings out with it. */
.split > *, .cards > *, .form__row > *, .footer__nav > * { min-width: 0; }

.split { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
  .split--wide-left  { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-family: var(--font-logo);   /* Times New Roman */
  font-style: italic;
  font-size: calc(var(--t-xs) + 0.5px);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

.lede { font-size: var(--t-lg); line-height: 1.42; letter-spacing: var(--tr-snug); }
.body { color: var(--muted); max-width: var(--measure); }
.small { font-size: var(--t-sm); color: var(--muted); }

.h-xxl { font-size: var(--t-xxl); }
.h-xl  { font-size: var(--t-xl); }
.h-lg  { font-size: var(--t-lg); font-weight: 700; }
.accent { color: var(--rust); }

/* --- Lockup -------------------------------------------------------------
   Name primary, STEELWORKS subordinate beneath it. Same arrangement
   everywhere. It scales, it never rearranges. */

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-logo);
  text-decoration: none;
  color: inherit;
}
.lockup__name {
  font-size: 1em;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.012em;
  transition: color var(--dur-fast) var(--ease);
}
/* Only the nav lockup is a link. The h1 and the footer mark are not, so the
   hover is scoped to the anchor rather than the class. */
a.lockup:hover .lockup__name { color: var(--rust); }
a.lockup:hover .lockup__sub  { color: var(--rust-deep); }
.lockup__sub {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  margin-top: 0.5em;
  margin-left: 0.1em;
  color: var(--rust);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
/* The wordmark is white in the header over the film and rust in the
   footer. */
.lockup--nav .lockup__name  { color: #fff; }   /* over the film; rust past it, see .nav__logo */
.lockup--foot .lockup__name { color: var(--rust); }
a.lockup--nav:hover .lockup__name { color: var(--rust); }
.lockup--nav  { font-size: 1.35rem; }
/* Header wordmark matches the landing page title: same font, lowercase,
   same tracking. */
.lockup--nav .lockup__name {
  font-family: var(--font-mono);
  font-size: 0.9em;
  text-transform: lowercase;
  letter-spacing: 0.08em;
}
/* At nav size the strict ratio lands at 3.8px, which is not legible. The
   hierarchy is unchanged, the ratio is opened up so the word can be read.
   This is the only place it deviates. */
.lockup--nav .lockup__sub {
  font-size: 0.4em;
  letter-spacing: 0.16em;
  margin-top: 0.35em;
}
/* Footer wordmark matches the header one: same font, size and tracking,
   in a pill with a thin rust outline. */
.lockup--foot {
  font-size: 1.35rem;
  min-height: var(--nav-h);
  justify-content: center;
  padding-inline: var(--s-5);
  border: 1.5px solid var(--rust);
  border-radius: var(--r-pill);
  justify-self: start;   /* hug the word, not the footer's grid column */
  align-self: start;
}
.lockup--foot .lockup__name {
  font-family: var(--font-mono);
  font-size: 0.9em;
  text-transform: lowercase;
  letter-spacing: 0.08em;
}

/* --- Load screen --------------------------------------------------------
   Only for a visit that came through the gate. The gate slides its wordmark
   to the middle of the screen, this picks it up in the same place, and it
   fades once the page is ready. The html class is set before first paint by
   the inline script in the head, so nothing flashes. */

.loader { display: none; }

/* The column, the gap and the bar below all match .g-lockup.is-centred on the
   gate exactly, so the word does not shift as one page hands over to the
   other. Change one, change both. */
.is-entering .loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  transition: opacity 1s var(--ease);
}
.loader.is-done { opacity: 0; }

/* Something moving, so a slow load does not read as a frozen page. */
.loader__bar {
  width: 7.5rem;
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(28, 21, 18, 0.12);
  position: relative;
  overflow: hidden;
}
.loader__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: var(--r-pill);
  background: var(--rust);
  animation: loader-bar-run 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes loader-bar-run {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* The same wordmark the gate hands over: mono, lowercase, same tracking. */
.loader__name {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Nothing behind the load screen should scroll while it is up. */
.is-entering body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .is-entering .loader { transition: none; }
  .loader__bar::after { animation: none; left: 30%; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--rust-deep); }
.btn:active { transform: translateY(0); }

/* Lifts only where there is a real pointer. On a touch screen a tap would
   otherwise leave the element hovered until you tap somewhere else. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}

.btn--glass {
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.btn--glass:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.btn--quiet:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);   /* rust on rust-soft is 4.42, which misses AA */
}

.btn--sm { min-height: 2.5rem; padding: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33rem) {
  .actions { display: grid; }
  .actions .btn { width: 100%; }
}

.link {
  color: var(--rust);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.link {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.link:hover {
  color: var(--rust-deep);
  background: var(--rust-soft);
}

/* --- Floating nav -------------------------------------------------------
   A glass pill sitting off the top of the page rather than a bar bolted to
   it. Heavy glass, because this is the one surface that has to stay legible
   over whatever happens to be scrolling underneath it. */

.nav {
  position: fixed;
  top: var(--nav-gap);
  left: 0; right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
}
/* Logo on the left, menu pill on the right, each sized to its content. */
.nav__bar {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
/* The logo's own pill: no fill, just a white border. */
.nav__logo {
  min-height: var(--nav-h);
  justify-content: center;
  padding-inline: var(--s-5);
  border: 1px solid #fff;
  border-radius: var(--r-pill);
}
/* Past the hero, on the light page, the logo goes rust and its pill turns
   into the same heavy glass as the menu, with the border hidden. */
.nav__logo, .nav__logo .lockup__name {
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav.is-past-hero .nav__logo {
  border-color: transparent;
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  backdrop-filter: var(--blur-heavy);
  box-shadow: var(--sh-md);
}
.nav.is-stuck.is-past-hero .nav__logo { box-shadow: var(--sh-lg); }
.nav.is-past-hero .nav__logo .lockup__name { color: var(--rust); }
.nav.is-past-hero a.nav__logo:hover .lockup__name { color: var(--rust-deep); }
.nav__inner {
  min-height: var(--nav-h);
  /* Top and bottom padding shrink with the bar, so the 2.75rem burger never
     props it open past --nav-h. */
  padding: calc((var(--nav-h) - 2.75rem) / 2) var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  transition: box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav.is-stuck .nav__inner { box-shadow: var(--sh-lg); }

.nav__links { display: none; }
.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: rgba(255, 255, 255, 0.85); color: var(--rust); }
/* Menu items read in lowercase, in the header and the phone menu. */
.nav__link, .menu__link { text-transform: lowercase; }

/* The current section: rust text and a thin underline, no fill. */
.nav__link[aria-current="true"] {
  color: var(--rust-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.nav__end { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { display: none; }

/* Burger, rounded to match everything else. */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.burger:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);   /* rust on rust-soft is 4.42, which misses AA */
}
.burger span {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav.is-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu: a full-screen sheet. It sits just under the nav (z-index 99
   against 100), so the pill and its close button stay on top of it. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--nav-h) + var(--nav-gap) + var(--s-7)) var(--gutter)
           calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  visibility: hidden;
  /* Parked one screen to the right and moved into place. Nothing fades:
     a fade would show the panel thinning out before it has left. */
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out),
              visibility var(--dur);
}
.menu.is-open { visibility: visible; transform: none; }
.menu__list { display: grid; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xxl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.menu__link:first-child { border-top: 1px solid var(--line); }
.menu.is-open .menu__link { animation: menu-link var(--dur-slow) var(--ease-out) both; }
.menu.is-open .menu__link:nth-child(2) { animation-delay: 40ms; }
.menu.is-open .menu__link:nth-child(3) { animation-delay: 80ms; }
.menu.is-open .menu__link:nth-child(4) { animation-delay: 120ms; }
@keyframes menu-link {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.menu__link:hover { color: var(--rust); }
.menu__num { font-size: var(--t-sm); font-weight: 700; color: var(--rust); }
.menu__cta { width: 100%; justify-content: center; }

/* The page underneath should not scroll while the menu covers it. */
html.menu-open, html.menu-open body { overflow: hidden; }

@media (min-width: 60rem) {
  .burger, .menu { display: none; }
  .nav__links { display: flex; align-items: center; gap: var(--s-1); }
  .nav__cta { display: inline-flex; }
}

/* On a phone the bar holds nothing but the burger, so the frosted pill
   around it comes off and the button becomes the frosted pill itself, a
   little larger now that it stands on its own. */
@media (max-width: 59.99rem) {
  .nav__inner {
    min-height: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  .nav__inner::before { display: none; }
  .nav.is-stuck .nav__inner { box-shadow: none; }

  .burger {
    width: 3.25rem; height: 3.25rem;
    /* Bar spacing stays at 5px so the close-X transform still lines up. */
    padding: 0 0.85rem;
    border-color: transparent;
    background: var(--glass-heavy);
    -webkit-backdrop-filter: var(--blur-heavy);
    backdrop-filter: var(--blur-heavy);
    box-shadow: var(--sh-md);
  }
  .nav.is-stuck .burger { box-shadow: var(--sh-lg); }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  /* 85% of the screen, so the next section peeks in underneath. svh is the
     small viewport height: it ignores the browser chrome that hides on
     scroll, so the hero never jumps as that bar collapses. The vh line above
     it is the fallback for browsers without svh. */
  min-height: 85vh;
  min-height: 85svh;
  /* Bottom padding clears the arrow: its offset, its height and a gap. */
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + var(--s-7));
  padding-bottom: calc(var(--s-6) + 3.25rem + var(--s-2));
  isolation: isolate;
  overflow: hidden;
}

/* Background film. It fills the hero and crops to fit. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A light dark tint over the film, so the white title and arrow hold up
   on the bright frames. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 21, 18, 0.38);
}

/* The line just above the arrow. White with a soft shadow so it holds up
   on both the bright sand and the darker rock. */
.hero__note {
  text-align: center;
  font-family: var(--font-logo);   /* same as the section labels */
  font-style: italic;
  text-transform: uppercase;
  font-size: calc(var(--t-xs) + 0.5px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.08em;
  padding-left: 0.08em;   /* balances the space tracking leaves after the last letter */
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 24px rgba(28, 21, 18, 0.35);
}

/* Pause and play for the film, in the hero's bottom right corner. Sits at
   the same height as the arrow. One icon shows at a time: the pause bars
   while the film runs, the play triangle once it is stopped. */
.hero__play {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: rgba(28, 21, 18, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hero__play:hover { opacity: 1; background: rgba(28, 21, 18, 0.45); }
.hero__play:focus-visible {
  opacity: 1;
  outline: 2.5px solid #fff;
  outline-offset: 3px;
}
/* Both icons share the one grid cell, so swapping them never shifts the
   button. */
.hero__play-icon { grid-area: 1 / 1; }
.hero__play .hero__play-icon--play,
.hero__play.is-paused .hero__play-icon--pause { display: none; }
.hero__play.is-paused .hero__play-icon--play { display: block; }

/* Arrow down to the first section. */
.hero__down {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(28, 21, 18, 0.35));
  transition: opacity var(--dur-fast) var(--ease);
}
.hero__down:hover { opacity: 0.75; }

/* The arrow and the menu land with the top of each of these sections
   flush against the top of the screen. The top padding is never less than
   the floating header, so the content always clears it. */
#drink, #story, #contact {
  scroll-margin-top: calc(-1 * (var(--nav-h) + var(--nav-gap) + var(--s-4)));
  padding-top: max(var(--section-y), calc(var(--nav-h) + var(--nav-gap) + var(--s-5)));
}

/* The drink section. Phone: title, tin, cards. Desktop: title and cards on
   the left, the tin down the right. */
.drink {
  display: grid;
  gap: var(--s-6);
  grid-template-areas: "head" "tin" "cards";
}
.drink > * { min-width: 0; }
.drink__head  { grid-area: head; }
.drink__tin {
  grid-area: tin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);   /* sits the tin a little lower than the title */
}
.drink__tin .tin-spec { width: 100%; }
@media (min-width: 60rem) {
  /* Desktop: the tin runs exactly the height of the title and list beside
     it. It is taken out of flow so the text column alone sets the height,
     then fills that height, scaled to fit. */
  .drink__tin { align-self: stretch; margin-top: 0; position: relative; }
  .drink__tin .tin-spec { position: absolute; inset: 0; }
  .drink__tin .tin-spec__can {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}

/* "read the story" and an arrow, centred under the section. Same type as
   the landing page line, in ink on the light page. */
/* The drink section fills the screen, so with the menu landing it flush at
   the top, "read the story" sits at the bottom edge like the landing page
   arrow. Taller content just pushes it further down. */
#drink {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-6);
}
#drink > .wrap { flex: 1; display: flex; flex-direction: column; }

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  margin: auto auto 0;
  padding-top: var(--s-8);
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.next:hover { opacity: 0.7; }
.next__label {
  font-family: var(--font-logo);   /* same as the section labels */
  font-style: italic;
  text-transform: uppercase;
  font-size: calc(var(--t-xs) + 0.5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
}
.drink__cards { grid-area: cards; }
@media (min-width: 60rem) {
  .drink {
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head tin" "cards tin";
    column-gap: var(--s-8);
    align-items: start;
  }
}

/* The tin in the drink section. The image is cropped tight to the can, so
   it is sized by height: as tall as the screen allows, up to 50rem. */
.tin-spec {
  display: flex;
  justify-content: center;
}
.tin-spec__can {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(85vh, 50rem);
  max-height: min(85svh, 50rem);
  filter: drop-shadow(0 22px 34px rgba(28, 21, 18, 0.20));
}

/* --- Shot frames --------------------------------------------------------
   Standing in for photography that does not exist yet. Deliberately not a
   picture of anything. Each carries its own brief, ratio and pixel size, so
   the site doubles as the shot list until the real files arrive. */

.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  aspect-ratio: var(--ratio, 4 / 5);
  padding: var(--s-5);
  overflow: hidden;
}
.shot::after {
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: 1.5px dashed rgba(183, 65, 14, 0.28);
  background: rgba(183, 65, 14, 0.035);
  border-radius: var(--r-md);
  pointer-events: none;
}
.shot__tag {
  position: relative;
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.shot__brief { position: relative; font-size: var(--t-sm); color: var(--muted); max-width: 34ch; }
.shot__spec  { position: relative; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Cards --------------------------------------------------------------- */

.cards { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Stacked rather than side by side: the number sits beside the text so each
   one reads as a line in a list rather than a tile. */
.cards--stack { gap: var(--s-3); }
.cards--stack .card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  padding: var(--s-5);
}
.cards--stack .card__num { grid-row: 1 / span 2; }
.cards--stack .card__body { max-width: 62ch; }

.card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card__title { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); }
.card__body { font-size: var(--t-sm); color: var(--muted); }

/* The bitters are the proof point, so that card is the one that is filled. */
.card--key { background: linear-gradient(158deg, rgba(255,255,255,0.34), rgba(255,255,255,0.1)), var(--rust); border-color: rgba(255,255,255,0.28); }
.card--key .card__title, .card--key .card__body { color: #fff; }
.card--key .card__body { opacity: 0.92; }
.card--key .card__num { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* The font tops out at 800, so a hairline stroke in the text colour
   thickens the heading past that. */
.drink__title { -webkit-text-stroke: 0.04em currentColor; }

/* The drink section's label drops its pill. */
.drink .eyebrow { background: none; padding-inline: 0; }

/* The four flavours as a plain list: number, name, one line, with a hairline
   between each. */
.flavour {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.flavour:last-child { border-bottom: 1px solid var(--line); }
.flavour__num {
  grid-row: 1 / span 2;
  padding-top: 0.3em;
  font-size: var(--t-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.flavour__title { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); }
.flavour__body  { font-size: var(--t-sm); color: var(--muted); max-width: 62ch; }

/* --- Spec strip ----------------------------------------------------------
   Plain facts, no adjectives. */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; }
.spec { padding: var(--s-4); background: rgba(255, 255, 255, 0.3); }
.spec__k { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.spec__v { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .specs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .specs { grid-template-columns: repeat(6, 1fr); } }

.provisional {
  display: inline-block;
  padding: 0.1em var(--s-2);
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Buy ----------------------------------------------------------------- */

.buy-card { padding: var(--s-6); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
.price__figure { font-size: var(--t-xxl); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.price__unit { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }

.costs { margin-top: var(--s-5); border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,0.4); }
.cost {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-variant-numeric: tabular-nums;
}
.cost + .cost { border-top: 1px solid var(--line); }
.cost__k { color: var(--muted); font-size: var(--t-sm); }
.cost__v { font-weight: 700; }

/* --- Forms --------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }

/* A photograph set into a text column, shown whole at its own proportions. */
.figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Segmented choice ---------------------------------------------------- */

.field.choice { display: block; border: 0; margin: 0; padding: 0; }
.choice > .field__label { display: block; margin-bottom: var(--s-2); }
.choice .field__error { margin-top: var(--s-2); }
.choice__set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.choice__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.choice__opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__opt:hover { background: #fff; border-color: var(--rust); }
.choice__opt:has(input:checked) {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);
}
.choice__opt:has(input:focus-visible) {
  outline: 2.5px solid var(--rust);
  outline-offset: 2px;
}

/* Answers that are sentences, not single words: one per row, read left to
   right like a list rather than centred in a tile. */
.choice__set--stack { grid-template-columns: 1fr; }
.choice__set--stack .choice__opt {
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
  min-height: 2.5rem;
}

/* --- Waiting list: steps ------------------------------------------------
   The form is split into steps by main.js. Without it every step shows and
   the form reads as one page. */

.wl-step { display: grid; gap: var(--s-3); align-content: start; }
.wl-step:focus { outline: none; }
.wl-q { font-size: var(--t-sm); margin-bottom: var(--s-2); }
.wl-consent { padding-top: var(--s-1); border-top: 1px solid var(--line); }

.wl-progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.wl-progress[hidden] { display: none; }
.wl-progress__bar {
  flex: 1;
  height: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.wl-progress__bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--rust);
  transition: width var(--dur-fast) var(--ease);
}
.wl-progress__text { font-size: var(--t-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }

.wl-nav { display: flex; gap: var(--s-3); }
.wl-nav .btn { white-space: nowrap; min-height: 2.75rem; padding-block: var(--s-2); }
.wl-nav .btn:last-child { flex: 1; }
/* On a phone the final label is long, so both buttons go down a size rather
   than wrapping onto three lines. */
@media (max-width: 33rem) {
  .wl-nav { gap: var(--s-2); }
  .wl-nav .btn { font-size: var(--t-sm); padding-inline: var(--s-4); }
}
/* The narrowest phones can't fit both side by side: stack them, the main
   action on top. */
@media (max-width: 23rem) {
  .wl-nav { flex-direction: column-reverse; }
  .wl-nav .btn { width: 100%; }
}

/* --- Waiting list: photo, trigger, modal -------------------------------- */

.wl-photo {
  margin-bottom: var(--s-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.wl-photo img { width: 100%; height: auto; display: block; }

.waitlist__open { width: 100%; }

.wl-dialog {
  width: 100%;
  max-width: min(38rem, calc(100vw - 1.25rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
.wl-dialog::backdrop {
  background: rgba(28, 21, 18, 0.44);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.wl-dialog__panel {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-4);
  max-height: calc(100svh - 1.5rem);
  overflow-y: auto;
}
.wl-dialog__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-4);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.wl-dialog__close:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .wl-dialog[open] { animation: wl-in var(--dur) var(--ease-out) both; }
  .wl-dialog[open]::backdrop { animation: wl-fade var(--dur) var(--ease-out) both; }
}
@keyframes wl-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field__label { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--tr-snug); }
.field__label .opt { color: var(--muted); font-weight: 500; }

.input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: inherit;
  /* Never below 16px: anything smaller makes iOS Safari zoom the page in
     the moment the field takes focus. */
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input:hover { background-color: rgba(255, 255, 255, 0.9); }
.input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(183, 65, 14, 0.16);
}
textarea.input { min-height: 4.5rem; resize: vertical; }

select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  /* Measured from the right edge. A percentage here would be measured
     against the box minus the arrow, which is 6px further left. */
  background-position: right 1.125rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-6);
}

.field__hint { font-size: var(--t-sm); color: var(--muted); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--rust);
}
.field__error::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--rust);
}
.field.has-error .input { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(183, 65, 14, 0.16); }
.field.has-error .field__error { display: flex; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.check input {
  appearance: none;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check:hover input { border-color: var(--rust); background: #fff; }
.check:hover input:checked { background: var(--rust-deep); border-color: var(--rust-deep); }
.check span { transition: color var(--dur-fast) var(--ease); }
.check:hover span { color: var(--rust); }
.check input::after {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 3px;
  background: #fff;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.check input:checked { background: var(--rust); border-color: var(--rust); }
.check input:checked::after { transform: scale(1); }
.check span { font-size: var(--t-xs); }

.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 34rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { padding: 0; }
.form__foot { display: grid; gap: var(--s-2); }

.form__status {
  display: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 600;
}
.form.is-error .form__status--error { display: block; }
.form.is-submitting .btn { opacity: 0.6; pointer-events: none; }

.form__success { display: none; padding: var(--s-6); text-align: center; }
.form__success h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.form__success p { color: var(--muted); }
.form__success .tick {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  display: grid; place-content: center;
  font-size: 1.4rem; font-weight: 800;
}
.form-wrap.is-done .form { display: none; }
.form-wrap.is-done .form__success { display: block; }

/* --- Waiting list: labels inside the fields -----------------------------
   The dialog has to fit the screen it is on, and it must never scroll
   inside itself. The sizing for that lives with each component above; what
   is left here is the part that moves text off its own line and into the
   control. A field's label, and its error message while there is one, are
   painted as the placeholder (or as a select's empty option). The real
   <label> and the error paragraph stay in the markup for screen readers.
   main.js does the swapping and tags each field it took over. */

.wl-dialog__panel > .h-lg { font-size: 1.125rem; padding-right: var(--s-7); }
#wl-intro { font-size: var(--t-xs); margin-top: var(--s-1); }
#founding-form { margin-top: var(--s-4); }

.field--compact { position: relative; }
.field--compact > .field__label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.field--compact .field__error { display: none !important; }
.field.has-error .input::placeholder { color: var(--rust); opacity: 1; }
/* Unless something is typed in: an address that isn't an address hides its
   own placeholder, so there the message drops back to a line of its own. */
.field--compact.has-error
:is(input, textarea).input:not(:placeholder-shown) ~ .field__error {
  display: flex !important;
}

/* --- Contact and lists --------------------------------------------------- */

.rows { display: grid; gap: var(--s-3); }
.row { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); }
.row__k { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
.row__v { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tr-snug); }
.row__v a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.row__v a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.row__note { font-size: var(--t-sm); color: var(--muted); }

.empty { padding: var(--s-8) var(--s-5); text-align: center; }
.empty p { color: var(--muted); margin: var(--s-3) auto 0; max-width: 46ch; }

/* --- Footer -------------------------------------------------------------- */

.footer { padding-block: var(--s-8) var(--s-6); }
.footer__inner { padding: var(--s-7) var(--s-6) var(--s-5); }
.footer__top { display: grid; gap: var(--s-6); }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.footer__h { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.footer__list li + li { margin-top: var(--s-2); }
.footer__list a {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--muted);
}
/* Private working pages, in the small print. Barely there until hovered. */
.footer__private a {
  margin-left: 0.6em;
  color: inherit;
  text-decoration: none;
  opacity: 0.2;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer__private a:hover,
.footer__private a:focus-visible { opacity: 1; color: var(--rust); }
@media (min-width: 60rem) {
  .footer__top { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* --- Reveal -------------------------------------------------------------
   Visible by default. An element is only hidden once JS has armed it, and
   JS only arms what starts below the fold. A broken or blocked script
   leaves a readable page rather than a blank one. */

.reveal.is-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal.is-armed { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .menu.is-open .menu__link { animation: none; }
  .menu { transform: none; }
}