/* ============================================================
   Daily Cup of Jo Coffee Co. — styles.css
   Built 3 Sep 2026 from Jordan's Magic Intake.

   THREE DECISIONS, MADE BEFORE ANY CSS (per standards/website-build-sop.md)

   1. PALETTE — Jordan's own five colours, used as full-bleed grounds that
      change as you scroll, the way her monthly drink posters on Instagram
      colour-block each flavour. Page ground is plain white (NOT cream; her
      logo card is cream but she asked for "bright, minimalistic, modern").
        butter  #EED35F   sampled from the machine in her logo
        sky     #A9CBE6   the knobs on the machine, brightened to "light blue"
        maroon  #6B2233
        cocoa   #3E2A1F   her logo's script brown, used as ink
        pink    #F4B6C2
      Ink on butter/sky/pink, white on maroon/cocoa. All ≥ 7:1 except
      ink-on-maroon which is never used.

   2. TYPE — Archivo (variable, width axis) for display, Hanken Grotesk for
      body, DM Mono for prices and label lines.
      Reason: her can labels and drink posters are set in wide, chunky sans
      caps — Archivo at wdth 120 reads like that signage. DM Mono for the
      SHAKE WELL / BEST BY lines because that is literally what the stickers
      on her cans are set in. Her script logo stays an image; no web font
      imitates it and none should try.

   3. ONE PRIMITIVE — the ticket row: a hairline-topped row with the name on
      the left and the detail (price, time, answer) pushed right. It is the
      menu, the hours, the catering menu, the form, and the footer. Nothing
      is a card.

   MOTION — scroll-DRIVEN, not scroll-TRIGGERED. Everything is a CSS
   scroll-timeline: the hero shrinks into a tile, the three "ways" stack,
   the staples slide sideways, the cans tilt in. Nothing is opacity:0 at
   rest — browsers without animation-timeline get the fully laid-out page,
   and prefers-reduced-motion turns all of it off.
   ============================================================ */

:root {
  --butter: #eed35f;
  --butter-deep: #d9b93a;
  --sky: #a9cbe6;
  --maroon: #6b2233;
  --cocoa: #3e2a1f;
  --pink: #f4b6c2;
  --ink: #2b1d15;
  --paper: #ffffff;
  --rule: rgba(43, 29, 21, 0.22);
  --rule-light: rgba(255, 255, 255, 0.28);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
main, body { overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; }
::selection { background: var(--butter); color: var(--ink); }

/* Display type: Archivo width axis */
.wide { font-variation-settings: "wdth" 120; }
.narrow { font-variation-settings: "wdth" 80; }
.mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; }

/* ---------- Header (booking CTA on every page) ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 60;
  background: var(--butter); transform-origin: left; transform: scaleX(0);
}
.site-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img.mark { height: 30px; width: auto; }
.brand img.word { height: 22px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: 24px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 0.98rem; position: relative; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--butter);
}
.head-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  border: 2px solid var(--ink); color: var(--ink); background: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--butter); color: var(--ink); border-color: var(--butter); }
.btn-butter { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.btn-butter:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ghost-paper { border-color: var(--paper); color: var(--paper); }
.btn-ghost-paper:hover { background: var(--paper); color: var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }

.menu-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; height: 2px; width: 26px; margin: 6px auto; background: var(--ink); transition: transform 0.25s var(--ease), opacity 0.2s; }
.mobile-nav {
  display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 45; background: var(--butter);
  padding: 40px var(--gutter); flex-direction: column; gap: 6px;
}
.mobile-nav a { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9vw, 3.2rem); text-decoration: none; padding: 10px 0; border-top: 1px solid var(--rule); line-height: 1.05; }
.mobile-nav .cta { margin-top: auto; display: grid; gap: 10px; }
.mobile-nav .cta .btn { font-size: 1.05rem; padding: 16px; }
body.nav-open .mobile-nav { display: flex; }
body.nav-open { overflow: hidden; }
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav, .head-actions { display: none; }
  .menu-toggle { display: block; }
}

/* ---------- Generic band ---------- */
.band { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.band-butter { background: var(--butter); }
.band-sky { background: var(--sky); }
.band-pink { background: var(--pink); }
.band-maroon { background: var(--maroon); color: var(--paper); }
.band-cocoa { background: var(--cocoa); color: var(--paper); }
.band-maroon .btn, .band-cocoa .btn { border-color: var(--paper); color: var(--paper); }
.band-maroon .btn:hover, .band-cocoa .btn:hover { background: var(--paper); color: var(--ink); }
.band-maroon .btn-paper, .band-cocoa .btn-paper { background: var(--paper); color: var(--ink); }
.band-maroon .btn-paper:hover, .band-cocoa .btn-paper:hover { background: var(--butter); border-color: var(--butter); }
.band-maroon .ticket > li, .band-cocoa .ticket > li { border-top-color: var(--rule-light); }
.band-maroon .ticket .sub, .band-cocoa .ticket .sub { color: rgba(255,255,255,0.72); }

.h-xl { font-size: clamp(2.8rem, 8.5vw, 7.5rem); }
.h-l  { font-size: clamp(2.2rem, 5.6vw, 4.8rem); }
.h-m  { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.4; max-width: 34em; }
.measure { max-width: 38em; }

/* ---------- THE PRIMITIVE: ticket rows ---------- */
.ticket { list-style: none; margin: 0; padding: 0; }
.ticket > li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.ticket > li:last-child { border-bottom: 1px solid var(--rule); }
.band-maroon .ticket > li:last-child, .band-cocoa .ticket > li:last-child { border-bottom-color: var(--rule-light); }
.ticket .name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.ticket .sub { grid-column: 1; color: rgba(43,29,21,0.72); margin-top: 4px; max-width: 34em; }
.ticket .price { font-family: var(--mono); font-size: 1rem; white-space: nowrap; }
.ticket .tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; margin-left: 10px; vertical-align: middle; }
.ticket-lg .name { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.ticket-lg > li { padding: 22px 0; }

/* ---------- Photo slots (removed by the img onerror if no file) ---------- */
.slot { margin: 0; overflow: hidden; border-radius: 18px; background: rgba(43,29,21,0.06); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot figcaption { font-family: var(--mono); font-size: 0.78rem; padding: 10px 2px 0; }

/* ============================================================
   HOME
   ============================================================ */

/* Hero: pinned scene that shrinks into a tile as the page moves */
.hero-wrap { position: relative; height: 170vh; }
.hero {
  position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden;
  background: var(--butter);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: end;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(40px, 6vh, 72px);
  transform-origin: 50% 0%;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 0; }
.hero h1 img { width: min(100%, 520px); height: auto; }
.hero .lede { margin-top: 28px; font-size: clamp(1.1rem, 1.5vw, 1.4rem); max-width: 30em; }
.hero-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; z-index: 1; justify-self: end; width: min(100%, 520px); align-self: center; }
.hero-art .slot { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-h) - 120px); border-radius: 28px; box-shadow: 0 30px 60px rgba(62,42,31,0.22); }
.hero-steam { position: absolute; left: 50%; top: -6%; width: 2px; height: 0; }
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .hero-wrap { height: 150vh; }
  .hero { grid-template-columns: 1fr; align-items: start; grid-template-rows: auto 1fr; min-height: 0; }
  .hero { height: auto; min-height: 0; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 24px; row-gap: 16px; }
  .hero-wrap { height: auto; }
  .hero-art { width: min(64vw, 300px); justify-self: end; align-self: start; margin-bottom: 0; }
  .hero-art .slot { max-height: 30vh; aspect-ratio: 4 / 3; }
  .hero h1 img { width: min(100%, 300px); }
  .hero .lede { margin-top: 16px; font-size: 1rem; }
  .hero-cta { margin-top: 16px; }
  .hero-cta .btn-lg { padding: 12px 20px; font-size: 0.95rem; }
  .hero-foot { display: none; }
}

/* Three ways: sticky panels that stack over one another */
.ways { position: relative; }
.way-wrap { position: relative; view-timeline-name: --way; }
.way {
  position: relative; height: auto; min-height: 0;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: 88px var(--gutter) 88px;
  border-top-left-radius: 32px; border-top-right-radius: 32px;
  box-shadow: 0 -20px 60px rgba(43,29,21,0.12);
}
.way .kicker { font-family: var(--mono); font-size: 0.8rem; margin-bottom: 20px; opacity: 0.8; }
.way h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); overflow-wrap: anywhere; }
@media (max-width: 480px) { .way h2 { font-size: clamp(2.2rem, 11vw, 2.8rem); } .h-xl, .page-hero h1 { font-size: clamp(2.6rem, 13vw, 4rem); } }
.way .lede { margin-top: 24px; }
.way .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.way .side { width: 100%; align-self: center; justify-self: end; }
.way .side .slot { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-h) - 80px); }
.way-sky .side .slot { aspect-ratio: 1 / 1; }
.way .mini { margin-top: 28px; max-width: 30em; }
.way .mini > li { padding: 10px 0; }
.way .mini .name { font-size: 1rem; }
.way .mini .price { font-size: 0.85rem; }
.way-maroon .labels { justify-content: center; }
/* The stack-over effect only when a whole panel fits on screen; otherwise the
   next panel slides over content that is still being read. */
@media (min-width: 900px) and (min-height: 880px) {
  .way-wrap { height: 100vh; }
  .way { position: sticky; top: 0; height: 100vh; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 56px; }
}
.way-sky { background: var(--sky); }
.way-pink { background: var(--pink); }
.way-maroon { background: var(--maroon); color: var(--paper); }
.way-maroon .slot { background: rgba(255,255,255,0.08); }
@media (max-width: 900px) {
  .way { grid-template-columns: 1fr; align-items: start; min-height: 0; height: auto; padding-bottom: 64px; border-radius: 0; box-shadow: none; }
  .way .side { margin-top: 36px; justify-self: stretch; }
  .ticket > li { column-gap: 16px; }
  .ticket .price { white-space: normal; text-align: right; font-size: 0.9rem; }
  .ticket .sub { max-width: none; }
  .map { min-height: 260px; }
  .staple { width: 78vw; min-height: 400px; padding: 24px; }
  .way .side .slot { aspect-ratio: 4 / 3; max-height: none; }
}

/* Staples: vertical scroll drives a horizontal track */
.staples { position: relative; height: 300vh; background: var(--paper); view-timeline-name: --staples; }
.staples-pin { min-width: 0; max-width: 100%; }
.track > * { flex: 0 0 auto; }
.staples-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.staples-head { padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.staples-head h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); }
.track { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.staple {
  width: min(78vw, 560px); min-height: min(58vh, 540px); border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  text-decoration: none;
}
.staple .n { font-family: var(--mono); font-size: 0.8rem; }
.staple h3 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-variation-settings: "wdth" 112; }
.staple p { max-width: 26em; font-size: 1.05rem; }
.staple .row { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.staple .price { font-family: var(--mono); font-size: 1.3rem; }
.staple-butter { background: var(--butter); }
.staple-pink { background: var(--pink); }
.staple-sky { background: var(--sky); }
.staple-cocoa { background: var(--cocoa); color: var(--paper); }
.staple-cocoa .btn { border-color: var(--paper); color: var(--paper); }
.staple-cocoa .btn:hover { background: var(--paper); color: var(--ink); }
.staple-paper { background: var(--paper); border: 2px solid var(--ink); }
.staple.has-photo { gap: 18px; overflow: hidden; }
.staple.has-photo .row p { text-shadow: none; }
.staple-photo { width: calc(100% + 64px); margin: 0 -32px; flex: 1 1 200px; min-height: 200px; object-fit: cover; }
@media (max-width: 900px) { .staple-photo { width: calc(100% + 48px); margin: 0 -24px; } }
@media (max-width: 900px) {
  .staples { height: auto; }
  .staples-pin { position: static; height: auto; overflow: visible; padding: 80px 0; }
  .track { width: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding-bottom: 12px; -webkit-overflow-scrolling: touch; will-change: auto; transform: none !important; }
  .track > * { scroll-snap-align: start; flex: 0 0 auto; }
  .staple { min-height: 440px; }
}

/* Cans: Jo on the Go */
.cans { position: relative; overflow: clip; }
.cans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.cans h2 { font-size: clamp(2.6rem, 6.4vw, 6rem); }
.cans .lede { margin-top: 24px; }
.cans .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.labels { display: flex; gap: 18px; justify-content: center; align-items: end; perspective: 1200px; }
.label {
  width: clamp(120px, 14vw, 190px); aspect-ratio: 1 / 1.9; border-radius: 16px;
  background: var(--paper); color: var(--ink); padding: 18px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 2px solid var(--ink);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  transform-origin: 50% 100%;
}
.label b { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1; letter-spacing: -0.01em; text-transform: none; display: block; }
.label .l-top { display: flex; justify-content: space-between; }
.label .l-mid { display: grid; gap: 6px; }
.label .l-bar { height: 6px; border-radius: 3px; }
.label .l-bot { border-top: 1px solid var(--ink); padding-top: 8px; display: grid; gap: 3px; }
.label:nth-child(2) { margin-bottom: 26px; }
@media (max-width: 900px) {
  .cans-grid { grid-template-columns: 1fr; }
  .labels { justify-content: flex-start; gap: 10px; }
  .label { width: clamp(92px, 28vw, 150px); padding: 12px 10px; font-size: 0.58rem; }
  .label b { font-size: 0.95rem; }
  .label .l-top span:last-child { display: none; }
}

/* Mosaic: three columns that drift at different speeds while the section scrolls */
.mosaic { padding: clamp(56px, 8vw, 110px) var(--gutter); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.mosaic h2 { font-size: clamp(2rem, 5vw, 4.4rem); }
.mosaic .lede { margin-top: 20px; }
.mosaic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.mosaic-grid .slot { aspect-ratio: 4 / 5; }
.mosaic-grid .slot:nth-child(1), .mosaic-grid .slot:nth-child(4) { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .mosaic { grid-template-columns: 1fr; } }

/* Visit strip on home */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.visit-grid h2 { font-size: clamp(2.4rem, 5.6vw, 5rem); }
.address { margin-top: 24px; font-size: 1.15rem; line-height: 1.45; }
.address a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } }

/* Big closing line */
.pour { text-align: left; }
.pour h2 { font-size: clamp(3rem, 11vw, 11rem); font-variation-settings: "wdth" 62; letter-spacing: -0.03em; line-height: 0.9; }
.pour .btn { margin-top: 36px; }
.pour.band { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- Footer ---------- */
.site-foot { padding: 64px var(--gutter) 40px; background: var(--paper); border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid .word { height: 26px; width: auto; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { padding: 8px 0; border-top: 1px solid var(--rule); }
.foot-grid li:last-child { border-bottom: 1px solid var(--rule); }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-grid .h { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.foot-bottom { margin-top: 48px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.75rem; opacity: 0.8; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero {
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: end;
}
.page-hero h1 { font-size: clamp(3rem, 9vw, 8.5rem); }
.page-hero .lede { justify-self: end; max-width: 26em; }
@media (max-width: 900px) { .page-hero { grid-template-columns: 1fr; align-items: start; } .page-hero .lede { justify-self: start; } }

/* Menu page */
.menu-layout > * { min-width: 0; }
.menu-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 96px); padding: 0 var(--gutter) clamp(72px, 10vw, 140px); }
.menu-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.menu-side ul { list-style: none; margin: 0; padding: 0; }
.menu-side a { display: block; padding: 10px 0; border-top: 1px solid var(--rule); text-decoration: none; font-family: var(--display); font-weight: 700; }
.menu-side li:last-child a { border-bottom: 1px solid var(--rule); }
.menu-side a:hover { padding-left: 8px; transition: padding 0.2s var(--ease); }
.menu-side .note { margin-top: 24px; font-size: 0.9rem; opacity: 0.8; }
.menu-section { padding-top: 24px; margin-bottom: clamp(48px, 6vw, 88px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.menu-section h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: 24px; }
.menu-section h2 small { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.04em; margin-top: 10px; }
@media (max-width: 900px) {
  .menu-layout { grid-template-columns: 1fr; }
  .menu-side { position: static; }
  .menu-side ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
  .menu-side a, .menu-side li:last-child a { border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
}

/* FlashQuotes embed */
.quote-embed { min-height: 320px; align-self: start; }
.quote-embed iframe, .quote-embed form { width: 100%; max-width: 100%; }
.quote-fallback { margin-top: 16px; font-size: 0.9rem; opacity: 0.75; }
.quote-fallback a { text-decoration: underline; text-underline-offset: 3px; }

/* Catering page */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.split h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.split .stack { display: grid; gap: 20px; }
.split .slot { aspect-ratio: 4 / 5; max-height: 560px; }
.split .stack:not(:has(.slot)) { display: none; }
.split:has(.stack):not(:has(.slot)) { grid-template-columns: 1fr; }
.split:has(.stack):not(:has(.slot)) .prose { max-width: 42em; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 18px; font-size: 1.1rem; max-width: 36em; }
.prose p { line-height: 1.55; }
.quote-block { padding: clamp(48px, 7vw, 96px) var(--gutter); }
.quote-block .inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.quote-block h2 { font-size: clamp(2rem, 5vw, 4.4rem); }
@media (max-width: 900px) { .quote-block .inner { grid-template-columns: 1fr; } }

/* Photo strip used on inner pages */
.page-hero.with-photo { grid-template-columns: 1fr 0.9fr; align-items: center; padding-bottom: clamp(40px, 6vw, 80px); }
.page-hero.with-photo .copy .lede { justify-self: start; margin-top: 24px; }
.page-hero.with-photo .slot { aspect-ratio: 4 / 3; justify-self: end; width: 100%; max-width: 640px; }
@media (max-width: 900px) { .page-hero.with-photo { grid-template-columns: 1fr; } .page-hero.with-photo .slot { max-width: none; } }
.event { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.event .photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.event .photos .slot { aspect-ratio: 4 / 5; }
.event .photos .slot:nth-child(2) { margin-top: 48px; }
.event .photos .slot.sq { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .event { grid-template-columns: 1fr; } }

/* About */
.story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.story .slot { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); }
.story .prose { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.story:not(:has(.slot)) { grid-template-columns: 1fr; }
.story:not(:has(.slot)) .prose { max-width: 40em; }
.story .prose p:first-child { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: -0.01em; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story .slot { position: static; aspect-ratio: 16 / 10; } }

/* Visit page */
.visit-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); padding: 0 var(--gutter) clamp(48px, 6vw, 80px); align-items: start; }
.map { border: 0; width: 100%; height: 100%; min-height: 360px; border-radius: 18px; filter: grayscale(1) contrast(1.05); }
.visit-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter) clamp(72px, 10vw, 140px); align-items: stretch; }
.visit-bottom .slot { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .visit-bottom { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .visit-layout { grid-template-columns: 1fr; } }

/* Form, built from the same ticket rows */
.form { display: grid; }
.form .row { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.form .row:last-of-type { border-bottom: 1px solid var(--rule); }
.form label { font-family: var(--display); font-weight: 700; }
.form input, .form select, .form textarea {
  width: 100%; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 0;
  font: inherit; color: inherit; outline: none; border-radius: 0;
}
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--ink); }
.form textarea { min-height: 120px; resize: vertical; }
.form .submit { margin-top: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form .fine { font-size: 0.85rem; opacity: 0.75; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; gap: 4px; } }

/* 404 / thanks */
.plain { min-height: 70vh; display: grid; align-content: center; padding: 80px var(--gutter); }
.plain h1 { font-size: clamp(3rem, 10vw, 9rem); }
.plain p { margin-top: 24px; font-size: 1.2rem; max-width: 30em; }
.plain .btn { margin-top: 32px; justify-self: start; }

/* ============================================================
   MOTION — scroll-driven. Wrapped so browsers without support and
   people who asked for reduced motion get the same static layout.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* reading progress */
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }

    /* hero shrinks into a tile and dims as the ways slide over it */
    .hero { animation: hero-tile linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-tile {
      to { transform: scale(0.92) translateY(-4vh); border-radius: 36px; filter: brightness(0.92); }
    }
    .hero h1 { animation: drift-l linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes drift-l  { to { transform: translateY(-6vh) scale(0.96); } }
    
    @keyframes art-rise { to { transform: translateY(-10vh) scale(0.9) rotate(-2deg); } }

    /* each stacked way: its copy slides up as it arrives, and it dims once covered */
    .way .copy { animation: way-in linear both; animation-timeline: --way; animation-range: entry 0% entry 100%; }
    @keyframes way-in { from { transform: translateY(12vh); } to { transform: none; } }
    .way .side { animation: slot-in linear both; animation-timeline: --way; animation-range: entry 0% entry 100%; }
    @keyframes slot-in { from { transform: translateY(18vh) rotate(2deg); } to { transform: none; } }

    /* staples: the track pans left as the 300vh section scrolls */
    @media (min-width: 901px) {
      .track { animation: pan linear both; animation-timeline: --staples; animation-range: contain 0% contain 100%; }
      .staples-head h2 { animation: squeeze linear both; animation-timeline: --staples; animation-range: contain 0% contain 100%; }
    }
    @keyframes pan { to { transform: translateX(calc(-100% + 100vw - var(--gutter) * 2)); } }
    @keyframes squeeze { from { font-variation-settings: "wdth" 125; } to { font-variation-settings: "wdth" 75; } }

    /* phones: each panel scales up and squares off as it arrives; staples cards grow in as you swipe */
    @media (max-width: 900px) {
      .way { animation: way-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; transform-origin: 50% 0%; }
      .way .copy { animation: none; }
      @keyframes way-arrive { from { transform: scale(0.94) translateY(24px); border-top-left-radius: 32px; border-top-right-radius: 32px; } to { transform: none; border-radius: 0; } }
      .way .side { animation: none; }
      .staple { animation: card-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 100%; }
      @keyframes card-in { from { transform: scale(0.9) translateX(24px); } to { transform: none; } }
      .staples-head h2 { animation: none; }
      .mosaic-grid .slot { animation: photo-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
      @keyframes photo-in { from { transform: scale(0.92); } to { transform: none; } }
      .hero-art .slot { animation: none; }
      .hero-art { animation: art-rise-m linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
      @keyframes art-rise-m { to { transform: translateY(-8px) scale(0.94) rotate(-2deg); } }
    }

    /* cans tilt upright as they enter */
    .label { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .label:nth-child(1) { --from: -14deg; }
    .label:nth-child(2) { --from: 8deg; }
    .label:nth-child(3) { --from: 16deg; }
    @keyframes tilt { from { transform: rotate(var(--from)) translateY(10vh); } to { transform: none; } }

    /* the closing line pours in from below */
    .pour h2 { animation: pour-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes pour-in { from { font-variation-settings: "wdth" 125; letter-spacing: 0; } to { font-variation-settings: "wdth" 62; letter-spacing: -0.03em; } }

    /* menu page: section headings loosen as they pass the top */
    .menu-section h2 { animation: heading-wide linear both; animation-timeline: view(); animation-range: entry 0% contain 30%; }
    @keyframes heading-wide { from { font-variation-settings: "wdth" 80; } to { font-variation-settings: "wdth" 120; } }
  }

  /* one-time entrance on the hero copy, ends in the resting state */
  .hero h1 { animation: settle 0.9s var(--ease) both; }
  .hero .lede, .hero-cta { animation: fade-up 0.9s var(--ease) 0.35s both; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }
  .hero-art .slot { animation: settle 1.1s var(--ease) both; }
  @keyframes settle { from { transform: translateY(6%) rotate(-2deg); } }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* hero text both rides the load animation and the scroll one: give scroll the wrapper */
    .hero-art .slot { animation: settle 1.1s var(--ease) both; animation-timeline: auto; }
    .hero-art { animation: art-rise linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}