/* James W. Rohlf — shared stylesheet for physics.bu.edu/~rohlf/ */

:root {
  --bg:    #000000;
  --ink:   #f2efe9;
  --muted: #9a948a;
  --red:   #ff2d2d;
  --rule:  #24242a;
  --font:  system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.wrap--wide { max-width: 820px; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.back { color: var(--muted); text-decoration: none; font-size: .9rem; }
.back:hover { color: var(--red); }

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 650;
  margin: 1.5rem 0 .3rem;
}
.subtitle {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  margin: 0 0 2rem;
}
.lede { font-size: 1.12rem; margin: 0 0 1.5rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 650; }

h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
  margin: 2.5rem 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}

/* ORCID iD, sized to the text it follows */
.orcid { display: inline-block; vertical-align: -0.05em; margin-left: .32em; }
.orcid svg { width: .6em; height: .6em; display: block; }

/* --- link lists (home page) --------------------------------------------- */
ul { list-style: none; padding: 0; margin: 0; }
li { margin: 0; }
.links li > a {
  display: inline-block;
  padding: .28rem 0;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}
.links li > a:hover { color: var(--red); text-decoration: none; border-bottom-color: var(--red); }
.links .note { color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.aside { color: var(--muted); font-size: .9rem; margin: .7rem 0 0; }
.aside a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.aside a:hover { color: var(--red); }

/* --- home page header ---------------------------------------------------- */
.masthead { display: flex; gap: 1.25rem; align-items: center; margin: 1rem 0 2.5rem; }
.masthead img {
  width: 124px; height: 124px; flex: none;
  object-fit: cover; border-radius: 50%;
  border: 1px solid var(--rule); display: block;
}
.role  { color: var(--red); font-weight: 600; margin: 0; }
.place { color: var(--muted); margin: .15rem 0 0; font-size: .95rem; }

/* --- contact block ------------------------------------------------------- */
.contact { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .95rem; }
.contact div { margin: .25rem 0; }
.contact .label { color: var(--muted); display: inline-block; min-width: 7.5rem; }

/* --- education rows ------------------------------------------------------ */
.degree { display: flex; align-items: center; gap: 1.25rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.degree:last-of-type { border-bottom: 1px solid var(--rule); }
.degree img { width: 76px; flex: none; display: block; }
.degree .what  { font-weight: 600; font-size: 1.05rem; margin: 0; }
.degree .where { color: var(--muted); margin: .1rem 0 0; }
.degree .where a { color: var(--muted); text-decoration: none; }
.degree .where a:hover { color: var(--red); text-decoration: underline; }
.degree .year  { margin-left: auto; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- research: timeline of experiments ----------------------------------- */
.expt {
  display: block;
  padding: 1.3rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.expt:last-of-type { border-bottom: 1px solid var(--rule); }
.expt:hover { text-decoration: none; }
.expt:hover .expt__name { color: var(--red); }
.expt__head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.expt__name { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.expt__years { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
.expt__where { color: var(--muted); font-size: .9rem; }
.expt__what { color: var(--ink); margin: .35rem 0 0; }
.expt__what em { color: var(--muted); font-style: normal; }

/* --- research: paper entries --------------------------------------------- */
.paper { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.paper:last-child { border-bottom: 0; }
.paper__title { font-weight: 600; margin: 0 0 .15rem; line-height: 1.4; }
.paper__ref { color: var(--muted); font-size: .92rem; margin: 0; }
.paper__ref a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.paper__ref a:hover { color: var(--red); }
.cites {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: 999px;
  padding: 0 .5em;
  margin-left: .5em;
  white-space: nowrap;
}
.highlight {
  border-left: 3px solid var(--red);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}
.highlight .paper__title { font-size: 1.08rem; }

.figure { margin: 2rem 0; }
.figure img { display: block; border: 1px solid var(--rule); border-radius: 4px; }
.figure figcaption { color: var(--muted); font-size: .88rem; padding-top: .6rem; }

.footnote { color: var(--muted); font-size: .85rem; margin-top: 2.5rem; }

@media (max-width: 520px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .contact .label { display: block; min-width: 0; }
  .degree { flex-wrap: wrap; gap: .9rem; }
  .degree .year { margin-left: 0; width: 100%; }
  .expt__years { margin-left: 0; width: 100%; }
}

/* --- Book page (modern.html) ---------------------------------------------
   Cover beside the publication details, stacking on a narrow screen; and a
   numbered contents list, since the site's default `ul` has list-style none. */

.book {
  display: grid;
  grid-template-columns: minmax(0, 210px) 1fr;
  gap: 1.75rem;
  align-items: start;
  margin: 1.75rem 0 2.5rem;
}
.book img { display: block; border-radius: 3px; box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.book p:first-child { margin-top: 0; }
@media (max-width: 34rem) {
  .book { grid-template-columns: 1fr; }
  .book img { max-width: 210px; }
}

/* The details list reuses .contact's label column without its top rule. */
.book dl { margin: 1.25rem 0 0; font-size: .95rem; }
.book dl div { margin: .25rem 0; }
.book dl .label { color: var(--muted); display: inline-block; min-width: 5.5rem; }

.toc { list-style: decimal; padding-left: 1.6rem; margin: 0; }
.toc li { margin: .3rem 0; padding-left: .2rem; }
.toc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

/* A small secondary link riding after a title in a .links list — used for the
   "code" links beside the three Guide books. More specific than
   `.links li > a`, so the red survives. */
.links .codelink,
.links .altlink {
  color: var(--red);
  font-size: .8rem;
  margin-left: .55rem;
  border-bottom: 1px solid transparent;
}
.links .codelink:hover,
.links .altlink:hover { border-bottom-color: var(--red); }