/* ── Palo Census — Base Styles ── */
/* Mobile-first. Reading experience is the product. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  --black:       #111111;
  --charcoal:    #2c2c2c;
  --grey-dark:   #555555;
  --grey-mid:    #888888;
  --grey-light:  #c4c4c4;
  --grey-wash:   #e9e9e9;
  --off-white:   #f6f5f3;
  --white:       #ffffff;
  --green:       #047857;
  --green-light: #06a776;
  --green-pale:  #e6f5f0;
  --terracotta:  #c4603a;
  --terra-pale:  #f8ebe5;

  --prose-max:   640px;
  --side-pad:    20px;
  --section-gap: 72px;

  /* Type: one size per role. Serif for what is read as prose (headings,
     lead, body); sans for what labels or describes data (cards, captions,
     tables, notes, navigation). Desktop sizes are set below. */
  --serif: 'EB Garamond', serif;
  --sans:  'Outfit', sans-serif;
  --mono:  'DM Mono', monospace;
  --fs-h1:    clamp(32px, 8vw, 48px); /* page title */
  --fs-h2:    clamp(26px, 6vw, 32px); /* section heading */
  --fs-h3:    clamp(20px, 5vw, 22px); /* sub-heading; a report's title in a list */
  --fs-lead:  18px;                   /* the text under a page title */
  --fs-body:  18px;                   /* running text, everywhere */
  --fs-card:  16px;                   /* a card's title (chart, prompt, Ask AI) */
  --fs-intro: 15px;                   /* text introducing a chart or table */
  --fs-small: 13px;                   /* notes, captions, metadata, tables, controls */
  --fs-fine:  12px;                   /* the footer */
  --fs-label: 11px;                   /* uppercase labels */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--off-white);
  color: var(--black);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--green); color: var(--white); }

/* ── Prose container ── */
.prose {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* ── Navigation ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 245, 243, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grey-wash);
  padding: 0 var(--side-pad);
}

.nav-inner {
  max-width: var(--prose-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}

.nav-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--green);
  text-decoration: none;
  letter-spacing: -0.2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--grey-dark);
  text-decoration: none;
}

.nav-link:hover { color: var(--green); }

/* On a phone the links go on a second row under the name. */
@media (max-width: 679px) {
  .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 6px; }
  .nav-actions { width: 100%; gap: 14px; flex-wrap: wrap; row-gap: 6px; }
  .nav-copy-btn { margin-left: auto; }
}

/* ── Essay typography ── */
.essay-section {
  padding: var(--section-gap) 0 0;
}

.essay-section:first-of-type {
  padding-top: 64px;
}

/* ── Where to next cards ── */
.next-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--grey-wash);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.next-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(4,120,87,0.08);
  transform: translateY(-1px);
}

.next-card-label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.next-card-desc {
  font-family: var(--serif);
  font-size: var(--fs-body);
  color: var(--charcoal);
  line-height: 1.4;
  margin-bottom: 8px;
}

.next-card-cta {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--green);
  font-weight: 500;
}

.section-marker {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
  display: block;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--black);
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin-bottom: 28px;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin-bottom: 20px;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 8px;
}

p {
  margin-bottom: 1.4em;
  color: var(--charcoal);
}

p:last-child { margin-bottom: 0; }

em { font-style: italic; }

code { font-family: var(--mono); font-size: 0.88em; font-weight: 400; }
/* a column name: told apart by its face, not its weight */
.census-terms dt code { font-weight: 400; font-size: 0.8em; color: var(--charcoal); }

strong {
  font-weight: 600;
  color: var(--black);
}

/* links in prose: green */
.opening-sub a, .essay-section p a { color: var(--green); }

/* the About page: the crawler's name, and the cards at the end */
.crawler-ua {
  font-family: var(--mono);
  font-size: var(--fs-small);
  background: var(--grey-wash);
  padding: 12px 16px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.next-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }

/* ── Opening statement ── */
.opening {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--grey-wash);
}

.opening-label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-mid);
  margin-bottom: 24px;
  display: block;
}

.opening h1 {
  color: var(--black);
  margin-bottom: 24px;
}

.opening-sub {
  font-size: var(--fs-lead);
  color: var(--grey-dark);
  line-height: 1.6;
  max-width: 500px;
}

/* ── Footer ── */
.footer {
  padding: 48px var(--side-pad);
  margin-top: var(--section-gap);
  border-top: 1px solid var(--grey-wash);
}

.footer-inner {
  max-width: var(--prose-max);
  margin: 0 auto;
}

.footer-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--green);
  display: block;
  margin-bottom: 8px;
}

.footer-text {
  font-family: var(--sans);
  font-size: var(--fs-fine);
  color: var(--grey-mid);
  line-height: 1.6;
}

.footer-link {
  color: var(--grey-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-wash);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Desktop ── */
@media (min-width: 680px) {
  :root {
    --side-pad: 32px;
    --section-gap: 96px;
  }

  :root {
    --fs-lead: 20px;
    --fs-body: 19px;
  }

  .opening { padding: 120px 0 80px; }

}

/* ── Nav copy button ── */
.nav-copy-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-mid);
  background: none;
  border: 1px solid var(--grey-wash);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
a.nav-copy-btn { text-decoration: none; display: inline-block; }
.nav-copy-btn:hover {
  color: var(--black);
  border-color: var(--grey-light);
  background: var(--white);
}

/* ── Reports (/reports) ── */
.report-meta {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--grey-mid);
  line-height: 1.6;
}
.report-meta strong { color: var(--grey-dark); font-weight: 500; }
.report-body { padding-top: 48px; padding-bottom: 80px; }
.report-body h2 { margin-top: 1.8em; }
.report-body h3 { margin: 1.4em 0 0.5em; }
.report-body ul, .report-body ol { margin: 0 0 1.4em 1.4em; color: var(--charcoal); }
.report-body li { margin-bottom: 0.5em; }
.report-body a { color: var(--green); }
.report-body code, .essay-section code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--grey-wash);
  padding: 1px 4px;
  border-radius: 3px;
}
.report-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0 1.8em;
  font-family: var(--sans);
  font-size: var(--fs-small);
  display: block;
  overflow-x: auto;
}
.report-body th, .report-body td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--grey-wash);
  vertical-align: top;
}
.report-body th { font-weight: 600; color: var(--black); }
.report-list { list-style: none; padding: 48px 0 80px; }
.report-list li { padding: 20px 0; border-bottom: 1px solid var(--grey-wash); }
.report-list a { color: var(--black); text-decoration: none; }
.report-list a:hover h2, .report-list a:hover h3 { color: var(--green); }
/* a report's title in a list is a sub-heading, whatever its level */
.report-list h2, .report-list h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: 0; margin-bottom: 6px; }
.report-list-short { padding: 8px 0 24px; }
.report-list p { margin-bottom: 6px; color: var(--grey-dark); }

/* ── Census (/, /census/{measure}) ── */
.wide {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
.census-section { padding-top: 56px; }
.census-section h2 { margin-bottom: 12px; }
.opening-sub code, .census-intro code { font-family: var(--mono); font-size: 0.85em; }
.census-intro, .census-meta, .census-data {
  font-family: var(--sans);
  color: var(--grey-dark);
  max-width: 720px;
}
.census-intro { font-size: var(--fs-intro); line-height: 1.6; margin-bottom: 16px; }
.census-meta { font-size: var(--fs-small); margin-top: 16px; }
.census-data { font-size: var(--fs-small); margin-top: 24px; }
.census-meta a, .census-data a, .census-intro a, .event-key a { color: var(--green); }

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.figure {
  background: #fcfcfb;
  border: 1px solid var(--grey-wash);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.figure-label {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--grey-dark);
}
.figure-value {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--black);
}
.figure-note {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--grey-dark);
}
@media (max-width: 899px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .figures { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .figure-value { font-size: 30px; }
}

.event-key {
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--grey-dark);
  margin: 0 0 24px;
  display: grid;
  gap: 6px;
  max-width: 720px;
}
.event-key li { display: flex; gap: 10px; align-items: baseline; }
.event-num {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--grey-dark);
  background: #fcfcfb;
  color: var(--charcoal);
  font-size: 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(3px);
}
.event-date { color: var(--charcoal); font-weight: 500; margin-right: 6px; }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 899px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}
.chart-card {
  background: #fcfcfb;
  border: 1px solid var(--grey-wash);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}
.chart-card figcaption h3 {
  font-family: var(--sans);
  font-size: var(--fs-card);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
  margin-bottom: 4px;
}
.chart-card figcaption h3 a { color: inherit; text-decoration: none; }
.chart-card figcaption h3 a:hover { color: var(--green); }
.chart-card figcaption p {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--grey-dark);
  margin-bottom: 12px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
  min-height: 22px;
}
.legend-item {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--grey-dark);
  background: none;
  border: none;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button.legend-item { cursor: pointer; }
button.legend-item[aria-pressed="false"] { opacity: 0.45; }
button.legend-item[aria-pressed="false"] .legend-label { text-decoration: line-through; }
.legend-key { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.legend-value { color: var(--black); font-weight: 600; }
.legend-of { color: var(--grey-dark); font-size: 12px; }
.chart-plot { position: relative; height: 260px; }
@media (max-width: 479px) { .chart-plot { height: 220px; } }
.chart-empty {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--grey-dark);
  padding-top: 24px;
}
.chart-details { margin-top: 12px; font-family: var(--sans); font-size: var(--fs-small); }
.chart-details summary { cursor: pointer; color: var(--grey-dark); }
.chart-table { max-height: 320px; overflow: auto; margin-top: 8px; }
.chart-table table, .census-table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.chart-table th, .chart-table td, .census-table th, .census-table td {
  text-align: left;
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid var(--grey-wash);
  white-space: nowrap;
}
.chart-table th, .census-table th { position: sticky; top: 0; background: #fcfcfb; font-weight: 600; color: var(--black); }
.chart-table td.num, .census-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.chart-table th.num, .census-table th.num { text-align: right; }
.report-list-short { max-width: 720px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.opening-short { padding: 56px 0 40px; }
.opening-crumb { color: var(--grey-mid); text-decoration: none; border-bottom: 1px solid var(--grey-light); }
.chart-card-large .chart-plot { height: 380px; }
@media (max-width: 479px) { .chart-card-large .chart-plot { height: 260px; } }
.census-note { margin-top: 16px; }
.census-text > * { max-width: 720px; }
.census-text h2 { margin: 1.6em 0 0.5em; }
.census-text h2:first-child { margin-top: 0; }
.census-list, .census-terms { color: var(--charcoal); }
.census-terms dt { font-weight: 600; color: var(--black); }
.census-terms dd { margin: 0 0 0.8em; }
.census-list { margin: 0 0 1em 1.2em; }
.census-list li { margin-bottom: 0.5em; }
.census-list a { color: var(--green); }
.census-table-wrap {
  max-height: 480px; overflow: auto;
  background: #fcfcfb; border: 1px solid var(--grey-wash); border-radius: 12px;
  padding: 0 16px 8px; font-family: var(--sans);
}
.figure-link { color: inherit; text-decoration: none; }
.figure-link:hover .figure-label { color: var(--green); }
.range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: var(--fs-small);
}
.range-label { color: var(--grey-dark); margin-right: 4px; }
.range-btn {
  font: inherit;
  color: var(--charcoal);
  background: #fcfcfb;
  border: 1px solid var(--grey-wash);
  border-radius: 999px;
  padding: 4px 12px;
  min-height: 30px;
  cursor: pointer;
}
.range-btn:hover { border-color: var(--grey-light); }
.range-btn[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fcfcfb; font-weight: 500; }
.range-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── Ask your AI (prompt boxes and the prompt library) ── */
.ask, .prompt-card {
  background: #fcfcfb;
  border: 1px solid var(--grey-wash);
  border-radius: 12px;
  padding: 20px;
  font-family: var(--sans);
  margin: 0 0 20px;
}
.ask { max-width: 720px; }
.ask-title, .prompt-card h3 { font-family: var(--sans); font-size: var(--fs-card); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--black); margin: 0 0 6px; }
.ask-intro { font-size: var(--fs-small); line-height: 1.5; color: var(--grey-dark); margin: 0 0 12px; }
.ask-intro a { color: var(--green); }
.ask-text {
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-wash);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-btn {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-wash);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 32px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.ask-btn:hover { border-color: var(--grey-light); }
.ask-copy { background: var(--charcoal); border-color: var(--charcoal); color: #fcfcfb; font-weight: 500; }
.ask-copy:hover { border-color: var(--charcoal); }
.ask-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.prompt-fields { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.prompt-fields label { font-size: var(--fs-small); color: var(--grey-dark); display: flex; flex-direction: column; gap: 4px; }
.prompt-fields input, .prompt-fields select {
  font: inherit; font-size: 14px; color: var(--black);
  border: 1px solid var(--grey-light); border-radius: 8px; padding: 6px 10px; min-width: 220px; background: var(--white);
}
.prompt-group { margin-bottom: 36px; }
.prompt-group > h2 { margin-bottom: 16px; }
@media (max-width: 479px) { .prompt-fields input, .prompt-fields select { min-width: 0; width: 100%; } .prompt-fields label { width: 100%; } }
/* inside a page's text column, the box keeps its own spacing */
.census-text .ask h2.ask-title { margin: 0 0 6px; }

/* ── Questions across the census (search, lists, paths) ── */
.question-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 20px; font-family: var(--sans); }
.question-form label { font-size: var(--fs-small); color: var(--grey-dark); display: flex; flex-direction: column; gap: 4px; }
.question-form input, .question-form select {
  font: inherit; font-size: 14px; color: var(--black);
  border: 1px solid var(--grey-light); border-radius: 8px; padding: 6px 10px; background: var(--white);
}
.question-form input[type=search] { min-width: 260px; }
.path-list { font-family: var(--sans); font-size: var(--fs-intro); }
@media (max-width: 479px) {
  .question-form label, .question-form input, .question-form select { width: 100%; }
  .question-form input[type=search] { min-width: 0; }
}

/* ── Lists of sites (search, lists, rankings, a record's links) ──
   No box of its own: the page scrolls, not the table. Titles wrap on a
   wide screen; on a phone each row is a short card (the site, then its
   facts on one line, then its title), so nothing scrolls sideways. */
.site-table-wrap {
  background: #fcfcfb; border: 1px solid var(--grey-wash); border-radius: 12px;
  padding: 0 16px 8px; font-family: var(--sans);
}
.site-table th { position: static; }
.site-table td.site { white-space: normal; overflow-wrap: anywhere; }
.site-table td.title { white-space: normal; color: var(--grey-dark); min-width: 12em; }
@media (max-width: 679px) {
  .site-table-wrap { padding: 4px 14px; }
  .site-table thead { display: none; }
  .site-table, .site-table tbody { display: block; }
  .site-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--grey-wash); }
  .site-table tr:last-child { border-bottom: none; }
  .site-table td { display: block; border: none; padding: 0; }
  .site-table td.site { flex-basis: 100%; font-size: 15px; }
  .site-table td.fact { font-size: 12px; color: var(--grey-dark); text-align: left; white-space: nowrap; }
  .site-table td.fact[data-label]::before { content: attr(data-label) " "; }
  .site-table td.title { flex-basis: 100%; min-width: 0; font-size: var(--fs-small); }
  .site-table td.title:empty { display: none; }
}
.site-table a, .census-table a { color: var(--green); }
/* a checksum wraps rather than run out of its box */
.census-table td.sha { white-space: normal; overflow-wrap: anywhere; }
.visit-site { margin-top: 16px; font-family: var(--sans); font-size: var(--fs-small); color: var(--grey-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.visit-site .ask-btn { font-size: 14px; }

/* ── A measure's figures per day ──
   The page scrolls, not the table; headings wrap so that a percentage
   column can say what it is a percentage of, and on a phone the figures
   get smaller rather than the table wider. */
.figures-table-wrap {
  background: #fcfcfb; border: 1px solid var(--grey-wash); border-radius: 12px;
  padding: 0 16px 8px; font-family: var(--sans); overflow-x: auto;
}
.figures-table th { position: static; white-space: normal; vertical-align: bottom; line-height: 1.3; }
@media (max-width: 679px) {
  .figures-table-wrap { padding: 0 8px 6px; }
  .figures-table { font-size: 11.5px; }
  .figures-table th, .figures-table td { padding: 4px 6px 4px 0; }
}
/* a share's base ("590,938 of 831,511 …") on its own line on a phone */
.legend-item { text-align: left; flex-wrap: wrap; }
@media (max-width: 679px) {
  .legend-of { flex-basis: 100%; padding-left: 20px; }
}