/* ==========================================================
   EDIT THESE VALUES. Everything on the site reads from here.
   ========================================================== */
:root {
  --font: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-caption: 300;   /* Extra Light (italic for captions) */
  --weight-text: 500;      /* Roman */
  --weight-heading: 900;   /* Black */

  --text-size: 0.875rem;   /* 1rem = 16px, so this is 14px */
  --line-height: 1.15;

  --orange: #E84E24;       /* main text */
  --green: #8FBF21;        /* selection, hover, columns C and D */
  --bg: #F9EFDB;           /* page background */

  --margin: 1.25rem;       /* space at the page edges */
  --gap: 1.5rem;           /* space between grid columns */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  padding: var(--margin);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: var(--weight-text);
  font-style: normal;
  line-height: var(--line-height);
  color: var(--orange);
  background: var(--bg);
}

/* Highlighted text turns green */
::selection { background: var(--green); color: var(--bg); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

strong, h1, h2 { font-weight: var(--weight-heading); }
.caption { font-weight: var(--weight-caption); font-style: italic; }
sup { font-size: 0.65em; line-height: 0; }
p { margin: 0; }

/* ---------- Header and navigation ---------- */
.site-name {
  margin: 0 0 1.15em;
  font-size: inherit;
  text-transform: uppercase;
}

nav { margin: 0 0 1.15em; }
nav a { display: block; font-weight: var(--weight-heading); text-transform: uppercase; }
nav a .caption { text-transform: none; }          /* captions keep sentence case */
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- CV page ---------- */
.intro { max-width: 75%; margin-bottom: 0.5rem; }

.cv { --cols: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.9fr); max-width: 64rem; }
.cv h2 { font-size: inherit; margin: 1.75em 0 0.35em; }

/* Each row is a 4-column grid. minmax(0, ...) keeps columns lined up. */
.row { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); margin: 0 0 0.35em; }
.row .info { color: var(--green); }               /* column D: year */
.row .note { color: var(--green); }               /* column C */
.row .light { font-weight: var(--weight-caption); }  /* Extra Light, not italic */

/* Equivalents of merged cells */
.all  { grid-column: 1 / -1; }   /* across columns A to D */
.ab   { grid-column: 1 / 3; }    /* across columns A to B */
.tall { grid-row: span 2; }      /* down two rows         */

/* ---------- Image pages (used later) ---------- */
.scroll-page img { display: block; width: 100%; height: auto; margin: 0 0 var(--margin); }

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  :root { --margin: 1rem; }
  .intro { max-width: none; }
  .row { grid-template-columns: 1fr; margin-bottom: 0.9em; }
  .row > span:empty { display: none; }
  .all, .ab { grid-column: auto; }
  .tall { grid-row: auto; }
}