:root {
  --bg: #fbf8f3; --fg: #231f1b; --muted: #6b625a; --accent: #b4521a; --line: #e5ddd2;
  --card: #fff; --great-bg: #1f7a4d; --great-fg: #fff; --good-bg: #8cc9a1; --good-fg: #10301f; --fair-bg: #ecdca6; --fair-fg: #4a3b10; --poor-bg: #ddd7cf; --poor-fg: #5d554d;
  --warn-bg: #fff3cd; --warn-fg: #5c4400; --verify-bg: #e8f1ff; --verify-fg: #1b3a66;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1815; --fg: #efe8de; --muted: #a89d90; --accent: #e8935a; --line: #3a342d;
    --card: #24201c; --great-bg: #3fae78; --great-fg: #07241a; --good-bg: #2f6b4b; --good-fg: #e6f4ea; --fair-bg: #6b5a24; --fair-fg: #f4e8bf; --poor-bg: #3a342d; --poor-fg: #a89d90;
    --warn-bg: #4a3b10; --warn-fg: #f4e3a9; --verify-bg: #1f2d44; --verify-fg: #bcd3f5;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); }
.top { border-bottom: 1px solid var(--line); background: var(--card); }
.top .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  padding-top: 10px; padding-bottom: 10px;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); text-decoration: none; }
nav a {
  display: inline-block; padding: 6px 10px 6px 0; color: var(--muted);
  text-decoration: none; font-size: .95rem;
}
nav a:hover, nav a[aria-current="page"] { color: var(--accent); }
main { padding-top: 24px; padding-bottom: 40px; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .4em 0 .6em; }
h2 { font-size: 1.4rem; margin: 1.8em 0 .5em; }
h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
table {
  border-collapse: collapse; width: 100%; display: block; overflow-x: auto;
  margin: 1em 0; font-size: .95rem;
}
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--card); }
blockquote { margin: 1em 0; padding: .1em 1em; border-left: 4px solid var(--line); color: var(--muted); }
.draft {
  background: var(--warn-bg); color: var(--warn-fg); padding: 10px 14px;
  border-radius: 8px; font-size: .95rem;
}
.verify {
  background: var(--verify-bg); color: var(--verify-fg); padding: 10px 14px;
  border-radius: 8px; font-size: .95rem;
}
.updated { color: var(--muted); font-size: .9rem; margin-top: 2em; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 20px 0 40px; }
.foot p { margin: .6em 0 0; }
img { max-width: 100%; height: auto; }

/* Season chart: one 12-month bar per crag */
.chart { margin: 1.5em 0; }
.crow { margin: 0 0 1.1em; }
.cname { font-weight: 600; margin-bottom: 4px; }
.elev { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: .4em; }
.bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.m { display: block; text-align: center; font-size: .75rem; line-height: 1; padding: 9px 0; border-radius: 3px; }
.m.great { background: var(--great-bg); color: var(--great-fg); }
.m.good { background: var(--good-bg); color: var(--good-fg); }
.m.fair { background: var(--fair-bg); color: var(--fair-fg); }
.m.poor { background: var(--poor-bg); color: var(--poor-fg); }
.csum { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.chart figcaption { color: var(--muted); font-size: .85rem; }
.legend { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-right: .6em; }
.key { display: inline-flex; align-items: center; gap: 4px; }
.key .m { width: 14px; height: 14px; padding: 0; display: inline-block; }