/* ============================================================
   Hominypedia - wiki skin for Hominy House
   Re-skins the Hominypedia encyclopedia markup in the Hominy
   House palette. Everything is scoped under .hp (on <body>) so
   it can never touch the rest of the site. This file is loaded
   only on Hominypedia pages, after the site's styles.css.
   ============================================================ */

/* ---------- Hominypedia sub-navigation (sticky under the top banner) ---------- */
body.hp { --hp-nav-h: 52px; }
.hp-nav {
  position: sticky;
  top: var(--banner-h);
  z-index: 40;
  border-bottom: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(20, 16, 9, 0.96), rgba(10, 8, 6, 0.9));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  scroll-margin-top: calc(var(--banner-h) + var(--hp-nav-h) + 12px);
}
.hp-nav__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px clamp(18px, 4vw, 44px);
}
.hp-nav__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hp-nav__brand::after {
  content: "A Lightweight Wikipedia Fork";
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: none;
  color: var(--text-dim);
  opacity: 0.75;
}
.hp-nav__inner { min-height: var(--hp-nav-h); }
.hp-nav a {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hp-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); border-color: var(--panel-line); }
.hp-nav a[aria-current="page"] {
  color: #0a0a0c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  font-weight: 700;
}

/* ---------- Layout: rail + article ---------- */
.hp .layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 34px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(18px, 4vw, 44px) 70px;
}
.hp .rail {
  position: sticky;
  top: calc(var(--banner-h) + var(--hp-nav-h) + 16px);
  display: block;
  flex: 0 0 220px;
  width: 220px;
  /* Cap the rail to the space actually left below the sticky banner + sub-nav
     (top offset + a little breathing room) so its own scrollbar can reach the
     last entry instead of hiding it under the viewport until the page bottoms out. */
  max-height: calc(100vh - var(--banner-h) - var(--hp-nav-h) - 32px);
  overscroll-behavior: contain;
  overflow-y: auto;
  font-size: 0.82rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 87, 28, 0.5) transparent;
}
.hp .rail::-webkit-scrollbar { width: 8px; }
.hp .rail::-webkit-scrollbar-track { background: transparent; }
.hp .rail::-webkit-scrollbar-thumb { background: rgba(226, 87, 28, 0.4); border-radius: 8px; }
.hp .rail::-webkit-scrollbar-thumb:hover { background: rgba(226, 87, 28, 0.7); }
.hp .rail-box {
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Rail boxes are <details> so the phone layout can fold them shut. On the wide
   layout they stay open and render exactly like a plain box + heading. */
.hp .rail .rail-box > summary {
  list-style: none;
  cursor: default;
}
.hp .rail .rail-box > summary::-webkit-details-marker { display: none; }
.hp .rail .rail-box > summary::marker { content: ''; }

.hp .rail h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hp .rail ol, .hp .rail ul { list-style: none; margin: 0; padding: 0; }
.hp .rail li { margin: 1px 0; }
.hp .rail a {
  display: block;
  padding: 5px 9px;
  border-radius: 9px;
  color: var(--text-dim);
  border-bottom: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.hp .rail a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.hp .rail .num { color: var(--accent-2); margin-right: 7px; font-variant-numeric: tabular-nums; }

/* Expandable genre tree in the Bands page rail */
.hp .rail .rail-genre__row { display: flex; align-items: center; gap: 2px; }
.hp .rail .rail-genre__row > a { flex: 1 1 auto; min-width: 0; }
.hp .rail .rail-plus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent-2);
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hp .rail .rail-plus:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); border-color: rgba(226, 87, 28, 0.45); }
.hp .rail .rail-plus[aria-expanded="true"] { color: #0a0a0c; background: var(--accent-2); border-color: var(--accent-2); }
.hp .rail .rail-bands { margin: 2px 0 6px; }
.hp .rail .rail-bands li { margin: 0; }
.hp .rail .rail-bands a { padding: 3px 9px 3px 19px; font-size: 0.78rem; color: var(--text-dim); }
.hp .rail .rail-bands a:hover { color: var(--text); }

/* ---------- Article ---------- */
.hp .article { flex: 1 1 auto; min-width: 0; max-width: 860px; padding: 0 0 40px; }
.hp .crumbs { font-size: 0.8rem; color: var(--text-dim); margin: 0 0 12px; }
.hp .crumbs a { color: var(--accent-2); }
.hp .page-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}
.hp .page-sub { margin: 0 0 6px; font-size: 0.92rem; font-style: italic; color: var(--text-dim); }
.hp .title-rule {
  margin: 14px 0 20px;
  border: none;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 40%, transparent 88%);
  opacity: 0.85;
}
.hp .article h2 {
  margin: 34px 0 12px;
  padding-bottom: 7px;
  /* Keep a jumped-to heading fully clear of the sticky banner + sub-nav
     so rail links land with the whole heading visible. */
  scroll-margin-top: calc(var(--banner-h) + var(--hp-nav-h) + 22px);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid var(--panel-line);
}
.hp .article h2::before { content: "\25B6"; color: var(--accent); font-size: 0.72rem; margin-right: 9px; vertical-align: middle; }
.hp .article h3 {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-2);
}
.hp .article p { margin: 0 0 14px; color: var(--text); }
.hp .lead { font-size: 1.05rem; color: #f1e9da; }
.hp .lead strong { color: var(--accent-2); }

/* body links inside the encyclopedia */
.hp .article a { color: var(--accent-2); border-bottom: 1px solid transparent; }
.hp .article a:hover { color: #ffcf7a; border-bottom-color: currentColor; }
.hp .article a.ext::after { content: " \2197"; font-size: 0.7rem; color: var(--text-dim); }

/* ---------- Infobox ---------- */
.hp .infobox {
  float: right;
  width: 300px;
  margin: 0 0 16px 22px;
  padding: 12px;
  font-size: 0.82rem;
  background: linear-gradient(180deg, rgba(28, 20, 12, 0.8), var(--panel));
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.hp .infobox-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-2);
  margin-bottom: 10px;
}
.hp .infobox-image { border: 1px solid var(--panel-line); border-radius: 10px; overflow: hidden; background: #0b0a08; margin-bottom: 10px; }
.hp .infobox-image img, .hp .infobox-image svg { display: block; width: 100%; height: auto; }
.hp .infobox-table { width: 100%; border-collapse: collapse; }
.hp .infobox-table th, .hp .infobox-table td {
  padding: 6px 7px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgba(244, 190, 120, 0.12);
}
.hp .infobox-table tr:first-child th, .hp .infobox-table tr:first-child td { border-top: none; }
.hp .infobox-table th { width: 42%; color: var(--text); font-weight: 600; padding-right: 10px; }
.hp .infobox-table td { color: var(--text-dim); }

/* ---------- Feature figures + gallery ---------- */
.hp .feature { margin: 16px 0 22px; }
.hp .feature img { display: block; width: 100%; height: auto; border: 1px solid var(--panel-line); border-radius: 12px; }
.hp .feature figcaption { margin-top: 6px; font-size: 0.74rem; color: var(--text-dim); }
.hp .feature.right { float: right; width: 280px; margin: 4px 0 14px 20px; }
.hp .feature.left { float: left; width: 280px; margin: 4px 20px 14px 0; }
.hp .photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 18px 0 22px; }
.hp .photogrid figure { margin: 0; }
.hp .photogrid img { display: block; width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--panel-line); border-radius: 10px; }
.hp .photogrid figcaption { margin-top: 6px; font-size: 0.74rem; line-height: 1.45; color: var(--text-dim); }
.hp .photogrid figcaption strong { color: var(--accent-2); }

/* ---------- Tables ---------- */
.hp .wikitable {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.86rem;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  overflow: hidden;
}
.hp .wikitable th, .hp .wikitable td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid rgba(244, 190, 120, 0.12);
}
.hp .wikitable thead th {
  background: rgba(226, 87, 28, 0.16);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.hp .wikitable tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.hp .wikitable tbody tr:hover { background: rgba(226, 87, 28, 0.07); }
.hp .wikitable a { color: var(--accent-2); }

/* Discography: hug the content so the year sits beside the title. */
.hp .discog-table { width: auto; min-width: 320px; max-width: 100%; }
.hp .discog-table th:not(:first-child),
.hp .discog-table td:not(:first-child) { white-space: nowrap; }

/* ---------- Lists ---------- */
.hp .wiki-list { margin: 8px 0 18px; padding-left: 22px; }
.hp .wiki-list li { margin: 5px 0; }
.hp .wiki-list li::marker { color: var(--accent); }
.hp .two-col { columns: 2; column-gap: 34px; }

/* ---------- Callouts / quotes ---------- */
.hp .callout {
  margin: 14px 0 20px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(226, 87, 28, 0.1), rgba(226, 87, 28, 0.02));
  border: 1px solid var(--panel-line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}
.hp .callout.green { border-left-color: #9ccb6a; background: linear-gradient(180deg, rgba(156, 203, 106, 0.08), transparent); }
.hp .callout.purple { border-left-color: #b184e0; background: linear-gradient(180deg, rgba(177, 132, 224, 0.08), transparent); }
.hp .callout p:last-child { margin-bottom: 0; }
.hp .callout .label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.hp .quote {
  margin: 14px 0;
  padding: 10px 0 10px 18px;
  border-left: 3px solid var(--accent-3);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-dim);
}
.hp .quote cite { display: block; margin-top: 6px; font-size: 0.78rem; font-style: normal; color: var(--text-dim); }

/* ---------- Cards (family tree, genre grids) ---------- */
.hp .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.hp .card {
  position: relative;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--panel), rgba(20, 16, 9, 0.5));
  border: 1px solid var(--panel-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.hp .card::before { content: none; }               /* drop the main-site glow overlay */
.hp .card:hover { transform: translateY(-3px); border-top-color: var(--accent-2); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.hp .card h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--text); }
.hp .card h4 a { color: inherit; }
/* Reserve two lines for every card blurb so all covers line up in a row. */
.hp .card p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); min-height: 2.9em; }
.hp .card .tag {
  display: inline-block;
  margin-top: 9px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
/* Album cover that represents each genre, shown under the card text */
.hp .card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 10px 0 0;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #0b0a08;
}

/* ---------- Multiple-genre marker ---------- */
.hp .multi { color: var(--accent); font-weight: 700; }
.hp .multi-note { margin: 18px 0 26px; color: var(--text-dim); }

/* ---------- Badges ---------- */
.hp .badge {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 6px 4px 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
}
.hp .badge.amber { color: #0a0a0c; background: var(--accent-2); border-color: var(--accent-2); }
.hp .badge.green { color: #0a0a0c; background: #9ccb6a; border-color: #9ccb6a; }
.hp .badge.purple { color: #0a0a0c; background: #b184e0; border-color: #b184e0; }

/* ---------- References ---------- */
.hp .reflist { font-size: 0.84rem; color: var(--text-dim); padding-left: 24px; }
.hp .reflist li { margin: 7px 0; }
.hp .reflist li::marker { color: var(--accent); }
.hp .linkrow { margin: 6px 0; }

/* ---------- Categories ---------- */
.hp .catlinks {
  margin-top: 30px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  font-size: 0.8rem;
}
.hp .catlinks strong { color: var(--accent-2); margin-right: 8px; }
.hp .catlinks a {
  display: inline-block;
  margin: 3px 5px 3px 0;
  padding: 2px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--text-dim);
}
.hp .catlinks a:hover { color: var(--text); border-color: rgba(226, 87, 28, 0.45); }

/* ---------- Prev / next pager ---------- */
.hp .pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin: 30px 0 6px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-line);
}
.hp .pager a, .hp .pager span {
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 48%;
  padding: 9px 14px;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--text-dim);
}
.hp .pager a:hover { border-color: rgba(226, 87, 28, 0.45); color: var(--text); }
.hp .pager .dir {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hp .pager .ttl { color: var(--text); font-weight: 600; }

/* ---------- Page footer (Hominypedia attribution) ---------- */
.hp .page-footer {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-line);
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ---------- Misc ---------- */
.hp .small { font-size: 0.82rem; color: var(--text-dim); }
.hp .rule { border: none; height: 1px; background: var(--panel-line); margin: 24px 0; }
.hp .nowrap { white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Menu stays at the top, but folded to two thin bars, so it is always
     visible yet never pushes the article far down the page. */
  .hp .layout { flex-direction: column; gap: 18px; padding: 16px 14px 48px; }
  .hp .rail { position: static; width: 100%; flex-basis: auto; max-height: none; margin-bottom: 6px; }

  /* Each rail box folds into one tappable bar; an opened box is height-capped
     so it can never swallow the whole screen. */
  .hp .rail .rail-box { padding: 0; }
  .hp .rail .rail-box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px;
    cursor: pointer;
  }
  .hp .rail .rail-box > summary h3 { margin: 0; }
  .hp .rail .rail-box > summary::after {
    content: '\25BE';
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--accent-2);
    transition: transform 0.2s var(--ease);
  }
  .hp .rail .rail-box[open] > summary::after { transform: rotate(180deg); }
  .hp .rail .rail-box > *:not(summary) {
    padding: 4px 16px 14px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Roomier touch targets than the desktop rail. */
  .hp .rail a { padding: 9px 9px; }
  .hp .rail .rail-plus { width: 28px; height: 28px; font-size: 1.05rem; }
  .hp .rail .rail-toc ol a,
  .hp .rail .rail-bands a { padding: 8px 9px; }

  .hp .article { max-width: 100%; }
  .hp .infobox { float: none; width: 100%; margin: 0 0 18px; }
  .hp .feature.right, .hp .feature.left { float: none; width: 100%; margin: 0 0 18px; }
  .hp .two-col { columns: 1; }
  .hp .pager a, .hp .pager span { max-width: 100%; }
}
/* The wide layout must never fold, so the disclosure is inert there. */
@media (min-width: 981px) {
  .hp .rail .rail-box > summary { pointer-events: none; }
}
@media (max-width: 620px) {
  .hp .page-title { font-size: 1.7rem; }
  .hp-nav__brand { display: none; }
  .hp .card .tag { font-size: 0.6rem; }
}

/* ---------- Print ---------- */
@media print {
  .hp-nav, .hp .rail { display: none; }
  .hp .layout { display: block; padding: 0; }
  .hp .infobox { border: 1px solid #000; }
}

/* ============================================================
   Wikipedia-derived genre articles
   ------------------------------------------------------------
   The genre pages now carry the text of their English Wikipedia
   article, so conversion produces a little markup the skin does
   not otherwise use. Everything below stays scoped to .hp.
   ============================================================ */

/* ---- Nested table of contents in the rail ---- */
.hp .rail .rail-toc { margin: 0; padding: 0; list-style: none; }
.hp .rail .rail-toc ol {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--panel-line);
  list-style: none;
}
.hp .rail .rail-toc li { margin: 1px 0; }
.hp .rail .rail-toc > li > a { color: var(--text); font-weight: 600; }
.hp .rail .rail-toc ol a { padding: 3px 9px; font-size: 0.78rem; }
/* Parent rows reuse the Bands rail's +/- control; subsections stay folded. */
.hp .rail .rail-toc__parent > .rail-genre__row { margin: 1px 0; }
.hp .rail .rail-toc__parent > .rail-genre__row > a { color: var(--text); font-weight: 600; }
.hp .rail .rail-toc__sub { margin-top: 1px; }
.hp .rail .rail-toc__sub[hidden] { display: none; }

/* ---- Body elements carried over from the source article ---- */
/* Sub-section headings need the banner offset too, or a rail jump lands with
   the heading hidden behind the sticky banner + Hominypedia sub-nav. */
.hp .article h2, .hp .article h3, .hp .article h4, .hp .article h5, .hp .article h6 {
  scroll-margin-top: calc(var(--banner-h) + var(--hp-nav-h) + 20px);
}
.hp .article .hatnote {
  margin: 0 0 14px;
  padding-left: 1.5em;
  font-style: italic;
  color: var(--text-dim);
}
.hp .article ul, .hp .article ol { margin: 8px 0 18px; padding-left: 24px; }
.hp .article li { margin: 5px 0; }
.hp .article li::marker { color: var(--accent); }
.hp .article dl { margin: 8px 0 18px; }
.hp .article dt { font-weight: 600; color: var(--text); }
.hp .article dd { margin: 0 0 8px 24px; color: var(--text-dim); }
.hp .article blockquote {
  margin: 16px 0;
  padding: 8px 0 8px 18px;
  border-left: 3px solid var(--accent-3);
  color: var(--text-dim);
}
.hp .article .div-col, .hp .article .columns { columns: 2; column-gap: 34px; }
.hp .article .plainlist { padding-left: 0; list-style: none; }
.hp .article .plainlist li { margin: 2px 0; }
.hp .article .table-scroll { overflow-x: auto; margin: 12px 0 20px; }
.hp .article .table-scroll .wikitable { margin: 0; }
.hp .article .wikitable caption {
  padding: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: left;
}

/* ---- Inline citations and the reference list ---- */
.hp .article sup.reference { font-size: 0.72em; line-height: 1; }
.hp .article sup.reference a { border-bottom: none; }
.hp .article .cite-bracket { color: var(--text-dim); }
.hp .article ol.reflist { padding-left: 26px; font-size: 0.84rem; }
.hp .article ol.reflist li { margin: 7px 0; }
.hp .article .reflist .reference-text,
.hp .article .reference-accessdate { color: var(--text-dim); }

/* ---- Section affordances: "Back to Top" + folded reference lists ---- */
.hp .article h2 > .h-top {
  float: right;
  margin: 7px 0 0 16px;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.8;
}
.hp .article h2 > .h-top:hover { color: var(--accent-2); opacity: 1; }
.hp .article h2 > .h-top:focus-visible {
  color: var(--accent-2);
  opacity: 1;
  outline: 1px solid var(--accent-2);
  outline-offset: 3px;
}

/* Citation lists fold shut; the sidebar links and the in-text citations in the
   body open them again (see the reveal handler in site.js). */
.hp .article details.refs { margin: 34px 0 0; }
.hp .article details.refs > summary.refs__head {
  margin: 0 0 12px;
  list-style: none;
  cursor: pointer;
  scroll-margin-top: calc(var(--banner-h) + var(--hp-nav-h) + 22px);
}
.hp .article details.refs > summary.refs__head::-webkit-details-marker { display: none; }
.hp .article details.refs > summary.refs__head > h2,
.hp .article details.refs > summary.refs__head > h3 { margin: 0; }
.hp .article details.refs > summary.refs__head:hover > h2,
.hp .article details.refs > summary.refs__head:hover > h3 { color: var(--accent-2); }
.hp .article details.refs .refs__chev {
  float: right;
  margin: 8px 0 0 8px;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--accent-2);
  transition: transform 0.2s var(--ease);
}
.hp .article details.refs .refs__chev::before { content: "\25BE"; }
.hp .article details.refs[open] .refs__chev { transform: rotate(180deg); }
.hp .article details.refs ol.reflist li:target { background: var(--accent-soft); }
.hp .article details.refs ol.reflist li {
  /* Keep a jumped-to entry clear of the sticky banner + sub-nav. */
  scroll-margin-top: calc(var(--banner-h) + var(--hp-nav-h) + 22px);
}

/* Wikipedia emits {{cite news}} as <cite class="citation news cs1">. The bare
   "news" class collides with the main site's News panel rule (styles.css .news),
   which would box those citations, cap their height and hide the overflow.
   Put the citation itself back to plain inline text. */
.hp .article cite.news,
.hp .article .citation.news {
  position: static;
  display: inline;
  flex-direction: row;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
  scrollbar-width: auto;
  scrollbar-color: auto;
}

/* ---- Text-only infobox ---- */
.hp .infobox-table td { overflow-wrap: anywhere; }
.hp .infobox-table th[colspan] {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}

@media (max-width: 980px) {
  .hp .article .div-col, .hp .article .columns { columns: 1; }
}