@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fredoka.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --sky-1: #7ed3ff;
  --sky-2: #45b0f0;
  --grass: #57b94b;
  --bedrock: #1c1410;
  --cave: #2a1e13;
  --cave-2: #362718;
  --line: #4a3721;
  --gold: #ffb636;
  --gold-deep: #d99a25;
  --diamond: #63d2ff;
  --text: #f4ead9;
  --muted: #bfa683;
  --ink: #0e2a3f;
  --green: #7ed07e;
  --red: #ff8f7d;
  --display: 'Fredoka', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bedrock);
  color: var(--text);
  font: 17px/1.68 var(--body);
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* surface: sky header sitting on a grass line, everything below is underground */
header {
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  border-bottom: 5px solid var(--grass);
}
header::after {
  content: ""; display: block; height: 9px;
  background: linear-gradient(180deg, #8a5a33 0 40%, #6b4426 40% 75%, #52371d 75% 100%);
}
header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 12px; padding-bottom: 12px; }
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 650; font-size: 1.15em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo img { width: 34px; height: 34px; border-radius: 9px; border: 2px solid rgba(255,255,255,.7); }
nav { display: flex; flex-wrap: wrap; gap: 3px 4px; font-size: 0.86em; }
nav a {
  color: var(--ink); text-decoration: none;
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
nav a:hover { background: rgba(255,255,255,.55); }
nav a.here { background: var(--ink); color: #fff; }

/* strata bar: the dig-down signature — grass, topsoil, dirt, stone */
.strata {
  height: 9px; border: 0; margin: 0;
  background: linear-gradient(180deg,
    var(--grass) 0 22%,
    #8a5a33 22% 55%,
    #6b4426 55% 82%,
    #52371d 82% 100%);
}

main { padding: 30px 0 44px; }
h1 {
  font-family: var(--display); font-weight: 650;
  font-size: clamp(1.7em, 4.5vw, 2.25em); line-height: 1.15;
  margin: 0 0 8px; letter-spacing: .2px;
}
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.35em; margin: 1.9em 0 .5em; color: var(--gold);
}
h3 { font-family: var(--display); font-weight: 600; font-size: 1.06em; margin: 1.5em 0 .4em; }
a { color: var(--diamond); }
a:focus-visible, nav a:focus-visible, .cards a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.updated { color: var(--muted); font-size: 0.85em; margin-bottom: 24px; }

/* homepage hero */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center; margin-bottom: 10px; }
.hero p.lede { font-size: 1.04em; }
.hero img { width: 100%; border-radius: 14px; border: 2px solid var(--line); display: block; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } }
.statchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; padding: 0; list-style: none; }
.statchips li {
  background: var(--cave); border: 2px solid var(--line); border-radius: 12px;
  padding: 8px 14px; text-align: center;
}
.statchips strong { display: block; font-family: var(--display); font-weight: 650; font-size: 1.25em; color: var(--gold); }
.statchips span { font-size: .74em; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 16px 0; font-size: 0.93em; }
th, td { border: 1px solid var(--line); border-top: 0; border-left: 0; padding: 9px 13px; text-align: left; vertical-align: top; }
tr > *:first-child { border-left: 1px solid var(--line); }
thead th, tr:first-child > * { border-top: 1px solid var(--line); }
th { background: var(--cave-2); font-family: var(--display); font-weight: 600; }
td { background: var(--cave); }
table tr:first-child > *:first-child { border-top-left-radius: 10px; }
table tr:first-child > *:last-child { border-top-right-radius: 10px; }
table tr:last-child > *:first-child { border-bottom-left-radius: 10px; }
table tr:last-child > *:last-child { border-bottom-right-radius: 10px; }

.note, .tldr {
  background: var(--cave); border: 2px solid var(--line); border-left: 5px solid var(--gold);
  padding: 13px 17px; border-radius: 12px; margin: 18px 0;
}
.tldr strong:first-child { color: var(--gold); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 13px; margin: 16px 0; padding: 0; list-style: none; }
.cards a {
  display: block; height: 100%;
  background: var(--cave); border: 2px solid var(--line); border-radius: 14px;
  padding: 15px 17px; text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.cards a:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.cards strong { font-family: var(--display); font-weight: 600; color: var(--gold); display: block; margin-bottom: 4px; }
.cards span { font-size: 0.85em; color: var(--muted); }

img.shot { max-width: 100%; border-radius: 14px; border: 2px solid var(--line); display: block; margin: 18px 0; }
figure { margin: 18px 0; }
figure img { margin: 0; }
figcaption { font-size: .8em; color: var(--muted); margin-top: 7px; }

ol li, ul li { margin: 6px 0; }
footer {
  border-top: 1px solid var(--line); background: #150f0a;
  color: var(--muted); font-size: 0.8em; padding: 20px 0 34px;
}
footer p { margin: 6px 0; }
.yes { color: var(--green); font-weight: 600; }
.no { color: var(--red); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cards a { transition: none; }
  .cards a:hover { transform: none; }
}