/* Shree Jain Visha Oshwal Seva Samaj - main site.
   The palette is taken from the forms so the two feel like one organisation. */

:root {
  --maroon: #7a1224;
  --maroon-dark: #5a0d1a;
  --gold: #d4a418;
  /* --gold on cream is 2.17:1, fine for a rule and far too faint for
     words. This is the same hue at 5.2:1, for gold text. */
  --gold-deep: #856310;
  --gold-light: #f4e4b0;
  --cream: #fdf8ee;
  --ink: #2b2320;
  --muted: #7a6f63;
  --border: #e6d9b8;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Noto Sans Gujarati first for the Gujarati runs; the Latin fallbacks carry
     everything else. No web font is loaded: on a slow phone that is one more
     round trip before any text appears, and both scripts are already present
     on Indian Android and iOS. */
  font-family: "Segoe UI", "Noto Sans Gujarati", Tahoma, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--maroon);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------- hero ------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  border-bottom: 5px solid var(--gold);
  color: #fff;
  text-align: center;
  padding: 56px 20px 40px;
}
.hero-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
}
.hero h1 {
  margin: 14px 0 2px;
  font-size: 1.6rem;
  line-height: 1.35;
  font-weight: 700;
}
.hero-en {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  opacity: 0.95;
}
.hero-sub {
  margin: 10px 0 0;
  color: var(--gold-light);
  font-size: 0.95rem;
}

.lang-switch {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 20px;
  padding: 3px;
}
.lang-btn {
  border: none;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0.8;
}
.lang-btn.is-active {
  background: #fff;
  color: var(--maroon);
  font-weight: 600;
  opacity: 1;
}

.hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--maroon-dark); }
.btn-primary:hover { background: #e8b829; }
.btn-ghost { border: 1px solid rgba(255,255,255,0.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ------------------------------ sections ------------------------------ */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 20px;
}
.section-alt { background: #fff; max-width: none; }
.section-alt > * { max-width: 900px; margin-left: auto; margin-right: auto; }

/* h1 as well as h2: the Samaj Darpan list page's own title sits inside the
   section rather than in a page-head band, and it is that page's h1. */
.section h1,
.section h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: var(--maroon-dark);
}
.section h1::after,
.section h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--gold);
  margin: 8px 0 18px;
}
.lede { margin: 0 0 18px; color: var(--muted); }

/* ------------------------------- cards ------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.section-alt .card { background: var(--cream); }
/* A card heading is an h2 on the committee landing page, where the cards are
   the page's own sections, and an h3 elsewhere. Either way it is a card
   title, not a section title, so it does not take the section rule's gold
   underline. */
.card h2::after { content: none; }

.card h2,
.card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--maroon);
}
.card p { margin: 0; font-size: 0.92rem; color: var(--ink); }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.card-link:hover {
  border-color: var(--maroon);
  transform: translateY(-2px);
}
.card-cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--maroon);
}

/* Content the Samaj has still to supply. Deliberately conspicuous: a
   placeholder that blends in is a placeholder that ships. */
.placeholder,
.card-soon {
  border: 1px dashed var(--gold);
  background: #fffdf5;
}
.placeholder {
  border-radius: var(--radius);
  padding: 16px 18px;
}
.placeholder strong {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.placeholder p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ------------------------------ contact ------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.contact-grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--maroon);
}
.address { margin: 0 0 10px; font-size: 0.94rem; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: 10px; }
/* A comfortable tap target: these are phone numbers, tapped on a phone. */
.contact-list a {
  display: inline-block;
  padding: 3px 0;
  font-weight: 600;
  color: var(--maroon);
}
.muted { display: block; color: var(--muted); font-size: 0.82rem; }

a { color: var(--maroon); }

/* ------------------------------- footer ------------------------------- */
.site-footer {
  background: var(--maroon-dark);
  color: #fff;
  text-align: center;
  padding: 26px 20px;
  font-size: 0.86rem;
}
.site-footer p { margin: 2px 0; }
.site-footer p:last-child { opacity: 0.75; font-size: 0.8rem; }

/* ------------------------------- phones ------------------------------- */
@media (max-width: 560px) {
  .hero { padding: 62px 16px 32px; }
  .hero h1 { font-size: 1.3rem; }
  .section { padding: 32px 16px; }
  .btn { width: 100%; text-align: center; }
  .hero-actions { flex-direction: column; }
}

/* ===================================================================
   Coming soon page
   The full one-pager lives in draft/full-site.html; these rules are for
   the holding page that stands in until its content arrives.
   =================================================================== */
.soon-body {
  min-height: 100vh;
  display: flex;
  /* The page was one flex row holding only the centred card. Now that the site
     header shares the body, the axis has to be vertical or the header lines up
     beside the content instead of above it. The card keeps its margin:auto,
     which still centres it in whatever space is left. */
  flex-direction: column;
  background: linear-gradient(160deg, var(--maroon), var(--maroon-dark) 65%);
}
.soon-body .site-header {
  flex: 0 0 auto;
  /* The holding page paints its own gradient; a flat bar over it looks stuck
     on, so let the gradient show through. */
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
}
.soon {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 54px 20px 32px;
  text-align: center;
  color: #fff;
}
.soon-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 7px;
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.soon h1 {
  margin: 16px 0 2px;
  font-size: 1.5rem;
  line-height: 1.35;
}
.soon-en {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.95;
}
.soon-badge {
  display: inline-block;
  margin: 20px 0 0;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: rgba(212,164,24,0.15);
  color: var(--gold-light);
  font-size: 0.85rem;
  font-weight: 600;
}
.soon-lede {
  margin: 14px auto 26px;
  max-width: 420px;
  font-size: 0.94rem;
  color: rgba(255,255,255,0.85);
}

.soon-forms { display: grid; gap: 12px; text-align: left; }
.soon-card {
  display: block;
  padding: 16px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.soon-card:hover {
  background: rgba(255,255,255,0.13);
  border-color: var(--gold);
}
.soon-card-title { display: block; font-weight: 700; font-size: 1rem; }
.soon-card-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.75);
}
.soon-card-cta {
  display: block;
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-light);
}

.soon-contact {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
}
.soon-contact-head {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.soon-contact .address { color: rgba(255,255,255,0.8); margin: 0 0 4px; }
.soon-contact a { color: #fff; }
.soon-contact .contact-list { margin-top: 14px; }
.soon-contact .contact-list li { margin-bottom: 8px; }
.soon-contact .contact-list a { color: var(--gold-light); }
.soon-contact .muted { color: rgba(255,255,255,0.6); }

.soon-foot {
  margin: 26px 0 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 480px) {
  .soon { padding: 62px 16px 28px; }
  .soon h1 { font-size: 1.25rem; }
}

/* --------------------------- Samaj Darpan reader ---------------------------
   Laid out like a PDF reader: a rail of pages down the left, the magazine
   itself on the right, and the window controls top right. The whole thing is
   one viewport tall and never scrolls -- the flipbook needs to know how much
   room it has, and a page that scrolls underneath a drag gesture fights the
   flip on a touchscreen. */

/* Several reader elements are toggled with the hidden attribute, and every one
   of them is laid out with flex. A display rule beats the browser's own
   [hidden] styling, so without this the status message and the download button
   stay on screen whatever the JavaScript says. */
.darpan [hidden] { display: none !important; }

.darpan-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--reader-bg);
}

:root {
  /* A warm near-black. Newsprint scans look grey and dead on a cold grey
     ground, and the cream used elsewhere on the site glares at this size. */
  --reader-bg: #241c1a;
  --reader-rail: #1b1513;
  --reader-line: rgba(255, 255, 255, 0.1);
}

.darpan {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* -------------------------------- top bar -------------------------------- */

.darpan-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  border-bottom: 3px solid var(--gold);
  color: #fff;
}

.darpan-bar-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  flex: 0 0 auto;
}

.darpan-bar-title {
  /* An h1 since 2026-09-25 -- the reader had no heading at all before, which
     left the page with nothing to say what it was. The reset keeps the bar
     looking exactly as it did. */
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  /* Both of these matter: the title is what gives way when the bar runs out of
     room, so that the enlarge and close buttons stay reachable. */
  min-width: 0;
  overflow: hidden;
  margin-right: auto;
}

.darpan-name {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.darpan-issue {
  font-size: 0.78rem;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.darpan-bar-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.darpan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px, so the close and enlarge buttons are not a coin toss with a thumb. */
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.darpan-icon:hover { background: rgba(255, 255, 255, 0.18); }
.darpan-icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.darpan-close:hover { background: #b3202f; border-color: #d8404f; }

/* --------------------------------- body --------------------------------- */

.darpan-body-grid {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  /* A flex item refuses to shrink below its content by default. Without these
     the book widens the stage, the stage widens the row, and the next
     measurement reads a stage wider than the screen -- so the page is sized
     from a width the phone does not have and hangs off the edge. */
  min-width: 0;
  overflow: hidden;
}

/* ------------------------------ the page rail ---------------------------- */

.darpan-rail {
  flex: 0 0 172px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--reader-rail);
  border-right: 1px solid var(--reader-line);
  padding: 10px 8px 24px;
}

.darpan-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.darpan-thumb {
  display: block;
  width: 100%;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: center;
}

.darpan-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: #fff;
}

.darpan-thumb-num {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}

.darpan-thumb:hover { background: rgba(255, 255, 255, 0.12); }
.darpan-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.darpan-thumb.is-current {
  border-color: var(--gold);
  background: rgba(212, 164, 24, 0.16);
}
.darpan-thumb.is-current .darpan-thumb-num { color: var(--gold-light); }

/* The rail is a drawer on a phone, so it does not eat the page it exists to
   navigate. Hidden on desktop, where it is a permanent column. */
.darpan-thumbs-toggle { display: none; }

/* ------------------------------- the stage ------------------------------- */

.darpan-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.darpan-flip-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Width and height are set from JavaScript to a box that fits the stage; see
   fitToStage in darpan.js. These are only the starting point. */
.darpan-flip {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Carries the half-page slide that centres the cover and the back page. */
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .darpan-flip { transition: none; }
}

.darpan-page {
  background: #fff;
  overflow: hidden;
}

.darpan-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.darpan-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  pointer-events: none;
}
.darpan-status.is-error { color: #f0b8bd; }

/* ------------------------------- controls -------------------------------- */

.darpan-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 12px;
  border-top: 1px solid var(--reader-line);
  background: rgba(0, 0, 0, 0.25);
}

.darpan-nav {
  width: 42px;
  height: 42px;
  border: 1px solid var(--reader-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.darpan-nav:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--gold); }
.darpan-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.darpan-count {
  min-width: 96px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------- phones --------------------------------- */

@media (max-width: 760px) {
  .darpan-thumbs-toggle { display: inline-flex; }

  .darpan-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 150px;
    flex-basis: 150px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45);
  }
  .darpan-rail.is-open { transform: translateX(0); }

  .darpan-body-grid { position: relative; }
  .darpan-flip-wrap { padding: 8px; }
  .darpan-name { font-size: 0.9rem; }
  .darpan-bar-logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .darpan-rail { transition: none; }
}

/* ------------------------------ site header -------------------------------
   A sticky bar carrying the Samaj's name and the menu. It sits above the hero
   rather than inside it, so the same bar can serve the holding page, the full
   site and anything added later without each one restyling it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--maroon-dark);
  border-bottom: 3px solid var(--gold);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  min-width: 0;
  margin-right: auto;
}

.site-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  flex: 0 0 auto;
}

.site-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}

.site-brand-gu {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-brand-en {
  font-size: 0.7rem;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: block;
  padding: 9px 13px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.site-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Set by script.js as the reader scrolls, so the menu says where you are. */
.site-nav a.is-current {
  color: #fff;
  border-bottom-color: var(--gold);
}

.site-header .lang-switch {
  position: static;
  margin-left: 10px;
  flex: 0 0 auto;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* An anchor landing under a sticky bar puts its own heading out of sight. */
:target { scroll-margin-top: 78px; }
.section[id] { scroll-margin-top: 78px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* The menu becomes a sheet under the bar. Laying it out as a column here,
     rather than hiding it with display:none, keeps the links focusable in the
     order they are read. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    background: var(--maroon-dark);
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    display: none;
  }
  .site-nav.is-open { display: flex; }

  .site-nav a {
    padding: 13px 12px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .site-nav a.is-current {
    background: rgba(212, 164, 24, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .site-header .lang-switch {
    margin: 8px 0 2px;
    align-self: flex-start;
  }

  .site-brand-en { display: none; }
  .site-brand img { width: 34px; height: 34px; }
}

@media (max-width: 380px) {
  .site-brand-gu { font-size: 0.85rem; }
}

/* The holding page's own About and Events blocks. They exist so the menu has
   somewhere to land; the full versions live in the one-pager. */
.soon-block {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
  text-align: left;
}
.soon-block-head {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.soon-placeholder {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed rgba(212,164,24,0.65);
  border-radius: var(--radius);
  background: rgba(212,164,24,0.07);
  font-size: 0.86rem;
}
.soon-placeholder strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-light);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.soon-placeholder p { margin: 0; color: rgba(255,255,255,0.75); }

/* A full-width section centres its children with auto margins, but .section h2
   declares margin in shorthand, which wipes those out -- so headings sat flush
   against the page edge while the cards under them were centred. Raising the
   specificity puts the heading back in line with its own content. */
.section.section-alt > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------ coming soon -------------------------------
   Sections the Samaj has not filled in yet. This is public copy, not a note to
   ourselves: it says the section is on its way and then gets out of the way,
   rather than looking like a page that failed to load. */

/* ------------------------- the logo on landing ----------------------------
   Built and removed by assets/js/logo-intro.js. The timings here and the ones
   in that file describe the same animation and have to agree.

   Maroon rather than a dim of the page behind it: the page loads into the
   maroon header anyway, so the splash reads as the site arriving rather than
   as something thrown over it. */

.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The page shows through, blurred, rather than being covered over. The tint
     is only deep enough to hold the logo against whatever is behind it --
     maroon hero at the top of the page, cream further down.

     backdrop-filter is not universal; where it is missing the tint alone
     still reads as a veil over the page, which is the point, so there is no
     fallback beyond making sure that tint is not too faint on its own. */
  background: rgba(90, 13, 26, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transition: opacity 420ms ease;
  cursor: pointer;
}

.logo-intro.is-running { opacity: 1; }
.logo-intro.is-leaving { opacity: 0; }

/* 180px, at the Samaj's asking. assets/logo.png is only 120x125, so this is
   an enlargement and it is a little soft up close -- the emblem's heavy gold
   disc and white rim carry it better than fine detail would. A bigger logo
   file is still the fix; see the knowledge base. */
/* No disc behind it and no ring around it: assets/logo.png carries its own
   transparent background and its own white rim, so the emblem sits straight
   on the maroon. The shadow is a filter rather than a box-shadow, because a
   box-shadow traces the image's rectangle and would hang a square shadow
   behind a round logo. */
.logo-intro img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
  transform: scale(0.24);
  opacity: 0;
}

/* Opens, then turns once. The shrink on the way out is this plus the
   overlay's fade, which is why its timing matches SHUT in the script. */
.logo-intro.is-running img {
  animation: logo-intro-open 520ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards,
             logo-intro-turn 900ms ease-in-out 520ms both;
}

.logo-intro.is-leaving img {
  transform: scale(0.72);
  transition: transform 420ms ease;
  animation: none;
}

@keyframes logo-intro-open {
  from { transform: scale(0.24); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes logo-intro-turn {
  from { transform: rotate(0deg)   scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}

@media (max-width: 560px) {
  .logo-intro img { width: 140px; height: 140px; }
}

/* Belt and braces: the script does not build the splash at all when less
   motion is asked for, and this makes sure of it if that check ever slips. */
@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
}

.coming-soon {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 15px 18px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  background: #fffdf5;
}

.coming-soon-badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold);
  color: #40320a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The two platform marks in the app strip. Marks plus their names: the name
   is what a screen reader reads, and what anyone who does not recognise a
   silhouette reads too, so the SVGs are aria-hidden. */
.app-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 11px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--maroon);
}

.app-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: currentColor;
}

.coming-soon p {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* On the holding page the same box sits on maroon rather than cream, and
   follows a card rather than a heading, so it needs the gap the cards have. */
.soon-block .coming-soon { margin-top: 12px; }

.soon-body .coming-soon {
  border-color: rgba(212, 164, 24, 0.6);
  background: rgba(212, 164, 24, 0.08);
  text-align: left;
}
.soon-body .coming-soon p { color: rgba(255, 255, 255, 0.75); }

/* An event's date, above its name. The date is what tells someone whether the
   rest of the card is worth reading, so it comes first. */
.card-date {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-alt .card-date,
.section .card-date { color: #a8791c; }
.soon-card .card-date { color: var(--gold-light); }

/* ------------------------------ issue list --------------------------------
   Every published issue of Samaj Darpan, newest first. Covers do the work:
   people recognise an issue by its front page long before they read a date. */

.issue-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Rows, not a wall of covers. The list is for choosing an issue, and a
     passport-sized thumbnail is enough to recognise one by; the title and the
     page count belong beside it rather than underneath. */
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.issue-link {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.issue-link:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(122, 18, 36, 0.13);
  transform: translateY(-2px);
}
.issue-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .issue-link { transition: none; }
  .issue-link:hover { transform: none; }
}

/* Passport-sized: about 35mm across on a normal screen. */
.issue-cover {
  display: block;
  flex: 0 0 82px;
  width: 82px;
  height: auto;
  aspect-ratio: 0.71;
  object-fit: cover;
  object-position: top center;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.issue-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.issue-flag {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--gold);
  color: #40320a;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.issue-title { font-weight: 700; font-size: 0.92rem; color: var(--maroon); }
.issue-meta { font-size: 0.78rem; color: var(--muted); }
.issue-cta {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon);
}
.issue-link:hover .issue-cta { color: var(--maroon-dark); }

.issue-status { color: var(--muted); }
.issue-status.is-error { color: #a3242f; }

/* ---------------------------- menu dropdown -------------------------------
   The events sit under their menu item. The parent is a real link to /events/,
   so nothing here is reachable only by hovering: the dropdown is a shortcut,
   not the only way in. */

.nav-item { position: relative; display: flex; align-items: center; }

.nav-caret {
  margin-left: -6px;
  padding: 9px 6px 9px 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 232px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--maroon-dark);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

/* Hover for a mouse, focus-within for a keyboard. */
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { display: block; }

.nav-sub a {
  display: block;
  padding: 9px 11px;
  border-radius: 6px;
  border-bottom: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: normal;
}

@media (max-width: 860px) {
  /* In the sheet there is nothing to hover, and a second level of tapping to
     open a submenu is a good way to lose people. The events are simply always
     shown, indented under their parent. */
  .nav-item { display: block; }
  .nav-caret { display: none; }

  .nav-sub {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0 0 4px 14px;
    background: none;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-sub a {
    padding: 10px 12px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: none;
  }
  .nav-sub a::before { content: "— "; opacity: 0.5; }
}

/* ------------------------------ inner pages -------------------------------
   Pages below the home page: an event, the magazine. A compact band rather
   than the full hero, which belongs to the front page alone. */

.page-head {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  border-bottom: 4px solid var(--gold);
  color: #fff;
  text-align: center;
  padding: 34px 20px 30px;
}

.page-head h1 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.3;
}

.page-when {
  margin: 0;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.page-lede {
  margin: 12px auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.96rem;
}

/* The way back up from a page of About Us. It sits inside the maroon band,
   where .crumb below is for the cream page body and would be invisible. */
.page-back { margin: 16px 0 0; }

.page-back a {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
}

.page-back a:hover { color: #fff; border-bottom-color: #fff; }

.crumb {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--maroon);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.crumb:hover { text-decoration: underline; }

.section h3.sub-head {
  /* margin-block, not the shorthand: a full-width section centres its children
     with auto side margins, and a shorthand here would wipe them out and leave
     the heading against the page edge. */
  margin-block: 26px 10px;
  font-size: 1.05rem;
  color: var(--maroon);
}

/* A past season: quieter than the one taking registrations. */
.past-season { opacity: 0.94; }

/* Videos and photos. Both are empty until the Samaj supplies them, so both
   are laid out to look right with one item or with twenty. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.media-item {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  text-decoration: none;
}

.media-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A play badge over a still, so nothing is loaded from YouTube until someone
   actually asks for the video. */
.media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-play::after {
  content: "";
  width: 54px;
  height: 38px;
  border-radius: 9px;
  background: rgba(192, 26, 38, 0.92);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.media-play::before {
  content: "";
  position: absolute;
  z-index: 1;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.media-item:hover .media-play::after { background: #c01a26; }

.media-caption {
  display: block;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
}

/* A short list of things to know, on an event page. */
.plain-list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 0.94rem;
}
.plain-list li { margin-bottom: 7px; }

/* The still, and what replaces it. A button rather than a link: pressing it
   does not go anywhere, it builds the player in place. */
.media-figure { margin: 0; }

.media-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  cursor: pointer;
}

.media-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
}

.media-item:hover { border-color: var(--gold); }
.media-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.media-caption {
  background: none;
  padding: 7px 2px 0;
  color: var(--ink);
  font-weight: 600;
}

/* The day a group of videos was played. */
.media-day {
  margin-block: 22px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.media-day:first-child { margin-top: 4px; }

/* ------------------------------ the committee -----------------------------
   The Samaj announces its committee in Samaj Darpan as a grid of portraits
   with the office and the village under each one. This is the same idea, laid
   out for a screen. */

/* One row of the printed page: 3, then 4, 4, 4, 4, then 2. Flex rather than a
   grid, so the short rows centre themselves under the full ones exactly as
   they do in the magazine, and so they can still wrap on a narrow screen. */
.people {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 18px;
}

.people .person { flex: 0 0 132px; }

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Cut from a scan, so they are ovals on a printed page; the circle and the
   gold ring are what make a rectangle of newsprint read as a portrait. */
.person-photo {
  width: 84px;
  height: 104px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--cream);
  margin-bottom: 8px;
}

.person-role {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 2px;
}

.person-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--maroon);
  line-height: 1.3;
}

.person-place {
  margin-top: 1px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
}

/* No photograph exists for any past committee, so the oval is filled with a
   plain silhouette rather than left blank -- an empty oval reads as an image
   that failed to load, and a missing one makes the cards different heights. */
.person-photo--none {
  display: block;
  background-color: #f2ead9;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 76% auto;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72'><circle cx='30' cy='25' r='13' fill='%23c4b79e'/><path d='M30 42c-13.3 0-24 9.6-24 21.4V72h48v-8.6C54 51.6 43.3 42 30 42z' fill='%23c4b79e'/></svg>");
}



.people-source {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
}

@media (max-width: 420px) {
  .people { gap: 16px 10px; }
  .people .person { flex: 0 0 104px; }
  .person-photo { width: 74px; height: 92px; }
}

/* Past committees -------------------------------------------------------- */

/* Fourteen terms is too many to scroll blindly, so the terms sit in a rail
   beside the roll rather than only as headings within it. */
.term-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 20px;
}

.term-nav {
  position: sticky;
  top: 84px;
  border-left: 3px solid var(--gold-light);
  padding-left: 14px;
}

.term-nav-head {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.term-nav ul { list-style: none; margin: 0; padding: 0; }

.term-nav a {
  display: block;
  padding: 4px 0;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.term-nav a:hover,
.term-nav a:focus-visible { border-bottom-color: var(--gold); }

/* The heading has to clear the sticky site header when jumped to. */
.term { scroll-margin-top: 78px; }
.term + .term { margin-top: 38px; }

.term-years {
  margin: 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--gold-light);
  padding-bottom: 6px;
}

.term-note { margin: 8px 0 0; color: var(--muted); }

.term-count {
  margin: 4px 0 12px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}







@media (max-width: 760px) {
  /* The rail becomes a row of chips above the roll; a sticky sidebar is not
     worth a third of a phone screen. */
  .term-layout { grid-template-columns: 1fr; gap: 18px; }

  .term-nav {
    position: static;
    border-left: none;
    padding-left: 0;
    border-bottom: 1px solid var(--gold-light);
    padding-bottom: 12px;
  }

  .term-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }

  .term-nav a {
    padding: 4px 10px;
    border: 1px solid var(--gold-light);
    border-radius: 999px;
    font-size: 0.78rem;
  }

}

.term-pending {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--gold-light);
  background: rgba(212, 164, 24, 0.06);
  font-size: 0.88rem;
  color: var(--muted);
}

/* With JavaScript the rail selects a term and its roll appears beside it,
   rather than every term stacking into one very long page. Without it, the
   .is-tabbed class is never added and the full list stays as it was. */
.term-layout.is-tabbed .term + .term { margin-top: 0; }
.term-layout.is-tabbed .term:focus { outline: none; }

.term-nav a.is-active {
  font-weight: 700;
  border-bottom-color: var(--gold);
}

@media (min-width: 761px) {
  /* The panel keeps the rail's height so the page does not jump about as
     terms of different lengths are picked. */
  .term-layout.is-tabbed .term-body { min-height: 520px; }
}

@media (max-width: 760px) {
  .term-nav a.is-active {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
  }
}

/* The year filter above the issue list. Hidden until there is more than one
   year in the manifest, so it does not appear before the archive does. */
.issue-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold-light);
  flex-wrap: wrap;
}

.issue-filter label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.issue-filter select {
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 30px 7px 12px;
  color: var(--maroon-dark);
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 6px;
  cursor: pointer;
  /* The native arrow varies wildly between browsers; this one does not. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a1224' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px auto;
}

.issue-filter select:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 1px;
}

.issue-count {
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: auto;
}

@media (max-width: 520px) {
  .issue-count { margin-left: 0; }
}

/* A year heading inside the issue grid. It spans every column so the covers
   for that year always start on a fresh row under it. */
.issue-year {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 2px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold-light);
}

.issue-grid .issue-year:first-child { margin-top: 0; }

.issue-year h3 {
  margin: 0;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--maroon);
}

.issue-year span {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * About Us: long-form prose, and the table of villages.
 *
 * The rest of the site is cards and lists of names, so it had no style
 * for running text or for a table. Both are here rather than on the page.
 * ------------------------------------------------------------------ */

.prose { max-width: 68ch; }
.prose p {
  margin: 0 0 14px;
  line-height: 1.75;
}
.prose h3 {
  margin: 30px 0 10px;
  font-size: 1.05rem;
  color: var(--maroon);
}
.prose h3:first-child { margin-top: 6px; }

.prose .motto {
  font-size: 1.05rem;
  color: var(--gold-deep);
  font-weight: 600;
}
.motto-list {
  margin: 0 0 14px;
  padding-left: 20px;
}
.motto-list li { margin-bottom: 8px; line-height: 1.7; }
.motto-list strong { color: var(--maroon); }

.prose-cta { margin: 26px 0 0; }

/* ------------------------------ village map -------------------------------
   Leaflet draws into .village-map; everything here is the frame around it.
   The map is an extra on top of the table, never a replacement for it, so it
   is allowed to be absent -- with JavaScript off the container collapses and
   the table below is still the whole answer. */

.village-map-wrap { margin: 20px auto 0; max-width: 900px; }

.village-map {
  height: 440px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #eceadf;   /* what shows while the tiles are still coming */
}

/* Leaflet sets its own font and a blue link colour; neither belongs here. */
.village-map .leaflet-container { font: inherit; }
.village-map .leaflet-popup-content { margin: 10px 12px; line-height: 1.45; }
.village-map .leaflet-popup-content strong { font-size: 1.05rem; color: var(--maroon); }
.village-map .leaflet-popup-content small { color: var(--muted); }
.village-map .leaflet-popup-content em { font-style: normal; color: var(--muted); }
.village-map .leaflet-container a { color: var(--maroon); }

.village-map-note {
  margin: 8px 2px 0;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 620px) {
  .village-map { height: 340px; }
}

/* The wrapper scrolls, not the page: on a narrow phone a wide table
   otherwise drags the whole layout sideways. */
.table-scroll {
  margin: 20px auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
}
.villages {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.villages th,
.villages td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.villages thead th {
  background: var(--gold-light);
  color: var(--maroon-dark);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.villages tbody tr:last-child td { border-bottom: 0; }
.villages tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.55); }
/* The number column is a label, not data anyone reads across. */
.villages td:first-child,
.villages th:first-child {
  color: var(--muted);
  width: 1%;
}

.villages-note {
  max-width: 68ch;
  margin: 16px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* .section-alt centres each child in a 900px column, and that selector is
   more specific than .prose, so without this the running text in an
   alternating section sets 900px wide while the same text one section up sets
   68ch -- the measure visibly changes halfway down the page. Keep the box at
   the column width so it still lines up with the heading, and cap the lines
   inside it instead. */
.section-alt > .prose { max-width: 900px; }
.section-alt > .prose > * { max-width: 68ch; }