/* Prajwal Khanal. A document on a white ground: the text runs the width of
   the window with a one-and-a-half-inch margin either side, the way a
   printed page is set.
   Times New Roman throughout, and the same blue as the CV, so the site and
   the PDF read as one thing. Italics are reserved for employer and
   institution lines, and for journal names. */

:root {
  --ink: #16231F;        /* headings and body text */
  --ink-soft: #6b7370;   /* dates, employers, secondary metadata */
  --rule: #e6e6e3;       /* hairlines */
  --accent: #0070C0;     /* section titles, nav, links; matches the CV */
  --page: #ffffff;

  --type: "Times New Roman", Times, Georgia, serif;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--type);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* An inch and a half of margin either side, as on a printed page, with the
   text filling whatever is left. There is no max-width, so the measure grows
   with the window — add `max-width: 60rem; margin: 0 auto;` here to cap it.
   The margin steps down twice below, because three inches of margin on a
   small laptop would leave very little page. */
.shell {
  max-width: none;
  margin: 0;
  padding: 2.5rem 1.5in 3rem;
}

/* Under about 1100px, an inch and a half each side eats more than it leaves. */
@media (max-width: 68rem) {
  .shell { padding: 2.5rem 1in 3rem; }
}

/* Masthead: portrait top left, name beside it, nav underneath ------------ */

.masthead-id {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* The nav is a sibling of the masthead, not a child, so that `position:
   sticky` is bounded by .shell — the whole page — rather than by the
   masthead, which ends a few pixels below it. */

.masthead-photo {
  width: 6rem;
  height: 6rem;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.masthead h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.masthead-id > div > p {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin: 0.3rem 0 0;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 0 1.75rem;
  margin-top: 1.15rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  background: var(--page);
  font-size: 1.0625rem;
}

.tabs a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  /* Still a usable thumb target once the padding tightens: 0.45rem either
     side of a 1.5rem line box clears 40px. */
  padding: 0.45rem 0;
}

.tabs a:hover { color: var(--ink); }

.tabs a[aria-current="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.tabs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Anchor targets clear the sticky nav instead of hiding behind it. */
main section[id] { scroll-margin-top: 3.9rem; }

/* Section titles: the top of the hierarchy ------------------------------- */

main { margin-top: 1.75rem; }

/* On one long page this gap is the only thing telling the reader a new topic
   has started, so it stays the largest space on the page even when the rest
   of the rhythm is tight. */
section + section { margin-top: 2.6rem; }

h2 {
  font-weight: 600;
  font-size: 1.3125rem;
  color: var(--accent);
  margin: 0 0 0.8rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}

p { margin: 0 0 0.6rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.125rem;
  line-height: 1.62;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 112, 192, 0.35);
}

a:hover { border-bottom-color: var(--accent); }

/* Entries: dates in a fixed left column, content filling the width -------- */

.record {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0 2.5rem;
  padding-top: 0.65rem;
  margin-top: 0.65rem;
  border-top: 1px solid var(--rule);
}

.record:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.record-head {
  display: contents;   /* title goes right, date goes left */
}

/* Second level of the hierarchy: the entry title. */
.record-head h3 {
  grid-column: 2;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.15rem;
}

.record-when {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  padding-top: 0.25rem;
}

/* Third level: employer or venue, set in italic. */
.record-where {
  grid-column: 2;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}

.record > p,
.record > ul,
.record > figure {
  grid-column: 2;
}

/* Achievements under each entry. */
.highlights {
  font-size: 1.0625rem;
  line-height: 1.58;
  margin: 0.15rem 0 0.4rem;
  padding-left: 1.05rem;
}

.highlights li { margin-bottom: 0.22rem; }

/* Project photos ---------------------------------------------------------- */

.project-shot { margin: 1rem 0; }

.project-shot img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  border: 1px solid var(--rule);
}

.project-shot figcaption {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.project-links { font-size: 0.9375rem; }

/* Publications ------------------------------------------------------------ */

/* "Peer-reviewed", "Under review", "Conference contributions". These sit one
   level below the section title, so they are quieter than an h2. */
.pub-group {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.25rem 0 0.5rem;
}

.pub-group:first-child { margin-top: 0; }

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One row per paper, year in the gutter, the citation on one line. The
   hairlines between entries are gone: with nine of them they added more
   height than they added clarity. */
.pub-list li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 0.85rem;
  padding: 0.24rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.pub-year {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.pub-who { color: var(--ink-soft); }

/* His own first-author work, so middle-author papers are not implied to be. */
.pub-me {
  color: var(--ink);
  font-weight: 700;
}

.pub-title { color: var(--ink); }

.pub-venue {
  font-style: italic;
  color: var(--ink-soft);
}

.pub-status { color: var(--ink-soft); }

.pub-sep {
  color: var(--ink-soft);
  margin: 0 0.35em;
}

/* The "Also on Google Scholar" line under the list, not a citation. */
.pub-note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* Label-and-value lists: contact details, and the skills table ------------ */

.contact-list,
.keyed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li,
.keyed-list li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2.5rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--rule);
}

.contact-list li:first-child,
.keyed-list li:first-child { border-top: 0; padding-top: 0; }

.contact-key {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Footer ------------------------------------------------------------------ */

footer {
  margin-top: 2.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.to-top { margin-left: 0.5rem; }

/* Narrow screens: collapse the two columns -------------------------------- */

@media (max-width: 48rem) {
  .shell { padding: 1.75rem 1.35rem 2.75rem; }

  main { margin-top: 1.6rem; }

  /* Six items do not fit across a phone, so the nav becomes a strip you
     swipe sideways. It stays one row, so the sticky bar keeps a fixed
     height and nothing below it jumps around. */
  .tabs {
    gap: 0 1.5rem;
    font-size: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }

  main section[id] { scroll-margin-top: 3.6rem; }

  .masthead-id {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .masthead h1 { font-size: 1.875rem; }


  .record {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .record-head h3,
  .record-where,
  .record > p,
  .record > ul,
  .record > figure { grid-column: 1; }

  .record-when {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    padding-top: 0;
    margin-bottom: 0.2rem;
  }

  .contact-list li,
  .keyed-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}