/* ------------------------------------------------------------------
   Marlows Coffee
   Palette and type come straight from the Figma file.
   The hero and the statement sections are built on a 2538-wide unit
   (--u) so they scale as one piece, exactly as drawn.
------------------------------------------------------------------ */

@font-face {
  font-family: "Thunder";
  src: url("../assets/fonts/Thunder-BoldLC.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --peach: #ffbe87;
  --peach-light: #ffd6b4;
  --brown: #8a4b2a;
  --dark: #2b1d14;
  --cream: #efebe3;
  --white: #ffffff;

  --display: "Thunder", "Impact", "Arial Narrow", sans-serif;
  --body: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4.57vw, 116px);

  /* Nav sizing mirrors the hero unit but uses viewport units so the fixed
     bar can live outside the hero container. */
  --nu: min(calc(100vw / 2538), calc(100svh / 1522));
  --nav-h: calc(118 * var(--nu));

  /* Motion, lifted from the hero keyframes in Figma */
  --ease-drop: cubic-bezier(0.42, 0, 0, 1.011);
  --ease-pop: cubic-bezier(0.368, 0.006, 0.029, 0.989);
  --ease-rise: cubic-bezier(0.391, -0.006, 0, 1.011);
  --ease-draw: cubic-bezier(0.287, -0.017, 0.075, 0.994);
  --t-drop: 1010ms;
  --t-pop: 1094ms;
  --t-rise: 1523ms;
  --t-draw: 2079ms;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--peach);
  color: var(--dark);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 0.6em 1em;
  background: var(--dark);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}

#menu, #visit, #member { scroll-margin-top: var(--nav-h); }

.button {
  display: inline-block;
  background: var(--brown);
  color: var(--white);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 500;
  line-height: 1;
  border: 0;
  cursor: pointer;
}

/* ==================================================================
   HERO  (Figma frame 2538 x 1522)
================================================================== */

.hero {
  container-type: inline-size;
  background: var(--peach);
  overflow: hidden;
}

.hero-frame {
  --u: min(calc(1cqw / 25.38), calc(100svh / 1522));
  position: relative;
  width: 100%;
  height: calc(1522 * var(--u));
}

/* --- nav ------------------------------------------------------- */

.hero-nav {
  --u: var(--nu);
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: var(--nav-h);
  background: rgb(255, 214, 180);
  border-bottom: 1px solid rgba(138, 75, 42, 0.25);
  z-index: 50;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px 4px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  color: #000;
  cursor: pointer;
}

.logo {
  position: absolute;
  left: calc(68 * var(--u));
  top: calc(7 * var(--u));
  width: calc(137 * var(--u));
  height: calc(153.54 * var(--u));
  text-decoration: none;
  color: var(--dark);
  transform: scale(0.68);
  transform-origin: 0 0;
}
.logo-mark {
  position: absolute;
  left: calc(5.64 * var(--u));
  top: calc(15.86 * var(--u));
  width: calc(125.845 * var(--u));
  height: calc(92.676 * var(--u));
  object-fit: cover;
}
.logo-line { position: absolute; }
.logo-line-1 { left: calc(25.25 * var(--u)); top: calc(1.11 * var(--u)); width: calc(1.61 * var(--u)); height: calc(65.84 * var(--u)); }
.logo-line-2 { left: calc(25.89 * var(--u)); top: calc(0.03 * var(--u)); width: calc(23.74 * var(--u)); height: calc(27.60 * var(--u)); }
.logo-line-3 { left: calc(81.96 * var(--u)); top: calc(0.03 * var(--u)); width: calc(27.82 * var(--u)); height: calc(26.31 * var(--u)); }
.logo-line-4 { left: calc(110.04 * var(--u)); top: calc(-0.81 * var(--u)); width: calc(1.61 * var(--u)); height: calc(71.19 * var(--u)); }
.logo-word {
  position: absolute;
  left: 0; right: 0;
  top: calc(108.54 * var(--u));
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(48.481 * var(--u));
  line-height: 1;
  color: #000;
}

.nav-links {
  position: absolute;
  right: calc(85 * var(--u));
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(221 * var(--u));
}
.nav-link {
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* --- cup stage --------------------------------------------------
   Stage origin sits at the ring SVG's top-left in frame space:
   (1100.45, -4.36). Everything inside uses stage-local units. */

.cup-stage {
  --s: var(--u);
  position: absolute;
  right: calc(-87.29 * var(--u));
  top: calc(-4.36 * var(--u));
  width: calc(1524.84 * var(--u));
  height: calc(1526.4 * var(--u));
  z-index: 1;
}

.ring {
  position: absolute;
  left: 0; top: 0;
  width: calc(1524.84 * var(--s));
  height: calc(1172.36 * var(--s));
  overflow: visible;
}
.ring-back { z-index: 1; }
.ring-front { z-index: 3; }

.cup-group {
  position: absolute;
  left: calc(333.55 * var(--s));
  top: calc(160.36 * var(--s));
  width: calc(1025 * var(--s));
  height: calc(1365.565 * var(--s));
  z-index: 2;
  transform-origin: 50% 50%;
}
.cup {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(774.312 * var(--s));
  height: calc(1225.176 * var(--s));
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(12.72deg);
}
.cup-shadow {
  position: absolute;
  left: calc(482.16 * var(--s));
  top: calc(212.35 * var(--s));
  width: calc(490.436 * var(--s));
  height: calc(1165.91 * var(--s));
  transform: scaleX(-1);
}

/* --- bean typography ------------------------------------------- */

.hero-title { margin: 0; }
.beans { position: absolute; object-fit: cover; }
.beans-marlows {
  left: calc(105 * var(--u));
  top: calc(268 * var(--u));
  width: calc(1408 * var(--u));
  height: calc(470 * var(--u));
  z-index: 6;
}
.beans-coffee {
  left: 0;
  top: calc(524 * var(--u));
  width: calc(1618.552 * var(--u));
  height: calc(629.392 * var(--u));
  z-index: 4;
}

/* --- copy and button ------------------------------------------- */

.hero-line {
  position: absolute;
  left: calc(116 * var(--u));
  top: calc(1175 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.2;
  color: #000;
  z-index: 5;
  white-space: nowrap;
  transform-origin: 50% 50%;
}

.hero-hours {
  position: absolute;
  left: calc(116 * var(--u));
  top: calc(1282 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  color: var(--brown);
  z-index: 5;
  white-space: nowrap;
  transform-origin: 50% 50%;
}

.hero-button {
  position: absolute;
  left: calc(116 * var(--u));
  top: calc(1347.18 * var(--u));
  width: calc(364 * var(--u));
  height: calc(67.638 * var(--u));
  font-size: calc(35.599 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transform-origin: 50% 50%;
}

/* --- hero motion (plays once, timings straight from Figma) ------
   Figma timeline: 2942.857 ms. Percent markers converted to ms. */

@keyframes hero-nav-in {
  from { opacity: 0; translate: 0 calc(-169.5 * var(--u)); }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes hero-marlows-in {
  from { opacity: 0; translate: 0 calc(-72 * var(--u)); }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes hero-coffee-in {
  from { opacity: 0; translate: 0 calc(-66.696 * var(--u)); }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes hero-line-in {
  from { opacity: 0; scale: 0.08; }
  to   { opacity: 1; scale: 1; }
}
@keyframes hero-button-in {
  from { opacity: 0; scale: 0; }
  to   { opacity: 1; scale: 1; }
}
@keyframes hero-cup-move {
  from { translate: 0 calc(471.217 * var(--s)); scale: 0.01; }
  to   { translate: 0 0; scale: 1; }
}
@keyframes hero-cup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ring-draw {
  from { stroke-dasharray: 0 1; }
  to   { stroke-dasharray: 1 1; }
}

.js .hero-nav,
.js .beans-marlows,
.js .beans-coffee,
.js .hero-line,
.js .hero-hours,
.js .hero-button,
.js .cup-group { opacity: 0; }
.js .ring path { stroke-dasharray: 0 1; }

.js .hero-nav.is-ready {
  animation: hero-nav-in 1285.7ms cubic-bezier(0.333, -0.006, 0, 0.994) both;
}
.js .hero.is-ready .beans-marlows {
  animation: hero-marlows-in 1009.8ms var(--ease-drop) 228.6ms both;
}
.js .hero.is-ready .beans-coffee {
  animation: hero-coffee-in 1009.8ms cubic-bezier(0.287, 0, 0, 1.006) 228.6ms both;
}
.js .hero.is-ready .hero-line,
.js .hero.is-ready .hero-hours {
  animation: hero-line-in 1093.8ms var(--ease-pop) 144.6ms both;
}
.js .hero.is-ready .hero-button {
  animation: hero-button-in 1093.8ms var(--ease-pop) 144.6ms both;
}
.js .hero.is-ready .cup-group {
  animation:
    hero-cup-move 1522.7ms var(--ease-rise) both,
    hero-cup-fade 1065.7ms var(--ease-rise) both;
}
.js .hero.is-ready .ring-pass-1 {
  animation: ring-draw 2079.3ms var(--ease-draw) both;
}
.js .hero.is-ready .ring-pass-2 {
  animation: ring-draw 1924.4ms cubic-bezier(0.391, 0.006, 0.046, 0.989) 778.5ms both;
}

/* ==================================================================
   STATEMENT  (Figma frame 2538 x 1522)
================================================================== */

.statement {
  container-type: inline-size;
  --u: calc(1cqw / 25.38);
  position: relative;
  background: var(--peach-light);
  padding: calc(180 * var(--u)) calc(63 * var(--u)) calc(191 * var(--u));
  overflow: hidden;
  isolation: isolate;
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/latte-texture.jpg") center / cover no-repeat;
  transform: rotate(90deg) scale(1.8);
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}

.statement-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(490.779 * var(--u));
  line-height: 0.92;
  text-align: center;
  color: transparent;
  background: url("../assets/img/latte-texture.jpg") center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: calc(1.5 * var(--u)) rgba(43, 29, 20, 0.85);
  margin: 0 auto;
}

.statement-copy {
  margin-top: calc(55 * var(--u));
  width: calc(1228 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.2;
  color: var(--brown);
}

/* ==================================================================
   MENU
================================================================== */

.menu {
  background: var(--cream);
  color: var(--dark);
  padding: clamp(72px, 8vw, 150px) var(--gutter) clamp(80px, 8vw, 150px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(24px, 4vw, 96px);
  align-items: stretch;
  overflow: hidden;
}

.menu-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 150px);
  line-height: 0.9;
  letter-spacing: 0.005em;
}
.menu-note {
  margin-top: 0.6em;
  font-size: clamp(16px, 1.15vw, 22px);
  max-width: 28ch;
  color: var(--brown);
}

.menu-list { margin-top: clamp(40px, 4.5vw, 80px); }

.menu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "notes price";
  align-items: baseline;
  column-gap: clamp(20px, 3vw, 64px);
  row-gap: 0.35em;
  padding: clamp(18px, 2vw, 36px) 0 clamp(20px, 2.2vw, 40px);
}
.menu-name {
  grid-area: name;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 76px);
  line-height: 0.95;
}
.menu-notes {
  grid-area: notes;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.25;
  color: var(--brown);
}
.menu-price {
  grid-area: price;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15em;
  font-size: clamp(16px, 1.15vw, 22px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.menu-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--dark);
}

.menu-foot {
  margin-top: clamp(28px, 3vw, 56px);
  font-size: clamp(16px, 1.15vw, 22px);
  max-width: 40ch;
  color: var(--brown);
}

.menu-art {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-disc {
  width: 58%;
  max-width: 560px;
  height: auto;
  margin-right: 0;
  rotate: -8deg;
  filter: drop-shadow(0 30px 40px rgba(43, 29, 20, 0.25));
}

/* ==================================================================
   ROAST  (Figma: Desktop - 5)
================================================================== */

.roast {
  position: relative;
  background: var(--brown);
  color: var(--cream);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 3vw, 64px);
  padding: clamp(72px, 7vw, 130px) var(--gutter) clamp(72px, 7vw, 130px) 0;
  overflow: hidden;
}

.roast-text { max-width: 44rem; order: 2; }
.roast-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 170px);
  line-height: 0.9;
  color: var(--peach);
}
.roast-sub {
  margin-top: 0.4em;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 76px);
  line-height: 0.95;
  color: var(--peach-light);
}
.roast-copy {
  margin-top: clamp(24px, 2.6vw, 48px);
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1.3;
  max-width: 34ch;
  color: var(--peach-light);
}

.roast-art { min-width: 0; order: 1; padding-left: var(--gutter); }
.roast-cup {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1122 / 1402;
  transform-origin: 50% 50%;
}
.roast-cup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.roast-shadow {
  position: absolute;
  left: 24.5%;
  top: 29.7%;
  width: 42.4%;
  height: 69.4%;
}

/* ==================================================================
   VISIT
================================================================== */

.visit {
  background: var(--peach);
  color: var(--dark);
  padding: clamp(72px, 8vw, 150px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 5vw, 120px);
  align-items: center;
  overflow: hidden;
}

.visit-art {
  position: relative;
  aspect-ratio: 774 / 1225;
  max-height: 80vh;
  width: auto;
  height: min(80vh, 60vw);
  transform-origin: 50% 50%;
  justify-self: center;
}
.visit-cup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  rotate: -10deg;
}
.visit-cup-shadow {
  position: absolute;
  left: -14%;
  top: 12%;
  width: 63%;
  height: 95%;
  rotate: -10deg;
}

.visit-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 170px);
  line-height: 0.88;
}
.visit-copy {
  margin-top: clamp(20px, 2.2vw, 40px);
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1.3;
  max-width: 36ch;
}

.hours {
  margin-top: clamp(32px, 3.5vw, 64px);
  max-width: 40rem;
  border-top: 2px solid var(--dark);
}
.hours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 0.7em 0;
  border-bottom: 2px solid var(--dark);
  font-size: clamp(16px, 1.5vw, 28px);
}
.hours dt { font-weight: 500; }
.hours dd { color: var(--brown); }

.visit-address {
  margin-top: clamp(20px, 2vw, 36px);
  font-style: normal;
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  align-items: flex-start;
}
.visit-maps { color: var(--dark); text-underline-offset: 0.18em; }

.visit-contact {
  margin-top: clamp(24px, 2.6vw, 48px);
  font-size: clamp(16px, 1.3vw, 24px);
  line-height: 1.35;
  max-width: 40ch;
  color: var(--brown);
}
.visit-contact a { color: var(--dark); text-underline-offset: 0.18em; }

/* ==================================================================
   MEMBER
================================================================== */

.member {
  background: var(--peach-light);
  color: var(--dark);
  padding: clamp(64px, 7vw, 130px) var(--gutter) clamp(72px, 8vw, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.member-bowl {
  width: clamp(180px, 22vw, 380px);
  height: auto;
  rotate: 6deg;
  filter: drop-shadow(0 26px 34px rgba(43, 29, 20, 0.22));
  transform-origin: 50% 50%;
}
.member-title {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 170px);
  line-height: 0.9;
}
.member-copy {
  margin-top: clamp(20px, 2vw, 40px);
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1.3;
  max-width: 44ch;
}
.member-form {
  margin-top: clamp(32px, 3.5vw, 64px);
  width: 100%;
  max-width: 40rem;
  text-align: left;
}
.member-label {
  display: block;
  font-size: clamp(14px, 1.1vw, 20px);
  margin-bottom: 0.5em;
}
.member-field {
  display: flex;
  border: 2px solid var(--dark);
}
.member-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.75em 0.9em;
  font: inherit;
  font-size: clamp(16px, 1.4vw, 26px);
  color: var(--dark);
}
.member-field input::placeholder { color: rgba(43, 29, 20, 0.5); }
.member-field input:focus-visible { outline-offset: -3px; }
.member-field .button {
  flex: 0 0 auto;
  padding: 0 1.4em;
  font-size: clamp(16px, 1.4vw, 26px);
}
.member-field .button:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--peach-light);
  position: relative;
  z-index: 1;
}
.member-field .button:disabled { cursor: default; opacity: 0.7; }
.member-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--brown); }
.member-error {
  margin-top: 0.6em;
  font-size: clamp(14px, 1.1vw, 20px);
  color: var(--brown);
}
.member-result {
  padding: 0.75em 0.9em;
  border: 2px solid var(--dark);
  font-size: clamp(16px, 1.4vw, 26px);
}
.member-result:focus { outline: none; }
.member-fine {
  margin-top: 0.8em;
  font-size: clamp(14px, 1.1vw, 20px);
  color: var(--brown);
}

/* ==================================================================
   FOOTER
================================================================== */

.footer {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(56px, 6vw, 120px) var(--gutter) clamp(28px, 3vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: clamp(28px, 3vw, 56px);
  align-items: end;
  overflow: hidden;
}
.footer-word {
  grid-column: 1 / -1;
  display: block;
}
.footer-word img {
  width: 100%;
  height: auto;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.6em;
  font-size: clamp(16px, 1.3vw, 24px);
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.footer-fine {
  font-size: clamp(13px, 1vw, 18px);
  color: var(--peach-light);
  text-align: right;
}

/* ==================================================================
   SCROLL MOTION
   The same four moves as the hero: drop, pop, rise, draw.
   Plus the clean word fade-up for paragraphs.
================================================================== */

.js [data-in] {
  transition-delay: var(--d, 0ms);
}
.js [data-in="rise"]:not(.is-in) { will-change: transform, opacity; }

.js [data-in="drop"] {
  opacity: 0;
  translate: 0 -72px;
  transition: opacity var(--t-drop) var(--ease-drop), translate var(--t-drop) var(--ease-drop);
}
.js [data-in="pop"] {
  opacity: 0;
  scale: 0.08;
  transform-origin: 0 50%;
  transition: opacity var(--t-pop) var(--ease-pop), scale var(--t-pop) var(--ease-pop);
}
.js [data-in="rise"] {
  opacity: 0;
  translate: 0 45%;
  scale: 0.01;
  transition:
    opacity 1066ms var(--ease-rise),
    translate var(--t-rise) var(--ease-rise),
    scale var(--t-rise) var(--ease-rise);
}
.js [data-in="line"] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-draw) var(--ease-draw);
}
.js .member-bowl[data-in="pop"],
.js .member-bowl { transform-origin: 50% 50%; }

.js .is-in[data-in="drop"] { opacity: 1; translate: 0 0; }
.js .is-in[data-in="pop"] { opacity: 1; scale: 1; }
.js .is-in[data-in="rise"] { opacity: 1; translate: 0 0; scale: 1; }
.js .is-in[data-in="line"] { transform: scaleX(1); }

.js [data-words] .w {
  display: inline-block;
  opacity: 0;
  translate: 0 0.55em;
  transition: opacity 700ms var(--ease-drop), translate 700ms var(--ease-drop);
  transition-delay: calc(var(--i) * 32ms);
}
.js [data-words].is-in .w { opacity: 1; translate: 0 0; }

/* ==================================================================
   SMALL SCREENS
   The hero re-flows; the cup stage keeps its own geometry.
================================================================== */

@media (max-width: 820px) {
  :root { --nav-h: 120px; }

  .hero-frame {
    aspect-ratio: auto;
    height: auto;
    padding: var(--nav-h) 0 40px;
    display: flex;
    flex-direction: column;
  }
  .hero-title { order: 1; }
  .cup-stage { order: 2; }
  .hero-line { order: 3; }
  .hero-hours { order: 4; }
  .hero-button { order: 5; align-self: flex-start; }

  .hero-nav {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 12px 16px;
    gap: 16px;
  }
  .logo {
    position: relative;
    left: auto; top: auto;
    width: 86px;
    height: 96px;
    --u: 0.628px; /* 86 / 137 */
    transform: none;
  }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgb(255, 214, 180);
    border-bottom: 1px solid rgba(138, 75, 42, 0.25);
    padding: 4px 20px 12px;
  }
  .nav-links.is-open { display: flex; }
  .nav-link {
    font-size: 17px;
    padding: 12px 0;
    border-top: 1px solid rgba(138, 75, 42, 0.18);
  }

  .hero-title {
    display: block;
    padding: 28px 20px 0;
  }
  .beans {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .beans-marlows { aspect-ratio: 1408 / 470; object-fit: cover; }
  .beans-coffee { aspect-ratio: 2011 / 782; margin-top: 6px; }

  .cup-stage {
    --s: calc(1cqw / 15.2484);
    position: relative;
    left: auto; right: auto; top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1524.84 / 1526.4;
    margin-top: -6%;
  }

  .hero-line {
    position: relative;
    left: auto; top: auto;
    margin: 12px 20px 0;
    font-size: 18px;
    white-space: normal;
  }
  .hero-line br { display: none; }
  .hero-hours {
    position: relative;
    left: auto; top: auto;
    margin: 10px 20px 0;
    font-size: 16px;
    white-space: normal;
  }
  .hero-button {
    position: relative;
    left: auto; top: auto;
    margin: 24px 20px 0;
    width: auto;
    height: auto;
    padding: 14px 24px;
    font-size: 17px;
    display: inline-flex;
  }

  .statement {
    padding: 64px 20px 72px;
  }
  .statement-title { font-size: clamp(64px, 19vw, 150px); }
  .statement-copy {
    width: auto;
    margin-top: 32px;
    font-size: 17px;
    line-height: 1.35;
  }

  .menu { grid-template-columns: 1fr; padding-right: var(--gutter); }
  .menu-art {
    position: relative;
    top: auto;
    order: -1;
    margin: 0 0 8px;
    width: 100%;
  }
  .menu-art { justify-content: flex-end; }
  .menu-disc { width: 56%; }

  .roast {
    grid-template-columns: 1fr;
    padding-left: var(--gutter);
  }
  .roast-text { order: 1; }
  .roast-art { order: 2; margin-top: 24px; padding-left: 0; }

  .visit { grid-template-columns: 1fr; }
  .visit-art {
    height: auto;
    width: 62%;
    justify-self: end;
    margin-bottom: 24px;
  }

  .footer { grid-template-columns: 1fr; }
  .footer-fine { text-align: left; }
}

/* Narrow phones: menu rows stack, price under the name. */
@media (max-width: 480px) {
  .menu-row {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "price" "notes";
    row-gap: 0.45em;
  }
  .menu-price {
    flex-direction: row;
    align-items: baseline;
    gap: 1.2em;
    padding-top: 0;
  }
}

/* ==================================================================
   REDUCED MOTION
================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-nav,
  .js .beans-marlows,
  .js .beans-coffee,
  .js .hero-line,
  .js .hero-hours,
  .js .hero-button,
  .js .cup-group { opacity: 1; animation: none !important; }
  .js .ring path { stroke-dasharray: 1 1; animation: none !important; }
  .js [data-in],
  .js [data-words] .w {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transform: none;
    transition: none;
  }
}