@layer reset, tokens, base, components, utilities;

/* ==========================================================================
   FONTS — Playfair Display + Lora, both SIL Open Font License 1.1.
   Cleared for web embedding. Subset to latin at build time.
   ========================================================================== */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/playfair-display-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/lora-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/lora-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/lora-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/lora-latin-700-normal.woff2") format("woff2");}

@layer reset {
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
  body,h1,h2,h3,h4,p,figure,dl,dd,ul{margin:0;}
  ul{padding:0;list-style:none;}
  img{display:block;max-inline-size:100%;block-size:auto;}
  button{font:inherit;color:inherit;}
}

@layer tokens {
  :root{
    /* Ink — source-derived neutral system */
    --color-ink:#141210;
    --color-ink-secondary:#3a342e;

    /* CORRECTED. Spec shipped #8a8279 = 3.72:1 on paper, below the 4.5:1
       required for body text. This token carries the entire English layer. */
    --color-muted:#756d64;              /* 5.00:1 — secondary language, captions */

    /* CORRECTED. Spec used one rule token at 28% ink (1.89:1) for both
       hairlines and control boundaries. Split in two. */
    --color-hairline:color-mix(in srgb, var(--color-ink) 22%, transparent);
    --color-boundary:color-mix(in srgb, var(--color-ink) 52%, transparent); /* 3.6:1 */

    --color-paper:#fffdf8;
    --color-surface:#ffffff;

    --color-brand:#1f4d2e;              /* 9.57:1 on paper; 9.73:1 white-on-brand */
    --color-brand-hover:#163821;
    --color-accent:#992c18;             /* 7.57:1 */
    --color-highlight:#f7ead1;          /* 10.32:1 against ink-secondary */
    --color-focus:#2e6b40;

    /* CORRECTED. Body is Lora, not system-ui. The menu is serif throughout. */
    --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
    --font-body:"Lora",Georgia,"Times New Roman",serif;

    --font-size-xs:0.75rem;
    --font-size-sm:0.875rem;
    --font-size-base:1rem;
    --font-size-lg:1.125rem;
    --font-size-xl:1.3125rem;
    --font-size-2xl:clamp(1.75rem,3vw,2.5rem);
    --font-size-display:clamp(2.25rem,7vw,4.75rem);
    --leading-tight:1.06;
    --leading-heading:1.2;
    --leading-body:1.6;

    --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
    --space-5:1.5rem;  --space-6:2rem;    --space-7:3rem;    --space-8:4rem;
    --space-9:5.5rem;

    --radius-sm:0.25rem; --radius-md:0.5rem; --radius-pill:999rem;

    --container-wide:78rem;
    --page-gutter:clamp(1.25rem,4vw,3rem);

    --header-height:4rem;
    --nav-height:3.5rem;
    --focus-ring-width:2px;
    --transition-fast:120ms;
    --target-min:2.75rem;
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
      animation-iteration-count:1!important;}
  }
}

@layer base {
  body{
    background:var(--color-paper);
    color:var(--color-ink);
    font-family:var(--font-body);
    font-size:var(--font-size-base);
    line-height:var(--leading-body);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration-thickness:.06em;text-underline-offset:.15em;}
  :focus-visible{outline:var(--focus-ring-width) solid var(--color-focus);outline-offset:3px;}
  /* Sticky header + sticky category nav must not cover anchored headings. */
  [id]{scroll-margin-block-start:calc(var(--header-height) + var(--nav-height) + var(--space-4));}

  .display-heading{
    font-family:var(--font-display);
    font-size:var(--font-size-display);
    font-weight:400;
    line-height:var(--leading-tight);
    letter-spacing:.005em;
    text-transform:uppercase;
    text-wrap:balance;
  }
  .eyebrow{
    font-size:var(--font-size-xs);
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--color-muted);
  }
  /* Secondary language. Always marked lang="en"; italic display face,
     one step down, mirroring the print menu's treatment. */
  .lang-en{
    color:var(--color-muted);
    font-family:var(--font-display);
    font-style:italic;
  }
  .section-rule{block-size:1px;background:var(--color-ink);}
  .wrap{max-inline-size:var(--container-wide);margin-inline:auto;padding-inline:var(--page-gutter);}
}

@layer components {

  /* ---------- skip link ---------- */
  .skip-link{
    position:absolute;inset-block-start:-100%;inset-inline-start:var(--space-4);z-index:60;
    padding:var(--space-3) var(--space-4);background:var(--color-ink);color:#fff;
    text-decoration:none;border-radius:var(--radius-sm);
  }
  .skip-link:focus{inset-block-start:var(--space-2);}

  /* ---------- site header ---------- */
  .site-header{
    position:sticky;inset-block-start:0;z-index:30;
    border-block-end:1px solid var(--color-hairline);
    background:color-mix(in srgb, var(--color-paper) 92%, transparent);
    backdrop-filter:blur(12px);
  }
  .site-header__inner{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
    min-block-size:var(--header-height);
  }
  .brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
    min-block-size:var(--target-min);}
  .brand img{block-size:2.25rem;inline-size:auto;}
  .brand__wordmark{
    font-family:var(--font-display);font-size:var(--font-size-sm);
    letter-spacing:.06em;text-transform:uppercase;
  }
  .site-nav{display:none;}
  .site-header__actions{display:flex;align-items:center;gap:var(--space-3);}

  .language-control{display:flex;gap:2px;border:1px solid var(--color-boundary);
    border-radius:var(--radius-pill);padding:2px;}
  /* Below 48rem the mobile action bar already carries WhatsApp, so the
     header CTA is removed rather than allowed to overflow at 320px. */
  .site-header__actions > .button{display:none;}
  @media (min-width:48rem){.site-header__actions > .button{display:inline-flex;}}
  .language-control button{
    min-block-size:var(--target-min);min-inline-size:var(--target-min);padding-inline:var(--space-2);
    border:0;border-radius:var(--radius-pill);background:transparent;cursor:pointer;
    font-size:var(--font-size-xs);font-weight:700;letter-spacing:.08em;
  }
  .language-control button[aria-pressed="true"]{background:var(--color-ink);color:#fff;}

  @media (min-width:48rem){
    .language-control button{padding-inline:var(--space-3);}
  }
  @media (min-width:64rem){
    .site-nav{display:flex;gap:var(--space-5);font-size:var(--font-size-sm);}
    .brand img{block-size:2.75rem;}
  }

  /* ---------- hero ---------- */
  .menu-hero{padding-block:clamp(2.5rem,7vw,5.5rem);}
  .menu-hero__inner{display:grid;gap:var(--space-7);}
  .menu-hero__copy{align-self:center;max-inline-size:38rem;}
  .menu-hero__title{margin-block:var(--space-4) 0;}
  .menu-hero__tagline{margin-block-start:var(--space-5);font-size:var(--font-size-lg);}
  .menu-hero__tagline .lang-en{display:block;font-size:var(--font-size-base);
    margin-block-start:var(--space-1);}
  .menu-hero__intro{margin-block-start:var(--space-5);color:var(--color-ink-secondary);}
  .menu-hero__intro .lang-en{display:block;margin-block-start:var(--space-2);}
  .menu-hero__hours{
    margin-block-start:var(--space-6);padding-block:var(--space-4);
    border-block:1px solid var(--color-ink);max-inline-size:32rem;
  }
  .menu-hero__hours .eyebrow{display:block;white-space:nowrap;}
  .menu-hero__hours strong{
    display:block;margin-block-start:var(--space-2);
    font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:400;
    line-height:1.1;
  }
  .menu-hero__hours span{display:block;font-size:var(--font-size-sm);}
  .menu-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-6);}
  .menu-hero__media{margin:0;}
  .menu-hero__media img{inline-size:100%;aspect-ratio:4/3;object-fit:cover;}
  @media (min-width:64rem){
    .menu-hero__inner{grid-template-columns:minmax(0,1fr) minmax(22rem,.85fr);align-items:center;}
  }

  /* ---------- category nav ---------- */
  .category-nav{
    position:sticky;inset-block-start:var(--header-height);z-index:20;
    border-block:1px solid var(--color-hairline);background:var(--color-paper);
  }
  .category-nav__scroller{
    display:flex;gap:var(--space-2);min-block-size:var(--nav-height);align-items:center;
    max-inline-size:var(--container-wide);margin-inline:auto;
    padding-inline:var(--page-gutter);overflow-x:auto;
    overscroll-behavior-inline:contain;scrollbar-width:thin;
  }
  .category-nav a{
    display:inline-flex;flex:0 0 auto;align-items:center;min-block-size:var(--target-min);
    padding-inline:var(--space-4);border:1px solid transparent;
    border-radius:var(--radius-pill);text-decoration:none;white-space:nowrap;
    font-size:var(--font-size-sm);transition:background-color var(--transition-fast),
      border-color var(--transition-fast);
  }
  .category-nav a:hover{border-color:var(--color-hairline);background:var(--color-surface);}
  .category-nav a:active{background:var(--color-highlight);}
  .category-nav a[aria-current="location"]{
    border-color:var(--color-brand);background:var(--color-surface);color:var(--color-brand);font-weight:600;
  }
  .category-nav__scroller::before{
    content:'';position:sticky;inset-inline-start:0;flex:0 0 auto;
    inline-size:2rem;margin-inline-end:-2rem;z-index:1;
    background:linear-gradient(to left,transparent,var(--color-paper));
    pointer-events:none;opacity:0;transition:opacity .2s;
  }
  .category-nav__scroller.is-scrolled::before{opacity:1;}
  .category-nav__scroller::after{
    content:'';position:sticky;inset-inline-end:0;flex:0 0 auto;
    inline-size:2rem;margin-inline-start:-2rem;
    background:linear-gradient(to right,transparent,var(--color-paper));
    pointer-events:none;transition:opacity .2s;
  }
  .category-nav__scroller.is-scrolled-end::after{opacity:0;}

  /* ---------- menu section ---------- */
  .menu-section{padding-block:var(--space-9);content-visibility:auto;contain-intrinsic-size:auto 600px;}
  .menu-section + .menu-section{border-block-start:1px solid var(--color-hairline);}
  .menu-section__header{max-inline-size:44rem;margin-block-end:var(--space-7);}
  .menu-section__eyebrow{margin-block-end:var(--space-3);}
  .menu-section__title{
    font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:400;
    line-height:var(--leading-heading);text-transform:uppercase;letter-spacing:.02em;
    text-wrap:balance;
  }
  .menu-section__header .section-rule{margin-block:var(--space-5);}
  .menu-section__intro{color:var(--color-ink-secondary);}
  .menu-section__intro .lang-en{display:block;margin-block-start:var(--space-1);}
  .menu-section__layout{display:grid;gap:var(--space-7);}
  .menu-section__items{display:grid;gap:var(--space-6);align-content:start;}
  .menu-section__media{display:grid;align-content:start;gap:var(--space-5);}
  @media (min-width:64rem){
    .menu-section__layout{grid-template-columns:minmax(0,1.6fr) minmax(17rem,.85fr);
      gap:clamp(3rem,6vw,5.5rem);}
  }

  /* ---------- menu item ---------- */
  /* Supplier credit. A brand mark on transparency, so it sits on the paper
     colour rather than in a white box. */
  .supplier{
    display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
    margin-block-start:var(--space-5);padding-block-start:var(--space-5);
    border-block-start:1px solid var(--color-hairline);
  }
  .supplier__label{
    font-size:var(--font-size-xs);letter-spacing:.1em;text-transform:uppercase;
    color:var(--color-ink-secondary);
  }
  /* The English gloss must not inherit the label's caps. */
  .supplier__label .lang-en{text-transform:none;font-style:italic;}
  .supplier img{inline-size:9rem;block-size:auto;}

  .menu-item{padding-block-end:var(--space-6);border-block-end:1px solid var(--color-hairline);}
  .menu-item:last-child{border-block-end:0;padding-block-end:0;}
  .menu-item__header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;gap:var(--space-3) var(--space-5);
  }
  .menu-item__identity{min-inline-size:0;}
  .menu-item__name{
    font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:500;
    line-height:var(--leading-heading);
  }
  .menu-item__name .lang-en{font-weight:400;font-size:.9em;margin-inline-start:var(--space-2);}
  .menu-item__description{margin-block-start:var(--space-3);max-inline-size:46rem;}
  .menu-item__description .lang-en{display:block;margin-block-start:var(--space-1);
    font-size:var(--font-size-sm);}
  .menu-item__servedwith{margin-block-start:var(--space-3);max-inline-size:46rem;}
  .menu-item__servedwith b{font-weight:700;}
  .menu-item__servedwith .lang-en{display:block;margin-block-start:var(--space-1);
    font-size:var(--font-size-sm);}
  /* Allergen as readable text, never a symbol alone. Sits with the dish,
     not in the badge row, so it does not compete with the dish name. */
  .menu-item__allergen{
    margin-block-start:var(--space-2);
    font-size:var(--font-size-sm);font-weight:700;
    color:var(--color-ink-secondary);
  }
  .menu-item__allergen .lang-en{font-weight:400;}
  .availability-message{
    margin-block-start:var(--space-2);font-weight:700;color:var(--color-accent);
  }
  .menu-item[data-availability="sold-out"] .price,
  .menu-item[data-availability="temporarily-unavailable"] .price{text-decoration:line-through;}

  /* long title safeguard — required fallback, container query is the enhancement */
  @media (max-width:26rem){
    .menu-item__header{grid-template-columns:1fr;}
    .menu-item__header .price{justify-self:start;}
  }

  /* ---------- meta / badges ---------- */
  .menu-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block-end:var(--space-2);}
  .badge{
    display:inline-flex;align-items:center;gap:var(--space-1);min-block-size:1.75rem;
    padding-inline:.625rem;border:1px solid var(--color-boundary);
    border-radius:var(--radius-pill);color:var(--color-ink-secondary);
    font-size:var(--font-size-xs);font-weight:700;line-height:1;letter-spacing:.06em;
  }
  .badge--signature,.badge--speciality{background:var(--color-highlight);
    border-color:var(--color-ink-secondary);text-transform:uppercase;}
  .badge--spice{border-color:var(--color-accent);color:var(--color-accent);}
  .badge--allergen{border-color:currentColor;}

  /* ---------- price ---------- */
  .price{
    font-variant-numeric:tabular-nums lining-nums;
    white-space:nowrap;font-weight:500;
  }
  .price__prefix{
    margin-inline-end:var(--space-1);color:var(--color-muted);
    font-family:var(--font-display);font-size:var(--font-size-sm);font-style:italic;
    font-variant-numeric:normal;
  }

  /* ---------- option group ---------- */
  .option-group{
    margin-block-start:var(--space-4);
    border-inline-start:1px solid var(--color-hairline);
    padding-inline-start:var(--space-4);
  }
  .option-group > summary{
    display:flex;align-items:center;gap:var(--space-2);min-block-size:var(--target-min);
    cursor:pointer;font-size:var(--font-size-sm);font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;list-style:none;
  }
  .option-group > summary::-webkit-details-marker{display:none;}
  .option-group > summary::after{
    content:'+';display:flex;align-items:center;justify-content:center;flex-shrink:0;
    inline-size:1.5rem;block-size:1.5rem;margin-inline-start:auto;
    border:1px solid var(--color-boundary);border-radius:50%;
    font-size:var(--font-size-sm);font-weight:400;line-height:1;
    color:var(--color-muted);transition:transform var(--transition-fast);
  }
  .option-group[open] > summary::after{content:'−';}
  .option-group > summary::after{transition:transform var(--transition-fast);}
  .option-group[open] > summary::after{transform:none;}
  .option-group > summary .lang-en{text-transform:none;letter-spacing:normal;font-weight:400;}
  .option-group--critical > summary{color:var(--color-ink);}
  .option-group__scope{margin-block:var(--space-2) var(--space-3);font-size:var(--font-size-sm);
    color:var(--color-ink-secondary);}
  .option-list{display:grid;gap:var(--space-3);margin-block:var(--space-3) var(--space-2);}
  .option-row{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-4);align-items:baseline;
    min-block-size:var(--target-min);
  }
  .option-row__label{font-size:var(--font-size-sm);}
  .option-row__label .lang-en{margin-inline-start:var(--space-2);font-size:.95em;}
  .option-row .price{font-size:var(--font-size-sm);}

  /* egg / preparation choice — not priced, so a plain list not a price list */
  .choice-group{margin-block-start:var(--space-4);
    border-inline-start:1px solid var(--color-hairline);padding-inline-start:var(--space-4);}
  .choice-group__label{font-size:var(--font-size-xs);font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--color-muted);}
  .choice-group__label .lang-en{text-transform:none;letter-spacing:normal;font-weight:400;}
  .choice-list{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
    margin-block-start:var(--space-2);font-size:var(--font-size-sm);}

  /* ---------- media ---------- */
  .menu-media{margin:0;}
  .menu-media img{inline-size:100%;aspect-ratio:4/3;object-fit:cover;}
  .menu-media figcaption{
    margin-block-start:var(--space-2);color:var(--color-muted);
    font-size:var(--font-size-xs);letter-spacing:.06em;text-transform:uppercase;
  }
  .menu-media img[loading="lazy"]{opacity:0;transition:opacity .4s ease;}
  .menu-media img[loading="lazy"].is-loaded{opacity:1;}

  /* ---------- speciality panel ---------- */
  .speciality{
    border:1px solid var(--color-ink);padding:var(--space-5);
    margin-block-end:var(--space-7);
  }
  .speciality__header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-5);
    align-items:baseline;
  }
  .speciality__name{font-family:var(--font-display);font-size:var(--font-size-xl);
    font-weight:500;line-height:var(--leading-heading);}
  .speciality__description{margin-block-start:var(--space-3);}
  .speciality__description .lang-en{display:block;margin-block-start:var(--space-1);
    font-size:var(--font-size-sm);}
  @media (max-width:26rem){
    .speciality__header{grid-template-columns:1fr;}
  }

  /* ---------- drinks ---------- */
  .drink-columns{display:grid;gap:var(--space-7);}
  .drink-list__title{font-size:var(--font-size-sm);font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;}
  .drink-list__subtitle{font-size:var(--font-size-base);}
  .drink-list .section-rule{margin-block:var(--space-3) var(--space-2);}
  .price-list{margin:0;}
  .price-list__row{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);
    padding-block:var(--space-3);border-block-end:1px solid var(--color-hairline);
  }
  .price-list dt,.price-list dd{margin:0;}
  .price-list dd{font-variant-numeric:tabular-nums lining-nums;font-weight:500;}
  .drinks-footnote{margin-block-start:var(--space-5);font-size:var(--font-size-sm);
    color:var(--color-ink-secondary);}
  .drink-media{display:grid;gap:var(--space-5);margin-block-start:var(--space-7);}
  @media (min-width:48rem){
    .drink-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);}
    .drink-media{grid-template-columns:repeat(2,minmax(0,1fr));}
  }

  /* ---------- notices ---------- */
  .menu-notices{
    display:grid;gap:var(--space-6);padding-block:var(--space-7);
    border-block-start:1px solid var(--color-ink);
  }
  .notice h3{font-size:var(--font-size-sm);letter-spacing:.12em;text-transform:uppercase;
    margin-block-end:var(--space-2);}
  .notice h3 .lang-en{letter-spacing:normal;text-transform:none;}
  .notice p{color:var(--color-ink-secondary);}
  .notice .lang-en{display:block;margin-block-start:var(--space-2);font-size:var(--font-size-sm);}
  .legend{
    padding-block:var(--space-5);border-block-start:1px solid var(--color-hairline);
    display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
    font-size:var(--font-size-sm);color:var(--color-ink-secondary);
  }
  .legend b{font-weight:700;}
  @media (min-width:48rem){
    .menu-notices{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);}
  }

  /* ---------- contact ---------- */
  .contact-band{padding-block:var(--space-8);border-block-start:1px solid var(--color-hairline);}
  .contact-band__grid{display:grid;gap:var(--space-6);}
  .contact-band h2{font-family:var(--font-display);font-size:var(--font-size-2xl);
    font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:var(--leading-heading);}
  .contact-band dt{font-size:var(--font-size-xs);font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--color-muted);}
  .contact-band dd{margin:0 0 var(--space-4);}
  .contact-band dd a{display:inline-flex;align-items:center;min-block-size:var(--target-min);}
  .contact-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);}
  @media (min-width:48rem){
    .contact-band__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);}
  }

  /* ---------- footer ---------- */
  .site-footer{
    padding-block:var(--space-6) var(--space-7);
    border-block-start:1px solid var(--color-ink);
    font-size:var(--font-size-sm);color:var(--color-ink-secondary);
  }
  .site-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
    justify-content:space-between;align-items:center;}
  .site-footer a{display:inline-flex;align-items:center;min-block-size:var(--target-min);}

  /* ---------- buttons ---------- */
  .button .lang-en{margin-inline-start:.35em;}
  .button{
    display:inline-flex;align-items:center;justify-content:center;
    min-block-size:var(--target-min);padding-inline:var(--space-5);
    border:1px solid transparent;border-radius:var(--radius-sm);
    font-weight:700;font-size:var(--font-size-sm);letter-spacing:.04em;text-decoration:none;
    transition:background-color var(--transition-fast),border-color var(--transition-fast),
      color var(--transition-fast);
  }
  .button--primary{background:var(--color-brand);color:#fff;}
  .button--primary:hover{background:var(--color-brand-hover);}
  .button--primary:active{background:var(--color-ink);}
  .button--secondary{border-color:var(--color-boundary);background:transparent;color:var(--color-ink);}
  .button--secondary:hover{border-color:var(--color-ink);}
  .button--secondary:active{background:var(--color-highlight);}

  /* ---------- mobile action bar ---------- */
  .mobile-action-bar{
    position:fixed;z-index:40;inset-inline:var(--space-3);
    inset-block-end:max(var(--space-3),env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
    border:1px solid var(--color-boundary);border-radius:var(--radius-md);
    background:var(--color-surface);box-shadow:0 .5rem 2rem rgb(20 18 16 / 14%);
  }
  .mobile-action-bar a{
    display:inline-flex;align-items:center;justify-content:center;min-block-size:3rem;
    padding-inline:var(--space-2);text-decoration:none;font-size:var(--font-size-sm);
    font-weight:700;transition:background-color var(--transition-fast);
  }
  .mobile-action-bar a:active{background:var(--color-highlight);}
  .mobile-action-bar a + a{border-inline-start:1px solid var(--color-hairline);}
  @media (min-width:64rem){.mobile-action-bar{display:none;}}
  @media (max-width:63.999rem){body{padding-block-end:5.5rem;}}

  /* ---------- back-to-top ---------- */
  .back-to-top{
    position:fixed;z-index:35;inset-inline-end:var(--space-4);
    inset-block-end:calc(4.5rem + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;justify-content:center;
    inline-size:2.75rem;block-size:2.75rem;
    border:1px solid var(--color-boundary);border-radius:50%;
    background:var(--color-surface);box-shadow:0 .25rem 1rem rgb(20 18 16 / 10%);
    text-decoration:none;color:var(--color-ink);
    opacity:0;visibility:hidden;
    transition:opacity .2s,visibility .2s,background-color var(--transition-fast);
  }
  .back-to-top.is-visible{opacity:1;visibility:visible;}
  .back-to-top:active{background:var(--color-highlight);}
  @media (max-width:63.999rem){.back-to-top{inset-block-end:calc(5.5rem + env(safe-area-inset-bottom,0px));}}
  @media (min-width:64rem){.back-to-top{inset-block-end:var(--space-6);}}

  /* ---------- mobile spacing tightening ---------- */
  @media (max-width:47.999rem){
    .menu-hero{padding-block:clamp(1.5rem,5vw,3rem);}
    .menu-hero__media{order:-1;}
    .menu-hero__intro{font-size:var(--font-size-sm);}
    .menu-section{padding-block:var(--space-7);}
    .menu-section__header{margin-block-end:var(--space-5);}
    .menu-hero__media img{aspect-ratio:16/10;}
    .lang-en{font-size:max(.875em,.8125rem);}
    .display-heading{line-height:1.15;}
  }
  @media (max-width:22.5rem){
    .menu-hero__actions{flex-direction:column;}
    .menu-hero__actions .button{inline-size:100%;text-align:center;}
    .contact-band__actions{flex-direction:column;}
    .contact-band__actions .button{inline-size:100%;text-align:center;}
  }
}

@layer utilities {
  .visually-hidden{
    position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  /* Language narrowing is opt-in. Default state shows BOTH languages, which is
     the approved treatment. These rules only apply once a visitor chooses. */
  [data-content-language="ms"] [data-language-switchable][lang="en"]{display:none;}
  [data-content-language="en"] [data-language-switchable]:not([lang="en"]){display:none;}
  /* Never hidden by the language control: prices, dish names, allergen text,
     contact details, hours. Those carry no [data-language-switchable]. */
  .js-only{display:none;}
  .js .js-only{display:flex;}

  /* The hidden attribute must win over any component display rule. Without
     this, `.order-add{display:inline-flex}` and friends keep elements on
     screen after JS sets .hidden = true. */
  [hidden]{display:none!important;}
}

/* ============================================================ ordering
   Table ordering. Layered into `components` so it sits in the same cascade
   position as the rest of the UI regardless of file order. Every control is
   sized to --target-min (2.75rem / 44px). Motion is handled by the global
   prefers-reduced-motion rule in the tokens layer. */
@layer components {

  /* ---------------------------------------------------------- add + stepper */
  /* Ordering is JS-only, but .js-only lives in the utilities layer, which
     outranks components and would force display:flex over both [hidden] and
     inline-flex. Gate on .js from inside this layer instead. */
  .order-control{display:none;justify-content:flex-end;align-items:center;
    gap:var(--space-2);margin-block-start:var(--space-4);}
  .js .order-control{display:flex;}
  .drinks-footnote__item{display:inline-flex;align-items:center;
    white-space:nowrap;}
  .order-control--compact{margin-block-start:0;
    margin-inline-start:var(--space-3);vertical-align:middle;}
  .js .order-control--compact{display:inline-flex;}

  .order-add{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
    min-block-size:var(--target-min);min-inline-size:var(--target-min);
    padding-inline:var(--space-4);
    font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:600;
    color:var(--color-brand);background:var(--color-surface);
    border:1px solid var(--color-boundary);border-radius:var(--radius-pill);
    cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);}
  .order-add:hover{background:var(--color-brand);color:#fff;border-color:var(--color-brand);}
  .order-control--compact .order-add__label{display:none;}
  .order-control--compact .order-add{padding-inline:0;}

  .stepper{display:inline-flex;align-items:center;gap:var(--space-1);
    border:1px solid var(--color-boundary);border-radius:var(--radius-pill);
    background:var(--color-surface);}
  .stepper__button{inline-size:var(--target-min);block-size:var(--target-min);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--font-size-lg);line-height:1;color:var(--color-brand);
    background:none;border:none;border-radius:var(--radius-pill);cursor:pointer;}
  .stepper__button:hover{background:var(--color-highlight);}
  .stepper__value{min-inline-size:1.5rem;text-align:center;font-weight:600;
    font-variant-numeric:tabular-nums;}

  /* ------------------------------------------------------------- order bar */
  .order-bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:40;
    padding:var(--space-3);padding-block-end:calc(var(--space-3) + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--color-paper) 60%,transparent);}
  .order-bar__button{display:flex;align-items:center;gap:var(--space-3);
    inline-size:min(100%,34rem);margin-inline:auto;min-block-size:var(--target-min);
    padding:var(--space-3) var(--space-4);
    font-family:var(--font-body);font-size:var(--font-size-base);font-weight:600;
    color:#fff;background:var(--color-brand);border:none;
    border-radius:var(--radius-pill);cursor:pointer;
    box-shadow:0 6px 24px rgb(20 18 16 / .28);}
  .order-bar__button:hover{background:var(--color-brand-hover);}
  .order-bar__count{display:flex;align-items:center;justify-content:center;
    min-inline-size:1.75rem;block-size:1.75rem;padding-inline:var(--space-2);
    font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;
    color:var(--color-brand);background:#fff;border-radius:var(--radius-pill);}
  .order-bar__label{flex:1;text-align:start;}
  .order-bar__total{font-variant-numeric:tabular-nums;}

  /* The order bar takes the mobile action bar's place rather than stacking. */
  body.has-order .mobile-action-bar{display:none;}
  body.has-order{padding-block-end:6rem;scroll-padding-block-end:6rem;}
  /* .back-to-top is fixed bottom-right and would sit under the order bar. */
  body.has-order .back-to-top{inset-block-end:calc(6.5rem + env(safe-area-inset-bottom,0px));}

  /* ----------------------------------------------------------------- sheet */
  .sheet{margin:auto auto 0;inline-size:100%;max-inline-size:34rem;
    max-block-size:88dvh;padding:0;
    color:var(--color-ink);background:var(--color-paper);
    border:none;border-start-start-radius:var(--radius-md);
    border-start-end-radius:var(--radius-md);
    box-shadow:0 -8px 40px rgb(20 18 16 / .3);}
  .sheet[open]{display:flex;flex-direction:column;}
  .sheet::backdrop{background:rgb(20 18 16 / .5);}
  .sheet__grip{inline-size:2.5rem;block-size:.25rem;margin:var(--space-3) auto 0;
    background:var(--color-hairline);border-radius:var(--radius-pill);}
  .sheet__header{display:flex;align-items:flex-start;gap:var(--space-3);
    padding:var(--space-4) var(--space-5) var(--space-3);
    border-block-end:1px solid var(--color-hairline);}
  .sheet__title{flex:1;margin:0;font-family:var(--font-display);
    font-size:var(--font-size-xl);line-height:var(--leading-heading);}
  .sheet__title .lang-en{font-size:.75em;font-weight:400;color:var(--color-muted);}
  .sheet__close{inline-size:var(--target-min);block-size:var(--target-min);
    flex:none;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;line-height:1;color:var(--color-ink-secondary);
    background:none;border:none;border-radius:var(--radius-pill);cursor:pointer;}
  .sheet__close:hover{background:var(--color-highlight);}
  .sheet__body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);
    overscroll-behavior:contain;}
  .sheet__footer{padding:var(--space-4) var(--space-5);
    padding-block-end:calc(var(--space-4) + env(safe-area-inset-bottom));
    background:var(--color-surface);border-block-start:1px solid var(--color-hairline);}
  .sheet__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);
    margin-block-start:var(--space-3);}
  .sheet__actions .button{flex:1;min-inline-size:8rem;justify-content:center;
    flex-direction:column;gap:.1em;line-height:1.25;text-align:center;}
  .sheet__actions .button .lang-en{font-size:.78em;font-weight:400;letter-spacing:.02em;}
  .sheet__actions .button .order-confirm__price{font-size:.9em;}
  .sheet__actions .button:disabled{opacity:.45;cursor:not-allowed;}
  .sheet__fineprint{margin-block-start:var(--space-3);
    font-size:var(--font-size-sm);color:var(--color-muted);}
  .sheet__fineprint .lang-en,.order-table__label .lang-en{display:block;
    margin-block-start:var(--space-1);}
  .sheet__empty{color:var(--color-muted);text-align:center;
    padding-block:var(--space-6);}
  .sheet__empty .lang-en{display:block;margin-block-start:var(--space-1);}

  /* ------------------------------------------------------------ cart lines */
  .order-lines{list-style:none;margin:0;padding:0;}
  .order-line{display:flex;align-items:flex-start;gap:var(--space-3);
    padding-block:var(--space-4);border-block-end:1px solid var(--color-hairline);}
  .order-line:last-child{border-block-end:none;}
  .order-line__main{flex:1;min-inline-size:0;}
  .order-line__name{margin:0;font-weight:600;}
  .order-line__name .lang-en{font-weight:400;font-size:.9em;color:var(--color-muted);}
  .order-line__options{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);
    color:var(--color-ink-secondary);}
  .order-line__controls{display:flex;align-items:center;justify-content:flex-end;
    gap:var(--space-3);flex:none;}
  .order-line__price{font-weight:600;font-variant-numeric:tabular-nums lining-nums;
    min-inline-size:3.5rem;text-align:end;}

  .order-allergen{margin:0 0 var(--space-4);padding:var(--space-3);
    font-size:var(--font-size-sm);font-weight:600;color:var(--color-accent);
    background:var(--color-highlight);border-radius:var(--radius-sm);}
  .order-allergen .lang-en{font-weight:400;}

  /* --------------------------------------------------------- option fields */
  .order-field{margin:0 0 var(--space-5);padding:0;border:none;}
  .order-field__legend{padding:0;margin-block-end:var(--space-2);
    font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;
    font-weight:600;color:var(--color-ink-secondary);}
  .order-field__legend .lang-en{text-transform:none;letter-spacing:normal;
    font-weight:400;color:var(--color-muted);}
  .order-option{display:flex;align-items:center;gap:var(--space-3);
    min-block-size:var(--target-min);padding-inline:var(--space-2);
    border-block-end:1px solid var(--color-hairline);cursor:pointer;}
  .order-option:last-child{border-block-end:none;}
  .order-option input{inline-size:1.25rem;block-size:1.25rem;flex:none;
    accent-color:var(--color-brand);}
  .order-option__label{flex:1;}
  .order-option__label .lang-en{color:var(--color-muted);font-size:.9em;}
  .order-option__price{font-variant-numeric:tabular-nums;font-weight:600;}
  .order-confirm__price{font-variant-numeric:tabular-nums;}

  /* ---------------------------------------------------------- total, table */
  .order-total{display:flex;justify-content:space-between;align-items:baseline;
    font-family:var(--font-display);font-size:var(--font-size-xl);}
  .order-total__amount{font-variant-numeric:tabular-nums lining-nums;}
  .order-notice{margin:var(--space-3) 0 0;padding:var(--space-3);
    font-size:var(--font-size-sm);color:var(--color-ink-secondary);
    background:var(--color-highlight);border-radius:var(--radius-sm);}
  .order-table{margin-block-start:var(--space-5);
    padding-block-start:var(--space-4);border-block-start:1px solid var(--color-hairline);}
  .order-table__label{display:block;margin-block-end:var(--space-2);
    font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;
    font-weight:600;color:var(--color-ink-secondary);}
  .order-table__select{inline-size:100%;min-block-size:var(--target-min);
    padding-inline:var(--space-3);font-family:var(--font-body);
    font-size:var(--font-size-base);color:var(--color-ink);
    background:var(--color-surface);border:1px solid var(--color-boundary);
    border-radius:var(--radius-sm);}
  .order-table__fixed{margin:0;font-size:var(--font-size-lg);font-weight:600;}

  /* ------------------------------------------------------------------ bill */
  .sheet--bill .bill{text-align:center;}
  .bill__label{margin:0;font-size:var(--font-size-xs);text-transform:uppercase;
    letter-spacing:.08em;font-weight:600;color:var(--color-ink-secondary);}
  .bill__label .lang-en{text-transform:none;letter-spacing:normal;font-weight:400;}
  .bill__amount{margin:var(--space-2) 0 var(--space-4);
    font-family:var(--font-display);font-size:var(--font-size-2xl);
    font-variant-numeric:tabular-nums lining-nums;}
  .bill__copy.is-copied{background:var(--color-highlight);
    border-color:var(--color-brand);color:var(--color-brand);}
  .bill__qr{display:block;inline-size:min(100%,15rem);block-size:auto;
    margin:var(--space-5) auto var(--space-2);
    border:1px solid var(--color-hairline);border-radius:var(--radius-sm);}
  .bill__payee{margin:0;font-weight:600;}
  .bill__pending{margin:var(--space-5) 0 0;padding:var(--space-4);
    font-size:var(--font-size-sm);color:var(--color-ink-secondary);
    background:var(--color-highlight);border-radius:var(--radius-sm);}
  .bill__pending .lang-en,.bill__steps .lang-en{display:block;
    margin-block-start:var(--space-2);}
  .bill__steps{margin-block-start:var(--space-4);font-size:var(--font-size-sm);
    color:var(--color-muted);}

  /* ------------------------------------------------------------ toast */
  .order-toast{position:fixed;inset-inline:0;
    inset-block-end:calc(7rem + env(safe-area-inset-bottom,0px));z-index:50;
    display:flex;justify-content:center;pointer-events:none;}
  .order-toast__inner{padding:var(--space-2) var(--space-5);
    background:var(--color-ink);color:#fff;font-size:var(--font-size-sm);
    font-weight:600;border-radius:var(--radius-pill);
    box-shadow:0 4px 16px rgb(20 18 16/.25);
    animation:toast-show 2s ease forwards;}
  @keyframes toast-show{
    0%{opacity:0;transform:translateY(.75rem) scale(.95);}
    12%{opacity:1;transform:translateY(0) scale(1);}
    75%{opacity:1;transform:translateY(0) scale(1);}
    100%{opacity:0;transform:translateY(-.5rem) scale(.95);}
  }

  /* order bar entrance */
  .order-bar.is-entering .order-bar__button{animation:bar-enter .35s ease;}
  @keyframes bar-enter{
    from{opacity:0;transform:translateY(1rem);}
    to{opacity:1;transform:translateY(0);}
  }

  @media (min-width:48rem){
    .sheet{margin-block-end:auto;margin-block-start:auto;
      border-radius:var(--radius-md);max-block-size:82dvh;}
    .order-bar{padding-block-end:var(--space-4);}
  }

  .order-toast__undo{display:inline;margin-inline-start:var(--space-3);padding:0;
    font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.15em;
    color:inherit;background:none;border:none;cursor:pointer;pointer-events:auto;}

  .order-table__select.is-invalid{border-color:var(--color-accent);animation:shake .4s ease;}
  .order-table__error{margin-block-start:var(--space-2);font-size:var(--font-size-sm);
    font-weight:600;color:var(--color-accent);}
  @keyframes shake{0%,100%{transform:translateX(0);}25%,75%{transform:translateX(-4px);}
    50%{transform:translateX(4px);}
  }

  .order-add.is-hinted{animation:hint-pulse 1.5s ease 2;}
  @keyframes hint-pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,77,46,0);}
    50%{box-shadow:0 0 0 6px rgba(31,77,46,.18);}
  }

  .sheet__clear{margin-inline-start:auto;padding:var(--space-2) var(--space-3);
    font-size:var(--font-size-xs);font-weight:600;letter-spacing:.04em;
    color:var(--color-accent);background:none;border:1px solid transparent;
    border-radius:var(--radius-sm);cursor:pointer;
    transition:border-color var(--transition-fast);}
  .sheet__clear:hover{border-color:var(--color-accent);}
}

@media print{
  .site-header,.category-nav,.mobile-action-bar,.back-to-top,.skip-link,
  .menu-hero__actions,.contact-band__actions,.language-control,
  .order-bar,.order-control,.sheet{display:none!important;}
  body,body.has-order{padding-block-end:0;background:#fff;color:#000;font-size:10pt;}
  .menu-section{break-inside:avoid;padding-block:1.5rem;}
  .menu-item{break-inside:avoid;}
  .menu-media img{max-block-size:12rem;inline-size:auto;}
  a{text-decoration:none;color:inherit;}
  .button{display:none!important;}
}