/* Steven Purtzel, purtzel.org */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400;
  src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700;
  src: url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #ffffff;
  --ink: #1d1d1d;
  --ink-2: #555555;
  --ink-3: #6e6e6e;
  --ink-nav: #444444;
  --ink-label: #6a6a6a;
  --blue: #1a4480;
  --underline: rgba(26, 68, 128, 0.28);
  --hair: #e6e6e3;
  --tag-ink: #33526e;
  --tag-bg: #eef1f5;
  --award-ink: #6b5a1e;
  --award-bg: #f3efe2;
  --wash: #f7f7f5;
  --serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1b1b;
  --ink: #e6e4e1;
  --ink-2: #b3b1ae;
  --ink-3: #969696;
  --ink-nav: #b5b3b0;
  --ink-label: #9c9a97;
  --blue: #92b0dd;
  --underline: rgba(146, 176, 221, 0.35);
  --hair: #333333;
  --tag-ink: #aac2e2;
  --tag-bg: #262f3b;
  --award-ink: #d8c98e;
  --award-bg: #33301f;
  --wash: #242220;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1b1b;
    --ink: #e6e4e1;
    --ink-2: #b3b1ae;
    --ink-3: #969696;
    --ink-nav: #b5b3b0;
    --ink-label: #9c9a97;
    --blue: #92b0dd;
    --underline: rgba(146, 176, 221, 0.35);
    --hair: #333333;
    --tag-ink: #aac2e2;
    --tag-bg: #262f3b;
    --award-ink: #d8c98e;
    --award-bg: #33301f;
    --wash: #242220;
  }
}

* { box-sizing: border-box; }

/* scale the whole layout up on large displays; line length in characters stays constant */
@media (min-width: 1500px) { html { font-size: 17px; } }
@media (min-width: 1900px) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0rem;
  line-height: 1.6;
}

.wrap { max-width: 44.5rem; margin: 0 auto; padding: 0 1.75rem; }

a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--underline); }
a:hover { border-bottom-color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg); padding: 0.5rem 0.9rem; border-bottom: 0;
}
.skip:focus { left: 0; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--hair);
}
[id] { scroll-margin-top: 4.5rem; }
.site-header .wrap {
  display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 0.25rem 1rem; padding-top: 1.05rem; padding-bottom: 1.05rem;
}
.brand { font-weight: 700; color: var(--ink); border-bottom: 0; margin-right: auto; }
.themebtn {
  display: inline-flex; align-items: center; align-self: center;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--hair); border-radius: 3px;
  padding: 0.3rem 0.45rem; cursor: pointer;
}
.themebtn svg { display: block; }
.themebtn:hover { color: var(--ink); border-color: var(--ink-3); }
.nav { display: flex; flex-wrap: wrap; gap: 0.95rem; font-size: 0.9rem; }
.nav a { color: var(--ink-nav); border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--underline); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* hero */
.hero { display: flex; gap: 1.7rem; align-items: flex-start; margin: 2.6rem 0 0.4rem; }
.hero > div { flex: 1; }
h1 { font-size: 1.9rem; font-weight: 700; margin: 0 0 0.4rem; line-height: 1.25; }
.role { font-style: italic; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.15rem; }
.portrait { width: 118px; height: 118px; object-fit: cover; border-radius: 3px; flex-shrink: 0; margin-top: 0.55rem; }
.portrait-link { display: block; border-bottom: 0; flex-shrink: 0; }

/* larger photo on click, no JavaScript */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.78); border-bottom: 0;
  align-items: center; justify-content: center; padding: 1.5rem;
}
.lightbox:target { display: flex; }
.lightbox img { max-width: min(92vw, 36rem); max-height: 88vh; width: auto; height: auto; border-radius: 4px; }
p { margin: 0 0 0.85rem; }

/* grouped link row */
.links-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0;
  font-size: 0.9rem; border-top: 1px solid var(--hair);
  padding-top: 0.75rem; margin-top: 0.6rem;
}
.links-row a { border-bottom-color: transparent; }
.links-row a:hover { border-bottom-color: var(--underline); }
.links-row .sep { color: var(--ink-3); margin: 0 0.55rem; }

/* section labels */
h2.label {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-label);
  margin: 2.5rem 0 0.95rem;
}
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.6rem; }

/* margin-date lists (news, teaching, theses) */
.datelist { list-style: none; margin: 0; padding: 0; }
.datelist > li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.95rem;
  margin-bottom: 0.6rem;
}
.datelist .dt {
  font-family: var(--sans); font-size: 0.72rem; color: var(--ink-3);
  padding-top: 0.32rem; letter-spacing: 0.02em; white-space: nowrap;
}
.datelist p { margin: 0; }
.item-name { font-weight: 600; }
.note { font-size: 0.86rem; color: var(--ink-2); margin: 0.15rem 0 0; }
.datelist p.note { margin-top: 0.15rem; }

/* publications */
h2.year { font-size: 1.15rem; font-weight: 700; margin: 2.1rem 0 0.9rem; }
.pub { margin: 0 0 1.4rem; }
.pub:target { border-left: 2px solid var(--blue); padding-left: 0.9rem; margin-left: -0.9rem; }
.pub-title { font-size: 1.02rem; font-weight: 700; line-height: 1.4; margin: 0 0 0.15rem; }
.pub-authors { font-size: 0.88rem; color: var(--ink-2); margin: 0 0 0.35rem; }
.pub-authors b { color: var(--ink); font-weight: 600; }
.pub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.84rem; margin: 0; }
.tag {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--tag-ink); background: var(--tag-bg);
  border-radius: 3px; padding: 0.16rem 0.45rem; white-space: nowrap;
}
.tag-award { color: var(--award-ink); background: var(--award-bg); }
.plinks { color: var(--ink-3); }
.plinks a { border-bottom-color: transparent; }
.plinks a:hover { border-bottom-color: var(--underline); }
.bibtex, .abstract { margin-top: 0.4rem; font-size: 0.84rem; }
.bibtex summary, .abstract summary { cursor: pointer; color: var(--blue); width: max-content; }
.abstract > p {
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-2);
  border-left: 2px solid var(--hair); padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 0.45rem 0 0;
}
.bibtex pre {
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.55;
  background: var(--wash); border-left: 2px solid var(--hair);
  padding: 0.7rem 0.9rem; margin: 0.45rem 0 0; overflow-x: auto;
}

/* venue overview */
.venues { width: 100%; border-collapse: collapse; margin: 0 0 0.5rem; font-size: 0.92rem; }
.venues th {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 0 0.9rem 0.4rem 0; border-bottom: 1px solid var(--hair);
}
.venues td { padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.venues td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.venues td:last-child, .venues th:last-child { text-align: right; padding-right: 0; color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* service list */
.servicelist { list-style: none; margin: 0; padding: 0; }
.servicelist li { margin-bottom: 0.45rem; }

/* footer */
.foot { border-top: 1px solid var(--hair); margin-top: 3.2rem; }
.foot .wrap { padding-top: 1rem; padding-bottom: 1.9rem; font-size: 0.8rem; color: var(--ink-3); }
.foot a { color: var(--ink-2); border-bottom-color: transparent; }
.foot a:hover { border-bottom-color: var(--underline); }

/* small screens */
@media (max-width: 40rem) {
  .hero { flex-direction: column-reverse; gap: 1.1rem; }
  .portrait { margin-top: 0; }
  .datelist > li { grid-template-columns: 1fr; gap: 0.05rem; margin-bottom: 0.8rem; }
  .datelist .dt { padding-top: 0; }
}

/* print */
@media print {
  .site-header .nav, .skip, .foot, .abstract, .bibtex, .lightbox, .themebtn { display: none; }
  body { background: #ffffff; color: #000000; }
  a { color: #000000; border-bottom: 0; }
}