/* smanahian.com: one stylesheet for every page */

:root {
  --ink: #1b1b1b;
  --head: #111;
  --soft: #4a4a4a;
  --link: #1f4f9e;
  --link-hover: #133a7a;
  --rule: #c9c9c9;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}

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

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* Links inside sentences, in a paper's venue line, in the home role line
   and in the footer get a light underline, so they read as links without
   relying on color. Titles, names, the nav and link lists don't. */
main p a,
main dd a,
main .venue a,
main ul:not(.toc, .links, .works) li a,
.role a,
footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgb(31 79 158 / 0.65);
}

main p a:hover,
main dd a:hover,
main .venue a:hover,
main ul:not(.toc, .links, .works) li a:hover,
.role a:hover,
footer a:hover {
  text-decoration-color: currentColor;
}

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

p,
li,
dd {
  text-wrap: pretty;
}

p {
  margin: 0 0 1em;
}

b,
strong {
  font-weight: 600;
}

h1,
h2,
h3,
h4 {
  color: var(--head);
  font-weight: 600;
  line-height: 1.15;
}

h1 {
  font-size: 2em;
  margin: 0 0 0.7rem;
}

/* Section headings: a hairline closes the section before, and the heading
   has clearly more room above it than anything inside a section, so each one
   reads as a fresh start. */
h2 {
  margin: 3.4rem 0 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 1.4em;
  line-height: 1.2;
  scroll-margin-top: 1rem;
}

ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.4em;
}

li::marker {
  color: var(--soft);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: 0.2rem 0.5rem;
}

/* Name, photo and links at the top of the home page */

.intro {
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas:
    'photo .'
    'photo name'
    'photo role'
    'photo contact'
    'photo .';
  column-gap: 1.4rem;
}

.photo {
  grid-area: photo;
  display: block;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
}

.intro h1 {
  grid-area: name;
  font-size: 2.2em;
  margin: 0;
}

.pronouns {
  color: var(--soft);
  font-size: 0.42em;
  font-weight: 400;
  white-space: nowrap;
}

.role {
  grid-area: role;
  margin: 0.3rem 0 0;
}

.contact {
  grid-area: contact;
  margin: 0.1rem 0 0;
}

/* The opening paragraph of the home and About pages, a step up from the
   body text so the eye has somewhere to start. */
.lede {
  font-size: 1.14em;
  line-height: 1.45;
  margin-bottom: 0.9em;
}

/* Hyphenated names (python-chess, curve25519-dalek) stay on one line. */
.nobr {
  white-space: nowrap;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.16em;
  cursor: help;
}

/* Lists of links on one line, separated by middle dots. Each item keeps its
   dot, so a line never starts with one, and a row that wraps splits into
   lines of about equal length. */
.contact,
.links,
.toc {
  padding: 0;
  list-style: none;
  text-wrap: balance;
}

.contact li,
.links li,
.toc li {
  display: inline-block;
  margin: 0;
}

.contact li:not(:last-child)::after,
.links li:not(:last-child)::after,
.toc li:not(:last-child)::after {
  content: '\00B7';
  content: '\00B7' / '';
  margin-left: 0.3em;
  color: var(--soft);
}

/* Site name on inner pages, and the section links */

.masthead {
  display: inline-block;
  color: var(--head);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.2;
}

.masthead:hover {
  color: var(--head);
  text-decoration: none;
}

.site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1.1em;
  margin: 1.4rem 0 2.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92em;
}

.site a {
  color: var(--soft);
  text-align: center;
}

.site a:hover {
  color: var(--link);
}

.site a[aria-current='page'] {
  color: var(--head);
  font-weight: 600;
}

/* Reserve each link's bold width, so the current page being bold doesn't
   shift the links after it from page to page. */
.site a::after {
  content: attr(data-label);
  content: attr(data-label) / '';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

/* Papers: a title a step larger than the text, then authors and venue
   tight underneath, and a clear gap before the next paper. */

.paper {
  margin: 0 0 2.1rem;
  line-height: 1.45;
  scroll-margin-top: 1rem;
}

/* Titles fill each line; only a lone last word gets company. */
.paper .title {
  display: block;
  width: fit-content;
  margin: 0 0 0.2rem;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.paper .authors,
.paper .venue {
  font-size: 0.92em;
  text-wrap: pretty;
}

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

.paper p {
  margin: 0.4rem 0 0;
  line-height: 1.6;
}

.paper .links {
  margin: 0.4rem 0 0;
}

/* Writing and talks: the title on its own line, with what it is and where
   underneath in grey, like a paper's venue line. */
.works {
  padding-left: 0;
  list-style: none;
}

.works li {
  margin: 0 0 1.1rem;
  line-height: 1.45;
}

.works .nobr {
  display: inline-block;
  white-space: normal;
}

.works .note {
  display: block;
  margin-top: 0.15rem;
  color: var(--soft);
  font-size: 0.92em;
}

/* Entries (jobs, projects, schools, awards): the name on its own line, a
   step larger than the text, with the dates set apart in grey at the right
   so they can be read straight down the page. Everything inside an entry
   sits close together; the gap between entries is much larger. */

.entry {
  margin: 0 0 2.25rem;
  scroll-margin-top: 1rem;
}

/* The same gap separates a page's opening sentence from its first entry. */
main > p + .entry {
  margin-top: 2.25rem;
}

.entry h2,
.entry h3,
.sub h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  margin: 0 0 0.2rem;
  font-size: 1.1em;
  line-height: 1.3;
  text-wrap: balance;
}

.sub h4 {
  font-size: 1em;
}

.entry h2 {
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: 0;
}

.when {
  flex: none;
  color: var(--soft);
  font-size: 0.8em;
  font-weight: 400;
  white-space: nowrap;
}

.sub .when {
  font-size: 0.88em;
}

/* Role, place, or degree under the name */
.meta {
  color: var(--soft);
  font-style: italic;
}

.entry p {
  margin-bottom: 0.5rem;
}

.entry ul {
  margin: 0.4rem 0 0.5rem;
}

.entry li {
  margin-bottom: 0.25em;
}

.entry .links li {
  margin-bottom: 0;
}

.sub {
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rule);
  scroll-margin-top: 1rem;
}

.skills,
.small {
  color: var(--soft);
  font-size: 0.85em;
}

.entry .skills {
  margin-top: 0.5rem;
  line-height: 1.45;
}

/* In small grey text the link color alone doesn't stand out */
.small a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* Year-by-year results: the years in their own column */
.years {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  row-gap: 0.25rem;
  margin: 0.45rem 0 0;
}

.years dt {
  color: var(--soft);
}

.years dd {
  margin: 0;
}

/* Label and text side by side (skills) */
.facts {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem 1.25rem;
  margin: 0;
}

.facts dt {
  color: var(--head);
  font-weight: 600;
}

.facts dd {
  margin: 0;
}

/* Short labels (Education) need only a narrow label column. They stay quiet,
   so the school names are the only bold text and each school starts clearly. */
.facts-short {
  grid-template-columns: 6.5rem 1fr;
}

.facts-short dt {
  color: var(--soft);
  font-weight: 400;
}

/* Pages with many short entries (About's Education, Experience) put a light
   line between entries, fainter than the section rule, so each one reads as
   its own block. The first entry under a heading or intro gets no line. The
   line sits in the gap above an entry, outside it, so a linked entry's
   :target highlight covers only the entry. */
.divided .entry {
  margin-bottom: 1.6rem;
}

.divided .entry + .entry {
  position: relative;
  margin-top: calc(3.2rem + 1px);
}

.divided .entry + .entry::before {
  content: '';
  position: absolute;
  inset: calc(-1.6rem - 1px) 0 auto;
  border-top: 1px solid #e6e6e6;
}

.links {
  margin: 0 0 1em;
}

/* "Jump to" links at the top of long pages */
.toc {
  margin: 0 0 1.6rem;
  color: var(--soft);
  font-size: 0.92em;
}

/* Single paragraphs and list items that old links land on (/awards/afm,
   /volunteering/scout, /publications/imo-2023-p6) stop short of the top
   edge, like entries do. */
main p[id],
main li[id] {
  scroll-margin-top: 1rem;
}

/* Arriving at an entry through a link (old URLs like /awards/imo land here) */
.entry:target,
.sub:target,
.paper:target,
li:target,
p:target {
  background: #fbf5dc;
  box-shadow: 0 0 0 0.4rem #fbf5dc;
}

/* Bengali titles: Noto Sans Bengali sits well next to the system font, but its tall
   metrics would open up the line, so keep its inline box at 1. */
:lang(bn) {
  font-family: 'Noto Sans Bengali', 'Bangla Sangam MN', 'Bangla MN', sans-serif;
  line-height: 1;
}

.playlists {
  display: grid;
  gap: 0.8rem;
  margin: 0.8rem 0 1rem;
}

.playlists iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 12px;
}

/* A hairline closes the page, so its end is as clear as its start. */
footer {
  text-wrap: balance;
  margin-top: 4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: 0.85em;
}

/* Place and date, separated by a middle dot, each kept on one line */
footer span {
  display: inline-block;
}

footer span:not(:last-child)::after {
  content: '\00B7';
  content: '\00B7' / '';
  margin-left: 0.3em;
}

@media print {
  body {
    font-size: 11pt;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .site,
  .toc,
  .skip-link,
  .playlists,
  footer {
    display: none;
  }

  a {
    color: inherit;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  .paper,
  .sub,
  .entry,
  .facts {
    break-inside: avoid;
  }

  .intro {
    margin-bottom: 1.5rem;
  }
}

/* Touch screens: a little more height on the small link rows, so they're easier to tap.
   Inline padding grows the tap area without moving the layout. */
@media (pointer: coarse) {
  .contact a,
  .links a,
  .toc a {
    padding-block: 0.2em;
  }
}

/* Narrow screens */

@media (max-width: 40rem) {
  .page {
    padding: 2.25rem 1.25rem 2.5rem;
  }

  /* Keep the focused skip link off the photo and name. */
  .skip-link:focus {
    top: 0;
    left: 0;
  }

  .intro {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas:
      'photo .'
      'photo name'
      'photo role'
      'photo .'
      'contact contact';
    column-gap: 1rem;
  }

  .photo {
    width: 5.5rem;
    height: 5.5rem;
  }

  .intro h1 {
    font-size: min(2em, 9vw);
  }

  .contact {
    margin-top: 0.9rem;
  }

  /* When the links don't fit on one line at a readable size, they wrap
     into two rows of about equal length. */
  .site {
    display: block;
    margin: 1.25rem 0 2rem;
    font-size: 0.9em;
    line-height: 1.65;
    text-wrap: balance;
  }

  .site a {
    display: inline-block;
    margin-right: 0.55em;
  }

  .site a:last-child {
    margin-right: 0;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    margin-top: 2.6rem;
    font-size: 1.3em;
  }

  .lede {
    font-size: 1.1em;
  }

  /* No room for a date column: the dates go under the name instead. */
  .entry h2,
  .entry h3,
  .sub h4 {
    display: block;
  }

  .when {
    display: block;
    white-space: normal;
    margin-top: 0.1rem;
    font-size: 0.82em;
  }

  .sub .when {
    font-size: 0.9em;
  }

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

  .facts dd {
    margin-bottom: 0.75rem;
  }

  .facts dd:last-child {
    margin-bottom: 0;
  }

  .intro h1 .pronouns {
    display: block;
    font-size: 0.45em;
    line-height: 1.3;
    margin-top: 0.15rem;
  }
}

/* Small phones: a slightly smaller jump-link row, so it fits on one line. */
@media (max-width: 30rem) {
  .toc {
    font-size: 0.88em;
  }
}