/* =========================================================================
   ASI Kolkata Circle — Custom Theme
   Layers on top of: Bootstrap 5  →  wordpress-default.css  →  this file.
   Palette matched to the official ASI seal logo (deep royal blue #161B76).
   Built mockup by Neuvo WebTech.
   ========================================================================= */

:root {
  --asi-blue:    #161B76;   /* logo royal-blue (primary) */
  --asi-blue-d:  #0D1052;   /* darker shade */
  --asi-blue-l:  #2A34A6;   /* lighter blue (hover / links) */
  --asi-gold:    #C28F2C;   /* brass accent (complements the seal) */
  --asi-gold-l:  #E0B763;
  --asi-surface: #F5F0E4;   /* warm cream surface (asi.nic.in-like) */
  --asi-sky:     #CFE6FA;   /* light sky-blue fill swept in behind a hovered menu item (21 Aug 2026) */
  --asi-surface-d:#EAE2D0;
  --asi-line:    #E0D8C4;   /* warm hairlines */
  --asi-ink:     #191B2E;   /* near-black, bluish */
  --asi-slate:   #5A6079;   /* muted body text */
  --saffron:     #FF9933;
  --india-green: #138808;

  --font-display: "Marcellus", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--asi-ink);
  /* warm cream silk texture (from asi.nic.in) with a warm tint so it clearly reads
     as beige — never pure white */
  background:
    linear-gradient(rgba(190,168,120,.18), rgba(190,168,120,.18)),
    url("../img/bg-texture.webp") repeat top center,
    #E4D8BE;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--asi-ink);
  line-height: 1.18;
}
a { color: var(--asi-blue); }
a:hover { color: var(--asi-blue-l); }
.text-blue { color: var(--asi-blue) !important; }
.text-gold { color: var(--asi-gold) !important; }
.bg-surface { background: var(--asi-surface) !important; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--asi-gold);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--asi-gold); display: inline-block; }
.section { padding: 78px 0; }
.section-title { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: .35rem 0 0; }
.section-lead { color: var(--asi-slate); max-width: 56ch; }

.btn { border-radius: 2px; font-weight: 500; letter-spacing: .01em; padding: .7rem 1.4rem; }

/* ---- Buttons take the main menu's hover sweep (client, 24 Aug 2026) ----
   "Add menu item hover animation and color in all buttons." Same motion and the
   same light sky blue as #primary-menu above: a skewed panel slides in from the
   left and stays, wiping the button edge-first instead of cross-fading.

   Geometry follows the menu/.ab-btn rule — the panel is the button plus a bleed
   each side and travels exactly its own width, so the wipe is visible for the
   whole .38s. The bleed is 56px here, NOT the menu's 44px: skewX(-22deg) eats
   H x tan22 across the panel's height, and these buttons are taller than a nav
   item (.7rem padding + 1.65 line-height ~ 51px, so the -60% panel is ~112px and
   needs ~45px; 56px also covers .btn-lg). Too small a bleed leaves the trailing
   bottom corner unfilled — that is the 21 Aug wedge bug in a different disguise. */
.btn-asi, .btn-outline-asi, .btn-gold, .btn-ghost {
  position: relative; isolation: isolate;
  /* `clip`, not `hidden`. overflow:hidden makes the button a block formatting context,
     which re-measures the icon-only search submit 2.5px narrower and shifts the hero
     search group with it; overflow:clip clips the sweep identically without that side
     effect, and was measured to leave every button box byte-identical to 21 Aug.
     `hidden` first as the fallback for anything that predates overflow:clip. */
  overflow: hidden; overflow: clip;
}
.btn-asi::before, .btn-outline-asi::before, .btn-gold::before, .btn-ghost::before {
  content: ""; position: absolute; z-index: -1; inset: -60% -56px;
  background: var(--asi-sky);
  transform: translateX(-100%) skewX(-22deg); transform-origin: top left;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.btn-asi:hover::before,       .btn-asi:focus-visible::before,
.btn-outline-asi:hover::before, .btn-outline-asi:focus-visible::before,
.btn-gold:hover::before,      .btn-gold:focus-visible::before,
.btn-ghost:hover::before,     .btn-ghost:focus-visible::before {
  transform: translateX(0) skewX(-22deg);
}

/* Light-faced buttons (outline, gold): the label is dark at both ends and the fill
   light at both ends, so it stays legible on either side of the moving edge and a
   short flat transition is enough — exactly as on the top-level menu items. */
.btn-outline-asi { color: var(--asi-blue); border: 1px solid var(--asi-blue); background:#fff;
  transition: color .18s ease-out, border-color .28s, box-shadow .28s; }
.btn-outline-asi:hover, .btn-outline-asi:focus-visible {
  background:#fff; color: var(--asi-blue);
  box-shadow: 0 4px 12px rgba(13,16,82,.14);
}
.btn-gold { background: var(--asi-gold); color: #2a210e; border: 1px solid var(--asi-gold);
  transition: color .18s ease-out, border-color .28s, box-shadow .28s; }
.btn-gold:hover, .btn-gold:focus-visible {
  color: var(--asi-blue); border-color: rgba(22,27,118,.32);
  box-shadow: 0 4px 12px rgba(13,16,82,.14);
}

/* Dark-faced buttons (solid navy, and the ghost over the hero photograph) sweep the
   LIGHTER blue and hold their white label — they do not go sky blue. This is not an
   inconsistency, it is the same two-rule structure the menu already has: light items
   sweep sky, the dark current-page pill sweeps --asi-blue-l (see #primary-menu above).
   It was arrived at by rendering, not by preference. Sky blue here forces the label to
   travel white -> navy while the fill travels dark -> light, and there is then no colour
   that is legible on both sides of the moving edge — measured on the state sheet at
   24 Aug: 2.45:1 half way and 1.33:1 at three-quarters, where the last glyphs sitting
   over the unswept navy simply disappear. Holding the label white is 14.6:1 at rest and
   9.9:1 over the swept blue, with no hole in between. Do not "harmonise" these to sky
   blue without re-measuring the label mid-sweep. */
.btn-asi { background: var(--asi-blue); color: #fff; border: 1px solid var(--asi-blue);
  transition: border-color .28s, box-shadow .28s; }
.btn-asi::before, .btn-ghost::before { background: var(--asi-blue-l); }
.btn-asi:hover, .btn-asi:focus-visible {
  background: var(--asi-blue); color: #fff;
  border-color: var(--asi-blue-l); box-shadow: 0 4px 12px rgba(13,16,82,.20);
}
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.65);
  transition: border-color .28s, box-shadow .28s; }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: transparent; color: #fff; border-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce) {
  .btn-asi::before, .btn-outline-asi::before, .btn-gold::before, .btn-ghost::before {
    transition: none;
  }
  .btn-asi:hover::before,         .btn-asi:focus-visible::before,
  .btn-outline-asi:hover::before, .btn-outline-asi:focus-visible::before,
  .btn-gold:hover::before,        .btn-gold:focus-visible::before,
  .btn-ghost:hover::before,       .btn-ghost:focus-visible::before {
    transform: translateX(0) skewX(0deg);
  }
  .btn-asi, .btn-outline-asi, .btn-gold, .btn-ghost { transition: none; }
}

/* ---- Tricolour strips (Govt of India convention) ---- */
.tricolour { height: 4px; display: flex; }
.tricolour span { flex: 1; }
.tricolour .saf { background: var(--saffron); }
.tricolour .whi { background: #fff; }
.tricolour .grn { background: var(--india-green); }

/* ---- Top utility bar ---- */
/* Sky photograph behind the Government of India utility strip (client, 21 Aug 2026),
   with NO colour wash over it — the client asked for the bare photograph. `cover` is
   right here: the supplied file is 3840x98, almost exactly the strip's own proportions,
   so the whole photograph is seen at close to 1:1 and stays sharp.
   ⚠ The navy colour that remains is only a fallback for the image failing to load; it
   is never seen otherwise. Without the wash the text has no guaranteed contrast: over
   the brightest cloud the body text falls to ~1.1:1 and the gold to ~1.3:1 (median is
   4.1 and 3.4). See the 21 Aug memory — the wash is one line if it is ever wanted back. */
.utility-bar {
  background:
    url("../img/utility-bar-bg.webp") center/cover no-repeat,
    var(--asi-blue-d);
  color: #c9cdee; font-size: .8rem;
}
/* No backing behind either content group — the strip sits straight on the sky photograph
   (client, 21 Aug 2026; the navy band was tried and taken off again the same afternoon).
   Only the A−/A/A+ buttons and the language toggle keep a shade of their own.
   ⚠ That leaves "Government of India", "Screen Reader" and "Sitemap" with no guaranteed
   contrast: over the pale cloud they fall to ~1.1–1.3:1, and because the crop moves with
   the window width it changes from screen to screen. A look chosen over a measurement —
   see the 21 Aug memory before "fixing" it. */
.utility-bar .container > div:first-child > span:not(.gov-tag) {
  color: var(--asi-blue-d); font-weight: 700; font-size: .88rem;   /* bolder and a step up, client 21 Aug 2026 */
}
.utility-bar a { color: #c9cdee; text-decoration: none; }
.utility-bar a:hover { color: #fff; }
.utility-bar .util-link + .util-link { margin-left: 1rem; }
.utility-bar .util-link { color:#fff; font-weight:700; font-size:.88rem; }
.gov-tag { color: var(--asi-gold-l); font-weight: 600; letter-spacing: .04em; }
/* The right-hand group gets the same treatment as "Ministry of Culture" — bare, bold and a
   size up — but in WHITE, not navy (client, 21 Aug 2026). The sky is not evenly lit: measured
   over the actual file, the left third the Ministry label sits on has a median luminance of
   0.174, while this group sits over 0.091. Navy there is 2.3:1 and collapses to about 1.05:1
   in the darkest patches, where white is 7.5:1. Same idea, opposite end of the scale. */
.font-ctrl button {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color:#fff; font-weight:700;
  width: 26px; height: 22px; line-height: 1; border-radius: 2px; font-size:.72rem;
}

/* ---- Sticky tricolour strip only ---- */
.tricolour-sticky { position: sticky; top: 0; z-index: 1040; }

/* ---- Header / branding ---- */
.site-header { background: #fff; border-bottom: 1px solid var(--asi-line); }
.site-branding { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.brand-logo { height: 56px; width: auto; flex: 0 0 auto; display: block; }
.brand-text .org { font-family: var(--font-display); font-size: 1.15rem; color: var(--asi-ink); line-height: 1.1; }
.brand-text .circle { font-weight: 700; color: var(--asi-blue); font-size: 1.02rem; letter-spacing: .02em; }
.brand-text .ministry { font-size: .72rem; color: var(--asi-slate); letter-spacing: .04em; }
.azadi-logo { height: 48px; width: auto; flex: 0 0 auto; display: block; }
@media (max-width: 575.98px) { .azadi-logo { height: 36px; } }

/* ---- Primary navigation ---- */
.main-navigation { border-top: 1px solid var(--asi-line); background: #fff; }
#primary-menu { display: flex; flex-wrap: wrap; gap: 2px; }
/* Every top-level item is a pill-shaped box, active or not, so the hover fill and
   the active fill are exactly the same shape and the row never changes height:
   the old 13px padding is split into 9px padding + 4px margin, which is what the
   active pill already used (19 Aug 2026). */
#primary-menu > .menu-item > a {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; margin: 4px 0; padding: 9px 16px;
  color: var(--asi-ink); text-decoration: none; font-weight: 500; font-size: .94rem;
  border-radius: 999px;
  transition: color .18s ease-out;
}
/* Hover = the E-Ticketing "Book Tickets" shine sweep, brought into the main menu
   (client, 21 Aug 2026). Same motion as .ab-btn below — a skewed panel slides in
   from the left and stays, wiping the item edge-first instead of cross-fading —
   filled light sky blue, against the deep blue pill that marks the page you are on
   (colours swapped at the client's request later the same day). It replaces the
   gold hover underline of 19 Aug; the sweep occupies the same pseudo-element and
   the two would sit on top of each other.
   Geometry is the .ab-btn geometry: the panel is the pill plus a 44px bleed each
   side and travels exactly its own width, so the wipe is visible for the whole
   .38s and the trailing bottom corner still fills across the skew. */
#primary-menu > .menu-item > a::before {
  content: ""; position: absolute; z-index: -1; inset: -60% -44px;
  background: var(--asi-sky);
  transform: translateX(-100%) skewX(-22deg); transform-origin: top left;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
#primary-menu > .menu-item > a:hover::before,
#primary-menu > .menu-item > a:focus-visible::before { transform: translateX(0) skewX(-22deg); }
/* Swapping the colours removed a problem the earlier build had to work around: the
   label used to go white over a white nav, so mid-sweep it was unreadable whichever
   way the flip was timed and had to cross-fade through the greys. Now the label is
   dark at both ends and the fill is light at both ends, so it stays legible on
   either side of the moving edge and a plain short transition is enough. */
#primary-menu > .menu-item > a:hover,
#primary-menu > .menu-item > a:focus-visible { color: var(--asi-blue); }
/* Active item = the deep blue pill with a bold white label. Hovering it sweeps the
   lighter blue rather than the sky blue the other items get: the page you are on
   keeps its dark pill instead of turning into a hover state. */
#primary-menu > .menu-item.current-menu-item > a {
  color: #fff !important; font-weight: 700;
  background: var(--asi-blue);
}
#primary-menu > .menu-item.current-menu-item > a::before { background: var(--asi-blue-l); }
#primary-menu > .menu-item.current-menu-item > a:hover { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  #primary-menu > .menu-item > a::before,
  #primary-menu .sub-menu a::before { transition: none; }
  #primary-menu > .menu-item > a:hover::before,
  #primary-menu > .menu-item > a:focus-visible::before,
  #primary-menu .sub-menu a:hover::before,
  #primary-menu .sub-menu a:focus-visible::before { transform: translateX(0) skewX(0deg); }
}
#primary-menu .menu-item-has-children > a::after {
  content: "\F229"; font-family: "bootstrap-icons"; font-size: .7rem; margin-left: 6px; opacity: .6;
}
/* The dropdown panel itself is rounded too (client, 24 Aug 2026: "sub menu box corner
   should be rounded"). 10px against the rows' 6px — the outer curve has to be the larger
   of the two or the corners read as concentric rings rather than one soft box.
   ⚠ NO overflow:hidden here, ever. The third-level flyout is a .sub-menu nested inside
   this one and sits at left:100%, i.e. outside this box — clipping the panel to its own
   curve would erase Preservation / Restoration entirely. Nothing needs clipping anyway:
   the rows are inset 6px from the wall, so they clear the corner radius on their own. */
#primary-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--asi-line); border-top: 3px solid var(--asi-blue);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(13,16,82,.14);
  padding: 8px 0; z-index: 50; display: none;
}
#primary-menu .menu-item-has-children:hover > .sub-menu { display: block; }
/* third level (Our Work > Conservation > Preservation / Restoration) flies out sideways */
#primary-menu .sub-menu .sub-menu { top: -9px; left: 100%; }
#primary-menu .sub-menu .menu-item-has-children > a::after { content: "\F285"; float: right; }
/* Dropdown rows take the same sky-blue sweep as the top level (client, 21 Aug 2026).
   They were square until 24 Aug — a row runs the full width of the panel, so a radius
   had nothing to curve against — but the client asked for "a small curve, not a proper
   box". The fix is not the radius on its own: the row is inset 6px from the panel wall
   so the corners have white to curve into, and the padding drops 18px -> 12px to put
   that 6px back, which leaves every label on exactly the same x as before.
   The third-level flyout is a sibling <ul> inside the <li>, not a child of the anchor,
   so overflow:hidden clips the sweep to the new curve without clipping the flyout. */
#primary-menu .sub-menu a {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; margin: 0 6px; padding: 9px 12px; border-radius: 6px;
  color: var(--asi-ink); text-decoration: none; font-size: .9rem;
  transition: color .18s ease-out;
}
#primary-menu .sub-menu a::before {
  content: ""; position: absolute; z-index: -1; inset: -60% -44px;
  background: var(--asi-sky);
  transform: translateX(-100%) skewX(-22deg); transform-origin: top left;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
#primary-menu .sub-menu a:hover::before,
#primary-menu .sub-menu a:focus-visible::before { transform: translateX(0) skewX(-22deg); }
#primary-menu .sub-menu a:hover,
#primary-menu .sub-menu a:focus-visible { color: var(--asi-blue); }
/* the open page's own entry inside a dropdown — the same sky blue, held, with a navy
   edge bar so it still reads as "you are here" and not merely as a hovered row */
#primary-menu .sub-menu .current-menu-item > a {
  font-weight: 700; color: var(--asi-blue); background: var(--asi-sky);
  box-shadow: inset 3px 0 0 var(--asi-blue);
}
.nav-search .form-control { border-radius: 2px; border-color: var(--asi-line); }
.nav-search .btn { border-radius: 2px; }

@media (max-width: 991.98px) {
  #primary-menu { flex-direction: column; }
  #primary-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; border-radius: 0; padding-left: 16px; }
  #primary-menu .sub-menu .sub-menu { padding-left: 14px; }
  #primary-menu .menu-item-has-children > a::after { display: none; }
  /* stacked menu: every pill hugs its label instead of running the full width,
     and the diagonal sweep is dropped for a plain tint — a wipe across a
     column-width bar reads as a flash, not as a fill. */
  #primary-menu > .menu-item > a { display: inline-block; }
  #primary-menu > .menu-item > a::before { display: none; }
  #primary-menu > .menu-item > a:hover,
  #primary-menu > .menu-item > a:focus-visible { background: var(--asi-sky); }
  #primary-menu .sub-menu a::before { display: none; }
  #primary-menu .sub-menu a:hover,
  #primary-menu .sub-menu a:focus-visible { background: var(--asi-sky); }
  #primary-menu > .menu-item.current-menu-item > a:hover,
  #primary-menu > .menu-item.current-menu-item > a:focus-visible { background: var(--asi-blue-l); }
}

/* ---- Hero (photo-backed, compact, actions on the right) ---- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(13,16,82,.92) 0%, rgba(22,27,118,.78) 45%, rgba(22,27,118,.45) 100%),
    url("../img/hero.jpg") center/cover no-repeat;
  color: #fff;
}
.hero-inner { padding-top: 52px; padding-bottom: 52px; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); max-width: 17ch; }
.hero .lead { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 46ch; }
.hero .eyebrow { color: var(--asi-gold-l); }
.hero .eyebrow::before { background: var(--asi-gold-l); }
.hero-actions {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(7px);
  border-radius: 6px;
  padding: 22px;
}
.hero-actions .ha-label { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.hero-search .form-control { background: rgba(255,255,255,.96); border: 0; border-radius: 2px; }

/* ---- Glance stats ---- */
.glance { background: var(--asi-surface); border-bottom: 1px solid var(--asi-line); }
.glance .stat { padding: 26px 12px; text-align: center; }
.glance .stat .num { font-family: var(--font-display); font-size: 2.4rem; color: var(--asi-blue); line-height: 1; }
.glance .stat .lbl { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--asi-slate); margin-top: 6px; }
.glance .stat + .stat { border-left: 1px solid var(--asi-line); }
@media (max-width: 767.98px){ .glance .stat + .stat { border-left: 0; } }

/* ---- Monument cards (real photos) ---- */
.monument-card {
  border: 1px solid var(--asi-line); background: #fff; border-radius: 4px; overflow: hidden;
  height: 100%; transition: transform .25s ease, box-shadow .25s ease;
}
.monument-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13,16,82,.16); }
.monument-photo {
  height: 210px; position: relative; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--asi-surface-d);
}
.monument-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,16,40,.05) 55%, rgba(13,16,40,.45)); }

/* ---- Photographs are never cropped ----
   Roughly a sixth of the Circle's feature photographs are portrait — sculpture,
   deuls, single temple towers. Cover-cropping one of those into a 210px card
   band leaves only a thin slice across the middle; the team review of 05 Aug
   2026 flagged this on the Surja and Durga sculpture cards ("distorted cropped
   image"). So show the whole frame, floated over a blurred, darkened blow-up of
   itself, and the tile still fills edge to edge with no letterbox bars.
   Client review, 20 Aug 2026 ("do not crop monuments — we need to display whole
   monuments") extended this from portrait frames to EVERY fixed-ratio photo
   frame: monument cards, album covers, the all-photographs grid and the
   monument-page thumbnails. A 3:2 landscape shot in a 4:3 tile was still losing
   an eighth off the top and bottom, which is enough to take the finial off a
   temple. Only the detail banner still crops, by design — it is a full-bleed
   band with the title over it, and the whole frame appears directly below it.
   Two ways in: .mp-blur/.mp-fit spans where the source is a CSS background
   (monument card, detail banner), and a ::before backdrop driven by the --shot
   custom property where the source is a real <img> (the gallery grids), so the
   photograph keeps its alt text and lazy loading.
   Paint order relies on DOM order: card background, .mp-blur, .mp-fit, then the
   ::after scrim, then the district/badge chips at z-index 2. */
.mp-blur, .mp-fit { position:absolute; inset:0; display:block; }
.mp-blur { background-size:cover; background-position:center;
  filter:blur(16px) saturate(.85) brightness(.68); transform:scale(1.18); }
.mp-fit  { background-size:contain; background-repeat:no-repeat; background-position:center; }
.monument-photo.fit-contain { background-color: var(--asi-blue-d); }
/* In the detail banner a contained portrait would run the full height and end up
   underneath the monument title, so hold it to the upper three-quarters and let
   the breadcrumb and title sit on the blurred band below it. */
.detail-hero.fit-contain .mp-fit { background-size:auto 76%; background-position:center 14%; }
.monument-photo .district {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--asi-blue);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}
.monument-card .body { padding: 16px 18px 20px; }
.monument-card .body h3 { font-size: 1.25rem; margin: 0 0 6px; }
.monument-card .body p { color: var(--asi-slate); font-size: .92rem; margin: 0; }
.monument-card .more { color: var(--asi-blue); font-weight: 600; font-size: .86rem; text-decoration: none; }

/* ---- Region tiles ---- */
.region-tile {
  position: relative; border-radius: 4px; overflow: hidden; min-height: 230px;
  display: flex; align-items: flex-end; color: #fff; padding: 22px; border: 1px solid var(--asi-line);
  background-size: cover; background-position: center; background-color: var(--asi-blue);
}
.region-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,16,40,.10), rgba(13,16,40,.78)); }
.region-tile.no-photo { background: linear-gradient(150deg, var(--asi-blue) 0%, var(--asi-blue-d) 100%); }
.region-tile.no-photo::after { background: none; }
.region-tile .rt-content { position: relative; z-index: 2; }
.region-tile h3 { color: #fff; margin: 0; font-size: 1.5rem; }
.region-tile .count { font-size: .86rem; color: rgba(255,255,255,.88); }

/* ---- Our Work icon cards ---- */
.work-card { background: #fff; border: 1px solid var(--asi-line); border-radius: 4px; padding: 26px 22px; height: 100%; transition: border-color .2s; }
.work-card:hover { border-color: var(--asi-gold); }
/* Gardens is the first Our Work card to have a page behind it (19 Aug 2026), so the
   card can also be an <a>; keep it looking exactly like its sibling divs. */
a.work-card { display: block; text-decoration: none; color: inherit; }
a.work-card:hover { border-color: var(--asi-gold); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
a.work-card h3 { color: var(--asi-ink); }
.work-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--asi-surface); color: var(--asi-blue); display:flex; align-items:center; justify-content:center; font-size: 1.5rem; margin-bottom: 14px; }
.work-card h3 { font-size: 1.18rem; margin: 0 0 6px; }
.work-card p { color: var(--asi-slate); font-size: .9rem; margin: 0; }

/* ---- Notices & Transparency ---- */
.notices { background: var(--asi-blue-d); color: #cfd3f0; }
.notices .section-title { color: #fff; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 14px; align-items: baseline; }
.notice-list li:last-child { border-bottom: 0; }
.notice-date { flex: 0 0 96px; color: var(--asi-gold-l); font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.notice-list a { color: #fff; text-decoration: none; font-size: .96rem; }
.notice-list a:hover { color: var(--asi-gold-l); }
.notice-tag { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; background: rgba(255,255,255,.12); color:#cfd3f0; margin-left:auto; flex:0 0 auto; }
.transparency-tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 20px; text-align: center; color: #fff; text-decoration: none; display: block; height:100%; transition: background .2s; }
.transparency-tile:hover { background: rgba(255,255,255,.12); color:#fff; }
.transparency-tile .bi { font-size: 1.8rem; color: var(--asi-gold-l); }
.transparency-tile .t { display:block; margin-top:8px; font-weight:600; font-size:.95rem; }

/* ---- Visit / CTA band ---- */
.visit-cta { background: linear-gradient(120deg, var(--asi-blue) 0%, var(--asi-blue-l) 100%); color: #fff; }
.visit-cta h2 { color: #fff; }

/* ---- Footer ---- */
.site-footer { background: #11132a; color: #b9bedd; }
.site-footer h4 { color: #fff; font-size: 1.02rem; letter-spacing: .03em; margin-bottom: 16px; }
.site-footer a { color: #b9bedd; text-decoration: none; }
.site-footer a:hover { color: var(--asi-gold-l); }
.footer-logo-chip { background:#fff; border-radius:8px; padding:8px; display:inline-flex; }
.footer-logo-chip img { height: 48px; width:auto; display:block; }
.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu li { padding: 5px 0; }
.footer-contact { font-size: .9rem; line-height: 1.7; }
.subcircles span { display:inline-block; font-size:.78rem; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:4px 9px; border-radius:2px; margin:0 6px 6px 0; }
.anniv-emblem figcaption { font-size: .68rem; letter-spacing: .04em; color: #8c92b8; margin-top: 6px; }
.footer-bottom { background: #0b0d1f; color: #8c92b8; font-size: .82rem; }
.footer-bottom a { color: #b9bedd; }
.powered a { color: var(--asi-gold-l); font-weight: 600; text-decoration: none; }
.powered a:hover { color: #fff; }

/* back to top */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--asi-blue); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; z-index: 60; border:0; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* =========================================================================
   v2 updates (post-meeting): video-style hero, video gallery,
   Report-a-Find, language toggle. Indigenous-Bengal / Bishnupur focus.
   ========================================================================= */

/* ---- Language toggle pill ---- */
.lang-toggle { display:inline-flex; border:1px solid rgba(255,255,255,.55); border-radius:999px; overflow:hidden; }
.lang-toggle a { padding:2px 10px; font-size:.82rem; font-weight:700; color:#fff; text-decoration:none; line-height:1.6; }
.lang-toggle a.active, .lang-toggle a:hover { background:rgba(255,255,255,.20); color:#fff; }
.lang-toggle a + a { border-left:1px solid rgba(255,255,255,.18); }

/* ---- Video hero (crossfading slides + Ken-Burns) ---- */
.hero { position:relative; overflow:hidden; min-height:84vh; display:flex; align-items:center; background:var(--asi-blue-d); }
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.6s ease; }
.hero-slide.active { opacity:1; animation:kenburns 9s ease-out forwards; }
@keyframes kenburns { from{ transform:scale(1.04); } to{ transform:scale(1.16); } }
.hero-overlay { position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(13,16,82,.93) 0%, rgba(22,27,118,.72) 42%, rgba(22,27,118,.30) 100%); }
.hero .container { position:relative; z-index:2; }
.hero-inner { padding-top:64px; padding-bottom:64px; }
.hero-watch { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:500; margin-top:18px; }
.hero-watch .pp { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:1rem; position:relative; }
.hero-watch .pp::after { content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid var(--asi-gold-l); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse { 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.5); opacity:0; } }
.hero-watch:hover { color:var(--asi-gold-l); }
.hero-dots { position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; gap:8px; justify-content:center; }
.hero-dots button { width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.45); padding:0; cursor:pointer; }
.hero-dots button.active { background:var(--asi-gold-l); width:22px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ .hero-slide.active{ animation:none; } }

/* ---- Section intro / about strip ---- */
.about-strip { background:transparent; }
.about-img { border-radius:6px; overflow:hidden; min-height:300px; background-size:cover; background-position:center; border:1px solid var(--asi-line); }
.about-strip .lede { font-size:1.06rem !important; color:var(--asi-slate) !important; }
.kpi-inline { display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; }
.kpi-inline .k .n { font-family:var(--font-display); font-size:1.8rem; color:var(--asi-blue); line-height:1; }
.kpi-inline .k .l { font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--asi-slate); }

/* ---- Browse tiles (ticketed / free / submerged) ---- */
.browse-tile .count { min-height: 1.2em; }

/* ---- Video / "Heritage in motion" gallery ---- */
.film-section { background:var(--asi-blue-d); color:#fff; }
.film-section .section-title { color:#fff; }
.film-section .section-lead { color:rgba(255,255,255,.72); }
.film-card { position:relative; border-radius:6px; overflow:hidden; min-height:240px; display:flex; align-items:flex-end;
  color:#fff; background-size:cover; background-position:center; transition:transform .3s ease; }
.film-card:hover { transform:translateY(-4px); }
.film-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,16,40,.15) 40%, rgba(13,16,40,.82)); }
.film-card .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--asi-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:transform .2s; }
.film-card:hover .play { transform:translate(-50%,-50%) scale(1.1); }
.film-card .cap { position:relative; z-index:2; padding:16px 18px; }
.film-card .cap .t { font-family:var(--font-display); font-size:1.15rem; }
.film-card .cap .d { font-size:.8rem; color:rgba(255,255,255,.75); }
.live-pill { position:absolute; top:12px; left:12px; z-index:3; background:#c4302b; color:#fff; font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:2px; display:inline-flex; align-items:center; gap:6px; }
.live-pill .dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite; }

/* ---- Report a Find (public submission — boss's idea) ---- */
.find-band { background:var(--asi-surface); border-top:1px solid var(--asi-line); border-bottom:1px solid var(--asi-line); }
.find-card { background:#fff; border:1px solid var(--asi-line); border-radius:6px; padding:26px; box-shadow:0 18px 40px rgba(13,16,82,.08); }
.find-card .form-control, .find-card .form-select { border-radius:2px; border-color:var(--asi-line); font-size:.92rem; }
.find-icon { width:54px; height:54px; border-radius:50%; background:var(--asi-blue); color:var(--asi-gold-l);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.find-upload { border:1.5px dashed var(--asi-line); border-radius:4px; padding:14px; text-align:center; color:var(--asi-slate); font-size:.86rem; }
.find-note { font-size:.8rem; color:var(--asi-slate); }
/* required-field marker on the Report-a-Find form (added 03 Aug 2026) */
.find-card .req { color:#b3261e; font-weight:700; margin-left:.15rem; }
/* Bootstrap input-group children default to width:1%; pin the ID-type select instead */
.find-card .id-type { flex:0 0 8.5rem; width:auto; }
@media(max-width:400px){ .find-card .id-type { flex:0 0 7rem; font-size:.85rem; } }

/* ---- demo / sample-content note ---- */
.demo-note { font-size:.78rem; color:var(--asi-slate); display:inline-flex; align-items:center; gap:6px; }
.demo-note .bi { color:var(--asi-gold); }

/* =========================================================================
   v3 (build of 06 Jul 2026) — video hero, catalogue by sub-circle,
   monument detail page, lightbox, gazette blocks, Tamluk museum.
   ========================================================================= */

/* ---- Video hero (home only): 3 auto-rotating slides, 2 video + 1 Ken-Burns still ---- */
.vhero { position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:center; background:var(--asi-blue-d); }
.vhero-slides { position:absolute; inset:0; z-index:0; }
.vhero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.vhero-slide.active { opacity:1; }
.vhero-slide video, .vhero-slide .still {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Warm & brighten the footage — client asked for a lighter, yellowish tone
   (not the cool/blue grade the source clips carry). */
.vhero-slide video { filter:brightness(1.1) saturate(1.06) sepia(.14) hue-rotate(-8deg); }
.vhero-slide .still { background-size:cover; background-position:center; filter:brightness(1.06) sepia(.12) saturate(1.05); }
.vhero-slide.active .still { animation:kenburns 12s ease-out forwards; }
/* Warm gold/umber wash instead of the old navy-blue overlay — keeps white
   headline legible on the left while letting the warm footage read through. */
.vhero-overlay { position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(58,38,10,.80) 0%, rgba(96,64,20,.50) 44%, rgba(140,104,40,.24) 100%); }
.vhero .container { position:relative; z-index:2; }
/* NB: use vertical-only padding here — a `padding:64px 0` shorthand would zero
   out Bootstrap's container side-gutter and push the hero content to the edge. */
.vhero-inner { padding-top:64px; padding-bottom:64px; }
.vhero .eyebrow { color:var(--asi-gold-l); }
.vhero .eyebrow::before { background:var(--asi-gold-l); }
.vhero h1 { color:#fff; font-size:clamp(2rem,4.4vw,3.3rem); max-width:18ch; }
.vhero .lead { color:rgba(255,255,255,.9); font-size:1.12rem; max-width:48ch; }
/* typewriter monument caption over the slide */
.vhero-caption { position:absolute; left:0; right:0; bottom:52px; z-index:3; text-align:center; pointer-events:none; }
.vhero-caption .tw {
  display:inline-block; font-family:var(--font-display); color:#fff; font-size:1.15rem;
  letter-spacing:.06em; background:rgba(13,16,40,.42); border:1px solid rgba(255,255,255,.16);
  padding:8px 18px; border-radius:3px; backdrop-filter:blur(4px); }
.vhero-caption .tw .cur { color:var(--asi-gold-l); font-weight:700; }
.vhero-caption .tw .care { display:inline-block; width:2px; margin-left:2px; background:var(--asi-gold-l);
  animation:blink 1s step-end infinite; }
@keyframes blink { 50%{ opacity:0; } }
.vhero-dots { position:absolute; left:0; right:0; bottom:18px; z-index:4; display:flex; gap:8px; justify-content:center; }
.vhero-dots button { width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.45); padding:0; cursor:pointer; }
.vhero-dots button.active { background:var(--asi-gold-l); width:22px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ .vhero-slide.active .still{ animation:none; } .vhero-slide video{ display:none; } }

/* ---- animated reveal on scroll (light) ---- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---- Museum highlight band (Tamluk) ---- */
.museum-band { background:linear-gradient(120deg,var(--asi-blue-d),var(--asi-blue-l)); color:#fff; border-radius:8px; overflow:hidden; }
.museum-band h3 { color:#fff; }
.museum-photo { min-height:260px; background-size:cover; background-position:center; }
.museum-pill { display:inline-block; background:var(--asi-gold); color:#2a210e; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:2px; }

/* ---- Catalogue: sub-circle sections + toolbar ---- */
.cat-toolbar { background:var(--asi-surface); border:1px solid var(--asi-line); border-radius:6px; padding:14px 16px; }
.cat-toolbar .form-control, .cat-toolbar .form-select { border-radius:2px; border-color:var(--asi-line); }
.chip { border:1px solid var(--asi-line); background:#fff; color:var(--asi-ink); border-radius:999px;
  padding:5px 14px; font-size:.84rem; cursor:pointer; user-select:none; transition:all .15s; }
.chip:hover { border-color:var(--asi-blue); }
.chip.active { background:var(--asi-blue); color:#fff; border-color:var(--asi-blue); }
.subcircle-head { border-left:4px solid var(--asi-gold); padding-left:14px; margin:8px 0 4px; }
.subcircle-head h2 { margin:0; font-size:1.6rem; }
.subcircle-head .sc-sub { color:var(--asi-slate); font-size:.92rem; }
.subcircle-head .sc-count { color:var(--asi-blue); font-weight:600; }
.badge-ticketed { background:var(--asi-gold) !important; color:#2a210e !important; }
.badge-submerged { background:#0e7490 !important; color:#fff !important; }
.badge-free { background:var(--asi-surface-d) !important; color:var(--asi-slate) !important; }
.badge-museum { background:#6D28D9 !important; color:#fff !important; }
.mcard-badges { position:absolute; top:12px; right:12px; z-index:2; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.mcard-badges .badge { font-size:.66rem; letter-spacing:.04em; }
.mono-name-hi { font-size:.9rem; color:var(--asi-slate); font-family:var(--font-body); }
.no-photo-ph { display:flex; align-items:center; justify-content:center; color:var(--asi-blue);
  background:repeating-linear-gradient(135deg,var(--asi-surface),var(--asi-surface) 12px,var(--asi-surface-d) 12px,var(--asi-surface-d) 24px); }
.no-photo-ph .bi { font-size:2.4rem; opacity:.5; }
.cat-empty { text-align:center; color:var(--asi-slate); padding:40px 0; }

/* ---- Monument detail page ---- */
/* Banner sits high in the frame (32%, not 50%): the bottom of a monument hero is
   covered by the scrim and the title block anyway, so biasing the crop upward is
   what keeps spires, finials and rooflines in shot. Flagged on the Bahulara page
   in the 05 Aug 2026 review — the aerial was losing the top of the tower. */
.detail-hero { position:relative; min-height:52vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background-size:cover; background-position:center 32%; background-color:var(--asi-blue-d); }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,16,40,.15) 30%,rgba(13,16,40,.82)); }
.detail-hero .container { position:relative; z-index:2; padding-bottom:34px; }
.detail-hero .crumbs { font-size:.84rem; color:rgba(255,255,255,.8); margin-bottom:10px; }
.detail-hero .crumbs a { color:rgba(255,255,255,.85); text-decoration:none; }
.detail-hero h1 { color:#fff; font-size:clamp(1.8rem,3.6vw,2.8rem); margin:0; }
.detail-hero .sub { color:rgba(255,255,255,.86); margin-top:6px; }
.detail-badges { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.detail-body p { color:var(--asi-ink); }
.detail-side { background:var(--asi-surface); border:1px solid var(--asi-line); border-radius:6px; padding:20px; }
.detail-side dt { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--asi-slate); margin-top:12px; }
.detail-side dd { margin:2px 0 0; font-weight:500; }
.detail-side dt:first-child { margin-top:0; }

/* ---- Gallery + lightbox ---- */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.gallery-grid .g-thumb { position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3; cursor:pointer;
  background:var(--asi-blue-d); border:1px solid var(--asi-line); }
/* Whole frame, never cropped — see "Photographs are never cropped" above. */
.gallery-grid .g-thumb .mp-blur { transition:transform .4s ease; }
.gallery-grid .g-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.gallery-grid .g-thumb:hover .mp-blur { transform:scale(1.24); }
.gallery-grid .g-thumb.feature { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media(max-width:575px){ .gallery-grid .g-thumb.feature{ grid-column:span 2; grid-row:auto; } }
/* Sub-temple caption on grouped monuments — Sl 49 Guptipara, Sl 80 Kalna (03 Aug 2026) */
.gallery-grid .g-thumb .g-cap { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 10px 7px; font-size:.74rem; line-height:1.25; font-weight:600; color:#fff;
  background:linear-gradient(to top, rgba(8,10,30,.86), rgba(8,10,30,.55) 55%, transparent);
  pointer-events:none; }
.gallery-grid .g-thumb.feature .g-cap { font-size:.9rem; padding:26px 14px 11px; }
@media(max-width:575px){ .gallery-grid .g-thumb .g-cap{ font-size:.66rem; padding:12px 7px 5px; } }
.lightbox { position:fixed; inset:0; z-index:1080; background:rgba(9,11,26,.94); display:none;
  align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:84vh; object-fit:contain; border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-close, .lightbox .lb-nav { position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-close { top:20px; right:20px; }
.lightbox .lb-nav.prev { left:20px; top:50%; transform:translateY(-50%); }
.lightbox .lb-nav.next { right:20px; top:50%; transform:translateY(-50%); }
.lightbox .lb-cap { position:absolute; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.85); font-size:.9rem; }

/* ---- Gazette block ---- */
.gazette-block { background:var(--asi-surface); border:1px solid var(--asi-line); border-left:4px solid var(--asi-blue); border-radius:6px; padding:20px; }
.gazette-block h3 { font-size:1.2rem; margin:0 0 4px; }
.gazette-item { display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--asi-line); }
.gazette-item:first-of-type { border-top:0; }
.gazette-item .gi-ico { width:40px; height:48px; flex:0 0 auto; border-radius:3px; background:var(--asi-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.gazette-item .gi-meta { flex:1 1 auto; min-width:0; }
.gazette-item .gi-meta .t { font-weight:600; }
.gazette-item .gi-meta .d { font-size:.82rem; color:var(--asi-slate); }
.gazette-held { font-size:.82rem; color:var(--amber,#B45309); background:#FFFBEB; border:1px solid #FDE68A; border-radius:4px; padding:8px 12px; margin-top:12px; }

/* ---- Visitor Amenities (ASI Kolkata Circle site-wise list) ---- */
.amenity-block { background:#fff; border:1px solid var(--asi-line); border-left:4px solid #0E7C61; border-radius:6px; padding:20px; }
.amenity-block h3 { font-size:1.2rem; margin:0 0 4px; color:var(--asi-ink); }
.amenity-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px 18px; }
.amenity-grid li { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--asi-ink); padding:6px 0; line-height:1.35; }
.amenity-grid li i { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#E7F4EF; color:#0E7C61; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; margin-top:1px; }
.amenity-group { margin-top:16px; padding-top:14px; border-top:1px dashed var(--asi-line); }
.amenity-group:first-of-type { margin-top:8px; }
.amenity-group h4 { font-size:1rem; font-weight:700; color:#0E7C61; margin:0 0 8px; }
.amenity-none { font-size:.88rem; color:var(--asi-slate); margin:6px 0 0; }
.amenity-src { font-size:.8rem; color:var(--asi-slate); margin:14px 0 0; }

/* ---- Mobile: a touch more side breathing room + guard against overflow (fix 6 Jul) ---- */
@media (max-width:575.98px){
  .container,.container-fluid{ padding-left:16px; padding-right:16px; }
  .vhero h1{ font-size:clamp(1.8rem,7vw,2.4rem); }
  .vhero-caption{ bottom:20px; padding:0 12px; }
  .vhero-caption .tw{ font-size:1rem; max-width:100%; }
}
html,body{ overflow-x:hidden; }

/* =========================================================================
   v5 (07 Jul 2026) — top-menu ticket buttons, partner-logo marquee,
   cream texture harmonisation.
   ========================================================================= */

/* header sits on white for a crisp top; content below shows the cream texture */
.site-header { background:#fff; }
.main-navigation { background:#fff; }

/* ---- Ticket buttons in the top menu (asi.nic.in style: teal-green pills) ---- */
.ticket-btns { display:flex; gap:10px; align-items:center; margin-left:auto; padding:8px 0; }
.btn-ticket {
  display:inline-flex; align-items:center; gap:7px;
  background:#0E7C61; color:#fff !important; border:1px solid #0E7C61;
  border-radius:999px; padding:8px 18px; font-weight:600; font-size:.9rem;
  text-decoration:none; white-space:nowrap; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(14,124,97,.28); transition:background .18s, transform .18s;
}
.btn-ticket:hover { background:#0A6650; color:#fff; transform:translateY(-1px); }
.btn-ticket .bi { font-size:1rem; }
.btn-ticket .lbl-short { display:none; }
@media (max-width:575.98px){
  .ticket-btns { gap:7px; }
  .btn-ticket { padding:7px 11px; font-size:.78rem; }
  .btn-ticket .lbl-full { display:none; }
  .btn-ticket .lbl-short { display:inline; }
}

/* ---- Visitor action bar (E-Ticketing + permissions) = the "ticket option bar" ----
   Moved the ticket actions out of the crowded nav into a dedicated full-width bar,
   so the "What's New" ticker can run directly below it (client feedback 08 Jul). ---- */
/* Photographic background behind the ticket bar (client, 21 Aug 2026) — foliage under
   a teal wash.
   The supplied photograph is only 389x137 and the bar is a ~48px strip, so `cover`
   would scale it to 1600x563 and show one magnified 8% slice of it: soft green blobs,
   not leaves. Instead the file is a 778x137 tile — the photograph plus a mirrored copy
   of itself, which repeats horizontally without a seam — drawn at `auto 100%` so it is
   scaled DOWN to the bar height and stays sharp, and the whole photograph reads.
   The teal wash came off at the client's request and went back on an hour later — the
   full green shade is what is wanted, with the foliage reading through it. Keep it: the
   pills are white-labelled and the leaves are bright, so the wash is what holds the bar
   to roughly the flat #0E7C61 it replaced. Together with the deep-green pill shade added
   the same afternoon, the labels now sit at 8.6:1 at worst.
   If ASI ever sends a larger original, rebuild the tile the same way; the CSS is unchanged. */
.action-bar {
  background:
    linear-gradient(rgba(14,124,97,.84), rgba(10,98,78,.86)),
    url("../img/eticket-bar-tile.webp") center / auto 100% repeat-x,
    #0E7C61;
}
.action-bar .ab-inner { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:9px 0; }
.ab-label { color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px; margin-right:2px; }
.ab-btn { position:relative; overflow:hidden; isolation:isolate;
  /* No fill — the pills are an outline and a label over the bar's own washed foliage
     (client, 21 Aug 2026). This is where the bar ended up after trying a frosted-white
     fill and then a deep-green one: with the teal wash restored, no fill actually beats
     both, because the wash already holds the leaves down (labels 4.9:1 at worst against
     3.7:1 for the white fill). */
  display:inline-flex; align-items:center; gap:7px; background:transparent;
  color:#fff !important; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:7px 15px;
  font-weight:600; font-size:.83rem; text-decoration:none; white-space:nowrap;
  transition:color .15s ease-out .02s, border-color .28s, box-shadow .28s, transform .28s; }
/* Diagonal "shine sweep" fill on hover (ASI Patna style, client ref 19 Aug 2026):
   a skewed white panel slides in from the left and stays, so the pill is wiped
   white edge-first rather than cross-fading. z-index:-1 + isolation keeps it above
   the pill's own background but below the icon and label, so no wrapper span is needed.

   Geometry: the panel is the pill plus a 44px bleed on each side, and travels exactly
   its own width (-100% -> 0). That keeps the wipe visible for the whole .38s — an
   earlier build started it 2.4 pill-widths out, so the first third of the transition
   was dead time and a quick pointer pass showed nothing. The 44px bleed is what
   skewX(-22deg) eats across the pill's height (tan22 x 1.6h), so the trailing bottom
   corner still fills on the taller wrapped "Permission..." pill.
   The label colour has to lead, not lag: the ease-out curve puts most of the fill's
   travel in the first 150ms, so a delayed flip leaves white text sitting on white. */
.ab-btn::before { content:""; position:absolute; z-index:-1; inset:-60% -44px;
  background:#fff; transform:translateX(-100%) skewX(-22deg); transform-origin:top left;
  transition:transform .38s cubic-bezier(.22,.61,.36,1); }
.ab-btn:hover, .ab-btn:focus-visible { color:#0A6650 !important; transform:translateY(-1px);
  border-color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:color .15s ease-out .02s, border-color .28s, box-shadow .28s, transform .28s; }
.ab-btn:hover::before, .ab-btn:focus-visible::before { transform:translateX(0) skewX(-22deg); }
@media (prefers-reduced-motion:reduce){
  .ab-btn::before { transition:none; }
  .ab-btn:hover::before, .ab-btn:focus-visible::before { transform:translateX(0) skewX(0deg); }
  .ab-btn:hover, .ab-btn:focus-visible { transform:none; transition:none; }
}
.ab-btn .bi { font-size:1rem; }
.ab-btn.ab-perm { white-space:normal; }   /* long label is allowed to wrap */
@media (max-width:991.98px){ .action-bar .ab-inner { gap:8px; } .ab-btn { font-size:.78rem; padding:6px 12px; } }
@media (max-width:575.98px){ .ab-label { width:100%; margin-bottom:2px; } }
/* Visitor Guidelines added as a 5th action (11 Aug 2026) — tighten the spacing on
   desktop so all five still sit on one line inside the 1320px container.
   Below 1400px the container is only 1140px wide, so the bar wraps as before. */
@media (min-width:1400px){
  .action-bar .ab-inner { gap:8px; flex-wrap:nowrap; }
  .ab-btn { padding:7px 12px; gap:6px; }
  .ab-btn .bi { font-size:.95rem; }
}

/* ---- "What's New" running ticker (news / events) — runs left→right below the bar ---- */
.whatsnew { background:#2b2117; color:#fff; overflow:hidden; }
.whatsnew .wn-inner { display:flex; align-items:stretch; }
.wn-flag { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:var(--asi-gold-l,#e5c76b);
  color:#241a0c; font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:8px 15px; }
.wn-viewport { flex:1 1 auto; overflow:hidden; align-self:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.wn-track { display:inline-flex; align-items:center; gap:46px; white-space:nowrap; padding-left:46px;
  animation:wnScroll 44s linear infinite; }
.whatsnew:hover .wn-track { animation-play-state:paused; }
.wn-track a, .wn-track .wn-item { color:#f4ecdd; text-decoration:none; font-size:.85rem;
  display:inline-flex; align-items:center; gap:8px; }
.wn-track a:hover { color:var(--asi-gold-l,#e5c76b); }
.wn-track .dot { color:var(--asi-gold-l,#e5c76b); font-size:1rem; line-height:0; }
@keyframes wnScroll { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .wn-track{ animation:none; } .wn-viewport{ overflow-x:auto; } }
@media (max-width:575.98px){ .wn-flag{ font-size:.68rem; padding:8px 10px; } .wn-track{ gap:34px; padding-left:34px; } }

/* ---- About page: native EN/HI/BN switcher (official text, not machine-translated) ---- */
.about-native > [data-lang] { display:none; }
.about-native[data-active="en"] > [data-lang="en"],
.about-native[data-active="hi"] > [data-lang="hi"],
.about-native[data-active="bn"] > [data-lang="bn"] { display:block; }
.about-native [lang="hi"] p, .about-native [lang="bn"] p { line-height:1.9; }

/* ---- Monument detail: location map + admission buttons ---- */
.map-block h3 { font-size:1.15rem; }
.map-frame { position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--asi-line); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.map-frame iframe { display:block; width:100%; height:340px; border:0; }
.map-open { display:inline-flex; align-items:center; margin-top:10px; font-weight:600; text-decoration:none; color:#0E7C61; }
.map-open:hover { text-decoration:underline; }
.map-note { font-size:.82rem; color:var(--asi-muted,#6b6257); margin-top:6px; }
.visit-box { background:#fff; border:1px solid var(--asi-line); border-radius:8px; padding:14px 15px; }
.vb-title { font-weight:700; font-size:.9rem; letter-spacing:.02em; margin-bottom:10px; color:var(--asi-ink); }
.access-btns { display:flex; gap:10px; }
.acc-btn { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; padding:9px 12px; font-weight:600; font-size:.86rem; text-decoration:none;
  border:1.5px solid var(--asi-line); background:#f6f3ec; color:#6b6257; white-space:nowrap; transition:all .16s; }
.acc-btn:hover { transform:translateY(-1px); }
.acc-btn.acc-free.active { background:#0E7C61; border-color:#0E7C61; color:#fff; box-shadow:0 2px 8px rgba(14,124,97,.28); }
.acc-btn.acc-tk.active { background:var(--asi-gold,#b07a12); border-color:var(--asi-gold,#b07a12); color:#fff; box-shadow:0 2px 8px rgba(176,122,18,.28); }
.acc-note { font-size:.8rem; color:var(--asi-muted,#6b6257); margin:10px 0 0; }

/* ---- Partner-logo marquee (auto-scrolling), before the footer ---- */
.partners { background:#fff; border-top:1px solid var(--asi-line); border-bottom:1px solid var(--asi-line); padding:22px 0; overflow:hidden; }
.partners .p-head { text-align:center; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--asi-ink); margin-bottom:14px; }
.marquee { display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; align-items:center; gap:64px; padding-right:64px; flex:0 0 auto;
  animation:marquee 28s linear infinite; }
.partners:hover .marquee-track { animation-play-state:paused; }
.marquee-track img { height:52px; width:auto; display:block; filter:grayscale(15%); opacity:.9; transition:filter .2s, opacity .2s; }
.marquee-track a:hover img { filter:none; opacity:1; }
@keyframes marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } .marquee{ overflow-x:auto; } }
@media (max-width:575.98px){ .marquee-track{ gap:40px; padding-right:40px; } .marquee-track img{ height:40px; } }

/* ---- Header/nav fit fix (07 Jul): keep menu on one line + ticket buttons,
   wrap the ticket group to its own line only when truly out of room. ---- */
@media (min-width:992px){
  .main-navigation .container > .d-flex { flex-wrap:wrap; row-gap:4px; }
  .main-navigation .navbar-collapse { flex-basis:auto !important; flex-grow:0; flex-shrink:0; }
  .ticket-btns { margin-left:auto; }
}
@media (min-width:992px) and (max-width:1599.98px){
  /* 9px + the base rule's 4px margin = the old 13px, so the pill keeps the row
     height it had before it became a pill (21 Aug 2026). The ::before is the
     hover sweep now, not the underline, so its -44px bleed must not be reset. */
  #primary-menu > .menu-item > a { padding:9px 8px; font-size:.86rem; }
  #primary-menu .menu-item-has-children > a::after { margin-left:3px; }
  .btn-ticket { padding:7px 12px; font-size:.82rem; }
  .ticket-btns { gap:8px; }
}

/* =========================================================================
   v5.1 (07 Jul 2026) — photo download-lock, visitor counter.
   ========================================================================= */

/* ---- Photo download protection (gallery + lightbox) ---- */
.gallery-grid img, .lightbox img {
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; pointer-events:none;
}
.gallery-grid .g-thumb { position:relative; }
.gallery-grid .g-thumb::after {         /* lock badge on each thumb */
  content:"\F47B";                       /* bootstrap-icons lock-fill */
  font-family:"bootstrap-icons"; position:absolute; top:8px; right:8px; z-index:3;
  width:26px; height:26px; border-radius:50%; background:rgba(13,16,40,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; pointer-events:none;
}
.lightbox .lb-shield { position:absolute; inset:0; z-index:2; }   /* intercepts right-click/drag over image */
.lightbox .lb-lock { position:absolute; top:22px; left:22px; z-index:3; color:rgba(255,255,255,.85);
  font-size:.82rem; display:inline-flex; align-items:center; gap:7px; background:rgba(13,16,40,.45);
  border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:999px; }
.photo-note { font-size:.82rem; color:var(--asi-slate); display:inline-flex; align-items:center; gap:7px; margin-top:10px; }
.photo-note .bi { color:var(--asi-blue); }

/* ---- Visitor counter (lower front page) ---- */
.visitor-band { background:var(--asi-blue-d); color:#cfd3f0; border-top:1px solid rgba(255,255,255,.08); }
.visitor-band .inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; padding:20px 0; text-align:center; }
.visitor-band .vlabel { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--asi-gold-l); font-weight:600; }
.visitor-band .since { font-size:.78rem; color:rgba(255,255,255,.55); }
/* keep lightbox controls above the download-shield overlay */
.lightbox .lb-close, .lightbox .lb-nav { z-index:4; }
/* About Us long-form text */
.about-text p { text-align:justify; margin-bottom:1rem; }
/* home About: taller image that fills the row height beside the text */
.about-strip .about-img { min-height:440px; height:100%; }
@media (max-width:767.98px){ .about-strip .about-img { min-height:280px; } }

/* ---- Visitor count relocated into the footer (before copyright) ---- */

/* ---- Public Awareness: statutory-area diagram (11 Aug 2026) ---- */
.pa-figure { margin: 26px auto 30px; max-width: 640px; text-align: center; }
.pa-figure img { width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--asi-line); border-radius: 6px; padding: 10px; }
.pa-figure figcaption { font-size: .82rem; color: var(--asi-slate); text-align: center;
  margin-top: 10px; line-height: 1.45; }

/* ---- Contact directory (11 Aug 2026) ---- */
.office-card { background:#fff; border:1px solid var(--asi-line); border-left:4px solid var(--asi-blue);
  border-radius:6px; padding:22px 22px 18px; height:100%; }
.office-card.oc-sub { border-left-color:#0E7C61; }
.office-card h3 { font-size:1.15rem; margin:0 0 4px; }
.office-card .oc-kicker { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--asi-gold); font-weight:600; display:block; margin-bottom:6px; }
.office-card address { font-style:normal; font-size:.9rem; color:var(--asi-slate);
  margin:10px 0 0; line-height:1.6; }
.office-card address a { text-decoration:none; }
.office-card address a:hover { text-decoration:underline; }
.office-card address .bi { color:var(--asi-blue); width:1.1em; }
.oc-staff { list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px dashed var(--asi-line); }
.oc-staff li { font-size:.9rem; line-height:1.45; padding:5px 0; }
.oc-staff .nm { font-weight:600; color:var(--asi-ink); }
.oc-staff .dg { display:block; color:var(--asi-slate); font-size:.82rem; }

.contact-table { background:#fff; border:1px solid var(--asi-line); border-radius:6px; overflow:hidden; }
.contact-table table { width:100%; margin:0; border-collapse:collapse; font-size:.9rem; }
.contact-table thead th { background:var(--asi-blue); color:#fff; font-family:var(--font-body);
  font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 14px; text-align:left; white-space:nowrap; }
.contact-table td { padding:12px 14px; border-top:1px solid var(--asi-line); vertical-align:top; line-height:1.5; }
.contact-table tbody tr:nth-child(even) td { background:#FBF8F1; }
.contact-table .ct-name { font-weight:600; color:var(--asi-ink); }
.contact-table .ct-desig { color:var(--asi-slate); }
.contact-table a { text-decoration:none; white-space:nowrap; }
.contact-table a:hover { text-decoration:underline; }
@media (max-width:767.98px){
  .contact-table { overflow-x:auto; }
  .contact-table table { min-width:640px; }
}

/* ---- Brand lockup: official EN/HI/BN name, never machine-translated (ASI review 14 Aug 2026) ---- */
.native-swap > [data-lang] { display:none; }
.native-swap[data-active="en"] > [data-lang="en"],
.native-swap[data-active="hi"] > [data-lang="hi"],
.native-swap[data-active="bn"] > [data-lang="bn"] { display:block; }
/* the same swap used mid-sentence (prose mentions of the organisation's name) */
.ns-inline[data-active="en"] > [data-lang="en"],
.ns-inline[data-active="hi"] > [data-lang="hi"],
.ns-inline[data-active="bn"] > [data-lang="bn"] { display:inline; }

/* ---- Library page gallery ---- */
.lib-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* A client-supplied photograph whose proportions suit a full-width band rather than a
   gallery cell (21 Aug 2026). Fixed height with `cover`, so the band keeps its shape at
   every width; the source is 3840px wide, so it never has to be upscaled. */
.photo-band { height:96px; border-radius:8px; background-position:center; background-size:cover;
  background-repeat:no-repeat; box-shadow:0 2px 10px rgba(25,27,46,.10); }
@media (max-width:575.98px){ .photo-band { height:64px; } }
.lib-shot { margin:0; }
.lib-shot img { width:100%; height:auto; display:block; border-radius:8px;
  border:1px solid var(--asi-line); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.lib-shot figcaption { margin-top:8px; font-size:.86rem; color:var(--asi-slate); line-height:1.45; }
@media (max-width:991.98px){ .lib-gallery { grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:575.98px){ .lib-gallery { grid-template-columns:1fr; } }

/* ---- Gallery pages: albums, photograph grid, film hero ---- */
.gal-head { max-width:760px; margin-bottom:22px; }
.gal-bar { background:var(--asi-surface); border:1px solid var(--asi-line); border-radius:6px; padding:14px 16px; }
.gal-bar-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.gal-find { max-width:420px; flex:1 1 260px; }
.gal-find .form-control, .gal-find .input-group-text { border-radius:2px; border-color:var(--asi-line); }
.gal-count { font-size:.85rem; color:var(--asi-slate); white-space:nowrap; }
.gal-views { display:inline-flex; border:1px solid var(--asi-line); border-radius:999px; background:#fff; padding:3px; }
.gal-view { border:0; background:transparent; border-radius:999px; padding:6px 14px; font-size:.85rem;
  color:var(--asi-slate); cursor:pointer; transition:background .15s ease, color .15s ease; }
.gal-view.active { background:var(--asi-blue); color:#fff; }

.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.album-card { display:block; cursor:zoom-in; background:#fff; border:1px solid var(--asi-line);
  border-radius:8px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.album-card:hover, .album-card:focus-visible { transform:translateY(-3px); border-color:var(--asi-blue);
  box-shadow:0 14px 32px rgba(13,16,82,.16); outline:none; }
.ac-photo { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--asi-blue-d); }
/* Whole frame, never cropped — see "Photographs are never cropped" above. The
   hover zoom moved off the photograph and on to the blurred backdrop: scaling
   a contained image would push it back under the frame edge. */
.ac-photo .mp-blur { transition:transform .35s ease; }
.ac-photo img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.album-card:hover .ac-photo .mp-blur { transform:scale(1.26); }
.ac-count { position:absolute; right:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  background:rgba(13,16,82,.86); color:#fff; font-size:.76rem; padding:4px 10px; border-radius:999px; }
.ac-body { display:block; padding:14px 16px 16px; }
.ac-title { display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--asi-ink); line-height:1.35; }
.ac-loc { display:block; font-size:.82rem; color:var(--asi-slate); margin-top:3px; }

.shot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gal-shot { margin:0; cursor:zoom-in; }
/* The frame moved off the <img> and on to .gs-photo so the photograph can be
   contained inside it — see "Photographs are never cropped" above. */
.gs-photo { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:6px;
  border:1px solid var(--asi-line); background:var(--asi-blue-d);
  transition:transform .18s ease, box-shadow .18s ease; }
.gal-shot img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.gal-shot:hover .gs-photo { transform:translateY(-2px); box-shadow:0 8px 22px rgba(13,16,82,.16); }
.gal-shot figcaption { margin-top:7px; font-size:.82rem; color:var(--asi-slate); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.film-hero { position:relative; display:flex; align-items:flex-end; min-height:420px; border-radius:8px;
  overflow:hidden; background-size:cover; background-position:center; text-decoration:none;
  transition:transform .2s ease; }
.film-hero:hover { transform:translateY(-3px); }
.film-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,16,40,.12) 35%, rgba(13,16,40,.86)); }
.film-hero .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--asi-blue);
  display:flex; align-items:center; justify-content:center; font-size:2rem; transition:transform .2s ease; }
.film-hero:hover .play { transform:translate(-50%,-50%) scale(1.08); }
.fh-body { position:relative; z-index:2; padding:26px 28px; color:#fff; }
.fh-kicker { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--asi-gold-l); margin-bottom:6px; }
.fh-title { display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1.2; }
.fh-note { display:block; font-size:.9rem; color:rgba(255,255,255,.82); margin-top:6px; max-width:60ch; }

.gal-crossbar { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  background:var(--asi-surface); border:1px solid var(--asi-line); border-radius:8px; padding:22px 26px; }

@media (max-width:991.98px){
  .album-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .shot-grid { grid-template-columns:repeat(3,1fr); }
  .film-hero { min-height:320px; }
  .fh-title { font-size:1.35rem; }
}
@media (max-width:575.98px){
  .album-grid { grid-template-columns:1fr; }
  .shot-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .gal-bar-row { justify-content:flex-start; }
  .film-hero { min-height:260px; }
}

/* ---- Tenders page (layout follows the Nalanda University tenders page the
       Circle pointed at, in ASI's own palette) ---- */
.tender-intro { max-width:900px; margin:0 auto 26px; text-align:center; font-size:1.02rem; color:var(--asi-ink); }
.tender-intro a { color:var(--asi-blue); font-weight:600; word-break:break-word; }
.tender-head { font-size:1.35rem; margin:34px 0 16px; }
.tender-rule { border:0; border-top:1px solid var(--asi-line); margin:30px 0; }
.tender-table { overflow-x:auto; margin-bottom:8px; }
.tender-table table { width:100%; min-width:820px; border-collapse:collapse;
  border:1px solid var(--asi-blue); }
.tender-table th, .tender-table td { border:1px solid var(--asi-blue); padding:14px 12px;
  text-align:center; vertical-align:middle; line-height:1.5; }
.tender-table th { background:var(--asi-surface); font-weight:500; font-size:.95rem; color:var(--asi-ink); }
.tender-table td { font-size:.95rem; color:var(--asi-slate); }
.tender-table td.t-nit { color:var(--asi-ink); white-space:normal; }
.tender-table td.t-work { font-weight:700; color:var(--asi-ink); }
.tender-table td.t-doc { text-align:center; }
.tender-table td.t-na { color:var(--asi-muted,#6b6257); }   /* field the notice does not carry */
.tender-doc { display:block; text-decoration:none; color:var(--asi-blue); font-size:.9rem; padding:2px 0; }
.tender-doc:hover { color:var(--asi-blue-l); text-decoration:underline; }
.tender-doc .bi { color:#B03A2E; margin-right:6px; }
.tender-empty { border:1px dashed var(--asi-line); border-radius:6px; background:var(--asi-surface);
  padding:26px; text-align:center; color:var(--asi-slate); }
.tender-empty .bi { font-size:1.6rem; display:block; margin-bottom:8px; color:var(--asi-gold); }
@media (max-width:767.98px){ .tender-intro { text-align:left; } .tender-table th, .tender-table td { padding:11px 9px; font-size:.88rem; } }

/* ---- What's New page (layout from the Circle's sketch, 19 Aug 2026):
       a running banner of picture cards over an archive list, with a Quick Links
       panel beside it. The banner reuses the partner-marquee idiom already in this
       stylesheet — duplicated track, translateX(-50%), pause on hover. ---- */
.wnb { display:flex; overflow:hidden; margin:0 0 34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.wnb-track { display:flex; align-items:stretch; gap:20px; padding-right:20px; flex:0 0 auto;
  animation:marquee 46s linear infinite; }
.wnb:hover .wnb-track, .wnb:focus-within .wnb-track { animation-play-state:paused; }
.wnb-card { flex:0 0 300px; display:flex; flex-direction:column; text-decoration:none;
  background:#fff; border:1px solid var(--asi-line); border-radius:8px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.wnb-card:hover { border-color:var(--asi-blue); box-shadow:0 8px 20px rgba(0,0,0,.10); transform:translateY(-3px); }
.wnb-shot { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--asi-surface-d); }
.wnb-shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.wnb-card:hover .wnb-shot img { transform:scale(1.05); }
.wnb-body { display:flex; flex-direction:column; gap:6px; padding:13px 15px 15px; }
.wnb-title { font-weight:700; color:var(--asi-ink); line-height:1.3; }
.wnb-desc { font-size:.86rem; color:var(--asi-slate); line-height:1.5; }
.wnb-meta { display:flex; align-items:center; gap:9px; margin-top:2px; }
.wnb-tag { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--asi-blue); background:var(--asi-surface); border-radius:999px; padding:3px 9px; }
.wnb-date { font-size:.78rem; color:var(--asi-muted,#6b6257); }

/* Archive list — numbered, each row with its own thumbnail */
.wn-archive { list-style:none; counter-reset:wna; margin:0; padding:0; }
.wn-archive > li { counter-increment:wna; border-bottom:1px solid var(--asi-line); }
.wn-archive > li:first-child { border-top:1px solid var(--asi-line); }
.wna-row { display:flex; align-items:center; gap:14px; padding:14px 6px; text-decoration:none;
  transition:background .2s; }
.wna-row::before { content:counter(wna); flex:0 0 auto; width:26px; text-align:right;
  font-weight:700; color:var(--asi-gold); font-size:.95rem; }
.wna-row:hover { background:var(--asi-surface); }
.wna-shot { flex:0 0 76px; height:57px; border-radius:4px; overflow:hidden; background:var(--asi-surface-d); }
.wna-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.wna-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.wna-title { font-weight:600; color:var(--asi-ink); line-height:1.35; }
.wna-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.wna-date { font-size:.78rem; color:var(--asi-muted,#6b6257); }
.wna-go { margin-left:auto; color:var(--asi-muted,#6b6257); flex:0 0 auto; }
.wna-row:hover .wna-go { color:var(--asi-blue); }

/* Quick Links panel */
.quick-links { background:var(--asi-surface); border:1px solid var(--asi-line); border-radius:8px;
  padding:20px 22px; position:sticky; top:18px; }
.quick-links .ql-head { font-family:var(--font-display); font-size:1.15rem; color:var(--asi-ink);
  margin:0 0 12px; padding-bottom:10px; border-bottom:2px solid var(--asi-gold); }
.quick-links ul { list-style:none; margin:0; padding:0; }
.quick-links li + li { border-top:1px solid var(--asi-line); }
.quick-links a { display:flex; align-items:center; gap:10px; padding:10px 2px; text-decoration:none;
  color:var(--asi-ink); font-weight:600; font-size:.92rem; transition:color .2s, padding-left .2s; }
.quick-links a:hover { color:var(--asi-blue); padding-left:6px; }
.quick-links .bi { color:var(--asi-gold); font-size:1rem; }

@media (prefers-reduced-motion:reduce){
  .wnb-track { animation:none; }
  .wnb { overflow-x:auto; }
}
@media (max-width:991.98px){ .quick-links { position:static; } }
@media (max-width:575.98px){
  .wnb-card { flex-basis:250px; }
  .wna-shot { flex-basis:60px; height:45px; }
}

/* ---- Social media account cards (Resources > Social Media Links).
   Sized for a handful of accounts, so one card stays centred and reads as a
   single official handle rather than a lonely cell in a wide grid. ---- */
.social-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,340px));
  justify-content:center; gap:14px; margin:0 auto 26px; max-width:900px; }
.social-card { display:flex; align-items:center; gap:13px; text-decoration:none;
  border:1px solid var(--asi-line); border-radius:8px; background:#fff; padding:14px 16px;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.social-card:hover { border-color:var(--asi-blue); box-shadow:0 6px 16px rgba(0,0,0,.09); transform:translateY(-2px); }
.sc-icon { flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:1.35rem; color:#fff; }
.sc-fb { background:#1877F2; }
.sc-body { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.sc-plat { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--asi-muted,#6b6257); font-weight:700; }
.sc-name { font-weight:700; color:var(--asi-ink); }
.sc-note { font-size:.82rem; color:var(--asi-muted,#6b6257); }
.sc-go { margin-left:auto; color:var(--asi-muted,#6b6257); font-size:.9rem; }
.social-card:hover .sc-go { color:var(--asi-blue); }

/* ---- Site plans from the ASI Inventory volume (client, 24 Aug 2026) ----
   Pen-on-paper line drawings, so each sits on its own white card: the page
   background is a cream texture and un-backed line art reads as a stain on it.
   The images are small (250-800px on the long edge, as scanned), so they are
   never upscaled past their own width — `max-width` on the img, and the figure
   centres whatever is left. */
.plan-block h3 { font-size: 1.15rem; margin-bottom: .85rem; }
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.plan-grid-multi { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.plan-fig {
  margin: 0; background: #fff; border: 1px solid var(--asi-line); border-radius: 8px;
  padding: 12px; text-align: center;
}
.plan-fig img { max-width: 100%; height: auto; mix-blend-mode: multiply; }
.plan-fig figcaption {
  margin-top: 8px; font-size: .82rem; color: var(--asi-slate); font-weight: 600;
  border-top: 1px solid var(--asi-line); padding-top: 7px;
}
.plan-note { font-size: .82rem; color: var(--asi-slate); margin-top: 10px; }
@media (max-width: 575.98px) {
  .plan-grid-multi { grid-template-columns: 1fr 1fr; }
  .plan-fig { padding: 8px; }
  .plan-fig figcaption { font-size: .74rem; }
}
/* One of the twelve Kalna temples (Lalji) has no separate drawing in the volume —
   the page it sits on repeats the general site plan, which is already shown above
   as the group's own. The name is still listed so the twelve stay complete. */
.plan-none { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:120px; color:var(--asi-slate); font-size:.78rem; text-align:center; }
.plan-none .bi { font-size:1.2rem; opacity:.55; }

/* ---- Coordinates + Approach from the ASI Inventory (client, 24 Aug 2026) ----
   The coordinate string is set in a tabular face so the degree/minute/second
   figures line up between monuments, and allowed to wrap on narrow columns. */
.detail-side .dd-coords {
  font-variant-numeric: tabular-nums; font-size: .92rem; letter-spacing: .01em;
  overflow-wrap: anywhere;
}
/* Approach (Inventory point 4) sits in the same card as the rows above it. The rule
   groups the three travel rows without introducing a second heading style into a
   list that has never had one. */
.detail-side dt.dt-group {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--asi-line);
}
.detail-side dt .bi { color: var(--asi-blue); opacity: .8; font-size: .8rem; }

/* ---- Modelling Section: the display rack (client, 25 Aug 2026) --------------
   The Circle's plaster-cast replicas are shown standing on shelves, to the
   client's reference of a lit retail display. Each frame keeps its own aspect
   ratio — height is fixed and width is auto — so the wide view of the display
   case and a tall relief stand side by side the way they do on a real shelf,
   and nothing is cropped.
   ⚠ NO overflow:hidden on .rack-item. It would make each item a block
   formatting context and re-measure the shelf, which is the same defect that
   moved the search button on 24 Aug. Nothing here needs clipping. */
.model-rack {
  background: linear-gradient(180deg, #FBF7EC 0%, #F1E9D8 100%);
  border: 1px solid var(--asi-line);
  border-radius: 10px;
  padding: 30px 26px 14px;
  box-shadow: inset 0 2px 16px rgba(25,27,46,.07);
}
.rack-shelf {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; gap: 36px;
  padding-bottom: 14px; margin-bottom: 34px;
}
.rack-shelf:last-child { margin-bottom: 8px; }
/* the shelf board, with its front edge picked out below the boards' face */
.rack-shelf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(180deg, #EBE2CD 0%, #DBCFB4 55%, #C6B695 100%);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(25,27,46,.18);
}
.rack-item {
  position: relative; display: block;
  padding: 0; border: 0; background: transparent; line-height: 0;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
/* The white card is the frame, not the image: the name and price sit on the mount
   beneath the picture, so each model stands on the shelf already labelled — the way
   a case label sits with its object (client, 25 Aug 2026). Keeping the label inside
   the card means no offset arithmetic against the shelf board: the whole card,
   label and all, simply rests on it. */
.rack-frame {
  display: block; background: #fff; padding: 9px 9px 4px;
  border: 1px solid var(--asi-line); border-radius: 4px;
  box-shadow: 0 12px 20px -9px rgba(25,27,46,.5);
  transition: box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.rack-item img {
  display: block; height: 250px; width: auto; max-width: 100%;
  /* same protection the gallery and lightbox already carry */
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  -webkit-touch-callout: none; pointer-events: auto;
}
/* .rack-item sets line-height:0 to kill the inline-image gap — the label puts it back */
.rack-label { display: block; padding: 9px 4px 4px; text-align: center; line-height: 1.3; }
.rack-name  { display: block; font-size: .82rem; font-weight: 600; color: var(--asi-ink); }
.rack-price { display: block; font-size: .82rem; font-weight: 700; color: var(--asi-blue);
              margin-top: 2px; font-variant-numeric: tabular-nums; }
.rack-price.is-unlisted { font-weight: 500; color: var(--asi-slate); }
.rack-item:hover { transform: translateY(-7px); }
.rack-item:hover .rack-frame { box-shadow: 0 20px 30px -11px rgba(25,27,46,.55); }
.rack-item:focus-visible { outline: 3px solid var(--asi-blue-l); outline-offset: 5px; border-radius: 4px; }
/* the expand badge — the only cue that a model opens */
.rack-item .rack-zoom {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,27,118,.9); color: #fff; font-size: .8rem; line-height: 1;
  opacity: 0; transform: scale(.85);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.rack-item:hover .rack-zoom, .rack-item:focus-visible .rack-zoom { opacity: 1; transform: scale(1); }
.rack-note { text-align: center; color: var(--asi-slate); font-size: .88rem; margin: 18px 0 0; }
@media (max-width: 991.98px) {
  .rack-item img { height: 190px; }
  .rack-shelf { gap: 26px; }
}
@media (max-width: 575.98px) {
  .model-rack { padding: 18px 14px 10px; }
  .rack-item img { height: 148px; }
  .rack-frame { padding: 6px 6px 3px; }
  .rack-label { padding: 6px 2px 3px; }
  .rack-name, .rack-price { font-size: .74rem; }
  .rack-shelf { gap: 16px; padding-bottom: 10px; margin-bottom: 24px; }
  .rack-shelf::after { height: 7px; }
}

/* ---- Lightbox captions that carry a title and a description ----------------
   The models open with a name and a short note, not the single line the photo
   galleries use. Rich captions get a scrim so the text stays legible where it
   overlaps the picture; plain captions are untouched. */
.lightbox .lb-cap { max-width: min(780px, 88vw); margin: 0 auto; }
.lightbox .lb-cap.rich {
  bottom: 0; left: 0; right: 0; max-width: none; padding: 40px 18px 24px;
  background: linear-gradient(to top, rgba(9,11,26,.94) 30%, rgba(9,11,26,0) 100%);
}
.lightbox .lb-cap .lb-title {
  display: block; font-family: "Marcellus", Georgia, serif;
  font-size: 1.16rem; color: #fff; margin-bottom: 5px; letter-spacing: .01em;
}
.lightbox .lb-cap .lb-desc {
  display: block; max-width: 62ch; margin: 0 auto;
  color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.55;
}


/* ---- Body prose is justified site-wide (client, 25 Aug 2026) ----------------
   .about-text p has justified since the beginning; these are the other blocks
   that carry real paragraphs, so the whole site sets both edges straight.
   ⚠ Anything deliberately centred is put back below. `text-align:justify` on a
   child overrides the centring it would otherwise inherit — without these two
   lines the lead paragraph under eight page titles would silently go flush left. */
.section-lead,
.lede { text-align: justify; }
.text-center .section-lead { text-align: center; }