/* One flat tint per chapter, all at the same lightness so the ink reads the
   same on each of them. The last chapter is the only dark one. */
:root {
  color-scheme: light;

  --paper: #f7f6f2;
  --ink: #20262b;
  --ink-soft: #545b61;
  --rule: #dddbd3;

  --tint-botline: #cbd7df;
  --tint-work: #d3dbc9;
  --tint-papers: #e3dac6;
  --tint-education: #dad4e1;
  --tint-contact: #27353d;
  --on-dark: #eeece5;
  --on-dark-soft: #b4bdc1;
  --rule-dark: #46555d;

  --tint: var(--tint-botline);
  --cover-ink: var(--ink);
  --cover-rule: rgb(32 38 43 / 0.2);
  --floor-line: #fff;
  --floor-strength: 1;

  --serif: "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: 1.25rem;
  --when: 5.5rem;
  --measure: 50rem;
}

[data-active="work"] { --tint: var(--tint-work); }
[data-active="papers"] { --tint: var(--tint-papers); }
[data-active="education"] { --tint: var(--tint-education); }
[data-active="contact"] {
  --tint: var(--tint-contact);
  --cover-ink: var(--on-dark);
  --cover-rule: rgb(238 236 229 / 0.24);
  --floor-line: var(--on-dark);
  --floor-strength: 0.4;
}

#botline { --accent: var(--tint-botline); }
#work { --accent: var(--tint-work); }
#papers { --accent: var(--tint-papers); }
#education { --accent: var(--tint-education); }

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }
#contact ::selection { background: var(--on-dark); color: var(--tint-contact); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: background-color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  background: var(--accent, var(--tint));
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  z-index: 10;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The cover: the coloured page on the left of the spread */

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1.75rem var(--gutter) 1.25rem;
  background: var(--tint);
  color: var(--cover-ink);
  transition: background-color 0.5s ease, color 0.5s ease;
}

.cover a:hover { background: none; }

.cover > :not(.floor) { position: relative; }

/* The floor: a wireframe of long, gentle waves in perspective, drawn by script.js
   in white so it reads as part of the colour field and never competes with the
   dark type. The script sets its horizon just under the role line, dissolves the
   rows into the sides and the first rule, and lets the columns thin out behind. */

.floor {
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
  height: 72%;
  pointer-events: none;
}

.floor path {
  fill: none;
  stroke-linejoin: round;
  stroke-opacity: var(--floor-strength);
  stroke-width: 0.65;
  transition: stroke-opacity 0.5s ease;
}

.floor stop {
  stop-color: var(--floor-line);
  transition: stop-color 0.5s ease;
}

/* Anything that keeps moving beside text needs a way to stop it. */

.cover > .pause {
  position: absolute;
  z-index: 1;
  top: 1.125rem;
  right: var(--gutter);
  min-height: 2.75rem;
  padding: 0 0 0 0.75rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  opacity: 0.72;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: opacity 0.15s ease;
}

.cover > .pause:hover,
.cover > .pause:focus-visible { opacity: 1; }

.cover > .pause[hidden] { display: none; }

.name {
  margin-left: -0.02em;
  font: 300 clamp(3.25rem, 17vw, 8.5rem)/0.98 var(--serif);
  letter-spacing: -0.02em;
}

.role {
  max-width: 24em;
  margin-top: 1.25rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.contents { margin-top: auto; padding-top: 2.5rem; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 0.5625rem;
  border-top: 1px solid var(--cover-rule);
  text-decoration: none;
  transition: opacity 0.25s ease, border-color 0.5s ease;
}

.row__name {
  font: 300 clamp(1.5rem, 7vw, 2.25rem)/1.2 var(--sans);
  letter-spacing: -0.012em;
}

.row__note {
  font-size: 0.875rem;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.row:hover .row__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.direct {
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--cover-rule);
  transition: border-color 0.5s ease, opacity 0.3s ease, visibility 0.3s;
}

.direct__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.6875rem 0;
  border-top: 1px solid var(--cover-rule);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.5s ease;
}

.direct__link span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.direct__link:hover span:last-child { text-decoration-color: currentColor; }

/* The reading page */

.intro {
  padding: 3rem var(--gutter) 3.25rem;
}

.lead {
  max-width: 21em;
  font: 300 clamp(1.625rem, 7vw, 2.75rem)/1.26 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.mark {
  display: inline-block;
  padding: 0 0.13em 0.05em;
  margin: 0 -0.03em;
  background: var(--tint);
  line-height: 1.06;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.mark:hover {
  background: var(--tint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.lead-after {
  max-width: 34em;
  margin-top: 1.5rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.chapter__title {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 0.75rem var(--gutter) 0.8125rem;
  background: var(--accent);
  font: 400 1.5rem/1.2 var(--serif);
  letter-spacing: -0.005em;
}

.chapter__body {
  padding: 0.75rem var(--gutter) 3.25rem;
}

.entry {
  display: grid;
  gap: 0.125rem;
  padding: 1.125rem 0 1.25rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 3.75rem;
}

.entry:first-child { border-top: 0; }

.entry__when {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.8;
}

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

.entry__main p {
  max-width: 36em;
  text-wrap: pretty;
}

.entry__main p + p { margin-top: 0.875em; }

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
  margin-bottom: 0.25rem;
}

.entry__title,
.paper__title {
  color: var(--ink);
  font: 500 1.125rem/1.35 var(--sans);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.paper__title { margin-bottom: 0.375rem; }

.entry__link {
  padding-block: 0.25rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.entry__main .paper__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 0.25rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.paper__links a { padding-block: 0.25rem; }

.entry:target {
  border-top-color: transparent;
  background: var(--accent);
  box-shadow: -0.75rem 0 0 var(--accent), 0.75rem 0 0 var(--accent);
}

.entry:target .entry__when,
.entry:target .entry__main { color: var(--ink); }

.after-list {
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

/* The back cover: the last chapter closes the spread in one flat colour */

.chapter--contact {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--tint-contact);
  color: var(--on-dark);
  --accent: transparent;
}

.chapter--contact a:hover {
  background: var(--on-dark);
  color: var(--tint-contact);
}

.chapter--contact .chapter__title {
  position: static;
  padding-top: 3rem;
  font-size: clamp(2.25rem, 9vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.012em;
}

.chapter--contact .chapter__body { padding-top: 0; }

.contact__note {
  max-width: 28em;
  margin-bottom: 2.25rem;
  color: var(--on-dark-soft);
}

.reach__item {
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--rule-dark);
}

.reach dt {
  margin-bottom: 0.25rem;
  color: var(--on-dark-soft);
  font-size: 0.9375rem;
}

.reach dd a {
  font: 300 clamp(1.625rem, 8.2vw, 3.25rem)/1.2 var(--serif);
  letter-spacing: -0.012em;
}

.copy {
  display: block;
  min-height: 2.75rem;
  margin-top: 0.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark-soft);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.copy:hover { color: var(--on-dark); }
.copy[hidden] { display: none; }

.elsewhere {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
}

.elsewhere a { padding: 0.5625rem 0; }

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: auto;
  padding: 1.5rem var(--gutter);
  color: var(--on-dark-soft);
  font-size: 0.9375rem;
}

/* Phones keep the chapter colour in a strip, and the two ways to reach me in
   a bar at the thumb. The bar stays away while the cover or Contact is showing. */

.quick {
  position: fixed;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--tint-contact);
  color: var(--on-dark);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.25s ease, visibility 0.25s;
}

.quick.is-on {
  visibility: visible;
  transform: none;
}

.quick a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  font-weight: 500;
  text-decoration: none;
}

.quick a + a { border-left: 1px solid var(--rule-dark); }
.quick a:hover { background: none; text-decoration: underline; }

/* Wider than a phone, narrower than a spread */

@media (min-width: 37.5rem) {
  :root { --gutter: 2.5rem; }

  .entry {
    grid-template-columns: var(--when) minmax(0, 1fr);
    gap: 0 1.25rem;
  }

  .entry__when { line-height: 1.95; }
}

/* The open spread */

@media (min-width: 60rem) {
  :root {
    --gutter: clamp(2.5rem, 4.6vw, 5rem);
    --cover-pad: clamp(1.75rem, 2.8vw, 2.75rem);

    --name-size: clamp(3.25rem, min(5.7vw, 11vh), 6.25rem);
    --lead-size: clamp(1.875rem, 3vw, 3.125rem);
    --title-size: clamp(2.25rem, 3.2vw, 3rem);

    /* Noto Serif Display: each factor places the first baseline for that line-height,
       so the lead and the chapter titles sit level with "Reza" on the cover. */
    --baseline: calc(var(--cover-pad) + var(--name-size) * 0.878);
  }

  .layout {
    display: grid;
    grid-template-columns: clamp(21rem, 38vw, 40rem) minmax(0, 1fr);
    align-items: start;
  }

  .cover {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: var(--cover-pad);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .cover > .pause {
    top: calc(var(--cover-pad) - 0.625rem);
    right: var(--cover-pad);
  }

  .name { font-size: var(--name-size); }

  .role { margin-top: clamp(0.875rem, 2.7vh, 1.75rem); }

  .contents { padding-top: 1.5rem; }

  .row { padding-block: clamp(0.25rem, 0.9vh, 0.5625rem); }

  .row__name { font-size: clamp(1.25rem, min(1.95vw, 3.6vh), 1.875rem); }

  .direct { margin-top: clamp(0.75rem, 2.4vh, 1.75rem); }

  .direct__link { padding-block: clamp(0.3rem, 1vh, 0.6875rem); }

  /* Quiet the other chapters once the reader is inside one of them */
  [data-active] .row { opacity: 0.72; }
  [data-active="intro"] .row,
  [data-active] .row[aria-current="true"],
  [data-active] .row:hover,
  [data-active] .row:focus-visible { opacity: 1; }

  /* The back cover already shows both links, large */
  [data-active="contact"] .direct {
    opacity: 0;
    visibility: hidden;
  }

  main { min-width: 0; }

  .intro,
  .chapter__title,
  .chapter__body,
  .colophon {
    max-width: calc(var(--measure) + 2 * var(--gutter));
  }

  .intro {
    padding: calc(var(--baseline) - var(--lead-size) * 1.018) var(--gutter) clamp(4.5rem, 13vh, 8rem);
  }

  .lead { font-size: var(--lead-size); }

  .lead-after {
    margin-top: 1.75rem;
    font-size: 1.125rem;
  }

  .chapter { padding-top: calc(var(--baseline) - var(--title-size) * 0.988); }

  .chapter__title,
  .chapter--contact .chapter__title {
    position: static;
    padding: 0 var(--gutter) 1.25rem;
    background: none;
    font-size: var(--title-size);
    font-weight: 300;
    letter-spacing: -0.014em;
  }

  .chapter__body {
    padding: 0 var(--gutter) clamp(3rem, 8vh, 5rem);
  }

  .entry:first-child { border-top: 1px solid var(--rule); }

  .chapter--contact .chapter__body { padding-bottom: 3rem; }

  .colophon { padding: 1.5rem var(--gutter) var(--cover-pad); }

  .quick { display: none; }
}

/* Hovering a line of the contents shows the colour of that chapter */

@media (min-width: 60rem) and (hover: hover) {
  .cover:has(.row[href="#botline"]:hover),
  .cover:has(.row[href="#work"]:hover),
  .cover:has(.row[href="#papers"]:hover),
  .cover:has(.row[href="#education"]:hover) {
    color: var(--ink);
    --cover-rule: rgb(32 38 43 / 0.2);
    --floor-line: #fff;
    --floor-strength: 1;
  }

  .cover:has(.row[href="#botline"]:hover) { background: var(--tint-botline); }
  .cover:has(.row[href="#work"]:hover) { background: var(--tint-work); }
  .cover:has(.row[href="#papers"]:hover) { background: var(--tint-papers); }
  .cover:has(.row[href="#education"]:hover) { background: var(--tint-education); }
}

@media (forced-colors: active) {
  .floor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Printed, the page works as a one-glance CV with the contact details on top */

@media print {
  .skip, .floor, .pause, .contents, .quick, #contact { display: none; }

  body { background: none; font-size: 9.5pt; line-height: 1.4; }

  .layout { display: block; }

  .cover {
    position: static;
    height: auto;
    min-height: 0;
    padding: 0;
    background: none;
    color: #000;
  }

  .name { margin: 0; font-size: 26pt; font-weight: 400; }
  .name br { display: none; }

  .role { max-width: none; margin-top: 3pt; }

  .direct { margin-top: 6pt; border: 0; }

  .direct__link {
    justify-content: flex-start;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
  }

  .intro { max-width: none; padding: 10pt 0 0; }

  .lead { max-width: none; font-size: 12pt; font-weight: 400; line-height: 1.35; }
  .mark { display: inline; padding: 0; margin: 0; background: none; line-height: inherit; }
  .lead-after { max-width: none; margin-top: 3pt; color: #222; font-size: inherit; }

  .chapter { padding: 0; }

  .chapter__title {
    position: static;
    padding: 9pt 0 2pt;
    background: none;
    font-size: 14pt;
    font-weight: 400;
    break-after: avoid;
  }

  .chapter__body { padding: 0; }

  .entry {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: 3pt 0;
    break-inside: avoid;
  }

  .entry__when, .entry__main, .after-list { color: #222; }
  .entry__when { font-size: 9pt; line-height: 1.6; }
  .entry__main p { max-width: none; }
  .entry__title, .paper__title { font-size: 11pt; }
  .entry__link, .entry__main .paper__links { font-size: 9pt; }
  .entry__link, .paper__links a { padding-block: 0; }
  .after-list { padding-top: 4pt; }
}