/* ------------------------------------------------------------------
   Personal site. Layout modelled on the AcademicPages / Minimal
   Mistakes theme. Hand-written, no Jekyll build step required.
   ------------------------------------------------------------------ */

:root{
  --text:#494e52;
  --muted:#7a8288;
  --light:#9ba1a6;
  --border:#f2f3f3;
  --border-strong:#e6e8e8;
  --link:#4e5d6e;
  --link-hover:#2f3a45;
  --footer-bg:#f2f3f3;
  --sans:-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:underline}
a:hover{color:var(--link-hover)}

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

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

.masthead{
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:#fff;
  z-index:20;
}
.masthead__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 1em;
  display:flex;
  align-items:center;
  gap:1.5em;
  min-height:48px;
  flex-wrap:wrap;
}
.masthead a{
  color:var(--muted);
  font-weight:700;
  text-decoration:none;
  padding:0.6em 0;
  display:inline-block;
}
.masthead a:hover{color:var(--text)}
.masthead a.active{color:var(--text)}

/* ---------------- page frame ---------------- */

#main{
  max-width:1100px;
  margin:0 auto;
  padding:2em 1em 3em;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:0 2.5em;
  align-items:start;
}

/* ---------------- sidebar ---------------- */

.sidebar{
  position:sticky;
  top:72px;
  font-size:15px;
}
.author__avatar img,
.author__avatar svg{
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid var(--border);
  display:block;
}
.author__name{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin:0.9em 0 0.2em;
  line-height:1.3;
}
.author__bio{
  font-size:0.75em;
  color:var(--text);
  margin:0 0 1.2em;
  line-height:1.5;
}
.author__urls{
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.75em;
}
.author__urls li{margin-bottom:0.55em;display:flex;align-items:flex-start;gap:0.6em}
.author__urls a{color:var(--text);text-decoration:none}
.author__urls a:hover{text-decoration:underline;color:var(--link-hover)}
.author__urls .icon{
  width:1em;
  height:1em;
  flex:0 0 1em;
  margin-top:0.2em;
  color:var(--muted);
  stroke-width:1.8;
}

/* ---------------- content ---------------- */

.page__content{
  min-width:0;
  max-width:44em;
}
.page__title{
  font-size:1.563em;
  font-weight:700;
  color:var(--text);
  margin:0 0 0.8em;
  line-height:1.25;
}
.page__content h2{
  font-size:1.15em;
  font-weight:700;
  color:var(--text);
  margin:2em 0 0.4em;
  line-height:1.35;
}
.page__content h2:first-of-type{margin-top:0.5em}
.page__content p{margin:0 0 1.3em}
.page__content p:last-child{margin-bottom:0}

.paper-links{font-size:0.95em}
.paper-links a{margin-right:0.6em}

.status{
  color:var(--muted);
  font-style:italic;
}

/* Figures sit to the right of the entry text. They precede the paragraphs in
   the markup so the text wraps alongside; h2 clears the previous float. */
figure{
  float:right;
  width:42%;
  margin:0.2em 0 1em 1.6em;
  padding:0;
}
figure a{display:block;border-bottom:none;line-height:0}
figure img{display:block;width:100%;transition:opacity .15s}
figure a:hover img{opacity:0.88}
figcaption{font-size:0.75em;color:var(--muted);margin-top:0.5em}
.page__content h2{clear:both}
.page__content::after{content:"";display:block;clear:both}

/* publications list */
ol.pubs{margin:0;padding-left:1.4em}
ol.pubs li{margin-bottom:1.1em;padding-left:0.2em}
ol.pubs .me{font-weight:700}
ol.pubs .title{color:var(--text)}
ol.pubs .venue{font-style:italic}
.footnote{font-size:0.85em;color:var(--muted);margin-top:1.8em}

/* simple two-column definition rows for CV-ish content */
.cv-row{
  display:grid;
  grid-template-columns:8.5em 1fr;
  gap:0.2em 1.2em;
  margin-bottom:1.2em;
}
.cv-row .when{color:var(--muted);font-size:0.9em;padding-top:0.15em}
.cv-row .what strong{display:block}
.cv-row .what span{display:block;color:var(--muted);font-size:0.95em}

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

.page__footer{
  background:var(--footer-bg);
  color:var(--light);
  margin-top:3em;
}
.page__footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:2em 1em;
  font-size:0.75em;
}
.page__footer a{color:var(--light)}
.page__footer a:hover{color:var(--muted)}
.footer__copy{margin:0}

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

@media (max-width:760px){
  #main{
    grid-template-columns:1fr;
    gap:2em;
    padding-top:1.5em;
  }
  .sidebar{
    position:static;
    display:grid;
    grid-template-columns:110px 1fr;
    gap:0 1.2em;
    align-items:start;
    padding-bottom:1.5em;
    border-bottom:1px solid var(--border);
  }
  .author__avatar{grid-column:1;grid-row:1 / span 2}
  .author__avatar img,
  .author__avatar svg{width:110px;height:110px}
  .author__name{grid-column:2;grid-row:1;margin-top:0;align-self:end}
  .author__bio{grid-column:2;grid-row:2;margin-bottom:0}
  .author__urls{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:0.4em 1.4em;
    margin-top:0.8em;
  }
  .author__urls li{margin-bottom:0}
  .cv-row{grid-template-columns:1fr;gap:0}
  .cv-row .when{order:-1}
  /* too narrow to wrap text beside a figure, so stack instead */
  figure{float:none;width:100%;margin:1em 0 1.4em}
}