/* ==========================================================================
   Temple Timings
   Design system v2. Warm dual-accent palette (marigold + terracotta) evoking
   temple stone, sindoor and marigold garlands, paired with a distinctive
   Marcellus / Inter type pairing. Component variants (contained/outlined/
   ghost buttons, subtle/outlined/solid tags, elevated cards) and touch
   targets follow the conventions documented in the component spec packs.
   ========================================================================== */

/* Fonts are loaded via a <link> tag in <head> (with preconnect), not @import,
   which is render-blocking and would hurt FCP/LCP on every page. */

:root{
  /* --- surfaces & text: warm ivory paper, deep espresso-brown ink --- */
  --color-bg:#faf5ea;
  --color-surface:#f2e9d8;
  --color-text:#2b1c12;
  --color-divider:color-mix(in srgb,#2b1c12 14%,transparent);

  /* --- neutrals: warm-tinted grey scale, not clinical grey --- */
  --color-neutral-100:#f4ede0;
  --color-neutral-200:#ece0cb;
  --color-neutral-300:#dccbab;
  --color-neutral-400:#c1ab88;
  --color-neutral-500:#9c8768;
  --color-neutral-600:#7c6a51;
  --color-neutral-700:#5f5140;
  --color-neutral-800:#41362a;
  --color-neutral-900:#2b1c12;

  /* --- primary accent: marigold / temple gold --- */
  --color-accent:#c17a1f;
  --color-accent-2:#8c580c;
  --color-accent-100:#fbecd2;
  --color-accent-200:#f5d69f;
  --color-accent-300:#eabb6a;
  --color-accent-400:#dd9e40;
  --color-accent-500:#c17a1f;
  --color-accent-600:#9c5f14;
  --color-accent-700:#7a4a10;
  --color-accent-800:#4f2f0a;
  --color-accent-900:#301c06;

  /* --- secondary accent: sindoor / terracotta, for contrast moments --- */
  --color-accent2-100:#fbe4dc;
  --color-accent2-500:#b8532f;
  --color-accent2-600:#973f20;
  --color-accent2-800:#4c2313;

  --color-good:#336743;
  --color-good-bg:#e2efe1;
  --color-bad:#9c4431;
  --color-bad-bg:#fbe6de;

  /* call-to-action text/bg pair: kept separate from --color-accent so button
     and status-tag text always clears 4.5:1, even where the decorative
     accent itself (borders, dots, focus rings) is deliberately brighter. */
  --color-cta-bg:var(--color-accent-2);
  --color-cta-text:#ffffff;

  --font-heading:"Marcellus","Cormorant Garamond",Georgia,serif;
  /* Marcellus ships a single weight (400). Asking for 600 gets a synthesised
     faux-bold that smears its Trajan-style stem contrast, so headings stay at
     400 and rely on size and letter-spacing for hierarchy instead. */
  --font-heading-weight:400;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;

  /* --- clean 4px-based spacing scale --- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;

  --radius-sm:6px;--radius-md:10px;--radius-lg:18px;--radius-full:999px;

  --shadow-sm:0 1px 3px color-mix(in srgb,#2b1c12 12%,transparent);
  --shadow-md:0 6px 16px color-mix(in srgb,#2b1c12 14%,transparent);
  --shadow-lg:0 20px 44px color-mix(in srgb,#2b1c12 20%,transparent);

  --content-max:1180px;
}

/* Dark-mode palette intentionally disabled: the site now always shows the
   warm off-white/beige design below, regardless of OS theme. The block is
   kept (commented) in case a manual dark-mode toggle is wanted later - if
   so, re-enable this under a class like [data-theme="dark"] rather than
   an automatic prefers-color-scheme switch.
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#1c130c;
    --color-surface:#271b11;
    --color-text:#f4ead9;
    --color-divider:color-mix(in srgb,#f4ead9 14%,transparent);

    --color-neutral-100:#271b11;
    --color-neutral-200:#312316;
    --color-neutral-300:#43301d;
    --color-neutral-400:#5c4527;
    --color-neutral-500:#82694a;
    --color-neutral-600:#a68d6b;
    --color-neutral-700:#c4ac89;
    --color-neutral-800:#e2d0b3;
    --color-neutral-900:#f7ecd9;

    --color-accent:#e2a13d;
    --color-accent-2:#eeb457;
    --color-accent-100:#3a2a10;
    --color-accent-200:#54390f;
    --color-accent-800:#f7d6a0;

    --color-accent2-100:#3a2013;
    --color-accent2-500:#df8158;
    --color-accent2-600:#e8996f;
    --color-accent2-800:#f6d3bf;

    --color-good:#57a56d;
    --color-good-bg:#1d2b1f;
    --color-bad:#d6725a;
    --color-bad-bg:#332018;

    --color-cta-bg:var(--color-accent);
    --color-cta-text:var(--color-bg);

    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 8px 20px rgba(0,0,0,.45);
    --shadow-lg:0 24px 50px rgba(0,0,0,.55);
  }
}
*/

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.16;letter-spacing:0;margin:0 0 var(--space-2);
}
/* Marcellus is an inscriptional face -- it is drawn open, so the negative
   tracking that suited Fraunces closes its counters up. Headings sit at 0 or
   slightly positive tracking, and a touch more leading, instead. */
h1{font-size:50px;letter-spacing:.004em;line-height:1.1}
h2{font-size:31px}
h3{font-size:23px}
h4{font-size:19px}
h5{font-size:16px}
h6{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-family:var(--font-body);font-weight:600}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent-2);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
button{font:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.text-muted{color:color-mix(in srgb,var(--color-text) 58%,transparent)}
.hr{height:1px;border:0;margin:var(--space-4) 0;background:var(--color-divider)}
.container{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-6)}
.tabular{font-variant-numeric:tabular-nums}
.skip-link{position:absolute;left:-999px;top:0;background:var(--color-accent);color:#fff;padding:8px 14px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* — buttons: contained (primary) / outlined (secondary) / ghost — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;text-decoration:none;min-height:44px;
  font-family:var(--font-body);font-weight:600;
  font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1.5px solid transparent;
  padding:0 var(--space-4);border-radius:var(--radius-md);
  transition:background .14s ease,border-color .14s ease,transform .1s ease;
}
.btn svg{display:block}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-cta-bg);color:var(--color-cta-text);border-color:var(--color-cta-bg)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-cta-bg) 85%,black);border-color:color-mix(in srgb,var(--color-cta-bg) 85%,black);text-decoration:none}
.btn-secondary{border-color:var(--color-divider);color:var(--color-text)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 6%,transparent);border-color:var(--color-neutral-400);text-decoration:none}
.btn-ghost{color:var(--color-accent-2)}
.btn-ghost:hover{background:var(--color-accent-100);text-decoration:none}
.btn-block{width:100%;margin-top:var(--space-2)}

/* — forms — */
.searchbar{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--color-divider);
  border-radius:var(--radius-md);padding:12px 16px;background:var(--color-bg);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.searchbar:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-100)}
.searchbar input{border:0;background:transparent;font:inherit;font-size:16px;flex:1;outline:none;color:var(--color-text);min-height:20px}
.searchbar svg{flex:none;color:var(--color-neutral-500)}
.seg{display:inline-flex;overflow:hidden;border:1.5px solid var(--color-divider);border-radius:var(--radius-md);flex-wrap:wrap}
.seg button{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;cursor:pointer;
  border:0;border-left:1px solid var(--color-divider);background:transparent;color:var(--color-text);
}
.seg button:first-child{border-left:0}
.seg button.on{color:var(--color-accent-2);background:var(--color-accent-100)}
.seg button:not(.on):hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}

/* — cards: elevated appearance (shadow, not just a border) — */
.card{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-bg);
  border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.card-kicker{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--color-accent-2)}
.card-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:18px;line-height:1.2}
.card-body{margin:0;font-size:13.5px;opacity:.85;flex:1}
.card-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:color-mix(in srgb,var(--color-text) 52%,transparent)}

/* — tags: subtle (default) / accent / outline / solid — */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:4px 11px;border-radius:var(--radius-full);white-space:nowrap;border:1px solid transparent}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-neutral{background:var(--color-neutral-100);color:var(--color-neutral-800)}
.tag-outline{border-color:var(--color-accent);color:var(--color-accent-2)}
.tag-solid{background:var(--color-cta-bg);color:var(--color-cta-text)}
.tag-good{background:var(--color-good-bg);color:var(--color-good)}
.tag-bad{background:var(--color-bad-bg);color:var(--color-bad)}
button.tag{border:0;cursor:pointer;font-family:inherit}

/* — status dots — */
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)}
.status-dot.open{background:var(--color-good);color:var(--color-good)}
.status-dot.closed{background:var(--color-bad);color:var(--color-bad)}
.status-dot.unknown{background:var(--color-neutral-500);color:var(--color-neutral-500);box-shadow:none}

/* — navigation — */
.site-nav{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-divider);
  background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.brandmark{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:25px;letter-spacing:.005em;display:flex;align-items:center;gap:8px;color:var(--color-text)}
.site-nav .brandmark{font-size:29px}
.brandmark:hover{text-decoration:none;color:var(--color-accent-2)}
.site-nav .nav-links{display:flex;align-items:center;gap:var(--space-5);margin-left:auto}
.site-nav a{color:var(--color-text);text-decoration:none;font-size:14px;font-weight:500;display:flex;align-items:center;min-height:44px}
.site-nav a:hover,.site-nav a.on{color:var(--color-accent-2)}
.nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.nav-toggle-btn{display:none;flex-direction:column;gap:4px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.nav-toggle-btn span{width:20px;height:2px;background:var(--color-text);border-radius:1px}
@media (max-width:760px){
  .nav-toggle-btn{display:flex}
  .site-nav .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--color-bg);border-bottom:1px solid var(--color-divider);
    padding:var(--space-2) var(--space-6) var(--space-4);box-shadow:var(--shadow-md);
  }
  .site-nav .nav-links a{padding:var(--space-2) 0;width:100%}
  .nav-toggle-input:checked ~ .nav-links{display:flex}
  .site-nav{position:relative;flex-wrap:wrap}
}

/* — breadcrumbs — */
.crumbs{font-size:12.5px;color:color-mix(in srgb,var(--color-text) 55%,transparent);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--color-accent-2)}

/* — tables — */
.table{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--color-divider);border-radius:var(--radius-md);overflow:hidden}
.table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--color-text) 62%,transparent);padding:var(--space-3);background:var(--color-surface);border-bottom:1px solid var(--color-divider)}
.table td{padding:var(--space-3);border-bottom:1px solid var(--color-divider);vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:color-mix(in srgb,var(--color-accent) 5%,transparent)}

/* — placeholder art plate — */
.plate{
  background:repeating-linear-gradient(135deg,var(--color-accent-100) 0 12px,var(--color-neutral-100) 12px 24px);
  display:grid;place-items:center;color:var(--color-accent-2);font-size:12px;font-weight:600;font-family:var(--font-heading);
  border:1px solid var(--color-divider);box-sizing:border-box;
}

/* ==========================================================================
   Layout
   ========================================================================== */
main{min-height:60vh}
.section{padding:var(--space-8) 0}
.section-tight{padding:var(--space-6) 0}
.section-alt{background:var(--color-neutral-100);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4)}
.section-head h4,.section-head h3{margin:0}

/* — hero — */
.hero{
  text-align:center;padding:var(--space-9) 0 var(--space-8);border-bottom:1px solid var(--color-divider);
  position:relative;overflow:hidden;
  background:radial-gradient(560px 320px at 50% -80px,var(--color-accent-100),transparent 70%);
}
.hero h1{max-width:760px;margin:0 auto var(--space-4)}
.hero .kicker{color:var(--color-accent-2);margin-bottom:var(--space-2);display:inline-flex;align-items:center;gap:9px}
.hero .kicker::before,.hero .kicker::after{content:"";width:22px;height:1px;background:var(--color-accent)}
.hero .searchbar{max-width:620px;margin:0 auto;box-shadow:var(--shadow-sm)}
.hero .tagcloud{display:flex;gap:8px;justify-content:center;margin-top:var(--space-4);flex-wrap:wrap}

/* — temple list rows — */
.tlist{display:flex;flex-direction:column}
.trow{
  display:grid;grid-template-columns:64px 1fr minmax(0,240px);gap:var(--space-3);align-items:center;
  padding:var(--space-3);margin:0 calc(var(--space-3) * -1);border-radius:var(--radius-md);
  border-bottom:1px solid var(--color-divider);text-decoration:none;color:inherit;
  transition:background .14s ease,box-shadow .14s ease;
}
.tlist a.trow:last-child{border-bottom:0}
.trow:hover{background:var(--color-surface);box-shadow:var(--shadow-sm);text-decoration:none}
.trow .thumb{width:64px;height:64px;border-radius:var(--radius-sm);flex:none}
.trow .thumb.photo{object-fit:cover;display:block;background:var(--color-surface)}
.trow .info{min-width:0}
.trow .name{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:18px;overflow-wrap:break-word}
.trow .meta{font-size:13px;color:color-mix(in srgb,var(--color-text) 55%,transparent);overflow-wrap:break-word}
.trow .status{text-align:right;min-width:0}
.trow .status .line1{font-family:var(--font-heading);font-size:15px;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.trow .status .line2{font-size:12px;color:color-mix(in srgb,var(--color-text) 55%,transparent);white-space:normal;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:560px){
  .trow{
    grid-template-columns:48px 1fr;
    grid-template-areas:"thumb info" "status status";
    row-gap:4px;
  }
  .trow .thumb{grid-area:thumb;width:48px;height:48px}
  .trow .info{grid-area:info}
  .trow .status{grid-area:status;text-align:left;white-space:normal}
  .trow .status .line1{justify-content:flex-start}
}

/* — state grid (legacy list fallback, kept for any leftover usage) — */
.stategrid{columns:4 220px;column-gap:var(--space-6)}
.stategrid a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;color:var(--color-text);font-size:14px;padding:8px 10px;margin:0 -10px;border-radius:var(--radius-sm);break-inside:avoid;transition:background .14s ease}
.stategrid a:hover{background:var(--color-surface);color:var(--color-accent-2)}
.stategrid .ct{font-size:11px;color:var(--color-neutral-500);font-variant-numeric:tabular-nums}
@media (max-width:900px){.stategrid{columns:2 180px}}
@media (max-width:520px){.stategrid{columns:1}}

/* — state carousel: auto-scrolling row of real state-shaped map icons — */
.state-carousel-section{padding:var(--space-7) 0;background:var(--color-surface);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);overflow:hidden}
.state-carousel-section .section-head{margin-bottom:var(--space-5)}
.state-carousel-viewport{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.state-carousel-track{display:flex;align-items:stretch;gap:var(--space-6);width:max-content;animation:state-carousel-scroll 52s linear infinite}
.state-carousel-viewport:hover .state-carousel-track,
.state-carousel-track:focus-within{animation-play-state:paused}
@keyframes state-carousel-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.state-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:118px;flex:none;text-decoration:none;color:var(--color-text);padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.state-chip:hover,.state-chip:focus-visible{background:var(--color-bg);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.state-chip[aria-current="page"]{background:var(--color-accent-100)}
.state-chip[aria-current="page"] .state-chip-name{color:var(--color-accent-700)}
.state-chip-icon{display:flex;align-items:center;justify-content:center;width:76px;height:76px}
.state-chip-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--color-accent-800) 25%,transparent))}
.state-chip-name{font-weight:600;font-size:13.5px;text-align:center;line-height:1.25}
.state-chip-count{font-size:11.5px;color:color-mix(in srgb,var(--color-text) 55%,transparent);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .state-chip{width:96px}
  .state-chip-icon{width:60px;height:60px}
  .state-chip-name{font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){
  .state-carousel-track{animation:none}
  .state-carousel-viewport{overflow-x:auto}
}

/* — deity chips — */
.chiprow{display:flex;flex-wrap:wrap;gap:8px}

/* — home split (open-now / circuits) — */
.home-split{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-8)}
@media (max-width:820px){.home-split{grid-template-columns:1fr}}

/* — temple detail — */
.hero-photo{
  width:100%;height:auto;aspect-ratio:1200/500;object-fit:cover;
  background:var(--color-surface);display:block;border-bottom:1px solid var(--color-divider);
}
.hero-figure{margin:0}
.photo-credit{
  display:block;font-size:11.5px;color:var(--color-neutral-600);
  background:var(--color-surface);padding:6px var(--space-6);
  border-bottom:1px solid var(--color-divider);
}
.photo-credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-divider);text-underline-offset:2px}
.photo-credit a:hover{color:var(--color-accent-2)}

/* Lettered stand-in for a state whose map silhouette has not been drawn yet.
   Matches the plate used for temples without a photo. */
.state-chip-fallback{
  display:grid;place-items:center;width:76px;height:76px;
  border-radius:var(--radius-md);background:var(--color-accent-100);
  color:var(--color-accent-2);font-family:var(--font-heading);
  font-size:26px;line-height:1;
}

/* --- the direct answer, under the H1 --------------------------------------
   The one line a reader (or an extractor) should be able to take away
   without reading anything else. Sized up from body copy but below the H1,
   so it reads as the answer to the title rather than as a subheading. */
.answer-line{
  font-size:18.5px;line-height:1.45;margin:0 0 var(--space-2);
  color:var(--color-text);max-width:60ch;
}
@media (max-width:600px){ .answer-line{font-size:17px} }

/* --- state page banner ---------------------------------------------------
   Shallower than the temple hero (16:5 vs 12:5): it is establishing context
   for a list page, not the subject of the page itself. */
.state-banner{margin:0;position:relative}
/* height:auto is load-bearing: every <img> carries width/height attributes
   for CLS, and without it the intrinsic height wins over aspect-ratio and
   the banner renders full-bleed at the photo's own proportions. */
.state-banner-img{width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;display:block;background:var(--color-accent-100);border-bottom:1px solid var(--color-divider)}
.state-banner-cap{
  position:absolute;left:0;bottom:0;right:0;
  font-size:11.5px;color:#fff;padding:22px var(--space-6) 8px;
  background:linear-gradient(to top,color-mix(in srgb,#2b1c12 72%,transparent),transparent);
}
@media (max-width:600px){
  .state-banner-img{aspect-ratio:16/8}
}

/* --- photo-backed group card (circuits) ---------------------------------
   A short, wide banner above the title. Kept to a fixed 16:6 strip so a row
   of cards lines up regardless of each source photo's own proportions. */
.pcard{padding:0;overflow:hidden}
.pcard-media{display:block;aspect-ratio:16/6;overflow:hidden;background:var(--color-accent-100)}
.pcard-media picture{display:block;height:100%}
.pcard-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pcard:hover .pcard-img{transform:scale(1.04)}
.pcard-body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4)}
@media (prefers-reduced-motion:reduce){
  .pcard-img,.pcard:hover .pcard-img{transition:none;transform:none}
}

/* --- temple photo gallery -----------------------------------------------
   A masonry-ish grid that tolerates the mixed orientations Commons gives us:
   gopuram shots are tall, courtyard shots are wide, and forcing either into a
   single fixed ratio wrecks one of them. Tiles keep their own aspect ratio and
   the columns simply flow. Every tile carries its own credit because CC-BY
   and CC-BY-SA require per-image attribution. */
.gallery-section{margin:var(--space-8) 0 0}
.gallery-section > h2{margin-bottom:var(--space-2)}
.gal-note{font-size:13.5px;color:var(--color-neutral-600);margin-bottom:var(--space-5)}
.gallery-grid{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  /* Let each tile take its own height. Without this, grid rows stretch every
     tile to match the tallest one, which leaves a slab of empty card under
     every landscape photo sitting next to a portrait one. */
  align-items:start;
}
.gal-item{
  margin:0;border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-surface);border:1px solid var(--color-divider);
  display:flex;flex-direction:column;
}
.gal-item picture{display:block}
.gal-img{
  width:100%;height:auto;display:block;
  background:var(--color-accent-100);
  transition:transform .35s ease;
}
.gal-item:hover .gal-img{transform:scale(1.03)}
.gal-credit{
  font-size:10.5px;line-height:1.4;color:var(--color-neutral-600);
  padding:6px var(--space-3) 7px;border-top:1px solid var(--color-divider);
}
.gal-credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-divider);text-underline-offset:2px}
.gal-credit a:hover{color:var(--color-accent-2)}
@media (prefers-reduced-motion:reduce){
  .gal-img,.gal-item:hover .gal-img{transition:none;transform:none}
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
}
.detail-head{padding:var(--space-5) 0;border-bottom:1px solid var(--color-divider)}
.detail-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-top:var(--space-2);flex-wrap:wrap}
.detail-head .subtitle{margin:4px 0 0}
.detail-grid{display:grid;grid-template-columns:1fr 300px;gap:var(--space-8);padding:var(--space-7) 0}
@media (max-width:880px){.detail-grid{grid-template-columns:1fr}}
.detail-grid h2{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.detail-grid h2:first-child{margin-top:0;padding-top:0;border-top:0}
.detail-grid h3{margin-top:var(--space-5)}
.factrow{display:flex;justify-content:space-between;gap:var(--space-3);font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--color-divider)}
.factrow:last-child{border-bottom:0}
aside.detail-side{display:flex;flex-direction:column;gap:var(--space-4)}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--space-3)}
.btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.map-embed{
  position:relative;width:100%;aspect-ratio:16/9;margin:var(--space-3) 0 var(--space-4);
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-divider);
  background:var(--color-surface);box-shadow:var(--shadow-sm);
}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.source-list{margin:6px 0 0;padding-left:16px;font-size:12px}
.source-list li{margin-bottom:3px}

/* — status widget (progressively enhanced) — */
.now-card{min-width:230px;align-items:flex-start;gap:6px;background:var(--color-surface);box-shadow:var(--shadow-md)}
.now-card .status-line{font-family:var(--font-heading);font-size:23px;display:flex;align-items:center;gap:9px;margin:2px 0}

/* — FAQ (native details/summary: crawlable, no JS needed) — */
.faq-block{padding:var(--space-7) 0;border-top:1px solid var(--color-divider);margin-top:var(--space-7);text-align:center}
.faq-block h2{max-width:820px;margin-left:auto;margin-right:auto}
.faq-list{display:flex;flex-direction:column;gap:var(--space-2);max-width:820px;margin:var(--space-4) auto 0;text-align:left}
.faq-item{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);transition:border-color .14s ease}
.faq-item:hover{border-color:var(--color-neutral-400)}
.faq-item[open]{border-color:var(--color-accent);background:var(--color-surface)}
.faq-item summary{cursor:pointer;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:16.5px;list-style:none;display:flex;align-items:center;gap:12px;min-height:24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"+";color:var(--color-accent);font-family:var(--font-body);font-weight:700;font-size:16px;
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--color-accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.faq-item[open] summary::before{content:"\2212";background:var(--color-accent);color:#fff}
.faq-item .faq-answer{margin-top:var(--space-2);margin-left:34px;font-size:14.5px}
.faq-item .faq-answer p{margin:0}

/* — related temples — */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}
.related-card{text-decoration:none;color:inherit}
.related-card:hover{text-decoration:none;border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* — circuit cards (home) — */
.circuit-cards{display:flex;flex-direction:column;gap:var(--space-2)}
.circuit-cards .card{text-decoration:none;color:inherit;position:relative;padding-right:var(--space-6)}
.circuit-cards .card::after{
  content:"\2192";position:absolute;right:var(--space-4);top:50%;translate:0 -50%;
  color:var(--color-accent);opacity:0;transition:opacity .14s ease,translate .14s ease;
}
.circuit-cards .card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);text-decoration:none}
.circuit-cards .card:hover::after{opacity:1;translate:4px -50%}

/* — circuit planning guide (tag pages: order, duration, season, notes) — */
.circuit-guide{margin:var(--space-6) 0;padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-accent-100);border:1px solid var(--color-divider)}
.circuit-guide h2{margin-top:0}
.circuit-guide h3{font-size:15px;margin:var(--space-5) 0 var(--space-2)}
.circuit-guide h3:first-of-type{margin-top:var(--space-4)}
.circuit-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.circuit-fact{display:flex;flex-direction:column;gap:2px;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg);border:1px solid var(--color-divider)}
.circuit-fact-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--color-accent-2)}
.circuit-order{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:4px}
.circuit-order li{font-size:14px}
.circuit-guide ul{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:4px}
.circuit-guide ul li{font-size:14px}

/* — city block (state page) — */
.city-block{padding:var(--space-7) 0;border-top:1px solid var(--color-divider)}
.city-block:first-of-type{border-top:0}

/* — narrower prose column — */
.container.narrow{max-width:760px}

/* — search results — */
.searchresults .trow .meta{margin-top:2px}
.empty-state{padding:var(--space-8) 0;text-align:center;color:color-mix(in srgb,var(--color-text) 55%,transparent)}

/* — footer — */
.site-footer{border-top:3px solid var(--color-accent);padding:var(--space-8) 0 var(--space-4);margin-top:var(--space-8);background:var(--color-surface)}
.footer-grid{display:grid;grid-template-columns:1.2fr 0.8fr 1.4fr;gap:var(--space-8);font-size:13px}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-col h6{margin-bottom:4px;color:var(--color-accent-2)}
.footer-col a{color:var(--color-text);text-decoration:none}
.footer-col a:hover{color:var(--color-accent-2)}
.footer-note{font-size:11px;margin-top:4px}
.footer-state-grid{columns:2 140px;column-gap:var(--space-4)}
.footer-state-grid a{display:block;padding:2px 0;break-inside:avoid;font-size:12.5px}
.footer-bottom{border-top:1px solid var(--color-divider);margin-top:var(--space-6);padding-top:var(--space-3);font-size:11px;color:var(--color-neutral-600);display:flex;flex-wrap:wrap;gap:4px var(--space-4);justify-content:space-between}
.footer-bottom a{color:inherit}
.footer-map-credit{white-space:nowrap}
@media (max-width:640px){.footer-bottom{flex-direction:column;gap:4px}}

@media (max-width:640px){
  .hero h1{font-size:32px}
  .container{padding:0 var(--space-4)}
  .trow{grid-template-columns:48px 1fr auto}
  .trow .thumb{width:48px;height:48px}
}