/* Libertinus Serif — the same family the CV and résumé are set in, converted from the
   OTFs Typst uses so print and web match exactly. A low-contrast transitional face:
   no hairlines to fall under a pixel, so it stays sharp on screen and inverted.
   Subset to this site's glyphs, hinting retained. SIL OFL. */
@font-face{font-family:Lib;src:url(fonts/lib-400-roman.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lib;src:url(fonts/lib-400-italic.woff2)format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lib;src:url(fonts/lib-700-roman.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lib;src:url(fonts/lib-700-italic.woff2)format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:LibMono;src:url(fonts/lib-mono.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{--serif:Lib,"Libertinus Serif",Palatino,"Palatino Linotype",serif;
--mono:LibMono,"Libertinus Mono",ui-monospace,monospace,monospace;
color-scheme:light dark;--bg:#f5f5f5;--fg:#1a1a1a;--d:#6b6b6b;--r:#d4d4d4}
@media(prefers-color-scheme:dark){:root{--bg:#161616;--fg:#e4e4e4;--d:#909090;--r:#343434}}
/* these must restate dark, or they'd repaint dim text with the light value */
@media(prefers-contrast:more){:root{--d:#3a3a3a;--r:#8a8a8a}}
@media(prefers-contrast:more) and (prefers-color-scheme:dark){:root{--d:#cfcfcf;--r:#9a9a9a}}

*{box-sizing:border-box}
body{max-width:52rem;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) clamp(1.2rem,5vw,2.5rem) 5rem;
background:var(--bg);color:var(--fg);font:18px/1.6 var(--serif);
font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
a{color:inherit;text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

h1{font-size:1.5rem;margin:0 0 .65rem}
h2{font:400 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--d);margin:2.75rem 0 1rem;padding-bottom:.55rem;border-bottom:1px solid var(--r)}
h3{font:600 1.05rem/1.3 var(--serif);margin:1.75rem 0 .4rem}
p{max-width:40rem;margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul.b{max-width:40rem;padding-left:1.2rem;margin:0 0 1rem}
ul.b li{margin-bottom:.4rem}
small{font-size:.8125rem;color:var(--d)}

/* metadata left, substance right */
dl{display:grid;grid-template-columns:7rem 1fr;gap:1.35rem 1.5rem;margin:0}
dt{font:.75rem/1.75 var(--mono);color:var(--d);padding-top:.15rem}
dd{margin:0;max-width:40rem}
dd>i{font-style:normal;color:var(--d)}
dd p{color:var(--d);margin:.15rem 0 0;line-height:1.5}

nav{font:.75rem var(--mono);color:var(--d);margin:0 0 2rem}
nav a,#lede a,footer a{color:var(--d)}
nav a:hover,#lede a:hover,footer a:hover{color:var(--fg)}

/* width/height on every img reserves the box before the bytes land, so nothing reflows;
   lazy ones below the fold cost nothing at first paint. */
img{max-width:100%;height:auto;display:block}
figure{margin:1.25rem 0;max-width:40rem}
figcaption{font:.6875rem/1.5 var(--mono);color:var(--d);margin-top:.5rem}

#lede{display:grid;grid-template-columns:1fr 11rem;gap:2.5rem;align-items:start;
margin-bottom:3rem}
#lede img{border:1px solid var(--r)}
#lede ul{color:var(--d);font:.8125rem/1.9 var(--mono);list-style:none;padding:0;margin:1.15rem 0 0}
#lede li{display:inline}
/* separator hangs off the END of an item, so a wrap never starts a line with it */
#lede li:not(:last-child)::after{content:"·";opacity:.45;margin:0 .1em 0 .45em}
@media(max-width:40rem){#lede{grid-template-columns:1fr}#lede img{max-width:11rem}}

/* card front: role line under the name, and the one-line work list */
.role{font:.8125rem var(--mono);color:var(--d);margin:0 0 .9rem}
ul.w{list-style:none;padding:0;margin:0;max-width:40rem}
ul.w li{margin:0 0 .85rem;padding-left:1.1rem;text-indent:-1.1rem}
ul.w li::before{content:"—";color:var(--d);padding-right:.45rem}
ul.w i{font-style:normal;color:var(--d);font:.75rem var(--mono);white-space:nowrap}
.tail{margin-top:2.5rem;color:var(--d);font-size:.9375rem}
.x::after{content:"↗";font-size:.85em;opacity:.7}
footer{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--r);
font:.75rem var(--mono);color:var(--d)}

/* prose extras, used by the writing pages */
article{max-width:40rem}
article h2{font:600 1.1rem/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--fg);
border:0;padding:0;margin:2rem 0 .5rem}
article h3{font:600 .95rem/1.3 var(--serif);margin:1.5rem 0 .4rem}
article ul,article ol{margin:0 0 1rem;padding-left:1.4rem}
article li{margin:0 0 .3rem}
article img{margin:1.25rem 0;border:1px solid var(--r)}
code{font:.85em var(--mono);background:color-mix(in srgb,var(--d) 16%,transparent);
padding:.1em .35em;border-radius:2px}
pre{background:color-mix(in srgb,var(--d) 12%,transparent);border:1px solid var(--r);
padding:.8rem 1rem;overflow-x:auto;margin:0 0 1rem;max-width:40rem}
pre code{background:none;padding:0;font-size:.8rem;line-height:1.5}
.date{font:.75rem var(--mono);color:var(--d);margin:0 0 2rem}

@media(max-width:34rem){dl{grid-template-columns:1fr;gap:1.5rem}dt{padding-top:0}}