/* Hallmark · macrostructure: Long Document (editorial) · theme: custom-DNA (Sellatica: paper #fafaf9, ink oklch-tinted navy, accent blue) · fonts: Georgia display / system sans UI · contrast: pass (40-41) · nav: N4 edge-aligned minimal · footer: Ft2 inline · slop: pass (42-45) · mobile: pass (34, 49) · pre-emit critique: P5 H4 E5 S4 R5 V4 */
:root {
  --ink: #1a2332;          /* tinted navy, not pure black */
  --ink-soft: #43506b;
  --paper: #fafaf9;
  --paper-2: #f1f0ee;      /* warm-tinted card */
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --muted: #5c6b84;        /* tinted, chroma > 0 */
  --line: #e3e1dd;
  --line-soft: #eceae6;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, 'Segoe UI', sans-serif;
  --space-xs: 4px; --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 40px; --space-2xl: 64px;
  --dur: 160ms;
}
html, body { overflow-x: clip; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-display); background: var(--paper); color: var(--ink); line-height: 1.7; }
a { text-decoration: none; color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
a:active { opacity: .8; }

/* Nav — N4 edge-aligned minimal: brand left, links right, NO hairline, generous top space */
nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-l) var(--space-l) var(--space-m); max-width: 1100px; margin: 0 auto; font-family: var(--font-ui); }
nav .brand { font-weight: 700; letter-spacing: .02em; line-height: 1; }
nav .brand span { color: var(--accent); }
nav .links { display: flex; align-items: center; }
nav .links a { margin-left: var(--space-l); font-size: .9rem; color: var(--muted); white-space: nowrap; transition: color var(--dur) ease-out; }
nav .links a:hover { color: var(--ink); }

header.hero { padding: var(--space-2xl) var(--space-l) var(--space-xl); max-width: 760px; margin: 0 auto; }
.tag { display: inline-block; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; color: var(--accent); padding: var(--space-xs) var(--space-s); margin-bottom: var(--space-l); text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; }
header.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -1px; overflow-wrap: anywhere; }
header.hero p { color: var(--muted); margin-top: var(--space-m); font-family: var(--font-ui); font-size: 1.02rem; max-width: 56ch; }

main { max-width: 760px; margin: 0 auto; padding: 0 var(--space-l) var(--space-2xl); }

/* Article cards — no hover-scale; single quiet elevation shift on hover */
article.card { background: var(--card, #ffffff); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: var(--space-l); transition: box-shadow var(--dur) ease-out; }
article.card:hover { box-shadow: 0 2px 16px rgba(26,35,50,.07); }
article.card img { width: 100%; display: block; aspect-ratio: 1200/420; object-fit: cover; }
article.card .body { padding: var(--space-l) var(--space-xl) var(--space-xl); }
.pill { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
article.card h2 { font-size: 1.42rem; line-height: 1.28; margin: var(--space-s) 0 var(--space-m); overflow-wrap: anywhere; }
article.card h2 a:hover { color: var(--accent); }

/* TLDR — hairline full border + small accent square marker (not side-stripe) */
.tldr { background: var(--paper-2); border: 1px solid var(--line); padding: var(--space-m) var(--space-l); font-size: .93rem; margin: var(--space-s) 0 var(--space-m); color: var(--ink-soft); position: relative; }
.tldr::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: var(--space-s); }
.meta { font-family: var(--font-ui); font-size: .83rem; color: var(--muted); }

/* Footer — Ft2 inline single line, no top hairline border, generous whitespace instead */
footer { text-align: center; padding: var(--space-2xl) var(--space-l) var(--space-2xl); font-family: var(--font-ui); font-size: .85rem; color: var(--muted); }
footer a { color: var(--accent); white-space: nowrap; }