:root {
	--ink: #eef3f2;
	--muted: #9ba8a6;
	--paper: #0e1213;
	--panel: #151b1c;
	--line: #2b3537;
	--accent: #2bb3a5;
	--accent-deep: #0f4f49;
	--spotify: #1db954;
	--max: 780px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; color: var(--ink);
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 64px), var(--paper);
	font-family: Georgia, 'Times New Roman', serif; line-height: 1.55;
}
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.wide { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
header { border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand { text-decoration: none; font: 800 1.25rem/1 Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.brand span { color: var(--accent); }
nav[aria-label="Main navigation"] { display: flex; gap: 28px; font: 700 .73rem/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
.button { display: inline-block; margin-top: 18px; padding: 14px 19px; background: var(--accent); color: #04110f; font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; border: 0; cursor: pointer; font-family: inherit; }
.button:hover { background: #4fcabd; }
.back-link { display: inline-block; margin: 40px 0 0; color: var(--muted); text-decoration: none; font: 700 .72rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.back-link:hover { color: var(--ink); }
.sources { margin: 10px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font: .84rem/1.6 Arial, sans-serif; color: var(--muted); }
.sources h2 { margin: 0 0 10px; color: var(--ink); font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.sources p { margin: 0 0 10px; }
.sources ul { margin: 0 0 12px; padding-left: 18px; }
.sources a { color: #c9d2d0; }

/* Story page */
.story-header { padding: 56px 0 0; }
.tag { color: var(--muted); font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 14px 0 22px; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.story-photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin: 30px 0; }
.story-date { color: var(--muted); font: .8rem Arial, sans-serif; margin: -8px 0 0; }
.story-figure { margin: 30px 0; }
.story-figure .story-photo { margin: 0; }
.story-figure figcaption { margin-top: 8px; color: var(--muted); font: .74rem/1.5 Arial, sans-serif; }
.story-figure figcaption a { color: var(--muted); }
.article { padding: 0 0 30px; font-size: 1.12rem; }
.article p { margin: 0 0 22px; color: #dcd7d0; }

.gate { position: relative; }
.gate-fade { max-height: 340px; overflow: hidden; position: relative; }
.gate-fade:after { content: ''; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(0deg, var(--paper) 15%, rgba(18,18,18,0) 100%); }
.gate.unlocked .gate-fade { max-height: none; overflow: visible; }
.gate.unlocked .gate-fade:after { display: none; }
.gate.unlocked .gate-cta { display: none; }
.gate-cta { margin: -40px auto 60px; position: relative; z-index: 1; max-width: 460px; border: 1px solid var(--accent); background: #181514; padding: 32px; text-align: center; }
.gate-cta h2 { font-size: 1.7rem; margin-bottom: 10px; }
.gate-cta p { color: var(--muted); margin-bottom: 20px; }
.gate-cta form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gate-cta input[type="email"] { padding: 14px 16px; border: 1px solid var(--accent); background: rgba(255,255,255,.06); color: var(--ink); font: 1rem Arial, sans-serif; min-width: 220px; flex: 1; }
.gate-cta input[type="email"]::placeholder { color: var(--muted); }
.gate-status { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.gate-status.success { font-weight: 800; color: var(--ink); }
.gate-micro { margin: 14px 0 0; font-size: .74rem; color: var(--muted); }

/* Archive */
.archive-head { padding: 56px 0 10px; }
.archive-head h1 { max-width: 600px; }
.archive-head p { color: var(--muted); max-width: 480px; }
.archive-list { display: grid; gap: 18px; padding-bottom: 60px; }
.archive-item { display: flex; gap: 22px; align-items: center; border: 1px solid var(--line); background: var(--panel); padding: 18px; text-decoration: none; }
.archive-item:hover { border-color: #3d4a4c; }
.archive-item img { width: 160px; aspect-ratio: 16/10; object-fit: cover; flex: 0 0 auto; }
.archive-item .tag { margin-bottom: 8px; }
.archive-item h2 { font-size: 1.4rem; line-height: 1.1; margin-bottom: 8px; }
.archive-item p { color: #c1cbc9; font-size: .94rem; margin: 0; }

footer { padding: 28px 0; color: var(--muted); font: .72rem Arial, sans-serif; border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-brand .brand { font-size: 1rem; }
.footer-links { display: flex; align-items: center; gap: 18px; }
.social { display: flex; gap: 16px; }
.social a { display: inline-flex; align-items: center; justify-content: center; }
.social svg { width: 17px; height: 17px; fill: var(--muted); }
.social a:hover svg { fill: var(--ink); }

@media (max-width: 480px) {
	.footer-brand { display: block; }
	.footer-brand .brand { display: block; margin-bottom: 8px; }
	.gate-cta { padding: 24px; margin-left: 0; margin-right: 0; }
	.archive-item { display: block; }
	.archive-item img { width: 100%; margin-bottom: 14px; }
}

.archive-head p a { color: var(--ink); }
.section-label { margin: 10px 0 16px; color: var(--muted); font: 800 .74rem/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 720px) {
	.wide, .wrap { width: calc(100% - 32px); }
	.nav { align-items: flex-start; padding: 22px 0; gap: 20px; }
	nav[aria-label="Main navigation"] { gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
}