/* Fraunces (name, headings) and Figtree (everything else), SIL OFL 1.1, self-hosted (fonts/LICENSE-*.txt). */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* Seasonal: an inline script in <head> sets data-season (by month) and
   data-mode (dark after sunset or when the system is set to dark, unless the
   visitor chose day or night with the switch). Without the script the page
   is autumn by day. */
:root{--bg:#fbf6f0;--text:#2e2522;--muted:#86776f;--link:#2e2522;--accent:#c8754a;color-scheme:light}
:root[data-season=autumn]{--bg:#fbf6f0;--text:#2e2522;--muted:#86776f;--link:#2e2522;--accent:#c8754a}
:root[data-season=winter]{--bg:#f6f8fb;--text:#232831;--muted:#788292;--link:#232831;--accent:#8aa4cf}
:root[data-season=spring]{--bg:#fcf8f8;--text:#2b2427;--muted:#857a7e;--link:#2b2427;--accent:#dc93b3}
:root[data-season=summer]{--bg:#fdf9ef;--text:#2b2620;--muted:#857c6c;--link:#2b2620;--accent:#d9963f}
:root[data-mode=dark][data-season=autumn]{--bg:#17120f;--text:#f2e9e3;--muted:#a8988e;--link:#f2e9e3;--accent:#d98f63;color-scheme:dark}
:root[data-mode=dark][data-season=winter]{--bg:#10141b;--text:#e9eef5;--muted:#95a0b1;--link:#e9eef5;--accent:#a8bfe8;color-scheme:dark}
:root[data-mode=dark][data-season=spring]{--bg:#161214;--text:#f1eaec;--muted:#a59a9e;--link:#f1eaec;--accent:#e6a7c2;color-scheme:dark}
:root[data-mode=dark][data-season=summer]{--bg:#15130d;--text:#f3ede0;--muted:#a89f8c;--link:#f3ede0;--accent:#ebb36e;color-scheme:dark}
/* Day and night switch: an 8-bit sun or moon in the sky, up and to the right of the tree. */
.mode{position:fixed;top:14px;right:14px;width:30px;height:30px;padding:1px;border:0;border-radius:6px;background:none;cursor:pointer;line-height:0}
.mode svg{display:block;image-rendering:pixelated}
.mode .moon,:root[data-mode=dark] .mode .sun{display:none}
:root[data-mode=dark] .mode .moon{display:block}
.mode:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.mode:focus-visible{outline:1px solid var(--text);outline-offset:2px}
@media(max-width:44rem){.mode{position:absolute}}
/* The 8-bit seasonal tree (drawn by seasons.js), top right. */
.tree{position:fixed;top:30px;right:48px;line-height:0;pointer-events:none}
/* On narrow screens it would sit over the text while scrolling, so it stays at the top. */
@media(max-width:44rem){.tree{position:absolute}}
.tree svg{display:block;image-rendering:pixelated}
/* Light on the tree: plain daylight, a warm glow around sunrise and sunset, and
   cool, dim moonlight at night, with no glow (or whenever the page is in night mode). */
:root[data-phase=dawn]:not([data-mode=dark]) .tree{filter:sepia(.35) saturate(1.4) hue-rotate(-8deg) brightness(1.05)}
:root[data-phase=dusk]:not([data-mode=dark]) .tree{filter:sepia(.5) saturate(1.7) hue-rotate(-16deg) brightness(.97)}
/* Sunrise and sunset: a soft glow in the sky corner behind the tree, and a lower, redder sun. */
:root[data-phase=dawn]:not([data-mode=dark]) body::before,:root[data-phase=dusk]:not([data-mode=dark]) body::before{content:"";position:fixed;top:-120px;right:-120px;width:520px;height:420px;border-radius:50%;pointer-events:none;z-index:-1}
:root[data-phase=dawn]:not([data-mode=dark]) body::before{background:radial-gradient(closest-side,rgba(255,196,160,.55),rgba(255,214,190,.22) 55%,transparent)}
:root[data-phase=dusk]:not([data-mode=dark]) body::before{background:radial-gradient(closest-side,rgba(246,140,110,.5),rgba(228,140,170,.22) 55%,transparent)}
:root[data-phase=dusk]:not([data-mode=dark]) .mode .sun,:root[data-phase=dawn]:not([data-mode=dark]) .mode .sun{filter:hue-rotate(-28deg) saturate(1.4);transform:translateY(6px)}
:root[data-mode=dark] .tree{filter:brightness(.8) saturate(.6) hue-rotate(-12deg)}
@media(prefers-reduced-motion:no-preference){.tree{transition:filter .6s ease}}
/* Night sky: a handful of pixel stars around the tree, some twinkling. */
.stars{position:fixed;top:8px;right:8px;width:240px;height:160px;pointer-events:none;display:none}
:root[data-mode=dark] .stars{display:block}
.stars i{position:absolute;width:2px;height:2px;background:#e9e6f7;opacity:.7}
.stars i.big{width:2px;height:2px;box-shadow:0 -2px #e9e6f7,0 2px #e9e6f7,-2px 0 #e9e6f7,2px 0 #e9e6f7}
@media(prefers-reduced-motion:no-preference){.stars i{animation:twinkle 5s ease-in-out infinite}}
@keyframes twinkle{0%,100%{opacity:.75}50%{opacity:.2}}
@media(max-width:44rem){.stars{position:absolute;width:180px}}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 16.5px/1.65 "Figtree",system-ui,sans-serif}
main{max-width:34rem;margin:0 0 0 clamp(0px,8vw,120px);padding:clamp(48px,10vh,112px) 24px 96px}
.me{display:block;width:144px;height:192px;border-radius:20px;object-fit:cover;object-position:50% 40%;margin:0 0 24px}
h1{font:400 30px/1.15 "Fraunces",Georgia,serif;letter-spacing:-.01em;margin:0 0 14px}
h2{font:italic 400 18px/1.2 "Fraunces",Georgia,serif;color:var(--muted);margin:52px 0 16px}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
li{margin:0 0 16px}
li span{color:var(--muted)}
ul li{margin:0 0 14px}
ul li > span{display:block}
.proj .emo{margin-right:.45em}
/* Links: a thin underline in the season's accent that grows into a soft
   highlight on hover. */
a{color:var(--link);text-decoration:none;background:linear-gradient(color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 30%,transparent)) no-repeat 0 100% / 100% 1px;padding-bottom:1px}
a:hover,a:focus-visible{background-size:100% .6em}
@media(prefers-reduced-motion:no-preference){
  a{transition:background-size .18s cubic-bezier(.2,.8,.2,1)}
  .proj:hover .emo,.proj:focus-within .emo{animation:hop .5s steps(2) 1}
}
@keyframes hop{50%{transform:translateY(-3px)}}
.proj .emo{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a:focus-visible{outline:1px solid currentColor;outline-offset:3px}