/* ===========================================================================
   H Heuristics Digital Reports — platform chrome.

   Loaded after report.css, which supplies the design tokens, the base type,
   the dark site bar and the footer. This file styles only what the library
   pages add on top: the front-page hero, the report cards, topic facets and
   the about page.
   =========================================================================== */

/* --- page header ---------------------------------------------------------- */

.pagehead {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-bottom: 4px solid var(--accent);
  padding: 3.5rem var(--gutter) 3rem;
}
.pagehead-inner { max-width: var(--max-width); margin: 0 auto; }
.pagehead .overline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1.1rem;
}
.pagehead h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
  max-width: 820px;
}
.pagehead p {
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  font-weight: 300;
  color: rgba(240, 237, 230, 0.75);
  line-height: 1.55;
  max-width: 660px;
  margin: 0;
}
.pagehead .cadence {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(200, 169, 81, 0.4);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.cadence .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light);
  flex: none;
}

/* --- shell ---------------------------------------------------------------- */

.shell { max-width: var(--max-width); margin: 0 auto; padding: 3rem var(--gutter) 4rem; }

.band-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.band-title .count { color: var(--text-muted); letter-spacing: 0.08em; }

/* --- lead report ---------------------------------------------------------- */

.lead-report {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--accent);
  padding: 2rem;
  margin-bottom: 3rem;
}
.lead-report .kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.lead-report h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--primary);
  margin: 0 0 0.6rem;
}
.lead-report h2 a { color: inherit; text-decoration: none; }
.lead-report h2 a:hover { color: var(--accent); }
.lead-report .dek {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 68ch;
}
.lead-report .highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1.2rem 0;
  margin: 0 0 1.3rem;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  list-style: none;
}
.lead-report .highlights li { margin: 0; }
.lead-report .highlights b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.lead-report .highlights span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; display: block; margin-top: 0.2rem; }

.readbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff !important;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--primary);
  transition: background 130ms ease;
}
.readbtn:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.readbtn::after { content: "→"; font-size: 0.9em; }

/* --- report cards ---------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  transition: border-left-color 140ms ease, transform 140ms ease;
}
.card:hover { border-left-color: var(--accent); transform: translateY(-2px); }
.card .card-meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.card h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary);
  margin: 0 0 0.5rem;
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card h3 a:hover { color: var(--accent); }
.card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 1rem; }
.card .card-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --- topic chips ------------------------------------------------------------ */

.chip {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
a.chip:hover { color: var(--accent); border-color: var(--accent); }

.topic-rail { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.topic-rail a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.topic-rail a:hover { border-color: var(--accent); color: var(--accent); }
.topic-rail a b { font-family: var(--mono); font-size: 0.66rem; color: var(--text-muted); }

/* --- about / prose ---------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--primary);
  margin: 2.5rem 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-secondary); margin: 0 0 1.1rem; }
.prose ul { padding-left: 1.15rem; color: var(--text-secondary); }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--accent); }

.empty {
  border: 1px dashed var(--border);
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- responsive -------------------------------------------------------------- */

@media (max-width: 760px) {
  .pagehead { padding: 2.5rem var(--gutter) 2.2rem; }
  .lead-report { padding: 1.4rem; }
  .shell { padding-top: 2.2rem; }
}