/* 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: three to a row (200px columns, 75px apart) ──
   Every thumbnail is the same height (a 3:2 landscape fills the column), so rows line up;
   portraits and squares are narrower, and anything wider than 3:2 is trimmed at the sides. */
#works { width: 750px; max-width: 100%; }
.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: 56px 0 28px; }
.sec.sub h2 { font-weight: 400; }
.sec.sub + .sec.sub { margin-top: 80px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 200px); gap: 56px 75px; align-items: start; }
.tile { display: block; }
.tile .frame { display: flex; justify-content: center; }
.tile img { height: 133px; width: auto; max-width: 100%; object-fit: cover; }
.tile .cap { margin-top: 20px; text-align: center; font-size: 11px; line-height: 1.2; font-style: italic; }
/* single-work sections: the name sits above the photo, flush with its left edge;
   the pair is centred in its column, like the narrower photos in the other rows */
.grid.labelled .tile { justify-self: center; }
.tile h3 { font-size: 12px; font-weight: 400; margin-bottom: 12px; }
/* two to a row when three don't fit beside the sidebar */
@media (max-width: 1080px) { #works { width: 475px; } }

/* ── 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; }
  #works { width: auto; }
  .grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  h2.group { margin-top: 48px; }
  .sec.sub + .sec.sub { margin-top: 48px; }
  /* same height for all: a 3:2 landscape fills the column (page width less gutters, halved) */
  .tile img { height: calc((100vw - 48px) / 3); }
  .tile .cap { margin-top: 12px; }
  .tile h3 { margin-bottom: 8px; }
  .shot { margin-bottom: 20px; }
  .shots { --gap: 8px; }
}
.text .note { margin-top: 28px; }
.contact-anim { width: 600px; max-width: 100%; height: auto; margin-top: 32px; }