/* Blueprint - after Centre for British Progress: deep green schematic
   register. Space Grotesk for structure, IBM Plex Mono for data/labels. */

:root {
  --bp-cream: #fffbea;
  --bp-ink: #1a2e28;
  --bp-green: #1b3a2e;
  --bp-grid-line: rgba(120, 200, 170, 0.35);
  --bp-accent: #2f6f52;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bp-cream);
  color: var(--bp-ink);
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.55;
}

a { color: var(--bp-accent); }

/* Wikipedia-style hideable contents rail. Pure CSS checkbox toggle,
   no JS: .page-toc collapses to zero width and .toc-reopen appears
   in its place when the (visually hidden) checkbox is checked. */
.page-shell { display: flex; align-items: flex-start; }
.toc-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.page-toc {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  width: 270px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 1.75rem 1.25rem;
  border-right: 1px solid rgba(27, 58, 46, 0.15);
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}
.page-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.toc-hide-btn, .toc-reopen { cursor: pointer; color: var(--bp-accent); }
.page-toc ul { list-style: none; margin: 0; padding-left: 0; }
.page-toc li { margin: 0.4rem 0; }
.page-toc ul ul { padding-left: 0.9rem; margin-top: 0.4rem; border-left: 1px dotted rgba(27, 58, 46, 0.25); }
.page-toc a { text-decoration: none; font-size: 0.92rem; }
.page-toc > ul > li > a,
.toc-subsection summary a { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.toc-subsection summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4em; }
.toc-subsection summary::-webkit-details-marker { display: none; }
.toc-subsection summary::before { content: "\25b8"; font-size: 0.7em; color: var(--bp-accent); transition: transform 0.15s; }
.toc-subsection[open] summary::before { transform: rotate(90deg); }
.page-toc a.is-active { color: var(--bp-ink); font-weight: 700; }
.toc-toggle:checked ~ .page-toc { width: 0; opacity: 0; padding: 0; border: none; overflow: hidden; pointer-events: none; }
.toc-reopen {
  display: none;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  margin: 1.5rem 0 0 1rem;
  border: 1px solid var(--bp-accent);
}
.toc-toggle:checked ~ .toc-reopen { display: inline-block; }
.page-body { flex: 1; min-width: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid rgba(27, 58, 46, 0.15);
}
.wordmark { display: inline-flex; text-decoration: none; }
.wordmark-logo { display: block; height: 34px; width: auto; }
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--bp-ink);
}
.site-nav a:hover { color: var(--bp-accent); }

.hero {
  padding: 5rem 2rem 4rem;
  background-color: var(--bp-green);
  background-image:
    linear-gradient(var(--bp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--bp-cream);
}
.hero h1 {
  max-width: 46rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 1.5rem;
}
.hero-sub { max-width: 38rem; font-size: 1.1rem; color: rgba(255, 251, 234, 0.85); }

/* Flagged like a callout on a schematic - same Space Grotesk as the
   rest of the headline, just dashed-underlined like an annotation.
   A repeating-gradient rather than border-dashed, so the dash/gap
   ratio is tunable instead of left to the browser's default. */
.notable {
  padding-bottom: 4px;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0, currentColor 7px,
    transparent 7px, transparent 15px
  );
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid currentColor;
}
.button-primary { background: var(--bp-cream); color: var(--bp-green); border-color: var(--bp-cream); }
.button-secondary { color: inherit; }
.hero .button-secondary { color: var(--bp-cream); }

.mission { padding: 3rem 2rem; border-bottom: 1px solid rgba(27, 58, 46, 0.15); }
.mission-statement {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.audiences, .recap, .theories-of-change, .upcoming, .dataset, .get-involved,
.page-intro, .brief-section {
  padding: 4rem 2rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* Problems page: briefs, sub-options, tags, source lists. */
.brief-section nav ul { list-style: none; padding: 0; }
.overview-more { margin-top: 0.75rem; }
.overview-more summary {
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-accent);
  padding: 0.5rem 0;
}
.overview-more[open] summary { margin-bottom: 0.5rem; }
.brief-section nav li { padding: 0.75rem 0; border-top: 1px solid rgba(27, 58, 46, 0.15); }
.brief-section nav a { font-family: "IBM Plex Mono", monospace; font-weight: 600; text-decoration: none; }
.brief-section article { padding: 2rem 0; border-top: 1px solid rgba(27, 58, 46, 0.15); }
.brief-group-heading {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--bp-accent);
  margin-top: 3rem;
}
.brief-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-accent);
}
h4 { font-family: "IBM Plex Mono", monospace; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2rem; }
.brief-sources ul { padding-left: 1.25rem; }
.brief-sources li { margin-bottom: 0.5rem; font-size: 0.9rem; }
.solution-card-image { display: block; width: 100%; height: auto; border: 1px solid rgba(27, 58, 46, 0.25); margin-bottom: 1rem; }
.link-private { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(26, 46, 40, 0.45); cursor: default; }
.decision-table { margin: 1rem 0; }
.decision-table dt { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--bp-accent); margin-top: 0.9rem; }
.decision-table dd { margin: 0.3rem 0 0; }
.decision-status { font-size: 0.9rem; color: rgba(26, 46, 40, 0.75); border-left: 2px solid var(--bp-accent); padding-left: 0.9rem; }
code { font-family: "IBM Plex Mono", monospace; background: rgba(27, 58, 46, 0.08); padding: 0.1em 0.3em; }
.page-footnote { font-size: 0.9rem; color: rgba(26, 46, 40, 0.7); border-top: 1px solid rgba(27, 58, 46, 0.15); }
h2 {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--bp-accent);
  border-bottom: 1px solid rgba(27, 58, 46, 0.2);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}
.section-intro { max-width: 38rem; color: rgba(26, 46, 40, 0.75); }

.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.audience { border: 1px solid rgba(27, 58, 46, 0.25); padding: 1.5rem; position: relative; }
.audience::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--bp-accent);
  border-left: 1px solid var(--bp-accent);
}
.audience h3 { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.75rem; }

.recap-meta { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; color: var(--bp-accent); text-transform: uppercase; letter-spacing: 0.04em; }
.recap-links { list-style: none; padding: 0; margin-top: 1.5rem; }
.recap-links li { padding: 0.75rem 0; border-top: 1px solid rgba(27, 58, 46, 0.15); }
.recap-links a { text-decoration: none; font-weight: 500; }

.toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.toc-item { border-left: 2px solid var(--bp-accent); padding-left: 1.25rem; }
.toc-item h3 { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; text-transform: uppercase; }

.event-list { list-style: none; padding: 0; }
.event { display: flex; gap: 1.5rem; padding: 0.75rem 0; border-top: 1px solid rgba(27, 58, 46, 0.15); font-family: "IBM Plex Mono", monospace; }
.event-date { color: var(--bp-accent); min-width: 8rem; }

.dataset .button { margin-top: 1rem; color: var(--bp-ink); }

.subscribe-form { display: flex; gap: 0.75rem; margin-top: 1.5rem; max-width: 26rem; flex-wrap: wrap; }
.subscribe-form label { display: none; }
.subscribe-form input {
  flex: 1;
  min-width: 12rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(27, 58, 46, 0.4);
  font-family: "IBM Plex Mono", monospace;
  background: transparent;
}
.subscribe-form button {
  padding: 0.7rem 1.2rem;
  background: var(--bp-green);
  color: var(--bp-cream);
  border: none;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: pointer;
}

.site-footer { padding: 3rem 2rem; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; color: rgba(26, 46, 40, 0.7); border-top: 1px solid rgba(27, 58, 46, 0.15); }