/* ==========================================================================
   TYPE — self-hosted, so the site's identity never depends on a third-party
   font host being reachable. Bespoke Serif and Satoshi are Indian Type Foundry
   faces (Fontshare, free for commercial use). Noto Serif Telugu is OFL,
   subset to only the glyphs this page actually sets.
   ========================================================================== */
@font-face{font-family:"Bespoke Serif";src:url(../fonts/bespoke-serif-roman.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Bespoke Serif";src:url(../fonts/bespoke-serif-italic.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/satoshi-roman.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/satoshi-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Anton";src:url(../fonts/anton.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Telugu";src:url(../fonts/noto-serif-telugu.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+200C-200D,U+25CC}

/* ==========================================================================
   Santhi's Kitchen — Frisco, TX
   Temple maroon · turmeric gold · sandalwood cream · leaf green.
   Traditional identity, modern cards and borders.
   ========================================================================== */

:root{
  --callbar-h:56px;   /* the fixed call/WhatsApp bar over the foot of a phone */
  --maroon:#8C1D2C;
  --maroon-dk:#5E0F1C;
  --maroon-lt:#B3374A;

  --gold:#D69A16;
  --gold-lt:#F0C44E;
  --gold-pale:#F7E6BE;
  --gold-ink:#8A5E08;   /* turmeric dark enough to read on cream */

  --green:#1F5C3D;
  --green-lt:#3C8A5E;

  --cream:#FDF6E6;
  --cream-2:#F7EAD0;
  --white:#FFFFFF;

  --ink:#3A2016;
  --ink-2:#63483A;
  --line:#E8D8B8;
  --line-2:#D2B98A;

  --ease:cubic-bezier(.22,.9,.26,1);
  --gutter:clamp(18px,5vw,72px);
  --head-h:76px;

  --display:"Bespoke Serif",Georgia,serif;
  --body:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --label:"Satoshi",-apple-system,sans-serif;
  --nav:"Anton","Satoshi",sans-serif;
  --telugu:"Noto Serif Telugu",serif;

  /* block-print dot field */
  --bagru:radial-gradient(circle,rgba(214,154,22,.16) 1.4px,transparent 1.5px);
}

*{box-sizing:border-box}
/* Every rem on the page is measured from here, not from body — raising body's
   own size moved almost nothing, because the menu, the headings and the labels
   are all set in rem. */
html{font-size:17.5px;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px)}
/* A phone holds the page a foot from the eye; a desktop screen sits at arm's
   length on a monitor twice the width, and the same type that reads on the phone
   is small there. The root grows with the window, and the menu grows on top of
   it. Below 1000px nothing changes. */
@media (min-width:1000px){html{font-size:18.5px}}
@media (min-width:1400px){html{font-size:19.5px}}
body{
  margin:0;color:var(--ink);font-family:var(--body);font-size:1.06rem;font-weight:400;line-height:1.7;
  letter-spacing:-.006em;
  background-color:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* The page is held against sideways drift, but with `clip` rather than
     `hidden`. `hidden` makes the body a scroll container, and a scroll
     container breaks `position:sticky` for everything inside it — on iOS the
     kitchens rail simply scrolled away and never came back, so a customer deep
     in one kitchen had no way to reach another. `clip` cuts the overflow off
     without becoming a scroller, and the rail sticks. `hidden` is left first
     for anything too old to know `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
button{font:inherit}
a{color:var(--maroon);text-decoration:none;transition:color .25s}
a:hover{color:var(--gold-ink)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--maroon-dk);line-height:1.06;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(2.85rem,6.4vw,5.1rem);font-weight:700;letter-spacing:-.022em;line-height:1.03}
h2{font-size:clamp(2.05rem,4.05vw,3.2rem);font-weight:700;letter-spacing:-.019em}
h3{font-size:clamp(1.4rem,1.95vw,1.8rem);font-weight:600;letter-spacing:-.016em}
h4{font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1.1rem}

.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}

/* ==========================================================================
   ORNAMENT — restrained
   ========================================================================== */
.tiles{height:1px;background:var(--line-2);position:relative}
.tiles::before{content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:96px;height:3px;background:var(--gold)}
.leafline{height:4px;background:linear-gradient(90deg,var(--maroon) 0 40%,var(--gold) 40% 72%,var(--green) 72% 100%)}

.label{
  display:block;font-family:var(--label);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);margin:0 0 1.15rem;
}
.sec-head.c .label,.band .label{position:relative;display:inline-block;padding:0 40px}
.sec-head.c .label::before,.sec-head.c .label::after,
.band .label::before,.band .label::after{
  content:"";position:absolute;top:50%;width:26px;height:1px;background:var(--gold);
}
.sec-head.c .label::before,.band .label::before{left:0}
.sec-head.c .label::after,.band .label::after{right:0}
.label .te{display:block;font-family:var(--telugu);font-size:1.06rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--gold-ink);margin-top:10px}
.label-dark{color:var(--ink-2)}

.framed{position:relative;padding:clamp(28px,4vw,52px);background:var(--white);border-radius:16px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 22px 50px -32px rgba(94,15,28,.38)}

.telugu{font-family:var(--telugu);color:var(--gold);line-height:1.6}
.lede{font-size:clamp(1.06rem,1.4vw,1.22rem);font-weight:400;line-height:1.62;color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-2)}
.sm{font-size:.9rem}
.c{text-align:center}
.mt0{margin-top:0}

section{padding:clamp(76px,9vw,140px) 0;position:relative}
.sec-head{max-width:1140px;margin:0 auto clamp(44px,5vw,72px);text-align:center}
.sec-head.c{text-align:center}
.sec-head p{color:var(--ink-2);margin:0 auto;max-width:62ch;font-size:1.08rem;font-weight:400;line-height:1.64}
/* block, not inline-block: the flanked label above is inline-block, so a short
   heading would otherwise ride up onto the same line as it */
.sec-head h2{position:relative;display:block;padding-bottom:20px}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:3px;background:var(--gold)}

.bg-cream{background-color:var(--cream-2)}
.bg-deep{background-color:var(--maroon-dk);background-image:var(--bagru);background-size:30px 30px;color:#F3DCC6}
.bg-deep h2,.bg-deep h3,.bg-deep h4{color:var(--white)}
.bg-deep .label{color:var(--gold-lt)}
.bg-deep .sec-head h2::after{background:var(--gold-lt)}
.bg-deep .lede,.bg-deep .sec-head p,.bg-deep .muted{color:#D9BCA4}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--label);font-size:.775rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:17px 34px;border:1px solid transparent;border-radius:999px;cursor:pointer;position:relative;
  transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-indigo{background:var(--maroon);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-indigo:hover{background:var(--maroon-dk);color:var(--white)}
.btn-turmeric{background:var(--gold);color:var(--maroon-dk);box-shadow:inset 0 0 0 1px rgba(94,15,28,.2)}
.btn-turmeric:hover{background:var(--gold-lt);color:var(--maroon-dk)}
.btn-deep{background:var(--green);color:var(--white)}
.btn-deep:hover{background:var(--green-lt);color:var(--white)}
.btn-out{border-color:var(--line-2);color:var(--maroon);background:transparent}
.btn-out:hover{border-color:var(--maroon);background:var(--maroon);color:var(--white)}
.btn-out-w{border-color:rgba(240,196,78,.6);color:var(--gold-lt);background:transparent}
.btn-out-w:hover{background:var(--gold);color:var(--maroon-dk);border-color:var(--gold)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btns.c{justify-content:center}

/* ==========================================================================
   CHROME
   ========================================================================== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s linear}

.status{display:inline-flex;align-items:center;gap:9px}
.status .dot{width:7px;height:7px;border-radius:50%;background:#9A7A66;flex:none;position:relative}
.status .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent}
.status.open .dot{background:#6FC08A}
.status.open .dot::after{border-color:rgba(111,192,138,.45)}
.status.soon .dot{background:var(--gold-lt)}
.status .clock{color:#E6CDB6;letter-spacing:.06em;font-weight:500}

.hdr{position:sticky;top:0;z-index:80;background:rgba(94,15,28,.96);backdrop-filter:blur(14px);border-bottom:2px solid var(--gold)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--head-h)}
.logo{display:flex;align-items:center;gap:14px;margin-left:clamp(8px,1.5vw,26px)}
.logo img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none;border:2px solid var(--gold)}
.logo b{display:block;font-family:var(--body);font-size:1.44rem;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--white)}
.logo small{
  display:block;font-family:var(--body);font-style:normal;font-weight:500;
  font-size:.84rem;letter-spacing:.005em;text-transform:none;line-height:1.25;
  color:var(--gold-lt);margin-top:4px;
}

.mainnav{display:flex;align-items:center;gap:20px}
.mainnav a{font-family:var(--label);font-size:14.8px;font-weight:600;letter-spacing:.035em;text-transform:uppercase;color:#F3DCC6;position:relative;padding:8px 0}
.mainnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;background:var(--gold);transition:left .3s var(--ease),right .3s var(--ease)}
.mainnav a:hover{color:var(--gold-lt)}
.mainnav a:hover::after,.mainnav a.on::after{left:0;right:0}
.hdr-cta{display:flex;align-items:center;gap:12px}
/* maroon on maroon would vanish, so the ordering button takes the gold */
.hdr-cta .btn{padding:12px 22px;font-size:12.8px;white-space:nowrap;background:var(--gold);color:var(--maroon-dk);box-shadow:inset 0 0 0 1px rgba(94,15,28,.2)}
.hdr-cta .btn:hover{background:var(--gold-lt);color:var(--maroon-dk)}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(240,196,78,.5);background:transparent;color:var(--gold-lt);font-size:1.2rem;cursor:pointer;border-radius:999px}
/* Anton on the eight top-level nav items only. Direct-child selectors keep the
   Menu dropdown's sub-links in the body face — Anton has one very heavy weight
   and would flatten a seven-item list. Anton is condensed, so the row fits at a
   larger size and wider tracking than the previous face allowed. */
.mainnav > a,.mainnav > .has-sub > a{font-family:var(--label);font-weight:700;font-size:16.2px;letter-spacing:.04em;white-space:nowrap}
/* Eight top-level items and an ordering button on one bar. Each step is the
   largest type that still leaves the button clear of the last link — measured,
   not guessed, because the bar was already overflowing at 1440 and the button
   was covering Reviews. The links never break: a wrapped nav item is worse than
   a smaller one. */
@media (max-width:1900px){.mainnav{gap:17px}.mainnav > a,.mainnav > .has-sub > a{font-size:14.8px;letter-spacing:.03em}}
/* The page gutters widen with the viewport, so 1600 is tighter across the bar
   than 1440 is — it needs its own step rather than sharing the one above. */
@media (max-width:1680px){.mainnav{gap:15px}.mainnav > a,.mainnav > .has-sub > a{font-size:14.2px}}
@media (max-width:1520px){.mainnav{gap:17px}.mainnav > a,.mainnav > .has-sub > a{font-size:14.6px}}
@media (max-width:1400px){.mainnav{gap:13px}.mainnav > a,.mainnav > .has-sub > a{font-size:13.8px;letter-spacing:.02em}}
@media (max-width:1280px){.mainnav{gap:10px}.mainnav > a,.mainnav > .has-sub > a{font-size:12.8px;letter-spacing:.01em}}
@media (max-width:1140px){.mainnav{gap:8px}.mainnav > a,.mainnav > .has-sub > a{font-size:12.2px;letter-spacing:0}}

/* ---- The nav sits over the hero photograph -------------------------------
   The hero splits 1fr / 2.25fr, so the photograph runs from 30.77vw to the
   right edge and its middle line falls at 65.38vw. The nav is centred on that
   line rather than on the header, which is why the header alone breaks out of
   the 1240px column — from inside it the nav could never reach that far right.

   It eases left only when it would otherwise reach the Order Now button:
   483px is the button (124) plus a 34px breath plus half a nav (325). Below
   about 1660px wide that clamp takes over and the nav stops short of the
   photo's centre, which is the honest limit of the space available. */
/* Only from 1360px up. Absolute positioning takes the nav out of the flow, and
   with it the flex layout's guarantee that the logo, nav and button cannot
   collide. The threshold is a function of the nav's width, so it moved when the
   face did: at 650px wide 1200 was clear, at 744px the nav overlapped the logo
   by 54px at 1200 and 26px at 1280. Below 1360 the header stays in normal flow,
   where overlap is impossible. */
@media (min-width:1360px){
  .hdr .wrap{width:calc(100% - var(--gutter)*2);max-width:none}
  .mainnav{
    position:absolute;top:0;height:var(--head-h);
    /* out of flow, so it must claim its natural width or the items wrap */
    width:max-content;
    /* Percentages, not vw: vw counts the scrollbar and the layout does not, so
       the vw version sat ~10px right of the photo on any browser showing one.
       These resolve against the header, which is the width the hero grid uses.
       512px is the measured Order Now (124) plus 16px of breath plus half the
       nav (372) — Satoshi sets the same eight items 94px wider than the
       condensed face did, so the guard has to grow with it. */
    left:min(65.38%, calc(100% - var(--gutter) - 512px));
    transform:translateX(-50%);
  }
}

.has-sub{position:relative;display:inline-flex;align-items:center}
.submenu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:236px;background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 28px 56px -28px rgba(94,15,28,.45);padding:8px 0;z-index:90;
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility .25s;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mainnav .sub-link{
  display:block;text-align:center;padding:12px 24px;
  font-family:var(--label);font-weight:700;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
/* A hidden sub-link has to be hidden by a rule at least as specific as the one
   that shows it. "a[hidden]{display:none}" further down is one class short of
   ".mainnav .sub-link{display:block}" and lost to it, so Sravana Masam Kitchen
   stood in the dropdown all through the month it was not being cooked — hidden
   in the markup, on the screen in fact. */
.mainnav .sub-link[hidden]{display:none}
.sub-link:hover{background:var(--cream-2);color:var(--maroon)}

/* ==========================================================================
   HERO
   ========================================================================== */
/* full-bleed hero: two equal halves meeting edge to edge, filling the screen
   under the header. No gutter, no gap, no rounded corners, no shadows. */
.hero{
  background-color:var(--cream);color:var(--ink);overflow:hidden;isolation:isolate;
  padding:0;text-align:center;
}
.hero .wrap{
  position:relative;z-index:1;
  width:100%;max-width:none;margin:0;padding:0;
}
.hero-grid{
  /* photo takes the larger share — a wider half also crops the landscape
     photograph far less than a square-ish one did */
  display:grid;grid-template-columns:1fr 2.25fr;gap:0;align-items:stretch;
  min-height:calc(100svh - var(--head-h));
}
.hero-shot{margin:0;min-height:0;order:2;position:relative}

/* Taken out of the flow so the hero's height comes from the panel beside it and
   never from the photograph's shape. Left in the flow, a tall picture sets the
   row height — a portrait photo made the hero half again as tall as the screen
   and pushed everything below it off the fold. */
.hero-shot > img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:0;box-shadow:none;
}
/* GANESH CHATURTHI ONLY — delete this block when the festival is over.

   A flag on the corner of the hero photograph rather than a panel in place of
   it. The photograph is what the front page is for; the festival is a thing
   worth pointing at from it, and pointing costs a corner rather than the whole
   frame. It carries its own link into Ganesha's Kitchen, so a customer who
   wants the laddus is one tap from the sizes and the number.

   Bottom left of the picture: bottom right is where the flag would sit over the
   thali itself, and left of the fold is where the eye already is coming off the
   panel beside it. */
.hero-flag{
  position:absolute;left:clamp(14px,1.7vw,30px);bottom:clamp(16px,4vh,54px);z-index:2;
  display:block;width:clamp(150px,16.5vw,242px);
  padding:clamp(6px,.55vw,10px);
  background:linear-gradient(150deg,#7A1220,#4E0A14);
  border:1px solid rgba(240,192,90,.6);border-radius:10px;
  text-decoration:none;overflow:hidden;
  /* Two slow movements, both cheap: the card rocks a little on its corner and a
     light crosses it every few seconds. Transform and opacity only — nothing
     that forces a repaint — because this runs for as long as the page is open.
     The rock is what catches the eye at the edge of vision; the gleam is what
     makes it read as something to tap rather than a sticker. */
  animation:flag-rock 4.4s ease-in-out infinite;
  transform-origin:left bottom;
  box-shadow:0 16px 38px -12px rgba(0,0,0,.8);
}
@keyframes flag-rock{
  0%,100%{transform:translateY(0)   rotate(0deg)}
  50%    {transform:translateY(-7px) rotate(-1.1deg)}
}
.hero-flag::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 38%, rgba(255,246,220,.42) 50%, rgba(255,255,255,0) 62%);
  transform:translateX(-130%);
  animation:flag-gleam 5.6s ease-in-out infinite;
}
@keyframes flag-gleam{
  0%,62%  {transform:translateX(-130%)}
  86%,100%{transform:translateX(130%)}
}
/* Hovering stops the movement and lifts it instead, so the card holds still
   under the pointer that is about to click it. */
.hero-flag:hover,.hero-flag:focus-visible{
  animation-play-state:paused;
  box-shadow:0 22px 48px -14px rgba(0,0,0,.85);
  border-color:rgba(240,192,90,.95);
}
.hero-flag:hover::after,.hero-flag:focus-visible::after{animation-play-state:paused}
.hero-flag img{
  display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  border-radius:5px;
}
.hero-flag-go{
  display:block;text-align:center;position:relative;z-index:1;
  padding:.55em .2em .15em;
  font-family:var(--label);font-size:clamp(8.5px,.68vw,11px);
  letter-spacing:.13em;text-transform:uppercase;color:#F5CE74;line-height:1.25;
}
.hero-flag-go::after{content:" \2192"}
/* GANESH CHATURTHI ONLY — on a laptop the right panel IS the flyer.

   The owner's word: the whole sheet, the photograph away until the festival is
   over, and the panel no wider than the flyer needs. So the right column is
   sized from the flyer rather than from a share of the page — the sheet is 2:3,
   the hero is the screen less the header, so the column is that height times
   two thirds, less a little for the bar under it. min() keeps it sane on a very
   tall window; the words beside it take whatever is left.

   Sized off the shape rather than guessed at a percentage, so it stays exactly
   as wide as the flyer at any window and never leaves a band of ground beside
   it.

   The photograph is hidden, not removed. One line back and the hero is what it
   was; nothing about it has been edited.

   No rock at this size — a full-height panel tilting reads as a fault — but the
   light still crosses it. */
@media (min-width:901px){
  /* No gaps: the panel is cut to the sheet rather than the sheet fitted into
     the panel. Its width is the height it has to work with — the screen, less
     the header, less the tap bar — multiplied by two thirds, which is the
     flyer's own shape. So the flyer fills its half corner to corner: nothing
     beside it, nothing above or below it, nothing cropped off it, and no
     scrolling to reach the phone number.

     What gives way for that is the exact half. A 2:3 sheet standing the full
     height of a laptop screen is about two fifths of its width, not one half,
     and half a screen can hold the whole sheet or be filled by it but not
     both. The left panel takes what is left, which is the only part of this
     the owner has not asked for by name. */
  /* min-width:0 on the words panel. A grid track of 1fr still refuses to go
     below its content's minimum, and the awards line is set nowrap, so its
     minimum was the whole 1100px line: the track stood at 1139 of a 1440
     window, the flyer's column was squeezed from 521 to 301, and the sheet ran
     off the right of the screen. The track takes its share now and the line is
     sized to the share. */
  .hero-panel{min-width:0}
  .hero-grid{
    --flagbar:3.1rem;
    --sheet-h:calc(100vh - var(--head-h) - var(--flagbar));
    grid-template-columns:1fr min(50vw,calc(var(--sheet-h) * 0.6667));
    align-items:stretch;align-content:stretch;
  }
  .hero-shot > img{display:none}
  .hero-shot{display:flex;flex-direction:column;align-self:stretch}
  /* Height stated, not inherited. height:100% asks the figure above it, the
     figure asks its grid row, and the row came back 37px short of the window —
     which is exactly the cream band that was showing under the panel. The
     window less the header is a number this can work out for itself, and it is
     the same number the column's width is derived from, so the two agree by
     construction. */
  .hero-flag{
    /* inset:auto is the whole fix for the gaps. As a corner flag this element
       is absolute at left:1.7vw bottom:4vh; made relative it kept those offsets
       and they became a shift — the panel sat 24px past the right edge of the
       window and 36px above the foot of the hero, which is precisely the band
       of cream that was showing under it and the sliver lost off the side. */
    position:relative;inset:auto;width:100%;flex:1 1 auto;overflow:hidden;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
    margin:0;padding:0;border:0;border-radius:0;
    background:#4E0A14;box-shadow:none;
    animation:none;transform:none;
  }
  /* It is a link, so it answers the cursor: the sheet lifts a little in
     brightness and the invitation goes to full gold. No movement on hover —
     the panel is the width of the column and a panel that shifts under the
     pointer is unsettling rather than inviting. */
  .hero-flag:hover,.hero-flag:focus-visible{transform:none;box-shadow:none}
  .hero-flag:hover img,.hero-flag:focus-visible img{filter:brightness(1.045) saturate(1.04)}
  .hero-flag:hover .hero-flag-go,.hero-flag:focus-visible .hero-flag-go{
    animation:none;color:#FFE9A6;background:#63091A;
  }

  /* Movement on the panel, for the eye coming onto the page.

     A light crosses the sheet over and over without stopping, the owner's
     word, four seconds corner to corner. It waited five seconds between passes
     to begin with, then crossed in nine; four is what the owner asked for
     having watched both. Constant rate, so it reads as a sweep rather than a
     flicker.

     It is wide and soft rather than a hard streak — 26% of the panel from edge
     to edge of the gradient — because the flyer beneath it is a photograph and
     a narrow bright band across a photograph looks like a scanning error. */
  .hero-flag::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    display:block;border-radius:0;
    background:linear-gradient(106deg,
      rgba(255,255,255,0)    34%,
      rgba(255,248,214,.20)  44%,
      rgba(255,252,236,.44)  50%,
      rgba(255,248,214,.20)  56%,
      rgba(255,255,255,0)    66%);
    transform:translate3d(-56%,0,0);
    /* linear, not eased: an eased sweep with no pause slows in the middle of
       the panel every time and the eye reads the slowing as a stutter.

       And the travel is 56% either way, not 118%. At 118% the band clears the
       panel completely at both ends and spends half of every cycle off it —
       continuous in the stylesheet and still a pause on the screen. The
       gradient's bright core sits at the middle of the layer, so 56% carries
       it from just off one edge to just off the other and it is on the sheet
       the whole time. */
    animation:hero-sheen 4s linear infinite;
  }
  @keyframes hero-sheen{
    from{transform:translate3d(-56%,0,0)}
    to  {transform:translate3d(56%,0,0)}
  }
  /* And the sheet itself breathes — a hundredth of its size over twenty
     seconds, which is not seen so much as felt. overflow:hidden on the panel
     is what keeps the growth from showing at the edges. */
  .hero-flag img{animation:hero-breathe 20s ease-in-out infinite;transform-origin:52% 46%}
  @keyframes hero-breathe{
    0%,100%{transform:scale(1)}
    50%    {transform:scale(1.012)}
  }
  /* The invitation warms and cools with it, so the two read as one thing. Held
     at twice the sweep rather than matched to it: at four seconds the bar
     pulses fast enough to nag, and at eight it breathes once for every two
     passes of the light and the two still keep time. */
  .hero-flag-go{animation:hero-invite 8s ease-in-out infinite}
  @keyframes hero-invite{
    0%,100%{color:#FFD24A;box-shadow:inset 0 2px 0 rgba(255,210,74,.5)}
    50%    {color:#FFE9A6;box-shadow:inset 0 2px 0 rgba(255,232,166,.95)}
  }
  /* A visitor who has asked for less movement gets none of it. The televisions
     are the exception to this and are keyed to ?still=1 instead; a person
     reading a website is not. */
  @media (prefers-reduced-motion:reduce){
    .hero-flag::after,.hero-flag img,.hero-flag-go{animation:none}
    .hero-flag::after{display:none}
  }
  /* Width and height are the same sum, so the box the image is given is
     already 2:3 and cover crops nothing. It is cover rather than fill because
     a rounding error of a pixel should crop a pixel, not stretch the sheet. */
  /* The sheet takes whatever height the row has left once the bar has its
     share, rather than a height worked out from the viewport. The worked-out
     one was 15px short of the row and left a cream band under the panel: the
     sum assumed a header of exactly --head-h and the rendered header is not
     always that. Taking what is left cannot be short of it.

     The column's width is still the viewport sum, so the box is 2:3 to within
     a pixel or two and cover crops that and nothing more. Cover rather than
     fill because a rounding error should cost a pixel, not stretch the sheet. */
  .hero-flag img{
    display:block;width:100%;flex:1 1 auto;min-height:0;height:auto;
    max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center;
    border-radius:0;box-shadow:none;
  }
  /* Read from a chair, not squinted at. It was set at nine to twelve pixels,
     which is small print on a bar that is the only invitation on this half of
     the page; it is half again as tall now, the letters are half again as
     large and heavier, and they are the flyer's own gold rather than a muted
     cream. The bar's height is in the sum the panel's width comes from, so
     making it taller narrows the sheet to suit and the fit still holds. */
  .hero-flag-go{
    flex:0 0 auto;height:var(--flagbar);
    display:flex;align-items:center;justify-content:center;
    padding:0 .5em;
    font-size:clamp(13px,1.12vw,18px);font-weight:800;letter-spacing:.13em;
    background:#4E0A14;color:#FFD24A;
    border-top:2px solid rgba(255,210,74,.5);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-flag,.hero-flag::after{animation:none}
  .hero-flag{transform:none}
}
/* GANESH CHATURTHI ONLY — on one column the flyer IS the picture.
   The owner's word: on a phone the festival sheet takes the whole of the hero
   and the thali steps aside until the festival is over. So the photograph is
   hidden rather than removed — one line back and it returns — and the flag
   comes out of the corner, into the flow, at full width.

   In the flow it also gives the figure its height, which the photograph used to
   do; hidden without that, the hero would collapse to nothing on a phone.

   The rock goes with the corner. A card tilting in the corner of a picture
   reads as a label to tap; the whole hero tilting reads as a page that is
   broken. The light still crosses it, which is the part that says "tap me". */
@media (max-width:900px){
  .hero-shot > img{display:none}
  .hero-flag{
    position:static;width:100%;
    margin:0;padding:0;border:0;border-radius:0;
    background:#4E0A14;box-shadow:none;
    animation:none;transform:none;
  }
  .hero-flag img{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:0}
  /* Bigger on the phone too, and the same gold. It is the only way off this
     screen into the sizes and the number, and it was set smaller than the body
     text underneath it. */
  .hero-flag-go{
    padding:1em .4em 1.05em;
    font-size:clamp(13px,3.9vw,17px);font-weight:800;letter-spacing:.13em;
    background:#4E0A14;color:#FFD24A;
    border-top:2px solid rgba(255,210,74,.5);
  }
  .hero-flag:hover,.hero-flag:focus-visible{box-shadow:none;transform:none}
}

.hero-panel{
  order:1;position:relative;background:var(--cream);border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,2.4vw,42px) clamp(22px,2.4vw,44px);
}
.hero-body{flex:1;display:flex;flex-direction:column;justify-content:center}

/* The hours, address and ordering number, which used to run in a bar across
   the top of the page. On the floor of the panel they read as the shop's own
   details rather than as site furniture, and the opening screen ends on how to
   reach the kitchen. */
.hero-foot{
  margin-top:clamp(20px,2.4vw,34px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid var(--line-2);
  /* The hours, the address and the number to ring: the four things a customer
     came to the page for, so they are set to be read at a glance rather than as
     a footnote to the hero. */
  /* Was clamp(.88rem,1vw,1rem). At 14-16px in a panel about 375px wide the
     block broke up: the status split as "Open now - closes / 9:30 PM" with the
     clock stranded under it, and the address and the number wrapped against
     each other. Set a step down, every line holds at every width the panel
     takes. */
  /* Stepped up with the rest of the panel. The old size was fitted to a panel
     about 375px wide, where these four lines broke against each other; the left
     panel is more than twice that now and the reason for holding them small has
     gone with it. */
  font-family:var(--label);font-size:clamp(.95rem,1.06vw,1.16rem);
  font-weight:600;color:var(--ink-2);text-align:center;
}
/* The state of the kitchen on one line: the light, whether it is open, and the
   time in Frisco after it. flex-wrap keeps it from ever forcing the panel
   wider; the dot must not be allowed to wrap away from the words. */
.hero-foot .status{
  justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:7px;
}
.hero-foot .txt{color:var(--maroon);font-weight:700}
.hero-foot .clock{font-size:.94em;white-space:nowrap}
/* No bullet before the clock. It separated the two nicely on a wide panel, but
   the status wraps at around 1100 and the bullet went with the clock to the
   start of the next line, opening it with a stranded dot. The gap does the job
   at every width and never leaves anything hanging. */
.hero-foot .clock{margin-left:4px}
/* The address and the number each take their own line rather than sharing one
   until they collide: side by side they need about 380px and the panel has
   375, so the old flex-wrap put them on two lines anyway — but only sometimes,
   and the block changed shape as the window moved. */
.hero-where{display:grid;justify-items:center;gap:3px;margin:0}
.hero-where a{white-space:nowrap}
/* the hours are the one line here the status has already given, so they sit
   back a step rather than shouting alongside it */
.hero-hours{margin:6px 0 0;font-size:.94em;opacity:.85}
.hero-foot a{color:var(--maroon);font-weight:700;border-bottom:1px solid var(--line-2)}
.hero-foot .clock{color:var(--ink-2)}
.hero-foot a:hover{color:var(--maroon-dk);border-bottom-color:var(--maroon)}
/* one column on tablets and phones, photo first, height back to content */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-shot{order:0}
  .hero-panel{order:1}
  /* The photograph takes the whole screen below the header, and the flag comes
     out from on top of it to sit underneath as a band of its own. Back in the
     flow, so the figure is the picture plus the band rather than a fixed box —
     and cover, not fill, because fill stretches whatever photograph is in the
     slot to a named ratio and distorts any picture that is not already it. */
  .hero-shot{height:auto}
  /* 40% of the screen for the picture and 20% for the band under it. What is
     left shows the top of the panel, so a visitor can see there is more page
     below rather than meeting what looks like the end of it.

     The call bar is fixed over the foot of the screen, so the height these are
     measured against is the viewport less the header and that bar — without
     allowing for it the band's button sits behind the CALL button. */
  .hero-shot > img{position:static;height:auto;object-fit:cover;aspect-ratio:4/3}
  .hero-panel{padding:clamp(30px,7vw,52px) clamp(22px,6vw,40px)}
}
.hero .telugu{font-size:clamp(1.35rem,2.6vw,2.1rem);margin:0 0 .55rem;color:var(--maroon)}
.hero .translit{font-family:var(--label);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin:0 0 1.5rem}
/* Air between the three things in this panel. They were set at a third of a
   line apart, which read as one block of type with a rule of white through it;
   the owner wants the name, the sentence and the two buttons to stand as three
   separate things. Both gaps are in vh as well as rem, so a short window closes
   them rather than pushing the buttons under the fold. */
.hero h1{color:var(--maroon-dk);margin-bottom:clamp(1.1rem,2.5vh,2.3rem)}
.hero h1 em{font-style:italic;font-weight:500;color:var(--maroon)}
.hero .lede{color:var(--ink);margin:0 auto clamp(1.6rem,3.4vh,3rem);text-wrap:pretty}
.hero .btns{justify-content:center}
/* THE PROOF BLOCK — the two Restaurant Guru years and the three promises, in
   one maroon block at the foot of the panel, closing the panel under the
   address rather than sandwiching the address between two separate maroon
   boxes.

   Inside it, four claims in two columns of two: a gold token and the words it
   stands for. The awards stand on the left, the promises on the right.

   It was five in one column until 2026-09-05, when the owner took the "100+
   Catering Items" line off and asked for the rest paired up. Four in a column
   is a list to be read down; two beside two is a shape to be taken in at a
   glance, which is all this block is for. The claim itself is not lost — the
   catering section says "more than 100 items" twice further down the page, and
   the page description still carries it.

   The split falls where the markup already fell. Two of these are an outside
   body's judgement and two are the kitchen's own word, and they were always
   two lists sharing a box; with the odd fifth row gone the grouping and the
   geometry finally agree, so nothing had to be regrouped to make the columns
   even.

   Each column keeps its own spine — tokens ranged right against their own
   labels — because a single spine across both would put a gap in the middle of
   the left column wide enough to read as a fourth column.

   The photographed certificates used to open the first two rows. They are off
   this block now and still on the page at full size down where the reviews
   are, which is where a visitor who wants to examine the proof will look. With
   them gone every row is a single line of type, so all four take the same
   gap. */
.hero-proof{
  background:var(--maroon);color:var(--cream);border-radius:14px;
  margin-top:clamp(14px,1.6vw,20px);
  padding:clamp(12px,1.3vw,16px) clamp(8px,.8vw,11px);
  box-shadow:0 1px 2px rgba(94,15,28,.10),0 20px 40px -30px rgba(94,15,28,.7);
  --proof-fs:clamp(10.6px,.86vw,12.6px);
}

/* One grid for all four claims, not a grid of two grids.

   Two independent lists side by side would each size their own rows, and a
   label that wrapped on the left would step its neighbour on the right out of
   line — the block reads as a 2x2 only while the two rows are actually rows.
   So all eight halves are items of this one table: four columns, two rows, and
   every claim placed into its own cell.

   The two 1fr rails either side are what centres the group. The words tracks
   can grow to the length of the longest label but no further, so whatever they
   do not use is left over and the rails take half each — while the labels fit,
   the block sits in the middle of the panel like everything above it, and when
   they do not the rails close to nothing and the labels wrap in place.

   The words tracks are floored at min-content — the longest single word — and
   not at nothing. Left free to shrink they were still shrinking on a 320px
   phone, past the width of "RECOMMENDED", and overflow-wrap then did as it was
   told and split it: "RECOMMENDE / D KITCHENS IN FRISCO". A floor there costs
   the rails a little room they were not using and keeps every word whole.

   width:fit-content with auto margins is the obvious way to centre a table and
   it cannot be used here. The panel is a column of a grid whose track is sized
   to its contents, and a fit-content box asked for its contribution to that
   sizing answers with its max-content — so the whole hero widened to fit the
   longest promise on one line and the block ran out over the edge of the
   screen on a phone. */
.proof-table{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto minmax(min-content,max-content)
    auto minmax(min-content,max-content)
    minmax(0,1fr);
  align-items:start;
  column-gap:clamp(6px,.7vw,9px);
  row-gap:clamp(7px,.8vw,11px);

  font-family:var(--label);text-transform:uppercase;
  font-size:var(--proof-fs);letter-spacing:.012em;line-height:1.3;
}

/* The lists carry the grouping and no layout of their own; display:contents
   hands their halves straight to the table above. */
.hero-awards,.hero-awards li,.promises,.promises li{display:contents}
.hero-awards,.promises{list-style:none;margin:0;padding:0}

/* Awards fill the left pair of columns, promises the right. The gap between the
   two pairs is wider than the gap inside one, or the left column's labels and
   the right column's tokens read as one run of words. */
.hero-awards b{grid-column:2}
.hero-awards span{grid-column:3}
.promises b{grid-column:4;margin-left:clamp(8px,1vw,15px)}
.promises span{grid-column:5}

/* Both claims of a row sit on that row, so the two columns stay abreast however
   either one wraps. */
.hero-awards li:nth-child(1) b,.hero-awards li:nth-child(1) span,
.promises li:nth-child(1) b,.promises li:nth-child(1) span{grid-row:1}
.hero-awards li:nth-child(2) b,.hero-awards li:nth-child(2) span,
.promises li:nth-child(2) b,.promises li:nth-child(2) span{grid-row:2}

/* Tokens sit on the first line of their label, not in the middle of it. The
   owner asked for it on 2026-09-05 looking at a phone, where the labels take
   two and three lines: a "2026" floating halfway down a three-line award had
   drifted away from the word it belongs to and read as if it were pointing at
   the middle line. align-items:start on the table tops every cell out, and
   token and label share a font-size and a line-height, so their first lines
   land level. It is done at every width rather than only on the phone — the
   desktop panel wraps to two and three lines too, and the block should not be
   one shape on a phone and another on a laptop. */
/* The token columns: the year, or the number. Ranged right so the two tokens of
   a column end on one line whatever their width — they are all four characters,
   but the type is proportional and "100%" is not the width of "2024". */
.hero-awards b,.promises b{
  justify-self:end;text-align:right;
  color:var(--gold-lt);font-weight:800;letter-spacing:.016em;white-space:nowrap;
}
/* The words column, ranged left and ranged left explicitly: the panel around
   this block centres its type, and a label that wrapped came back centred on
   itself and stepped out of the column the unwrapped ones share. Stretched to
   the column rather than shrunk to its text, so the wrap happens at the
   column's edge. */
.hero-awards span,.promises span{
  text-align:left;
  font-weight:600;color:var(--cream);
  min-width:0;overflow-wrap:break-word;text-wrap:pretty;
}

/* All four on one line, the owner's word — but only where there is a line to
   put them on, and 1400 is where that begins.

   Measured, not guessed. The line wants about 110 characters, and the words
   panel is the window less the flyer's column, which is fixed by its own
   height. On a 1024 laptop that leaves the panel 513px and the line would need
   6.6px type; at 1280 it needs 9.7px and the last word came out clipped
   mid-syllable, "HOME STYLE & HEALT". At 1440 it fits at 11.5px with room
   over, which is where it starts being a line worth setting. 1360 was tried
   first and the line overran its block by fourteen pixels there.

   So below 1400 the two-by-two stands — between 1000 and 1360 because one line
   there is too small to read, and on a phone because no phone holds 110
   characters at any size at all. */
@media (min-width:1000px){
  /* Floored at 9px. The vw alone put 8.4px on a 1024 laptop, which is small
     print for a line that has to be read across a room's width of screen; the
     floor still fits — measured at 1024 the strip is 724 of the panel's 748. */
  /* Level with the bar under the flyer, so the two read as one band across the
     foot of the page rather than as two blocks that happen to be near each
     other. Same height, same bottom edge: the block takes the flag bar's own
     height variable, and its bottom margin cancels the panel's bottom padding
     so it finishes where the hero finishes, as the flag bar does. The lower
     corners square off for the same reason — a rounded corner sitting on the
     edge of the page reads as a card that has slipped down, not as a bar. */
  .hero-proof{
    /* Fitted to the band, which is only as wide as the panel it crosses. At
       .80vw the line wanted 907px of a 774px band on a 1280 laptop and the
       last promise ran under the flyer, where the flyer's own panel paints
       over it — so it read as "HOME STYLE & HEALT" with maroon to spare
       beside it. Nothing in the DOM reported that: the grid box did not
       overflow and no cell was clipped, because the text was covered rather
       than cut. Summing the cells' own widths against the band is the test
       that catches it. */
    --proof-fs:clamp(9px,.70vw,14px);
    /* Out to both edges of the panel, not partway. The pull has to be the
       panel's own side padding — 34.6px on a 1440 screen, 44 on a 1920 — and
       it was 26, which left the band 8px short of the page on the left and 8px
       short of the flyer's bar on the right. Two bars with a sliver of cream
       between them are not one band. */
    margin-inline:calc(-1 * clamp(22px,2.4vw,44px));
    height:var(--flagbar);
    display:flex;align-items:center;
    padding-block:0;
    margin-bottom:calc(-1 * clamp(24px,2.4vw,42px));
    /* Square, like the bar it meets. A rounded corner where the two touch
       leaves a notch of cream at the join. */
    border-radius:0;box-shadow:none;
    /* The flyer's maroon and the flyer's gold rule, not the panel's lighter
       maroon. Matching them is the one part of this the owner did not ask for
       by name, but two touching bars in two different maroons read as a
       mistake rather than as a band. */
    background:#4E0A14;
    border-top:2px solid rgba(255,210,74,.5);
  }
  .hero-proof .proof-table{width:100%}

}

/* Where one line is possible, measured at each width rather than assumed. The
   band is only as wide as the panel it crosses, and the panel is the window
   less the flyer's column. It clears at 1400 (869 of 869) and stays clear
   upward — 909 at 1440, 1389 at 1920. It does not clear at 1360, where the
   line overran by fourteen pixels, nor at 1280, where it wants 839 of an
   available 687 and the last word came out as "HOME STYLE & HEALT".

   So below 1400 the four go back to two by two, inside the same band, at the
   same height, still level with the bar beside them. */
@media (min-width:1360px){
  .proof-table{
    grid-template-columns:
      minmax(0,1fr)
      auto max-content auto max-content
      auto max-content auto max-content
      minmax(0,1fr);
    row-gap:0;
  }
  .hero-awards li:nth-child(1) b{grid-column:2}
  .hero-awards li:nth-child(1) span{grid-column:3}
  .hero-awards li:nth-child(2) b{grid-column:4;margin-left:clamp(7px,.65vw,12px)}
  .hero-awards li:nth-child(2) span{grid-column:5}
  .promises li:nth-child(1) b{grid-column:6;margin-left:clamp(7px,.65vw,12px)}
  .promises li:nth-child(1) span{grid-column:7}
  .promises li:nth-child(2) b{grid-column:8;margin-left:clamp(7px,.65vw,12px)}
  .promises li:nth-child(2) span{grid-column:9}
  /* Matched on nth-child, like the two-row rules above them. Written as
     ".hero-awards li b" the first time, which is a weaker selector than the
     ".hero-awards li:nth-child(2) b" it had to overturn — the columns moved
     and the rows did not, and the four pairs came out staggered down two
     lines instead of standing on one. */
  .hero-awards li:nth-child(1) b,.hero-awards li:nth-child(1) span,
  .hero-awards li:nth-child(2) b,.hero-awards li:nth-child(2) span,
  .promises li:nth-child(1) b,.promises li:nth-child(1) span,
  .promises li:nth-child(2) b,.promises li:nth-child(2) span{grid-row:1}
  .hero-awards span,.promises span{white-space:nowrap}
}

/* Below 1000 the panel is the whole width of the page rather than a column
   beside the photograph, so the room is back and the type goes with it — the vw
   floor above is fitted to the narrow column and would leave 9px type on a
   phone that has width to spare. Measured against the screen here, not the
   panel, for the same reason. */
@media (max-width:999px){
  .hero-proof{--proof-fs:clamp(10px,3.2vw,15px)}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* Five steps, laid out so none is ever left stranded on a row of its own:
   auto-fit put four up and one alone below at every desktop width. The day is
   a sequence, so it reads as one row where there is room, and as 3+2 or 2+2+1
   where there is not. */
.today{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.2vw,32px)}
@media (max-width:1299px){.today{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}}
@media (max-width:760px){.today{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.today{grid-template-columns:1fr}}
.today > div{position:relative;text-align:center;padding:28px clamp(18px,1.6vw,26px) 26px;background:var(--white);border-radius:14px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 18px 40px -26px rgba(94,15,28,.35)}
.today > div.now{box-shadow:0 0 0 2px var(--maroon),0 18px 40px -24px rgba(94,15,28,.45)}
.today > div.now::after{
  content:"NOW";position:absolute;top:-11px;left:26px;
  background:var(--maroon);color:var(--white);font-family:var(--label);font-size:.56rem;
  letter-spacing:.24em;padding:3px 12px;font-weight:600;border-radius:999px;
}
.today time{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.026em;font-size:clamp(1.5rem,1.95vw,2rem);color:var(--gold-ink);line-height:1;margin-bottom:.34em}
.today h3{font-family:var(--body);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.5em}
.today p{color:var(--ink-2);font-size:.95rem;font-weight:400;line-height:1.62;margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.split.solo{grid-template-columns:1fr;max-width:860px;margin-inline:auto;text-align:center}
.split.solo .lede{margin-inline:auto}
.split.solo .btns{justify-content:center}
blockquote.pull{
  margin:36px auto 0;padding:0 0 0 30px;position:relative;max-width:52ch;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1.3;letter-spacing:-.018em;color:var(--maroon-dk);border-left:3px solid var(--gold);text-align:left;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,44px)}
.dish{position:relative;padding:36px 30px;background:var(--white);border-radius:14px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 18px 40px -26px rgba(94,15,28,.35)}
.dish h3{margin-bottom:.4em}
.dish p{color:var(--ink-2);font-size:.95rem;font-weight:400;line-height:1.64;margin:0}
.dish .label{margin-bottom:.7rem}

/* ==========================================================================
   MENU
   ========================================================================== */
.notice{
  position:relative;background:var(--white);border-left:3px solid var(--gold);border-radius:0 14px 14px 0;
  padding:clamp(20px,2.6vw,28px) clamp(24px,3vw,32px);margin:0 auto clamp(38px,4vw,58px);
  font-size:1rem;font-weight:400;line-height:1.66;color:var(--ink-2);max-width:78ch;
  box-shadow:0 1px 2px rgba(94,15,28,.04),0 14px 34px -26px rgba(94,15,28,.3);
}
.notice b{color:var(--maroon);font-weight:600}

.searchbar{max-width:480px;margin:0 auto clamp(30px,3.4vw,44px)}
.searchbar input{
  width:100%;padding:16px 24px;border:1px solid var(--line-2);border-radius:999px;background:var(--white);
  font:inherit;font-size:1rem;color:var(--maroon-dk);text-align:center;
}
.searchbar input:focus{outline:none;border-color:var(--gold)}
.searchbar input::placeholder{color:var(--ink-2)}
.search-count{font-family:var(--label);font-size:.7rem;letter-spacing:.12em;color:var(--ink-2);margin:12px 0 0;min-height:1.2em;text-align:center}

/* ==========================================================================
   THE KITCHENS — one row across the top
   Nine kitchens on one line — eight tabs and the catering link, which is one of
   them to a reader whatever it is to the markup. At eight columns the ninth
   stood alone on a second row and read as an afterthought.
   Each name breaks over two lines inside its own
   cell rather than the row wrapping. Equal columns, so the row reads as one
   band of choices; four then two as the window narrows, which keeps the rows
   even instead of stranding a kitchen on its own.
   ========================================================================== */
.menu-layout{display:block}

.kitchens-head{
  position:relative;display:block;width:max-content;margin:0 auto 12px;padding:0 30px;
  font-family:var(--label);font-size:.67rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);text-align:center;
}
.kitchens-head::before,.kitchens-head::after{
  content:"";position:absolute;top:50%;width:20px;height:1px;background:var(--gold);
}
.kitchens-head::before{left:0}
.kitchens-head::after{right:0}

/* A dark band, so the row of kitchens reads as navigation rather than as more
   of the page, and echoes the header it sits below. */
.tabrail{
  position:sticky;top:var(--head-h);z-index:60;
  background:var(--maroon-dk);background-image:var(--bagru);background-size:30px 30px;
  border-radius:14px;padding:16px 14px 14px;
  margin-bottom:clamp(30px,3.4vw,48px);
  box-shadow:0 10px 26px -18px rgba(94,15,28,.55);
}
/* Four across, two rows — not nine across, one. Measured: nine equal columns
   leave 98px a pill at the narrowest desktop the layout uses, and "Non
   Vegetarian" crosses 98px only at 9.5px type, which is not a size anyone reads
   a control at. Four across doubles the pill and the type with it.

   Nine columns also stopped dividing evenly the moment a kitchen was stood
   down: eight pills in nine columns left one standing empty at the end of the
   row. Eight over four is two full rows and nothing left over. */
.kitchens{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  border:0;background:none;box-shadow:none;padding:0;
}
.tabs{display:contents}
/* All eight on one row, where one row can be read. Pills take the width of
   their own name rather than an eighth of the bar each: measured at 1280px,
   eight equal columns carry the longest name only at 12px, where content-sized
   pills carry it at 17.8px. Equal columns are ruled by the longest name and
   spend that width eight times over; these spend it once.

   They still fill the bar — each grows into what is left over — so the row is a
   solid band, not eight pills adrift in it.

   Below 1200 the row cannot hold the type: it falls back to the four-column
   block underneath, which is the same eight kitchens two rows deep. */
/* 1260, not 1280. A 1280 window lays out at about 1265 once the scrollbar has
   its share, so a query written at 1280 misses the laptop it was written for. */
@media (min-width:1260px){
  .kitchens{display:flex;flex-wrap:nowrap;gap:8px}
  .tab{flex:1 1 auto;min-width:0;padding:12px 10px;font-size:.95rem}
}
/* Measured: four columns carry the longest name down to 820px and "Non
   Vegetarian" starts to run over its pill by 760. Three below 800, then. */
@media (max-width:800px){
  .kitchens{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:64px;padding:12px 8px;cursor:pointer;
  /* The name holds one line and "Kitchen" takes the next, so every pill is two
     lines exactly. Left to wrap, "Sravana Masam" and "Non Vegetarian" broke
     into three and stood taller than the six beside them. */
  white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(240,196,78,.34);border-radius:11px;
  color:#EBD2BC;text-decoration:none;
  font-family:var(--label);font-size:.84rem;font-weight:600;
  letter-spacing:.045em;text-transform:uppercase;line-height:1.26;
  transition:color .25s,background .3s var(--ease),border-color .25s;
}
/* 'Kitchen' takes its own line in all eight, so the row is one shape repeated
   rather than a mix of one-line and two-line names. */
.tab .kw{display:block;font-weight:500;opacity:.72}
.tab:hover{color:var(--white);border-color:var(--gold);background:rgba(240,196,78,.16)}
.tab[aria-selected="true"]{
  background:var(--gold);color:var(--maroon-dk);border-color:var(--gold);
}
.tab[aria-selected="true"] .kw{opacity:.85;font-weight:600}


/* On a phone the whole rail shows at once — all eight kitchens, no sideways
   scrolling to find the one you want. Measured at a 390px screen: two columns
   carry the longest name at up to 16px, three columns only at 10px and four at
   7px, so two columns is the only one of them a person actually reads.

   Two columns of eight is a 318px block, and that is exactly why the rail stops
   being sticky here. Stuck to the top it would spend two fifths of the screen
   before a single dish is read; sitting at the head of the menu it costs
   nothing, because it scrolls away as the reader goes down.

   Nothing is lost by letting it go. Every kitchen ends with "Go to another
   kitchen", which is where a reader who has read to the bottom switches, and
   the bar across the foot of the screen keeps All Kitchens one tap away the
   whole time. */
@media (max-width:640px){
  .tabrail{position:static;padding:12px 12px 13px}
  .kitchens-head{margin-bottom:10px}
  .kitchens{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .tab{min-height:56px;padding:10px 8px;font-size:.88rem;line-height:1.26}
}

.panel[hidden]{display:none}

/* ---------- the foot of a kitchen, and the one-bar rule ----------
   A kitchen ends with the others named, so a reader who has read to the bottom
   chooses the next one there rather than being carried into the rest of the
   page.

   But only ever one bar of kitchens on screen. The rail rides down the kitchen
   as it always has; the moment this panel comes into view santhi.js tucks the
   rail away and this takes over, and scrolling back up brings the rail back.
   Two of them at once was reported, rightly, as the same menu appearing twice.

   Hidden by visibility rather than display, so the rail keeps its place in the
   flow and tucking it cannot shift the page under the reader's thumb. */
.tabrail{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.tabrail.tucked{
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.tabrail{transition:none}}

.kitchen-foot{
  margin:clamp(34px,4vw,56px) 0 0;
  background:var(--maroon-dk);background-image:var(--bagru);background-size:30px 30px;
  border-radius:14px;padding:16px 14px 14px;
  box-shadow:0 10px 26px -18px rgba(94,15,28,.55);
}
.kitchen-foot-h{
  position:relative;display:block;width:max-content;margin:0 auto 12px;padding:0 30px;
  font-family:var(--label);font-size:.67rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);text-align:center;
}
.kitchen-foot-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
/* The rail's own button, minus the selected state — nothing in here is the
   kitchen you are already in. Its name over the word "Kitchen", as the rail
   sets it. */
.kitchen-foot-go{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:64px;padding:12px 8px;cursor:pointer;
  white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(240,196,78,.34);border-radius:11px;
  color:#EBD2BC;text-decoration:none;
  font-family:var(--label);font-size:.84rem;font-weight:600;
  letter-spacing:.045em;text-transform:uppercase;line-height:1.26;
  transition:color .25s,background .3s var(--ease),border-color .25s;
}
.kitchen-foot-go .kw{display:block;font-weight:500;opacity:.72}
.kitchen-foot-go:hover,.kitchen-foot-go:focus-visible{
  color:var(--white);border-color:var(--gold);background:rgba(240,196,78,.16);
}
@media (max-width:1100px){
  .kitchen-foot-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .kitchen-foot-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .kitchen-foot-go{font-size:.74rem;min-height:56px}
}

/* A rail button or nav link can be taken out of service without deleting it —
   used while the Festival Kitchen is stood down for Sravana Masam. .tab sets
   display:flex, which would otherwise beat the hidden attribute. */
.tab[hidden],a[hidden]{display:none}
.menu-sec{margin-bottom:clamp(48px,5vw,78px)}
.menu-sec:last-child{margin-bottom:0}
/* Square plate on the left, everything it is about on the right. Ranged left,
   because a heading, a note and a count stacked against a square read as one
   block beside it, where centring them would leave three different centre
   lines next to a hard left edge. */
.menu-sec > header{
  display:flex;flex-direction:row;align-items:center;text-align:left;
  gap:clamp(16px,1.8vw,26px);margin-bottom:clamp(24px,2.8vw,36px);
  justify-content:center;
}
.menu-sec > header > div{flex:0 1 auto;min-width:0}
.menu-sec .thumb{
  width:clamp(84px,8.5vw,124px);aspect-ratio:1;flex:none;overflow:hidden;border-radius:12px;
  background:var(--cream-2);position:relative;box-shadow:0 0 0 1px var(--line-2);
}
.menu-sec .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.menu-sec:hover .thumb img{transform:scale(1.08)}
.menu-sec h3{margin:0 0 .5em;display:block;position:relative;padding-bottom:13px;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.12}
.menu-sec h3::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:2px;background:var(--gold)}
.menu-sec .note-line{display:block;font-family:var(--label);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);font-weight:600;margin:0}
.menu-sec .cnt{
  display:block;margin:8px 0 0;
  font-family:var(--label);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;
}
@media (max-width:560px){.menu-sec > header{gap:14px}}

/* Festival reservation panel. The only place on the menu that asks the reader
   to do something, so it gets the deep ground, the block-print field and the
   double gold rule a wedding invitation is bordered with. */
.reserve{
  position:relative;max-width:64ch;text-align:center;
  margin:clamp(38px,4.4vw,58px) auto 0;
  padding:clamp(32px,4vw,46px) clamp(28px,4vw,50px);
  color:#F3DCC6;border-radius:16px;
  background-color:var(--maroon-dk);
  background-image:var(--bagru);
  background-size:30px 30px;
  box-shadow:0 1px 2px rgba(94,15,28,.06),0 24px 54px -34px rgba(94,15,28,.5);
}
.reserve::before{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(240,196,78,.4);border-radius:9px;
}
.reserve-label{
  position:relative;display:inline-block;padding:0 46px;margin:0 0 15px;
  font-family:var(--label);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);
}
.reserve-label::before,.reserve-label::after{
  content:"";position:absolute;top:.56em;width:32px;height:1px;background:var(--gold);
}
.reserve-label::before{left:0}
.reserve-label::after{right:0}
.reserve-label .te{
  display:block;margin-top:9px;font-family:var(--telugu);font-size:1.02rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--gold-lt);
}
.reserve p{margin:0;font-size:1.04rem;line-height:1.68;color:#EBD2BC}
.reserve .tel{
  font-family:var(--label);font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:var(--gold-lt);border-bottom:1px solid rgba(240,196,78,.5);
}
.reserve .tel:hover{color:var(--white);border-bottom-color:var(--white)}

.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 clamp(30px,4vw,64px)}
.items li{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px dotted var(--line-2);transition:background .25s}
.items li:hover{background:rgba(214,154,22,.07)}
.items .n{font-weight:500;font-size:1.14rem;letter-spacing:-.008em;color:var(--maroon-dk)}
.items .n em{display:block;font-style:normal;font-weight:400;font-size:.97rem;color:var(--ink-2);margin-top:3px}
/* The Hindi name above the English one, on its own line. Devanagari is not in
   any face this site loads, so the stack names the ones the common desktops
   and phones ship with and lets the body font take the roman half — without
   that it falls back to whatever the browser has and sits a size out from the
   line beneath it. */
.items .n em .hi{
  display:block;color:var(--maroon);font-weight:600;
  font-family:var(--body),"Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",
              "Mangal",system-ui,sans-serif;
}
.items .fill{flex:1;min-width:14px;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.items .p{font-family:var(--body);font-weight:600;font-size:1.08rem;letter-spacing:-.008em;color:var(--maroon);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Each dish name links to its own page in the Clover store. A menu is a menu
   and not a page of links, so the name keeps its own colour and shows no rule
   until the row is under the pointer or the name is tabbed to. */
.items .n .ord{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.items li:hover .n .ord,.items .n .ord:focus-visible{border-bottom-color:rgba(140,26,45,.38)}
.items .n .ord:focus-visible{outline:none}
/* the menu on a desktop screen */
@media (min-width:1000px){
  .items .n{font-size:1.14rem}
  .items .n em{font-size:.96rem}
  .items .p{font-size:1.06rem}
  .items li{padding:15px 0}
  .plain li{font-size:1.06rem}
  .tag{font-size:.64rem}
}
.tag{display:inline-block;margin-left:8px;padding:3px 9px;vertical-align:middle;border-radius:999px;font-family:var(--label);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--gold-pale);color:#8A6412}
.tag.g{background:#DFEBD6;color:var(--green)}
.tag.r{background:#F6DCDF;color:var(--maroon)}
.tag.t{background:#F0E2C4;color:#8A6412}

/* ==========================================================================
   PACKS · BAND · CATERING
   ========================================================================== */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(24px,3vw,40px)}
.pack{position:relative;display:flex;flex-direction:column;padding:38px 32px;background:rgba(255,255,255,.06);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(240,196,78,.3)}
.pack .serves{font-family:var(--label);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);font-weight:600}
.pack h3{margin:.6em 0 .1em;color:var(--white)}
.pack .price{display:block;font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(2.9rem,4.2vw,3.9rem);line-height:1;color:var(--gold-lt);margin:0 0 .45em}
.pack ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.pack ul li{padding:8px 0;border-bottom:1px dotted rgba(240,196,78,.28);font-size:.94rem}
.pack ul li:last-child{border-bottom:none}
.pack .btn{align-self:flex-start}

.band{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;min-height:min(64vh,560px);padding:clamp(80px,10vw,140px) 0;text-align:center}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(94,15,28,.88),rgba(58,8,17,.93))}
.band .wrap{color:#EBD2BC;max-width:960px}
.band h2{color:var(--white);margin-inline:auto}
.band p{max-width:52ch;margin-inline:auto;color:#D9BCA4}
.band .label{color:var(--gold-lt)}
.band .btns{justify-content:center}

.trays{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,2.4vw,32px);margin-bottom:clamp(44px,5vw,70px)}
.trays > div{position:relative;padding:28px 24px;background:var(--white);border-radius:14px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 14px 34px -24px rgba(94,15,28,.3)}
.trays b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.018em;color:var(--maroon-dk)}
.trays span{font-family:var(--label);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

.acc{columns:2;column-gap:clamp(30px,4vw,64px)}
@media (max-width:860px){.acc{columns:1}}
details.cat{break-inside:avoid;background:var(--white);border-radius:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(94,15,28,.04),0 12px 30px -24px rgba(94,15,28,.3)}
details.cat summary{cursor:pointer;list-style:none;padding:17px 22px;display:flex;align-items:center;gap:14px;font-weight:500;color:var(--maroon-dk);font-size:1.06rem}
details.cat summary::-webkit-details-marker{display:none}
details.cat summary::after{content:"+";margin-left:auto;font-family:var(--display);font-size:1.3rem;color:var(--gold-ink);line-height:1}
details.cat[open] summary{background:var(--cream-2);border-radius:12px 12px 0 0}
details.cat[open] summary::after{content:"–"}
details.cat summary .cnt{font-family:var(--label);font-size:.66rem;letter-spacing:.16em;color:var(--ink-2);font-weight:500}
.plain{list-style:none;margin:0;padding:6px 20px 18px}
.plain li{padding:10px 0;font-size:1.08rem;font-weight:400;color:var(--ink-2);border-bottom:1px dotted var(--line);text-align:center}
.plain li:last-child{border-bottom:none}
.plain li em{display:block;font-style:normal;color:var(--ink-2);opacity:.75;margin:2px 0 0;font-size:.94rem}

/* ==========================================================================
   REVIEWS · ORDER · CONTACT · FOOTER
   ========================================================================== */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(24px,3vw,40px)}
.rev{position:relative;margin:0;padding:36px 30px;background:var(--white);border-radius:14px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 18px 40px -26px rgba(94,15,28,.32)}
.rev p{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.32rem;line-height:1.36;letter-spacing:-.014em;color:var(--maroon-dk);margin-bottom:1rem}
.rev footer{font-family:var(--label);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);font-weight:600}

.orders{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:clamp(22px,3vw,38px)}
.orders > div{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 28px;background:rgba(255,255,255,.06);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(240,196,78,.26)}
.orders h3{margin:0;font-size:1.12rem}
.orders p{font-size:.92rem;color:#D9BCA4;margin:0;flex:1}
.orders .btn{align-self:flex-start}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,70px);align-items:start}
.ilist{list-style:none;margin:0;padding:0}
.ilist li{padding:17px 0;border-bottom:1px dotted var(--line-2)}
.ilist li:last-child{border-bottom:none}
.ilist b{display:block;font-family:var(--label);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--maroon);font-weight:600;margin-bottom:5px}
.ilist a{color:var(--maroon-dk);font-weight:600}
.ilist a:hover{color:var(--gold-ink)}

.form{position:relative;background:var(--white);padding:clamp(30px,3.6vw,52px);border-radius:16px;box-shadow:0 1px 2px rgba(94,15,28,.05),0 26px 56px -34px rgba(94,15,28,.4)}
.f{margin-bottom:20px;position:relative}
/* a catering-only row while the subject is not a catering one */
.f.off{opacity:.45}
.f.off input,.f.off select{cursor:not-allowed;background:var(--cream-2)}
.f label{display:block;font-family:var(--label);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.f input,.f select,.f textarea{width:100%;padding:13px 16px;font:inherit;font-size:.98rem;color:var(--maroon-dk);border:1px solid var(--line);background:var(--cream);border-radius:10px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold);background:var(--white)}
.f textarea{min-height:100px;resize:vertical}
.fnote{font-size:.87rem;color:var(--ink-2);margin-top:14px;position:relative}
.fstatus{margin-top:16px;padding:15px 17px;background:var(--cream-2);border:1px solid var(--gold);border-radius:10px;font-size:.93rem;display:none;position:relative}
.fstatus.show{display:block}
.mapbox{margin-top:clamp(44px,5vw,70px);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(94,15,28,.05),0 26px 56px -34px rgba(94,15,28,.4)}
.mapbox iframe{display:block;border:0;width:100%;height:400px}
@media (max-width:1000px){.contact{grid-template-columns:1fr}}

.ftr{background-color:var(--maroon-dk);color:#C6A791;padding:clamp(62px,7vw,100px) 0 0;font-size:.95rem;font-weight:400;position:relative}
.ftr h4{color:var(--white);font-family:var(--label);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:20px}
.ftr a{color:#E0C0A8}
.ftr a:hover{color:var(--gold-lt)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr ul li{margin-bottom:11px}
.ftr-grid{display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:1.7fr 1fr 1fr 1.3fr}
/* width alone let the HTML height="180" through, squashing the mark to 64x180
   and turning border-radius:50% into an egg — pin both axes like the header does */
.ftr-logo{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:18px;border:2px solid var(--gold)}
.ftr-brand p{color:#A78872;max-width:34ch}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(240,196,78,.4);border-radius:50%;font-size:.9rem}
.soc a:hover{background:var(--gold);color:var(--maroon-dk);border-color:var(--gold)}
.ftr-bot{margin-top:clamp(44px,5vw,70px);border-top:1px solid rgba(240,196,78,.24);padding:22px 0;font-family:var(--label);font-size:.68rem;letter-spacing:.1em;color:#96795F;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
@media (max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr-grid{grid-template-columns:1fr}}


.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:var(--maroon-dk);gap:1px}
.callbar a{flex:1;justify-content:center;padding:15px 8px;font-size:.64rem;border-radius:0}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media (max-width:1000px){
  .burger{display:block}
  .hdr-cta .btn{display:none}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:2px solid var(--maroon);padding:10px var(--gutter) 20px}
  .mainnav.open{display:flex}
  /* The menu is taller than the screen it drops into — nine kitchens under
     "Menu" and six sections after it come to 906px on a 757px phone. Hung off a
     sticky header it cannot be scrolled to: the header stays put, the menu
     stays pinned under it, and everything past Catering was simply unreachable.
     So it is held to the room below the header and scrolls inside itself.
     dvh, because on a phone the address bar takes a bite out of vh. */
  .mainnav.open{
    max-height:calc(100vh - var(--head-h));
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:28px;
  }
  .mainnav a{padding:16px 0;border-bottom:1px dotted var(--line-2);font-size:.88rem;color:var(--maroon-dk)}
  .mainnav a::after{display:none}
  .has-sub{display:block}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:0 0 0 16px;min-width:0}
  /* stacked in the burger menu these sit under left-aligned parents */
  .mainnav .sub-link{text-align:left}
  .callbar{display:flex}
  body{padding-bottom:56px}
  html{scroll-padding-top:24px}
}
/* ── Phone header ──────────────────────────────────────────────────────────
   "Your Home's Traditional Kitchen" has to sit on one line under the name;
   the owner asked for it on 2026-09-05 and it is the line that says what the
   place is.

   It was wrapping on nearly every phone. Measured: the tagline's natural width
   is 14.26x its own font-size (209.6px at the design's .84rem/14.7px) and the
   name's is 5.38x. Against that, the room left beside the logo mark and the
   burger came to 0.9V - 140 at viewport V — which clears 209.6 only past
   V = 389px. So it held on a 414pt phone and broke on a 390, a 375 and a 360,
   and at 320 the name wrapped too and both lines were clipped by the 76px bar.

   Three things buy the width back, in the order they cost least:
     1. the logo's own left indent goes, which is the left-alignment asked for
        — the mark now sits hard against the page gutter like everything else;
     2. the two flex gaps tighten and the mark comes 52px -> 46px;
     3. only then does the type give, and only below ~367px where nothing else
        is left to take.
   That leaves V - 2*gutter - 114 for the text. Below 360 the gutter is pinned
   at 18px, so the room is V - 150 and the largest tagline that fits is
   (V - 150)/14.26; the 8px held back keeps it off the burger. Above ~367px the
   cap wins and the type is the full .84rem again, so this only ever shrinks the
   phones that genuinely cannot hold it.

   nowrap on both lines is the guarantee: sized to fit and forbidden to wrap,
   so a future change to the wording or the burger shows up as an overlap here
   rather than as a quietly two-line tagline on the owner's phone. */
@media (max-width:640px){
  .hdr-in{gap:12px}
  .logo{margin-left:0;gap:12px}
  .logo img{width:46px;height:46px}
  .logo b,.logo small{white-space:nowrap}
  .logo small{font-size:clamp(10.5px,calc(7.01vw - 11.08px),.84rem)}
}

@media (max-width:560px){.items{grid-template-columns:1fr}}
/* Laptop and up: hold the hero to whatever height is left under the header and
   show the photograph with background-size:contain, so the whole frame is on
   screen with no crop and no scrolling. The panel is capped narrower than the
   contained photo (which is 4:3, so its width is 1.33x the hero height) — that
   is what keeps the picture visible around the words instead of hidden by them. */
/* the headline now lives in a ~600px column, not a 1000px box — size it to the
   column, or it balloons the panel and pushes the hero off the fold */
@media (min-width:900px){
  /* The line was pinned at 1.3rem here, which is why it did not grow when the
     rule above it did — a flat size in a later block beats a clamp in an
     earlier one. It scales with the window now, like the headline under it. */
  .hero .telugu{font-size:clamp(1.6rem,2.8vw,2.5rem);margin-bottom:.45rem}
  /* "the way home makes it." measures 11.1x its own font-size, and the panel's
     text column is 25.93vw wide (30.77vw of grid less its 2.4vw padding either
     side), so 25.93 / 11.1 = 2.33vw is the largest that holds it on one line.
     2.25vw leaves ~12px of clearance rather than the 2px 2.3vw left. The <br> fixes the other break,
     so the headline is exactly two lines at every width. */
  .hero h1{font-size:clamp(1.75rem,3.4vw,4.9rem);margin-bottom:clamp(1.1rem,2.5vh,2.3rem)}
  .hero .lede{font-size:clamp(1.2rem,1.68vw,1.9rem);line-height:1.56;margin-bottom:clamp(1.6rem,3.4vh,3rem)}
  /* fixed 2x2 in the narrower panel — flex-wrap was leaving 3 on one line
     and a lone stat on the next */
  /* sized so both buttons hold one row down to 1280 — stacked they cost the
     panel 71px of height, which at 1280 is the difference between fitting the
     fold and not */
  .hero .btns{gap:10px}
  .hero .btn-out-w{border-color:var(--maroon);color:var(--maroon)}
  .hero .btn-out-w:hover{background:var(--maroon);color:var(--white);border-color:var(--maroon)}
  .hero .btns .btn{font-size:clamp(.8rem,.9vw,.88rem);padding:16px clamp(16px,1.4vw,28px)}
}
/* the display serif sets large — step the scale down on small
   phones so the hero headline stays on comfortable lines */
@media (max-width:560px){
  h1{font-size:clamp(2.3rem,9.5vw,2.9rem)}
  h2{font-size:clamp(1.85rem,7.8vw,2.2rem)}
  .lede{font-size:1.02rem}
}

/* ==========================================================================
   ACCESSIBILITY · PRINT
   ========================================================================== */

/* keyboard skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--maroon);color:var(--white);padding:14px 22px;
  font-family:var(--label);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.skip:focus{left:0;color:var(--white)}

/* a visible focus ring everywhere, without hurting mouse users */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.tab:focus-visible{outline-offset:4px}

/* respect reduced motion globally */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- the menu is something people print ---------- */
@media print{
  .hdr,.progress,.callbar,.skip,.leafline,.tiles,
  .band,.form,.mapbox,.soc,.searchbar,.tabrail,.hero-proof,
  .btns,.btn,.orders,.split,.dishes,.revs,.packs,.trays{display:none !important}

  /* every tab prints, not just the open one */
  .panel[hidden]{display:block !important}
  .tabrail{display:none !important}
  .menu-layout{display:block !important}

  html,body{background:#fff !important;color:#000 !important;font-size:11pt}
  section{padding:0 0 18pt !important}
  .wrap{width:100% !important}
  h1,h2,h3,h4{color:#000 !important;page-break-after:avoid}
  h2{font-size:20pt;margin-top:14pt}
  .menu-sec{page-break-inside:avoid;margin-bottom:16pt}
  .menu-sec .thumb{display:none !important}
  .menu-sec h3{font-size:14pt;padding-bottom:4pt}
  .menu-sec h3::after{background:#000 !important;height:1px}
  .items{grid-template-columns:1fr 1fr !important;gap:0 24pt}
  .items li{padding:3pt 0;border-bottom:1px dotted #bbb}
  .items .n,.items .p{color:#000 !important}
  .items .n em{color:#444 !important}
  .notice,.plain li{color:#000 !important}
  .reserve{background:#fff !important;background-image:none !important;
           color:#000 !important;border:1px solid #999;box-shadow:none !important;
           padding:10pt !important;page-break-inside:avoid}
  .reserve::before{display:none}
  .reserve p,.reserve .tel,.reserve-label,.reserve-label .te{color:#000 !important}
  .reserve-label::before,.reserve-label::after{background:#000 !important}
  .hero{background:#fff !important;color:#000 !important;padding:0 0 12pt !important}
  .hero .wrap::before{display:none}
  .hero h1{font-size:24pt}
  .hero h1 em,.hero .telugu{color:#000 !important}
  .ftr{background:#fff !important;color:#000 !important;padding:12pt 0 0 !important}
  .ftr a,.ftr h4,.ftr-brand p{color:#000 !important}
  .ftr-logo{display:none}
  a[href^="tel"]::after{content:" (" attr(href) ")";font-size:9pt}
}

/* ---------- Restaurant Guru award ---------- */
/* Two awards side by side. Neither is a link any more, so neither lifts on
   hover — a card that moves under the cursor promises somewhere to go. */
.awards{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  max-width:1000px;margin:0 auto clamp(40px,5vw,60px);
}
@media (max-width:820px){.awards{grid-template-columns:1fr}}
.award{
  display:flex;align-items:center;gap:clamp(16px,2vw,24px);
  margin:0;
  padding:22px clamp(24px,3vw,32px);background:var(--white);
  border:1px solid var(--gold);border-radius:16px;color:var(--ink);
  box-shadow:0 1px 2px rgba(94,15,28,.05),0 18px 40px -28px rgba(94,15,28,.35);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* Both years are photographed certificates now. The 2024 sheet is a smaller
   file than the 2026 one and still sharp: held to 148px tall it draws about
   98px wide, well inside its 258px. */
/* The certificate is a portrait sheet, so it is held to a height and lets its
   width follow, rather than being squared off into the round badge it replaces. */
.award-cert{
  flex:none;width:auto;height:clamp(104px,11vw,148px);border-radius:6px;
  box-shadow:0 0 0 1px var(--line-2),0 8px 20px -12px rgba(94,15,28,.4);
}
.award-txt b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-.016em;color:var(--maroon-dk);margin-bottom:5px}
.award-txt > span{display:block;font-size:.92rem;font-weight:400;line-height:1.55;color:var(--ink-2)}
.award-txt em{font-style:normal;font-weight:500;color:var(--maroon)}
@media (max-width:560px){.award{flex-direction:column;text-align:center;gap:16px}}
@media print{.awards{display:none !important}}
@media print{.award{display:none !important}}

/* CC BY-SA attribution for the hero photograph — required by its licence */
.ftr-bot .credit{opacity:.62;font-size:.74rem;line-height:1.5}
.ftr-bot .credit a{text-decoration:underline}

/* spam honeypot — hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   CATERING PICK LIST
   A customer reading a hundred and fifty catering dishes had no way to keep
   the ones they liked — they closed the section and typed from memory into the
   message box. Ticking a dish collects it, and the list travels with the
   enquiry. Built by the script at run time: with no script the catalogue reads
   exactly as it always has, and the form is untouched.
   ========================================================================== */
.plain.pickable li{text-align:left;padding:0}
.plain.pickable li label{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 4px;cursor:pointer;
  border-radius:8px;transition:background .18s var(--ease);
}
.plain.pickable li label:hover{background:var(--cream-2)}
.plain.pickable input[type=checkbox]{
  flex:none;margin:2px 0 0;width:17px;height:17px;accent-color:var(--maroon);cursor:pointer;
}
.plain.pickable li em{margin-top:1px}
.plain.pickable li:has(input:checked) label{background:var(--cream-2)}
.plain.pickable li:has(input:checked) .pick-n{color:var(--maroon-dk);font-weight:500}

/* The tray. It sits above the mobile call bar rather than over it. */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--maroon-dk);color:var(--cream);
  /* Slid out of the way AND taken out of sight. On a phone the tray is lifted
     clear of the call bar, so sliding it down by its own height still left it
     on screen, sitting over the bar it was meant to sit above. Visibility
     settles that whatever the two heights happen to be. */
  transform:translateY(101%);visibility:hidden;
  transition:transform .32s var(--ease),visibility 0s linear .32s;
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);
}
.tray.up{transform:none;visibility:visible;transition-delay:0s,0s}
.tray-bar{
  display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,3vw,26px);
  font-family:var(--label);font-size:.78rem;letter-spacing:.06em;
}
.tray-bar b{font-weight:700}
.tray-bar .sp{margin-left:auto;display:flex;gap:8px}
.tray-bar button{
  font:inherit;letter-spacing:inherit;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:var(--cream);
  padding:8px 14px;border-radius:999px;
}
.tray-bar button.go{background:var(--gold);border-color:var(--gold);color:var(--maroon-dk);font-weight:700}
.tray-bar button:hover{border-color:var(--gold-lt)}
.tray-list{
  display:none;max-height:44vh;overflow:auto;
  padding:4px clamp(14px,3vw,26px) 14px;
  border-top:1px solid rgba(255,255,255,.18);
}
.tray.open .tray-list{display:block}
.tray-list ul{list-style:none;margin:0;padding:0;
  columns:2;column-gap:26px}
.tray-list li{
  break-inside:avoid;display:flex;align-items:center;gap:10px;
  padding:7px 0;font-size:.92rem;border-bottom:1px dotted rgba(255,255,255,.22);
}
.tray-list li span{flex:1}
.tray-list li button{
  flex:none;border:0;background:transparent;color:var(--gold-lt);
  font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 6px;
}
@media (max-width:1000px){
  .tray{bottom:56px}
  .tray-list ul{columns:1}
  .tray-bar{font-size:.72rem;gap:10px;padding:10px 14px}
  .tray-bar button{padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){.tray{transition:none}}
@media print{.tray{display:none !important}}
/* The line that tells a customer the dishes can be ticked. Written into the
   page but hidden until the script has built the checkboxes. */
.pick-hint{
  margin:14px auto 0;max-width:52ch;
  padding:11px 16px;border-radius:10px;
  background:var(--cream-2);border:1px solid var(--gold);
  font-size:.95rem;color:var(--ink-2);
}
.pick-hint b{color:var(--maroon-dk);font-weight:600}
/* The bottom bar's two-word labels stack. The buttons are flex rows, so the
   second word only drops to its own line once the button itself is a column —
   set block alone it sat alongside and pushed "Order" off the screen edge. */
/* The bar's two-word labels stack, so "Today's Kitchen" fits a third of a phone
   without the type shrinking away. A button is a flex row, so the second word
   only drops to its own line once the button itself is a column. The thirds are
   left to flex, which counts the hairline gaps between them; stated as 33.333%
   they came to two pixels more than the screen. min-width lets a button shrink
   below its own words rather than steal a neighbour's room. */
.callbar a{
  flex:1 1 0;min-width:0;
  flex-direction:column;gap:1px;line-height:1.2;
  padding:11px 4px;font-size:.66rem;letter-spacing:.04em;
}
.callbar a span{font-size:.86em;opacity:.8;font-weight:500;letter-spacing:.04em}

/* ---------- Friday's Traditionals ----------

   The one section on the site that carries the goddess rather than a dish. She
   is given the same two motions the boards give her — a ring of gold breathing
   around her, and a slow sheen crossing the picture — so the website and the
   screen in the shop are announcing Sravana Masam in the same voice.

   Slow, and stopped for anyone who has asked their machine to stop things
   moving. */
.sravana-sec .sr-thumb{border-radius:999px;overflow:visible}
.sravana-sec .sr-thumb img{border-radius:999px}
.sravana-sec .sr-thumb .ring{
  position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:999px;
  box-shadow:0 0 0 2px var(--gold,#D69A16),
             0 0 10px 1px rgba(240,196,78,.55),
             0 0 26px 5px rgba(240,196,78,.28);
  animation:sr-breathe 4.4s ease-in-out infinite;
}
.sravana-sec .sr-thumb .ray{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  overflow:hidden;border-radius:999px;
}
.sravana-sec .sr-thumb .ray::before{
  content:"";position:absolute;top:-40%;left:-60%;width:38%;height:180%;
  background:linear-gradient(90deg,
    rgba(255,246,214,0) 0%,rgba(255,246,214,.55) 50%,rgba(255,246,214,0) 100%);
  transform:rotate(18deg);
  animation:sr-sheen 6.5s ease-in-out infinite;
}
@keyframes sr-breathe{
  0%,100%{box-shadow:0 0 0 2px var(--gold,#D69A16),
                     0 0 10px 1px rgba(240,196,78,.55),
                     0 0 26px 5px rgba(240,196,78,.28)}
  50%    {box-shadow:0 0 0 2px var(--gold,#D69A16),
                     0 0 16px 2px rgba(240,196,78,.8),
                     0 0 40px 8px rgba(240,196,78,.42)}
}
@keyframes sr-sheen{
  0%      {left:-60%}
  38%,100%{left:130%}
}
@media (prefers-reduced-motion:reduce){
  .sravana-sec .sr-thumb .ring,
  .sravana-sec .sr-thumb .ray::before{animation:none}
}