@font-face {
    font-family:Barlow;
    src:url('/assets/barlow-condensed-bold.1e7a8e85724f.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}

@font-face {
    font-family:Plex;
    src:url('/assets/ibm-plex-mono.fd8b43125f42.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}

:root {
    --bg:#10110f;
    --text:#e8e7df;
    --muted:#92948b;
    --rule:#30322c;
    --accent:#c5cc9b;
    --display:Barlow,'Arial Narrow',sans-serif;
    --mono:Plex,'Courier New',monospace;
    color-scheme:dark;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:30px;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.7 var(--mono);
    -webkit-font-smoothing:antialiased;
}

body:before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

::selection {
    background:var(--accent);
    color:var(--bg);
}

a {
    color:inherit;
    text-decoration:none;
}

a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:7px;
}

svg {
    display:block;
    width:19px;
    height:19px;
}

.container {
    max-width:1080px;
    width:calc(100% - 112px);
    margin-inline:auto;
}

.site-header {
    height:91px;
    border-bottom:1px solid var(--rule);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.wordmark {
    font:700 25px/1 var(--display);
    letter-spacing:.4px;
}

.header-socials {
    position:absolute;
    right:40px;
}

.skip-link {
    position:absolute;
    left:20px;
    top:-90px;
    z-index:10;
    padding:10px;
    background:var(--text);
    color:var(--bg);
}

.skip-link:focus {
    top:12px;
}

.intro {
    padding:54px 0 48px;
    animation:arrive .65s both;
}

.eyebrow,.section-label,.post-tag {
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.eyebrow {
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:10px;
}



.intro h1 {
    font:700 clamp(56px,6.6vw,88px)/1 var(--display);
    text-transform:uppercase;
    letter-spacing:-1.7px;
    margin:0 0 20px;
}

.period {
    color:var(--accent);
}


.intro>p,.intro-copy>p {
    max-width:740px;
    color:#a2a498;
    font-size:13px;
    margin:0;
    line-height:1.9;
}

.intro>p strong,.intro-copy>p strong {
    color:var(--text);
    font-weight:400;
}

.section-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #7e8172;
    padding-bottom:16px;
}

.section-label h2 {
    font:inherit;
    margin:0;
}

.section-label>span {
    color:var(--muted);
    letter-spacing:.5px;
}

.section-label>span>span {
    margin-left:18px;
}

.post-row {
    display:grid;
    grid-template-columns:174px 1fr 27px;
    gap:28px;
    padding:33px 0 35px;
    border-bottom:1px solid var(--rule);
    transition:background .2s,padding .2s;
}

.post-date {
    padding-top:3px;
    font-size:11px;
    color:#b3b5a9;
}

.post-date>span {
    display:block;
    color:#85887b;
    font-size:10px;
    margin-top:7px;
}

.post-tag {
    font-size:9px;
    color:#a1a591;
    letter-spacing:1.3px;
    display:flex;
    align-items:center;
    gap:15px;
}

.latest {
    color:var(--accent);
    font-size:8px;
    letter-spacing:.8px;
    border-left:1px solid #555945;
    padding-left:14px;
}

.post-summary h3 {
    font:700 32px/1.14 var(--display);
    letter-spacing:.1px;
    text-transform:uppercase;
    margin:9px 0 10px;
    transition:color .2s;
}

.post-summary p {
    color:var(--muted);
    font-size:12px;
    line-height:1.85;
    margin:0;
    max-width:660px;
}

.post-arrow {
    font:25px/1 var(--mono);
    color:#90947f;
    padding-top:24px;
    transition:transform .2s,color .2s;
}

.post-row:hover {
    background:#ffffff02;
}

.post-row:hover h3 {
    color:var(--accent);
}

.post-row:hover .post-arrow,.next-post:hover .post-arrow {
    transform:translate(3px,-3px);
    color:var(--accent);
}

.end-note {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    padding:32px 0 64px;
    font-size:10px;
    color:#898c80;
}

.end-note>span {
    font-size:19px;
}

.site-footer {
    border-top:1px solid #5d6153;
    padding:32px 0 23px;
}

.footer-top,.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.footer-name {
    font:700 20px/1.5 var(--display);
    text-transform:uppercase;
    letter-spacing:.4px;
}

.footer-name>span {
    display:block;
    font:10px/1.8 var(--mono);
    text-transform:none;
    letter-spacing:0;
    color:var(--muted);
    margin-top:5px;
}

.socials {
    display:flex;
    gap:15px;
}

.socials a {
    width:36px;
    height:40px;
    display:grid;
    place-items:center;
    color:#b5b8a9;
    transition:color .2s,transform .2s;
}

.socials a:hover {
    color:var(--text);
    transform:translateY(-3px);
}

.footer-bottom {
    color:#878a7d;
    font-size:9px;
    padding-top:39px;
}

.footer-bottom a {
    padding:8px 0;
}

.footer-bottom a:hover {
    color:var(--text);
}

.footer-bottom a span {
    margin-left:12px;
}

.article {
    padding-top:59px;
    padding-bottom:65px;
    animation:arrive .55s both;
}

.article-nav {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--rule);
    padding-bottom:25px;
    color:var(--muted);
    font-size:11px;
}

.article-nav a:hover {
    color:var(--text);
}

.article-nav a span {
    margin-right:12px;
}

.article-header {
    padding:40px 0 37px;
}

.reading-time {
    color:var(--muted);
    letter-spacing:0;
    text-transform:none;
    border-left:1px solid var(--rule);
    padding-left:15px;
}

.article-header h1 {
    font:700 clamp(44px,5.5vw,72px)/1.02 var(--display);
    text-transform:uppercase;
    letter-spacing:-.5px;
    max-width:950px;
    margin:17px 0 23px;
}

.article-deck {
    max-width:760px;
    color:#a5a99a;
    font-size:15px;
    line-height:1.9;
    margin:0;
}

.prose {
    max-width:780px;
    color:#bcbfb1;
    font-size:14px;
    line-height:2;
}

.prose p {
    margin:0 0 26px;
}

.prose h2,.prose h3 {
    font:700 32px/1.2 var(--display);
    text-transform:uppercase;
    color:var(--text);
    margin:43px 0 21px;
}

.prose h3 {
    font-size:25px;
}

.prose a {
    text-decoration:underline;
    text-underline-offset:4px;
    color:var(--text);
}

.prose a:hover {
    color:var(--accent);
}

.prose strong {
    color:var(--text);
}

.prose pre {
    padding:23px 25px;
    border:1px solid var(--rule);
    border-left:2px solid #8a9172;
    background:#171913;
    overflow:auto;
    line-height:1.8;
    margin:28px 0 32px;
    font-size:12px;
    color:#c9cfb6;
}

.prose code {
    font-family:var(--mono);
}

.prose :not(pre)>code {
    background:#24271e;
    padding:3px 6px;
    font-size:.88em;
    color:#d1d7bd;
    overflow-wrap:anywhere;
}

.prose blockquote {
    margin:32px 0;
    border-left:2px solid var(--accent);
    padding:5px 0 5px 23px;
    color:var(--text);
}

.prose blockquote p:last-child {
    margin-bottom:0;
}

.prose ul,.prose ol {
    padding-left:25px;
    margin-bottom:28px;
}

.prose li {
    padding-left:7px;
    margin-bottom:8px;
}

.prose li::marker {
    color:var(--accent);
}

.prose img {
    max-width:100%;
    height:auto;
}

.prose table {
    display:block;
    overflow:auto;
    border-collapse:collapse;
    margin-bottom:28px;
}

.prose th,.prose td {
    text-align:left;
    border:1px solid var(--rule);
    padding:10px 15px;
}

.prose hr {
    border:0;
    border-top:1px solid var(--rule);
    margin:35px 0;
}

.article-signoff {
    display:flex;
    gap:23px;
    align-items:center;
    padding:26px 0 45px;
}


.article-signoff p {
    font-size:11px;
    color:var(--muted);
}

.article-signoff p span {
    color:var(--text);
}

.next-post {
    border-top:1px solid #666b59;
    border-bottom:1px solid var(--rule);
    display:block;
    padding:28px 50px 31px 0;
    position:relative;
}

.next-post h2 {
    font:700 32px/1.15 var(--display);
    text-transform:uppercase;
    margin:13px 0 0;
}

.next-post .post-arrow {
    position:absolute;
    right:0;
    top:30px;
}

.next-post:hover h2 {
    color:var(--accent);
}

.back-link {
    display:inline-block;
    padding:15px 0;
    font-size:12px;
    color:var(--accent);
}

.empty-state {
    padding:55px 0;
}

.empty-state h3 {
    font:700 38px var(--display);
    margin:0;
}

.empty-state p {
    color:var(--muted);
}

.not-found {
    min-height:65vh;
}

.not-found .back-link {
    margin-top:25px;
}

@keyframes arrive {
    from {
        opacity:0;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

@media(min-width:1500px) {
    .container {
        max-width:1160px;
    }
    .intro {
        padding-top:62px;
    }
    .intro h1 {
        font-size:96px;
    }
    .post-row {
        grid-template-columns:190px 1fr 27px;
    }
}

@media(max-width:760px) {
    .container {
        width:calc(100% - 44px);
    }
    .site-header {
        height:76px;
    }
    .wordmark {
        font-size:23px;
    }
    .intro {
        padding:36px 0 34px;
    }
    .intro h1 {
        font-size:clamp(52px,12.5vw,74px);
        letter-spacing:-1px;
        margin-top:0;
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1px;
    }
    .intro>p,.intro-copy>p {
        font-size:11px;
    }
    .post-row {
        grid-template-columns:1fr 22px;
        gap:15px;
        padding:27px 0;
    }
    .post-date {
        grid-column:1/-1;
        display:flex;
        gap:15px;
        align-items:center;
        padding:0;
        font-size:10px;
    }
    .post-date>span {
        margin:0;
        border-left:1px solid var(--rule);
        padding-left:15px;
        font-size:9px;
    }
    .post-summary h3 {
        font-size:29px;
    }
    .post-summary p {
        font-size:11px;
    }
    .post-arrow {
        font-size:21px;
        padding-top:24px;
    }
    .section-label {
        font-size:9px;
    }
    .end-note {
        padding-bottom:45px;
    }
    .footer-top {
        align-items:flex-start;
    }
    .footer-name {
        font-size:18px;
    }
    .footer-name>span {
        max-width:240px;
        font-size:9px;
    }
    .socials {
        gap:5px;
    }
    .socials a {
        width:32px;
    }
    .footer-bottom {
        font-size:8px;
        padding-top:25px;
    }
    .article {
        padding-top:35px;
        padding-bottom:45px;
    }
    .article-nav {
        font-size:10px;
        padding-bottom:21px;
    }
    .article-header {
        padding:30px 0;
    }
    .article-header h1 {
        font-size:47px;
    }
    .article-deck {
        font-size:12px;
    }
    .prose {
        font-size:12px;
        line-height:1.95;
    }
    .prose h2 {
        font-size:29px;
    }
    .prose pre {
        padding:17px;
        font-size:10px;
    }
    .next-post h2 {
        font-size:29px;
    }
    .header-socials {
        position:static;
        margin-left:12px;
    }
    .header-socials:empty {
        display:none;
    }
    .header-socials .socials {
        gap:0;
    }
    .header-socials svg {
        width:15px;
    }
}

@media(max-width:380px) {
    .footer-top {
        flex-direction:column;
    }
    .article-header h1 {
        font-size:40px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
    }
}


/* Article reading layout */
.article {
    max-width:900px;
    margin-inline:auto;
    padding-top:42px;
}
.article-header {
    padding:38px 0 42px;
    border-bottom:1px solid var(--rule);
    margin-bottom:40px;
}
.article-header h1 {
    font-size:clamp(44px,5.3vw,72px);
    margin:20px 0 24px;
    scroll-margin-top:32px;
    text-wrap:balance;
}
.article-deck { max-width:760px; }
.prose {
    max-width:none;
    font-size:15px;
    line-height:1.95;
}
.prose > p, .prose > ul, .prose > ol, .prose > blockquote { max-width:780px; }
.prose h2 { margin-top:56px; scroll-margin-top:100px; }
.prose > p:first-child { color:var(--text); font-size:17px; }
.reading-bar {
    position:fixed;
    inset:0 0 auto;
    z-index:20;
    background:rgba(16,17,15,.95);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule);
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform .28s ease, visibility .28s;
}
.reading-bar.is-visible { transform:translateY(0); visibility:visible; }
.reading-bar-inner {
    width:calc(100% - 44px);
    max-width:900px;
    min-height:74px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:23px;
}
.reading-title {
    flex:1;
    min-width:0;
    font:700 23px/1.15 var(--display);
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.reading-back,.reading-top { display:grid; place-items:center; min-width:36px; min-height:44px; color:var(--accent); font-size:19px; }
.reading-progress { height:2px; background:var(--accent); transform:scaleX(var(--progress,0)); transform-origin:left; }
.code-block { margin:30px 0 36px; border:1px solid #405071; background:#192237; }
.code-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:47px; padding:0 19px; background:#27344e; border-bottom:1px solid #405071; }
.code-language { font:11px var(--mono); color:#edf2ff; letter-spacing:.6px; }
.code-language:before { content:'</>'; color:#79b8ff; margin-right:10px; }
.code-copy { border:0; background:transparent; color:#c7d8f5; font:11px var(--mono); cursor:pointer; padding:12px 0 12px 16px; min-height:44px; }
.code-copy:hover { color:var(--text); }
.code-copy:focus-visible,.code-block pre:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.prose .code-block pre {
    display:flex;
    margin:0;
    padding:23px 24px 25px 0;
    border:0;
    background:transparent;
    font-size:14px;
    line-height:1.9;
    tab-size:4;
}
.code-block pre > code { display:block; flex:1; padding-right:4px; color:#edf2ff; }
.code-line-numbers { display:block; flex:none; min-width:52px; padding:0 16px 0 12px; text-align:right; user-select:none; color:#8193b5; font-family:var(--mono); }
.token.comment,.token.prolog,.token.doctype { color:#9baac5; font-style:italic; }
.token.punctuation { color:#d9e2f5; }
.token.keyword,.token.atrule { color:#ff8d8d; }
.token.string,.token.attr-value { color:#a9e87d; }
.token.function,.token.class-name { color:#ffdb70; }
.token.variable,.token.parameter { color:#80dfff; }
.token.number,.token.boolean,.token.constant { color:#c5a0ff; }
.token.operator,.token.entity,.token.url { color:#ffab70; }
.token.property,.token.tag,.token.attr-name { color:#80baff; }
.token.important { color:#ff8d8d; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.clipboard-input { position:fixed; top:0; left:-9999px; }
@media(max-width:760px) {
    .article { padding-top:30px; }
    .article-header { padding:28px 0; margin-bottom:28px; }
    .article-header h1 { font-size:46px; }
    .article-deck { font-size:13px; }
    .prose { font-size:13px; line-height:1.95; }
    .prose > p:first-child { font-size:14px; }
    .prose h2 { margin-top:39px; }
    .reading-bar-inner { min-height:64px; gap:9px; }
    .reading-title { font-size:19px; }
    .reading-back,.reading-top { min-width:28px; }
    .code-toolbar { padding-inline:13px; }
    .prose .code-block pre { font-size:12px; padding-top:18px; padding-bottom:20px; }
    .code-line-numbers { min-width:39px; padding-right:12px; padding-left:8px; }
}
@media(prefers-reduced-motion:reduce) {
    .reading-bar { transition:none; }
}

/* Compact photo-backed masthead. */
.intro-personal {
    position:relative;
    isolation:isolate;
    min-height:350px;
    display:flex;
    align-items:center;
    padding:38px 0;
    margin-bottom:22px;
    animation:none;
}
.intro-copy { position:relative; z-index:1; width:57%; animation:arrive .6s both; }
.intro-copy h1 { font-size:clamp(58px,6vw,82px); max-width:530px; }
.intro-copy p { max-width:510px; color:#b5b8ac; font-size:12px; }
.intro-portrait { position:absolute; inset:0 0 0 auto; width:62%; margin:0; z-index:-1; overflow:hidden; }
.intro-portrait:after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to right,var(--bg) 0%,rgba(16,17,15,.9) 10%,rgba(16,17,15,.45) 23%,rgba(16,17,15,.08) 36%,transparent 45%),linear-gradient(to top,var(--bg) 0%,rgba(16,17,15,.85) 8%,rgba(16,17,15,.35) 21%,rgba(16,17,15,.06) 34%,transparent 43%);
}
.intro-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 57%; filter:saturate(.65); }
@media(max-width:760px) {
    .intro-personal { display:grid; grid-template-columns:1fr; min-height:0; padding:0 0 25px; margin-bottom:0; }
    .intro-copy { display:contents; }
    .intro-copy h1 { grid-row:1; grid-column:1; align-self:end; z-index:1; font-size:clamp(48px,11vw,72px); max-width:65%; margin:0; padding-bottom:20px; }
    .intro-copy p { grid-row:2; grid-column:1; margin-top:15px; font-size:11px; }
    .intro-portrait { position:relative; inset:auto; grid-row:1; grid-column:1; height:245px; width:100%; }
    .intro-portrait img { object-position:50% 61%; }
    .intro-portrait:after { background:linear-gradient(to top,var(--bg) 0%,rgba(16,17,15,.85) 12%,rgba(16,17,15,.35) 30%,transparent 52%),linear-gradient(to right,var(--bg) 0%,rgba(16,17,15,.5) 15%,rgba(16,17,15,.1) 30%,transparent 42%); }
}