/* Self-hosted fonts, latin subset (same unicode-range Google Fonts serves). */
@font-face{
  font-family:"Spectral";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/spectral-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Spectral";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/spectral-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Spectral";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/spectral-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* IBM Plex Sans is one variable file with the weight axis clamped to 400-500. */
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("/fonts/ibm-plex-sans-latin-400-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme: light;
  --paper:#EEF0F3;
  --ink:#13233C;
  --ink-soft:#4A5870;
  --rule:#C7CDD7;
  --accent:#14675E;
  --measure:63ch;
  --h1-size:clamp(2.7rem,8.4vw,4.9rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 clamp(1.25rem,5vw,3.5rem);
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* Masthead */
header.mast{padding:clamp(4rem,11vw,7.5rem) 0 2rem}
h1{
  font-family:Spectral,Georgia,serif;
  font-weight:600;
  font-size:var(--h1-size);
  line-height:1.02;
  letter-spacing:-0.022em;
  margin:0;
}
.standfirst{
  font-family:Spectral,Georgia,serif;
  font-size:clamp(1.12rem,2.4vw,1.4rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:46ch;
  margin:1.15rem 0 0;
}
.stamp{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.6rem;
  margin-top:0;
  padding-top:1rem;
  border-top:2px solid var(--ink);
  font-size:.9rem;
  color:var(--ink-soft);
}
.stamp a{border-bottom-color:var(--ink-soft)}

/* Masthead grid: name and standfirst left, portrait right. The portrait is a
   column bound by two edges: its top sits on the cap height of "Conrad"
   (0.148em of the h1 size = (1.02 - (1.059 + 0.463)) / 2 + (1.059 - 0.660),
   from Spectral's metrics) and its bottom lands on the 2px rule above the
   stamp. The 2.4rem that used to be the stamp's margin-top is the text
   column's padding-bottom, so the grid row ends exactly at the rule. The img is
   absolutely positioned inside its column so the text sets the row height and
   the photo follows it, never the other way round. */
.mast-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(1.5rem,4vw,3rem);
  align-items:stretch;
}
.mast-text{padding-bottom:2.4rem}
.portrait{display:block;position:relative;width:220px;margin:calc(var(--h1-size) * .148) 0 0}
.portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* Photo band: sits under the section rule, on the column edges, 1.6rem clear
   above (the h2's margin) and below */
.plate{display:block;margin:0 0 1.6rem}
.plate img{display:block;width:100%;height:auto}

/* Intro */
.intro{padding:3.2rem 0 1rem;max-width:var(--measure)}
.intro p{margin:0 0 1.1rem}
.intro p:last-child{margin-bottom:0}

/* Sections */
section{padding:3.2rem 0 0}
h2{
  font-family:Spectral,Georgia,serif;
  font-weight:500;
  font-size:1.5rem;
  letter-spacing:-0.01em;
  margin:0 0 1.6rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--rule);
}

/* Docket entries */
.entry{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:0 1.75rem;
  padding:1.45rem 0;
  border-bottom:1px solid var(--rule);
}
.entry:last-child{border-bottom:none}
.when{
  font-size:.88rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  padding-top:.28rem;
}
.what h3{
  font-family:Spectral,Georgia,serif;
  font-weight:600;
  font-size:1.17rem;
  line-height:1.35;
  margin:0 0 .12rem;
}
.role{font-size:.93rem;color:var(--accent);margin:0 0 .5rem}
.what p.note{margin:0;max-width:58ch;color:var(--ink-soft)}
.what p.note strong{color:var(--ink);font-weight:500}

/* Research list */
.paper{
  padding:1.25rem 0;
  border-bottom:1px solid var(--rule);
  max-width:var(--measure);
}
.paper:last-child{border-bottom:none}
.paper h3{
  font-family:Spectral,Georgia,serif;
  font-weight:600;
  font-size:1.1rem;
  line-height:1.4;
  margin:0 0 .3rem;
}
.paper p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* Ahead + personal */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}

/* Contact */
footer{
  margin-top:4rem;
  padding:2.2rem 0 4rem;
  border-top:2px solid var(--ink);
}
.contact{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  font-size:.95rem;
}
.colophon{
  margin-top:1.6rem;
  font-size:.83rem;
  color:var(--ink-soft);
}

@media (max-width:640px){
  body{font-size:16px}
  .mast-grid{grid-template-columns:1fr;row-gap:1.5rem}
  .portrait{order:-1;position:static;width:160px;margin:0}
  .portrait img{position:static;height:auto}
  .entry{grid-template-columns:1fr;gap:.2rem}
  .when{padding-top:0;margin-bottom:.35rem}
}