/* news.nex-orion.com — the game's palette (Docs/PALETTE.md), the same family as nex-orion.com. */
@font-face { font-family: "Gothic A1"; font-weight: 700; src: url("/static/fonts/GothicA1-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gothic A1"; font-weight: 400; src: url("/static/fonts/GothicA1-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gothic A1"; font-weight: 500; src: url("/static/fonts/GothicA1-500.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #37201e; --wood-dark: #582f2a; --wood: #9d643f; --wood-light: #c98463;
  --cream: #f0ecbf; --paper: #f4f9fd; --gold: #f6c95b; --leaf-light: #8acfb7; --leaf: #59837e;
  --sky: #8fb8cf; --blood: #c11916;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; font-family: "Gothic A1", system-ui, sans-serif; color: var(--cream); line-height: 1.6; }
a { color: var(--paper); }
img { display: block; max-width: 100%; }

.sky { position: relative; overflow: hidden; background: var(--sky); height: 150px; padding: 0 16px; }
.sun { position: absolute; top: 22px; right: 9%; width: 84px; height: auto; image-rendering: pixelated; animation: breathe 6s ease-in-out infinite; }
.cloud { position: absolute; top: 34px; left: -20px; width: 110px; height: auto; image-rendering: pixelated; animation: drift 70s linear -30s infinite; }
.top { position: relative; max-width: 920px; margin: 0 auto; padding-top: 44px; display: flex; align-items: baseline; gap: 18px; }
.wordmark { font-weight: 700; font-size: 44px; line-height: 1; color: var(--paper); text-decoration: none;
  text-shadow: 3px 3px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink); }
.crumb { font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; opacity: .62; }
.crumb[aria-current="page"], .crumb:hover { opacity: 1; }

.dirt { background: var(--wood-dark); min-height: 60vh; padding: 34px 16px 56px; }
.page-title { max-width: 920px; margin: 0 auto 22px; color: var(--paper); font-size: clamp(26px, 5vw, 36px); line-height: 1.2; }

.posts { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.post-card { display: flex; flex-direction: column; background: var(--wood); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--cream); box-shadow: 0 4px 0 rgba(55, 32, 30, .45); transition: transform .18s ease; }
.post-card:hover { transform: translateY(-3px); }
.post-card .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wood-dark); }
.post-card .text { padding: 14px 16px 18px; }
.post-card h2 { margin: 2px 0 6px; font-size: 20px; line-height: 1.25; color: var(--paper); }
.post-card p { margin: 0; font-size: 15px; }
time { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.empty { color: var(--cream); opacity: .8; }

.post { max-width: 760px; margin: 0 auto; }
.post .cover { width: 100%; border-radius: 14px; margin-bottom: 18px; box-shadow: 0 4px 0 rgba(55, 32, 30, .45); }
.post h1 { margin: 4px 0 10px; color: var(--paper); font-size: clamp(28px, 5.4vw, 40px); line-height: 1.15; }
.post .lede { font-size: 19px; font-weight: 500; color: var(--cream); margin: 0 0 18px; }
.body h2, .body h3, .body h4 { color: var(--paper); line-height: 1.25; margin: 28px 0 8px; }
.body p, .body li { font-size: 17px; }
.body ul, .body ol { padding-left: 22px; }
.body li { margin: 4px 0; }
.body li::marker { color: var(--leaf-light); }
.body code { background: var(--ink); padding: 1px 6px; border-radius: 5px; font-size: 15px; }
.body hr { border: 0; height: 3px; background: var(--wood); margin: 28px 0; border-radius: 2px; }
.body figure { margin: 18px 0; }
.body img.inline { border-radius: 10px; margin: 10px 0; }
.body figure img.inline { margin: 0; box-shadow: 0 4px 0 rgba(55, 32, 30, .45); }
.body figcaption { margin-top: 10px; font-size: 15px; color: var(--cream); opacity: .85; text-align: center; }
.draft-note { background: var(--blood); color: var(--paper); font-weight: 700; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.back { margin-top: 30px; }
.back a { font-weight: 700; text-decoration: none; }
.foot { text-align: center; padding: 22px 16px 30px; font-size: 14px; color: var(--cream); }
.foot a { color: var(--cream); }

@keyframes breathe { 50% { transform: scale(1.05); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@media (prefers-reduced-motion: reduce) { .sun, .cloud { animation: none; } .post-card { transition: none; } }