/* Copyright Michael Hele, https://michaelhele.com/ */
@layer reset, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
}

@layer base {
  body {
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-s);
  }

  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); }
  p { max-width: var(--measure); margin: 0 0 var(--space-s); }
  a { color: inherit; text-decoration: none; }
  main p a, .legal-page a { color: var(--color-identity); font-weight: 700; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
}

@layer components {
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icon { width: 1.25em; height: 1.25em; flex: none; }
  .icon--lg { width: 1.75em; height: 1.75em; }

  .skip-link {
    position: fixed;
    left: var(--space-s);
    top: -5rem;
    z-index: var(--z-toast);
    background: var(--color-action);
    color: var(--color-action-label);
    padding: var(--space-xs) var(--space-s);
  }
  .skip-link:focus { top: var(--space-s); }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    border-bottom: 1px solid color-mix(in srgb, var(--color-action) 22%, transparent);
  }
  .site-header__inner {
    width: min(100% - (2 * var(--gutter)), var(--container-max));
    min-height: 5.5rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }
  .site-logo { width: 8.5rem; margin-right: auto; }
  .site-logo img { width: 100%; height: 3.85rem; object-fit: contain; }
  .primary-nav ul { display: flex; gap: var(--space-m); list-style: none; padding: 0; margin: 0; }
  .primary-nav a {
    display: block;
    padding-block: var(--space-2xs);
    border-bottom: 1px solid transparent;
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .primary-nav a[aria-current="page"] { border-color: var(--color-action); color: var(--color-action); }
  .has-submenu { position: relative; }
  .submenu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: inherit;
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .submenu-toggle .icon { width: 1em; transition: transform var(--duration-fast) var(--ease-standard); }
  .submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .primary-nav .submenu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    right: 0;
    z-index: var(--z-raised);
    width: 20rem;
    display: grid;
    gap: var(--space-3xs);
    padding: var(--space-2xs);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-3xs));
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast) var(--ease-standard);
  }
  .submenu-toggle[aria-expanded="true"] + .submenu,
  .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav .submenu a { display: grid; gap: var(--space-3xs); padding: var(--space-xs); text-transform: none; letter-spacing: 0; }
  .primary-nav .submenu span { color: var(--color-text-muted); font-size: var(--step--1); }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 3rem;
    padding: var(--space-xs) var(--space-l);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    color: var(--color-action-label);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }
  .button--small { min-height: 2.65rem; padding-inline: var(--space-m); }
  .button--outline { background: transparent; color: inherit; }
  .button--dark { background: var(--color-surface-inverse); border-color: var(--color-surface-inverse); color: var(--color-text-inverse); }
  .menu-toggle, .menu-close {
    min-height: 2.75rem;
    display: none;
    align-items: center;
    gap: var(--space-2xs);
    border: 1px solid var(--color-action);
    background: transparent;
    color: var(--color-text-inverse);
    padding: var(--space-2xs) var(--space-xs);
  }

  .mobile-menu {
    width: min(24rem, 88vw);
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    padding: var(--space-l);
    border: 0;
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }
  .mobile-menu::backdrop { background: rgb(0 0 0 / .72); }
  .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
  .mobile-menu__top img { width: 7rem; height: 3.5rem; object-fit: contain; }
  .mobile-menu .menu-close { display: inline-flex; }
  .mobile-menu ul { list-style: none; padding: 0; margin: var(--space-l) 0; }
  .mobile-menu nav a {
    display: block;
    padding: var(--space-s) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-decoration: none;
  }
  .mobile-menu nav a[aria-current="page"] { color: var(--color-action); }
  .mobile-menu summary { padding: var(--space-s) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent); font-family: var(--font-display); font-size: var(--step-1); cursor: pointer; }
  .mobile-menu details ul { margin: 0; padding-left: var(--space-s); }
  .mobile-menu details ul a { font-size: var(--step-0); }
  .mobile-menu__quick { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
  .mobile-menu__quick a { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-action); }

  .eyebrow {
    color: var(--color-identity);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .site-header .eyebrow,
  .home-hero .eyebrow,
  .journey-band .eyebrow,
  .page-hero .eyebrow,
  .editorial-split--dark .eyebrow,
  .booking-band .eyebrow,
  .map-section .eyebrow,
  .site-footer .eyebrow { color: var(--color-action); }
  .fine-rule { display: flex; align-items: center; justify-content: center; gap: var(--space-m); }
  .fine-rule::before, .fine-rule::after { content: ""; width: min(9rem, 18vw); height: 1px; background: var(--color-action); opacity: .55; }

  .editorial-split { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; min-height: 38rem; overflow: clip; }
  .editorial-split__media { position: relative; min-height: 34rem; overflow: hidden; }
  .editorial-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .editorial-split__copy { display: grid; align-content: center; padding: var(--space-2xl) max(var(--gutter), calc((100vw - var(--container-max)) / 2)); }
  .editorial-split__copy > * { max-width: 34rem; }
  .editorial-split--reverse .editorial-split__media { order: 2; }
  .editorial-split--cream { background: var(--color-surface-sunken); }
  .editorial-split--dark { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); margin-top: var(--space-m); }
  .detail-grid h3 { font-size: var(--step-0); color: var(--color-identity); }
  .editorial-split--dark .detail-grid h3 { color: var(--color-action); }
  .detail-grid p { font-size: var(--step--1); }

  .site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); padding: var(--space-2xl) 0 0; }
  .site-footer__inner {
    width: min(100% - (2 * var(--gutter)), var(--container-max));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr .8fr 1fr;
    gap: var(--space-xl);
  }
  .site-footer h3 { color: var(--color-action); font-size: var(--step-0); letter-spacing: .12em; text-transform: uppercase; }
  .site-footer a { color: inherit; text-decoration: none; }
  .site-footer address { font-style: normal; margin-bottom: var(--space-s); }
  .site-footer ul { list-style: none; padding: 0; margin: 0; }
  .site-footer li { margin-bottom: var(--space-2xs); }
  .footer-brand img { width: 10rem; height: 4.5rem; object-fit: contain; margin-bottom: var(--space-m); }
  .footer-brand p { color: var(--color-text-inverse-muted); }
  .footer-link { color: var(--color-action) !important; }
  .site-footer__legal {
    width: min(100% - (2 * var(--gutter)), var(--container-max));
    margin: var(--space-xl) auto 0;
    padding: var(--space-m) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
    display: block;
    font-size: var(--step--1);
    color: var(--color-text-inverse-muted);
    text-align: center;
  }
  .site-footer__legal p { max-width: none; margin: 0; white-space: nowrap; }
  .site-footer__credit { padding: var(--space-m) var(--gutter) var(--space-xl); border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent); }
  .site-footer__credit a { width: min(18rem, 70vw); min-height: 3rem; display: block; margin-inline: auto; padding: var(--space-xs); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
  .site-footer__credit img { width: 100%; height: auto; }

  .mobile-actions { display: none; }

  .readaloud {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    transform: translateY(-50%);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .18);
  }
  .readaloud[hidden], [data-read-toggle][hidden] { display: none !important; }
  .readaloud__tab, .readaloud__stop {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border: 0;
    border-radius: var(--radius-surface-sm) 0 0 var(--radius-surface-sm);
    background: var(--color-action);
    color: var(--color-action-label);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    cursor: pointer;
  }
  .readaloud__stop { background: var(--color-surface-sunken); color: var(--color-text); }
  .readaloud__progress { padding: var(--space-3xs) var(--space-2xs); background: var(--color-surface-inverse); color: var(--color-text-inverse-muted); font-size: .72rem; text-align: center; }
  .readaloud__tab[aria-pressed="false"] ~ .readaloud__progress, .readaloud__tab[aria-pressed="false"] ~ .readaloud__stop { display: none; }
  [data-read-toggle] .icon--pause { display: none; }
  [data-read-toggle][aria-pressed="true"] .icon--play { display: none; }
  [data-read-toggle][aria-pressed="true"] .icon--pause { display: block; }

  .site-header :focus-visible,
  .mobile-menu :focus-visible,
  .site-footer :focus-visible,
  .home-hero :focus-visible,
  .journey-band :focus-visible,
  .editorial-split--dark :focus-visible,
  .booking-band :focus-visible,
  .map-section :focus-visible { outline-color: var(--color-focus-on-inverse); }
}

@layer pages {
  .home-hero {
    min-height: calc(100svh - 5.5rem);
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    text-align: center;
    overflow: hidden;
  }
  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/assets/images/hero-restaurant.webp') center / cover no-repeat;
  }
  .home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(0 0 0 / .28), rgb(0 0 0 / .72));
  }
  .home-hero__inner { width: min(100% - (2 * var(--gutter)), 58rem); padding: var(--space-m) 0; }
  .home-hero .fine-rule { width: fit-content; margin-inline: auto; }
  .home-hero__mark { width: min(17rem, 62vw); height: min(13rem, 30vh); object-fit: contain; margin: 0 auto var(--space-xs); }
  .home-hero h1 { font-size: var(--step-2); letter-spacing: .11em; text-transform: uppercase; }
  .home-hero .lead { margin-inline: auto; font-family: var(--font-display); font-size: var(--step-1); }
  .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
  .hero-actions--start { justify-content: flex-start; }
  .hero-note { margin: var(--space-s) auto 0; font-size: var(--step--1); }

  .journey-band {
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    text-align: center;
    padding: var(--space-xl) var(--gutter);
  }
  .journey-band h2 { color: var(--color-action); font-size: var(--step-2); letter-spacing: .14em; text-transform: uppercase; }
  .journey-band p { margin-inline: auto; }
  .journey-band .detail-grid h3 { color: var(--color-action); }

  .mosaic { position: relative; z-index: var(--z-base); display: grid; grid-template-columns: 1.1fr .9fr 1.1fr; height: 28rem; overflow: clip; contain: layout paint; }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; }
  .mosaic img:nth-child(2) { object-position: center 42%; }

  .trust-band { background: var(--color-surface-sunken); padding: var(--space-2xl) var(--gutter); text-align: center; }
  .trust-band h2 { max-width: 48rem; margin-inline: auto; }
  .trust-list { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-l); padding: 0; margin: var(--space-l) 0 0; list-style: none; }
  .trust-list li { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--step-1); }
  .trust-list li::before { content: "◆"; color: var(--color-action); font-size: .65em; }

  .page-hero { position: relative; min-height: 30rem; display: grid; align-items: end; isolation: isolate; color: var(--color-text-inverse); }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/assets/images/about-hero.webp') center 55% / cover no-repeat; }
  .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / .2)); }
  .page-hero__inner { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin: 0 auto; padding: var(--space-2xl) 0 var(--space-xl); }
  .page-hero h1 { max-width: 48rem; }
  .page-hero p { font-size: var(--step-1); max-width: 52rem; }
  .breadcrumb { margin-bottom: var(--space-m); font-size: var(--step--1); }
  .breadcrumb ol { list-style: none; display: flex; gap: var(--space-2xs); padding: 0; margin: 0; }
  .breadcrumb li + li::before { content: "/"; margin-right: var(--space-2xs); color: var(--color-action); }
  .breadcrumb a { color: var(--color-identity); }
  .page-hero .breadcrumb a { color: var(--color-action); }

  .article-intro { width: min(100% - (2 * var(--gutter)), 52rem); margin: 0 auto; padding: var(--space-2xl) 0; text-align: center; }
  .article-intro p { margin-inline: auto; font-size: var(--step-1); }
  .booking-band { background: var(--color-identity); color: var(--color-text-inverse); text-align: center; padding: var(--space-2xl) var(--gutter); }
  .booking-band h2, .booking-band p { margin-inline: auto; }
  .booking-band h2 { max-width: 44rem; }

  .page-hero--menu::before { background-image: url('/assets/images/menu-hero.webp'); }
  .page-hero--celebrations::before { background-image: url('/assets/images/celebrations-hero.webp'); }
  .page-hero--facilities::before { background-image: url('/assets/images/facilities-hero.webp'); }
  .page-hero--locations::before { background-image: url('/assets/images/locations-hero.webp'); }
  .page-hero--contact::before { background-image: url('/assets/images/contact-hero.webp'); }
  .page-hero--restaurant-gallery::before { background-image: url('/assets/images/gallery/restaurant/the-indian-queen-banbury-restaurant-dining-room-full-view.webp'); }
  .page-hero--food-gallery::before { background-image: url('/assets/images/gallery/food/the-indian-queen-banbury-sizzling-tandoori-mixed-grill.webp'); }
  .page-hero--takeaway::before { background-image: url('/assets/images/menu-hero.webp'); }

  .content-section { padding: var(--space-2xl) var(--gutter); }
  .content-section:nth-of-type(even) { background: var(--color-surface-sunken); }
  .content-section__inner { width: min(100%, var(--container-max)); margin-inline: auto; }
  .content-section__intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; }
  .content-section__intro > p { margin: 0; }
  .content-section .detail-grid { max-width: none; }

  .feature-grid { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin: 0 auto; padding: var(--space-2xl) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
  .feature-card { border-top: 2px solid var(--color-action); padding: var(--space-l); background: var(--color-surface-sunken); }
  .feature-card h2 { font-size: var(--step-2); }

  .gallery-grid { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin: 0 auto; padding: 0 0 var(--space-2xl); columns: 3 18rem; column-gap: var(--space-s); }
  .gallery-grid figure { break-inside: avoid; margin: 0 0 var(--space-s); overflow: hidden; background: var(--color-surface-inverse); }
  .gallery-card { position: relative; width: 100%; display: block; padding: 0; border: 0; background: transparent; color: var(--color-text-inverse); cursor: zoom-in; overflow: hidden; }
  .gallery-card img { width: 100%; height: auto; transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
  .gallery-card__cue { position: absolute; right: var(--space-xs); bottom: var(--space-xs); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .55); border-radius: var(--radius-pill); background: rgb(23 20 17 / .72); opacity: 0; transform: translateY(.4rem); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }

  .lightbox { width: min(92vw, 82rem); max-width: none; height: min(92dvh, 58rem); max-height: none; padding: 0; border: 0; background: transparent; color: var(--color-text-inverse); overflow: visible; }
  .lightbox::backdrop { background: rgb(10 8 7 / .92); backdrop-filter: blur(5px); }
  .lightbox figure { height: 100%; display: grid; place-items: center; align-content: center; gap: var(--space-xs); margin: 0; }
  .lightbox__image { max-width: 100%; max-height: calc(100% - 3rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .35); }
  .lightbox__caption { color: var(--color-text-inverse-muted); text-align: center; }
  .lightbox__close, .lightbox__previous, .lightbox__next { position: absolute; z-index: var(--z-raised); min-width: 3rem; min-height: 3rem; display: grid; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .4); border-radius: var(--radius-pill); background: rgb(23 20 17 / .78); color: var(--color-text-inverse); cursor: pointer; }
  .lightbox__close { top: 0; right: 0; }
  .lightbox__previous { top: 50%; left: 0; transform: translateY(-50%); }
  .lightbox__previous .icon { transform: rotate(180deg); }
  .lightbox__next { top: 50%; right: 0; transform: translateY(-50%); }
  .lightbox__position { position: absolute; right: var(--space-xs); bottom: 0; margin: 0; color: var(--color-text-inverse-muted); font-size: var(--step--1); }

  .celebration-intro { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin: 0 auto; padding: var(--space-2xl) 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-xl); align-items: center; }
  .celebration-intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .celebrations-section { padding: var(--space-2xl) var(--gutter); background: var(--color-surface-sunken); }
  .section-heading { width: min(100%, 52rem); margin: 0 auto var(--space-xl); text-align: center; }
  .section-heading p { margin-inline: auto; }
  .celebration-grid { width: min(100%, var(--container-max)); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
  .celebration-card { min-width: 0; background: var(--color-surface); box-shadow: 0 .65rem 2rem rgb(23 20 17 / .08); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
  .celebration-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
  .celebration-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
  .celebration-card__body { padding: var(--space-l); }
  .celebration-card__body h3 { color: var(--color-identity); }
  .celebration-card__body p { font-size: var(--step--1); }
  .celebration-card__action { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--color-identity); font-size: var(--step--1); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }

  .pdf-callout { display: flex; align-items: center; gap: var(--space-s); margin: var(--space-m) 0; padding: var(--space-m); border-left: 3px solid var(--color-identity); background: var(--color-surface); }
  .pdf-callout__icon { width: 3rem; height: 3rem; flex: none; color: var(--color-identity); }
  .pdf-callout strong, .pdf-callout span { display: block; }
  .pdf-callout span { color: var(--color-text-muted); font-size: var(--step--1); }

  .menu-listing-section { padding: var(--space-2xl) var(--gutter); background: var(--color-surface-sunken); }
  .menu-paper { width: min(100%, 70rem); margin-inline: auto; padding: clamp(var(--space-l), 5vw, var(--space-2xl)); background: var(--color-surface); border-top: .35rem solid var(--color-identity); box-shadow: 0 1.4rem 3.5rem rgb(45 25 19 / .14); }
  .menu-paper__header { max-width: 48rem; margin: 0 auto var(--space-xl); text-align: center; }
  .menu-paper__header p { margin-inline: auto; }
  .menu-course { padding: var(--space-l) 0; border-top: 1px solid color-mix(in srgb, var(--color-identity) 20%, transparent); }
  .menu-course:first-of-type { border-top: 0; }
  .menu-course h2 { color: var(--color-identity); text-align: center; }
  .menu-course > p { margin-inline: auto; text-align: center; }
  .menu-subsection { margin-top: var(--space-l); }
  .menu-subsection h3 { margin-bottom: var(--space-xs); color: var(--color-identity); font-size: var(--step-1); }
  .menu-items { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: var(--space-xl); }
  .menu-item { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); padding: .48rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 24%, transparent); }
  .menu-item__name { font-weight: 700; }
  .menu-item__price { white-space: nowrap; font-family: var(--font-display); font-weight: 700; }
  .menu-item__note { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--step--1); }
  .menu-style-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-s); padding: 0; margin: var(--space-m) auto; list-style: none; }
  .menu-style-list li { padding: .35rem .65rem; border: 1px solid color-mix(in srgb, var(--color-identity) 30%, transparent); }
  .menu-legend, .menu-notice { margin-top: var(--space-l); padding: var(--space-m); background: var(--color-surface-sunken); font-size: var(--step--1); }

  .route-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
  .route-actions .button { min-width: 0; }

  .contact-panel { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin: 0 auto; padding: var(--space-2xl) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; }
  .contact-panel__details { padding: var(--space-xl); background: var(--color-surface-sunken); }
  .contact-panel__details address { font-style: normal; }
  .contact-panel__details h3 { margin-top: var(--space-l); }
  .contact-panel__image { min-height: 38rem; }
  .contact-panel__image img { width: 100%; height: 100%; object-fit: cover; }
  .contact-list, .social-list { list-style: none; padding: 0; margin: var(--space-l) 0; }
  .contact-list li { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-s); }
  .contact-list .icon { margin-top: .2em; color: var(--color-identity); }
  .contact-list strong, .contact-list a { display: block; }
  .contact-list a, .social-list a { color: var(--color-identity); font-weight: 700; }
  .social-list { display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .social-list a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid color-mix(in srgb, var(--color-identity) 28%, transparent); text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
  .map-section { background: var(--color-surface-inverse); color: var(--color-text-inverse); padding: var(--space-2xl) var(--gutter); text-align: center; }
  .map-section h2, .map-section p { margin-inline: auto; }
  .map-frame { width: min(100%, var(--container-max)); aspect-ratio: 16 / 7; min-height: 28rem; margin: var(--space-l) auto 0; border: 0; }
  .legal-page { padding: var(--space-2xl) var(--gutter); }
  .legal-page article { width: min(100%, 52rem); margin-inline: auto; }
  .legal-page h1 { margin-top: var(--space-l); }
  .legal-page h2 { margin-top: var(--space-xl); font-size: var(--step-2); }
  .legal-page li { margin-bottom: var(--space-2xs); }
  .legal-table-wrap { overflow-x: auto; margin: var(--space-l) 0; }
  .legal-page table { width: 100%; border-collapse: collapse; }
  .legal-page caption { padding: var(--space-xs); color: var(--color-identity); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; text-align: left; }
  .legal-page th, .legal-page td { padding: var(--space-xs); border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); text-align: left; vertical-align: top; }
  .legal-page thead { background: var(--color-surface-sunken); }

  .reveal-pending { opacity: 0; transform: translateY(1.25rem); }
  .reveal-pending.is-revealed { opacity: 1; transform: translateY(0); transition: opacity 650ms var(--ease-standard), transform 650ms var(--ease-standard); }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
  .button--outline:hover { background: color-mix(in srgb, var(--color-action) 14%, transparent); }
  .primary-nav a:hover, .site-footer a:hover { color: var(--color-action); }
  .has-submenu:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .submenu-toggle:hover { color: var(--color-action); }
  .site-footer__credit a:hover { opacity: .78; transform: translateY(-2px); }
  .readaloud__tab:hover { background: var(--color-action-hover); }
  .gallery-card:hover img { transform: scale(1.035); opacity: .84; }
  .gallery-card:hover .gallery-card__cue { opacity: 1; transform: translateY(0); }
  .celebration-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 2.5rem rgb(23 20 17 / .14); }
  .celebration-card:hover .celebration-card__media img { transform: scale(1.035); }
  .social-list a:hover { background: var(--color-identity); color: var(--color-text-inverse); transform: translateY(-2px); }
  main p a:hover, .legal-page a:hover { color: var(--color-focus); }
}

@media (max-width: 64rem) {
  .primary-nav, .header-book { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .celebration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  html { scroll-behavior: auto; }
  body { padding-bottom: 4.25rem; }
  .site-header__inner { min-height: 4.5rem; }
  .site-logo { width: 7rem; }
  .site-logo img { height: 3rem; }
  .home-hero { min-height: calc(92svh - 4.5rem); }
  .home-hero__mark { height: 10rem; }
  .home-hero h1 { font-size: var(--step-1); }
  .editorial-split { grid-template-columns: 1fr; min-height: 0; }
  .editorial-split__media { min-height: 22rem; }
  .editorial-split__copy { padding: var(--space-xl) var(--gutter); }
  .editorial-split--reverse .editorial-split__media { order: 0; }
  .detail-grid { grid-template-columns: 1fr; gap: var(--space-s); }
  .mosaic { grid-template-columns: 1fr 1fr; height: 34rem; }
  .mosaic img:first-child { grid-column: 1 / -1; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__legal { padding-bottom: var(--space-xl); }
  .site-footer__legal p { white-space: normal; }
  .readaloud { display: none; }
  .mobile-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-commsbar);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-surface-inverse);
    border-top: 1px solid var(--color-action);
    color: var(--color-text-inverse);
  }
  .mobile-actions--read { grid-template-columns: repeat(4, 1fr); }
  .mobile-actions a, .mobile-actions button { min-height: 4.25rem; display: grid; place-items: center; align-content: center; gap: .15rem; padding: var(--space-3xs); border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--step--1); text-decoration: none; cursor: pointer; }
  .mobile-actions .icon { color: var(--color-action); }
  .page-hero { min-height: 28rem; }
  .content-section__intro, .feature-grid, .contact-panel, .celebration-intro, .celebration-grid { grid-template-columns: 1fr; }
  .contact-panel__image { min-height: 24rem; order: -1; }
  .map-frame { aspect-ratio: 4 / 5; min-height: 34rem; }
  .celebration-intro img { order: -1; }
  .lightbox { width: 100vw; height: 100dvh; padding: var(--space-s); }
  .lightbox__close { top: var(--space-s); right: var(--space-s); }
  .lightbox__previous { left: var(--space-s); }
  .lightbox__next { right: var(--space-s); }
  .lightbox__caption { max-width: calc(100% - 5rem); }
  .lightbox__position { right: var(--space-l); bottom: var(--space-s); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal-pending { opacity: 1; transform: none; }
}