/* ===========================================================================
   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.
   =========================================================================== */

/* --- 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); }

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

/* --- read button (front page lead) ------------------------------------------- */

.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; }

/* ===========================================================================
   Front page — an editorial index.

   A paper nameplate under the dark site bar, the lead report set beside a
   "cover" in that report's own masthead colour (--rc, from report.json's
   themeColor), recent reports as cover cards, topic tiles and the whole
   series as a numbered contents list. Wider than the reading pages.
   The Reports, Topics and About pages share the same pieces (see the
   "library pages" block below).
   =========================================================================== */

body:has(.fp) .sitebar__inner { max-width: 1200px; }

.fp-wrap { max-width: 1200px; margin: 0 auto; }
.fp { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; }
.fp { padding: 0 var(--gutter) 4.5rem; }

/* nameplate */
.fp-head {
  padding: 2.2rem var(--gutter) 0;
  background: var(--bg);
}
.fp-topline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--text);
}
.fp-topline span:first-child { color: var(--accent); }
.fp-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(3.2rem, 11vw, 8.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--primary);
  margin: 0;
  padding: 1.6rem 0 1.4rem;
  border-bottom: 4px double var(--text);
}
.fp-strap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem 3rem;
  align-items: center;
  padding: 1.25rem 0 1.4rem;
  border-bottom: 1px solid var(--text);
}
.fp-strap p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.1vw, 1.38rem);
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 46ch;
}
.fp-stats { display: flex; margin: 0; }
.fp-stats div {
  padding: 0 1.6rem;
  border-left: 1px solid var(--rule);
  text-align: left;
}
.fp-stats div:first-child { border-left: 0; padding-left: 0; }
.fp-stats dt {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-stats dd {
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: lining-nums tabular-nums;
}

/* lead report + cover */
.fp-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0 3rem;
  padding: 2.8rem 0 3.2rem;
  border-bottom: 1px solid var(--rule);
}
.fp-kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.fp-kicker span {
  display: inline-block;
  background: var(--rc);
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin-right: 0.6rem;
}
.fp-lead h2 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0 0 0.7rem;
}
.fp-lead h2 a { color: inherit; text-decoration: none; }
.fp-lead h2 a:hover { color: var(--accent); }
.fp-lead__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0 0 1.3rem;
}
.fp-lead__dek {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-light);
}
.fp-lead__dek::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 600;
  color: var(--rc);
  padding: 0.08em 0.1em 0 0;
}
.fp-lead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.fp-lead .readbtn { background: var(--rc); border-color: var(--rc); }
.fp-lead .readbtn:hover { background: var(--accent); border-color: var(--accent); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.fp-cover {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding: 1.8rem 1.8rem 1.6rem;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    var(--rc);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.55);
  transition: transform 160ms ease;
}
.fp-cover:hover { transform: translateY(-3px); color: #fff; }
.fp-cover__no {
  position: absolute;
  top: -0.12em;
  right: 0.08em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}
.fp-cover__label {
  position: relative;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 6rem 0 0.4rem;
}
.fp-cover ul { position: relative; list-style: none; margin: 0; padding: 0; }
.fp-cover li {
  padding: 0.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fp-cover li b {
  display: block;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.1;
}
.fp-cover li span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.76);
}

/* section bands */
.fp-band { padding-top: 3rem; }
.fp-band__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding-top: 0.7rem;
  border-top: 3px solid var(--text);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.fp-band__title a,
.fp-band__count { color: var(--accent); text-decoration: none; letter-spacing: 0.1em; }
.fp-band__count { color: var(--text-muted); }
.fp-band__title a:hover { text-decoration: underline; }

/* cover cards */
.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}
.fp-card { position: relative; display: flex; flex-direction: column; }
.fp-card__band {
  position: relative;
  overflow: hidden;
  height: 7.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    var(--rc);
  transition: transform 160ms ease;
}
.fp-card:hover .fp-card__band { transform: translateY(-3px); }
.fp-card__no {
  position: absolute;
  top: -0.18em;
  right: 0.06em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.16);
}
.fp-card__topic {
  position: relative;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.fp-card__body { padding-top: 0.9rem; }
.fp-card__meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}
.fp-card h3 {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  margin: 0 0 0.55rem;
}
.fp-card h3 a { color: inherit; text-decoration: none; }
.fp-card h3 a::after { content: ""; position: absolute; inset: 0; }
.fp-card:hover h3 a { color: var(--accent); }
.fp-card p:last-child {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* topic tiles */
.fp-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.fp-topic {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.1rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text-secondary);
  transition: background 130ms ease;
}
.fp-topic b {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.fp-topic span { font-size: 0.86rem; line-height: 1.3; }
.fp-topic:hover { background: var(--bg-accent); color: var(--primary); }

/* full index */
.fp-idx { list-style: none; margin: 0; padding: 0; }
.fp-idx li {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr) 15rem 8.5rem;
  gap: 0.3rem 1.4rem;
  align-items: baseline;
  padding: 0.85rem 0 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid var(--rc);
  transition: background 120ms ease;
}
.fp-idx li:hover { background: var(--bg-card); }
.fp-idx__no,
.fp-idx__date,
.fp-idx__topics {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-idx__no { color: var(--text); font-weight: 500; }
.fp-idx__date { text-align: right; padding-right: 0.4rem; }
.fp-idx__title a {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary);
  text-decoration: none;
}
.fp-idx__title a:hover { color: var(--accent); }
.fp-idx__title small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* about */
.fp-about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 3rem;
}
.fp-about__cols p { margin: 0; color: var(--text-secondary); line-height: 1.65; }

/* ---------------------------------------------------------------------------
   Library pages — Reports, Topics, a topic, About, 404. Same nameplate as the
   front page at a smaller title size, then the same bands, covers and index.
   --------------------------------------------------------------------------- */

.fp-title--page { font-size: clamp(2.8rem, 8.5vw, 6.2rem); }
.fp-band[id] { scroll-margin-top: 1.5rem; }

/* reports: filter + view switch */
.fp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 1.3rem 0 0;
}
.fp-tools[hidden] { display: none; }
.fp-filter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 18rem;
  max-width: 28rem;
  border-bottom: 1px solid var(--text);
}
.fp-filter span,
.fp-tools__count {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-filter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.55rem 0;
  font: inherit;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--primary);
}
.fp-filter input:focus { outline: none; }
.fp-filter:focus-within { border-bottom-color: var(--accent); }
.fp-views { display: flex; margin-left: auto; border: 1px solid var(--text); }
.fp-views button {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.fp-views button + button { border-left: 1px solid var(--text); }
.fp-views button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.fp-none {
  padding: 2.5rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--text-muted);
}
.fp-card[hidden], .fp-band[hidden] { display: none; }

/* reports: list view — covers collapse to a colour strip beside the text */
.fp--list .fp-grid { grid-template-columns: 1fr; gap: 0; }
.fp--list .fp-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
}
.fp--list .fp-card__band { height: auto; min-height: 4.6rem; padding: 0.5rem; }
.fp--list .fp-card:hover .fp-card__band { transform: none; }
.fp--list .fp-card__no { font-size: 3.6rem; top: auto; bottom: -0.16em; color: rgba(255, 255, 255, 0.3); }
.fp--list .fp-card__topic { display: none; }
.fp--list .fp-card__body { padding-top: 0; }
.fp--list .fp-card p:last-child { -webkit-line-clamp: 2; max-width: 80ch; }

/* topics: latest cover beside a compact index of the rest */
.fp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.6rem 2.4rem;
  align-items: start;
}
.fp-idx--compact li { grid-template-columns: 6.2rem minmax(0, 1fr) 8.5rem; }
.fp-idx--compact .fp-idx__topics { display: none; }
.fp-idx--compact li:first-child { border-top: 1px solid var(--border-light); }
.fp-more {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-more a { color: var(--accent); text-decoration: none; }
.fp-more a:hover { text-decoration: underline; }

/* about */
.fp-about__cols--lead p {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text);
}
.fp-principles {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.fp-principles li {
  padding: 1.2rem 1.3rem 1.4rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
}
.fp-principles__no {
  display: block;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.fp-principles h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 0.45rem;
}
.fp-principles p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.fp-contact { margin: 0; font-family: var(--serif); font-size: 1.25rem; color: var(--primary); }

@media (max-width: 860px) {
  .fp-split { grid-template-columns: 1fr; }
  .fp-principles { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fp-views { margin-left: 0; }
  .fp--list .fp-card { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0 1rem; }
  .fp--list .fp-card__no { font-size: 2.6rem; }
  .fp-idx--compact li { grid-template-columns: 1fr; }
}

/* front page — responsive */
@media (max-width: 1000px) {
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-idx li { grid-template-columns: 5.6rem minmax(0, 1fr) 8rem; }
  .fp-idx__topics { display: none; }
}
@media (max-width: 860px) {
  .fp-lead { grid-template-columns: 1fr; gap: 2rem; }
  .fp-cover__label { margin-top: 4.5rem; }
  .fp-strap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fp-head { padding-top: 1.4rem; }
  .fp-title { padding: 1.1rem 0 1rem; }
  .fp-stats div { padding: 0 1.1rem; }
  .fp-stats dd { font-size: 1.8rem; }
  .fp-grid { grid-template-columns: 1fr; }
  .fp-idx li { grid-template-columns: 1fr; padding-left: 0.8rem; }
  .fp-idx__date { text-align: left; }
  .fp-idx__no { order: -1; }
  .fp-about__cols { grid-template-columns: 1fr; }
  .fp-cover__no { font-size: 8rem; }
}