/* Typography and spacing modelled on gabriellesanson.com */
:root {
  --bg: #fff;
  --ink: #000;
  --muted: #888;
  --side: 250px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.4 "Times New Roman", Times, serif;
  max-width: 1366px;
  margin: 0 auto;
  position: relative;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ── sidebar ───────────────────────────── */
.side {
  position: fixed; top: 0; bottom: 0;
  width: var(--side);
  padding: 62px 0 0 75px;
}
.name { font-size: 16px; font-weight: 700; display: inline-block; margin-bottom: 16px; }
.nav { list-style: none; font-size: 12px; line-height: 22px; }

main { margin-left: var(--side); padding: 108px 27px 96px; min-height: 100vh; }

/* ── works grid: thumbnails up to 200px, in 275px columns ──
   Each box takes its photo's height (no empty space above wide photos);
   tiles in a row line up along the bottom so the captions align. */
.sec + .sec { margin-top: 40px; }
.sec h2 { font-size: 12px; font-weight: 700; margin-bottom: 24px; }
/* "Selected works" divider after Exhibitions; its sections get lighter sub-headings */
h2.group { font-size: 12px; font-weight: 700; margin: 72px 0 28px; }
.sec.sub h2 { font-weight: 400; }
.sec.sub + .sec.sub { margin-top: 24px; }
.grid { display: flex; flex-wrap: wrap; align-items: flex-end; }
.tile { display: block; width: 275px; margin-bottom: 56px; }
.tile .frame { width: 200px; display: flex; justify-content: center; }
.tile img { max-width: 200px; max-height: 200px; width: auto; height: auto; }
.tile .cap {
  width: 200px; margin-top: 20px; text-align: center;
  font-size: 11px; line-height: 1.2; font-style: italic;
}

/* ── single project ────────────────────── */
.project { max-width: 900px; font-size: 12px; }
.project header { margin-bottom: 24px; }
.project h1 { font-size: 12px; font-weight: 400; font-style: italic; }
.project .info { margin-top: 2px; }
/* photo column: smaller by default, bigger for large works */
.shots { --col: 560px; --gap: 16px; }
.shots.large { --col: 880px; }
.shot { width: min(100%, var(--col)); margin: 0 0 40px; }
.shot figure { margin: 0; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; }
/* side by side: flex shares follow each photo's proportions, so heights match */
.shot.row { display: flex; gap: var(--gap); align-items: flex-start; }
/* a portrait (or square) on its own is centred in the column */
.shot.lone figure { width: 62%; margin: 0 auto; }
.pager { display: flex; justify-content: space-between; gap: 24px; padding-top: 8px; }

/* ── text pages (cv, contact) ──────────── */
.text { max-width: 640px; font-size: 12px; line-height: 1.35; }
.text h2 { font-size: 12px; font-weight: 700; margin: 22px 0 6px; }
.text h2:first-child { margin-top: 0; }
.text p { margin-bottom: 6px; }
.cv-row { margin-bottom: 4px; padding-left: 56px; text-indent: -56px; }
.cv-row .yr { font-weight: 700; display: inline-block; width: 56px; text-indent: 0; }

/* ── phones ────────────────────────────── */
@media (max-width: 760px) {
  .side { position: static; width: auto; padding: 24px 16px 0; }
  .nav { display: flex; gap: 16px; }
  main { margin-left: 0; padding: 32px 16px 64px; }
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; align-items: end; }
  .tile { width: auto; margin-bottom: 0; }
  .tile .frame, .tile .cap { width: auto; }
  .tile img { max-width: 100%; max-height: 44vw; }
  .tile .cap { margin-top: 12px; }
  .shot { margin-bottom: 20px; }
  .shots { --gap: 8px; }
}
.text .note { margin-top: 28px; }