/* Academic site, in the deck template's style (scripts/slides.py): Times New Roman text, bold Arial header/footer
   outside thin red rules, scan grain on the ground, the #old displacement filter on all type,
   figures on plain white with soft shadows. Ground is off-white paper instead of the deck's blue/green. */
:root{--bg:#f4f0e4;--fg:#1f1d1a;--fg2:#3b3833;--muted:#77716a;--title:#2f4c8c;--rule:rgba(31,29,26,.16);--red:#c0392b;--r:10px}
*{box-sizing:border-box}
html{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") repeat,var(--bg);color:var(--fg)}
body{margin:0;overflow-x:clip;container-type:inline-size;font:20px/1.5 "Times New Roman",Times,"Nimbus Roman",serif}
.sheet{max-width:980px;margin:0 auto;padding:0 16px}

/* Tufte's Harvard template: affiliation text in bold sans outside the red rules */
header,footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px}
header{padding:22px 0 10px;border-bottom:2px solid var(--red)}
footer{margin-top:64px;padding:10px 0 28px;border-top:2px solid var(--red)}
.hdr{font:700 17px/1.3 Arial,Helvetica,Verdana,sans-serif;letter-spacing:.01em;color:var(--fg);text-decoration:none}
nav.hdr{display:flex;flex-wrap:wrap;gap:4px 20px}nav.hdr a{color:var(--fg);text-decoration:none}nav.hdr a:hover{color:var(--red)}

/* type */
h1{font-weight:400;font-size:64px;line-height:1.05;margin:0;color:var(--title)}
h1.page{font-size:52px;margin:0}
.lab{font-weight:400;font-size:34px;color:var(--title);margin:0}
/* section titles sit on a crisp 2px red rule, the same as the one under the navbar; the wrapper carries the rule
   so the title's #old filter does not roughen it */
.sect{width:fit-content;border-bottom:2px solid var(--red);padding-bottom:4px;margin:56px 0 18px}   /* rule only as wide as the title */h1.page{line-height:1.1}
h2.course,h3.course{font-weight:400;font-size:26px;color:var(--title);margin:24px 0 6px}
h3{font-weight:400;font-size:25px;line-height:1.2;margin:0 0 4px;color:var(--fg)}
p{margin:0 0 14px}
a{color:var(--title);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--red)}
.rng{font-size:26px;font-style:italic;color:var(--fg2);margin:10px 0 0}
.who{font-size:19px;color:var(--muted);margin:14px 0 0}
.muted,.meta,.tags,.keys,.more{color:var(--muted)}
h1,h2,h3,p,ol.sessions li,.hdr,summary{filter:url(#old)}   /* aging filter only; the deck's chromatic text-shadow blurred small type on paper */

/* profile: the photo itself, slightly rounded, with a soft shadow; no border or frame. A photo, so no #old filter. */
.hero{display:flex;gap:40px;align-items:center;margin-top:52px}
/* the name stays on one line beside the 205px print: it is ~11.6em wide, so below full page width it shrinks with the viewport */
.hero h1{font-size:min(60px,calc((100vw - 32px - 245px) / 11.8));white-space:nowrap}
#about{margin-top:40px}   /* no heading: the bio follows the profile directly */
#library{margin-top:28px}   /* no heading either: the book shelf (then films) closes the page, after Teaching */
.photo{flex:0 0 205px;width:205px;border-radius:6px;overflow:hidden;
  box-shadow:0 10px 18px -8px rgba(58,44,28,.45),0 1px 3px rgba(58,44,28,.18)}
.photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover}

/* publications: figure left (title cards in a plain rounded frame with a shadow, cut-outs floating), text right, hairline rules between */
ol.pubs,ol.sessions{list-style:none;margin:0;padding:0}
.pub{display:flex;gap:32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule)}
.pub:first-child{padding-top:6px}
.fig{flex:0 0 264px;display:block;position:relative}
.frame{margin:0;aspect-ratio:16/10;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 5px 10px -4px rgba(58,44,28,.35)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}   /* covers are pre-cropped to 16:10 (public/site/img/) */
/* transparent PNG cut-outs: no frame, no ground. #edge roughens and softens only the outline (interior stays sharp),
   the figure's drop-shadow follows that outline, multiply lets the paper tint the whites */
.float{height:200px;margin:-12px 0;display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply;
  filter:drop-shadow(0 7px 5px rgba(58,44,28,.30))}
.float img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:url(#edge)}
/* hover anywhere on the entry: the figure lifts off the page and tilts, the shadow drops away and softens */
.frame,.float{transition:transform .45s cubic-bezier(.2,.7,.25,1),filter .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s cubic-bezier(.2,.7,.25,1)}
.pub:hover .float{transform:translateY(-7px) rotate(-1.5deg) scale(1.04);filter:drop-shadow(0 20px 13px rgba(58,44,28,.26))}
.pub:hover .frame{transform:translateY(-5px) rotate(-.8deg);box-shadow:0 18px 22px -10px rgba(58,44,28,.45)}
/* hover pixelation (site.js): a canvas over the image, redrawn at falling block sizes */
.float{position:relative}canvas.px{position:absolute;pointer-events:none;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.frame,.float{transition:none}.pub:hover .float,.pub:hover .frame{transform:none}}
.pub .txt{flex:1;min-width:0}
.authors{font-size:17px;color:var(--fg2);margin:0 0 2px}.authors b{font-weight:700;color:var(--fg)}.authors .adv{color:var(--muted);font-style:italic}
.meta{font-style:italic;margin:0 0 2px}
.star{color:var(--red);font-size:.8em;margin-left:6px;vertical-align:.12em;cursor:help}.award{color:var(--red)}
.tags{font-size:16px;margin:0 0 6px}
.links{margin:0 0 6px}
details{margin-top:4px}summary{cursor:pointer;color:var(--muted);font-style:italic;list-style:none}summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";font-style:normal;color:var(--red)}details[open] summary::before{content:"– "}
details p{font-size:18px;color:var(--fg2);margin:8px 0 0}

/* library: Goodreads covers standing on the page like the cut-outs (rough edge, warm shadow, lift + pixelate on hover);
   books being read now stand taller (no caption); a hairline separates them from this year's reads */
.shelf{display:flex;align-items:flex-start;gap:20px;overflow-x:auto;scrollbar-width:none;box-sizing:border-box;
  width:100vw;margin-left:calc(50% - 50vw);padding:16px calc(50vw - 50%) 14px;   /* full-bleed, first cover still on the text column */
  width:100cqw;margin-left:calc(50% - 50cqw);padding-inline:calc(50cqw - 50%)}   /* cqw of body = viewport minus scrollbar (vw counts it) */
.shelf::-webkit-scrollbar{display:none}
.shelf .src{flex:0 0 26px;height:26px;align-self:center;margin-right:-6px;opacity:.8;transition:opacity .2s,transform .2s}   /* Goodreads / Letterboxd mark, first on its shelf */
.shelf .src svg{display:block;width:100%;height:100%}.shelf .src:hover{opacity:1;transform:scale(1.1)}
.book{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;
  filter:drop-shadow(0 6px 5px rgba(58,44,28,.30));transition:transform .45s cubic-bezier(.2,.7,.25,1),filter .45s cubic-bezier(.2,.7,.25,1)}
.book img,.nocover{display:block;height:150px;aspect-ratio:2/3;object-fit:cover;filter:url(#edge)}
.book.now img,.book.now .nocover{height:200px}
.nocover{display:flex;align-items:center;justify-content:center;padding:8px;background:#fff;color:var(--muted);font-size:14px;text-align:center}
.book .stars{margin-top:5px;font-size:15px;letter-spacing:1px;color:var(--rule);filter:url(#old)}.book .stars b{font-weight:400;color:var(--red)}
.book:hover{transform:translateY(-7px) rotate(-1.5deg) scale(1.04);filter:drop-shadow(0 18px 12px rgba(58,44,28,.26))}
#library .shelf:has(.now){align-items:center}   /* past reads centred on the taller current read: covers line up on the middle, */
#library .shelf:has(.now) .book:not(.now) .stars{position:absolute;top:100%;left:0;right:0;text-align:center}   /* stars hang below so they don't shift it */
.shelf .gap{flex:0 0 1px;align-self:stretch;background:var(--rule)}
#films{margin-top:18px}   /* Letterboxd posters: same shelf, half-star rating */
.stars .half{position:relative;display:inline-block;letter-spacing:0;margin-right:1px}   /* ½: filled star cropped to its left half over an empty one */
.stars .half b{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
@media (prefers-reduced-motion:reduce){.book{transition:none}.book:hover{transform:none}}

/* teaching sessions, same list look as the deck (hairline rules, tabular dates in the margin) */
ol.sessions li{display:flex;gap:18px;padding:9px 0;border-bottom:1px solid var(--rule)}
.date{flex:0 0 6.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.what{flex:1;min-width:0}
.sub{color:var(--muted);font-style:italic}
.files{display:block}
a.code{font:14px ui-monospace,Menlo,monospace;margin-right:10px}
.keys{font-size:15px;margin-top:24px}
kbd{font:13px ui-monospace,Menlo,monospace;border:1px solid var(--rule);padding:0 4px;border-radius:3px}
.more{margin-top:12px}

@media (max-width:640px){
  body{font-size:18px}
  h1{font-size:42px}.hero h1{font-size:42px;white-space:normal}.rng{font-size:21px}.lab{font-size:28px}.sect{margin-top:40px}
  .hero{flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}
  .photo{flex-basis:auto;width:200px}
  .pub{flex-direction:column;gap:14px}.fig{flex-basis:auto;width:100%;max-width:360px}.float{height:220px;margin:0}
  ol.sessions li{flex-direction:column;gap:0}.date{flex-basis:auto}
  .book img,.nocover{height:120px}.book.now img,.book.now .nocover{height:160px}
}
@media print{h1,h2,h3,p,ol.sessions li,.hdr,summary,.float,.float img,.book,.book img{filter:none;text-shadow:none}details{display:block}}