:root {
  --paper: #f5f2ea;
  --coal: #0f0f0f;
  --oxide: #b23a2e;

  --content-mobile: 342px;
  --content-desktop: 1200px;

  --page-padding: 24px;

  --font-display:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif;

  --font-body:
    "Barlow",
    "Segoe UI",
    Arial,
    sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--coal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--coal);
  color: var(--paper);
  transform: translateY(-160%);
}

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

.content-shell {
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--content-mobile)
  );
  margin-inline: auto;
}

/* ================================================================
   HEADER
   Center logo remains mathematically centered regardless of nav width.
   ================================================================ */

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  width: 100%;
  color: var(--coal);
}

.site-header__inner {
  display: grid;
  width: min(calc(100% - 32px), 358px);
  min-height: 122px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.brand {
  width: 180px;
  justify-self: center;
}

.header-hero-emblem-trigger {
  -webkit-appearance: none;
  appearance: none;

  padding: 0;
  border: 0;

  color: inherit;
  background: transparent;

  font: inherit;
  line-height: 0;

  cursor: pointer;
  touch-action: manipulation;

  scale: 1;

  transition:
    scale 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-hero-emblem-trigger[
  data-hero-emblem-feedback="pressed"
] {
  scale: 0.965;
}

@media (prefers-reduced-motion: reduce) {
  .header-hero-emblem-trigger {
    transition: none;
  }

  .header-hero-emblem-trigger[
    data-hero-emblem-feedback="pressed"
  ] {
    scale: 1;
  }
}

.brand img {
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav--left {
  justify-self: start;
}

.site-nav--right {
  justify-self: end;
}

.site-nav a {
  text-decoration: none;
}

.nav-desktop {
  display: none;
}

.site-nav a,
.footer-nav a,
.text-link {
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.footer-nav a:hover,
.text-link:hover {
  border-bottom-color: var(--oxide);
}

/* ================================================================
   SHARED
   ================================================================ */

.section {
  position: relative;
  overflow: hidden;
}

.section--light {
  background: var(--paper);
  color: var(--coal);
}

.section--dark {
  background: var(--coal);
  color: var(--paper);
}

.section--accent {
  background: var(--oxide);
  color: var(--paper);
}

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow--accent {
  color: var(--oxide);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
}

h1,
h2 {
  letter-spacing: -0.025em;
}

h1 {
  max-width: 330px;
  font-size: clamp(4.4rem, 20vw, 6rem);
}

h2 {
  font-size: clamp(3.1rem, 14.5vw, 4.6rem);
}

h1 span,
h2 span {
  color: var(--oxide);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--oxide);
  padding: 0 20px;
  background: var(--oxide);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.button--outline {
  border-color: var(--coal);
  background: transparent;
  color: var(--coal);
}

.button--outline-light {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

.button--inverse {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--coal);
}

.button:focus-visible,
.text-link:focus-visible,
.brand:focus-visible,
.site-nav a:focus-visible,
.footer-nav a:focus-visible,
.footer-brand:focus-visible {
  outline: 3px solid var(--oxide);
  outline-offset: 4px;
}

/* ================================================================
   01 — HERO
   ================================================================ */

.hero {
  min-height: 960px;
  padding-top: 160px;
}

.hero__content {
  position: relative;
  min-height: 800px;
}

.hero__copy {
  position: relative;
  z-index: 3;
}

.hero__intro {
  max-width: 315px;
  margin: 26px 0 30px;
  font-size: 1.05rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-crossroads-art {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.hero-crossroads-art img {
  display: block;
  width: min(100vw, 430px);
  max-width: none;
  height: auto;
}
/* ================================================================
   02 — EXPERIENCE + REVIEWS
   ================================================================ */

.experience {
  padding-block: 80px;
}

.editorial-grid {
  display: grid;
  gap: 58px;
}

.editorial-copy {
  display: grid;
  gap: 38px;
}

.editorial-copy > p:first-child {
  max-width: 31rem;
  margin: 0;
  font-size: 1.06rem;
}

.statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-transform: uppercase;
}

.statement span {
  color: var(--oxide);
}

.review-band {
  display: grid;
  margin-top: 76px;
  border-top: 1px solid rgb(245 242 234 / 28%);
  border-bottom: 1px solid rgb(245 242 234 / 28%);
  padding-block: 34px;
  gap: 26px;
}

.review-band__score {
  display: grid;
  gap: 7px;
}

.stars {
  color: var(--oxide);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.review-band__source {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.review-band__copy {
  max-width: 35rem;
  margin: 0;
  font-size: 1.1rem;
}

.review-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-themes span {
  border: 1px solid rgb(245 242 234 / 30%);
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ================================================================
   03 — FOOD + MENU
   ================================================================ */

.menu-section {
  padding-block: 80px 88px;
}

.section-heading {
  display: grid;
  gap: 22px;
}

.section-heading h2 {
  max-width: 760px;
}

.section-heading__copy {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
}

.food-pillars {
  display: grid;
  margin-top: 64px;
  border-top: 1px solid var(--coal);
}

.food-pillar {
  position: relative;
  display: grid;
  min-height: 180px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--coal);
}

.food-pillar__number {
  align-self: start;
  padding-top: 20px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.food-pillar h3 {
  font-size: 2.3rem;
}

.restaurant-cue {
  position: relative;
  width: 70px;
  height: 70px;
}

/* Temporary geometric restaurant language.
   Replace with approved SVG assets during polish phase. */

.restaurant-cue--plate {
  border: 2px solid var(--coal);
  border-radius: 50%;
}

.restaurant-cue--plate::after {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--coal);
  border-radius: 50%;
  content: "";
}

.restaurant-cue--wave::before,
.restaurant-cue--wave::after {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 22px;
  border-top: 2px solid var(--coal);
  border-radius: 50%;
  content: "";
}

.restaurant-cue--wave::before {
  top: 19px;
}

.restaurant-cue--wave::after {
  top: 35px;
}

.restaurant-cue--steam {
  border-bottom: 2px solid var(--coal);
}

.restaurant-cue--steam::before,
.restaurant-cue--steam::after {
  position: absolute;
  bottom: 12px;
  width: 20px;
  height: 50px;
  border-left: 2px solid var(--coal);
  border-radius: 50%;
  content: "";
}

.restaurant-cue--steam::before {
  left: 18px;
}

.restaurant-cue--steam::after {
  left: 38px;
}

.menu-status {
  max-width: 29rem;
  margin: 32px 0 0;
  font-size: 0.82rem;
  opacity: 0.58;
}

/* ================================================================
   04 — VISIT
   ================================================================ */

.visit {
  padding-block: 82px;
}

.visit-grid {
  display: grid;
  gap: 68px;
}

.visit-details {
  display: grid;
  gap: 34px;
}

.visit-detail {
  border-top: 1px solid rgb(245 242 234 / 28%);
  padding-top: 14px;
}

.visit-detail p,
.visit-detail address {
  margin: 0;
}

.visit-detail address {
  font-style: normal;
}

.visit-detail a {
  text-decoration: none;
}

.visit-detail__label {
  margin-bottom: 8px !important;
  color: var(--oxide);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.text-link {
  width: fit-content;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

/* ================================================================
   05 — CLOSING
   ================================================================ */

.closing {
  padding-block: 82px;
}

.closing__inner {
  display: grid;
  justify-items: start;
  gap: 32px;
}

.closing h2 span {
  color: var(--coal);
}

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

.site-footer {
  background: var(--coal);
  color: var(--paper);
}

.site-footer__inner {
  display: grid;
  min-height: 230px;
  align-content: center;
  gap: 26px;
}

.footer-brand {
  width: 132px;
}

.footer-brand img {
  width: 100%;
  filter: invert(1);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-nav a {
  text-decoration: none;
}

.site-footer__legal {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.62;
}

/* ================================================================
   DESKTOP
   ================================================================ */

@media (min-width: 900px) {
  :root {
    --page-padding: 48px;
  }

  .content-shell {
    width: min(
      calc(100% - (var(--page-padding) * 2)),
      var(--content-desktop)
    );
  }

  .site-header__inner {
    width: min(calc(100% - 96px), var(--content-desktop));
    min-height: 138px;
    gap: 32px;
  }

  .brand {
    width: 228px;
  }

  .nav-mobile {
    display: none;
  }

  .nav-desktop {
    display: inline;
  }

  .site-nav {
    gap: 30px;
    font-size: 0.83rem;
  }

  .hero {
    min-height: 760px;
    padding-top: 180px;
  }

  .hero__content {
    min-height: 580px;
  }

  h1 {
    max-width: 650px;
    font-size: clamp(7rem, 9vw, 9rem);
  }

  h2 {
    font-size: clamp(4.2rem, 5.2vw, 6rem);
  }

  .hero__intro {
    max-width: 450px;
    font-size: 1.13rem;
  }

  .hero-crossroads-art {
    top: 22px;
    right: -20px;
    bottom: auto;
    left: auto;
    width: min(42vw, 560px);
    align-items: flex-end;
  }

  .hero-crossroads-art img {
    width: 100%;
    max-width: none;
    height: auto;
  }
.experience,
  .menu-section,
  .visit {
    padding-block: 96px;
  }

  .editorial-grid,
  .visit-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 0.72fr);
    align-items: start;
    gap: 120px;
  }

  .review-band {
    grid-template-columns: 0.58fr 1.2fr auto;
    align-items: center;
    gap: 54px;
  }

  .food-pillars {
    grid-template-columns: repeat(3, 1fr);
  }

  .food-pillar {
    min-height: 260px;
    grid-template-columns: 1fr;
    align-content: space-between;
    border-right: 1px solid var(--coal);
    border-bottom: 1px solid var(--coal);
    padding: 24px;
  }

  .food-pillar:last-child {
    border-right: 0;
  }

  .food-pillar__number {
    padding-top: 0;
  }

  .food-pillar h3 {
    font-size: 2.6rem;
  }

  .restaurant-cue {
    justify-self: end;
    width: 86px;
    height: 86px;
  }

  .visit-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visit-actions {
    grid-column: 1 / -1;
  }

  .closing {
    padding-block: 92px;
  }

  .closing__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .closing__inner .eyebrow {
    grid-column: 1 / -1;
  }

  .closing__inner h2 {
    max-width: 780px;
  }

  .site-footer__inner {
    min-height: 190px;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    align-content: normal;
    gap: 40px;
  }
}

/* Motion is intentionally deferred until final polish. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* HERO SUN DESKTOP v0.1 */
@media (min-width: 900px) {
  .hero-crossroads-art::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -76px;
    left: 50%;
    width: 190px;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
      url("./assets/illustrations/hero/sun.svg")
      center / contain
      no-repeat;
    pointer-events: none;
  }

  .hero-crossroads-art img {
    position: relative;
    z-index: 1;
  }
}

/* HERO SUN SPRING SYSTEM DESKTOP v0.2 */
@media (min-width: 900px) {
  .hero-crossroads-art {
    --hero-sun-x: 0px;
    --hero-sun-y: 0px;
    --hero-sun-scale: 1;
    --hero-sun-rotation: 0deg;

    --hero-sunx-x: 0px;
    --hero-sunx-y: 0px;
    --hero-sunx-scale: 1;
    --hero-sunx-rotation: 0deg;
  }

  /*
   * Sun = slow floating anchor.
   *
   * The original 190px artwork and approved top position
   * remain unchanged. JavaScript updates only transform
   * variables, never layout geometry.
   */
  .hero-crossroads-art::before {
    z-index: 0;
    translate: none;
    animation: none;
    transform:
      translate3d(
        calc(-50% + var(--hero-sun-x)),
        var(--hero-sun-y),
        0
      )
      rotate(var(--hero-sun-rotation))
      scale(var(--hero-sun-scale));
    transform-origin: 50% 50%;
    will-change: transform;
  }

  /*
   * SunX = lighter particle attached to the Sun by an
   * invisible software spring.
   *
   * 132px -> 106px = approximately 20% smaller.
   */
  /* HERO EMBLEM CENTERED MORPH SHELL v0.1 */
  .hero-crossroads-emblem-shell {
position: absolute;
    z-index: 1;
    top: -34px;
    left: 50%;
    width: 106px;
    aspect-ratio: 1;
    background: none;
    translate: none;
    animation: none;
    transform:
      translate3d(
        calc(-50% + var(--hero-sunx-x)),
        var(--hero-sunx-y),
        0
      )
      rotate(var(--hero-sunx-rotation))
      scale(var(--hero-sunx-scale));
    transform-origin: 50% 50%;
    pointer-events: none;
    will-change: transform;
  }

  /*
   * Crossroads remains the immovable structural anchor.
   */
  .hero-crossroads-art img {
    position: relative;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crossroads-art {
    --hero-sun-x: 0px;
    --hero-sun-y: 0px;
    --hero-sun-scale: 1;
    --hero-sun-rotation: 0deg;

    --hero-sunx-x: 0px;
    --hero-sunx-y: 0px;
    --hero-sunx-scale: 1;
    --hero-sunx-rotation: 0deg;
  }

  .hero-crossroads-art::before,
  .hero-crossroads-emblem-shell {
    animation: none !important;
    will-change: auto;
  }
}

/* OPENTABLE REVIEW REEL STATIC DESKTOP v0.1 */

.review-reel {
  border-top: 1px solid rgba(245, 242, 234, 0.22);
  border-bottom: 1px solid rgba(245, 242, 234, 0.22);
}

.review-reel__source,
.review-reel__navigation {
  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;
}

.review-reel__rating {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.review-reel__stars {
  color: #b23a2e;
  font-size: 1.08rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.review-reel__score {
  color: #f5f2ea;
  font-size: 1rem;
  font-weight: 700;
}

.review-reel__label {
  margin: 10px 0 0;
  color: #f5f2ea;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.review-reel__source-link {
  display: inline-block;
  margin-top: 18px;
  color: rgba(245, 242, 234, 0.68);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.review-reel__source-link:hover,
.review-reel__source-link:focus-visible {
  color: #f5f2ea;
  text-decoration-color: #b23a2e;
}

.review-reel__stage {
  min-width: 0;
}

.review-reel__item {
  margin: 0;
}

.review-reel__quote {
  max-width: 760px;
  margin: 0;
  color: #f5f2ea;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  font-weight: 400;
  line-height: 1.38;
}

.review-reel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  color: rgba(245, 242, 234, 0.7);
  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-reel__meta cite {
  color: #f5f2ea;
  font-style: normal;
  font-weight: 700;
}

.review-reel__navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 17px;
}

.review-reel__counter {
  color: rgba(245, 242, 234, 0.58);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.review-reel__counter strong {
  color: #f5f2ea;
  font-weight: 700;
}

.review-reel__progress {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 5px;
}

.review-reel__progress span {
  display: block;
  height: 2px;
  background: rgba(245, 242, 234, 0.22);
}

.review-reel__progress .is-active {
  background: #b23a2e;
}

@media (min-width: 900px) {
  .review-reel {
    display: grid;
    grid-template-columns:
      minmax(230px, 0.72fr)
      minmax(0, 1.9fr)
      minmax(150px, 0.48fr);
    gap: clamp(40px, 5vw, 86px);
    align-items: center;
    padding: 48px 0 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-reel__source-link {
    transition: none;
  }
}

/* OPENTABLE REVIEW MOTION SYSTEM DESKTOP v0.3 */

.review-reel__stage {
  --review-stage-x: 0px;
  --review-stage-y: 0px;

  position: relative;
  transform:
    translate3d(
      var(--review-stage-x),
      var(--review-stage-y),
      0
    );
  will-change: transform;
}

.review-reel__item {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.review-reel__item.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.review-reel__item.is-entering {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(13px);
  pointer-events: none;
}

.review-reel__item.is-leaving {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/*
 * Rating event.
 *
 * Stars remain static between review changes.
 * A new review triggers one short five-star fill sequence.
 */

.review-reel__stars {
  display: inline-flex;
  gap: 0.1em;
  letter-spacing: 0;
}

.review-reel__star {
  display: inline-block;
  color: #b23a2e;
  -webkit-text-stroke: 0 transparent;
  transform-origin: 50% 60%;
}

.review-reel__rating.is-rating-animating
.review-reel__star {
  color: transparent;
  -webkit-text-stroke: 1px #b23a2e;
  animation:
    review-star-fill
    330ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.review-reel__rating.is-rating-animating
.review-reel__star:nth-child(1) {
  animation-delay: 0ms;
}

.review-reel__rating.is-rating-animating
.review-reel__star:nth-child(2) {
  animation-delay: 70ms;
}

.review-reel__rating.is-rating-animating
.review-reel__star:nth-child(3) {
  animation-delay: 140ms;
}

.review-reel__rating.is-rating-animating
.review-reel__star:nth-child(4) {
  animation-delay: 210ms;
}

.review-reel__rating.is-rating-animating
.review-reel__star:nth-child(5) {
  animation-delay: 280ms;
}

.review-reel__rating.is-rating-animating {
  animation:
    review-rating-complete
    260ms
    500ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.review-reel__rating.is-rating-animating
.review-reel__score {
  animation:
    review-score-arrive
    300ms
    430ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes review-star-fill {
  0% {
    color: transparent;
    opacity: 0.45;
    transform:
      translateY(2px)
      scale(0.84);
    -webkit-text-stroke: 1px #b23a2e;
  }

  65% {
    color: #b23a2e;
    opacity: 1;
    transform:
      translateY(-1px)
      scale(1.08);
    -webkit-text-stroke: 1px #b23a2e;
  }

  100% {
    color: #b23a2e;
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
    -webkit-text-stroke: 0 transparent;
  }
}

@keyframes review-rating-complete {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.84;
    transform: scale(1.035);
  }
}

@keyframes review-score-arrive {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Progress:
 * inactive positions are lines,
 * active position becomes a circular node.
 */

.review-reel__progress {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-reel__progress button {
  position: relative;
  width: 29px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  cursor: pointer;
}

.review-reel__progress button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(245, 242, 234, 0.22);
  transform:
    translate(-50%, -50%)
    scale(1);
  transition:
    width 260ms ease,
    height 260ms ease,
    border-radius 260ms ease,
    background-color 260ms ease,
    transform 260ms ease;
}

.review-reel__progress button.is-active {
  background: transparent !important;
}

.review-reel__progress button.is-active::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b23a2e;
  transform:
    translate(-50%, -50%)
    scale(1);
}

.review-reel__progress button:hover::before {
  background: rgba(245, 242, 234, 0.58);
}

.review-reel__progress button.is-active:hover::before {
  background: #b23a2e;
  transform:
    translate(-50%, -50%)
    scale(1.12);
}

.review-reel__progress button:focus-visible {
  outline: 1px solid #f5f2ea;
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .review-reel {
    margin-top: 118px;
    padding-top: 56px;
    padding-bottom: 58px;
  }

  .review-reel__stage {
    min-height: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-reel__stage {
    --review-stage-x: 0px;
    --review-stage-y: 0px;

    transform: none !important;
    will-change: auto;
  }

  .review-reel__item,
  .review-reel__progress button::before,
  .review-reel__source-link,
  .review-reel__rating,
  .review-reel__star,
  .review-reel__score {
    animation: none !important;
    transition: none !important;
  }
}

/* MENU ICON MOTION SYSTEM DESKTOP v0.1 */

.menu-art {
  --menu-art-x: 0px;
  --menu-art-y: 0px;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin: 18px 0 8px;
  transform:
    translate3d(
      var(--menu-art-x),
      var(--menu-art-y),
      0
    );
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.menu-art img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.menu-art--steak img {
  width: 148px;
  max-height: 126px;
}

.menu-art--seafood img {
  width: 142px;
  max-height: 126px;
}

.menu-art--japanese img {
  width: 154px;
  max-height: 126px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-art {
    --menu-art-x: 0px;
    --menu-art-y: 0px;

    transform: none !important;
    will-change: auto;
  }
}

/* PICTURE MENU COLLECTION CARD SYSTEM v0.2 */

html.is-dish-gallery-open,
html.is-dish-gallery-open body {
  overflow: hidden;
}

.food-pillar {
  position: relative;
}

.food-pillar__gallery-trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.food-pillar__gallery-trigger:focus-visible {
  outline: 2px solid #B23A2E;
  outline-offset: -4px;
}

/*
 * Compact floating collection card.
 *
 * Previous photo maximum:
 * 420 × 525
 *
 * New desktop maximum:
 * 282 × 352.5
 *
 * Approx. 33% reduction.
 */
.dish-gallery {
  width: min(
    366px,
    calc(100vw - 16px)
  );
  max-width: none;
  max-height: calc(100dvh - 12px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0F0F0F;
  overflow: visible;
}

.dish-gallery__frame {
  --gallery-float-x: 0px;
  --gallery-float-y: 0px;
  --gallery-float-r: 0deg;

  /*
   * 4:5 media height = width × 1.25.
   *
   * The viewport-height term allows the complete card to
   * remain visible without creating an internal scrollbar.
   */
  --gallery-media-width:
    min(
      282px,
      calc(100vw - 48px),
      calc((100dvh - 244px) * 0.8)
    );

  position: relative;
  width: 100%;
  max-height: calc(100dvh - 12px);
  padding: 12px;
  overflow: visible;

  border: 1px solid #0F0F0F;
  border-radius: 0;

  background: #F5F2EA;

  box-shadow:
    0 22px 68px
    rgba(15, 15, 15, 0.34);

  transform:
    translate3d(
      var(--gallery-float-x),
      var(--gallery-float-y),
      0
    )
    rotate(
      var(--gallery-float-r)
    );

  transform-origin: center center;

  will-change: transform;
}

.dish-gallery__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;

  padding-bottom: 9px;

  border-bottom:
    1px solid #0F0F0F;
}

.dish-gallery__header h2 {
  margin: 0;

  color: #0F0F0F;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size: 24px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.015em;
}

.dish-gallery__header p {
  margin: 4px 0 0;

  color: #0F0F0F;

  font-family:
    "Barlow",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 11px;
  line-height: 1.35;
}

.dish-gallery button,
.dish-gallery__reserve {
  border-radius: 0;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dish-gallery button {
  min-height: 34px;
  padding: 5px 8px;

  border: 1px solid #0F0F0F;

  color: #0F0F0F;
  background: #F5F2EA;

  cursor: pointer;
}

.dish-gallery button:hover,
.dish-gallery button:focus-visible {
  border-color: #B23A2E;
}

.dish-gallery button:focus-visible,
.dish-gallery__reserve:focus-visible,
.dish-gallery__viewport:focus-visible {
  outline: 2px solid #B23A2E;
  outline-offset: 3px;
}

.dish-gallery button:disabled {
  cursor: default;
  opacity: 0.48;
}

.dish-gallery__close {
  min-height: 28px !important;
  padding: 2px 5px !important;

  border-color: transparent !important;

  background: transparent !important;

  font-size: 11px;
}

.dish-gallery__viewport {
  position: relative;

  width: var(--gallery-media-width);
  aspect-ratio: 4 / 5;

  margin: 10px auto 0;

  overflow: hidden;

  border: 1px solid #0F0F0F;

  background: #0F0F0F;

  perspective: 900px;

  cursor: pointer;

  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dish-gallery__viewport img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  opacity: 1;

  transform:
    perspective(900px)
    rotateY(0deg)
    scale(1);

  transform-origin: center center;
  transform-style: preserve-3d;

  backface-visibility: hidden;

  transition:
    transform
    240ms
    cubic-bezier(0.58, 0, 0.42, 1),
    opacity
    210ms
    ease;
}

.dish-gallery__viewport
img.is-flipping-out {
  opacity: 0.58;

  transform:
    perspective(900px)
    rotateY(88deg)
    scale(0.968);
}

.dish-gallery__viewport
img.is-flipping-in {
  opacity: 0.58;

  transform:
    perspective(900px)
    rotateY(-88deg)
    scale(0.968);

  transition: none;
}

.dish-gallery__status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;

  width: var(--gallery-media-width);

  margin: 8px auto 0;
}

.dish-gallery__counter {
  min-width: 44px;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
}

.dish-gallery__progress {
  display: block;

  width: 100%;
  height: 2px;

  overflow: hidden;

  background:
    rgba(15, 15, 15, 0.16);
}

.dish-gallery__progress-fill {
  display: block;

  width: 12.5%;
  height: 100%;

  background: #B23A2E;

  transform-origin: left center;

  transition:
    width
    240ms
    cubic-bezier(0.22, 1, 0.36, 1);
}

.dish-gallery__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 5px;

  width: var(--gallery-media-width);

  margin: 7px auto 0;
}

.dish-gallery__controls button {
  min-width: 0;
  min-height: 32px;

  padding-inline: 6px;

  font-size: 11px;
}

.dish-gallery__controls button:first-child {
  text-align: left;
}

.dish-gallery__controls button:last-child {
  text-align: right;
}

.dish-gallery__controls
button[aria-pressed="true"] {
  border-color: #B23A2E;
  color: #B23A2E;
}

.dish-gallery__footer {
  width: var(--gallery-media-width);

  margin: 9px auto 0;
  padding-top: 8px;

  border-top:
    1px solid #0F0F0F;
}

.dish-gallery__reserve {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;
  padding: 6px 12px;

  border: 1px solid #0F0F0F;

  color: #F5F2EA;
  background: #0F0F0F;

  font-size: 12px;

  text-decoration: none;
}

.dish-gallery__reserve:hover,
.dish-gallery__reserve:focus-visible {
  border-color: #B23A2E;
}

@media (max-width: 380px) {
  .dish-gallery {
    width: calc(100vw - 12px);
  }

  .dish-gallery__frame {
    --gallery-media-width:
      min(
        282px,
        calc(100vw - 42px),
        calc((100dvh - 238px) * 0.8)
      );

    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dish-gallery__frame {
    --gallery-float-x: 0px !important;
    --gallery-float-y: 0px !important;
    --gallery-float-r: 0deg !important;

    transform: none !important;
    will-change: auto;
  }

  .dish-gallery__viewport img,
  .dish-gallery__progress-fill {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* AT THE TABLE FINAL COPY v0.1 */

.menu-status {
  color: #0F0F0F;
  opacity: 1;
}

/* BRAND / DEPTH MOTION PASS DESKTOP v0.1 */

/* ---------------------------------------------------------------
   HEADER BRAND LOCKUP
   --------------------------------------------------------------- */

.site-header__inner > .brand:has(.header-brand-lockup) {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

.header-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: clamp(320px, 27vw, 480px);

  line-height: 0;

  transform: translateY(28px);
}

.header-brand-lockup__wordmark {
  position: relative;

  display: block;

  width: 100%;
}

.header-brand-lockup__wordmark > img {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
}

.header-brand-lockup__wordmark-red {
  position: absolute;
  inset: 0;

  display: block;

  background: #B23A2E;

  -webkit-mask:
    url("./assets/brand/drailed-wordmark.svg")
    center / contain
    no-repeat;

  mask:
    url("./assets/brand/drailed-wordmark.svg")
    center / contain
    no-repeat;

  opacity: 0;

  pointer-events: none;

  animation: none;
  transition: none;
  will-change: auto;
}

/* ---------------------------------------------------------------
   EXPERIENCE — OVERSIZED GASTROPUB SIGNATURE
   --------------------------------------------------------------- */

.experience-gastropub-mark {
  display: block;

  width: min(100%, 660px);

  margin-top: 34px;

  pointer-events: none;
}

.experience-gastropub-mark > span {
  display: block;

  width: 100%;
  aspect-ratio: 2277.036 / 536.646;

  background: #B23A2E;

  -webkit-mask:
    url("./assets/brand/gastropub.svg")
    center / contain
    no-repeat;

  mask:
    url("./assets/brand/gastropub.svg")
    center / contain
    no-repeat;
}


/* ---------------------------------------------------------------
   YOUR NEXT EVENING — SECTION-CLIPPED DEPTH REVEAL
   --------------------------------------------------------------- */

.closing {
  position: relative;

  overflow: clip;

  isolation: isolate;
}

.closing__inner {
  position: relative;

  z-index: 2;
}

.closing-rail-depth {
  position: absolute;
  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.closing-rail-depth__art {
  --closing-rail-y: 0px;

  position: absolute;

  top: 50%;
  left: 59%;

  display: block;

  width: clamp(410px, 29vw, 560px);
  aspect-ratio: 1329.429 / 1033.934;

  background: #0F0F0F;

  opacity: 0.34;

  -webkit-mask:
    url("./assets/illustrations/closing/diagonal-railroad-branch-01.svg")
    center / contain
    no-repeat;

  mask:
    url("./assets/illustrations/closing/diagonal-railroad-branch-01.svg")
    center / contain
    no-repeat;

  transform:
    translate3d(
      -50%,
      calc(-50% + var(--closing-rail-y)),
      0
    );

  will-change: transform;
}


/* ---------------------------------------------------------------
   FOOTER — RED DRAILED SIGNATURE
   --------------------------------------------------------------- */

.footer-brand {
  display: block;

  width: clamp(180px, 14vw, 240px);
  max-width: none;
}

.footer-brand__drailed {
  display: block;

  width: 100%;
  aspect-ratio: 2284.098 / 674.012;

  background: #B23A2E;
  --footer-drailed-x: 0px;
  --footer-drailed-y: 0px;
  --footer-drailed-r: 0deg;

  transform:
    translate3d(
      var(--footer-drailed-x),
      var(--footer-drailed-y),
      0
    )
    rotate(
      var(--footer-drailed-r)
    );

  transform-origin: center center;
  will-change: transform;

  -webkit-mask:
    url("./assets/brand/drailed.svg")
    center / contain
    no-repeat;

  mask:
    url("./assets/brand/drailed.svg")
    center / contain
    no-repeat;
}


/* ---------------------------------------------------------------
   MASK FALLBACKS
   --------------------------------------------------------------- */

@supports not (
  (-webkit-mask-image: url("")) or
  (mask-image: url(""))
) {
  .experience-gastropub-mark > span {
    background:
      url("./assets/brand/gastropub.svg")
      center / contain
      no-repeat;
  }

  .closing-rail-depth__art {
    background:
      url("./assets/illustrations/closing/diagonal-railroad-branch-01.svg")
      center / contain
      no-repeat;
  }

  .footer-brand__drailed {
    background:
      url("./assets/brand/drailed.svg")
      center / contain
      no-repeat;
  }
}


/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .footer-brand__drailed {
    --footer-drailed-x: 0px !important;
    --footer-drailed-y: 0px !important;
    --footer-drailed-r: 0deg !important;

    transform: none !important;
    will-change: auto;
  }

  .header-brand-lockup__wordmark-red {
    animation: none !important;
    transition: none !important;
  }

  .closing-rail-depth__art {
    --closing-rail-y: 0px !important;

    transform:
      translate3d(
        -50%,
        -50%,
        0
      ) !important;

    will-change: auto;
  }
}

/* HERO RAIL BLEND + INTERACTION FEEDBACK DESKTOP v0.1 */

/* ---------------------------------------------------------------
   HERO CROSSROADS — PERMANENT SEAM OVERLAP
   --------------------------------------------------------------- */

.hero-crossroads-art img {
  --hero-rail-x: 0px;
  --hero-rail-y: 0px;
  --hero-rail-r: 0deg;

  /*
   * Base +22px places the lower railroad geometry slightly
   * behind the following Coal Black section.
   *
   * The animated Y variable is deliberately tiny, so the
   * railroad can move without ever visually detaching.
   */
  translate:
    var(--hero-rail-x)
    calc(
      22px +
      var(--hero-rail-y)
    );

  rotate:
    var(--hero-rail-r);

  transform-origin: 50% 82%;

  will-change:
    translate,
    rotate;
}

/*
 * Ensure the following black section visually wins the seam
 * if the railroad extends a few pixels into its territory.
 */
.experience {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------------
   GLOBAL BUTTON / CTA MICROINTERACTION
   --------------------------------------------------------------- */

:is(
  a.button,
  button:not(.food-pillar__gallery-trigger):not(.header-hero-emblem-trigger),
  .dish-gallery__reserve
) {
  --button-feedback-x: 0px;
  --button-feedback-y: 0px;
  --button-feedback-scale: 1;

  translate:
    var(--button-feedback-x)
    var(--button-feedback-y);

  scale:
    var(--button-feedback-scale);

  transition:
    translate 150ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 150ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 170ms ease,
    border-color 170ms ease,
    background-color 170ms ease,
    color 170ms ease;

  will-change:
    translate,
    scale;
}


/* ---------------------------------------------------------------
   POINTER HOVER — PRINTED OBJECT LIFTS FROM PAGE
   --------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  :is(
    a.button,
    button:not(.food-pillar__gallery-trigger):not(.header-hero-emblem-trigger)
  ):not(:disabled):hover {
    --button-feedback-x: -2px;
    --button-feedback-y: -2px;

    box-shadow:
      4px 4px 0
      rgba(15, 15, 15, 0.92);
  }

  .dish-gallery__reserve:hover,
  .dish-gallery button:not(:disabled):hover {
    --button-feedback-x: -2px;
    --button-feedback-y: -2px;

    box-shadow:
      3px 3px 0
      #B23A2E;
  }
}


/* ---------------------------------------------------------------
   PRESS — PHYSICAL PRINT / LETTERPRESS RESPONSE
   --------------------------------------------------------------- */

:is(
  a.button,
  button:not(.food-pillar__gallery-trigger):not(.header-hero-emblem-trigger),
  .dish-gallery__reserve
):not(:disabled):active {
  --button-feedback-x: 1px;
  --button-feedback-y: 1px;
  --button-feedback-scale: 0.985;

  box-shadow:
    1px 1px 0
    rgba(15, 15, 15, 0.82);

  transition-duration: 70ms;
}


/* ---------------------------------------------------------------
   KEYBOARD FEEDBACK
   --------------------------------------------------------------- */

:is(
  a.button,
  button:not(.food-pillar__gallery-trigger):not(.header-hero-emblem-trigger),
  .dish-gallery__reserve
):focus-visible {
  box-shadow:
    0 0 0 2px #F5F2EA,
    0 0 0 4px #B23A2E;
}


/* ---------------------------------------------------------------
   AT THE TABLE — LARGE INTERACTIVE CARD FEEDBACK
   --------------------------------------------------------------- */

.food-pillar {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    translate 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .food-pillar:has(
    .food-pillar__gallery-trigger:hover
  ) {
    background:
      rgba(178, 58, 46, 0.035);

    box-shadow:
      inset 0 -3px 0
      #B23A2E;
  }
}

.food-pillar:has(
  .food-pillar__gallery-trigger:active
) {
  translate: 0 1px;

  box-shadow:
    inset 0 -1px 0
    #B23A2E;
}

.food-pillar:has(
  .food-pillar__gallery-trigger:focus-visible
) {
  box-shadow:
    inset 0 0 0 2px
    #B23A2E;
}


/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-crossroads-art img {
    --hero-rail-x: 0px !important;
    --hero-rail-y: 0px !important;
    --hero-rail-r: 0deg !important;

    translate: 0 22px !important;
    rotate: 0deg !important;

    will-change: auto;
  }

  :is(
    a.button,
    button:not(.food-pillar__gallery-trigger):not(.header-hero-emblem-trigger),
    .dish-gallery__reserve
  ) {
    transition:
      box-shadow 0ms,
      border-color 0ms,
      background-color 0ms,
      color 0ms !important;

    translate: none !important;
    scale: 1 !important;

    will-change: auto;
  }

  .food-pillar {
    transition:
      background-color 0ms,
      box-shadow 0ms !important;

    translate: none !important;
  }
}

/* ================================================================
   RESTAURANT IDENTITY MOTION PASS DESKTOP v0.2
   ================================================================ */

/* ---------------------------------------------------------------
   FIRST-SESSION INTRO OVERLAY
   --------------------------------------------------------------- */

.intro-overlay {
  position: fixed;
  inset: 0;

  z-index: 2147483000;

  overflow: hidden;

  background: #F5F2EA;

  pointer-events: auto;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  /*
   * Subtle physical separation while the cover travels upward.
   * No opacity fade: the page is revealed by the moving bottom edge.
   */
  box-shadow:
    0 24px 36px -24px
    rgb(15 15 15 / 48%);

  backface-visibility: hidden;
}

.intro-seen .intro-overlay {
  display: none;
}

.intro-overlay__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 50%;

  user-select: none;
}

/*
 * Decorative restaurant artwork remains desktop-only during
 * the current desktop-first design phase.
 */
.experience-restaurant-icons,
.menu-chef-depth,
.visit-lamp {
  display: none;
}

@media (min-width: 900px) {
  /* -------------------------------------------------------------
     HERO — HEADER-CONTROLLED FOREGROUND EMBLEM v0.1
     ------------------------------------------------------------- */

  .hero-crossroads-art {
    --hero-emblem-image:
      url("./assets/illustrations/hero/crossed-cutlery-emblem.svg");
  }

  .hero-crossroads-art[data-hero-emblem="steak"] {
    --hero-emblem-image:
      url("./assets/illustrations/hero/emblem-steak.svg");
  }

  .hero-crossroads-art[data-hero-emblem="seafood"] {
    --hero-emblem-image:
      url("./assets/illustrations/hero/emblem-seafood.svg");
  }

  .hero-crossroads-art[data-hero-emblem="japanese"] {
    --hero-emblem-image:
      url("./assets/illustrations/hero/emblem-japanese.svg");
  }

  /* HERO EMBLEM ELASTIC PINCH MORPH v0.1 */
  @keyframes hero-emblem-pinch-out {
    0% {
      scale: 1 1;
      opacity: 1;
      filter: blur(0);
    }

    42% {
      scale: 1.07 0.94;
      opacity: 1;
      filter: blur(0);
    }

    100% {
      scale: 0.08 1.1;
      opacity: 0.32;
      filter: blur(0.75px);
    }
  }

  @keyframes hero-emblem-pinch-in {
    0% {
      scale: 0.08 1.1;
      opacity: 0.32;
      filter: blur(0.75px);
    }

    48% {
      scale: 1.1 0.91;
      opacity: 1;
      filter: blur(0);
    }

    72% {
      scale: 0.985 1.025;
      opacity: 1;
      filter: blur(0);
    }

    100% {
      scale: 1 1;
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes hero-emblem-fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes hero-emblem-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .hero-crossroads-art[
    data-hero-emblem-morph="out"
  ] .hero-crossroads-emblem-art {
    animation:
      hero-emblem-pinch-out
      150ms
      cubic-bezier(0.42, 0, 0.7, 1)
      both;
  }

  .hero-crossroads-art[
    data-hero-emblem-morph="in"
  ] .hero-crossroads-emblem-art {
    animation:
      hero-emblem-pinch-in
      210ms
      cubic-bezier(0.16, 1, 0.3, 1)
      both;
  }

  .hero-crossroads-art[
    data-hero-emblem-reduced="true"
  ][
    data-hero-emblem-morph="out"
  ] .hero-crossroads-emblem-art {
    animation:
      hero-emblem-fade-out
      70ms
      ease-out
      both;
  }

  .hero-crossroads-art[
    data-hero-emblem-reduced="true"
  ][
    data-hero-emblem-morph="in"
  ] .hero-crossroads-emblem-art {
    animation:
      hero-emblem-fade-in
      90ms
      ease-in
      both;
  }

  .hero-crossroads-emblem-art {
    position: absolute;
    inset: 0;

    display: block;

    transform-origin: 50% 50%;

    will-change:
      scale,
      opacity,
      filter;
    background: #0F0F0F;

    -webkit-mask:
      var(--hero-emblem-image)
      center / contain
      no-repeat;

    mask:
      var(--hero-emblem-image)
      center / contain
      no-repeat;
  }

  /* -------------------------------------------------------------
     EXPERIENCE — WHISKEY / DISH / BEER
     ------------------------------------------------------------- */

  .experience-restaurant-icons {
    display: flex;

    width: min(100%, 34rem);
    min-height: 118px;

    margin-top: 34px;
    padding-inline: 10px;

    align-items: center;
    justify-content: space-between;

    pointer-events: none;
  }

  .experience-restaurant-icon {
    --experience-icon-x: 0px;
    --experience-icon-y: 0px;
    --experience-icon-rotation: 0deg;

    display: block;
    flex: 0 0 auto;

    background: #B23A2E;

    transform:
      translate3d(
        var(--experience-icon-x),
        var(--experience-icon-y),
        0
      )
      rotate(var(--experience-icon-rotation));

    transform-origin: 50% 50%;

    will-change: transform;
  }

  .experience-restaurant-icon--whiskey {
    width: 78px;
    aspect-ratio: 900 / 961.391;

    -webkit-mask:
      url("./assets/illustrations/experience/whiskey-glass.svg")
      center / contain
      no-repeat;

    mask:
      url("./assets/illustrations/experience/whiskey-glass.svg")
      center / contain
      no-repeat;
  }

  .experience-restaurant-icon--dish {
    width: 104px;
    aspect-ratio: 900 / 762.881;

    -webkit-mask:
      url("./assets/illustrations/experience/steaming-dish.svg")
      center / contain
      no-repeat;

    mask:
      url("./assets/illustrations/experience/steaming-dish.svg")
      center / contain
      no-repeat;
  }

  .experience-restaurant-icon--beer {
    width: 62px;
    aspect-ratio: 541.811 / 900;

    -webkit-mask:
      url("./assets/illustrations/experience/dark-beer.svg")
      center / contain
      no-repeat;

    mask:
      url("./assets/illustrations/experience/dark-beer.svg")
      center / contain
      no-repeat;
  }

  /* -------------------------------------------------------------
     AT THE TABLE — CHEF HAT DEPTH / PARALLAX
     ------------------------------------------------------------- */

  .menu-section {
    position: relative;

    overflow: clip;

    isolation: isolate;
  }

  .menu-section > .content-shell {
    position: relative;

    z-index: 2;
  }

  .menu-chef-depth {
    position: absolute;
    inset: 0;

    z-index: 3;

    display: block;

    overflow: hidden;

    pointer-events: none;
  }

  .menu-chef-depth__art {
    --menu-chef-y: 0px;

    position: absolute;

    top: 58px;
    left: 70.5%;

    display: block;

    width: clamp(205px, 16vw, 286px);
    aspect-ratio: 900 / 741.39;

    background: #B23A2E;

    opacity: 0.96;

    -webkit-mask:
      url("./assets/illustrations/menu/chef-hat.svg")
      center / contain
      no-repeat;

    mask:
      url("./assets/illustrations/menu/chef-hat.svg")
      center / contain
      no-repeat;

    transform:
      translate3d(
        -50%,
        var(--menu-chef-y),
        0
      )
      rotate(-1.4deg);

    transform-origin: 50% 50%;

    will-change: transform;
  }

  /* -------------------------------------------------------------
     VISIT — SUSPENDED PENDANT LAMP
     ------------------------------------------------------------- */

  .visit {
    position: relative;

    overflow: clip;

    isolation: isolate;
  }

  .visit > .content-shell {
    position: relative;

    z-index: 2;
  }

  .visit-lamp {
    position: absolute;

    top: 50%;
    right: 4.75%;

    z-index: 1;

    display: block;

    width: clamp(175px, 13.5vw, 238px);
    aspect-ratio: 905.137 / 973.323;

    transform: translateY(-50%);

    pointer-events: none;
  }

  .visit-lamp__art {
    --visit-lamp-x: 0px;
    --visit-lamp-y: 0px;
    --visit-lamp-rotation: 0deg;
    --visit-lamp-scale: 1;

    display: block;

    width: 100%;
    height: 100%;

    /*
     * Oxide Red provides contrast on the Coal Black Visit field.
     * The authoritative black SVG itself remains byte-identical.
     */
    background: var(--visit-accent);

    opacity: 0.96;

    -webkit-mask:
      url("./assets/illustrations/visit/pendant-lamp.svg")
      center / contain
      no-repeat;

    mask:
      url("./assets/illustrations/visit/pendant-lamp.svg")
      center / contain
      no-repeat;

    transform:
      translate3d(
        var(--visit-lamp-x),
        var(--visit-lamp-y),
        0
      )
      rotate(var(--visit-lamp-rotation))
      scale(var(--visit-lamp-scale));

    transform-origin: 50% 0%;

    will-change: transform;
  }
}

/* ---------------------------------------------------------------
   MASK FALLBACKS — NEVER SHOW SOLID RECTANGLES
   --------------------------------------------------------------- */

@supports not (
  (-webkit-mask-image: url("")) or
  (mask-image: url(""))
) {
  @media (min-width: 900px) {
    .hero-crossroads-emblem-art {
      background:
        var(--hero-emblem-image)
        center / contain
        no-repeat;
    }

    .experience-restaurant-icon,
    .menu-chef-depth__art,
    .visit-lamp__art {
      background-color: transparent;
    }

    .experience-restaurant-icon--whiskey {
      background:
        url("./assets/illustrations/experience/whiskey-glass.svg")
        center / contain
        no-repeat;
    }

    .experience-restaurant-icon--dish {
      background:
        url("./assets/illustrations/experience/steaming-dish.svg")
        center / contain
        no-repeat;
    }

    .experience-restaurant-icon--beer {
      background:
        url("./assets/illustrations/experience/dark-beer.svg")
        center / contain
        no-repeat;
    }

    .menu-chef-depth__art {
      background:
        url("./assets/illustrations/menu/chef-hat.svg")
        center / contain
        no-repeat;
    }

    .visit-lamp__art {
      background:
        url("./assets/illustrations/visit/pendant-lamp.svg")
        center / contain
        no-repeat;
    }
  }
}

/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .intro-overlay {
    display: none !important;

    animation: none !important;
    transition: none !important;
  }

  .experience-restaurant-icon,
  .menu-chef-depth__art,
  .visit-lamp__art {
    will-change: auto;
  }
}
/* INTRO THREE-LAYER STAGGER ARCHITECTURE v0.7 */

/*
 * The fixed shell owns interaction and scroll locking only.
 * It never moves. Each visual plane owns its own exit transform.
 */
html.intro-scroll-lock,
html.intro-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
  scroll-behavior: auto !important;
}

html.intro-scroll-lock .intro-overlay {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

html.intro-pending .intro-overlay {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
  transition: none;
}

/* -------------------------------------------------------------
   Shared exit planes
   ------------------------------------------------------------- */

.intro-overlay-background-exit,
.intro-overlay-sun-exit,
.intro-overlay-mark-exit {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro-overlay-background-exit {
  z-index: 1;
  background: var(--paper);
  box-shadow:
    0 24px 36px -24px
    rgb(15 15 15 / 48%);
}

/* INTRO OVERLAY FAST PREVIEW PSEUDO-LAYER v0.1 */
/*
 * Same-photo low-weight fallback for first paint only.
 * Background Exit retains all curtain/transform ownership.
 */
html.intro-pending
  .intro-overlay-background-exit::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background:
    #0F0F0F
    url("./assets/intro/overlay-preview.jpg")
    center / cover
    no-repeat;

  pointer-events: none;
}

html.intro-pending
  .intro-overlay-background-exit
  > .intro-overlay__image {
  position: relative;
  z-index: 1;
}

.intro-overlay__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The Background moves first.
 */
html.intro-pending
  .intro-overlay-background-exit.is-leaving {
  transform: translate3d(0, -105%, 0);
  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * The Sun follows 90ms later.
 */
.intro-overlay-sun-exit {
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

html.intro-pending
  .intro-overlay-sun-exit.is-leaving {
  transform: translate3d(0, -105%, 0);
  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    90ms;
}

/*
 * The Secondary Mark follows 160ms after the Background.
 * Its transitionend is the authoritative cleanup event.
 */
.intro-overlay-mark-exit {
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}

html.intro-pending
  .intro-overlay-mark-exit.is-leaving {
  transform: translate3d(0, -105%, 0);
  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    110ms;
}

/* -------------------------------------------------------------
   Sun spring layer
   ------------------------------------------------------------- */

.intro-overlay-sun-spring {
  width: clamp(146px, 14.3vw, 245px);
  max-width: calc(100% - 96px);
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro-overlay-sun {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* -------------------------------------------------------------
   Secondary Mark spring layer
   ------------------------------------------------------------- */

.intro-overlay-mark-spring {
  width: clamp(128px, 12.4vw, 224px);
  max-width: calc(100% - 112px);
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro-overlay-mark {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* -------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .intro-overlay-background-exit,
  .intro-overlay-sun-exit,
  .intro-overlay-mark-exit,
  .intro-overlay-sun-spring,
  .intro-overlay-mark-spring {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
}


/* ================================================================
   CLOSING PHYSICS ARENA STATIC SPAWN DESKTOP v0.2

   Composition validation only.

   The restaurant cutouts:
   - share one clear visual plane
   - remain fully sharp
   - sit above the existing railroad artwork
   - sit below the actual Closing content
   - are invisible until spawn allocation completes

   No body physics is active in this pass.
   ================================================================ */

.closing-physics-arena {
  display: none;
}

@media (min-width: 900px) {
  .closing-physics-arena {
    position: absolute;
    z-index: 1;

    inset: 0;

    display: block;

    overflow: hidden;

    pointer-events: none;
  }

  .closing__inner {
    position: relative;
    z-index: 3;
  }

  .closing-physics-arena__body {
    --closing-spawn-x: 0px;
    --closing-spawn-y: 0px;

    position: absolute;

    left: 0;
    top: 0;

    width: var(--closing-body-width);
    max-width: none;
    height: auto;

    visibility: hidden;

    opacity: 1;
    filter: none;

    transform:
      translate3d(
        var(--closing-spawn-x),
        var(--closing-spawn-y),
        0
      )
      translate(-50%, -50%);

    transform-origin: 50% 50%;

    pointer-events: none;
    user-select: none;

    backface-visibility: hidden;
  }

  .closing-physics-arena[data-spawn-ready="true"]
    .closing-physics-arena__body {
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-physics-arena__body {
    will-change: auto;
  }
}


/* ================================================================
   CLOSING PHYSICS ARENA DYNAMICS DESKTOP v0.2 NO-PARALLAX

   Transform ownership:

   .closing-physics-arena
     owns clipping / containment

   .closing-physics-arena__field
     owns section-relative parallax

   .closing-physics-arena__body
     owns physical X/Y translation and local rotation

   The existing Static Spawn v0.2 allocator remains authoritative
   for home positions.
   ================================================================ */

@media (min-width: 900px) {
  .closing-physics-arena__field {
    position: absolute;
    inset: 0;

    /*
     * Floating restaurant assets intentionally remain fixed
     * to the Closing section plane.
     *
     * The Diagonal Railroad Branch keeps its independent
     * approved depth/parallax controller behind this field.
     */
    transform: none;

    pointer-events: none;

    will-change: auto;
  }

  .closing-physics-arena[data-physics-ready="true"]
    .closing-physics-arena__body {
    transform:
      translate3d(
        var(
          --closing-physics-x,
          var(--closing-spawn-x)
        ),
        var(
          --closing-physics-y,
          var(--closing-spawn-y)
        ),
        0
      )
      translate(-50%, -50%)
      rotate(
        var(
          --closing-physics-rotation,
          0deg
        )
      );

    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-physics-arena__field {
    --closing-arena-y: 0px !important;

    transform: none !important;

    will-change: auto;
  }

  .closing-physics-arena[data-physics-ready="true"]
    .closing-physics-arena__body {
    --closing-physics-rotation: 0deg !important;

    will-change: auto;
  }
}


/* ================================================================
   HERO SUN INTRO CURTAIN REPLAY DESKTOP v0.1

   The real Hero Sun and crossed-cutlery artwork remain pseudo
   elements owned by the approved Hero Sun spring system.

   This button adds only an invisible semantic hit target.

   Manual replay reconstructs a temporary copy of the approved
   three-layer Intro and reverses its travel before replaying the
   original upward exit.
   ================================================================ */

.hero-intro-replay-trigger {
  display: none;
}

@media (min-width: 900px) {
  .hero-intro-replay-trigger {
    position: absolute;
    z-index: 4;

    top: -76px;
    left: 50%;

    display: block;

    width: 190px;
    aspect-ratio: 1;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    transform: translateX(-50%);

    cursor: pointer;

    touch-action: manipulation;

    pointer-events: auto;
  }

  .hero-intro-replay-trigger:focus-visible {
    outline: 2px solid #0F0F0F;
    outline-offset: 5px;
  }

  .hero-intro-replay-trigger:disabled {
    cursor: default;
  }
}

/*
 * The first-load Intro removes its DOM when complete.
 * Manual replay creates a temporary overlay while html remains
 * .intro-seen, so this explicit override makes only that temporary
 * replay overlay visible.
 */
html.intro-seen.intro-replay-active
  .intro-overlay[data-intro-replay-overlay] {
  display: block;
}

/*
 * Freeze the current viewport position without invoking the
 * first-load page-origin lock.
 *
 * Existing stable scrollbar-gutter protection remains authoritative.
 */
html.intro-replay-scroll-lock,
html.intro-replay-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
  scroll-behavior: auto !important;
}

html.intro-replay-active
  .intro-overlay[data-intro-replay-overlay] {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

/* ---------------------------------------------------------------
   REPLAY ENTRY — curtain returns DOWN from -105% to 0
   --------------------------------------------------------------- */

html.intro-replay-active
  [data-intro-replay-background-exit],
html.intro-replay-active
  [data-intro-replay-sun-exit],
html.intro-replay-active
  [data-intro-replay-mark-exit] {
  transform: translate3d(0, -105%, 0);
  transition: none;
}

html.intro-replay-active
  [data-intro-replay-background-exit].is-replay-covered {
  transform: translate3d(0, 0, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1);
}

html.intro-replay-active
  [data-intro-replay-sun-exit].is-replay-covered {
  transform: translate3d(0, 0, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    90ms;
}

html.intro-replay-active
  [data-intro-replay-mark-exit].is-replay-covered {
  transform: translate3d(0, 0, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    110ms;
}

/* ---------------------------------------------------------------
   REPLAY EXIT — same approved upward choreography
   --------------------------------------------------------------- */

html.intro-replay-active
  [data-intro-replay-background-exit].is-replay-leaving {
  transform: translate3d(0, -105%, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1);
}

html.intro-replay-active
  [data-intro-replay-sun-exit].is-replay-leaving {
  transform: translate3d(0, -105%, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    90ms;
}

html.intro-replay-active
  [data-intro-replay-mark-exit].is-replay-leaving {
  transform: translate3d(0, -105%, 0);

  transition:
    transform
    1665ms
    cubic-bezier(0.65, 0, 0.35, 1)
    110ms;
}

@media (prefers-reduced-motion: reduce) {
  html.intro-replay-active
    [data-intro-replay-background-exit],
  html.intro-replay-active
    [data-intro-replay-sun-exit],
  html.intro-replay-active
    [data-intro-replay-mark-exit] {
    transform: none !important;
    transition: none !important;
  }
}


/* ================================================================
   HERO SUN INTRO REPLAY VISUAL CORRECTION DESKTOP v0.2

   1. The replay trigger is an invisible interaction proxy.
      It is larger than the 190px visual Sun and follows the same
      spring X/Y/scale variables so hit-testing remains centered.

   2. The temporary Replay shell mirrors the transparent shell
      contract used by First-Load Intro while keeping the actual
      three visual planes unchanged.

   No First-Load controller, timing, asset, or transform owner is
   modified here.
   ================================================================ */

@media (min-width: 900px) {
  /*
   * Visible Sun:
   *   190 x 190
   *   top: -76px
   *
   * Invisible proxy:
   *   220 x 220
   *
   * Difference = 30px, so subtract 15px from top to preserve
   * the exact center:
   *
   *   -76px - 15px = -91px
   */
  .hero-crossroads-art >
    .hero-intro-replay-trigger {
    top: -91px;
    left: 50%;

    width: 220px;
    height: 220px;
    aspect-ratio: auto;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;

    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;

    pointer-events: auto;

    /*
     * Follow the approved Sun spring instead of remaining attached
     * to its static layout coordinates.
     *
     * Circle rotation is irrelevant, so only X / Y / scale are
     * inherited from the visual Sun.
     */
    transform:
      translate3d(
        calc(-50% + var(--hero-sun-x)),
        var(--hero-sun-y),
        0
      )
      scale(var(--hero-sun-scale)) !important;

    transform-origin: 50% 50%;

    cursor: default;
  }

  /*
   * Mouse / touch interaction must never reveal that an invisible
   * proxy exists.
   */
  .hero-crossroads-art >
    .hero-intro-replay-trigger:hover,
  .hero-crossroads-art >
    .hero-intro-replay-trigger:active,
  .hero-crossroads-art >
    .hero-intro-replay-trigger:focus {
    background: transparent !important;
    border: 0 !important;

    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;

    transform:
      translate3d(
        calc(-50% + var(--hero-sun-x)),
        var(--hero-sun-y),
        0
      )
      scale(var(--hero-sun-scale)) !important;
  }

  /*
   * Keyboard-only focus remains intentionally distinguishable for
   * accessibility. It is not shown by ordinary mouse/touch use.
   */
  .hero-crossroads-art >
    .hero-intro-replay-trigger:focus-visible {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;

    outline: 2px solid #0F0F0F;
    outline-offset: 5px;
  }
}

/* ---------------------------------------------------------------
   REPLAY SHELL — MATCH FIRST-LOAD TRANSPARENT SHELL
   --------------------------------------------------------------- */

/*
 * Base .intro-overlay intentionally owns a Paper-Ivory fallback.
 *
 * During First-Load, html.intro-pending makes that fixed shell
 * transparent while the Background / Sun / Mark planes travel.
 *
 * Manual Replay does not use intro-pending, therefore it needs the
 * same shell-only visual contract under its own state.
 */
html.intro-replay-active
  .intro-overlay[data-intro-replay-overlay] {
  background: transparent;
  box-shadow: none;

  overflow: visible;

  transform: none;
  transition: none;
}


/* ================================================================
   HERO SUN REPLAY STACKING RELEASE DESKTOP v0.3

   Runtime proof:
   - parent z-index:1  -> 1/9 Sun hit points
   - parent z-index:auto -> 9/9 Sun hit points
   - Sun/proxy center delta remained 0px / 0px

   The Hero crossroads container must not create an isolated
   stacking context on desktop.

   Its children retain their intended ordering:
   railroad = 2
   Hero copy = 3
   invisible replay proxy = 4

   This changes stacking only. Geometry, spring motion and Replay
   behavior remain untouched.
   ================================================================ */

@media (min-width: 900px) {
  .hero-crossroads-art {
    z-index: auto;
  }
}


/* ================================================================
   PICTURE MENU MANUAL NAVIGATION MINIMALISM DESKTOP v0.3

   Manual editorial navigation supersedes autoplay/progress.
   Card geometry, photo flip and floating spring remain intact.
   ================================================================ */

.dish-gallery__viewport {
  position: relative;
  cursor: pointer;
}

.dish-gallery__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;

  width: 48px;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #F5F2EA !important;
  opacity: 0.46;
  cursor: pointer;

  transition:
    opacity 160ms ease;
}

.dish-gallery__nav--previous {
  left: 0;
}

.dish-gallery__nav--next {
  right: 0;
}

.dish-gallery__nav span {
  display: block;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1;

  text-shadow:
    0 2px 12px
    rgba(15, 15, 15, 0.62);
}

.dish-gallery__nav--previous span {
  transform: translateX(-2px);
}

.dish-gallery__nav--next span {
  transform: translateX(2px);
}

.dish-gallery__nav:hover,
.dish-gallery__nav:focus-visible {
  background: transparent !important;
  color: #F5F2EA !important;
  opacity: 0.92;
  transform: none !important;
}

.dish-gallery__nav:active {
  background: transparent !important;
  transform: none !important;
}

.dish-gallery__nav:focus-visible {
  outline: 2px solid #B23A2E;
  outline-offset: -4px;
}

.dish-gallery__status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dish-gallery__counter {
  margin-inline: auto;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .dish-gallery__nav {
    transition: none !important;
  }
}


/* ================================================================
   PICTURE MENU MODAL MOTION SYSTEM DESKTOP v0.4

   Outer dialog owns entrance/exit travel.
   Inner .dish-gallery__frame retains the approved float spring.
   ================================================================ */

.dish-gallery {
  transform:
    translate3d(
      0,
      -115vh,
      0
    );

  will-change: transform;
}

.dish-gallery[data-gallery-motion="opening"] {
  transform:
    translate3d(
      0,
      -115vh,
      0
    );

  transition: none;
}

.dish-gallery[data-gallery-motion="open"] {
  transform:
    translate3d(0, 0, 0);

  transition:
    transform
    700ms
    cubic-bezier(0.65, 0, 0.35, 1)
    120ms;
}

.dish-gallery[data-gallery-motion="closing"] {
  transform:
    translate3d(
      0,
      -115vh,
      0
    );

  transition:
    transform
    650ms
    cubic-bezier(0.65, 0, 0.35, 1);
}

/* PICTURE MENU STABLE BACKDROP COMPOSITE DESKTOP v0.1 */
.dish-gallery::backdrop {
  background:
    rgba(15, 15, 15, 0.84);

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  opacity: 0;

  transition:
    opacity
      900ms
      cubic-bezier(0.65, 0, 0.35, 1);
}

.dish-gallery[data-gallery-motion="open"]::backdrop {
  opacity: 1;
}

.dish-gallery[data-gallery-motion="closing"]::backdrop {
  opacity: 0;

  transition-duration:
    800ms;
}

/*
 * Navigation cue:
 * two opening flashes, then a clearly visible resting state.
 */

.dish-gallery__nav {
  opacity: 0.74;
}

.dish-gallery[data-gallery-motion="open"]
  .dish-gallery__nav {
  animation:
    dish-gallery-nav-cue
    820ms
    ease
    700ms
    1
    both;
}

@keyframes dish-gallery-nav-cue {
  0% {
    opacity: 0.74;
  }

  18% {
    opacity: 1;
  }

  40% {
    opacity: 0.34;
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 0.74;
  }
}

.dish-gallery__nav:hover,
.dish-gallery__nav:focus-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dish-gallery,
  .dish-gallery[data-gallery-motion="opening"],
  .dish-gallery[data-gallery-motion="open"],
  .dish-gallery[data-gallery-motion="closing"] {
    transform: none !important;
    transition: none !important;
  }

  .dish-gallery::backdrop,
  .dish-gallery[data-gallery-motion="open"]::backdrop,
  .dish-gallery[data-gallery-motion="closing"]::backdrop {
    background:
      rgba(15, 15, 15, 0.84) !important;

    -webkit-backdrop-filter:
      none !important;

    backdrop-filter:
      none !important;

    opacity: 1 !important;


    transition: none !important;
  }

  .dish-gallery[data-gallery-motion="open"]
    .dish-gallery__nav {
    animation: none !important;
    opacity: 0.78;
  }
}

/* ================================================================
   HEADER WORDMARK HIDDEN-VIEW COLOR SYSTEM DESKTOP v0.1

   Initial appearance:
   - Coal Black

   State changes:
   - never while the wordmark is visible
   - only after a visible -> fully hidden viewport boundary
   - hidden state alternates Coal Black <-> Oxide Red
   - next appearance inherits the already-switched hidden state
   - no crossfade / transition is permitted
   ================================================================ */

.header-brand-lockup__wordmark-red {
  animation: none;
  transition: none;
  opacity: 0;
  will-change: auto;
}

.header-brand-lockup[data-wordmark-color="oxide"]
  .header-brand-lockup__wordmark-red {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .header-brand-lockup__wordmark-red {
    animation: none !important;
    transition: none !important;
  }

  .header-brand-lockup[data-wordmark-color="oxide"]
    .header-brand-lockup__wordmark-red {
    opacity: 1 !important;
  }

  .header-brand-lockup[data-wordmark-color="coal"]
    .header-brand-lockup__wordmark-red {
    opacity: 0 !important;
  }
}

/* ================================================================
   VISIT LAMP PALETTE SWITCH DESKTOP v0.1

   Coal Black remains fixed.
   The lamp swaps Visit primary/accent ownership:
   Paper Ivory <-> Oxide Red.
   ================================================================ */

.visit {
  --visit-primary: var(--paper);
  --visit-accent: var(--oxide);
  --visit-divider: rgb(245 242 234 / 28%);

  color: var(--visit-primary);
}

.visit[data-visit-palette="inverted"] {
  --visit-primary: var(--oxide);
  --visit-accent: var(--paper);
  --visit-divider: rgb(178 58 46 / 28%);
}

.visit h2 {
  color: var(--visit-primary);
}

.visit h2 span,
.visit .eyebrow--accent,
.visit .visit-detail__label {
  color: var(--visit-accent);
}

.visit .visit-detail {
  border-top-color: var(--visit-divider);
}

.visit .visit-detail a {
  color: var(--visit-primary);
}

.visit .button--outline-light {
  border-color: var(--visit-primary);
  background: transparent;
  color: var(--visit-primary);
}

.visit .text-link {
  color: var(--visit-primary);
}

.visit .text-link:hover {
  border-bottom-color: var(--visit-accent);
}

.visit .text-link:focus-visible,
.visit .button--outline-light:focus-visible {
  outline-color: var(--visit-accent);
}

@media (min-width: 900px) {
  .visit-lamp {
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 0;
    appearance: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }


  .visit-lamp:active .visit-lamp__art {
    --visit-lamp-scale: 0.965;
  }

  .visit-lamp:focus-visible {
    outline: 3px solid var(--visit-accent);
    outline-offset: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visit-lamp__art {
    --visit-lamp-scale: 1 !important;
  }
}

/* ================================================================
   VISIT LAMP HIT AREA + NO-HOVER CORRECTION DESKTOP v0.2

   Root cause:
   .visit > .content-shell sits at z-index: 2.
   The lamp previously sat at z-index: 1, so the transparent
   content shell intercepted pointer hit-testing across part
   of the visible lamp.

   The lamp is also a native button now, so it must opt out of
   the site's generic button hover/translation feedback.
   Click feedback remains owned by the lamp art + spring.
   ================================================================ */

@media (min-width: 900px) {
  .visit-lamp {
    z-index: 3;

    --button-feedback-x: 0px;
    --button-feedback-y: 0px;
    --button-feedback-scale: 1;

    translate: none !important;
    scale: 1 !important;
    box-shadow: none !important;
    transition: none !important;

    pointer-events: auto;
  }

  .visit-lamp:hover,
  .visit-lamp:hover .visit-lamp__art {
    translate: none !important;
    scale: 1 !important;
    box-shadow: none !important;
  }
}

/* AT THE TABLE FOREGROUND FLOATING ACTOR SYSTEM DESKTOP v0.2 */

.foreground-floating-arena {
  display: none;
}

@media (min-width: 900px) {
  /*
   * Chef artwork = exact trigger hit area.
   * The trigger itself retains --menu-chef-y parallax ownership.
   */
  .menu-chef-depth__trigger {
    appearance: none;

    margin: 0;
    padding: 0;
    border: 0;

    color: inherit;
    font: inherit;

    cursor: pointer;
    pointer-events: auto;

    -webkit-tap-highlight-color: transparent;
  }

  .menu-chef-depth__art {
    scale: 1;

    transition:
      scale 110ms ease;
  }

  .menu-chef-depth__trigger:active {
    scale: 0.95;
  }

  .menu-chef-depth__trigger:focus-visible {
    outline: 2px solid #B23A2E;
    outline-offset: 8px;
  }

  /*
   * Viewport foreground.
   * z-index 12 is above normal page content and below the existing
   * site header at z-index 20. Native dialogs remain top-layer UI.
   */
  .foreground-floating-arena {
    position: fixed;
    z-index: 12;
    inset: 0;

    display: block;

    overflow: hidden;

    pointer-events: none;
    user-select: none;

    contain:
      layout
      style
      paint;
  }

  /*
   * WORLD TRANSFORM OWNER
   */
  .foreground-floating-actor {
    --foreground-actor-x: 0px;
    --foreground-actor-y: 0px;
    --foreground-actor-rotation: 0deg;

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    opacity: 1;
    filter: none;

    transform:
      translate3d(
        var(--foreground-actor-x),
        var(--foreground-actor-y),
        0
      )
      rotate(
        var(--foreground-actor-rotation)
      );

    transform-origin: 50% 50%;

    transition:
      opacity 260ms ease,
      filter 260ms ease;

    pointer-events: none;

    will-change:
      transform,
      opacity;
  }

  /*
   * LOCAL MORPH OWNER
   */
  .foreground-floating-actor__morph {
    display: block;

    width: 100%;
    height: 100%;

    opacity: 1;
    filter: none;

    clip-path:
      inset(
        0 0 0 0
        round 0
      );

    transition-property:
      opacity,
      filter,
      clip-path;

    transition-duration:
      210ms;

    transition-timing-function:
      cubic-bezier(
        0.2,
        0.75,
        0.25,
        1
      );
  }

  .foreground-floating-actor__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
  }

  .foreground-floating-actor.is-morph-squashing
    .foreground-floating-actor__morph {
    opacity: 0;

    filter: blur(5px);

    clip-path:
      inset(
        42% 7% 42% 7%
        round 999px
      );

    transition-duration:
      90ms;

    transition-timing-function:
      cubic-bezier(
        0.4,
        0,
        0.8,
        0.45
      );
  }

  .foreground-floating-actor.is-morph-recovering
    .foreground-floating-actor__morph {
    opacity: 1;
    filter: blur(0);

    clip-path:
      inset(
        0 0 0 0
        round 0
      );

    transition-duration: 210ms;
  }

  .foreground-floating-actor.is-retiring {
    opacity: 0;
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-chef-depth__art,
  .foreground-floating-actor,
  .foreground-floating-actor__morph {
    transition: none !important;
  }

  .foreground-floating-actor {
    --foreground-actor-rotation: 0deg !important;

    will-change: auto;
  }

  .foreground-floating-actor__morph {
    clip-path: none !important;
    filter: none !important;
  }
}
/* ================================================================
   CLOSING OUTER-SIX MORPH + ACTOR LIFECYCLE DESKTOP v0.3

   Runtime geometry audit:
   independent CSS scale produced up to 360.093px center movement.
   Source/width identity exchange produced 0.000px center movement.

   Physics transform ownership remains untouched.

   Morph and respawn presentation use only:
   - opacity
   - filter
   - clip-path

   None changes the actor's physical center.
   ================================================================ */

.closing-physics-arena__body[data-closing-active="false"] {
  display: none !important;
}

@media (min-width: 900px) {
  .closing-physics-arena__body[data-closing-active="true"] {
    opacity: 1;
    filter: none;

    clip-path:
      inset(
        0 0 0 0
        round 0
      );

    transition: none;
  }

  /*
   * Morph OUT:
   * visually compress/dissolve the old identity.
   * The source changes only after this state is fully hidden.
   */
  .closing-physics-arena__body.is-morph-squashing {
    opacity: 0;

    filter:
      blur(5px);

    clip-path:
      inset(
        42% 7% 42% 7%
        round 999px
      );

    transition-property:
      opacity,
      filter,
      clip-path;

    transition-duration:
      90ms;

    transition-timing-function:
      cubic-bezier(
        0.4,
        0,
        0.8,
        0.45
      );
  }

  /*
   * Morph IN:
   * reveal the replacement identity from the compressed state.
   */
  .closing-physics-arena__body.is-morph-recovering {
    opacity: 1;

    filter:
      blur(0);

    clip-path:
      inset(
        0 0 0 0
        round 0
      );

    transition-property:
      opacity,
      filter,
      clip-path;

    transition-duration:
      210ms;

    transition-timing-function:
      cubic-bezier(
        0.16,
        0.82,
        0.22,
        1
      );
  }

  /*
   * Lifecycle death:
   * dissolve at the actor's current physical position.
   */
  .closing-physics-arena__body.is-respawn-dissolving {
    opacity: 0;

    filter:
      blur(8px);

    clip-path:
      inset(
        47% 18% 47% 18%
        round 999px
      );

    transition-property:
      opacity,
      filter,
      clip-path;

    transition-duration:
      320ms;

    transition-timing-function:
      cubic-bezier(
        0.45,
        0,
        0.8,
        0.25
      );
  }

  /*
   * Invisible reset state.
   * Physics can return to authoritative spawn without a visible jump.
   */
  .closing-physics-arena__body.is-respawn-hidden {
    opacity: 0;

    filter:
      blur(8px);

    clip-path:
      inset(
        47% 18% 47% 18%
        round 999px
      );

    transition: none;
  }

  /*
   * Animated rebirth at the authoritative outer spawn.
   */
  .closing-physics-arena__body.is-respawn-entering {
    opacity: 1;

    filter:
      blur(0);

    clip-path:
      inset(
        0 0 0 0
        round 0
      );

    transition-property:
      opacity,
      filter,
      clip-path;

    transition-duration:
      420ms;

    transition-timing-function:
      cubic-bezier(
        0.12,
        0.78,
        0.18,
        1
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-physics-arena__body.is-morph-squashing,
  .closing-physics-arena__body.is-morph-recovering,
  .closing-physics-arena__body.is-respawn-dissolving,
  .closing-physics-arena__body.is-respawn-hidden,
  .closing-physics-arena__body.is-respawn-entering {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* EXPERIENCE GASTROPUB INTERACTION + ICON PERMUTATION DESKTOP v0.2 */

/*
 * GASTROPUB is the only interactive trigger in Experience.
 * The existing mask and approved artwork remain authoritative.
 */
.experience-gastropub-mark {
  appearance: none;

  border: 0;
  padding: 0;

  background: transparent;
  color: inherit;

  font: inherit;
  text-align: inherit;

  pointer-events: auto;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.experience-gastropub-mark > span {
  transition:
    background-color 240ms ease,
    opacity 160ms ease,
    filter 160ms ease;
}

.experience-gastropub-definition {
  width: min(100%, 34rem);
  min-height: 3em;

  margin: 12px 0 0;

  color: #F5F2EA;

  font-size:
    clamp(0.82rem, 1.05vw, 0.96rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;

  text-wrap: balance;

  opacity: 0.88;

  pointer-events: none;
}

@supports (
  (-webkit-mask-image: url("")) or
  (mask-image: url(""))
) {
  .experience-gastropub-mark[
    data-experience-gastropub-active="true"
  ] > span {
    background-color: #F5F2EA;
  }
}

@media (hover: hover) and (pointer: fine) {
  .experience-gastropub-mark:not([data-experience-gastropub-active="true"]):hover > span {
    opacity: 0.9;
    filter: brightness(1.12);
  }
}

.experience-gastropub-mark:focus-visible {
  outline: 2px solid #F5F2EA;
  outline-offset: 8px;
}

.experience-gastropub-mark.is-pressing > span,
.experience-gastropub-mark:active > span {
  opacity: 0.82;
  filter: brightness(1.16);

  /*
   * Presentation-only press feedback for the masked wordmark.
   * No geometric clipping or independent transform is applied.
   */
}

/*
 * Short icon emphasis accompanies the controller-owned
 * rotational kick. Position and rotation remain entirely owned
 * by the existing transform/CSS-variable architecture.
 */
.experience-restaurant-icon {
  transition:
    opacity 160ms ease,
    filter 160ms ease;
}

.experience-restaurant-icon.is-permuting {
  opacity: 0.9;
  filter: brightness(1.1);

}

@media (prefers-reduced-motion: reduce) {
  .experience-gastropub-mark > span,
  .experience-restaurant-icon {
    transition: none !important;
  }

  .experience-gastropub-mark.is-pressing > span,
  .experience-gastropub-mark:active > span,
  .experience-restaurant-icon.is-permuting {
    opacity: 1;
    filter: none;
  }
}

/* ================================================================
   DEVELOPER EASTER EGG FOOTER SIGIL SYSTEM v0.1

   Hidden developer-only ritual:
   ten rapid activations at the exact Footer center reveal EE.svg.

   Transform ownership:
   shell = document positioning only
   float layer = local movement
   art layer = red mask + glow only
   ================================================================ */

.developer-ee-sigil {
  position: absolute;
  z-index: 13;

  width:
    clamp(
      92px,
      7.5vw,
      124px
    );

  aspect-ratio: 1;

  pointer-events: none;
  user-select: none;

  opacity: 1;

  animation:
    developer-ee-sigil-reveal
    720ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;

  /*
   * v0.2b:
   * Allow drift and the red halo to paint outside the sigil shell.
   */
  overflow: visible;
  contain: none;
}

.developer-ee-sigil__float,
.developer-ee-sigil__art {
  display: block;
  width: 100%;
  height: 100%;
}

.developer-ee-sigil__float {
  transform-origin: 50% 50%;

  animation:
    developer-ee-sigil-float
    8.4s
    ease-in-out
    infinite
    alternate;

  will-change: transform;
}

.developer-ee-sigil__art {
  transform-origin: 50% 50%;

  background:
    var(--oxide);

  -webkit-mask:
    url("./assets/easter-egg/EE.svg")
    center / contain
    no-repeat;

  mask:
    url("./assets/easter-egg/EE.svg")
    center / contain
    no-repeat;

  filter:
    drop-shadow(
      0 0 10px
      rgba(178, 58, 46, 0.64)
    )
    drop-shadow(
      0 0 28px
      rgba(178, 58, 46, 0.32)
    );

  animation:
    developer-ee-sigil-glow
    5.2s
    ease-in-out
    infinite;

  will-change:
    transform,
    filter,
    opacity;
}

@keyframes developer-ee-sigil-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes developer-ee-sigil-float {
  0% {
    transform:
      translate3d(
        -4px,
        3px,
        0
      )
      rotate(-0.9deg);
  }

  45% {
    transform:
      translate3d(
        2px,
        -5px,
        0
      )
      rotate(0.35deg);
  }

  100% {
    transform:
      translate3d(
        5px,
        2px,
        0
      )
      rotate(1.05deg);
  }
}

@keyframes developer-ee-sigil-glow {
  0%,
  100% {
    opacity: 0.86;

    transform:
      scale(0.975);

    filter:
      drop-shadow(
        0 0 9px
        rgba(178, 58, 46, 0.58)
      )
      drop-shadow(
        0 0 24px
        rgba(178, 58, 46, 0.28)
      )
      drop-shadow(
        0 0 46px
        rgba(178, 58, 46, 0.14)
      );
  }

  50% {
    opacity: 1;

    transform:
      scale(1.055);

    filter:
      drop-shadow(
        0 0 18px
        rgba(225, 67, 52, 1)
      )
      drop-shadow(
        0 0 44px
        rgba(178, 58, 46, 0.64)
      )
      drop-shadow(
        0 0 76px
        rgba(178, 58, 46, 0.28)
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-sigil,
  .developer-ee-sigil__float,
  .developer-ee-sigil__art {
    animation: none !important;
    will-change: auto;
  }

  .developer-ee-sigil__float {
    transform: none !important;
  }

  .developer-ee-sigil__art {
    opacity: 1;
    transform: none !important;

    filter:
      drop-shadow(
        0 0 10px
        rgba(178, 58, 46, 0.58)
      );
  }
}

/* D'RAILED DEVELOPER EE SIGIL READY REVEAL v0.11d-r3 */
.developer-ee-sigil.is-entering {
  animation:
    developer-ee-sigil-ready-reveal
    460ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;

  will-change:
    opacity,
    filter;
}

.developer-ee-sigil.has-entered {
  animation:
    none;

  opacity:
    1;
}

@keyframes developer-ee-sigil-ready-reveal {
  0% {
    opacity:
      0.08;

    filter:
      blur(4.5px)
      brightness(1.22);
  }

  58% {
    opacity:
      1;

    filter:
      blur(0.55px)
      brightness(1.07);
  }

  100% {
    opacity:
      1;

    filter:
      blur(0)
      brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-sigil.is-entering {
    animation:
      none !important;

    opacity:
      1 !important;

    filter:
      none !important;

    will-change:
      auto;
  }

  .developer-ee-sigil.has-entered {
    animation:
      none;

    opacity:
      1;
  }
}

/* ================================================================
   DEVELOPER EASTER EGG SECRET ACTOR SYSTEM v0.3

   Only floating-10-marbled-steak.webp may consume EE.svg.

   Final circle:
   75% of EE.svg rendered shell diameter.

   Birth:
   25% -> 100% over exactly 2 seconds.

   Transform ownership:
   physics shell = world translation + rotation
   birth layer = one-time 25% -> 100% reveal
   kick layer = click squash
   breath layer = starts only after birth
   crop layer = circular clipping
   image = looping GIF identity
   ================================================================ */

.developer-ee-sigil.is-consuming
  .developer-ee-sigil__float {
  animation-play-state: paused;
}

.developer-ee-sigil.is-consuming
  .developer-ee-sigil__art {
  animation:
    developer-ee-sigil-terminal-pulse
    520ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards !important;
}

@keyframes developer-ee-sigil-terminal-pulse {
  0% {
    opacity: 1;

    transform:
      scale(1);

    filter:
      drop-shadow(
        0 0 20px
        rgba(235, 70, 52, 0.98)
      )
      drop-shadow(
        0 0 52px
        rgba(190, 58, 46, 0.68)
      );
  }

  52% {
    opacity: 1;

    transform:
      scale(1.16);

    filter:
      drop-shadow(
        0 0 34px
        rgba(255, 82, 60, 1)
      )
      drop-shadow(
        0 0 82px
        rgba(220, 64, 48, 0.92)
      )
      drop-shadow(
        0 0 126px
        rgba(178, 58, 46, 0.42)
      );
  }

  100% {
    opacity: 0;

    transform:
      scale(1.28);

    filter:
      drop-shadow(
        0 0 96px
        rgba(178, 58, 46, 0)
      );
  }
}

.developer-ee-secret-actor {
  position: fixed;
  z-index: 13;

  top: 0;
  left: 0;

  display: block;

  pointer-events: none;
  user-select: none;

  transform-origin: 50% 50%;

  will-change: transform;
}

.developer-ee-secret-actor__birth,
.developer-ee-secret-actor__kick,
.developer-ee-secret-actor__breath,
.developer-ee-secret-actor__crop,
.developer-ee-secret-actor__image {
  display: block;

  width: 100%;
  height: 100%;
}

.developer-ee-secret-actor__birth,
.developer-ee-secret-actor__kick,
.developer-ee-secret-actor__breath {
  transform-origin: 50% 50%;
}

/*
 * Exact requested birth:
 * 25% of final visual diameter -> 100% in 2 seconds.
 *
 * Linear scaling keeps the increase continuous and deliberate,
 * with no spring overshoot.
 */
.developer-ee-secret-actor.is-birthing
  .developer-ee-secret-actor__birth {
  animation:
    developer-ee-secret-birth
    2s
    linear
    both;
}

@keyframes developer-ee-secret-birth {
  0% {
    opacity: 0.42;

    transform:
      scale(0.25);
  }

  25% {
    opacity: 0.68;

    transform:
      scale(0.4375);
  }

  50% {
    opacity: 0.84;

    transform:
      scale(0.625);
  }

  75% {
    opacity: 0.94;

    transform:
      scale(0.8125);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);
  }
}

/*
 * Breathing starts only after the two-second birth has finished.
 */
.developer-ee-secret-actor__breath {
  transform:
    scale(1);
}

.developer-ee-secret-actor.is-alive
  .developer-ee-secret-actor__breath {
  animation:
    developer-ee-secret-breathe
    5.1s
    ease-in-out
    infinite;
}

@keyframes developer-ee-secret-breathe {
  0%,
  100% {
    transform:
      scale(0.975);
  }

  50% {
    transform:
      scale(1.04);
  }
}

.developer-ee-secret-actor__crop {
  overflow: hidden;

  border-radius: 50%;

  background:
    #111;
}

.developer-ee-secret-actor__image {
  object-fit: cover;

  /*
   * Preserve the authoritative 500x803 GIF and favor its upper
   * face region inside the non-destructive circular crop.
   */
  object-position:
    50% 12%;

  pointer-events: none;
  user-select: none;
}

.developer-ee-secret-actor.is-kicked
  .developer-ee-secret-actor__kick {
  animation:
    developer-ee-secret-click-kick
    320ms
    cubic-bezier(0.2, 0.9, 0.28, 1.24)
    both;
}

@keyframes developer-ee-secret-click-kick {
  0% {
    transform:
      scale(1);
  }

  32% {
    transform:
      scaleX(0.91)
      scaleY(1.075);
  }

  68% {
    transform:
      scaleX(1.035)
      scaleY(0.975);
  }

  100% {
    transform:
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-sigil.is-consuming
    .developer-ee-sigil__art {
    animation-duration:
      180ms !important;
  }

  .developer-ee-secret-actor {
    will-change: auto;
  }

  .developer-ee-secret-actor.is-birthing
    .developer-ee-secret-actor__birth {
    animation-duration:
      180ms !important;
  }

  .developer-ee-secret-actor.is-alive
    .developer-ee-secret-actor__breath,
  .developer-ee-secret-actor.is-kicked
    .developer-ee-secret-actor__kick {
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
   DEVELOPER EASTER EGG FINAL GATE PLATE TARGET v0.1

   Invisible geometry only. The visible Hero Plate remains the
   protected ::before artwork and owns its existing spring state.
   ================================================================ */

[data-developer-ee-hero-plate-target] {
  display: none;
}

@media (min-width: 900px) {
  [data-developer-ee-hero-plate-target] {
    position: absolute;
    z-index: 0;
    top: -76px;
    left: 50%;

    display: block;

    width: 190px;
    aspect-ratio: 1;

    opacity: 0;
    pointer-events: none;

    transform:
      translate3d(
        calc(-50% + var(--hero-sun-x, 0px)),
        var(--hero-sun-y, 0px),
        0
      )
      rotate(
        var(--hero-sun-rotation, 0deg)
      )
      scale(
        var(--hero-sun-scale, 1)
      );

    transform-origin: 50% 50%;
  }
}

/* ================================================================
   FILETE MIÑONGA SECRET MODAL SYSTEM v0.1

   Separate from Picture Menu and all public modal state.

   Visual direction:
   warm editorial minimalism
   oxblood + aged brass detailing
   deliberately serious secret-menu presentation
   no railroad decoration
   ================================================================ */

.developer-ee-minonga-dialog {
  --ee-minonga-coal:
    #171513;

  --ee-minonga-ivory:
    #f1eadc;

  --ee-minonga-paper:
    #e6dbc8;

  --ee-minonga-oxblood:
    #6f211f;

  --ee-minonga-brass:
    #a9854e;

  width:
    min(
      92vw,
      760px
    );

  max-width:
    760px;

  max-height:
    calc(
      100dvh -
      32px
    );

  margin:
    auto;

  padding:
    0;

  overflow:
    visible;

  border:
    0;

  background:
    transparent;

  color:
    var(
      --ee-minonga-coal
    );
}

.developer-ee-minonga-dialog::backdrop {
  background:
    rgba(
      19,
      15,
      13,
      0.78
    );

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  animation:
    developer-ee-minonga-backdrop-in
    520ms
    ease
    both;
}

.developer-ee-minonga-dialog.is-closing::backdrop {
  animation:
    developer-ee-minonga-backdrop-out
    420ms
    ease
    both;
}

.developer-ee-minonga-dialog__shell {
  position:
    relative;

  max-height:
    calc(
      100dvh -
      32px
    );

  overflow:
    auto;

  padding:
    clamp(
      30px,
      5vw,
      54px
    );

  border:
    1px solid
    rgba(
      169,
      133,
      78,
      0.88
    );

  outline:
    1px solid
    rgba(
      111,
      33,
      31,
      0.72
    );

  outline-offset:
    -8px;

  background:
    linear-gradient(
      145deg,
      #f4eee3 0%,
      var(
        --ee-minonga-ivory
      ) 58%,
      #e7dcc9 100%
    );

  box-shadow:
    0 32px 90px
    rgba(
      0,
      0,
      0,
      0.38
    );

  transform:
    translateY(18px)
    scale(0.97);

  opacity:
    0;

  transition:
    opacity
    620ms
    ease,
    transform
    700ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.developer-ee-minonga-dialog.is-visible
  .developer-ee-minonga-dialog__shell {
  transform:
    translateY(0)
    scale(1);

  opacity:
    1;
}

.developer-ee-minonga-dialog.is-closing
  .developer-ee-minonga-dialog__shell {
  transform:
    translateY(10px)
    scale(0.985);

  opacity:
    0;

  transition-duration:
    360ms;
}

.developer-ee-minonga-dialog__shell::before {
  content:
    "";

  position:
    absolute;

  inset:
    14px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      111,
      33,
      31,
      0.34
    );
}

.developer-ee-minonga-dialog__corner {
  position:
    absolute;

  z-index:
    2;

  width:
    26px;

  height:
    26px;

  pointer-events:
    none;
}

.developer-ee-minonga-dialog__corner--tl {
  top:
    18px;

  left:
    18px;

  border-top:
    1px solid
    var(
      --ee-minonga-brass
    );

  border-left:
    1px solid
    var(
      --ee-minonga-brass
    );
}

.developer-ee-minonga-dialog__corner--tr {
  top:
    18px;

  right:
    18px;

  border-top:
    1px solid
    var(
      --ee-minonga-brass
    );

  border-right:
    1px solid
    var(
      --ee-minonga-brass
    );
}

.developer-ee-minonga-dialog__corner--bl {
  bottom:
    18px;

  left:
    18px;

  border-bottom:
    1px solid
    var(
      --ee-minonga-brass
    );

  border-left:
    1px solid
    var(
      --ee-minonga-brass
    );
}

.developer-ee-minonga-dialog__corner--br {
  right:
    18px;

  bottom:
    18px;

  border-right:
    1px solid
    var(
      --ee-minonga-brass
    );

  border-bottom:
    1px solid
    var(
      --ee-minonga-brass
    );
}

.developer-ee-minonga-dialog__close {
  position:
    absolute;

  z-index:
    4;

  top:
    18px;

  right:
    20px;

  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      111,
      33,
      31,
      0.32
    );

  border-radius:
    50%;

  background:
    rgba(
      241,
      234,
      220,
      0.78
    );

  color:
    var(
      --ee-minonga-oxblood
    );

  font:
    inherit;

  font-size:
    24px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    transform
    180ms
    ease,
    border-color
    180ms
    ease,
    background
    180ms
    ease;
}

.developer-ee-minonga-dialog__close:hover,
.developer-ee-minonga-dialog__close:focus-visible {
  border-color:
    var(
      --ee-minonga-brass
    );

  background:
    var(
      --ee-minonga-paper
    );

  transform:
    scale(1.055);
}

.developer-ee-minonga-dialog__close:focus-visible {
  outline:
    2px solid
    var(
      --ee-minonga-oxblood
    );

  outline-offset:
    3px;
}

.developer-ee-minonga-dialog__media {
  position:
    relative;

  width:
    min(
      100%,
      430px
    );

  aspect-ratio:
    4 / 3;

  margin:
    0 auto
    clamp(
      26px,
      4vw,
      38px
    );

  padding:
    6px;

  border:
    1px solid
    rgba(
      169,
      133,
      78,
      0.86
    );

  background:
    var(
      --ee-minonga-coal
    );

  box-shadow:
    0 16px 38px
    rgba(
      23,
      21,
      19,
      0.18
    );
}

.developer-ee-minonga-dialog__media::after {
  content:
    "";

  position:
    absolute;

  inset:
    11px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      111,
      33,
      31,
      0.62
    );
}

.developer-ee-minonga-dialog__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  background:
    #100e0d;

  user-select:
    none;
}

.developer-ee-minonga-dialog__copy {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      100%,
      610px
    );

  margin:
    0 auto;

  text-align:
    center;
}

.developer-ee-minonga-dialog__eyebrow {
  margin:
    0 0 10px;

  color:
    var(
      --ee-minonga-oxblood
    );

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}

.developer-ee-minonga-dialog__title {
  margin:
    0;

  color:
    var(
      --ee-minonga-coal
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.1rem,
      6vw,
      4.25rem
    );

  font-weight:
    500;

  letter-spacing:
    0.015em;

  line-height:
    0.94;
}

.developer-ee-minonga-dialog__subtitle {
  margin:
    15px 0 0;

  color:
    var(
      --ee-minonga-oxblood
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1rem,
      2.2vw,
      1.2rem
    );

  font-style:
    italic;

  letter-spacing:
    0.015em;
}

.developer-ee-minonga-dialog__description {
  margin:
    clamp(
      24px,
      4vw,
      32px
    )
    auto
    0;

  color:
    rgba(
      23,
      21,
      19,
      0.86
    );

  font-size:
    clamp(
      0.93rem,
      1.5vw,
      1.02rem
    );

  line-height:
    1.72;
}

.developer-ee-minonga-dialog__availability {
  margin:
    28px 0 0;

  padding-top:
    19px;

  border-top:
    1px solid
    rgba(
      169,
      133,
      78,
      0.52
    );

  color:
    rgba(
      23,
      21,
      19,
      0.58
    );

  font-size:
    0.71rem;

  font-style:
    italic;

  letter-spacing:
    0.08em;
}

@keyframes developer-ee-minonga-backdrop-in {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}

@keyframes developer-ee-minonga-backdrop-out {
  from {
    opacity:
      1;
  }

  to {
    opacity:
      0;
  }
}

@media (max-width: 599px) {
  .developer-ee-minonga-dialog {
    width:
      calc(
        100vw -
        20px
      );

    max-height:
      calc(
        100dvh -
        20px
      );
  }

  .developer-ee-minonga-dialog__shell {
    max-height:
      calc(
        100dvh -
        20px
      );

    padding:
      58px 24px
      30px;
  }

  .developer-ee-minonga-dialog__corner {
    width:
      20px;

    height:
      20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-dialog::backdrop,
  .developer-ee-minonga-dialog.is-closing::backdrop {
    animation-duration:
      1ms !important;
  }

  .developer-ee-minonga-dialog__shell,
  .developer-ee-minonga-dialog.is-visible
    .developer-ee-minonga-dialog__shell,
  .developer-ee-minonga-dialog.is-closing
    .developer-ee-minonga-dialog__shell {
    transform:
      none;

    transition-duration:
      1ms !important;
  }

  .developer-ee-minonga-dialog__close {
    transition:
      none;
  }
}

/* FILETE MIÑONGA CINEMATIC + PICTURE-MENU PARITY SYSTEM v0.5a */

/*
 * Steak proxy owns only its own fixed travel transform.
 * It is outside the protected normal Chef actor controller.
 */

.developer-ee-steak-cinematic-proxy {
  --developer-ee-steak-x: 0px;
  --developer-ee-steak-y: 0px;
  --developer-ee-steak-r: 0deg;
  --developer-ee-steak-scale: 1;

  position: fixed;
  z-index: 14;
  top: 0;
  left: 0;

  pointer-events: none;
  user-select: none;

  transform:
    translate3d(
      var(--developer-ee-steak-x),
      var(--developer-ee-steak-y),
      0
    )
    rotate(
      var(--developer-ee-steak-r)
    )
    scale(
      var(--developer-ee-steak-scale)
    );

  transform-origin:
    center center;

  will-change:
    transform,
    filter;
}

.developer-ee-steak-cinematic-proxy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * Priming affects paint only.
 * The approved sigil shell/art transform ownership is untouched.
 */

.developer-ee-sigil.is-curse-primed {
  filter:
    drop-shadow(
      0 0 12px
      rgba(178, 58, 46, 0.82)
    )
    drop-shadow(
      0 0 28px
      rgba(178, 58, 46, 0.54)
    );

  animation:
    developer-ee-sigil-curse-prime
    620ms
    ease-in-out
    infinite
    alternate;
}

@keyframes developer-ee-sigil-curse-prime {
  from {
    filter:
      drop-shadow(
        0 0 10px
        rgba(178, 58, 46, 0.72)
      )
      drop-shadow(
        0 0 22px
        rgba(178, 58, 46, 0.42)
      );
  }

  to {
    filter:
      drop-shadow(
        0 0 18px
        rgba(178, 58, 46, 0.96)
      )
      drop-shadow(
        0 0 42px
        rgba(178, 58, 46, 0.72)
      );
  }
}

/*
 * Final Gate release acts on the nested crop.
 * The secret actor wrapper remains the sole translation/rotation owner.
 */

.developer-ee-secret-actor.is-final-gate-releasing
  .developer-ee-secret-actor__crop {
  animation:
    developer-ee-final-gate-release
    560ms
    cubic-bezier(0.22, 0.61, 0.36, 1)
    both;
}

@keyframes developer-ee-final-gate-release {
  0% {
    scale: 1;
    opacity: 1;

    filter:
      brightness(1)
      saturate(1);
  }

  55% {
    scale: 1.11;
    opacity: 1;

    filter:
      brightness(1.35)
      saturate(0.9)
      drop-shadow(
        0 0 24px
        rgba(245, 242, 234, 0.76)
      );
  }

  100% {
    scale: 1.24;
    opacity: 0;

    filter:
      brightness(1.7)
      saturate(0.72)
      drop-shadow(
        0 0 46px
        rgba(245, 242, 234, 0.88)
      );
  }
}

/*
 * Native dialog keeps the approved Picture Menu outer
 * entrance/exit/backdrop language through .dish-gallery.
 */

.developer-ee-minonga-dialog {
  width:
    min(
      720px,
      calc(100vw - 32px)
    );

  max-height:
    calc(100dvh - 24px);
}

.developer-ee-minonga-dialog__frame {
  --gallery-float-x: 0px;
  --gallery-float-y: 0px;
  --gallery-float-r: 0deg;

  width: 100%;

  max-height:
    calc(100dvh - 24px);

  padding:
    clamp(
      22px,
      3vw,
      40px
    );

  overflow: visible;
}

.developer-ee-minonga-dialog__float {
  --minonga-float-x: 0px;
  --minonga-float-y: 0px;
  --minonga-float-r: 0deg;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  transform:
    translate3d(
      var(--minonga-float-x),
      var(--minonga-float-y),
      0
    )
    rotate(
      var(--minonga-float-r)
    );

  transform-origin:
    center center;

  will-change:
    transform;
}

.developer-ee-minonga-dialog__close {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -4px;

  min-width: 0;
  min-height: 32px;

  margin: 0;
  padding: 4px 7px;

  border: 1px solid #0F0F0F;
  border-radius: 0;

  background: #F5F2EA;
  color: #0F0F0F;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
}

.developer-ee-minonga-dialog__close:focus-visible {
  outline:
    2px solid #B23A2E;

  outline-offset:
    3px;
}

.developer-ee-minonga-dialog__title {
  width: 100%;

  margin:
    10px
    42px
    4px;

  color: #0F0F0F;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size:
    clamp(
      2rem,
      5vw,
      4.25rem
    );

  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-align: center;
}

.developer-ee-minonga-dialog__subtitle {
  margin:
    0
    0
    clamp(
      18px,
      2.4vw,
      30px
    );

  color: #B23A2E;

  font-family:
    "Barlow",
    Arial,
    sans-serif;

  font-size:
    clamp(
      0.82rem,
      1.4vw,
      1rem
    );

  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.055em;
  text-align: center;
}

.developer-ee-minonga-dialog__media {
  width:
    min(
      430px,
      72vw,
      calc(
        (
          100dvh -
          230px
        ) *
        0.5387931034
      )
    );

  aspect-ratio:
    250 / 464;

  max-height:
    64dvh;

  overflow: hidden;

  border:
    1px solid
    rgba(
      15,
      15,
      15,
      0.88
    );

  background:
    #0F0F0F;
}

.developer-ee-minonga-dialog__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 520px) {
  .developer-ee-minonga-dialog {
    width:
      calc(
        100vw -
        16px
      );
  }

  .developer-ee-minonga-dialog__frame {
    padding:
      18px;
  }

  .developer-ee-minonga-dialog__title {
    margin-top:
      18px;
  }

  .developer-ee-minonga-dialog__media {
    width:
      min(
        82vw,
        calc(
          (
            100dvh -
            220px
          ) *
          0.5387931034
        )
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-steak-cinematic-proxy {
    transition: none !important;
  }

  .developer-ee-sigil.is-curse-primed,
  .developer-ee-secret-actor.is-final-gate-releasing
    .developer-ee-secret-actor__crop {
    animation: none !important;
  }

  .developer-ee-minonga-dialog__float {
    transform: none !important;
    will-change: auto;
  }
}


/* FILETE MIÑONGA COLLECTOR CARD SYSTEM v0.5b */

.developer-ee-minonga-dialog {
  width:
    min(
      366px,
      calc(100vw - 16px)
    );
  max-width: none;
  max-height:
    calc(100dvh - 12px);
}

.developer-ee-minonga-dialog__frame {
  perspective: 1000px;
}

.developer-ee-minonga-card {
  --minonga-tilt-x: 0deg;
  --minonga-tilt-y: 0deg;
  --minonga-light-x: 50%;
  --minonga-light-y: 32%;

  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;

  padding:
    13px
    13px
    15px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      178,
      58,
      46,
      0.88
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.16
      ),
      rgba(
        15,
        15,
        15,
        0.025
      )
    ),
    #F5F2EA;

  box-shadow:
    0
    18px
    38px
    rgba(
      15,
      15,
      15,
      0.17
    ),
    inset
    0
    0
    0
    5px
    #F5F2EA,
    inset
    0
    0
    0
    6px
    rgba(
      142,
      108,
      54,
      0.44
    );

  transform:
    perspective(1000px)
    rotateX(
      var(--minonga-tilt-x)
    )
    rotateY(
      var(--minonga-tilt-y)
    )
    translateZ(0);

  transform-style:
    preserve-3d;

  transform-origin:
    50%
    50%;

  transition:
    transform
      360ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    box-shadow
      360ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );

  will-change:
    transform;
}

.developer-ee-minonga-card::before {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 7px;

  border:
    1px solid
    rgba(
      142,
      108,
      54,
      0.34
    );

  pointer-events: none;
}

.developer-ee-minonga-card::after {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 0;

  background:
    radial-gradient(
      circle
        at
        var(--minonga-light-x)
        var(--minonga-light-y),
      rgba(
        255,
        255,
        255,
        0.34
      ),
      rgba(
        255,
        255,
        255,
        0
      )
        44%
    );

  opacity: 0.54;

  pointer-events: none;

  transition:
    opacity
      260ms
      ease;
}

.developer-ee-minonga-card[
  data-minonga-tilting="true"
] {
  box-shadow:
    0
    24px
    48px
    rgba(
      15,
      15,
      15,
      0.21
    ),
    inset
    0
    0
    0
    5px
    #F5F2EA,
    inset
    0
    0
    0
    6px
    rgba(
      142,
      108,
      54,
      0.48
    );
}

.developer-ee-minonga-card__header {
  position: relative;
  z-index: 2;

  flex:
    0
    0
    auto;

  align-items:
    flex-start;

  transform:
    translateZ(
      18px
    );

  transform-style:
    preserve-3d;
}

.developer-ee-minonga-card__heading {
  min-width: 0;
  padding-right: 8px;
}

.developer-ee-minonga-card__title {
  margin: 0;

  color: #0F0F0F;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size:
    clamp(
      1.62rem,
      4.8vw,
      2rem
    );

  font-weight: 700;

  line-height: 0.94;

  letter-spacing:
    0.025em;

  text-transform:
    uppercase;
}

.developer-ee-minonga-card__description {
  margin:
    7px
    0
    0;

  color:
    rgba(
      15,
      15,
      15,
      0.68
    );

  font-family:
    "Barlow",
    Arial,
    sans-serif;

  font-size:
    0.72rem;

  font-weight: 500;

  line-height: 1.2;

  letter-spacing:
    0.055em;
}

.developer-ee-minonga-card__media {
  position: relative;
  z-index: 1;

  flex:
    1
    1
    auto;

  align-self: center;

  min-width: 0;
  min-height: 0;

  width: 78%;

  margin:
    15px
    auto
    1px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      15,
      15,
      15,
      0.94
    );

  background: #0F0F0F;

  box-shadow:
    0
    10px
    20px
    rgba(
      15,
      15,
      15,
      0.17
    );

  transform:
    translateZ(
      13px
    );

  transform-style:
    preserve-3d;
}

.developer-ee-minonga-card__image {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 0;

  object-fit: cover;
  object-position:
    50%
    50%;

  background: #0F0F0F;
}

@media (max-width: 380px) {
  .developer-ee-minonga-dialog {
    width:
      calc(
        100vw -
        12px
      );
  }

  .developer-ee-minonga-card {
    padding:
      11px
      11px
      13px;
  }

  .developer-ee-minonga-card__media {
    width: 82%;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-card,
  .developer-ee-minonga-card__header,
  .developer-ee-minonga-card__media {
    transform:
      none !important;

    transition:
      none !important;

    will-change:
      auto;
  }

  .developer-ee-minonga-card::after {
    opacity: 0.2;
    transition: none;
  }
}
/* ================================================================
   INTERACTION OWNERSHIP + NO-SELECTION POLICY v0.7a

   Rapid clicking is part of D'railed's interactive language.
   Browser text-selection/drag behavior must not compete with it.

   Floating actor wrappers are genuine hit-test surfaces even though
   their fixed parent arena intentionally remains pointer-transparent.
   ================================================================ */

html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/*
 * The parent arena remains pointer-events:none by design.
 * Explicit auto on the moving child overrides the inherited value
 * and makes the visible object—not content behind it—the pointer target.
 */
.foreground-floating-actor,
.developer-ee-secret-actor:not(.is-final-gate-releasing) {
  pointer-events: auto !important;

  -webkit-user-drag: none;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}

/*
 * Nested visual layers never own hit testing.
 * The wrapper owns the complete physical gesture.
 */
.foreground-floating-actor *,
.developer-ee-secret-actor * {
  pointer-events: none !important;

  -webkit-user-drag: none;
  user-drag: none;

  -webkit-user-select: none;
  user-select: none;
}

/*
 * Once the Final Gate disappearance begins, the Secret Actor no longer
 * accepts new user gestures. This also prevents its invisible wrapper
 * from blocking the page after opacity reaches zero.
 */
.developer-ee-secret-actor.is-final-gate-releasing {
  pointer-events: none !important;
}

/* ================================================================
   FILETE MIÑONGA ONE-SURFACE MODAL SYSTEM v0.7b

   Architecture:

   Native dialog
     technical top-layer / backdrop / travel only

   Dialog frame
     transparent perspective carrier only

   Miñonga card
     THE ONLY VISIBLE MODAL SURFACE
     and existing pointer-tilt owner

   No second visible panel.
   No double perimeter.
   No ornamental side gutters.
   ================================================================ */

.developer-ee-minonga-dialog {
  width:
    min(
      292px,
      calc(100vw - 24px)
    ) !important;

  max-width:
    none !important;

  max-height:
    calc(100dvh - 20px) !important;

  padding:
    0 !important;

  border:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;

  perspective:
    1100px;
}


/*
 * Retain this node because it is the perspective carrier and may
 * inherit Picture Menu motion state, but remove every visible panel
 * characteristic from it.
 */
.developer-ee-minonga-dialog__frame {
  width:
    100% !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  outline:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;

  perspective:
    1100px !important;

  transform-style:
    preserve-3d;
}


.developer-ee-minonga-dialog__frame::before,
.developer-ee-minonga-dialog__frame::after {
  content:
    none !important;

  display:
    none !important;
}


/*
 * The collector card is now the entire visible modal.
 *
 * Do not override its transform. Existing JavaScript continues to
 * own --minonga-tilt-x / --minonga-tilt-y and therefore the whole
 * visible surface retains the approved 3D pointer response.
 */
.developer-ee-minonga-card {
  position:
    relative;

  box-sizing:
    border-box;

  width:
    100% !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    calc(100dvh - 20px);

  margin:
    0 !important;

  padding:
    15px
    15px
    17px !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgb(
      178 58 46 /
      78%
    ) !important;

  border-radius:
    1px !important;

  background:
    #F5F2EA !important;

  box-shadow:
    0
    22px
    58px
    rgb(
      15 15 15 /
      30%
    ) !important;

  transform-style:
    preserve-3d;

  transform-origin:
    center center;

  will-change:
    transform;
}


/*
 * Remove collector-card gloss, inner framing and graphic ornament.
 * The card itself is enough.
 */
.developer-ee-minonga-card::before,
.developer-ee-minonga-card::after {
  content:
    none !important;

  display:
    none !important;

  opacity:
    0 !important;
}


/*
 * Header becomes straightforward editorial typography rather than
 * another depth plane inside the card.
 */
.developer-ee-minonga-card__header {
  margin:
    0 0 11px !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


.developer-ee-minonga-card__heading {
  margin:
    0 !important;

  padding:
    0 !important;
}


.developer-ee-minonga-card__title {
  margin:
    0 !important;

  max-width:
    calc(100% - 34px);

  color:
    #0F0F0F;

  line-height:
    0.94;
}


/*
 * Use the available card width instead of placing the GIF inside a
 * narrow 82% inner column.
 */
.developer-ee-minonga-card__media {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    hidden;

  transform:
    none !important;
}


.developer-ee-minonga-card__image {
  display:
    block;

  width:
    100% !important;

  max-width:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  object-fit:
    contain;

  border:
    0 !important;

  box-shadow:
    none !important;
}


.developer-ee-minonga-card__description {
  margin:
    13px 0 0 !important;

  padding:
    0 !important;

  max-width:
    none !important;

  color:
    #0F0F0F;

  font-size:
    0.82rem;

  line-height:
    1.42;
}


/*
 * Support either current or legacy close-class naming.
 * JS reparents the already-wired node into the card.
 */
.developer-ee-minonga-dialog
  :is(
    .dish-gallery__close,
    .developer-ee-minonga-dialog__close
  ) {
  position:
    absolute !important;

  z-index:
    8;

  top:
    9px !important;

  right:
    9px !important;

  width:
    27px;

  min-width:
    27px !important;

  height:
    27px;

  min-height:
    27px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    #0F0F0F !important;

  box-shadow:
    none !important;

  translate:
    none !important;

  scale:
    1 !important;
}


/*
 * Retire legacy decorative Miñonga elements if an older controller
 * happens to create them. They no longer belong in the one-surface
 * design.
 */
.developer-ee-minonga-dialog__corner {
  display:
    none !important;
}


@media (max-width: 420px) {
  .developer-ee-minonga-dialog {
    width:
      min(
        282px,
        calc(100vw - 18px)
      ) !important;
  }

  .developer-ee-minonga-card {
    padding:
      13px
      13px
      15px !important;
  }

  .developer-ee-minonga-card__description {
    margin-top:
      11px !important;

    font-size:
      0.78rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-card {
    transform:
      none !important;

    transition:
      none !important;

    will-change:
      auto;
  }

  .developer-ee-minonga-card__header,
  .developer-ee-minonga-card__media {
    transform:
      none !important;

    transition:
      none !important;
  }
}
/* FILETE MIÑONGA ARTBOARD SURFACE v0.8d
 *
 * ARTBOARD = MODAL.
 *
 * The approved 2:3 Minonga artwork is the complete visible card.
 * The stable v0.7c frame remains the pointer-coordinate authority.
 * EE2.gif is clipped only by the measured center aperture.
 */
.developer-ee-minonga-dialog {
  width:
    min(
      387.39px,
      calc(100vw - 24px),
      calc(66.6667vh - 16px)
    ) !important;
  width:
    min(
      387.39px,
      calc(100vw - 24px),
      calc(66.6667dvh - 16px)
    ) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.developer-ee-minonga-dialog__frame {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.developer-ee-minonga-card {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;
  background-image:
    url("./assets/easter-egg/Minonga-Modal-BG.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;

  box-shadow: none !important;

  /*
   * v0.7c continues to own:
   * --minonga-tilt-x
   * --minonga-tilt-y
   * and the card transform itself.
   */
  transform-style: preserve-3d !important;
}

.developer-ee-minonga-card__header,
.developer-ee-minonga-card__heading {
  display: contents !important;
}

/*
 * Exact transparent center aperture from the 1024x1536 master:
 * x=117, y=331, width=793, height=872.
 *
 * The media stays inside this opening so the artwork itself remains
 * completely visible and never needs to crop.
 */
.developer-ee-minonga-card__media {
  position: absolute !important;
  left: 11.4258% !important;
  top: 21.5495% !important;
  width: 77.4414% !important;
  height: 56.7708% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  border: 0 !important;
  border-radius: 3.5% !important;

  background: #050505 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 1 !important;
}

.developer-ee-minonga-card__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: cover !important;
  object-position: 50% 50% !important;

  border: 0 !important;
  border-radius: 0 !important;

  /*
   * Center is authoritative.
   * Because EE2.gif is substantially taller than the aperture,
   * cover discards top/bottom rather than stretching the subject.
   */
  transform: none !important;
}

/*
 * FILETE MIÑONGA lives inside the dedicated upper gray panel.
 * The warm ivory was chosen for clear contrast without fighting the
 * multicolor metal artwork.
 */
.developer-ee-minonga-card__title {
  position: absolute !important;
  left: 14.6484% !important;
  top: 6.8359% !important;
  width: 60.5469% !important;
  height: 9.4401% !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #f6f0e7 !important;

  font-size:
    clamp(
      0.74rem,
      3.6vw,
      1rem
    ) !important;

  line-height: 1.05 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-wrap: balance;

  z-index: 3 !important;
  pointer-events: none !important;
}

/*
 * Short description lives only in the lower clear metal panel.
 */
.developer-ee-minonga-card__description {
  position: absolute !important;
  left: 18.5547% !important;
  top: 86.7188% !important;
  width: 62.8906% !important;
  height: 5.3385% !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #eee6dc !important;

  font-size:
    clamp(
      0.5rem,
      2vw,
      0.6rem
    ) !important;

  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-wrap: balance;

  z-index: 3 !important;
  pointer-events: none !important;
}

/*
 * The artwork already contains its own X.
 * Per approved behavior, Escape and outside-click remain the modal
 * dismissal mechanisms; no duplicate visual Close control is shown.
 */
.developer-ee-minonga-card > .dish-gallery__close,
.developer-ee-minonga-dialog .developer-ee-minonga-dialog__close {
  display: none !important;
}

/*
 * Existing visual corners belong to the previous collector-card
 * presentation and must not sit above the new artboard.
 */
.developer-ee-minonga-dialog .dish-gallery__corner,
.developer-ee-minonga-card .dish-gallery__corner {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-card {
    transform: none !important;
  }
}
/* FILETE MIÑONGA TYPOGRAPHY CORRECTION v0.8d-r3
 *
 * Typography-only refinement.
 * v0.8d artboard, media aperture and v0.7c 3D sensor remain untouched.
 */

/*
 * Optical center for the broad upper gray display plate.
 */
.developer-ee-minonga-card__title {
  left: 15.25% !important;
  top: 7.55% !important;
  width: 61.5% !important;
  height: 8.35% !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size:
    clamp(
      0.76rem,
      3.6vw,
      1.02rem
    ) !important;

  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: #f8f1e8 !important;

  /* FILETE MIÑONGA TITLE LEGIBILITY EDGE v0.11c-r1 */
  text-shadow:
    0 0 0.45px rgba(18, 14, 13, 0.56),
    0 0.7px 0.8px rgba(18, 14, 13, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 7px rgba(255, 255, 255, 0.20),
    0 0 13px rgba(255, 143, 76, 0.16),
    0 0 18px rgba(69, 214, 255, 0.12) !important;

  z-index: 3 !important;
}

/*
 * One semantic H2; the animated energy moves only through its glyphs.
 */
@supports (
  (-webkit-background-clip: text) or
  (background-clip: text)
) {
  .developer-ee-minonga-card__title {
    /*
     * Permanent seamless rainbow belt.
     *
     * Color coverage exists across the complete title at every
     * animation frame. Opacity, brightness and glow never animate.
     */
    background-image:
      repeating-linear-gradient(
        100deg,
        #ff3d48 0%,
        #ff8a32 6%,
        #ffd84a 12%,
        #74e76d 18%,
        #38e7df 24%,
        #45a8ff 30%,
        #8757ff 36%,
        #ec4cff 42%,
        #ff5577 47%,
        #ff3d48 50%
      ) !important;

    background-size:
      200% 100% !important;

    background-position:
      0% 50%;

    background-repeat:
      repeat-x !important;

    -webkit-background-clip:
      text !important;

    background-clip:
      text !important;

    -webkit-text-fill-color:
      transparent !important;

    color:
      transparent !important;

    opacity:
      1 !important;

    filter:
      none !important;

    animation:
      developer-ee-minonga-title-rainbow 4.8s linear infinite !important;
  }
}

@keyframes developer-ee-minonga-title-rainbow {
  0% {
    background-position:
      0% 50%;
  }

  100% {
    background-position:
      200% 50%;
  }
}

/*
 * Short caption safely centered within the lower clear panel.
 */
.developer-ee-minonga-card__description {
  /*
   * Card center is the positioning authority.
   * The element's own width can now change without shifting its
   * visual center left or right.
   */
  left: 50% !important;
  top: 85.9% !important;
  width: 36% !important;
  height: 5.35% !important;

  right: auto !important;

  transform:
    translateX(-50%) !important;

  box-sizing:
    border-box !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;

  padding:
    0 0.18rem !important;

  color: #e9e3dc !important;

  font-size:
    clamp(
      0.36rem,
      1.35vw,
      0.43rem
    ) !important;

  line-height: 1.16 !important;
  font-weight: 450 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;

  max-inline-size:
    none !important;

  justify-self:
    auto !important;

  text-wrap: balance;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.44) !important;

  z-index: 3 !important;
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-card__title {
    animation: none !important;
    background-position: 50% 50% !important;
    filter: none !important;
  }
}

@media (forced-colors: active) {
  .developer-ee-minonga-card__title {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color:
      currentColor !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  .developer-ee-minonga-card__description {
    color: CanvasText !important;
    text-shadow: none !important;
  }
}
/* D'RAILED DEVELOPER EE RITUAL NOTES ANCIENT TABLET SURFACE v0.10-r3
 *
 * Transform ownership:
 *
 * .developer-ee-ritual-notes
 *   = fixed, UNTRANSFORMED pointer-coordinate authority
 *
 * __stage
 *   = entrance / exit
 *
 * __float
 *   = ambient levitation
 *
 * __tablet
 *   = pointer tilt / physical press
 *
 * The artboard itself remains the complete visible object.
 */

.developer-ee-ritual-notes {
  position: fixed;

  z-index: 70;

  top:
    clamp(
      70px,
      8.5vh,
      96px
    );

  left:
    clamp(
      12px,
      2.25vw,
      32px
    );

  /*
   * Ritual Notes v0.10-r3:
   * 30% larger than the approved 322.825px Miñonga baseline.
   *
   * Preferred width:
   * 322.825px * 1.30 = 419.6725px.
   *
   * The viewport-height allowance is increased proportionally,
   * while 100vw - 24px remains the final small-screen safety cap.
   */
  /*
   * v0.11d-r3:
   * 419.6725px * 1.20 = 503.607px.
   *
   * The v0.10-r3 calculation above remains historical context.
   * Existing viewport safety caps remain authoritative.
   */
  width:
    min(
      503.607px,
      calc(100vw - 24px),
      calc(86.6667vh - 16px)
    );

  width:
    min(
      503.607px,
      calc(100vw - 24px),
      calc(86.6667dvh - 16px)
    );

  height: auto;
  aspect-ratio: 2 / 3;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  /*
   * This node must remain untransformed because JavaScript reads
   * its bounding box for pointer coordinates.
   */
  transform: none;

  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  user-select: none;
}

.developer-ee-ritual-notes[hidden] {
  display: none !important;
}

.developer-ee-ritual-notes__stage,
.developer-ee-ritual-notes__float,
.developer-ee-ritual-notes__tablet {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
}

.developer-ee-ritual-notes__stage {
  position: relative;

  transform-origin:
    50% 50%;

  transform-style:
    preserve-3d;

  will-change:
    transform,
    opacity,
    filter;
}

.developer-ee-ritual-notes__float {
  position: relative;

  transform-origin:
    50% 50%;

  animation:
    developer-ee-ritual-tablet-float
    5.4s
    ease-in-out
    infinite
    alternate;

  will-change:
    transform;
}

.developer-ee-ritual-notes__tablet {
  --ritual-tilt-x: 0deg;
  --ritual-tilt-y: 0deg;
  --ritual-touch-scale: 1;

  position: relative;

  box-sizing: border-box;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    url("./assets/easter-egg/EE-Modal-BG.webp")
    center / 100% 100%
    no-repeat;

  isolation: isolate;

  transform:
    perspective(900px)
    rotateX(
      var(--ritual-tilt-x)
    )
    rotateY(
      var(--ritual-tilt-y)
    )
    scale(
      var(--ritual-touch-scale)
    );

  transform-origin:
    50% 50%;

  transform-style:
    preserve-3d;

  transition:
    transform
    145ms
    cubic-bezier(0.22, 1, 0.36, 1);

  filter:
    drop-shadow(
      0 15px 27px
      rgba(15, 10, 6, 0.30)
    );

  will-change:
    transform;
}


/* ============================================================
   MATERIALIZATION / DISAPPEARANCE
   ============================================================ */

.developer-ee-ritual-notes[
  data-developer-ee-ritual-notes-state="entering"
] .developer-ee-ritual-notes__stage {
  animation:
    developer-ee-ritual-tablet-materialize
    520ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.developer-ee-ritual-notes[
  data-developer-ee-ritual-notes-state="exiting"
] .developer-ee-ritual-notes__stage {
  animation:
    developer-ee-ritual-tablet-dematerialize
    440ms
    cubic-bezier(0.55, 0, 0.85, 0.45)
    both;
}

@keyframes developer-ee-ritual-tablet-materialize {
  0% {
    opacity: 0;

    transform:
      rotateX(-6deg)
      rotateZ(-0.55deg)
      scale(0.84);

    filter:
      blur(7px)
      brightness(1.22);
  }

  58% {
    opacity: 1;

    transform:
      rotateX(0.8deg)
      rotateZ(0.12deg)
      scale(1.02);

    filter:
      blur(0.7px)
      brightness(1.06);
  }

  100% {
    opacity: 1;

    transform:
      rotateX(0deg)
      rotateZ(0deg)
      scale(1);

    filter:
      blur(0)
      brightness(1);
  }
}

@keyframes developer-ee-ritual-tablet-dematerialize {
  0% {
    opacity: 1;

    transform:
      rotateX(0deg)
      rotateZ(0deg)
      scale(1);

    filter:
      blur(0)
      brightness(1);
  }

  100% {
    opacity: 0;

    transform:
      rotateX(5deg)
      rotateZ(-0.38deg)
      scale(0.92);

    filter:
      blur(4px)
      brightness(0.82);
  }
}


/* ============================================================
   CONTINUOUS FLOATING ARTIFACT
   ============================================================ */

@keyframes developer-ee-ritual-tablet-float {
  0% {
    transform:
      translate3d(
        0,
        -3px,
        0
      )
      rotateZ(-0.38deg);
  }

  50% {
    transform:
      translate3d(
        1px,
        1px,
        0
      )
      rotateZ(0.16deg);
  }

  100% {
    transform:
      translate3d(
        -1px,
        4px,
        0
      )
      rotateZ(0.46deg);
  }
}


/* ============================================================
   PARCHMENT SAFE AREA
   ============================================================ */

/*
 * Conservative inner rectangle:
 *
 * The decorative border remains completely unobstructed.
 * The larger Miñonga-sized tablet plus abbreviated clue copy
 * provides readability without pushing type into the frame.
 */
.developer-ee-ritual-notes__content {
  position: absolute;

  z-index: 2;

  /*
   * Measured from authoritative 1024x1536 EE-Modal-BG.png.
   *
   * Light rectangle:
   * x=270, y=293, w=500, h=876.
   *
   * Inner safe area:
   * x=340, y=354, w=360, h=754.
   *
   * Horizontal centering is made exact in CSS rather than
   * inheriting the artwork's ~0.78% optical asymmetry.
   */
  left: 50%;
  top: 23.0469%;

  width: 35.1562%;
  height: 49.0885%;

  transform:
    translateX(-50%);

  box-sizing: border-box;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;

  color:
    #563a28;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  font-size:
    clamp(
      0.39rem,
      1.20vw,
      0.47rem
    );

  font-weight: 450;

  line-height: 1.23;

  letter-spacing:
    0.016em;

  text-align: center;

  /*
   * Restrained carved-groove treatment:
   * a faint warm lower rim and shallow dark upper incision.
   */
  text-shadow:
    0 0.65px 0
      rgba(238, 205, 157, 0.34),
    0 -0.65px 0
      rgba(54, 31, 20, 0.42),
    0 0 0.7px
      rgba(45, 25, 16, 0.20);

  transition:
    color 180ms ease,
    text-shadow 220ms ease,
    filter 220ms ease;

  pointer-events: none;
}

.developer-ee-ritual-notes__title {
  margin:
    0
    0
    0.48rem;

  color: inherit;

  font-size:
    clamp(
      0.62rem,
      2.05vw,
      0.80rem
    );

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.095em;

  text-align: center;

  text-transform: uppercase;
}

.developer-ee-ritual-notes__clue {
  margin:
    0
    0
    0.22rem;

  text-align:
    center;
}

.developer-ee-ritual-notes__clue strong,
.developer-ee-ritual-notes__final strong {
  font-weight: 800;

  letter-spacing:
    0.065em;
}

.developer-ee-ritual-notes__section-label {
  margin:
    0.08rem
    0
    0.06rem;

  font-size:
    0.92em;

  font-weight: 700;

  letter-spacing:
    0.085em;

  text-align:
    center;
}

.developer-ee-ritual-notes__signs {
  flex:
    1 1 auto;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  min-height: 0;

  margin:
    0.03rem
    0
    0.10rem;

  padding: 0;

  list-style-position:
    inside;

  font-variant-numeric:
    tabular-nums;

  text-align:
    center;
}

.developer-ee-ritual-notes__signs li {
  margin: 0;
  padding: 0;

  line-height:
    1.18;
}

.developer-ee-ritual-notes__final {
  margin:
    0.08rem
    0
    0;

  font-weight: 600;

  text-align: center;
}


/* ============================================================
   TOUCH / POINTER — AWAKEN THE ENGRAVED LETTERS
   ============================================================ */

.developer-ee-ritual-notes[
  data-developer-ee-ritual-energy="active"
] .developer-ee-ritual-notes__content {
  color:
    #8f201b;

  text-shadow:
    0 1px 0
      rgba(255, 190, 139, 0.52),
    0 -1px 0
      rgba(62, 12, 8, 0.68),
    0 0 3px
      rgba(176, 35, 28, 0.72),
    0 0 8px
      rgba(176, 35, 28, 0.48),
    0 0 13px
      rgba(129, 20, 17, 0.28);

  filter:
    saturate(1.16)
    brightness(1.05);
}


/* ============================================================
   PAINTED ARTWORK CLOSE HIT AREA
   ============================================================ */

.developer-ee-ritual-notes__close {
  position: absolute;

  z-index: 4;

  top: 4.1%;
  right: 5.1%;

  width: 13%;
  aspect-ratio: 1;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}

.developer-ee-ritual-notes__close:focus-visible {
  outline:
    2px solid
    #7f241d;

  outline-offset:
    2px;
}


/* ============================================================
   SMALL VIEWPORT FIT
   ============================================================ */

@media (max-width: 899px) {
  .developer-ee-ritual-notes {
    top:
      max(
        64px,
        env(safe-area-inset-top)
      );

    left:
      max(
        12px,
        env(safe-area-inset-left)
      );
  }

  .developer-ee-ritual-notes__content {
    font-size:
      clamp(
        0.37rem,
        1.85vw,
        0.45rem
      );
  }
}


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

@media (prefers-reduced-motion: reduce) {
  .developer-ee-ritual-notes__float {
    animation: none !important;
  }

  .developer-ee-ritual-notes__tablet {
    transform:
      none !important;

    transition:
      none !important;
  }

  .developer-ee-ritual-notes[
    data-developer-ee-ritual-notes-state="entering"
  ] .developer-ee-ritual-notes__stage {
    animation:
      developer-ee-ritual-tablet-reduced-enter
      120ms
      ease-out
      both;
  }

  .developer-ee-ritual-notes[
    data-developer-ee-ritual-notes-state="exiting"
  ] .developer-ee-ritual-notes__stage {
    animation:
      developer-ee-ritual-tablet-reduced-exit
      120ms
      ease-in
      both;
  }

  @keyframes developer-ee-ritual-tablet-reduced-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes developer-ee-ritual-tablet-reduced-exit {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
}


/* D'RAILED DEVELOPER EE RITUAL NOTES ENGRAVED DEPTH v0.11d-r3 */
.developer-ee-ritual-notes:not(
  [data-developer-ee-ritual-energy="active"]
) .developer-ee-ritual-notes__content {
  text-shadow:
    0 0.55px 0.65px
      rgba(54, 31, 20, 0.34),
    0 -0.25px 0
      rgba(255, 244, 220, 0.15);
}

@media (forced-colors: active) {
  .developer-ee-ritual-notes:not(
    [data-developer-ee-ritual-energy="active"]
  ) .developer-ee-ritual-notes__content {
    text-shadow:
      none;
  }
}

/* ============================================================
   FORCED COLORS
   ============================================================ */

@media (forced-colors: active) {
  .developer-ee-ritual-notes__content {
    color:
      CanvasText;

    text-shadow:
      none;

    filter:
      none;
  }

  .developer-ee-ritual-notes[
    data-developer-ee-ritual-energy="active"
  ] .developer-ee-ritual-notes__content {
    color:
      Highlight;

    text-shadow:
      none;

    filter:
      none;
  }

  .developer-ee-ritual-notes__close:focus-visible {
    outline-color:
      CanvasText;
  }
}

/* D'RAILED ARTIFACT INTERACTION POLISH v0.11e-b
 *
 * Ritual Notes:
 * - vertically center only the outer fixed artifact
 * - keep stage / float / tablet transform ownership separated
 * - reduce pointer-follow latency without introducing another transform owner
 * - remove the painted Close control and its hit target
 *
 * Miñonga:
 * - keep v0.7c frame/card 3D ownership intact
 * - transition only aperture image opacity/filter during the secret hold reveal
 */

.developer-ee-ritual-notes {
  top:
    50% !important;

  translate:
    0 -50%;
}

.developer-ee-ritual-notes__tablet {
  transition:
    transform
    48ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

/*
 * The artifact is intentionally self-dismissing.
 * Escape and the existing ten-second lifecycle remain available.
 * display:none removes both the visual control and its hit/focus surface.
 */
.developer-ee-ritual-notes__close {
  display:
    none !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}

/*
 * The image is the only Miñonga layer that participates in the hold reveal.
 * The frame, card, aperture and tilt transform remain untouched.
 */
.developer-ee-minonga-card__image {
  transition:
    opacity
      160ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    filter
      160ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );
}

.developer-ee-minonga-card__image.is-eef-transitioning {
  opacity:
    0.08 !important;

  filter:
    blur(1px)
    brightness(0.86);
}

.developer-ee-minonga-card__image.is-eef-revealed {
  opacity:
    1 !important;

  filter:
    none;
}

@media (prefers-reduced-motion: reduce) {
  .developer-ee-minonga-card__image {
    transition:
      none !important;
  }

  .developer-ee-minonga-card__image.is-eef-transitioning,
  .developer-ee-minonga-card__image.is-eef-revealed {
    opacity:
      1 !important;

    filter:
      none !important;
  }
}

/* ================================================================
   D'RAILED DESKTOP 1440 DOCUMENT STAGE LOCK v0.12a

   Desktop policy:
   - 900px+ enters the desktop presentation.
   - The document composition itself is exactly 1440 CSS pixels.
   - Narrower desktop viewports scroll horizontally instead of
     compressing or rearranging the approved desktop composition.
   - Wider viewports center the 1440px stage over a black canvas.
   - Vertical dimensions remain natural and vertically scrollable.
   - Native dialogs and fixed accessibility UI remain real-viewport
     surfaces and are intentionally not constrained here.

   Fixed foreground / Secret Actor horizontal coordinates are
   normalized separately in v0.12b.
   ================================================================ */

@media (min-width: 900px) {
  html {
    overflow-x: auto;

    /*
     * Infinite desktop canvas uses D'railed's own charcoal
     * instead of pure digital black.
     */
    background: var(--coal);
  }

  body {
    width: 1440px;
    min-width: 1440px;
    max-width: 1440px;
    margin-inline: auto;
  }

  /*
   * Freeze desktop viewport-relative presentation values at their
   * exact 1440px reference results.
   */
  h1 {
    font-size: 8.1rem;
  }

  h2 {
    font-size: 4.68rem;
  }

  .hero-crossroads-art {
    width: 560px;
  }

  .review-reel__quote {
    font-size: 1.53rem;
  }

  .review-reel {
    gap: 72px;
  }

  .header-brand-lockup {
    width: 388.8px;
  }

  .closing-rail-depth__art {
    width: 417.6px;
  }

  .footer-brand {
    width: 201.6px;
  }

  .menu-chef-depth__art {
    width: 230.4px;
  }

  .visit-lamp {
    width: 194.4px;
  }
}
/* ================================================================
   D'RAILED DESKTOP 1440 FULL-WIDTH CENTERING v0.12a-r3

   The base v0.12a document-stage rule remains:
     html { overflow-x: auto; }

   JavaScript adds .desktop-stage-fits only when the actual usable
   browser width can contain the complete 1440px stage.

   At that point horizontal scrolling is unnecessary and is hidden.
   body margin-inline:auto remains the sole stage-centering owner.
   ================================================================ */

@media (min-width: 900px) {
  html.desktop-stage-fits {
    overflow-x: hidden;
  }
}