/* ==================================================================
   Colours, fonts and text sizes. Change the values in the first two
   blocks to restyle the whole site: the first block is the light
   theme (plus fonts and sizes), the second is the dark theme.
   ================================================================== */
:root{
  --ground:#F4F2ED;       /* page background: soft warm cream */
  --surface:#FBFAF7;      /* pop-ups that sit above the page */
  --wash:#EBEDE4;         /* faint sage fill: tags */
  --sunk:#EAE7E0;         /* code and quiet fills */
  --ink:#1F221E;          /* main text */
  --ink-2:#373B35;
  --muted:#555B52;        /* secondary text */
  --faint:#777C72;        /* counts, icons */
  --line:#DDDAD1;         /* hairlines */
  --accent:#4D6A51;       /* deep sage: links, active tab */
  --accent-line:#B6C8B0;  /* pale sage: underlines, dividers */
  --accent-soft:#DDE6D6;  /* sage tint: tags, highlights */
  --img-dim:none;         /* photos at full brightness */
  --c-comment:#72776D; --c-keyword:#4D6A51; --c-string:#2B6C80; --c-number:#944B1A; --c-func:#2F5C9E;
  /* Fonts: serif for names, titles, headings and blog posts; sans for everything else; mono for dates and labels */
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Text sizes: every text on the site uses one of these seven (phones shrink the big ones, see the end of this file) */
  --text-xs:13px;         /* dates, labels, tags, footer */
  --text-sm:15px;         /* tabs, left column, lines under titles, captions, code */
  --text-md:17px;         /* body text */
  --text-lg:20px;         /* blog post text, project titles, small headings */
  --text-xl:24px;         /* section headings, post titles on the Blog page */
  --text-2xl:28px;        /* your name */
  --text-3xl:40px;        /* a post's title */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#1e1e19;       /* warm charcoal */
  --surface:#32322A;
  --wash:#31312A;
  --sunk:#34342C;
  --ink:#ECEBE3;
  --ink-2:#D3D2C8;
  --muted:#ADAC9F;
  --faint:#8C8C80;
  --line:#3B3B32;
  --accent:#AFCDA9;       /* soft sage */
  --accent-line:#5A6D53;
  --accent-soft:#384432;
  --img-dim:brightness(.86) saturate(.95);
  --c-comment:#8F8F83; --c-keyword:#AFCDA9; --c-string:#8CC8D8; --c-number:#F0B784; --c-func:#9DBBF3;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--text-md)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:var(--ink)}
a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--accent-line)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto}
strong,b{font-weight:600}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:10;background:var(--surface);padding:6px 12px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Page frame: the same two columns on every page ----------
   Left: your profile (Home), the topics (Blog) or recent posts (a post).
   Right: the page itself, always in the same place. */
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px;padding-block:48px 16px;display:grid;grid-template-columns:225px minmax(0,1fr);column-gap:56px;grid-template-areas:"nav nav" "side main";grid-template-rows:auto 1fr}
.has-cover .wrap{grid-template-areas:"cover cover" "side main";grid-template-rows:auto 1fr;padding-block:24px 16px}
.content{grid-area:main;min-width:0}
.content > :first-child{margin-top:0}

/* ---------- Tabs ---------- */
.tabs{grid-area:nav;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);margin-bottom:40px}
/* On the home page the tabs sit on the cover image, in a frosted bar of their
   own so they stay readable whatever the photo underneath is doing. */
.has-cover .tabs{grid-area:cover;align-self:start;z-index:2;margin:0;padding:2px 20px 5px;border-bottom:0;border-radius:12px 12px 0 0;background:rgba(20,20,15,.72)}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .has-cover .tabs{background:rgba(20,20,15,.6);-webkit-backdrop-filter:blur(1.3px) saturate(1.1);backdrop-filter:blur(1.3px) saturate(1.1)}
}
.has-cover .tabs a{color:rgba(255,255,255,.92)}
.has-cover .tabs a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.65)}
.has-cover .tabs a[aria-current="page"]{color:#fff;border-bottom-color:#fff}
.has-cover .theme-toggle{color:rgba(255,255,255,.92)}
.has-cover .theme-toggle:hover{color:#fff;background:rgba(255,255,255,.2)}
.tabs a{text-decoration:none;color:var(--muted);font-size:var(--text-sm);font-weight:600;padding-block:10px 12px;margin-bottom:-1px;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink);border-bottom-color:var(--accent-line)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* Light/dark button at the right end of the tabs */
.theme-toggle{margin:0 -8px 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.theme-toggle:hover{color:var(--accent);background:var(--accent-soft)}
.theme-toggle svg{display:block}
.theme-toggle .sun,[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}

/* ---------- Cover strip (Home and Blog) ---------- */
.site-cover{grid-area:cover;margin:0;position:relative;z-index:1}
.site-cover img{display:block;width:100%;aspect-ratio:9/2.07;object-fit:cover;border-radius:12px;background:var(--wash)}
.has-cover .content{padding-top:40px}

/* ---------- Sidebar (home page) ---------- */
.side{grid-area:side;position:sticky;top:32px;align-self:start;display:grid;gap:14px}
.has-cover .side{position:static}
.has-cover .side,.has-cover .rail{padding-top:40px}
.photo{width:168px;height:168px;border-radius:50%;object-fit:cover;background:var(--sunk);box-shadow:0 0 0 4px var(--ground),0 0 0 6px var(--accent-line);margin:6px 0 6px 6px}
.monogram{display:grid;place-items:center;font:500 var(--text-3xl)/1 var(--serif);color:var(--accent);background:var(--accent-soft);letter-spacing:.02em}
.side h1{margin:6px 0 0;font:600 var(--text-2xl)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.tagline{margin:0;line-height:1.45}
.loc{margin:-6px 0 0;color:var(--muted);font-size:var(--text-sm)}
.topics{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.topics li{font-size:var(--text-xs);line-height:1.5;color:var(--ink-2);background:var(--wash);border:1px solid var(--accent-soft);padding:2px 9px;border-radius:5px}
.cv-button{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:8px 15px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:var(--text-sm);font-weight:600;line-height:1.2;text-decoration:none}
.cv-button:hover{color:var(--ink)}
.cv-button svg{flex:none}
.links{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:var(--text-sm)}
.links a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.links .icon{flex:none;color:var(--faint)}
.links a:hover .icon{color:var(--accent)}
.links a::after{content:" \2197";color:var(--accent-line)}
.links a:hover{color:var(--accent)}
/* Email address with a copy button, first in the links block */
.links .email{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:2px}
.links .email .label{display:inline-flex;align-items:center;gap:8px;cursor:default}
.links .email .label:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;border-radius:4px}
/* The address itself: a small bubble on hover or keyboard focus */
.links .email .addr{position:absolute;left:0;top:calc(100% + 6px);z-index:5;white-space:nowrap;user-select:all;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:0 8px 20px rgba(28,33,29,.12);font:500 var(--text-xs)/1.5 var(--mono);color:var(--ink-2);opacity:0;visibility:hidden;transition:opacity .12s ease}
.links .email:hover .addr,.links .email:focus-within .addr{opacity:1;visibility:visible}
.links .email .copy{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.links .email .copy:hover{color:var(--accent);background:var(--accent-soft)}
.links .email .copied{font:500 var(--text-xs)/1.6 var(--mono);color:var(--accent)}
.links .email .copied:empty{display:none}

/* ---------- Left column on the Blog and on posts ---------- */
.rail{grid-area:side;position:sticky;top:32px;align-self:start;display:grid;gap:30px}
.rail-label{margin:0 0 10px;font:500 var(--text-xs)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.rail ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--text-sm);line-height:1.45}
.rail a{color:var(--ink);text-decoration:none}
.rail a:hover{color:var(--accent)}
.rail .back{justify-self:start;font-size:var(--text-sm);font-weight:600;color:var(--accent)}
.rail .recent{gap:12px}
.rail .topic-list{gap:2px}
.topic-list button{display:inline-flex;align-items:baseline;gap:8px;margin-left:-10px;padding:4px 10px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.topic-list button:hover{color:var(--accent)}
.topic-list button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.topic-list .count{font:500 var(--text-xs)/1 var(--mono);color:var(--faint)}

/* ---------- Home sections ---------- */
.is-home .content h2{font:600 var(--text-xl)/1.25 var(--serif);margin:48px 0 14px;color:var(--ink);letter-spacing:-.005em}
.is-home .content h2:first-child{margin-top:0}
/* A faint sage line between the home page sections (About, Selected work, News) */
.is-home .content h2:not(:first-child){padding-top:40px;border-top:1px solid var(--accent-line);border-top-color:color-mix(in srgb,var(--accent-line) 55%,transparent)}
/* Home and Blog share one text width (about 88 characters a line); Home text is a touch smaller */
.is-home .content,.is-blog .content{max-width:44rem}
.is-home .content{font-size:16px}
:where(.content) p{margin:0 0 14px}
.is-home .content h3{font:600 var(--text-lg)/1.3 var(--serif);margin:0;padding-top:22px;border-top:1px solid var(--line);color:var(--ink)}
.is-home .content h2 + h3{border-top:0;padding-top:2px}
.is-home .content h3 + p{margin:8px 0}
.is-home .content h3 + p > strong:first-child{font:500 var(--text-xs)/1.5 var(--mono);color:var(--accent)}
.is-home .content ul{padding-left:1.2em;margin:0 0 16px}
.is-home .content li{margin:4px 0}
.is-home .content li::marker{color:var(--accent-line)}
#news + ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
#news + ul li{position:relative;padding-left:5rem;margin:0}
#news + ul li > strong:first-child{position:absolute;left:0;top:.18em;font:500 var(--text-xs)/1.6 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}

.post-cover img,.post-body img{filter:var(--img-dim)}

/* ---------- Blog list ---------- */
.kind-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 34px;padding:4px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:9px}
.kind-tabs button{padding:6px 16px;border:0;border-radius:6px;background:none;color:var(--muted);font:500 var(--text-sm)/1.3 var(--sans);cursor:pointer}
.kind-tabs button:hover{color:var(--accent)}
.kind-tabs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.year-group + .year-group{margin-top:44px}
.content .year{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:500 var(--text-xs)/1.4 var(--mono);letter-spacing:.1em;color:var(--accent)}
.content .year::after{content:"";flex:1;height:1px;background:var(--line)}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.posts li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:baseline}
.posts time{font:500 var(--text-xs)/1.6 var(--mono);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.posts a{font:500 var(--text-xl)/1.25 var(--serif);color:var(--ink);text-decoration:none}
.posts a:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-line);text-decoration-thickness:2px}
.posts p{margin:6px 0 0;color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.empty{color:var(--muted)}

/* ---------- Full timeline, opened from News on the home page ---------- */
.timeline-toggle{padding:0;border:0;background:none;color:var(--accent);font:600 var(--text-sm)/1.4 var(--sans);cursor:pointer}
.timeline-toggle:hover{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.is-home .content .more{margin:18px 0 0}
/* The open timeline sits in a thin outline, on the page background */
.timeline-full{margin-top:24px;padding:24px 28px 28px;border:1px solid var(--line);border-radius:12px}
.timeline-full .kind-tabs{margin-bottom:28px}
.is-home .content .timeline-full .year{padding-top:0;border-top:0;margin:0 0 14px;font:500 var(--text-xs)/1.4 var(--mono);letter-spacing:.1em;color:var(--accent)}
.timeline-full .year-group + .year-group{margin-top:30px}
/* Each entry: month, the text, and its tag on the right */
.is-home .content .timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.is-home .content .timeline li{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 5.5rem;column-gap:14px;align-items:start;margin:0}
.timeline time{font:500 var(--text-xs)/1.6 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums;padding-top:.2em}
.tl-text{min-width:0}
.tl-kind{justify-self:end;margin-top:3px;padding:0 8px;border:1px solid var(--accent-soft);border-radius:5px;background:var(--wash);font-size:var(--text-xs);line-height:1.6;color:var(--ink-2);white-space:nowrap}

/* ---------- A post ---------- */
.post-head{margin-bottom:36px}
.post-meta{margin:0 0 12px;font:500 var(--text-xs)/1.8 var(--mono);color:var(--muted)}
.post-meta a{color:var(--accent);text-decoration:none}
.post-meta a:hover{text-decoration:underline}
.post-title{margin:0;font:600 var(--text-3xl)/1.12 var(--serif);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.post-dek{margin:14px 0 0;font:italic 400 var(--text-lg)/1.45 var(--serif);color:var(--muted);text-wrap:pretty}
.post-cover{margin:30px 0 0}
.post-cover img{display:block;width:100%;border-radius:8px;border:1px solid var(--line)}
.post-body{font:400 var(--text-lg)/1.7 var(--serif);color:var(--ink)}
.post-body p{margin:0 0 1.1em}
.post-body h2{font:600 var(--text-xl)/1.25 var(--serif);margin:1.8em 0 .5em;letter-spacing:-.01em}
.post-body h3,.post-body h4{font:600 var(--text-lg)/1.35 var(--serif);margin:1.6em 0 .4em}
.post-body a{color:var(--ink);text-decoration-color:var(--accent-line);text-decoration-thickness:2px;text-underline-offset:4px}
.post-body a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.post-body ul,.post-body ol{padding-left:1.3em;margin:0 0 1.1em}
.post-body li{margin:.3em 0}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{margin:1.6em 0;padding:.1em 0 .1em 1.2em;border-left:3px solid var(--accent-line);font-style:italic;color:var(--ink-2)}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body mark{background:linear-gradient(transparent 52%,var(--accent-soft) 52%);color:inherit;padding:0 .12em}
.post-body img{display:block;margin:1.6em auto 10px;border-radius:8px;border:1px solid var(--line)}
.post-body p > img:only-child{margin-bottom:1.6em}
/* Captions: under a post's cover, and the *line in italics* right below an image */
.post-cover figcaption,.post-body p > img + em{display:block;font:italic 400 var(--text-sm)/1.5 var(--serif);color:var(--muted);text-align:center}
.post-cover figcaption{margin-top:10px}
.post-body p > img + em{margin:0 auto 1.6em}
.post-body hr{border:0;height:auto;margin:2em 0;text-align:center;overflow:visible}
.post-body hr::after{content:"\2022\2002\2022\2002\2022";color:var(--accent-line);font-size:var(--text-xs);letter-spacing:.3em}
.post-body table{display:block;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;font:400 var(--text-sm)/1.5 var(--sans)}
.post-body th,.post-body td{border-bottom:1px solid var(--line);padding:8px 14px 8px 0;text-align:left;vertical-align:top}
.post-body th{font-weight:600;color:var(--ink)}
.post-body sup{font-size:var(--text-sm);line-height:0}
.post-body .footnotes{margin-top:2.4em;padding-top:1em;border-top:1px solid var(--line);font:400 var(--text-sm)/1.55 var(--sans);color:var(--muted)}
.post-body .footnotes ol{padding-left:1.2em}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.post-nav a{display:block;text-decoration:none;color:var(--ink);font:500 var(--text-lg)/1.35 var(--serif)}
.post-nav a:hover{color:var(--accent)}
.post-nav small{display:block;margin-bottom:4px;font:500 var(--text-xs)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-nav .next{text-align:right;grid-column:2}

/* ---------- Code ---------- */
.content code{font:500 .85em var(--mono);background:var(--sunk);padding:.1em .35em;border-radius:4px}
.content pre{margin:0;padding:14px 16px;overflow-x:auto;background:none;line-height:1.6}
.content pre code{background:none;padding:0;font-size:var(--text-sm)}
.content div.highlighter-rouge,.content pre:not(.highlight){margin:1.5em 0;background:var(--sunk);border:1px solid var(--line);border-radius:8px}
.content .highlight{background:none}
.highlight .c,.highlight .c1,.highlight .cm,.highlight .cs,.highlight .cp{color:var(--c-comment);font-style:italic}
.highlight .k,.highlight .kd,.highlight .kn,.highlight .kr,.highlight .kc,.highlight .kt,.highlight .ow,.highlight .nb{color:var(--c-keyword)}
.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sd,.highlight .se,.highlight .si,.highlight .sr{color:var(--c-string)}
.highlight .m,.highlight .mi,.highlight .mf,.highlight .mh,.highlight .mo,.highlight .il{color:var(--c-number)}
.highlight .nf,.highlight .fm,.highlight .nc,.highlight .nn{color:var(--c-func)}

/* ---------- Footer ---------- */
.foot{max-width:1120px;margin:0 auto;padding:28px 24px 56px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--faint)}
.foot a{color:var(--muted)}

/* ---------- Phones ---------- */
@media (max-width:780px){
  :root{--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:30px}
  .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "side" "main";padding-block:12px 8px;padding-inline:18px}
  .has-cover .wrap{grid-template-areas:"cover" "side" "main";grid-template-rows:auto}
  .is-blog .wrap{grid-template-areas:"nav" "side" "main"}
  .has-cover.is-blog .wrap{grid-template-areas:"cover" "side" "main"}
  .rail.blog-rail{margin:0 0 30px;padding:0 0 22px;border-top:0;border-bottom:1px solid var(--line);gap:22px}
  .rail .topic-list{display:flex;flex-wrap:wrap;gap:8px}
  .topic-list button{margin-left:0;border:1px solid var(--line)}
  .is-post .wrap{grid-template-areas:"nav" "main"}
  .post-rail{display:none}
  .tabs{gap:20px;margin-bottom:28px}
  .has-cover .tabs{padding:0 12px 4px;border-radius:10px 10px 0 0}
  .site-cover img{aspect-ratio:2/1.035;border-radius:10px}
  .side{position:static;margin-bottom:40px}
  .rail{position:static;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
  .photo{width:132px;height:132px}
  .has-cover .content{padding-top:0}
  .site-cover + .content{padding-top:24px}
  .has-cover .side,.has-cover .rail{padding-top:24px}
  .links{display:flex;flex-wrap:wrap;gap:8px 20px}
  #news + ul li{padding-left:0;padding-top:1.45em}
  .timeline-full{padding:18px 16px 22px}
  .is-home .content .timeline li{grid-template-columns:2.4rem minmax(0,1fr);column-gap:12px}
  .tl-kind{grid-column:2;justify-self:start;margin-top:6px}
  .posts li{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left;grid-column:auto}
  .foot{padding-inline:18px}
}

/* ---------- Printing ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .tabs,.foot,.skip,.site-cover{display:none!important}
  .wrap{padding:0;max-width:none}
  a{color:#000;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}