@font-face {
  font-family:Barlow;
  src:url('assets/fonts/barlow-condensed-800.woff2');
  font-weight:800;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('assets/fonts/manrope.woff2');
  font-weight:200 800;
  font-display:swap;
}

/* Size-matched fallbacks (measured in Chrome) keep text in place until the real fonts arrive. */
@font-face {
  font-family:"Manrope Fallback";
  src:local("Arial");
  size-adjust:101.7%;
  ascent-override:105.2%;
  descent-override:29.5%;
  line-gap-override:0%;
}

@font-face {
  font-family:"Barlow Fallback";
  src:local("Impact");
  size-adjust:95.4%;
  ascent-override:104.8%;
  descent-override:21%;
  line-gap-override:0%;
}

@font-face {
  font-family:Fraunces;
  src:url('assets/fonts/fraunces-italic-600.woff2');
  font-weight:600;
  font-style:italic;
  font-display:swap;
}

:root {
  --line-on-dark:#555;
  /* One heading scale, phone first: five fluid steps. */
  --step-page:clamp(60px,11vw,104px);
  --step-feature:clamp(46px,8.5vw,80px);
  --step-section:clamp(42px,7vw,64px);
  --step-compact:clamp(34px,5.5vw,44px);
  --step-sub:clamp(28px,5.6vw,36px);
  /* Older heading names resolve to the five steps. */
  --type-display:var(--step-section);
  --type-feature:var(--step-feature);
  --type-phone-feature:var(--step-feature);
  --type-section:var(--step-section);
  --type-phone-section:var(--step-compact);
  --type-small-section:var(--step-compact);
  --type-subhead:var(--step-compact);
  --type-phone-heading:var(--step-compact);
  --type-compact-section:var(--step-compact);
  --type-card:var(--step-sub);
  --type-item:var(--step-sub);
  --type-small-heading:var(--step-sub);
  /* Reading and interface text: nothing below 14px. */
  --text-body:17px;
  --text-lead:clamp(19px,2.2vw,22px);
  --text-ui:16px;
  --text-small:15px;
  --text-fine:14px;
  /* Shape, depth and motion. */
  --radius-media:18px;
  --radius-card:24px;
  --radius-pill:999px;
  --shadow-float:0 10px 32px rgba(0,0,0,.18);
  --shadow-header:0 1px 0 rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
  --fast:140ms;
  --med:260ms;
  --dock:64px;
  --red:#E21C21;
  --red-hover:#BE171C;
  --black:#000;
  --white:#FFF;
  --quiet:#F3F3F3;
  --ink-muted:#5F5F5F;
  --line:#D6D6D6;
  --display:Barlow,"Barlow Fallback",Impact,sans-serif;
  --body:Manrope,"Manrope Fallback",Arial,sans-serif;
  --header:84px;
  --gutter:48px;
  --ink:var(--black);
  --muted:var(--ink-muted);
  --surface:var(--quiet);
}

* {
  box-sizing:border-box;
}

html {
  scroll-padding-top:calc(var(--header) + 24px);
}

body {
  margin:0;
  color:var(--black);
  background:var(--white);
  font:var(--text-body)/1.6 var(--body);
}

.icon {
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-fill {
  fill:currentColor;
  stroke:none;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

figure,p,h1,h2,h3,dl,dd {
  margin:0;
}

a {
  color:inherit;
}

button {
  font:inherit;
  cursor:pointer;
  color:inherit;
}

p {
  max-width:60ch;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:0;
}

h1 {
  font-size:var(--step-page);
}

h2 {
  font-size:var(--step-section);
}

h3 {
  font-size:var(--type-item);
}

button,a,summary {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid currentColor;
  outline-offset:4px;
}

main:focus {
  outline:none;
}

[hidden] {
  display:none!important;
}

.skip {
  position:fixed;
  z-index:120;
  top:8px;
  left:8px;
  transform:translateY(-180%);
  padding:14px 20px;
  background:white;
  color:black;
  font-weight:800;
}

.skip:focus {
  transform:none;
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.logo-filter {
  position:absolute;
  pointer-events:none;
}

.section {
  max-width:1440px;
  margin:auto;
  padding:80px var(--gutter);
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:32px;
}

.section-heading p {
  max-width:36ch;
  font-size:18px;
}

.section-heading .button {
  flex-shrink:0;
}

.lede {
  font-size:var(--text-lead);
  line-height:1.55;
}

.small,.fine {
  font-size:var(--text-fine);
  color:var(--ink-muted);
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

/* One button family: rounded, generous, with an optional leading icon.
   Underlined links are only for links inside sentences. */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 26px;
  border:2px solid transparent;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-size:var(--text-ui);
  font-weight:800;
  line-height:1.25;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}

.primary {
  background:var(--red);
  color:var(--white);
}

.primary:hover {
  background:var(--red-hover);
}

.secondary {
  background:transparent;
  border-color:var(--black);
  color:var(--black);
}

.secondary:hover {
  background:var(--black);
  color:var(--white);
}

.light {
  background:var(--white);
  color:var(--black);
}

.light:hover {
  background:#E7E7E7;
}

/* Transparent on solid colour; over photos and video (the Home opening) it gets its own dark glass. */
.outline-light {
  border-color:var(--white);
  color:var(--white);
  background:transparent;
}

.outline-light:hover {
  background:var(--white);
  color:var(--black);
}

.button:active {
  transform:scale(.97);
}

.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:800;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
  transition:color var(--fast) var(--ease);
}

.text-link:hover {
  color:var(--red);
}

/* One chip family: the gallery filters. */
.gallery-filters button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:44px;
  padding:10px 18px;
  border:2px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--black);
  font-size:var(--text-small);
  font-weight:800;
  line-height:1.3;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease);
}

.gallery-filters button:hover:hover {
  border-color:var(--black);
  color:var(--black);
}

.gallery-filters [aria-pressed="true"] {
  background:var(--black);
  border-color:var(--black);
  color:var(--white);
}

.gallery-filters button:active:active {
  transform:scale(.96);
}

/* Boxed photographs share one corner radius; full-bleed media stays square. */
.food-tile img,.category-visual img,.catering-lead-photo img,.catering-onsite img,.story-portrait img,.gallery-grid img,.visit-storefront img {
  border-radius:var(--radius-media);
}

.price {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  color:var(--red);
  font:800 36px/1 var(--display);
  font-variant-numeric:tabular-nums;
}

.price-plate {
  background:var(--red);
  color:var(--white);
  padding:8px 11px;
}

.price .currency {
  font-size:.76em;
}

.price .cents {
  font-size:.6em;
}

.red-text {
  color:var(--red);
}

.site-header {
  position:sticky;
  top:0;
  height:var(--header);
  background:white;
  z-index:40;
  border-bottom:1px solid #E5E5E5;
  transition:background-color 420ms var(--ease),color 420ms var(--ease),box-shadow 420ms var(--ease),border-color 420ms var(--ease);
}

/* Once the page moves under it, the header lifts with a soft shadow. */
.site-header.is-scrolled:not(.hero-enabled),.site-header.hero-enabled.is-solid {
  border-color:transparent;
  box-shadow:var(--shadow-header);
}

body[data-page="index.html"] .site-header {
  position:fixed;
  left:0;
  right:0;
}

/* Home: clear over the opening; the white follows the scroll in (--solid, 0 to 1, set by the script),
   easing out so it is mostly white by the time the logo and links turn dark halfway. */
body[data-page="index.html"] .site-header.hero-enabled {
  background:rgb(255 255 255 / calc(1 - (1 - var(--solid,0)) * (1 - var(--solid,0))));
  transition:color 420ms var(--ease),box-shadow 420ms var(--ease),border-color 420ms var(--ease);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) {
  border-color:transparent;
  color:var(--white);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) .brand img {
  filter:url(#logo-knockout);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) a:hover {
  color:var(--white);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) .button.secondary {
  border-color:var(--white);
  color:var(--white);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) .button.secondary:hover {
  background:var(--white);
  color:var(--black);
}

body[data-page="index.html"] .site-header.hero-enabled:not(.is-solid) .button.primary:hover {
  color:var(--white);
}

.desktop-nav {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:28px;
  max-width:1440px;
  height:100%;
  padding:0 var(--gutter);
  margin:auto;
}

.brand {
  display:block;
  width:132px;
  flex-shrink:0;
}

.brand img {
  width:100%;
  height:auto;
  filter:url(#logo-on-light);
}

.main-links,.header-actions {
  display:flex;
  align-items:center;
  gap:28px;
}

.main-links {
  justify-content:flex-start;
}

.main-links a,.phone-masthead>div>a {
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-size:var(--text-ui);
  font-weight:800;
  white-space:nowrap;
  transition:color var(--fast) var(--ease);
}

/* A red bar marks the current page and slides in on hover. */
.main-links a::after,.phone-masthead>div>a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:3px;
  border-radius:3px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--med) var(--ease);
}

.main-links a:hover::after,.phone-masthead>div>a:hover::after,.site-header [aria-current=page]:not(.brand)::after {
  transform:scaleX(1);
}

.main-links a:hover,.phone-masthead>div>a:hover {
  color:var(--red);
}

.site-footer [aria-current=page]:not(.brand) {
  text-decoration:underline!important;
  text-decoration-color:var(--red)!important;
  text-underline-offset:7px;
  text-decoration-thickness:2px!important;
}

.header-actions {
  justify-content:flex-end;
  gap:12px;
}

.header-actions .button {
  min-height:46px;
  padding:10px 20px;
}

.phone-masthead,.phone-tabs {
  display:none;
}

.site-footer {
  background:var(--black);
  color:var(--white);
  padding:56px var(--gutter) 40px;
}

.footer-grid {
  max-width:1344px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1.1fr;
  gap:40px;
  align-items:start;
}

.site-footer .brand {
  width:132px;
  margin-bottom:18px;
}

.site-footer .brand img {
  filter:url(#logo-knockout);
}

.site-footer h2 {
  font-size:var(--step-sub);
  margin:0 0 14px;
}

.site-footer p {
  font-size:var(--text-small);
  line-height:1.6;
  margin-bottom:16px;
}

.site-footer a:focus-visible {
  outline-color:white;
}

/* Live status from the published hours (Toronto time); hidden until known. */
.open-status {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.open-status::before {
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 4px rgba(255,255,255,.18);
}

.open-status.is-closed {
  color:#CFCFCF;
}

.open-status.is-closed::before {
  background:#8A8A8A;
  box-shadow:none;
}

.hours-list {
  display:grid;
  gap:0;
  margin:0;
  font-size:var(--text-small);
}

.hours-list div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--line-on-dark);
}

.hours-list dt {
  font-weight:800;
}

.hours-list dd {
  margin:0;
  color:#D9D9D9;
  text-align:right;
}

.hours-list .is-today {
  border-bottom-color:var(--red);
}

.hours-list .is-today dd {
  color:var(--white);
  font-weight:800;
}

.footer-phones {
  display:grid;
  gap:12px;
  justify-items:stretch;
}

.footer-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
}

.footer-links a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:var(--text-small);
  font-weight:700;
  text-decoration:none;
}

.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Ordering: a centred card on larger screens, a sheet from the bottom on phones. */
.order-dialog {
  text-align:center;
  border:0;
  background:white;
  color:black;
  border-radius:var(--radius-card);
  max-width:min(92vw,520px);
  width:520px;
  padding:60px 32px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.order-dialog[open] {
  animation:dialog-in var(--med) var(--ease);
}

.order-dialog::backdrop,.lightbox::backdrop {
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.order-dialog h2 {
  font-size:var(--step-section);
  margin-bottom:20px;
}

.order-dialog h2:focus {
  outline:none;
}

.dialog-close {
  position:absolute;
  right:16px;
  top:16px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  border:0;
  border-radius:50%;
  background:var(--quiet);
  transition:background-color var(--fast) var(--ease);
}

.dialog-close:hover {
  background:#E4E4E4;
}

/* Delivery services, in the order sheet and on Visit: each one's own mark on its brand colour, its name, an arrow. */
.provider-links {
  display:grid;
  gap:10px;
}

.provider {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:66px;
  padding:10px 20px 10px 10px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-media);
  background:var(--white);
  color:var(--black);
  text-align:left;
  text-decoration:none;
  font-size:var(--text-body);
  font-weight:800;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease);
}

.provider:hover {
  border-color:var(--black);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.provider:active {
  transform:scale(.98);
}

.provider-mark {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--brand);
  color:var(--brand-ink);
}

.provider-mark svg {
  width:30px;
  height:30px;
  fill:currentColor;
}

.provider-uber {
  --brand:#06C167;
  --brand-ink:#000000;
}

.provider-doordash {
  --brand:#FF3008;
  --brand-ink:#FFFFFF;
}

.provider-skip {
  --brand:#FF8000;
  --brand-ink:#FFFFFF;
}

.provider-skip .provider-mark svg {
  width:38px;
  height:16px;
}

.provider-go {
  font-size:18px;
  color:var(--ink-muted);
  transition:transform var(--fast) var(--ease);
}

.provider:hover .provider-go {
  transform:translate(2px,-2px);
  color:var(--black);
}

.provider-note {
  margin:14px auto 0;
  font-size:var(--text-small);
  color:var(--ink-muted);
  text-align:center;
}

.dialog-catering {
  display:grid;
  justify-items:stretch;
  gap:10px;
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:18px;
}

.dialog-catering p {
  font-weight:800;
  text-align:center;
}

.dialog-catering .button {
  width:100%;
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(14px) scale(.98);
  }
}

@keyframes sheet-up {
  from {
    transform:translateY(100%);
  }
}

@media(min-width:1600px) {
  .section {
    padding-top:88px;
    padding-bottom:88px;
  }
}

@media(max-width:1100px) {
  :root {
    --gutter:32px;
  }
  .desktop-nav {
    gap:20px;
  }
  .main-links {
    gap:16px;
  }
  .header-actions {
    gap:16px;
  }
  .desktop-nav .brand {
    width:120px;
  }
  .header-actions .button {
    padding-left:14px;
    padding-right:14px;
  }
  .header-actions .order-trigger .icon {
    display:none;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:40px 32px;
  }
}

@media(max-width:800px) {
  :root {
    --header:68px;
    --gutter:20px;
  }
  body {
    padding-bottom:calc(var(--dock) + 24px + env(safe-area-inset-bottom));
  }
  .desktop-nav {
    display:none;
  }
  .phone-masthead {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    height:100%;
    padding:0 var(--gutter);
  }
  .phone-masthead .brand {
    width:100px;
  }
  .phone-masthead>div {
    display:flex;
    gap:18px;
    min-width:0;
  }
  .phone-masthead>div>a {
    font-size:var(--text-small);
  }
  /* Floating bottom dock: the two actions that matter most, one thumb away. */
  .phone-tabs {
    position:fixed;
    z-index:45;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    gap:4px;
    padding:6px;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.8) blur(20px);
    backdrop-filter:saturate(1.8) blur(20px);
    border:1px solid rgba(0,0,0,.08);
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-float);
  }
  .phone-tabs a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:0 14px;
    border-radius:var(--radius-pill);
    color:var(--black);
    font-size:var(--text-small);
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color var(--fast) var(--ease),transform var(--fast) var(--ease);
  }
  .phone-tabs a:active {
    transform:scale(.96);
  }
  .phone-tabs a:not(.tab-catering):hover,.phone-tabs a[aria-current=page] {
    background:var(--quiet);
  }
  .phone-tabs .tab-catering {
    background:var(--red);
    color:var(--white);
  }
  .phone-tabs .tab-catering:hover {
    background:var(--red-hover);
  }
  h1 {
    font-size:var(--step-page);
  }
  h2 {
    font-size:var(--step-section);
  }
  .section {
    padding-top:48px;
    padding-bottom:48px;
  }
  .section-heading {
    align-items:start;
    gap:20px;
    margin-bottom:24px;
  }
  .section-heading p {
    font-size:16px;
  }
  .section-heading .button {
    min-height:48px;
    padding:10px 18px;
    font-size:var(--text-small);
  }
  .site-footer {
    padding-top:40px;
    padding-bottom:32px;
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer-address .button {
    width:100%;
  }
  .footer-links {
    border-top:1px solid var(--line-on-dark);
    padding-top:12px;
  }
  .order-dialog {
    width:100%;
    max-width:100%;
    margin:auto 0 0;
    border-radius:28px 28px 0 0;
    padding:56px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .order-dialog[open] {
    animation:sheet-up var(--med) var(--ease);
  }
}

@media(max-width:389px) {
  .phone-masthead .brand {
    width:94px;
  }
  .phone-masthead>div {
    gap:14px;
  }
  .phone-masthead>div>a {
    font-size:var(--text-fine);
  }
  .phone-tabs a {
    gap:6px;
    padding:0 10px;
    font-size:var(--text-fine);
  }
  .phone-tabs .icon {
    width:18px;
    height:18px;
  }
}

@media(max-width:359px) {
  .phone-masthead .brand {
    width:86px;
  }
  .phone-masthead>div {
    gap:10px;
  }
  .phone-tabs .icon {
    display:none;
  }
  .button {
    padding-left:16px;
    padding-right:16px;
  }
}

/* Phones centre (Faraj, 3 Oct 2026: "on mobile everything should be centered"). Headings, copy,
   buttons and single items centre; rows that pair a name with a price or a day with its hours keep
   their two ends, and horizontal scrollers keep their start. Page files add their own rows. */
@media(max-width:800px) {
  main,.site-footer {
    text-align:center;
  }
  .actions {
    justify-content:center;
  }
  .section-heading {
    flex-direction:column;
    align-items:center;
  }
  .section-heading p {
    margin-inline:auto;
  }
  .site-footer .brand {
    margin-inline:auto;
  }
  .hours-list {
    max-width:360px;
    margin-inline:auto;
    text-align:left;
  }
  .footer-links a {
    justify-content:center;
  }
  /* Centred lines break evenly, so no word sits alone. */
  main :is(h1,h2,h3,p,address,summary),.site-footer p {
    text-wrap:balance;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

.keep-phrase { display:inline-block; max-width:100%; }
.film-hero {
  position:relative; display:grid; place-items:center; isolation:isolate;
  min-height:max(620px,min(880px,100svh)); color:var(--white); background:#17110E;
  padding:calc(var(--header) + 32px) var(--gutter) 80px;
}
.hero-poster,.hero-video { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero-poster img,.hero-video { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-video { opacity:0; }
.film-hero.is-playing .hero-video { opacity:1; }
/* The opening fades fully to black at its foot and the sharing photo rises out of black, so the video and the
   photo under it meet black on black instead of at a hard edge (Faraj, 3 Oct 2026: "the weird connection
   between the video and the next section"). */
.film-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#000A 0%,#0007 35%,#0007 62%,#000B 86%,#000 100%); }
.hero-copy { text-align:center; width:100%; min-width:0; max-width:1000px; }
/* The opening's pause button: the films' round button, in the opening's lower right corner. */
.film-hero .hero-toggle { right:24px; bottom:24px; }
.hero-copy h1 { font-size:clamp(100px,13vw,188px); line-height:.9; overflow-wrap:anywhere; }
.hero-copy h1>span { display:block; }
.hero-copy em { display:block; color:var(--red); font:italic 600 clamp(44px,5.4vw,76px)/1.16 Fraunces,Georgia,serif; text-transform:none; letter-spacing:-.045em; margin-top:10px; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-actions .button { min-width:164px; }
.hero-actions .outline-light { background:#0006; }
.hero-actions .outline-light:hover { background:var(--white); }

/* For the whole table: the sharing photo runs edge to edge into a black band; the trays read like the menu boards. */
.home-catering { display:grid; background:var(--black); color:var(--white); }
.table-picture { position:relative; margin:0; }
.table-picture img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 55%; }
.table-picture::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 68%,#000 100%); }
.table-picture::before { content:""; position:absolute; inset:0 0 auto; z-index:1; height:min(30%,150px); background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 22%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.2) 74%,rgba(0,0,0,0) 100%); pointer-events:none; }
.table-copy { display:grid; padding:8px var(--gutter) 48px; }
.table-copy h2 { font-size:var(--step-section); margin-bottom:18px; text-wrap:balance; }
.table-offer { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0; border-top:1px solid #3A3A3A; }
.table-copy h2+.table-offer { border-top:2px solid var(--white); }
.table-offer h3 { font:800 var(--text-body)/1.35 var(--body); text-transform:none; margin-bottom:4px; }
.table-offer p { font-size:var(--text-small); line-height:1.55; color:#CFCFCF; }
.table-offer .price { font-size:44px; }
.table-copy>.button { justify-self:center; margin-top:26px; }

/* What are you having: big food, swiped through on phones. */
.home-menu h2 { margin-bottom:22px; text-align:center; }
.food-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.food-tile { display:grid; align-content:start; gap:14px; min-width:0; text-decoration:none; }
.food-tile figure { margin:0; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-media); }
.food-tile img { width:100%; height:100%; object-fit:cover; transition:transform var(--med) var(--ease); }
.tile-info { display:grid; justify-items:center; gap:4px; text-align:center; }
.tile-info h3 { font-size:var(--step-sub); }
.tile-info .price { font-size:var(--step-sub); }
.from-price { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.from-price small { font-size:var(--text-fine); }
.home-menu .actions { justify-content:center; margin-top:36px; }
@media(hover:hover) {
  .food-tile:hover img { transform:scale(1.04); }
}

/* Johnny and Ani: their photo edge to edge beside the red panel. */
.home-family { display:grid; background:var(--red); color:var(--white); }
.home-family figure { position:relative; margin:0; }
.home-family img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 22%; }
.family-copy { display:grid; justify-items:center; align-content:center; gap:16px; padding:40px var(--gutter) 48px; text-align:center; }
.family-copy h2 { font-size:var(--step-feature); line-height:.95; }
.family-copy>p { max-width:36ch; font-size:var(--text-lead); }
.family-copy .button { margin-top:6px; }
.family-copy a:focus-visible { outline-color:white; }

@media(min-width:801px) {
  .home-catering { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:min(80vh,680px); }
  /* Framed on the hands, wraps and dips: the white takeout tray, the long pickle and the baklava box at the
     photo's right edge would otherwise show through the fade as stray straight lines. */
  .table-picture { overflow:hidden; }
  .table-picture img { position:absolute; inset:0; height:100%; aspect-ratio:auto; object-position:0 85%; transform:scale(1.25); transform-origin:0 85%; }
  .table-picture::after { background:linear-gradient(90deg,rgba(0,0,0,0) 66%,#000 100%); }
  .table-copy { align-content:center; justify-items:center; padding:72px max(var(--gutter),calc((100vw - 1344px) / 2)) 72px 64px; text-align:center; }
  .table-copy>.table-offer { width:min(100%,600px); text-align:left; }
  .home-family { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:min(80vh,680px); }
  .home-family figure { grid-column:2; grid-row:1; }
  .home-family img { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
  .family-copy { grid-column:1; grid-row:1; padding:72px 56px; }
}
@media(max-width:800px) {
  .film-hero { min-height:max(470px,calc(100svh - 65px - env(safe-area-inset-bottom))); padding:calc(var(--header) + 28px) var(--gutter) 76px; }
  .film-hero .hero-toggle { right:16px; bottom:28px; }
  .hero-copy h1 { font-size:clamp(60px,20vw,144px); }
  .hero-copy em { font-size:clamp(36px,10.5vw,58px); margin-top:9px; }
  .hero-actions { margin-top:28px; }
  .hero-actions .hero-menu-link { display:none; }
  .hero-actions .button { min-width:172px; }
  .food-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .food-grid::-webkit-scrollbar { display:none; }
  .food-tile { scroll-snap-align:start; }
  /* Phones: the bottom bar already calls catering, so the band ends on its prices; the menu actions sit centred. */
  .table-copy>.button { display:none; }
  .home-menu .actions { justify-content:center; }
}
@media(max-width:800px) {
  .table-offer { text-align:left; }
}
@media(max-width:800px) and (orientation:landscape) {
  .film-hero { min-height:430px; }
  .hero-copy h1 { font-size:90px; }
  .hero-copy em { font-size:42px; }
}

.menu-page {
  --seal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M45.2 7.6A5.3 5.3 0 1 1 54.8 7.6A5.3 5.3 0 1 1 64.1 9.7A5.3 5.3 0 1 1 72.7 13.9A5.3 5.3 0 1 1 80.2 19.8A5.3 5.3 0 1 1 86.1 27.3A5.3 5.3 0 1 1 90.3 35.9A5.3 5.3 0 1 1 92.4 45.2A5.3 5.3 0 1 1 92.4 54.8A5.3 5.3 0 1 1 90.3 64.1A5.3 5.3 0 1 1 86.1 72.7A5.3 5.3 0 1 1 80.2 80.2A5.3 5.3 0 1 1 72.7 86.1A5.3 5.3 0 1 1 64.1 90.3A5.3 5.3 0 1 1 54.8 92.4A5.3 5.3 0 1 1 45.2 92.4A5.3 5.3 0 1 1 35.9 90.3A5.3 5.3 0 1 1 27.3 86.1A5.3 5.3 0 1 1 19.8 80.2A5.3 5.3 0 1 1 13.9 72.7A5.3 5.3 0 1 1 9.7 64.1A5.3 5.3 0 1 1 7.6 54.8A5.3 5.3 0 1 1 7.6 45.2A5.3 5.3 0 1 1 9.7 35.9A5.3 5.3 0 1 1 13.9 27.3A5.3 5.3 0 1 1 19.8 19.8A5.3 5.3 0 1 1 27.3 13.9A5.3 5.3 0 1 1 35.9 9.7A5.3 5.3 0 1 1 45.2 7.6Z'/%3E%3C/svg%3E");
}
/* Menu and catering components. Tokens and shared shell are maintained in base.css. */
.menu-page .menu-intro {
  padding-top:28px;
  padding-bottom:20px;
}
.menu-page .menu-intro {
  text-align:center;
}
.menu-page .menu-title-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.menu-page .menu-intro h1 {
  font-size:clamp(56px,6vw,80px);
  line-height:1;
  margin:0;
}
.menu-page .menu-intro p {
  font-size:16px;
  margin:12px auto 0;
  color:var(--ink-muted);
}
/* The menu's spine (Faraj, 3 Oct 2026: "the way this menu is designed needs more work"): one scroll of
   food under a bar of section names that stays below the header. Its red underline slides to the
   section being read, and spans all three when Breakfast, Desserts and Drinks sit side by side. */
.menu-page .menu-index {
  position:sticky;
  top:var(--header,84px);
  z-index:20;
  background:var(--white);
  transition:box-shadow var(--med) var(--ease);
}
.menu-page .menu-index.is-stuck {
  box-shadow:var(--shadow-header);
}
body.menu-index-stuck .site-header.is-scrolled:not(.hero-enabled) {
  border-color:transparent;
  box-shadow:none;
}
.menu-page .menu-index-track {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:28px;
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter);
  overflow-x:auto;
  scrollbar-width:none;
}
.menu-page .menu-index-track::-webkit-scrollbar {
  display:none;
}
.menu-page .menu-index a {
  flex:0 0 auto;
  padding:18px 0 16px;
  font:800 20px/1 var(--display);
  letter-spacing:.01em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--ink-muted);
  transition:color var(--fast) var(--ease);
}
.menu-page .menu-index a:hover,
.menu-page .menu-index a[aria-current=true] {
  color:var(--black);
}
.menu-page .menu-index-bar {
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:4px;
  border-radius:2px;
  background:var(--red);
  transition:transform 360ms var(--ease),width 360ms var(--ease);
}
.menu-page .menu-index-next {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:76px;
  padding:0 var(--gutter) 0 0;
  border:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--white) 58%);
  color:var(--black);
  font:700 28px/1 var(--body);
  cursor:pointer;
}
.menu-page .menu-index-next[hidden] {
  display:none;
}
.menu-page .menu-index-next:hover {
  color:var(--red);
}
/* A tap on a section name glides there; arriving from another page lands at once. */
:root.menu-glide {
  scroll-behavior:smooth;
}
.menu-page .menu-feature,
.menu-page .menu-deals,
.menu-page .menu-category {
  scroll-margin-top:32px;
}

/* Every category in one scroll: its photo on the left, held in view while the dishes scroll past, and
   the dishes in two tight columns so each price sits right by its name. Headings and price columns line
   up down the page (alternating sides was rejected in the first prototype). */
.menu-page .menu-catalog {
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter) clamp(48px,6vw,88px);
}
.menu-page .menu-category:not(.plain-category) {
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  column-gap:clamp(40px,5.5vw,88px);
  align-items:start;
  padding:clamp(56px,6vw,88px) 0;
}
.menu-page .menu-category:not(.plain-category) .category-visual {
  position:sticky;
  top:calc(var(--header,84px) + 78px);
}
.menu-page .category-visual {
  margin:0;
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:var(--radius-media);
}
.menu-page .category-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}
/* The wraps sit in the upper part of their photo; wide phone frames keep them whole. */
.menu-page .category-visual .wraps-photo {
  object-position:50% 12%;
}
.menu-page .category-visual .sides-photo {
  object-position:50% 0;
}
.menu-page .category-visual .salad-photo {
  object-position:50% 24%;
}
.menu-page .category-body {
  min-width:0;
  container-type:inline-size;
}
.menu-page .category-body h2 {
  font-size:clamp(44px,4.6vw,68px);
  line-height:.95;
  margin:0;
}
.menu-page .category-note {
  margin:12px 0 0;
  font-size:var(--text-ui);
  line-height:1.5;
  color:var(--ink-muted);
}
.menu-page .menu-items {
  --items-gap:clamp(28px,3.4vw,52px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--items-gap);
  margin-top:24px;
  border-top:3px solid var(--black);
}
/* Two columns of dishes only where each column fits a full dish name beside its price. An odd last
   dish keeps its column, with its rule running across both, so no cell is left empty. */
@container (min-width:640px) {
  .menu-page .menu-items {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .menu-page .menu-items>article:last-of-type:nth-of-type(odd) {
    grid-column:1/-1;
    padding-right:calc(50% + var(--items-gap) / 2);
  }
}
.menu-page .menu-items article {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:76px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.menu-page .menu-items article>div:first-child {
  min-width:0;
}
/* Dish names read like the menu boards: condensed capitals beside a big red price. */
.menu-page .menu-items h3 {
  font:800 clamp(19px,1.5vw,22px)/1.1 var(--display);
  text-wrap:balance;
  text-transform:uppercase;
  letter-spacing:0;
  margin:0;
  max-width:none;
}
.menu-page .menu-items .price {
  font-size:clamp(28px,2.3vw,32px);
  line-height:1;
}
.menu-page .item-prices {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:0 0 auto;
  gap:6px;
  text-align:right;
}
.menu-page .combo-price {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:var(--text-fine);
  font-weight:700;
  line-height:1.3;
  color:var(--ink-muted);
  white-space:nowrap;
}
.menu-page .combo-price strong {
  color:var(--red);
  font-weight:800;
}
.menu-page .item-detail {
  max-width:34ch;
  text-wrap:pretty;
  margin:6px 0 0;
  font-size:var(--text-small);
  line-height:1.45;
  color:var(--ink-muted);
}
/* Breakfast, Desserts and Drinks: Breakfast and its additions under the photos, Desserts above Drinks
   under the dish lists, so the short lists leave no hole and every column lines up down the page. */
.menu-page .menu-trio {
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  grid-template-areas:"breakfast desserts" "breakfast drinks";
  column-gap:clamp(40px,5.5vw,88px);
  row-gap:48px;
  align-items:start;
  padding-top:clamp(56px,6vw,88px);
}
.menu-page .menu-trio>#breakfast {
  grid-area:breakfast;
}
.menu-page .menu-trio>#desserts {
  grid-area:desserts;
}
.menu-page .menu-trio>#drinks {
  grid-area:drinks;
}
.menu-page .plain-category .category-body h2 {
  font-size:clamp(36px,3.4vw,48px);
}
.menu-page .breakfast-extras h3 {
  text-transform:uppercase;
}
.menu-page .breakfast-extras dl {
  margin:0;
}
.menu-page .breakfast-extras dl>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--text-ui);
}
.menu-page .breakfast-extras dd {
  margin:0;
  font:800 21px/1.1 var(--display);
  color:var(--red);
  white-space:nowrap;
}
@media(max-width:1100px) {
  .menu-page .menu-index-track {
    justify-content:flex-start;
    gap:26px;
    padding-right:calc(var(--gutter) + 40px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
  }
}
@media(max-width:1023px) {
  .menu-page .menu-category:not(.plain-category) {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
@media(max-width:900px) {
  .menu-page .menu-trio {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"breakfast" "desserts" "drinks";
  }
}
/* Phones: each category reads heading, photo, dishes; photos run edge to edge. */
@media(max-width:700px) {
  .menu-page .menu-index-track {
    gap:22px;
  }

  .menu-page .menu-index a {
    padding:16px 0 14px;
    font-size:18px;
  }

  .menu-page .menu-category:not(.plain-category) {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:44px 0 4px;
  }

  .menu-page .menu-category:not(.plain-category) .category-body {
    display:contents;
  }

  .menu-page .category-body h2 {
    order:1;
    font-size:var(--step-section);
    line-height:1;
  }

  .menu-page .category-note {
    order:2;
    margin-top:10px;
    font-size:var(--text-small);
  }

  /* An explicit width, so the photo's height is reserved before it loads. */
  /* Not held on phones. */
  .menu-page .category-visual,
  .menu-page .menu-category:not(.plain-category) .category-visual {
    position:relative;
    top:auto;
  }

  .menu-page .category-visual {
    order:3;
    width:calc(100% + var(--gutter) * 2);
    max-width:none;
    margin:20px calc(var(--gutter) * -1) 0;
    aspect-ratio:16/10;
    border-radius:0;
  }

  .menu-page .category-visual img {
    border-radius:0;
  }

  .menu-page .menu-items {
    order:4;
    margin-top:20px;
  }

  .menu-page .menu-items article {
    min-height:66px;
  }

  .menu-page .menu-items h3 {
    font-size:21px;
  }

  .menu-page .menu-items .price {
    font-size:30px;
  }

  .menu-page .menu-trio {
    padding-top:44px;
    row-gap:44px;
  }
}
/* Phones centre (see base.css): headings and notes centre; dish rows and the breakfast additions keep
   their two ends. */
@media(max-width:800px) {
  .menu-page .category-note {
    margin-inline:auto;
  }

  .menu-page .menu-items,
  .menu-page .breakfast-extras dl {
    text-align:left;
  }

  .menu-page .breakfast-extras h3 {
    text-align:center;
  }
}
/* The meals-for-two deal beside the dishes it pairs: a small red link up to the deal and its terms. */
.menu-page .category-deal {
  margin:14px 0 0;
}
.menu-page .category-deal a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:6px 14px;
  border:1.5px solid var(--red);
  border-radius:var(--radius-pill);
  color:var(--red);
  font-size:var(--text-small);
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.menu-page .category-deal a:hover {
  background:var(--red);
  color:var(--white);
}
.menu-page .category-deal strong {
  font-weight:800;
}
/* Breakfast additions belong to the breakfast wrap: one options panel right under it, not a list that
   reads like another category. */
.menu-page .breakfast-extras {
  padding:14px 0 4px;
}
/* The breakfast wrap and what you can add to it read as one card (Faraj, 3 Oct 2026: "this should actually look
   like its together"). */
.menu-page #breakfast .menu-items {
  padding:4px 22px 10px;
  border:1.5px solid var(--line);
  border-top:3px solid var(--black);
  border-radius:0 0 var(--radius-media) var(--radius-media);
  background:var(--white);
}
.menu-page #breakfast .menu-items article {
  border-bottom:1px solid var(--line);
}
.menu-page .breakfast-extras h3 {
  margin:0 0 2px;
  font:800 17px/1.2 var(--display);
  letter-spacing:.02em;
  color:var(--ink-muted);
}
.menu-page .breakfast-extras dl>div {
  padding:10px 0;
}
.menu-page .breakfast-extras dl>div:last-child {
  border-bottom:0;
}
.menu-page .breakfast-extras dd {
  font-size:19px;
}
@media(max-width:700px) {

  .menu-page .category-deal {
    order:2;
    margin-inline:auto;
  }
}
/* Badges from Johnny's own delivery listings (3 Oct 2026): the #1 most liked dish is Most popular; the next
   most liked are Popular. */
.menu-page .item-badge {
  display:block;
  width:fit-content;
  margin:0 0 7px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--black);
  color:var(--white);
  font:800 12px/1.3 var(--body);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.menu-page .item-badge.is-top {
  background:var(--red);
}
/* Meals for two (Faraj, 3 Oct 2026: "so cramped and ugly make it more appealing than just a red and white
   combo"): two big cards with Johnny's own photos of the food in each special, a red sticker with what it
   saves (the exclusives' seal), on a soft grey band between the specials board and the menu. */
.menu-page .menu-deals {
  padding:clamp(56px,7vw,104px) var(--gutter);
  background:var(--quiet);
}
.menu-page .deals-inner {
  display:grid;
  justify-items:center;
  gap:clamp(28px,3vw,40px);
  max-width:1344px;
  margin:0 auto;
}
.menu-page .menu-deals h2 {
  margin:0;
  font-size:var(--step-section);
  line-height:1;
  text-align:center;
}
.menu-page .deal-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
  width:100%;
}
.menu-page .deal-card {
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px rgba(0,0,0,.08);
}
.menu-page .deal-photo {
  position:relative;
  margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
}
.menu-page .deal-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:scale 700ms var(--ease);
}
.menu-page .deal-card:hover .deal-photo img {
  scale:1.04;
}
.menu-page .deal-seal {
  --size:clamp(104px,9.5vw,136px);
  position:absolute;
  right:clamp(14px,2vw,26px);
  bottom:clamp(14px,2vw,26px);
  gap:3px;
}
.menu-page .deal-seal .seal-word {
  font:800 calc(var(--size) * .13)/1 var(--display);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
}
.menu-page .deal-seal .seal-amount {
  font:800 calc(var(--size) * .3)/1 var(--display);
  color:var(--white);
}
.menu-page .deal-body {
  display:grid;
  justify-items:center;
  align-content:center;
  gap:8px;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,32px) clamp(24px,2.8vw,34px);
  text-align:center;
}
.menu-page .deal-body h3 {
  margin:0;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1;
}
.menu-page .deal-price {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0;
  font-size:var(--text-small);
  font-weight:800;
  color:var(--ink-muted);
}
.menu-page .deal-price .price {
  font-size:clamp(46px,4.6vw,66px);
  line-height:.9;
}
/* An original price is slashed beside the price you pay, the way sale prices usually are (Faraj, 3 Oct 2026: "make it
   more appealing everywhere when it says what the original price is"; 4 Oct: "how is crossing out usually done and do
   you think there can be an improvement to this"): quieter figures, so the new price wins, and one diagonal stroke
   with round ends in the colour that stands out from the background (red on white), which crosses each figure only
   briefly, so the old price stays readable. Readers hear "Regular price" or "bought separately" instead. */
.menu-page .was {
  position:relative;
  display:inline-block;
  font:800 clamp(24px,2.2vw,30px)/1 var(--display);
  color:var(--ink-muted);
  text-decoration:none;
  white-space:nowrap;
}
.menu-page .was::after {
  content:"";
  position:absolute;
  left:-.12em;
  right:-.12em;
  top:54%;
  height:.1em;
  border-radius:1em;
  background:var(--red);
  transform:translateY(-50%) rotate(-11deg);
  pointer-events:none;
}
.menu-page .deal-price .was {
  order:1;
}
.menu-page .deal-price .price {
  order:2;
}
/* On the red tags the figures are a softer white and the stroke black. */
.menu-page .tag-was {
  font-size:max(20px, calc(var(--size) * .12));
  color:rgba(255,255,255,.85);
}
.menu-page .tag-was::after {
  background:var(--black);
}
.menu-page .deals-note {
  margin:0;
  font-size:var(--text-small);
  line-height:1.45;
  color:var(--ink-muted);
}
@media(max-width:700px) {
  .menu-page .deal-cards {
    grid-template-columns:minmax(0,1fr);
  }

  .menu-page .deal-body h3 {
    font-size:38px;
  }

  .menu-page .deal-price .price {
    font-size:54px;
  }
}
/* Happy hour and Johnny's exclusives lead the page as one black board (Faraj, 3 Oct 2026).
   The red seals come from the price tags on the shop's own happy-hour poster. */
.menu-feature {
  overflow:hidden;
  background:var(--black);
  color:var(--white);
}
.menu-page .happy-hour {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  column-gap:48px;
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter);
}
.menu-page .happy-copy {
  grid-column:1;
  grid-row:1;
  align-self:center;
  padding:88px 0 84px;
}
/* Filled by the script; the space is held so nothing moves when it appears. */
.menu-page .happy-status {
  display:flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  min-height:36px;
  margin:0 0 24px;
  padding:0 16px;
  border:1.5px solid var(--line-on-dark);
  border-radius:var(--radius-pill);
  font-size:var(--text-small);
  font-weight:700;
}
.menu-page .happy-status:empty {
  visibility:hidden;
}
.menu-page .happy-status::before {
  content:"";
  width:9px;
  height:9px;
  border:2px solid currentColor;
  border-radius:50%;
}
.menu-page .happy-status.is-on {
  background:var(--red);
  border-color:var(--red);
}
.menu-page .happy-status.is-on::before {
  background:var(--white);
  border-color:var(--white);
  animation:happy-pulse 1.5s ease-out 3;
}
@keyframes happy-pulse {
  from { box-shadow:0 0 0 0 rgba(255,255,255,.75); }
  to { box-shadow:0 0 0 11px rgba(255,255,255,0); }
}
.menu-page .happy-title {
  font-size:clamp(64px,9.6vw,138px);
  line-height:.9;
  margin:0;
}
.menu-page .happy-title>span {
  display:block;
}
.menu-page .happy-title em {
  display:block;
  margin-top:.14em;
  color:var(--red);
  font:italic 600 clamp(34px,5vw,72px)/1.1 Fraunces,Georgia,serif;
  text-transform:none;
  letter-spacing:-.04em;
}
.menu-page .happy-when {
  max-width:none;
  margin:26px 0 0;
  font:800 clamp(28px,3vw,44px)/1 var(--display);
  text-transform:uppercase;
}
.menu-page .happy-terms {
  margin:10px 0 0;
  font:800 clamp(20px,1.8vw,24px)/1.2 var(--display);
  letter-spacing:.02em;
  color:var(--white);
}
/* Flying food: each piece rests on its dish (--rx, --ry) and flies to its place around it (--ex, --ey) as the dish's
   --p runs from 0 to 1 with the scroll. Each leaves at its own moment (--d) with a pop and keeps moving until the
   dish nears the top of the screen (Shelby's toppings move with the scroll the whole way): an ease-out blended with a
   smoothstep, so it leaves fast, moves steadily, comes to rest smoothly and is two-thirds of the way at halfway. It
   rises over an arc (--lift) that peaks two-thirds out, turning from --r0 to --r1 and growing from --s0 to --s1; its
   shadow lifts as it leaves.
   The script moves a piece in (--nx) if its place would reach past the screen's edge. On phones each piece is laid
   out at its landed size and shrunk while it rests (--k), so it is never a small picture stretched up (Safari
   softens those). Units (--u) come from the dish's frame. Without script, or for reduced motion, the pieces sit at
   their places. */
.menu-page .fly {
  --q:clamp(0, (var(--p) - var(--d,0)) / (1 - var(--d,0)), 1);
  --e:calc(.45 * (1 - (1 - var(--q)) * (1 - var(--q)) * (1 - var(--q))) + .55 * var(--q) * var(--q) * (3 - 2 * var(--q)));
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:calc(var(--w) * var(--k, 1) * var(--u));
  transform:translate(calc((var(--rx) + (var(--ex) + var(--nx, 0) - var(--rx)) * var(--e)) * var(--u)), calc((var(--ry) + (var(--ey) * var(--ky,1) - var(--ry)) * var(--e) - var(--lift,0) * 6.75 * var(--e) * var(--e) * (1 - var(--e)) + var(--oy,0)) * var(--u))) translate(-50%,-50%) rotate(calc((var(--r0) + (var(--r1) - var(--r0)) * var(--e)) * 1deg)) scale(calc((var(--s0,1) + (var(--s1,1.15) - var(--s0,1)) * var(--e)) / var(--k, 1)));
  filter:drop-shadow(0 calc((1.5 + 7 * var(--e)) * 1px) calc((1.5 + 5 * var(--e)) * 1px) rgba(0,0,0,calc(.34 - .16 * var(--e))));
  pointer-events:none;
}
/* The bites themselves sit under the tags in the board's lower corner and their toppings jump out as you scroll
   (Faraj, 4 Oct 2026: "have the shawarma bites fill the space and jump out somewhere here"). The flight never
   reaches the tags. Placed by structure (the dish scripts rewrite the figure's own markup). */
.menu-page .happy-hour>.dish-flight {
  --sky:40;
  grid-column:2;
  grid-row:1;
  align-self:end;
  justify-self:center;
  width:var(--dish-w);
  margin:0 0 24px;
}
.menu-page .happy-hour .xb-1 { --ex:-120; --ey:-25; --d:0.24; --lift:40; }
.menu-page .happy-hour .xb-2 { --ex:140; --ey:-80; --d:0.12; --lift:60; }
.menu-page .happy-hour .xb-3 { --ex:540; --ey:20; --d:0; --lift:60; }
.menu-page .happy-hour .xb-4 { --ex:350; --ey:-50; --d:0; --lift:50; }
.menu-page .happy-hour .xb-6 { --ex:1070; --ey:90; --d:0.24; --lift:40; }
/* Full-size toppings fill the room under the tags, so the pickle stays in its pita (the photo keeps it). */
.menu-page .happy-hour .xb-5 { display:none; }
/* The burst is a loose spray around the top of the plate: never a scatter (Faraj, 4 Oct 2026: "it looks random like
   they are just goin out randomly"), never a neat crown ("a little too organized now"). Each piece keeps its side, so
   nothing crosses, but lands at its own distance (--ring) and angle on a shared ellipse, with uneven gaps, leaving at
   its own moment, with its own turn and size: most rise around the top, one drops low beside the rim and one comes
   forward over the front rim, larger. The two dishes differ. The ellipse is narrower on phones. Angles below the
   right end are negative, so phones fan them in the right way. */
.menu-page .exclusive .dish-flight {
  --crown-x:560;
  --crown-y:430;
}
/* Mid-size screens put the dish near the edge of the screen: a narrower spray keeps its ends whole. */
@media(min-width:801px) and (max-width:1400px) {
  .menu-page .exclusive .dish-flight {
    --crown-x:465;
  }
}
/* Each piece lands on a shared ellipse at its own distance (--ring). On phones the spray fans in towards the top
   (--fan), leaving the plate's ends free. */
.menu-page .exclusive .fly {
  --fa:calc(90deg + (var(--a) - 90deg) * var(--fan, 1));
  --ex:calc(500 + var(--crown-x) * var(--ring,1) * cos(var(--fa)));
  --ey:calc(300 - var(--crown-y) * var(--ring,1) * sin(var(--fa)));
}
.menu-page .exclusive .xp-1 { --a:214deg; --ring:1.04; --d:0.04; --lift:40; --r1:-30; --grow:1.15; }
.menu-page .exclusive .xp-6 { --a:150deg; --ring:1.2; --d:0; --lift:120; --r1:-40; --grow:1.1; }
.menu-page .exclusive .xp-4 { --a:110deg; --ring:0.78; --d:0.1; --lift:160; --r1:-25; --grow:1; }
.menu-page .exclusive .xp-2 { --a:-62deg; --ring:0.74; --d:0.02; --lift:30; --r1:20; --grow:1.35; }
.menu-page .exclusive .xp-5 { --a:72deg; --ring:0.95; --d:0.06; --lift:170; --r1:40; --grow:1.05; }
.menu-page .exclusive .xp-3 { --a:28deg; --ring:1.14; --d:0.08; --lift:70; --r1:34; --grow:1.15; }
.menu-page .exclusive .xn-2 { --a:158deg; --ring:1.15; --d:0.03; --lift:80; --r1:-40; --grow:1.15; }
.menu-page .exclusive .xn-3 { --a:238deg; --ring:0.74; --d:0.1; --lift:30; --r1:-30; --grow:1.35; }
.menu-page .exclusive .xn-5 { --a:120deg; --ring:0.98; --d:0; --lift:160; --r1:-16; --grow:1.08; }
.menu-page .exclusive .xn-1 { --a:84deg; --ring:0.8; --d:0.06; --lift:170; --r1:30; --grow:1.12; }
.menu-page .exclusive .xn-4 { --a:50deg; --ring:1.18; --d:0.12; --lift:120; --r1:20; --grow:1; }
.menu-page .exclusive .xn-6 { --a:-42deg; --ring:1; --d:0.04; --lift:40; --r1:46; --grow:1.2; }
/* Around each dish as it bursts: a warm light comes up behind the food, garlic-sauce droplets splash out with the
   pieces and fade, and the landed toppings float gently (all of it still for reduced motion). */
.menu-page .dish-flight::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:-12%;
  right:-12%;
  top:calc(var(--sky) * var(--u) - 4%);
  height:calc(700 * var(--u));
  background:radial-gradient(closest-side, rgba(255,214,168,.3), rgba(226,28,33,.17) 58%, rgba(226,28,33,0) 100%);
  opacity:calc(.12 + .88 * var(--p));
  scale:calc(.82 + .22 * var(--p));
  pointer-events:none;
}
.menu-page .dish-flight .drop {
  --q:clamp(0, (var(--p) - var(--d,0)) / .42, 1);
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:calc(var(--sz) * var(--u));
  aspect-ratio:1;
  border-radius:46% 54% 50% 48%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.55) 0 18%, var(--bit, #F1ECE2) 45%);
  opacity:calc(4 * var(--q) * (1 - var(--q)));
  transform:translate(calc((500 + var(--reach) * cos(var(--a)) * var(--q)) * var(--u)), calc((var(--oy,0) + 300 - var(--reach) * sin(var(--a)) * var(--q) + 260 * var(--q) * var(--q)) * var(--u))) translate(-50%,-50%) scale(calc(.4 + .6 * var(--q)));
  pointer-events:none;
}
.menu-page .dish-flight .fly img {
  animation:topping-float 3.4s ease-in-out infinite alternate;
  animation-delay:calc(var(--d,0) * -9s);
}
@keyframes topping-float {
  from {
    translate:0 calc(-5px * var(--e,1));
    rotate:calc(-3deg * var(--e,1));
  }
  to {
    translate:0 calc(5px * var(--e,1));
    rotate:calc(3deg * var(--e,1));
  }
}
/* Every topping rests at the size it has on the plate (Faraj, 4 Oct 2026: "size every topping to the actual size when
   it is on the plate"; widths measured against the same food in each dish photo) and grows as it flies towards you
   ("the toppings still look small"), the nearest ones most (--grow). However small on the plate, none
   lands under 140 units, a seventh of the dish's width, so parsley, tomato and jalapeno read too. */
.menu-page .dish-flight[data-dish] .fly[data-ingredient] {
  --s0:1;
  --s1:max(calc(1.7 * var(--grow, 1)), calc(140 / var(--w)));
}
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="beef"] { --w:75; }
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="potato"] { --w:100; }
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="turnip"] { --w:115; }
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="parsley"] { --w:32; }
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="onion"] { --w:80; }
.menu-page .dish-flight[data-dish="poutine"] .fly[data-ingredient="chicken"] { --w:110; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="chip"] { --w:105; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="beef"] { --w:80; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="tomato"] { --w:42; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="onion"] { --w:80; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="chicken"] { --w:100; }
.menu-page .dish-flight[data-dish="nachos"] .fly[data-ingredient="jalapeno"] { --w:50; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="beef"] { --w:80; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="lettuce"] { --w:75; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="chicken"] { --w:90; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="potato"] { --w:60; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="pickle"] { --w:34; }
.menu-page .dish-flight[data-dish="bites"] .fly[data-ingredient="falafel"] { --w:95; }
/* The cartoon pop around each dish (Faraj, 4 Oct 2026: "more so cartoonish anmations poppig out", with red strokes
   drawn out of both ends of the tray; of thin drawn lines: "no substance"): chunky red marks with a white sticker edge
   and a shadow. Each cluster pops in with an overshoot as the toppings burst (it follows the dish's --p, so it plays
   with the scroll and sits finished for reduced motion), then boils like hand-drawn animation. */
.menu-page .pop-layer {
  position:absolute;
  left:0;
  top:calc(var(--sky) * var(--u));
  width:100%;
  height:calc(667 * var(--u));
  z-index:3;
  overflow:visible;
  filter:drop-shadow(0 calc(6 * var(--u)) calc(7 * var(--u)) rgba(0,0,0,.55));
  pointer-events:none;
}
.menu-page .pop-layer g[style] {
  --sp:clamp(0, (var(--p) - var(--t)) / .22, 1);
  --pop:calc(1 + 2.70158 * (var(--sp) - 1) * (var(--sp) - 1) * (var(--sp) - 1) + 1.70158 * (var(--sp) - 1) * (var(--sp) - 1));
  opacity:calc(var(--sp) * 5);
}
.menu-page .pop-marks {
  transform-box:view-box;
  transform-origin:calc(var(--ox) * 1px) calc(var(--oy) * 1px);
  scale:var(--pop);
}
.menu-page .pop-marks path {
  fill:var(--red);
  stroke:var(--white);
  stroke-width:11;
  stroke-linejoin:round;
  paint-order:stroke;
}
.menu-page .pop-marks .boil {
  animation:pop-boil .48s steps(1,end) infinite;
}
.menu-page .pop-marks .boil:not(:first-child) {
  opacity:0;
}
.menu-page .pop-marks .boil:nth-child(2) {
  animation-delay:-.32s;
}
.menu-page .pop-marks .boil:nth-child(3) {
  animation-delay:-.16s;
}
@keyframes pop-boil {
  0% {
    opacity:1;
  }
  33.3%, 100% {
    opacity:0;
  }
}
/* Off screen, the loops rest. */
.menu-page .dish-flight.is-far .boil,
.menu-page .dish-flight.is-far .fly img {
  animation-play-state:paused;
}
/* The dish pops a little as its toppings burst out. */
.menu-page .dish-flight>img {
  --b:clamp(0, (var(--p) - .02) / .3, 1);
  scale:calc(1 + .18 * var(--b) * (1 - var(--b)));
}
/* Two tags hang from the top edge of the board, the six-piece one lower. */
/* The tags column is tall enough for the six-piece tag and the bites under it: the dish starts just below the
   lower tag, so its toppings stay clear of both tags. */
.menu-page .happy-hour {
  --dish-w:clamp(300px,39vw,560px);
}
.menu-page .happy-tags {
  grid-column:2;
  grid-row:1;
  position:relative;
  min-height:var(--tags-height,calc(96px + clamp(150px,22.4vw,322px) + .667 * var(--dish-w) + 44px));
  margin:0;
  padding:0;
  list-style:none;
}
.menu-page .happy-tag {
  --size:clamp(150px,20vw,288px);
  --string:48px;
  position:absolute;
  top:0;
  left:2%;
  width:var(--size);
  padding-top:var(--string);
  transform-origin:50% 0;
}
.menu-page .happy-tag+.happy-tag {
  --size:clamp(150px,22.4vw,322px);
  --string:96px;
  left:auto;
  right:0;
}
.menu-page .happy-tag::before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  left:calc(50% - 1px);
  width:2px;
  height:calc(var(--string) + var(--size) * .11);
  background:#CFCFCF;
}
.menu-page .tag-face {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  aspect-ratio:1;
  background:var(--red);
  -webkit-mask:var(--seal) center/100% 100% no-repeat;
  mask:var(--seal) center/100% 100% no-repeat;
  text-align:center;
}
/* The eyelet the string runs through. */
.menu-page .tag-face::before {
  content:"";
  position:absolute;
  top:calc(var(--size) * .11 - 7px);
  left:calc(50% - 7px);
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--black);
}
.menu-page .tag-size {
  margin:0;
  color:var(--white);
  font:800 max(15px, calc(var(--size) * .1))/1 var(--display);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.menu-page .tag-price {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  color:var(--white);
  font:800 calc(var(--size) * .34)/1 var(--display);
  font-variant-numeric:tabular-nums;
}
.menu-page .tag-price .currency {
  font-size:.76em;
}
.menu-page .tag-price .cents {
  font-size:.6em;
}
.menu-page .tag-was .price {
  display:inline;
  color:inherit;
  font:inherit;
}
/* Johnny's exclusives (Faraj, 4 Oct 2026: "each deal here is on one side and the food item is on the other and
   then it alternate"): each deal beside its dish, the sides alternating down the board, the dish's toppings flying
   out as it scrolls into view. */
.menu-page .exclusives {
  max-width:1440px;
  margin:0 auto;
  padding:72px var(--gutter) 24px;
  border-top:1px solid #262626;
}
/* The board's heading leads its dish names. */
.menu-page .exclusives h2 {
  margin:0;
  padding-bottom:26px;
  border-bottom:2px solid var(--white);
  font-size:clamp(56px,7.4vw,108px);
  text-align:center;
}
/* A row each: the name over its red seal on one side, level with the dish on the other (the open sky above
   the dish belongs to the toppings, so the rows above and below the deal split 2:1). */
.menu-page .exclusive {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:2fr auto 1fr;
  grid-template-areas:"name dish" "price dish" ". dish";
  column-gap:clamp(24px,4vw,72px);
  row-gap:26px;
  padding:clamp(32px,3.6vw,52px) 0;
  text-align:center;
}
.menu-page .exclusive.is-flipped {
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"dish name" "dish price" "dish .";
}
.menu-page .exclusive+.exclusive {
  border-top:1px solid #262626;
}
.menu-page .exclusive>h3 {
  grid-area:name;
  align-self:end;
  justify-self:center;
  position:relative;
  z-index:1;
  max-width:9ch;
  margin:0;
  font:800 clamp(44px,5.6vw,92px)/.92 var(--display);
  text-transform:uppercase;
}
.menu-page .exclusive>.seal {
  grid-area:price;
  justify-self:center;
}
/* The text's ink sits at the seal's centre; the bottom padding offsets the font's own spacing. */
.menu-page .seal {
  --size:clamp(132px,13.5vw,208px);
  --lift:0;
  padding-bottom:calc(var(--size) * var(--lift));
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:var(--size);
  aspect-ratio:1;
  background:var(--red);
  -webkit-mask:var(--seal) center/100% 100% no-repeat;
  mask:var(--seal) center/100% 100% no-repeat;
  rotate:-8deg;
}
.menu-page .exclusive:nth-child(2) .seal {
  rotate:7deg;
}
/* A lone price's digits sit low in their line; lift them to the seal's centre. */
.menu-page .exclusive>.seal {
  --lift:.05;
}
.menu-page .seal .price {
  color:var(--white);
  font-size:calc(var(--size) * .33);
}
/* The dish: its toppings rest on it, then fly up and out as it rises through the screen (the wraps' engine sets
   --p from 0 to 1; without script, or for reduced motion, they sit flown). Units are 1/1000ths of the dish's
   width, and the photo starts --sky units down so the pieces have open sky to fly into (less on phones, where the
   flown pieces may pass behind the name). They sit at their real size in the food and grow as they come up
   towards you. */
.menu-page .dish-flight {
  --p:1;
  --sky:150;
  --u:calc(100cqw / 1000);
  container-type:inline-size;
  grid-area:dish;
  position:relative;
  z-index:0;
  width:min(100%,620px);
  justify-self:center;
  margin:0;
}
.menu-page .dish-flight>img {
  display:block;
  width:100%;
  height:auto;
  margin-top:calc(var(--sky) * var(--u));
}
.menu-page .dish-flight .fly {
  --oy:var(--sky);
  --s0:.55;
}
.menu-page .dish-flight .fly img {
  display:block;
  width:100%;
  height:auto;
}
.menu-page .xp-1 { --w:100; --rx:310; --ry:307; --ex:150; --ey:40; --r0:0; --r1:-30; --s1:1.15; }
.menu-page .xp-2 { --w:100; --rx:520; --ry:540; --ex:300; --ey:-45; --r0:0; --r1:-60; --s1:1.15; }
.menu-page .xp-3 { --w:86; --rx:850; --ry:227; --ex:460; --ey:-5; --r0:0; --r1:-20; --s1:1.15; }
.menu-page .xp-4 { --w:69; --rx:500; --ry:160; --ex:620; --ey:-45; --r0:0; --r1:30; --s1:1.15; }
.menu-page .xp-5 { --w:100; --rx:530; --ry:180; --ex:780; --ey:30; --r0:0; --r1:-30; --s1:1.15; }
.menu-page .xp-6 { --w:93; --rx:490; --ry:493; --ex:910; --ey:65; --r0:0; --r1:45; --s1:1.15; }
.menu-page .xn-1 { --w:114; --rx:560; --ry:540; --ex:140; --ey:40; --r0:0; --r1:-20; --s1:1.15; }
.menu-page .xn-2 { --w:114; --rx:320; --ry:393; --ex:310; --ey:-45; --r0:0; --r1:30; --s1:1.15; }
.menu-page .xn-3 { --w:76; --rx:400; --ry:287; --ex:480; --ey:-5; --r0:0; --r1:-25; --s1:1.15; }
.menu-page .xn-4 { --w:97; --rx:560; --ry:173; --ex:640; --ey:-45; --r0:0; --r1:50; --s1:1.15; }
.menu-page .xn-5 { --w:114; --rx:480; --ry:400; --ex:780; --ey:30; --r0:0; --r1:-35; --s1:1.15; }
.menu-page .xn-6 { --w:86; --rx:590; --ry:260; --ex:910; --ey:65; --r0:0; --r1:30; --s1:1.15; }
.menu-page .xb-1 { --w:114; --rx:250; --ry:360; --ex:130; --ey:40; --r0:0; --r1:-45; --s1:1.15; }
.menu-page .xb-2 { --w:100; --rx:290; --ry:207; --ex:250; --ey:-45; --r0:0; --r1:15; --s1:1.15; }
.menu-page .xb-3 { --w:109; --rx:500; --ry:300; --ex:440; --ey:-5; --r0:0; --r1:30; --s1:1.15; }
.menu-page .xb-4 { --w:97; --rx:450; --ry:440; --ex:600; --ey:-45; --r0:0; --r1:-40; --s1:1.15; }
.menu-page .xb-5 { --w:27; --rx:520; --ry:460; --ex:780; --ey:30; --r0:0; --r1:-10; --s1:1.15; }
.menu-page .xb-6 { --w:96; --rx:780; --ry:400; --ex:900; --ey:65; --r0:0; --r1:20; --s1:1.15; }
/* Phones and small tablets (Faraj, 4 Oct 2026: "it looks bad on mobile your removed too much figure out how to make it
   work"): a poster in three beats. The two tags hang from the top edge at full size, the words follow, and the bites
   close the board as big as the exclusives' dishes, their toppings jumping up into open sky above the tray. */
@media(max-width:800px) {
  .menu-page .happy-hour {
    grid-template-columns:minmax(0,1fr);
  }

  .menu-page .happy-copy,
  .menu-page .happy-tags {
    grid-column:auto;
    grid-row:auto;
  }

  .menu-page .happy-tags {
    order:-1;
    --tags-height:calc(min(170px, 40vw) + 62px);
  }

  /* On phones the bites are as big as the exclusives and their toppings burst in an arc close over the tray, clear
     of the words above. */
  .menu-page .happy-hour>.dish-flight {
    --sky:160;
    grid-column:auto;
    grid-row:auto;
    order:1;
    justify-self:center;
    width:min(94%,520px);
    margin:2px 0 24px;
  }

  .menu-page .happy-hour .xb-1 {
    --ex:20;
    --ey:60;
  }

  .menu-page .happy-hour .xb-2 {
    --ex:200;
    --ey:-45;
  }

  .menu-page .happy-hour .xb-3 {
    --ex:600;
    --ey:-40;
  }

  .menu-page .happy-hour .xb-4 {
    --ex:390;
    --ey:15;
  }

  .menu-page .happy-hour .xb-6 {
    --ex:890;
    --ey:45;
  }

  .menu-page .happy-tag {
    --size:min(170px, 40vw);
    --string:28px;
    left:calc(50% - var(--size) - 10px);
  }

  .menu-page .happy-tag+.happy-tag {
    --size:min(170px, 40vw);
    --string:52px;
    left:calc(50% + 10px);
  }

  .menu-page .happy-copy {
    padding:10px 0 0;
  }

  .menu-page .happy-status {
    margin-bottom:12px;
  }

  .menu-page .happy-title {
    font-size:clamp(46px,14.6vw,64px);
  }

  .menu-page .happy-title>span {
    display:inline;
  }

  .menu-page .happy-title em {
    font-size:clamp(34px,9.6vw,44px);
  }

  .menu-page .happy-when {
    margin-top:10px;
    font-size:26px;
  }
}
@media(max-width:640px) {
  .menu-page .menu-index a {
    padding-block:13px 11px;
  }
}
/* Phones and small tablets (Faraj, 4 Oct 2026: "im talking about the way these are setup on mobile make sure ur not
   changing anything on desktop"): each exclusive keeps its deal together, as on larger screens. The name and its red
   seal sit side by side above the dish, centred as a pair and swapping sides from one exclusive to the next; the dish
   runs full width under them. Larger screens are unchanged. */
@media(max-width:800px) {
  .menu-page .exclusives {
    padding:48px var(--gutter) 8px;
  }

  .menu-page .exclusives h2 {
    padding-bottom:20px;
    font-size:clamp(44px,13vw,54px);
  }

  .menu-page .exclusive {
    grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:". name price ." "dish dish dish dish";
    align-items:center;
    column-gap:0;
    row-gap:0;
    padding:30px 0 28px;
  }

  .menu-page .exclusive.is-flipped {
    grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);
    grid-template-areas:". price name ." "dish dish dish dish";
  }

  /* The name leans towards its seal. */
  .menu-page .exclusive>h3 {
    align-self:center;
    margin-right:clamp(14px,4.5vw,26px);
    font-size:clamp(36px,10.6vw,46px);
    text-align:right;
  }

  .menu-page .exclusive.is-flipped>h3 {
    margin-right:0;
    margin-left:clamp(14px,4.5vw,26px);
    text-align:left;
  }

  .menu-page .exclusive>.seal {
    --size:clamp(108px,30vw,132px);
  }

  /* Phones (Faraj, 4 Oct 2026: "the proportions and the quality of how the jngredients look is so weird on mobile"):
     like Shelby's on a phone, the dish is big and its toppings burst big and close around the food as one cluster,
     instead of small pieces far apart in empty sky; each topping is laid out at its landed size (--k), so it stays
     sharp; the long pink turnip lands smaller and nearer the plate, and the pieces under each seal (the poutine's
     onion, the nachos' chicken) nearer the food, clear of it. The sky is just enough for the toppings, clear of the name
     and seal above, and the dish leaves a little black at both plate ends for the marks. */
  .menu-page .dish-flight {
    --sky:138;
    width:min(94%,470px);
  }

  .menu-page .exclusive .dish-flight {
    --crown-x:430;
    --crown-y:345;
    --fan:.85;
  }

  .menu-page .dish-flight[data-dish] .fly[data-ingredient] {
    --s1:max(calc(2.2 * var(--grow, 1)), calc(180 / var(--w)));
    --k:var(--s1);
  }

  .menu-page .exclusive .xp-3 {
    --grow:.7;
    --ring:.92;
  }

  .menu-page .exclusive .xn-5 {
    --ring:.84;
  }

  .menu-page .exclusive .xp-5 {
    --ring:.84;
  }

}
@media(max-width:700px) {
  .menu-page .menu-intro {
    padding-top:10px;
    padding-bottom:6px;
  }

  .menu-page .menu-title-row {
    gap:12px;
  }

  .menu-page .menu-intro h1 {
    font-size:38px;
  }

  .menu-page .menu-intro p {
    font-size:var(--text-small);
    margin-top:4px;
  }
}
@media(max-width:375px) {
  .menu-page .menu-intro h1 {
    font-size:38px;
  }
}
/* Phones centre (see base.css): the title, the happy-hour words and the category headings centre;
   dish rows and the breakfast additions keep their two ends. */
@media(max-width:800px) {
  .menu-page .menu-title-row {
    justify-content:center;
  }

  .menu-page .happy-status {
    margin-inline:auto;
  }
}

/* Catering: the site's main job. Phone first; the desktop layout follows at 801px. */

.catering-page .catering-hero {
  position:relative;
  display:grid;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
}

/* The real TV-segment photo fades into black under the headline. */
.catering-hero-media {
  position:relative;
  margin:0;
}

.catering-hero-media img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}

.catering-hero-media::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 68%,rgba(0,0,0,.75) 88%,#000 100%);
}

.catering-hero-copy {
  position:relative;
  margin-top:-36px;
  padding:0 var(--gutter) 44px;
}

.catering-hero h1 {
  font-size:var(--step-page);
  line-height:.92;
}

.catering-hero p {
  margin-top:14px;
  max-width:30ch;
  color:#E6E6E6;
  font-size:var(--text-lead);
}

.catering-hero .actions {
  margin-top:26px;
}

.catering-page .catering-trays {
  overflow:hidden;
  padding-top:clamp(40px,6vw,72px);
  /* Lands exactly under the header: cancels the extra 24px of the shared scroll padding. */
  scroll-margin-top:-24px;
}

.catering-page .catering-sides {
  padding-top:28px;
}

.catering-page .catering-trays h2,.catering-page .catering-sides h2 {
  margin-bottom:20px;
}

.catering-page .catering-sides h2 {
  text-align:center;
}

/* Trays and sides read like Johnny's menu boards: a heavy rule, then ruled size rows. */
.tray-grid {
  display:grid;
  gap:0 40px;
}

.tray-item,.side-item {
  display:grid;
  align-content:start;
  gap:4px;
  padding:20px 0 10px;
  border-top:2px solid var(--black);
  break-inside:avoid;
}

/* Platters & trays: a real Johnny's wrap platter out on the water beside the trays, held in view while they
   scroll past, laid out like the Menu's categories (Faraj, 3 Oct 2026: "i dont like this photo at all here there
   has to be a better way of doing visuals for this"). */
.trays-layout {
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  column-gap:clamp(40px,5.5vw,88px);
  align-items:start;
}

.trays-photo {
  position:sticky;
  top:calc(var(--header,84px) + 24px);
  margin:0;
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:var(--radius-media);
}

.trays-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 92%;
}

.trays-body {
  min-width:0;
}

.trays-body .tray-item h3 {
  font-size:clamp(24px,2.1vw,30px);
}

.tray-item h3 {
  font-size:var(--step-sub);
}

.tray-item>p {
  color:var(--ink-muted);
  font-size:var(--text-small);
}

.catering-page .size-prices {
  display:grid;
  margin:10px 0 0;
}

.catering-page .size-prices>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:10px 0;
  border-top:1px solid var(--line);
}

.catering-page .size-prices dt {
  font-size:var(--text-ui);
  font-weight:700;
}

.catering-page .size-prices dd {
  margin:0;
}

.catering-page .size-prices .price {
  font-size:36px;
}

/* How many people: suggests trays from the real serving sizes. */
.catering-page .catering-helper {
  padding-top:16px;
  padding-bottom:16px;
}

.helper-card {
  display:grid;
  gap:22px;
  text-align:center;
  padding:28px 20px;
  border-radius:var(--radius-card);
  background:var(--black);
  color:var(--white);
}

.helper-intro h2 {
  font-size:clamp(32px,9.5vw,42px);
}

.helper-intro p {
  margin:10px auto 0;
  text-wrap:balance;
  color:#D9D9D9;
}

.helper-form {
  display:grid;
  gap:16px;
}

.helper-count {
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  align-items:center;
  gap:10px;
  max-width:360px;
  margin-inline:auto;
}

.helper-count button {
  width:56px;
  height:56px;
  border:2px solid #5A5A5A;
  border-radius:50%;
  background:transparent;
  color:var(--white);
  font-size:28px;
  line-height:1;
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}

/* Only real hover devices: a tapped button must not keep a different ring. */
@media(hover:hover) {
  .helper-count button:hover {
    border-color:var(--white);
  }
}

.helper-count button:active {
  transform:scale(.94);
}

/* The number sits at the centre with "people" under it. */
.helper-count label {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.helper-count input {
  width:3.2ch;
  padding:0;
  border:0;
  border-bottom:3px solid #5A5A5A;
  border-radius:0;
  background:transparent;
  color:var(--white);
  font:800 64px/1 var(--display);
  text-align:center;
  -moz-appearance:textfield;
  transition:border-color var(--fast) var(--ease);
}

.helper-count input::-webkit-inner-spin-button,.helper-count input::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0;
}

.helper-count input:focus {
  outline:none;
  border-bottom-color:var(--white);
}

.helper-count span {
  font-weight:800;
}

/* Four linked sliders: red fill up to a white thumb, one step per tray. */
.helper-mix {
  display:grid;
  gap:12px;
  padding-top:16px;
  border-top:1px solid #3A3A3A;
  text-align:left;
}

.mix-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  column-gap:12px;
}

.mix-row label {
  font-weight:800;
}

.mix-row output {
  color:#D9D9D9;
  font-size:var(--text-small);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.mix-row input {
  --fill:0%;
  grid-column:1/-1;
  width:100%;
  height:40px;
  margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.mix-row input::-webkit-slider-runnable-track {
  height:8px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--red) 0 var(--fill),#3A3A3A var(--fill) 100%);
}

.mix-row input::-webkit-slider-thumb {
  width:28px;
  height:28px;
  margin-top:-10px;
  border:0;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:transform var(--fast) var(--ease);
  -webkit-appearance:none;
}

.mix-row input:active::-webkit-slider-thumb {
  transform:scale(1.12);
}

.mix-row input::-moz-range-track {
  height:8px;
  border-radius:var(--radius-pill);
  background:#3A3A3A;
}

.mix-row input::-moz-range-progress {
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--red);
}

.mix-row input::-moz-range-thumb {
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:var(--white);
}

.mix-row input:focus-visible {
  outline:3px solid var(--white);
  outline-offset:2px;
  border-radius:var(--radius-pill);
}

.mix-reset {
  justify-self:center;
  min-height:44px;
  padding:0 8px;
  border:0;
  background:none;
  color:var(--white);
  font-size:var(--text-small);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:4px;
}

.helper-result {
  display:grid;
  justify-items:center;
  min-height:104px;
  padding:16px 0;
  border-top:1px solid #3A3A3A;
  border-bottom:1px solid #3A3A3A;
}

.helper-total {
  display:grid;
  justify-items:center;
  gap:6px;
  margin:0;
}

.helper-total span {
  color:#D9D9D9;
  font-size:var(--text-small);
  font-weight:800;
}

.helper-total .helper-split,
.helper-total .helper-cap {
  font-weight:700;
  color:#BDBDBD;
  text-wrap:balance;
}

.helper-total .helper-cap {
  order:3;
  margin-top:6px;
}

/* "from" hangs to the left so the amount itself stays centred. */
.helper-total strong {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--white);
  font:800 56px/1 var(--display);
}

.helper-total small {
  position:absolute;
  right:100%;
  bottom:.18em;
  margin-right:8px;
  color:#D9D9D9;
  font:700 var(--text-small)/1 var(--body);
}

.helper-card .button {
  justify-self:stretch;
}

.helper-note {
  margin-inline:auto;
  text-wrap:balance;
  color:#BDBDBD;
  font-size:var(--text-fine);
}

/* Their own photo of wrapped trays for a gathering sits beside the helper on larger screens. */
.helper-photo {
  display:none;
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-card);
}

/* The card sets the height; the photo fills it rather than stretching the card. */
.helper-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Sides flow down balanced columns on larger screens, like a menu board. */
.side-item h3 {
  font-size:clamp(24px,5vw,28px);
}

.side-item .size-prices .price {
  font-size:32px;
}

/* Closing: their own event photo runs edge to edge beside the event offer and the big catering number. */
.catering-page .catering-close {
  display:grid;
  background:var(--red);
  color:var(--white);
}

.close-photo {
  margin:0;
}

.close-photo img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:50% 38%;
}

.close-copy {
  display:grid;
  justify-items:center;
  align-content:center;
  gap:16px;
  padding:40px var(--gutter) 48px;
  text-align:center;
}

.close-copy h2 {
  font-size:var(--step-section);
}

.close-copy p {
  max-width:34ch;
  font-size:var(--text-lead);
}

.close-copy .big-phone {
  margin-top:8px;
}

.catering-close a:focus-visible {
  outline-color:var(--white);
}

.big-phone {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:12px 30px;
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--black);
  font:800 clamp(36px,9vw,56px)/1 var(--display);
  text-decoration:none;
  transition:background-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}

.big-phone:hover {
  background:#F1F1F1;
}

.big-phone:active {
  transform:scale(.97);
}

.big-phone .icon {
  width:30px;
  height:30px;
  color:var(--red);
}



@media(min-width:801px) {
  .catering-page .catering-hero {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
    align-items:center;
    min-height:min(76vh,720px);
  }
  .catering-hero-media {
    grid-column:2;
    grid-row:1;
    height:100%;
  }
  .catering-hero-media img {
    height:100%;
    aspect-ratio:auto;
    object-position:left center;
  }
  .catering-hero-media::after {
    background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 9%);
  }
  .catering-hero-copy {
    grid-column:1;
    grid-row:1;
    z-index:1;
    margin:0;
    padding:64px 40px 64px max(var(--gutter),calc((100vw - 1344px) / 2));
  }
  .catering-hero-copy h1 {
    font-size:clamp(60px,6.8vw,104px);
  }
  .tray-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .catering-page .catering-helper:not([hidden]) {
    display:grid;
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:24px;
  }
  .helper-card {
    align-content:start;
    gap:24px;
    padding:44px;
  }
  .helper-photo {
    display:block;
  }
  .helper-intro h2 {
    font-size:clamp(36px,3.6vw,52px);
  }
  .side-grid {
    columns:3;
    column-gap:40px;
  }
  .catering-page .catering-close {
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    min-height:min(80vh,680px);
  }
  .close-photo {
    position:relative;
  }
  .close-photo img {
    position:absolute;
    inset:0;
    height:100%;
    aspect-ratio:auto;
  }
  .close-copy {
    padding:72px 56px;
  }
}

@media(min-width:801px) and (max-width:1100px) {
  .side-grid {
    columns:2;
  }
}

@media(max-width:800px) {
  .catering-hero .actions .button {
    flex:1 1 220px;
  }
}
/* Phones centre (see base.css); serving-size rows and the helper's result keep their two ends. */
@media(max-width:800px) {
  .catering-hero p,
  .tray-item>p {
    margin-inline:auto;
  }
  .catering-page .size-prices {
    text-align:left;
  }
}
/* Tablets: the trays stack beside the photo. Phones: heading, the photo edge to edge, then the trays. */
@media(max-width:1100px) {
  .tray-grid {
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:800px) {
  .trays-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .trays-body {
    display:contents;
  }

  .trays-body h2 {
    order:1;
  }

  .trays-photo {
    position:relative;
    top:auto;
    order:2;
    width:calc(100% + var(--gutter) * 2);
    margin:0 calc(var(--gutter) * -1) 18px;
    aspect-ratio:16/10;
    border-radius:0;
  }

  .tray-grid {
    order:3;
  }
}



/* Our story (Faraj, 3 Oct 2026: "the our story page hasnt been touched and needs work", then "you also removed
   their entire story basically ... make sure thats included nicekly and make the our story page coherent"): Johnny
   and Ani large on black beside the family photo; their story in three stops from Beirut to Kennedy Road; then the
   kitchen films, playing on their own. Only the approved facts. */
.story-opening {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:min(86vh,820px);
  background:var(--black);
  color:var(--white);
}
.story-portrait {
  position:relative;
  grid-column:2;
  grid-row:1;
  margin:0;
  overflow:hidden;
}
.story-portrait img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
}
.story-portrait::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 14%,rgba(0,0,0,0) 40%);
}
/* The names, the line and the button centre in the black half, like Home's black halves. */
.story-opening-copy {
  grid-column:1;
  grid-row:1;
  align-self:center;
  display:grid;
  justify-items:center;
  padding:72px clamp(32px,4vw,64px);
  text-align:center;
}
.story-opening h1 {
  font-size:clamp(84px,9.5vw,148px);
  line-height:.88;
  color:var(--white);
}
.story-opening h1 span {
  color:var(--red);
}
.story-lead {
  margin-top:24px;
  font-size:var(--text-lead);
  line-height:1.4;
  color:#E5E5E5;
}
.story-film-link {
  margin-top:30px;
}
.story-journey {
  padding-top:clamp(64px,8vw,112px);
  padding-bottom:clamp(64px,8vw,112px);
}
.story-journey h2 {
  margin:0 0 clamp(40px,4.5vw,64px);
  font-size:var(--step-section);
  text-align:center;
}
/* Three stops on one road, centred on the page: a red dot for each place, the road from the first dot to the last. */
.journey {
  --stop-gap:clamp(28px,4vw,64px);
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--stop-gap);
  max-width:1120px;
  margin:0 auto;
  padding:0;
  list-style:none;
  text-align:center;
}
.journey::before {
  content:"";
  position:absolute;
  top:11px;
  left:calc((100% - 2 * var(--stop-gap)) / 6);
  right:calc((100% - 2 * var(--stop-gap)) / 6);
  height:3px;
  background:var(--black);
}
.journey li {
  position:relative;
  padding-top:50px;
}
.journey li::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:25px;
  height:25px;
  margin-left:-12.5px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 6px var(--white);
}
.journey-place {
  display:block;
  font:800 clamp(38px,3.8vw,56px)/.95 var(--display);
  text-transform:uppercase;
}
.journey p {
  max-width:30ch;
  margin:16px auto 0;
  font-size:var(--text-lead);
  line-height:1.5;
  color:var(--black);
}
.kitchen-films {
  background:var(--quiet);
}
/* The films lead their band: a centred heading and line, the two films side by side, the gallery link under them. */
.kitchen-inner {
  display:grid;
  justify-items:center;
  gap:clamp(28px,3vw,40px);
  max-width:1440px;
  margin:0 auto;
  padding:clamp(64px,8vw,104px) var(--gutter);
  text-align:center;
}
.kitchen-films .section-heading {
  position:static;
  display:block;
  margin:0;
}
.kitchen-films .section-heading h2 {
  font-size:var(--step-section);
}
.kitchen-films .section-heading p {
  max-width:34ch;
  margin:16px auto 0;
  font-size:var(--text-lead);
  line-height:1.45;
  color:var(--ink-muted);
}
.film-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  width:min(100%,860px);
  margin:0;
}
.process-film {
  min-width:0;
}
.film-player {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-media);
  background:#111;
}
.film-player video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  background:#111;
  object-fit:contain;
}
/* The films play by themselves (Faraj, 3 Oct 2026: "just make them play automatically"); this small corner button
   pauses one, or starts it when the visitor has asked for reduced motion. */
.film-toggle {
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:var(--white);
  cursor:pointer;
  transition:background-color var(--fast) var(--ease);
}
.film-toggle:hover {
  background:rgba(0,0,0,.8);
}
.film-toggle svg {
  width:16px;
  height:16px;
  fill:currentColor;
}
/* Phones: the photo first, fading into black, the names centred under it; the stops run down the page, centred,
   each joined to the next by a short stretch of road. */
@media(max-width:800px) {
  .story-opening {
    display:block;
    min-height:0;
  }

  .story-portrait {
    aspect-ratio:4/5;
  }

  .story-portrait::after {
    background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.75) 84%,#000 100%);
  }

  .story-opening-copy {
    position:relative;
    margin-top:-72px;
    padding:0 var(--gutter) 48px;
  }

  .story-opening h1 {
    font-size:clamp(64px,19vw,96px);
  }

  .story-lead {
    font-size:19px;
  }

  .story-film-link {
    width:100%;
  }

  .journey {
    --stop-gap:64px;
    grid-template-columns:minmax(0,1fr);
  }

  .journey::before {
    display:none;
  }

  .journey li {
    padding-top:44px;
  }

  .journey li+li::after {
    content:"";
    position:absolute;
    top:calc(12px - var(--stop-gap));
    left:50%;
    width:3px;
    height:calc(var(--stop-gap) - 24px);
    margin-left:-1.5px;
    background:var(--black);
  }

  .journey-place {
    font-size:40px;
  }

  .journey p {
    font-size:18px;
  }

  .kitchen-inner {
    gap:24px;
    padding-top:56px;
    padding-bottom:56px;
  }

  .kitchen-films .section-heading p {
    font-size:var(--text-ui);
  }

  .film-pair {
    gap:14px;
  }
}
.gallery-opening {
  padding-top:36px;
  padding-bottom:24px;
}

.gallery-title-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}

.gallery-opening h1 {
  font-size:clamp(64px,7.4vw,106px);
}

.gallery-film-link {
  flex-shrink:0;
  margin-bottom:7px;
  font-size:var(--text-ui);
}

.gallery-filters {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}

.gallery-grid {
  padding-top:0;
}

.gallery-row {
  display:flex;
  gap:24px;
  margin-bottom:24px;
  align-items:start;
}

.gallery-row:last-child {
  margin-bottom:0;
}

.gallery-row figure {
  flex:var(--photo-ratio) 1 0;
  min-width:0;
}

.gallery-grid a {
  display:block;
  position:relative;
  line-height:0;
}

.gallery-grid img {
  width:100%;
  height:auto;
  aspect-ratio:var(--photo-ratio);
  object-fit:cover;
  border:1px solid var(--line);
}

.gallery-grid a>span {
  position:absolute;
  right:12px;
  bottom:12px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:var(--white);
  color:var(--black);
  font-size:26px;
  line-height:1;
  border-radius:3px;
}

.gallery-grid a:hover>span {
  background:var(--black);
  color:var(--white);
}

.gallery-grid:has(figure[hidden]) {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.gallery-grid:has(figure[hidden]) .gallery-row {
  display:contents;
}

body[data-page="gallery.html"] .lightbox {
  width:min(1040px,calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  border:0;
  border-radius:3px;
  padding:16px;
  background:var(--black);
  color:var(--white);
  overflow:auto;
}

body[data-page="gallery.html"] .lightbox-image {
  height:min(72dvh,760px);
  display:grid;
  place-items:center;
}

body[data-page="gallery.html"] .lightbox-image img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

body[data-page="gallery.html"] .lightbox-close {
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:44px;
  height:44px;
  border:1px solid var(--white);
  border-radius:3px;
  background:var(--black);
  color:var(--white);
  font-size:24px;
}

body[data-page="gallery.html"] .lightbox-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding-top:12px;
}

body[data-page="gallery.html"] .lightbox-bar button {
  width:44px;
  height:44px;
  border:0;
  border-radius:3px;
  background:var(--white);
  color:var(--black);
  font-size:24px;
}

body[data-page="gallery.html"] .lightbox-bar p {
  font-size:var(--text-small);
  min-width:6ch;
  text-align:center;
}

/* Visit (Faraj, 3 Oct 2026: "look at the visit page and see what you can improve there"): information first, the
   way people use it: today's open status; where it is, the hours with today marked, and the two numbers, each
   centred in its own column ("these need to all be centered better"); then a Google map beside the storefront;
   then the delivery services. The footer is the same as on every page. */
.visit-top {
  padding-top:clamp(36px,5vw,64px);
  padding-bottom:clamp(36px,4vw,56px);
}
.visit-head {
  text-align:center;
}
.visit-head .visit-status {
  margin-inline:auto;
}
.visit-head h1 {
  margin:12px 0 0;
  font-size:clamp(56px,6.4vw,96px);
  line-height:.95;
}
.visit-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  align-items:start;
  margin-top:clamp(28px,3.4vw,44px);
  padding-top:28px;
  border-top:3px solid var(--black);
  text-align:center;
}
.visit-board>*,
.visit-calls>div {
  display:grid;
  justify-items:center;
  align-content:start;
  min-width:0;
}
.visit-board h2 {
  margin:0 0 12px;
  font:800 22px/1.1 var(--display);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.visit-where address {
  margin:0 0 20px;
  font-size:20px;
  font-style:normal;
  line-height:1.5;
}
.visit-where address strong {
  font-weight:800;
}
.visit-where .actions {
  display:flex;
  justify-content:center;
}
.visit-hours .opening-hours {
  width:min(100%,380px);
  text-align:left;
}
.visit-hours .opening-hours>div {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 20px;
  border-bottom:1px solid var(--line);
  padding:7px 0;
  font-size:var(--text-ui);
  line-height:1.5;
}
.visit-hours dd {
  white-space:nowrap;
}
.visit-hours .small {
  margin-top:12px;
}
.visit-board .visit-calls {
  grid-template-columns:minmax(0,1fr);
  gap:22px;
}
.visit-calls h2 {
  margin-bottom:2px;
}
.visit-calls a {
  display:flex;
  align-items:center;
  min-height:44px;
}
.visit-calls .contact-phone {
  font-size:clamp(22px,1.9vw,26px);
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
  white-space:nowrap;
}
.visit-calls .contact-phone:hover {
  color:var(--red);
}
.visit-calls .contact-email {
  font-size:var(--text-fine);
  text-underline-offset:4px;
}
.visit-calls .button {
  margin-top:4px;
}
/* On white the status keeps the footer's shape: a red dot while open, grey when closed. */
.visit-top .open-status {
  color:var(--black);
}
.visit-top .open-status::before {
  background:var(--red);
  box-shadow:0 0 0 4px rgba(226,28,33,.16);
}
.visit-top .open-status.is-closed {
  color:var(--ink-muted);
}
.visit-top .open-status.is-closed::before {
  background:#8A8A8A;
  box-shadow:none;
}
/* Today's row carries a red Today tag (set by the script from Toronto time, like the footer). */
.opening-hours>div.is-today {
  font-weight:800;
}
.opening-hours>div.is-today dt::after {
  content:"Today";
  display:inline-block;
  margin-left:10px;
  padding:2px 9px;
  border-radius:var(--radius-pill);
  background:var(--red);
  color:var(--white);
  font:800 12px/1.5 var(--body);
  letter-spacing:.05em;
  text-transform:uppercase;
  vertical-align:2px;
}
.visit-scene {
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(16px,2vw,28px);
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter) clamp(48px,6vw,88px);
}
.visit-scene>figure {
  height:clamp(340px,34vw,480px);
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--quiet);
}
/* The live Google map (Faraj, 3 Oct 2026: "embed gooe maps here"). */
.visit-map iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.visit-storefront img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 6%;
}
/* Delivery (Faraj, 3 Oct 2026: "make this look nicer use the company logos and stuff and alignment should be
   nicer"): a centred heading over the three services, side by side on larger screens. */
.visit-delivery {
  padding-top:0;
  padding-bottom:clamp(56px,7vw,96px);
  text-align:center;
}
.visit-delivery h2 {
  margin:0 0 10px;
  font-size:var(--step-compact);
}
.visit-delivery .provider-links {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1000px;
  margin:26px auto 0;
}
@media(max-width:1100px) {
  .visit-board {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .visit-board .visit-calls {
    grid-column:1/-1;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
/* Phones: one column, everything centred; the map and the storefront follow; the services stack. */
@media(max-width:800px) {
  .visit-head h1 {
    font-size:var(--step-section);
  }

  .visit-board {
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }

  .visit-where .actions,
  .visit-where .actions .button {
    width:100%;
  }

  .visit-board .visit-calls {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }

  .visit-calls .contact-phone {
    font-size:24px;
  }

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

  .visit-scene>figure {
    height:auto;
    aspect-ratio:4/3;
    border-radius:var(--radius-media);
  }

  .visit-delivery .provider-links {
    grid-template-columns:minmax(0,1fr);
    max-width:520px;
    margin-top:22px;
  }
}
.not-found {
  text-align:center;
  min-height:52vh;
  padding-top:72px;
  padding-bottom:88px;
}

.not-found>p {
  margin-inline:auto;
}

.not-found-code {
  font:800 22px/1.4 var(--body);
  color:var(--red);
  margin-bottom:16px;
}

.not-found h1 {
  font-size:clamp(62px,7vw,100px);
}

.not-found>p:not(.not-found-code) {
  font-size:18px;
  margin-top:20px;
}

.not-found .actions {
  justify-content:center;
  margin-top:32px;
}

@media(max-width:1100px) {
  .gallery-title-row {
    align-items:center;
    flex-direction:column;
    gap:12px;
  }
  .gallery-film-link {
    margin:0;
  }
}

@media(max-width:800px) {
  .gallery-opening {
    padding-top:28px;
  }
  .gallery-row {
    gap:18px;
    margin-bottom:18px;
  }
  .gallery-grid:has(figure[hidden]) {
    gap:18px;
  }
}

@media(max-width:600px) {
  .gallery-opening {
    padding-top:24px;
    padding-bottom:20px;
  }
  .gallery-title-row {
    gap:8px;
  }
  .gallery-opening h1 {
    font-size:clamp(50px,14.3vw,62px);
  }
  .gallery-film-link {
    font-size:var(--text-small);
  }
  .gallery-filters {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
  }
  .gallery-filters button {
    padding:10px 8px;
  }
  .gallery-grid,.gallery-grid:has(figure[hidden]) {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
    padding-top:0;
    padding-bottom:48px;
  }
  .gallery-row {
    display:contents;
  }
  .gallery-grid [data-gallery-feature],.gallery-grid [data-gallery-emphasis] {
    grid-column:1/-1;
  }
  .gallery-grid:has(figure[hidden]) figure {
    grid-column:auto;
  }
  .gallery-grid figure:not([data-gallery-feature]):not([data-gallery-emphasis]) img,.gallery-grid:has(figure[hidden]) img {
    aspect-ratio:4/5;
  }
  .gallery-grid a>span {
    height:32px;
    width:32px;
    right:8px;
    bottom:8px;
    font-size:24px;
  }
  body[data-page="gallery.html"] .lightbox {
    padding:12px;
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
  }
  body[data-page="gallery.html"] .lightbox-image {
    height:calc(100dvh - 132px);
  }
  .not-found {
    min-height:50vh;
    padding-top:44px;
    padding-bottom:56px;
  }
  .not-found h1 {
    font-size:62px;
  }
  .not-found>p:not(.not-found-code) {
    font-size:16px;
  }
  .not-found .actions {
    gap:12px;
    margin-top:24px;
  }
}

@media(max-width:420px) {
  .not-found .actions {
    flex-direction:column;
    align-items:stretch;
  }
}
/* Phones centre (see base.css). */
@media(max-width:800px) {
  .gallery-title-row {
    align-items:center;
  }
  .gallery-filters {
    justify-content:center;
  }
}