@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #EDE6D2;
  --paper-dark: #E2D8BC;
  --ink: #202B32;
  --ink-soft: #4B5860;
  --stamp: #9C3B2E;
  --gold: #A8791F;
  --sage: #5B7553;
  --line: #C7BB9A;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
  white-space: nowrap;
}
.badge-cash { background: var(--sage); }
.badge-card { background: var(--gold); }
.badge-legend { font-size: 12px; color: var(--ink-soft); margin: 12px 0; }
.badge-legend .badge { margin-right: 6px; }

.inline-photo {
  display: block;
  max-width: 380px;
  width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(32, 43, 50, 0.15);
}

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

li { margin-bottom: 8px; }

/* AUDIT_FIX_2026_08_27: universal 1080px width across the whole site, per
   explicit request to see one uniform number everywhere rather than the
   840/1080 split. .internal-wrap kept as an alias (same value) so internal
   pages that already reference that class name don't need edits too. */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.internal-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
/* AUDIT_FIX_2026_08_26_ROUND4: reverting the whole "give the header a wider
   container" approach -- that was solving the wrong problem. The header now
   uses the exact same width as every other page (.container, 840px) --
   no special case. Whether the nav fits in that width is now decided by
   JS measuring the actual rendered width at runtime (see the script in
   header.ejs), not by a guessed breakpoint. Three guessed numbers in a row
   were wrong; a measurement can't be. */
/* AUDIT_FIX_2026_08_27_ROUND2: header gets its own deliberate width, separate
   from .container's 960px (which is correctly staying as the reading-column
   width for body content, per the 960-grid research). This is NOT another
   guessed number: brand + 5 nav dropdowns + search box + Sign In adds up to
   roughly 1090px of real content (computed, not estimated), so 960px could
   never have worked regardless of any CSS fix. 1300px gives real margin
   above that computed minimum. The nav/hamburger split below is now a fixed
   breakpoint tied to this same number (see the media query below), not a
   dynamic JS measurement -- deterministic and predictable, as requested. */
.site-header .container {
  max-width: 1300px;
  width: fit-content;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  position: relative;
}
/* AUDIT_SEARCH_2026_08_26 */
/* AUDIT_MEGAMENU_2026_08_26 */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
/* AUDIT_FIX_2026_08_27_ROUND2: hover-to-open on real pointer devices (mouse/
   trackpad). Scoped to (hover:hover) and (pointer:fine) so touch devices --
   which fire a synthetic hover on tap and would otherwise get a dropdown
   stuck open -- keep using the existing click-to-open JS instead. */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
.nav-caret { font-size: 9px; margin-left: 2px; opacity: 0.6; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 8px 0;
  z-index: 40;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ink-soft);
}
.nav-dropdown-menu a:hover { background: rgba(0,0,0,0.03); color: var(--ink); }
.nav-dropdown-hint { font-size: 11px; color: var(--ink-soft); opacity: 0.7; }
.nav-dropdown-viewall { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-weight: 600; }
.nav-dropdown-soon {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 16px; font-size: 13px; color: var(--ink-soft); opacity: 0.45;
  cursor: default; white-space: nowrap;
  font-family: 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
}
/* AUDIT_FIX_2026_08_27: replaced the collapsed icon-only toggle with an
   always-visible inline search box -- see header.ejs for why. */
.site-search-form-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-dark);
  flex-shrink: 0;
}
.site-search-form-inline-icon {
  color: var(--ink-soft); flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center;
}
.site-search-form-inline input {
  border: none; background: none; outline: none; font-size: 13px;
  width: 60px; color: var(--ink); font-family: inherit;
}
.site-search-form-inline input::placeholder { color: var(--ink-soft); }

/* AUDIT_FIX_2026_08_27_ROUND2: replaced dynamic JS-measured collapse with a
   real, fixed breakpoint at 1300px (matching the header's own computed
   width above). Deterministic: full nav always shows above 1300px viewport
   width, hamburger always shows below it -- no more "sometimes it collapses
   for no obvious reason." Only the nav links fold behind the hamburger;
   brand, search, and Sign In stay visible in both modes, so the hamburger
   is genuinely a supplement to the header, not a replacement for most of it. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--ink); }

@media (max-width: 1300px) {
  .nav-hamburger { display: flex; }
  #site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    z-index: 30;
  }
  #site-nav.is-open { display: flex; }
  #site-nav .nav-divider { display: none; }
  #site-nav .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  #site-nav .nav-dropdown-menu {
    display: block; position: static; box-shadow: none; border: none;
    padding-left: 16px; margin-top: 4px; width: 100%;
  }
  /* AUDIT_FIX_2026_08_27_ROUND4: sub-items (e.g. "Abroad / International")
     were sharing one row via justify-content:space-between, which had no
     room to breathe on a phone-width screen and read as one jumbled
     uppercase phrase. Stack label above hint, and drop the uppercase
     treatment here specifically so there's real visual hierarchy between
     the top-level nav word (still uppercase) and its sub-items. */
  #site-nav .nav-dropdown-menu a,
  #site-nav .nav-dropdown-soon {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
  }
  #site-nav .nav-dropdown-hint { font-size: 12px; }
}

/* AUDIT_FIX_2026_08_27_ROUND3: on a genuinely narrow phone (~375-414px,
   e.g. an iPhone), even the collapsed row -- brand + hamburger + always-
   visible search box + Sign In -- doesn't fit with real margin (computed:
   ~380px needed vs ~375px available on the narrowest common phones). Search
   collapses to icon-only here, expanding to a full-width overlay on tap
   instead of sitting inline. */
@media (max-width: 480px) {
  .site-header .brand { font-size: 22px; }
  .site-search-form-inline input { display: none; }
  .site-search-form-inline { padding: 6px; border: none; background: none; }
  .site-search-form-inline.is-open {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px 16px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06); z-index: 35; border-radius: 0;
  }
  .site-search-form-inline.is-open input { display: block; width: 100%; }
}
.site-header .brand {
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
  row-gap: 6px;
  flex-wrap: nowrap;
  margin-left: 28px;
}
.site-header .nav-divider {
  width: 1px;
  height: 14px;
  background: var(--line);
  display: inline-block;
  flex-shrink: 0;
}
.site-header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header nav .nav-dropdown,
.site-header nav > a {
  flex-shrink: 0;
}
.site-header .brand {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.elsewhere-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.elsewhere-row a {
  color: var(--stamp);
  text-decoration: none;
}
.elsewhere-row a:hover { text-decoration: underline; }

/* Hero */
.hero {
  padding: 36px 0 60px;
  border-bottom: 1px solid var(--line);
}
/* UTIL_HERO_COMPACT_2026_08_12: 14 separate pages previously repeated the
   identical style="padding-bottom:32px;" on their hero section — this was
   never really a per-page override, it's a second standard hero variant
   (every simple/hub page wants it; only home.ejs and 404.ejs keep the
   default 60px). One real class replaces 14 copies of the same inline
   style. */
.hero.hero--compact { padding-bottom: 32px; }

/* UTIL_TEXT_2026_08_12: small set of utility classes replacing the most
   repeated literal inline style="..." strings on air.ejs / water.ejs /
   volunteer.ejs (found during the inline-style audit — see also
   .hero--compact above). Purely additive: same visual result, reusable
   class instead of a copy-pasted style attribute. The larger, page-
   specific inline styles on these files are left as-is for now — this
   covers the genuinely repeated, mechanical cases only. */
.u-text-sm { font-size: 13px; }
.u-text-muted { color: var(--ink-soft); }
.u-text-sm-muted { font-size: 13px; color: var(--ink-soft); }
.u-text-sm-muted-italic { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.u-mt-0 { margin-top: 0; }
.u-mb-16 { margin-bottom: 16px; }

/* UTIL_FORM_2026_08_12: volunteer.ejs repeats this exact label/input/button
   styling 5x/5x/2x as inline style="..." — a real reusable form component,
   not just cosmetic repetition, so it gets real classes rather than a
   generic utility. */
.form-field-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-field-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
}
.form-submit-btn {
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  column-gap: 48px;
}
/* STORIES_MOST_READ_CSS_2026_08_14: pageview-ranked list beside the Stories
   hero description. Deliberately plain (numbered list, no photos) — this
   sits next to prose, not in a photo-tile grid, and needs to read fast. */
.stories-most-read {
  border-left: 2px solid var(--line);
  padding-left: 24px;
}
.stories-most-read-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 12px;
}
.stories-most-read ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: most-read;
}
.stories-most-read li {
  counter-increment: most-read;
  margin-bottom: 10px;
  padding-left: 26px;
  position: relative;
  font-size: 14px;
  line-height: 1.4;
}
.stories-most-read li::before {
  content: counter(most-read);
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.stories-most-read a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.stories-most-read a:hover { color: var(--stamp); border-color: var(--stamp); }
@media (max-width: 720px) {
  .stories-most-read {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 20px;
    margin-top: 20px;
  }
}
.hero-text .kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--stamp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-art {
  color: var(--ink-soft);
  display: flex;
  justify-content: center;
}
.hero-art svg { width: 100%; max-width: 300px; height: auto; }
/* FRAME_RATIO_2026_08_11: fixed 4:5 portrait frame; image fills it
   with no gaps. Pre-crop hero/About photos to 4:5 on the phone
   (Samsung: Crop -> 4:5) before uploading for a perfect fit. */
.hero-photo-frame {
  width: 100%;
  max-width: 380px;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  position: relative;
}
.hero-photo-frame::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid var(--stamp);
  opacity: 0.35;
  border-radius: 3px;
  pointer-events: none;
}
.hero-photo-frame img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  /* SPACING_MOBILEHERO_FIX: but DO show a real uploaded hero photo on
     mobile (home.ejs adds .has-photo only when heroImageUrl exists); only
     the decorative SVG fallback stays hidden on small screens. */
  .hero-art.has-photo { display: flex; justify-content: center; margin-top: 12px; }
}

.hero h1 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 20px;
}
.hero p {
  font-size: 18px;
  color: var(--ink-soft);
}
.hero .links { margin-top: 28px; }
.hero .links a {
  display: inline-block;
  margin-right: 16px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
}
.hero .links a.primary {
  background: var(--ink);
  color: var(--paper);
}

/* Sitewide feedback widget */
#fb-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  font-family: 'IBM Plex Sans', sans-serif;
}
#fb-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--stamp);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(32, 43, 50, 0.25);
}
#fb-toggle:hover { background: #823126; }

#fb-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(32, 43, 50, 0.2);
}
#fb-panel .fb-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
#fb-panel .fb-subtitle {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
#fb-panel textarea,
#fb-panel input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 10px;
  resize: vertical;
}
#fb-panel textarea:focus,
#fb-panel input[type="text"]:focus {
  outline: none;
  border-color: var(--stamp);
}
#fb-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
}
#fb-submit:disabled { opacity: 0.6; cursor: default; }
#fb-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--stamp);
}
#fb-success .fb-title { margin-top: 4px; }

@media (max-width: 640px) {
  #fb-widget { right: 14px; bottom: 14px; }
  #fb-panel { width: calc(100vw - 28px); }

  /* AUDIT_FIX_2026_08_27_ROUND5: removed this block's old .site-header
     rules -- they predated the hamburger redesign (comment literally said
     "on narrow screens the nav wraps below the brand entirely", describing
     the OLD system). Same equal-specificity-as-mine, later-in-file problem
     that's bitten this project twice before (auth-modal.ejs, then a second
     legacy block below). Header/nav responsive behavior now lives
     entirely in the @media (max-width: 1300px) and (max-width: 480px)
     blocks earlier in this file. */

  /* Any cost-table or ledger-table with data-label attributes on its cells
     stacks into cards instead of requiring horizontal scroll — swiping
     sideways to read a description is worse than just reading it stacked
     vertically. */
  table.cost-table[data-responsive-cards] tr,
  table.cost-table:not(.trip-summary-table) tr:has(td[data-label]),
  table.ledger-table tr:has(td[data-label]) {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  table.cost-table:not(.trip-summary-table) tr:has(td[data-label]) th,
  table.cost-table:not(.trip-summary-table) tr:first-child:has(th),
  table.ledger-table tr:has(td[data-label]) th,
  table.ledger-table tr:first-child:has(th) {
    display: none;
  }
  table.cost-table:not(.trip-summary-table) td[data-label],
  table.ledger-table td[data-label] {
    display: block;
    width: auto !important;
    padding: 3px 0;
    border: none;
  }
  table.cost-table:not(.trip-summary-table) td[data-label]::before,
  table.ledger-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--stamp);
    margin-bottom: 2px;
  }
  table.cost-table:not(.trip-summary-table) { min-width: 0; }
  table.ledger-table[class] { min-width: 0; }

  /* Trip Summary specifically: keep it a real table on mobile (scrolls
     horizontally via .table-scroll) instead of stacking into 8 rows per
     country — comparing spend/days across trips only works as a table. */
  table.trip-summary-table {
    min-width: 640px;
    font-size: 11.5px;
  }
  table.trip-summary-table th,
  table.trip-summary-table td {
    padding: 6px 5px;
    white-space: nowrap;
  }
}
/* Build page: outbound product link + empty-gallery hint (build.ejs). */
.build-product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--stamp);
  text-decoration: none;
  border: 1px solid var(--stamp);
  border-radius: 3px;
  padding: 6px 12px;
  margin-top: 8px;
  transition: background 0.15s, color 0.15s;
}
.build-product-link:hover { background: var(--stamp); color: #fff; }
.build-photo-hint {
  margin: 32px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: 13.5px;
  background: rgba(255,255,255,0.35);
}
.build-photo-hint code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  background: var(--paper-dark);
  padding: 1px 5px;
  border-radius: 2px;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
/* PROJECTS_TABS_STATFIX: give each stat an equal flex basis so all four
   size evenly and wrap to a tidy 2x2 instead of leaving a lone orphan
   ("Person on-call, always") on its own line. */
.stat-strip .stat { display: flex; flex-direction: column; flex: 1 1 150px; min-width: 0; }

/* Shared Build | Guidance tab bar (partials/projects-tabs.ejs). */
.projects-tabs { display: flex; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.projects-tab {
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.projects-tab:hover { border-color: var(--stamp); color: var(--stamp); }
.projects-tab.active { background: var(--stamp); color: #fff; border-color: var(--stamp); }

/* Guidance: category-grouped tile grid (guidance-index.ejs). */
/* DESIGN_CATEGORY_ACCENTS_2026_08_12: icon + coloured accents per category
   (colour is set inline per-category via CSS custom var passthrough from
   the template, so this stays a single reusable rule rather than one rule
   per category). */
.guidance-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin: 28px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.guidance-cat-icon { display: inline-flex; flex-shrink: 0; }
.guidance-cat:first-of-type { margin-top: 4px; }
.guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.guidance-grid .guidance-tile {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px 20px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.guidance-grid .guidance-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(32,43,50,0.12);
}
/* .journal-card:last-child later in this file zeroes out border-bottom —
   restore it here for guidance tiles specifically, since they're meant to
   be self-contained boxes, not a bordered list like the journal index. */
.guidance-grid .guidance-tile:last-child { border-bottom: 1px solid var(--line); }
.guidance-tile-status {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.guidance-tile-status.is-live { background: rgba(91,117,83,0.15); color: var(--sage); }
.guidance-tile-status.is-soon { background: rgba(75,88,96,0.12); color: var(--ink-soft); }
.stat-strip .stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 30px;
  font-weight: 500;
  color: var(--stamp);
  line-height: 1;
}
.stat-strip .stat-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.also-on-road {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-soft);
}
.also-on-road-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.also-on-road a { color: var(--stamp); text-decoration: none; }
.also-on-road a:hover { text-decoration: underline; }

/* Passport stamp - signature element */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 160px;
  height: 160px;
  border: 2px dashed var(--stamp);
  border-radius: 50%;
  color: var(--stamp);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-8deg);
  opacity: 0.85;
  flex-shrink: 0;
  line-height: 1.1;
  overflow: hidden;
  padding: 14px;
}
.stamp .country {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.stamp-icon {
  width: 26px;
  height: 26px;
  color: var(--stamp);
  margin-bottom: 2px;
}
.stamp-icon svg { width: 100%; height: 100%; }
.route-card .stamp-icon { width: 20px; height: 20px; }
.stamp .dates {
  font-size: 10px;
  margin-top: 4px;
}
.stamp .visa-type {
  font-size: 9px;
  margin-top: 6px;
  letter-spacing: 0.08em;
}

/* Sections */
section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }

/* A hero directly after the breadcrumb (every inner page) doesn't need the
   full 56px on top of the breadcrumb's own padding — was creating a much
   bigger gap than intended between the breadcrumb and the page title. */
.breadcrumb + section.hero { padding-top: 26px; }

/* Same stacking problem on the way out of a hero into the next section —
   the hero's bottom padding plus the next section's top padding compounded
   into a gap roughly double what it should be. */
.hero + section { padding-top: 24px; }

/* SPACING_MOBILEHERO_FIX: route-body pages (about/air/build/water/state)
   put a .route-body DIV after the hero, not a <section>, so the rule above
   never applied and the hero->body gap stacked. Zero the first child's top
   margin so that gap equals the hero's own padding-bottom - uniform
   everywhere. */
.hero + .route-body > :first-child { margin-top: 0; }

/* ABOUT_PAGE: the About page's second block is a .route-body div, not a
   <section>, so the .hero + section compensator above never applied and
   the hero->body gap stacked bigger than the inter-paragraph rhythm.
   Tighten just that first gap so P1->P2 matches P2->P3. */
.about-body { padding-top: 4px; }
.about-body > p:first-child, .about-body > .about-p2-wrap:first-child { margin-top: 0; }

/* Float the rotating About photo to the right of P2; stacks on mobile. */
/* ABOUT_PHOTO_HEIGHT_CAP: no flow-root, so following paragraphs wrap
   up alongside the photo (magazine style) and fill the gap. */
.about-p2-wrap { display: block; }
.about-photo {
  float: right;
  width: auto;
  max-width: 44%;
  margin: 4px 0 16px 28px;
}
.about-photo img { max-height: 420px; width: auto; max-width: 100%; display: block; }
@media (max-width: 640px) {
  .about-photo {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0 auto 18px;
    text-align: center;
  }
  .about-photo img { max-height: 60vh; width: auto; max-width: 100%; margin: 0 auto; }
}

/* Route cards */
.route-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.route-card:last-child { border-bottom: none; }

/* Country mosaic - full color deliberately, different job than the monochrome stamps */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 24px 0 40px;
}
.mosaic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  background: var(--paper-dark);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform 0.15s ease;
}
.mosaic-tile.linked:hover { transform: translateY(-2px); }
.mosaic-tile.unlinked { opacity: 0.55; cursor: default; }
.mosaic-tile .flag { font-size: 28px; }
.mosaic-tile .flag img,
.trip-summary-table .flag-icon {
  width: 28px;
  height: 21px;
  object-fit: contain;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.mosaic-tile .name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.route-card .stamp { width: 108px; height: 108px; padding: 8px; gap: 2px; }
.route-card .stamp .country { font-size: 10px; }
.route-card .stamp .dates { font-size: 9px; }
.route-card .stamp .visa-type { font-size: 8px; }
.route-card h3 { margin: 0 0 6px; font-size: 22px; }
.route-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Ledger table — one unified expense table (Location / Date / What / Amount /
   Type / Remarks) instead of a separate small table per city. Wrapped in a
   scroll container so it degrades gracefully on narrow screens rather than
   trying to force 6 columns into a phone width. */
.table-scroll {
  overflow-x: auto;
  margin: 20px 0;
  -webkit-overflow-scrolling: touch;
}
table.ledger-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
table.ledger-table th, table.ledger-table td {
  text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--line);
  overflow-wrap: break-word;
  vertical-align: top;
}
table.ledger-table th:nth-child(1), table.ledger-table td:nth-child(1) { width: 11%; }
table.ledger-table th:nth-child(2), table.ledger-table td:nth-child(2) { width: 9%; }
table.ledger-table th:nth-child(3), table.ledger-table td:nth-child(3) { width: 22%; }
table.ledger-table th:nth-child(4), table.ledger-table td:nth-child(4) { width: 12%; }
table.ledger-table th:nth-child(5), table.ledger-table td:nth-child(5) { width: 9%; }
table.ledger-table th:nth-child(6), table.ledger-table td:nth-child(6) { width: 8%; }
table.ledger-table th:nth-child(7), table.ledger-table td:nth-child(7) { width: 29%; }
table.ledger-table th {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
table.ledger-table tr.total td {
  font-weight: 600;
  border-top: 2px solid var(--ink);
}
table.ledger-table tr:hover td { background: var(--paper-dark); }
/* Location-change banding — a new location gets a stamp-red top border and
   bold red text, so the eye catches the shift while scanning a chronological
   list rather than needing separate small tables per city. */
table.ledger-table tr.loc-start td { border-top: 2px solid var(--stamp); }
table.ledger-table tr.loc-start td:first-child { font-weight: 700; color: var(--stamp); }

/* Trip summary table — 6 columns (Travel index); needs its own proportions
   since .cost-table's defaults assume 3 columns. */
/* --- TRIP_SUMMARY_SPEND_COLUMN_REMOVED --- */
/* 7 columns now (Flag / Code / Country / When / Days / Visa / Mobile) —
   Spend column removed until cash-vs-card reconciliation is complete.
   Widths redistribute the freed 14% proportionally, with Visa (the
   widest text column) getting the largest share. */
table.cost-table.trip-summary-table { table-layout: fixed; min-width: 760px; }
table.cost-table.trip-summary-table th:nth-child(1), table.cost-table.trip-summary-table td:nth-child(1) { width: 7%; }
table.cost-table.trip-summary-table th:nth-child(2), table.cost-table.trip-summary-table td:nth-child(2) { width: 10%; }
table.cost-table.trip-summary-table th:nth-child(3), table.cost-table.trip-summary-table td:nth-child(3) { width: 17%; white-space: nowrap; }
table.cost-table.trip-summary-table th:nth-child(4), table.cost-table.trip-summary-table td:nth-child(4) { width: 11%; }
table.cost-table.trip-summary-table th:nth-child(5), table.cost-table.trip-summary-table td:nth-child(5) { width: 9%; }
table.cost-table.trip-summary-table th:nth-child(6), table.cost-table.trip-summary-table td:nth-child(6) { width: 35%; }
table.cost-table.trip-summary-table th:nth-child(7), table.cost-table.trip-summary-table td:nth-child(7) { width: 11%; }

/* Info table — a .cost-table variant for descriptive (not expense) tables,
   like the Air page's pollutant breakdown. Reversed proportions: the label
   column stays tight, the description column gets the room. */
table.cost-table.info-table th:first-child, table.cost-table.info-table td:first-child { width: 22%; }
table.cost-table.info-table th:nth-child(2), table.cost-table.info-table td:nth-child(2) { width: 12%; }
table.cost-table.info-table th:nth-child(3), table.cost-table.info-table td:nth-child(3) { width: 66%; }

/* Genuinely 2-column tables (e.g. Water's pollutant table) — don't reuse
   the 3-column info-table proportions, which leave a large empty gap. */
table.cost-table.two-col-table th:first-child, table.cost-table.two-col-table td:first-child { width: 28%; }
table.cost-table.two-col-table th:nth-child(2), table.cost-table.two-col-table td:nth-child(2) { width: 72%; }

/* City-grouped cost summary — 8 columns, needs its own width rules
   rather than reusing the 2-column class. Days column holds short
   numeric values (not long date ranges anymore), so it stays narrow;
   the freed space goes to Other, which carries the longest text. */
table.cost-table.city-summary-table th:nth-child(1), table.cost-table.city-summary-table td:nth-child(1) { width: 11%; }
table.cost-table.city-summary-table th:nth-child(2), table.cost-table.city-summary-table td:nth-child(2) { width: 6%; text-align: center; }
table.cost-table.city-summary-table th:nth-child(3), table.cost-table.city-summary-table td:nth-child(3) { width: 10%; }
table.cost-table.city-summary-table th:nth-child(4), table.cost-table.city-summary-table td:nth-child(4) { width: 11%; }
table.cost-table.city-summary-table th:nth-child(5), table.cost-table.city-summary-table td:nth-child(5) { width: 10%; }
table.cost-table.city-summary-table th:nth-child(6), table.cost-table.city-summary-table td:nth-child(6) { width: 13%; }
table.cost-table.city-summary-table th:nth-child(7), table.cost-table.city-summary-table td:nth-child(7) { width: 28%; }
table.cost-table.city-summary-table th:nth-child(8), table.cost-table.city-summary-table td:nth-child(8) { width: 11%; }

/* Issues table — 4 columns (Volunteer page); .cost-table's 3-column widths
   summed to 100% already, leaving no room for a 4th column at all. */
table.cost-table.issues-table th:first-child, table.cost-table.issues-table td:first-child { width: 15%; }
table.cost-table.issues-table th:nth-child(2), table.cost-table.issues-table td:nth-child(2) { width: 15%; }
table.cost-table.issues-table th:nth-child(3), table.cost-table.issues-table td:nth-child(3) { width: 52%; }
table.cost-table.issues-table th:nth-child(4), table.cost-table.issues-table td:nth-child(4) { width: 18%; }

/* Cost table */
table.cost-table {
  width: 100%;
  min-width: 480px;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  margin: 20px 0;
}
table.cost-table th, table.cost-table td {
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--line);
  overflow-wrap: break-word;
}
/* Consistent proportions across every cost-table on the site, regardless
   of that table's specific content — this is what actually fixes the
   "different width each time" problem, not just a container constraint. */
table.cost-table th:first-child, table.cost-table td:first-child { width: 58%; }
table.cost-table th:nth-child(2), table.cost-table td:nth-child(2) { width: 27%; }
table.cost-table th:nth-child(3), table.cost-table td:nth-child(3) { width: 15%; }
table.cost-table th {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
table.cost-table tr.total td {
  font-weight: 600;
  border-top: 2px solid var(--ink);
}

/* Donut chart — proportion breakdowns (e.g. cash vs card split).
   Reuses the existing --sage/--gold badge colors so it reads as the same
   system as the Cash/Card badges, not a new palette. */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}
.donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 18px;
  background: var(--paper);
  border-radius: 50%;
}
.donut-total {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  z-index: 1;
}
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.donut-legend-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.donut-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.donut-legend-value { font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); font-size: 13px; }

/* Stat highlight row — headline numbers for a route page (total spend, total
   days, cost/day). Bigger and bolder than the homepage stat-strip since it's
   summarizing one page, not the whole site. */
.stat-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 24px 0 28px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-highlight-item { flex: 1; min-width: 120px; }
.stat-highlight-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  color: var(--stamp);
  line-height: 1;
  display: block;
}
.stat-highlight-label {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
  display: block;
}

/* Simple horizontal bar chart — e.g. nights per stop, spend by category.
   Derived from .cost-table's mono/line conventions, not a new visual style. */
.bar-chart { margin: 20px 0 28px; }
.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bar-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.bar-track {
  flex: 1;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  background: var(--stamp);
  height: 100%;
  border-radius: 2px 0 0 2px;
}
.bar-value {
  width: 64px;
  flex-shrink: 0;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
}
@media (max-width: 640px) {
  .bar-label { width: 88px; font-size: 12px; }
  .bar-value { width: 48px; font-size: 12px; }
}

/* Compact route list — clubs repeat visits to the same place under one
   line instead of a separate timeline entry each time, keeping the whole
   section short. */
/* Uzbekistan interactive map — real geographic boundary + calibrated pins */
.uz-map-wrap { margin: 20px 0 28px; }
.uz-map { width: 100%; height: auto; max-height: 380px; }
.uz-map-label {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 11px;
  fill: var(--ink);
}
.uz-map-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  fill: var(--ink-soft);
}

/* Travel/India section switcher — makes the merged "Travel" nav entry
   feel like one coherent section split two ways, not two separate,
   disconnected pages. Styled as a segmented pill control (echoes a
   passport stamp toggle) so it reads as an actual switch to click,
   not a caption — the previous version (thin underline, small grey
   text) was too easy for newcomers to miss entirely. */
.travel-section-switch {
  display: inline-flex;
  gap: 4px;
  margin: 12px 0 28px;
  padding: 4px;
  background: var(--paper-dark);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.travel-section-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.travel-section-tab.active {
  background: var(--stamp);
  color: var(--paper);
  font-weight: 700;
}
.travel-section-tab:not(.active):hover { background: var(--paper); color: var(--ink); }
.travel-section-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  background: var(--ink-soft);
  color: var(--paper);
  vertical-align: 1px;
}
.travel-section-tab.active .travel-section-count { background: var(--paper); color: var(--stamp); }

/* Route flow — boxes connected by arrows, wrapping on narrow screens.
   A lighter-weight alternative to a full geographic map. */
.route-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 24px;
}
.route-box {
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 14px;
  width: 150px;
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.route-box strong { font-size: 14px; }
.route-box-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--stamp);
}
.route-arrow {
  color: var(--ink-soft);
  font-size: 18px;
}
@media (max-width: 640px) {
  .route-flow { flex-direction: column; align-items: stretch; }
  .route-box { width: auto; flex-basis: auto; }
  .route-arrow { transform: rotate(90deg); align-self: center; }
}

.route-compact {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
}
.route-compact li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.route-compact li:last-child { border-bottom: none; }
.route-repeat {
  color: var(--ink-soft);
  font-size: 13px;
}

/* Route timeline — a visual date sequence for dense multi-leg routes.
   Dashed connector echoes the passport stamp's dashed border; stamp-red
   markers and mono dates keep it consistent with the rest of the palette. */
.route-timeline {
  position: relative;
  margin: 20px 0 28px;
  padding-left: 26px;
  border-left: 2px dashed var(--line);
}
.route-timeline-item {
  position: relative;
  padding-bottom: 22px;
}
.route-timeline-item:last-child { padding-bottom: 0; }
.route-timeline-item::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stamp);
  border: 2px solid var(--paper);
}
.route-timeline-date {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--stamp);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
.route-timeline-text {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .route-timeline { padding-left: 20px; }
  .route-timeline-item::before { left: -26px; width: 8px; height: 8px; }
}

/* India map — clickable states. Unvisited states stay a flat neutral grey;
   visited states pick up the stamp-red used everywhere else on the site,
   so the map reads as part of the same system, not a new visual language. */
#india-map { max-width: 420px; margin: 0 auto; }
#india-map svg { width: 100%; height: auto; display: block; }
#india-map path {
  fill: var(--line);
  stroke: var(--paper);
  stroke-width: 0.6;
}
#india-map path.visited {
  fill: var(--stamp);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s;
}
#india-map path.visited:hover,
#india-map path.visited:focus {
  opacity: 0.9;
  outline: none;
}

/* India region cards — one clear clickable unit, not two disconnected
   blocks. Icon + name + places + description, no text repeated. */
.india-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.india-card:hover { background: var(--paper-dark); }
.india-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--stamp);
  margin-top: 4px;
}
.india-card-icon svg { width: 100%; height: 100%; }
.india-card-body h3 { margin: 0 0 4px; }
.india-card-places {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.india-card-body p { margin: 0; }

/* Location marker — domestic (India) entries. Deliberately not a stamp:
   no circle, no dashed border, no rotation. That visual is earned by a
   visa/border story, and domestic trips don't have one. */
/* REGION_PLACES_DIRECTORY_2026_08_14: dynamic "every place in this
   region" grid on india-region.ejs — see routes/india.js's
   placesByState computation. */
.region-places-directory {
  margin: 40px 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
}
.region-places-directory > h2,
.region-places-directory > p {
  grid-column: 1 / -1;
}
.region-places-state h3 {
  font-size: 16px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.region-places-state h3 a { color: var(--ink); text-decoration: none; }
.region-places-state h3 a:hover { color: var(--stamp); }
.region-places-list { list-style: none; margin: 0; padding: 0; }
.region-places-list li { margin-bottom: 6px; font-size: 14px; }
.region-places-list a { color: var(--ink-soft); text-decoration: none; }
.region-places-list a:hover { color: var(--stamp); text-decoration: underline; }

.location-marker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.location-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--stamp);
}
.location-icon svg { width: 100%; height: 100%; }
.location-place {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
}
.location-state {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Route content */
.route-header {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--line);
}
.route-header h1 { margin: 0 0 8px; font-size: 36px; }
.route-header .subtitle { color: var(--ink-soft); font-size: 16px; }

/* Prev/next country pager — shown above and below the route writeup */
.route-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.route-pager + .route-header { border-top: 1px solid var(--line); padding-top: 32px; }
.route-body + .route-pager { border-top: 1px solid var(--line); margin-top: 8px; }
.route-pager-side { flex: 1; min-width: 0; }
.route-pager-side.right { text-align: right; }
.route-pager a { color: var(--stamp); text-decoration: none; }
.route-pager a:hover { text-decoration: underline; }
.route-pager a.all-routes { color: var(--ink-soft); white-space: nowrap; }

.num {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--stamp);
  font-size: 15px;
  margin-right: 10px;
}

.route-body h2 {
  font-size: 24px;
  margin-top: 40px;
  padding-top: 4px;
}

.callout {
  background: var(--paper-dark);
  border-left: 3px solid var(--stamp);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 15px;
}

/* Pull-quote — for the one sentence per section worth making the eye stop on */
.pull-quote {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 4px solid var(--stamp);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
}
@media (max-width: 640px) {
  .pull-quote { font-size: 18px; }
}

/* Tech/skill badge row — for Build's stack, or any tag-like grouping */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}
.tech-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 20px;
}
.tech-badge.highlight { border-color: var(--stamp); color: var(--stamp); }

/* Per-place Quick Facts strip — When / How to Reach / Cost, shown only
   when genuinely known. Each fact is its own visually distinct chip,
   not a cramped inline run of labels. */
.place-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 20px;
}
.place-fact {
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.4;
}
.place-fact b {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stamp);
  margin-bottom: 2px;
}

/* Tip callout — practical warnings/things to keep in mind. Gold border,
   distinct from the stamp-red callout/pull-quote used for headline facts,
   so color consistently signals "caution" vs "notable" across the site. */
.tip-callout {
  background: rgba(168,121,31,0.08);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px;
}
.tip-callout strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

/* Build page — milestone list */
/* MILESTONE_TIMELINE_2026_08_14: replaced the flat "— / ✓ prefix + bottom
   border" rows with a proper connected vertical timeline (filled dot =
   done, outlined dot = pending, neutral filled dot = no state given).
   Shared by build.ejs, volunteer.ejs, air.ejs, water.ejs — one CSS change
   improves the "roadmap" feel on all four rather than a Build-only fix. */
.milestone-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.milestone-list li {
  position: relative;
  padding: 2px 0 22px 30px;
  font-size: 15px;
}
.milestone-list li:last-child { padding-bottom: 2px; }
.milestone-list li::before {
  content: '';
  position: absolute;
  left: 3px; top: 5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 2px solid var(--ink-soft);
  z-index: 1;
}
.milestone-list li::after {
  content: '';
  position: absolute;
  left: 8px; top: 18px; bottom: -2px;
  width: 1px;
  background: var(--line);
}
.milestone-list li:last-child::after { content: none; }
.milestone-list li.done::before { background: var(--stamp); border-color: var(--stamp); }
.milestone-list li.pending::before { background: var(--paper); border-color: var(--line); }
.milestone-list li.pending { color: var(--ink-soft); }

/* Save-tips — numbered practical takeaways, bold headline + explanation,
   instead of a plain bullet list. Reuses the mono-number convention already
   established by the .num section markers. */
.save-tips { margin: 20px 0 28px; }
.save-tip {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.save-tip:last-child { border-bottom: none; }
.save-tip-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--stamp);
  flex-shrink: 0;
  width: 36px;
  line-height: 1.2;
}
.save-tip-body strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 5px;
}
.save-tip-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Photo gallery — tiles auto-injected after a section when a matching
   public/img/gallery/<slug>/<section>/ folder has images. Photos are
   already framed by scripts/frame-photo.js before they land here, so the
   tile itself stays simple: a thin border, a little lift on hover. */
/* MASONRY_GRID_2026_08_14: true masonry via CSS Grid + JS-measured row
   spans (see the gallery-span script in footer.ejs), replacing the old
   CSS-columns layout. CSS columns fill top-to-bottom *per column*, which
   both reads in a confusing order (not left-to-right like a normal grid)
   and — mixing portrait/landscape tiles of different heights in fixed-width
   columns — routinely left ragged, uneven column bottoms. This grid stays
   left-to-right/top-to-bottom in DOM order and every tile gets a row-span
   computed from its own actual rendered height, so rows pack tightly with
   no cropping and no awkward gaps. */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 4px;
  gap: 12px;
  margin: 20px 0 28px;
}
.photo-tile {
  margin: 0;
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  /* CSS paper frame (replaces the removed baked-in frame) */
  background: var(--paper);
  padding: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(32,43,50,0.10);
  transition: transform 0.18s, box-shadow 0.18s;
}
.photo-tile::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(32,43,50,0.28);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.photo-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(32,43,50,0.18);
}
.photo-tile:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}
/* GALLERY_AFFORDANCE_2026_08_13: a small expand icon on hover makes it
   clear a tile opens something, rather than relying on cursor:pointer
   alone (which touch users never even see). Purely a desktop/mouse
   affordance — touch users get the same signal from the tap-to-open
   behavior itself, so this is hover-only, not tap-triggered. */
.photo-tile::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(32,43,50,0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 3;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .photo-tile:hover::after { opacity: 1; transform: scale(1); }
}

/* MASONRY_GRID_2026_08_14: is-portrait/is-landscape classes (still tagged
   by the footer script) are no longer used for cropping — the JS-measured
   grid-row-span above handles uneven heights without cutting any photo
   off. Kept available on .photo-tile in case a future style wants to key
   off orientation for something other than cropping. */
/* PICTURE_WRAPPER_2026_08_12: tiles now wrap img in <picture> (WebP source +
   JPEG fallback) — picture has no visual box of its own, but browsers give
   it inline-level layout by default, which can add a stray baseline gap
   under the image. display:block on both removes that. */
.photo-tile picture { display: block; }
.photo-tile img {
  width: 100%;
  height: auto;
  min-height: 120px;
  display: block;
  border-radius: 2px;
  /* shimmer skeleton while loading; the opaque JPEG covers it once painted */
  background: linear-gradient(100deg, var(--paper-dark) 30%, #efe9da 50%, var(--paper-dark) 70%);
  background-size: 200% 100%;
  animation: photo-shimmer 1.3s ease-in-out infinite;
}
@keyframes photo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 640px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}

/* Place overlay — full deep-dive article on top of the current page,
   semi-transparent backdrop, real URL underneath via pushState. */
#place-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 43, 50, 0.75);
  z-index: 2100;
  display: none;
  overflow-y: auto;
  padding: 40px 16px;
}
#place-overlay.open { display: block; }
#place-overlay-panel {
  background: var(--paper);
  max-width: 760px;
  margin: 0 auto;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  min-height: 200px;
}
#place-overlay-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}
#place-overlay-loading {
  padding: 60px 20px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-soft);
}
.place-link { text-decoration: none; color: inherit; }
.place-link:hover .num { color: var(--gold); }

/* ---------------------------------------------------------------------
   Lightbox — single consolidated definition (2026-08-13). Previously
   scattered across three separate blocks written on different dates
   (base rules here, a "bolder mobile controls" pass, and a later "dark
   chromeless" pass down near the end of the file) which made it fragile
   to edit safely. One block now; see docs/AUDIT_2026_08_12.md for why.
   --------------------------------------------------------------------- */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,12,14,0.96);
  z-index: 2200;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#lightbox-overlay.open { display: flex; }

#lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  min-height: 0;
}
#lightbox-overlay img {
  width: 94vw;
  max-width: 94vw;
  height: 80vh;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.6);
  transition: opacity 0.15s;
  touch-action: none;
}
#lightbox-overlay img.is-loading { opacity: 0.25; }

/* Loading spinner shown while the full-resolution image is still coming
   in — replaces what used to be a blank flash between clicking a tile
   and the image appearing. */
#lightbox-spinner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: lightbox-spin 0.8s linear infinite;
}
#lightbox-overlay.is-loading #lightbox-spinner { display: block; }
@keyframes lightbox-spin { to { transform: rotate(360deg); } }

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  font-family: 'IBM Plex Mono', monospace;
  z-index: 5;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-close {
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--stamp);
  border: 2px solid #fff;
  font-size: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.lightbox-close:hover { background: #7d2f24; }
.lightbox-prev, .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(32,43,50,0.55);
  border: 2px solid rgba(255,255,255,0.85);
  font-size: 28px;
  font-weight: 700;
  backdrop-filter: blur(2px);
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(32,43,50,0.8); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* Counter ("3 / 12") + caption, sitting below the image so they never
   overlap it regardless of aspect ratio. */
#lightbox-meta {
  width: 100%;
  max-width: 700px;
  padding: 10px 20px 4px;
  text-align: center;
  flex-shrink: 0;
}
#lightbox-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
#lightbox-caption {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
#lightbox-caption:empty { display: none; }

/* PHOTO_SOCIAL_CSS_2026_08_14: grid badges (like/comment counts on
   thumbnails) + the lightbox's like button and expandable comment panel. */
.photo-tile-badge {
  position: absolute;
  right: 8px; bottom: 8px;
  display: flex;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}
.photo-tile-badge:empty { display: none; }
.photo-tile-badge span {
  background: rgba(20,16,12,0.72);
  color: #fff;
  font-size: 11.5px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 2px 7px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
}

#lightbox-social {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 0;
  flex-shrink: 0;
}
#lightbox-social button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: background 0.15s ease;
}
#lightbox-social button:hover { background: rgba(255,255,255,0.16); }
#lightbox-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-left: auto;
}
#lightbox-download-btn:hover { background: rgba(255,255,255,0.16); }
#lightbox-like-btn.is-liked { background: rgba(181,80,47,0.35); border-color: rgba(181,80,47,0.6); }
#lightbox-like-btn:disabled { cursor: default; }

#lightbox-comments-panel {
  width: 100%;
  max-width: 700px;
  margin-top: 10px;
  padding: 14px 20px 20px;
  flex-shrink: 1;
  overflow-y: auto;
  max-height: 34vh;
}
#lightbox-comments-list { margin-bottom: 12px; }
.lightbox-comment { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.lightbox-comment:last-child { border-bottom: none; }
.lightbox-comment-meta { font-size: 11.5px; color: rgba(255,255,255,0.5); font-family: 'IBM Plex Mono', monospace; margin-bottom: 3px; }
.lightbox-comment-msg { font-size: 14px; color: rgba(255,255,255,0.92); line-height: 1.45; white-space: pre-wrap; }
.lightbox-comments-empty { font-size: 13px; color: rgba(255,255,255,0.5); font-style: italic; margin: 0; }

#lightbox-comment-form { display: flex; flex-direction: column; gap: 8px; }
#lightbox-comment-error { color: #f87171; font-size: 12.5px; }
#lightbox-comment-error:empty { display: none; }
#lightbox-comment-name, #lightbox-comment-message {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}
#lightbox-comment-name::placeholder, #lightbox-comment-message::placeholder { color: rgba(255,255,255,0.4); }
#lightbox-comment-message { resize: vertical; min-height: 56px; }
#lightbox-comment-submit {
  align-self: flex-end;
  background: var(--stamp, #b5502f);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
#lightbox-comment-submit:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
  #lightbox-social, #lightbox-comments-panel { max-width: 100vw; }
  #lightbox-comments-panel { max-height: 40vh; }
}

@media (max-width: 640px) {
  #lightbox-overlay img { width: 100vw; max-width: 100vw; max-height: 78vh; border-radius: 0; }
  .lightbox-close { top: 10px; right: 10px; width: 44px; height: 44px; font-size: 24px; }
  .lightbox-prev, .lightbox-next {
    width: 46px; height: 46px; font-size: 24px;
    top: auto; bottom: 96px; transform: none;
  }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  #lightbox-meta { padding: 8px 16px 12px; }
  #lightbox-counter { font-size: 11px; }
  #lightbox-caption { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #lightbox-overlay img { transition: none; }
  #lightbox-spinner { animation-duration: 1.4s; }
}

/* State page — schematic map with clickable pins */
#state-map { max-width: 460px; margin: 0 auto; }
#state-map svg { width: 100%; height: auto; }
.state-pin circle { transition: r 0.15s; }
.state-pin:hover circle, .state-pin:focus circle { r: 12; }
.state-pin:focus { outline: none; }
a.back-to-map {
  display: inline-block;
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--stamp);
  text-decoration: none;
}
a.back-to-map:hover { text-decoration: underline; }

/* Breadcrumb — auto-generated, shown at both top and bottom of every page */
.breadcrumb {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.breadcrumb a { color: var(--stamp); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span:not(.breadcrumb-sep) { color: var(--ink-soft); }
.breadcrumb-sep { color: var(--line); }

/* Journal */
.journal-card {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.journal-card:last-child { border-bottom: none; }
.journal-card .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--stamp);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.journal-card h3 { margin: 0 0 8px; font-size: 22px; }
.journal-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.journal-header {
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--line);
}
.journal-header .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--stamp);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.journal-header h1 { margin: 0; font-size: 34px; }

/* AUDIT_FIX_2026_08_27_ROUND3: header and footer now share the same 1300px
   width as a matched pair -- both are site chrome (navigation/links/search),
   not reading content, so they're treated as one category, separate from
   .container's 960px (which stays as the reading-column width for actual
   page content/articles). This is the resolution to "make header and
   footer the same width": rather than shrinking the header back to 960px
   (which would reopen the whole nav-wrapping problem, since the real
   computed content budget genuinely needs ~1090px), the footer widens to
   match the header instead. */
.site-footer .container {
  max-width: 1300px;
}
.site-footer {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.period-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
}
.period-btn:hover { border-color: var(--stamp); color: var(--stamp); }
.period-btn.active { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }

.footer-tagline {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px;
}
/* AUDIT_FIX_2026_08_27: footer search — deliberately bigger than the header
   version, since footer has room the header doesn't. */
.footer-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 24px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.footer-search-form-icon { color: var(--ink-soft); flex-shrink: 0; }
.footer-search-form input {
  flex: 1;
  border: none; background: none; outline: none;
  font-size: 15px; color: var(--ink); font-family: inherit;
  min-width: 0;
}
.footer-search-form input::placeholder { color: var(--ink-soft); }
.footer-search-form button {
  flex-shrink: 0;
  border: none; cursor: pointer;
  background: var(--stamp); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
}
.footer-search-form button:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .footer-search-form { flex-wrap: wrap; border-radius: 16px; }
  .footer-search-form input { width: 100%; order: 1; }
  .footer-search-form button { order: 2; margin-left: auto; }
}
.footer-elsewhere {
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}
/* AUDIT_FIX_2026_08_26: was missing entirely, so this row silently inherited
   .elsewhere-row's justify-content:space-between — the real cause of the
   "footer looks unevenly spaced vertically" complaint. space-between plus
   flex-wrap on a row that doesn't fill its last line spreads the leftover
   items apart unevenly. Center-aligning (same fix already applied to
   .footer-elsewhere below) fixes it, and matters more now that this row
   grew from 7 to 9 items (Mentorship + Guidance added). */
.footer-sections {
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .container { padding: 0 18px; }

  /* AUDIT_FIX_2026_08_27_ROUND5: removed old .site-header rules here too --
     this one was the more damaging of the two legacy blocks, forcing the
     whole header into flex-direction:column at phone widths, which fought
     the entire hamburger-overlay system built for this exact breakpoint. */

  .hero { padding: 18px 0 32px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 16px; }
  .hero .links { display: flex; flex-direction: column; gap: 10px; }
  .hero .links a { margin-right: 0; text-align: center; }
  .mosaic-grid { margin-bottom: 20px; }

  .route-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 32px 0 24px;
  }
  .route-header h1 { font-size: 28px; }

  .route-pager {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px 16px;
  }
  .route-pager-side, .route-pager-side.right { flex: none; text-align: center; }

  .route-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .callout[style*="flex"] {
    flex-direction: column;
    align-items: flex-start !important;
  }

  table.cost-table { font-size: 12px; }
  table.cost-table th, table.cost-table td { padding: 8px 6px; }
}
/* ============================================
   Template v1 — Place Card Grid
   Append this block to public/css/style.css
   ============================================ */

.place-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0;
}

.place-card {
  display: grid;
  grid-template-columns: 160px 1fr 176px;
  gap: 20px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.place-card-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  align-self: stretch;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

/* PLACE_CARD_HOVER_FIX_2026_08_13: this used to be three separate,
   conflicting patches layered on top of each other over several sessions
   (see docs/CHANGELOG.md) — one setting the card-hover text to the same
   red as the background (invisible), a second "fixing" that by forcing
   white text with !important whenever the whole card was hovered, but
   only turning the background red when the exact name pill itself was
   hovered (not the wider card) — so hovering the gallery or description
   gave white text on an unchanged light background. Background and text
   color now change together, from a single hover trigger (the whole
   card, since that's the larger and more forgiving target), with no
   !important needed because there's nothing left to fight. */
.place-card:hover .place-card-name,
.place-card-name:hover {
  background: var(--stamp);
  color: var(--paper);
}
.place-card:hover .place-card-name .place-card-dates,
.place-card-name:hover .place-card-dates {
  color: var(--paper);
  opacity: 0.85;
}
.place-card:hover .place-card-name .place-card-num,
.place-card-name:hover .place-card-num {
  background: var(--paper);
  color: var(--stamp);
}

.place-card-dates {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
}

.place-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  align-self: center;
}

.place-card-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  width: 176px;
  height: 176px;
}

/* GALLERY_UNIFORM_2026_08_13: .place-tile no longer redefines its own
   frame/hover treatment (that caused this compact preview cluster to look
   like a different component from every other gallery on the site — see
   docs/AUDIT_2026_08_12.md §1). Every tile everywhere is a .photo-tile
   first (paper frame, lift-on-hover, expand-icon affordance — defined
   once, above); .place-tile here only adjusts sizing for this compact
   context, and forces a square crop instead of the natural aspect ratio
   the full-size masonry galleries use, since there's no room for varied
   shapes in a 176×176 four-up cluster. */
.place-card-gallery .photo-tile {
  margin: 0;
  padding: 3px;
}
.place-card-gallery .photo-tile img {
  aspect-ratio: 1;
  object-fit: cover;
  min-height: 0;
}

/* Encounter / story callout — sits directly under its place card */
.place-story {
  margin: -6px 0 4px;
  padding: 14px 18px;
  border-left: 3px solid var(--stamp);
  background: var(--paper-dark);
  border-radius: 0 4px 4px 0;
}

.place-story-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stamp);
  margin-bottom: 8px;
}

.place-story-text {
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
}

.place-story-author {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
}

/* Mobile: stack name / description / gallery vertically */
@media (max-width: 720px) {
  .place-card {
    grid-template-columns: 1fr;
  }
  .place-card-name {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .place-card-gallery {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* TEMPLATE_V1_MAP_V2 */
.uz-map-num { font-family: 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 700; fill: var(--paper); pointer-events: none; }
.uz-map-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 24px; }
.uz-map-legend-item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); text-decoration: none; color: var(--ink); font-size: 12px; font-family: 'IBM Plex Mono', monospace; }
.uz-map-legend-item:hover { background: var(--stamp); color: var(--paper); border-color: var(--stamp); }
.uz-map-legend-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--stamp); color: var(--paper); font-size: 10px; font-weight: 700; }
.uz-map-legend-item:hover .uz-map-legend-num { background: var(--paper); color: var(--stamp); }
.place-card-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--stamp); color: var(--paper); font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; margin-bottom: 4px; }
.place-card { scroll-margin-top: 90px; }

/* TEMPLATE_V1_SECTION_POLISH */

/* Clear visual separation between numbered sections (Route, Best Time,
   Visa Log, Cost Breakdown, etc.) so eyes can tell where one ends and
   the next begins. */
.route-section {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.route-section:first-of-type {
  border-top: none;
  padding-top: 8px;
}
.route-section h2 {
  margin-top: 0;
}

/* Personal-highlight sections (e.g. a marathon, a one-off story) are
   visually distinct from the reusable template sections, signaling
   this content is bonus/unique to this trip -- not something every
   country page is expected to have. */
.route-highlight {
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-left: 4px solid var(--stamp);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 24px 0;
}
.route-highlight h2 {
  margin-top: 0;
}
.highlight-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 8px;
  font-weight: 700;
}

/* Cost breakdown table -- symmetric columns, right-aligned figures,
   tabular numerals so amounts line up, de-emphasized notes column. */
.cost-table.city-summary-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.cost-table.city-summary-table th {
  background: var(--paper-dark);
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.cost-table.city-summary-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
}
.cost-table.city-summary-table tr:last-child td {
  border-bottom: none;
}
.cost-table.city-summary-table tbody tr:nth-child(even) td {
  background: rgba(0,0,0,0.02);
}
.cost-table.city-summary-table th:nth-child(1),
.cost-table.city-summary-table td:nth-child(1) {
  width: 13%;
}
.cost-table.city-summary-table th:nth-child(2),
.cost-table.city-summary-table td:nth-child(2) {
  text-align: center;
  width: 7%;
}
.cost-table.city-summary-table th:nth-child(3),
.cost-table.city-summary-table th:nth-child(4),
.cost-table.city-summary-table th:nth-child(5),
.cost-table.city-summary-table th:nth-child(6) {
  text-align: right;
}
.cost-table.city-summary-table td:nth-child(3),
.cost-table.city-summary-table td:nth-child(4),
.cost-table.city-summary-table td:nth-child(5),
.cost-table.city-summary-table td:nth-child(6) {
  text-align: right;
  white-space: nowrap;
}
.cost-table.city-summary-table th:nth-child(7),
.cost-table.city-summary-table td:nth-child(7) {
  text-align: left;
}
.cost-table.city-summary-table td:nth-child(7) {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cost-table.city-summary-table th:last-child,
.cost-table.city-summary-table td:last-child {
  text-align: right;
  font-weight: 700;
  background: rgba(178, 58, 46, 0.06);
  white-space: nowrap;
}

/* TEMPLATE_V1_POLISH_V3 */

/* Fixed-width, symmetric cost-table columns. City never wraps; the
   "Other" notes column is deliberately narrower (wraps its text)
   instead of stretching wide; Total is no longer bold. */
.cost-table.city-summary-table {
  table-layout: fixed;
}
.cost-table.city-summary-table th:nth-child(1),
.cost-table.city-summary-table td:nth-child(1) {
  width: 14%;
  white-space: nowrap;
}
.cost-table.city-summary-table th:nth-child(2),
.cost-table.city-summary-table td:nth-child(2) {
  width: 6%;
}
.cost-table.city-summary-table th:nth-child(3),
.cost-table.city-summary-table td:nth-child(3),
.cost-table.city-summary-table th:nth-child(4),
.cost-table.city-summary-table td:nth-child(4),
.cost-table.city-summary-table th:nth-child(5),
.cost-table.city-summary-table td:nth-child(5),
.cost-table.city-summary-table th:nth-child(6),
.cost-table.city-summary-table td:nth-child(6) {
  width: 11%;
}
.cost-table.city-summary-table th:nth-child(7),
.cost-table.city-summary-table td:nth-child(7) {
  width: 20%;
  white-space: normal;
  word-wrap: break-word;
}
.cost-table.city-summary-table th:last-child,
.cost-table.city-summary-table td:last-child {
  width: 16%;
  font-weight: 400;
}

/* --- COST_TABLE_OTHER_OVERFLOW_FIX --- */
/* The live Cost Breakdown table has exactly 6 columns:
   City / Days / Hotel / Food / Transport / Other — there is no Total
   column (by design, per Ravi's decision to show spending patterns, not
   exact totals). The three rule blocks above this one were written across
   earlier iterations that assumed 7-8 columns including a Total column,
   so their ":last-child" / "nth-child(7)" rules don't correctly target
   the real last column. This block is appended last (wins the cascade)
   and explicitly re-targets the ACTUAL last column so long entries like
   "₹6,313 Shopping, ₹783 Dining" wrap instead of overflowing off-screen. */
table.cost-table.city-summary-table th:nth-child(1),
table.cost-table.city-summary-table td:nth-child(1) { width: 13%; }
table.cost-table.city-summary-table th:nth-child(2),
table.cost-table.city-summary-table td:nth-child(2) { width: 6%; }
table.cost-table.city-summary-table th:nth-child(3),
table.cost-table.city-summary-table td:nth-child(3),
table.cost-table.city-summary-table th:nth-child(4),
table.cost-table.city-summary-table td:nth-child(4),
table.cost-table.city-summary-table th:nth-child(5),
table.cost-table.city-summary-table td:nth-child(5) {
  width: 12%;
  white-space: nowrap;
  text-align: right;
}
table.cost-table.city-summary-table th:nth-child(6),
table.cost-table.city-summary-table td:nth-child(6),
table.cost-table.city-summary-table th:last-child,
table.cost-table.city-summary-table td:last-child {
  width: 45%;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
}

/* Mute section numbers -- subtle wayfinding cue, not visual competition
   with the heading text itself */
.route-section h2 .num,
.route-highlight h2 .num {
  opacity: 0.45;
  font-weight: 400;
  margin-right: 6px;
}

/* Indent story callouts -- subordinate aside under the place card, not
   full-width competing content */
.place-story {
  margin-left: 56px;
  margin-right: 12px;
  padding: 10px 16px;
  font-size: 13px;
}
.place-story-label {
  font-size: 10px;
}
.place-story-text {
  font-size: 13px;
}
@media (max-width: 720px) {
  .place-story {
    margin-left: 20px;
  }
}

/* Indent story callouts -- subordinate aside under the place card, not
   full-width competing content */
.place-story {
  margin-left: 56px;
  margin-right: 12px;
  padding: 10px 16px;
  font-size: 13px;
}
.place-story-label {
  font-size: 10px;
}
.place-story-text {
  font-size: 13px;
}
@media (max-width: 720px) {
  .place-story {
    margin-left: 20px;
  }
}

/* TEMPLATE_V1_ROUND4 */

.visa-log-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.visa-log-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--paper);
}
.visa-log-label {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--stamp);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.visa-log-item p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .visa-log-grid {
    grid-template-columns: 1fr;
  }
}

.route-section h2 .num,
.route-highlight h2 .num {
  opacity: 0.45;
  font-weight: 400;
  margin-right: 6px;
}

/* TEMPLATE_V1_PLACE_PAGE */

.place-quickfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 20px 0 32px;
  padding: 16px 20px;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.place-quickfacts-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 280px;
}
.place-quickfacts-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.place-quickfacts-value {
  font-size: 14px;
  line-height: 1.4;
}
.place-highlight {
  margin: 20px 0;
  padding-left: 16px;
  border-left: 3px solid var(--line);
}
.place-highlight h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.place-highlight p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .place-quickfacts {
    flex-direction: column;
    gap: 14px;
  }
}

/* TEMPLATE_V1_ROUND5 */

/* Quickfacts: 2-column grid (was flex-wrap with a 280px cap that
   caused awkward wrapping on longer values like "Pairs With"). */
.place-quickfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.place-quickfacts-item {
  max-width: none;
}
@media (max-width: 720px) {
  .place-quickfacts {
    grid-template-columns: 1fr;
  }
}

/* Story on the SUBPAGE (place-page.ejs body content) -- full width,
   well-positioned as a featured element, not indented like the
   main-page card version. Visually distinct but not overpowering:
   centered heading, generous but not oversized padding, a single
   accent rule instead of a heavy border box. */
.story-feature {
  margin: 32px 0;
  padding: 28px 32px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story-feature-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 14px;
  font-weight: 700;
}
.story-feature-text {
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--ink);
}
.story-feature-author {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Story on the MAIN COUNTRY PAGE (route-places.ejs card list) --
   keep the existing indent, but center-align content within it
   and add a subtle touch (soft shadow) so it feels a little more
   considered without competing visually with the place cards. */
.place-story {
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}


/* PLACE_STORY_STANDALONE_SECTION -- a distinct, full-weight treatment for a story/encounter
   used as its own section on a PLACE's own subpage (e.g. nukus.md,
   bukhara.md) -- as opposed to .place-story above, which is intentionally
   a small indented aside under a place card on the country ROUTE page's
   card list. This one is meant to read as a standalone chapter: generous
   space above and below, a centered eyebrow label, and a soft rule instead
   of a boxed callout, so it never looks like it's clinging to whichever
   section happens to precede or follow it. */
.place-story-standalone {
  margin: 48px 0;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.place-story-standalone .place-story-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stamp);
  margin-bottom: 16px;
}

.place-story-standalone .place-story-text {
  font-size: 17px;
  font-style: italic;
  line-height: 1.75;
  color: var(--ink);
  max-width: 640px;
  margin: 0 auto 16px;
}

.place-story-standalone .place-story-author {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 720px) {
  .place-story-standalone {
    margin: 32px 0;
    padding: 24px 0;
  }
  .place-story-standalone .place-story-text {
    font-size: 15.5px;
  }
}


/* === JOURNAL_FRAMEWORK_V1_2026_08_07: premium journal reading experience === */
.journal-progress { position: sticky; top: 0; left: 0; height: 3px; width: 100%; background: transparent; z-index: 50; }
.journal-progress span { display: block; height: 100%; width: 0%; background: var(--stamp); transition: width 0.1s linear; }
.journal-hero { border-bottom: 1px solid var(--line); padding: 40px 0 30px; margin-bottom: 8px; }
.journal-hero-inner { max-width: 760px; }
.journal-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stamp); margin-bottom: 14px; }
.journal-kicker .jdot { color: var(--line); }
.journal-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 44px; line-height: 1.1; color: var(--ink); margin: 0 0 16px; }
.journal-subtitle { font-family: 'Fraunces', serif; font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 20px; }
.journal-meta { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-soft); }
.journal-meta .jdot { color: var(--line); margin: 0 6px; }
.journal-shell { max-width: 720px; }
.journal-body { font-size: 19px; line-height: 1.75; color: var(--ink); }
.journal-body p { margin: 0 0 18px; }
.journal-body > p:first-of-type { font-size: 21px; line-height: 1.7; color: var(--ink); }
.journal-body hr { border: none; height: 1px; background: transparent; margin: 40px auto; text-align: center; position: relative; }
.journal-body hr::after { content: '\00A7'; color: var(--line); font-size: 18px; background: var(--paper); padding: 0 12px; }
.journal-body blockquote { margin: 34px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--stamp); font-family: 'Fraunces', serif; font-style: italic; font-size: 24px; line-height: 1.45; color: var(--ink); }
.journal-body blockquote p { margin: 0 0 8px; }
.journal-body h2 { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; color: var(--stamp); margin: 46px 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.journal-engage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 44px 0 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.jbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.jbtn:hover { border-color: var(--stamp); }
.jbtn .jicon { font-size: 15px; line-height: 1; }
.jbtn.is-liked { color: var(--stamp); border-color: var(--stamp); }
.jbtn-primary { background: var(--stamp); color: #fff; border-color: var(--stamp); }
.jbtn-primary:hover { opacity: 0.92; }
.jtoast { font-size: 13px; color: var(--ink-soft); opacity: 0; transition: opacity 0.3s; margin-left: 4px; }
.journal-comments { margin: 22px 0 60px; padding: 22px; background: var(--paper-dark); border: 1px solid var(--line); border-radius: 2px; }
.journal-comments h3 { font-family: 'Fraunces', serif; font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.journal-comments-note { font-size: 15px; color: var(--ink-soft); margin: 0; }
@media (max-width: 640px) {
  .journal-title { font-size: 32px; }
  .journal-subtitle { font-size: 18px; }
  .journal-body { font-size: 17px; }
  .journal-body > p:first-of-type { font-size: 18px; }
  .journal-body blockquote { font-size: 20px; }
}
/* === end JOURNAL_FRAMEWORK_V1_2026_08_07 === */


/* === JOURNAL_FRAMEWORK_V2_2026_08_07: journal alignment + typographic polish === */
/* Shared column so hero + body + engage all share one left edge */
.journal-col { max-width: 700px; }
.journal-body { padding: 0; margin: 0; font-size: 19px; line-height: 1.8; color: var(--ink); }
.journal-body p { margin: 0 0 22px; }

/* Lead paragraph + drop cap */
.journal-body > p:first-of-type { font-size: 21px; line-height: 1.7; }
.journal-body > p:first-of-type::first-letter {
  float: left;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: var(--stamp);
}

/* Quiet section marks from markdown --- */
.journal-body hr {
  border: none; height: 1px; background: transparent;
  margin: 40px auto; text-align: center; position: relative; overflow: visible;
}
.journal-body hr::after {
  content: '\2726';
  color: var(--line); font-size: 14px;
  background: var(--paper); padding: 0 14px;
}

/* Pull quotes */
.journal-body blockquote {
  margin: 36px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--stamp);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 25px; line-height: 1.45; color: var(--ink);
}
.journal-body blockquote p { margin: 0 0 8px; }

/* Chapter headings from markdown ## */
.journal-body h2 {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 13px; color: var(--stamp);
  margin: 52px 0 20px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.journal-body h2::before { content: '\2014  '; color: var(--line); }

/* Emphasis on the deliberate short one-line beats */
.journal-body p em { font-style: italic; color: var(--ink-soft); }

@media (max-width: 640px) {
  .journal-body { font-size: 17px; }
  .journal-body > p:first-of-type { font-size: 18px; }
  .journal-body > p:first-of-type::first-letter { font-size: 52px; }
  .journal-body blockquote { font-size: 21px; }
}
/* === end JOURNAL_FRAMEWORK_V2_2026_08_07 === */


/* === JOURNAL_V3_2026_08_08: journal sign-off === */
.journal-signoff { margin: 40px 0 8px; }
.journal-signoff-rule {
  display: block; width: 48px; height: 2px;
  background: var(--stamp); margin-bottom: 16px;
}
.journal-signoff-name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; color: var(--ink-soft); margin: 0;
}
/* === end JOURNAL_V3_2026_08_08 === */


/* === JOURNAL_NEXT_CARD_CSS_2026_08_08: next reflection card === */
.journal-next {
  display: block;
  margin: 40px 0 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-dark);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.journal-next:hover { border-color: var(--stamp); transform: translateY(-2px); }
.journal-next-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 8px;
}
.journal-next-title {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 6px;
}
.journal-next-ex {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* === end JOURNAL_NEXT_CARD_CSS_2026_08_08 === */

/* === JOURNAL_PHOTO_SLOTS_CSS_2026_08_08: journal inline photo figures === */
.journal-figure { margin: 30px 0 34px; }
.journal-figure .photo-gallery { margin: 0; }
.journal-figcaption {
  margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
}
/* === end JOURNAL_PHOTO_SLOTS_CSS_2026_08_08 === */

/* === JOURNAL_THEME_BADGE_CSS_2026_08_08: journal theme badge === */
.journal-theme {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  vertical-align: middle;
}
/* === end JOURNAL_THEME_BADGE_CSS_2026_08_08 === */

/* SECTION_FIGURE_CSS_2026_08_08 */
.section-figure{ margin: 22px 0 30px; }
.section-figure .photo-gallery{ margin:0; }


/* VISA_CHECK_CSS_2026_08_08 */
.visa-check-box{ margin:14px 0 26px; padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--stamp); background:var(--paper-dark); border-radius:2px; }
.visa-check-banner{ font-size:15px; color:var(--ink); margin-bottom:12px; }
.visa-check-banner .visa-flag{ margin-right:6px; }
.visa-check-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.visa-check-row label{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }
.visa-check-row select{ padding:8px 10px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:14px; border-radius:4px; }
.visa-check-btn{ padding:8px 14px; border:1px solid var(--stamp); border-radius:20px; background:var(--stamp); color:#fff; font-size:13px; text-decoration:none; transition:opacity .15s; }
.visa-check-btn:hover{ opacity:.9; }
.visa-check-hint{ margin-top:10px; font-size:12px; color:var(--ink-soft); }


/* VISA_CHIP_CSS_2026_08_08 */
.visa-result{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.visa-chip{ display:inline-block; padding:4px 12px; border-radius:20px; font-family:'IBM Plex Mono',monospace; font-size:13px; border:1px solid var(--line); }
.visa-chip.ok{ background:rgba(91,117,83,.14); color:#3f5a37; border-color:#5B7553; }
.visa-chip.warn{ background:rgba(168,121,31,.14); color:#7a5713; border-color:#A8791F; }
.visa-chip.bad{ background:rgba(156,59,46,.12); color:var(--stamp); border-color:var(--stamp); }
.visa-chip.neutral{ color:var(--ink-soft); }
.visa-verify{ font-size:12px; color:var(--stamp); text-decoration:underline; }


/* UX_LIGHTBOX_CSS_2026_08_08-cards: clickable city-card affordance */
.place-card-link { position: relative; }
.place-card-arrow {
  color: var(--stamp); font-weight: 700; margin-left: 8px;
  opacity: .55; transition: transform .15s, opacity .15s; display: inline-block;
}
.place-card:hover .place-card-arrow { opacity: 1; transform: translateX(4px); color: var(--paper); }
.place-card { transition: border-color .15s, transform .15s, box-shadow .15s; cursor: pointer; }
.place-card:hover { border-color: var(--stamp); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(32,43,50,.08); }

/* UX_STORY_STANDALONE_CSS_2026_08_08: subpage anecdote block */
.place-story-standalone { margin: 34px auto; max-width: 680px; padding: 22px 24px; background: var(--paper-dark); border: 1px solid var(--line); border-left: 3px solid var(--stamp); border-radius: 2px; }
.place-story-standalone .place-story-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stamp); margin-bottom: 10px; }
.place-story-standalone .place-story-text { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.place-story-standalone .place-story-author { font-size: 13px; color: var(--ink-soft); }

/* UX_B3_2026_08_09: ledger stays a scrollable table on mobile; single figures uncropped */
@media (max-width: 640px) {
  /* Opt the chronological ledger OUT of the stacked-card transform: keep it a
     real table and let .table-scroll handle horizontal scrolling. */
  table.ledger-table tr:has(td[data-label]),
  table.ledger-table tr:first-child:has(th) { display: table-row; }
  table.ledger-table td[data-label] { display: table-cell; width: auto; padding: 7px 9px; }
  table.ledger-table td[data-label]::before { content: none; }
  table.ledger-table th { display: table-cell; }
  table.ledger-table { min-width: 640px; }
}
/* Single-photo figures (About, or any one-image gallery): show the whole photo,
   not a cropped 4:3 tile. Applies when a gallery/figure holds exactly one tile. */
.section-figure .photo-gallery .photo-tile:only-child img,
.journal-figure .photo-gallery .photo-tile:only-child img,
.photo-gallery .photo-tile:only-child img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 70vh;
  width: 100%;
  height: auto;
  background: var(--paper-dark);
}
/* one-image gallery: don't force the multi-column grid; let it size to the photo */
.photo-gallery:has(.photo-tile:only-child) { grid-template-columns: 1fr; max-width: none; }
.photo-tile:only-child img { min-height: 0; animation: none; background: var(--paper-dark); }

/* MOBILE_FRAME_3x4_2026_08_11: lock hero + About photo to 3:4 on mobile
   (desktop ratios unchanged). Appended last so it wins by source order. */
@media (max-width: 640px) {
  .about-photo img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
  .hero-art.has-photo .hero-photo-frame img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
}

/* NAV_ACTIVE_STATE_2026_08_14: highlights whichever top-level section the
   visitor is currently in (Travel/My City/Projects/Writing/About),
   computed server-side in server.js as res.locals.activeNav. Previously
   there was zero "you are here" signal in the header at all -- first-time
   visitors had no way to tell which section they'd landed in without
   reading the breadcrumb (which only appears 2+ levels deep). */
.site-header nav a.active {
  color: var(--stamp);
  font-weight: 700;
  position: relative;
}
.site-header nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--stamp);
  border-radius: 1px;
}

/* SITEMAP_PAGE_CSS_2026_08_14: human-readable "everything on this site"
   overview page (routes/pages.js GET /sitemap, views/sitemap.ejs) --
   distinct from the machine-only /sitemap.xml. Reuses existing tokens
   (--ink, --ink-soft, --stamp, --line) rather than introducing new ones. */
.sitemap-body { padding: 8px 0 60px; }
.sitemap-section { margin: 0 0 44px; }
.sitemap-section:last-child { margin-bottom: 0; }
.sitemap-section h2 { margin: 0 0 4px; font-size: 24px; }
.sitemap-section h2 a { color: var(--ink); text-decoration: none; }
.sitemap-section h2 a:hover { color: var(--stamp); }
.sitemap-section-desc { margin: 0 0 16px; color: var(--ink-soft); font-size: 14.5px; }
.sitemap-subhead {
  margin: 20px 0 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sitemap-subhead a { color: var(--ink); text-decoration: none; }
.sitemap-subhead a:hover { color: var(--stamp); }
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 16px;
}
.sitemap-list li { margin: 0; }
.sitemap-list a {
  color: var(--stamp);
  text-decoration: none;
  font-size: 14.5px;
  display: inline-block;
  padding: 3px 0;
}
.sitemap-list a:hover { text-decoration: underline; }
.sitemap-subgroup { margin: 0 0 14px; padding-left: 2px; }
.sitemap-subgroup-label { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.sitemap-subgroup-label a { color: var(--ink); text-decoration: none; }
.sitemap-subgroup-label a:hover { color: var(--stamp); }
.sitemap-list--inline { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-left: 8px; }
.sitemap-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}

@media (max-width: 640px) {
  .sitemap-list, .sitemap-list--inline { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* WHATS_NEW_BANNER_2026_08_14: rotating "recent updates" strip at the very
   top of the homepage only (see the guarded block in header.ejs). */
#whats-new-banner {
  background: var(--stamp);
  color: #fff;
}
.whats-new-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 24px;
}
#whats-new-track {
  position: relative;
  flex: 1;
  height: 20px;
  overflow: hidden;
}
.whats-new-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.whats-new-item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.whats-new-item:hover .whats-new-title { text-decoration: underline; }
.whats-new-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.whats-new-title {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#whats-new-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
#whats-new-close:hover { color: #fff; }

@media (max-width: 640px) {
  .whats-new-inner { padding: 8px 16px; }
  .whats-new-label { display: none; }
}

/* LIFE_SECTION_CSS_2026_08_14: .life-card reuses .journal-card's layout
   wholesale (same list-of-entries pattern) with just a distinct left
   accent so the two sections read as visually related but not identical
   when they appear near each other (e.g. cross-links, search results). */
.life-card { border-left: 3px solid var(--green, #34d399); padding-left: 17px; }

/* VIDEO_EMBED_2026_08_14: responsive 16:9 wrapper for YouTube embeds
   inside Life (and any other) markdown content -- paste an <iframe> from
   YouTube's own "Share -> Embed" straight in, wrapped in this div, and it
   scales correctly at any width without a fixed pixel height. Framed to
   match the site's photo-tile treatment (paper border) rather than a bare
   iframe floating in the article. */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 28px 0;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* GALLERY_V2_3_EDITORIAL_GRID_2026_08_17 START */
/*
  Gallery V2.3: editorial grid for iamravi.com.

  This intentionally replaces the masonry feel with a calmer, symmetrical
  article layout:
  - 1 image: full article width, height capped.
  - 2 images: two equal columns.
  - 3 images: three equal columns.
  - 4 images: balanced 2x2.
  - 5+ images: clean 3-column grid.
*/

.photo-gallery {
  width: 100%;
  max-width: none !important;
  margin: clamp(22px, 4vw, 38px) 0 clamp(30px, 5vw, 52px);
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: clamp(12px, 2vw, 20px);
  align-items: start !important;
}

.photo-gallery .photo-tile {
  grid-column: span 4;
  grid-row: auto !important;
  display: block;
  margin: 0 !important;
  padding: 6px;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--paper) 94%, white 6%);
  box-shadow: 0 1px 0 rgba(32, 43, 50, 0.08);
  break-inside: avoid;
}

.photo-gallery .photo-tile picture {
  display: block;
  width: 100%;
}

.photo-gallery .photo-tile img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  max-height: none;
  margin: 0;
  background: var(--paper);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* One image: use the article width, but cap height so portraits do not become monsters. */
.photo-gallery .photo-tile:only-child {
  grid-column: 1 / -1 !important;
  max-width: none !important;
}

.photo-gallery .photo-tile:only-child img {
  width: 100%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  max-height: min(72vh, 760px) !important;
}

/* Two images: full-width diptych. */
.photo-gallery .photo-tile:first-child:nth-last-child(2),
.photo-gallery .photo-tile:first-child:nth-last-child(2) ~ .photo-tile {
  grid-column: span 6 !important;
}

/* Three images: full-width triptych. Best for three portrait images. */
.photo-gallery .photo-tile:first-child:nth-last-child(3),
.photo-gallery .photo-tile:first-child:nth-last-child(3) ~ .photo-tile {
  grid-column: span 4 !important;
}

/* Four images: balanced 2x2. */
.photo-gallery .photo-tile:first-child:nth-last-child(4),
.photo-gallery .photo-tile:first-child:nth-last-child(4) ~ .photo-tile {
  grid-column: span 6 !important;
}

/* Five or more: clean 3-column editorial grid. */
.photo-gallery .photo-tile:first-child:nth-last-child(n+5),
.photo-gallery .photo-tile:first-child:nth-last-child(n+5) ~ .photo-tile {
  grid-column: span 4 !important;
}

/* Portrait tiles should look even in multi-photo grids. Full image remains available in lightbox. */
.photo-gallery .photo-tile.is-portrait:not(:only-child) img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}

/* Landscape tiles stay strong and wide. */
.photo-gallery .photo-tile.is-landscape:not(:only-child) img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* Empty captions should not create blank beige tails. */
.photo-gallery figcaption:empty,
.photo-gallery .journal-figcaption:empty {
  display: none !important;
}

@media (max-width: 760px) {
  .photo-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .photo-gallery .photo-tile,
  .photo-gallery .photo-tile:first-child:nth-last-child(2),
  .photo-gallery .photo-tile:first-child:nth-last-child(2) ~ .photo-tile,
  .photo-gallery .photo-tile:first-child:nth-last-child(3),
  .photo-gallery .photo-tile:first-child:nth-last-child(3) ~ .photo-tile,
  .photo-gallery .photo-tile:first-child:nth-last-child(4),
  .photo-gallery .photo-tile:first-child:nth-last-child(4) ~ .photo-tile,
  .photo-gallery .photo-tile:first-child:nth-last-child(n+5),
  .photo-gallery .photo-tile:first-child:nth-last-child(n+5) ~ .photo-tile {
    grid-column: 1 / -1 !important;
  }

  .photo-gallery .photo-tile img,
  .photo-gallery .photo-tile.is-portrait img,
  .photo-gallery .photo-tile.is-landscape img {
    max-height: min(70vh, 620px) !important;
  }
}
/* GALLERY_V2_3_EDITORIAL_GRID_2026_08_17 END */

/* REVENUE_FOUNDATION_V1_1_CSS_2026_08_17 START */
.revenue-page {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) 20px 80px;
}

.revenue-hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(28px, 5vw, 48px);
  margin-bottom: clamp(28px, 5vw, 48px);
}

.revenue-hero h1 {
  font-family: Fraunces, serif;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 8px 0 18px;
}

.revenue-page .eyebrow {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--stamp);
  font-size: .78rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.revenue-page .lede {
  max-width: 780px;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.75;
}

.revenue-panel {
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 5vw, 48px) 0;
}

.revenue-panel h2,
.revenue-offer-card h2 {
  font-family: Fraunces, serif;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0 0 14px;
}

.revenue-panel h3,
.revenue-how-block h3 {
  font-family: Fraunces, serif;
  color: var(--ink);
  margin: 0 0 12px;
}

.revenue-panel p,
.revenue-offer-card p {
  color: var(--ink-soft);
  line-height: 1.75;
}

.revenue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 36px);
  margin-top: 24px;
}

.revenue-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.revenue-grid > div,
.revenue-offer-card {
  background: color-mix(in srgb, var(--paper-dark) 82%, white 18%);
  border: 1px solid var(--line);
  padding: clamp(18px, 3vw, 28px);
}

.revenue-page ul,
.revenue-page ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
  line-height: 1.75;
}

.revenue-offer-card-clean {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(220px, .85fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  margin: clamp(32px, 5vw, 54px) 0;
}

.revenue-price-block h2 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
}

.revenue-how-block {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0 clamp(16px, 3vw, 26px);
}

.revenue-action-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.revenue-button,
.revenue-link-list a,
.uz-travel-review-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.revenue-button:hover,
.revenue-link-list a:hover,
.uz-travel-review-cta a:hover {
  filter: brightness(.96);
}

.revenue-small-note {
  font-size: .9rem;
  margin: 0;
}

.revenue-related {
  padding-top: clamp(20px, 4vw, 36px);
}

.revenue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.uz-travel-review-cta {
  margin: clamp(32px, 5vw, 52px) 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 84%, white 16%);
}

.uz-travel-review-cta h2 {
  font-family: Fraunces, serif;
  color: var(--ink);
  margin: 0 0 10px;
}

.uz-travel-review-cta p {
  color: var(--ink-soft);
  max-width: 720px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .revenue-grid,
  .revenue-grid-three,
  .revenue-offer-card-clean {
    grid-template-columns: 1fr;
  }

  .revenue-how-block {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
}

@media (max-width: 760px) {
  .revenue-button {
    width: 100%;
  }

  .revenue-link-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* REVENUE_FOUNDATION_V1_1_CSS_2026_08_17 END */

/* GUIDANCE_RESTRUCTURE_V2_CSS_2026_08_17 START */
.revenue-hero {
  padding-bottom: clamp(14px, 2vw, 22px);
  margin-bottom: 0;
  border-bottom: 0 !important;
}

.revenue-why-me {
  padding-top: clamp(16px, 2vw, 24px);
}

.revenue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.revenue-link-list a {
  text-decoration: none;
}

/* AUDIT_FIX_2026_08_26: removed a stray duplicate .footer-tagline rule that
   was added here (inside GUIDANCE_RESTRUCTURE_V2_CSS_2026_08_17) for what
   looks like an unrelated guidance-page link, but collided with the one real
   .footer-tagline element (the site footer's "Building things, wandering
   the rest." line), silently making it bold + inline-block. The correct
   .footer-tagline rule already exists earlier in this file. */
/* GUIDANCE_RESTRUCTURE_V2_CSS_2026_08_17 END */

/* REVENUE_GUIDANCE_POLISH_2026_08_17 START */
.revenue-related {
  padding-bottom: clamp(26px, 4vw, 44px);
}

.revenue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.revenue-link-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.revenue-link-list a:hover {
  filter: brightness(.96);
}

@media (max-width: 760px) {
  .revenue-link-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* REVENUE_GUIDANCE_POLISH_2026_08_17 END */

/* TRAVEL_REVIEW_RELATED_LINKS_FIX_2026_08_17 START */
.revenue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.revenue-link-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.revenue-link-list a:hover {
  filter: brightness(.96);
}

@media (max-width: 760px) {
  .revenue-link-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* TRAVEL_REVIEW_RELATED_LINKS_FIX_2026_08_17 END */

/* TRAVEL_REVIEW_RELATED_LINKS_FINAL_2026_08_17 START */
.revenue-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.revenue-link-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.revenue-link-list a:hover {
  filter: brightness(.96);
}

@media (max-width: 760px) {
  .revenue-link-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* TRAVEL_REVIEW_RELATED_LINKS_FINAL_2026_08_17 END */

/* RELATED_CONTENT_SYSTEM_V1_2026_08_17 START */
.related-content-block {
  margin: clamp(28px, 5vw, 48px) 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 84%, white 16%);
}

.related-content-block h2 {
  font-family: Fraunces, serif;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0 0 16px;
}

.related-content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-content-card {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.related-content-card:hover {
  filter: brightness(.96);
}

@media (max-width: 760px) {
  .related-content-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .related-content-card {
    justify-content: center;
  }
}
/* RELATED_CONTENT_SYSTEM_V1_2026_08_17 END */

/* INDIA_V2_PUBLIC_ROUTES_BATCH1_2026_08_18 START */
.india-v2-page { background: var(--paper); }

.india-v2-hero {
  padding: clamp(36px, 7vw, 72px) 0 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 82%, white 18%);
}

.india-v2-hero h1,
.india-v2-detail h1 {
  font-family: Fraunces, serif;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: .95;
  margin: 8px 0 14px;
}

.india-v2-hero p {
  max-width: 820px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.india-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.india-v2-stats div {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 16px;
}

.india-v2-stats strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 2rem;
}

.india-v2-stats span {
  color: var(--ink-soft);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-tabs,
.india-v2-backlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.india-v2-tabs a,
.india-v2-backlinks a {
  border: 1px solid var(--stamp);
  color: var(--stamp);
  text-decoration: none;
  padding: 9px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.india-v2-tabs a.active,
.india-v2-tabs a:hover,
.india-v2-backlinks a:hover {
  background: var(--stamp);
  color: var(--paper);
}

.india-v2-list-section {
  padding-top: 34px;
  padding-bottom: 64px;
}

.india-v2-list-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.india-v2-list-header h2 {
  margin: 0;
  font-family: Fraunces, serif;
}

.india-v2-list-header p {
  margin: 0;
  max-width: 620px;
  color: var(--ink-soft);
}

.india-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.india-v2-card {
  display: block;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}

.india-v2-card:hover {
  transform: translateY(-2px);
  border-color: var(--stamp);
}

.india-v2-card-top,
.india-v2-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.india-v2-kind,
.india-v2-detail-meta span:not(.india-v2-badge) {
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.india-v2-card h3 {
  font-family: Fraunces, serif;
  font-size: 1.55rem;
  margin: 24px 0 8px;
}

.india-v2-card p {
  color: var(--ink-soft);
  margin: 0;
}

.india-v2-card-note {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: .9rem;
}

.india-v2-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-badge.visited {
  background: #dff3e4;
  color: #166534;
}

.india-v2-badge.not-visited {
  background: #dbeafe;
  color: #1d4ed8;
}

.india-v2-card.is-visited {
  border-top: 4px solid #166534;
}

.india-v2-card.is-not-visited {
  border-top: 4px solid #1d4ed8;
}

.india-v2-detail {
  padding-top: 34px;
  padding-bottom: 64px;
}

.india-v2-detail-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 28px;
}

.india-v2-body {
  max-width: 880px;
}

.india-v2-backlinks {
  margin-top: 36px;
}

@media (max-width: 900px) {
  .india-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .india-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .india-v2-list-header {
    display: block;
  }
}

@media (max-width: 640px) {
  .india-v2-grid {
    grid-template-columns: 1fr;
  }

  .india-v2-stats {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_PUBLIC_ROUTES_BATCH1_2026_08_18 END */

/* INDIA_V2_HUB_INTEGRATION_BATCH2_2026_08_18 START */
.india-v2-hub-block {
  margin: clamp(34px, 6vw, 72px) auto;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 84%, white 16%);
}

.india-v2-hub-copy {
  max-width: 920px;
}

.india-v2-hub-copy h2 {
  font-family: Fraunces, serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
  margin: 8px 0 16px;
}

.india-v2-hub-copy p {
  color: var(--ink-soft);
  font-size: 1.03rem;
  max-width: 820px;
}

.india-v2-hub-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin: 28px 0 18px;
}

.india-v2-hub-stats div {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.india-v2-hub-stats strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 2rem;
  line-height: 1;
}

.india-v2-hub-stats span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-hub-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}

.india-v2-hub-breakdown a {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.india-v2-hub-breakdown a:hover {
  border-color: var(--stamp);
}

.india-v2-hub-breakdown strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.7rem;
}

.india-v2-hub-breakdown span {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
}

.india-v2-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.india-v2-hub-actions a {
  border: 1px solid var(--stamp);
  color: var(--stamp);
  text-decoration: none;
  padding: 10px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.india-v2-hub-actions a:hover,
.india-v2-hub-actions .india-v2-primary-link {
  background: var(--stamp);
  color: var(--paper);
}

.india-v2-hub-actions .india-v2-primary-link:hover {
  filter: brightness(.96);
}

@media (max-width: 900px) {
  .india-v2-hub-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .india-v2-hub-breakdown {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .india-v2-hub-stats {
    grid-template-columns: 1fr;
  }

  .india-v2-hub-actions a {
    width: 100%;
    text-align: center;
  }
}
/* INDIA_V2_HUB_INTEGRATION_BATCH2_2026_08_18 END */

/* INDIA_V2_DEEMPHASIZE_STATE_COVERAGE_BATCH21_2026_08_18 START */
.india-v2-legacy-note {
  max-width: 920px;
  margin: clamp(32px, 6vw, 64px) auto 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 88%, white 12%);
}

.india-v2-legacy-note h2 {
  font-family: Fraunces, serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  margin: 8px 0 12px;
}

.india-v2-legacy-note p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}
/* INDIA_V2_DEEMPHASIZE_STATE_COVERAGE_BATCH21_2026_08_18 END */

/* INDIA_V2_DESTINATION_FILTERS_BATCH3_2026_08_18 START */
.india-v2-filter-panel {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.india-v2-filter-search {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.india-v2-filter-search label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.india-v2-filter-search input {
  width: 100%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, white 8%);
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
}

.india-v2-filter-search input:focus {
  outline: 2px solid color-mix(in srgb, var(--stamp) 42%, transparent);
  border-color: var(--stamp);
}

.india-v2-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.india-v2-filter-buttons button {
  border: 1px solid var(--stamp);
  background: transparent;
  color: var(--stamp);
  cursor: pointer;
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.india-v2-filter-buttons button.active,
.india-v2-filter-buttons button:hover {
  background: var(--stamp);
  color: var(--paper);
}

.india-v2-filter-count {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: .92rem;
}

.india-v2-filter-count strong {
  color: var(--ink);
}

.india-v2-no-results {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper-dark) 84%, white 16%);
}

@media (max-width: 640px) {
  .india-v2-filter-buttons button {
    flex: 1 1 calc(50% - 8px);
  }
}
/* INDIA_V2_DESTINATION_FILTERS_BATCH3_2026_08_18 END */

/* INDIA_V2_RELATED_DESTINATIONS_BATCH5A_2026_08_18 START */
.india-v2-related-destinations {
  margin: clamp(34px, 6vw, 64px) 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.india-v2-related-header {
  max-width: 820px;
  margin-bottom: 22px;
}

.india-v2-related-header h2 {
  font-family: Fraunces, serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
  margin: 8px 0 12px;
}

.india-v2-related-header p {
  color: var(--ink-soft);
  margin: 0;
}

.india-v2-related-group {
  margin-top: 26px;
}

.india-v2-related-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 12px;
}

.india-v2-related-group-heading h3 {
  font-family: Fraunces, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0;
}

.india-v2-related-group-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.india-v2-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.india-v2-related-card {
  display: block;
  min-height: 165px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}

.india-v2-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--stamp);
}

.india-v2-related-card.is-visited {
  border-top: 4px solid #166534;
}

.india-v2-related-card.is-not-visited {
  border-top: 4px solid #1d4ed8;
}

.india-v2-related-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.india-v2-related-card h4 {
  font-family: Fraunces, serif;
  font-size: 1.32rem;
  line-height: 1.05;
  margin: 0 0 8px;
}

.india-v2-related-card p {
  margin: 0;
  color: var(--ink-soft);
}

.india-v2-related-type {
  display: block;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: .86rem;
}

@media (max-width: 900px) {
  .india-v2-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .india-v2-related-group-heading {
    display: block;
  }

  .india-v2-related-group-heading p {
    margin-top: 6px;
  }
}

@media (max-width: 640px) {
  .india-v2-related-grid {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_RELATED_DESTINATIONS_BATCH5A_2026_08_18 END */

/* INDIA_V2_STATE_ARCHIVE_PAGES_BATCH5B_2026_08_18 START */
.india-v2-state-archive-section {
  padding-top: 34px;
  padding-bottom: 64px;
}

.india-v2-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.india-v2-state-card {
  display: block;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--stamp);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}

.india-v2-state-card:hover {
  transform: translateY(-2px);
  border-color: var(--stamp);
}

.india-v2-state-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-state-card h3 {
  font-family: Fraunces, serif;
  font-size: 1.75rem;
  line-height: 1;
  margin: 24px 0 16px;
}

.india-v2-state-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.india-v2-state-card-stats span {
  color: var(--ink-soft);
  font-size: .9rem;
}

.india-v2-state-card-stats strong {
  color: var(--ink);
}

.india-v2-state-card p {
  margin: 0;
  color: var(--ink-soft);
}

.india-v2-meta-link {
  color: var(--stamp);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-meta-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .india-v2-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .india-v2-state-grid {
    grid-template-columns: 1fr;
  }

  .india-v2-state-card-stats {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_STATE_ARCHIVE_PAGES_BATCH5B_2026_08_18 END */

/* INDIA_V2_REGION_ARCHIVE_PAGES_BATCH5C_2026_08_18 START */
.india-v2-region-archive-section {
  padding-top: 34px;
  padding-bottom: 64px;
}

.india-v2-region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.india-v2-region-card {
  display: block;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--stamp);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}

.india-v2-region-card:hover {
  transform: translateY(-2px);
  border-color: var(--stamp);
}

.india-v2-region-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-region-card h3 {
  font-family: Fraunces, serif;
  font-size: 1.75rem;
  line-height: 1;
  margin: 24px 0 16px;
}

.india-v2-region-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.india-v2-region-card-stats span {
  color: var(--ink-soft);
  font-size: .9rem;
}

.india-v2-region-card-stats strong {
  color: var(--ink);
}

.india-v2-region-card p {
  margin: 0;
  color: var(--ink-soft);
}

.india-v2-region-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.india-v2-region-state-list a {
  border: 1px solid var(--line);
  color: var(--stamp);
  background: var(--paper);
  text-decoration: none;
  padding: 8px 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.india-v2-region-state-list a:hover {
  border-color: var(--stamp);
}

@media (max-width: 900px) {
  .india-v2-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .india-v2-region-grid {
    grid-template-columns: 1fr;
  }

  .india-v2-region-card-stats {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_REGION_ARCHIVE_PAGES_BATCH5C_2026_08_18 END */

/* INDIA_V2_MAP_FOUNDATION_BATCH6_2026_08_18 START */
.india-v2-map-hero {
  padding: clamp(36px, 7vw, 72px) 0 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 82%, white 18%);
}

.india-v2-map-hero h1 {
  font-family: Fraunces, serif;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: .95;
  margin: 8px 0 14px;
}

.india-v2-map-hero p {
  max-width: 860px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.india-v2-map-shell {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  padding-top: 34px;
  padding-bottom: 64px;
}

.india-v2-map-sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
}

.india-v2-map-panel {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 16px;
}

.india-v2-map-panel h2 {
  margin: 0 0 14px;
  font-family: Fraunces, serif;
  font-size: 1.55rem;
}

.india-v2-map-panel label {
  display: block;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.india-v2-map-panel input {
  width: 100%;
  border: 1px solid var(--line);
  padding: 11px 12px;
  background: color-mix(in srgb, var(--paper) 92%, white 8%);
  color: var(--ink);
  font: inherit;
}

.india-v2-map-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.india-v2-map-filter-group button {
  border: 1px solid var(--stamp);
  background: transparent;
  color: var(--stamp);
  cursor: pointer;
  padding: 7px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.india-v2-map-filter-group button.active,
.india-v2-map-filter-group button:hover {
  background: var(--stamp);
  color: var(--paper);
}

.india-v2-map-count {
  margin: 14px 0 0;
  color: var(--ink-soft);
}

.india-v2-map-region-links {
  display: grid;
  gap: 8px;
}

.india-v2-map-region-links a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.india-v2-map-region-links a:hover {
  border-color: var(--stamp);
}

.india-v2-map-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.india-v2-map-region {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--stamp);
  background: color-mix(in srgb, var(--paper-dark) 84%, white 16%);
  transition: opacity .16s ease, transform .16s ease;
}

.india-v2-map-region.is-dimmed {
  opacity: .38;
}

.india-v2-map-region-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-family: Fraunces, serif;
  font-size: 1.35rem;
}

.india-v2-map-region-meta {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: .92rem;
}

.india-v2-map-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.india-v2-map-mini-card {
  display: block;
  min-height: 150px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.india-v2-map-mini-card.is-visited { border-top: 4px solid #166534; }
.india-v2-map-mini-card.is-not-visited { border-top: 4px solid #1d4ed8; }

.india-v2-map-mini-card div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.india-v2-map-mini-card h3 {
  font-family: Fraunces, serif;
  font-size: 1.2rem;
  line-height: 1.05;
  margin: 18px 0 8px;
}

.india-v2-map-mini-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}

@media (max-width: 1000px) {
  .india-v2-map-shell {
    grid-template-columns: 1fr;
  }

  .india-v2-map-board,
  .india-v2-map-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .india-v2-map-board,
  .india-v2-map-mini-grid {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_MAP_FOUNDATION_BATCH6_2026_08_18 END */

/* INDIA_V2_GEO_METADATA_FOUNDATION_BATCH7_2026_08_18 START */
.india-v2-map-coordinate-note,
.india-v2-map-readiness {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 86%, white 14%);
}

.india-v2-map-coordinate-note h2 {
  font-family: Fraunces, serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  margin: 8px 0 10px;
}

.india-v2-map-coordinate-note p,
.india-v2-map-readiness p {
  margin: 0;
  max-width: 780px;
  color: var(--ink-soft);
}
/* INDIA_V2_GEO_METADATA_FOUNDATION_BATCH7_2026_08_18 END */

/* INDIA_V2_MAP_COVERAGE_DASHBOARD_BATCH9_2026_08_18 START */
.india-v2-map-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  margin: 18px 0 26px;
}

.india-v2-map-coverage div {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 16px;
}

.india-v2-map-coverage strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.85rem;
  line-height: 1;
}

.india-v2-map-coverage span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .india-v2-map-coverage {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_MAP_COVERAGE_DASHBOARD_BATCH9_2026_08_18 END */

/* INDIA_V2_VERIFIED_MAP_PINS_BATCH12_2026_08_19 START */
.india-v2-verified-map-pins {
  margin: 0 0 32px;
  padding: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-dark) 86%, white 14%);
}

.india-v2-verified-map-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.india-v2-verified-map-header h2 {
  font-family: Fraunces, serif;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
  margin: 8px 0 10px;
}

.india-v2-verified-map-header p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
}

.india-v2-verified-map-number {
  min-width: 128px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 14px;
  text-align: center;
}

.india-v2-verified-map-number strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 2.1rem;
  line-height: 1;
}

.india-v2-verified-map-number span {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.india-v2-pin-map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 34% 18%, color-mix(in srgb, var(--stamp) 12%, transparent), transparent 22%),
    radial-gradient(circle at 72% 44%, color-mix(in srgb, var(--stamp) 10%, transparent), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--paper) 94%, white 6%), color-mix(in srgb, var(--paper-dark) 84%, white 16%));
}

.india-v2-pin-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 62%, transparent) 1px, transparent 1px);
  background-size: 20% 20%;
  opacity: .45;
}

.india-v2-pin-map-label {
  position: absolute;
  z-index: 1;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.india-v2-pin-map-label.north { top: 10px; left: 50%; transform: translateX(-50%); }
.india-v2-pin-map-label.south { bottom: 10px; left: 50%; transform: translateX(-50%); }
.india-v2-pin-map-label.west { left: 10px; top: 50%; transform: translateY(-50%); }
.india-v2-pin-map-label.east { right: 10px; top: 50%; transform: translateY(-50%); }

.india-v2-map-pin {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent), 0 8px 18px rgba(0,0,0,.18);
  transform: translate(-50%, -50%);
  text-decoration: none;
}

.india-v2-map-pin.is-visited { background: #166534; }
.india-v2-map-pin.is-not-visited { background: #1d4ed8; }

.india-v2-map-pin span {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  min-width: max-content;
  max-width: 190px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: .78rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.india-v2-map-pin:hover span,
.india-v2-map-pin:focus span {
  opacity: 1;
}

.india-v2-verified-pin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.india-v2-verified-pin-list a {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  padding: 12px;
}

.india-v2-verified-pin-list a:hover {
  border-color: var(--stamp);
}

.india-v2-verified-pin-list strong {
  font-family: Fraunces, serif;
  font-size: 1.15rem;
}

.india-v2-verified-pin-list a > span:last-child {
  color: var(--ink-soft);
  font-size: .9rem;
}

@media (max-width: 760px) {
  .india-v2-verified-map-header {
    display: block;
  }

  .india-v2-verified-map-number {
    margin-top: 14px;
    text-align: left;
  }

  .india-v2-pin-map {
    min-height: 360px;
  }

  .india-v2-verified-pin-list {
    grid-template-columns: 1fr;
  }
}
/* INDIA_V2_VERIFIED_MAP_PINS_BATCH12_2026_08_19 END */

/* INDIA_V2_MAP_PIN_FILTER_SYNC_BATCH13_2026_08_19 START */
.india-v2-map-pin[hidden],
.india-v2-verified-pin-list a[hidden] {
  display: none !important;
}

.india-v2-map-pin {
  transition: opacity .16s ease, transform .16s ease;
}

.india-v2-map-pin:hover,
.india-v2-map-pin:focus {
  transform: translate(-50%, -50%) scale(1.16);
}
/* INDIA_V2_MAP_PIN_FILTER_SYNC_BATCH13_2026_08_19 END */

/* INDIA_V2_COORDINATE_QA_DASHBOARD_BATCH14_2026_08_19 */
.coordinate-audit-hero .lede { max-width: 760px; }
.coordinate-audit-wrap { max-width: 1180px; margin: 0 auto 56px; padding: 0 20px; }
.coordinate-audit-grid { display: grid; gap: 16px; margin: 20px 0; }
.coordinate-audit-grid--summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coordinate-audit-grid--issues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coordinate-audit-card { border: 1px solid var(--border, #ddd3c5); background: var(--paper, #fffaf0); border-radius: 18px; padding: 18px; box-shadow: 0 10px 24px rgba(49, 30, 21, 0.06); }
.coordinate-audit-card span { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #7a6b5f); margin-bottom: 8px; }
.coordinate-audit-card strong { display: block; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; color: var(--ink, #2f241d); }
.coordinate-audit-card--good strong { color: #2f7d4f; }
.coordinate-audit-card--warn strong { color: #a45c22; }
.coordinate-audit-meta { color: var(--muted, #7a6b5f); font-size: 0.92rem; }
.coordinate-audit-section { margin-top: 32px; padding-top: 12px; }
.coordinate-audit-section h2 { margin-bottom: 12px; }
.coordinate-audit-section h3 { margin-top: 24px; }
.coordinate-audit-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.coordinate-audit-table th, .coordinate-audit-table td { border-bottom: 1px solid rgba(90, 70, 52, 0.16); padding: 10px 12px; text-align: left; vertical-align: top; }
.coordinate-audit-table th { background: rgba(120, 70, 35, 0.08); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.coordinate-audit-table code { font-size: 0.84rem; }
.coordinate-audit-table-scroll-large { max-height: 520px; overflow: auto; border: 1px solid rgba(90, 70, 52, 0.16); border-radius: 14px; }
.coordinate-audit-problem { border: 1px solid rgba(160, 70, 40, 0.28); background: rgba(160, 70, 40, 0.06); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.coordinate-audit-problem ul { margin-bottom: 0; }
.coordinate-audit-ok { color: #2f7d4f; font-weight: 700; }
.coordinate-audit-json-link { margin-top: 28px; }
@media (max-width: 900px) {
  .coordinate-audit-grid--summary, .coordinate-audit-grid--issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .coordinate-audit-grid--summary, .coordinate-audit-grid--issues { grid-template-columns: 1fr; }
  .coordinate-audit-wrap { padding: 0 14px; }
}


/* INDIA_SPRINT8K_MAP_ORDER_2026_08_19 */
.india-master-container { max-width: 840px; }
.india-master-intro { max-width: 820px; }
.india-master-map-card { width: 100%; margin: 30px auto 28px; padding: 0; background: transparent; border: none; }
.india-master-map-shell { position: relative; width: 100%; margin: 0 auto; padding: 0; border: none; background: transparent; overflow: hidden; }
.india-master-map-shell svg { display: block; width: 100%; height: auto; max-height: 820px; }
.india-master-map-shell svg path.india-master-map-covered { fill: rgba(156,59,46,.34) !important; stroke: rgba(156,59,46,.72); }
.india-master-map-pins { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.india-master-map-pins a.india-master-map-pin { position: absolute; display: block; width: 12px; height: 12px; border-radius: 999px; transform: translate(-50%,-50%); border: 2px solid var(--paper); box-shadow: 0 2px 8px rgba(32,43,50,.36); pointer-events: auto; z-index: 6; text-decoration: none!important; font-size: 0!important; line-height: 0!important; color: transparent!important; }
.india-master-map-pins a.india-master-map-pin.is-notes { background: var(--stamp); }
.india-master-map-pins a.india-master-map-pin.is-inventory { background: var(--sage); opacity: .88; }
.india-master-map-pins a.india-master-map-pin.is-city { width: 13px; height: 13px; }
.india-master-map-pins a.india-master-map-pin.is-village { width: 9px; height: 9px; }
.india-master-map-pins a.india-master-map-pin.is-monument { width: 11px; height: 11px; border-radius: 3px; }
.india-master-map-pins a.india-master-map-pin span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: none; min-width: max-content; max-width: 240px; padding: 4px 8px; border-radius: 5px; background: var(--ink); color: var(--paper)!important; font-size: 11px!important; line-height: 1.25!important; white-space: nowrap; }
.india-master-map-pins a.india-master-map-pin:hover span, .india-master-map-pins a.india-master-map-pin:focus span { display: block; }
.india-master-map-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px auto 8px; }
.india-master-map-controls label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.24); font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); cursor: pointer; }
.india-master-map-controls input { accent-color: var(--stamp); }
.india-master-map-layer-status { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--stamp); text-align: center; margin: 8px auto 0; }
.india-master-map-secondary-link { text-align: center; margin: 8px auto 0; }
.india-master-stats { margin-top: 28px; }
.india-master-summary-band { margin: 30px 0 0; padding: 20px; border: 1px solid var(--line); background: transparent; }
.india-master-region-grid, .india-master-state-grid, .india-map-state-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 12px; }
.india-master-summary-card, .india-map-state-summary-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-decoration: none; }
.india-master-summary-card strong, .india-map-state-summary-card strong { font-family: 'Fraunces', serif; font-size: 19px; }
.india-master-summary-card span, .india-master-summary-card small, .india-map-state-summary-card span, .india-map-state-summary-card small { color: var(--ink-soft); }
.india-master-explore { margin-top: 30px; }
.india-search-results-section[hidden], [data-destination-card][hidden] { display: none!important; }
.india-v2-card .india-v2-card-top { justify-content: flex-start; }
.india-detailed-map-container { max-width: 840px; }
.india-detailed-map-main { max-width: 1120px; }
.india-detailed-pin-map { width: 100%; min-height: 620px; margin: 0 auto 28px; }
.india-map-explore-block, .india-map-region-block, .india-v2-map-state-list { max-width: 1120px; margin-top: 28px; }
.india-map-explore-block .india-v2-map-panel { max-width: 100%; }
.india-map-region-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; }
.india-v2-verified-pin-list, .india-v2-map-mini-grid, .india-v2-map-destination-list, .india-v2-map-count, .india-v2-map-filter-group[aria-label='Filter by coordinate status'] { display: none!important; }
@media(max-width:800px){ .india-master-container, .india-detailed-map-container{max-width:840px;} .india-master-map-card{width:100%;} .india-master-map-shell{width:100%;} .india-master-map-pins a.india-master-map-pin span{display:none!important;} .india-detailed-pin-map{min-height:460px;} }


/* INDIA_SPRINT8L_FINAL_TUNE_2026_08_19 */
/* /india: keep the master page clean. Hide stats on the public landing page. */
.india-one-system-page .india-master-stats {
  display: none !important;
}

/* /india: keep the map inside normal site rhythm while letting the map fill that width. */
.india-one-system-page .india-master-container {
  max-width: 840px !important;
}
.india-one-system-page .india-master-map-card,
.india-one-system-page .india-master-map-shell {
  width: 100% !important;
  max-width: 840px !important;
}
.india-one-system-page .india-master-map-shell svg {
  width: 100% !important;
  max-height: none !important;
}

/* /india/map: align the detailed map and sections to the same website width. */
.india-detailed-map-page .india-detailed-map-container,
.india-detailed-map-page .india-detailed-map-main,
.india-detailed-map-page .india-map-explore-block,
.india-detailed-map-page .india-map-region-block,
.india-detailed-map-page .india-v2-map-state-list {
  max-width: 840px !important;
  width: 100% !important;
}
.india-detailed-map-page .india-detailed-pin-map {
  width: 100% !important;
  max-width: 840px !important;
  min-height: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.india-detailed-map-page .india-v2-pin-map {
  overflow: hidden;
}
.india-detailed-map-page .india-v2-map-panel {
  max-width: 100% !important;
}
.india-detailed-map-page .india-map-state-summary-grid,
.india-detailed-map-page .india-map-region-grid {
  width: 100% !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .india-one-system-page .india-master-container,
  .india-detailed-map-page .india-detailed-map-container,
  .india-detailed-map-page .india-detailed-map-main,
  .india-detailed-map-page .india-map-explore-block,
  .india-detailed-map-page .india-map-region-block,
  .india-detailed-map-page .india-v2-map-state-list {
    max-width: calc(100vw - 32px) !important;
  }
  .india-detailed-map-page .india-detailed-pin-map {
    min-height: 440px !important;
  }
}


/* INDIA_SPRINT9_STATE_DRILLDOWN_2026_08_19 */
.india-region-drilldown-hero .container,
.india-state-drilldown-hero .container,
.india-region-state-section,
.india-state-map-section,
.india-state-destination-section {
  max-width: 840px;
}
.india-region-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 24px 0 20px;
}
.india-region-summary-strip div {
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.india-region-summary-strip strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 28px;
  line-height: 1;
}
.india-region-summary-strip span {
  display: block;
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-region-state-grid,
.india-state-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.india-region-state-card,
.india-state-destination-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 15px 16px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
.india-region-state-card strong,
.india-state-destination-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  line-height: 1.12;
  margin: 0;
}
.india-state-destination-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.india-region-state-card span,
.india-region-state-card small,
.india-state-destination-card p {
  color: var(--ink-soft);
}
.india-region-state-card em,
.india-state-card-top em {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--stamp);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.india-state-map-board {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(226,216,188,.34));
  overflow: hidden;
  margin: 18px 0 28px;
}
.india-state-map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(32,43,50,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(32,43,50,.06) 1px, transparent 1px);
  background-size: 25% 25%;
}
.india-state-map-pin {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--paper);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(32,43,50,.35);
  background: var(--sage);
  text-decoration: none;
}
.india-state-map-pin.has-field-notes { background: var(--stamp); }
.india-state-map-pin.is-village { width: 10px; height: 10px; }
.india-state-map-pin.is-monument { border-radius: 3px; width: 12px; height: 12px; }
.india-state-map-pin span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  min-width: max-content;
  max-width: 220px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  line-height: 1.2;
}
.india-state-map-pin:hover span,
.india-state-map-pin:focus span { display: block; }
.india-state-destination-group { margin-top: 34px; }
.india-state-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.india-state-card-top span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-state-card-link {
  margin-top: auto;
  color: var(--stamp);
  text-decoration: none;
  font-size: 14px;
}
.india-state-destination-card.is-highlighted {
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .india-state-map-board { min-height: 340px; }
}


/* INDIA_SPRINT10_STATE_POLISH_2026_08_19 */
.india-state-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.india-state-prev-next a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 48%;
  color: var(--stamp);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.india-state-prev-next a:last-child {
  margin-left: auto;
  text-align: right;
}
.india-state-prev-next span {
  font-family: 'IBM Plex Sans', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.india-state-search-section {
  max-width: 840px;
  margin-top: 26px;
}
.india-state-search-panel {
  border: 1px solid var(--line);
  padding: 16px;
  background: transparent;
}
.india-state-search-panel label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.india-state-search-panel input {
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  padding: 11px 12px;
  color: var(--ink);
  font: inherit;
}
.india-state-search-count {
  margin: 10px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--stamp);
}
.india-state-destination-card[hidden],
.india-state-destination-group[hidden] {
  display: none !important;
}
.india-state-no-results {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .india-state-prev-next { flex-direction: column; }
  .india-state-prev-next a { max-width: 100%; }
  .india-state-prev-next a:last-child { margin-left: 0; text-align: left; }
}


/* INDIA_SPRINT10_STATE_UI_FIX_2026_08_19 */
/* The previous/next state nav looked awkward inside the hero. Hide for now; state-to-state browsing can return later as a polished footer rail. */
.india-state-drilldown-page .india-state-prev-next {
  display: none !important;
}

/* Keep the state map heading readable instead of splitting the title and paragraph into columns. */
.india-state-map-section .india-v2-list-header,
.india-state-destination-group .india-v2-list-header {
  display: block !important;
  max-width: 840px;
  margin-bottom: 14px;
}
.india-state-map-section .india-v2-list-header h2,
.india-state-destination-group .india-v2-list-header h2 {
  margin: 0 0 8px;
}
.india-state-map-section .india-v2-list-header p,
.india-state-destination-group .india-v2-list-header p {
  margin: 0;
  max-width: 720px;
}

/* State search block: make it a clean full-width component, not an inline label/input row. */
.india-state-search-section {
  max-width: 840px !important;
  margin-top: 28px !important;
}
.india-state-search-panel {
  display: block !important;
  border: 1px solid var(--line) !important;
  padding: 16px !important;
  background: transparent !important;
}
.india-state-search-panel label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-soft) !important;
}
.india-state-search-panel input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 11px 12px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.india-state-search-count {
  display: block !important;
  margin: 10px 0 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  color: var(--stamp) !important;
}

/* Keep the state map and cards visually aligned. */
.india-state-map-board {
  margin-top: 16px !important;
}
.india-state-destination-section {
  margin-top: 28px !important;
}


/* INDIA_SPRINT10_STATE_UI_V2_2026_08_19 */
/* Final state-page visual fix: remove awkward previous/next row, make map heading and search stack cleanly. */
.india-state-drilldown-page .india-state-prev-next {
  display: none !important;
}

.india-state-map-heading {
  display: block !important;
  max-width: 840px !important;
  margin: 0 0 16px !important;
}
.india-state-map-heading h2 {
  display: block !important;
  margin: 0 0 8px !important;
  max-width: none !important;
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  line-height: 1.05 !important;
}
.india-state-map-heading p {
  display: block !important;
  margin: 0 !important;
  max-width: 720px !important;
  color: var(--ink-soft) !important;
}

.india-state-map-section .india-v2-list-header,
.india-state-destination-group .india-v2-list-header {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 840px !important;
  margin-bottom: 14px !important;
}
.india-state-destination-group .india-v2-list-header h2,
.india-state-destination-group .india-v2-list-header p {
  display: block !important;
  margin-left: 0 !important;
  max-width: 720px !important;
}

.india-state-search-section {
  max-width: 840px !important;
  width: 100% !important;
  margin: 28px auto 0 !important;
}
.india-state-search-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  padding: 16px !important;
  background: transparent !important;
}
.india-state-search-panel label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-soft) !important;
}
.india-state-search-panel input,
.india-state-search-panel input[type='search'] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 12px 13px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.india-state-search-count {
  display: block !important;
  margin: 2px 0 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  color: var(--stamp) !important;
}
.india-state-map-board {
  margin-top: 16px !important;
}


/* INDIA_SPRINT10_STATE_UI_V3_2026_08_19 */
/* Polished mandatory previous/next rails for state pages. */
.india-state-drilldown-page .india-state-prev-next {
  display: none !important;
}
.state-page-neighbor-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.state-page-neighbor-nav--top {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.state-page-bottom-nav-section {
  max-width: 840px;
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.state-page-neighbor-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.state-page-neighbor-nav a:hover {
  border-color: var(--stamp);
}
.state-page-neighbor-nav a:last-child {
  text-align: right;
  align-items: flex-end;
}
.state-page-neighbor-nav span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.state-page-neighbor-nav strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--stamp);
}

/* Remove redundant state map heading spacing because the map itself follows directly. */
.india-state-map-section {
  max-width: 840px !important;
  margin-top: 28px !important;
}
.india-state-map-section .india-state-map-heading {
  display: none !important;
}
.india-state-map-board {
  margin-top: 0 !important;
}

/* Hard override for the state search component so label and input always stack. */
.india-state-search-section {
  max-width: 840px !important;
  width: 100% !important;
  margin: 28px auto 0 !important;
}
.india-state-search-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  padding: 16px !important;
  background: transparent !important;
}
.india-state-search-panel label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
}
.india-state-search-panel input,
.india-state-search-panel input[type='search'],
#stateDestinationSearch {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.india-state-search-count {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .state-page-neighbor-nav {
    grid-template-columns: 1fr;
  }
  .state-page-neighbor-nav a:last-child {
    text-align: left;
    align-items: flex-start;
  }
}


/* INDIA_SPRINT12B_DESTINATION_DISCOVERY_SAFE_2026_08_19 */
.india-v2-detail {
  max-width: 840px;
}
.india-destination-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.india-destination-context-grid a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.india-destination-context-grid a:hover {
  border-color: var(--stamp);
}
.india-destination-context-grid span,
.destination-page-neighbor-nav span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-destination-context-grid strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.1;
}
.destination-page-neighbor-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.destination-page-neighbor-nav--top {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.destination-page-neighbor-nav--bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.destination-page-neighbor-nav a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 13px 15px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.destination-page-neighbor-nav a:hover {
  border-color: var(--stamp);
}
.destination-page-neighbor-nav a:last-child {
  text-align: right;
  align-items: flex-end;
}
.destination-page-neighbor-nav strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--stamp);
}
.india-v2-related-header,
.india-v2-related-group-heading {
  display: block !important;
  grid-template-columns: none !important;
}
.india-v2-related-header h2,
.india-v2-related-header p,
.india-v2-related-group-heading h3,
.india-v2-related-group-heading p {
  display: block !important;
  margin-left: 0 !important;
  max-width: 760px !important;
}
.india-v2-related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 12px !important;
}
.india-v2-related-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-height: 132px !important;
  text-decoration: none !important;
}
.india-v2-related-card h4 {
  margin: 4px 0 0 !important;
}
.india-v2-backlinks {
  margin-top: 28px;
}
@media (max-width: 700px) {
  .destination-page-neighbor-nav {
    grid-template-columns: 1fr;
  }
  .destination-page-neighbor-nav a:last-child {
    text-align: left;
    align-items: flex-start;
  }
}


/* INDIA_SPRINT13_ARCHIVE_CONNECTIVITY_SAFE_2026_08_19 */
.india-region-highlights-section,
.india-state-related-section {
  max-width: 840px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.india-region-highlights-header,
.india-state-related-header,
.india-region-highlight-group-heading {
  display: block !important;
  grid-template-columns: none !important;
}
.india-region-highlights-header h2,
.india-region-highlights-header p,
.india-state-related-header h2,
.india-state-related-header p,
.india-region-highlight-group-heading h3,
.india-region-highlight-group-heading p {
  display: block !important;
  margin-left: 0 !important;
  max-width: 760px !important;
}
.india-region-highlight-groups {
  display: grid;
  gap: 24px;
  margin-top: 18px;
}
.india-region-highlight-group {
  display: grid;
  gap: 12px;
}
.india-region-highlight-group-heading h3 {
  margin: 0 0 5px;
  font-family: 'Fraunces', serif;
  font-size: 25px;
  line-height: 1.15;
}
.india-region-highlight-group-heading p {
  margin: 0;
  color: var(--ink-soft);
}
.india-region-highlight-grid,
.india-state-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.india-region-highlight-card,
.india-state-related-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 118px;
  border: 1px solid var(--line);
  padding: 13px 15px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.india-region-highlight-card:hover,
.india-state-related-card:hover {
  border-color: var(--stamp);
}
.india-region-highlight-card span,
.india-state-related-card span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-region-highlight-card strong,
.india-state-related-card strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--stamp);
}
.india-region-highlight-card small,
.india-state-related-card small {
  color: var(--ink-soft);
  line-height: 1.45;
}


/* INDIA_SPRINT14_DESTINATION_CONTEXT_NETWORK_SAFE_2026_08_19 */
.india-destination-context-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  color: var(--ink);
  background: transparent;
}
.india-destination-context-card span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-destination-context-card strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--stamp);
}


/* INDIA_SPRINT15_ARCHIVE_DASHBOARD_SAFE_2026_08_20 */
.india-sprint15-dashboard {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.india-sprint15-dashboard-header,
.india-sprint15-panel-heading {
  display: block !important;
  grid-template-columns: none !important;
}
.india-sprint15-dashboard-header h2,
.india-sprint15-dashboard-header p,
.india-sprint15-panel-heading h3,
.india-sprint15-panel-heading p {
  display: block !important;
  margin-left: 0 !important;
  max-width: 760px !important;
}
.india-sprint15-scope-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.india-sprint15-scope-grid > div,
.india-sprint15-map-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  padding: 13px 14px;
  background: transparent;
}
.india-sprint15-scope-grid strong,
.india-sprint15-map-metrics strong {
  font-family: 'Fraunces', serif;
  font-size: 25px;
  line-height: 1;
  color: var(--stamp);
}
.india-sprint15-scope-grid span,
.india-sprint15-map-metrics span,
.india-sprint15-region-grid a > span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}
.india-sprint15-dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.india-sprint15-panel,
.india-sprint15-region-panel {
  border: 1px solid var(--line);
  padding: 18px;
  background: transparent;
}
.india-sprint15-panel-heading h3 {
  margin: 0 0 5px !important;
  font-family: 'Fraunces', serif;
  font-size: 25px;
  line-height: 1.15;
}
.india-sprint15-panel-heading p {
  margin: 0 !important;
  color: var(--ink-soft);
}
.india-sprint15-map-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.india-sprint15-progress {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
}
.india-sprint15-progress span {
  display: block;
  height: 100%;
  background: var(--stamp);
}
.india-sprint15-panel-link {
  display: inline-block;
  margin-top: 13px;
  color: var(--stamp);
}
.india-sprint15-state-list {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}
.india-sprint15-state-list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  color: var(--ink);
  text-decoration: none;
}
.india-sprint15-state-list a:hover strong,
.india-sprint15-region-grid a:hover strong {
  color: var(--stamp);
}
.india-sprint15-state-list a > span,
.india-sprint15-state-list small {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
}
.india-sprint15-region-panel {
  margin-top: 14px;
}
.india-sprint15-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.india-sprint15-region-grid a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--line);
  padding: 13px 14px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.india-sprint15-region-grid strong {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  line-height: 1.1;
}
.india-sprint15-region-grid small {
  color: var(--ink-soft);
  line-height: 1.45;
}
@media (max-width: 800px) {
  .india-sprint15-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .india-sprint15-dashboard-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .india-sprint15-map-metrics {
    grid-template-columns: 1fr;
  }
  .india-sprint15-state-list a {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .india-sprint15-state-list small {
    grid-column: 2;
  }
}


/* INDIA_SPRINT16_COLLECTIONS_SAFE_2026_08_20 */
.india-sprint16-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-top: 26px;
  border: 1px solid var(--line);
  padding: 18px;
}
.india-sprint16-entry span,
.india-collection-index-grid > a > span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-sprint16-entry h2 { margin: 5px 0; }
.india-sprint16-entry p { margin: 0; max-width: 720px; color: var(--ink-soft); }
.india-sprint16-entry > a {
  border: 1px solid var(--stamp);
  padding: 11px 14px;
  color: var(--stamp);
  text-decoration: none;
}
.india-collection-hero,
.india-collection-index-section,
.india-collection-results-section,
.india-collection-more-section { max-width: 980px; }
.india-collection-hero { padding-top: 38px; }
.india-collection-hero > p { max-width: 760px; }
.india-collection-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.india-collection-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  padding: 13px 14px;
}
.india-collection-stats strong { font-family: 'Fraunces', serif; font-size: 25px; color: var(--stamp); }
.india-collection-stats span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; color: var(--ink-soft); }
.india-collection-index-section,
.india-collection-results-section,
.india-collection-more-section { margin-top: 34px; }
.india-collection-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.india-collection-index-grid > a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 205px;
  border: 1px solid var(--line);
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
}
.india-collection-index-grid > a:hover,
.india-collection-more-grid a:hover { border-color: var(--stamp); }
.india-collection-index-grid strong { font-family: 'Fraunces', serif; font-size: 23px; line-height: 1.15; color: var(--stamp); }
.india-collection-index-grid p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.india-collection-index-grid small { margin-top: auto; color: var(--ink-soft); }
.india-collection-destination-grid { margin-top: 14px; }
.india-collection-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.india-collection-more-grid a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 13px 14px;
  color: var(--ink);
  text-decoration: none;
}
.india-collection-more-grid strong { font-family: 'Fraunces', serif; font-size: 19px; }
.india-collection-more-grid span { color: var(--ink-soft); font-size: 13px; }
@media (max-width: 700px) {
  .india-sprint16-entry { grid-template-columns: 1fr; align-items: start; }
  .india-sprint16-entry > a { justify-self: start; }
  .india-collection-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* INDIA_SPRINT17_DESTINATION_COLLECTION_LINKS_SAFE_2026_08_20 */
.india-destination-collections {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.india-destination-collections-heading > span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.india-destination-collections-heading h2 {
  margin: 5px 0 0;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  line-height: 1.15;
}
.india-destination-collection-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.india-destination-collection-links a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.india-destination-collection-links a:hover {
  border-color: var(--stamp);
}
.india-destination-collection-links strong {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  line-height: 1.15;
  color: var(--stamp);
}
.india-destination-collection-links span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
}


/* INDIA_UI_INTEGRITY_FINAL_2026_08_21: audit alignment and detailed-map filtering. */
.coordinate-audit-hero,
.coordinate-audit-wrap {
  box-sizing: border-box;
  width: min(840px, calc(100% - 48px));
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.coordinate-audit-card { min-width: 0; }
.coordinate-audit-card strong {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  overflow-wrap: anywhere;
}
.india-detailed-map-page [data-india-map-pin][hidden],
.india-detailed-map-page [data-map-region-link][hidden],
.india-detailed-map-page [data-map-state-card][hidden] { display: none !important; }
.india-map-filter-result-count {
  width: min(840px, calc(100% - 48px));
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.india-map-filter-empty {
  width: min(840px, calc(100% - 48px));
  margin: 10px auto 0;
  color: var(--stamp);
}
@media (max-width: 900px) {
  .coordinate-audit-hero,
  .coordinate-audit-wrap,
  .india-map-filter-result-count,
  .india-map-filter-empty { width: calc(100% - 32px); }
}


/* INDIA_ENRICHMENT_DASHBOARD_2026_08_21 */
.india-enrichment-hero,.india-enrichment-wrap{box-sizing:border-box;width:min(1040px,calc(100% - 48px));margin-left:auto;margin-right:auto}.india-enrichment-wrap{padding:26px 0 56px}.india-enrichment-grid{display:grid;gap:14px;margin-bottom:18px}.india-enrichment-grid--summary{grid-template-columns:repeat(4,minmax(0,1fr))}.india-enrichment-grid--coverage{grid-template-columns:repeat(3,minmax(0,1fr))}.india-enrichment-grid article,.india-enrichment-queue-grid article{min-width:0;border:1px solid var(--line);background:var(--paper);padding:18px;border-radius:8px}.india-enrichment-grid span,.india-enrichment-queue-grid span{display:block;color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.india-enrichment-grid strong,.india-enrichment-queue-grid strong{display:block;margin-top:6px;font-size:clamp(1.7rem,3vw,2.5rem)}.india-enrichment-grid small{display:block;margin-top:4px;color:var(--ink-soft)}.india-enrichment-grid .is-good{border-color:var(--sage)}.india-enrichment-grid .is-warn,.india-enrichment-section.is-warn{border-color:var(--stamp)}.india-enrichment-section{margin-top:30px}.india-enrichment-heading{margin-bottom:12px}.india-enrichment-heading h2{margin-bottom:4px}.india-enrichment-heading p{margin:0;color:var(--ink-soft)}.india-enrichment-table{width:100%;border-collapse:collapse}.india-enrichment-table th,.india-enrichment-table td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid var(--line)}.india-enrichment-table code{display:block;margin-top:3px;color:var(--ink-soft);font-size:11px}.india-enrichment-queue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.india-enrichment-json-link{margin-top:30px}.india-enrichment-section pre{overflow:auto;padding:14px;background:var(--paper-dark)}@media(max-width:820px){.india-enrichment-grid--summary,.india-enrichment-grid--coverage,.india-enrichment-queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.india-enrichment-hero,.india-enrichment-wrap{width:calc(100% - 32px)}.india-enrichment-grid--summary,.india-enrichment-grid--coverage,.india-enrichment-queue-grid{grid-template-columns:1fr}}
/* INDIA_DESTINATION_GOLD_STANDARD_V2_CSS_START */
/* Reusable visual language for gold-standard destination guides. */
.destination-fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 34px}.destination-fact-card{min-width:0;padding:18px;border:1px solid rgba(92,70,35,.22);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(248,240,217,.78));box-shadow:0 8px 24px rgba(42,32,18,.07)}.destination-fact-card span{display:block;margin-bottom:7px;color:#745f3d;font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.destination-fact-card strong{display:block;color:#211a13;font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;line-height:1.35}.india-v2-markdown img,.destination-page-content img,.india-destination-detail img,main article img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:20px;margin:20px 0 10px;box-shadow:0 14px 36px rgba(32,25,17,.14)}.india-v2-markdown table,.destination-page-content table,.india-destination-detail table,main article table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0 34px;overflow:hidden;border:1px solid rgba(92,70,35,.22);border-radius:16px;background:rgba(255,255,255,.54);box-shadow:0 8px 24px rgba(42,32,18,.06)}.india-v2-markdown th,.destination-page-content th,.india-destination-detail th,main article th{padding:14px 16px;text-align:left;vertical-align:top;background:#332640;color:#fff;font-size:.78rem;letter-spacing:.035em}.india-v2-markdown td,.destination-page-content td,.india-destination-detail td,main article td{padding:14px 16px;vertical-align:top;border-top:1px solid rgba(92,70,35,.14);line-height:1.55}.india-v2-markdown tbody tr:nth-child(even),.destination-page-content tbody tr:nth-child(even),.india-destination-detail tbody tr:nth-child(even),main article tbody tr:nth-child(even){background:rgba(225,207,160,.16)}.india-v2-markdown tbody tr:hover,.destination-page-content tbody tr:hover,.india-destination-detail tbody tr:hover,main article tbody tr:hover{background:rgba(201,171,106,.15)}@media(max-width:800px){.destination-fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.india-v2-markdown table,.destination-page-content table,.india-destination-detail table,main article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.india-v2-markdown th,.india-v2-markdown td,.destination-page-content th,.destination-page-content td,.india-destination-detail th,.india-destination-detail td,main article th,main article td{min-width:150px;padding:12px}}@media(max-width:520px){.destination-fact-grid{grid-template-columns:1fr}.destination-fact-card{padding:15px}.india-v2-markdown img,.destination-page-content img,.india-destination-detail img,main article img{border-radius:14px}}
/* INDIA_DESTINATION_GOLD_STANDARD_V2_CSS_END */