/* paingheinhtet.com
   Black edition. One family (Archivo) on two widths, one accent, rules instead of cards.
   Colour belongs to the figures; the page itself stays monochrome. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* hex first for browsers without oklch(); same values, converted */
  --ground: #090807;
  --raise: #12100e;
  --rule: #282623;
  --rule-2: #4b4743;
  --ink: #eeebe4;
  --ink-2: #bbb7af;
  --ink-3: #8f8c84;
  --accent: #e9ae57;
  --accent-ink: #171008;
  --paper: #fbfaf7;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --narrow: 72%;                       /* font-stretch for names and headlines */

  --wrap: 74rem;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --col-gap: clamp(1.25rem, 2.4vw, 2.25rem);
  --section: clamp(5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --ground: oklch(13.5% 0.004 70);
    --raise: oklch(17.5% 0.005 70);
    --rule: oklch(27% 0.006 70);
    --rule-2: oklch(40% 0.008 70);
    --ink: oklch(94% 0.010 85);
    --ink-2: oklch(78% 0.012 85);
    --ink-3: oklch(64% 0.012 85);
    --accent: oklch(79% 0.125 75);
    --accent-ink: oklch(18% 0.02 75);
    --paper: oklch(98.5% 0.004 85);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--rule-2);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

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

.skip {
  position: absolute; left: var(--gut); top: -4rem; z-index: 50;
  padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; border-radius: 2px;
}
.skip:focus { top: .75rem; color: var(--accent-ink); }

/* small uppercase label: section headings, ledger groups */
.label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.bar__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.5rem;
}
.bar__name {
  font-weight: 700; font-stretch: 85%; font-size: 1.0625rem;
  letter-spacing: .01em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.bar nav {
  display: flex; gap: clamp(1rem, 2.2vw, 1.9rem);
  margin-left: auto;
  font-size: .9375rem;
}
.bar nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; padding-block: .9rem; }
.bar nav a:hover { color: var(--accent); }
.bar__cv {
  padding: .4rem .8rem;
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.bar__cv span { color: var(--ink-3); font-weight: 500; margin-left: .15em; }
.bar__cv:hover { border-color: var(--accent); }

/* ── Introduction ───────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem); }

.hero h1 {
  max-width: 17ch;
  font-size: clamp(2.6rem, 1.15rem + 6.1vw, 6rem);
  font-weight: 800;
  font-stretch: var(--narrow);
  line-height: .94;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2.5rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.75rem);
}
.hero__text { grid-column: 1 / span 7; }
.hero__facts { grid-column: 9 / span 4; align-self: start; }

.lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.55; color: var(--ink); max-width: 38ch; }
.avail { margin-top: 1.1rem; max-width: 46ch; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin-top: 2rem; }
.btn {
  display: inline-block; padding: .7rem 1.15rem;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 650; text-decoration: none; border-radius: 2px;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { color: var(--accent-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* key facts, read like the header block of a datasheet */
.kv > div {
  display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); column-gap: 1rem;
  padding-block: .62rem;
  border-top: 1px solid var(--rule);
}
.kv > div:last-child { border-bottom: 1px solid var(--rule); }
.kv dt { font-size: .8125rem; line-height: 1.55; padding-top: .12rem; color: var(--ink-3); }
.kv dd { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.hero__facts dd { color: var(--ink); }

/* page load: one staggered rise, nothing else moves on its own */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero__text, .hero__facts { animation: rise .8s var(--ease) both; }
  .hero__text { animation-delay: .09s; }
  .hero__facts { animation-delay: .18s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* ── The stripe figure ──────────────────────────────────────────────────── */
.band { padding-bottom: var(--section); }
.band__axis {
  position: relative; height: 2.1rem;
  font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.band__axis span { position: absolute; bottom: .55rem; white-space: nowrap; }
.band__low { left: var(--gut); }
.band__high { right: var(--gut); }
.band__mark { padding-left: .55rem; color: var(--ink-2); }
.band__mark i { font-style: normal; }
.band__mark::before {
  content: ""; position: absolute; left: 0; bottom: -.55rem;
  width: 1px; height: 1.75rem; background: var(--ink-2);
}
.band__img {
  width: 100%; height: clamp(6.5rem, 15vw, 12.5rem);
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.band figcaption {
  margin-top: 1.1rem; max-width: 62ch;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-3);
}
.band figcaption.wrap { max-width: none; }
.band figcaption span { display: block; max-width: 62ch; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding-bottom: var(--section); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .9rem 2.5rem;
  padding-bottom: 1.1rem;
}

/* the square that opens every status line */
.mark {
  display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem;
  background: var(--accent); vertical-align: .02em; flex: none;
}

.status {
  display: flex; align-items: baseline;
  font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.status .mark { position: relative; top: -.02em; }

/* ── Selected work ──────────────────────────────────────────────────────── */
.work {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--rule-2);
}
.work:last-child { padding-bottom: 0; }
.work:first-of-type { border-top: 0; padding-top: 0; }

.work__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1rem;
  align-items: end;
}
.work__name {
  grid-column: 1 / span 5;
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem);
  font-weight: 800;
  font-stretch: var(--narrow);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
}
.work__intro { grid-column: 6 / span 7; padding-bottom: .35rem; }
.work__what {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.4;
  font-weight: 500; color: var(--ink); max-width: 44ch; text-wrap: balance;
}
.work__intro .status { margin-top: .7rem; }

.work__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.work__summary { max-width: 58ch; }
.work__more { margin-top: 1.6rem; }

.links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-weight: 600; }
.links a::after { content: "\2009\2192"; color: var(--accent); }
.tools { margin-top: .9rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-3); max-width: 58ch; }

/* figure beside the text */
.work--side .work__text { grid-column: 1 / span 5; }
.work--side .work__figs { grid-column: 6 / span 7; align-self: start; position: sticky; top: 5.25rem; }
.work--side .kv { margin-top: 1.9rem; }

/* figure below, text and facts side by side above it */
.work--wide .work__text { grid-column: 1 / span 5; }
.work--wide .kv { grid-column: 6 / span 7; align-self: start; }
.work--wide .work__figs {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--col-gap); align-items: start;
}

/* ── Figures ────────────────────────────────────────────────────────────── */
.fig img { width: 100%; }
.fig figcaption {
  margin-top: .8rem; max-width: 62ch;
  font-size: .8125rem; line-height: 1.55; color: var(--ink-3);
}
/* plots and dataset figures: white plates, like figures in a paper */
.fig--plate .fig__in { background: var(--paper); padding: clamp(.6rem, 1.6vw, 1.25rem); border-radius: 2px; }
/* video frames keep a hairline so dark footage has an edge */
.fig--frame .fig__in { border: 1px solid var(--rule-2); border-radius: 2px; overflow: hidden; }
/* renders float on the ground, no frame */
.fig--render .fig__in { padding-inline: clamp(0rem, 2vw, 1.5rem); }

/* ── More work: a ledger ────────────────────────────────────────────────── */
.ledger__group { padding-block: 2.25rem .9rem; }
.ledger__group:first-child { padding-top: .5rem; }

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1.1rem;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.row__id { grid-column: 1 / span 3; }
.row__name {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 750; font-stretch: var(--narrow);
  line-height: 1.02; color: var(--ink);
}
.row__what { margin-top: .5rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); max-width: 26ch; }
.row__text { grid-column: 4 / span 6; }
.row__text > p + p { margin-top: .8rem; }
.row__text .links { margin-top: 1.1rem; }
.row__fig { grid-column: 10 / span 3; }
.row__fig figcaption { margin-top: .5rem; }

/* ── Publication ────────────────────────────────────────────────────────── */
.cite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1rem;
  padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); }
.cite__ref { grid-column: 1 / span 7; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); }
.cite__ref cite { font-style: normal; font-weight: 600; color: var(--ink); }
.cite__note { grid-column: 9 / span 4; font-size: .9375rem; line-height: 1.6; color: var(--ink-3); }

/* ── Background and skills ──────────────────────────────────────────────── */
.time > li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  padding-block: 1.25rem; border-top: 1px solid var(--rule);
}
.time > li:last-child { border-bottom: 1px solid var(--rule); }
.time__when { grid-column: 1 / span 2; font-size: .9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.time__what { grid-column: 3 / span 5; font-weight: 600; color: var(--ink); line-height: 1.45; }
.time__detail { grid-column: 8 / span 5; font-size: .9375rem; line-height: 1.6; }

.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); }
.skills > div { grid-template-columns: 8.5rem minmax(0, 1fr); padding-block: .95rem; }
.skills > div:nth-last-child(2) { border-bottom: 1px solid var(--rule); }

/* ── Contact ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule-2); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.foot__mail {
  display: inline-block; margin-top: 1.1rem;
  font-size: clamp(1.9rem, 1rem + 4.2vw, 4.25rem);
  font-weight: 800; font-stretch: var(--narrow); line-height: 1; letter-spacing: -.01em;
  text-decoration-thickness: 2px; text-underline-offset: .14em;
  overflow-wrap: anywhere;
}
.foot__avail { margin-top: 1.5rem; max-width: 52ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: .6rem 1.9rem; margin-top: 2.25rem; font-weight: 600; }
.foot__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .8125rem; color: var(--ink-3);
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .hero__text, .hero__facts { grid-column: 1 / -1; }
  .hero__facts { max-width: 34rem; }

  .work__name, .work__intro { grid-column: 1 / -1; }
  .work__intro { padding-bottom: 0; }
  .work--side .work__text, .work--side .work__figs,
  .work--wide .work__text, .work--wide .kv { grid-column: 1 / -1; }
  /* stacked: show the picture before the long table */
  .work--side .work__figs { position: static; order: -1; }

  .row__id { grid-column: 1 / -1; }
  .row__what { max-width: none; }
  .row__text { grid-column: 1 / span 8; }
  .row__fig { grid-column: 9 / span 4; }

  .cite__ref, .cite__note { grid-column: 1 / -1; }
  .time__when { grid-column: 1 / -1; }
  .time__what { grid-column: 1 / span 6; }
  .time__detail { grid-column: 7 / span 6; }
  .skills { grid-template-columns: minmax(0, 1fr); }
  .skills > div:nth-last-child(2) { border-bottom: 0; }
}

@media (max-width: 40rem) {
  html { scroll-padding-top: 6.5rem; }
  body { font-size: 1rem; }

  /* the section links move to their own row and scroll sideways if they must */
  .bar__in { flex-wrap: wrap; gap: 0 1rem; }
  .bar__name { padding-block: .85rem .1rem; }
  .bar__cv { margin-left: auto; margin-top: .55rem; }
  .bar nav {
    order: 3; width: 100%; margin-left: 0; gap: 1.15rem; justify-content: space-between;
    overflow-x: auto; scrollbar-width: none;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { padding-block: .55rem .8rem; }

  .kv > div { grid-template-columns: 6.25rem minmax(0, 1fr); }
  .band__mark i { display: none; }

  .row__text, .row__fig { grid-column: 1 / -1; }
  .row__fig { max-width: 22rem; }
  .time__what, .time__detail { grid-column: 1 / -1; }
  .time__detail { margin-top: .35rem; }
  .skills > div { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
}

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

/* ── Paper ──────────────────────────────────────────────────────────────── */
@media print {
  :root {
    --ground: #fff; --raise: #fff; --rule: #cfcfcf; --rule-2: #9a9a9a;
    --ink: #000; --ink-2: #1c1c1c; --ink-3: #4a4a4a; --accent: #8a5a00; --paper: #fff;
  }
  .bar, .skip, .actions { display: none; }
  body { font-size: 10.5pt; }
  .work, .row { break-inside: avoid; }
  a { text-decoration: none; }
}