/* ===========================================================
   PUBLIC LANDS WATCH — design tokens
   Aesthetic: a field-survey ledger / case-file registry.
   Not a blog. Not an advocacy zine. A record.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink:        #23241F;
  --ink-soft:   #4B4C42;
  --paper:      #E7E2D3;
  --paper-raised: #F1EEE2;
  --line:       #C9C2AC;
  --verdigris:  #3F6657;   /* verified / protected / neutral status */
  --rust:       #A6512C;   /* active threat / alert */
  --gold-stamp: #8B6B2E;   /* primary-source marker */
  --focus:      #1D5FCC;

  --serif: 'Spectral', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --max-width: 780px;
  --max-wide: 1200px;
  --measure: 40rem;   /* reading measure for headline + lede on wide pages */
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verdigris); text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper-raised);
}
.masthead-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--verdigris); }
.masthead nav a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: 20px;
  color: var(--ink-soft);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--rust); }

/* ---------- generic page shell ---------- */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.page-wide { max-width: var(--max-wide); }

/* ---------- page intro ----------
   On the wide pages the map, table and card grid run the full column while
   running text must not. Keeping the headline on the same measure as the
   lede stops the title from overhanging the paragraph it introduces, and
   on wide viewports the registry controls sit opposite the text so the
   block spans the column instead of stacking against the left edge. */

.page-intro { margin-bottom: 24px; }
.page-intro-text { max-width: var(--measure); }
.page-intro-text > :last-child { margin-bottom: 0; }
.lede { color: var(--ink-soft); }

.page-intro-aside .case-stamp { margin: 18px 0 0; }

.registry-search { margin-top: 12px; max-width: 30rem; }
.registry-search label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.registry-search input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
  font-family: var(--serif);
  font-size: 15px;
}
.registry-search p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

@media (min-width: 900px) {
  .page-intro--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem);
    gap: 24px 48px;
    align-items: end;
  }
  .page-intro-aside { justify-self: end; width: 100%; }
  /* in the right-hand column both controls fill the same box */
  .page-intro--split .case-stamp {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .page-intro--split .registry-search { max-width: none; }
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.1rem; margin: 0 0 6px; }
h2 {
  font-size: 1.05rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--verdigris);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 48px 0 20px;
}
h2:first-child { margin-top: 0; }
h3 { font-size: 1.2rem; margin: 24px 0 8px; }

p { margin: 0 0 16px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }

/* ---------- case-file stamp (signature element) ---------- */
/* Encodes real record data — file no. derived from slug,
   coordinates, and verification date — like a corner stamp
   on a surveyed plat map. Not decorative. */

.case-stamp {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  background: var(--paper-raised);
  margin: 18px 0 8px;
}
.case-stamp b { color: var(--ink); font-weight: 600; }

/* ---------- status + threat tags ---------- */

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border: 1px solid currentColor;
}
.tag-status { color: var(--rust); }
.tag-type { color: var(--verdigris); }

/* ---------- meta block ---------- */

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  font-family: var(--mono);
  font-size: 13px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 20px 0 8px;
}
.meta-grid dt { color: var(--ink-soft); }
.meta-grid dd { margin: 2px 0 0; }

/* ---------- citations ---------- */

sup.cite a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold-stamp);
  text-decoration: none;
  padding: 0 1px;
}
sup.cite a:hover { text-decoration: underline; }

.sources-list { font-size: 15px; }
.sources-list li { margin-bottom: 12px; }
.source-kind {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--verdigris);
  margin-right: 6px;
}

/* ---------- registry index / cards ---------- */

.registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-top: 24px;
}
.registry-card {
  background: var(--paper-raised);
  padding: 18px;
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.registry-card:hover { background: var(--paper); }
.registry-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.registry-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }

/* ---------- take action module ---------- */

.action-module {
  margin-top: 56px;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
  padding: 20px;
}
.action-module h2 { margin-top: 0; border: none; padding: 0; }

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 1000;
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--ink);
  background: var(--paper-raised);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 24px;
  text-align: center;
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .meta-grid { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .masthead, footer, .action-module, #registry-map, .registry-search,
  .skip-link, nav, .print-btn { display: none !important; }
  .page { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  h2 { color: #000; border-bottom: 1px solid #000; }
  .case-stamp, .meta-grid, .tag { border-color: #000; }
  .tag-status, .tag-type { color: #000; }
  @page { margin: 2cm; }
}