/* Lab 5280 Journal — shared post styles (blueprint drafting-paper system) */
:root { --ink: #1b2ce8; --paper: #efe5d2; --dark: #16161a; --hot: #ff4d1f; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--dark); background-color: var(--paper);
  background-image: linear-gradient(rgba(27,44,232,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(27,44,232,0.055) 1px, transparent 1px);
  background-size: 9px 9px; font-family: 'EB Garamond', Georgia, serif; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--hot); }
.pix { font-family: 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; line-height: 1.7; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 32px; }
.top .brand { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 18px; color: var(--dark); text-decoration: none; }
.top nav { display: flex; gap: 20px; }
.top nav a { text-decoration: none; }

article { max-width: 720px; margin: 0 auto; padding: 56px 24px 0; }
.kicker { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ink); }
.kicker .hot { color: var(--hot); }
h1 { margin: 18px 0 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(36px, 6vw, 60px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.dek { margin: 20px 0 0; font-style: italic; font-size: 24px; line-height: 1.35; color: var(--ink); }
.byline { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--ink); }

.body { margin-top: 36px; font-size: 20px; line-height: 1.6; }
.body p { margin: 0 0 1.1em; }
.body h2 { margin: 1.8em 0 0.5em; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.body h3 { margin: 1.4em 0 0.4em; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 22px; }
.body ul, .body ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.body li { margin-bottom: 0.45em; }
.body strong { font-weight: 500; color: var(--dark); }
.tldr { margin: 0 0 32px; padding: 18px 22px; border: 1.5px solid var(--ink); background: rgba(239,229,210,0.85); }
.tldr .pix { color: var(--ink); display: block; margin-bottom: 6px; }
.tldr p { margin: 0; font-size: 19px; line-height: 1.5; }
.note { font-size: 16px; font-style: italic; color: #3a3a44; }

.cta { margin: 48px 0 0; padding: 28px; background: var(--ink); color: var(--paper); }
.cta h2 { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--paper); }
.cta p { margin: 0 0 16px; font-size: 19px; line-height: 1.45; }
.cta a.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--paper); color: var(--ink); text-decoration: none; font-family: 'Silkscreen', monospace; font-size: 12px; text-transform: uppercase; }
.cta a.btn:hover { background: var(--hot); color: var(--dark); }

.sources { margin-top: 40px; font-size: 16px; line-height: 1.5; }
.sources ol { padding-left: 1.2em; }
.sources .pix { color: var(--ink); }
footer { max-width: 720px; margin: 80px auto 0; padding: 20px 24px 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--ink); }
footer a { text-decoration: none; }
@media (max-width: 600px) { .top { padding: 18px 20px; } .body { font-size: 19px; } }