:root {
  color-scheme: dark;
  --ink: #111d15;
  --ink-input: #1a2b20;
  --paper: #fcfaf2;
  --muted: #b8c2b4;
  --muted-dim: #9aa897;
  --placeholder: #a9b5a6;
  --gold: #d8aa6b;
  --gold-hover: #e2b97c;
  --line: #2b3e32;
  --line-input: #4f6656;
  --line-focus: #e5bb77;
  --error: #ff7b6b;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button, input {
  font: inherit;
}

button, a, input {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-200%);
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.page {
  max-width: 1440px;
  min-height: 100svh;
  margin: auto;
  padding: 0 clamp(20px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
}

.header {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.02em;
}

.wordmark img,
.wordmark svg {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

.opening {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.opening > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The markup runs in phone order (headline, picture, signup, numbers, details); a
   wide screen lays the words out in one column beside the picture. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-areas: "head fig" "details fig" "signup fig" "stats fig";
  align-content: center;
  column-gap: clamp(24px, 4vw, 56px);
  padding: 24px 0 60px;
  /* The first screen stays a full screen; the role cards wait below it. */
  min-height: calc(100svh - 100px);
}

.intro-head,
.intro-details,
.signup {
  position: relative;
  z-index: 2;
  max-width: 580px;
}

.intro-head {
  grid-area: head;
}

.intro-details {
  grid-area: details;
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.55;
}

h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(48px, 5.2vw, 80px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--paper);
}

h1 span {
  font-style: italic;
  color: var(--gold);
}

.description {
  margin: 28px 0 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.signup {
  grid-area: signup;
  margin-top: 42px;
  max-width: 520px;
}

h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
  color: var(--paper);
}

.signup-intro {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.input-row {
  display: flex;
  gap: 10px;
}

input {
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-input);
  border-radius: 6px;
  background: var(--ink-input);
  color: var(--paper);
  font-size: 15.5px;
  transition: border-color 160ms ease;
}

input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

input:focus {
  border-color: var(--line-focus);
}

input[aria-invalid='true'] {
  border-color: var(--error);
}

button {
  min-height: 52px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--gold);
  color: var(--ink);
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease-out, transform 120ms ease;
}

button:hover {
  background: var(--gold-hover);
}

button:disabled {
  cursor: wait;
  opacity: 0.75;
}

button .arrow {
  font-size: 18px;
  line-height: 1;
}

.consent {
  color: var(--muted-dim);
  font-size: 11.5px;
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 60ch;
}

.form-message {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.form-message:not(:empty) {
  margin-top: 16px;
}

.form-message[data-state='error'] {
  color: var(--error);
}

.form-message[data-state='success'] {
  color: var(--gold);
}

.honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.no-script {
  color: var(--gold);
  line-height: 1.6;
}

.illustration {
  grid-area: fig;
  align-self: center;
  position: relative;
  container-type: inline-size;
  margin: 0;
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

/* The ticket's line, set in the page's own serif and leaning with the ticket. */
.ticket-line {
  position: absolute;
  z-index: 2;
  left: 19.4%;
  top: 73.2%;
  transform: translate(-50%, -50%) rotate(-11.5deg);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 3.9cqw;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  color: #1f2a22;
  pointer-events: none;
}

/* A phone behind the glasses, open to a spec: the drinks live in the app. */
/* Drawn as an iPhone 15 (71.6 x 147.6 mm): a thin black bezel in a titanium
   band, concentric corners, the Dynamic Island in a 9:41 status bar, and the
   Action button, volume and side buttons. Every size is a share of its width. */
/* An iPhone drawn in CSS, sized by its width (--pw). The picture's phone
   and the role cards' phones share it. */
.phone {
  --rim: #8d8a84;
  width: var(--pw);
  aspect-ratio: 71.6 / 147.6;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.175);
  background: #050505;
  box-shadow:
    0 0 0 calc(var(--pw) * 0.011) var(--rim),
    0 0 0 calc(var(--pw) * 0.016) #3b3a37,
    0 calc(var(--pw) * 0.06) calc(var(--pw) * 0.18) rgba(0, 0, 0, 0.5);
}

.illustration .phone {
  --pw: 31cqw;
  position: absolute;
  z-index: 0;
  left: 47%;
  top: -9%;
  transform: rotate(6deg);
}

/* Action button, then volume up and down, on the left; the side button on the right. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: calc(var(--pw) * 0.014);
  border-radius: calc(var(--pw) * 0.01);
}

.phone::before {
  left: calc(var(--pw) * -0.026);
  top: 17%;
  height: 25%;
  background: linear-gradient(var(--rim) 0 17%, transparent 17% 30%, var(--rim) 30% 62%, transparent 62% 70%, var(--rim) 70% 100%);
}

.phone::after {
  right: calc(var(--pw) * -0.026);
  top: 27%;
  height: 15%;
  background: var(--rim);
}

/* A real screen from the app (a classic's ticket, in dark mode). */
.phone-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--pw) * (0.175 - 0.034));
  background: #111412;
}

.phone-status {
  flex: none;
  height: calc(var(--pw) * 0.13);
  padding: calc(var(--pw) * 0.01) calc(var(--pw) * 0.085) 0 calc(var(--pw) * 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font: 600 calc(var(--pw) * 0.043) / 1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.phone-status svg {
  height: calc(var(--pw) * 0.03);
  width: auto;
  fill: currentColor;
}

.phone-island {
  position: absolute;
  top: calc(var(--pw) * 0.03);
  left: 50%;
  width: calc(var(--pw) * 0.32);
  height: calc(var(--pw) * 0.094);
  transform: translateX(-50%);
  border-radius: calc(var(--pw) * 0.05);
  background: #000;
}

.phone-screen img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}

/* Below the fold: who the app is for, one card per role. */
.crew {
  border-top: 1px solid var(--line);
  padding: 72px 0 88px;
}

.crew-head {
  max-width: 640px;
}

.crew h2 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.crew h2 span {
  font-style: italic;
  color: var(--gold);
}

.crew-intro {
  margin: 18px 0 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.stats {
  grid-area: stats;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 580px;
  margin: 40px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats div {
  display: flex;
  flex-direction: column-reverse;
  /* Reversed, so this packs each number at the top whatever its label's length. */
  justify-content: flex-end;
  gap: 4px;
}

.stats dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 2.4vw, 34px);
  color: var(--paper);
  line-height: 1.1;
}

.stats dt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.crew-card {
  overflow: hidden;
  padding: 0 24px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #15241a;
}

/* The app on an iPhone rising from the bottom of the card, tall enough to
   show each screen from its header down to the part worth seeing. */
.crew-screen {
  height: 340px;
  margin: 0 -24px 22px;
  padding-top: 28px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #22382a 0%, #15241a 70%);
  border-bottom: 1px solid var(--line);
}

.crew-screen .phone {
  --pw: 214px;
  position: relative;
  margin: 0 auto;
}

.crew-screen .phone-screen img {
  flex: none;
  height: auto;
}

/* The status bar takes the app's own background so it reads as one screen. */
.crew-screen .phone-screen {
  background: var(--app-bg, #0f1e16);
}

.crew-screen .phone-status {
  background: var(--app-bg, #0f1e16);
}

/* A recipe's spec card opens on a neutral dark, not the app's green. */
.shot-bartenders { --app-bg: #111313; }

.crew-card > svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crew-card h3 {
  margin: 16px 0 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crew-lede {
  margin: 8px 0 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  line-height: 1.3;
  color: var(--paper);
}

.crew-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.crew-card li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.crew-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* A feature that's planned but not ready yet. */
.soon {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--line-input);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 1px;
}

/* A second chance to sign up for whoever read to the end. */
.closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px 56px;
  margin-bottom: 72px;
  padding: 48px clamp(24px, 4vw, 56px);
  border: 1px solid #3a5242;
  border-radius: 18px;
  background: linear-gradient(135deg, #1b2e21 0%, #142219 100%);
}

.closing h2 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.closing h2 span {
  font-style: italic;
  color: var(--gold);
}

.closing-copy p {
  margin: 14px 0 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
}

.footer .wordmark {
  font-size: 19px;
  gap: 10px;
}

.footer .wordmark img {
  width: 30px;
}

.footer p {
  margin: 0;
  color: var(--muted-dim);
  font-size: 13px;
}

@media (min-width: 1500px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  .crew-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .closing {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .page {
    max-width: 620px;
  }
  .header {
    min-height: 88px;
  }
  /* On a phone the picture sits between the headline and the email field, sized
     by the screen's height so both are in view before any scrolling. The phone
     in the picture rises above it, so the picture keeps that room above. */
  .hero {
    --fig-w: min(100%, 520px, calc(34svh * 1402 / 1122));
    grid-template-columns: 1fr;
    grid-template-areas: "head" "fig" "signup" "stats" "details";
    align-content: start;
    min-height: 0;
    row-gap: 20px;
    padding-top: 20px;
    padding-bottom: 48px;
  }
  h1 {
    font-size: clamp(48px, 9vw, 68px);
  }
  .illustration {
    width: var(--fig-w);
    max-width: none;
    margin: calc(var(--fig-w) * 0.075) auto 0;
  }
  .signup {
    margin-top: 4px;
  }
  .intro-details {
    margin-top: 20px;
  }
  .description {
    margin-top: 0;
  }
  .crew {
    padding: 56px 0 64px;
  }
  .stats {
    margin-top: 8px;
    padding: 16px 0;
    gap: 10px;
  }
  .closing {
    margin-bottom: 48px;
    padding: 32px 24px;
  }
  .crew-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 0 20px;
  }
  .header {
    min-height: 68px;
  }
  .wordmark {
    font-size: 22px;
    gap: 10px;
  }
  .wordmark img,
  .wordmark svg {
    width: 36px;
  }
  .opening {
    font-size: 11.5px;
    gap: 7px;
  }
  .hero {
    padding-top: 12px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 14px;
  }
  h1 {
    font-size: clamp(42px, 11vw, 54px);
  }
  .description {
    font-size: 15.5px;
  }
  .crew-card {
    padding: 0 20px 24px;
  }
  .crew-screen {
    margin: 0 -20px 20px;
  }
  .stats dd {
    font-size: 24px;
  }
  .stats dt {
    font-size: 11.5px;
  }
  .signup-intro {
    margin-bottom: 14px;
  }
  /* Beside the field, the button gives it room for a whole address. */
  input {
    padding: 0 12px;
  }
  button {
    padding: 0 14px;
    gap: 8px;
  }
}

/* A smaller phone keeps the row by leaving out the button's arrow. */
@media (min-width: 375px) and (max-width: 399px) {
  button .arrow {
    display: none;
  }
}

/* The narrowest phones stack the button under the field. */
@media (max-width: 374px) {
  .input-row {
    flex-direction: column;
  }
  button {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}