/* ==========================================================================
   Flying Marmot — diner.css  (owner: PAGE) — the DEFAULT theme
   A premium studio site wearing a 1950s roadside-diner outfit: chrome trim,
   cherry red, seafoam, cream and mustard, checkerboards, neon script and
   atomic starbursts. Every selector is scoped under :root[data-theme="diner"].
   Decoration only: layout lives in base.css. --term-* tokens live in terminal.css.
   ========================================================================== */

:root[data-theme="diner"] {
  /* palette */
  --cherry: #C8202F;
  --cherry-deep: #97121F;
  --cherry-bright: #E2394A;
  --seafoam: #8ED6CB;
  --seafoam-pale: #DFF2EE;
  --turquoise: #3FB8AF;
  --mustard: #F2B43A;
  --cream: #F7EEDC;
  --navy: #0C2C3C;
  --jet: #16181A;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #E3E7E9 20%, #A3ACB1 46%, #F4F6F7 54%, #BCC3C7 78%, #F7F8F9 100%);
  --chrome-ring: conic-gradient(from 210deg, #FFFFFF, #9DA6AC 12%, #F2F4F5 24%, #7F8A91 38%, #FFFFFF 50%, #A9B1B6 64%, #EEF1F2 76%, #8C969C 88%, #FFFFFF);
  --checker: repeating-conic-gradient(var(--jet) 0 25%, #FBF7EC 0 50%);

  /* tokens */
  --bg: #F7EEDC;
  --bg-alt: #DFF2EE;
  --surface: #FFFBF3;
  --surface-2: #F2E6CD;
  --ink: #0C2C3C;
  --ink-soft: #3A5260;
  --ink-inverse: #FFF8EA;
  --accent: #C8202F;
  --accent-ink: #FFFFFF;
  --accent-2: #3FB8AF;
  --accent-2-ink: #0C2C3C;
  --accent-3: #F2B43A;
  --line: rgba(12, 44, 60, .15);
  --shadow: 0 1px 0 rgba(12, 44, 60, .06), 0 16px 34px -16px rgba(12, 44, 60, .34);
  --shadow-lg: 0 2px 0 rgba(12, 44, 60, .06), 0 36px 70px -28px rgba(12, 44, 60, .5);
  --focus: #0C2C3C;
  --puff: #FFF3CF;
  --radius: 14px;
  --radius-lg: 26px;
  --theme-color: #A6E0D6;
  --floor-h: 0px; /* the diner hero has no floor; forest/airfield still use theirs */

  --title-shadow:
    .03em .03em 0 #FFF8EA,
    .05em .05em 0 var(--cherry),
    .06em .06em 0 var(--cherry),
    .07em .07em 0 var(--cherry-deep),
    .08em .08em 0 var(--cherry-deep),
    .1em .12em .14em rgba(12, 44, 60, .22);
  --kicker-font: var(--font-script);
  --kicker-color: var(--cherry);
  --kicker-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);
  --kicker-transform: none;
  --kicker-tracking: 0;
  --header-bg: #FFFBF3;
  --hero-bg: #9EDBD1;
}

/* ---------- shared diner bits ------------------------------------------- */
:root[data-theme="diner"] .kicker {
  font-weight: 400;
  line-height: 1;
  transform: rotate(-3deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
:root[data-theme="diner"] .section-head .kicker { display: inline-block; }
:root[data-theme="diner"] .section-title { letter-spacing: .015em; }
:root[data-theme="diner"] .subhead { text-shadow: .04em .04em 0 var(--cherry); }

/* Buttons: enamel with a chrome bezel */
:root[data-theme="diner"] .btn {
  border: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 0 rgba(0, 0, 0, .16),
    0 0 0 3px #EEF1F2,
    0 0 0 4.5px #8F999F,
    0 10px 20px -10px rgba(12, 44, 60, .55);
}
:root[data-theme="diner"] .btn:hover {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 0 rgba(0, 0, 0, .16),
    0 0 0 3px #FFFFFF,
    0 0 0 4.5px #8F999F,
    0 16px 26px -12px rgba(12, 44, 60, .6);
}
:root[data-theme="diner"] .btn:focus-visible { outline-offset: 7px; }
:root[data-theme="diner"] .btn--primary { --btn-bg: var(--cherry); }
:root[data-theme="diner"] .btn--primary:hover { --btn-bg: #D42636; }
:root[data-theme="diner"] .btn--secondary { --btn-bg: #FFFBF3; --btn-ink: var(--navy); }
:root[data-theme="diner"] .btn--store { --btn-bg: var(--jet); --btn-ink: #FFF8EA; }

:root[data-theme="diner"] .chip { border-color: rgba(12, 44, 60, .22); background: #FFFBF3; }

/* ---------- checkerboard divider ----------------------------------------- */
:root[data-theme="diner"] .section-divider {
  --sq: clamp(.85rem, .7rem + .5vw, 1.2rem);
  height: calc(2 * var(--sq) + 10px);
  border: 0;
  background:
    var(--chrome) top / 100% 5px no-repeat border-box,
    var(--chrome) bottom / 100% 5px no-repeat border-box,
    var(--checker) 0 5px / calc(2 * var(--sq)) calc(2 * var(--sq));
  box-shadow: 0 6px 12px -8px rgba(12, 44, 60, .45);
  z-index: 2;
}

/* where the seafoam hero ends, the divider is a slim cherry counter trim instead */
:root[data-theme="diner"] .hero + .section-divider {
  height: 22px;
  background:
    var(--chrome) top / 100% 6px no-repeat,
    var(--chrome) bottom / 100% 6px no-repeat,
    linear-gradient(180deg, #D8303F, #A5141F);
}

/* ---------- header -------------------------------------------------------- */
:root[data-theme="diner"] .brand__name {
  color: var(--navy);
  text-shadow: .05em .05em 0 var(--cherry);
}
:root[data-theme="diner"] .site-nav__link::after { height: 3px; background: var(--cherry); }
:root[data-theme="diner"] .site-header.is-scrolled::after,
:root[data-theme="diner"] .site-header.is-menu-open::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--chrome);
  pointer-events: none;
}
:root[data-theme="diner"] .nav-toggle,
:root[data-theme="diner"] .sound-toggle { border-color: var(--navy); color: var(--navy); background: rgba(255, 251, 243, .7); }

/* ---------- hero ---------------------------------------------------------- */
:root[data-theme="diner"] .hero {
  padding-bottom: clamp(1.75rem, 5vh, 4.5rem);
  background:
    /* the seafoam deepens a touch where the wall meets the cherry counter trim below */
    linear-gradient(0deg, rgba(31, 128, 118, .26), rgba(31, 128, 118, 0) clamp(2.5rem, 8%, 5.5rem)),
    radial-gradient(ellipse 62% 48% at 50% 40%, rgba(255, 252, 238, .8), rgba(255, 252, 238, 0) 72%),
    linear-gradient(180deg, #B4E5DC 0%, #9EDBD1 48%, #86CFC3 100%);
}
/* atomic-age wallpaper, faded out behind the sign and towards the counter trim */
:root[data-theme="diner"] .hero__backdrop {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M58 34v52M32 60h52M39.6 41.6l36.8 36.8M76.4 41.6L39.6 78.4'/%3E%3Cpath d='M190 176v28M176 190h28M180 180l20 20M200 180l-20 20' stroke-width='1.6'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='58' cy='34' r='3.4'/%3E%3Ccircle cx='58' cy='86' r='3.4'/%3E%3Ccircle cx='32' cy='60' r='3.4'/%3E%3Ccircle cx='84' cy='60' r='3.4'/%3E%3Ccircle cx='39.6' cy='41.6' r='2.6'/%3E%3Ccircle cx='76.4' cy='78.4' r='2.6'/%3E%3Ccircle cx='76.4' cy='41.6' r='2.6'/%3E%3Ccircle cx='39.6' cy='78.4' r='2.6'/%3E%3Ccircle cx='58' cy='60' r='5'/%3E%3Cpath d='M198 40q3 15 18 18q-15 3-18 18q-3-15-18-18q15-3 18-18z'/%3E%3Cpath d='M92 196q2 9 11 11q-9 2-11 11q-2-9-11-11q9-2 11-11z'/%3E%3Ccircle cx='140' cy='120' r='2.5'/%3E%3Ccircle cx='236' cy='128' r='2'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3Ccircle cx='150' cy='238' r='2.5'/%3E%3C/g%3E%3Cpath d='M118 64q26-30 50-4q-26-10-50 4z' fill='%23F2B43A'/%3E%3Cpath d='M26 222q20-26 44-8q-24-4-44 8z' fill='%23F2B43A' opacity='.8'/%3E%3C/svg%3E") center top / clamp(240px, 19vw, 360px) auto repeat;
  opacity: .32;
  -webkit-mask-image:
    radial-gradient(ellipse 55% 60% at 50% 45%, transparent 40%, #000 95%),
    linear-gradient(0deg, transparent, #000 min(10rem, 20%));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 55% 60% at 50% 45%, transparent 40%, #000 95%),
    linear-gradient(0deg, transparent, #000 min(10rem, 20%));
  mask-composite: intersect;
}

/* no floor in the diner look (owner's call): the hero ends on the cherry counter trim */
:root[data-theme="diner"] .hero__floor { display: none; }

/* the roadside sign: sunburst rays + chrome-rimmed cherry roundel */
:root[data-theme="diner"] .hero__sign {
  top: 53%;
  width: 118%;
  background: none;
}
:root[data-theme="diner"] .hero__sign::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -4deg, rgba(242, 180, 58, .95) 0 5deg, rgba(242, 180, 58, 0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 30%, rgba(0, 0, 0, .75) 55%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 30%, rgba(0, 0, 0, .75) 55%, transparent 100%);
}
:root[data-theme="diner"] .hero__sign::after {
  content: "";
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  border: clamp(6px, 1.1vw, 13px) solid transparent;
  background:
    radial-gradient(circle at 38% 30%, #E6404F 0, var(--cherry) 45%, #A5141F 100%) padding-box,
    var(--chrome-ring) border-box;
  box-shadow:
    inset 0 0 0 clamp(5px, .8vw, 9px) var(--cherry),
    inset 0 0 0 clamp(7px, 1.05vw, 12px) rgba(255, 248, 234, .9),
    0 18px 36px -12px rgba(12, 44, 60, .55),
    0 0 0 1px rgba(12, 44, 60, .25);
}
/* sparkles around the sign */
:root[data-theme="diner"] .hero__stage::before,
:root[data-theme="diner"] .hero__stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 9%;
  aspect-ratio: 1;
  background: #FFFDF2;
  clip-path: polygon(50% 0%, 59.9% 40.1%, 100% 50%, 59.9% 59.9%, 50% 100%, 40.1% 59.9%, 0% 50%, 40.1% 40.1%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
}
:root[data-theme="diner"] .hero__stage::before { top: -4%; right: 6%; }
:root[data-theme="diner"] .hero__stage::after { bottom: 2%; left: 2%; width: 6%; background: var(--mustard); filter: none; }

/* neon OPEN badge */
:root[data-theme="diner"] .hero__badge {
  gap: .65em;
  padding: .4em 1.15em .4em .4em;
  border: 0;
  background: linear-gradient(180deg, #17384A, #0B2230);
  color: #FFF1D6;
  font-family: var(--font-display);
  font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem);
  letter-spacing: .16em;
  box-shadow: 0 0 0 3px #EEF1F2, 0 0 0 4.5px #8F999F, 0 12px 24px -12px rgba(12, 44, 60, .7);
}
:root[data-theme="diner"] .neon {
  display: inline-block;
  padding: .1em .55em .06em;
  border: 2px solid #FF8B95;
  border-radius: 999px;
  color: #FFF4F4;
  font-weight: 800;
  letter-spacing: .14em;
  text-shadow: 0 0 2px #fff, 0 0 6px #FF4D5E, 0 0 14px #FF2E44, 0 0 24px #FF2E44;
  box-shadow: 0 0 6px rgba(255, 60, 80, .9), 0 0 16px rgba(255, 46, 68, .55), inset 0 0 6px rgba(255, 60, 80, .8);
  animation: diner-neon 7s linear infinite;
}
@keyframes diner-neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .35; }
}

/* wordmark: sign lettering + neon script */
:root[data-theme="diner"] .wordmark__main {
  color: var(--navy);
  text-shadow:
    .025em .025em 0 #FFF8EA,
    .045em .045em 0 var(--cherry),
    .055em .055em 0 var(--cherry),
    .065em .065em 0 var(--cherry),
    .075em .075em 0 var(--cherry-deep),
    .085em .085em 0 var(--cherry-deep),
    .1em .13em .12em rgba(12, 44, 60, .3);
}
:root[data-theme="diner"] .wordmark__sub {
  position: relative;
  z-index: 1;
  margin-top: -.08em;
  padding-inline: .2em;
  font-family: var(--font-script);
  font-size: calc(var(--wordmark-size) * .56);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
  color: var(--cherry);
  transform: rotate(-4deg) translateX(18%);
  text-shadow:
    0 0 1px #FFF,
    0 0 .06em rgba(255, 255, 255, .95),
    0 0 .18em rgba(255, 70, 90, .55),
    .03em .05em 0 rgba(12, 44, 60, .25);
}
:root[data-theme="diner"] .hero__tagline { color: var(--navy); font-weight: 600; }
:root[data-theme="diner"] .hero__sub { color: #1F4150; }

/* sparkle trail for the intro flight */
:root[data-theme="diner"] .flight-puff {
  border-radius: 0;
  background: #FFF6D6;
  clip-path: polygon(50% 0%, 59.9% 40.1%, 100% 50%, 59.9% 59.9%, 50% 100%, 40.1% 59.9%, 0% 50%, 40.1% 40.1%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}
:root[data-theme="diner"] span.flight-puff:nth-of-type(3n) { background: var(--mustard); }
:root[data-theme="diner"] span.flight-puff:nth-of-type(4n) { background: #FFFFFF; }

/* ---------- work: the Blue Plate Special ---------------------------------- */
:root[data-theme="diner"] .work {
  background:
    radial-gradient(ellipse 50% 40% at 85% 12%, rgba(142, 214, 203, .35), transparent 70%),
    var(--cream);
}
:root[data-theme="diner"] .work__icon { box-shadow: 0 0 0 3px #FFF, 0 0 0 4.5px #9AA3A8, 0 10px 18px -8px rgba(12, 44, 60, .5); }
:root[data-theme="diner"] .work__lede { color: var(--navy); }
:root[data-theme="diner"] .work__plate {
  width: min(104%, 38rem);
  background:
    radial-gradient(circle closest-side, rgba(12, 44, 60, .07) 0 54%, transparent 60%),
    radial-gradient(circle closest-side, #FFFDF6 0 66%, transparent 66.6% 86.4%, #FFFDF6 87%),
    radial-gradient(circle closest-side, transparent 0 69.5%, rgba(255, 253, 246, .95) 70% 71%, transparent 71.5% 82.5%, rgba(255, 253, 246, .95) 83% 84%, transparent 84.5%),
    repeating-conic-gradient(from 0deg, #2A5AA8 0 4deg, #1D478C 4deg 8deg);
  box-shadow:
    inset 0 0 0 1px rgba(12, 44, 60, .08),
    inset 0 -14px 30px -18px rgba(12, 44, 60, .35),
    0 40px 60px -34px rgba(12, 44, 60, .55),
    0 4px 0 #E6DCC6;
}
:root[data-theme="diner"] .phone::before { background: linear-gradient(90deg, #6d757a, #c9cfd2); }

:root[data-theme="diner"] .gallery-nav__btn {
  border: 0;
  background: #FFFBF3;
  box-shadow: 0 0 0 3px #EEF1F2, 0 0 0 4.5px #8F999F, 0 8px 16px -8px rgba(12, 44, 60, .5);
}
:root[data-theme="diner"] .gallery-nav__btn:hover:not([aria-disabled="true"]) { background: var(--cherry); color: #fff; }
:root[data-theme="diner"] .gallery__link {
  border: 4px solid #FFFBF3;
  box-shadow: 0 0 0 1px rgba(12, 44, 60, .12), 0 18px 30px -18px rgba(12, 44, 60, .55);
}
:root[data-theme="diner"] .gallery__item--pair-start .gallery__link { border-right-width: 0; }
:root[data-theme="diner"] .gallery__item--pair-end .gallery__link { border-left-width: 0; }

:root[data-theme="diner"] .feature {
  border: 2px solid rgba(12, 44, 60, .1);
  background: #FFFBF3;
  box-shadow: 0 3px 0 rgba(12, 44, 60, .06);
}
:root[data-theme="diner"] .feature__icon {
  background: var(--cherry);
  color: #fff;
  box-shadow: 0 0 0 3px #FFF, 0 0 0 4.5px #A3ACB1;
}

/* "Under the hood": a navy jukebox panel with chrome trim */
:root[data-theme="diner"] .hood {
  border: 6px solid transparent;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, #1B4A5F, rgba(27, 74, 95, 0) 70%) padding-box,
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(200, 32, 47, .28), rgba(200, 32, 47, 0) 70%) padding-box,
    linear-gradient(#0C2C3C, #0A2533) padding-box,
    var(--chrome-ring) border-box;
  box-shadow: 0 40px 70px -40px rgba(12, 44, 60, .8);
}
:root[data-theme="diner"] .hood .subhead { color: #FFF8EA; text-shadow: .045em .045em 0 var(--cherry); }
:root[data-theme="diner"] .stats { background: rgba(142, 214, 203, .22); border-color: rgba(142, 214, 203, .22); }
:root[data-theme="diner"] .stat { background: rgba(9, 34, 46, .96); }
:root[data-theme="diner"] .stat__value { color: var(--mustard); text-shadow: .04em .04em 0 var(--cherry); }
:root[data-theme="diner"] .hood__list h4 { color: var(--seafoam); }
:root[data-theme="diner"] .chips--tech .chip { border-color: rgba(142, 214, 203, .4); background: rgba(142, 214, 203, .06); }

/* ---------- services: menu cards ----------------------------------------- */
:root[data-theme="diner"] .services {
  background:
    radial-gradient(ellipse 40% 30% at 8% 0%, rgba(255, 255, 255, .6), transparent 70%),
    var(--seafoam-pale);
}
:root[data-theme="diner"] .card {
  border: 4px solid transparent;
  background:
    linear-gradient(#FFFBF3, #FFFBF3) padding-box,
    var(--chrome-ring) border-box;
  box-shadow: 0 2px 0 rgba(12, 44, 60, .08), 0 22px 36px -22px rgba(12, 44, 60, .55);
}
:root[data-theme="diner"] .card__num {
  top: 1.6rem;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--navy);
  font-weight: 700;
}
:root[data-theme="diner"] .card__icon {
  background: var(--turquoise);
  color: var(--navy);
  box-shadow: 0 0 0 3px #FFF, 0 0 0 4.5px #A3ACB1;
}
:root[data-theme="diner"] .card__title { color: var(--navy); text-shadow: .04em .04em 0 rgba(200, 32, 47, .85); }
:root[data-theme="diner"] .card__tags { border-top: 2px dotted rgba(12, 44, 60, .3); }

:root[data-theme="diner"] .audience { border: 2px solid rgba(12, 44, 60, .1); }
:root[data-theme="diner"] .audience--new { background: #FFFBF3; box-shadow: inset .5rem 0 0 var(--cherry); }
:root[data-theme="diner"] .audience--existing { background: #FFFBF3; box-shadow: inset .5rem 0 0 var(--turquoise); }
:root[data-theme="diner"] .audience--existing .audience__label { color: #1B6F69; }
:root[data-theme="diner"] .audiences__or span {
  width: 4.25rem; height: 4.25rem;
  border-radius: 0;
  background: var(--mustard);
  color: var(--navy);
  font-family: var(--font-script);
  font-size: 1.6rem;
  text-transform: none;
  clip-path: polygon(50% 0%, 60.4% 11.4%, 75% 6.7%, 78.3% 21.7%, 93.3% 25%, 88.6% 39.6%, 100% 50%, 88.6% 60.4%, 93.3% 75%, 78.3% 78.3%, 75% 93.3%, 60.4% 88.6%, 50% 100%, 39.6% 88.6%, 25% 93.3%, 21.7% 78.3%, 6.7% 75%, 11.4% 60.4%, 0% 50%, 11.4% 39.6%, 6.7% 25%, 21.7% 21.7%, 25% 6.7%, 39.6% 11.4%);
}

/* ---------- rates: the letterboard menu ----------------------------------- */
:root[data-theme="diner"] .rates {
  background:
    radial-gradient(ellipse 45% 35% at 50% 38%, rgba(242, 180, 58, .18), transparent 70%),
    var(--cream);
}
:root[data-theme="diner"] .rate-board {
  border: clamp(8px, 1vw, 12px) solid transparent;
  border-radius: 22px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 9px) padding-box,
    radial-gradient(ellipse 80% 60% at 50% 0%, #2A2D30, #151719 70%) padding-box,
    var(--chrome-ring) border-box;
  color: #F6F3EA;
  box-shadow: 0 2px 0 rgba(12, 44, 60, .2), 0 44px 70px -34px rgba(12, 20, 28, .75);
}
:root[data-theme="diner"] .rate-board::before { /* marquee title strip */
  content: "Menu · per hour";
  display: block;
  width: fit-content;
  margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.25rem);
  padding: .35em 1.1em;
  border-radius: 999px;
  background: var(--cherry);
  color: #FFF8EA;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px #EEF1F2, 0 0 0 3.5px #8F999F;
}
:root[data-theme="diner"] .rate__name,
:root[data-theme="diner"] .rate__price {
  font-weight: 700;
  letter-spacing: .1em;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
:root[data-theme="diner"] .rate__amount { color: #FFFFFF; }
:root[data-theme="diner"] .rate__leader { border-bottom: .22rem dotted rgba(246, 243, 234, .55); opacity: 1; }
:root[data-theme="diner"] .rate__desc { color: rgba(246, 243, 234, .78); }
:root[data-theme="diner"] .rate--vip .rate__name,
:root[data-theme="diner"] .rate--vip .rate__amount { color: #FFD27A; }
:root[data-theme="diner"] .rate__burst {
  width: 4.6rem;
  height: 4.6rem;
  margin-block: -1.8rem;
  padding: 0;
  border-radius: 0;
  background: var(--mustard);
  color: var(--cherry-deep);
  font-size: .8rem;
  letter-spacing: .06em;
  clip-path: polygon(50% 0%, 58.2% 8.8%, 69.1% 3.8%, 73.3% 15.1%, 85.4% 14.6%, 84.9% 26.7%, 96.2% 30.9%, 91.2% 41.8%, 100% 50%, 91.2% 58.2%, 96.2% 69.1%, 84.9% 73.3%, 85.4% 85.4%, 73.3% 84.9%, 69.1% 96.2%, 58.2% 91.2%, 50% 100%, 41.8% 91.2%, 30.9% 96.2%, 26.7% 84.9%, 14.6% 85.4%, 15.1% 73.3%, 3.8% 69.1%, 8.8% 58.2%, 0% 50%, 8.8% 41.8%, 3.8% 30.9%, 15.1% 26.7%, 14.6% 14.6%, 26.7% 15.1%, 30.9% 3.8%, 41.8% 8.8%);
  transform: rotate(-14deg);
}
:root[data-theme="diner"] .rate-board__note { color: rgba(246, 243, 234, .7); }
@container rateboard (max-width: 30rem) {
  /* Stacked layout: the price sits right under the name, so the burst may only overhang a little. */
  :root[data-theme="diner"] .rate__burst { width: 3.6rem; height: 3.6rem; font-size: .66rem; margin-block: -.7rem; }
}

/* ---------- estimate: the lunch counter ----------------------------------- */
:root[data-theme="diner"] .estimate {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'%3E%3Cg fill='%230C2C3C' opacity='.065'%3E%3Cpath d='M20 40q30-34 58-6q-30-12-58 6z'/%3E%3Cpath d='M140 130q30-34 58-6q-30-12-58 6z'/%3E%3Cpath d='M150 30q18 22 4 44q4-24-4-44z'/%3E%3Cpath d='M50 110q18 22 4 44q4-24-4-44z'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.55'%3E%3Ccircle cx='110' cy='70' r='2.4'/%3E%3Ccircle cx='200' cy='80' r='1.8'/%3E%3Ccircle cx='100' cy='160' r='1.8'/%3E%3Ccircle cx='30' cy='90' r='1.6'/%3E%3C/g%3E%3Cg fill='%23F2B43A' opacity='.4'%3E%3Ccircle cx='180' cy='60' r='3'/%3E%3Ccircle cx='80' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 180px,
    linear-gradient(180deg, #A8DFD6, #95D6CB);
  border-top: 0;
}
:root[data-theme="diner"] .estimate::before { /* chrome counter edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, rgba(0, 0, 0, 0) 1px 6px),
    var(--chrome);
  box-shadow: 0 6px 12px -6px rgba(12, 44, 60, .45);
}
:root[data-theme="diner"] .estimate .section-lede { color: #1F4150; }
:root[data-theme="diner"] .estimate .kicker { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
:root[data-theme="diner"] .estimate__noscript { background: #FFFBF3; border-color: rgba(12, 44, 60, .25); }

/* ---------- process: order tickets on the rail ----------------------------- */
:root[data-theme="diner"] .process { background: var(--cream); }
:root[data-theme="diner"] .step__num {
  border: 4px solid transparent;
  background:
    radial-gradient(circle at 38% 30%, #E6404F, var(--cherry) 55%, #A5141F) padding-box,
    var(--chrome-ring) border-box;
  color: #FFF8EA;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 10px 18px -8px rgba(12, 44, 60, .5);
}
:root[data-theme="diner"] .step__title { color: var(--navy); }
@media (min-width: 62em) {
  :root[data-theme="diner"] .steps::before {
    content: "";
    position: absolute;
    /* From the first number's centre to the last one's (column 4 starts at 75% + ¾ of a gap). */
    left: 1.9rem;
    right: calc(25% - .75 * clamp(1.25rem, 1rem + 1.5vw, 2.5rem) - 1.9rem);
    top: 1.75rem;
    height: 4px;
    border-radius: 4px;
    background: var(--chrome);
    box-shadow: 0 2px 4px rgba(12, 44, 60, .25);
  }
}

/* ---------- about ---------------------------------------------------------- */
:root[data-theme="diner"] .about { background: var(--seafoam-pale); }
:root[data-theme="diner"] .about__frame {
  overflow: visible;
  border: 8px solid transparent;
  background: linear-gradient(#F4EEDC, #F4EEDC) padding-box, var(--chrome-ring) border-box;
  transform: rotate(2deg);
  box-shadow: 0 40px 60px -34px rgba(12, 44, 60, .65);
}
:root[data-theme="diner"] .about__frame img { border-radius: calc(var(--radius-lg) - 8px); }
:root[data-theme="diner"] .about__frame::after {
  content: "Made in Alberta";
  position: absolute;
  left: -1.75rem;
  top: -1.75rem;
  display: grid;
  place-items: center;
  width: 6.75rem;
  height: 6.75rem;
  padding: 1rem;
  background: var(--cherry);
  color: #FFF8EA;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  clip-path: polygon(50% 0%, 60.4% 11.4%, 75% 6.7%, 78.3% 21.7%, 93.3% 25%, 88.6% 39.6%, 100% 50%, 88.6% 60.4%, 93.3% 75%, 78.3% 78.3%, 75% 93.3%, 60.4% 88.6%, 50% 100%, 39.6% 88.6%, 25% 93.3%, 21.7% 78.3%, 6.7% 75%, 11.4% 60.4%, 0% 50%, 11.4% 39.6%, 6.7% 25%, 21.7% 21.7%, 25% 6.7%, 39.6% 11.4%);
  transform: rotate(-12deg);
}
:root[data-theme="diner"] .about__facts li { border-color: rgba(12, 44, 60, .18); }

/* ---------- contact: the guest check --------------------------------------- */
:root[data-theme="diner"] .contact {
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 120, 130, .35), transparent 72%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    linear-gradient(180deg, #C8202F, #A9182A);
}
:root[data-theme="diner"] .contact__inner { filter: drop-shadow(0 26px 30px rgba(70, 0, 10, .45)); }
:root[data-theme="diner"] .ticket {
  --zz: 14px;
  border-radius: 0;
  padding-top: calc(clamp(1.75rem, 1.2rem + 3vw, 3.75rem) + var(--zz));
  padding-bottom: calc(clamp(1.75rem, 1.2rem + 3vw, 3.75rem) + var(--zz));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 3rem, rgba(200, 32, 47, .28) 3rem calc(3rem + 2px), rgba(0, 0, 0, 0) calc(3rem + 2px)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 calc(2.2rem - 1.5px), rgba(63, 184, 175, .22) calc(2.2rem - 1.5px) 2.2rem),
    #FBF8EC;
  box-shadow: none;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
}
:root[data-theme="diner"] .ticket__top {
  border-bottom: 3px double rgba(12, 44, 60, .45);
  color: #1B6F69;
}
:root[data-theme="diner"] .ticket__no { color: var(--cherry); font-size: 1.05em; letter-spacing: .2em; }
:root[data-theme="diner"] .ticket__kicker { display: inline-block; }
:root[data-theme="diner"] .ticket__title { color: var(--navy); }
:root[data-theme="diner"] .ticket__text { color: #2E4957; }
:root[data-theme="diner"] .ticket__foot {
  border-top: 2px dashed rgba(12, 44, 60, .3);
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cherry);
}

/* ---------- footer ---------------------------------------------------------- */
:root[data-theme="diner"] .site-footer {
  --focus: var(--mustard);
  position: relative;
  background:
    var(--chrome) top / 100% 6px no-repeat,
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(63, 184, 175, .16), transparent 70%),
    #0C2C3C;
}
:root[data-theme="diner"] .site-footer .brand__name { color: #FFF8EA; text-shadow: .05em .05em 0 var(--cherry); }
:root[data-theme="diner"] .theme-picker button { border-color: rgba(142, 214, 203, .45); }
:root[data-theme="diner"] .theme-picker button[aria-pressed="true"] {
  background: var(--mustard);
  border-color: var(--mustard);
  color: var(--navy);
  box-shadow: 0 0 0 2px #0C2C3C, 0 0 0 3.5px #C3CACE;
}

/* ---------- 404 --------------------------------------------------------- */
:root[data-theme="diner"] .lost__path { color: var(--cherry); opacity: .5; }

/* ---------- reduced motion: no neon flicker --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="diner"] .neon { animation: none; }
}