/* GLOBAL DESIGN: edit these tokens to change all article pages and navigation. */
:root {
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --color-bg: #160709;
  --color-panel: rgba(29, 12, 17, .96);
  --color-text: #f2e4d3;
  --color-muted: #c5aea8;
  --color-link: #ffc2b8;
  --color-rule: #715051;
  --text-body: 19px;
  --text-body-mobile: 18px;
  --text-leading: 1.75;
  --reading-width: 68ch;
  --site-width: 1100px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font:18px/1.75 var(--font-body); }
a { color:var(--color-link); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover { color:#fff5e8; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid #ffc2b8; outline-offset:5px; }
img { max-width:100%; height:auto; }
.skip-link { position:fixed; top:-100px; left:16px; padding:12px; background:#160709; z-index:40; }
.skip-link:focus { top:12px; }
[hidden] { display:none !important; }
.menu-open { overflow:hidden; }
.menu-toggle { position:fixed; top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); z-index:30; display:flex; align-items:center; gap:12px; min-height:48px; padding:12px 16px; border:1px solid var(--color-rule); border-radius:3px; background:var(--color-panel); color:var(--color-text); box-shadow:0 4px 22px #0006; cursor:pointer; }
.menu-label { font:12px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; }
.burger { display:grid; gap:5px; width:22px; }
.burger span { display:block; height:2px; background:currentColor; }
.menu-drawer { position:fixed; inset:0 auto 0 0; margin:0; width:min(390px,90vw); height:100dvh; max-height:100dvh; max-width:none; padding:28px max(24px,env(safe-area-inset-left)); border:0; border-right:1px solid var(--color-rule); background:var(--color-bg); color:var(--color-text); overflow-y:auto; overscroll-behavior:contain; box-shadow:8px 0 45px #0005; }
.menu-drawer::backdrop { background:rgba(9,3,6,.76); }
.menu-header { display:flex; justify-content:space-between; align-items:start; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--color-rule); }
.menu-header p { margin:0; font-size:25px; line-height:1.25; }
.menu-header em { color:var(--color-muted); font-size:21px; }
.menu-close { flex-shrink:0; width:44px; height:44px; border:1px solid var(--color-rule); background:transparent; color:var(--color-text); font:30px/1 var(--font-body); cursor:pointer; }
.menu-primary,.menu-essays { list-style:none; padding:0; margin:20px 0 32px; }
.menu-primary a { display:block; padding:10px 0; font:15px/1.6 var(--font-ui); }
.menu-essays { margin-top:12px; }
.menu-essays li { border-bottom:1px solid #503137; }
.menu-essays a { display:block; padding:16px 0; font-size:19px; line-height:1.4; }
.menu-drawer a { text-decoration:none; color:var(--color-text); }
.menu-drawer a:hover,.menu-drawer a[aria-current] { color:var(--color-link); text-decoration:underline; }
.menu-drawer a[aria-current] { text-decoration-thickness:2px; }
.menu-tagline { color:var(--color-muted); font-size:16px; font-style:italic; }
.fallback-nav { display:flex; gap:24px; padding:16px 24px; }
.reading-page { background:linear-gradient(rgba(22,7,9,.7),#160709 700px),url('/assets/crimson-clouds.webp') center top / 1600px auto no-repeat,#160709; }
.compact-banner { display:block; width:min(540px,90%); margin:78px auto 28px; }
.compact-banner img { display:block; width:100%; background:radial-gradient(ellipse,rgba(231,207,192,.85),rgba(215,186,173,.5) 42%,transparent 73%); }
.essay-section { width:min(var(--site-width),calc(100% - 48px)); margin:0 auto; padding:70px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.section-heading>a,.back-link { font:12px/1.6 var(--font-ui); }
.section-kicker { font:11px/1.7 var(--font-ui); text-transform:uppercase; letter-spacing:.18em; color:var(--color-muted); margin:0 0 10px; }
h1,h2,h3 { line-height:1.17; font-weight:400; text-wrap:balance; }
h1 { font-size:clamp(36px,5vw,66px); margin:16px 0 24px; }
h2 { font-size:clamp(30px,3.5vw,43px); margin:0; }
.post-list { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.post-card { border-top:1px solid var(--color-rule); padding:30px 0; min-width:0; }
.post-card h3 { font-size:30px; margin:13px 0; }
.post-card h3 a { text-decoration:none; color:var(--color-text); }
.post-card>p:not(.post-meta) { color:var(--color-muted); margin:0 0 18px; }
.post-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--color-muted); font:11px/1.7 var(--font-ui); margin:12px 0; }
.topic-links { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:20px 0; font:11px/1.5 var(--font-ui); }
.topic-links a { text-decoration:none; border-bottom:1px solid #8a5555; padding-bottom:3px; }
.standfirst { color:var(--color-muted); font:italic 22px/1.6 var(--font-body); max-width:62ch; }
.archive { padding-top:20px; }
.archive>.post-list { margin-top:40px; }
.article-shell { max-width:var(--site-width); margin:0 auto 60px; padding:44px 48px; background:var(--color-panel); border-top:1px solid var(--color-rule); }
.article-heading { padding-bottom:20px; border-bottom:1px solid var(--color-rule); margin-bottom:36px; }
.article-heading h1 { max-width:22ch; }
.article-grid { display:grid; grid-template-columns:200px minmax(0,1fr); gap:40px; align-items:start; }
.article-grid.without-toc { display:block; }
.toc { position:sticky; top:28px; font:12px/1.7 var(--font-ui); max-height:calc(100svh - 56px); overflow:auto; }
.toc ol { list-style:none; padding:0; margin:0; border-left:1px solid var(--color-rule); }
.toc li { padding:5px 0 5px 14px; }
.toc .toc-depth-3 { padding-left:28px; font-size:11px; }
.toc a { text-decoration:none; color:var(--color-muted); }
.toc a:hover { color:var(--color-text); }
.prose { max-width:var(--reading-width); min-width:0; overflow-wrap:anywhere; font-size:var(--text-body); line-height:var(--text-leading); }
.prose>:first-child { margin-top:0; }
.prose p { margin:0 0 1.4em; }
.prose h2 { margin:1.7em 0 .7em; font-size:32px; }
.prose h3 { margin:1.6em 0 .7em; font-size:25px; }
.prose h4 { font-size:20px; }
.prose blockquote { margin:1.8em 0; padding:4px 0 4px 24px; border-left:3px solid #b95660; font-style:italic; color:#dec3bb; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose ul,.prose ol { padding-left:1.4em; }
.prose li { margin:.4em 0; }
.prose hr { border:0; border-top:1px solid var(--color-rule); margin:2em 0; }
.prose code { font: .8em/1.6 var(--font-ui); background:#351b22; padding:.15em .35em; border-radius:3px; }
.prose pre { padding:20px; background:#0e080b; border:1px solid #53333b; overflow:auto; white-space:pre; }
.prose pre code { padding:0; background:none; }
.prose img { display:block; margin:2em auto; border:1px solid var(--color-rule); }
.table-scroll { overflow-x:auto; margin:1.5em 0; }
.prose table { width:100%; border-collapse:collapse; font-size:16px; }
.prose th,.prose td { border-bottom:1px solid var(--color-rule); text-align:left; padding:12px; min-width:110px; }
.prose th { color:#fff0dc; background:#3e1f27; font-weight:600; }
.post-navigation { display:flex; justify-content:space-between; gap:30px; border-top:1px solid var(--color-rule); margin-top:48px; padding-top:24px; }
.share-jump { display:inline-block; padding:10px 0; font:13px/1.8 var(--font-ui); }
.essay-share { margin-top:48px; padding-top:28px; border-top:1px solid var(--color-rule); scroll-margin-top:88px; }
.essay-share h2 { font-size:26px; margin:0 0 18px; }
.share-actions { display:flex; flex-wrap:wrap; gap:10px; }
.share-actions a,.share-actions button { --share-bg:#351b22; --share-fg:#f2e4d3; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:11px 16px; border:1px solid #ffffff38; border-radius:6px; background:var(--share-bg); color:var(--share-fg); font:600 14px/1.4 system-ui,sans-serif; text-decoration:none; cursor:pointer; box-shadow:0 2px 4px #0002; }
.share-actions a:hover,.share-actions button:hover { background:var(--share-bg); color:var(--share-fg); border-color:#fff; box-shadow:inset 0 0 0 1px #fff8,0 2px 4px #0003; }
.share-actions a:active,.share-actions button:active { box-shadow:inset 0 2px 4px #0004; }
.share-actions .share-service--reddit { --share-bg:#ff4500; --share-fg:#17110d; }
.share-actions .share-service--facebook { --share-bg:#0866ff; --share-fg:#fff; }
.share-actions .share-service--x { --share-bg:#0f1419; --share-fg:#fff; }
.share-actions .share-service--bluesky { --share-bg:#0085ff; --share-fg:#071a2a; }
.share-actions .share-service--linkedin { --share-bg:#0a66c2; --share-fg:#fff; }
.share-actions .share-service--whatsapp { --share-bg:#25d366; --share-fg:#082d18; }
.share-actions .share-service--email { --share-bg:#e9e1d7; --share-fg:#28161b; }
.share-icon { display:block; flex:0 0 20px; width:20px; height:20px; object-fit:contain; }
.share-brand-icon { filter:brightness(0) invert(1); }
.share-service--whatsapp .share-brand-icon { filter:none; }
.share-actions button:disabled { opacity:.6; cursor:wait; }
.share-status { color:var(--color-muted); font:13px/1.6 var(--font-ui); margin:12px 0 0; }
.share-status:empty { margin:0; }
.share-fallback { margin-top:16px; font:13px/1.6 var(--font-ui); }
.share-fallback label { display:block; margin-bottom:8px; }
.share-fallback input { width:100%; min-height:44px; padding:10px; border:1px solid var(--color-rule); border-radius:3px; background:var(--color-bg); color:var(--color-text); font:inherit; }
.share-fallback input:focus-visible { outline:2px solid var(--color-link); outline-offset:3px; }
.post-navigation a { flex:1; text-decoration:none; }
.post-navigation span { display:block; color:var(--color-muted); font:11px/1.8 var(--font-ui); margin-bottom:8px; }
.site-footer { border-top:1px solid #503137; padding:30px 24px; text-align:center; font:11px/1.8 var(--font-ui); color:var(--color-muted); }
.site-footer>a { color:var(--color-text); }
.site-footer span { display:block; margin-top:8px; }
@media(max-width:760px) {
  .post-list { grid-template-columns:1fr; }
  .article-shell { padding:28px 24px; margin:0 12px 36px; }
  .article-grid { display:block; }
  .toc { position:static; max-height:none; margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid var(--color-rule); }
  .prose { font-size:var(--text-body-mobile); }
  .compact-banner { width:min(460px,95%); }
  .section-heading { align-items:start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }