/* Rice District: the bowl builds itself. Red + charcoal, condensed street-sign type. */
:root {
  --rd-bg: #0d0b0b;
  --rd-raised: #171313;
  --rd-line: #2c2525;
  --rd-paper: #f3ece6;
  --rd-muted: #b3a7a0;
  --rd-red: #d7261e;
  --rd-red-deep: #9e1712;
  --rd-rice: #efe4cf;
  --rd-green: #4f8a45;
  --rd-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --rd-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --rd-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; background: var(--rd-bg); }
body {
  background: var(--rd-bg);
  color: var(--rd-paper);
  font-family: var(--rd-body);
  -webkit-font-smoothing: antialiased;
}
.rd-site { position: relative; overflow-x: clip; }

.rd-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
:where(.rd-site) a:focus-visible,
:where(.rd-site) button:focus-visible { outline: 3px solid var(--rd-red); outline-offset: 4px; }
section[id], article[id] { scroll-margin-top: 4.5rem; }

/* nav */
.rd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.25rem;
  padding: env(safe-area-inset-top) max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
  transition: background 0.4s var(--rd-ease), border-color 0.4s var(--rd-ease);
  border-bottom: 1px solid transparent;
  animation: rd-drop-in 0.9s var(--rd-ease) both;
}
.rd-nav[data-solid="true"] {
  background: color-mix(in srgb, var(--rd-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-color: var(--rd-line);
}
.rd-logo {
  font-family: var(--rd-display);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--rd-paper);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.rd-logo b, .rd-footer__mark b { color: var(--rd-red); font-weight: 900; }
.rd-nav__links { display: flex; gap: 1.75rem; margin-left: auto; }
.rd-nav__links a {
  font-family: var(--rd-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-muted);
  text-decoration: none;
  position: relative;
}
.rd-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 2px;
  background: var(--rd-red); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--rd-ease);
}
.rd-nav__links a:hover { color: var(--rd-paper); }
.rd-nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.rd-navorder {
  font: 700 0.95rem var(--rd-body);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--rd-paper);
  color: var(--rd-bg);
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.rd-navorder:hover { background: var(--rd-red); color: var(--rd-paper); }
.rd-navorder:active { transform: scale(0.97); }
@media (max-width: 760px) { .rd-nav__links { display: none; } }
@keyframes rd-drop-in { from { transform: translateY(-110%); } to { transform: none; } }

/* journey overrides */
.rd-journey .scroll-scrub__title {
  font-family: var(--rd-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.86;
  font-size: clamp(3.4rem, 8.5vw, 8.5rem);
  max-width: 11ch;
}
.rd-journey #riisi-ensin .scroll-scrub__title { font-size: clamp(4.5rem, 13vw, 12rem); }
.rd-journey #riisi-ensin .scroll-scrub__title,
.rd-journey #the-original .scroll-scrub__title { animation: rd-title-in 1.1s var(--rd-ease) both; }
@keyframes rd-title-in { from { transform: translateY(0.35em) skewY(4deg); } to { transform: none; } }
.rd-journey .scroll-scrub__kicker { font-family: var(--rd-mono); font-weight: 500; }
.rd-journey .scroll-scrub__body { color: var(--rd-paper); opacity: 0.86; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.rd-journey .scroll-scrub__tags li {
  font-family: var(--rd-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem;
  border-color: var(--rd-red); color: var(--rd-paper); border-radius: 999px;
}
.rd-journey .scroll-scrub__route { top: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); justify-content: flex-start; }
.rd-journey .scroll-scrub__route-button { font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rd-journey .scroll-scrub__progress span { background: var(--rd-red); }

/* CTAs: each its own garment */
.rd-wolt {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--rd-red); color: var(--rd-paper);
  font: 700 1.05rem var(--rd-body);
  border-radius: 999px;
  text-decoration: none;
  transform: translate(var(--mx), var(--my));
  transition: transform 0.35s var(--rd-ease), background 0.2s, box-shadow 0.3s;
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--rd-red) 70%, transparent);
}
.rd-wolt:hover { background: var(--rd-red-deep); }
.rd-wolt:active { transform: translate(var(--mx), calc(var(--my) + 1px)) scale(0.98); }
.rd-wolt__arrow { display: inline-block; transition: transform 0.35s var(--rd-ease); }
.rd-wolt:hover .rd-wolt__arrow { transform: translateX(0.35rem); }
.rd-wolt--big { padding: 1.35rem 2.1rem; font-size: 1.25rem; }

.rd-uber {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  padding: calc(1rem - 2px) calc(1.5rem - 2px);
  border: 2px solid var(--rd-paper);
  color: var(--rd-paper);
  font: 700 1.05rem var(--rd-body);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.35s var(--rd-ease);
}
.rd-uber::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rd-paper);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--rd-ease);
}
.rd-uber:hover { color: var(--rd-bg); }
.rd-uber:hover::before { transform: scaleX(1); }
.rd-uber:active { transform: translateY(1px); }
.rd-uber--big { padding: calc(1.35rem - 2px) calc(2.1rem - 2px); font-size: 1.25rem; }

.rd-menujump {
  align-self: center;
  color: var(--rd-paper); font: 600 1.05rem var(--rd-body); text-decoration: none;
  background: linear-gradient(var(--rd-red), var(--rd-red)) left bottom / 0% 2px no-repeat;
  padding-bottom: 0.2rem;
  transition: background-size 0.4s var(--rd-ease);
}
.rd-menujump:hover { background-size: 100% 2px; }

/* type helpers */
.rd-h2 {
  font-family: var(--rd-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 7vw, 6.25rem);
  line-height: 0.88;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.rd-lead { max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--rd-muted); margin: 1.5rem 0 0; }
.rd-note { margin: 2rem 0 0; color: var(--rd-muted); font-size: 0.95rem; max-width: 65ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rd-rise { animation: rd-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes rd-rise { from { transform: translateY(18%) skewY(3deg); } to { transform: none; } }

/* marquee */
.rd-marquee { background: var(--rd-red); color: var(--rd-paper); overflow: hidden; contain: paint; }
.rd-marquee__track { display: flex; width: max-content; animation: rd-marquee 30s linear infinite; will-change: transform; backface-visibility: hidden; }
.rd-marquee__run { display: flex; flex-shrink: 0; }
.rd-marquee__item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding: 0.9rem 1.5rem 0.9rem 0;
  font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1; white-space: nowrap;
}
.rd-marquee__item i { font-style: normal; font-size: 0.55em; color: var(--rd-bg); }
@keyframes rd-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* menu index */
.rd-menu { padding-block: clamp(5rem, 10vw, 9rem); }
.rd-menu__list { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 2px solid var(--rd-paper); }
.rd-menu__row {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0.75rem;
  border-bottom: 1px solid var(--rd-line);
  transition: color 0.3s;
}
.rd-menu__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rd-red);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--rd-ease);
}
.rd-menu__row:hover::before { transform: scaleY(1); }
.rd-menu__n { font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-red); transition: color 0.3s; }
.rd-menu__name {
  margin: 0; font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: 0.9;
  transition: transform 0.45s var(--rd-ease);
}
.rd-menu__row:hover .rd-menu__name { transform: translateX(0.75rem); }
.rd-menu__desc { margin: 0; color: var(--rd-muted); max-width: 44ch; transition: color 0.3s; }
.rd-menu__tag {
  font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border: 1px solid var(--rd-line); border-radius: 999px; color: var(--rd-muted); white-space: nowrap;
}
.rd-menu__row:hover .rd-menu__n,
.rd-menu__row:hover .rd-menu__desc,
.rd-menu__row:hover .rd-menu__tag { color: var(--rd-paper); border-color: var(--rd-paper); }
@media (max-width: 820px) {
  .rd-menu__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.5rem 1rem; }
  .rd-menu__desc { grid-column: 2 / -1; }
}

/* sauces */
.rd-sauces { padding-top: clamp(4rem, 8vw, 7rem); }
.rd-sauces > .rd-wrap { margin-bottom: 3rem; }
.rd-sauce { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
.rd-sauce--white { background: var(--rd-rice); color: var(--rd-bg); }
.rd-sauce--hot { background: var(--rd-red); color: var(--rd-paper); }
.rd-sauce--green { background: var(--rd-green); color: var(--rd-paper); }
.rd-sauce__word {
  margin: 0; white-space: nowrap;
  font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(6rem, 20vw, 18rem); line-height: 0.8;
  opacity: 0.16;
  position: absolute; top: 50%; left: 0; translate: 0 -50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rd-sauce__word { animation: rd-slide-l linear both; animation-timeline: view(); }
    .rd-sauce--hot .rd-sauce__word { animation-name: rd-slide-r; }
  }
}
@keyframes rd-slide-l { from { transform: translateX(0); } to { transform: translateX(-35%); } }
@keyframes rd-slide-r { from { transform: translateX(-35%); } to { transform: translateX(0); } }
.rd-sauce__copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.rd-sauce__copy h3 {
  margin: 0; font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7rem); line-height: 0.85;
}
.rd-sauce__copy p { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 36ch; font-weight: 500; }
@media (max-width: 720px) { .rd-sauce__copy { grid-template-columns: 1fr; gap: 1rem; } }

/* drops */
.rd-drops { padding-block: clamp(5rem, 10vw, 9rem); }
.rd-drops__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.rd-insta {
  display: inline-flex; gap: 0.5rem; margin-top: 2rem;
  font: 700 1.1rem var(--rd-body); color: var(--rd-paper); text-decoration: none;
  border-bottom: 2px solid var(--rd-red); padding-bottom: 0.25rem;
}
.rd-insta span { transition: transform 0.35s var(--rd-ease); }
.rd-insta:hover span { transform: translate(0.2rem, -0.2rem); }
.rd-drops__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rd-ticket {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px dashed var(--rd-line);
  border-radius: 14px;
  background: var(--rd-raised);
  transition: transform 0.45s var(--rd-ease), border-color 0.3s;
}
.rd-ticket:hover { transform: rotate(-1.2deg) translateX(-0.4rem); border-color: var(--rd-red); }
.rd-ticket--live { background: var(--rd-red); border: 1px solid var(--rd-red); }
.rd-ticket--locked { opacity: 0.7; }
.rd-ticket__n, .rd-ticket__state { font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-muted); }
.rd-ticket--live .rd-ticket__n, .rd-ticket--live .rd-ticket__state { color: var(--rd-paper); }
.rd-ticket__name { font-family: var(--rd-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3.5vw, 2.75rem); line-height: 1; }
.rd-ticket__name--secret { color: var(--rd-red); font-variant-numeric: tabular-nums; min-width: 7ch; }
@media (max-width: 860px) { .rd-drops__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rd-ticket { grid-template-columns: minmax(0, 1fr) auto; } .rd-ticket__n { grid-column: 1 / -1; } }

/* finale */
.rd-finale {
  padding-block: clamp(5rem, 12vw, 10rem);
  background: radial-gradient(ellipse 70% 60% at 50% 60%, color-mix(in srgb, var(--rd-red) 30%, transparent), transparent 70%);
  border-top: 1px solid var(--rd-line);
}
.rd-finale__inner { display: grid; justify-items: center; text-align: center; }
.rd-finale__word {
  margin: 0; display: flex; justify-content: center;
  font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(5.5rem, 24vw, 21rem); line-height: 0.8; letter-spacing: -0.01em;
}
.rd-finale__word span { display: inline-block; }
.rd-finale__word span:nth-child(odd) { color: var(--rd-red); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rd-finale__word span {
      animation: rd-letter linear both; animation-timeline: view();
      animation-range: entry calc(var(--i) * 4%) cover calc(30% + var(--i) * 4%);
    }
  }
}
@keyframes rd-letter { from { transform: translateY(45%) rotate(-8deg) scale(0.85); } to { transform: none; } }
.rd-finale__sub { margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--rd-muted); }
.rd-finale__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }

/* contact + footer */
.rd-contact { padding-block: clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--rd-line); }
.rd-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 3rem 0 0; }
.rd-contact__grid > div { border-top: 1px solid var(--rd-line); padding-top: 1rem; min-width: 0; }
.rd-contact__grid dt { font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 0.5rem; }
.rd-contact__grid dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; }
.rd-plain { color: var(--rd-paper); text-decoration: none; border-bottom: 2px solid var(--rd-red); }
.rd-plain:hover { color: var(--rd-red); }
.rd-copy {
  font: 500 0.72rem var(--rd-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.65rem; border: 1px solid var(--rd-line); border-radius: 4px;
  background: transparent; color: var(--rd-muted); cursor: pointer;
}
.rd-copy:hover { border-color: var(--rd-paper); color: var(--rd-paper); }
.rd-copy__done, .rd-copy[data-done="true"] .rd-copy__idle { display: none; }
.rd-copy[data-done="true"] .rd-copy__done { display: inline; color: var(--rd-red); }
@media (max-width: 760px) { .rd-contact__grid { grid-template-columns: 1fr; } }
.rd-footer { border-top: 1px solid var(--rd-line); overflow: hidden; }
.rd-footer__inner { padding-block: 2rem 2.5rem; }
.rd-footer__mark {
  margin: 0; font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4rem, 17vw, 16rem); line-height: 0.8; white-space: nowrap;
}
.rd-footer__legal { margin: 1.5rem 0 0; color: var(--rd-muted); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rd-nav, .rd-journey .scroll-scrub__title { animation: none !important; }
  .rd-marquee__track { animation: none; }
  .rd-wolt, .rd-uber, .rd-uber::before, .rd-menu__row::before, .rd-menu__name, .rd-ticket { transition: none; }
}

/* hero film: plays once on load, holds the finished dish */
.rd-hero { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.rd-hero__media, .rd-hero__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-hero__media { z-index: -2; background: var(--rd-bg); }
.rd-hero__end { opacity: 0; }
.rd-hero__video { opacity: 0; transition: opacity 0.4s ease; }
.rd-hero[data-state="playing"] .rd-hero__video,
.rd-hero[data-state="ended"] .rd-hero__video { opacity: 1; }
.rd-hero[data-state="still"] .rd-hero__end { opacity: 1; }
.rd-hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rd-bg) 88%, transparent) 0%, color-mix(in srgb, var(--rd-bg) 45%, transparent) 38%, transparent 62%),
    linear-gradient(0deg, var(--rd-bg) 0%, transparent 22%);
}
.rd-hero__copy { padding-block: 7rem 5rem; }
.rd-hero__kicker {
  margin: 0 0 1.25rem; font-family: var(--rd-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-red);
  animation: rd-up 0.8s var(--rd-ease) 0.2s both;
}
.rd-hero__title {
  margin: 0; font-family: var(--rd-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4.5rem, 13vw, 12rem); line-height: 0.84; letter-spacing: -0.005em; max-width: 7ch;
}
.rd-hero__title span { display: inline-block; animation: rd-title-in 1.1s var(--rd-ease) both; }
.rd-hero__title span + span { color: var(--rd-red); animation-delay: 0.18s; }
.rd-hero__body {
  max-width: 34ch; margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5;
  animation: rd-up 0.9s var(--rd-ease) 0.45s both;
}
.rd-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; animation: rd-up 0.9s var(--rd-ease) 0.6s both; }
@keyframes rd-up { from { transform: translateY(1.25rem); } to { transform: none; } }
.rd-replay {
  position: absolute; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom));
  font: 500 0.72rem var(--rd-mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--rd-paper) 35%, transparent);
  background: color-mix(in srgb, var(--rd-bg) 55%, transparent); backdrop-filter: blur(8px);
  color: var(--rd-paper);
  transform: translateY(150%); visibility: hidden;
  transition: transform 0.5s var(--rd-ease), border-color 0.2s;
}
.rd-replay:hover { border-color: var(--rd-red); }
.rd-hero[data-state="ended"] .rd-replay { transform: none; visibility: visible; }
@media (max-width: 860px), (max-aspect-ratio: 5/4) {
  .rd-hero { display: block; min-height: 0; padding-top: 4.25rem; }
  .rd-hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; }
  .rd-hero__shade { top: 4.25rem; bottom: auto; height: calc(100vw * 9 / 16); background: linear-gradient(0deg, var(--rd-bg) 0%, transparent 28%); }
  .rd-hero__copy { padding-block: 1.5rem 4.5rem; }
  .rd-hero__title { font-size: clamp(3.75rem, 17vw, 7rem); }
  .rd-replay { bottom: auto; top: calc(4.25rem + 100vw * 9 / 16 - 3.25rem); }
}

/* build steps */
.rd-build { padding-block: clamp(5rem, 10vw, 9rem); }
.rd-build__list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rd-step { display: grid; gap: 0.6rem; align-content: start; }
.rd-step__img { margin: 0 0 0.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--rd-raised); max-width: 100%; }
.rd-step__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--rd-ease); }
.rd-step:hover .rd-step__img img { transform: scale(1.06); }
.rd-step__n { font-family: var(--rd-mono); font-size: 0.78rem; color: var(--rd-red); }
.rd-step h3 { margin: 0; font-family: var(--rd-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 0.95; }
.rd-step p { margin: 0; color: var(--rd-muted); max-width: 32ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rd-step { animation: rd-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) cover calc(30% + var(--i) * 6%); }
  }
}
@media (max-width: 900px) { .rd-build__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rd-build__list { grid-template-columns: 1fr; } .rd-step__img { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) {
  .rd-hero__title span, .rd-hero__kicker, .rd-hero__body, .rd-hero__ctas { animation: none; }
  .rd-replay, .rd-step__img img { transition: none; }
}
@media (min-width: 861px) and (min-aspect-ratio: 5/4) {
  .rd-hero__media > * {
    transform: translateX(16%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
}

/* still hero photo (replaces the film) */
.rd-hero__media--still { display: flex; align-items: center; justify-content: flex-end; }
.rd-hero__media--still .rd-hero__dish { position: static; width: min(58vw, 860px); height: auto; object-fit: contain; margin-right: 3vw; animation: rd-up 0.9s var(--rd-ease) 0.2s both; }
@media (max-width: 860px) {
  .rd-hero__media--still { aspect-ratio: auto; justify-content: center; padding: 1rem 1.25rem 0; }
  .rd-hero__media--still .rd-hero__dish { width: min(100%, 560px); margin: 0; }
}

/* locations */
.rd-locs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2.5rem 0; }
@media (max-width: 720px) { .rd-locs { grid-template-columns: 1fr; } }
.rd-loc { border: 1px solid var(--rd-line); border-radius: 16px; background: var(--rd-raised); padding: 1.5rem; }
.rd-loc h3 { font-family: var(--rd-display); font-weight: 900; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.rd-loc__area { color: var(--rd-muted); margin-top: 0.35rem; }
.rd-hours { margin-top: 1rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rd-hours th { text-align: left; font: 500 0.8rem var(--rd-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); padding: 0.25rem 1.5rem 0.25rem 0; }
.rd-hours td { font-weight: 600; padding: 0.25rem 0; }
@media (max-width: 860px) { .rd-hero[data-state="still"] .rd-hero__shade { display: none; } }
@media (max-width: 860px) {
  .rd-hero .rd-hero__media.rd-hero__media--still { position: relative; inset: auto; height: auto; aspect-ratio: auto; overflow: visible; padding: 1.25rem 1.25rem 0; }
  .rd-hero .rd-hero__media--still .rd-hero__dish { position: relative; inset: auto; width: min(92%, 520px); height: auto; margin: 0 auto; }
}