@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader.woff2) format("woff2");font-weight:350 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
:root{--paper:#efebe5;--card:#f7f4ef;--ink:#1b1e22;--soft:#454a52;--mute:#5f646b;--rule:#d4cdc2;--accent:#0f4f53;--accent-ink:#f3efe8;
--serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--w:1160px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 0 1rem;border-bottom:1px solid var(--rule)}
.mark{font:500 1.35rem/1 var(--serif);letter-spacing:.005em;text-decoration:none}
.mark span{display:block;font:500 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:.45rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap}
nav a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--soft)}
nav a[aria-current]{color:var(--accent);text-decoration:underline}
.kicker{font:600 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
/* hero: statement left, editorial portrait right */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(1.5rem,3.5vh,2.25rem) 0;border-bottom:1px solid var(--rule)}
h1{font:400 clamp(2.3rem,4.2vw,3.6rem)/1.04 var(--serif);letter-spacing:-.018em;margin:0 0 1.25rem;max-width:15ch}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.6;color:var(--soft);max-width:34rem;margin:0 0 1.75rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-block;padding:.78rem 1.25rem;border:1px solid var(--ink);text-decoration:none;font-size:.88rem;letter-spacing:.02em}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn:hover{border-color:var(--accent)}
.portrait{margin:0;justify-self:end;width:100%;max-width:300px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:#dfe3e3}
.portrait figcaption{font-size:.84rem;line-height:1.5;color:var(--mute);margin-top:.8rem;padding-top:.7rem;border-top:2px solid var(--accent)}
.portrait figcaption strong{color:var(--ink);font-weight:600;display:block}
/* positions: label column + numbered, uneven two-column list */
.positions .side{display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;margin-bottom:1rem}
.positions h2{font:400 clamp(1.6rem,2.4vw,2rem)/1.15 var(--serif);margin:0;letter-spacing:-.01em}
.positions .side p{margin:0;font-size:.9rem;color:var(--mute)}
.positions .side .more{margin-left:auto}
.positions ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.75rem,4vw,3.5rem);counter-reset:pos}
.positions li:last-child{grid-column:1/-1}
.positions li:last-child p{max-width:52rem}
.positions li{break-inside:avoid;counter-increment:pos;border-top:1px solid var(--ink);padding:.75rem 0 .9rem}
.positions li::before{content:counter(pos,decimal-leading-zero);font:600 .7rem/1 var(--sans);letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:.55rem}
.positions h3{font:500 1.24rem/1.25 var(--serif);margin:0 0 .4rem;letter-spacing:-.004em}
.positions li p{margin:0;color:var(--soft);font-size:.93rem;line-height:1.55}
.more{font-size:.86rem;color:var(--accent)}
.band{padding:clamp(1.4rem,3.2vh,1.9rem) 0;border-bottom:1px solid var(--rule)}
.duo.band{border-bottom:0}
/* useful + about share one band, uneven split */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.duo h2{font:400 clamp(1.45rem,2.1vw,1.75rem)/1.15 var(--serif);margin:0 0 .7rem;letter-spacing:-.01em}
.duo p{margin:0 0 .75rem;color:var(--soft);font-size:.95rem}
.duo .line{font-size:.86rem;color:var(--mute);border-left:2px solid var(--accent);padding-left:.9rem;margin-top:.9rem}
/* about */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.about p{margin:0 0 .8rem;color:var(--soft);font-size:.98rem}
.about h2{margin-bottom:.8rem}
.aside{border-left:2px solid var(--accent);padding-left:1.1rem;font-size:.92rem;color:var(--soft)}
.aside p{font-size:.92rem;margin:0 0 .7rem}
.aside strong{color:var(--ink);font-weight:600}
/* contact */
.contact{background:var(--accent);color:var(--accent-ink)}
.contact .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:clamp(1.5rem,3.2vh,2rem);padding-bottom:clamp(1.5rem,3.2vh,2rem)}
.contact .kicker{color:#bcd3cf}
.contact h2{font:400 clamp(1.6rem,2.4vw,2rem)/1.15 var(--serif);margin:0;letter-spacing:-.01em}
.contact p{margin:.5rem 0 0;color:#d6e2df;max-width:36rem}
.contact .btn{border-color:var(--accent-ink);color:var(--accent-ink)}
.contact .btn.solid{background:var(--accent-ink);color:var(--accent)}
.contact .btn:hover{background:#fff;color:var(--ink)}
.contact a:hover{color:inherit}
footer{font-size:.8rem;color:var(--mute);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 0 1.4rem}
.visually{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* perspective page */
.essay{max-width:44rem;padding:clamp(2.5rem,6vh,4rem) 0 3rem}
.essay h1{max-width:20ch}
.essay ol{list-style:none;margin:2.25rem 0 0;padding:0;border-top:2px solid var(--accent)}
.essay li{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.essay h2,.essay h3{font:500 1.5rem/1.25 var(--serif);margin:0 0 .6rem}
.essay p{margin:0 0 .8rem;color:var(--soft)}
@media (max-width:900px){
 .hero,.help,.about,.duo{grid-template-columns:1fr}
 .positions .side .more{margin-left:0}
 .positions ol{grid-template-columns:1fr}
 .portrait{justify-self:start;max-width:340px}
 .hero{gap:1.75rem}
 .help .note{grid-column:auto;margin-top:0}
 .top{flex-direction:column;align-items:flex-start;gap:1rem}
 nav ul{gap:.95rem}
 nav a{font-size:.72rem;letter-spacing:.08em}
}
@media print{nav,.cta,.skip{display:none}body{background:#fff}.contact{background:#fff;color:#000}}
.essay .end{margin-top:2rem}
.essay article{border-top:2px solid var(--accent);padding:1.4rem 0 1rem;margin-top:2rem}
.essay article h2{font:500 1.6rem/1.2 var(--serif);margin:0 0 .9rem}
.essay .toc{font-size:.9rem;color:var(--mute)}