/* =====================================================================
   math-golive.com — appearance of the whole site
   =====================================================================

   THIS IS THE ONLY FILE THAT CONTROLS THE LOOK OF EVERY PAGE.
   Change a colour here and all seven pages change at once.

   The text of the site is NOT here — it is in the .html files.

   Colours are written as #RRGGBB. To try another one, pick it on
   htmlcolorcodes.com and paste it in place of the old value.
   ===================================================================== */

:root{
  /* ---- colours ---- */
  --paper:      #f6f2e8;   /* page background, warm ivory     */
  --card:       #fbf8f1;   /* boxes slightly lighter than page */
  --ink:        #221e18;   /* main text, warm near-black       */
  --muted:      #6d6455;   /* dates, journals, secondary text  */
  --rule:       #d9cfbb;   /* thin lines                       */
  --accent:     #7a2e35;   /* links and numbers, oxblood red   */
  --accent-bg:  #efe4dd;   /* background behind a hovered link */

  /* ---- sizes ---- */
  --text-size:  1.075rem;  /* base text size. Try 1.15rem for bigger */
  --measure:    36rem;     /* width of the reading column            */
}

/* Automatic dark version, for visitors whose device is set to dark mode.
   Delete this whole block (from @media to its closing brace) if you
   prefer the site to always stay light.                               */
@media (prefers-color-scheme: dark){
  :root{
    --paper:     #191510;
    --card:      #201b15;
    --ink:       #ece5d7;
    --muted:     #a2977f;
    --rule:      #3a3228;
    --accent:    #d99a9a;
    --accent-bg: #2d2320;
  }
}

/* =====================================================================
   Below this line is layout and typography.
   You can ignore it entirely — nothing here needs to be edited to
   change the content of the site.
   ===================================================================== */

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", "URW Palladio L", Georgia,
               "Times New Roman", serif;
  font-size: var(--text-size);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.055em;
}
a:hover{ background: var(--accent-bg); }
a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap{
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  padding: 0 1.4rem;
}

/* ---------- masthead and menu ---------- */
.masthead{
  padding: 2.6rem 0 0;
  text-align: center;
}
.masthead .site-name{
  display: inline-block;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}
.masthead .site-name:hover{ background: none; color: var(--accent); }
.masthead .site-role{
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-style: italic;
}

.menu{
  margin: 1.6rem 0 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
}
.menu ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.6rem;
}
.menu a{
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
}
.menu a:hover{ color: var(--accent); background: none; text-decoration: underline; }
.menu a[aria-current="page"]{
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* the CV link in the menu is coloured so it stands out */
.menu a.cv-link{ color: var(--accent); }

/* ---------- profile badges under the name ---------- */
.profiles{
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.15rem;
  font-size: 0.9rem;
}
.profiles a{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ink);
}
.profiles a:hover{ color: var(--accent); background: none; text-decoration: underline; }
/* The badges are the official Simple Icons files. Each file already
   carries the colour of its service, written inside the file itself as
   fill="#RRGGBB" - open img/orcid.svg in a text editor to see it. */
.ico{
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  display: inline-block;
  object-fit: contain;
}

/* the two dark reds are hard to see on a dark background */
@media (prefers-color-scheme: dark){
  .ico-arxiv, .ico-hal{ filter: brightness(1.65) saturate(0.85); }
}

/* ---------- lecture notes attached to a course ---------- */
.notes{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
}
.notes::before{ content: "\2192\00a0"; color: var(--muted); }

/* ---------- ongoing / completed label on a grant ---------- */
.tag{
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--accent);
}
.tag-done{ border-color: var(--muted); color: var(--muted); }

/* ---------- page body ---------- */
main{ padding: 2.8rem 0 1rem; }

h1{
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--rule);
}
h2{
  font-size: 1.22rem;
  font-weight: 600;
  margin: 2.6rem 0 0.9rem;
}
h3{
  font-size: 1.03rem;
  font-weight: 600;
  margin: 1.8rem 0 0.5rem;
}
h2:first-child, h3:first-child{ margin-top: 0; }

p{ margin: 0 0 1.05rem; }
.lead{ font-size: 1.12rem; }

hr{
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.6rem 0;
}

/* ---------- home page portrait ---------- */
.portrait{
  width: 10.5rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  display: block;
  margin: 0 auto 1.6rem;
}
@media (min-width: 40rem){
  .portrait{
    float: left;
    margin: 0.3rem 1.8rem 1rem 0;
  }
}

/* ---------- lists ---------- */
.plain{ list-style: none; margin: 0 0 1.05rem; padding: 0; }
.plain > li{
  padding: 0.35rem 0 0.35rem 1.15rem;
  position: relative;
}
.plain > li::before{
  content: "—";
  position: absolute; left: 0;
  color: var(--accent);
}

/* a list where each line starts with a date or a year */
.dated{ list-style: none; margin: 0 0 1.05rem; padding: 0; }
.dated > li{
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.dated > li:first-child{ padding-top: 0; }
.dated a{ color: var(--ink); text-decoration-color: var(--rule); }
.dated a:hover{ color: var(--accent); background: none; }
.when{
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* ---------- publications ---------- */
.pubs{ list-style: none; margin: 0; padding: 0; }
.pub{
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.pub:first-child{ padding-top: 0; }
.pub-num{
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--accent);
  padding-top: 0.3em;
}
.pub-title{ margin: 0 0 0.25rem; font-weight: 600; line-height: 1.42; }
/* the paper title links to the journal version: kept dark so that the list
   stays calm, and it turns red under the mouse */
.pub-title a{ color: var(--ink); text-decoration-color: var(--rule); }
.pub-title a:hover{ color: var(--accent); background: none; }
.pub-authors{ margin: 0 0 0.1rem; font-size: 0.96rem; }
.pub-where{ margin: 0; font-size: 0.95rem; font-style: italic; color: var(--muted); }
.pub-links{
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
}
@media (max-width: 30rem){
  .pub{ grid-template-columns: 1.8rem minmax(0, 1fr); }
}

/* ---------- boxed note (used for grants and open positions) ---------- */
.note{
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.2rem 1.3rem;
  margin: 0 0 1.6rem;
}
.note > :last-child{ margin-bottom: 0; }
.note h2, .note h3{ margin-top: 0; }

/* ---------- profile links and buttons ---------- */
.links{
  list-style: none;
  margin: 1.4rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.97rem;
}
.button{
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--accent);
  text-decoration: none;
  font-size: 0.97rem;
}
.button:hover{ background: var(--accent); color: var(--paper); }

.address{ font-style: normal; line-height: 1.8; }

/* the two addresses line up under each other, whatever comes before them */
.emails{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
}
.emails span:nth-child(odd){ color: var(--muted); text-align: right; }

/* ---------- footer ---------- */
footer{
  margin-top: 3.5rem;
  padding: 1.2rem 0 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  justify-content: space-between;
}
footer p{ margin: 0; }

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

/* ---------- clean printing ---------- */
@media print{
  :root{ --paper:#fff; --card:#fff; --ink:#000; --muted:#444; --accent:#000; --rule:#999; }
  .menu, .button, .portrait{ display: none; }
  a{ text-decoration: none; }
  .pub, .dated > li{ break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}