/* =====================================================================
   Sebastian Dyrda - site styles
   Identity kept from the 2014 site: navy headings, red accents, a white
   panel on a light grey field. Layout, type and spacing modernised.
   ===================================================================== */

:root {
  --navy:       #1e3765;
  --navy-soft:  #33517f;
  --red:        #c52424;
  --red-dark:   #9d1c1c;
  --ink:        #3f4450;
  --ink-soft:   #6f7480;
  --rule:       #e2e5ea;
  --field:      #dbdbdb;
  --panel:      #ffffff;
  --measure:    68rem;
  --pad:        clamp(1.25rem, 4vw, 3.75rem);
}

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

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

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

a { color: var(--ink-soft); text-decoration: none; }
a:hover { color: var(--red); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------- page shell */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  background: var(--panel);
  min-height: 100vh;
  padding: 0 var(--pad);
  box-shadow: 0 0 40px rgba(0, 0, 0, .06);
}

main { padding-bottom: 5rem; }

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.25rem 0 1.5rem;
}

/* The wordmark is live text, not the old logo_new.gif bitmap, so it stays
   sharp at any size. Proportions are taken from that bitmap: cap height 36px
   against a 29x79px bar, i.e. bar .58em wide and 1.55em tall, set .62em clear
   of the letters. Everything below is expressed in em of --wordmark-size so
   one number scales the whole lockup. */

.masthead .wordmark {
  /* The whole lockup measures ~10.15x its font-size, so the ceiling is set by
     what is left of the panel once the U of T mark and the 2rem gap are paid
     for. Each breakpoint below re-fits it, because the mark resizes too. */
  --wordmark-size: clamp(2rem, 6.2vw, 3.5rem);
  display: flex;
  align-items: center;
  gap: .62em;
  font-size: var(--wordmark-size);
  line-height: 1;
}

.masthead .wordmark:hover { text-decoration: none; }

.wordmark-bar {
  flex: none;
  width: .58em;
  height: 1.55em;
  background: var(--red);
}

.wordmark-name {
  /* Lead with the system faces that ship a true Light: Roboto Light is not
     installed on most machines, so naming Roboto first would silently give
     everyone regular-weight letters. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "Roboto", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #4a505c;
}

.masthead .affiliation img { width: clamp(140px, 23vw, 215px); }

/* ---------------------------------------------------------------- nav */

/* The nav stays pinned once the masthead scrolls away, so every page is one
   click away from anywhere in a long publication list. It sits inside the
   panel's side padding, so the background is bled back out to the panel edges
   with equal negative margin and positive padding - otherwise content would
   scroll through the gutters either side of it. */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  margin: 0 calc(-1 * var(--pad)) 2.5rem;
  padding: .5rem var(--pad);
}

.sitenav a {
  display: block;
  padding: .5rem 1.15rem;
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}

.sitenav a:hover { background: #f1f2f4; color: var(--navy); text-decoration: none; }

.sitenav a.active {
  background: var(--navy);
  color: #fff;
}

/* ------------------------------------------------------------ headings */

h1, h2, h3 {
  color: var(--navy);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 .75rem;
}

h1 { font-size: 1.5rem; }

.section-head {
  display: inline-block;
  font-size: 1.3rem;
  color: var(--red);
  border-bottom: 3px solid var(--red);
  padding: 0 2.5rem .3rem 0;
  margin: 2.75rem 0 1.35rem;
}

.section-head:first-of-type { margin-top: .5rem; }

/* Research labels itself twice over: the nav marks the page and a red section
   head names the list directly below. Hide the page title from sight but keep
   it in the document - it is the h1 the section heads nest under, and the
   heading search results use. Only Research opts in. Discussions and CV have
   no section head to stand in for a title, so theirs stay visible. */

.page-title-hidden h1.title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------- home page */

/* Top block: portrait beside the identity column (design 2a). The two-column
   rule is behind :has(.portrait) so the page still reads correctly before a
   photo exists - without one the text simply runs full width rather than
   leaving a 240px hole. */

.home-top { display: grid; gap: 2.75rem; align-items: start; }
.home-top:has(.portrait) { grid-template-columns: 240px 1fr; }

.home-top .portrait {
  width: 240px;
  height: 300px;
  object-fit: cover;
  border-radius: 4px;
}

.home-intro { display: flex; flex-direction: column; gap: 1.5rem; }

/* The flex gap owns the spacing here, so the standalone margins would double up. */
.home-h1,
.home-intro .lead { margin-bottom: 0; }
.home-intro .factgrid { gap: 1.5rem 3rem; }
.home-intro .factblock { margin-bottom: 0; }

/* ---- featured card */

.featured-card {
  border: 1px solid var(--rule);
  background: #fafbfc;
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* Pandoc wraps the generated card's contents in a single <p>, which would
   put title, byline and venue on one line. Make that paragraph the column. */
.featured-card p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.featured-venue { font-size: .92rem; }

.featured-title {
  color: var(--navy);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.35;
}
.featured-title:hover { color: var(--red); }

.featured-authors { font-size: .95rem; }

.featured-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
/* Pills sit on the card's tinted background, so they invert to white. */
.featured-links .pub-link { background: #fff; }

/* ---- news and upcoming talks */

.newsgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.5rem;
  margin-top: 2.5rem;
}

.news-label {
  display: block;
  color: var(--navy);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .5rem;
  margin-bottom: .9rem;
}

.news-row {
  display: flex;
  gap: .9rem;
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: .75rem;
}

.news-row p { margin: 0; }
.news-date { flex: none; width: 4.4rem; color: var(--red); }

.intro { max-width: 52rem; }

.intro h1,
.home-h1 {
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-left: .9rem;
  border-left: 5px solid var(--red);
}

.lead {
  font-size: 1.08rem;
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 44rem;
}

.factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem 3rem;
}

.factblock { margin-bottom: 1.6rem; }
.factblock .label {
  display: block;
  color: var(--navy);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

@media (max-width: 46rem) {
  .factgrid { gap: 0 ; }
}

/* ------------------------------------------------- publication lists */

.pub-list {
  list-style: decimal outside;
  margin: 0 0 1.5rem;
  padding-left: 2.2em;
}

.pub-list > li {
  margin-bottom: 1.35rem;
  padding-left: .2rem;
}

.pub-list > li::marker {
  color: var(--red);
  font-weight: 500;
}

.pub-list > li > span { display: block; }

.pub-title {
  color: var(--navy);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
}

.pub-authors, .pub-venue, .pub-note { font-size: .95rem; }
.pub-venue .venue, .venue { color: var(--red); font-style: italic; }
.pub-note { color: var(--ink-soft); }

.pub-links {
  margin-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.pub-link {
  display: inline-block;
  padding: .22rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fafbfc;
  color: var(--ink-soft);
  font: inherit;
  font-size: .82rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pub-link:hover {
  border-color: var(--red);
  background: #fff;
  color: var(--red);
  text-decoration: none;
}

button.pub-link { border-color: #d6c2c2; color: var(--red-dark); }

/* --------------------------------------------------- BibTeX modal */

.bib-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.bib-overlay.is-open { opacity: 1; visibility: visible; }

.bib-card {
  width: min(48rem, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
  transform: translateY(14px) scale(.94);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.35), opacity .2s ease;
}

.bib-overlay.is-open .bib-card { transform: none; opacity: 1; }

.bib-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.15rem;
  background: var(--navy);
  color: #fff;
}

.bib-head h4 { margin: 0; font-size: .95rem; font-weight: 500; color: #fff; }

.bib-close {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .75);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 .25rem;
  cursor: pointer;
}
.bib-close:hover { color: #fff; }

.bib-code {
  margin: 0;
  padding: 1.15rem 1.25rem;
  overflow: auto;
  flex: 1;
  background: #f7f8fa;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.55;
  color: #24292f;
  white-space: pre-wrap;
  word-break: break-word;
}

.bib-foot {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1.15rem;
  border-top: 1px solid var(--rule);
}

.bib-copy {
  border: 0;
  border-radius: 6px;
  padding: .55rem 1.15rem;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.bib-copy:hover { background: var(--red-dark); }
.bib-copy:active { transform: scale(.97); }
.bib-copy.copied { background: #157347; }

body.bib-locked { overflow: hidden; }

/* Attribution note on the teaching page. Set apart from the course
   description above it, but quieter than body copy - it is a standing
   acknowledgement, not an announcement. */

.credit {
  max-width: 44rem;
  margin: 0 0 .5rem;
  padding-left: .9rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.6;
}

/* Reading lists on the teaching page. Quieter than body copy, with a hanging
   indent so author names line up down the left edge. */

.readings-label {
  color: var(--navy);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.75rem 0 .6rem;
}

.readings {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .9rem;
  line-height: 1.55;
}

.readings > li {
  margin-bottom: .55rem;
  padding-left: 1.4em;
  text-indent: -1.4em;
  overflow-wrap: anywhere;
}

/* Answers the one question a CV download link cannot: is this current? */
.cv-updated {
  color: var(--ink-soft);
  font-size: .85rem;
  margin-top: 1rem;
}

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

.sitefooter {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 2.5rem;
  color: var(--ink-soft);
  font-size: .82rem;
}

/* =====================================================================
   Responsive
   Base rules above are written for desktop; these adapt them downward.
   Breakpoints: 64rem tablet-landscape, 48rem tablet-portrait, 30rem phone.
   ===================================================================== */

/* Never let anything force a sideways scroll. This has to be `clip` rather than
   `hidden`: `hidden` makes html/body a scroll container, which silently kills
   `position: sticky` on the nav. */
html, body { max-width: 100%; overflow-x: clip; }
.pub-list > li, .pub-title, .pub-authors, .pub-venue, .pub-note { overflow-wrap: anywhere; }

/* ---- tablet landscape and below */
@media (max-width: 64rem) {
  .page { box-shadow: none; }
  main { padding-bottom: 3.5rem; }
}

/* ---- tablet portrait and below */
@media (max-width: 48rem) {
  body { font-size: 15.5px; }

  .masthead {
    padding: 1.5rem 0 1rem;
    gap: 1.25rem;
  }
  .masthead .wordmark { --wordmark-size: clamp(1.6rem, 5.2vw, 3rem); }
  .masthead .affiliation img { width: clamp(115px, 28vw, 165px); }

  .sitenav { margin-bottom: 1.75rem; }
  .sitenav a { padding: .5rem .85rem; font-size: .82rem; }

  .section-head {
    font-size: 1.15rem;
    padding-right: 1.5rem;
    margin: 2rem 0 1.1rem;
  }

  .intro h1, .home-h1 { font-size: 1.2rem; }
  .lead { font-size: 1rem; margin-bottom: 2rem; }

  .home-top { gap: 2rem; }
  .newsgrid { gap: 0 2rem; }

  .pub-list { padding-left: 1.7em; }
  .pub-list > li { margin-bottom: 1.5rem; }
}

/* ---- phone */
@media (max-width: 30rem) {
  /* The grey field around a narrow panel just wastes screen; go full bleed. */
  body { background: var(--panel); }
  :root { --pad: 1.1rem; }

  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0 .75rem;
  }
  /* Stacked here, so the wordmark is bounded by the panel rather than by the
     U of T mark beside it. */
  .masthead .wordmark { --wordmark-size: clamp(1.4rem, 8.2vw, 2.6rem); }
  .masthead .affiliation img { width: min(155px, 48vw); }

  .sitenav { gap: .25rem; padding-bottom: .4rem; }
  .sitenav a {
    padding: .45rem .7rem;
    font-size: .78rem;
    letter-spacing: .05em;
  }

  .intro h1, .home-h1 { font-size: 1.1rem; padding-left: .7rem; border-left-width: 4px; }
  .factgrid { grid-template-columns: 1fr; gap: 0; }

  /* Photo first, then text - the 240px/1fr grid collapses to one column. */
  .home-top:has(.portrait) { grid-template-columns: 1fr; }
  .home-top .portrait { width: 100%; max-width: 240px; height: auto; }
  .home-intro .factgrid { gap: 0; }
  .newsgrid { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .newscol + .newscol { margin-top: 1.75rem; }
  .featured-card { padding: 1.1rem 1.2rem; }

  .pub-list { padding-left: 1.5em; }
  .pub-title { font-size: .98rem; }
  .pub-authors, .pub-venue, .pub-note { font-size: .9rem; }

  .bib-overlay { padding: .6rem; }
  .bib-card { max-height: 88vh; border-radius: 9px; }
  .bib-head { padding: .7rem .85rem; }
  .bib-head h4 { font-size: .85rem; }
  .bib-code { padding: .9rem; font-size: .72rem; }
  .bib-foot { padding: .6rem .85rem; }
  .bib-copy { width: 100%; padding: .7rem; }

  .sitefooter { font-size: .78rem; padding-bottom: 2rem; }
}

/* ---- touch devices: links and pills need finger-sized targets */
@media (pointer: coarse) {
  .sitenav a { padding-top: .6rem; padding-bottom: .6rem; }
  .pub-link  { padding: .45rem .85rem; font-size: .85rem; }
  .bib-close { font-size: 2rem; padding: 0 .5rem; }
}

/* ---- users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

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

@media print {
  body { background: #fff; }
  .sitenav, .pub-links, .bib-overlay { display: none; }
  .page { box-shadow: none; max-width: none; }
}