:root{color-scheme:dark;--bg:#101010;--text:#f0eee9;--muted:#a4a39e;--line:#343432;--red:#ff563d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.wrap{max-width:1440px;margin:auto;padding:0 6vw}
header{display:flex;justify-content:space-between;align-items:center;padding:32px 0;font-size:14px;letter-spacing:.06em}
header .name{font-size:22px;letter-spacing:-1px;font-weight:700}
nav{display:flex;gap:28px}
.hero{padding:75px 0 70px}
.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(64px,10.7vw,154px);line-height:.88;letter-spacing:-.07em;font-weight:800;margin:34px 0 50px;text-transform:uppercase}
h1 span{color:var(--red)}
.herobottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.herobottom p{max-width:490px;font-size:19px;line-height:1.55;margin:0}
.shipped{flex:0 0 auto;min-width:240px}
.shipped ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.shipped li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.shipped a{font-size:18px}
.shipped a::after{content:" ↗";color:var(--red)}
.shipped span{font-size:13px;color:var(--muted)}
.intro{display:grid;grid-template-columns:1fr 2fr;gap:50px;border-top:1px solid var(--line);padding:55px 0 90px}
.intro p{font-size:clamp(23px,3vw,39px);line-height:1.3;margin:0;letter-spacing:-.025em}
.intro p span{color:var(--muted)}
.sectionhead{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:50px}
.project{margin-bottom:100px}
.projecttop{display:flex;justify-content:space-between;align-items:baseline;gap:25px;margin-bottom:26px}
h2{font-size:clamp(32px,5vw,67px);letter-spacing:-.045em;font-weight:500;margin:0}
.projecttop p{font-size:14px;color:var(--muted)}
.visual{min-height:490px;overflow:hidden;position:relative}
.astovisual{background:#f2eddf;color:#392f26;display:flex;align-items:center;justify-content:center;gap:7vw;padding:55px}
.astologo{font-family:Georgia,serif;font-size:90px;font-weight:bold;letter-spacing:-4px}
.astologo small{display:block;font-family:Arial,sans-serif;font-size:16px;font-weight:400;letter-spacing:0;margin-top:15px;text-align:center}
.astoshot{width:min(100%,370px);height:auto;border-radius:10px;box-shadow:0 10px 30px rgba(57,47,38,.15)}
.previewnote{position:absolute;bottom:18px;left:24px;font-size:12px;opacity:.7}
.description{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;padding-top:26px}
.description p{font-size:18px;line-height:1.65;margin:0;color:var(--muted)}
.description .action{display:flex;justify-content:flex-end;align-items:start}
.action a{padding-bottom:9px;border-bottom:1px solid var(--text);font-size:16px}
.artvisual{background:#242220;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:35px;align-items:center}
.artvisual img{width:100%;height:450px;object-fit:contain}
.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:65px 0}
.about h2{font-size:40px}
.about p{font-size:21px;line-height:1.6;margin:0 0 20px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:45px 0 30px}
.footerline{display:flex;justify-content:space-between;align-items:center;gap:30px}
.footerline h2{font-size:clamp(36px,5vw,66px)}
.footerline a{border-bottom:1px solid var(--text);padding-bottom:7px}
.fine{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-top:65px}
details{margin-top:20px;color:var(--muted);font-size:15px}
summary{cursor:pointer}
details p{padding-top:10px}
@media(max-width:760px){
.wrap{padding:0 24px}
header{align-items:start}
nav{gap:15px;font-size:12px}
.hero{padding:55px 0}
.herobottom p{font-size:17px}
.herobottom{flex-direction:column;align-items:start}
.shipped{width:100%;min-width:0}
.intro,.about{grid-template-columns:1fr;gap:25px;padding:35px 0 55px}
.projecttop{display:block}
.projecttop p{margin:10px 0}
.visual{min-height:400px}
.astovisual{flex-direction:column;padding:40px 20px 55px;gap:30px}
.astologo{font-size:64px}
.astoshot{width:min(100%,340px)}
.description{grid-template-columns:1fr;gap:22px}
.description .action{justify-content:start}
.project{margin-bottom:65px}
.artvisual{padding:20px;gap:10px}
.artvisual img{height:280px}
.footerline{align-items:start;flex-direction:column}
.fine{gap:20px;flex-wrap:wrap}
.sectionhead{margin-bottom:35px}
h1{font-size:clamp(34px,calc((100vw - 48px)/6.7),90px)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}

/* Writing: homepage teaser, list page, essay page */
:root{--prose:#dcd9d2}
nav a[aria-current=page]{color:var(--red)}
.writing{padding:20px 0 80px}
.post{display:grid;grid-template-columns:1fr 2fr;gap:50px;border-top:1px solid var(--line);padding:32px 0 60px}
.sectionhead+.post{border-top:0;padding:0}
.post h2{line-height:1.02}
.standfirst{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(19px,1.9vw,25px);line-height:1.45;color:var(--muted);margin:22px 0 30px;max-width:30em}
.listhead{padding:75px 0 60px}
.listhead h1{margin:0}
.essayhead{padding:60px 0 45px}
h1.title{font-size:clamp(40px,7vw,104px);line-height:.92;letter-spacing:-.055em;margin:28px 0 30px}
.essayhead .standfirst{margin:0}
.essay{display:grid;grid-template-columns:1fr 2fr;gap:50px;border-top:1px solid var(--line);padding:45px 0 90px}
.essaymeta{position:sticky;top:32px;align-self:start;line-height:2}
.essaymeta a{border-bottom:1px solid var(--muted);padding-bottom:3px}
.prose{max-width:680px;font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.7;color:var(--prose)}
.prose p{margin:0 0 1.25em}
.prose h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.035em;color:var(--text);margin:2.3em 0 .85em}
.prose .pull{font-family:Arial,Helvetica,sans-serif;font-size:clamp(24px,2.7vw,34px);line-height:1.25;letter-spacing:-.025em;color:var(--text);margin:1.5em 0}
.prose .pull strong{font-weight:inherit}
.prose p a{border-bottom:1px solid currentColor}
.prose .action{font-family:Arial,Helvetica,sans-serif;color:var(--text)}
.prose .credit{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:26px;margin:3.2em 0 2.2em}
@media(max-width:760px){
header{flex-wrap:wrap;gap:10px 24px}
.writing{padding:0 0 45px}
.post,.essay{grid-template-columns:1fr;gap:20px}
.post{padding:26px 0 45px}
.listhead{padding:55px 0 40px}
.essayhead{padding:40px 0 32px}
h1.title{font-size:clamp(34px,10.5vw,60px);margin:22px 0 24px}
.essay{padding:30px 0 60px}
.essaymeta{position:static}
.prose{font-size:18px}
}