/*BASE*/
@font-face{font-family:"Aktiv Grotesk";src:url(/fonts/aktiv-grotesk-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url(/fonts/aktiv-grotesk-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url(/fonts/aktiv-grotesk-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url(/fonts/aktiv-grotesk-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{--bg:#f6f2e6;--fg:#1c1b17;--dim:#6a6860;--line:#e2ddcf;--display:"Aktiv Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--text:"Aktiv Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root{color-scheme:light}
:root[data-theme="dark"]{--bg:#151412;--fg:#fff;--dim:#9c978b;--line:#2e2c27;color-scheme:dark}
*{box-sizing:border-box}
html,body{transition:background-color .3s ease,color .3s ease}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--text);font-weight:400;-webkit-font-smoothing:antialiased}
main{max-width:600px;margin:0 auto;padding:64px 24px 120px}
main.wide{max-width:680px}
a{color:inherit}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
h1,h2{font-family:var(--display);letter-spacing:-.02em}
p{margin:0 0 16px}
em{font-style:italic}
/*ENDBASE*/
/* Margin borders: a faint band down each side of the text column, ruled
   and set with eight-pointed stars like the border of a Persian manuscript
   page. Wide screens only, and not on the full-width photo grid. */
@media (min-width:860px){
body{position:relative;--half:300px}
body:has(main.wide){--half:340px}
body:not(.page-photos)::before,body:not(.page-photos)::after{content:"";position:absolute;top:40px;bottom:40px;width:24px;pointer-events:none;background:var(--fg);opacity:.14;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' fill='none' stroke='black' stroke-width='.8'%3E%3Cpath d='M.5 0V32M2.5 0V32M21.5 0V32M23.5 0V32M12 0V9.5M12 22.5V32M7.4 11.4h9.2v9.2H7.4zM12 9.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3Ccircle cx='12' cy='16' r='2'/%3E%3C/svg%3E") center top/24px 32px repeat-y,linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent);-webkit-mask-composite:source-in;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' fill='none' stroke='black' stroke-width='.8'%3E%3Cpath d='M.5 0V32M2.5 0V32M21.5 0V32M23.5 0V32M12 0V9.5M12 22.5V32M7.4 11.4h9.2v9.2H7.4zM12 9.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3Ccircle cx='12' cy='16' r='2'/%3E%3C/svg%3E") center top/24px 32px repeat-y,linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-composite:intersect}
body::before{right:calc(50% + var(--half) + 40px)}
body::after{left:calc(50% + var(--half) + 40px)}
}

/* ── Sub-page back bar ────────────────────────────────── */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 56px; font-size: 14px; }
.top a { color: var(--dim); text-decoration: none; }
.top a:hover { color: var(--fg); }
.top span { color: var(--dim); }

/* ── Essays ───────────────────────────────────────────── */
.article-meta { margin-bottom: 40px; }
.article-pub, .kicker { margin: 0 0 12px; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.article-title { margin: 0 0 10px; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.subtitle { margin: 0 0 14px; color: var(--dim); font-size: 17px; line-height: 1.4; }
.article-byline { margin: 0; color: var(--dim); font-size: 14px; }
.article-body p, .prose p, .essay-text p { margin: 0 0 1.15em; font-size: 17px; line-height: 1.65; }
.article-epigraph { color: var(--dim); font-style: italic; }
.article-hero { margin: 0 0 32px; }
figure img { display: block; width: 100%; height: auto; }
.article-hero img { display: block; width: 100%; height: clamp(180px, 40vw, 280px); object-fit: cover; }

/* ── Research article ─────────────────────────────────── */
.stat-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-num { font: 600 28px/1 var(--display); letter-spacing: -.03em; }
.stat-label { margin-top: 6px; color: var(--dim); font-size: 12px; line-height: 1.35; }
.prose-section { margin: 48px 0 20px; }
.prose-section-label { margin: 0 0 6px; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.prose-section-heading { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.prose-section-heading em { font-style: normal; }
.pull-quote { margin: 32px 0; padding-left: 18px; border-left: 2px solid var(--fg); }
.pull-quote p { margin: 0; font: 500 20px/1.4 var(--display); letter-spacing: -.01em; }
.footnotes { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); }
.footnotes-title { margin-bottom: 8px; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footnote { margin: 0 0 8px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.chart-block, .poll-card { margin: 32px 0; }
.poll-grid { display: grid; gap: 28px; margin: 32px 0; }
.chart-title, .poll-question { font: 600 16px/1.3 var(--display); letter-spacing: -.01em; }
.chart-source, .poll-source { margin: 2px 0 12px; color: var(--dim); font-size: 12px; }
.chart-note { margin-top: 10px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.chart-container { position: relative; width: 100%; }
.poll-bar-wrap + .poll-bar-wrap { margin-top: 12px; }
.poll-bar-label { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.poll-bar-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.poll-bar-fill { height: 100%; background: var(--fg); }
.poll-bar-fill.no { background: var(--dim); }
.sitefoot { margin-top: 64px; color: var(--dim); font-size: 12px; }

/* ── Photo essay ──────────────────────────────────────── */
.essay-block { margin: 0 0 48px; }
figure { margin: 0 0 20px; }
figcaption { margin-top: 8px; color: var(--dim); font-size: 12px; }

/* ── Photos page ──────────────────────────────────────── */
.page-photos main { max-width: 1100px; padding-top: 48px; padding-bottom: 96px; }
.page-photos .top { margin-bottom: 40px; }
.page-photos .top strong { color: var(--fg); font: 600 15px var(--display); }
.set { margin-bottom: 48px; }
.set h2 { margin: 0 0 12px; font: 400 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.set h2 a { color: var(--fg); text-decoration: none; }
.set h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.set h2 span { margin-left: 6px; color: var(--dim); }
.grid { columns: 3 240px; column-gap: 6px; }
.grid a { display: block; margin-bottom: 6px; break-inside: avoid; }
.grid img { display: block; width: 100%; height: auto; background: var(--line); }
/* Photos appear as the page loads, lo-fi: each flickers in at a low frame
   rate, from washed-out and contrasty to full colour, in a wave
   across the grid (driven by the script at the end of photos.html; .develop
   is only set when motion is allowed) */
.develop .grid a { overflow: hidden; background: var(--line); }
.develop .grid img { opacity: 0; transform: translateY(8px); filter: grayscale(1) contrast(1.8) brightness(1.35); transition: opacity .55s steps(10, end), transform .55s steps(8, end), filter .9s steps(12, end); }
.develop .grid img.shown { opacity: 1; transform: none; filter: none; }
.develop .top, .develop .set h2 { animation: set-in .5s steps(8, end) both; }
@keyframes set-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 560px) {
  .stat-strip-inner { grid-template-columns: 1fr 1fr; }
  .article-title { font-size: 30px; }
}