/* article.css — flagship long-form layout v2 Layered on top of site.css. Apply to any blog page. */ /* ------------------------------------------------------------------ */ /* Reading progress bar */ /* ------------------------------------------------------------------ */ .read-bar{ position:fixed;top:0;left:0;right:0;height:3px;z-index:100; background:transparent;pointer-events:none; } .read-bar .fill{ height:100%;width:0%; background:var(--lime); transition:width .08s linear; } body.article-v2 header.site{top:3px;} /* ------------------------------------------------------------------ */ /* Hero — typographic, takeaways-forward */ /* ------------------------------------------------------------------ */ .a2-hero{ padding:72px 0 56px; border-bottom:1px solid var(--rule); position:relative; } .a2-hero-inner{ max-width:1120px;margin:0 auto;padding:0 32px; display:grid;grid-template-columns:minmax(0,1fr);gap:0; } .a2-kicker{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:'JetBrains Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.14em;color:var(--muted); margin-bottom:36px; } .a2-kicker .dot{width:6px;height:6px;background:var(--lime);border-radius:50%;display:inline-block;} .a2-kicker .pill{ display:inline-flex;align-items:center;gap:6px; padding:5px 10px;border:1px solid var(--rule);border-radius:999px; color:var(--ink); } .a2-kicker .sep{opacity:.35;} .a2-title{ font-weight:700; font-size:clamp(56px,8.6vw,128px); line-height:.9; letter-spacing:-.035em; text-wrap:balance; max-width:16ch; margin-bottom:44px; } .a2-title .em{font-style:italic;font-weight:300;} .a2-title .hl{background:var(--lime);color:#0B0B0B;padding:0 .08em .04em;border-radius:4px;} .a2-deck{ font-size:clamp(22px,2.2vw,28px); line-height:1.35; letter-spacing:-.015em; color:var(--ink); max-width:62ch; font-weight:400; margin-bottom:56px; text-wrap:pretty; } /* hero meta strip */ .a2-meta{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .a2-meta .cell{ padding:22px 20px; border-right:1px solid var(--rule); } .a2-meta .cell:last-child{border-right:none;} .a2-meta .k{ font-family:'JetBrains Mono',monospace;font-size:10px; text-transform:uppercase;letter-spacing:.12em;color:var(--muted); margin-bottom:8px; } .a2-meta .v{font-size:16px;font-weight:600;letter-spacing:-.005em;} .a2-meta .cell.author-cell{display:flex;align-items:center;gap:12px;} .a2-meta .cell.author-cell .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--ink);border:1px solid var(--rule);flex:0 0 38px;} .a2-meta .cell.author-cell .av img{width:100%;height:100%;object-fit:cover;object-position:center center;} .a2-meta .cell.author-cell .stack{display:flex;flex-direction:column;line-height:1.15;} .a2-meta .cell.author-cell .k{margin-bottom:2px;} .a2-meta .cell.author-cell .v{font-size:15px;} /* key takeaways */ .a2-takeaways{ max-width:1120px;margin:48px auto 0;padding:0 32px; } .a2-takeaways-inner{ border:1px solid var(--rule);border-radius:12px; padding:32px 36px;background:var(--paper-2); display:grid;grid-template-columns:220px 1fr;gap:40px; } .a2-takeaways .label{ font-family:'JetBrains Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.14em;color:var(--muted); line-height:1.5; } .a2-takeaways .label .num{ display:block;font-size:48px;font-weight:700;color:var(--ink); letter-spacing:-.03em;margin-top:8px;font-family:'League Spartan',sans-serif; } .a2-takeaways ol{list-style:none;counter-reset:ta;margin:0;padding:0;} .a2-takeaways ol li{ counter-increment:ta; padding:14px 0 14px 44px; border-bottom:1px solid var(--rule-soft); position:relative; font-size:17px;line-height:1.45; letter-spacing:-.005em; color:var(--ink); } .a2-takeaways ol li:last-child{border-bottom:none;padding-bottom:0;} .a2-takeaways ol li:first-child{padding-top:0;} .a2-takeaways ol li::before{ content:"0" counter(ta); position:absolute;left:0;top:14px; font-family:'JetBrains Mono',monospace;font-size:11px; color:var(--muted);letter-spacing:.1em; } .a2-takeaways ol li:first-child::before{top:0;} .a2-takeaways ol li b{font-weight:600;} /* ------------------------------------------------------------------ */ /* Three-zone layout: TOC | article | share rail */ /* ------------------------------------------------------------------ */ .a2-body{ max-width:1280px;margin:0 auto;padding:64px 32px 80px; display:grid; grid-template-columns:220px minmax(0,680px) 220px; gap:48px; justify-content:center; } .a2-rail-left{position:relative;} .a2-rail-right{position:relative;} .a2-toc{ position:sticky;top:120px; font-family:'JetBrains Mono',monospace;font-size:12px; max-height:calc(100vh - 160px); overflow-y:auto; } .a2-toc .t{ text-transform:uppercase;letter-spacing:.14em;color:var(--muted); font-size:10px;margin-bottom:18px;padding-bottom:12px; border-bottom:1px solid var(--rule); display:flex;justify-content:space-between;align-items:center; } .a2-toc .t .remaining{color:var(--ink);font-weight:600;} .a2-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;} .a2-toc li{counter-increment:toc;} .a2-toc a{ display:grid;grid-template-columns:24px 1fr;gap:8px; padding:9px 0 9px 10px;margin-left:-10px; color:var(--muted);line-height:1.35; border-left:2px solid transparent; transition:color .15s,border-color .15s; } .a2-toc a::before{ content:"0" counter(toc); font-size:10px;opacity:.7; } .a2-toc a:hover{color:var(--ink);} .a2-toc a.active{color:var(--ink);border-left-color:var(--lime);background:color-mix(in oklab, var(--lime) 14%, transparent);} body.dark .a2-toc a.active{background:color-mix(in oklab, var(--lime) 20%, transparent);} /* share rail */ .a2-share{ position:sticky;top:120px; display:flex;flex-direction:column;gap:10px; font-family:'JetBrains Mono',monospace;font-size:11px; } .a2-share .t{ text-transform:uppercase;letter-spacing:.14em;color:var(--muted); font-size:10px;margin-bottom:6px;padding-bottom:10px; border-bottom:1px solid var(--rule); } .a2-share button, .a2-share a{ display:flex;align-items:center;gap:10px; padding:10px 12px; background:transparent;border:1px solid var(--rule-soft); border-radius:8px;color:var(--ink);cursor:pointer; font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.1em; transition:all .15s; } .a2-share button:hover, .a2-share a:hover{ border-color:var(--ink);background:var(--paper-2); } .a2-share .ic{ width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:var(--paper-2);flex:0 0 22px; } .a2-share .ic svg{width:12px;height:12px;} .a2-share .copied{ font-size:10px;color:var(--muted);text-align:center; opacity:0;transition:opacity .2s;height:0; } .a2-share .copied.on{opacity:1;height:auto;margin-top:4px;} /* pull quotes (placed in margin via float) */ .pullquote{ float:right;clear:right; width:260px;margin:12px -260px 16px 32px; padding:20px 0 18px; border-top:2px solid var(--lime); border-bottom:1px solid var(--rule-soft); font-family:'League Spartan',sans-serif; font-size:22px;line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--ink); text-wrap:balance; } .pullquote .attr{ display:block;margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:10px;text-transform:uppercase;letter-spacing:.12em; color:var(--muted);font-weight:400; } .pullquote.left{ float:left;clear:left; margin:12px 32px 16px -260px; } /* ------------------------------------------------------------------ */ /* Prose */ /* ------------------------------------------------------------------ */ .a2-prose{ font-family:'League Spartan',system-ui,sans-serif; font-size:19px;line-height:1.62;letter-spacing:-.003em; color:var(--ink); } .a2-prose p{margin:0 0 24px;text-wrap:pretty;max-width:66ch;} .a2-prose .dropcap::first-letter{ float:left;font-size:84px;line-height:.82; padding:4px 12px 0 0;font-weight:700; letter-spacing:-.04em;color:var(--ink); font-family:'League Spartan',sans-serif; } .a2-prose .lede{ font-size:22px;line-height:1.45; color:var(--ink);margin-bottom:40px; letter-spacing:-.01em;max-width:56ch; } .a2-prose h2{ font-size:36px;font-weight:600; letter-spacing:-.028em;line-height:1.05; margin:72px 0 8px; text-wrap:balance; scroll-margin-top:120px; display:flex;align-items:baseline;gap:16px; } .a2-prose h2 .num{ font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:500;letter-spacing:.1em; color:var(--muted);flex:0 0 auto; padding-top:8px; } .a2-prose h2 .anchor{ opacity:0;transition:opacity .15s; font-size:20px;color:var(--muted);margin-left:4px; text-decoration:none; } .a2-prose h2:hover .anchor{opacity:1;} .a2-prose h2 + p{margin-top:20px;} .a2-prose h3{ font-size:22px;font-weight:600; letter-spacing:-.015em;margin:44px 0 14px; scroll-margin-top:120px; } .a2-prose ul,.a2-prose ol{margin:0 0 24px 22px;} .a2-prose li{font-size:18px;line-height:1.6;margin-bottom:10px;max-width:62ch;} .a2-prose strong{font-weight:600;} .a2-prose em{font-style:italic;} .a2-prose code{ font-family:'JetBrains Mono',monospace;font-size:14px; background:var(--paper-2);padding:2px 6px;border-radius:3px; } .a2-prose pre{ font-family:'JetBrains Mono',monospace;font-size:13px; background:var(--paper-2);padding:24px;border-radius:8px; overflow-x:auto;border:1px solid var(--rule-soft); margin:32px 0;line-height:1.55; max-width:none; } .a2-prose a.inline{ border-bottom:1px solid var(--ink); } .a2-prose a.inline:hover{color:#158A3B;border-color:#158A3B;} .a2-prose hr{ border:none; margin:56px auto; width:80px; height:12px; background: radial-gradient(circle at 10px 6px, var(--muted) 1.5px, transparent 2px), radial-gradient(circle at 40px 6px, var(--muted) 1.5px, transparent 2px), radial-gradient(circle at 70px 6px, var(--muted) 1.5px, transparent 2px); opacity:.4; } /* inline footnotes */ .fn{ cursor:pointer;display:inline-block; font-family:'JetBrains Mono',monospace;font-size:11px; vertical-align:super;line-height:1; color:var(--ink); background:var(--lime); padding:2px 5px;border-radius:3px; margin:0 2px;text-decoration:none; font-weight:600; } .fn:hover{background:var(--ink);color:var(--lime);} .footnotes{ margin-top:64px;padding-top:24px; border-top:1px solid var(--rule); font-size:14px;color:var(--muted);line-height:1.55; counter-reset:fn; } .footnotes ol{list-style:none;padding:0;margin:0;counter-reset:fn;} .footnotes li{ counter-increment:fn; padding:10px 0 10px 36px; position:relative; border-bottom:1px solid var(--rule-soft); } .footnotes li:last-child{border-bottom:none;} .footnotes li::before{ content:counter(fn); position:absolute;left:0;top:10px; font-family:'JetBrains Mono',monospace;font-size:11px; background:var(--lime);color:var(--ink); padding:2px 7px;border-radius:3px;font-weight:600; } /* figure */ .a2-fig{ margin:40px 0; padding:24px; border:1px solid var(--rule); border-radius:10px; background:var(--paper-2); } .a2-fig img{width:100%;border-radius:6px;} .a2-fig .cap{ font-family:'JetBrains Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.1em;color:var(--muted); margin-top:16px;padding-top:12px; border-top:1px solid var(--rule-soft); } /* callout override for article spacing */ .a2-prose .callout{margin:36px 0;} .a2-prose blockquote{ border-left:3px solid var(--lime); padding:20px 28px; font-size:22px;line-height:1.4; letter-spacing:-.015em; margin:36px 0; background:var(--paper-2); font-weight:500; max-width:58ch; text-wrap:balance; } /* ------------------------------------------------------------------ */ /* End-of-article (author + prev/next) */ /* ------------------------------------------------------------------ */ .a2-endcap{ max-width:1120px;margin:0 auto;padding:0 32px 40px; } .a2-endcap .author-big{ display:grid;grid-template-columns:120px 1fr auto;gap:28px; padding:36px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); align-items:center; } .a2-endcap .author-big .av{ width:96px;height:96px;border-radius:50%;overflow:hidden; background:var(--ink);border:1px solid var(--rule); } .a2-endcap .author-big .av img{width:100%;height:100%;object-fit:cover;object-position:center center;} .a2-endcap .author-big .k{ font-family:'JetBrains Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.12em;color:var(--muted); margin-bottom:8px; } .a2-endcap .author-big h3{font-size:28px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;} .a2-endcap .author-big p{font-size:15px;color:var(--muted);line-height:1.5;max-width:60ch;} .a2-endcap .author-big .book{ display:inline-flex;align-items:center;gap:10px; background:var(--ink);color:var(--paper); padding:12px 20px;border-radius:999px; font-size:14px;font-weight:600; white-space:nowrap; } body.dark .a2-endcap .author-big .book{background:var(--lime);color:#0B0B0B;} /* prev/next strip */ .a2-nextprev{ display:grid;grid-template-columns:1fr 1fr;gap:0; border-bottom:1px solid var(--rule); } .a2-nextprev a{ padding:32px 0;display:block; } .a2-nextprev a:first-child{border-right:1px solid var(--rule);padding-right:32px;} .a2-nextprev a:last-child{padding-left:32px;text-align:right;} .a2-nextprev .k{ font-family:'JetBrains Mono',monospace;font-size:10px; text-transform:uppercase;letter-spacing:.14em;color:var(--muted); margin-bottom:14px;display:flex;align-items:center;gap:8px; } .a2-nextprev a:last-child .k{justify-content:flex-end;} .a2-nextprev h4{ font-size:22px;font-weight:600;letter-spacing:-.015em; line-height:1.2;max-width:24ch; } .a2-nextprev a:last-child h4{margin-left:auto;} /* ------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------ */ @media (max-width:1180px){ .a2-body{grid-template-columns:minmax(0,720px);justify-content:center;} .a2-rail-left,.a2-rail-right{display:none;} .pullquote,.pullquote.left{ float:none;width:auto;margin:28px 0; padding:22px 24px; border:none;border-top:2px solid var(--lime); border-bottom:1px solid var(--rule-soft); } .a2-takeaways-inner{grid-template-columns:1fr;gap:24px;} .a2-meta{grid-template-columns:1fr 1fr;} .a2-meta .cell{border-right:none;border-bottom:1px solid var(--rule);} } @media (max-width:680px){ .a2-title{font-size:clamp(44px,12vw,56px);} .a2-meta{grid-template-columns:1fr;} .a2-endcap .author-big{grid-template-columns:80px 1fr;} .a2-endcap .author-big .av{width:72px;height:72px;} .a2-endcap .author-big .book{grid-column:1/-1;justify-self:start;} .a2-nextprev{grid-template-columns:1fr;} .a2-nextprev a:first-child{border-right:none;border-bottom:1px solid var(--rule);padding-right:0;} .a2-nextprev a:last-child{padding-left:0;text-align:left;} .a2-nextprev a:last-child .k{justify-content:flex-start;} .a2-nextprev a:last-child h4{margin-left:0;} } @media (max-width:640px){ .a2-hero{padding:40px 0 32px;} .a2-hero-inner,.a2-takeaways,.a2-endcap{padding-left:20px;padding-right:20px;} .a2-takeaways{margin-top:24px;} .a2-takeaways-inner{padding:24px 20px;gap:20px;} .a2-title{font-size:clamp(32px,9vw,44px);} .a2-deck{font-size:clamp(18px,4.5vw,22px);margin-bottom:36px;} .a2-body{padding:40px 20px 56px;} .a2-prose p,.a2-prose li{font-size:17px;} .a2-prose h2{font-size:28px;margin-top:48px;} .a2-prose h3{font-size:20px;} } /* ------------------------------------------------------------------ */ /* Print */ /* ------------------------------------------------------------------ */ @media print{ @page{margin:22mm 18mm;} body{background:#fff;color:#000;font-size:11pt;line-height:1.5;} header.site, footer.site, .read-bar, .a2-rail-left, .a2-rail-right, .cta-band, .related, .nav-cta, .crumb, .a2-endcap .book, .a2-nextprev{display:none !important;} .a2-body{display:block;max-width:none;padding:0;} .a2-hero{padding:0 0 16pt;border-bottom:1pt solid #000;} .a2-title{font-size:32pt;line-height:1.05;max-width:none;} .a2-deck{font-size:13pt;color:#333;} .a2-meta{display:block;border:none;} .a2-meta .cell{display:inline-block;border:none;padding:4pt 18pt 4pt 0;} .a2-takeaways-inner{background:#f2f1eb;border:1pt solid #000;} .a2-prose{font-size:10.5pt;} .a2-prose h2{font-size:16pt;margin-top:24pt;} .a2-prose h3{font-size:13pt;} .a2-prose pre{font-size:9pt;background:#f2f1eb;border:.5pt solid #ccc;page-break-inside:avoid;} .pullquote{page-break-inside:avoid;break-inside:avoid;border-top:1.5pt solid #000;} .callout,.dtable,.metric-row{page-break-inside:avoid;break-inside:avoid;} .a2-prose a.inline{color:#000;text-decoration:underline;} .footnotes li::before{background:#000;color:#fff;} }