/* ==========================================================================
   Inner-page components for Mysuru Tourism.
   Uses only the tokens defined by the approved design layer (design.css):
   --k-900 ground, --g gold, --cr cream, --rose, --display/--body type.
   ========================================================================== */

/* ---------- page hero ---------- */
.pg-hero{position:relative;padding:calc(var(--hdr) + clamp(46px,7vw,92px)) 0 clamp(38px,5.5vw,74px);
  background:var(--k-850);overflow:hidden;isolation:isolate}
/* Two shaped washes rather than one flat blanket: the horizontal pass keeps the
   headline legible on the left, the vertical pass only seals the top edge under
   the header and fades into the page at the bottom. The picture stays visible. */
.pg-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,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%)}
.pg-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);filter:saturate(1.12) contrast(1.04) brightness(1.06)}
/* the copy carries its own shadow now that the wash behind it is lighter */
.pg-hero h1{text-shadow:0 2px 24px rgba(4,1,8,.72),0 1px 3px rgba(4,1,8,.5)}
.pg-hero .lede{color:rgba(247,240,228,.95);
  text-shadow:0 1px 2px rgba(4,1,8,.9),0 2px 16px rgba(4,1,8,.85)}
.crumb{text-shadow:0 1px 8px rgba(4,1,8,.8)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--ui);
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cr-faint);margin-bottom:16px}
.crumb a{color:var(--g);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;opacity:.45}
.pg-hero h1{font-family:var(--display);font-weight:400;line-height:1.03;letter-spacing:.004em;
  font-size:clamp(2.1rem,5.2vw,4rem);color:var(--cr-hi);max-width:19ch}
.pg-hero h1 em{font-style:normal}
.pg-hero .lede{margin-top:15px;max-width:46ch;font-size:1rem;line-height:1.82}
.pg-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.pg-meta span{font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:20px;border:1px solid var(--hair);background:rgba(233,188,99,.07);color:var(--g-lt)}

/* ---------- attraction card grid ---------- */
.agrid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.acard{display:flex;flex-direction:column;background:var(--k-850);border:1px solid var(--hair);
  border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.acard:hover{transform:translateY(-6px);border-color:rgba(233,188,99,.5);
  box-shadow:0 22px 54px rgba(0,0,0,.5)}
.acard .ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--k-800)}
.acard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.acard:hover .ph img{transform:scale(1.07)}
.acard .tag{position:absolute;left:12px;top:12px;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.17em;text-transform:uppercase;padding:6px 11px;border-radius:14px;
  background:rgba(8,3,16,.74);border:1px solid var(--hair);color:var(--g-lt);backdrop-filter:blur(7px)}
.acard .bd{padding:16px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard h3{font-family:var(--display);font-size:1.12rem;line-height:1.26;color:var(--cr-hi);font-weight:400}
.acard p{font-size:.845rem;line-height:1.68;color:var(--cr-dim);font-weight:300;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard .go{margin-top:auto;font-family:var(--ui);font-size:.68rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--g);display:inline-flex;align-items:center;gap:7px}
.acard:hover .go{gap:12px}
.acard .go svg{width:15px;height:15px;transition:transform .4s var(--ease)}

/* ---------- section heads on inner pages ---------- */
.ihead{margin-bottom:clamp(20px,3vw,34px)}
.ihead .kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-size:.63rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--g)}
.ihead .kick::before{content:"";width:26px;height:1px;background:var(--g);opacity:.6}
/* the 404 page carries an h1 here instead of an h2, so it is styled too */
.ihead h2,.ihead h1{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.12;color:var(--cr-hi);margin-top:11px}
.ihead p{margin-top:11px;max-width:62ch;color:var(--cr-dim)}

/* ---------- detail layout ---------- */
/* The two-column rule below already uses minmax(0,1fr), but the single
   column it falls back to under 1000px had no template at all, so the track
   was `auto` and kept min-width:auto - a grid item's floor is its content's
   min-content width. On talakadu-temple that floor is the word
   "Vaidhyanatheshwaraswamy": 313px inside a 276px column at 320px wide,
   which pushed the whole page 15px sideways. It was the only horizontal
   overflow on the site across 468 measurements, and it needed the explicit
   single-column track to fix. */
.det{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,46px);align-items:start}
@media(min-width:1000px){.det{grid-template-columns:minmax(0,1fr) 336px}}
/* Mysuru's temple names are long and unhyphenated. `anywhere` only breaks a
   word that cannot fit on a line of its own, so ordinary prose is untouched
   and it never breaks mid-word in normal reading. */
.prose{font-size:.97rem;line-height:1.85;color:var(--cr-dim);font-weight:300;
  overflow-wrap:anywhere}
.prose h2,.prose h3{font-family:var(--display);color:var(--cr-hi);font-weight:400;
  margin:1.7em 0 .6em;line-height:1.2}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.95rem)} .prose h3{font-size:1.2rem}
.prose p{margin:0 0 1.05em}
.prose a{color:var(--g)}
.prose ul,.prose ol{margin:0 0 1.2em 1.15em}
.prose li{margin:.42em 0}
.prose img{max-width:100%;height:auto;border-radius:var(--r-m);margin:1.2em 0}
.prose strong,.prose b{color:var(--cr);font-weight:500}
.prose blockquote{margin:1.4em 0;padding:14px 20px;border-left:2px solid var(--g);
  background:rgba(233,188,99,.05);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--cr)}

/* ---------- side panel ---------- */
.side{position:sticky;top:calc(var(--hdr) + 16px);display:flex;flex-direction:column;gap:16px}
.panel{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-l);padding:19px 20px}
.panel h4{font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--g);margin-bottom:14px;font-weight:500}
.frow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair-2);
  font-size:.85rem}
.frow:last-child{border-bottom:0}
.frow dt{color:var(--cr-faint);font-weight:300}
.frow dd{color:var(--cr);text-align:right;font-weight:400}

/* ---------- highlights ---------- */
.hl{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hl li{display:flex;gap:11px;font-size:.9rem;line-height:1.68;color:var(--cr-dim);font-weight:300}
.hl li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;
  background:var(--grad-gold);box-shadow:0 0 0 3px rgba(233,188,99,.13)}

/* ---------- gallery ---------- */
.gal{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.gal a{display:block;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--hair);
  background:var(--k-800)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal a:hover img{transform:scale(1.08)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:400;background:rgba(4,1,8,.94);display:none;
  place-items:center;padding:24px;backdrop-filter:blur(6px)}
.lb.on{display:grid}
.lb img{max-width:min(1180px,94vw);max-height:88vh;border-radius:var(--r-m);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb button{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(247,240,228,.12);border:1px solid var(--hair);color:var(--cr);font-size:20px;cursor:pointer}
.lb .nav-l,.lb .nav-r{top:50%;transform:translateY(-50%);right:auto}
.lb .nav-l{left:20px} .lb .nav-r{right:20px}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-m);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:var(--body);font-weight:400;
  font-size:.94rem;color:var(--cr-hi);display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.15rem;color:var(--g);flex:none;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 18px 16px;font-size:.9rem;line-height:1.78;color:var(--cr-dim);font-weight:300}

/* ---------- map ---------- */
.mapwrap{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--hair);background:var(--k-800)}
.mapwrap iframe{display:block;width:100%;height:clamp(280px,42vw,440px);border:0;filter:saturate(.9)}

/* ---------- generic tiles ---------- */
.tiles{display:grid;gap:clamp(13px,1.9vw,20px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-l);padding:21px 21px 23px;
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;transition:.4s var(--ease)}
a.tile:hover{transform:translateY(-4px);border-color:rgba(233,188,99,.45)}
.tile .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(233,188,99,.11);border:1px solid var(--hair);color:var(--g);margin-bottom:3px}
.tile .ic svg{width:20px;height:20px}
.tile h3,.tile h2{font-family:var(--display);font-size:1.1rem;color:var(--cr-hi);font-weight:400;line-height:1.24}
.tile p{font-size:.86rem;line-height:1.7;color:var(--cr-dim);font-weight:300}
.tile .n{font-family:var(--display);font-size:1.9rem;color:var(--g);line-height:1}

/* ---------- itinerary ---------- */
/* The three third-day options are alternatives, not a sequence - you pick
   one. Stacked, they read as steps 1, 2, 3 of the same day. Side by side
   they read as a choice, which is what they are. Three columns from
   900px, two from 620, stacked below that. */
.itin{display:grid;gap:14px;grid-template-columns:1fr}
/* :not(.tfig-steps) matters. The two day-lists beside the sticky photograph
   are .itin.tfig-steps and must stay stacked - they are a sequence, read
   top to bottom, and the figure swaps as you pass each one. Without the
   exclusion this rule squeezed all eleven steps into three columns and the
   morning-to-evening lists became 161px wide at 1024. */
/* auto-fit rather than a fixed three, because the two lists that use this
   do not hold the same number of cards: the third-day options are three,
   the seasons are four. Pinning it at three put one season alone on a
   second row. auto-fit gives each list the row it needs and collapses the
   tracks it does not use. */
@media(min-width:620px){
  .itin:not(.tfig-steps){grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
  .itin:not(.tfig-steps) .step{grid-template-columns:1fr;gap:11px}
}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;background:var(--k-850);
  border:1px solid var(--hair);border-radius:var(--r-l);padding:18px 20px}
.step .num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.02rem;color:#2b1a04;background:var(--grad-gold)}
.step h3{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--cr-hi);margin-bottom:5px}
.step p{font-size:.88rem;line-height:1.72;color:var(--cr-dim);font-weight:300}

/* ---------- contact / helpline ---------- */
.hl-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.hcard{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-m);padding:17px 18px;
  display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:inherit;transition:.35s var(--ease)}
a.hcard:hover{border-color:rgba(233,188,99,.5);transform:translateY(-3px)}
.hcard .ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(179,49,107,.16);border:1px solid rgba(179,49,107,.3);color:var(--rose-lt)}
.hcard .ic svg{width:19px;height:19px}
.hcard b{display:block;font-weight:500;color:var(--cr-hi);font-size:.94rem;margin-bottom:2px}
.hcard span{font-size:.82rem;color:var(--cr-dim);font-weight:300;line-height:1.6}
.hcard .num{font-family:var(--display);font-size:1.3rem;color:var(--g);letter-spacing:.02em}

/* ---------- people table ---------- */
.people{display:grid;gap:11px}
.person{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;
  background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-m);padding:15px 18px}
.person .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-gold);color:#2b1a04;font-family:var(--display);font-size:1.05rem}
.person b{display:block;color:var(--cr-hi);font-weight:500;font-size:.98rem}
.person span{font-size:.83rem;color:var(--cr-dim);font-weight:300;line-height:1.6}

/* ---------- who's who ----------
   Three tiers, because the nine names are not one list: the Ministers who
   answer for tourism, the departmental officers who run it, and the
   district administration. Giving each its own band means a reader looking
   for the Mysuru tourism office is not reading past the Cabinet to find it.

   Only the Ministers carry portraits. Free-licensed photographs exist for
   them; none exist for the IAS and KAS officers, and a government page
   should not fill that gap with a stranger's face or a stock silhouette.
   The monogram is the deliberate alternative, not a missing image - it is
   the same gold disc the rest of the site uses, at a size that holds its
   own against the portraits in the band above. */
.ww-tier{margin:0 0 clamp(34px,4.5vw,58px)}
.ww-tier:last-of-type{margin-bottom:0}
.ww-head{display:flex;align-items:center;gap:14px;margin:0 0 20px;flex-wrap:wrap}
.ww-head h2{margin:0;font-size:clamp(1.05rem,1.6vw,1.32rem);letter-spacing:.01em;white-space:nowrap}
.ww-head i{height:1px;flex:1;min-width:30px;
  background:linear-gradient(90deg,var(--hair),transparent)}
.ww-head span{font-family:var(--ui);font-size:.69rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--cr-dim);white-space:nowrap}

.ww-grid{display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.ww-card{margin:0;background:var(--k-850);border:1px solid var(--hair);
  border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column}
.ww-por{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--k-800)}
.ww-por img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ww-card figcaption{padding:14px 16px 16px;border-top:1px solid var(--hair)}
.ww-card b{display:block;font-family:var(--display);color:var(--cr-hi);
  font-weight:400;font-size:1.02rem;line-height:1.3}
.ww-card figcaption span{display:block;margin-top:5px;font-size:.8rem;
  color:var(--cr-dim);font-weight:300;line-height:1.55}

/* Two columns at most, and never by auto-fit. Each row carries a name, a
   two-line office and a phone pill; auto-fit happily made four tracks of
   345px on a 1920 screen, which left about 130px for the name. The
   breakpoint is explicit so the row always has room to read. */
.ww-rows{display:grid;gap:11px;grid-template-columns:1fr}
@media (min-width:900px){.ww-rows{grid-template-columns:1fr 1fr}}
.ww-rows>.ww-row:only-child{grid-column:1/-1}
.ww-row{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;
  background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-m);
  padding:15px 18px}
.ww-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-gold);color:#2b1a04;font-family:var(--display);font-size:1.05rem}
/* the same circle, holding a face instead of an initial - no gold fill
   behind it, a thin gold ring instead, and the crop favours the head */
.ww-av-img{background:none;overflow:hidden;flex:0 0 auto;padding:0;
  border:1px solid rgba(233,188,99,.55);
  box-shadow:0 0 0 3px rgba(233,188,99,.10)}
.ww-av-img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  display:block}
.ww-txt b{display:block;color:var(--cr-hi);font-weight:500;font-size:.98rem}
.ww-txt>span{display:block;font-size:.83rem;color:var(--cr-dim);font-weight:300;line-height:1.6}
.ww-tel{font-family:var(--ui);font-size:.8rem;color:var(--gold-lt);white-space:nowrap;
  border:1px solid var(--hair);border-radius:999px;padding:6px 13px;transition:.25s var(--ease)}
.ww-tel:hover{border-color:var(--gold);background:rgba(232,180,74,.13)}

.ww-foot{margin:clamp(26px,3vw,38px) 0 0;padding-top:17px;border-top:1px solid var(--hair);
  font-size:.76rem;line-height:1.75;color:var(--cr-dim);font-weight:300;max-width:74ch}

@media (max-width:620px){
  .ww-row{grid-template-columns:auto 1fr;row-gap:11px}
  .ww-tel{grid-column:2;justify-self:start}
}

/* ---------- Maps & Guides: grouped index + filter ---------- */
.mg-tools{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 18px}
.mg-search{position:relative;flex:1 1 300px;min-width:0;display:flex;align-items:center}
.mg-si{position:absolute;left:14px;display:grid;place-items:center;color:var(--g);
  pointer-events:none}
.mg-si svg{width:17px;height:17px}
.mg-search input{width:100%;font-family:var(--ui);font-size:.93rem;color:var(--cr-hi);
  background:var(--k-850);border:1px solid var(--hair);border-radius:999px;
  padding:12px 42px 12px 42px;transition:.22s var(--ease)}
.mg-search input::placeholder{color:var(--cr-dim)}
.mg-search input:focus{outline:none;border-color:var(--g);
  box-shadow:0 0 0 3px rgba(233,188,99,.16)}
/* the browser's own clear affordance would sit beside ours */
.mg-search input::-webkit-search-cancel-button{display:none}
.mg-clear{position:absolute;right:8px;display:grid;place-items:center;width:30px;height:30px;
  border:0;background:none;color:var(--cr-dim);cursor:pointer;border-radius:50%}
.mg-clear:hover{color:var(--cr-hi);background:rgba(247,240,228,.08)}
.mg-clear svg{width:15px;height:15px}

.mg-chips{display:flex;flex-wrap:wrap;gap:8px}
.mg-chip{font-family:var(--ui);font-size:.78rem;letter-spacing:.04em;color:var(--cr-dim);
  background:var(--k-850);border:1px solid var(--hair);border-radius:999px;
  padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:.22s var(--ease)}
.mg-chip i{font-style:normal;font-size:.7rem;color:var(--g);opacity:.85}
.mg-chip:hover{border-color:var(--g);color:var(--cr-hi)}
.mg-chip.is-on{background:rgba(233,188,99,.14);border-color:var(--g);color:var(--cr-hi)}
.mg-chip.is-on i{opacity:1}

.mg-count{font-family:var(--ui);font-size:.8rem;color:var(--cr-dim);margin:0 0 14px;min-height:1.2em}
.mg-none{font-size:.92rem;color:var(--cr-dim);margin:18px 0 0}
.mg-reset{font:inherit;color:var(--gold-lt);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.mg-group{margin:0 0 clamp(26px,3.4vw,44px)}
.mg-group[hidden]{display:none}
.mg-gh{display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--cr-hi)}
.mg-gh::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--hair),transparent)}
.mg-n{font-family:var(--ui);font-size:.72rem;color:var(--g);
  border:1px solid var(--hair);border-radius:999px;padding:3px 9px;order:1}
.mg-card[hidden]{display:none}

@media(max-width:620px){
  .mg-tools{flex-direction:column;align-items:stretch}
  /* min-width:0 and width:100% are what make this scroll rather than push.
     A flex item's default min-width is auto - its content - so the chip row
     sized itself to all six chips laid end to end (711px) and took the page
     with it: 177px of horizontal overflow at 320. overflow-x:auto cannot
     help until the box is allowed to be narrower than what is inside it. */
  .mg-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    min-width:0;width:100%;
    scrollbar-width:none;-ms-overflow-style:none}
  .mg-chips::-webkit-scrollbar{display:none}
  .mg-chip{flex:0 0 auto}
}

/* ---------- Dasara: book tickets ---------- */
.ds-cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ds-book{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold),#f0c463);color:#3a2400;
  font-family:var(--ui);font-weight:700;font-size:.88rem;letter-spacing:.02em;
  padding:13px 22px;border-radius:999px;
  box-shadow:0 10px 26px -10px rgba(232,180,74,.6);transition:.26s var(--ease)}
.ds-book:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(232,180,74,.75)}
.ds-book svg{width:17px;height:17px;flex:none}
.ds-cta p{margin:0;flex:1 1 320px;min-width:0;font-size:.82rem;line-height:1.7;
  color:var(--cr-dim);font-weight:300}

/* ---------- Dasara: the day-by-day programme ---------- */
.ds-sched{display:grid;gap:10px;margin-top:6px}
.ds-day{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-m);
  overflow:hidden}
.ds-day>summary{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 18px;list-style:none;transition:.2s var(--ease)}
.ds-day>summary::-webkit-details-marker{display:none}
.ds-day>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:1.8px solid var(--g);border-bottom:1.8px solid var(--g);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.ds-day[open]>summary::after{transform:rotate(-135deg)}
.ds-day>summary:hover{background:rgba(233,188,99,.06)}
.ds-d{font-family:var(--display);font-size:1.02rem;color:var(--cr-hi);white-space:nowrap}
.ds-t{font-family:var(--ui);font-size:.76rem;letter-spacing:.07em;color:var(--cr-dim);
  text-transform:uppercase}
.ds-n{font-family:var(--ui);font-size:.7rem;color:var(--g);border:1px solid var(--hair);
  border-radius:999px;padding:3px 9px;margin-left:4px}
/* the chart scrolls sideways on a phone rather than squeezing three columns
   into 320px; the venue column is the one that needs the room */
.ds-wrap{overflow-x:auto;border-top:1px solid var(--hair)}
.ds-tbl{width:100%;border-collapse:collapse;min-width:560px}
.ds-tbl th,.ds-tbl td{text-align:left;vertical-align:top;padding:11px 18px;
  font-size:.86rem;line-height:1.6;border-bottom:1px solid var(--hair-2)}
.ds-tbl thead th{font-family:var(--ui);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--cr-dim);font-weight:400;
  background:rgba(247,240,228,.03)}
.ds-tbl tbody th{font-family:var(--ui);color:var(--gold-lt);font-weight:500;
  white-space:nowrap;width:1%}
.ds-tbl td{color:var(--cr-dim);font-weight:300}
.ds-tbl td:first-of-type{color:var(--cr)}
.ds-tbl tbody tr:last-child th,.ds-tbl tbody tr:last-child td{border-bottom:0}
.ds-src{margin:18px 0 0;font-size:.78rem;line-height:1.75;color:var(--cr-dim);
  font-weight:300;max-width:76ch}
.ds-src a{color:var(--gold-lt)}
@media(max-width:620px){
  .ds-day>summary{flex-wrap:wrap;gap:7px 10px}
  .ds-t{width:100%;order:3}
}

/* ---------- full-bleed parallax band (inner pages) ----------
   The same component the home page carries, ported here so a section can be
   a photograph with the words on it rather than a figure beside a column.
   Geometry matches home_sections.css deliberately: -14% overhang against an
   8% travel, which is what keeps the whole subject in frame at both ends of
   the movement - the numbers were measured on the home page and there is no
   reason for two of them. */
.ipx{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(64px,9vw,132px);
  margin-inline:calc(50% - 50vw);width:100vw}
.ipx-bg{position:absolute;inset:-14% 0;z-index:-2}
.ipx-bg img{width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform;transform:translate3d(0,0,0);
  filter:saturate(1.10) contrast(1.03) brightness(1.14)}
/* The scrim was in the wrong place, and that is also why the band looked so
   dark. .ipx-in is `max-width:58ch; margin-inline:auto`, so unlike the home
   band its text is CENTRED - measured in the browser at 1440: the words sit
   between x 35% and 65%. The old ramp ran .92 at the left edge down to .22 at
   the right, which is almost opaque where there is no text and nearly gone
   where there is. Measured over Chamundi-Hill-5, per pixel:

       live:  heading 3.13   body 2.97   kicker 1.89     (AA wants 3.0 / 4.5)

   - the body copy on this band has been failing AA by a wide margin, and the
   left fifth of the photograph was sitting at 0.006 luminance, i.e. black.

   The ramp is now symmetric about the text instead: heavy through the middle
   where the words are, releasing to both edges where the picture is.

       now:   heading 6.03   body 5.72   kicker 4.96
       band luminance 0.045 -> 0.060, left edge 0.006 -> 0.069

   brighter where it is seen and legible where it is read, which the old one
   had exactly backwards. The kicker moves to --g-lt for the same reason as
   on the home band: #E9BC63 cannot reach 4.5 here. */
.ipx::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(11,5,17,.26) 0%,rgba(11,5,17,.40) 18%,
      rgba(11,5,17,.62) 30%,rgba(11,5,17,.70) 40%,rgba(11,5,17,.70) 60%,
      rgba(11,5,17,.62) 70%,rgba(11,5,17,.40) 82%,rgba(11,5,17,.26) 100%),
    linear-gradient(180deg,rgba(11,5,17,.20) 0%,transparent 14%,
      transparent 84%,rgba(11,5,17,.38) 100%)}
.ipx-in{max-width:58ch;margin-inline:auto;
  padding-inline:clamp(18px,5vw,64px);width:min(var(--max,1560px),100%)}
.ipx-k{font-family:var(--ui);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g-lt);display:block;margin-bottom:10px}
.ipx-in h2{font-family:var(--display);font-weight:400;color:var(--cr-hi);
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.16;margin:0}
/* same reasoning as .pxb-in h2 em - a tight text-shadow on solid text,
   not a wide blur behind it */
.ipx-in h2 em{font-style:normal;
  background:var(--grad-head-lift,linear-gradient(100deg,#FFC23D 0%,#FFD98A 32%,#FFB4C6 66%,#FF8FBE 100%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 2px rgba(11,5,17,.9)) drop-shadow(0 3px 10px rgba(11,5,17,.6))}
.ipx-in p{margin-top:12px;font-family:var(--ui);font-weight:300;
  font-size:.92rem;line-height:1.7;color:var(--cr);
  text-shadow:0 1px 12px rgba(11,5,17,.95),0 1px 3px rgba(11,5,17,.9)}
@media(prefers-reduced-motion:reduce){.ipx-bg img{transform:none!important}}

/* ---------- Yatri Mitra ---------- */
/* The helpline is the only thing on this page anyone needs in a hurry, so
   it is the first thing under the hero and it is a phone-sized target, not
   a line of body copy with a tel: on it. */
.ym-call{display:flex;gap:clamp(14px,2.2vw,24px);align-items:flex-start;
  padding:clamp(18px,2.6vw,28px);border-radius:var(--r-l,20px);
  border:1px solid rgba(233,188,99,.30);
  background:linear-gradient(158deg,rgba(23,11,32,.92),rgba(11,5,17,.86))}
/* NOT .ym-call > .ic any more. Wrapping the icon and text in
   .ym-call-txt to make room for the photograph broke this child
   combinator, so the icon lost its width, grew to 300px and shoved
   the number 106px off the right edge at 320. Descendant selector. */
.ym-call .ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-gold);color:#2b1a04}
.ym-call .ic svg{width:22px;height:22px}
.ym-k{display:block;font-family:var(--ui);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g);margin-bottom:6px}
.ym-num{display:inline-block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.05;color:var(--cr-hi);
  text-decoration:none;letter-spacing:.02em}
.ym-num:hover,.ym-num:focus-visible{color:var(--g-lt)}
.ym-call p{margin-top:10px;max-width:62ch;font-family:var(--ui);font-weight:300;
  font-size:.86rem;line-height:1.65;color:var(--cr-dim)}
.ym-call p a{color:var(--g-lt)}
/* the helpline card: the number on one side, the vehicle on the other */
.ym-call{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  gap:clamp(18px,3vw,38px);align-items:center}
.ym-call-txt{display:flex;gap:clamp(14px,2.2vw,24px);align-items:flex-start;min-width:0}
.ym-call-fig{margin:0;border-radius:var(--r-m,14px);overflow:hidden;
  border:1px solid rgba(233,188,99,.22);min-width:0}
.ym-call-fig img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
/* the long explanation, with the vehicle beside it instead of white space */
/* The figure column was 21rem against a 72ch measure, which on a wide
   screen left the prose short of the gutter and the picture stranded well
   out to the right with a hole between them. 30rem for the picture and a
   64ch measure closes the gap and makes the photograph worth looking at. */
.ym-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);
  gap:clamp(26px,3.4vw,48px);align-items:start}
/* No measure cap inside the grid. Capping it at 64ch while the column was
   wider left 241px of nothing between the last word and the picture - the
   text has to reach the gap for this to read as two columns rather than a
   paragraph with a photograph parked beside it. The column itself keeps the
   measure sane: ~76ch at 1440, less below that. */
.ym-two .prose{min-width:0;max-width:none}
.ym-fig{margin:0;position:sticky;top:calc(var(--hdr,75px) + 26px);
  border-radius:var(--r-l,20px);overflow:hidden;border:1px solid var(--hair);
  background:var(--k-850);min-width:0}
/* the second figure is a 4:5 portrait; without a ceiling a 30rem column
   would make it 600px tall and it would run past the list beside it */
.ym-fig img{display:block;width:100%;height:auto;max-height:580px;object-fit:cover}
/* the facts column sets its own ratio: a 4:5 frame beside a list of five
   rows balances where a 4:3 one leaves a gap under it */
.ym-two .ym-facts + .ym-note{margin-bottom:0}
.ym-fig figcaption{padding:11px 14px 13px;font-family:var(--ui);font-weight:300;
  font-size:.68rem;line-height:1.55;color:var(--cr-dim)}
@media(max-width:900px){
  .ym-call{grid-template-columns:minmax(0,1fr)}
  .ym-call-fig{order:-1}
  .ym-two{grid-template-columns:minmax(0,1fr)}
  .ym-fig{position:static;max-width:460px}
}
/* a definition list, because that is what it is */
.ym-facts{display:grid;gap:0;margin:0;max-width:86ch}
.ym-facts>div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:4px 22px;padding:14px 0;border-top:1px solid var(--hair)}
.ym-facts>div:last-child{border-bottom:1px solid var(--hair)}
.ym-facts dt{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g);padding-top:3px}
.ym-facts dd{margin:0;font-family:var(--ui);font-weight:300;font-size:.92rem;
  line-height:1.65;color:var(--cr)}
.ym-note{margin-top:20px;max-width:76ch;font-family:var(--ui);font-weight:300;
  font-size:.86rem;line-height:1.7;color:var(--cr-dim);
  border-left:2px solid rgba(233,188,99,.45);padding-left:16px}
.ym-note b{color:var(--cr-hi);font-weight:500}
@media(max-width:640px){
  .ym-facts>div{grid-template-columns:minmax(0,1fr)}
  .ym-call{flex-direction:column;gap:12px}
}

/* ---------- long documents: privacy, terms ---------- */
/* These were a single column of prose and nothing else. The reader of a
   legal page wants one clause, not the whole page, so the right-hand column
   is a contents list rather than ornament - and it is sticky, so it stays
   with them. The picture above it is there to give the eye somewhere to
   rest; it carries no information and says so in its caption. */
.doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(28px,4vw,64px);align-items:start}
.doc-body{min-width:0;max-width:76ch}
.doc-side{position:sticky;top:calc(var(--hdr,75px) + 26px);min-width:0;
  display:flex;flex-direction:column;gap:18px}
.doc-fig{margin:0;border-radius:var(--r-l,20px);overflow:hidden;
  border:1px solid var(--hair);background:var(--k-850)}
.doc-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.doc-fig figcaption{padding:11px 14px 13px;font-family:var(--ui);font-weight:300;
  font-size:.68rem;line-height:1.55;color:var(--cr-dim)}
.doc-toc{display:flex;flex-direction:column;gap:2px;padding:16px 4px 6px;
  border-top:1px solid var(--hair)}
.doc-toc b{font-family:var(--ui);font-weight:500;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:8px}
.doc-toc a{font-family:var(--ui);font-weight:300;font-size:.82rem;line-height:1.5;
  color:var(--cr-dim);text-decoration:none;padding:6px 10px;border-radius:9px;
  border-left:2px solid transparent;transition:.18s var(--ease)}
.doc-toc a:hover,.doc-toc a:focus-visible{color:var(--cr-hi);
  background:rgba(233,188,99,.07);border-left-color:var(--g)}
/* a heading the contents list jumps to must not land under the sticky bar */
.doc-body h2[id],.doc-body h3[id]{scroll-margin-top:calc(var(--hdr,75px) + 24px)}
/* "+91 821 242 2096" was breaking after "242" and finishing on the next
   line. A phone number is one token to a reader even though it has spaces. */
.prose a[href^="tel:"],.doc-body a[href^="tel:"]{white-space:nowrap}
/* the same number in the footer wrapped after "242" too */
.foot-mail a[href^="tel:"],.fb-id a[href^="tel:"]{white-space:nowrap}
@media(max-width:960px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc-side{position:static;order:-1;flex-direction:row;gap:16px;align-items:flex-start}
  .doc-fig{flex:1 1 40%;min-width:0}
  .doc-toc{flex:1 1 60%;border-top:0;padding-top:0}
}
@media(max-width:620px){
  .doc-side{flex-direction:column}
  .doc-fig{width:100%}
}

/* ---------- the enquiry form ---------- */
/* The form was capped at 62ch inside a 1fr column, so on a wide screen it
   stopped well short of the panel and left a hole between them - the same
   fault the Yatri Mitra sections had. The form fills its column now, and
   the panel is wider because it is the alternative to the form, not a
   footnote to it. */
.enq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  gap:clamp(24px,3vw,44px);align-items:start}
.enq{display:flex;flex-direction:column;gap:16px;min-width:0;max-width:none;
  position:relative}
.enq-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld>span{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cr-dim)}
.fld>span i{font-style:normal;color:var(--g)}
.fld input,.fld textarea{width:100%;font-family:var(--ui);font-size:.95rem;
  font-weight:300;color:var(--cr-hi);background:var(--k-850);
  border:1px solid var(--hair);border-radius:12px;padding:12px 14px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fld textarea{resize:vertical;min-height:120px;line-height:1.6}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--g);
  box-shadow:0 0 0 3px rgba(233,188,99,.16)}
.fld input[aria-invalid],.fld textarea[aria-invalid]{border-color:#E58BB4}
.fld-err{font-family:var(--ui);font-size:.72rem;color:#F0A9C4;min-height:0}
.fld-err:empty{display:none}
.fld-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 11px;
  align-items:start;cursor:pointer}
.fld-check input{width:18px;height:18px;margin-top:2px;accent-color:#E9BC63;flex:0 0 auto}
.fld-check>span{font-family:var(--ui);font-weight:300;font-size:.84rem;
  line-height:1.6;color:var(--cr-dim)}
.fld-check .fld-err{grid-column:2}
.enq-send{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:4px}
.enq-send small{font-family:var(--ui);font-weight:300;font-size:.74rem;
  line-height:1.6;color:var(--cr-dim);max-width:52ch}
.enq-out{padding:14px 16px;border-radius:12px;font-family:var(--ui);font-weight:300;
  font-size:.88rem;line-height:1.6}
.enq-out.good{background:rgba(155,227,201,.09);border:1px solid rgba(155,227,201,.34);
  color:var(--cr)}
.enq-out.bad{background:rgba(229,139,180,.09);border:1px solid rgba(229,139,180,.38);
  color:var(--cr)}
.enq-out b{color:var(--cr-hi);font-weight:500}
.enq-out a{color:var(--g-lt)}
/* the panel beside it */
.enq-aside{min-width:0;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l,20px);
  border:1px solid var(--hair);background:var(--k-850)}
.enq-aside h3{font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--cr-hi);margin:0 0 10px}
.enq-aside p{font-family:var(--ui);font-weight:300;font-size:.85rem;line-height:1.65;
  color:var(--cr-dim);margin:0 0 14px}
.enq-aside .btn-line{width:100%;justify-content:center}
.enq-note{margin:16px 0 0!important;padding-top:14px;border-top:1px solid var(--hair);
  font-size:.78rem!important}
.enq-note a{color:var(--g-lt)}
@media(max-width:900px){
  .enq-wrap{grid-template-columns:minmax(0,1fr)}
  .enq{max-width:none}
}

/* the Ammu & Gajju panel beside the contact form */
.enq-aside{text-align:center}
.enq-pair{display:flex;align-items:flex-end;justify-content:center;gap:4px;
  margin:-6px 0 12px}
.enq-pair img{height:clamp(92px,13vw,126px);width:auto;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.enq-pair img:first-child{margin-right:-10px}
.enq-aside h3{margin-bottom:8px}
.enq-aside p{text-align:left}

/* ---------- utility ---------- */
.sec{padding:clamp(40px,6vw,86px) 0;background:var(--k-900);position:relative}
.sec.alt{background:var(--k-850)}
.note{border:1px dashed var(--hair);border-radius:var(--r-m);padding:15px 18px;
  font-size:.86rem;line-height:1.72;color:var(--cr-faint);background:rgba(233,188,99,.04)}
.btn-line{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g);text-decoration:none;
  border:1px solid var(--hair);border-radius:26px;padding:12px 22px;transition:.35s var(--ease)}
.btn-line:hover{background:rgba(233,188,99,.1);border-color:rgba(233,188,99,.55)}
.btn-line svg{width:15px;height:15px}

/* nav open states used by site.js */
.nav li.open .drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.hdr.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.45)}
.reveal,.acard,.tile,.step,.hcard{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in,.acard.in,.tile.in,.step.in,.hcard.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.acard,.tile,.step,.hcard{opacity:1;transform:none}}
@media(max-width:1220px){
  body.nav-open .nav{display:flex;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}
  body.nav-open .nav .drop{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:transparent;padding-left:12px;display:none}
  body.nav-open .nav li.open .drop{display:block}
}

/* bilingual blocks: the switcher picks which one shows */
[data-l="kn"]{display:none}
html[data-lang="kn"] [data-l="kn"]{display:block}
html[data-lang="kn"] [data-l="en"]{display:none}
html[data-lang="kn"] [data-l="kn"]{font-family:'Noto Serif Kannada',var(--body);line-height:1.95}

/* ---------- message from the Deputy Director ---------- */
.msg{display:grid;gap:clamp(22px,3vw,40px);align-items:start}
@media(min-width:900px){.msg{grid-template-columns:300px minmax(0,1fr)}
  /* With no portrait the letter must not be left standing in the 300px
     column with an empty 1fr beside it. */
  .msg.msg-solo{grid-template-columns:minmax(0,1fr)}}
.msg-por{margin:0;position:sticky;top:calc(var(--hdr) + 18px)}
.msg-por img{width:100%;height:auto;display:block;border-radius:var(--r-l);
  border:1px solid var(--hair);box-shadow:0 22px 52px -28px #000}
.msg-por figcaption{margin-top:13px;text-align:center}
.msg-por b{display:block;font-family:var(--display);font-weight:400;font-size:1.08rem;color:var(--cr-hi)}
.msg-por span{display:block;font-size:.8rem;color:var(--cr-faint);margin-top:3px}
.msg-kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-size:.63rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--g)}
.msg-kick::before{content:"";width:26px;height:1px;background:var(--g);opacity:.6}
.msg-pull{margin:14px 0 22px;padding:0 0 0 18px;border-left:2px solid var(--g);
  font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.5vw,1.9rem);
  line-height:1.3;color:var(--cr-hi)}
.msg-body .prose p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-size:3.1rem;line-height:.84;
  padding:4px 11px 0 0;color:var(--g)}
.msg-sign{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);
  font-family:var(--display);font-size:1.05rem;color:var(--cr-hi)}
.msg-sign span{font-family:var(--body);font-size:.84rem;color:var(--cr-dim);font-weight:300}
@media(max-width:899px){.msg-por{position:static;max-width:260px;margin-inline:auto}}

/* ---------- registered homestay directory ---------- */
.hs-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2.4vw,26px)}
.hs-filter button{font-family:var(--ui);font-size:.74rem;letter-spacing:.04em;cursor:pointer;
  padding:9px 15px;border-radius:22px;border:1px solid var(--hair);background:rgba(247,240,228,.05);
  color:var(--cr-dim);transition:.28s var(--ease)}
.hs-filter button i{font-style:normal;opacity:.6;margin-left:5px}
.hs-filter button:hover{border-color:rgba(233,188,99,.5);color:var(--cr-hi)}
.hs-filter button.on{background:rgba(233,188,99,.16);border-color:rgba(233,188,99,.6);color:var(--g-hi)}
.hs-grid{display:grid;gap:clamp(12px,1.8vw,18px);grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.hs-card{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-l);
  padding:18px 19px 17px;display:flex;flex-direction:column;gap:11px}
.hs-card.is-out{opacity:.62;border-style:dashed}
.hs-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hs-card h3{font-family:var(--display);font-weight:400;font-size:1.06rem;line-height:1.28;
  color:var(--cr-hi);margin:0}
.hs-badge{flex:none;font-family:var(--ui);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:14px;white-space:nowrap}
.hs-ok{background:rgba(155,227,201,.14);border:1px solid rgba(155,227,201,.36);color:#9BE3C9}
.hs-out{background:rgba(255,138,138,.12);border:1px solid rgba(255,138,138,.34);color:#FF8A8A}
.hs-addr{font-size:.84rem;line-height:1.62;color:var(--cr-dim);font-weight:300;margin:0}
.hs-meta{margin:0}
.hs-meta .frow{padding:6px 0;font-size:.8rem}
.hs-reg{font-family:var(--ui);font-size:.72rem;letter-spacing:.02em;word-break:break-all}
.hs-tel{display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:flex-start;
  padding:9px 15px;border-radius:22px;text-decoration:none;
  background:rgba(233,188,99,.12);border:1px solid rgba(233,188,99,.32);color:var(--g-hi);
  font-family:var(--ui);font-size:.8rem;letter-spacing:.03em;transition:.28s var(--ease)}
.hs-tel:hover{background:var(--grad-gold);color:#2b1a04;border-color:transparent}
.hs-tel svg{width:15px;height:15px}
.hs-src{margin-top:22px;font-size:.76rem;color:var(--cr-faint);line-height:1.7}
.hs-card[hidden]{display:none!important}
.hs-tels{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.hs-tels .hs-tel{margin-top:0}

/* ---- placeholder property listings ------------------------------------
   These cards have to read as obviously not-real at a glance, or a tester
   will take them for the department's own directory. Muted against the live
   homestay cards, a badge on every one, and a line of small print inside. */
.note.is-warn{border-color:rgba(233,188,99,.5);
  background:linear-gradient(150deg,rgba(233,188,99,.12),rgba(233,188,99,.04))}
.note.is-warn b{color:var(--g-lt)}
.hs-card.is-sample{border-style:dashed;opacity:.94}
.hs-badge.is-sample{background:rgba(233,188,99,.16);color:var(--g-lt);
  border:1px solid rgba(233,188,99,.45)}
.sm-note{font-family:var(--ui);font-weight:300;font-size:.79rem;line-height:1.5;
  color:var(--cr-dim);margin-top:10px}
.sm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.sm-tags span{font-family:var(--ui);font-size:.66rem;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;color:var(--cr-dim);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sm-foot{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(233,188,99,.28);
  font-family:var(--ui);font-size:.66rem;letter-spacing:.03em;color:var(--cr-faint)}
.sm-lead{margin:14px 0 18px;font-family:var(--ui);font-weight:300;font-size:.8rem;
  line-height:1.6;color:var(--cr-dim);max-width:70ch}
.hs-card.is-sample .hs-meta{margin-top:12px}

/* ---- the count on a collection tile ---------------------------------------
   It sat under the description as a loose numeral, reading as body text. It is
   a count, so it belongs in the corner as a badge. */
.tile{position:relative}
.tile h3,.tile h2,.tile p{padding-right:46px}
.tile .n{position:absolute;top:13px;right:13px;
  min-width:36px;height:29px;padding:0 10px;border-radius:999px;
  display:inline-grid;place-items:center;
  font-family:var(--display);font-weight:400;font-size:1.02rem;line-height:1;
  color:var(--g-lt);
  background:linear-gradient(145deg,rgba(233,188,99,.22),rgba(233,188,99,.07));
  border:1px solid rgba(233,188,99,.4);
  box-shadow:0 6px 16px -10px #000}

/* ---- the picture on a placeholder listing ---------------------------------
   A designed tile, never a photograph: a real Mysuru photo above an invented
   hotel name would imply a property that does not exist. */
.hs-ph{display:grid;place-items:center;aspect-ratio:16/7;border-radius:12px;
  margin-bottom:13px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(233,188,99,.07) 0 10px,
    rgba(233,188,99,.02) 10px 20px);
  border:1px dashed rgba(233,188,99,.3)}
.hs-ph svg{width:30px;height:30px;color:rgba(233,188,99,.62)}
.hs-ph span{position:absolute;bottom:7px;right:9px;font-family:var(--ui);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cr-faint)}

/* ---- the distances map on How to Reach ------------------------------------ */
.rmap-wrap{margin-top:clamp(18px,2.2vw,28px)}
.rmap-h{font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--cr-hi);margin-bottom:11px}
.rmap{height:clamp(300px,42vh,460px);border-radius:var(--r-l,18px);overflow:hidden;
  border:1px solid rgba(233,188,99,.26);background:var(--k-850)}
.rmap-note{margin-top:9px;font-family:var(--ui);font-weight:300;font-size:.72rem;
  color:var(--cr-faint)}
.rmap-pin{display:block;width:16px;height:16px;border-radius:50%;
  background:#E9BC63;border:2.5px solid #2b1a05;
  box-shadow:0 0 0 3px rgba(233,188,99,.28),0 4px 10px -3px #000}
.rmap-pin.is-home{width:20px;height:20px;background:#E58BB4;
  box-shadow:0 0 0 4px rgba(229,139,180,.3),0 4px 10px -3px #000}
.rmap .leaflet-popup-content-wrapper{background:var(--k-800);color:var(--cr);
  border:1px solid rgba(233,188,99,.3);border-radius:12px}
.rmap .leaflet-popup-content{font-family:var(--ui);font-size:.78rem;line-height:1.5}
.rmap .leaflet-popup-content b{color:var(--cr-hi)}
.rmap .leaflet-popup-content a{color:var(--g);font-weight:600}
.rmap .leaflet-popup-tip{background:var(--k-800)}

/* ---- the gradient word in a hero headline ---------------------------------
   h1 carries a text-shadow, but the <em> is painted with background-clip:text
   and so is transparent - a text-shadow renders behind nothing and is simply
   not drawn. On a bright hero (Festivals, Royal Heritage) the pale end of the
   gradient then sat on a sunlit sky with no contrast at all.

   The drop-shadow is the fix, and it stays: unlike text-shadow it follows
   the painted glyph.

   What does NOT stay is the gradient that came with it. Swapping --grad-head
   for a three-stop ramp ending at #E9A6C0 took the deep rose off the end,
   and that end is the whole reason the site's headings read as colour -
   compare "build the days" on the home page, which kept --grad-head, with
   this one, which did not. A ramp from light gold to pale cream has almost
   no saturation left in it; over a photograph the eye calls that grey long
   before any contrast ratio complains. Back to the site's own gradient, so
   there is one of these and not three. */
/* UPDATE - solid gold, no gradient.
   --grad-head ends on --rose, and that rose end is what kept reading dull:
   over the pale sky of the About Mysuru and Festivals heroes a desaturated
   pink has almost no contrast against the photograph, and because the glyph
   is painted by background-clip it cannot take a text-shadow to lift it.
   Saturating the ramp was tried and the far stop still landed on light
   areas of the picture.
   A single bright gold cannot have a weak end. It keeps the drop-shadows,
   which do follow the painted glyph, and it matches the gold the rest of
   the chrome already uses. */
/* Gradient restored; the shadow was the fault, not the colour.

   The client's diagnosis: .pg-hero h1 carries a 24px text-shadow and the
   <em> inherits it. While the glyph is painted by background-clip:text it is
   transparent, so that blur was rendering with nothing on top of it - a dark
   smear under the letters that read as a muddy colour no matter which ramp
   was used. Three attempts were spent changing the gradient; the gradient
   was never the problem.

   So the ramp comes back, and the two things that actually matter are set
   explicitly:

     text-shadow:none   kills the inherited blur. This is the whole fix. A
                        text-shadow can never work on a transparent glyph,
                        so inheriting one only ever does harm.
     filter:drop-shadow tight, and it DOES follow the painted glyph, which
                        is what gives the letters their edge over a photo.
*/
.pg-hero h1 em{
  background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 2px rgba(4,1,8,.9)) drop-shadow(0 3px 10px rgba(4,1,8,.6))}
/* and a little more weight in the wash exactly where the headline sits */
.pg-hero::after{background:
  linear-gradient(95deg,rgba(8,3,16,.93) 0%,rgba(8,3,16,.80) 32%,rgba(8,3,16,.44) 60%,
                  rgba(8,3,16,.18) 82%,rgba(8,3,16,.10) 100%),
  linear-gradient(180deg,rgba(8,3,16,.58) 0%,rgba(8,3,16,.12) 26%,rgba(8,3,16,.12) 58%,
                  rgba(8,3,16,.74) 88%,var(--k-900) 100%)}
@supports not (background-clip:text){
  .pg-hero h1 em{color:var(--g-lt);filter:none}
}

/* ---- trip planner: styles parked -------------------------------------------
   The planner is not being built for launch; its .pl-* rules now live in
   build/_parked/trip-planner/planner.css. Nothing on the site selects them.
   Restoring the planner means pasting that file back in here. */

/* ---- long single words must not be clipped on a phone ---------------------
   "Shri Mahalakshmi Gunjanarasimhaswamy Temple" needs 344px for its longest
   word at the h1 size, inside a 331px column on a 375px screen, so the tail
   of it was simply cut off - the page did not scroll, the letters were just
   gone. hyphens:auto breaks it at a syllable where the dictionary can, and
   overflow-wrap is the guarantee that nothing is ever clipped when it can't.
   Both are no-ops for every title that already fits. */
.pg-hero h1,.ihead h2,.ihead h1,.sec h2,.sec h3,.panel .ph,.acard h3,.tile h3,.tile h2,.hcard h3,
.hs-card h3,.crumbs,.mm-tx b,.mm-tx small{
  overflow-wrap:break-word;hyphens:auto}
/* below 420px the display size is what tips that one title over; a step down
   keeps it on one line rather than hyphenating it */
@media(max-width:420px){
  .pg-hero h1{font-size:clamp(1.62rem,7.4vw,2rem)}
}

/* ---- stay: "coming soon" card and the enquiry form -------------------------
   These pages shipped to /dev with no styling at all: the markup was written
   and the stylesheet never was, so the block rendered as raw browser-default
   inputs on a dark background, with a 300x150 house and a 300x150 arrow where
   two icons should have been. Same unsized-<svg> fault the planner's submit
   button had - icon() emits a bare <svg>, so every icon site needs a size
   rule of its own. Both are sized here. */
.soon-wrap{margin-top:clamp(22px,3vw,34px)}
.soon-card{background:var(--k-850);border:1px solid var(--hair);border-radius:var(--r-l);
  padding:clamp(22px,3.2vw,36px);max-width:760px}
.soon-card>h3{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2vw,1.42rem);
  color:var(--cr-hi);line-height:1.25;margin:14px 0 6px}
.soon-card>p{font-size:.9rem;line-height:1.75;color:var(--cr-dim);font-weight:300;
  max-width:62ch;margin-bottom:clamp(18px,2.4vw,26px)}
.soon-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(233,188,99,.11);border:1px solid var(--hair);color:var(--g)}
.soon-ic svg{width:21px;height:21px}          /* without this: 300x150 */

/* the form. One column, labels above their fields - the government audience
   includes a lot of 360px phones and a stacked form is the only shape that
   works there without a second layout. */
.enq{display:grid;gap:clamp(13px,1.6vw,17px)}
.enq-row{display:grid;gap:7px;min-width:0}
.enq-two{display:grid;gap:clamp(13px,1.6vw,17px);grid-template-columns:1fr}
@media(min-width:560px){.enq-two{grid-template-columns:1fr 1fr}}
.enq label{font-family:var(--ui);font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--g);font-weight:500}
.enq label .opt{text-transform:none;letter-spacing:.02em;color:var(--cr-faint);font-weight:300}
.enq input,.enq select,.enq textarea{
  width:100%;min-width:0;box-sizing:border-box;
  font-family:var(--body,inherit);font-size:.92rem;color:var(--cr);
  background:rgba(255,255,255,.04);border:1px solid var(--hair-2);border-radius:12px;
  padding:12px 14px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.enq textarea{resize:vertical;min-height:112px;line-height:1.65}
.enq select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--g) 50%),
                   linear-gradient(135deg,var(--g) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* a <select>'s dropdown is painted by the OS, not by us, so its options need
   colours that do not assume the dark page */
.enq select option{background:#100716;color:#F7F0E4}
.enq input::placeholder,.enq textarea::placeholder{color:var(--cr-faint)}
.enq input:hover,.enq select:hover,.enq textarea:hover{border-color:var(--hair)}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:none;border-color:rgba(233,188,99,.55);box-shadow:0 0 0 3px rgba(233,188,99,.18)}
.enq :focus-visible{outline:3px solid var(--gold,var(--g));outline-offset:2px}
/* the field the error names, so it is not colour alone that marks it */
.enq [aria-invalid="true"]{border-color:#E98A8A;box-shadow:0 0 0 3px rgba(233,138,138,.16)}

.enq-send{display:inline-flex;align-items:center;gap:10px;justify-self:start;
  font-family:var(--ui);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:#3a2400;cursor:pointer;border:0;
  background:linear-gradient(135deg,var(--g-dp),var(--g));
  border-radius:26px;padding:13px 26px;min-height:44px;
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.enq-send svg{width:15px;height:15px;flex:none}   /* without this: 300x150 */
.enq-send:hover{filter:brightness(1.08);transform:translateY(-2px)}
html[dir="rtl"] .enq-send svg{transform:scaleX(-1)}

.enq-note{font-size:.82rem;line-height:1.7;color:var(--cr-faint);font-weight:300;margin:0}
.enq-note a{color:var(--g);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(233,188,99,.55)}
.enq-note a:hover,.enq-note a:focus-visible{text-decoration-color:var(--g)}
.enq-note.bad{color:#F3B8B8}
.enq-err{font-size:.82rem;line-height:1.7;color:#F3B8B8;font-weight:400;margin:0;
  display:flex;align-items:flex-start;gap:8px}
.enq-err:empty{display:none}
.enq-err svg{width:16px;height:16px;flex:none;margin-top:3px}

/* ---- a hero with no photograph behind it ---------------------------------
   Two pages have no image in the archive large enough to sit behind a
   heading (see NO_HERO_IMAGE in build/generate.py). Without .pg-hero-bg the
   ::after gradient has nothing to sit on and the band goes flat, which reads
   as a loading failure. Give it a quiet gradient of its own so it reads as a
   title block that was designed, not one that lost its picture. */
.pg-hero-plain::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(118% 86% at 14% 0%, rgba(233,188,99,.13), transparent 62%),
    radial-gradient(90% 70% at 92% 8%, rgba(116,24,58,.20), transparent 68%),
    linear-gradient(168deg,#140A24 0%,#100716 54%,var(--k-900) 100%)}
/* the photo-backed gradient is tuned to darken a picture; without one it
   just muddies, so this variant keeps only the bottom fade into the page */
.pg-hero-plain::after{
  background:linear-gradient(180deg,transparent 0%,transparent 62%,
             rgba(8,3,16,.55) 86%,var(--k-900) 100%)}

/* ---- inner-page heroes: let the photograph through -----------------------
   The scrim ran rgba(8,3,16,.93) across the left of every hero. At .93 the
   photograph is all but gone, which is why 74 pages opened on what looked
   like a dark band with a heading on it rather than a picture of the place.

   It only has to carry the text, and the text sits in the left half. So:
   heavy where the words are, released much earlier across the rest, and a
   text shadow doing the work the extra opacity used to do. The h1 is
   #FFF6E4 on roughly rgba(8,3,16,.80) over a photograph — still comfortably
   past 4.5:1, which axe is run against on every page after this change. */
.pg-hero::after{
  background:
    linear-gradient(95deg, rgba(8,3,16,.86) 0%, rgba(8,3,16,.72) 30%,
                           rgba(8,3,16,.40) 56%, rgba(8,3,16,.14) 80%,
                           rgba(8,3,16,.06) 100%),
    linear-gradient(180deg, rgba(8,3,16,.50) 0%, rgba(8,3,16,.08) 24%,
                            rgba(8,3,16,.10) 56%, rgba(8,3,16,.70) 88%,
                            var(--k-900) 100%)!important}

/* the photograph itself was also being dimmed by its own filter */
.pg-hero-bg{filter:saturate(1.14) contrast(1.05) brightness(1.16)}

/* what the scrim no longer does, the type does for itself */
.pg-hero h1,.pg-hero .crumb,.pg-hero .pg-meta span{
  text-shadow:0 2px 20px rgba(8,3,16,.92),0 1px 4px rgba(8,3,16,.85)}
.pg-hero .lede{
  color:var(--cr);
  text-shadow:0 1px 14px rgba(8,3,16,.95),0 1px 4px rgba(8,3,16,.9)}

/* A hero with no photograph has nothing to reveal, so it keeps its own
   quiet treatment rather than inheriting a scrim built for one. */
.pg-hero-plain::after{
  background:linear-gradient(180deg,transparent 0%,transparent 62%,
             rgba(8,3,16,.55) 86%,var(--k-900) 100%)!important}
.pg-hero-plain h1,.pg-hero-plain .crumb,.pg-hero-plain .lede,
.pg-hero-plain .pg-meta span{text-shadow:none}

/* ---- inline prose links must not be colour alone ------------------------
   Third time this has come up: the enquiry form's email and phone, and now
   the Dasara site link inside a .note. Gold on dimmed cream is 1.76:1
   against the surrounding text, so colour is the only thing marking these
   as links — WCAG 1.4.1.

   Fixed once, for the class of fault rather than the instance: any link in
   running text is underlined. Styled components — buttons, cards, chips,
   nav — opt out by carrying a class, so they are untouched. */
.note a,
.hl a,
main p > a:not([class]),
main li > a:not([class]),
main dd > a:not([class]){
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(233,188,99,.55)}
.note a:hover,.hl a:hover,
main p > a:not([class]):hover,
main li > a:not([class]):hover,
main dd > a:not([class]):hover{text-decoration-color:var(--g)}

/* CC BY 2.0 on the rosewood photograph requires visible credit. Quiet, but
   present — the licence is only satisfied if the attribution actually ships. */
.buy-credit{font-size:.72rem;line-height:1.6;color:var(--cr-faint);font-weight:300;
  margin:0 0 .35rem}
.buy-credit a{color:var(--cr-dim)}

/* ---- a timeline with a picture that keeps up -------------------------------
   Six steps running the full width of the page is a lot of scrolling for a
   little text: a 1400px measure for one sentence, and nothing to look at.
   Narrowing the column to a readable measure and putting a photograph beside
   it uses the same space twice, and because the photograph is sticky it
   stays in view for the whole sequence rather than scrolling past.

   The photograph is decorative in the strict sense - every step says in
   words what its picture shows - so the column is aria-hidden and the text
   never depends on it. With no JS the first one simply stays put. */
.tfig{display:grid;gap:clamp(20px,3vw,46px);align-items:start}
@media(min-width:1000px){
  .tfig{grid-template-columns:minmax(0,1fr) minmax(300px,.74fr)}
}
.tfig-steps{min-width:0}
.tfig-side{display:none}
@media(min-width:1000px){
  .tfig-side{display:block}
}
.tfig-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-l,20px);
  overflow:hidden;border:1px solid var(--hair);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.tfig-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(8,3,16,.42) 100%)}
.tf-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s cubic-bezier(.37,0,.19,1)}
.tf-shot.on{opacity:1}

/* NOTE ON ORDER: this block must stay AFTER the base .tfig-frame rules.
   It was written above them, and because both are plain class selectors
   the later one won - so aspect-ratio:4/3 and position:relative kept
   applying and none of this took effect. With the column stretched to
   540px, a 4/3 frame computed its WIDTH from that height: 540 x 4/3 =
   720px inside a 583px column. That 137px of overflow is what showed up
   as a picture bleeding past the text and sitting under the cards below
   it - reported four times, on four different pages, as a full-width
   banner. Measured: side right edge 1688, frame right edge 1825. */
/* The figure column fills the row and the FRAME is the sticky thing inside
   it, rather than the column itself being sticky with a 4/3 box.

   Two problems came from the old arrangement, both of them the same shape.
   Beside a short list the 4/3 box was simply taller than the text - at 1960
   the column is wide enough to make it 420px against a 290px list, so the
   two started together and the picture ran a long way past the last line.
   On a three-step route it was worse: 565px of photograph against 435px of
   steps.

   With the column stretched, max-height:100% means the frame can never be
   taller than the content beside it, whatever the width. Where that content
   is long enough to scroll, the frame sticks and the photographs swap inside
   it as the steps pass - which is the behaviour the timeline wants and the
   reason the frame, not the column, is the sticky element now. */
@media(min-width:1000px){
  .tfig{align-items:stretch}
  .tfig-side{position:static;display:block}
  .tfig-frame{position:sticky;top:calc(var(--hdr,75px) + 26px);
    aspect-ratio:auto;height:min(64vh,540px);max-height:100%;min-height:260px}
  /* beside prose, a list or an FAQ there is nothing to swap, so the picture
     simply matches the height of what it sits next to.

     position:static was the bug. .tf-shot inside is position:absolute, and
     it needs the frame to be its containing block; made static, the image
     resolved against an ancestor instead and rendered 1440px wide across
     the whole section - the photograph lying behind the text rather than
     beside it, which is what "the gallery is splattered" was. The frame
     keeps position:relative.

     height:100% was wrong too, for a different reason. It made the frame
     exactly as tall as the text beside it, and with three short paragraphs
     that is about 260px - so a 3:2 photograph in a 533x260 box lost a third
     of itself to object-fit:cover, and the Nanjangud gopuram was sliced off
     at the base. The frame takes its own 4:3 and the section grows to fit
     instead: the picture is whole, and growing downwards costs nothing
     because the grid is align-items:start. This is NOT the old bug - that
     one was aspect-ratio fighting an explicit HEIGHT, which made the
     browser compute the WIDTH from it and overflow the column. With
     height:auto the width comes from the column and the height follows.

   top:0 matters. The sticky rule above sets top:calc(--hdr + 26px) as a
   STICKY THRESHOLD, which is inert until the element sticks. Switching the
   frame to position:relative turned that same declaration into a RELATIVE
   OFFSET and pushed the picture 100px down the page, so it started a third
   of the way into the paragraph beside it instead of level with its first
   line. Reset explicitly rather than relying on the cascade. */
  .tfig:has(> .tfig-steps > .hl) .tfig-frame,
  .tfig:has(> .tfig-steps > .prose) .tfig-frame,
  .tfig:has(> .tfig-steps > .faq) .tfig-frame{height:auto;aspect-ratio:4/3;
    max-height:none;position:relative;align-self:start;top:0}
}

/* Slower than a UI transition on purpose: the picture is a backdrop to
   the step you are reading, and a quick cut draws the eye away from the
   words. .62s also means a fast scroll past two steps reads as one soft
   change rather than a flicker. */
.tf-shot{transition:opacity 1.5s cubic-bezier(.37,0,.19,1)}
@media(prefers-reduced-motion:reduce){.tf-shot{transition:none}}

/* ---- coming-soon stay pages: copy left, form right ------------------------
   The enquiry form used to sit alone in a narrow column with the right half
   of the page empty beside it, and nothing explained why a reader was
   looking at a form instead of a list of hotels. The explanation now holds
   the left column and the form holds the right. */
.soon-grid{display:grid;gap:clamp(22px,3vw,44px);align-items:start;
  margin-top:clamp(22px,3vw,34px)}
@media(min-width:980px){
  .soon-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .soon-copy{position:sticky;top:calc(var(--hdr,75px) + 26px)}
}
/* Centred against the form, not stuck to the viewport.

   The obvious reading of "stick at the middle of the screen" is
   position:sticky with top:50vh, and that was tried. It cannot work here:
   sticky only has somewhere to travel while its container is taller than
   the offset plus the element, and this section is about 780px tall against
   a viewport of 1300. Measured, the copy drifted from dead centre to 526px
   above it on the way down, because it was never sticking at all.

   The section fits on one screen, so there is no scrolling within it to
   stick through. What the eye actually reads as "in the middle" is the copy
   centred against the taller form beside it, which is a single property and
   cannot drift. If the form ever grows past a screen, revisit this with a
   full-height sticky wrapper rather than an offset. */
@media(min-width:980px){
  .soon-copy{position:static;align-self:center}
}
.soon-copy>*{min-width:0}
.soon-lede{font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.68;color:var(--cr);
  font-weight:300}
.soon-sub{margin-top:18px;font-size:.88rem;line-height:1.7;color:var(--cr-dim)}
.soon-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.soon-points li{position:relative;padding-left:20px;font-size:.875rem;
  line-height:1.65;color:var(--cr-dim)}
.soon-points li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--g);opacity:.85}
.soon-points b{color:var(--cr-hi);font-weight:600}
.soon-meanwhile{margin-top:20px;padding-top:18px;font-size:.85rem;line-height:1.7;
  color:var(--cr-faint);border-top:1px solid var(--hair)}
.soon-meanwhile a{color:var(--g)}

/* ---- GI Tag page ---- */
/* The second name a product is known by, inside the tile heading. Set small
   and in the gold so "Mysore Mallige" and "Mysore Jasmine" read as one
   product with two names rather than as two products. */
.gi-alt{display:block;font-family:var(--ui);font-weight:400;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g);
  margin-top:5px;opacity:.9}
.gi-src{font-size:.82rem;line-height:1.7;color:var(--cr-dim)}

/* ---- GI Tag: an image-led grid -----------------------------------------
   Five of thirteen products had a photograph in the library and two more
   came from Commons under CC licences. The remaining five carry a visible
   PLACEHOLDER rather than a borrowed picture - a visitor is told a
   photograph is coming, and nobody is told a photograph of something else
   is the product. */
.gi-grid{display:grid;gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.gi-card{display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-l,20px);border:1px solid var(--hair);
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease)}
a.gi-card:hover,a.gi-card:focus-visible{border-color:rgba(233,188,99,.5);
  transform:translateY(-3px)}
.gi-fig{margin:0;position:relative;overflow:hidden}
.gi-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.gi-fig figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:22px 13px 9px;font-family:var(--ui);font-weight:300;font-size:.66rem;
  line-height:1.35;color:var(--cr);
  background:linear-gradient(180deg,transparent,rgba(8,3,14,.9))}
.gi-credit{display:block;font-size:.56rem;color:var(--cr-faint);margin-top:3px}

/* the placeholder is meant to read AS a placeholder */
.gi-ph{aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;
  background:repeating-linear-gradient(135deg,rgba(233,188,99,.05) 0 9px,
             transparent 9px 18px),rgba(12,5,20,.5);
  border-bottom:1px solid var(--hair)}
.gi-ph-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(233,188,99,.3);color:var(--g)}
.gi-ph-i svg{width:16px;height:16px}
.gi-ph-t{font-family:var(--ui);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cr-faint)}

.gi-body{padding:clamp(14px,1.6vw,20px);display:flex;flex-direction:column;gap:5px;
  flex:1}
.gi-ic{display:inline-grid;place-items:center;width:28px;height:28px;
  border-radius:8px;background:rgba(233,188,99,.1);color:var(--g);margin-bottom:2px}
.gi-ic svg{width:15px;height:15px}
.gi-body h3{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.16rem);color:var(--cr-hi);line-height:1.2}
.gi-body p{margin:0;font-size:.82rem;line-height:1.6;color:var(--cr-dim)}
.gi-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ui);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-lt)}
.gi-go svg{width:13px;height:13px}

/* ---- GI Tag: one entry per product, all on one page --------------------
   The grid of thirteen fifteen-word tiles became thirteen full entries. The
   tile styles above are kept because .gi-fig, .gi-ph, .gi-ic, .gi-alt and
   .gi-credit are all reused here unchanged - only the container around them
   is new.

   Image left, text right, and the rows alternate. The alternation is done
   with order on the two children rather than direction:rtl or a column
   swap, because both of those also reverse the reading order for a screen
   reader and for keyboard focus: the picture would be announced before the
   heading on every second product. Visual order changes, document order
   does not. */
.gi-jump{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(18px,2.4vw,28px) 0 0}
.gi-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  border:1px solid var(--hair);background:rgba(255,255,255,.03);
  font-family:var(--ui);font-size:.72rem;color:var(--cr-dim);text-decoration:none;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.gi-chip:hover,.gi-chip:focus-visible{border-color:rgba(233,188,99,.5);color:var(--cr-hi)}

.gi-note{display:flex;gap:11px;align-items:flex-start;
  margin:clamp(16px,2vw,22px) 0 0;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(233,188,99,.22);background:rgba(233,188,99,.055);
  font-size:.82rem;line-height:1.65;color:var(--cr-dim)}
.gi-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--g)}
.gi-note b{color:var(--cr-hi);font-weight:500}

.gip-list{display:flex;flex-direction:column;gap:clamp(26px,3.6vw,52px)}
.gip{display:grid;gap:clamp(18px,2.6vw,38px);align-items:start;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  scroll-margin-top:96px}
.gip-m{order:1}
.gip-b{order:2}
/* The track sizes have to flip with the order, not just the order. The text
   column is the wider of the two; leaving the tracks alone and only swapping
   order put the TEXT in the narrow track on every second product, so the
   prose ran cramped beside an over-wide picture. */
.gip:nth-child(even){grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr)}
.gip:nth-child(even) .gip-m{order:2}
.gip:nth-child(even) .gip-b{order:1}
.gip-m .gi-fig,.gip-m .gi-ph{border-radius:var(--r-l,20px);overflow:hidden;
  border:1px solid var(--hair)}
.gip-m .gi-ph{border-bottom:1px solid var(--hair)}

/* The heading row: icon, the two names, and the registration mark pushed to
   the end. The mark is the reason the page is split in two, so it is stated
   on every entry rather than left to the section heading - an entry linked
   to directly by its anchor arrives with no section heading in view. */
.gip-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.gip-h > div{flex:1;min-width:0}
.gip-h h3{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,2vw,1.62rem);color:var(--cr-hi);line-height:1.18}
.gip-h .gi-alt{margin-top:6px}
.gip-tag{flex:0 0 auto;align-self:center;padding:5px 11px;border-radius:999px;
  font-family:var(--ui);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid rgba(233,188,99,.34);color:var(--g-lt);
  background:rgba(233,188,99,.08);white-space:nowrap}
.gip-tag-no{border-color:var(--hair);color:var(--cr-faint);background:transparent}

.gip-p p{margin:0 0 .85em;font-size:.9rem;line-height:1.78;color:var(--cr-dim)}
.gip-p p:last-child{margin-bottom:0}

/* Where to buy. Declared on every entry, empty on all of them for now -
   see the docstring in gi_tag(). It is a panel rather than a line of prose
   so that the day the department's shop lists arrive they drop into
   something already shaped to hold them. */
.gip-buy{display:flex;gap:11px;align-items:flex-start;margin-top:16px;
  padding:13px 15px;border-radius:14px;border:1px solid var(--hair);
  background:rgba(255,255,255,.025)}
.gip-buy-i{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
  border-radius:8px;background:rgba(233,188,99,.1);color:var(--g)}
.gip-buy-i svg{width:14px;height:14px}
.gip-buy-k{display:block;font-family:var(--ui);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cr);margin-bottom:4px}
.gip-wait{margin:0;font-size:.78rem;line-height:1.6;color:var(--cr-faint)}
.gip-shops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gip-shops li{font-size:.8rem;line-height:1.5;color:var(--cr-dim)}
.gip-shops b{display:block;font-weight:500;color:var(--cr-hi)}
.gip-shops span{color:var(--cr-faint)}
.gip .gi-go{margin-top:14px}

/* One column under 860px. The alternation is dropped with it: stacked, an
   alternating layout only means the picture sometimes sits under the text
   it belongs to, which reads as a mistake. */
@media (max-width:860px){
  .gip{grid-template-columns:1fr;gap:16px}
  .gip-m,.gip:nth-child(even) .gip-m{order:1}
  .gip-b,.gip:nth-child(even) .gip-b{order:2}
  .gip-h{gap:10px}
  .gip-tag{align-self:flex-start}
}
@media (max-width:460px){
  .gip-h{flex-wrap:wrap}
  .gip-tag{order:3;width:auto}
}