/* ---------- paper and ink ---------- */
:root{
  --paper:#e9dfc8; --card:#f0e8d5; --ink:#211c16; --muted:#665c4d; --hair:#a2947a; --rule:#cbbfa4; --red:#962a1c;
  --body:"EB Garamond",Garamond,"Times New Roman",serif;
  --fell:"IM Fell English","EB Garamond",Garamond,serif;
  --fellsc:"IM Fell English SC","IM Fell English",Garamond,serif;
  --text:32em;
}
:root[data-theme="dark"]{
  --paper:#1a1713; --card:#201c17; --ink:#ebe1cb; --muted:#a89c86; --hair:#615848; --rule:#3a342b; --red:#e08a6e;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1a1713; --card:#201c17; --ink:#ebe1cb; --muted:#a89c86; --hair:#615848; --rule:#3a342b; --red:#e08a6e;}}
:root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .16  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);font:500 20px/1.55 var(--body);
  font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--red);text-decoration-color:var(--red)}
p{margin:0 0 .7em}
strong{font-weight:700}

/* ---------- light / dark switch, top left ---------- */
.theme-toggle{font:inherit;position:absolute;top:calc(3.5em + 4px);right:2.5em;width:40px;height:40px;padding:6px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:50%}
.theme-toggle:hover{color:var(--red)}
.theme-toggle:focus-visible{outline:1px solid var(--red);outline-offset:2px}
.theme-toggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;display:block}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none} :root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .sun{display:none}:root:not([data-theme="light"]) .theme-toggle .moon{display:block}}

/* ---------- page: text on the left, figures beside it on wide screens ---------- */
.page{max-width:1300px;margin:0 auto;padding:3.5em 2.5em 3em;position:relative}
.row{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(0,1fr);column-gap:3em;align-items:start}
.row>.text{grid-column:1}
.row>figure{grid-column:2}
.narrow{max-width:var(--text)}

/* ---------- header ---------- */
.name{font-family:var(--fellsc);font-weight:400;font-size:48px;letter-spacing:.03em;line-height:1.05;margin:0 0 .25em}
.city{color:var(--muted);margin:0 0 .25em}
.links{margin:0 0 1.3em}
.links a{margin-right:1em}
.intro{max-width:none}
.epigraph{margin:1.6em 0 0;padding:0;max-width:56em}
.epigraph p{text-indent:2.5em;font-family:var(--fell);font-style:italic;font-size:21px;line-height:1.45;margin:0 0 .35em}
.epigraph footer{color:var(--muted);font-size:17px;font-style:italic;margin:0;text-align:right}
.epigraph cite{font-style:italic}
.ornament{display:flex;align-items:center;gap:1em;color:var(--red);margin:1.8em 0 0}
.ornament::before,.ornament::after{content:"";flex:1;border-top:1px solid var(--rule)}
.ornament span{font-size:19px;line-height:1}

/* ---------- sections ---------- */
section{margin-top:2.6em}
.section-title{font-family:var(--fellsc);font-weight:400;font-size:30px;letter-spacing:.04em;margin:0 0 .5em;
  padding-bottom:.25em;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:.4em}
.vignette{width:26px;height:26px;flex:none;fill:none;stroke:var(--red);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;margin-top:-2px}
.vignette .fill{fill:var(--red);stroke:none}
.entry{padding:2em 0 .6em;margin-top:1.2em;border-top:1px solid var(--rule)}
.section-title+.entry{border-top:0;padding-top:.5em;margin-top:0}
.entry-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .8em;margin:0 0 .45em;font-weight:400}
.org{font-family:var(--fell);font-size:32px;line-height:1.2}
.org a{text-decoration-color:var(--rule)}
.when{color:var(--muted);white-space:nowrap;font-size:18px}
.lead{margin:0 0 .4em}
.lead p{margin:0}
.job-points{margin:.2em 0 0}

/* a job's work as cards: heading, figure, paragraph; two to a row */
.cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6em 2.8em;margin:1em 0 .6em}
.card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding-top:.9em;border-top:1px solid var(--rule)}
.card h4{font-family:var(--body);font-weight:700;font-size:19px;letter-spacing:.01em;margin:0 0 .45em;line-height:1.3}
.card figure{margin:0 0 .7em;display:flex;flex-direction:column}
.card figure svg{margin:auto 0}
.card-text{line-height:1.5}
.card-text p{margin:0}
.card-text strong{font-weight:700;color:var(--ink)}
/* wide: figure left, words right */
.card.wide{grid-column:1/-1;grid-row:auto;grid-template-rows:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2.8em;align-items:start}
.card.wide figure{grid-column:1;grid-row:1/span 9;margin:0}
.card.wide>:not(figure){grid-column:2}
.card.paper-card{border-top-color:transparent}
.paper{grid-row:2/4;display:flex;flex-direction:column;justify-content:space-between;position:relative;isolation:isolate;padding:20px 26px 10px}
.paper h4{margin:0 0 1em}
.paper ul{margin:0}
/* a sheet with a crumpled, smoothed-out edge */
.paper-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.paper-bg .sheet{fill:none;stroke:var(--red);stroke-opacity:.45;stroke-width:1.2;vector-effect:non-scaling-stroke}

/* a paragraph and its figure, set side by side and ruled off */
.pair{display:grid;grid-template-columns:minmax(0,26em) minmax(0,1fr);column-gap:3.2em;align-items:center;
  padding:1.6em 0;border-bottom:1px solid var(--rule)}
.pair:not(.has-fig){grid-template-columns:minmax(0,var(--text))}
.pair-text h4{font-family:var(--fell);font-weight:400;font-size:25px;margin:0 0 .3em;line-height:1.2}
.pair-text p{margin:0 0 .6em}
.pair-text p:last-child{margin-bottom:0}
.pair-text strong,.lead strong,.project strong,.also strong{font-weight:700;color:var(--ink)}

.also{padding:1.3em 0 .4em;max-width:var(--text)}
.also-head{font-family:var(--fellsc);font-size:19px;letter-spacing:.05em;margin:0 0 .4em}


/* lists with a printer's fleuron for a bullet */
ul.ornate{list-style:none;margin:0 0 1em;padding:0}
ul.ornate li{position:relative;padding-left:1.55em;margin:0 0 .5em}
ul.ornate li::before{content:"❧";position:absolute;left:0;top:.02em;color:var(--red);font-size:.95em}
ul.ornate strong{font-weight:700;color:var(--ink)}

/* projects: cards side by side */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:1.6em 3em;padding-top:.5em}
.project{min-width:0}
.project>p{margin:0 0 .9em}
.project+.project:nth-child(n+3){border-top:1px solid var(--rule);padding-top:1.3em}

/* ---------- figures, framed ---------- */
figure{margin:.15em 0 0;background:var(--card);border:1px solid var(--hair);padding:14px 16px 12px;position:relative}
figure::before{content:"";position:absolute;inset:4px;border:1px solid var(--rule);pointer-events:none}
.fig-title{font-family:var(--fellsc);font-size:16px;letter-spacing:.05em;margin:0 0 8px;color:var(--ink);position:relative}
.fig-title .n{color:var(--red);margin-right:.35em}
figure svg{display:block;width:100%;height:auto;position:relative}
figcaption{font-size:15.5px;font-weight:400;line-height:1.4;color:var(--muted);margin:8px 0 0;position:relative}

svg text{font-family:var(--body);font-weight:500;font-size:14px;fill:var(--ink)}
svg .sm{font-size:12.5px;fill:var(--muted)}
svg .red{fill:var(--red)}
svg .name{font-family:var(--fellsc);font-weight:400;font-size:15px;letter-spacing:.05em}
svg .guide{fill:none;stroke:var(--hair);stroke-width:.9;stroke-dasharray:1.5 3}
svg .hollow{fill:var(--card);stroke:var(--ink);stroke-width:1}
svg .body{fill:var(--ink)}
svg .ring{fill:none;stroke:var(--ink);stroke-width:.7;stroke-dasharray:1.2 2.2}
svg .leader{fill:none;stroke:var(--hair);stroke-width:.8}
svg .leader-r{fill:none;stroke:var(--red);stroke-width:.8}
svg .ret{fill:none;stroke:var(--red);stroke-width:1.1;stroke-dasharray:4 3}
svg .ray{fill:none;stroke:var(--ink);stroke-width:.75}
svg .consent{fill:none;stroke:var(--hair);stroke-width:.8;stroke-dasharray:1.5 2.5}
svg .lens{fill:none;stroke:var(--ink);stroke-width:1.1}
svg .screen{fill:none;stroke:var(--ink);stroke-width:1.6}
svg .grid{fill:none;stroke:var(--rule);stroke-width:.7;stroke-dasharray:1 3}
svg .faint{fill:var(--hair)}
svg .star{fill:var(--ink)} svg .red-f{fill:var(--red)}
svg .cons{fill:none;stroke:var(--ink);stroke-width:.8}
svg .gapring{fill:none;stroke:var(--red);stroke-width:1;stroke-dasharray:3 3}
svg .orbit{fill:none;stroke:var(--ink);stroke-width:.75}
svg .tick{stroke:var(--hair);stroke-width:.7}
svg .track{fill:none;stroke:var(--ink);stroke-width:1.3}
svg .track-r{fill:none;stroke:var(--red);stroke-width:1.1}
svg .xmark{fill:none;stroke:var(--red);stroke-width:1.3}
svg .bx{fill:var(--card);stroke:var(--ink);stroke-width:1}
svg .bx-r{fill:var(--card);stroke:var(--red);stroke-width:1.1}
svg .lnr{fill:none;stroke:var(--red);stroke-width:1.1}

/* each plate carries its own scoped <style> and motion; see tools/plates/ */

/* ---------- lists: writing, publications, education ---------- */
.list{list-style:none;margin:0;padding:0;max-width:var(--text)}
.list li{margin:0 0 .9em}
.list .head{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.list .sub{color:var(--muted);font-size:18px;margin:.05em 0 0}
.empty{color:var(--muted)}
/* smaller things */
.things{list-style:none;margin:0;padding:0;max-width:44em}
.things li{display:grid;grid-template-columns:11em 7.5em 1fr;gap:0 1em;align-items:baseline;padding:.45em 0;border-bottom:1px dotted var(--hair)}
.things li:last-child{border-bottom:0}
.t-name{font-family:var(--fell);font-size:21px}
.t-kind{color:var(--muted);font-size:15px;font-variant:small-caps;letter-spacing:.05em}
.t-text{font-size:18.5px}

/* reading list */
.reading{list-style:none;margin:0;padding:0;max-width:var(--text)}
.reading li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .7em;padding:.4em 0;border-bottom:1px dotted var(--hair)}
.reading li:last-child{border-bottom:0}
.r-title{font-family:var(--fell);font-size:21px}
.r-author{color:var(--muted)}
.r-now{font-size:14px;letter-spacing:.06em;font-variant:small-caps;color:var(--red);border:1px solid var(--red);border-radius:2px;padding:0 .4em;line-height:1.5}

footer{color:var(--muted);font-size:17px;margin-top:4em;text-align:center}
footer p{margin:.2em 0}
.tailpiece{color:var(--red);font-size:26px;line-height:1}
.finis{font-family:var(--fell);font-size:22px;letter-spacing:.12em;color:var(--ink)}

/* ---------- writing index ---------- */
.back{display:inline-block;margin:0 0 2.2em;color:var(--muted);text-decoration:none}
.back:hover{color:var(--red)}
.writing-head{max-width:var(--text);margin:0 0 2em}
.page-title{font-family:var(--fellsc);font-weight:400;font-size:44px;letter-spacing:.03em;margin:0;display:flex;align-items:center;gap:.35em}
.page-title .vignette{width:34px;height:34px}
.page-sub{color:var(--muted);margin:.3em 0 0}
.year{max-width:var(--text);margin:0 0 1.6em;padding-top:1em;border-top:1px solid var(--rule)}
.year-num{font-family:var(--fell);font-weight:400;font-size:22px;color:var(--red);margin:0 0 .6em}
.posts{list-style:none;margin:0;padding:0}
.posts li{display:grid;grid-template-columns:5.2em 1fr;gap:0 1em;margin:0 0 1.1em}
.p-date{color:var(--muted);font-size:17px;padding-top:.15em;white-space:nowrap}
.p-title{font-family:var(--fell);font-size:23px;line-height:1.25;text-decoration-color:var(--rule)}
.p-desc{color:var(--muted);font-size:17.5px;margin:.2em 0 0}
.more{margin:.4em 0 0}
.more a{color:var(--muted)}

/* ---------- a post: one narrow column, set like a book ---------- */
.post{max-width:34em;margin:0 auto}
.post-head{text-align:center;margin:0 0 2.4em;padding-bottom:1.6em;border-bottom:1px solid var(--rule)}
.post-head h1{font-family:var(--fell);font-weight:400;font-size:46px;line-height:1.12;margin:0 0 .35em}
.post-meta{color:var(--muted);font-size:16.5px;margin:0}
.post-desc{font-family:var(--fell);font-size:21px;line-height:1.4;margin:.9em auto 0;max-width:26em}
.post-body{font-size:20px;line-height:1.65}
.post-body p{margin:0 0 1em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.post-body h2{font-family:var(--fellsc);font-weight:400;font-size:27px;letter-spacing:.03em;margin:1.8em 0 .5em}
.post-body h3{font-family:var(--fell);font-weight:400;font-size:23px;margin:1.5em 0 .4em}
.post-body a{text-decoration-color:var(--hair)}
.post-body blockquote{margin:1.4em 0;padding:0 0 0 1.2em;border-left:2px solid var(--red);color:var(--muted)}
.post-body blockquote p{text-align:left}
.post-body ul,.post-body ol{margin:0 0 1em;padding-left:1.4em}
.post-body li{margin:0 0 .35em}
.post-body hr{border:0;margin:2em 0;text-align:center}
.post-body hr::after{content:"❦";color:var(--red);font-size:20px}
.post-body code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.82em;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:.05em .3em}
.post-body pre{background:var(--card);border:1px solid var(--hair);padding:1em 1.1em;overflow-x:auto;font-size:15px;line-height:1.5;margin:1.2em 0}
.post-body pre code{background:none;border:0;padding:0;font-size:inherit}
.post-body img{max-width:100%;height:auto;display:block;margin:1.8em auto;border:1px solid var(--hair);box-shadow:0 1px 0 var(--rule)}

.post-body figure{margin:1.6em 0}
.post-body .footnotes{margin-top:2.6em;padding-top:1em;border-top:1px solid var(--rule);font-size:16.5px;color:var(--muted)}
.post-body .footnotes p{text-align:left;margin:0 0 .4em}
.post-body sup a{text-decoration:none;color:var(--red);font-size:.8em}
.post-nav{max-width:34em;margin:3em auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1.5em;padding-top:1.4em;border-top:1px solid var(--rule)}
.post-nav a{font-family:var(--fell);font-size:19px;text-decoration:none;line-height:1.3}
.post-nav a span{display:block;font-family:var(--body);font-size:14px;color:var(--muted);letter-spacing:.06em;font-variant:small-caps;margin-bottom:.15em}
.post-nav .older{text-align:right}
.tailpiece{text-align:center}

/* ---------- everything a touch smaller on desktop ---------- */
@media (min-width:1081px){body{zoom:.85}}

/* ---------- one column below desktop width ---------- */
@media (max-width:1080px){
  .pair,.projects,.cards,.card.wide{grid-template-columns:minmax(0,1fr)}
  .card,.card.wide{display:block;margin-top:1.4em}
  .card.wide{display:flex;flex-direction:column}
  .card.wide figure{order:1}
  .card.wide .card-text,.card.wide .aside{order:2}
  .card.wide figure{margin:0 0 .8em}
  .pair figure{margin-top:1em}
  .project+.project{border-top:1px solid var(--rule);padding-top:1.3em}
  .page{max-width:42em}
}
@media (max-width:560px){
  body{font-size:18.5px}
  .page{padding:2.6em 1.2em 3em}
  .theme-toggle{top:calc(2.6em - 2px);right:1.2em}
  .name{font-size:38px}
  .list .head{flex-direction:column;gap:0}
  .post-head h1{font-size:33px}
  .post-body{font-size:18px}
  .post-body p{text-align:left;hyphens:manual}
  .posts li{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav .older{text-align:left}
  .things li{grid-template-columns:1fr;gap:0}
  figure{padding:10px 10px 10px;overflow-x:auto}
  figure svg{min-width:500px}
}