/* =====================================================================
   smizera.com

   The printed CV, on the web. Libertinus throughout, section headings in
   letterspaced small caps over a hairline rule, every entry hanging off a
   left rail carrying its date or its number, maroon for anything that is
   a reference or a link. Old-style figures in the rail, as on the page.

   No JavaScript, no third-party requests. Generated by build/render_site.py
   from the same data that sets the PDF.
   ===================================================================== */

@font-face {
  font-family: Libertinus;
  src: url(/assets/fonts/libertinus-regular.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Libertinus;
  src: url(/assets/fonts/libertinus-italic.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Libertinus;
  src: url(/assets/fonts/libertinus-bold.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper:  #fdfcfa;
  --ink:    #1a1a1a;
  --grey:   #5a5a5a;
  --accent: #7b1e24;
  --rule:   rgba(123, 30, 36, .28);
  --hair:   rgba(26, 26, 26, .12);

  --rail: 6rem;           /* the CV's 1.7cm date column, widened just enough
                             that the longest role label in the group list,
                             "Undergraduates", sits in it without overflowing */
  --gap:  1.15rem;        /* its 8pt gutter */
  --measure: 54rem;
  --prose: 40rem;

  --serif: Libertinus, 'Linux Libertine O', Palatino, 'Palatino Linotype',
           'Book Antiqua', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #17161a;
    --ink:    #e9e5dd;
    --grey:   #9b958c;
    --accent: #d2969b;
    --rule:   rgba(210, 150, 155, .30);
    --hair:   rgba(233, 229, 221, .14);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* ------------------------------------------------------------ links */

a { color: var(--accent); text-decoration-color: var(--rule);
    text-underline-offset: .16em; text-decoration-thickness: .05em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, .skip:focus {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--paper);
  padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- masthead */

.masthead { padding: 3.25rem 0 0; }

.name {
  display: block;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  font-variant-caps: small-caps;
  font-variant-numeric: normal;
  letter-spacing: .05em;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}
.name:hover { color: var(--accent); }

/* Same ink as the name: the affiliation is part of the same statement, and
   the contact line below it stays grey to keep the hierarchy. */
.who { color: var(--ink); margin-top: .35rem; }

.masthead nav {
  margin-top: 1.15rem;
  padding-top: .7rem;
  border-top: 1.5px solid var(--accent);
  display: flex; flex-wrap: wrap; gap: 0 1.6rem;
  font-variant-caps: small-caps;
  letter-spacing: .06em;
  font-size: 1.0625rem;
}
/* Full ink rather than grey: these are the primary navigation, and in dark
   mode ink is the near-white that makes them read as white. */
.masthead nav a { text-decoration: none; color: var(--ink); }
.masthead nav a:hover { color: var(--accent); }
.masthead nav a.here { color: var(--accent); }

/* ------------------------------------------------------ opening block */

/* main.wrap for the same reason as footer.wrap below: .wrap sets the
   padding shorthand and outranks a bare element selector. */
main.wrap { padding-bottom: 3rem; }

/* Sits in the masthead, under the name and affiliation and above the rule,
   so everything identifying him is in one block. */
.contact {
  margin-top: .5rem;
  display: flex; flex-wrap: wrap; gap: .2rem 1.6rem;
  color: var(--grey); font-size: .9375rem;
}
.contact .reach { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }

/* --------------------------------------------------------- sections */

h1 { margin: 0; font-weight: 400; font-size: inherit; line-height: inherit; }

.sect {
  margin: 2.9rem 0 0;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 400;
  font-variant-caps: small-caps;
  font-variant-numeric: normal;
  letter-spacing: .1em;
}

h3.group, h4.group {
  margin: 1.5rem 0 .35rem;
  font-size: .9375rem; font-weight: 400; font-style: italic;
  color: var(--grey);
}

/* Only the main headings carry a rule above them, so the five divisions of
   the page are visibly separated while the sections inside them are not. */
.chapter-title {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: 1.6rem; font-weight: 400;
  font-variant-caps: small-caps; letter-spacing: .05em;
}

.note { color: var(--grey); font-size: .9375rem; margin: .9rem 0 1.2rem;
        max-width: var(--prose); }

/* ------------------------------------------------------------ entries */

.entry {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--gap);
  margin-top: .5rem;
}
section > .entry:first-of-type { margin-top: .85rem; }

.rail {
  text-align: right;
  color: var(--grey);
  font-size: .875rem;
  line-height: 1.5;
  padding-top: .2em;
  white-space: nowrap;
}

.detail, .meta, .host { color: var(--grey); font-size: .9375rem; }
.detail { margin-top: .05rem; }
.muted  { color: var(--grey); }
.sep    { color: var(--grey); padding: 0 .1em; }

/* A publication is two columns, not a wrapping row. The identifier owns the
   right-hand one; the title, the journal reference and the author list are
   all confined to the left, so none of them runs underneath an identifier and
   a long title no longer pushes it onto a line of its own. The identifiers
   then form a clean rail down the right, answering the date rail on the left.
   minmax(0, 1fr) lets the first column shrink below the width of its longest
   word, which a bare 1fr will not do. */
.pub .body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.6rem;
  align-items: baseline;
}
.pub .title, .pub .meta, .pub .detail { grid-column: 1; }
.pub .ident { grid-column: 2; grid-row: 1; }

.ident {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.pub .ref a, .meta .ref a { color: var(--accent); }
.pub .ref { color: var(--accent); }
.authors, .authors span { color: var(--grey); }
/* the eye should land on his own name without the list shouting */
.authors span.me { color: var(--ink); }

.star { color: var(--accent); }

/* The group rail carries a role rather than a date, and "Mentored PhD
   students" needs two lines to sit there. */
.group-list .rail { white-space: normal; }
.group-list .entry { margin-top: .75rem; }

.seminar .body { color: inherit; }
.code { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--ink); }

/* ---------------------------------------------------------- opening */

/* The bio runs the full column, the same measure as the entries below it,
   rather than sitting in a narrower text block of its own. */
.prose { margin-top: 1.6rem; }
.prose p { margin: 0 0 .95rem; }
.prose p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- footer */

/* footer.wrap, not footer: the element carries the wrap class, whose
   `padding: 0 1.5rem` is the more specific selector and would otherwise
   flatten the bottom padding to nothing. */
footer.wrap {
  /* the deep tail is deliberate: the page ends on quiet rather than
     stopping dead under the last line */
  margin-top: 3rem;
  padding: 1.4rem 1.5rem 9rem;
  border-top: 1px solid var(--hair);
  color: var(--grey); font-size: .875rem;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 2rem;
}

/* -------------------------------------------------------- responsive */

@media (max-width: 46rem) {
  :root { --rail: 4.25rem; --gap: .85rem; }
  /* Below this the rail is too narrow for a word like "Undergraduates", so
     the group list stacks its role above the names rather than squeezing. */
  .group-list .entry { grid-template-columns: 1fr; }
  .group-list .rail { text-align: left; padding-top: 0; color: var(--grey); }
}

@media (max-width: 34rem) {
  .entry { grid-template-columns: 1fr; }
  .rail { text-align: left; padding-top: 0; font-size: .8125rem; }
  /* On a phone there is no room for two columns: the identifier sits under
     the title rather than squeezing it into a few words a line. */
  .pub .body { grid-template-columns: 1fr; }
  .pub .ident { grid-column: 1; grid-row: auto; }
  .masthead { padding-top: 2.25rem; }
}

/* ----------------------------------------------------------- motion */

/* There is deliberately no entrance animation. A fade-in has to start the
   page at zero opacity, so anything that interrupts it leaves a blank page,
   and a document people come to read should paint at once. Motion here is
   confined to the underline under a link on hover. */

/* ------------------------------------------------------------ print */

@media print {
  :root { --paper: #fff; --ink: #000; --grey: #444; --accent: #000; }
  .masthead nav, .skip, footer { display: none; }
  a { text-decoration: none; }
  .entry { break-inside: avoid; }
  body { font-size: 10pt; }
}