@font-face { font-family: "Editorial Serif"; src: local("Iowan Old Style"), local("Palatino Linotype"); font-display: swap; }
:root { --canvas:#1b1a19; --paper:#f4f1eb; --body:#e8e5df; --muted:#aaa59e; --line:rgba(244,241,235,.11); --serif:"Editorial Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; color:var(--body); background:var(--canvas); font-family:var(--serif); font-size:17px; line-height:1.6; text-rendering:optimizeLegibility; }
a { color:var(--muted); text-decoration-color:rgba(170,165,158,.3); text-decoration-thickness:1px; text-underline-offset:.2em; transition:color 160ms ease,text-decoration-color 160ms ease; }
a:hover,a:focus-visible { color:var(--paper); text-decoration-color:currentColor; }
button { font:inherit; }
.skip-link { position:fixed; top:.75rem; left:.75rem; z-index:10; padding:.55rem .8rem; color:var(--canvas); background:var(--paper); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.home-shell { display:grid; grid-template-columns:minmax(0,500px) 340px; align-items:start; gap:clamp(4.5rem,9vw,9rem); width:min(100%,1040px); padding:2.75rem; }
.home-copy { min-width:0; }
h1,h2,p { margin-top:0; }
h1 { margin:0 0 2.35rem; color:var(--paper); font-size:clamp(2.35rem,5vw,2.65rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; }
h1 a { color:inherit; text-decoration:none; }
h1 span { margin-right:.08em; color:#d8d2c8; }
h2 { margin-bottom:1.05rem; color:var(--paper); font-size:1.45rem; font-weight:600; letter-spacing:-.02em; line-height:1.4; }
.section-block { margin-bottom:2.75rem; }
.section-rule { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding-bottom:.55rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.bio-toggle { display:flex; gap:.15rem; }
.bio-toggle button { padding:.1rem .42rem; border:0; border-radius:3px; color:var(--muted); background:transparent; cursor:pointer; font-size:.7rem; }
.bio-toggle button[aria-pressed="true"] { color:var(--paper); background:rgba(244,241,235,.08); }
.bio-copy p { margin-bottom:.95rem; }
.bio-copy p:last-child { margin-bottom:0; }
.notes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.12rem 2.35rem; margin:0; padding:0; list-style:none; }
.notes-grid li { position:relative; padding-left:.72rem; }
.notes-grid li::before { position:absolute; top:.56rem; left:0; color:var(--paper); content:"▪"; font-size:.45rem; }
.blog-list { border-top:1px solid var(--line); }
.blog-list a { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:.55rem 0; border-bottom:1px solid var(--line); color:var(--body); text-decoration:none; }
.blog-list a:hover span,.blog-list a:focus-visible span { color:var(--paper); }
.blog-list time { flex:none; color:var(--muted); font-size:.72rem; }
.art-panel { position:sticky; top:2.75rem; overflow:hidden; border:1px solid rgba(244,241,235,.18); border-radius:8px; background:#101719; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.art-panel img { display:block; width:100%; height:auto; }
.article-shell { width:min(100% - 2.5rem,680px); margin-inline:auto; padding:3rem 0 5rem; }
.article-nav { margin-bottom:5rem; }
.article-nav a { text-decoration:none; }
.article-header { margin-bottom:3rem; }
.article-header h1 { margin-bottom:.7rem; font-size:clamp(2.5rem,9vw,4.4rem); line-height:1.02; }
.article-kicker { margin-bottom:.85rem; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.article-status { padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); }
.article-status p:last-child { margin-bottom:0; }
.note-shell { width:min(100% - 2.5rem,820px); padding-bottom:7rem; }
.note-header { max-width:720px; margin-bottom:3.5rem; }
.note-header h1 { max-width:13ch; }
.article-lede { max-width:620px; margin:1.35rem 0 0; color:#c8c3bb; font-size:clamp(1.15rem,2.4vw,1.42rem); line-height:1.5; }
.idea-diagram { --idea:#e6c76a; position:relative; overflow:hidden; margin:0 0 4.75rem; padding:1.45rem; border:1px solid color-mix(in srgb,var(--idea) 42%,transparent); border-radius:10px; background:radial-gradient(circle at 88% -5%,color-mix(in srgb,var(--idea) 18%,transparent),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.idea-diagram::before { position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:repeating-linear-gradient(96deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px); content:""; }
.tone-blue { --idea:#86c7dc; }
.tone-green { --idea:#93bd72; }
.tone-gold { --idea:#e6c76a; }
.tone-coral { --idea:#e9856c; }
.tone-violet { --idea:#aaa0df; }
.idea-heading { position:relative; z-index:1; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.idea-heading span { color:var(--muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.idea-heading strong { color:var(--paper); font-size:1rem; font-weight:600; }
.idea-path { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--line); list-style:none; }
.idea-path li { position:relative; min-height:185px; padding:1.1rem; background:color-mix(in srgb,var(--canvas) 93%,var(--idea)); }
.idea-path li::after { position:absolute; top:1.65rem; right:-5px; z-index:2; width:9px; height:9px; border-top:1px solid var(--idea); border-right:1px solid var(--idea); content:""; transform:rotate(45deg); }
.idea-path li:last-child::after { display:none; }
.idea-number { display:block; margin-bottom:2.8rem; color:var(--idea); font-size:.68rem; letter-spacing:.12em; }
.idea-path strong { display:block; margin-bottom:.4rem; color:var(--paper); font-size:1.12rem; font-weight:600; }
.idea-path p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.idea-diagram figcaption { position:relative; z-index:1; max-width:650px; margin-top:1rem; color:var(--muted); font-size:.78rem; line-height:1.45; }
.generated-diagram { --idea:#e6c76a; margin:0 0 4.75rem; }
.generated-diagram img { display:block; width:100%; height:auto; aspect-ratio:3/2; border:1px solid color-mix(in srgb,var(--idea) 38%,transparent); border-radius:10px; background:#111; object-fit:cover; box-shadow:0 24px 65px rgba(0,0,0,.22); }
.generated-diagram-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:.25rem 1.5rem; padding:1rem .1rem 0; }
.generated-diagram-copy span { color:var(--idea); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.generated-diagram-copy strong { color:var(--paper); font-size:.9rem; font-weight:600; }
.generated-diagram-copy figcaption { grid-column:2; max-width:560px; color:var(--muted); font-size:.78rem; line-height:1.45; }
.article-prose { max-width:680px; }
.prose-section { margin:0 0 3.35rem; }
.prose-section h2 { margin-bottom:1.1rem; font-size:clamp(1.65rem,4vw,2.15rem); }
.prose-section p { margin-bottom:1.15rem; color:#d8d4cd; font-size:1.08rem; line-height:1.72; }
.prose-section p:last-child { margin-bottom:0; }
.article-end { display:flex; align-items:center; gap:.8rem; margin-top:5rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.article-end span { color:var(--paper); }
.article-end p { margin:0; }
.essay-header { margin-bottom:3.75rem; }
.essay-header h1 { max-width:12ch; }
.essay-meta { display:flex; align-items:center; gap:.55rem; margin:1.4rem 0 0; color:var(--muted); font-size:.76rem; }
.essay-pullquote { position:relative; max-width:680px; margin:0 0 4.75rem; padding:2.3rem clamp(1.35rem,5vw,2.8rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--paper); }
.essay-pullquote::before { position:absolute; top:1rem; left:.15rem; color:var(--idea,#86c7dc); content:"“"; font-size:3.5rem; line-height:1; opacity:.55; }
.essay-pullquote p { max-width:18ch; margin:0; font-size:clamp(1.65rem,4.5vw,2.45rem); letter-spacing:-.025em; line-height:1.18; }
.essay-author { display:flex; gap:1.1rem; max-width:680px; margin-top:5.5rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); }
.author-mark { display:grid; flex:0 0 auto; width:2.25rem; height:2.25rem; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--paper); font-size:1rem; }
.essay-author p { max-width:520px; margin:0; font-size:.83rem; line-height:1.55; }
.essay-author strong { color:var(--body); font-weight:600; }
@media (max-width:860px) { .home-shell { grid-template-columns:minmax(0,560px); width:min(100%,650px); padding:2rem 1.5rem 4rem; } .art-panel { position:relative; top:0; order:-1; } }
@media (max-width:620px) { .idea-heading { display:block; } .idea-heading span { display:block; margin-bottom:.2rem; } .idea-path { grid-template-columns:1fr; } .idea-path li { min-height:0; } .idea-path li::after { top:auto; right:50%; bottom:-5px; transform:rotate(135deg); } .idea-number { margin-bottom:1.4rem; } .generated-diagram-copy { grid-template-columns:1fr; } .generated-diagram-copy figcaption { grid-column:1; } }
@media (max-width:520px) { body { font-size:16px; } .home-shell { padding-inline:1.1rem; } .notes-grid { grid-template-columns:1fr; } .blog-list a { gap:1rem; } .article-nav { margin-bottom:3.5rem; } .note-shell { width:min(100% - 2rem,820px); padding-top:2rem; } .idea-diagram { margin-inline:-.15rem; padding:1rem; } .prose-section p { font-size:1rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }