@font-face{font-family:Outfit;src:url('assets/outfit.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Plex;src:url('assets/mono.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f3eee5;--ink:#302720;--muted:#70645a;--brown:#815a40;--line:rgba(65,48,34,.18)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Outfit,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--brown)}a:focus-visible{outline:2px solid var(--brown);outline-offset:6px}::selection{background:#d9cbbc}html{scroll-behavior:smooth;scroll-padding-top:30px}.skip{position:absolute;top:-80px;left:20px;background:var(--paper);padding:12px;z-index:4}.skip:focus{top:12px}
.masthead{max-width:1440px;height:100px;margin:auto;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.identity{display:flex;align-items:center;gap:16px;font-size:14px;line-height:1.1}.monogram{font-size:46px;letter-spacing:-5px;font-weight:550}.monogram span{color:var(--brown)}.masthead nav{display:flex;gap:38px;font-size:14px}.masthead nav a{padding:10px 0}.masthead nav a:last-child{border-bottom:1px solid var(--brown)}.masthead [aria-current]{color:var(--brown)}main{max-width:1280px;margin:auto;padding:60px 5.5% 100px}.intro{max-width:850px;margin-bottom:64px}.meta{font:11px/1.7 Plex,monospace;color:var(--muted);letter-spacing:.04em}.intro h1{font-size:clamp(48px,7vw,94px);line-height:1.03;letter-spacing:-.055em;font-weight:400;margin:26px 0}.intro p:not(.meta){font-size:21px;line-height:1.55;max-width:580px;color:var(--muted)}em{font-family:Georgia,serif;font-weight:400}.entry{display:grid;grid-template-columns:1.2fr 1fr;gap:7%;align-items:center;padding:0 0 64px}.entry h2{font-size:clamp(30px,3.3vw,46px);font-weight:400;line-height:1.12;letter-spacing:-.04em;margin:22px 0}.entry p{font-size:18px;line-height:1.6;color:var(--muted)}.entry figure{margin:0;overflow:hidden;border-radius:24px;background:#d9cbbc}.entry img{display:block;width:100%;aspect-ratio:1.1;object-fit:cover;object-position:67% center;transition:transform .6s}.entry:hover img{transform:scale(1.025)}.read{display:inline-block;border-bottom:1px solid var(--brown);padding:12px 0;font-size:15px}.entry svg{display:block;width:100%;height:auto}.article-portrait{margin:0 0 70px}.article-portrait svg{display:block;width:100%;border-radius:24px;background:#d9cbbc}figcaption{font:11px/1.6 Plex,monospace;color:var(--muted);margin-top:16px}.article-layout{display:grid;grid-template-columns:220px minmax(0,680px);gap:8%;justify-content:space-between}.contents{position:sticky;top:36px;align-self:start}.contents p{margin-top:0}.contents a{display:block;padding:9px 0;font-size:14px}.prose section{margin-bottom:66px}.prose h2{font-size:34px;line-height:1.15;font-weight:400;letter-spacing:-.035em;margin:0 0 24px}.prose p{font-size:19px;line-height:1.75;margin:0 0 22px}.prose blockquote{font-size:clamp(30px,4vw,48px);line-height:1.25;letter-spacing:-.03em;margin:36px 0;padding:16px 0 16px 26px;border-left:2px solid var(--brown)}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:32px 0}.swatch{height:110px;border-radius:12px;border:1px solid var(--line)}.palette figure{margin:0}.palette figcaption{font-size:10px}.palette strong{display:block;color:var(--ink);font-weight:400}.type-specimen{padding:36px 28px;border:1px solid var(--line);border-radius:20px;margin:32px 0;font-size:clamp(30px,4vw,50px);line-height:1.15;letter-spacing:-.035em}.type-specimen small{display:block;font:10px/1.7 Plex,monospace;color:var(--muted);letter-spacing:.02em;margin-top:24px}.closing{border-top:1px solid var(--line);padding-top:32px;display:flex;justify-content:space-between;gap:24px}.site-footer{max-width:1440px;margin:auto;padding:32px 5.5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-size:14px;color:var(--muted)}
@media(max-width:900px){.masthead{height:85px;padding:0 6%}.masthead nav{gap:22px}}@media(max-width:760px){main{padding-top:32px}.identity{font-size:12px;gap:12px}.intro{margin-bottom:38px}.entry{grid-template-columns:1fr;gap:24px}.entry figure{max-height:430px}.article-layout{grid-template-columns:1fr;gap:38px}.contents{position:static;border-bottom:1px solid var(--line);padding-bottom:24px}.contents a{display:inline-block;margin-right:18px}.article-portrait{margin-bottom:40px}.prose p{font-size:18px}.prose section{margin-bottom:48px}.palette{gap:8px}.swatch{height:84px}.site-footer{flex-wrap:wrap}.intro h1{font-size:clamp(43px,9vw,68px)}}@media(max-width:650px){.masthead nav{gap:16px}.masthead nav a{font-size:11px}.masthead nav a:first-child{display:none}}@media(max-width:600px){.masthead{height:82px}}
.stack-list{margin:32px 0}.stack-list>div{display:grid;grid-template-columns:135px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line)}.stack-list h3{font-size:17px;font-weight:500;margin:5px 0}.stack-list p{font-size:17px;margin:0}.prose code{font: .82em Plex,monospace;overflow-wrap:anywhere}.contents a{padding:7px 0}.contents{max-height:calc(100dvh - 72px);overflow-y:auto}@media(max-width:760px){.stack-list>div{grid-template-columns:1fr;gap:10px}.contents{max-height:none;overflow:visible}}
.identity-study{margin:32px 0}.identity-sample{display:flex;align-items:center;gap:32px;padding:36px;border:1px solid var(--line);border-radius:20px}.identity-sample .monogram{font-size:100px;letter-spacing:-10px;line-height:1.15}.identity-name{font-size:20px;line-height:1.15}@media(max-width:400px){.identity-sample{padding:24px;gap:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.entry img{transition:none}.entry:hover img{transform:none}}
/* Mirror the portfolio header exactly so page changes do not shift it. */
.masthead{height:100px;padding:0 5%;gap:0}
@media(max-width:900px){.masthead{height:85px;padding:0 6%}.masthead nav{gap:22px}}
@media(max-width:650px){.masthead nav{gap:16px;font-size:11px}}
@media(min-width:601px) and (max-width:650px){.masthead nav a:first-child{display:inline-block}}
@media(max-width:600px){.masthead{height:80px}.masthead .identity{font-size:12px;gap:13px}.masthead .monogram{font-size:39px}.masthead nav a:first-child{display:none}.masthead nav a span{display:none}}
/* The portfolio's later header rule fixes its gutter at 5% at every viewport. */
@media(max-width:900px){.masthead{padding:0 5%}}

/* Local draft: The expense I no longer have to log. */
.draft-badge{display:inline-flex;align-items:center;gap:8px;font:10px/1 Plex,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);border:1px solid rgba(129,90,64,.36);border-radius:999px;padding:8px 10px;margin:0 0 20px}.draft-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brown)}
.entry--finance{padding-top:54px;border-top:1px solid var(--line)}.entry--finance figure{background:#eee5d9}.entry--finance h2{margin-top:12px}.entry--finance .draft-badge{margin-bottom:0}.entry--finance img{display:block;width:100%;aspect-ratio:1.18;object-fit:cover}
.article-hero{margin:0 0 70px}.article-hero img{display:block;width:100%;border-radius:30px;background:#eee5d9}.article-hero figcaption{max-width:760px}.system-map{margin:34px 0;padding:10px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.18)}.system-map svg{display:block;width:100%;height:auto}.system-map figcaption{padding:0 8px 8px}.decision-card{margin:34px 0;padding:28px;border-radius:22px;background:#e4d6c7}.decision-card .meta{margin:0 0 18px}.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.decision-grid div{padding:16px;border-radius:14px;background:rgba(243,238,229,.78);border:1px solid rgba(65,48,34,.12)}.decision-grid strong{display:block;font-size:16px;font-weight:500;margin-bottom:7px}.decision-grid span{display:block;font-size:14px;line-height:1.4;color:var(--muted)}.principles{list-style:none;margin:28px 0;padding:0;border-top:1px solid var(--line)}.principles li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.5}.principles b{font:11px/1.8 Plex,monospace;color:var(--brown);padding-top:4px}.article-draft-footer{margin-top:66px;padding:18px 22px;border-radius:14px;background:#e7dccf;font:12px/1.5 Plex,monospace;color:var(--muted)}
@media(max-width:760px){.article-hero{margin-bottom:42px}.article-hero img{border-radius:22px}.decision-grid{grid-template-columns:1fr}.decision-card{padding:22px}.system-map{padding:6px;border-radius:18px}.entry--finance{padding-top:42px}}

/* A durable reading index, kept close to the essay rather than consuming a broad left column. */
.article-layout{display:grid;grid-template-columns:150px minmax(0,760px);gap:54px;max-width:964px;margin:0 auto}.contents{position:sticky;top:36px;align-self:start;max-height:calc(100dvh - 72px);overflow-y:auto;margin:0;padding:0}.contents p{margin:0 0 8px}.contents a{display:block;margin:0;padding:7px 0;font-size:13px}.prose{max-width:none;margin:0}.prose section{max-width:760px;margin-left:auto;margin-right:auto}.prose blockquote{max-width:820px;margin-left:auto;margin-right:auto}.prose .palette,.prose .type-specimen,.prose .identity-study,.prose .stack-list{max-width:760px;margin-left:auto;margin-right:auto}@media(max-width:760px){.article-layout{display:block}.contents{position:static;max-height:none;overflow:visible;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 auto 38px;padding:0 0 20px;border-bottom:1px solid var(--line)}.contents p{width:100%;margin:0 0 5px}.contents a{display:inline-block;margin:0;padding:0;font-size:13px}.prose section{max-width:none}}

/* The index remains quiet while reading; approaching it reveals its navigation affordance. */
@media(hover:hover) and (pointer:fine){.contents{padding:10px 12px 12px;border-radius:12px;transition:background-color .28s ease,box-shadow .28s ease}.contents::before{content:"";display:block;width:18px;height:1px;margin:0 0 10px;background:var(--brown);transform:scaleX(.35);transform-origin:left;opacity:.45;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease}.contents a{position:relative;padding:7px 0 7px 10px;color:var(--muted);transition:color .2s ease,transform .26s cubic-bezier(.2,.8,.2,1)}.contents a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--brown);transform:translateY(-50%) scale(0);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.contents:hover,.contents:focus-within{background:rgba(228,214,199,.38);box-shadow:0 10px 28px rgba(81,53,32,.06)}.contents:hover::before,.contents:focus-within::before{transform:scaleX(1);opacity:1}.contents a:hover,.contents a:focus-visible{color:var(--ink);transform:translateX(3px);outline:0}.contents a:hover::before,.contents a:focus-visible::before{transform:translateY(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.contents,.contents::before,.contents a,.contents a::before{transition:none!important}}

/* Notes read newest-first; the number and tag provide a quiet index. */
main#main{display:flex;flex-direction:column}.intro{order:0}.entry{grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:9%;padding:0 0 54px}.entry--finance{order:1;padding-top:0;border-top:0}.entry:not(.entry--finance){order:2;padding-top:54px;border-top:1px solid var(--line)}.entry figure{aspect-ratio:1.38;max-height:310px}.entry figure>a,.entry figure svg,.entry figure img{width:100%;height:100%}.entry figure svg{object-fit:cover}.entry img{aspect-ratio:auto}.entry .meta{display:flex;align-items:center;gap:12px;margin:0}.entry .meta::before{font:11px/1 Plex,monospace;color:var(--brown);letter-spacing:.08em}.entry .meta::after{font:10px/1 Plex,monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-left:1px solid var(--line);padding-left:12px}.entry--finance .meta::before{content:"02"}.entry--finance .meta::after{content:"Personal finance"}.entry:not(.entry--finance) .meta::before{content:"01"}.entry:not(.entry--finance) .meta::after{content:"Design / engineering"}@media(max-width:760px){.entry{grid-template-columns:1fr;gap:22px}.entry figure{aspect-ratio:1.55;max-height:270px}.entry:not(.entry--finance){padding-top:42px}.entry .meta{gap:10px}}