/* ============================================================
   PANCHAPURI MUSEUM — Main Stylesheet
   Design: Refined Minimalist with Warm Earth Tones
   Fonts: DM Serif Display + Jost + Space Mono
   ============================================================ */

:root {
  /* ── Punchy / Vibrant / High-Contrast / Light palette ──────────────
     A deliberate pivot from the earlier muted bronze/navy "professional"
     scheme toward something bolder: a light, crisp white/cream backdrop
     with true high-contrast near-black text, and a vivid saturated
     marigold-orange as the primary accent (culturally resonant — festival
     marigold — and genuinely punchy rather than muted) paired with a
     vivid contrasting emerald-teal as the secondary accent, so the two
     accents read as an intentional bold complementary pairing rather than
     everything converging on one subdued tone. Variable NAMES are kept
     as-is (--gold, --ochre, etc.) since they're referenced in ~100+ places
     across the CSS/templates — only the values changed here. */
  --ink:    #171923;   /* near-black — maximum text contrast on the light background */
  --earth:  #232635;
  --ochre:  #0D9488;   /* vivid emerald-teal — secondary accent, used for contrast against the orange */
  --gold:   #F97316;   /* vivid saturated marigold-orange — PRIMARY accent (buttons, links, highlights) */
  --gold-dk:#C2410C;
  --cream:  #FFF3E8;   /* light warm tint (not muted beige) — keeps the "light" feel while still warm */
  --paper:  #FFFFFF;   /* pure white page background — maximum brightness/contrast */
  --white:  #FFFFFF;
  --grey:   #475569;   /* slate grey — body copy, still reads clearly against white */
  --border: rgba(23,25,35,0.10);
  --shadow: 0 4px 34px rgba(23,25,35,0.12);
  --radius: 3px;
  --tr:     all 0.4s cubic-bezier(0.22,1,0.36,1);
  --serif:  'Cinzel', 'Laila', Georgia, serif;
  --sans:   'Manrope', 'Laila', system-ui, sans-serif;
  --mono:   'Space Mono', monospace;
  --header-h: 84px; /* reduced from a taller two-tier height for a more compact, modern feel */
  --header-h-scrolled: 68px;
  --header-float-gap: 10px; /* floating header's margin from the very top of the viewport */
  --utility-h: 40px;
  /* Tertiary tint — small status/accent moments only, never a second
     competing primary color. */
  /* Tertiary tint — small status/accent moments only, kept distinct from
     the vivid teal (--ochre) above so a status chip never gets confused
     for the secondary brand accent. */
  --teal:   #14B8A6;
  --teal-dk:#0F766E;
  --burgundy-dk: #DC2626;
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.7; position: relative; }
/* Scroll lock while the mobile drawer is open.
   IMPORTANT: this used to be `html.nav-open, html.nav-open body {
   overflow:hidden; height:100%}`. Setting `overflow:hidden` on a
   scrolled-down page collapses its scrollable area to the viewport height
   right there and then — the browser has nowhere to keep the old scroll
   offset, so it snaps to the top immediately, and re-enabling scroll on
   close doesn't restore it either. That was the "opening the hamburger
   menu jumps me to the top of the page" bug. The fix (below, paired with
   the JS in main.js) locks scroll with `position:fixed` on <body> instead,
   at `top: -{the exact scroll offset}`, then restores that same offset on
   close — so the visible content never moves. */
html.nav-open body {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── Custom Cursor ─────────────────────────────── */
.cursor-dot {
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: opacity 0.3s;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, transform 0.1s;
}
body:hover .cursor-dot, body:hover .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring { width: 48px; height: 48px; border-color: var(--ochre); }

/* ── Page Loader ───────────────────────────────── */
.page-loader {
  position: fixed; inset: 0; background: var(--ink); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-logo {
  font-family: var(--serif); font-size: 2.5rem; color: var(--gold);
  letter-spacing: 4px; margin-bottom: 24px;
  animation: pulse 1.5s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.loader-bar {
  width: 180px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px;
  margin: 0 auto; overflow: hidden;
}
.loader-fill {
  height: 100%; width: 0; background: var(--gold); border-radius: 2px;
  animation: loadFill 0.9s ease forwards;
}
@keyframes loadFill { to { width: 100%; } }

/* ── Header (two-tier: utility bar + main nav) ──────────────── */
.utility-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--utility-h); background: var(--ink); color: rgba(255,255,255,0.75);
  font-size: 0.74rem; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
.utility-bar.hide { transform: translateY(-100%); opacity: 0; }
.utility-bar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; max-width: 1300px; margin: 0 auto; }
.utility-left, .utility-right { display: flex; align-items: center; gap: 20px; }
.utility-bar a { color: rgba(255,255,255,0.75); transition: color 0.25s; }
.utility-bar a:hover { color: var(--gold); }
.utility-bar i { color: var(--gold); margin-right: 5px; font-size: 0.72rem; }
.utility-right a[aria-label] { margin-right: 2px; }
.utility-right a[aria-label] i { margin-right: 0; }

#siteHeader {
  position: fixed; left: 16px; right: 16px; z-index: 1000;
  top: calc(var(--utility-h) + var(--header-float-gap));
  max-width: 1300px; margin: 0 auto; border-radius: 20px;
  height: var(--header-h); transition: var(--tr), top 0.4s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
  /* ── Liquid glass ──────────────────────────────────────────────
     A floating, detached bar (not edge-to-edge) with true frosted-glass
     translucency: backdrop-filter blurs + saturates whatever scrolls
     behind it (hero image or page content alike), a soft white tint gives
     it body without going opaque, and the inset highlight + outer shadow
     is what sells the "glass" read — a bright top inner edge like light
     catching a curved glass surface, floating with real depth below it.
     Because the tint is applied consistently in front of ANY background,
     nav text can stay one consistent dark color at all times — no more
     needing a separate light-text variant for "over the hero" vs
     "scrolled over solid content" like the old opaque-swap header did. */
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 8px 32px rgba(23,25,35,0.16), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(255,255,255,0.15);
}
#siteHeader.scrolled {
  /* The utility bar above (contact info strip) auto-hides on scroll, so
     the header no longer needs to reserve space for it — it settles to
     sitting just var(--header-float-gap) from the true top of the
     viewport. Previously this top value never changed after scrolling,
     so the header kept leaving a large dead gap (utility bar's height
     worth of empty space) above it even once that bar had slid out of
     view — this is the "huge gap" bug, now fixed. */
  top: var(--header-float-gap);
  height: var(--header-h-scrolled);
  background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58));
  box-shadow: 0 10px 40px rgba(23,25,35,0.20), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(255,255,255,0.2);
}
/* Thin accent line that grows in under the header once scrolled — the
   header's own subtle "signature" animation, distinct from the hero. */
#siteHeader::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); border-radius: 2px;
}
#siteHeader.scrolled::after { transform: scaleX(1); }
.header-inner {
  max-width: 1300px; margin: 0 auto; height: 100%;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Logo */
.site-logo { display: flex; align-items: center; gap: 12px; }
.logo-img { height: 42px; width: auto; object-fit: contain; transition: height 0.4s; }
#siteHeader.scrolled .logo-img { height: 34px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: 0.5px; }
.logo-tagline { font-size: 0.62rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold-dk); }
/* Text-mode wordmark (no logo image set) — the site name itself becomes
   the primary visual mark, styled larger/bolder than its normal small
   subtitle role next to an image. */
.logo-mode-text .logo-name { font-size: 1.35rem; }

/* Navigation — one consistent dark color scheme at all times now (see the
   glass tint comment above for why this no longer needs a light-text
   "over hero" variant). */
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 4px; }
.nav-link {
  display: inline-block; padding: 8px 15px; border-radius: 30px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink);
  position: relative; transition: color 0.3s, background-color 0.3s;
}
.nav-link:hover { background: rgba(255,255,255,0.4); color: var(--gold-dk); }
.nav-link::after {
  content: ''; position: absolute; bottom: 2px; left: 15px; right: 15px;
  height: 2px; background: var(--gold); transform: scaleX(0);
  transform-origin: right; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--gold-dk); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-search-toggle {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--ink); font-size: 0.85rem; transition: var(--tr);
}
.header-search-toggle:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-visit {
  /* Deliberately understated — a small pill-outline link rather than a
     loud filled block, so it reads as a clean secondary nav action next
     to the icon buttons instead of competing with them for attention. */
  padding: 7px 16px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--border);
  border-radius: 30px; transition: var(--tr); white-space: nowrap;
}
.btn-visit:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(21,19,15,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.search-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s linear 0s; }
.search-overlay-close {
  position: absolute; top: 32px; right: 32px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: white; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: var(--tr);
}
.search-overlay-close:hover { background: var(--gold); color: var(--ink); transform: rotate(90deg); }
.search-overlay-form { display: flex; align-items: center; gap: 16px; width: 90%; max-width: 640px; border-bottom: 2px solid rgba(255,255,255,0.25); padding-bottom: 16px; }
.search-overlay-form i { color: var(--gold); font-size: 1.3rem; }
.search-overlay-form input {
  flex: 1; background: none; border: none; color: white; font-family: var(--serif); font-size: 1.6rem; outline: none;
}
.search-overlay-form input::placeholder { color: rgba(255,255,255,0.35); }
.search-overlay-form button {
  background: var(--gold); color: var(--ink); border: none; padding: 10px 22px; border-radius: var(--radius);
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: var(--tr);
}
.search-overlay-form button:hover { background: var(--ochre); color: var(--white); }
.search-overlay-hint { color: rgba(255,255,255,0.4); font-size: 0.85rem; }

/* ── Live AJAX fuzzy-search dropdown (inside the search overlay) ── */
.search-live-results {
  width: 90%; max-width: 720px; max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
.search-live-results.open { max-height: 60vh; opacity: 1; overflow-y: auto; padding-right: 4px; }
.search-live-results::-webkit-scrollbar { width: 6px; }
.search-live-results::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.search-live-group { margin-bottom: 22px; text-align: left; }
.search-live-group-title {
  color: var(--gold); font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.search-live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.search-live-card { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px; text-decoration: none;
  transition: var(--tr);
}
.search-live-card:hover, .search-live-card.kbd-active { background: rgba(169,118,47,0.16); border-color: var(--gold); transform: translateY(-2px); }
.search-live-card-body h5 mark { background: var(--gold); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.search-live-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.search-live-thumb-empty { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--gold); font-size: 1.1rem; }
.search-live-card-body { min-width: 0; }
.search-live-card-meta { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gold); font-weight: 700; }
.search-live-card-body h5 { font-family: var(--sans); font-size: 0.85rem; color: white; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-live-card-body p { font-size: 0.72rem; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-live-viewall {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px;
  padding: 12px; color: var(--ink); background: var(--gold); border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--tr);
}
.search-live-viewall:hover { background: var(--white); }
.search-live-empty { text-align: center; color: rgba(255,255,255,0.5); padding: 30px 0; }
.search-live-empty i { font-size: 1.6rem; color: var(--gold); margin-bottom: 10px; display: block; }
.search-live-loading { display: flex; gap: 6px; justify-content: center; padding: 30px 0; }
.search-live-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: searchDotPulse 1s ease-in-out infinite; }
.search-live-loading span:nth-child(2) { animation-delay: 0.15s; }
.search-live-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes searchDotPulse { 0%,80%,100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 640px) {
  .search-live-cards { grid-template-columns: 1fr; }
}

/* Search results page */
.search-page-form {
  display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 0 auto 48px;
  border: 2px solid var(--border); border-radius: 50px; padding: 6px 6px 6px 24px;
  background: var(--white); box-shadow: var(--shadow); transition: border-color 0.3s;
}
.search-page-form:focus-within { border-color: var(--gold); }
.search-page-form i { color: var(--gold); font-size: 1.05rem; }
.search-page-form input { flex: 1; border: none; outline: none; font-family: var(--sans); font-size: 1rem; padding: 12px 0; background: transparent; color: var(--ink); }
.search-page-form button { background: var(--gold); color: var(--white); border: none; padding: 13px 30px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; cursor: pointer; transition: var(--tr); }
.search-page-form button:hover { background: var(--gold-dk); }
.search-result-group { margin-bottom: 52px; }
.search-group-title { font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.5px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; color: var(--ink); padding-bottom: 14px; border-bottom: 2px solid var(--border); }
.search-group-title i { color: var(--gold); font-size: 1.1rem; }
.search-group-title span { font-family: var(--sans); font-size: 0.72rem; color: var(--white); background: var(--gold); padding: 3px 11px; border-radius: 20px; font-weight: 700; margin-left: 4px; }
.search-result-group { margin-bottom: 56px; scroll-margin-top: 100px; }

/* ── Filter pills (quick-jump between result categories) ─────────── */
.search-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.search-filter-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 30px;
  border: 1.5px solid var(--border); color: var(--grey); font-size: 0.82rem; font-weight: 600;
  background: var(--white); transition: var(--tr); text-decoration: none;
}
.search-filter-pill i { color: var(--gold); }
.search-filter-pill span { background: var(--cream); color: var(--ink); font-size: 0.68rem; padding: 1px 8px; border-radius: 10px; font-weight: 700; }
.search-filter-pill:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.search-filter-pill.active { background: var(--ink); border-color: var(--ink); color: white; }
.search-filter-pill.active span { background: var(--gold); color: var(--ink); }
.search-filter-pill.active i { color: var(--gold); }

/* ── Search result cards — richer premium treatment ───────────────
   Image with hover-zoom + gradient legibility layer, floating "Best
   Match" ribbon on the top hit per section, and a category/date overlay
   chip sitting directly on the photo instead of plain text below it. */
.search-result-grid { gap: 32px; }
.search-result-card {
  display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: var(--tr); text-decoration: none; color: inherit;
  border: 1px solid var(--border); height: 100%;
}
.search-result-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(23,25,35,0.22); border-color: var(--gold); }
.search-result-card-media { position: relative; aspect-ratio: 16/10.5; overflow: hidden; background: var(--cream); }
.search-result-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.search-result-card:hover .search-result-card-media img { transform: scale(1.08); }
.search-result-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,25,35,0.55) 0%, transparent 45%); }
.search-result-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--gold); background: linear-gradient(135deg, var(--cream), var(--white)); }
.search-result-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--gold); color: var(--ink);
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; padding: 5px 11px; border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.search-result-tag-overlay {
  position: absolute; bottom: 12px; left: 14px; z-index: 2; color: white; font-size: 0.7rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.search-result-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.search-result-card-textonly .search-result-card-body { padding-top: 22px; }
.search-result-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dk); font-weight: 700; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 5px; }
.search-result-card h4 { font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; margin: 2px 0 8px; color: var(--ink); }
.search-result-card p { font-size: 0.83rem; color: var(--grey); line-height: 1.55; margin: 0; }
.search-result-card p i { color: var(--gold); margin-right: 4px; }
@media (max-width: 640px) {
  .search-filter-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .search-filter-pill { flex-shrink: 0; }
  .search-group-title { font-size: 1.1rem; }
}

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; justify-content: center; align-items: center;
  padding: 6px; position: relative; z-index: 1001;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  border-radius: 50%; transition: background-color 0.3s ease;
}
.nav-toggle:active { background-color: rgba(249,115,22,0.14); }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease, background-color 0.3s;
  transform-origin: center;
}
#siteHeader:not(.scrolled) .nav-toggle span { background: white; }
.nav-toggle.open span { background: var(--ink) !important; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; top: calc(var(--header-h) + var(--header-float-gap));
  background: rgba(250,247,242,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 999; overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden;
  /* pointer-events:none while closed is a deliberate second line of defense:
     even if visibility/transform ever get out of sync (e.g. an interrupted
     transition on iOS Safari), a closed drawer can never intercept or "eat"
     a touch on the page behind it. */
  pointer-events: none;
  transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.5s;
  box-shadow: -8px 0 40px rgba(26,18,9,0.12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-drawer.open {
  transform: translateX(0); visibility: visible; pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0s;
}
.drawer-inner { padding: 40px 32px; }
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-link {
  display: block; padding: 16px 0; font-family: var(--serif);
  font-size: clamp(1.25rem, 5vw, 1.6rem); color: var(--ink); border-bottom: 1px solid var(--border);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateX(24px);
  transition: color 0.3s, padding-left 0.3s, opacity 0.45s ease, transform 0.45s ease;
}
.mobile-drawer.open .drawer-link { opacity: 1; transform: translateX(0); }
.drawer-nav li:nth-child(1) .drawer-link { transition-delay: 0.08s; }
.drawer-nav li:nth-child(2) .drawer-link { transition-delay: 0.13s; }
.drawer-nav li:nth-child(3) .drawer-link { transition-delay: 0.18s; }
.drawer-nav li:nth-child(4) .drawer-link { transition-delay: 0.23s; }
.drawer-nav li:nth-child(5) .drawer-link { transition-delay: 0.28s; }
.drawer-nav li:nth-child(6) .drawer-link { transition-delay: 0.33s; }
.drawer-nav li:nth-child(7) .drawer-link { transition-delay: 0.38s; }
.drawer-link:hover, .drawer-link:active, .drawer-link.active { color: var(--ochre); padding-left: 12px; }
.drawer-footer {
  margin-top: 40px; opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s ease 0.4s, transform 0.45s ease 0.4s;
}
.mobile-drawer.open .drawer-footer { opacity: 1; transform: translateY(0); }
.drawer-contact { display: flex; flex-direction: column; gap: 12px; }
.drawer-contact a { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: var(--grey); touch-action: manipulation; }
.drawer-contact a i { color: var(--gold); width: 16px; }

@media (max-width: 480px) {
  .drawer-inner { padding: 28px 24px; }
  .drawer-link { padding: 14px 0; }
}

/* ── Page Hero (generic) ───────────────────────── */
.page-hero {
  min-height: 45vh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + var(--header-float-gap) + 60px) 32px 60px;
  background: var(--earth);
}
.page-hero-bg {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  opacity: 0.35; transition: transform 8s ease;
}
.page-hero:hover .page-hero-bg { transform: scale(1.04); }
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(26,18,9,0.6) 0%, rgba(44,31,14,0.85) 100%);
}
.page-hero-content {
  position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; width: 100%;
}
.page-hero-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(212,168,67,0.4); padding: 4px 12px; border-radius: 2px;
  margin-bottom: 16px;
}
.page-hero h1 {
  font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--white); line-height: 1.1; margin-bottom: 20px;
}
.page-hero p { font-size: 1.1rem; color: rgba(255,255,255,0.75); max-width: 600px; }

/* ── Section layouts ───────────────────────────── */
.container { max-width: 1300px; margin: 0 auto; padding: 0 32px; }
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.section-dark { background: var(--ink); color: var(--white); }
.section-earth { background: var(--earth); color: var(--white); }
.section-cream { background: var(--cream); }

.section-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ochre); margin-bottom: 12px;
  display: block;
}
.section-title {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15; margin-bottom: 20px; color: var(--ink);
}
.section-dark .section-title, .section-earth .section-title { color: var(--white); }
.section-subtitle {
  font-size: 1.05rem; color: var(--grey); max-width: 580px; line-height: 1.75;
}
.section-dark .section-subtitle { color: rgba(255,255,255,0.65); }
.section-header { margin-bottom: 64px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-subtitle { margin: 0 auto; }

/* ── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: var(--radius); transition: var(--tr); cursor: pointer;
}
.btn-primary {
  background: var(--gold); color: var(--ink);
}
.btn-primary:hover { background: var(--ochre); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.35); }
.btn-outline {
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline-white {
  border: 1.5px solid rgba(255,255,255,0.4); color: var(--white); background: transparent;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: white; }
.btn-ghost { color: var(--ochre); font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost::after { content: '→'; transition: transform 0.3s; }
.btn-ghost:hover::after { transform: translateX(4px); }

.share-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; margin-top: 4px; background: var(--cream); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.share-row-label {
  font-size: 0.76rem; color: var(--ink); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.share-row-label i { color: var(--gold); }
.share-row-btns { display: flex; gap: 8px; margin-left: auto; }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--white); color: var(--grey); display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.88rem; cursor: pointer; transition: all 0.25s;
}
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(23,25,35,0.18); }
/* Each network's own brand color on hover — more recognizable/professional
   than every icon turning the same accent color. */
.share-btn-facebook:hover { background: #1877F2; border-color: #1877F2; color: white; }
.share-btn-twitter:hover  { background: #0F1419; border-color: #0F1419; color: white; }
.share-btn-whatsapp:hover { background: #25D366; border-color: #25D366; color: white; }
.share-btn-copy:hover     { background: var(--gold); border-color: var(--gold); color: white; }
@media (max-width: 480px) {
  .share-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .share-row-btns { margin-left: 0; }
}

/* ── HOME: Hero Slider ─────────────────────────── */
.hero-slider { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: var(--ink); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 8s ease; }
.hero-slide.active img { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,18,9,0.3) 0%, rgba(26,18,9,0.75) 100%);
}
.hero-content {
  /* Anchored as a flex box that spans from just below the header down to
     the bottom safe-zone, with content pinned to the bottom of THAT box —
     not to the viewport bottom directly. IMPORTANT: this box boundary
     alone does NOT guarantee the title can't overlap the header — flexbox
     doesn't clip overflowing children, so a long enough multi-line title
     can still grow upward past the box's own top edge and render behind
     the fixed header (this actually happened: a longer admin-entered
     title wrapped to 4+ lines at the old font size and was rendering
     hidden behind the header). The real fix is below on .hero-title
     (a hard line-count cap + smaller font size), not just this box. */
  position: absolute; left: 0; right: 0; z-index: 2;
  top: calc(var(--utility-h) + var(--header-h) + var(--header-float-gap) + 32px);
  bottom: 12%;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 32px;
}
.hero-badge {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(169,118,47,0.5); padding: 5px 14px; border-radius: 2px;
  margin-bottom: 20px; animation: fadeUp 0.8s ease both; animation-delay: 0.2s;
  align-self: flex-start;
}
.hero-title {
  /* Smaller than before, and — the actual fix for the overlap bug, not
     just a size tweak — hard-capped to 3 lines with an ellipsis. A font
     size alone doesn't protect against this: an admin can always type a
     longer title later. This guarantees a fixed maximum rendered height
     for the title no matter what text goes into it, so it can never grow
     upward into the header again regardless of length. */
  font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  color: var(--white); line-height: 1.15; max-width: 760px;
  animation: fadeUp 0.8s ease both; animation-delay: 0.35s;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.hero-desc {
  font-size: 1.1rem; color: rgba(255,255,255,0.72); max-width: 500px;
  margin: 20px 0 32px; line-height: 1.7;
  animation: fadeUp 0.8s ease both; animation-delay: 0.5s;
  /* Same defensive cap as the title above — a long admin-entered
     description shouldn't be able to push the button row (or the whole
     stack) out of the safe zone either. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.8s ease both; animation-delay: 0.65s; }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.hero-controls {
  position: absolute; bottom: 32px; right: 32px; z-index: 3;
  display: flex; gap: 8px;
}
.hero-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); color: white; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,18,9,0.4); backdrop-filter: blur(8px);
  transition: var(--tr);
}
.hero-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.hero-dots {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.hero-dot {
  width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.35);
  transition: all 0.4s ease; cursor: pointer;
}
.hero-dot.active { background: var(--gold); width: 24px; }

.hero-scroll-hint {
  position: absolute; bottom: 40px; left: 32px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.hero-scroll-hint::before {
  content: ''; width: 40px; height: 1px; background: rgba(255,255,255,0.3);
  animation: scrollLine 2s ease infinite;
}
@keyframes scrollLine { 0%{width:0;opacity:0} 50%{width:40px;opacity:1} 100%{width:40px;opacity:0} }

/* ── HOME: Stats bar ───────────────────────────── */
.stats-bar {
  background: var(--ink);
  border-top: 1px solid rgba(212,168,67,0.2);
  border-bottom: 1px solid rgba(212,168,67,0.2);
}
.stats-bar .container { display: flex; }
.stat-item {
  flex: 1; padding: 32px 24px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--serif); font-size: 2.5rem; color: var(--gold);
  line-height: 1; display: block;
}
.stat-label { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* ── HOME: About section ───────────────────────── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-mvh-grid { grid-template-columns: repeat(3, 1fr); }
.artifact-detail-grid { grid-template-columns: 1fr 1fr; }
/* ── Object Details facts grid — icon-led, replacing the old plain table
   for a more polished, professional presentation. 2 columns on desktop,
   collapsing to 1 on narrow screens where two columns would cramp the
   label/value pairs. */
.artifact-facts-card {
  background: var(--cream); border-radius: 14px; padding: 28px; margin-bottom: 28px;
  border: 1px solid var(--border);
}
.artifact-facts-title {
  font-family: var(--serif); font-size: 1.05rem; margin-bottom: 20px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.artifact-facts-title::before { content: ''; width: 4px; height: 18px; background: var(--gold); border-radius: 2px; }
.artifact-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.artifact-fact { display: flex; gap: 12px; align-items: flex-start; }
.artifact-fact-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--white);
  display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(23,25,35,0.08);
}
.artifact-fact-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--grey); font-weight: 700; margin-bottom: 3px; }
.artifact-fact-value { display: block; font-size: 0.92rem; color: var(--ink); font-weight: 600; line-height: 1.4; }
@media (max-width: 480px) {
  .artifact-facts-grid { grid-template-columns: 1fr; }
  .artifact-facts-card { padding: 22px; }
}
/* Main image panel + gallery thumbnails */
.artifact-main-media {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--cream);
  aspect-ratio: 4/3; box-shadow: 0 20px 50px rgba(23,25,35,0.12); border: 1px solid var(--border);
}
.artifact-gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.artifact-gallery-thumbs img {
  width: 84px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: var(--tr); opacity: 0.75;
}
.artifact-gallery-thumbs img:hover, .artifact-gallery-thumbs img.active { border-color: var(--gold); opacity: 1; transform: translateY(-2px); }
.artifact-detail-cat {
  display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: white;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; transition: var(--tr);
}
.artifact-detail-cat:hover { background: var(--gold-dk); }
.about-image-wrap { position: relative; }
.about-image-main {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px;
  transition: var(--tr);
}
.about-image-accent {
  position: absolute; width: 55%; aspect-ratio: 1;
  object-fit: cover; border: 6px solid var(--paper);
  border-radius: 2px; bottom: -40px; right: -40px;
  box-shadow: var(--shadow);
}
.about-year-badge {
  position: absolute; top: 32px; left: -24px;
  background: var(--gold); color: var(--ink);
  font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  padding: 20px 16px; border-radius: 2px; text-align: center;
  box-shadow: var(--shadow);
}
.about-year-badge small { display: block; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }
.about-text { padding-bottom: 40px; }
.about-text p { color: var(--grey); margin-bottom: 20px; font-size: 1.02rem; }
.about-features { display: flex; gap: 32px; margin: 36px 0; flex-wrap: wrap; }
.about-feature { display: flex; align-items: flex-start; gap: 12px; }
.about-feature i { color: var(--gold); margin-top: 3px; font-size: 0.9rem; }
.about-feature-text strong { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; }
.about-feature-text span { font-size: 0.8rem; color: var(--grey); }

/* ── Collection card grid ──────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.artifact-card {
  background: var(--white); position: relative; overflow: hidden; cursor: pointer;
  transition: var(--tr);
}
.artifact-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(26,18,9,0.14); }
.artifact-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.artifact-card:hover .artifact-card-img { transform: scale(1.06); }
.artifact-card-body { padding: 20px 24px 24px; }
.artifact-card-cat {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ochre); margin-bottom: 8px; display: block;
}
.artifact-card-title {
  font-family: var(--serif); font-size: 1.15rem; margin-bottom: 10px; color: var(--ink);
  line-height: 1.3;
}
.artifact-card-period { font-size: 0.8rem; color: var(--grey); }
.artifact-card-overlay {
  position: absolute; inset: 0; background: rgba(26,18,9,0.85);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
  opacity: 0; transition: opacity 0.4s ease;
}
.artifact-card:hover .artifact-card-overlay { opacity: 1; }
.artifact-card-overlay p { color: rgba(255,255,255,0.8); font-size: 0.88rem; line-height: 1.6; margin-bottom: 16px; }
.artifact-card-overlay .btn { position: relative; z-index: 2; min-height: 44px; }
/* Touch devices (phones/tablets) have no :hover, so the overlay + its "View
   Detail" button were invisible and effectively unreachable — this was the
   reported "Collection button not working" bug. Show a lighter, always-on
   gradient with the button on touch devices instead of relying on hover. */
@media (hover: none), (pointer: coarse) {
  .artifact-card-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(26,18,9,0.88) 0%, rgba(26,18,9,0.35) 55%, rgba(26,18,9,0) 100%);
  }
}

/* ── Gallery Grid ──────────────────────────────── */
.gallery-masonry {
  columns: 3; gap: 4px; column-gap: 4px;
}
.gallery-item {
  break-inside: avoid; margin-bottom: 4px;
  position: relative; overflow: hidden; cursor: pointer;
}
.gallery-item img { width: 100%; display: block; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item-overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,18,9,0.85) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s; display: flex; align-items: flex-end; padding: 20px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay p { color: white; font-size: 0.88rem; line-height: 1.4; }
@media (hover: none), (pointer: coarse) {
  .gallery-item-overlay { opacity: 1; background: linear-gradient(to top, rgba(26,18,9,0.8) 0%, transparent 65%); }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(10,8,5,0.95); z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 2px; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; font-size: 1.5rem; color: white;
  background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem; color: white; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--tr);
}
.lightbox-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.85rem; text-align: center; }

/* ── Blog Cards ────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { background: var(--white); border-radius: var(--radius); overflow: hidden; transition: var(--tr); }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(26,18,9,0.12); }
.blog-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.6s ease; display: block; }
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-img-wrap { overflow: hidden; }
.blog-card-body { padding: 24px; }

/* ── Homepage Team section ────────────────────────── */
.home-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.home-team-card {
  text-align: center; background: var(--white); padding: 36px 24px;
  border-radius: var(--radius); transition: var(--tr);
}
.home-team-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.home-team-photo {
  width: 90px; height: 90px; object-fit: cover; border-radius: 50%;
  margin: 0 auto 16px; border: 3px solid var(--gold); display: block;
}
.home-team-photo-placeholder {
  background: var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: 2rem;
}
.home-team-name { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 4px; }
.home-team-role { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ochre); }

/* ── Homepage: Upcoming Events row ─────────────────── */
.home-events-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ── Homepage "spotlight" event cards ─────────────────────────────
   Deliberately different from both the old homepage card AND the
   perforated "ticket stub" cards used on the full /events listing page:
   a large image with a bold gradient-scrim caption baked directly onto
   the photo, and a big circular date medallion that floats OUTSIDE the
   top edge of the card in the brand's vivid orange — a much punchier,
   more graphic treatment than a boxed corner badge. The medallion is
   positioned purely relative to the whole card (not stacked in normal
   document flow after the image), so — unlike the earlier version of this
   card — there's no possible way for it to collide with the caption text:
   the two are independent layers by construction, not by coincidence. */
.home-event-spotlight {
  display: block; position: relative; text-decoration: none; color: inherit;
  padding-top: 26px; /* reserves room for the medallion to float into without clipping */
}
.home-event-spotlight-media {
  position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); transition: var(--tr); background: var(--cream);
}
.home-event-spotlight:hover .home-event-spotlight-media { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(23,25,35,0.24); }
.home-event-spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.home-event-spotlight:hover .home-event-spotlight-media img { transform: scale(1.08); }
.home-event-spotlight-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--gold); background: linear-gradient(135deg, var(--cream), var(--white)); }
.home-event-spotlight-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,25,35,0.92) 0%, rgba(23,25,35,0.35) 45%, transparent 70%); }
.home-event-spotlight-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 22px; z-index: 2; }
.home-event-spotlight-tag {
  display: inline-block; background: var(--ochre); color: white; font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px;
}
.home-event-spotlight-content h4 { font-family: var(--serif); font-size: 1.2rem; color: white; line-height: 1.3; margin-bottom: 8px; }
.home-event-spotlight-loc { font-size: 0.78rem; color: rgba(255,255,255,0.85); }
.home-event-spotlight-loc i { color: var(--gold); margin-right: 5px; }
.home-event-spotlight-medallion {
  position: absolute; top: 0; left: 24px; z-index: 3; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk)); color: white;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 10px 26px rgba(249,115,22,0.45), 0 0 0 5px var(--paper);
  transition: var(--tr);
}
.home-event-spotlight:hover .home-event-spotlight-medallion { transform: rotate(-8deg) scale(1.06); }
.home-event-spotlight-medallion span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
.home-event-spotlight-medallion strong { font-family: var(--serif); font-size: 1.4rem; }
@media (max-width: 480px) {
  .home-event-spotlight-media { aspect-ratio: 4/4.6; }
  .home-event-spotlight-medallion { width: 56px; height: 56px; left: 18px; }
}

/* ── Homepage: Visitor Experience ──────────────────── */
.experience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.experience-card { text-align: center; padding: 12px; }
.experience-icon {
  width: 68px; height: 68px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow);
  color: var(--gold); font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.experience-card h4 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 8px; }
.experience-card p { font-size: 0.84rem; color: var(--grey); line-height: 1.7; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.blog-card-cat {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white);
  background: var(--ochre); padding: 3px 8px; border-radius: 2px;
}
.blog-card-date { font-size: 0.78rem; color: var(--grey); }
.blog-card-title {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.35;
  color: var(--ink); margin-bottom: 12px; transition: color 0.3s;
}
.blog-card:hover .blog-card-title { color: var(--ochre); }
.blog-card-excerpt { font-size: 0.88rem; color: var(--grey); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.blog-card-read { font-size: 0.75rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ochre); display: flex; gap: 6px; align-items: center; transition: gap 0.3s; }
.blog-card:hover .blog-card-read { gap: 10px; }

/* ── Blog single ───────────────────────────────── */
.blog-single-layout { display: grid; grid-template-columns: 1fr 340px; gap: 60px; max-width: 1200px; margin: 0 auto; }
.blog-body { font-size: 1.05rem; line-height: 1.85; color: var(--earth); }
.blog-body h2 { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); margin: 2em 0 0.6em; }
.blog-body h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin: 1.6em 0 0.5em; }
.blog-body p { margin-bottom: 1.4em; }
.blog-body img { border-radius: 2px; margin: 2em 0; }
.blog-body blockquote {
  border-left: 3px solid var(--gold); padding: 16px 24px; margin: 2em 0;
  background: var(--cream); color: var(--earth); border-radius: 0 2px 2px 0;
  font-family: 'Laila', var(--sans); font-style: italic;
}

/* Table of contents (auto-generated from article headings) */
.toc-box { background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin-bottom: 36px; }
.toc-title { font-family: var(--serif); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.toc-title i { color: var(--gold); }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.toc-list a { font-size: 0.88rem; color: var(--grey); transition: color 0.25s; }
.toc-list a:hover { color: var(--ochre); }
.toc-list li.toc-sub { padding-left: 18px; }

/* Author bio card */
.author-bio-card { display: flex; gap: 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-top: 40px; align-items: flex-start; }
.author-bio-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-bio-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 1.3rem; font-family: var(--serif); }
.author-bio-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ochre); font-weight: 600; }
.author-bio-name { font-family: var(--serif); font-size: 1.15rem; margin: 4px 0 2px; }
.author-bio-role { font-size: 0.8rem; color: var(--gold-dk); margin-bottom: 8px; }
.author-bio-text { font-size: 0.88rem; color: var(--grey); line-height: 1.7; }
.author-bio-socials { display: flex; gap: 12px; margin-top: 12px; }
.author-bio-socials a {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--ink); font-size: 0.85rem; transition: var(--tr);
}
.author-bio-socials a:hover { background: var(--gold); color: white; transform: translateY(-2px); }

.blog-sidebar { position: sticky; top: calc(var(--header-h) + var(--header-float-gap) + 32px); height: fit-content; }
.sidebar-widget { background: var(--cream); padding: 28px; border-radius: var(--radius); margin-bottom: 28px; }
.sidebar-widget h4 { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sidebar-recent a { display: flex; gap: 12px; margin-bottom: 16px; color: var(--ink); transition: color 0.3s; }
.sidebar-recent a:hover { color: var(--ochre); }
.sidebar-recent img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.sidebar-recent-title { font-size: 0.88rem; line-height: 1.4; font-weight: 500; }
.sidebar-recent-date { font-size: 0.73rem; color: var(--grey); margin-top: 4px; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tag {
  font-size: 0.75rem; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 2px; color: var(--grey); transition: var(--tr);
}
.cat-tag:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ── Contact ───────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 32px; }
.contact-info-icon {
  width: 48px; height: 48px; background: var(--cream); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem; flex-shrink: 0;
}
.contact-info-text strong { display: block; font-weight: 600; margin-bottom: 4px; }
.contact-info-text span { color: var(--grey); font-size: 0.9rem; }
.contact-map { width: 100%; height: 300px; border-radius: 2px; margin-top: 32px; border: 1px solid var(--border); }

/* Form */
.museum-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--earth); }
.form-input, .form-textarea, .form-select {
  padding: 14px 16px; font-family: var(--sans); font-size: 0.95rem;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: var(--radius); color: var(--ink); outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.12);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-msg { padding: 14px 16px; border-radius: var(--radius); font-size: 0.9rem; margin-top: 4px; display: none; }
.form-msg.success { background: #edf7f0; color: #1e6b40; border: 1px solid #9fd8b4; display: block; }
.form-msg.error { background: #fef2f2; color: #9b2c2c; border: 1px solid #feb2b2; display: block; }

/* ── Visit Info ────────────────────────────────── */
.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.visit-card {
  padding: 36px 28px; border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: var(--tr); position: relative; overflow: hidden;
}
.visit-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.visit-card:hover { border-color: rgba(212,168,67,0.4); box-shadow: var(--shadow); }
.visit-card:hover::before { transform: scaleX(1); }
.visit-card-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: 16px; }
.visit-card h3 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 12px; }
.visit-card p { font-size: 0.88rem; color: var(--grey); white-space: pre-line; line-height: 1.7; }

/* ── Pagination ────────────────────────────────── */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 60px; flex-wrap: wrap; }
.page-link {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.85rem;
  color: var(--grey); transition: var(--tr);
}
.page-link:hover, .page-link.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.page-link.wide { width: auto; padding: 0 16px; }

/* ── Filter tabs ───────────────────────────────── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.filter-btn {
  padding: 8px 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; border: 1.5px solid var(--border);
  border-radius: var(--radius); color: var(--grey); background: transparent;
  transition: var(--tr); cursor: pointer;
}
.filter-btn:hover, .filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ── Breadcrumbs ───────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--grey); margin-bottom: 40px;
  padding: calc(var(--header-h) + var(--header-float-gap) + 24px) 32px 0;
  max-width: 1300px; margin-left: auto; margin-right: auto;
}
.breadcrumb a { color: var(--ochre); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--grey); }

/* ── Featured section strip ────────────────────── */
.featured-strip {
  background: var(--gold); padding: 20px 32px;
  display: flex; align-items: center; gap: 16px;
}
.featured-strip-label {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--earth); white-space: nowrap;
}
.featured-strip-text { font-size: 0.88rem; color: var(--earth); }

/* ── CTA Banner ────────────────────────────────── */
.cta-banner { background: var(--earth); padding: 80px 0; text-align: center; }
.cta-banner h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); color: white; margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.65); max-width: 500px; margin: 0 auto 36px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Search bar ────────────────────────────────── */
.search-wrap { position: relative; max-width: 480px; width: 100%; }
.search-input {
  width: 100%; padding: 14px 48px 14px 18px; background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink); outline: none;
  transition: border-color 0.3s;
}
.search-input:focus { border-color: var(--gold); }
.search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--grey); pointer-events: none; }

/* ── No results ────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 24px; color: var(--grey); }
.empty-state i { font-size: 3rem; color: var(--border); margin-bottom: 16px; }
.empty-state h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; }

/* ── Toast notification ────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--ink); color: white; padding: 14px 20px;
  border-radius: var(--radius); font-size: 0.88rem;
  transform: translateY(20px) scale(0.95); opacity: 0;
  transition: all 0.4s; pointer-events: none; max-width: 340px;
}
.toast.show { transform: translateY(0) scale(1); opacity: 1; }
.toast.success { border-left: 3px solid #4CAF50; }
.toast.error { border-left: 3px solid #f44336; }

/* ── Scroll animations ─────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }

/* ── Footer ────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); }
.site-footer .logo-name { color: var(--white); }
.footer-top { padding: 80px 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; max-width: 1300px; margin: 0 auto; padding: 0 32px; }
.footer-logo { display: block; margin-bottom: 16px; }
.footer-logo img { height: 40px; filter: brightness(0) invert(1) opacity(0.8); }
.footer-about { font-size: 0.88rem; line-height: 1.75; color: rgba(255,255,255,0.5); margin-bottom: 24px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  color: rgba(255,255,255,0.5); transition: var(--tr);
}
.footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-heading { font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-family: var(--mono); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-links a:hover { color: var(--gold); }
.footer-address { font-style: normal; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.footer-address p { font-size: 0.85rem; display: flex; gap: 10px; color: rgba(255,255,255,0.5); }
.footer-address i { color: var(--gold); margin-top: 3px; flex-shrink: 0; font-size: 0.75rem; }
.footer-address a { color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-address a:hover { color: var(--gold); }
.footer-cta { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); display: inline-flex; gap: 6px; align-items: center; transition: gap 0.3s; }
.footer-cta:hover { gap: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding: 24px 32px;
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1300px; margin: 0 auto; font-size: 0.78rem; color: rgba(255,255,255,0.3);
}
.nepal-flag { font-size: 1rem; }

/* ── Footer newsletter form ───────────────────────── */
.footer-newsletter-form { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius); overflow: hidden; }
.footer-newsletter-form input {
  flex: 1; background: rgba(255,255,255,0.06); border: none; padding: 11px 14px;
  color: #fff; font-family: var(--sans); font-size: 0.85rem; outline: none;
}
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter-form button {
  background: var(--gold); border: none; padding: 0 18px; color: var(--ink);
  cursor: pointer; transition: var(--tr);
}
.footer-newsletter-form button:hover { background: var(--ochre); }
.footer-newsletter-msg { font-size: 0.78rem; margin-top: 8px; min-height: 1em; }

/* ── Events listing — "ticket stub" card design ───────────────────
   Deliberately different from every other card grid on the site (search
   results, blog, artifacts are all plain image-top rectangles): a
   perforated-ticket motif that reads distinctly as "event" — full image
   with a floating circular date badge, a torn-perforation divider line,
   then the details. Grid, not the old horizontal-row list, so it's
   naturally responsive down to a single column instead of needing the
   row layout to collapse awkwardly on narrow screens. */
.events-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.event-ticket-card {
  display: block; background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: var(--tr);
  text-decoration: none; color: inherit; position: relative;
}
.event-ticket-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(23,25,35,0.2); }
.event-ticket-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.event-ticket-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.event-ticket-card:hover .event-ticket-media img { transform: scale(1.07); }
.event-ticket-media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--gold); background: linear-gradient(135deg, var(--cream), var(--white)); }
.event-ticket-date {
  position: absolute; top: 16px; left: 16px; z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  background: var(--white); box-shadow: 0 6px 18px rgba(0,0,0,0.25); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.event-ticket-date-day { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.event-ticket-date-month { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dk); font-weight: 700; margin-top: 2px; }
.event-ticket-category {
  position: absolute; top: 16px; right: 16px; z-index: 2; background: var(--gold); color: white;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 5px 12px; border-radius: 20px;
}
.event-ticket-past {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: rgba(23,25,35,0.82); color: white;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; padding: 8px;
}
/* Perforated tear-line between the image and the body — a small circular
   "punch hole" motif on each edge plus a dashed line, evoking a physical
   ticket stub. */
.event-ticket-perforation {
  position: relative; height: 1px; border-top: 2px dashed var(--border); margin: 0 18px;
  display: flex; justify-content: space-between;
}
.event-ticket-perforation span { display: none; }
.event-ticket-perforation::before, .event-ticket-perforation::after {
  content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper);
}
.event-ticket-perforation::before { left: -8px; }
.event-ticket-perforation::after { right: -8px; }
.event-ticket-body { padding: 22px 22px 24px; }
.event-ticket-body h3 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; margin-bottom: 8px; }
.event-ticket-body p { font-size: 0.85rem; color: var(--grey); line-height: 1.6; margin-bottom: 14px; }
.event-ticket-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.76rem; color: var(--grey); margin-bottom: 16px; }
.event-ticket-meta i { color: var(--gold); margin-right: 4px; }
.event-ticket-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dk); }
.event-ticket-card:hover .event-ticket-link { color: var(--gold); }
.event-ticket-card:hover .event-ticket-link i { transform: translateX(4px); }
.event-ticket-link i { transition: transform 0.3s; }

@media (max-width: 1024px) { .events-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 640px) {
  .events-grid { grid-template-columns: 1fr; gap: 24px; }
  .event-ticket-body { padding: 18px; }
}

/* ── Support / ways-to-help cards (replaces membership pricing) ──── */
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.support-card {
  background: var(--white); border-radius: var(--radius); padding: 36px 28px;
  box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--tr);
}
.support-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(21,19,15,0.14); }
.support-icon {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(249,115,22,0.12);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
}
.support-card h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 10px; }
.support-card p { font-size: 0.88rem; color: var(--grey); line-height: 1.7; margin-bottom: 20px; }

/* ── FAQ accordion ──────────────────────────────────── */
.faq-category { margin-bottom: 40px; }
.faq-category-title { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 16px; color: var(--ink); }
.faq-accordion { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--ink);
}
.faq-question i { transition: transform 0.3s; color: var(--gold); flex-shrink: 0; margin-left: 12px; }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 20px 18px; font-size: 0.88rem; color: var(--grey); line-height: 1.75; }

/* ── Parallax heritage quote section ──────────────────────────── */
.parallax-section {
  position: relative; min-height: 46vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
}
.parallax-bg {
  position: absolute; inset: -8% 0; background-size: cover; background-position: center;
  will-change: transform; transform: translateY(0); z-index: -2;
}
.parallax-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(21,19,15,0.72), rgba(21,19,15,0.72)); z-index: -1; }
.parallax-content { max-width: 760px; text-align: center; padding: 60px 32px; color: white; }
.parallax-quote-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: 20px; display: block; opacity: 0.85; }
.parallax-quote { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.5; margin-bottom: 18px; }
.parallax-attribution { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }

/* ── Testimonials carousel ────────────────────────────────────── */
.testimonial-carousel { max-width: 760px; margin: 0 auto; overflow: hidden; }
.testimonial-track { display: flex; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.testimonial-card {
  flex: 0 0 100%; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 44px 40px; text-align: center;
}
.testimonial-stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 3px; margin-bottom: 18px; }
.testimonial-quote { font-family: var(--serif); font-size: 1.25rem; line-height: 1.65; color: var(--ink); margin-bottom: 26px; }
.testimonial-person { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testimonial-person img, .testimonial-avatar-placeholder {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.testimonial-avatar-placeholder { background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.testimonial-person div { text-align: left; }
.testimonial-person strong { display: block; font-size: 0.92rem; color: var(--ink); }
.testimonial-person span { font-size: 0.78rem; color: var(--grey); }
.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.testimonial-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--white);
  color: var(--ink); display: flex; align-items: center; justify-content: center; transition: var(--tr);
}
.testimonial-btn:hover { background: var(--gold); border-color: var(--gold); }
.testimonial-dots { display: flex; gap: 8px; }
.testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: var(--tr); }
.testimonial-dot.active { background: var(--gold); width: 22px; border-radius: 4px; }
@media (max-width: 640px) { .testimonial-card { padding: 32px 24px; } }

/* ── Cookie consent banner ────────────────────────────────────── */
/* ── Cookie consent banner — liquid glass ─────────────────────── */
.cookie-consent {
  position: fixed; left: 20px; right: 20px; bottom: -220px; z-index: 5000;
  max-width: 900px; margin: 0 auto; color: var(--ink);
  border-radius: 18px; padding: 22px 26px; transition: bottom 0.6s cubic-bezier(0.22,1,0.36,1);
  /* Same frosted-glass recipe as the floating header: translucent white
     tint + blur/saturate + a bright inset top edge for that "light
     catching curved glass" look, instead of the old flat solid-ink card. */
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 20px 60px rgba(23,25,35,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
}
.cookie-consent.open { bottom: 20px; }
.cookie-consent-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-consent-icon { font-size: 1.6rem; color: var(--gold); flex-shrink: 0; }
.cookie-consent-text { flex: 1; min-width: 220px; }
.cookie-consent-text h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 4px; color: var(--ink); }
.cookie-consent-text p { font-size: 0.82rem; color: var(--grey); line-height: 1.6; }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  padding: 11px 22px; border-radius: 30px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: var(--tr); white-space: nowrap; border: 1.5px solid transparent;
}
.cookie-btn-outline { background: rgba(255,255,255,0.4); border-color: rgba(23,25,35,0.15); color: var(--ink); }
.cookie-btn-outline:hover { background: rgba(255,255,255,0.65); border-color: var(--ink); }
.cookie-btn-primary { background: var(--gold); color: white; }
.cookie-btn-primary:hover { background: var(--gold-dk); transform: translateY(-1px); }
@media (max-width: 640px) {
  .cookie-consent { left: 12px; right: 12px; padding: 18px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .cookie-btn { flex: 1; justify-content: center; }
}

/* ── "Get Notified" subscribe popup ───────────────────────────── */
.notify-popup-backdrop {
  position: fixed; inset: 0; background: rgba(15,12,8,0.6); backdrop-filter: blur(3px);
  z-index: 5100; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.notify-popup-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
.notify-popup {
  position: fixed; top: 50%; left: 50%; z-index: 5200; width: 92%; max-width: 420px;
  border-radius: 24px; padding: 40px 32px 32px;
  text-align: center; transform: translate(-50%, -46%) scale(0.92); opacity: 0; visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.35s, visibility 0s linear 0.45s;
  /* Same liquid-glass recipe as the header/cookie banner — translucent
     white + blur/saturate + a bright inset top edge, floating over the
     dimmed backdrop rather than a flat solid card. */
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 30px 80px rgba(23,25,35,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
}
.notify-popup.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.35s; }
.notify-popup-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.5); color: var(--grey); display: flex; align-items: center; justify-content: center; transition: var(--tr);
}
.notify-popup-close:hover { background: var(--gold); color: white; transform: rotate(90deg); }
.notify-popup-icon {
  width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: white; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  animation: notifyBellRing 2.2s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(249,115,22,0.4);
}
@keyframes notifyBellRing { 0%,80%,100% { transform: rotate(0); } 82% { transform: rotate(-12deg); } 84% { transform: rotate(10deg); } 86% { transform: rotate(-8deg); } 88% { transform: rotate(4deg); } 90% { transform: rotate(0); } }
.notify-popup h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 10px; }
.notify-popup p { font-size: 0.88rem; color: var(--grey); line-height: 1.65; margin-bottom: 22px; }
.notify-popup-form { display: flex; flex-direction: column; gap: 10px; }
.notify-popup-form input {
  padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.9rem; outline: none;
  background: var(--white); color: var(--ink); transition: border-color 0.3s;
}
.notify-popup-form input:focus { border-color: var(--gold); }
.notify-popup-form button {
  padding: 13px 16px; background: var(--gold); color: var(--ink); border: none; border-radius: 8px;
  font-weight: 700; font-size: 0.88rem; letter-spacing: 0.5px; cursor: pointer; transition: var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.notify-popup-form button:hover:not(:disabled) { background: var(--ochre); color: white; transform: translateY(-1px); }
.notify-popup-form button:disabled { opacity: 0.7; cursor: default; }
.notify-popup-msg { font-size: 0.82rem; color: #2E8B57; min-height: 18px; margin-top: 10px; }
.notify-popup-msg.error { color: #C0392B; }
.notify-popup-later { margin-top: 14px; background: none; border: none; color: var(--grey); font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.notify-popup-later:hover { color: var(--ochre); }
.footer-hours { list-style: none; }
.footer-hours li { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.85rem; color: rgba(255,255,255,0.65); border-bottom: 1px dashed rgba(255,255,255,0.08); }
.footer-notify-btn { color: var(--gold); font-weight: 700; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s; }
.footer-notify-btn:hover { color: var(--white); }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1100px) {
  .card-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  :root { --header-h: 72px; --utility-h: 0px; }
  .utility-bar { display: none; }
  #siteHeader { top: var(--header-float-gap) !important; }
  .main-nav, .btn-visit { display: none; }
  .nav-toggle { display: flex; }
  .blog-grid, .card-grid-3, .card-grid-4, .home-team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 1fr; gap: 48px; }
  .about-image-accent { right: 0; bottom: -24px; width: 45%; }
  .about-year-badge { left: 0; }
  .about-mvh-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .artifact-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .visit-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-single-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .gallery-masonry { columns: 2; }
  .stats-bar .container { flex-wrap: wrap; }
  .stat-item { flex: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .form-row { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .home-events-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .experience-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 70px; }
  /* home-events-row's mobile (1-col) override deliberately lives in THIS
     640px block rather than the earlier one above — it must come AFTER
     the 900px block's 2-column rule in source order, or the 900px rule
     wins on narrow phones too (max-width media queries don't override
     each other by "narrower wins"; CSS falls back to plain source order
     when specificity ties, so whichever declaration appears LAST in the
     file wins on any viewport where multiple queries match at once).
     This was a real bug: phones under 640px were getting 2-column event
     cards from the 900px rule below instead of the intended single
     column, since that rule appeared later in the file. */
  .home-events-row { grid-template-columns: 1fr; gap: 24px; }
  /* Mobile hero: a 4:3 (wider-than-tall) crop reads as a deliberately
     composed "wide establishing shot" rather than the tall 3:4 portrait
     used before — but 4:3 is also considerably SHORTER relative to its
     width, so the badge/title/description/buttons stack below need
     their own tighter mobile sizing, not just a smaller container: at
     4:3 a 375px-wide phone gets ~281px of total hero height, and the
     floating header alone claims roughly a third of that. Every
     dimension below is deliberately recalculated for that shorter box
     rather than inherited from the desktop-oriented defaults, which
     assumed a nearly-full-viewport-height hero with room to spare. */
  .hero-slider { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .hero-content {
    top: calc(var(--header-h) + var(--header-float-gap) + 14px);
    bottom: 7%;
    padding: 0 20px;
  }
  .hero-badge { font-size: 0.6rem; letter-spacing: 2px; padding: 4px 10px; margin-bottom: 10px; }
  .hero-title { font-size: clamp(1.5rem, 7.5vw, 2.1rem); line-height: 1.15; max-width: 100%; -webkit-line-clamp: 2; }
  .hero-desc { font-size: 0.85rem; line-height: 1.55; margin: 10px 0 18px; max-width: 100%; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 10px 20px; font-size: 0.72rem; }
  .hero-controls { bottom: 14px; right: 14px; gap: 6px; }
  .hero-btn { width: 34px; height: 34px; font-size: 0.75rem; }
  /* The slider auto-advances every 5.5s regardless, so on the tight 4:3
     mobile box the manual prev/next arrows and dot indicators are hidden
     rather than fighting the badge/title/button stack for the same
     sliver of vertical space — swipe gestures (native scroll-snap /
     touch handling, unaffected by this) remain the mobile interaction
     model, matching how most mobile hero carousels behave anyway. */
  .hero-controls, .hero-dots { display: none; }
  .header-inner { padding: 0 20px; }
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .blog-grid, .card-grid-3, .card-grid-4, .home-team-grid { grid-template-columns: 1fr; }
  .about-mvh-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .experience-grid { grid-template-columns: 1fr; }
  .hero-scroll-hint { display: none; }
  /* Logo stays firmly left-anchored (space-between with the hamburger/
     search icons on the right handles that by default), but a long site
     name + tagline stacked next to a full-size logo image could crowd
     those icons on narrow screens — trim it down explicitly instead of
     letting flexbox squeeze it unpredictably. */
  .site-logo { flex-shrink: 0; margin-right: auto; gap: 8px; }
  .logo-img { height: 32px; }
  .logo-tagline { display: none; }
  .logo-name { font-size: 0.95rem; }
  .logo-mode-text .logo-name { font-size: 1.05rem; }
  .header-actions { flex-shrink: 0; gap: 8px; }
  /* Artifact detail: image and metadata stack on small phones with tighter
     gaps and thumbnails wrapping/scrolling instead of overflowing. */
  .artifact-detail-grid { gap: 28px; }
  .share-row { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .logo-text { display: none; }
}

/* ── Artifact / event "additional info" rich-content section ─────
   Renders CKEditor-authored content (imported Word/Excel/PDF content or
   hand-written) below the main artifact/event detail. */
.artifact-additional-info, .event-additional-info {
  max-width: 900px; margin: 56px auto 0; padding: 44px clamp(20px, 5vw, 56px);
  background: var(--cream); border-radius: var(--radius); border: 1px solid var(--border);
}
.artifact-additional-info-head, .event-additional-info-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--gold);
}
.artifact-additional-info-head i, .event-additional-info-head i { font-size: 1.3rem; color: var(--gold); }
.artifact-additional-info-head h2, .event-additional-info-head h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 0; }
@media (max-width: 640px) {
  .artifact-additional-info, .event-additional-info { padding: 28px 20px; margin-top: 36px; }
}

/* ── Event info card (date/time/location + add-to-calendar) ────── */
.event-info-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 32px;
}
.event-info-item { display: flex; align-items: center; gap: 12px; }
.event-info-item i { font-size: 1.15rem; color: var(--gold); width: 22px; text-align: center; }
.event-info-item span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--grey); }
.event-info-item strong { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.event-info-cal-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--gold); color: var(--ink); border-radius: 30px; font-size: 0.8rem; font-weight: 700;
  transition: var(--tr); white-space: nowrap;
}
.event-info-cal-btn:hover { background: var(--ochre); color: white; transform: translateY(-2px); }
@media (max-width: 640px) {
  .event-info-card { flex-direction: column; align-items: flex-start; }
  .event-info-cal-btn { margin-left: 0; width: 100%; justify-content: center; }
}