/* Floating Gajju concierge — shared across every page.
   The widget reuses the approved design's .gw-* component (styled in design.css);
   only the typing indicator needs adding, since the shared script renders it. */
.gw-log .b.typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
.gw-log .b.typing i{width:6px;height:6px;border-radius:50%;background:var(--g,#E9BC63);display:block;
  animation:gwDot 1.1s infinite ease-in-out}
.gw-log .b.typing i:nth-child(2){animation-delay:.15s}
.gw-log .b.typing i:nth-child(3){animation-delay:.3s}
@keyframes gwDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.gw-log .b.typing i{animation:none}}

/* minimal, brand-tinted social buttons (shared with the homepage footer) */
.socials{display:flex;flex-wrap:wrap;gap:9px}
.socials a{--brand:#E9BC63;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(247,240,228,.18);color:var(--brand);
  transition:background .3s var(--gj-ease),border-color .3s,color .3s,transform .3s}
.socials a svg{width:17px;height:17px}
.socials a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.socials a[aria-label="Facebook"]{--brand:#4A90E2}
.socials a[aria-label="Instagram"]{--brand:#E1568B}
.socials a[aria-label="YouTube"]{--brand:#E5544B}
.socials a[aria-label="X"]{--brand:#C9CDD4}
.socials a[aria-label="WhatsApp"]{--brand:#4FC98A}

/* ---- shared footer fixes (loaded on every page alongside the concierge) ---- */
/* every footer column keeps the same rhythm, so the Ask Gajju card starts level
   with the link lists instead of sitting lower than them */
.foot-grid>div{display:flex;flex-direction:column;gap:14px}
.foot-grid>div>h5{margin-bottom:0}
.foot-grid>div>p{margin:0}
.foot-grid>div>ul{margin:0}
.foot .news{margin:0}
.foot-chat{margin-top:0}
/* keep the bottom bar clear of the floating concierge button */
.foot-bot{padding-right:clamp(72px,6vw,112px)}
@media(max-width:720px){.foot-bot{padding-right:0;padding-bottom:78px}}

/* ================= shared header: liquid glass + hover menus ================= */
.hdr{
  background:linear-gradient(180deg,rgba(247,240,228,.085) 0%,rgba(14,7,22,.58) 55%,rgba(11,5,17,.66) 100%);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid rgba(247,240,228,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}
.hdr.stuck,.hdr.scrolled{
  background:linear-gradient(180deg,rgba(247,240,228,.10) 0%,rgba(12,6,19,.78) 55%,rgba(9,4,14,.86) 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)}
@supports not (backdrop-filter: blur(4px)){
  .hdr{background:linear-gradient(180deg,rgba(14,7,22,.94),rgba(11,5,17,.97))}
}

/* dropdown panels in the same glass */
.drop{
  background:linear-gradient(168deg,rgba(38,22,54,.80),rgba(13,6,20,.88));
  backdrop-filter:blur(26px) saturate(185%);-webkit-backdrop-filter:blur(26px) saturate(185%);
  border:1px solid rgba(247,240,228,.16);
  box-shadow:0 26px 62px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16)}
.drop a{color:var(--cr,#F7F0E4)}
.drop a:hover{background:rgba(233,188,99,.16)}
@supports not (backdrop-filter: blur(4px)){
  .drop{background:linear-gradient(168deg,#22143a,#0d0614)}
}

/* open on hover as well as click, on pointer devices wide enough for the bar */
@media (hover:hover) and (min-width:1221px){
  .nav>li{position:relative}
  .nav>li:hover>.drop,
  .nav>li:focus-within>.drop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  /* bridge the 10px gap so the menu survives the trip from button to panel */
  .nav>li>.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
}

/* the language menu behaves the same way */
@media (hover:hover) and (min-width:1221px){
  .lang-wrap:hover .lang-menu,.lang-wrap:focus-within .lang-menu{
    opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .lang-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
}

/* ---- hero action tiles: trimmed so the hero has room to breathe ---- */
.acts{gap:10px;margin-top:18px;max-width:600px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.acts .act{padding:10px 12px 10px;border-radius:12px}
.acts .act .ic{width:20px;height:20px;margin-bottom:6px}
.acts .act b{font-size:.82rem;line-height:1.18}
.acts .act small{font-size:.65rem;line-height:1.34;display:block;margin-top:1px}
@media(max-width:520px){.acts{gap:8px;grid-template-columns:repeat(2,1fr)}}

/* ---- official Mysuru brand mark in the header ---- */
.brand img{width:auto;height:clamp(46px,4.4vw,60px);display:block}
@media(max-width:760px){.brand img{height:42px}}

/* ================= one typographic system for the whole menu =================
   Submenu items were larger (13.28px) and lighter (400) than their own parent
   (12.64px/600) and lost the tracking, which read as a different typeface.
   Everything in the bar now sits on one scale. */
.nav>li>a,.nav>li>button,
.lang-wrap>#langBtn,
.hact .btn-gold span{
  font-family:var(--ui);font-size:.79rem;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase}
.drop a,
.lang-menu button{
  font-family:var(--ui);font-size:.79rem;font-weight:500;
  letter-spacing:.03em;text-transform:none;line-height:1.35}
.drop a{padding:9px 12px}
/* the chevrons should scale with the text they sit beside */
.nav>li>button .cev,.lang-wrap>#langBtn .cev{width:11px;height:11px}

/* ================= multilingual typography & direction =================
   One face per script so no language falls back to a system font that does not
   match the rest of the site. Jost has no Kannada, Arabic or Cyrillic. */
html[data-script="kannada"] body,
html[data-script="kannada"] body *:not(svg):not(path):not(use){
  font-family:'Anek Kannada','Noto Sans Kannada',sans-serif}
html[data-script="arabic"] body,
html[data-script="arabic"] body *:not(svg):not(path):not(use){
  font-family:'Noto Sans Arabic','Noto Naskh Arabic',sans-serif}
html[data-script="cyrillic"] body,
html[data-script="cyrillic"] body *:not(svg):not(path):not(use){
  font-family:'Noto Sans','Jost',system-ui,sans-serif}
/* the non-Latin faces need a little more leading for stacked marks */
html[data-script="kannada"] body,html[data-script="arabic"] body{line-height:1.75}
html[data-script="kannada"] .nav>li>a,html[data-script="kannada"] .nav>li>button span,
html[data-script="arabic"] .nav>li>a,html[data-script="arabic"] .nav>li>button span{
  letter-spacing:normal;text-transform:none}

/* ---- right-to-left (Arabic) ---- */
html[dir="rtl"] .crumb,html[dir="rtl"] .pg-meta,html[dir="rtl"] .hl,
html[dir="rtl"] .cx-links a,html[dir="rtl"] .hcard,html[dir="rtl"] .person{direction:rtl}
html[dir="rtl"] .pg-hero h1,html[dir="rtl"] .pg-hero .lede,html[dir="rtl"] .ihead,
html[dir="rtl"] .prose,html[dir="rtl"] .acard .bd{text-align:right}
html[dir="rtl"] .pg-hero::after{
  background:
    linear-gradient(265deg,rgba(8,3,16,.88) 0%,rgba(8,3,16,.70) 30%,rgba(8,3,16,.34) 58%,
                    rgba(8,3,16,.14) 80%,rgba(8,3,16,.08) 100%),
    linear-gradient(180deg,rgba(8,3,16,.55) 0%,rgba(8,3,16,.10) 26%,rgba(8,3,16,.10) 58%,
                    rgba(8,3,16,.72) 88%,var(--k-900) 100%)}
html[dir="rtl"] .acard .go svg,html[dir="rtl"] .btn-line svg,
html[dir="rtl"] .cx-links .go{transform:scaleX(-1)}
html[dir="rtl"] .gw,html[dir="rtl"] .gpanel{right:auto;left:18px}
html[dir="rtl"] .hl li::before{margin-left:0}
html[dir="rtl"] .frow dd{text-align:left}
/* the language menu always reads in its own direction */
/* Arabic needs no special alignment: lang="ar" is enough for the script to
   shape and order correctly, and matching every other row is what makes the
   list read as a list. An earlier direction:rtl + text-align:right flipped
   this one item to the opposite edge. */
.lang-menu button[lang="ar"]{direction:ltr;text-align:left;justify-content:flex-start}
.lang-menu button[lang="ar"] > *{direction:rtl;unicode-bidi:isolate}
.lang-menu button{font-variant-numeric:normal}

/* the bar needs ~1200px for logo + 8 menus + actions; hand over to the drawer
   before those two columns can collide */
/* superseded by the 1300px breakpoint below, set when the brand mark grew */
body.nav-open .hdr .nav{display:flex}

/* ================= phone header =================
   design.css was extracted without the two collapse rules the homepage keeps
   inline, so on every inner page the "ENGLISH" and "PLAN TRIP" labels stayed
   at full width: .hact ran to 468px in a 375px viewport and pushed the burger
   off-screen. Same rules, restored for the pages that load design.css. */
@media(max-width:640px){
  /* Hidden, not removed. display:none took "English" out of the accessibility
     tree as well as out of the layout, and the globe and chevron beside it are
     unnamed <svg>, so on a phone the language button had NO accessible name at
     all - a 4.1.2 failure that only exists below 640px, which is why it never
     showed in a desktop audit. Clipped the same way .btn-gold's label below
     already is: the name stays "English" / "ಕನ್ನಡ" and follows the language. */
  .hdr .pill span#langLabel,.hdr .pill span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .hdr .pill{position:relative;padding:0 12px}
}
@media(max-width:480px){
  .hdr .hact{gap:6px}
  .hdr .btn-gold{padding:0 12px}
  .hdr .btn-gold span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}

/* ================= emergency helpline grid =================
   auto-fit gave 5 columns past ~1300px, which left one free cell after 104 —
   not enough for the two-column Map card, so it dropped to a row of its own.
   Four fixed columns make the nine cells fall 4 / 4 / (104 + Map), which is
   where the Map card was asked to sit and keeps every row flush. */
@media(min-width:960px){
  .em-nums{grid-template-columns:repeat(4,1fr)}
  .em-nums .em-num-map{grid-column:span 3}
}

/* ================= Ammu & Gajju, on every page =================
   design.css hides .gw until a scroll handler adds .on. That handler lives in
   the homepage's own inline script, so on the 74 generated pages the class was
   never added and the floating button — and with it the whole chat — stayed at
   opacity:0/visibility:hidden. The widget is meant to be reachable on every
   page at any scroll position, so it is simply always visible. */
.gw{opacity:1;visibility:visible;pointer-events:auto;transform:none}

/* ================= Google website translator =================
   The eight-language menu drives Google's widget, so Google's own chrome must
   never appear: the banner iframe pushes <body> down by 40px with an inline
   style, and the hover tooltip floats over the header. All of it is hidden and
   the page keeps its own top edge. */
.skiptranslate,
#goog-gt-tt,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#google_translate_element{display:none!important}
body{top:0!important}
/* the translator marks changed runs with a yellow wash; the palette is dark */
.goog-text-highlight{background:none!important;box-shadow:none!important;
  color:inherit!important;border:0!important}
/* a translated run must inherit the type it replaced, not Google's font */
font[style]{font:inherit!important;color:inherit!important;
  background:transparent!important;vertical-align:baseline!important}

/* ================= the brand mark =================
   The emblem reads as a seal, so it wants to be larger than the bar is tall.
   It therefore hangs out of the header rather than stretching it: the anchor
   keeps a modest slot in the flex row and the image is positioned inside it,
   oversized and vertically centred. Letting the image size the anchor pushed
   the nav into the language pill at 1440px. */
.hdr .wrap{position:relative}
/* The slot is as wide as the emblem itself. It used to be narrower, which was
   fine while the menu was left-aligned and started well clear of it - but a
   centred menu is positioned from the space that is left, and at 1280px on the
   inner pages the first item ran 10px under the seal. */
.hdr .brand{position:relative;z-index:3;flex:none;
  width:clamp(72px,6vw,96px);height:var(--hdr);display:block}
/* Hung from the TOP of the bar, not centred on it. The emblem is taller than
   the 74px header by design, but centring it split the overhang across both
   edges - and the header sits at y=0, so the half above it was sliced off by
   the viewport and the seal read as a flat-topped disc. Anchoring the top
   inside the bar puts the whole overhang below, which is what "hanging from
   the menu bar" meant. The clamp floor is 70px so the image is never shorter
   than the bar and left floating high. */
.hdr .brand img{position:absolute;left:0;top:4px;transform:none;
  height:clamp(70px,6vw,94px);width:auto;max-width:none;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
@media(max-width:760px){
  /* below the bar's own height, so centre it again */
  .hdr .brand{width:46px}
  .hdr .brand img{height:56px;top:50%;transform:translateY(-50%)}
}
/* the drawer header keeps a plain, in-flow mark */
.drawer .brand{position:static;width:auto;height:auto}
.drawer .brand img{position:static;transform:none;height:42px;filter:none}

/* When the menu was left-aligned and the language pill still carried a wide
   label the bar genuinely ran out of room by 1300px. Centred, and with the
   burger gone once the menu shows, the whole row measures 1230px: 901 of menu,
   93 for the emblem's slot, 176 for the pill and search, 60 of page padding.
   Handing over at 1300 therefore dropped every 1280px laptop to a hamburger
   for no reason. 1240 is the real floor; the switch sits just above it. */
@media(max-width:1259px){
  .hdr .nav{display:none}
  .hdr .burger{display:grid}
}
@media(min-width:1260px){
  /* design.css only switches the menu on at 1270, so lowering the burger's
     cutoff alone left 1260-1269 with no menu and no burger at all. */
  .hdr .nav{display:flex}
  .hdr .burger{display:none}
  /* The inner pages wrap the list in a <nav> landmark; the home page does not.
     flex:1 is on the list, so inside that wrapper it did nothing and the menu
     sat hard against the emblem instead of centring - 10px of clearance on the
     left against 60px on the right. Give the wrapper the band instead. */
  .hdr .wrap>nav{flex:1;min-width:0;display:flex}
}


/* ================= liquid glass =================
   One material for the whole site. Everything that used to be its own colour -
   the gold tile, the maroon tile, the magenta tile, the purple stat card - is
   now the same translucent pane over the photograph behind it, separated only
   by how much gold is in the tint. Colour is carried by the icons and the type,
   not by four competing card fills. */
:root{
  /* Thinner than it was, and defined more by its edge, its blur and its inner
     highlight than by the fill - the same move the home page makes. It does
     not go as far as the home page does, and deliberately: there the pane
     sits on a photograph of the palace, so less fill shows more picture,
     while the inner sections are a flat #0B0511, where the fill IS the card.
     Taken to the home page's .062/.026 the foot of an inner card would land
     within six levels of the page behind it and the card would dissolve. */
  --gl-bg:rgba(255,255,255,.042);
  --gl-bg-2:rgba(255,255,255,.075);
  --gl-gold:rgba(233,188,99,.10);
  --gl-brd:rgba(255,255,255,.19);
  --gl-brd-gold:rgba(233,188,99,.38);
  --gl-blur:saturate(190%) blur(27px);
  --gl-blur-strong:saturate(205%) blur(34px);
  --gl-lift:inset 0 1px 0 rgba(255,255,255,.26),
            inset 0 -1px 0 rgba(0,0,0,.30),
            0 22px 50px -26px rgba(0,0,0,.9);
}

/* the pane itself */
.acts .act,
.rcard,
.h-cdc,
.tile,.hcard,.pb,.buy,.sig,
.cx-cta,.cx-shop,.conc-in,
.wb-stay,.watch-grid .promo,.watch-grid .wb-live,
.gw-panel,.drawer{
  background:linear-gradient(158deg,var(--gl-bg-2),var(--gl-bg))!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-brd)!important;
  box-shadow:var(--gl-lift)!important}

/* ---- the four hero tiles: one family, one accent ---------------------------
   a1 is the primary action, so it alone carries a gold tint; the rest differ
   by their icon, not their fill. */
.acts .act{color:var(--cr-hi)}
.acts .act b,.acts .act strong{color:var(--cr-hi)}
.acts .act small{color:var(--cr-dim)}
.acts .act svg{color:var(--g-lt)}
.acts .act.a1{
  background:linear-gradient(158deg,rgba(233,188,99,.26),rgba(233,188,99,.09))!important;
  border-color:var(--gl-brd-gold)!important}
.acts .act.a1 b,.acts .act.a1 strong{color:#FFF3DC}
.acts .act.a1 small{color:rgba(255,243,220,.78)}
.acts .act.a1 svg{color:#FFE3AC}
.acts .act:hover{
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,.06))!important;
  border-color:var(--gl-brd-gold)!important;transform:translateY(-3px)}
.acts .act.a1:hover{
  background:linear-gradient(158deg,rgba(233,188,99,.34),rgba(233,188,99,.13))!important}

/* ---- Mysuru Now ------------------------------------------------------------
   It was a solid violet block sitting on the photograph. Now it is glass with
   a gold rim, and it drifts a little slower than the page as you scroll. */
/* The stat pane sits on the photograph, so it is the most transparent thing
   on the page: barely any fill, a heavy blur doing the work, and a gold rim to
   keep an edge against the bright parts of the palace. */
.rcard{
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;
  -webkit-backdrop-filter:saturate(210%) blur(36px)!important;
  backdrop-filter:saturate(210%) blur(36px)!important;
  border-color:var(--gl-brd-gold)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 -1px 0 rgba(0,0,0,.3),
             0 28px 60px -26px rgba(0,0,0,.92),
             0 0 40px -28px rgba(233,188,99,.5)!important;
  will-change:transform}
.rcard h3{color:var(--g-lt)}
.now li+li{border-top:1px solid rgba(255,255,255,.07)}
.now .ic{background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)}
.now .val b{color:#FFF6E4}
.now .val small{color:var(--cr-dim)}
.now-more{background:rgba(233,188,99,.12)!important;
  border-color:var(--gl-brd-gold)!important;color:var(--g-lt)}
.now-more:hover{background:rgba(233,188,99,.22)!important}

/* the countdown block under the tiles, same material */
.h-cdc .cd b,.h-cdc b{color:#FFF6E4}

/* ---- the header and its menus --------------------------------------------- */
.hdr{-webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong)}
.drop,.lang-menu{
  -webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong);
  background:linear-gradient(158deg,rgba(24,12,34,.86),rgba(14,7,22,.9))!important;
  border:1px solid var(--gl-brd)!important;
  box-shadow:var(--gl-lift)!important}

/* ---- equal, compact cards --------------------------------------------------
   The live band and the concierge band both had one card setting the height
   and the others rattling around inside it. */
.watch-grid{align-items:stretch}
.watch-grid>*{height:100%;display:flex;flex-direction:column}
.watch-grid .lvplayer{aspect-ratio:16/11;flex:none}
.watch-grid .wb-live .lvcap{margin-top:auto}
.watch-grid .promo{min-height:0;justify-content:center}
@media(min-width:960px){
  .watch-grid>*{max-height:440px}
  .watch-grid .lvplayer{aspect-ratio:auto;height:clamp(150px,20vw,232px)}
}

.cx-grid{align-items:stretch}
.cx-grid>*{height:100%}
.conc-in,.cx-cta,.cx-shop{display:flex;flex-direction:column}
.cx-cta .cx-links,.cx-shop .cx-links{margin-top:auto}
.cx-cta .cx-btn,.cx-shop .cx-btn{margin-top:14px}
@media(min-width:1040px){
  .cx-grid>*{max-height:none}
  .conc-in{justify-content:center}
}

/* ---- the map category filter ----------------------------------------------
   It sits inside the map, over the top-left corner, where the emergency map
   already keeps its own. Left of 56px clears Leaflet's zoom control. The chips
   need their own glass here because the basemap under them is pale. */
.mx-filter{position:absolute;z-index:900;top:12px;left:56px;right:12px;
  display:flex;flex-wrap:wrap;gap:6px;margin:0;max-width:calc(100% - 72px)}
.mx-filter button{
  background:linear-gradient(158deg,rgba(18,9,28,.86),rgba(11,5,17,.9))!important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(233,188,99,.34)!important;color:var(--cr-hi)!important;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.95)}
.mx-filter button.on{
  background:linear-gradient(135deg,var(--g),#f0c463)!important;
  color:#241505!important;border-color:var(--g)!important}
.mx-filter button.on svg{color:#241505!important}
.mx-filter button i{font-style:normal;opacity:.72;font-size:.9em}
.exmap{position:relative}
@media(max-width:700px){
  .mx-filter{left:12px;top:56px;right:12px;max-width:calc(100% - 24px)}
}

/* ---- the concierge card ----------------------------------------------------
   It held one figure floating over the top edge, a heading under it, chips
   wrapping badly and the send button stranded at the foot of a tall empty
   card. Now it is a plain column: both guides at the top, who they are, what
   you might ask, and the way in. */
.conc-in{display:flex!important;flex-direction:column;align-items:stretch!important;
  gap:12px;justify-content:flex-start!important;padding:clamp(18px,1.9vw,24px)!important}
.conc-duo{display:flex;align-items:flex-end;justify-content:flex-start;gap:2px;
  height:clamp(84px,9vw,116px);margin:0 0 2px}
.conc-fig{position:relative;height:100%;width:auto;flex:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  opacity:.44;transform:scale(.9);transform-origin:50% 100%;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.conc-fig.on{opacity:1;transform:scale(1)}
.conc-fig picture{display:block;height:100%}
.conc-fig img{height:100%;width:auto;display:block}
.conc-body{min-width:0}
.conc-body h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem);color:var(--cr-hi);line-height:1.2}
.conc-body p{margin-top:3px;font-family:var(--ui);font-weight:300;
  font-size:.79rem;color:var(--cr-dim)}
.conc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.conc-in .conc-go{position:static!important;margin:2px 0 0;align-self:flex-start}
.conc-in .conc-chat{margin-top:auto}

/* ---- mega menus ------------------------------------------------------------
   The dropdowns were a column of words. Each item now carries its own icon and
   a line saying what is behind it, laid out two across, so the menu reads as a
   map of the section. Same glass as everything else. */
.hdr .drop.mega{
  display:grid;grid-template-columns:repeat(2,minmax(228px,1fr));
  gap:3px;padding:10px;min-width:min(560px,86vw);border-radius:18px}
.hdr .drop.mega>a{
  display:flex;align-items:flex-start;gap:11px;padding:10px 11px;border-radius:12px;
  text-decoration:none;color:inherit;transition:background .2s var(--ease)}
.hdr .drop.mega>a:hover{background:rgba(233,188,99,.13)}
.hdr .drop.mega>a[aria-current="page"]{background:rgba(233,188,99,.18)}
.mm-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(233,188,99,.14);color:var(--g-lt);border:1px solid rgba(233,188,99,.24)}
.mm-ic svg{width:16px;height:16px}
.mm-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-tx b{font-family:var(--ui);font-size:.79rem;font-weight:600;letter-spacing:.03em;
  color:var(--cr-hi);text-transform:none}
.mm-tx small{font-family:var(--ui);font-weight:300;font-size:.69rem;line-height:1.38;
  color:var(--cr-dim)}
/* the last two menus are short, so one column reads better than a ragged two */
.hdr .nav>li:nth-last-child(-n+2) .drop.mega{grid-template-columns:minmax(240px,1fr);
  min-width:290px}
@media(max-width:1300px){
  .hdr .drop.mega{grid-template-columns:minmax(220px,1fr);min-width:0}
}

/* ---- accessibility corrections --------------------------------------------
   Found by an axe-core WCAG 2.2 AA pass. */

/* 1.4.3 contrast. Dimming a whole card with opacity multiplies against the
   text colour's own alpha: .62 card x .62 token = .38, which measured 3.0-3.3:1
   against 4.5:1 required. And it was the LAPSED registrations being dimmed -
   the entries a visitor most needs to read. The card is now marked by its
   badge and a muted border, and its text stays legible. */
.hs-card.is-out{opacity:1;border-style:dashed;border-color:rgba(255,138,138,.4)}
.hs-card.is-out .hs-badge{background:rgba(255,138,138,.16);color:#FFB4B4;
  border:1px solid rgba(255,138,138,.5)}
/* same fault, smaller: a count at .6 on top of a dim colour measured 3.19:1 */
.hs-filter button i,.mx-filter button i,.em-filter button i{opacity:1;color:inherit}

/* 2.4.7 focus visible. These three cleared the outline and put nothing back. */
.news input:focus-visible,.search-in input:focus-visible,.foot-chat input:focus-visible{
  outline:2px solid var(--g-lt);outline-offset:2px}

/* 2.5.8 target size: a standalone action link 46x16 is under the 24px floor */
.mx-more,.mx-item .go{display:inline-flex;align-items:center;min-height:24px;padding-block:4px}

/* the map list row: a container, not a control, with its three controls inside */
.mapx .mx-item{display:flex;flex-direction:column;align-items:stretch;gap:0;cursor:default}
.mapx .mx-pick{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:0;color:inherit;font:inherit}
.mapx .mx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:7px;
  padding-left:45px}
.mapx .mx-acts .go{background:none;border:0;cursor:pointer;padding:4px 0;color:var(--g);
  font-family:var(--ui);font-size:.72rem;font-weight:600;display:inline-flex;
  align-items:center;gap:6px;min-height:24px}
.mapx .mx-acts .go svg{width:13px;height:13px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* heading levels were corrected for 1.3.1; these keep the original look */
.foot .fh{font-family:var(--head,var(--display));font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g);margin-bottom:13px;font-weight:400}
.h-cdc .cd-lab{font-family:var(--ui);font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:8px;color:var(--cr-dim)}

/* drawer group labels: paragraphs now, styled as the headings they replaced */
.drawer .dr-lab{font-family:var(--head,var(--display));color:var(--g);
  font-size:.72rem;letter-spacing:.28em;margin:22px 0 8px;text-transform:uppercase}

/* Measured through the glass against the photograph behind it, not guessed:
   the rail's sub-labels came out at 2.91:1 and the labels at exactly 4.50.
   Making the pane very transparent is what cost them, so these two lift back
   above the 4.5 line while the pane stays as it is. */
.rcard .now .lbl{color:rgba(247,240,228,.92)!important}
.rcard .now .val small{color:rgba(247,240,228,.88)!important}

/* heading levels corrected for 1.3.1; these keep the original appearance */
.rcard .rcard-h{display:flex;align-items:center;gap:8px;font-family:var(--ui);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-lt);
  font-weight:600;margin-bottom:10px}
.rcard .rcard-h a{margin-left:auto;font-size:.66rem;letter-spacing:.06em;
  text-transform:none;color:var(--g);text-decoration:none;display:inline-flex;
  align-items:center;gap:5px}
.rcard .rcard-h svg.sun{width:15px;height:15px;flex:none}
.panel .ph{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g);margin-bottom:10px;font-weight:600}

/* ================= one spacing system, site-wide =================
   One gutter token drives the side padding on every page, and the vertical
   rhythm is deliberately tight: the bands were built for a long single-column
   home page and read as a slideshow everywhere else. Wider at the sides,
   closer together top to bottom. */
:root{--gut:clamp(22px,5vw,72px)}
.wrap,.foot .wrap,.hdr .wrap{padding-inline:var(--gut)}

/* the section bands */
.sec-pad{padding-block:clamp(28px,3.2vw,48px)}
.sec{padding-block:clamp(24px,2.8vw,40px)}
.closer{padding-block:clamp(24px,2.8vw,38px)}
.foot{padding-block:clamp(28px,3vw,42px) clamp(14px,1.6vw,20px)}

/* inside a band: heading to content, and the gap between cards */
.sec-head,.ihead{margin-bottom:clamp(14px,1.6vw,22px)}
.sec-head p,.ihead p{margin-top:4px}
.tiles{gap:clamp(10px,1.2vw,16px)}
.foot-grid{gap:clamp(18px,2.2vw,32px)}

@media(max-width:700px){
  .sec-pad{padding-block:clamp(24px,5vw,34px)}
  .sec{padding-block:clamp(20px,4.4vw,30px)}
  .sec-head,.ihead{margin-bottom:14px}
}

/* ---- the bar keeps its own, tighter gutter ---------------------------------
   header room: the content gutter is deliberately wide, but with the larger
   brand mark the last menu item ran into the language pill at 1440px. The
   sections keep the wide gutter; the header does not. */
.hdr .wrap{padding-inline:clamp(14px,2.2vw,30px);gap:clamp(6px,.8vw,14px)}
.hdr .nav{gap:clamp(2px,.55vw,10px)}
.hdr .nav>li>a,.hdr .nav>li>button{padding-inline:clamp(5px,.6vw,10px)}
.hact{gap:clamp(6px,.7vw,10px)}

/* the four hero tiles read better two-by-two than three and an orphan, now
   that the wider gutter has narrowed the hero column */
@media(min-width:521px){
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ================= the bar: menu centred =================
   The emblem hangs out of the header on the left and the language pill and
   search sit hard right, which left the menu itself pinned to the left edge
   and a wide dead gap before the pill. The nav already takes the remaining
   space; centring inside it balances the bar and pulls HOME clear of the
   oversized seal. */
/* Between the breakpoint and 1400px the menu is centred in the space it has,
   which is the most that fits. */
.hdr .nav{justify-content:center}
/* Above that there is room to centre it on the screen rather than on what is
   left of the screen. The emblem's slot is ~93px of left margin and the
   language pill and search are ~214px of right margin, so band-centring sat
   the menu 60px left of true centre. Taking the list out of the flex row and
   pinning it to 50% fixes that independently of how wide the pill gets when
   the interface is in Kannada or Hindi. 1400px is where the widest menu
   (920px) still clears the pill on both sides. */
@media(min-width:1400px){
  .hdr .wrap{position:relative}
  /* top:50% with the matching -50% on translate. Taking the menu out of
     flow to centre it horizontally also took it out of the header's
     align-items:center, and with top:auto it fell back to the static
     position of a parent that is now zero pixels tall - so the menu hung
     below the centre line while the crest and the language pill stayed on
     it. Both axes are handled here or neither is. */
  .hdr .nav{position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:max-content;max-width:calc(100% - 480px);z-index:1}
}

/* ================= mobile drawer: sub-items =================
   The mega menu gives every link a title and a line of description. The
   drawer was rendering both as one run of text at link size, so a sub-item
   read "Royal HeritagePalaces, monuments and the Wadiyar legacy" in a single
   paragraph. Give them the same two-line shape as the desktop menu, at
   drawer scale. */
.drawer .macc .sub a{display:block;padding:9px 4px 9px 14px;line-height:1.35}
.drawer .macc .sub a b{display:block;font-family:var(--body,inherit);font-weight:500;
  font-size:.86rem;opacity:1}
.drawer .macc .sub a small{display:block;font-size:.72rem;line-height:1.45;
  opacity:.62;margin-top:2px;font-weight:300}
/* four two-line items no longer fit the old cap */
.drawer .macc.open .sub{max-height:640px}

/* the widget's suggestion chips are a horizontal scroller on a 366px panel,
   so the last one or two sit off the right edge with nothing to say so. A
   fade on that edge is the affordance; the row itself is unchanged. */
.gw-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.gw-chips::-webkit-scrollbar{height:0}

/* ================= Google Translate: its own furniture =================
   Three separate things the widget does to a translated page, all of which
   the reader sees as the page twitching:

   1. It paints an animated progress spinner in the top-left of the viewport
      while it works - directly over our emblem. Measured by hit-testing the
      logo on a Kannada page: .VIpgJd-ZVi9od-aZ2wEe-wOHMyf wrapping
      .VIpgJd-ZVi9od-aZ2wEe-OiiCO and an svg.VIpgJd-ZVi9od-aZ2wEe, covering
      roughly 20-85 x 14-68.
   2. It re-runs, and re-shows that spinner, every time the text of any node
      changes - see the countdown fix in home.py.

   The banner's own `top: 40px` on <body> is already cancelled further up
   this file, so it is not repeated here. */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
svg.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-ORHb,
.goog-te-spinner-pos{display:none!important}

/* Outward links to collections the Department does not run. The meta line
   carries the museum's own hours and ticket price, which it owns, not us.

   The card has a media slot. When we hold a photograph we have the right to
   publish, it goes in `img`; until then the slot draws a crest instead of a
   gap. It is NOT filled with a picture lifted from the venue's own site —
   payanamuseum.com is "All Rights Reserved", and a government page
   republishing someone else's photography is the department's exposure. */
.ext-card{display:grid;gap:0;padding:0;overflow:hidden;align-items:stretch}
@media(min-width:720px){.ext-card{grid-template-columns:minmax(0,260px) minmax(0,1fr)}}
.ext-ph{display:block;position:relative;overflow:hidden;background:rgba(233,188,99,.06);
  min-height:168px}
.ext-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ext-crest{display:grid;place-items:center;color:var(--g);
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(233,188,99,.14), transparent 68%),
    linear-gradient(158deg, rgba(255,255,255,.05), rgba(9,4,18,.2));
  border-right:1px solid var(--hair)}
@media(max-width:719px){.ext-crest{border-right:0;border-bottom:1px solid var(--hair);min-height:132px}}
.ext-crest svg{width:46px;height:46px;opacity:.85}
.ext-bd{padding:21px 22px 23px;display:flex;flex-direction:column;gap:9px;min-width:0}
.ext-bd h3{margin:0}
.ext-bd p{margin:0}

.ext-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:.55rem 0 .2rem;
  font-family:var(--ui);font-size:.74rem;letter-spacing:.02em;opacity:.78}
.ext-meta span{display:inline-flex;align-items:center;gap:6px}
.ext-meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6;margin-right:8px}
.tile .btn-line{margin-top:.5rem}

/* ================= the bar hands over when it stops fitting =================
   A pixel breakpoint is a guess about one language. Translated, the menu sets
   much wider - "Eat & Shop" came back from French as "MANGER ET FAIRE DU
   SHOPPING" - and above 1400px the list is absolutely centred with a clamp on
   it, so the surplus did not push anything: it ran straight under the emblem
   on one side and under the language pill on the other.

   i18n.js now measures what the menu needs against what the bar has left and
   sets html[data-nav="compact"] when it does not fit. These rules are the same
   handover the 1259px query performs, keyed on that attribute instead of on a
   width, so it works in any language and at any zoom. The width query stays:
   it covers the page before the script runs. */
/* Stage two: still a full menu, but centred in the room that is left rather
   than on the bar, because the two sides are not the same width. */
html[data-nav="flow"] .hdr .nav{position:static;translate:none;max-width:none}

html[data-nav="compact"] .hdr .nav{display:none}
html[data-nav="compact"] .hdr .burger{display:grid}
/* no longer the centred bar's problem once the list is gone */
html[data-nav="compact"] .hdr .nav{position:static;translate:none;max-width:none}

/* Measuring is only honest if the items cannot quietly squash to fit. */
.hdr .nav>li{flex:none}

/* Inner pages have no separate drawer element - the open menu IS the nav list,
   styled as a sheet by pages.css inside a max-width:1220px query. Compact can
   now begin above that, so the same sheet rules are repeated here against the
   attribute. Without this the burger would open a menu with no layout. */
html[data-nav="compact"] body.nav-open .hdr .nav{display:flex}
html[data-nav="compact"] body.nav-open .nav{
  flex-direction:column;position:fixed;inset:var(--hdr) 0 auto 0;
  background:var(--k-850);border-bottom:1px solid var(--hair);padding:14px;gap:2px;
  max-height:78vh;overflow:auto;z-index:120}
html[data-nav="compact"] body.nav-open .nav .drop{
  position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
  background:transparent;padding-left:12px;display:none}
html[data-nav="compact"] body.nav-open .nav li.open .drop{display:block}

/* Last-resort guard for the moment before the measurement lands, and for a
   reader whose font sets wider than any we tested: the centred list may not
   grow into the emblem or the pill. It cannot be clipped - the mega menus hang
   out of it - so cap it at the real room instead of a hard 480px guess. */
@media(min-width:1400px){
  .hdr .nav{max-width:calc(100% - 2 * max(var(--nav-side, 240px), 0px))}
}

/* ---- the language menu must stay legible over whatever is behind it -----
   At 13" widths the menu opens directly over the "Mysuru Now" panel, whose
   bright card showed through the glass and broke the list up visually. The
   panel keeps its blur but gains enough body to read as one solid surface
   wherever it lands. */
.lang-menu{
  background:linear-gradient(158deg,rgba(22,11,32,.97),rgba(12,6,20,.98))!important;
  box-shadow:0 22px 50px -12px rgba(0,0,0,.75),0 0 0 1px rgba(233,188,99,.16)!important}
/* every row the same shape, whatever its script */
.lang-menu button{justify-content:flex-start;text-align:left;min-height:36px}