/* Rajah's South Indian Catering. One stylesheet for every page, mobile first.
   Palette and ornaments follow the flyers: cream parchment, chocolate ink, burnished copper. */

@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/eb-garamond-400.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/eb-garamond-400i.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/eb-garamond-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/cormorant-garamond-600.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/cinzel-600.woff2) format("woff2"); }

:root {
  --paper: #f7ecd6;
  --paper-2: #f1e1c2;
  --card: #fbf4e6;
  --ink: #3a2315;
  --ink-soft: #5b3f2d;
  --brown: #4f250d;
  --copper: #924b1d;
  --copper-2: #b06a33;
  --gold: #d8a066;
  --rule: #c49a6a;
  --rule-soft: #dcc29c;
  --field: #9a7448; /* form field edges: 3:1 on cream (WCAG 1.4.11) */
  --night: #2b170b;
  --night-2: #3a2113;
  --on-night: #f3e3c6;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --caps: "Cinzel", "Trajan Pro", "EB Garamond", Georgia, serif;
  --gutter: clamp(16px, 5vw, 40px);
  --max: 1160px;
  --radius: 6px;
  --shadow: 0 1px 0 rgba(255, 250, 240, .7) inset, 0 18px 40px -26px rgba(79, 37, 13, .45);
  --ease-brush: cubic-bezier(.62, .02, .28, 1);
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  background: var(--paper);
}
body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.1875rem/1.62 var(--serif);
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 249, 236, .9), rgba(255, 249, 236, 0) 70%),
    radial-gradient(90% 60% at 100% 100%, rgba(232, 208, 166, .35), rgba(232, 208, 166, 0) 70%),
    var(--paper);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: clip;
}
/* Phone numbers, prices and dates in lining figures, so they do not jump */
a[href^="tel:"], .price, .lnum, .site-foot, .announce, .day, .totals, .lines { font-variant-numeric: lining-nums tabular-nums; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brown); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1em; }
.lead, .section-head p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--brown); line-height: 1.08; margin: 0 0 .4em; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 9vw, 4.4rem); hyphens: manual; overflow-wrap: break-word; }
h2 { font-size: clamp(2.15rem, 6.4vw, 3.3rem); }
h3 { font-size: clamp(1.55rem, 4.4vw, 1.9rem); }
strong { font-weight: 600; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.mid { max-width: calc(940px + 2 * var(--gutter)); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brown); color: var(--card); padding: .6em 1em; border-radius: var(--radius); font-family: var(--caps); font-size: .8rem; letter-spacing: .1em; }
.skip:focus { top: 12px; color: var(--card); }

/* Small capitals, as "SOUTH INDIAN CATERING" on the flyer */
.eyebrow {
  display: block;
  font: 600 .78rem/1.3 var(--caps);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 .9rem;
}
.lead { font-size: clamp(1.25rem, 3.6vw, 1.42rem); line-height: 1.55; color: var(--ink-soft); }
.italic { font-style: italic; }
.center { text-align: center; }
.center .divider, .center .btns, .btns.center { justify-content: center; }
.btns.center { margin-top: clamp(30px, 5vw, 48px); }

/* Ruled line, dot, lotus, dot, ruled line */
.divider { display: flex; align-items: center; gap: 12px; color: var(--copper); margin: 1.1rem auto; max-width: 340px; }
.divider::before, .divider::after {
  content: ""; flex: 1; height: 7px;
  background:
    radial-gradient(circle, currentColor 3px, transparent 3.5px) right center / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) left center / calc(100% - 9px) 1.5px no-repeat;
}
.divider::after { background-position: left center, right center; }
.divider i { width: 30px; height: 26px; flex: none; background: url(../img/lotus.svg) center / contain no-repeat; }
.divider.small { max-width: 220px; margin: .6rem 0 1rem; }
.divider.small i { width: 22px; height: 19px; }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.5em;
  font: 600 .84rem/1.1 var(--caps); letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s, color .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary {
  color: #fff7ea;
  background: linear-gradient(180deg, #a55a26 0%, #87441a 55%, #733914 100%);
  box-shadow: inset 0 1px 0 rgba(255, 225, 185, .35), inset 0 0 0 1px rgba(60, 25, 5, .3), 0 10px 22px -12px rgba(79, 37, 13, .75);
}
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 225, 185, .4), inset 0 0 0 1px rgba(60, 25, 5, .3), 0 14px 26px -12px rgba(79, 37, 13, .8); }
.btn-ghost { color: var(--brown); border-color: var(--rule); background: rgba(251, 244, 230, .65); }
.btn-ghost:hover { color: var(--brown); border-color: var(--copper); background: var(--card); }
.btn[aria-disabled="true"] { opacity: .55; }
.link-arrow { font: 600 .8rem/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .5em; align-items: center; padding: .5em 0; }
.link-arrow::after { content: "→"; font-family: var(--serif); font-size: 1.2em; transition: transform .25s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40; transition: margin-bottom .3s var(--ease-out);
  background: rgba(247, 236, 214, .94);
  border-bottom: 1px solid rgba(196, 154, 106, .45);
  box-shadow: 0 1px 0 rgba(255, 250, 240, .8);
}

.head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; transition: min-height .3s var(--ease-out); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brown); transition: opacity .4s var(--ease-out), visibility .4s; }
.brand img.mark { width: 46px; height: auto; transition: width .3s var(--ease-out); }
.brand .name { display: grid; gap: 3px; }
.brand img.wm { width: 116px; height: auto; transition: width .3s var(--ease-out); }
.brand small { display: none; font: 600 .56rem/1 var(--caps); letter-spacing: .23em; color: var(--ink-soft); white-space: nowrap; }
/* Slimmer once scrolled. The margin keeps the header's place in the page the same, so nothing
   below it moves. */
.scroll-probe { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }
@media (max-width: 999px) {
  .site-head.compact { margin-bottom: 12px; }
  .site-head.compact .head-in { min-height: 56px; }
  .site-head.compact .brand img.wm { width: 96px; }
  .site-head.compact .brand img.mark { width: 40px; }
}
/* Home: the header brand shows once the hero logo has scrolled away (site.js). */
@media (scripting: enabled) {
  .home .site-head:not(.brand-on) .brand { opacity: 0; visibility: hidden; }
}
.nav-desk { display: none; }
.nav-desk ul, .nav-mob ul { list-style: none; margin: 0; padding: 0; }
.nav-desk a {
  position: relative; display: block; padding: .7em .1em; color: var(--ink); text-decoration: none;
  font: 600 .74rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase;
}
.nav-desk a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .35em; height: 1px; background: var(--copper); transition: left .3s var(--ease-out), right .3s var(--ease-out); }
.nav-desk a:hover { color: var(--copper); }
.nav-desk a:hover::after, .nav-desk a[aria-current="page"]::after { left: 0; right: 0; }
.nav-desk a[aria-current="page"] { color: var(--copper); }
.head-cta { display: none; }

/* Mobile navigation: a disclosure, works without JavaScript */
.nav-mob { position: static; }
.nav-mob summary {
  list-style: none; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px;
  border-radius: 50%; color: var(--brown);
}
.nav-mob summary::-webkit-details-marker { display: none; }
.nav-mob summary svg { width: 26px; height: 26px; }
.nav-mob summary .x { display: none; }
.nav-mob[open] summary .bars { display: none; }
.nav-mob[open] summary .x { display: block; }
.nav-mob .panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border-bottom: 1px solid var(--rule);
  box-shadow: 0 30px 50px -30px rgba(43, 23, 11, .55);
  padding: 8px var(--gutter) 22px;
  max-height: calc(100vh - 68px); overflow: auto;
}
.nav-mob[open] .panel { animation: drop .35s var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.nav-mob li + li { border-top: 1px solid rgba(196, 154, 106, .35); }
.nav-mob ul a { display: flex; justify-content: space-between; align-items: center; padding: .62em 0; font: 600 1.6rem/1.2 var(--display); color: var(--brown); text-decoration: none; }
.nav-mob ul a::after { content: ""; width: 18px; height: 16px; background: url(../img/lotus.svg) center / contain no-repeat; opacity: 0; transition: opacity .2s; }
.nav-mob ul a[aria-current="page"] { color: var(--copper); }
.nav-mob ul a[aria-current="page"]::after { opacity: 1; }

@media (min-width: 1000px) {
  .head-in { min-height: 84px; }
  .brand img.mark { width: 56px; }
  .brand img.wm { width: 140px; }
  .brand small { display: block; }
  .nav-mob { display: none; }
  .nav-desk { display: block; }
  .nav-desk ul { display: flex; gap: clamp(14px, 1.9vw, 28px); }
  .head-cta { display: inline-flex; min-height: 44px; padding: .7em 1.3em; font-size: .74rem; }
}

/* ---------- The flyer frame: ruled border, floral corners, palm fronds ---------- */
.frame { position: relative; isolation: isolate; }
.frame::before {
  content: ""; position: absolute; inset: 14px; z-index: -1; pointer-events: none;
  border: 1px solid var(--rule);
  outline: 1px solid rgba(196, 154, 106, .45); outline-offset: 4px;
}
.orn { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.orn span { position: absolute; background: center / contain no-repeat; }
/* The fronds share one layer with one opacity, and darken rather than stack: where two overlap
   they never form a darker seam. */
.orn .frs { inset: 0; isolation: isolate; opacity: .78; }
.orn .fr { width: clamp(170px, 38vw, 380px); aspect-ratio: 1; background-image: url(../img/fronds.svg); mix-blend-mode: darken; }
.orn .co { width: clamp(64px, 12vw, 108px); aspect-ratio: 170 / 196; background-image: url(../img/corner.svg); z-index: 1; }
.orn .tl { left: 2px; top: 2px; }
.orn .tr { right: 2px; top: 2px; transform: scaleX(-1); }
.orn .bl { left: 2px; bottom: 2px; transform: scaleY(-1); }
.orn .br { right: 2px; bottom: 2px; transform: scale(-1, -1); }
.orn .fr.tl, .orn .fr.tr { top: 26px; }
.orn .fr.tl, .orn .fr.bl { left: 26px; }
.orn .fr.tr, .orn .fr.br { right: 26px; }
.orn .fr.bl, .orn .fr.br { bottom: 26px; }

/* ---------- Home hero ---------- */
.hero { padding: 14px 0 0; }
.hero .frame { padding: clamp(26px, 7vw, 72px) clamp(20px, 6vw, 64px) clamp(40px, 8vw, 70px); text-align: center; }
.hero .emblem { position: relative; width: min(100%, 54vw, 420px); aspect-ratio: 385 / 317; margin: 0 auto; }
@media (min-width: 700px) { .hero .emblem { width: min(100%, 64vw, 420px); } }
.emblem > svg, .emblem > img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero h1 { margin: clamp(4px, 1vw, 10px) auto 0; width: min(100%, 600px); }
.hero h1 .wordmark { display: block; position: relative; width: 100%; aspect-ratio: 4053 / 1134; }
.wordmark .wm-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero .subtitle {
  margin: clamp(10px, 2.4vw, 18px) 0 0; font: 600 clamp(.8rem, 3.4vw, 1.35rem)/1.2 var(--caps);
  letter-spacing: .24em; text-indent: .24em; color: var(--ink); text-transform: uppercase;
}
.hero .divider { max-width: min(78vw, 420px); margin: clamp(10px, 2.6vw, 22px) auto clamp(8px, 2vw, 18px); }
.hero .tagline { font-style: italic; font-size: clamp(1.45rem, 5.4vw, 2.2rem); line-height: 1.25; color: var(--brown); margin: .2em auto .7em; max-width: 22ch; text-wrap: balance; }
.announce { display: grid; gap: 12px; justify-items: center; margin: 0 auto 22px; max-width: 640px; }
.announce .open { font: 600 .82rem/1.45 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0; }
.announce .open b { display: block; font-family: var(--display); font-size: 1.7rem; letter-spacing: .02em; text-transform: none; color: var(--brown); margin-top: 4px; }
.offer { display: flex; align-items: center; gap: 14px; text-align: left; margin: 0; padding: 10px 18px 10px 10px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(251, 244, 230, .8); }
.seal { width: 64px; height: 64px; flex: none; }
.offer p { margin: 0; font-size: 1.12rem; line-height: 1.35; color: var(--ink-soft); }
.offer p strong { color: var(--brown); font-family: var(--display); font-size: 1.35rem; display: block; }
.hero .btns { justify-content: center; }
@media (max-width: 699px) { .wide-only { display: none !important; } }

@media (min-width: 760px) and (max-width: 999px) {
  .announce { grid-auto-flow: column; align-items: center; gap: 28px; }
  .announce .open { text-align: right; }
}
@media (min-width: 1000px) {
  .hero { padding-top: 24px; }
  .hero .frame { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding: 72px clamp(48px, 6vw, 96px) 76px; min-height: min(calc(100svh - 110px), 760px); }
  .hero .emblem { width: min(100%, 390px); }
  .hero h1 { width: min(100%, 500px); }
  .hero .subtitle { font-size: 1.12rem; }
  .hero .hero-copy .divider { margin-top: 0; }
  .hero .tagline { font-size: clamp(2.1rem, 3vw, 2.6rem); }
}

/* Hero entrance: the emblem materialises as one picture while its arch is drawn, the birds follow,
   then the wordmark is written letter by letter. Pure CSS, so it starts with the first paint;
   reduced motion shows everything at once. */
@media (prefers-reduced-motion: no-preference) {
  .hero .em-art, .hero .em-birds { will-change: opacity, transform, filter; }
  .hero .em-art { opacity: 0; animation: materialise-emblem .9s .1s var(--ease-out) forwards; }
  .hero .em-arch path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s .2s var(--ease-brush) forwards; }
  .hero .em-arch .em-finial { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: rise .5s .9s var(--ease-out) forwards; }
  .hero .em-birds { opacity: 0; animation: fly .8s 1s var(--ease-out) forwards; }
  .hero .wm-l { opacity: 0; will-change: opacity, transform, filter; animation: materialise .9s var(--ease-out) forwards; }
  .hero .wm-l:nth-child(1) { animation-delay: .45s; }
  .hero .wm-l:nth-child(2) { animation-delay: .53s; }
  .hero .wm-l:nth-child(3) { animation-delay: .61s; }
  .hero .wm-l:nth-child(4) { animation-delay: .69s; }
  .hero .wm-l:nth-child(5) { animation-delay: .77s; }
  .hero .wm-l:nth-child(6) { animation-delay: .85s; }
  .hero .wm-l:nth-child(7) { animation-delay: .9s; }
  .hero .subtitle { opacity: 0; animation: spread .9s 1s var(--ease-out) forwards; }
  .hero .divider::before, .hero .divider::after { transform-origin: right center; animation: grow .7s 1.05s var(--ease-out) both; }
  .hero .divider::after { transform-origin: left center; }
  .hero .divider i { animation: bloom .6s 1.15s var(--ease-out) both; }
  .hero .announce, .hero .btns { opacity: 0; animation: rise .7s 1.4s var(--ease-out) forwards; }
  .hero .btns { animation-delay: 1.5s; }
}
@keyframes materialise-emblem { from { opacity: 0; filter: blur(6px) saturate(.6); transform: scale(.97); } to { opacity: 1; filter: none; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes materialise { from { opacity: 0; filter: blur(7px); transform: translateY(8px) scale(1.04); } 60% { filter: blur(0); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fly { from { opacity: 0; transform: translate(-10px, 8px); } to { opacity: 1; transform: none; } }
@keyframes spread { from { opacity: 0; transform: scaleX(1.18); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes bloom { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }

/* Calligraphy: site.js wraps each word of [data-ink] text and reveals it like a brush stroke,
   left to right through a feathered mask, with a little wet-ink blur. Until the script takes over
   the text is hidden; if the script never runs, it shows after a moment anyway. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-ink]:not(.inked):not(.ink-run) { color: transparent; animation: ink-failsafe 0s 1.8s forwards; }
  .ink-wait[data-ink]:not(.inked) { animation: none; }
  .ink-run .ink-w {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    animation: brush .62s var(--ease-brush) forwards;
  }
  .reveal:not(.shown) { opacity: 0; transform: translateY(14px); animation: ink-failsafe 0s 1.8s forwards; }
  .reveal-wait.reveal:not(.shown) { animation: none; }
  .reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
}
@keyframes ink-failsafe { to { color: var(--brown); opacity: 1; transform: none; } }
@keyframes brush {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(1.2px); }
  70% { filter: blur(.3px); }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; filter: none; }
}
.ink-w { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Sections ---------- */
.section { padding: clamp(52px, 8vw, 96px) 0; position: relative; }
.section.tight { padding: clamp(44px, 7vw, 80px) 0; }
/* Two plain sections in a row share one gap, marked by the heading's lotus divider. */
.section:not(.band) + .section:not(.band) { padding-top: clamp(16px, 3vw, 40px); }
.section-head { max-width: 680px; margin: 0 auto clamp(30px, 5vw, 56px); text-align: center; }
.section-head .divider { margin-top: .4rem; }
.section-head p { color: var(--ink-soft); }
.band { background: linear-gradient(180deg, rgba(241, 225, 194, .0), rgba(241, 225, 194, .85) 12%, rgba(241, 225, 194, .85) 88%, rgba(241, 225, 194, 0)); }

/* Dishes in arched frames */
.dishes { display: grid; gap: clamp(44px, 6vw, 40px); }
@media (min-width: 760px) { .dishes { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); } }
.dish { text-align: center; display: flex; flex-direction: column; align-items: center; }
.arch { position: relative; margin: 0 0 22px; width: min(100%, 340px); aspect-ratio: 4 / 5; }
.arch img { filter: sepia(.08) saturate(.92) contrast(1.02); }
.arch img, .arch .ph { width: 100%; height: 100%; object-fit: cover; -webkit-mask: url(../img/arch-mask.svg) center / 100% 100% no-repeat; mask: url(../img/arch-mask.svg) center / 100% 100% no-repeat; background: var(--paper-2); }
.arch::after { content: ""; position: absolute; inset: -9px -9px 0; background: url(../img/arch-line.svg) center / 100% 100% no-repeat; pointer-events: none; }
.arch::before { content: ""; position: absolute; left: 50%; top: -24px; width: 22px; height: 19px; margin-left: -11px; background: url(../img/lotus.svg) center / contain no-repeat; }
.dish h3 { margin-bottom: .15em; }
.dish .desc { font-style: italic; color: var(--ink-soft); max-width: 30ch; margin: 0 auto .5em; line-height: 1.45; }
.price { font: 600 1.55rem/1 var(--display); color: var(--copper); margin: 0; font-variant-numeric: lining-nums; }
.dish .price { margin-top: auto; padding-top: .3em; }
.note-card {
  margin: clamp(36px, 6vw, 56px) auto 0; max-width: 720px; padding: 18px 22px; text-align: center;
  border: 1px solid var(--rule-soft); border-radius: var(--radius); background: rgba(251, 244, 230, .75);
}
.note-card p { margin: 0; }
.note-card + .center { margin: 18px 0 0; }
.note-card p + p { margin-top: .35em; }
.note-card .italic { color: var(--ink-soft); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { counter-increment: s; text-align: center; padding: 0 6px; }
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px;
  font: 600 1.45rem/1 var(--caps); color: var(--card); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b8692c, #7b3c15 70%);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule), 0 12px 22px -12px rgba(79, 37, 13, .8);
}
.steps h3 { font-size: 1.6rem; }
.steps p { color: var(--ink-soft); margin: 0 auto; max-width: 32ch; }

/* Compact numbered list, beside a photo */
.steps-list { gap: 18px; margin: 4px 0 22px; }
@media (min-width: 860px) { .steps-list { grid-template-columns: 1fr; gap: 18px; } }
.steps-list li { text-align: left; display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 0; }
.steps-list li::before { width: 42px; height: 42px; margin: 2px 0 0; font-size: 1.05rem; grid-row: span 2; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rule); }
.steps-list h3 { font-size: 1.4rem; margin: 0 0 .1em; }
.steps-list p { margin: 0; max-width: none; }

/* Contact page */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.contact-grid h2 { font-size: clamp(1.9rem, 5vw, 2.3rem); margin-bottom: .7em; }
.contact-grid .btns { margin-top: 26px; }
.contact-list .big.email { font-size: clamp(1.2rem, 4.6vw, 1.45rem); overflow-wrap: anywhere; }

/* Wide photo band, framed like a print */
.photo-band { position: relative; margin: 0 auto; width: calc(100% - 2 * var(--gutter)); max-width: var(--max); padding: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-band img { filter: sepia(.08) saturate(.92) contrast(1.02); width: 100%; height: clamp(240px, 46vw, 520px); object-fit: cover; border-radius: 2px; }
.photo-band figcaption { position: relative; margin: -46px auto 0; width: min(92%, 560px); text-align: center; z-index: 1; padding: 16px 22px; background: rgba(251, 244, 230, .97); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-band figcaption p { text-wrap: balance; margin: 0; font: italic 400 clamp(1.3rem, 4vw, 1.75rem)/1.3 var(--serif); color: var(--brown); }

/* On a phone everything stacks in one column: centre the section heads there too, so the alignment
   does not flip back and forth down the page. */
@media (max-width: 759px) {
  .split > div:not(.prose), .contact-grid > div > h2, .faq-group > h2 { text-align: center; }
  .split > div:not(.prose) .divider, .split > div:not(.prose) .steps-list { margin-inline: auto; }
  .split > div:not(.prose) .steps-list { text-align: left; max-width: 30rem; }
}

/* Split: text beside an arched photo */
.split { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; }
.split .arch { margin-inline: auto; width: min(82%, 400px); }
@media (min-width: 860px) {
  .split { grid-template-columns: 5fr 6fr; }
  .split.flip > :first-child { order: 2; }
}

/* Cards */
.cards { display: grid; gap: 18px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } }
.card {
  position: relative; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(196, 154, 106, .3); border-radius: 3px; pointer-events: none; }
.card h3 { font-size: 1.55rem; }
.card p { color: var(--ink-soft); margin: 0; }
.card .icon { width: 44px; height: 44px; color: var(--copper); margin-bottom: 12px; }

/* Contact rows, as on the contact flyer: a copper disc with an icon, then the text */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
.disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff4e2; background: radial-gradient(circle at 35% 30%, #a65d28, #6c3212 75%); box-shadow: 0 8px 18px -10px rgba(79, 37, 13, .9), inset 0 1px 0 rgba(255, 220, 180, .35); }
.disc svg { width: 26px; height: 26px; }
.contact-list a { color: var(--brown); text-decoration: none; }
.contact-list a:hover { color: var(--copper); text-decoration: underline; }
.contact-list .big { font: 600 1.55rem/1.15 var(--display); color: var(--brown); display: block; font-variant-numeric: lining-nums; }
.contact-list small { display: block; font-size: 1rem; color: var(--ink-soft); line-height: 1.4; }

/* Rules list */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.rules li::before { content: ""; width: 24px; height: 21px; margin-top: 4px; background: url(../img/lotus.svg) center / contain no-repeat; }
@media (min-width: 700px) { .rules.two { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* Map */
.map-card {
  position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--paper-2); min-height: 380px; box-shadow: var(--shadow);
}
.map-card .map { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.map-card.ready .map { opacity: 1; pointer-events: auto; }
.map-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 50% 46%, rgba(247, 236, 214, 0) 0 70px, rgba(247, 236, 214, .0) 71px),
    repeating-linear-gradient(28deg, transparent 0 46px, rgba(196, 154, 106, .28) 46px 48px, transparent 48px 120px),
    repeating-linear-gradient(-62deg, transparent 0 64px, rgba(196, 154, 106, .22) 64px 66px, transparent 66px 150px),
    linear-gradient(160deg, #f3e4c6, #ecd7b2);
}
.map-fallback .pin { width: 46px; height: 58px; margin: 0 auto 4px; }
.map-label {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 16px; background: rgba(251, 244, 230, .96); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 14px 30px -18px rgba(43, 23, 11, .6);
}
.map-label address { font-style: normal; line-height: 1.35; }
.map-label address strong { font: 600 1.3rem/1.2 var(--display); color: var(--brown); display: block; }
.map-label .btn { min-height: 46px; padding: .65em 1.2em; font-size: .74rem; }
.map-load { position: relative; margin-top: 10px; }
/* On a phone the address card is one slim row: the address, then a round route button. */
@media (max-width: 759px) {
  .map-label { flex-wrap: nowrap; padding: 10px 10px 10px 14px; left: 10px; right: 10px; bottom: 10px; }
  .map-label address strong { font-size: 1.15rem; }
  .map-label address { font-size: 1rem; }
  .map-label .btn { width: 48px; min-height: 48px; padding: 0; flex: none; }
  .map-label .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 760px) { .map-card { min-height: 460px; } .map-label { left: 22px; right: auto; bottom: 22px; max-width: 420px; } }
.map-pin { width: 44px; height: 56px; cursor: default; filter: drop-shadow(0 6px 6px rgba(43, 23, 11, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .map-pin { animation: drop-pin .8s .3s var(--ease-out) both; }
}
@keyframes drop-pin { from { opacity: 0; transform: translateY(-24px); } }
.maplibregl-ctrl-attrib { font: 12px/1.4 var(--serif) !important; background: rgba(251, 244, 230, .85) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-soft) !important; }

/* Page hero for inner pages */
.page-hero { padding: 14px 0 0; }
.page-hero .frame { padding: clamp(58px, 10vw, 92px) clamp(32px, 8vw, 80px) clamp(48px, 7vw, 70px); text-align: center; }
.page-hero .eyebrow { max-width: none; text-wrap: balance; }
.page-hero h1 { margin-bottom: .2em; }
.page-hero .lead { max-width: 40ch; margin: 0 auto; }
.page-hero .orn .fr { width: clamp(140px, 30vw, 300px); }
.page-hero .orn .frs { opacity: .55; }
@media (min-width: 760px) { .page-hero .orn .frs { opacity: .78; } }
@media (min-width: 1000px) {
  .page-hero .orn .fr { width: clamp(140px, 22vw, 230px); }
  .hero .orn .fr { width: clamp(170px, 26vw, 300px); }
}
.page-hero .orn .co { width: clamp(54px, 9vw, 88px); }

/* Prose pages */
.prose h2 { font-size: clamp(1.9rem, 5vw, 2.4rem); margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--copper); }

/* Photo credits */
.credits { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
.credits li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 14px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.credits img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.credits p { margin: 0; line-height: 1.4; }
.credits strong { display: block; font: 600 1.35rem/1.2 var(--display); color: var(--brown); }
.credits span { color: var(--ink-soft); font-size: 1.02rem; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 26px; gap: 14px; align-items: center; padding: 18px 20px; font: 600 1.42rem/1.2 var(--display); color: var(--brown); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); background: linear-gradient(var(--copper), var(--copper)) center / 11px 1.5px no-repeat, linear-gradient(var(--copper), var(--copper)) center / 1.5px 11px no-repeat; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 20px; color: var(--ink-soft); }
.faq details > div p:last-child { margin: 0; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group h2 { font-size: clamp(1.8rem, 5vw, 2.3rem); }

/* Menu page: the menu card */
.menu-card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 64px) clamp(24px, 4vw, 30px); }
.menu-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(196, 154, 106, .45); border-radius: 3px; pointer-events: none; }
.menu-item { display: grid; gap: 18px; align-items: center; padding: 26px 0; }
.menu-card .menu-item:last-child { padding-bottom: 0; }
.menu-item + .menu-item { border-top: 1px solid rgba(196, 154, 106, .45); }
.menu-item .arch { width: min(62%, 240px); margin: 14px auto 6px; }
.menu-item .row { display: flex; align-items: baseline; gap: 12px; }
.menu-item h2 { font-size: clamp(1.8rem, 5.6vw, 2.4rem); margin: 0; }
.menu-item .row::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-.3em); min-width: 20px; }
.menu-item .price { order: 2; font-size: clamp(1.5rem, 4.6vw, 1.9rem); white-space: nowrap; }
.menu-item .desc { font-style: italic; color: var(--ink-soft); margin: .35em 0 0; font-size: 1.22rem; text-wrap: pretty; }
@media (min-width: 760px) {
  .menu-item { grid-template-columns: 230px 1fr; gap: 44px; }
  .menu-item .arch { width: 100%; margin: 14px 0 6px; }
}
.sides { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 700px) { .sides { grid-template-columns: 1fr 1fr; } }
.side { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: rgba(247, 236, 214, .6); }
.side img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--rule); }
.side h3 { font-size: 1.45rem; margin: 0 0 .1em; }
.side p { margin: 0; color: var(--ink-soft); line-height: 1.4; }
.side .price { font-size: 1.25rem; margin-top: .25em; }

/* Final call to action */
.cta-band { text-align: center; }
.cta-band .frame { padding: clamp(50px, 9vw, 84px) clamp(20px, 6vw, 60px); }
.cta-band .contact-list { max-width: 420px; margin: 26px auto 0; text-align: left; }

/* ---------- Order builder ---------- */
.order { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) { .order { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } .summary { position: sticky; top: 104px; } }
.step-box { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.step-box > legend { padding: 0; margin-bottom: 14px; font: 600 clamp(1.7rem, 5vw, 2.1rem)/1.15 var(--display); color: var(--brown); display: flex; align-items: center; gap: 12px; }
.step-box > legend span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; font: 600 1rem/1 var(--caps); color: var(--card); background: radial-gradient(circle at 35% 30%, #b8692c, #7b3c15 70%); }
.step-hint { margin: -6px 0 14px; color: var(--ink-soft); font-size: 1.05rem; }
.o-dish { display: grid; grid-template-columns: 72px 1fr; gap: 12px 14px; padding: 14px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .25s, box-shadow .25s; }
.o-dish + .o-dish { margin-top: 12px; }
@media (min-width: 700px) {
  .o-dish { grid-template-columns: 84px 1fr minmax(250px, auto); align-items: center; padding: 16px 18px; }
  .o-dish img { width: 84px; height: 84px; }
  .o-dish .o-controls { grid-column: 3; }
}
.o-dish.on { border-color: var(--copper-2); box-shadow: 0 0 0 1px var(--copper-2), var(--shadow); }
.o-dish img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--rule); }
.o-dish h2 { font-size: 1.45rem; margin: 0; }
.o-dish .desc { margin: .1em 0 0; font-style: italic; color: var(--ink-soft); font-size: 1rem; line-height: 1.35; }
.o-dish .price { font-size: 1.25rem; margin-top: .25em; }
/* Per dish: so many portions with rice, so many with biryani. One row each, the stepper on the
   right where the thumb is. */
.o-controls { grid-column: 1 / -1; display: grid; gap: 8px; }
.o-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(241, 225, 194, .45); transition: background-color .2s; }
.o-line.on { background: rgba(176, 106, 51, .16); }
.o-side { font: 600 .78rem/1.25 var(--caps); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.o-side small { display: block; margin-top: 2px; font: 600 1.1rem/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--copper); }
.o-max { margin: 2px 0 0; font-size: .98rem; color: var(--ink-soft); }
.qty { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--field); border-radius: 999px; background: var(--card); }
.qty button { width: 46px; height: 46px; border: 0; background: none; color: var(--brown); font: 400 1.6rem/1 var(--serif); cursor: pointer; border-radius: 50%; }
.qty button:hover { background: rgba(196, 154, 106, .25); }
.qty button:disabled { color: rgba(79, 37, 13, .3); cursor: default; background: none; }
.qty input { width: 42px; height: 46px; border: 0; background: none; text-align: center; font: 600 1.35rem/1 var(--display); color: var(--brown); -moz-appearance: textfield; appearance: textfield; font-variant-numeric: lining-nums; }
.qty input:focus-visible { outline-offset: -3px; border-radius: 10px; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.days { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .days { grid-template-columns: repeat(3, 1fr); } }
.day { position: relative; }
.day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day span { display: grid; gap: 2px; padding: 12px 10px; text-align: center; border: 1px solid var(--field); border-radius: var(--radius); background: var(--card); transition: background-color .2s, border-color .2s, color .2s; }
.day b { font: 600 .68rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--copper); }
.day strong { font: 600 1.5rem/1.1 var(--display); color: var(--brown); font-variant-numeric: lining-nums; }
.day em { font-size: .92rem; color: var(--ink-soft); line-height: 1.2; }
.day input:checked + span { background: var(--brown); border-color: var(--brown); }
.day input:checked + span b, .day input:checked + span strong, .day input:checked + span em { color: var(--card); }
.day input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font: 600 .74rem/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.field label small { font: italic 400 1rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.field input, .field textarea { font: 400 1.15rem/1.4 var(--serif); color: var(--ink); background: var(--card); border: 1px solid var(--field); border-radius: var(--radius); padding: 12px 14px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--copper); outline-offset: 1px; border-color: var(--copper); }
/* Remember the name and note in this browser: shown only when it has storage (remember.js). */
.remember { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 0; font-size: 1.02rem; line-height: 1.35; color: var(--ink-soft); cursor: pointer; }
.remember input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brown); cursor: pointer; }
.remember input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.err { color: #8a1f12; font-size: 1.02rem; margin: 10px 0 0; border-left: 3px solid #9b2c14; padding-left: 10px; }
.err:empty { display: none; }
.summary { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; position: relative; }
.summary::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(196, 154, 106, .35); border-radius: 3px; pointer-events: none; }
.summary h2 { font-size: 1.9rem; text-align: center; margin: 0; }
.summary .divider { margin: .4rem auto 1rem; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; line-height: 1.35; font-variant-numeric: lining-nums tabular-nums; }
.lines li span:last-child { white-space: nowrap; }
.lines small { display: block; font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.lines .empty { color: var(--ink-soft); font-style: italic; justify-content: center; }
.totals { border-top: 1px solid var(--rule-soft); margin-top: 8px; padding-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.totals .disc-line { color: var(--copper); }
.totals .total { font: 600 1.6rem/1.3 var(--display); color: var(--brown); border-top: 1px solid var(--rule-soft); margin-top: 6px; padding-top: 8px; }
.summary .btn { width: 100%; margin-top: 16px; }
.summary .btn[aria-disabled="true"] { opacity: 1; filter: saturate(.25); color: rgba(255, 247, 234, .85); box-shadow: none; transform: none; }
.send-hint { margin: 8px 0 0; text-align: center; font-style: italic; color: var(--ink-soft); }
.summary .fine { font-size: .98rem; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.45; }
.preview { margin-top: 18px; }
.preview summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 600 .72rem/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.preview summary::-webkit-details-marker { display: none; }
.preview summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .25s var(--ease-out); }
.preview[open] summary::before { transform: rotate(45deg); }
.preview pre { white-space: pre-wrap; font: 400 .98rem/1.45 var(--serif); background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0 0; color: var(--ink); }
.sent { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: rgba(146, 75, 29, .1); color: var(--brown); font-size: 1.02rem; }

.order-page .actionbar { display: none; }
@media (max-width: 979px) { .order-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }
/* A task page: a compact hero, so step 1 shows on the first screen of a phone. */
.order-page .page-hero .frame { padding-block: 36px 30px; }
.order-page .page-hero .lead, .order-page .page-hero .frs { display: none; }
/* Without script the form cannot work: only the WhatsApp and phone card shows. */
@media (scripting: none) { .order, .order-bar { display: none !important; } }
.nojs-order { max-width: 680px; margin: 0 auto; padding: clamp(24px, 5vw, 40px); text-align: center; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.nojs-order h2 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.nojs-order .btns { margin: 20px 0 16px; }
.nojs-order .fine { color: var(--ink-soft); margin: 0; }
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(43, 23, 11, .97); color: var(--on-night);
  border-top: 1px solid rgba(216, 160, 102, .5); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s .35s;
}
.order-bar p { margin: 0; display: grid; line-height: 1.1; }
.order-bar small { font: 600 .62rem/1.2 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: #d8b98f; }
.order-bar strong { font: 600 1.5rem/1.1 var(--display); font-variant-numeric: lining-nums; }
.order-bar .btn { min-height: 46px; padding: .6em 1.2em; font-size: .72rem; }
.order-bar.has-items:not(.near) { transform: none; visibility: visible; transition: transform .35s var(--ease-out); }
@media (min-width: 980px) { .order-bar { display: none; } }

/* ---------- Footer ---------- */
.site-foot { position: relative; margin-top: clamp(40px, 8vw, 90px); color: var(--on-night); background: radial-gradient(120% 90% at 50% 0%, var(--night-2), var(--night) 70%); }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #6a3011, #c98747, #6a3011); opacity: .85; }
.site-foot a { color: var(--on-night); text-decoration-color: rgba(243, 227, 198, .4); }
.site-foot a:hover { color: #fff; }
.foot-corner { position: absolute; right: 10px; top: 16px; transform: scaleX(-1); width: clamp(64px, 12vw, 100px); aspect-ratio: 170 / 196; background: var(--on-night); -webkit-mask: url(../img/corner.svg) center / contain no-repeat; mask: url(../img/corner.svg) center / contain no-repeat; opacity: .25; pointer-events: none; }
.foot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 56px 30px; }
.foot-brand, .foot-pickup, .foot-contact, .foot-nav { grid-column: 1 / -1; }
.foot-nav ul { columns: 2; column-gap: 24px; }
.foot-lockup { display: flex; align-items: center; gap: 12px; }
.foot-lockup img { width: 170px; }
.foot-lockup .foot-mark { width: 52px; }
.foot-brand .tag { font: 600 .62rem/1 var(--caps); letter-spacing: .25em; color: #d8b98f; margin: 12px 0 0; }
.site-foot .divider { color: var(--gold); margin: 10px 0 14px; max-width: 200px; }
.site-foot .divider i { background: var(--gold); -webkit-mask: url(../img/lotus.svg) center / contain no-repeat; mask: url(../img/lotus.svg) center / contain no-repeat; }
.foot-brand p { color: #e4d0ae; font-style: italic; margin: 0; max-width: 32ch; }
.site-foot h2 { font: 600 .74rem/1.2 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: #d8b98f; margin: 0 0 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 2px; }
.site-foot address { font-style: normal; }
.foot-rules li { color: #e4d0ae; }
.foot-base { border-top: 1px solid rgba(216, 185, 143, .22); padding-block: 18px 26px; font-size: .98rem; color: #cdb592; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; }
.foot-base ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 760px) {
  .foot-in { grid-template-columns: 1.3fr minmax(15em, 1.1fr) 1fr .9fr; gap: 32px; }
  .foot-brand, .foot-pickup, .foot-contact, .foot-nav { grid-column: auto; }
  .foot-nav ul { columns: 1; }
}

/* Phone action bar: call, WhatsApp, order */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(43, 23, 11, .97); border-top: 1px solid rgba(216, 160, 102, .5); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; color: var(--on-night); text-decoration: none; font: 600 .7rem/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; }
.actionbar a + a { border-left: 1px solid rgba(216, 160, 102, .22); }
.actionbar a.go { background: linear-gradient(180deg, #a55a26, #7d3d16); color: #fff7ea; }
.actionbar svg { width: 24px; height: 24px; }
body.has-bar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { .actionbar { display: none; } body.has-bar { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-head, .actionbar, .order-bar, .map-card, .orn { display: none !important; }
  body { background: #fff; }
  [data-ink], [data-ink] .ink-w { color: inherit !important; -webkit-mask: none !important; mask: none !important; filter: none !important; }
  [data-ink]:not(.inked) { color: var(--brown) !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}