/* site.css — HyperTorah */
:root {
  --bg:          #0d0d0d;
  --paper:       #161616;
  --panel:       rgba(22, 22, 22, 0.88);
  --panel-2:     rgba(20, 20, 20, 0.76);
  --panel-3:     rgba(16, 16, 16, 0.72);
  --ink:         #f0f0f0;
  --ink-strong:  #ffffff;
  --muted:       #999999;
  --muted-2:     #bbbbbb;
  --line:        rgba(68, 136, 255, 0.15);
  --line-strong: rgba(68, 136, 255, 0.30);
  --accent:      #4488ff;
  --accent-2:    #2266dd;
  --accent-soft: rgba(68, 136, 255, 0.14);
  --link:        #88aaff;
  --link-hover:  #bbccff;
  --danger:      #ff8a65;
  --ok:          #5fd49a;
}

.brand-logo { width: 21rem; height: 9rem; }

.hero-diagram-frame { display: none; }

/* Collapse full-viewport hero; title only, centered */
.hero {
  min-height: auto;
  display: block;
  padding: 3rem 0 0;
}

/* Match hero-card width to the text column below */
.hero-card {
  width: min(100% - 3rem, 72rem);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Collapse two-column grid — diagram is hidden, title should span full width */
.hero-grid {
  grid-template-columns: 1fr;
}

.hero-card h1 {
  max-width: none;
  margin-bottom: 0;
  text-align: center;
  font-family: "Gill Sans", "GillSans-Light", "Gill Sans MT", Calibri, sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.hero-title-hyper { color: #1a527a; }
.hero-title-torah { color: #c49a27; font-weight: 700; }

/* Close the gap between card and intro */
.hero-intro {
  margin-top: 1.5rem;
}

/* ── Shared term/definition list — used in hero-intro and help page ── */
.help-nav-list {
  margin: 0.75rem 0 0;
  padding: 0;
}

.help-nav-list__entry {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 0 2rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line, rgba(68,136,255,0.15));
}
.help-nav-list__entry:last-child { border-bottom: none; }

.help-nav-list__term {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-strong, #ffffff);
  margin: 0;
}

.help-nav-list__def {
  color: var(--muted, #999999);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 640px) {
  .help-nav-list__entry {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ── Hero intro ───────────────────────────────────────────────────── */
.hero-intro {
  width: min(100% - 3rem, 72rem);
  margin: 3rem auto 4rem;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--ink, #f0f0f0);
  line-height: 1.65;
}

.hero-intro__lead {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.hero-intro p {
  max-width: none;
}

.hero-intro__lead p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink, #f0f0f0);
  margin: 0 0 1rem;
}
.hero-intro__lead p:last-child { margin-bottom: 0; }

.hero-intro__lead strong { color: var(--ink-strong); font-weight: 600; }

.hero-intro__detail {
  margin-bottom: 2.5rem;
}

.hero-intro__subheading {
  font-family: var(--font-heading, "IBM Plex Sans", sans-serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-strong, #ffffff);
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.hero-intro__detail > .hero-intro__subheading:first-child { margin-top: 0; }

.hero-intro__prose {
  color: var(--muted, #999999);
  line-height: 1.65;
  margin: 0.75rem 0;
}

.hero-intro__list {
  color: var(--muted, #999999);
  line-height: 1.65;
  margin: 1.25rem 0 0.75rem;
  padding-left: 1.25rem;
}
.hero-intro__list li { margin: 0.5rem 0; }
.hero-intro__list a { color: var(--ink-link, #60a5fa); }
.hero-intro__list a:hover { text-decoration: underline; }

/* ── Hero explore CTA ─────────────────────────────────────────────── */
.hero-explore {
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius, 0.75rem);
  background: var(--panel, rgba(22,22,22,0.88));
}

.hero-explore__invitation {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent, #4488ff);
  margin: 0 0 0.75rem;
}

.hero-explore__indices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-explore__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2, rgba(20,20,20,0.76));
  color: var(--link, #88aaff);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.hero-explore__link:hover {
  background: var(--accent-soft, rgba(68,136,255,0.14));
  border-color: var(--accent, #4488ff);
  color: var(--link-hover, #bbccff);
}

@media (max-width: 640px) {
  .hero-intro { margin-top: 2rem; }
  .hero-explore { padding: 1.25rem 1rem; }
  .hero-explore__indices { flex-direction: column; }
}

/* ── Sidebar layout — unified across hero and concept pages (desktop) ──
   Both pages use the framework's .concept-index-pane (a sticky flex column) but
   the framework sizes it as calc(100vh - 6.4rem), calibrated for a short
   topbar. This site overrides the brand logo to 9rem, so the topbar is ~10.75rem
   and the pane's RESTING top sits at ~13.25rem (topbar + main padding). At that
   resting position the framework height overflows the viewport, pushing the
   narrative index below the fold until you scroll the whole page. We re-size the
   pane from its real resting top so the entire sidebar fits on landing with no
   page scroll, and cap the concept list so the (collapsed) narrative summary is
   always visible — the concept index then scrolls internally to reveal its
   lower categories.

   The lists are sized with max-height (not flex height): flex height does NOT
   propagate through the <details> sections, so a flex-sized list never scrolls.
   --ht-sidebar-area is the height available for the two lists + their summaries;
   keeping it in one custom property keeps the collapsed cap and the 70/30 split
   consistent. Selectors match the framework's specificity and site.css loads
   after default.css, so equal-specificity rules win. */
@media (min-width: 721px) {
  .concept-index-pane {
    /* fits at rest: resting top ≈ 13.25rem, leave ~0.75rem bottom breathing room */
    top: 11rem;
    height: calc(100vh - 14rem);
    max-height: calc(100vh - 14rem);
    /* height available for list content after the two section summaries/chrome */
    --ht-sidebar-area: calc(100vh - 20rem);
  }

  /* Narrative collapsed: concept list fills the area, leaving room for the
     narrative summary; scrolls internally to its last category. */
  .concept-index-section[open] > .concept-index-list,
  .concept-index-pane > .concept-index-section[open]:has(+ .narrative-index-section:not([open])) .concept-index-list {
    max-height: var(--ht-sidebar-area);
  }

  /* Narrative open: let its <details> grow to fit the capped list, then split
     the available area ~70% concept / ~30% narrative. */
  .narrative-index-section[open] { max-height: none; }
  .concept-index-pane:has(.narrative-index-section[open]) > .concept-index-section[open] > .concept-index-list {
    max-height: calc(var(--ht-sidebar-area) * 0.7);
  }
  .narrative-index-section[open] > .narrative-list {
    max-height: calc(var(--ht-sidebar-area) * 0.3);
  }
}

/* ── Sidebar index content (grouped HyperTorah index) ───────────────────────
   These style the index built by site-sidebar.js. They live here (always
   loaded) rather than only in the skin CSS so the hero page — which does not
   activate the concept skin — renders the index identically to concept pages.
   Kept in sync with skins/concept-hypertorah/concept-hypertorah.css. */
.ht-idx-kind-section {
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--line, rgba(68,136,255,0.15));
  padding-bottom: 0.3rem;
  margin-top: 0.3rem;
}
.ht-idx-kind-section:last-child { border-bottom: none; }
.ht-idx-kind-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-2, #bbb);
  cursor: pointer;
  padding: 0.2rem 0.1rem;
  user-select: none;
  list-style: none;
}
.ht-idx-kind-heading::-webkit-details-marker { display: none; }
.ht-idx-kind-heading::before { content: "▸ "; font-size: 0.6rem; }
.ht-idx-kind-section[open] > .ht-idx-kind-heading::before { content: "▾ "; }
.ht-idx-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent, #4488ff);
  padding: 0.25rem 0 0.1rem 0.4rem;
  margin-top: 0.25rem;
}
.ht-idx-item { padding: 0; }
.ht-idx-link {
  display: block;
  padding: 0.14rem 0.25rem 0.14rem 0.85rem;
  font-size: 0.8rem;
  color: var(--ink, #f0f0f0);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.3;
  transition: color 0.1s, border-color 0.1s;
}
.ht-idx-link:hover {
  color: var(--link, #88aaff);
  border-left-color: var(--accent, #4488ff);
}
.ht-idx-link.active {
  color: var(--link, #88aaff);
  font-weight: 700;
  border-left-color: var(--accent, #4488ff);
  background: var(--accent-soft, rgba(68,136,255,0.14));
}

/* Sidebar chiasm index */
.ht-chiasm-idx-book { margin-bottom: 0.75rem; }
.ht-chiasm-idx-book-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #999);
  padding: 0.3rem 0.5rem 0.15rem;
}
.ht-chiasm-idx-link {
  display: block;
  font-size: 0.82rem;
  color: var(--ink, #f0f0f0);
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}
.ht-chiasm-idx-link:hover { color: var(--link, #88aaff); }
.ht-chiasm-idx-link.active { color: var(--link, #88aaff); font-weight: 700; }
.ht-chiasm-idx-level-lbl {
  font-size: 0.7rem;
  color: var(--muted, #999);
  padding: 0 0.5rem 0.2rem;
  font-style: italic;
}

/* ── Chiasm row highlight (anchor navigation) ───────────────────────────────── */
@keyframes htChiasmRowPulse {
  0%   { background: var(--accent-soft, rgba(68,136,255,0.18)); outline: 2px solid var(--accent, #4488ff); }
  70%  { background: var(--accent-soft, rgba(68,136,255,0.10)); outline: 2px solid var(--accent, #4488ff); }
  100% { background: transparent; outline: 2px solid transparent; }
}
.ht-chiasm-pair-highlight {
  animation: htChiasmRowPulse 2.4s ease-out forwards;
}

/* ── Wikilink styles ─────────────────────────────────────────────────────────── */

a.wikilink { text-decoration: underline dotted; }
.wikilink-broken {
  color: var(--color-error, #c0392b);
  text-decoration: underline wavy var(--color-error, #c0392b);
  font-style: italic;
}
/* ── Scrolly diagram slides (SVG diagrams need contain, not cover) ────────── */
body.skin-scrolly .scrolly-stage .scrolly-image-pane {
  background-color: #060d16;
}
body.skin-scrolly .scrolly-stage .scrolly-slide {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #060d16;
}

.wikilink-ref {
  font-size: 0.82em;
  opacity: 0.7;
  margin-left: 0.15em;
}