/* First-draft styling for the public site, in the "clean cartographic"
 * direction agreed in PLAN.md. Deliberately minimal — this is scaffolding to
 * confirm the pages work, not the design pass. See PLAN.md §4 before
 * treating this as final. */

:root {
  --paper: #FBFAF7;
  --ink: #1A1A18;
  --muted: #6B6B63;
  --hairline: #DDDBD3;
  --climb-line: #B23A2F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--hairline);
}
.site-brand { font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: 0.02em; }
.site-brand span { color: var(--muted); font-weight: 400; }
.site-header nav a { color: var(--ink); text-decoration: none; margin-left: 16px; }

main { max-width: 1100px; margin: 0 auto; padding: 32px; }

.site-footer {
  max-width: 1100px; margin: 48px auto; padding: 16px 32px;
  color: var(--muted); font-size: 13px; border-top: 1px solid var(--hairline);
}

.hero { margin-bottom: 32px; }
.hero p { color: var(--muted); max-width: 60ch; }

.climb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.climb-card {
  display: block; padding: 16px; border: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
}
.climb-card h2 { font-size: 16px; margin: 0 0 4px; }
.climb-card .region { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.climb-card .mini-stats { font-family: "IBM Plex Mono", monospace; font-size: 13px; margin: 0; }

.climb-table { width: 100%; border-collapse: collapse; }
.climb-table th, .climb-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.climb-table tr[onclick] { cursor: pointer; }
.climb-table tr[onclick]:hover { background: rgba(0,0,0,0.02); }

.breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.breadcrumb a { color: var(--muted); }
.region { color: var(--muted); margin-top: -8px; }

.stat-row {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 16px 0; margin: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.stat { display: flex; flex-direction: column; }
.stat .value { font-family: "IBM Plex Mono", monospace; font-size: 20px; }
.stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

#profile-container { width: 100%; margin-bottom: 16px; }
#profile-container svg { width: 100%; height: auto; display: block; cursor: crosshair; }

#map-container { width: 100%; height: 360px; margin-bottom: 24px; border: 1px solid var(--hairline); }
#map { width: 100%; height: 100%; }

.notes { margin-bottom: 24px; }

.provenance { color: var(--muted); font-size: 12px; }

.sync-marker {
  width: 14px; height: 14px; background: var(--climb-line);
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(178,58,47,0.3);
}

.empty { color: var(--muted); }