/* Birria, all afternoon. Page styles. The engine (scrollcraft.css) is not
   edited; everything here themes tokens or styles this page's own markup. */

:root {
  --sc-canvas:      #0C0709;
  --sc-surface:     #171012;
  --sc-ink:         #F4E9DC;
  --sc-ink-soft:    #B3A497;
  --sc-accent:      #A12E4A;
  --sc-accent-ink:  #F4E9DC;
  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Inter", system-ui, sans-serif;
  --sc-shadow-color: 345 45% 3%;
  --sc-r-sm: 4px; --sc-r-md: 10px; --sc-r-lg: 18px;
}

/* Light type on a dark ground: a touch more leading and tracking, one step
   more weight (taste.md). */
body { font-weight: 400; }
.sc-display { font-weight: 500; letter-spacing: -0.02em; }
.sc-display--xl { letter-spacing: -0.025em; line-height: 0.98; }
.sc-lede { line-height: 1.5; letter-spacing: -0.005em; }
.sc-body { line-height: 1.68; letter-spacing: 0.002em; }
.sc-label { font-family: var(--sc-font-text); font-weight: 500; letter-spacing: 0.14em; font-size: var(--sc-t-xs); }

/* ------------------------------------------------------------- the bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -3rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
}
.bar > * { pointer-events: auto; }
.bar__mark {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg);
  letter-spacing: -0.01em; text-decoration: none; color: var(--sc-ink);
}
.bar__mark img { border-radius: 7px; box-shadow: var(--sc-e1); }

/* ----------------------------------------------------------------- CTA -- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.cta--sm { padding: 0.62rem 1.05rem; font-size: var(--sc-t-sm); }
.cta--lg { padding: 1rem 1.7rem; font-size: var(--sc-t-base); border-radius: var(--sc-r-md); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #B0364F; box-shadow: var(--sc-e3), var(--sc-edge); }
}
.cta:active { transform: translateY(1px) scale(0.985); }
.cta:focus-visible { outline-color: var(--sc-ink); }

/* ---------------------------------------------------------- 1 · hero -- */
.hero__stage { background: var(--sc-canvas); }
.plane { position: absolute; inset: 0; will-change: transform; }
.plane img, .plane picture { position: absolute; max-width: none; }
.plane--back picture, .plane--back img {
  inset: -7% -4%; width: 108%; height: 114%;
  object-fit: cover; object-position: 50% 60%;
}
/* the chiles sit on the counter in front of the pot, left of centre */
.plane--chiles img {
  left: clamp(4rem, 17vw, 20rem); bottom: 1vh;
  width: clamp(15rem, 24vw, 27rem); height: auto;
  filter: drop-shadow(0 18px 22px rgba(10, 4, 6, 0.55));
}
/* the foreground plane is nearest: bigger, softer, partly off the frame,
   and above the copy layer so it can occlude */
.plane--fore { z-index: 25; pointer-events: none; }
.plane--fore img {
  right: -6vw; bottom: -12vh;
  width: clamp(20rem, 38vw, 40rem); height: auto;
  filter: blur(2.5px) drop-shadow(0 30px 40px rgba(10, 4, 6, 0.6));
  transform: rotate(-8deg);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom right,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 26%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 46%,
      transparent 66%);
}
.hero__copy {
  left: var(--sc-gutter); top: clamp(6rem, 13vh, 10rem); bottom: auto;
  max-width: min(52rem, 80vw);
}
.hero__copy .sc-label { margin: 0 0 var(--sc-5); color: color-mix(in oklab, var(--sc-ink) 70%, var(--sc-accent)); }
.hero__copy h1 { max-width: 12ch; }
.hero__copy .sc-lede { margin-top: var(--sc-6); max-width: 42ch; }
/* Planes travel past the stage floor and get clipped there. Fade the last
   of the frame into the ground so the clip line never shows. */
.stage-floor {
  position: absolute; inset: auto 0 0 0; height: 24vh; z-index: 30; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas));
}

/* ----------------------------------------------------- 2 · the chiles -- */
/* A flow act right after a pinned one: the stage needs a viewport to leave,
   so this section takes less padding on top. */
.chiles { padding-top: clamp(2rem, 4vw, 4rem); }
.chiles__grid {
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.chiles__fig { margin: 0; }
.chiles__fig img { width: 100%; height: auto; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e3); }
.chiles__fig figcaption { margin-top: var(--sc-4); text-transform: none; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.chiles__copy { padding-right: clamp(0rem, 4vw, 5rem); }

/* --------------------------------------------------------- 3 · sear -- */
.sear .sc-copy--trail h2 { max-width: 15ch; margin-left: auto; }
.sear .sc-copy--trail .sc-lede { margin-top: var(--sc-5); max-width: 32ch; margin-left: auto; }

/* --------------------------------------------------------- 4 · wait -- */
.wait__stage { background: transparent; }
.wait__lines { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--sc-gutter); }
.wait__line { grid-area: 1 / 1; text-align: center; max-width: 30ch; }
.wait__line.sc-lede { max-width: 40ch; color: var(--sc-ink-soft); margin-top: 26vh; }
/* the pot is below the fold; its heat comes up through the floor as the act runs */
.wait__ember {
  position: absolute; inset: auto -20% -30% -20%; height: 70vh; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in oklab, var(--sc-accent) 55%, #3a1006), transparent 70%);
  opacity: calc(0.15 + var(--sc-p, 0) * 0.55);
}

/* --------------------------------------------- 5 · the peak: the lid -- */
/* Frame geometry for a 16:9 cover-fit clip. --fh is the rendered frame height,
   --fy its top offset, so the lid can be placed in frame units and stay glued
   to the pot at every viewport size. */
.peak {
  --fh: max(100svh, 56.25vw);
  --fy: calc((100svh - var(--fh)) / 2);
  --lid: clamp(0, calc(var(--sc-p, 0) / 0.42), 1);
  --stm: clamp(0, calc((var(--sc-p, 0) - 0.16) / 0.42), 1);
  --sc-vel: 0;
}
.lid {
  position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: calc(var(--fy) + var(--fh) * 0.05);
  width: calc(var(--fh) * 1.60); height: auto; max-width: none;
  translate: -50% 0;
  transform-origin: 82% 40%;
  transform:
    translate3d(calc(var(--lid) * 6vw), calc(var(--lid) * var(--lid) * -130vh), 0)
    rotate(calc(var(--lid) * -16deg));
  filter: drop-shadow(0 40px 60px rgba(8, 3, 4, 0.7));
  will-change: transform;
}
.steam { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: clip; }
.steam i {
  position: absolute; display: block; border-radius: 50%;
  left: 50%; top: calc(var(--fy) + var(--fh) * 0.34);
  width: calc(var(--fh) * 0.9); height: calc(var(--fh) * 0.5);
  background: radial-gradient(closest-side, rgba(244, 233, 220, 0.55), rgba(244, 233, 220, 0.12) 55%, transparent 75%);
  filter: blur(22px);
  opacity: calc(var(--stm) * (0.5 + var(--sc-vel) * 0.5));
  translate: -50% -50%;
  animation: steam 9s var(--sc-ease-in-out) infinite;
  animation-play-state: paused;
  mix-blend-mode: screen;
}
.peak.is-live .steam i { animation-play-state: running; }
.steam i:nth-child(2) { animation-delay: -3s; animation-duration: 11s; width: calc(var(--fh) * 0.6); left: 42%; }
.steam i:nth-child(3) { animation-delay: -6s; animation-duration: 8s;  width: calc(var(--fh) * 0.7); left: 58%; }
.steam i:nth-child(4) { animation-delay: -1.5s; animation-duration: 13s; width: calc(var(--fh) * 1.1); top: calc(var(--fy) + var(--fh) * 0.28); }
@keyframes steam {
  0%   { transform: translate3d(0, 8vh, 0) scale(0.8); }
  50%  { transform: translate3d(2vw, -14vh, 0) scale(1.08); }
  100% { transform: translate3d(-1vw, -38vh, 0) scale(1.25); opacity: 0; }
}
.peak__scrim {
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 0%, transparent 46%),
    linear-gradient(to bottom left,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 28%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 50%,
    transparent 70%);
  opacity: calc(var(--stm));
}
.peak__copy {
  inset-inline: auto; right: var(--sc-gutter); top: clamp(6.5rem, 15vh, 11rem); bottom: auto;
  text-align: right; max-width: min(44rem, 80vw);
}
.peak__copy .sc-lede { margin-top: var(--sc-5); max-width: 34ch; margin-left: auto; }

/* -------------------------------------------------------- 6 · serve -- */
.serve__stage { display: flex; align-items: center; }
.rail { align-items: flex-end; gap: clamp(2rem, 5vw, 6rem); padding-inline: var(--sc-gutter); }
.rail__lead { flex: 0 0 auto; width: clamp(20rem, 32vw, 34rem); padding-bottom: 4.5rem; }
.rail__lead .sc-body { max-width: 40ch; }
.rail__tail { flex: 0 0 auto; width: clamp(18rem, 26vw, 28rem); padding-bottom: 4.5rem; }
.rail__tail .sc-lede { margin-top: var(--sc-3); color: var(--sc-ink-soft); }
.dish { flex: 0 0 auto; width: clamp(15rem, 22vw, 22rem); }
.dish__img { border-radius: var(--sc-r-sm); overflow: clip; box-shadow: var(--sc-e3); }
.dish__img img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.dish__name {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl);
  letter-spacing: -0.015em; margin: var(--sc-5) 0 0;
}
.dish__note { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; text-wrap: pretty; }
/* items settle in sequence as the rail is pulled; the lead is exempt */
@media (prefers-reduced-motion: no-preference) {
  .dish, .rail__tail { opacity: calc(0.55 + 0.45 * clamp(0, calc((var(--sc-p, 0) - var(--at)) / 0.18), 1)); }
  .dish:nth-of-type(1) { --at: 0.02; }
  .dish:nth-of-type(2) { --at: 0.22; }
  .dish:nth-of-type(3) { --at: 0.42; }
  .rail__tail { --at: 0.6; }
}

/* -------------------------------------------------------- 7 · close -- */
.close__stage { display: grid; grid-template-rows: 1fr auto; }
.close__inner {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 8rem var(--sc-gutter) 0;
  display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.close__copy .sc-lede { margin-top: var(--sc-5); max-width: 36ch; }
.close__copy .cta { margin-top: var(--sc-7); }
.phone { justify-self: center; width: clamp(14rem, 22vw, 18rem); height: min(62vh, 36rem); position: relative; }
.phone__screen {
  position: absolute; inset: 0; overflow: clip;
  border-radius: 2.4rem; background: #1a1416;
  box-shadow: 0 30px 60px -20px hsl(var(--sc-shadow-color) / 0.8), 0 0 0 8px #100b0d, 0 0 0 9px #2a1e22, var(--sc-edge);
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4) var(--sc-6);
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: var(--sc-6) var(--sc-gutter) var(--sc-6);
  border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__brand { display: inline-flex; align-items: center; gap: var(--sc-2); color: var(--sc-ink); font-weight: 500; }
.foot__brand img { border-radius: 5px; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-5); }
.foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--sc-ink); text-decoration: underline; } }
.foot__small { margin: 0; flex-basis: 100%; font-size: var(--sc-t-xs); }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .lid, .steam { display: none; }
  .peak__scrim { opacity: 1; }
  .wait__ember { opacity: 0.4; }
  .plane--fore img { filter: blur(2.5px); }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .hero__copy { top: clamp(5.5rem, 12vh, 8rem); max-width: none; }
  .hero__copy h1 { font-size: var(--sc-t-2xl); max-width: none; }
  .hero__copy .sc-lede { font-size: var(--sc-t-base); max-width: 30ch; }
  .plane--back picture, .plane--back img { object-position: 50% 62%; }
  .plane--chiles img { left: -4vw; bottom: 12vh; width: 52vw; }
  .plane--fore img { right: -18vw; bottom: -6vh; width: 66vw; }
  .chiles__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .chiles__fig { max-width: 26rem; }
  .sear .sc-copy--trail h2, .sear .sc-copy--trail .sc-lede { margin-left: 0; }
  .sear h2 { font-size: var(--sc-t-2xl); }
  .wait__line.sc-display { font-size: var(--sc-t-xl); }
  .peak__copy { inset-inline: var(--sc-gutter); right: auto; text-align: left; top: clamp(5.5rem, 12vh, 8rem); }
  .peak__copy h2 { font-size: var(--sc-t-3xl); }
  .peak__copy .sc-lede { margin-left: 0; font-size: var(--sc-t-base); }
  .peak__scrim { background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 30%,
    transparent 62%); }
  /* Phone: the pot already overflows the 9:16 crop, so a full-size lid is a
     wall of clay. A smaller dome still exceeds the viewport width and reads
     as a lid because its curve and knob are in frame. */
  .lid { width: calc(var(--fh) * 1.05); top: calc(var(--fy) + var(--fh) * 0.22); transform-origin: 70% 40%; }
  .rail__lead { width: 76vw; padding-bottom: 2rem; }
  .rail__lead h2 { font-size: var(--sc-t-2xl); }
  .dish { width: 62vw; }
  .rail__tail { width: 70vw; padding-bottom: 2rem; }
  .close__inner { grid-template-columns: 1fr; gap: var(--sc-6); padding-top: 5.5rem; align-content: start; }
  .close__copy h2 { font-size: var(--sc-t-2xl); }
  .close__copy .cta { margin-top: var(--sc-6); }
  .phone { width: 11rem; height: 30svh; justify-self: start; }
  .phone__screen { border-radius: 1.6rem; }
  .foot { padding-block: var(--sc-5); gap: var(--sc-3) var(--sc-5); }
}
@media (max-width: 400px) {
  .phone { height: 24svh; }
  .close__inner { padding-top: 5rem; }
}