/* ------------------------------------------------------------------
   Mahan Fathi — a drafting sheet.
   Vellum by day, blueprint by night.
   ------------------------------------------------------------------ */

:root {
  --paper:   #f5f3ee;
  --ink:     #1b1d22;
  --ink-2:   #555961;
  --ink-3:   #686b73;
  --mark:    #8b8e95;
  --pencil:  #3a3d44;
  --ground:  .22;
  --rule:    #e0ddd5;
  --rule-2:  #c8c4ba;
  --accent:  #2b4f9c;
  --red:     #b4452f;
  --grid:    rgba(43, 79, 156, 0.035);
  --select:  rgba(43, 79, 156, 0.14);
  --ghost:   rgba(43, 79, 156, 0.11);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nastaliq: "Noto Nastaliq Urdu", "Vazirmatn", "Geeza Pro", serif;

  --lab: 8.5rem;   /* margin column */
  --gap: 2.5rem;   /* gutter */
  --col: 34rem;    /* text column */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #102542;
    --ink:    #eaf0f8;
    --ink-2:  #b2c2da;
    --ink-3:  #7891b5;
    --mark:   #7891b5;
    --pencil: #eef3fb;
    --ground: .19;
    --rule:   #20406b;
    --rule-2: #31578c;
    --accent: #a6d4ff;
    --red:    #ffa48f;
    --grid:   rgba(166, 212, 255, 0.055);
    --select: rgba(166, 212, 255, 0.22);
    --ghost:  rgba(166, 212, 255, 0.11);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:  #102542;
  --ink:    #eaf0f8;
  --ink-2:  #b2c2da;
  --ink-3:  #7891b5;
  --mark:   #7891b5;
  --pencil: #eef3fb;
  --ground: .19;
  --rule:   #20406b;
  --rule-2: #31578c;
  --accent: #a6d4ff;
  --red:    #ffa48f;
  --grid:   rgba(166, 212, 255, 0.055);
  --select: rgba(166, 212, 255, 0.22);
  --ghost:  rgba(166, 212, 255, 0.11);
  color-scheme: dark;
}

/* ---------- base ---------- */

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

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}
/* nothing, not even the margin figure mid-resize, may scroll the page sideways
   (clip, unlike hidden, keeps the sticky section labels working) */
html, body { overflow-x: clip; }
@media (min-width: 760px) { html { font-size: 19px; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem;
  background-position: -1px -1px;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.58;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.switching *, .switching *::before, .switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

::selection { background: var(--select); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
i, em { font-style: italic; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .19em;
  text-decoration-color: var(--rule-2);
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

code {
  font-family: var(--mono);
  font-size: .8em;
  letter-spacing: -.01em;
}

.nw { white-space: nowrap; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: .4rem .7rem;
  background: var(--ink);
  color: var(--paper);
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 10;
}
.skip:focus { top: 1rem; color: var(--paper); }

/* ---------- the sheet ---------- */

.sheet {
  max-width: calc(var(--lab) + var(--gap) + var(--col) + 2 * 1.75rem);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.masthead,
.intro,
.section {
  display: grid;
  grid-template-columns: var(--lab) minmax(0, 1fr);
  column-gap: var(--gap);
}

/* small-caps-ish mono labels, used throughout */
.mark,
.masthead nav a,
.label,
.sublabel,
.when,
.where,
.venue,
.elsewhere,
.tb-k,
.copy,
.sheet-switch button {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .6rem;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.masthead {
  align-items: baseline;
  padding: 2.4rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.masthead::after {               /* a short ink tick where the gutter falls */
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--lab);
  border-bottom: 1px solid var(--ink);
}

.mark {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .22em;
}
.mark span { color: var(--ink-3); margin: 0 .1em; }

.masthead nav {
  display: flex;
  gap: 1.7rem;
  justify-content: flex-end;
}
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--accent); }
.ext { font-size: .9em; margin-left: .2em; }

/* ---------- intro ---------- */

.intro {
  padding-top: 3.6rem;
  grid-template-areas:
    "photo head"
    "links bio";
}

.portrait {
  grid-area: photo;
  position: relative;
  align-self: last baseline;
  width: 100%;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* printer's crop marks, sitting just outside each corner */
.crop {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.crop::before,
.crop::after {
  content: "";
  position: absolute;
  background: var(--mark);
}
.crop::before { width: 10px; height: 1px; }
.crop::after  { width: 1px;  height: 10px; }

.crop.tl { left: -14px;  top: -14px; }
.crop.tr { right: -14px; top: -14px; }
.crop.bl { left: -14px;  bottom: -14px; }
.crop.br { right: -14px; bottom: -14px; }

/* each mark continues an edge of the photo outward, stopping short of it */
.crop.tl::before { left: 0;  bottom: 0; }
.crop.tl::after  { right: 0; top: 0; }
.crop.tr::before { right: 0; bottom: 0; }
.crop.tr::after  { left: 0;  top: 0; }
.crop.bl::before { left: 0;  top: 0; }
.crop.bl::after  { right: 0; bottom: 0; }
.crop.br::before { right: 0; top: 0; }
.crop.br::after  { left: 0;  bottom: 0; }

.intro-head {
  grid-area: head;
  align-self: last baseline;
}

/* The English name, with the Persian one set large and faint behind it,
   like a watermark in the sheet. Both scale off the same size. */
.names {
  --name: clamp(2.5rem, 7vw, 3.35rem);
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin-bottom: .55rem;
}

h1 {
  font-size: var(--name);
  line-height: .98;
  letter-spacing: -.018em;
  font-weight: 380;
  margin-left: -.04em;           /* optical alignment of the M stem */
}

.fa {
  font-family: var(--nastaliq);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.names .fa {
  position: absolute;
  z-index: -1;
  /* Nastaliq ink runs ~.45em past its line box on both sides. Lift it so
     the long tails settle on the English baseline and clear the strap, and
     nudge it right so ماهان trails past "Fathi" while فتحی sits over "Mahan". */
  left: 50%;
  top: 50%;
  transform: translate(-46%, -103%);
  font-size: calc(var(--name) * 1.75);
  line-height: 1;
  white-space: nowrap;
  color: var(--ghost);
  pointer-events: none;
  user-select: none;
}
.names .fa-first {               /* the first name rides higher, a little under half its ink height */
  display: inline-block;
  transform: translateY(-.56em);
}

.strap {
  font-size: 1.12rem;
  line-height: 1.38;
  color: var(--ink-2);
  max-width: 24em;
}

.bio {
  grid-area: bio;
  margin-top: 2.2rem;
  max-width: var(--col);
  hanging-punctuation: first;
  align-self: first baseline;
}
.bio p + p { margin-top: .9em; }
.aside { font-style: italic; }

.elsewhere {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 2.2rem;
  align-self: first baseline;
}
.elsewhere a { text-decoration: none; color: var(--ink-2); }
.elsewhere a:hover { color: var(--accent); }
.elsewhere .ext { text-transform: none; letter-spacing: .04em; color: var(--ink-3); margin: 0; }

/* ---------- sections ---------- */

.section {
  margin-top: 4.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.section::before {               /* ink tick over the margin column */
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 1.4rem;
  border-top: 1px solid var(--ink);
}

.section > .label {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: first baseline;
  position: sticky;
  top: 1.6rem;
  color: var(--ink-3);
}
.section > :not(.label) { grid-column: 2; }
.section > .label + * { align-self: first baseline; }

.note {
  margin-top: 1.4rem;
  font-size: .86rem;
  font-style: italic;
  color: var(--ink-3);
}
.note a { color: var(--ink-2); }

/* entries: experience & education */

.entries { display: flex; flex-direction: column; gap: 1.55rem; }
.entries.compact { gap: 1.05rem; }

.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
}

.entry h3 {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.003em;
}
.entry h3 a { text-decoration-color: var(--rule-2); }
.entry h3 a:hover { text-decoration-color: currentColor; }
.entry h3 .sub {
  font-weight: 400;
  font-style: italic;
  font-size: .86em;
  color: var(--ink-3);
  margin-left: .25em;
}

.when {
  flex: none;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.role {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.45;
}
.where {
  font-style: normal;
  color: var(--ink-3);
  white-space: nowrap;
  margin-left: auto;
  letter-spacing: .1em;
}

.what {
  margin-top: .35rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--col);
}
.what a { color: var(--ink); }
.what code { color: var(--ink); }

/* papers */

.papers { display: flex; flex-direction: column; gap: 1.5rem; }
.venue { color: var(--ink-3); }
.paper h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  font-weight: 450;
  margin: .1rem 0 .3rem;
}
.paper h3 a { text-decoration-color: var(--rule-2); }
.authors { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.me { color: var(--ink); font-weight: 500; }

.sublabel {
  margin: 3.6rem 0 1.3rem;
  color: var(--ink-3);
}

/* ---------- title block ---------- */

.titleblock {
  margin: 5.5rem 0 3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "name  name  mail  mail"
    "links links sheet meta";
  border: 1px solid var(--ink);
  font-size: .92rem;
}
.tb-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem .75rem .6rem;
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  min-width: 0;
}
.tb-k { color: var(--ink-3); font-size: .5rem; letter-spacing: .16em; }
.tb-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }

.tb-name  { grid-area: name; }
.tb-mail  { grid-area: mail; border-right: 0; }
.tb-links { grid-area: links; border-bottom: 0; }
.tb-sheet { grid-area: sheet; border-bottom: 0; }
.tb-scale { grid-area: meta; border: 0; }

.tb-name .tb-v { font-size: 1.05rem; gap: .2rem .8rem; justify-content: space-between; }
.tb-name .fa { font-size: .95rem; line-height: 1.6; }
.tb-links a { text-decoration: none; }
.tb-links a:hover { text-decoration: underline; }

.copy,
.sheet-switch button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-3);
  cursor: pointer;
}
.copy:hover,
.sheet-switch button:hover { color: var(--accent); }
.copy.done { color: var(--accent); }

.sheet-switch { gap: .2rem .9rem; }
.sheet-switch button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}
html:not(.js) .tb-sheet .tb-v,
html:not(.js) .copy { visibility: hidden; }

/* ---------- the plotter (wide screens only) ---------- */

.plotter {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
}
.plotter.on { display: block; }
@media (max-width: 1179.98px) { .plotter.on:not(.ground) { display: none; } }
.plotter canvas { display: block; }

/* without a margin, the figure is drawn large and faint behind the text */
.plotter.ground { z-index: -1; }
.plotter.ground canvas { opacity: var(--ground); }
.plotter.ground .plot-legend { display: none; }

.plot-legend {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plot-legend span {
  display: block;
  height: 13px;
  line-height: 13px;
  padding-left: 20px;
  white-space: nowrap;
}
.plot-legend .fig { padding-left: 0; margin-bottom: 6px; }

/* ---------- small screens ---------- */

@media (max-width: 759px) {
  :root { --lab: 0px; --gap: 0px; }

  .sheet { padding: 0 1.15rem; }

  .masthead,
  .intro,
  .section { grid-template-columns: minmax(0, 1fr); }

  .masthead { padding-top: 1.6rem; display: flex; justify-content: space-between; }
  .masthead::after { width: 1.4rem; }

  .intro {
    padding-top: 2.4rem;
    grid-template-areas: "photo" "head" "bio" "links";
  }
  .elsewhere { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.6rem; }

  .entry-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .entry-head .when { order: -1; }
  .portrait { width: 7.2rem; margin: 14px 0 4.2rem; }
  .names .fa { font-size: calc(var(--name) * 1.6); }

  .section > .label,
  .section > :not(.label) { grid-column: 1; }
  .section > .label { position: static; grid-row: auto; padding: 0 0 1rem; }

  .titleblock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name  name"
      "mail  mail"
      "links links"
      "sheet meta";
  }
  .tb-name,
  .tb-mail  { border-right: 0; }
  .tb-links { border-right: 0; border-bottom: 1px solid var(--rule-2); }
}

/* ---------- motion & print ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  :root, :root[data-theme="dark"] {
    --paper: #fff; --ink: #000; --ink-2: #333; --ink-3: #666;
    --rule: #ccc; --rule-2: #999; --accent: #000;
  }
  html { font-size: 10.5pt; }
  body { background: #fff; }
  .masthead nav, .skip, .plotter, .tb-sheet, .copy { display: none !important; }
  .section { break-inside: avoid; margin-top: 1.6rem; }
  .section > .label { position: static; }
  .entry { break-inside: avoid; }
  a { text-decoration: none; }
}