:root {
  --ink: #1a1410;
  --cream: #f6e7c8;
  --muted: #b9c6c2;
  --gold: #ffc861;
  --gold-hot: #fff3cf;
  --font: "Avenir Next", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--cream); font-family: var(--font);
  background: radial-gradient(120% 70% at 50% 0%, #2b4450 0%, #14232b 60%, #0d1b24 100%);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.top, .grid, .foot { max-width: 1180px; margin: 0 auto; }
h1 {
  margin: 14px 0 8px; font-size: clamp(30px, 7vw, 46px); color: var(--gold-hot); font-weight: 900;
  text-shadow: 0 3px 0 var(--ink), 0 0 22px rgba(255, 190, 90, .45);
}
.lede { margin: 0 0 10px; max-width: 70ch; color: #dfe8e4; line-height: 1.5; font-size: 15px; }
.lede strong { color: var(--gold-hot); }
.back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: linear-gradient(180deg, #ffd780, #e38a2b); color: #2b1605; font-weight: 800; text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.back:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
:focus-visible { outline: 3px solid var(--gold-hot); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.board {
  margin: 0; border-radius: 18px; overflow: hidden; background: rgba(8, 20, 26, .75);
  border: 2px solid rgba(255, 210, 130, .18); box-shadow: 0 16px 34px rgba(0,0,0,.4);
}
.board.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 200, 97, .35), 0 16px 34px rgba(0,0,0,.4); }
.board a { display: block; background: #0b161c; aspect-ratio: 4 / 5; }
.board img { display: block; width: 100%; height: 100%; object-fit: contain; }
figcaption { display: grid; gap: 4px; padding: 12px 14px 14px; font-size: 14px; line-height: 1.4; color: var(--muted); }
figcaption b { color: var(--cream); font-size: 18px; }
.tag {
  justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted);
}
.board.active .tag { background: var(--gold); color: #2b1605; }
.foot { margin-top: 20px; color: var(--muted); font-size: 13px; display: grid; gap: 12px; justify-items: start; }