:root{
  --paper:#F4F5F6; --panel:#FFFFFF; --photo-ground:#E4E5E6;
  --ink:#14181C; --ink-2:#3D454C; --ink-3:#6E7880;
  --rule:#D7DADD; --rule-soft:#E6E8EA; --glyph:#8D959C;
  --accent:#0F4C63; --accent-ink:#0F4C63; --accent-wash:#D6E6ED;
  --hazard:#A8431F; --hazard-wash:#EBD9D1;
  --shadow:0 1px 2px rgba(20,24,28,.05), 0 8px 24px -12px rgba(20,24,28,.18);
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1317; --panel:#161B20; --photo-ground:#1B2126;
    --ink:#E9ECEF; --ink-2:#B6BEC5; --ink-3:#7E8790;
    --rule:#2A3138; --rule-soft:#20262C; --glyph:#727C85; --glyph:#727C85;
    --accent:#7BC3DC; --accent-ink:#9AD3E7; --accent-wash:#1B3F4D;
    --hazard:#E28356; --hazard-wash:#3A251C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1317; --panel:#161B20; --photo-ground:#1B2126;
  --ink:#E9ECEF; --ink-2:#B6BEC5; --ink-3:#7E8790;
  --rule:#2A3138; --rule-soft:#20262C;
  --accent:#7BC3DC; --accent-ink:#9AD3E7; --accent-wash:#1B3F4D;
  --hazard:#E28356; --hazard-wash:#3A251C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img{max-width:100%; display:block}
h1,h2,h3{text-wrap:balance; margin:0}

/* ---------- shell ---------- */
.shell{
  max-width:1250px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px;
  align-items:start;
}
@media (max-width:900px){
  .shell{display:flex; flex-direction:column; gap:0; padding:0 22px}
  .shell > .rail{display:contents}
  .wordmark{order:1; padding-top:26px}
  nav{order:2}
  main{order:3}
  .rail-meta{order:4; margin-top:24px; padding-bottom:56px}
}

/* ---------- left rail ---------- */
.rail{position:sticky; top:0; padding:52px 0 40px; display:flex; flex-direction:column; gap:26px}

.wordmark{font-family:var(--serif); font-size:25px; line-height:1.15; letter-spacing:-.015em; font-weight:600}
.wordmark span{display:block; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-top:8px}

nav{display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--rule); padding-top:14px}
@media (max-width:900px){ nav{flex-direction:row; flex-wrap:wrap; gap:4px 20px; margin-top:16px; padding-top:12px} }
.navlink{
  appearance:none; background:none; border:0; padding:5px 0; margin:0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:14.5px; letter-spacing:.005em; color:var(--ink-2);
  display:flex; align-items:baseline; gap:9px;
}
.navlink::before{
  content:""; width:14px; height:1px; background:var(--rule); flex:0 0 14px; translate:0 -4px; transition:.18s;
}
@media (max-width:900px){ .navlink::before{display:none} }
.navlink:hover{color:var(--ink)}
.navlink:hover::before{background:var(--ink-3); width:22px; flex-basis:22px}
.navlink[aria-current="page"]{color:var(--ink); font-weight:600}
.navlink[aria-current="page"]::before{background:var(--hazard); width:22px; flex-basis:22px; height:2px}

.rail-meta{font-family:var(--sans); font-size:13.5px; line-height:1.75; color:var(--ink-3);
  border-top:1px solid var(--rule); padding-top:14px; display:flex; flex-direction:column; gap:3px}
.rail-meta a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule-soft); width:fit-content}
.rail-meta a:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}
.tbd{border-bottom:1px dashed var(--hazard) !important}

/* ---------- content ---------- */
main{padding:52px 0 96px; min-width:0}
@media (max-width:900px){ main{padding:30px 0 34px} }
.view[hidden]{display:none}
.eyebrow{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:52px; align-items:start}
@media (max-width:760px){ .hero{grid-template-columns:1fr; gap:28px} }
.lede{font-size:clamp(1.32rem,2.2vw,1.62rem); line-height:1.48; letter-spacing:-.012em; margin:14px 0 0}
.lede em{font-style:normal; background:linear-gradient(var(--accent-wash),var(--accent-wash)) 0 94%/100% .30em no-repeat;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}
.bio{max-width:60ch; color:var(--ink-2); margin:26px 0 0}
.bio p{margin:0 0 14px}
.portrait{
  background:linear-gradient(160deg,var(--photo-ground),color-mix(in srgb,var(--photo-ground) 70%,var(--paper)));
  border:1px solid var(--rule-soft); overflow:hidden; box-shadow:var(--shadow);
}
.portrait img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:74% 20%}
@media (max-width:760px){ .portrait{max-width:290px} }

/* tail figure */
.tail{margin:52px 0 0; border-top:1px solid var(--rule); padding-top:22px}
.tail figure{margin:0}
.tail svg{width:100%; height:auto; display:block}
.tail .axis{stroke:var(--rule); stroke-width:1}
.tail .curve{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round}
.tail .fill{fill:url(#tg)}
.tail .cut{stroke:var(--hazard); stroke-width:1; stroke-dasharray:3 4}
.tail .band{fill:var(--hazard); opacity:.04}
.tail .g0{stop-color:var(--hazard); stop-opacity:.55}
.tail .g1{stop-color:var(--hazard); stop-opacity:.12}
.tail .lbl{font-family:var(--mono); font-size:11.5px; fill:var(--ink-3)}
.tail .lbl-cut{font-family:var(--mono); font-size:11.5px; fill:var(--hazard)}
.tail figcaption{font-family:var(--sans); font-size:12.5px; color:var(--ink-3); margin-top:10px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.tail figcaption b{color:var(--hazard); font-weight:600}

/* section headings */
.sec-head{display:flex; align-items:baseline; gap:14px; margin:0 0 4px}
.sec-head + .group{margin-top:38px}
.sec-head h1{font-size:clamp(2rem,4.2vw,2.7rem); letter-spacing:-.022em; font-weight:600}
.sec-sub{color:var(--ink-3); font-family:var(--sans); font-size:14px; max-width:56ch; margin:8px 0 40px}

/* figures inside a paper row */
.body-row{display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap}
.body-text{flex:1 1 320px; min-width:0}
.fig{flex:0 0 212px; margin:0; order:2}
.fig img{width:100%; height:190px; object-fit:cover; object-position:center;
  display:block; border:1px solid var(--rule); border-radius:2px}
.fig figcaption{font-family:var(--sans); font-size:11.5px; line-height:1.45; color:var(--ink-3); margin-top:7px}
@media (max-width:640px){ .fig{flex:1 1 100%; order:3; max-width:340px} }

/* paper list */
.group{margin:0 0 46px}
.group > .eyebrow{display:block; font-size:15px; letter-spacing:.09em; color:var(--ink-3);
  padding-bottom:12px; border-bottom:1px solid var(--ink); margin-bottom:0}
.paper{
  display:grid; grid-template-columns:140px minmax(0,1fr); gap:26px;
  padding:22px 0; border-bottom:1px solid var(--rule-soft);
}
@media (max-width:640px){ .paper{grid-template-columns:1fr; gap:9px} }
.stamp{font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--ink-3); font-variant-numeric:tabular-nums}
.stamp .yr{display:block; color:var(--ink); font-size:15px; letter-spacing:-.02em}
.status{display:block; position:relative; padding-left:12px; margin-top:6px}
.status::before{content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--hazard)}
.paper h3{font-size:1.22rem; line-height:1.34; letter-spacing:-.012em; font-weight:600;
  text-wrap:pretty}   /* not balance: it narrows long titles and leaves dead space */
.paper h3 a{color:inherit; text-decoration:none; background-image:linear-gradient(var(--rule),var(--rule));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px}
.paper h3 a:hover{background-image:linear-gradient(var(--accent),var(--accent))}
.with{font-family:var(--sans); font-size:13.5px; color:var(--ink-3); margin:5px 0 0}
.links{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; list-style:none; padding:0}
.links a{
  font-family:var(--sans); font-size:12.5px; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--rule); padding:3px 10px 4px; border-radius:2px; display:inline-block;
}
.links a:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash)}
details{margin:14px 0 0}
summary{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); cursor:pointer; list-style:none; width:fit-content;
}
summary::-webkit-details-marker{display:none}
summary::after{content:" +"; font-family:var(--mono)}
details[open] summary::after{content:" \2013"}
summary:hover{color:var(--ink)}
.abstract{font-size:15.5px; line-height:1.68; color:var(--ink-2); margin:12px 0 4px;
  max-width:66ch; border-left:2px solid var(--accent-wash); padding-left:18px}

/* book */
.book{display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start}
@media (max-width:700px){ .book{grid-template-columns:1fr; gap:26px} }
.book img{width:100%; height:auto; border:1px solid var(--rule); box-shadow:var(--shadow)}
.blurbs{display:flex; flex-direction:column; gap:26px; margin:22px 0 0; max-width:62ch}
.blurb p{margin:0; font-size:16.5px; line-height:1.62; color:var(--ink-2)}
.blurb p::before{content:"\201C"; color:var(--hazard); font-size:1.4em; line-height:0; vertical-align:-.08em; margin-right:2px}
.blurb footer{font-family:var(--sans); font-size:13px; color:var(--ink-3); margin-top:7px}
.blurb footer b{color:var(--ink-2); font-weight:600}

/* teaching */
.course{display:grid; grid-template-columns:104px minmax(0,1fr); gap:26px; padding:20px 0; border-bottom:1px solid var(--rule-soft)}
@media (max-width:640px){ .course{grid-template-columns:1fr; gap:8px} }
.course h3{font-size:1.12rem; font-weight:600}
.course p{margin:5px 0 0; color:var(--ink-3); font-family:var(--sans); font-size:13.5px}

/* footer note */
.note{margin:64px 0 0; border-top:1px solid var(--rule); padding-top:18px;
  font-family:var(--sans); font-size:12.5px; line-height:1.7; color:var(--ink-3); max-width:70ch}
.note b{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* --- anchors used as wordmark / nav --- */
.wordmark{color:var(--ink); text-decoration:none; display:block}
.wordmark:hover span{color:var(--ink-2)}
a.navlink{text-decoration:none}

/* --- line glyphs --- */
.glyph{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.16em;
  color:var(--glyph); margin-right:.3em}


/* --- textbook page metadata --- */
.bookmeta{margin:20px 0 0; display:grid; gap:11px}
.bookmeta > div{display:grid; gap:2px}
.bookmeta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3)}
.bookmeta dd{margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.fineprint{font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-3); margin:12px 0 0}

/* --- book cover: click to enlarge --- */
.coverbtn{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.coverbtn img{width:100%; height:auto; border:1px solid var(--rule); box-shadow:var(--shadow);
  transition:box-shadow .18s}
.coverbtn:hover img{box-shadow:0 2px 6px rgba(20,24,28,.10), 0 14px 34px -14px rgba(20,24,28,.34)}
.lightbox{position:fixed; inset:0; z-index:50; cursor:zoom-out;
  background:color-mix(in srgb, var(--paper) 92%, #000);
  display:flex; align-items:center; justify-content:center; padding:4vmin}
.lightbox img{max-width:100%; max-height:92vh; width:auto; height:auto;
  box-shadow:0 10px 60px -20px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){ .coverbtn img{transition:none} }