:root{color-scheme:light;--paper:#f2f1e9;--ink:#24271f;--muted:#696d61;--body:#474b41;--line:#d0d1c5;--lime:#d1ef77;--olive:#6b8240;--pad:5vw;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em}
.mono{font:400 10px/1.5 "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;word-spacing:.07em}
.shell{padding:0 var(--pad)}
/* Header mirrors the portfolio's site header. */
.topbar{height:98px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:650;letter-spacing:-.7px}
.brand-mark{width:28px;height:28px;position:relative}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--ink);width:9px;height:27px;top:0;left:4px}
.brand-mark:after{transform:rotate(45deg);left:16px;height:31px;top:-2px}
.brand-mark i{position:absolute;bottom:0;left:15px;width:9px;height:17px;background:var(--ink);transform:rotate(-45deg)}
.topbar nav{display:flex;align-items:center;gap:35px;font-size:12px}
.topbar nav a:not(.back){position:relative;padding:12px 0}
.topbar nav a:not(.back):after{content:"";position:absolute;bottom:7px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.topbar nav a:not(.back):hover:after,.topbar nav a[aria-current="page"]:after{transform:scaleX(1);transform-origin:left}
.back{display:flex;align-items:center;gap:14px;border:1px solid var(--ink);padding:10px 18px;border-radius:30px;transition:background .3s,color .3s}
.back:hover{background:var(--ink);color:var(--paper)}
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);align-items:end;gap:6vw;padding:clamp(56px,10vh,110px) 0 clamp(40px,6vh,70px)}
.hero-copy,.intro{animation:fade-in 1.2s var(--ease) both}
.intro{animation-delay:.15s}
.eyebrow{display:flex;align-items:center;gap:16px;font:400 10px/1.5 "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
h1{margin:28px 0 0;font-weight:500;font-size:clamp(58px,8.2vw,124px);line-height:.94;letter-spacing:-.075em}
h1 .serif{letter-spacing:-.045em}
.intro{justify-self:end;max-width:340px;margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 10px/1.5 "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.meta span:first-child{display:flex;align-items:center;gap:10px;color:var(--ink)}
.meta span:first-child:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 4px #6b824012}
.content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:45px;padding:clamp(60px,10vh,100px) 0 clamp(70px,12vh,120px)}
.toc{position:sticky;top:32px;align-self:start;display:grid;max-width:260px;border-top:1px solid var(--line)}
.toc a{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font:400 10px/1.5 "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase;transition:padding .4s var(--ease)}
.toc a span{color:var(--muted)}
.toc a:hover,.toc a:focus-visible{padding-left:8px}
.prose{min-width:0;max-width:720px;counter-reset:section}
.section{counter-increment:section;padding:0 0 52px;margin:0 0 52px;border-bottom:1px solid var(--line);scroll-margin-top:32px}
.section:before{content:counter(section,decimal-leading-zero) " /";display:block;margin-bottom:16px;font:400 10px/1.5 "DM Mono",monospace;letter-spacing:.07em;color:var(--muted)}
.section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
h2{margin:0 0 22px;font-weight:500;font-size:clamp(32px,3.6vw,48px);line-height:1;letter-spacing:-.05em}
h3{margin:32px 0 10px;font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.02em}
p,li{font-size:16px;line-height:1.7;color:var(--body)}
p{margin:0 0 16px}
strong{font-weight:600;color:var(--ink)}
.prose a{text-decoration:underline;text-decoration-color:#9aa77f;text-underline-offset:4px;transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:currentColor}
ul{margin:14px 0 0;padding-left:20px}
li+li{margin-top:8px}
li::marker{color:var(--olive)}
.callout{padding:22px 24px;border-radius:16px;background:#e5efbb}
.callout p{color:var(--ink)}
.callout p:last-child{margin-bottom:0}
/* Contact block echoes the portfolio's lime contact section. */
.section.contact-card{padding:clamp(28px,4vw,44px);border-radius:24px;background:var(--lime)}
.contact-card:before{color:#4e5c35}
.contact-card h2{font-size:clamp(34px,4vw,56px)}
.contact-card p{color:#3f4a2b}
.contact-card a{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding-bottom:6px;border-bottom:1px solid #6e824b;font-size:clamp(17px,2vw,24px);letter-spacing:-.6px;text-decoration:none;word-break:break-word;transition:letter-spacing .4s var(--ease)}
.contact-card a:hover{letter-spacing:0}
.page-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0 26px;border-top:1px solid var(--line);font:400 9px/1.6 "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.page-footer nav{display:flex;gap:25px;flex-wrap:wrap}
.page-footer a:hover,.page-footer a:focus-visible{color:var(--ink)}
@keyframes fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){:root{--pad:max(5vw,calc((100vw - 1500px)/2))}}
@media(max-width:1000px){.content{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:30px}}
@media(max-width:700px){:root{--pad:6vw}.topbar{height:78px}.brand{font-size:16px}.brand-mark{transform:scale(.8);transform-origin:left}.topbar nav{gap:20px;font-size:11px}.back{display:none}.hero{grid-template-columns:1fr;gap:26px;padding:48px 0 36px}h1{font-size:clamp(46px,15vw,84px)}.intro{justify-self:start;font-size:14px}.meta{flex-direction:column}.content{grid-template-columns:1fr;gap:40px;padding:44px 0 64px}.toc{position:static;max-width:none;grid-template-columns:1fr 1fr;column-gap:20px}h2{font-size:34px}p,li{font-size:15px}.page-footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}