/* InDish brand look, 13 Sep 2026. Shared by every public page: tokens, type, buttons, header, footer, tab bar, order
   chooser, motion and print rules. Page-specific layout stays inline in each page. The six section paintings
   (Content/kerala/band-*.webp) carry the illustration; on desktop they sit at 100% width behind each band, on phones the
   cut-out pieces recompose the scenery BELOW the text and every copy block has a solid cream ground (text never over
   watercolour). The first band on a page carries class "lead": it holds the header and paints above later bands so the
   desktop fixed header is never covered. */
  :root{
    --cream:#F5EDD8; --cream-soft:#FBF7EC;
    --green:#3D6B21; --dark:#2F5418;
    --magenta:#8B2252; --gold:#C4922A; --ink:#2D2D2D;
    --serif:"Playfair Display",Georgia,serif; --sans:"Lato",Arial,sans-serif; --script:"Dancing Script",cursive;
    --tab:64px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom));background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
  img{display:block;max-width:100%;}
  svg{display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,p,figure,ul{margin:0;}
  ul{padding:0;list-style:none;}
  h1,h2,h3{color:var(--dark);font-family:var(--serif);font-weight:500;line-height:1.12;}
  h1{font-size:clamp(1.85rem,4vw,3.75rem);letter-spacing:-.04em;}
  h2{font-size:clamp(1.7rem,2.5vw,2.5rem);letter-spacing:-.025em;}
  h3{font-size:1.25rem;}
  h1 span,h1 em,h2 span,h2 em{display:block;}
  h1 em,h2 em{font-weight:500;}
  p+p{margin-top:.85em;}
  p,h1,h2,h3{overflow-wrap:anywhere;}
  address{font-style:normal;}
  :focus-visible{outline:3px solid var(--gold);outline-offset:5px;}
  ::selection{color:var(--cream);background:var(--magenta);}
  button{font:inherit;color:inherit;}

  .page{max-width:2000px;margin-inline:auto;overflow:clip;}   /* 13 Sep 2026: was 1600, which left plain gutters either side on a 1920 screen */
  .defs{position:absolute;width:0;height:0;overflow:hidden;}
  .icon{width:20px;height:20px;flex:0 0 auto;}
  .band{position:relative;isolation:isolate;background-color:var(--cream);}
  .band::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--painting) center top / 100% auto no-repeat;pointer-events:none;}
  .content{position:relative;z-index:2;}
  .copy{position:relative;padding:25px 22px;background:var(--cream);}
  .eyebrow{display:block;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.17em;line-height:1.4;text-transform:uppercase;}
  /* The gold bar and the gold eyebrow above it share one width (--rulew), so the eyebrow is centred over the bar wherever
     the pair appears (Husqi, 13 Sep 2026: "the gold writing should be right above it in all cases"). */
  .rule{width:var(--rulew,min(100%,360px));height:20px;margin:7px 0 15px;color:var(--gold);}
  .eyebrow:has(+ .rule){width:var(--rulew,min(100%,360px));text-align:center;}
  .copy>p{margin-top:18px;max-width:48ch;}
  .copy>p+p{margin-top:.85em;}
  .actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px;}

  .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 17px;border:1px solid transparent;border-radius:6px;font-size:.85rem;font-weight:700;line-height:1.35;text-align:center;cursor:pointer;transition:transform .18s ease,opacity .18s ease;}
  .button:hover{transform:translateY(-2px);opacity:.92;}
  .button .icon{width:18px;height:18px;}
  .green{background:var(--green);color:var(--cream);}
  .magenta{background:var(--magenta);color:var(--cream);box-shadow:0 3px 5px rgb(45 45 45 / .15);}
  .outline{color:var(--dark);border-color:var(--green);background:transparent;}
  .cream{background:var(--cream);color:var(--dark);}
  .light-outline{color:var(--cream);border-color:var(--cream);background:transparent;}

  .note{position:relative;z-index:3;width:110px;color:var(--dark);font:700 1.65rem/1.12 var(--script);text-align:center;transform:rotate(-9deg);}
  .note svg{width:67px;height:19px;margin:9px auto 0;}
  .art{pointer-events:none;user-select:none;}
  .mobile-art{position:relative;z-index:1;}
  .grain{display:none;}   /* a fixed full-screen SVG-filter layer blended with multiply is re-composited on every scroll frame; phones and tablets go without the paper grain (A28.5) */


/* Header: on phones and tablets it scrolls away with the page; on desktop it is fixed (see the 1100px block). */
  /* Header: FIXED at every width (Husqi, 13 Sep 2026 evening: "the InDish header doesn't move with the screen"). Transparent
     on the lead band's paper at the top of the page, solid cream with a shadow once scrolled. On phones the scrolled state is
     compact (small logo, no caption) so it takes little of the screen. Its lead band gets padding-top for it. */
  .header{--ease:.38s cubic-bezier(.22,.61,.36,1);position:fixed;top:0;left:50%;transform:translateX(-50%) translateZ(0);will-change:transform;backface-visibility:hidden;width:min(100%,2000px);z-index:40;padding:16px 22px 12px;background:transparent;transition:padding var(--ease);}
  /* the cream bar and its shadow live on a pseudo-element that fades in (opacity is compositor work; a background transition repaints every frame, Deep Brain A28.5). translateZ + will-change: iOS keeps a fixed bar in place during a flick only when it has its own layer (A21). */
  .header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);box-shadow:0 4px 24px rgba(45,12,28,.12);opacity:0;transition:opacity var(--ease);}
  .header.scrolled::before{opacity:1;}
  .header.scrolled{padding:8px 22px 6px;}
  .header.nofx,.header.nofx *{transition:none!important;}   /* while the nav script measures the scrolled height */
  .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .logo{display:inline-flex;flex-direction:column;color:var(--dark);}
  /* The real InDish mark (green script, magenta fork, leaf), never typed in a web font. Sized by height; the caption sits under it. */
  .logo-img{display:block;width:auto;align-self:flex-start;height:52px;transition:height var(--ease,.38s cubic-bezier(.22,.61,.36,1));}
  .logo-caption{margin-top:7px;font-size:.5rem;font-weight:700;letter-spacing:.08em;max-height:14px;overflow:hidden;transition:opacity var(--ease,.3s),max-height var(--ease,.3s),margin-top var(--ease,.3s);}
  .header.scrolled .logo-img{height:32px;}
  .header.scrolled .logo-caption{opacity:0;max-height:0;margin-top:0;}
  .nav,.header-actions{display:none;}
  .mobile-row{display:flex;align-items:center;gap:8px;}
  .follow-pill{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;background:var(--cream);border:1px solid var(--gold);color:var(--dark);font-size:.8rem;font-weight:700;}
  .mobile-nav summary{display:grid;place-items:center;width:44px;height:44px;color:var(--dark);cursor:pointer;list-style:none;background:var(--cream);border:1px solid var(--gold);border-radius:50%;}
  .mobile-nav summary::-webkit-details-marker{display:none;}
  .mobile-nav summary .icon{width:27px;height:27px;}
  .mobile-links{position:absolute;left:22px;right:22px;top:100%;display:grid;gap:5px;margin-top:8px;padding:18px;background:var(--cream);border:1px solid var(--gold);box-shadow:0 12px 30px rgba(45,12,28,.18);}
  .mobile-links>a{padding:9px 0;color:var(--dark);}
  .mobile-links .actions{margin-top:12px;}
  .mobile-links .button{flex:1 1 135px;}
  /* the band that holds the header paints above the later bands (a fixed element inside an isolated band is otherwise covered) and leaves room for it */
  .band.lead{z-index:5;padding-top:104px;}   /* scoped to the band: book.html has a <p class="lead"> too */
  /* Phones and tablets: the strip behind the header is not the top of the band painting (its edge showed and the boat sat low
     and centred, Husqi 13 Sep 2026) but two cut-out pieces: the boat and palms in the top-right corner, fronds top-left. */
  .band.lead::before{background:url("Content/kerala/piece-boat-corner.webp") right -4px top -12px / 148px auto no-repeat,url("Content/kerala/piece-palms-hibiscus-left.webp") left -54px top -18px / 104px auto no-repeat;}
  .header .logo{margin-left:8px;}   /* the mark and its caption sat under the fronds (Husqi) */

  /* Footer */
  .footer{--painting:url("Content/kerala/band-footer-green.webp");background-color:#11381F;color:var(--cream);padding:35px 22px 40px;}   /* #11381F is the painting's own green; the palette --dark showed as a lighter strip under it */
  .footer-content{position:relative;z-index:2;padding:22px;background:#11381F;}
  .footer-row{display:grid;gap:26px;}
  .footer .logo{color:var(--cream);}
  .footer .logo-img{height:60px;}
  .contacts{display:grid;gap:17px;font-size:.85rem;}
  .contact{display:flex;align-items:center;gap:11px;min-height:32px;}
  .contact span{overflow-wrap:anywhere;}
  .footer-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:.82rem;}
  .footer-links a{padding:6px 0;opacity:.9;}
  .footer-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
  .footer-rule{width:100%;height:26px;margin:22px 0 12px;color:var(--gold);}
  .fine{font-size:.65rem;letter-spacing:.16em;text-align:center;text-transform:uppercase;}
  .fine+.fine{margin-top:8px;letter-spacing:.08em;text-transform:none;font-size:.7rem;opacity:.85;}
  .footer-note{display:none;}
  .socials{display:flex;gap:10px;flex-wrap:wrap;}
  .social{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;transition:transform .2s ease,opacity .2s ease;}
  .social:hover{transform:translateY(-2px);opacity:.8;}

  /* Bottom tab bar (phones and tablets): the four doors people arrive needing. Desktop keeps the header nav. */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:60;transform:translateZ(0);will-change:transform;backface-visibility:hidden;background:var(--green);box-shadow:0 -4px 20px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom);}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;color:#fff;text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.04em;opacity:.82;}
  .tabbar a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}
  .tabbar a.on{opacity:1;background:var(--dark);}

  /* Section-aware nav: the header link of the section on screen gets a gold underline. Scoped to the header, nothing else. */
  header nav a.on{color:var(--dark);box-shadow:inset 0 -2px 0 var(--gold);}
  /* Anchor jumps land clear of the sticky header (desktop) with breathing room; --hdr is 0 where the header scrolls away. */
  section[id]{scroll-margin-top:calc(var(--hdr,0px) + 10px);}

  /* Order chooser: every "Order online" button opens this instead of going straight to collection */
  .ochoose{position:fixed;inset:0;background:rgba(45,45,45,.55);display:none;align-items:flex-end;justify-content:center;z-index:100001;padding:0;}
  .ochoose.on{display:flex;}
  .ochoose .sheet{background:var(--cream);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:22px 20px 28px;box-shadow:0 -10px 40px rgba(0,0,0,.25);}
  @media(min-width:700px){.ochoose{align-items:center;padding:20px;}.ochoose .sheet{border-radius:22px;padding:28px;}}
  .ochoose h3{font-family:var(--serif);color:var(--green);font-size:1.5rem;margin:0 0 4px;}
  .ochoose .oc-sub{font-size:.9rem;color:#6a6a6a;margin:0 0 16px;}
  .ocard{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #e3d6b6;border-radius:14px;padding:16px;margin:10px 0;text-decoration:none;color:var(--ink);}
  .ocard .oic{flex:0 0 50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#f3e9d2;}
  .ocard b{display:block;font-size:1.08rem;}
  .ocard span{display:block;font-size:.84rem;color:#6a6a6a;margin-top:2px;}
  .ocard .pill{display:inline-block;background:var(--magenta);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;}
  .ocard .arrow{margin-left:auto;color:var(--green);font-weight:700;font-size:1.3rem;}
  .ochoose .oc-close{display:block;width:100%;margin-top:8px;background:none;border:0;color:#6a6a6a;font:inherit;font-size:.9rem;padding:10px;cursor:pointer;}
  .ochoose .oc-note{font-size:.8rem;color:#6a6a6a;margin:0 0 10px;text-align:center;}
  .oc-sub[data-state=closing]{color:var(--magenta);font-weight:700;}
  .oc-sub[data-state=late],.oc-sub[data-state=closed]{color:#a33;font-weight:700;}
  .ocard.off{opacity:.55;pointer-events:none;background:#f3ecd9;}
  .ocard.off .arrow{visibility:hidden;}
  .octables{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px;}
  .octables a{display:block;background:#fff;border:1.5px solid #e3d6b6;border-radius:12px;padding:12px 4px;text-align:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.05rem;}
  .octables a small{display:block;font-weight:400;font-size:.72rem;color:#6a6a6a;}

/* Utility pages (delivery, links, table, booking, 404): the Home pill sits top-LEFT, never "Back to X". */
.homepill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--cream);border:1px solid var(--gold);color:var(--dark);font-weight:700;font-size:.85rem;}
.homepill:hover{background:var(--green);color:var(--cream);border-color:var(--green);}

/* Tablet */
@media (min-width:650px){
  .header{padding-inline:6%;}
  .header.scrolled{padding-inline:6%;}
  .mobile-links{left:6%;right:6%;}
  .copy{padding-inline:6%;}
  .footer-row{grid-template-columns:1fr 1fr;}
}

/* Desktop: fixed header, no tab bar. Band paintings already contain the palms and boats, so the mobile cut-outs are hidden. */
@media (min-width:1100px){
  body{padding-bottom:0;}
  .tabbar{display:none;}
  .grain{display:block;position:fixed;inset:0;z-index:30;width:100%;height:100%;pointer-events:none;opacity:.035;mix-blend-mode:multiply;}
  .copy{padding:0;background:transparent;}
  .mobile-art{display:none;}
  .band.lead::before{background:var(--painting) center top / 100% auto no-repeat;}
  .band.lead{padding-top:0;}
  .header{padding:12px 10.5% 10px 9.5%;}
  .header .logo{margin-left:0;}
  .header.scrolled{padding:12px 10.5% 10px 9.5%;}
  .header-row{gap:24px;}
  .logo-img{height:54px;}
  .header.scrolled .logo-img{height:54px;}
  .header.scrolled .logo-caption{opacity:1;max-height:14px;margin-top:6px;}
  .logo-caption{font-size:.5rem;margin-top:6px;}
  .nav{display:flex;gap:clamp(18px,2.2vw,32px);margin-left:auto;font-size:.85rem;}
  .nav a{padding-block:8px;transition:opacity .2s ease;}
  .nav a:hover{opacity:.65;}
  .header-actions{display:flex;gap:12px;}
  .header-actions .button{min-height:42px;font-size:.78rem;padding-inline:15px;}
  .mobile-row{display:none;}
  .footer{min-height:min(12.6vw,252px);padding:30px 0 25px;}
  .footer-content{margin-left:19.7%;margin-right:15%;padding:0;background:transparent;}
  .footer-row{grid-template-columns:auto 1fr auto;align-items:center;gap:27px;}
  .footer .logo-img{height:44px;}
  .footer .logo-caption{font-size:.4rem;}
  .contacts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 20px;font-size:.73rem;}
  .contact{gap:9px;}
  .contact .icon{width:20px;height:20px;}
  .footer .socials{gap:7px;}
  .footer .social{width:32px;height:32px;}
  .footer .social .icon{width:17px;height:17px;}
  .footer-links{justify-content:center;font-size:.76rem;margin-top:16px;}
  .footer-rule{margin-top:14px;}
  .fine{font-size:.58rem;}
  .footer-note{display:block;position:absolute;right:3%;top:27px;color:var(--cream);width:84px;font-size:1.65rem;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
  .button:hover,.social:hover,.gallery figure:hover,.card:hover .card-photo img,.tile:hover img{transform:none;}
}
@media print{
  .scroll-cue,.tabbar,.grain,.mobile-row,.scue{display:none;}
  .header{position:static;transform:none;}
  .band.lead{padding-top:0;}
}

/* Utility pages (delivery, links, table, booking, 404): one centred column, the Home pill top-LEFT, brand card buttons, a
   watercolour piece in each bottom corner on desktop only (outside the column, never under text); on phones one small
   piece sits in flow under the last line. No header, footer or tab bar here: /links must stay one screen on a laptop and
   /table must never offer delivery or collection. */
.util{min-height:100svh;padding-bottom:0;}
.upills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.urule.left{margin-left:0;}
.uwrap{position:relative;z-index:2;max-width:460px;margin:0 auto;padding:18px 22px 40px;text-align:center;}
/* top row: the mark on the left, Home (and any second pill) on the right, like the site header (Husqi, 13 Sep 2026: "logo next to Home, not under") */
.utop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;}
.ulogo{display:inline-flex;flex-direction:column;align-items:flex-start;color:var(--dark);}
.ulogo .logo-img{height:44px;}
.ulogo .logo-caption{margin-top:4px;font-size:.42rem;letter-spacing:.09em;}
.tag{font-family:var(--serif);font-size:1rem;color:var(--magenta);margin-top:8px;}
.ulead{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--dark);margin-top:14px;line-height:1.2;}
.uhint{font-size:.88rem;color:#6a6a6a;margin-top:6px;}
.urule{width:min(100%,260px);height:20px;margin:14px auto 12px;color:var(--gold);}
a.btn{display:flex;align-items:center;gap:13px;width:100%;min-height:56px;padding:14px 18px;margin:11px 0;border-radius:12px;font-weight:700;font-size:1.02rem;text-align:left;background:var(--cream-soft);color:var(--ink);border:1px solid rgb(196 146 42 / .6);box-shadow:0 2px 6px rgba(45,45,45,.06);transition:transform .18s ease,filter .18s ease;}
a.btn .ic{flex:0 0 26px;font-size:1.28rem;line-height:1;text-align:center;}
a.btn.primary{background:var(--green);color:var(--cream);border-color:var(--green);}
a.btn.accent,a.btn.review{background:var(--magenta);color:var(--cream);border-color:var(--magenta);}
a.btn:active{transform:translateY(1px);}
@media(hover:hover){a.btn:hover{filter:brightness(.97);transform:translateY(-1px);}}
a.btn .sub{display:block;font-weight:400;font-size:.8rem;opacity:.85;margin-top:1px;}
.hours{margin-top:22px;font-size:.85rem;color:#6a6a6a;}
.hours b{color:var(--green);}
.foot{margin-top:20px;font-size:.78rem;color:#8a8a8a;}
.foot a{color:var(--green);}
.ucorner{display:none;}
.ufoot-art{display:block;width:min(46%,170px);margin:22px auto 0;opacity:.7;}
@media (max-width:1099px){
  .uwrap{padding-bottom:16px;}
  .tag{margin-top:2px;}
  .ulead{margin-top:8px;}
  .urule{margin:10px auto 6px;}
  a.btn{min-height:50px;padding:10px 16px;margin:8px 0;}
  .hours{margin-top:14px;}
  .foot{margin-top:12px;}
}
@media (min-width:1100px){
  .ucorner{display:block;position:fixed;bottom:0;z-index:0;width:min(24vw,320px);opacity:.6;}
  .ucorner.l{left:0;}
  .ucorner.r{right:0;}
  .ufoot-art{display:none;}
}