/* =========================================================
   Writing (blog) — listing, archive, search, single article.
   Self-contained wr-* system in the site's paper/ink/red tokens.
   ========================================================= */

.wr-page{display:block}

/* ---- Listing / archive hero ---- */
.wr-hero{padding-top:54px;padding-bottom:30px}
.wr-title{font-family:'Archivo Black',sans-serif;font-size:46px;line-height:1.02;letter-spacing:-1px;margin:14px 0 0;font-weight:400}
.wr-intro{font-family:'Source Serif 4',serif;font-size:18px;line-height:1.6;color:var(--muted);max-width:640px;margin:18px 0 0}
.wr-context{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--muted-2);margin-top:10px}
.wr-hero-rule{height:1px;background:var(--line);margin:34px 0 0}

/* ---- Asymmetric lead block ---- */
.wr-lead{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;padding-top:22px;padding-bottom:10px;align-items:stretch}
.wr-lead-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line-2);border-radius:5px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wr-lead-card:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 12px 34px rgba(20,20,20,.08)}
.wr-lead-media{overflow:hidden;background:var(--ink)}
.wr-lead-media img,.wr-lead-media .wr-cover-svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.wr-lead-card:hover .wr-lead-media img,.wr-lead-card:hover .wr-lead-media .wr-cover-svg{transform:scale(1.03)}
/* Taller feature image to match the writing-list reference. */
.wr-lead-main .wr-lead-media{aspect-ratio:16/10}
.wr-lead-body{display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px}
.wr-lead-main .wr-lead-title{font-family:'Archivo Black',sans-serif;font-size:28px;line-height:1.08;letter-spacing:-.6px;font-weight:400;margin:2px 0 0}
.wr-lead-excerpt{font-family:'Source Serif 4',serif;font-size:16px;line-height:1.55;color:var(--muted);margin:0}
.wr-lead-card .wr-card-more{margin-top:auto;padding-top:12px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--ink)}
.wr-lead-card:hover .wr-card-more{color:var(--red-2)}
/* Stacked side cards: compact horizontal */
.wr-lead-stack{display:flex;flex-direction:column;gap:28px;height:100%;min-height:0}
.wr-lead-side{flex:1 1 0;flex-direction:column;align-items:stretch;min-height:0}
.wr-lead-side .wr-lead-media{flex:0 0 clamp(140px,10.5vw,170px);aspect-ratio:auto}
.wr-lead-side .wr-lead-body{padding:16px 18px 18px;gap:7px;min-width:0;flex:1}
.wr-lead-side .wr-card-meta{gap:8px;flex-wrap:wrap;line-height:1.15}
.wr-lead-side .wr-lead-title{font-family:'Archivo Black',sans-serif;font-size:16px;line-height:1.13;letter-spacing:-.25px;font-weight:400;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wr-lead-side .wr-lead-excerpt{font-size:14px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wr-lead-side .wr-card-more{padding-top:4px}

/* ---- Post-card grid ---- */
.wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:30px;padding-top:38px;padding-bottom:10px}
.wr-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line-2);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wr-card:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 10px 30px rgba(20,20,20,.07)}
.wr-card-media{aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.wr-card-media img,.wr-card-media .wr-cover-svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.wr-card:hover .wr-card-media img,.wr-card:hover .wr-card-media .wr-cover-svg{transform:scale(1.04)}
.wr-card-tile{display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:54px;color:#fff;opacity:.92}
.wr-card-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.wr-card-meta{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.5px;color:var(--muted-2)}
.wr-chip{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--red-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.wr-dot{opacity:.5}
.wr-card-title{font-family:'Archivo Black',sans-serif;font-size:21px;line-height:1.16;letter-spacing:-.4px;font-weight:400;margin:2px 0 0}
.wr-card-excerpt{font-family:'Source Serif 4',serif;font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.wr-card-more{margin-top:auto;padding-top:14px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--ink)}
.wr-card:hover .wr-card-more{color:var(--red-2)}

/* ---- Empty state ---- */
.wr-empty{padding:60px 0 80px}
.wr-empty p{font-family:'Source Serif 4',serif;font-size:18px;color:var(--muted)}

/* ---- Pagination ---- */
.wr-pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:30px 0 70px}
.wr-pager a,.wr-pager span{font-family:'Space Mono',monospace;font-size:13px;min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:3px;text-decoration:none;color:var(--ink);transition:background .2s ease,color .2s ease}
.wr-pager a:hover{background:var(--ink);color:#fff}
.wr-pager .current{background:var(--red);color:#fff;border-color:var(--red)}
.wr-pager .dots{border:0}

/* =========================================================
   Single article
   ========================================================= */
.wr-article{display:block}
/* Back link aligns to the centered reading column, not the full page width. */
.wr-back{padding:34px 0 0}
.wr-back-in{max-width:740px;margin:0 auto;padding-inline:var(--gutter)}
.wr-back a{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--muted-2);text-decoration:none}
.wr-back a:hover{color:var(--red-2)}

.wr-art-head{max-width:740px;margin:0 auto;padding:28px 0 0;text-align:center}
.wr-art-meta{display:flex;justify-content:center;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--muted-2)}
.wr-art-title{font-family:'Archivo Black',sans-serif;font-size:42px;line-height:1.06;letter-spacing:-1px;font-weight:400;margin:16px 0 0}
.wr-art-sub{font-family:'Source Serif 4',serif;font-style:italic;font-size:19px;line-height:1.5;color:var(--muted);margin:16px 0 0}

/* Byline under the article title */
.wr-byline{display:inline-flex;align-items:center;gap:11px;margin:22px auto 0;text-decoration:none;color:inherit}
.wr-byline-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:15px;color:#fff}
.wr-byline-av img{width:100%;height:100%;object-fit:cover;display:block}
.wr-byline-meta{text-align:left;line-height:1.25}
.wr-byline-name{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
.wr-byline:hover .wr-byline-name{color:var(--red-2)}
.wr-byline-role{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3px;color:var(--muted-2)}

/* Cover shares the centered article axis (matches the title block width). */
.wr-art-cover{max-width:740px;margin:40px auto 0;padding-inline:var(--gutter)}
.wr-art-cover img{width:100%;height:auto;display:block;border-radius:5px}
.wr-art-cover .wr-cover-svg{width:100%;height:auto;display:block;border-radius:5px;aspect-ratio:16/9;object-fit:cover}

/* Article layout — centered body with an optional sticky TOC in the margin. */
.wr-art-layout{margin-top:44px}
.wr-toc{display:none}
/* The TOC is a real in-flow grid item (so position:sticky works). The grid is
   symmetric — TOC column on the left + an equal empty mirror column on the
   right — which keeps the 680px body genuinely page-centered. */
@media(min-width:1180px){
	.wr-art-layout.has-toc{display:grid;grid-template-columns:200px minmax(0,680px) 200px;column-gap:40px;justify-content:center;align-items:start}
	.wr-art-layout.has-toc .wr-art-body{grid-column:2;margin-top:0}
	.wr-toc{display:block;grid-column:1;position:sticky;top:118px;align-self:start}
}
.wr-toc-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--muted-2);margin-bottom:12px}
.wr-toc nav{display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--line);padding-left:14px}
.wr-toc nav a{font-family:'Archivo',sans-serif;font-size:13px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .2s ease;border-left:2px solid transparent;margin-left:-16px;padding-left:14px}
.wr-toc nav a:hover{color:var(--ink)}
.wr-toc nav a.is-current{color:var(--red-2);border-left-color:var(--red-2);font-weight:600}

/* Body — measured single column, serif, readable. Always page-centered. */
.wr-art-body{max-width:680px;margin:44px auto 0;font-family:'Source Serif 4',serif;font-size:18px;line-height:1.72;color:#222}
.wr-art-body > *{margin:0 0 1.15em}
.wr-art-body h2{font-family:'Archivo Black',sans-serif;font-size:27px;line-height:1.15;letter-spacing:-.5px;font-weight:400;margin:1.6em 0 .5em}
.wr-art-body h3{font-family:'Archivo',sans-serif;font-size:21px;font-weight:700;margin:1.4em 0 .4em}
.wr-art-body a{color:var(--red-2);text-decoration:underline;text-underline-offset:2px}
.wr-art-body a:hover{color:var(--red-3)}
.wr-art-body ul,.wr-art-body ol{padding-left:1.3em}
.wr-art-body li{margin:0 0 .45em}
.wr-art-body blockquote{border-left:3px solid var(--red);margin:1.4em 0;padding:.2em 0 .2em 22px;font-style:italic;color:var(--muted)}
.wr-art-body img{max-width:100%;height:auto;border-radius:4px;margin:1.4em 0}

/* Big pull-quote — breaks the column, more emphatic than a blockquote. */
.wr-art-body .wr-pull{border:0;margin:1.8em 0;padding:0;font-family:'Source Serif 4',serif;font-style:normal;font-size:27px;line-height:1.32;letter-spacing:-.3px;color:var(--ink-2);text-wrap:balance}
.wr-art-body .wr-pull::before{content:"\201C";font-family:'Archivo Black',sans-serif;color:var(--lime-3);font-size:34px;line-height:0;margin-right:2px;vertical-align:-6px}

/* Key-takeaway callout box. */
.wr-art-body .wr-take{margin:1.8em 0;padding:20px 24px;background:var(--paper-2);border:1px solid var(--line-2);border-left:3px solid var(--red);border-radius:4px}
.wr-art-body .wr-take-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--red-2);margin:0 0 6px;text-transform:uppercase}
.wr-art-body .wr-take p{font-family:'Archivo',sans-serif;font-size:17px;line-height:1.5;color:var(--ink);margin:0}

/* In-article figure with caption (uses generated cover art for section breaks). */
.wr-art-body figure.wr-fig{margin:1.8em 0}
.wr-art-body figure.wr-fig img,.wr-art-body figure.wr-fig svg{width:100%;height:auto;display:block;border-radius:5px;border:1px solid var(--line-2)}
.wr-art-body figure.wr-fig figcaption{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.3px;color:var(--muted-2);margin-top:10px;text-align:center}
.wr-art-body pre{background:var(--ink);color:#eee;padding:18px 20px;border-radius:4px;overflow:auto;font-family:'Space Mono',monospace;font-size:14px;line-height:1.5}
.wr-art-body code{font-family:'Space Mono',monospace;font-size:.92em;background:rgba(20,20,20,.06);padding:.12em .4em;border-radius:3px}
.wr-art-body pre code{background:none;padding:0}

.wr-art-foot{max-width:680px;margin:50px auto 0;padding-top:26px;border-top:1px solid var(--line)}
.wr-tags{display:flex;flex-wrap:wrap;gap:8px}
.wr-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.5px;color:var(--muted-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;text-decoration:none}
.wr-tag:hover{color:var(--red-2);border-color:var(--red-2)}

/* Author bio card at the foot of an article */
.wr-authorbio{max-width:680px;margin:40px auto 0;display:flex;gap:18px;align-items:flex-start;padding:26px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:6px}
.wr-authorbio-av{width:56px;height:56px;font-size:20px}
.wr-authorbio-body{flex:1}
.wr-authorbio-kicker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--muted-2)}
.wr-authorbio-name{font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.3px;margin:4px 0 0}
.wr-authorbio-name span{font-family:'Space Mono',monospace;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted-2)}
.wr-authorbio-about{font-family:'Source Serif 4',serif;font-size:15px;line-height:1.55;color:var(--muted);margin:8px 0 10px}
.wr-authorbio-link{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--red-2);text-decoration:none}
.wr-authorbio-link:hover{text-decoration:underline}

/* Author archive hero */
.wr-author-hero{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.wr-author-av{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:34px;color:#fff;align-self:start}
.wr-author-av img{width:100%;height:100%;object-fit:cover;display:block}
.wr-author-head .wr-title{margin-top:6px}
.wr-author-hero .wr-hero-rule{grid-column:1 / -1}
@media(max-width:620px){
	.wr-author-hero{grid-template-columns:1fr}
	.wr-authorbio{flex-direction:column}
}

/* Next/prev post CTA */
.wr-next{margin-top:60px;border-top:1px solid var(--line)}
.wr-next a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px 0;text-decoration:none;color:inherit}
.wr-next-label{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--muted-2)}
.wr-next-title{font-family:'Archivo Black',sans-serif;font-size:26px;letter-spacing:-.5px;font-weight:400;margin-top:6px}
.wr-next a:hover .wr-next-title{color:var(--red-2)}
.wr-next-arrow{font-size:28px;color:var(--red-2)}

/* =========================================================
   Homepage "Latest writing" strip
   ========================================================= */
.home-writing{padding:70px 0}
.home-writing .hw-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.hw-viewall{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--ink);text-decoration:none}
.hw-viewall:hover{color:var(--red-2)}
.hw-title{font-family:'Archivo Black',sans-serif;font-size:34px;letter-spacing:-.5px;font-weight:400;margin:0 0 34px}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:900px){
	.wr-grid,.hw-grid{grid-template-columns:1fr 1fr}
	.wr-lead,.wr-grid{width:100%;margin-left:auto;margin-right:auto}
	.wr-title{font-size:38px}
	.wr-art-title{font-size:34px}
	.wr-lead{grid-template-columns:1fr}
	.wr-lead-stack{height:auto}
	.wr-lead-side{flex:none;min-height:0}
	.wr-lead-side .wr-lead-media{flex:auto;aspect-ratio:16/8}
}
@media(max-width:620px){
	.wr-grid,.hw-grid{grid-template-columns:1fr}
	.wr-lead-side{flex-direction:column}
	.wr-lead-side .wr-lead-media{flex:auto;aspect-ratio:16/9}
	.wr-title{font-size:31px}
	.wr-intro{font-size:16px}
	.wr-art-title{font-size:28px}
	.wr-art-body{font-size:17px}
	.home-writing .hw-top{flex-direction:column;gap:6px}
}