/* jain24 — "paper & saffron"
   Warm off-white, deep brown-black text, saffron accent. Serif for names and
   headings, sans for interface and metadata. Noto throughout so Latin,
   Devanagari and Gujarati sit on the same baseline. */

@font-face {
  font-family: 'Noto Serif';
  src: url('/fonts/noto-serif-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD, U+0100-017F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/noto-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC,
                 U+0100-017F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Noto Indic';
  src: url('/fonts/noto-devanagari.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+A8E0-A8FF, U+1CD0-1CFF;
}
@font-face {
  font-family: 'Noto Indic';
  src: url('/fonts/noto-gujarati.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0A80-0AFF;
}
@font-face {
  font-family: 'Noto Indic';
  src: url('/fonts/noto-kannada.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0C80-0CFF;
}

:root {
  --bg:      #FBF7EF;
  --surface: #FFFDF8;
  --text:    #2A211C;
  --muted:   #6E6259;
  --accent:  #C2681A;
  --accent-dark: #9E5314;
  --line:    #E5DDCE;
  --line-strong: #D6CBB6;
  --serif: 'Noto Serif', 'Noto Indic', Georgia, 'Times New Roman', serif;
  --sans:  'Noto Sans', 'Noto Indic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Wide enough to use a 16" laptop or a 24" iMac properly, with breathing room
     at the edges. Reading columns stay narrow separately (--measure) — long
     lines of prose are harder to read, however much screen there is. */
  --wrap: min(96vw, 100rem);
  --measure: 42rem;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.08rem; }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

p { margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: .88rem; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 44rem; }

/* ------------------------------------------------------------ chrome ---- */

header.site {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: 1.4rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--text); text-decoration: none; letter-spacing: -0.02em;
}
.wordmark:hover { color: var(--accent); }
header.site nav { display: flex; gap: 1.1rem; font-size: .93rem; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--accent); text-decoration: underline; }

main { max-width: var(--wrap); margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

footer.site {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
footer.site strong { color: var(--text); }

/* -------------------------------------------------------------- home ---- */

.hero { padding: 1.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 20ch; }
/* The front page leads with the temples themselves, so the hero stays short —
   enough to say what this is, then straight into the feed. */
.hero.compact { padding: .75rem 0 1.5rem; }
.hero.compact h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.hero.compact .lede { font-size: 1rem; }
.hero.compact form.search { margin: 1rem 0 .6rem; }
.hero.compact .hero-links { margin-top: 0; font-size: .92rem; }

.feed { margin-top: 1.5rem; }
.feed-status { min-height: 1.4rem; margin: 1rem 0 0; text-align: center; }
#feed-sentinel { height: 1px; }

form.search { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; max-width: 34rem; }
form.search input {
  flex: 1; padding: .7rem .85rem; font: inherit; font-size: 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
form.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
form.search button, .button, button[type=submit] {
  padding: .7rem 1.1rem; font: inherit; font-size: .95rem; font-weight: 600;
  background: var(--accent); color: #fff; border: 0;
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  display: inline-block;
}
form.search button:hover, .button:hover, button[type=submit]:hover { background: var(--accent-dark); color: #fff; }
.hero-links { margin-top: 1.25rem; }

.country-list {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.country-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .55rem .75rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
}
.country-list a:hover { border-color: var(--accent); }
/* Long names — "Chahar Mahall and Bakhtiari", "Andaman and Nicobar" — used to
   wrap onto a second line and make their whole grid row taller than the rest.
   One line with an ellipsis keeps every row the same height; the full name is
   on the title attribute. min-width:0 is what lets a flex child shrink enough
   for text-overflow to apply at all. */
.country-list .cname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.country-list .cnum {
  flex: 0 0 auto; color: var(--muted); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- cards ---- */

.cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-top: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line-strong); }
.card .card-body { padding: .8rem .95rem; }
.card h3 { margin: 0 0 .15rem; }

/* Media tile — a photograph when we have one, a designed placeholder when we
   don't. Same aspect ratio either way so the grid never goes ragged. */
.media {
  display: block; aspect-ratio: 4 / 3; background: var(--bg);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(194,104,26,.10), transparent 60%),
    linear-gradient(150deg, #F6EEE0, #EFE4D2);
}
.media.placeholder span {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600; color: rgba(158,83,20,.42); line-height: 1;
  user-select: none;
}
.card h3 a { text-decoration: none; color: var(--text); }
.card h3 a:hover { color: var(--accent-dark); text-decoration: underline; }
.card .local { font-family: var(--serif); color: var(--muted); margin: 0 0 .2rem; font-size: .95rem; }
.card .where { margin: 0 0 .45rem; font-size: .88rem; color: var(--muted); }
.card .meta { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.meta span {
  font-size: .74rem; letter-spacing: .02em; padding: .12rem .45rem;
  border-radius: 100px; border: 1px solid var(--line-strong); color: var(--muted);
}
.meta .sect { border-color: var(--accent); color: var(--accent-dark); }

.count { color: var(--muted); font-size: .9rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }
.page-head { margin-bottom: 1.5rem; }
.narrow, .prose { max-width: var(--measure); }
.hero h1, .hero .lede { max-width: var(--measure); }
.prose h2 { margin-top: 1.9rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose code { background: var(--surface); border: 1px solid var(--line); padding: .1rem .35rem; border-radius: 3px; font-size: .88em; }

/* -------------------------------------------------------- place page ---- */

/* Two columns: text on the left, a sticky card on the right holding the map,
   directions and coordinates. This keeps the map out of the vertical scroll
   path — a full-width interactive map mid-page swallows touch scrolling, which
   is what made the single-column version awkward on a tablet. */
.place-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 23rem;
  gap: 2rem; align-items: start; margin: 1.5rem 0 2rem;
}
.place-main { min-width: 0; }
.place-side { position: sticky; top: 1.25rem; }
.place-side .location { margin: 0; }
.place-side h2 { margin-top: 0; font-size: 1.05rem; }

@media (max-width: 62rem) {
  .place-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .place-side { position: static; }
}

.place > header { margin-bottom: 1.5rem; }
.place .local.big { font-family: var(--serif); font-size: 1.3rem; color: var(--muted); margin: .2rem 0 .4rem; }
.place .where { color: var(--muted); margin: 0; }
.description { max-width: 42rem; }

/* -------------------------------------------------------- gallery ------- */

.gallery { margin: 0 0 1.5rem; }
.g-lead {
  display: block; cursor: zoom-in; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--surface);
}
.g-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.g-lead:hover { border-color: var(--accent); }
.g-lead:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.g-thumbs {
  display: flex; gap: .45rem; margin-top: .45rem;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: .2rem;
}
.g-thumb {
  flex: 0 0 auto; padding: 0; cursor: pointer; background: none;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  line-height: 0; opacity: .72; transition: opacity .12s ease, border-color .12s ease;
}
.g-thumb img { width: 5.5rem; height: 4.1rem; object-fit: cover; display: block; }
.g-thumb:hover { opacity: 1; }
.g-thumb.is-active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.g-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-credit { margin: .45rem 0 0; font-size: .78rem; }

/* Lightbox — built in JS, so these styles only ever apply once it exists. */
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(26, 20, 16, .93); padding: 1.5rem;
}
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; max-width: min(96vw, 72rem); max-height: 90dvh; display: grid; gap: .6rem; }
.lb-stage img {
  max-width: 100%; max-height: 78dvh; object-fit: contain;
  border-radius: var(--radius); display: block; margin: 0 auto;
  background: rgba(255,255,255,.04);
}
.lb-stage figcaption { color: #E8DFD2; font-size: .82rem; text-align: center; }
.lb-stage figcaption a { color: #F0C08A; }
.lightbox button {
  position: absolute; background: rgba(251,247,239,.12); color: #FBF7EF;
  border: 0; border-radius: 100px; cursor: pointer; line-height: 1;
  font-size: 1.9rem; width: 2.75rem; height: 2.75rem;
}
.lightbox button:hover { background: rgba(251,247,239,.24); }
.lightbox button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-close { top: 1rem; right: 1rem; font-size: 1.6rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox button[hidden] { display: none; }

@media (max-width: 40rem) {
  .lightbox { padding: .75rem; }
  .lb-prev { left: .4rem; } .lb-next { right: .4rem; }
}

dl.facts {
  display: grid; grid-template-columns: 9rem 1fr; gap: .35rem .9rem;
  margin: 1.5rem 0; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
dl.facts dt { color: var(--muted); font-size: .85rem; }
dl.facts dd { margin: 0; }

/* Same MapLibre basemap as /explore. `is-placeholder` holds the space (and a
   quiet tint) until place.js lazily initialises the map, so the page doesn't
   jump when it appears. */
.minimap {
  width: 100%; height: 22rem; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.minimap.is-placeholder {
  background:
    radial-gradient(circle at 50% 45%, rgba(194,104,26,.10), transparent 62%),
    linear-gradient(150deg, #F6EEE0, #EFE4D2);
}
.directions { display: flex; align-items: center; gap: .9rem; margin-top: .75rem; flex-wrap: wrap; }
.correct { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* ----------------------------------------------------------- explore ---- */

/* An application shell, not a document: the page itself never scrolls, the
   list pane does, and the map fills its column edge to edge. 100dvh rather
   than 100vh because iPad and mobile Safari shrink the visual viewport as the
   toolbar hides, and 100vh overflows behind it. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

body.explore-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
/* The header is identical on every page — same width, padding and alignment as
   everywhere else. Only `flex` is set here, so it sits correctly in the
   explore page's column layout rather than stretching. */
body.explore-page header.site { flex: 0 0 auto; }
body.explore-page main {
  flex: 1 1 auto; min-height: 0;
  max-width: none; margin: 0; padding: 0; display: flex;
}
body.explore-page footer.site { display: none; }

.explore { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }

.explore-controls {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .6rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.explore-controls .x-count {
  font-size: .85rem; color: var(--muted); white-space: nowrap;
  order: 99; margin-left: auto;
}
.explore-controls input[type=search] {
  flex: 1 1 15rem; min-width: 10rem; max-width: 24rem;
  padding: .48rem .7rem; font: inherit; font-size: .95rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.explore-controls select {
  padding: .48rem .55rem; font: inherit; font-size: .88rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  max-width: 12rem;
}
.explore-controls .check {
  display: flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--muted); white-space: nowrap;
}
.explore-controls .linkish {
  background: none; border: 0; color: var(--accent-dark);
  font: inherit; font-size: .85rem; cursor: pointer;
  text-decoration: underline; padding: .3rem;
}

/* Two panes filling everything below the filter bar. min-height:0 on the grid
   and its children is what actually lets the list scroll instead of stretching
   the page. */
.explore-body {
  flex: 1 1 auto; min-height: 0;
  /* Map gets the larger share — it's the thing you navigate by. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.explore-list {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: .9rem 1rem 2rem;
}
.explore-map { position: relative; min-height: 0; border-left: 1px solid var(--line); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }

.x-results {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.x-empty { color: var(--muted); font-size: .9rem; padding: 1rem 0; }
.x-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.x-card:hover { border-color: var(--accent); color: var(--text); }
.x-card .card-body { padding: .6rem .75rem; display: block; }
.x-card .x-name {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: .98rem; line-height: 1.25; margin-bottom: .1rem;
}
.x-card .local { display: block; font-family: var(--serif); color: var(--muted); font-size: .85rem; }
.x-card .where { display: block; font-size: .8rem; color: var(--muted); margin: .15rem 0 .35rem; }
.x-card .meta { display: flex; flex-wrap: wrap; gap: .25rem; }

.x-toggle { display: none; }
.map-note { max-width: var(--wrap); margin: .6rem auto 0; }

/* Narrower than this and side-by-side stops working — one pane at a time,
   swapped by a floating button. */
@media (max-width: 56rem) {
  .explore-body { grid-template-columns: 1fr; }
  .explore-map { display: none; border-left: 0; }
  .explore.show-map .explore-map { display: block; }
  .explore.show-map .explore-list { display: none; }
  .explore-controls { padding: .5rem .75rem; }
  .explore-controls .x-count { order: 0; margin-left: 0; width: 100%; }
  .x-toggle {
    display: block; position: fixed; z-index: 20;
    left: 50%; transform: translateX(-50%); bottom: 1.5rem;
    padding: .6rem 1.5rem; font: inherit; font-size: .95rem; font-weight: 600;
    background: var(--text); color: var(--bg);
    border: 0; border-radius: 100px; cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.28);
  }
}

/* -------------------------------------------------------------- form ---- */

.submit-form { max-width: 38rem; display: grid; gap: .9rem; margin-top: 1rem; }
.submit-form label { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
.submit-form input, .submit-form select, .submit-form textarea {
  font: inherit; font-size: .97rem; color: var(--text);
  padding: .55rem .7rem; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); width: 100%;
}
.submit-form input:focus-visible, .submit-form select:focus-visible, .submit-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.submit-form .row { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.submit-form button { justify-self: start; }
.submit-form .req { color: var(--accent); }
.submit-form .hint { margin: -.4rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error {
  background: #FDECEA; border: 1px solid #E8B4AE; color: #8B2A1C;
  padding: .7rem .9rem; border-radius: var(--radius); max-width: 38rem;
}

section.note {
  margin-top: 2.5rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  max-width: 42rem;
}
section.note h2 { margin-top: 0; font-size: 1.1rem; }
section.note p:last-child { margin-bottom: 0; }

@media (max-width: 34rem) {
  body { font-size: 16px; }
  dl.facts { grid-template-columns: 1fr; gap: .1rem .9rem; }
  dl.facts dd { margin-bottom: .5rem; }
  .submit-form .row { grid-template-columns: 1fr; }
  header.site { padding-bottom: .8rem; }
}

/* --------------------------------------------------- homepage find bar --- */

.find { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .6rem; align-items: stretch; }
.find form.search { margin: 0; flex: 1 1 20rem; }
.find .jump { display: flex; gap: .4rem; }
.find .jump select {
  padding: .7rem .6rem; font: inherit; font-size: .95rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  max-width: 13rem;
}
.find .jump select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Country links kept crawlable but visually secondary — a wall of tiles was a
   poor front door, especially on a phone. */
.browse-inline { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.browse-inline h2 { margin-top: 0; font-size: 1.05rem; }
.country-inline { font-size: .9rem; line-height: 2; color: var(--muted); }
.country-inline a { text-decoration: none; }
.country-inline a:hover { text-decoration: underline; }
.country-inline .cnum { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums; }

@media (max-width: 34rem) {
  .find .jump { width: 100%; }
  .find .jump select { flex: 1; max-width: none; }
}