/* The news pages (/news/ and /news/<slug>/), written by build-news.js. Release handoff B4 and B5, in the
   site's tokens (no new tokens, B6). Static CSS: these pages are plain HTML, not rendered by support.js. */
:root {
  --bg: oklch(0.11 0.004 80); --panel: oklch(0.16 0.005 80); --raised: oklch(0.185 0.005 80); --raised-hi: oklch(0.29 0.007 80);
  --line: oklch(0.25 0.005 80); --line-2: oklch(0.36 0.006 80); --ink-1: oklch(0.94 0.008 85); --ink-body: oklch(0.8 0.01 85);
  --ink-2: oklch(0.74 0.01 85); --ink-3: #878580; --lock: oklch(0.8 0.15 80); --on-lock: oklch(0.185 0.005 80);
  --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'IBM Plex Sans Condensed', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink-1); font-family: var(--sans); }
a { color: var(--lock); text-decoration: none; }
a:hover { color: var(--ink-1); }
::selection { background: var(--lock); color: var(--on-lock); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.sp { flex: 1; }
.mono { font: 400 12px/1 var(--mono); color: var(--ink-3); }

.nav { position: sticky; top: 0; z-index: 10; height: 56px; background: oklch(0.155 0.005 80 / 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid oklch(0.27 0.006 80); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 22px; }
.wordmark { color: var(--ink-1); font-weight: 700; font-size: 18px; letter-spacing: 0.2em; }
.nl { color: var(--ink-2); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; }
.nl.on { color: var(--ink-1); }
.gh { height: 30px; padding: 0 12px; display: flex; align-items: center; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-1); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; }

/* /news: 200px | 1fr, gap 48 */
.news { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding-top: 48px; padding-bottom: 64px; }
.side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; align-self: start; }
.side h1 { margin: 0; font-weight: 700; font-size: 34px; line-height: 1; }
.filters { display: flex; flex-direction: column; gap: 4px; }
.filter { height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 3px; color: var(--ink-2); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; }
.filter .n { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-3); }
.filter.on { background: var(--raised-hi); color: var(--ink-1); }
.side-links { display: flex; flex-direction: column; gap: 6px; font: 400 12px/1.45 var(--mono); color: var(--ink-3); }
.side-links a { color: var(--ink-2); }
.side-links a:hover { color: var(--ink-1); }
.empty, .none { margin: 0; padding: 28px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* an entry: 130px | 1fr, text max 680 */
.entry { padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; }
.entry[hidden] { display: none; }
.meta { display: flex; flex-direction: column; gap: 8px; }
.tag { align-self: flex-start; height: 20px; padding: 0 6px; display: flex; align-items: center; border-radius: 2px; font: 700 10px/1 var(--mono); letter-spacing: 0.1em; }
.tag-rel { background: var(--lock); color: var(--on-lock); }
.tag-note { box-shadow: inset 0 0 0 1px oklch(0.42 0.008 80); color: var(--ink-2); }
.meta time { font: 400 13px/1 var(--mono); color: var(--ink-3); }
.main { display: flex; flex-direction: column; gap: 10px; max-width: 680px; min-width: 0; }
.title { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.2; }
.title a { color: var(--ink-1); }
.title a:hover { color: var(--lock); }
.ver { margin-right: 6px; font: 600 24px/1.2 var(--mono); }
.body { font-size: 16px; line-height: 1.55; color: var(--ink-body); text-wrap: pretty; }
.body p, .body ul, .body ol { margin: 0 0 10px; }
.body > :last-child { margin-bottom: 0; }
.body h3, .body h4 { margin: 14px 0 6px; font-size: 18px; color: var(--ink-1); }
/* Links inside running text are underlined: amber alone is not enough against the text colour (WCAG 1.4.1). */
.body a, .group a, .foot-in > span a { text-decoration: underline; text-underline-offset: 2px; }
.body code, .group code { font: 400 0.9em var(--mono); }
.group { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
.label { font: 700 11px/22px var(--mono); letter-spacing: 0.1em; color: var(--ink-2); }
.label.new { color: var(--lock); }
.group ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-body); }
.foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.dl { height: 34px; padding: 0 14px; display: flex; align-items: center; border-radius: 3px; background: var(--lock); color: var(--on-lock); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; }
.dl:hover { color: var(--on-lock); filter: brightness(1.08); }
.also { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.also-k { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-3); }
.chip { height: 22px; padding: 0 7px; display: flex; align-items: center; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-body); font: 500 12px/1 var(--mono); }
.addr { font: 500 12px/1 var(--mono); color: var(--ink-3); }

/* videos (B5): the thumbnail until a click, then the youtube-nocookie player */
.vid { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: oklch(0.08 0.004 80); box-shadow: inset 0 0 0 1px oklch(0.27 0.006 80); cursor: pointer; }
.vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid .play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--lock); box-shadow: 0 8px 24px oklch(0 0 0 / 0.5); }
.vid .play::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid var(--on-lock); }
.vid-lg .play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.vid-lg .play::after { margin: -14px 0 0 -8px; border-top-width: 14px; border-bottom-width: 14px; border-left-width: 22px; }
.vid .dur { position: absolute; right: 12px; bottom: 12px; padding: 3px 6px; border-radius: 2px; background: oklch(0.11 0.004 80 / 0.8); font: 500 12px/1 var(--mono); color: var(--ink-body); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* an entry page */
.one { max-width: 920px; padding-top: 40px; padding-bottom: 64px; }
.back { display: inline-block; margin-bottom: 20px; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; }
.one .title { font-size: 30px; }
.one .ver { font-size: 30px; }

.foot-site { border-top: 1px solid oklch(0.22 0.005 80); }
.foot-in { padding-top: 24px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2); }
.foot-in b { color: var(--ink-1); letter-spacing: 0.2em; }
.foot-in > a { font-weight: 600; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); }

@media (max-width: 860px) {
  .news { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .side { position: static; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nl { display: none; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .meta { flex-direction: row; align-items: center; gap: 10px; }
  .one .title, .one .ver { font-size: 24px; }
}