@import url("design-tokens.css");

:root {
  color-scheme: light;
  font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--body-bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-upper) 22%, var(--sky-bottom) 100%) fixed; line-height: 1.65; }
a { color: var(--accent-dark); }
main { flex: 1; width: min(46rem, 100%); margin: 0 auto; padding: 32px 28px 48px; }

.blog-header, .blog-footer { width: min(46rem, 100%); margin: 0 auto; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); text-decoration: none; }
.blog-brand img { width: 26px; height: 32px; }
.blog-header nav { display: flex; gap: 8px; }
.blog-header nav a, .blog-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; text-decoration: none; }

h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.15; }
h2 { margin: 2em 0 0.5em; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.25; }
.blog-intro p, .post-lead { margin: 0 0 24px; color: var(--muted); font-size: 1.1rem; }

.post-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.post-card { display: block; padding: 20px 22px; border: 1px solid var(--panel-border); border-radius: 18px; background: var(--panel-bg); color: var(--ink); text-decoration: none; }
.post-card:hover { border-color: var(--accent); }
.post-card h2 { margin: 4px 0 6px; font-size: 1.3rem; }
.post-card p { margin: 0; color: var(--muted); }
.post-card time, .post-meta { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.post-meta { margin: 0 0 8px; }

/* Post media width standard: one board, screenshot or figure is --post-media wide; a grid of several is --post-media-wide; a header banner (front matter `banner`) is a wide rounded card (12:5 crop; the whole image on phones). Phones use the full column. */
:root { --post-media: 22rem; --post-media-wide: 30rem; }
.post-body { font-size: 1.08rem; }
.post-body ul { padding-left: 1.4em; }
.post-body li { margin: 0.4em 0; }
.post-board {
  margin: 28px 0;
  --active-king: url("/assets/pieces/classic/wK.svg"); --active-queen: url("/assets/pieces/classic/wQ.svg");
  --active-rook: url("/assets/pieces/classic/wR.svg"); --active-bishop: url("/assets/pieces/classic/wB.svg");
  --active-knight: url("/assets/pieces/classic/wN.svg"); --active-pawn: url("/assets/pieces/classic/wP.svg");
  --black-king: url("/assets/pieces/classic/bK.svg"); --black-queen: url("/assets/pieces/classic/bQ.svg");
  --black-rook: url("/assets/pieces/classic/bR.svg"); --black-bishop: url("/assets/pieces/classic/bB.svg");
  --black-knight: url("/assets/pieces/classic/bN.svg"); --black-pawn: url("/assets/pieces/classic/bP.svg");
}
g-chess-board::part(piece-wk) { background-image: var(--active-king); }
g-chess-board::part(piece-wq) { background-image: var(--active-queen); }
g-chess-board::part(piece-wr) { background-image: var(--active-rook); }
g-chess-board::part(piece-wb) { background-image: var(--active-bishop); }
g-chess-board::part(piece-wn) { background-image: var(--active-knight); }
g-chess-board::part(piece-wp) { background-image: var(--active-pawn); }
g-chess-board::part(piece-bk) { background-image: var(--black-king); }
g-chess-board::part(piece-bq) { background-image: var(--black-queen); }
g-chess-board::part(piece-br) { background-image: var(--black-rook); }
g-chess-board::part(piece-bb) { background-image: var(--black-bishop); }
g-chess-board::part(piece-bn) { background-image: var(--black-knight); }
g-chess-board::part(piece-bp) { background-image: var(--black-pawn); }
.post-board g-chess-board { --square-color-dark: #7a9a5a; --square-color-light: #f2e6c4; display: block; width: min(100%, var(--post-media)); aspect-ratio: 1; margin: 0 auto; border-radius: 6px; overflow: hidden; pointer-events: none; }
.post-banner { width: min(100% - 56px, 66rem); margin: 20px auto 0; }
.post-banner picture { display: block; }
.post-banner img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; object-position: 50% 62%; border-radius: 14px; box-shadow: 0 6px 24px rgba(74, 63, 43, 0.14); }
.post-figure { margin: 28px 0; }
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(100%, var(--post-media-wide)); margin: 28px auto; }
.post-grid .post-figure { margin: 0; }
.post-figure picture { display: block; width: min(100%, var(--post-media)); margin: 0 auto; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 6px; }
.post-figure figcaption, .post-board figcaption { max-width: var(--post-media); margin: 10px auto 0; text-align: center; color: var(--muted); font-size: 0.95rem; }

@media (max-width: 600px) {
  .post-banner { width: calc(100% - 32px); margin-top: 12px; }
  .post-banner img { aspect-ratio: 1200 / 630; }
  main { padding: 20px 16px 40px; }
  .blog-header, .blog-footer { padding: 12px 16px; }
  .post-card { padding: 16px; }
}