html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper-50);overflow-x:hidden}
*{box-sizing:border-box}
a{text-decoration:none;color:var(--brand-700)}
a:hover{color:var(--brand-900);text-decoration:none}
.prose a,.linked{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0}
ul{margin:0}
.wrap{width:min(1240px,100% - 96px);margin-inline:auto}
@media(max-width:720px){.wrap{width:min(1240px,100% - 40px)}}
@media(min-width:1800px){.wrap{width:min(1440px,100% - 200px)}}

/* header + bookmark */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper-50) 88%,transparent);backdrop-filter:blur(10px)}
.hdr-in{display:flex;align-items:center;gap:24px;min-height:92px;padding-left:158px;position:relative}
.bookmark{position:absolute;left:36px;top:0;display:grid;place-items:start center;min-height:0;transition:opacity var(--duration-base) var(--ease-standard)}
.bookmark:hover{opacity:.78}
.bookmark img{width:112px;height:112px;object-fit:contain;margin-top:-6px}
.mark{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--brand-700)}
.mark span{font-weight:500;color:var(--brand-400)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-family:var(--font-display);font-weight:600;font-size:16px;padding:0 16px;height:44px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);color:var(--ink-700);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast)}
.nav a:hover{background:var(--brand-50);color:var(--brand-700)}
.nav a[aria-current]{background:var(--brand-100);color:var(--brand-700)}
.navtoggle{display:none}
@media(max-width:860px){.hdr-in{padding-left:104px;min-height:76px}.bookmark{left:20px}.bookmark img{width:74px;height:74px}.nav{gap:0}.nav a{padding:0 10px;font-size:15px}}
@media(max-width:520px){.nav a{padding:0 8px;font-size:14px}}

/* type */
.h-xl{font-size:clamp(38px,5.6vw,72px);font-weight:800;line-height:1.03;letter-spacing:-0.03em}
.h-lg{font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.1;letter-spacing:-0.025em}
.h-md{font-size:clamp(21px,1.7vw,26px);font-weight:700;line-height:1.25}
.lead{font-size:clamp(18px,1.35vw,22px);line-height:1.65;color:var(--ink-700);max-width:46ch}
.body{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--ink-700);max-width:62ch}
.small{font-size:var(--text-sm);color:var(--text-secondary)}
.eyebrow{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand-400)}
.mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--brand-400)}

/* layout helpers */
.col{display:flex;flex-direction:column}
.sec{padding:clamp(64px,8vh,120px) 0}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:700;font-family:var(--font-display)}
.dot{width:8px;height:8px;border-radius:50%}
.soft{background:var(--paper-0);border-radius:var(--radius-lg);padding:clamp(24px,2.4vw,36px);box-shadow:var(--shadow-sm)}
.cta{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;font-size:var(--text-md);background:var(--brand-600);color:var(--paper-0);transition:background var(--duration-base) var(--ease-standard)}
.cta:hover{background:var(--brand-700);color:var(--paper-0)}
.cta.ghost{background:var(--brand-100);color:var(--brand-700)}
.cta.ghost:hover{background:var(--brand-200);color:var(--brand-900)}

/* pinned sections */
.pin{position:sticky;top:112px;align-self:start}
.stack{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px)}
.stack .card{position:sticky;top:calc(120px + var(--i)*18px);border-radius:var(--radius-xl);padding:clamp(28px,3vw,52px);box-shadow:var(--shadow-sm)}
.split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}.pin{position:static}.stack .card{position:static}}

/* reveal */
.reveal{transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js-reveal .reveal:not(.in){opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal:not(.in){opacity:1;transform:none}.reveal{transition:none}html{scroll-behavior:auto}}

/* footer */
.ftr{background:var(--brand-900);color:var(--paper-100);padding:clamp(48px,6vw,80px) 0 32px;margin-top:clamp(48px,6vw,96px)}
.ftr .mark{color:var(--paper-0)}
.ftr .mark span{color:var(--brand-300)}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,64px)}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr h4{font-size:var(--text-sm);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand-300)}
.ftr a{color:var(--paper-100);font-size:var(--text-sm);display:inline-block;padding:5px 0;transition:color var(--duration-fast)}
.ftr a:hover{color:var(--paper-0)}
.ftr .rule{margin-top:clamp(32px,4vw,56px);padding-top:20px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--paper-300);font-size:var(--text-sm)}

/* blog + prose */
.postlist{display:grid;gap:clamp(12px,1.4vw,20px)}
.postlink>div{transition:box-shadow var(--duration-base) var(--ease-standard)}
.postlink:hover>div{box-shadow:var(--shadow-md)}
.postcard-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:start}
@media(max-width:720px){.postcard-in{grid-template-columns:1fr}}
.postcard{background:var(--paper-0);border-radius:var(--radius-lg);padding:clamp(20px,2vw,32px);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:start;transition:box-shadow var(--duration-base) var(--ease-standard),background var(--duration-base)}
.postcard:hover{box-shadow:var(--shadow-md)}
@media(max-width:720px){.postcard{grid-template-columns:1fr}}
.prose{max-width:68ch}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(24px,2.2vw,32px);font-weight:700;margin:2em 0 .5em}
.prose h3{font-size:var(--text-lg);font-weight:700;margin:1.6em 0 .4em}
.prose p,.prose li{font-size:var(--text-md);line-height:1.75;color:var(--ink-700);max-width:68ch}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.prose blockquote{margin:1.4em 0;background:var(--sage-100);border-radius:var(--radius-lg);padding:20px 24px}
.prose blockquote p{margin:0;color:var(--sage-700)}
.prose code{background:var(--paper-100);border-radius:6px;padding:2px 6px;font-size:.9em}
.prose pre{background:var(--dark-800);color:var(--paper-50);border-radius:var(--radius-md);padding:20px 22px;overflow-x:auto;margin:1.4em 0}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:none;height:1px;background:var(--paper-200);margin:2.4em 0}
.prose strong{color:var(--ink-900)}
.toc a{display:block;padding:6px 0;font-size:var(--text-sm);color:var(--ink-500)}
.toc a:hover{color:var(--brand-700)}
.toc a.active{color:var(--brand-700);font-weight:700}