/* ============================================================================
 *  Study Home — landing page for the atlas study companion.
 *  Editorial paper aesthetic; mobile-first; no map, no atlas chrome.
 * ==========================================================================*/

/* -- DESIGN.md palette — role accents on top of the editorial base --- */
:root {
  /* Slate (neutral, admin-like) */
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;
  /* Indigo (primary study action — "student" in DESIGN.md) */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-300: #A5B4FC;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  /* Emerald (structured success — "mentor" in DESIGN.md) */
  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-300: #6EE7B7;
  --emerald-600: #059669;
  --emerald-700: #047857;
  /* Amber (coaching / "almost right" — DESIGN.md §10) */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-300: #FCD34D;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
}

.study-body {
  margin: 0;
  padding: 0;
  background: var(--paper, #f4ecd8);
  color: var(--ink, #2d2823);
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -- Header ------------------------------------------------------- */
.study-header {
  padding: 24px clamp(20px, 5vw, 48px) 16px;
  border-bottom: 1px solid var(--hair, rgba(0, 0, 0, 0.12));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--paper);
}
.study-brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.study-subtitle {
  margin-top: 4px;
  font-family: var(--sans, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 13px;
  color: var(--ink-3, #6d6558);
  font-style: italic;
}
.study-nav {
  display: flex;
  gap: 20px;
  align-items: center;
}
.study-nav a {
  color: var(--ink-2, #4a4438);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.study-nav a:hover { color: var(--ink); }
.study-nav a.active {
  color: var(--ink);
  border-bottom-color: var(--accent, #8b5a2b);
}
/* EN ⇄ हिं language toggle — mirrors the map header pill. */
.study-lang-toggle {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-2, #4a4438);
  background: transparent;
  border: 1px solid var(--rule, #d9cfbf);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.study-lang-toggle:hover {
  color: var(--ink);
  border-color: var(--accent, #8b5a2b);
}

/* -- Main ------------------------------------------------------- */
.study-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 48px) 80px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.study-hero {
  padding: 32px 0 24px;
  max-width: 720px;
  margin-bottom: 24px;
}
.study-hero-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--indigo-600);
  margin: 0 0 8px;
}
.study-hero-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 42ch;
  line-height: 1.25;
}
.study-hero-sub {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.5;
}
.study-hero-sub strong {
  color: var(--ink);
  font-weight: 500;
}

/* -- Role cards (DESIGN.md §15 landing card pattern) ------------- */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 0 32px;
}
.role-card {
  display: block;
  padding: 22px 22px 20px;
  border-radius: 16px;
  border: 2px solid var(--slate-200);
  background: var(--card, #ffffff);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.role-card:hover {
  transform: translateY(-2px);
}
.role-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  line-height: 1;
}
.role-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--slate-900);
  margin-bottom: 6px;
  line-height: 1.2;
}
.role-card-desc {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.5;
  flex: 1;
}
.role-card-arrow {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.role-card:hover .role-card-arrow { opacity: 1; }

/* Indigo variant — Map (primary study action) */
.role-card--indigo .role-card-icon { background: var(--indigo-50); color: var(--indigo-700); }
.role-card--indigo .role-card-arrow { color: var(--indigo-600); }
.role-card--indigo:hover {
  border-color: var(--indigo-300);
  box-shadow: 0 10px 24px rgba(79,70,229,0.14);
}

/* Emerald variant — Districts (structured walk-through) */
.role-card--emerald .role-card-icon { background: var(--emerald-50); color: var(--emerald-700); }
.role-card--emerald .role-card-arrow { color: var(--emerald-600); }
.role-card--emerald:hover {
  border-color: var(--emerald-300);
  box-shadow: 0 10px 24px rgba(5,150,105,0.14);
}

/* Amber variant — Confusions (coaching / almost-right, DESIGN §10) */
.role-card--amber .role-card-icon { background: var(--amber-50); color: var(--amber-700); }
.role-card--amber .role-card-arrow { color: var(--amber-700); }
.role-card--amber:hover {
  border-color: var(--amber-300);
  box-shadow: 0 10px 24px rgba(217,119,6,0.16);
}

/* Slate variant — All topics (comprehensive catalog) */
.role-card--slate .role-card-icon { background: var(--slate-100); color: var(--slate-700); }
.role-card--slate .role-card-arrow { color: var(--slate-700); }
.role-card--slate:hover {
  border-color: var(--slate-400);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
}

/* -- Secondary nav (less-frequent sections) --------------------- */
.study-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 12px 0 0;
  margin-bottom: 48px;
  font-family: var(--sans);
  font-size: 13px;
  border-top: 1px dashed var(--hair);
}
.study-secondary a {
  color: var(--slate-500);
  text-decoration: none;
  padding-top: 12px;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.study-secondary a:hover {
  color: var(--slate-800);
  border-bottom-color: var(--slate-400);
}

/* -- Sub-view container (hash-routed) --------------------------- */
.study-view { display: none; }
.study-view.is-active { display: block; }
.subview-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 24px;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  background: var(--card, #fff);
  color: var(--slate-700);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.subview-back:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
}

/* Home view: hide sub-view container. Sub-view: hide hero, role cards, secondary. */
body.view-home #subview-container { display: none; }
body.view-sub #role-cards,
body.view-sub #secondary-nav,
body.view-sub .study-hero { display: none; }

/* Dark theme accent overrides */
.theme-dark {
  --slate-50:  #1a1a1e;
  --slate-100: #26262a;
  --slate-200: #3a3a3e;
  --slate-300: #4a4a4e;
  --slate-400: #6a6a6e;
  --slate-500: #8a8a8e;
  --slate-700: #c4c4c8;
  --slate-800: #dcdce0;
  --slate-900: #e8e2d3;
}
.theme-dark .role-card { background: #2b2820; border-color: #3a3a3e; }

/* -- Section shell ---------------------------------------------- */
.study-section {
  margin-bottom: 56px;
}
.study-section-head {
  margin-bottom: 20px;
}
.study-section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.study-section-hint {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}

/* -- Topic grid ------------------------------------------------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.topic-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card, #faf5e7);
  border: 1px solid var(--hair);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.topic-card:hover {
  border-color: var(--accent, #8b5a2b);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}
.topic-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  width: 34px;
  text-align: center;
}
.topic-body {
  flex: 1;
  min-width: 0;
}
.topic-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
.topic-blurb {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.topic-meta {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-4, #948a7d);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.topic-arrow {
  color: var(--ink-4);
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.topic-card:hover .topic-arrow {
  color: var(--accent, #8b5a2b);
  transform: translateX(2px);
}

/* -- Records grid ----------------------------------------------- */
.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.record-card {
  display: block;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.record-card:hover {
  border-color: var(--accent, #8b5a2b);
  transform: translateY(-1px);
}
.record-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.record-big {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}
.record-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent, #8b5a2b);
  margin-top: 4px;
  font-weight: 500;
}
.record-foot {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 6px;
  line-height: 1.4;
}

/* -- State symbols --------------------------------------------- */
.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.symbol-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 6px;
  align-items: flex-start;
}
.symbol-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.symbol-body {
  flex: 1;
  min-width: 0;
}
.symbol-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.symbol-year {
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--ink-4);
  font-weight: 500;
  text-transform: none;
}
.symbol-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 2px;
}
.symbol-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent, #8b5a2b);
  margin-top: 2px;
  font-style: italic;
}
.symbol-foot {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.45;
}

/* -- Commonly confused ----------------------------------------- */
.confusion-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.confusion-filter {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.confusion-filter:hover { border-color: var(--accent, #8b5a2b); color: var(--ink); }
.confusion-filter.is-active {
  background: var(--accent, #8b5a2b);
  border-color: var(--accent, #8b5a2b);
  color: white;
}
.confusion-filter-count {
  font-size: 10px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-3);
}
.confusion-filter.is-active .confusion-filter-count { background: rgba(255,255,255,0.22); color: white; }

.confusion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.confusion-card {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.confusion-head {
  margin-bottom: 8px;
}
.confusion-cat {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 8px;
  background: var(--paper);
  border-radius: 10px;
}
.confusion-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
}
.confusion-side {
  min-width: 0;
}
.confusion-name {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.confusion-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent, #8b5a2b);
}
.confusion-name a:hover { color: var(--accent, #8b5a2b); }
.confusion-dist {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.confusion-vs {
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-4);
  padding-top: 4px;
}
.confusion-key {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.45;
}
.confusion-key strong {
  color: var(--accent, #8b5a2b);
  font-weight: 600;
}

/* -- Chain strips ----------------------------------------------- */
.chain-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chain-wrap {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.chain-title {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.chain-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
}
.chain-pill {
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 13.5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chain-pill:hover {
  background: var(--accent, #8b5a2b);
  border-color: var(--accent, #8b5a2b);
  color: white;
}
.chain-arrow {
  color: var(--ink-4);
  font-size: 14px;
  font-weight: 300;
}

/* -- Footer ----------------------------------------------------- */
.study-footer {
  border-top: 1px solid var(--hair);
  padding: 20px clamp(20px, 5vw, 48px);
  background: var(--card);
}
.study-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.study-footer p { margin: 4px 0; }
.study-footer-copyright {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 11.5px;
  color: var(--ink-4);
}
.study-footer a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--hair);
}
.study-footer a:hover { color: var(--accent, #8b5a2b); }

/* -- Mobile tweaks ---------------------------------------------- */
@media (max-width: 600px) {
  .study-header {
    padding: 16px 20px 12px;
  }
  .study-nav {
    gap: 14px;
  }
  .study-brand h1 { font-size: 24px; }
  .study-subtitle { font-size: 12px; }
  .study-hero { padding: 16px 0 24px; margin-bottom: 24px; }
  .study-hero-title { font-size: 20px; }
  .study-hero-sub { font-size: 14px; }
  .study-section { margin-bottom: 40px; }
  .topic-grid { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: repeat(2, 1fr); }
  .symbol-grid { grid-template-columns: 1fr; }
  .confusion-grid { grid-template-columns: 1fr; }
  .confusion-body { grid-template-columns: 1fr; }
  .confusion-vs { text-align: center; padding: 4px 0; }
  .chain-title { font-size: 11px; }
  .chain-pill { font-size: 12.5px; padding: 5px 10px; }
}

/* Dark theme */
.theme-dark .study-body { background: #1e1e21; color: #e8e2d3; }
.theme-dark .study-header,
.theme-dark .study-footer { background: #26251f; }
.theme-dark .topic-card,
.theme-dark .record-card,
.theme-dark .symbol-card,
.theme-dark .confusion-card,
.theme-dark .chain-wrap { background: #2b2820; border-color: #3a3a3e; }
.theme-dark .symbol-year,
.theme-dark .confusion-filter,
.theme-dark .confusion-key { border-color: #3a3a3e; }
.theme-dark .confusion-cat,
.theme-dark .confusion-filter-count { background: #1e1e21; }
.theme-dark .chain-pill { background: #1e1e21; border-color: #3a3a3e; color: #e8e2d3; }

/* ── District directory ────────────────────────────────────────── */
.district-directory {
  display: flex; flex-direction: column;
  gap: 28px;
}
.division-group {}
.division-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.division-name {
  font-family: var(--serif);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.division-count {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.district-chip {
  display: flex; flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--rad-md);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.district-chip:hover {
  background: var(--card-quiet);
  border-color: var(--ink-4);
  transform: translateY(-1px);
}
.district-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}
.district-new-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  padding: 1px 5px;
  margin-left: 4px;
  background: var(--sel-bg, #f3ead0);
  color: var(--sel, #8a5a24);
  border-radius: 3px;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.district-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ============================================================
   Landing hero (index.html .study-hero-lead) — an auto-running
   preview of the atlas that cycles three steps, with the four
   role cards below. Scene state on .hl-stage[data-scene="0..2"],
   advanced by StudyHome.js wireDemo().
   ============================================================ */
.study-hero-lead{
  --dstroke:#c9ba95; --dshadow:rgba(74,58,28,.14);
  display:grid;grid-template-columns:1.02fr 1.28fr;gap:clamp(24px,4vw,58px);
  align-items:center;max-width:1160px;margin:6px auto 8px;
}
@media (prefers-color-scheme:dark){.study-hero-lead{--dstroke:#3d424b;--dshadow:rgba(0,0,0,.4)}}
:root[data-theme="dark"] .study-hero-lead{--dstroke:#3d424b;--dshadow:rgba(0,0,0,.4)}
:root[data-theme="light"] .study-hero-lead{--dstroke:#c9ba95;--dshadow:rgba(74,58,28,.14)}
.hl-eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 16px}
.hl-head{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,58px);line-height:1.03;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink);text-wrap:balance}
.hl-head em{font-style:italic;color:var(--accent)}
.hl-sub{font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0 0 26px;font-family:var(--sans)}
.hl-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hl-btn{font-family:var(--sans);font-size:15px;font-weight:600;border-radius:26px;padding:12px 22px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;transition:transform .15s,filter .15s}
.hl-btn:hover{transform:translateY(-1px)}
.hl-btn-primary{background:var(--accent);color:#fff}
.hl-btn-primary:hover{filter:brightness(1.06)}
.hl-btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.hl-facts{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:20px}
.hl-fact b{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);display:block;line-height:1;font-variant-numeric:tabular-nums}
.hl-fact span{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:6px}
/* Frame */
.hl-frame{background:var(--card);border:1px solid var(--hair);border-radius:16px;overflow:hidden;box-shadow:0 24px 58px var(--dshadow)}
.hl-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--hair);background:var(--card-quiet)}
.hl-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-4);opacity:.55}
.hl-bar i:nth-child(1){background:#e0655a}.hl-bar i:nth-child(2){background:#e0a94b}.hl-bar i:nth-child(3){background:#5aa469}
.hl-url{margin-left:10px;font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.hl-stage{position:relative;background:var(--paper-tinted);padding:14px 18px 0;aspect-ratio:620/520;overflow:hidden}
.rajmap{width:100%;height:100%;display:block}
.rajmap .d{fill:var(--paper-warm);stroke:var(--dstroke);stroke-width:.9;stroke-linejoin:round}
.rajmap .jaipur{fill:var(--paper-warm);stroke:var(--dstroke);stroke-width:.9;stroke-linejoin:round;transition:fill .5s,stroke .5s}
.hl-stage:not([data-scene="0"]) .jaipur{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.3}
.layer-rivers,.layer-crops{opacity:0;transition:opacity .6s}
.hl-stage[data-scene] .layer-rivers,.hl-stage[data-scene] .layer-crops{opacity:1}
.hl-stage[data-scene="1"] .layer-rivers,.hl-stage[data-scene="2"] .layer-rivers,.hl-stage[data-scene="1"] .layer-crops,.hl-stage[data-scene="2"] .layer-crops{opacity:.26}
.layer-rivers .rv{fill:none;stroke:#3d84c6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.layer-crops .crop{font-size:14px;text-anchor:middle;dominant-baseline:central}
.pin{opacity:0;transition:opacity .4s}
.hl-stage:not([data-scene="0"]) .pin{opacity:1}
.pin-dot{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.pin-halo{fill:var(--accent);opacity:.16;animation:hlHalo 1.6s ease-out infinite}
@keyframes hlHalo{0%{r:8;opacity:.28}100%{r:20;opacity:0}}
/* Layers panel (scene 0) */
.demo-layers{position:absolute;left:18px;top:16px;width:min(52%,196px);background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:10px 13px;box-shadow:0 12px 30px var(--dshadow);transform:translateX(-140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .4s}
.hl-stage[data-scene="0"] .demo-layers{transform:translateX(0);opacity:1}
.demo-layers .dl-h{font-family:var(--sans);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.demo-layers .dl-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:12px;color:var(--ink-2);padding:4px 0}
.demo-layers .sw{width:28px;height:16px;border-radius:9px;background:var(--ink-4);position:relative;flex:none}
.demo-layers .sw.on{background:var(--accent)}
.demo-layers .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.demo-layers .sw.on::after{left:14px}
/* Language chip */
.chip-hi{position:absolute;top:16px;right:18px;font-family:var(--sans);font-size:12px;font-weight:700;padding:4px 11px;border-radius:16px;background:var(--card);color:var(--ink-3);border:1px solid var(--hair);box-shadow:0 4px 12px var(--dshadow);transition:background .4s,color .4s}
.hl-stage[data-scene="2"] .chip-hi{background:var(--accent);color:#fff;border-color:transparent}
.chip-hi .lc-hi{display:none}.hl-stage[data-scene="2"] .chip-hi .lc-en{display:none}.hl-stage[data-scene="2"] .chip-hi .lc-hi{display:inline}
/* Mini profile card (scenes 1–2) */
.mini{position:absolute;left:18px;bottom:52px;width:min(58%,232px);background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:12px 14px;box-shadow:0 12px 30px var(--dshadow);transform:translateX(-140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .4s}
.hl-stage:not([data-scene="0"]) .mini{transform:translateX(0);opacity:1}
.mini-k{font-family:var(--sans);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mini-t{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin:2px 0 9px}
.mini-row{display:flex;flex-direction:column;gap:6px}
.mini-pill{align-self:flex-start;font-family:var(--sans);font-size:10px;padding:2px 9px;border-radius:14px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.mini-stat{font-family:var(--sans);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mini .hi-body{display:none}.hl-stage[data-scene="2"] .mini .en-body{display:none}.hl-stage[data-scene="2"] .mini .hi-body{display:flex}
/* Tour caption bar */
.hl-tourbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;background:linear-gradient(to top,var(--card) 62%,transparent);border-top:1px solid var(--hair)}
.hl-cap{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink)}
.hl-cap>span{display:none}.hl-cap b{color:var(--accent);font-weight:700;margin-right:7px}
.hl-stage[data-scene="0"] .hl-cap .c0,.hl-stage[data-scene="1"] .hl-cap .c1,.hl-stage[data-scene="2"] .hl-cap .c2{display:inline}
.hl-dots{display:flex;gap:7px}.hl-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-4);opacity:.5;transition:all .3s}
.hl-stage[data-scene="0"] .hl-dots i:nth-child(1),.hl-stage[data-scene="1"] .hl-dots i:nth-child(2),.hl-stage[data-scene="2"] .hl-dots i:nth-child(3){background:var(--accent);opacity:1;transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){
  .layer-rivers,.layer-crops,.mini,.demo-layers,.jaipur,.pin,.chip-hi{transition:none!important;animation:none!important}
}
@media (max-width:820px){
  .study-hero-lead{grid-template-columns:1fr;gap:26px;margin-bottom:22px}
}

/* ============================================================
   Landing section lead — gives the auto-run hero room to breathe
   and introduces the four role cards with an editorial heading.
   ============================================================ */
.study-hero-lead { margin-bottom: 0; }          /* spacing handled by .ways-lead */
.ways-lead {
  max-width: 1160px;
  margin: clamp(44px, 6vw, 76px) auto 24px;     /* generous gap below the hero */
}
.ways-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.ways-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.15; color: var(--ink); margin: 0; text-wrap: balance;
}
/* Align the role-card grid to the hero width and centre it. */
.role-cards { max-width: 1160px; margin: 0 auto 40px; gap: 18px; }
/* Hide the lead when a sub-view is open (mirrors #role-cards). */
body.view-sub #ways-lead { display: none; }
@media (max-width: 820px) { .ways-lead { margin-top: 32px; } }