/* ============================================================================
 DASARA — festival theme
 ----------------------------------------------------------------------------
 Loaded AFTER styles.css / app.css / legal.css and overrides them. Structure
 (grids, flex, breakpoints) is left alone; this layer changes surface: type,
 colour, ornament and texture.

 Where the motifs come from — all South Indian, all specific to Dasara:

 · THE STEPPED TIER is the one structural device. It is the gopuram (the
   Dravidian temple tower, tapering in steps) and it is the bommala koluvu /
   golu padi, the odd-numbered display steps built for Dasara. Same geometry.
   It appears as the top edge of the dark panels and as section dividers.
 · KOLAM — rice-flour floor art on a dot grid, redrawn every morning — is the
   page texture: a diamond lattice with dots, at very low opacity.
 · BRASS, not flat gold. There is a hammered brass pot in their own hero
   photograph and brass kuthu vilakku in every South Indian kitchen. Brass
   has a highlight and an olive shadow, so gold here is always a gradient.
 · THE FLEURON DIAMOND is lifted from their existing logo, which sets one
   either side of the wordmark. Reused as the ornament on rules and eyebrows.
 ========================================================================= */


:root {
  /* ---- ground: rice flour, banana-leaf underside, cotton ---- */
  --cream:      #fdf6e8;
  --paper:      #f4e7ce;
  --paper-warm: #efdcbc;

  /* ---- the logo red is fixed identity; the deeps are built around it ---- */
  --red:        #7a1210;
  --red-dark:   #3e0e0c;
  --red-ink:    #2b0908;

  /* ---- kumkum: the vermilion powder. Hotter than the logo red ---- */
  --kumkum:     #c8402e;

  /* ---- brass, as three stops so gold can be a gradient ---- */
  --brass-lo:   #9c6b1a;   /* rules, borders, gradients — decorative only */
  --brass-text: #855913;   /* small text: 5.68:1 on cream, 5.00:1 on paper */
  --brass:      #c79a3a;
  --brass-hi:   #efd79a;
  --gold:       #c79a3a;   /* kept for anything still asking for --gold */
  --turmeric:   #e0a32e;

  /* ---- temple green: banana leaf, mango leaf toranam ---- */
  --green:      #14482a;
  --leaf-light: #2c6b41;

  --ink:        #241713;
  --ink-soft:   #6a5747;
  --line:       #d9bd85;

  --brass-rule: linear-gradient(90deg,
                  transparent, var(--brass-lo) 18%, var(--brass-hi) 50%,
                  var(--brass-lo) 82%, transparent);

  /* Warm, low shadows — lamplight, not a drop shadow. */
  --lift:   0 1px 2px rgba(62,14,12,.06), 0 14px 30px -18px rgba(62,14,12,.34);
  --lift-lg:0 2px 4px rgba(62,14,12,.08), 0 30px 60px -28px rgba(62,14,12,.46);
}

/* ---- kolam: diamond lattice on a dot grid, laid over the cream ---- */
body {
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%237a1210' stroke-width='.55' stroke-opacity='.10'%3E%3Cpath d='M26 4 46 26 26 48 6 26Z'/%3E%3C/g%3E%3Cg fill='%239c6b1a' fill-opacity='.22'%3E%3Ccircle cx='26' cy='26' r='1'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='52' cy='0' r='1'/%3E%3Ccircle cx='0' cy='52' r='1'/%3E%3Ccircle cx='52' cy='52' r='1'/%3E%3C/g%3E%3C/svg%3E");
  letter-spacing: .002em;
}

/* ---- type: inscriptional display over a warm grotesque ---- */
h1, h2, h3, .hero h1, .brand-word,
.quick-links b, .motion-copy h2, .special-card h3,
.pts-big, .legal h1, .legal h2 {
  font-family: "Marcellus", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.005em;
}
.hero h1 { letter-spacing: -.022em; line-height: 1.02; }
.hero h1 em {
  /* Marcellus ships no italic; a synthesised slant on a display size is
     visibly wrong. Cormorant Garamond has a real italic and sits happily
     beside it. */
  font-family: "Cormorant Garamond", "Marcellus", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--red);
}
.section h2, .legal h1 { letter-spacing: -.012em; }

/* Eyebrows become small-caps labels with a brass fleuron. */
.eyebrow, .sec-no, .cat-title {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .68rem;
  color: var(--brass-text);
  display: inline-flex;
  align-items: center;
  gap: .62em;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  flex: 0 0 auto;
  background: var(--brass);
  transform: rotate(45deg);      /* the logo's fleuron diamond */
}
.order-panel .eyebrow, .delivery .eyebrow, .special-card .eyebrow {
  color: var(--brass-hi);
}
.order-panel .eyebrow::before, .delivery .eyebrow::before,
.special-card .eyebrow::before { background: var(--brass-hi); }

/* ---- header: brass hairline, kolam-free so the logo sits clean ---- */
.header {
  /* Fully opaque, and NO backdrop-filter. A blurred sticky header forces the
     browser to re-blur everything behind it on every scroll frame, which on a
     phone is the difference between smooth and juddering. At 93% opacity the
     blur was barely visible anyway. */
  background: var(--cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(156,107,26,.28);
}
.header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: var(--brass-rule);
  opacity: .55;
}
.nav a { letter-spacing: .04em; font-weight: 600; }
.nav a[aria-current="page"] { color: var(--red); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---- buttons: brass leaf for the primary, incised outline for the rest -- */
.button { letter-spacing: .05em; border-radius: 2px; }
.button-primary {
  background: linear-gradient(180deg, var(--red) 0%, #67100e 100%);
  color: #fdf6e8;
  box-shadow: 0 1px 0 rgba(239,215,154,.35) inset, var(--lift);
}
.button-primary:hover { background: linear-gradient(180deg,#8c1714 0%, var(--red) 100%); }
.button-gold {
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%);
  color: var(--red-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
.button-secondary {
  border: 1px solid var(--brass-lo);
  color: var(--red);
  background: rgba(255,255,255,.35);
}
.button-secondary:hover { background: var(--paper); }
.order-top {
  background: linear-gradient(180deg, var(--red) 0%, #67100e 100%);
  letter-spacing: .1em;
  border-radius: 2px;
}

/* ---- the stepped tier: gopuram / golu padi ------------------------------
   First attempt ran this as a stepped edge across the full width of the dark
   panels. At 14px tall and 1200px wide it read as a ragged edge, not a tower —
   and over the hero photograph it just looked like a rendering fault.

   So instead: one small centred crest, tall enough for the steps to actually
   be steps. Three tiers and a finial, in brass, sitting on the top edge. Used
   sparingly it reads as the gopuram it is taken from, and as the golu padi.  */
.quick-links, .delivery, .order-panel, footer { position: relative; }

/* Only on the panels that follow a cream section. The quick-links strip sits
   directly under the hero photograph, and brass ornament on top of a busy
   image reads as a smudge — so that boundary gets the plain brass rule only. */
.delivery::before, .order-panel::before {
  content: "";
  position: absolute; top: -25px; left: 50%;
  width: 112px; height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 45%, var(--brass-lo) 100%);
  clip-path: polygon(
     0% 100%,  0% 74%,  16% 74%,  16% 46%,
    34% 46%,  34% 22%,  45% 22%,  45% 0%,
    55% 0%,   55% 22%,  66% 22%,  66% 46%,
    84% 46%,  84% 74%, 100% 74%, 100% 100%);
}
/* On the cream sections the crest needs a hairline of its own ground beneath
   it so it does not float. */
.quick-links::after, .delivery::after, .order-panel::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--brass-rule);
  opacity: .8;
}

/* ---- quick links: banana-leaf green, brass keylines between ---- */
.quick-links {
  background: linear-gradient(180deg, var(--green) 0%, #0f3821 100%);
}
.quick-links a { border-right-color: rgba(239,215,154,.22); }
.quick-links b { font-size: 1.35rem; letter-spacing: .005em; }
.quick-links span { color: #d9c48c; letter-spacing: .02em; }

/* ---- menu: a brass-ruled bill of fare ---- */
.menu-section { background: var(--paper); }
.menu-tabs button, .cat-tabs button {
  border: 1px solid var(--brass-lo);
  color: var(--red);
  background: rgba(255,255,255,.4);
  border-radius: 2px;
  letter-spacing: .05em;
  transition: background .2s ease, color .2s ease;
}
.menu-tabs button:focus-visible, .cat-tabs button:focus-visible {
  outline: 2px solid var(--brass-lo);
  outline-offset: 2px;
}
.menu-tabs button[aria-selected="true"], .cat-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--red) 0%, #67100e 100%);
  color: var(--brass-hi);
  border-color: var(--red-dark);
}
.menu-list {
  background: var(--cream);
  border-top: 0;
  box-shadow: var(--lift);
  position: relative;
}
.menu-list::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 50%, var(--brass-lo));
}
.item { border-bottom: 1px dotted rgba(156,107,26,.45); }
.item b { color: var(--red); font-variant-numeric: tabular-nums; }

/* ---- specials: dark lacquer cards, brass caption rule ---- */
.special-card {
  background: linear-gradient(165deg, var(--red-dark) 0%, var(--red-ink) 100%);
  border-radius: 2px;
  box-shadow: var(--lift-lg);
}
.special-card h3 { color: #fdf6e8; }
.special-card p { color: #e8d6b4; }
.special-cta { color: var(--brass-hi); letter-spacing: .04em; }
.special-card > div { position: relative; }
.special-card > div::before {
  content: "";
  position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
  background: var(--brass-rule);
  opacity: .7;
}

/* ---- delivery + order panels ---- */
.delivery { background: linear-gradient(170deg, var(--green) 0%, #0e3520 100%); }
.delivery li { border-top-color: rgba(239,215,154,.26); }
.delivery li::before { color: var(--brass-hi); font-family: "Marcellus", serif; }
.delivery li span { color: #d9c48c; }

.order-panel { background: linear-gradient(170deg, var(--red) 0%, var(--red-ink) 100%); }
.order-form {
  background: rgba(253,246,232,.07);
  border: 1px solid rgba(239,215,154,.3);
  border-radius: 2px;
}
.order-form input, .order-form textarea, .order-form select {
  border: 1px solid var(--brass-lo);
  background: #fffaf0;
  border-radius: 2px;
  font-family: "Karla", sans-serif;
}
.order-form input:focus-visible, .order-form textarea:focus-visible,
.order-form select:focus-visible {
  outline: 2px solid var(--brass-hi); outline-offset: 1px;
}
.form-note { color: var(--brass-hi); }

/* ---- about: a brass rule above, like a printed colophon ---- */
.about { position: relative; }
.about::before {
  content: "";
  position: absolute; top: 0; left: clamp(18px,8vw,130px); width: 132px; height: 2px;
  background: var(--brass-rule);
}

/* ---- footer: darkest lacquer, brass tier above ---- */
footer {
  background: linear-gradient(180deg, var(--red-ink) 0%, #1d0605 100%);
  color: #ecdcc0;
}
footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brass-rule);
}
footer a { color: var(--brass-hi); }
footer b { font-family: "Marcellus", serif; font-size: 1.02rem;
  letter-spacing: .04em; color: #fdf6e8; }
.footer-legal { color: #b09a80; }
.mini-foot {
  background: linear-gradient(180deg, var(--red-ink) 0%, #1d0605 100%);
  color: #ecdcc0;
}
.mini-foot a { color: var(--brass-hi); }

/* ---- app pages: dishes, basket, cards ---- */
.dish, .auth-card, .b-line, .card {
  border-radius: 2px;
}
/* ---- auth card -------------------------------------------------------------
   app.css only ever gave .auth-card a max-width and a margin — no padding,
   no ground. Adding a background and border here turned that invisible
   wrapper into a card whose contents touched its own edges. It needs to be a
   real card: padding, and a grid so the children space themselves instead of
   relying on margins that were not there. */
.auth-card {
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
  position: relative;
  display: grid;
  gap: 15px;
  padding: clamp(26px, 5vw, 38px) clamp(22px, 5vw, 36px) clamp(28px, 5vw, 34px);
  margin: 30px auto 0;
  max-width: 480px;
}
.auth-card > h1,
.auth-card > h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* The intro line sits tight under the heading rather than a gap away. */
.auth-card > h1 + .muted,
.auth-card > h2 + .muted { margin-top: -7px; }
.auth-card .fld { gap: 7px; }
.auth-card input:not([type=checkbox]),
.auth-card select {
  padding: 13px 14px;
  font-size: 1rem;
  border: 1px solid var(--brass-lo);
  background: #fffdf6;
  border-radius: 2px;
  width: 100%;
}
.auth-card input:focus-visible {
  outline: 2px solid var(--brass-lo);
  outline-offset: 1px;
  border-color: var(--red);
}
.auth-card .button { min-height: 50px; }
.auth-card .small { margin: 0; }

/* Numbers: Marcellus has a very circular zero that reads as a capital O at
   display size — "0 points" looked like "O points". Karla's figures are
   unambiguous, and tabular so the balance does not jitter as it changes. */
.pts-big {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
}

/* Keep the account cards on a shared top edge rather than ragged. */
.acct-grid { align-items: start; }
.acct-grid > .auth-card { margin: 0; max-width: none; }

/* Short pages were leaving the footer floating mid-screen. */
.page-main { min-height: calc(100vh - 300px); }
.auth-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 50%, var(--brass-lo));
}
.chip { border-radius: 2px; letter-spacing: .04em; font-weight: 700; }
.chip-veg    { background: #dff0e2; color: var(--green); }
.chip-nonveg { background: #f7e2dd; color: #8a2b1d; }
.chip-out    { background: #ece3d2; color: var(--ink-soft); }
.pts-big   { color: var(--red); }

/* ---- legal pages ---- */
.legal .callout {
  background: var(--paper);
  border-left: 3px solid var(--red);
  border-radius: 0 2px 2px 0;
}
.legal .contact { border: 1px solid var(--line); border-radius: 2px;
  background: rgba(255,255,255,.6); }
.legal li::marker { color: var(--brass-text); }
.legal th { color: var(--red); font-family: "Karla", sans-serif;
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.legal th, .legal td { border-bottom-color: rgba(156,107,26,.32); }

/* ---- one orchestrated moment: the brass rules draw themselves in ------- */
@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.about::before, .menu-list::before, footer::before {
  transform-origin: left center;
  animation: drawRule .9s cubic-bezier(.2,.7,.2,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .about::before, .menu-list::before, footer::before { animation: none; }
}

/* ---- the stepped tier is decorative; drop it on narrow screens where the
        sections stack tightly and it would read as noise ---- */
@media (max-width: 560px) {
  .delivery::before, .order-panel::before { width: 84px; height: 20px; top: -19px; }
}



/* ---- inline links in prose --------------------------------------------------
   These were falling through to the browser default: bright blue #0000EE, on a
   dark green panel. Unreadable and entirely off-brand. Prose links now take
   the brand red on light grounds and brass on dark ones, always underlined so
   they are distinguishable without relying on colour alone. */

.section p a,
.section li a,
.about p a,
.legal p a,
.legal li a,
.legal td a,
.menu-note a,
.form-note a,
.small a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.section p a:hover, .section li a:hover, .about p a:hover,
.legal p a:hover, .legal li a:hover, .menu-note a:hover {
  color: var(--kumkum);
  text-decoration-thickness: 2px;
}

/* Dark panels: brass instead of red, which would vanish against them.
   These need to out-specify `.section p a` above — the delivery section
   carries BOTH .section and .delivery, and (0,1,2) was beating (0,1,1),
   which rendered dark red links on dark green. Hence .delivery.section. */
.delivery.section p a,
.delivery.section li a,
.delivery a,
.order-panel p a,
.order-panel .form-note a,
.special-card p a {
  color: var(--brass-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.delivery.section p a:hover, .delivery.section li a:hover,
.delivery a:hover, .order-panel p a:hover, .special-card p a:hover {
  color: #fff3d6;
  text-decoration-thickness: 2px;
}
/* The numbered "how it works" list has its own layout; keep those links plain
   in weight so they do not fight the step headings. */
.delivery li a { font-weight: 600; }

a:focus-visible {
  outline: 2px solid var(--brass-lo);
  outline-offset: 2px;
  border-radius: 1px;
}


/* ---- the logo's baked-in ground ------------------------------------------
   dasara-logo.png carries its own pale cream background (with a paper
   texture), which no longer matches the theme ground exactly and so showed as
   a faint rectangle behind the crest. Multiply blends that pale ground into
   whatever is behind it, on any light surface, without touching the artwork.
   The footer deliberately keeps its cream plate, so it is excluded. */
.header .brand img,
.setup-logo {
  mix-blend-mode: multiply;
}

/* ---- segmented sign in / sign up choice ---------------------------------- */
.authpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.authpick-opt {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 13px 14px;
  min-height: 62px;
  cursor: pointer;
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: "Karla", sans-serif;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.authpick-opt b { font-size: .95rem; font-weight: 700; line-height: 1.2; }
.authpick-opt span { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }
.authpick-opt:hover { border-color: var(--brass-lo); background: var(--paper); }
.authpick-opt:focus-visible { outline: 2px solid var(--brass-lo); outline-offset: 2px; }
.authpick-opt.is-on {
  border-color: var(--red);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--red);
}
.authpick-opt.is-on b { color: var(--red); }
@media (max-width: 420px) {
  .authpick { grid-template-columns: 1fr; }
  .authpick-opt { min-height: 0; }
}


/* An empty error paragraph still contributed its margins to the card grid,
   leaving a gap between the field and the button when nothing was wrong. */
.auth-card .fld-error:empty { display: none; }

/* ---- how would you like to pay ------------------------------------------- */
.pay-block { display: grid; gap: 8px; }
.pay-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-pick button {
  display: grid; gap: 2px; text-align: left;
  min-height: 64px; padding: 12px 14px;
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: "Karla", sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pay-pick button b { font-size: .95rem; font-weight: 700; line-height: 1.2; }
.pay-pick button span { font-size: .74rem; color: var(--ink-soft); line-height: 1.3; }
.pay-pick button:hover { border-color: var(--brass-lo); background: var(--paper); }
.pay-pick button:focus-visible { outline: 2px solid var(--brass-lo); outline-offset: 2px; }
.pay-pick button.is-on,
.pay-pick button[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--red);
}
.pay-pick button[aria-pressed="true"] b { color: var(--red); }
.pay-note { margin: 0; }
@media (max-width: 420px) { .pay-pick { grid-template-columns: 1fr; } }


/* ---- performance: stop the always-on animations ---------------------------
   motion.css runs four infinite animations. slowZoom scales the full-size
   hero image forever, which keeps the compositor busy the entire time the
   page is open — on a mid-range phone that alone makes scrolling stutter.
   The small decorative ones (orbit, steam) are cheap and stay.
   The floating food card keeps its animation but only while it is on screen. */
.hero-art > img, .hero-art > picture > img { animation: none !important; }
.stage-card { animation-play-state: running; }
@media (max-width: 900px) {
  /* On phones the food-gallery cards are large relative to the viewport and
     the float is not worth the frames. */
  .stage-card, .steam { animation: none !important; }
}

/* ---- dish photos ----------------------------------------------------------
   Only dishes with a real photo get one. A 4:3 window keeps the grid even
   whatever shape the source image is, and the card falls back to its
   text-only layout untouched when there is no photo. */
.dish-photo {
  margin: -1px -1px 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.dish-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.dish.has-photo:hover .dish-photo img { transform: scale(1.04); }
.dish.is-out .dish-photo img { filter: grayscale(.75) brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .dish-photo img { transition: none; }
  .dish.has-photo:hover .dish-photo img { transform: none; }
}

/* ---- minimum-order dialog ------------------------------------------------ */
.min-dialog {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  padding: clamp(24px, 5vw, 34px);
  max-width: min(92vw, 30rem);
  box-shadow: var(--lift-lg);
  font-family: "Karla", sans-serif;
}
.min-dialog::backdrop { background: rgba(43, 9, 8, .55); }
.min-dialog h2 {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.6rem;
  margin: 0 0 10px;
}
.min-dialog p { margin: 0 0 12px; line-height: 1.55; }
.min-dialog b { color: var(--red); }
.min-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.min-dialog-actions .button { flex: 1 1 auto; min-height: 48px; }


/* ============================================================================
   FULL FESTIVAL — the second pass.
   ----------------------------------------------------------------------------
   The first pass gave the site its ground (kolam), its metal (brass), its
   architecture (the gopuram tier) and its faces (Marcellus over Karla). What
   it did not have was the DECORATION of Dasara itself: the toranam over the
   door, the lamps, the paisley of a kalamkari border, a lotus. This adds them —
   each once, in one place, so the site reads as dressed for the festival
   rather than wallpapered with it.

   Everything below is ornament: static data-URI SVG, no animation, no text.
   Nothing here changes contrast, layout or hit areas.
   ========================================================================= */

:root {
  --marigold:      #f0a21b;   /* the garland flower — decorative only */
  --marigold-deep: #c8740a;
  --leaf:          #2c6b41;   /* mango leaf, the toranam's green */

  /* toranam: mango leaves and marigolds strung on a brass thread */
  --toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cpath d='M0 2Q12 7 24 2T48 2' fill='none' stroke='%239c6b1a' stroke-width='1.3'/%3E%3Cpath d='M12 4C6 10 6 19 12 27C18 19 18 10 12 4Z' fill='%232c6b41'/%3E%3Cpath d='M12 6V25' stroke='%2314482a' stroke-width='.8'/%3E%3Cpath d='M36 4C30 10 30 19 36 27C42 19 42 10 36 4Z' fill='%232c6b41'/%3E%3Cpath d='M36 6V25' stroke='%2314482a' stroke-width='.8'/%3E%3Ccircle cx='24' cy='3' r='4.2' fill='%23f0a21b'/%3E%3Ccircle cx='24' cy='3' r='1.7' fill='%23c8402e'/%3E%3Ccircle cx='0' cy='3' r='4.2' fill='%23f0a21b'/%3E%3Ccircle cx='0' cy='3' r='1.7' fill='%23c8402e'/%3E%3Ccircle cx='48' cy='3' r='4.2' fill='%23f0a21b'/%3E%3Ccircle cx='48' cy='3' r='1.7' fill='%23c8402e'/%3E%3C/svg%3E");

  /* paisley — the mankolam of a kalamkari border, in pale brass */
  --paisley: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cpath d='M21 3C13 3 8 9 9 14C10 19 15 21 19 20C24 19 27 14 25 9C23 6 21 6 20 8C19 10 21 12 23 11' fill='none' stroke='%23efd79a' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='14' r='1.3' fill='%23efd79a' fill-opacity='.55'/%3E%3C/svg%3E");

  /* a lit diya, and an unlit one */
  --diya-lit:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 12h14c0 3-3 5-7 5s-7-2-7-5z' fill='%23c79a3a'/%3E%3Cpath d='M4 12h12' stroke='%239c6b1a' stroke-width='1'/%3E%3Cpath d='M10 3c2 2.5 2.4 4.6 0 7-2.4-2.4-2-4.5 0-7z' fill='%23f0a21b'/%3E%3Cpath d='M10 5.5c1 1.3 1.1 2.4 0 3.6-1.1-1.2-1-2.3 0-3.6z' fill='%23fdf6e8'/%3E%3C/svg%3E");
  --diya-unlit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 12h14c0 3-3 5-7 5s-7-2-7-5z' fill='none' stroke='%239c6b1a' stroke-width='1.2'/%3E%3Cpath d='M4 12h12' stroke='%239c6b1a' stroke-width='1'/%3E%3Ccircle cx='10' cy='10.5' r='1' fill='%239c6b1a'/%3E%3C/svg%3E");

  /* lotus: five petals, brass with a pale heart */
  --lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M16 18C10 16 6 11 6 5c4 2 7 5 10 10 3-5 6-8 10-10 0 6-4 11-10 13z' fill='%23c79a3a'/%3E%3Cpath d='M16 18c-3-6-3-12 0-17 3 5 3 11 0 17z' fill='%23efd79a'/%3E%3Cpath d='M16 18C11 17 8 14 6 5M16 18c5-1 8-4 10-13' fill='none' stroke='%239c6b1a' stroke-width='.6'/%3E%3C/svg%3E");
}

/* ---- the toranam over the door ---------------------------------------------
   Strung across the very top of the hero, under the header: the first thing
   you pass under. One place only. It hangs over the photograph on the right
   exactly as a real one hangs over whatever is behind the doorway. */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  height: 30px;
  background: var(--toran) repeat-x center top;
  pointer-events: none;
}

/* ---- "open every day": a lit lamp instead of a green dot -------------------- */
.open-status span {
  width: 18px; height: 18px; border-radius: 0;
  background: var(--diya-lit) center / contain no-repeat;
  vertical-align: -4px; margin-right: 8px;
}

/* ---- section headings: a short brass rule, fleuron-ended --------------------- */
.section-heading h2::after {
  content: "";
  display: block; width: 72px; height: 2px; margin-top: 16px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 60%, transparent);
}

/* ---- the menu: a printed card with a double keyline ------------------------- */
.menu-list {
  box-shadow:
    inset 0 0 0 1px rgba(156,107,26,.45),
    inset 0 0 0 6px var(--cream),
    inset 0 0 0 7px rgba(156,107,26,.28),
    var(--lift);
}

/* ---- the dark panels: a paisley band along the foot ------------------------- */
.delivery {
  background-image: var(--paisley), linear-gradient(170deg, var(--green) 0%, #0e3520 100%);
  background-repeat: repeat-x, no-repeat;
  background-position: center bottom 12px, 0 0;
  background-size: 40px 24px, auto;
}
.order-panel {
  background-image: var(--paisley), linear-gradient(170deg, var(--red) 0%, var(--red-ink) 100%);
  background-repeat: repeat-x, no-repeat;
  background-position: center bottom 12px, 0 0;
  background-size: 40px 24px, auto;
}
.delivery, .order-panel { padding-bottom: calc(clamp(64px, 9vw, 120px) + 24px); }

/* ---- specials: a lacquer tray with a double brass keyline ------------------- */
.special-card {
  box-shadow:
    inset 0 0 0 1px var(--brass-lo),
    inset 0 0 0 5px var(--red-dark),
    inset 0 0 0 6px rgba(199,154,58,.4),
    var(--lift-lg);
}

/* ---- tracking: the order's progress as lamps lit along a brass wire --------- */
.timeline li .tl-dot {
  background: var(--diya-unlit) center / 18px 18px no-repeat, var(--paper);
  border-color: var(--brass-lo);
  color: transparent;                 /* the ✓ is now the lamp itself */
}
.timeline li.done .tl-dot {
  background: var(--diya-lit) center / 18px 18px no-repeat, var(--green);
  border-color: var(--green);
  color: transparent;
}
.timeline li.now .tl-dot {
  background: var(--diya-lit) center / 18px 18px no-repeat, var(--red);
  border-color: var(--red);
  color: transparent;
}
.timeline li.done .tl-line { background: linear-gradient(180deg, var(--brass-lo), var(--brass)); }
.timeline li.cancelled .tl-dot { background: #7a231b; color: #fff; }   /* the × stays legible */

/* ---- account and sign-in: a lotus in the corner ------------------------------ */
.auth-card { position: relative; }
.auth-card::after {
  content: "";
  position: absolute; right: 16px; bottom: 12px;
  width: 34px; height: 22px;
  background: var(--lotus) center / contain no-repeat;
  opacity: .85; pointer-events: none;
}

/* On a phone the toranam and the paisley are still there, just tighter. */
@media (max-width: 760px) {
  .hero::before { height: 26px; background-size: 40px 25px; }
  .delivery, .order-panel { padding-bottom: 89px; }
}

/* ---- quick-order bar (phones) -------------------------------------------------
   This markup shipped with the ordering work and was never styled: it has been
   rendering as two bare blue links at the very foot of the homepage on every
   device. It is meant to be the thing your thumb reaches for on a phone —
   fixed to the bottom, Call beside Order — and on a desktop, where the header
   already carries Order now, it is simply not needed. */
.order-sticky { display: none; }

@media (max-width: 760px) {
  .order-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px;
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--red-ink) 0%, #1d0605 100%);
    box-shadow: 0 -10px 30px -12px rgba(43,9,8,.6);
  }
  .order-sticky::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--brass-rule); opacity: .9;
  }
  .order-sticky a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 16px;
    border-radius: 2px; text-decoration: none;
    font-weight: 700; letter-spacing: .05em; font-size: .95rem;
  }
  .order-sticky-call {
    color: var(--brass-hi);
    border: 1px solid var(--brass-lo);
    background: rgba(255,255,255,.04);
  }
  .order-sticky-main {
    color: #fdf6e8;
    background: linear-gradient(180deg, var(--red) 0%, #67100e 100%);
    box-shadow: 0 1px 0 rgba(239,215,154,.35) inset;
  }
  /* Keep the last lines of the footer clear of the bar. */
  body { padding-bottom: 78px; }
}

/* The footer sets every <b> to display:block for the column headings. The
   company name inside the legal line is also a <b>, so its trailing full stop
   was being pushed onto a line of its own: "Eastern Spices" / ". Registered
   office". Keep that one inline. */
.footer-legal b { display: inline; margin: 0; }

/* Track page: recent orders from this device, one tap each. */
.recent-list { display: grid; gap: 10px; margin-top: 14px; }
.recent-order { display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; min-height: 56px; padding: 12px 16px; text-decoration: none; }
.recent-main { display: grid; gap: 2px; min-width: 0; }
.recent-main b { letter-spacing: .18em; font-size: 1.05rem; }
.recent-meta, .recent-items { font-size: .8rem; opacity: .85; font-weight: 400; letter-spacing: 0; text-transform: none; }
.recent-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.recent-total { font-weight: 700; flex: none; }

/* Home: the owner's own posters, straight from Instagram. */
.promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.promo-card { display: block; position: relative; border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: var(--lift); text-decoration: none; color: inherit; border: 1px solid var(--line); }
.promo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 300ms ease; }
.promo-card:hover img, .promo-card:focus-visible img { transform: scale(1.03); }
.promo-card span { display: block; padding: 10px 12px; font-family: "Marcellus", Georgia, serif; font-size: .95rem; color: var(--red); letter-spacing: .02em; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 420px) { .promo-grid { gap: 10px; } .promo-card span { font-size: .85rem; padding: 8px 10px; } }
.promo-video { margin-top: 22px; border-radius: 8px; overflow: hidden; box-shadow: var(--lift); border: 1px solid var(--line); background: var(--red); }
.promo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.fhrs-badge { margin: 14px 0 0; }
.fhrs-badge img { display: block; width: 150px; height: auto; }
.hero-art > picture { display: contents; }