/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;
  --ink: #000000;
  --quiet: #767676;
  --rule: #E4E4E4;
  --blank: #EFEFEF;
  --wrap: 820px;   /* one shared page width for header, About and Work */
  --gutter: 24px;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-name: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fillet: 33%;   /* shared squircle corner radius: portrait + every work image */
  --wash-office: #6E9A85;  /* muted seafoam — work done at an office */
  --wash-collab: #5C2A2A; /* dark, muted maroon — peer collaborations */
  --collab-inset: 48px;    /* how far collaboration images sit in from the left edge */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Keep section tops clear of the sticky header when jumping via the nav */
section[id] { scroll-margin-top: 64px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

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

img { display: block; width: 100%; height: auto; }

/* ---------- Header ---------- */
.site-header {
  font-family: var(--font-name);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  /* side padding lines the name and nav up with the page edges below */
  padding: 20px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: var(--paper);
}
/* About / Work: right-aligned, grey until hovered, then black (no underline) */
.site-header nav { margin-left: auto; }
.site-header nav a { margin-left: 20px; color: var(--quiet); transition: color 0.15s ease; }
.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--ink); text-decoration: none; }

/* ---------- Home ---------- */
/* Name above the portrait. The portrait stretches to the height of the bio text,
   so the photo's bottom lines up with the bio's last line. Links sit below. */
.home {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "name     ."
    "portrait bio"
    ".        contact";
  column-gap: 40px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8vh var(--gutter) 12vh;
}
.name {
  grid-area: name;
  font-family: var(--font-name);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.portrait {
  grid-area: portrait;
  position: relative;
  background: var(--blank);
  /* squircle: fillet radius ~1/3 of the frame's side */
  border-radius: var(--fillet);
  overflow: hidden;
}
.portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}

.bio { grid-area: bio; max-width: 34em; font-size: 13px; }
.bio p + p { margin-top: 1em; }
/* trim the extra space under the last line so text and photo end together */
.bio p:last-child { margin-bottom: -0.3em; }

.contact { grid-area: contact; margin-top: 16px; display: flex; gap: 20px; }
.contact li { list-style: none; }

/* ---------- Work stream ---------- */
.stream {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 20vh;
}
/* quiet divider + label where About hands off to Work */
.stream-label {
  color: var(--quiet);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-bottom: 6vh;
}
.entry + .entry { margin-top: 16vh; }

/* Each entry: a short write-up on the left (2/5), the image on the right (3/5) —
   the flip of the About section's photo/bio ratio. */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: 40px;
  align-items: center;
}
.entry-text { grid-column: 1; }
.description { max-width: 32em; }

.entry .image {
  grid-column: 2;
  display: block;
  position: relative;
  background: var(--blank);
  aspect-ratio: 3 / 2;
  /* same squircle fillet as the portrait */
  border-radius: var(--fillet);
  overflow: hidden;
}
.entry .image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.2s ease;
}
.entry .image:hover img { filter: grayscale(1) brightness(1.04); }

/* Office entries: laid out like the About section instead — image on the left,
   write-up on the right, same 5fr:6fr ratio. Keeps the normal 3:2 crop (rather
   than stretching to the text height, which squeezed short captions' photos
   into a thin strip). Tint stays. */
.entry--office {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.entry--office .entry-text { grid-column: 2; grid-row: 1; }
.entry--office .image { grid-column: 1; grid-row: 1; }

/* Collaboration entries: image left, write-up right, like office entries, but the
   image is sized between the two (own ~439px > collab ~373px > office ~333px at full
   width) and set in slightly from the left edge. */
.entry--collab {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  padding-left: var(--collab-inset);
}
.entry--collab .entry-text { grid-column: 2; grid-row: 1; }
.entry--collab .image { grid-column: 1; grid-row: 1; }

/* Lead collaborations (Vivian had the greater share of authorship): same size and
   inset, mirrored — write-up on the left, image on the right, set in from the right edge. */
.entry--collab.entry--lead {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  padding-left: 0;
  padding-right: var(--collab-inset);
}
.entry--collab.entry--lead .entry-text { grid-column: 1; }
.entry--collab.entry--lead .image { grid-column: 2; }

/* Color-coded by credit type: a muted duotone wash over the black-and-white photo
   (two stacked layers — one darkens, one carries the hue — so the color reads as a
   real tone rather than a thin highlight). Own work stays plain black-and-white. */
.entry--office .image::before,
.entry--office .image::after,
.entry--collab .image::before,
.entry--collab .image::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.entry--office .image::before { background: var(--wash-office); mix-blend-mode: multiply; opacity: 0.45; }
.entry--office .image::after  { background: var(--wash-office); mix-blend-mode: color;    opacity: 0.5; }
.entry--collab .image::before { background: var(--wash-collab); mix-blend-mode: multiply; opacity: 0.45; }
.entry--collab .image::after  { background: var(--wash-collab); mix-blend-mode: color;    opacity: 0.5; }

.caption { margin-top: 12px; }
.caption .credit { color: var(--quiet); }
.caption .category { color: var(--quiet); }

/* Placeholder blocks — delete once you add real images */
.placeholder { aspect-ratio: 3 / 2; background: var(--blank); }
.placeholder.tall { aspect-ratio: 4 / 5; }
.placeholder.wide { aspect-ratio: 16 / 9; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .home {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "portrait" "bio" "contact";
    padding-top: 24px;
  }
  .portrait { aspect-ratio: 1 / 1; }
  .bio { margin-top: 28px; }
  .entry + .entry { margin-top: 12vh; }
  .entry { grid-template-columns: 1fr; row-gap: 16px; }
  .entry .image { grid-column: 1; }
  .entry--office .entry-text { grid-column: 1; grid-row: auto; }
  .entry--office .image { grid-row: auto; }
  .entry--collab, .entry--collab.entry--lead { padding-left: 0; padding-right: 0; grid-template-columns: 1fr; }
  .entry--collab.entry--lead .entry-text,
  .entry--collab.entry--lead .image { grid-column: 1; }
  .entry--collab .entry-text { grid-column: 1; grid-row: auto; }
  .entry--collab .image { grid-row: auto; }
}

/* ---------- Project pages (projects/*.html) ---------- */
/* Same width, fonts and colors as the homepage; only layout classes are new. */
.project {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8vh var(--gutter) 20vh;
}
.project-title {
  font-family: var(--font-name);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.project-sub { margin-top: 12px; }
.project-meta { margin-top: 12px; color: var(--quiet); }

.chapter { margin-top: 16vh; }

/* Links on project pages are always underlined (the header nav is outside .project and is unaffected) */
.project a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.project a:hover { opacity: 0.6; }
.chapter-label {
  color: var(--quiet);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-bottom: 6vh;
}

/* One slide plus its annotation. The grey box holds the slide's place until its image loads. */
.slide + .slide { margin-top: 12vh; }
.slide-image { background: var(--blank); aspect-ratio: 3 / 2; }
.slide-image img { height: 100%; object-fit: cover; }
.slide-title { margin-top: 12px; }
.slide-credit { margin-top: 12px; color: var(--quiet); text-align: right; }
.slide-credit + .slide-title { margin-top: 2px; }
/* Drawings keep their own shape instead of being cropped to 3:2 */
.slide-image.natural { background: none; aspect-ratio: auto; }
.slide-image.natural img { height: auto; object-fit: contain; }
/* Two images side by side (stacked on phones). Each image's width follows its shape
   (--r = width / height, set on the image box), so both sit at the same height. */
.pair { display: flex; gap: 16px; align-items: flex-start; }
.pair > * { flex: var(--r, 1) 1 0; min-width: 0; }
/* Narrower centered column for drawings and tall images: the image and its text share it.
   narrow = square-ish or landscape drawings; portrait = tall images. */
.slide.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.slide.portrait { max-width: 460px; margin-left: auto; margin-right: auto; }
/* A short quotation inside the notes */
.notes blockquote { margin: 1em 0; padding-left: 16px; border-left: 1px solid var(--rule); }
.notes blockquote cite { display: block; margin-top: 4px; font-style: normal; color: var(--quiet); }

.notes { margin-top: 20px; font-size: 13px; }
.notes p + p { margin-top: 1em; }
.notes .term { font-weight: 500; }
.notes .aside { color: var(--quiet); }

/* Panelist responses: the speaker's name and question in grey, the summary in italics */
.responses { margin-top: 20px; font-size: 13px; }
.response + .response { margin-top: 1em; }
.response .who { color: var(--quiet); }
.response .question { color: var(--quiet); }
.response em { display: block; margin-top: 2px; }
/* Interview exchange: "Name: question" then "Name: answer", each on its own line */
.exchange + .exchange { margin-top: 1.4em; }
.exchange .response + .response { margin-top: 0.5em; }
.response.turn em { display: inline; margin-top: 0; }

.thesis {
  font-family: var(--font-name);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 28px 0 0;
}

.panelists { list-style: none; margin-top: 20px; display: grid; gap: 12px; font-size: 13px; }
.panelists .role { color: var(--quiet); }

@media (max-width: 720px) {
  .project { padding-top: 24px; }
  .chapter { margin-top: 12vh; }
  .pair { flex-direction: column; }
  .pair > * { flex: none; width: 100%; }
}