/* ---------- Tokens ---------- */

:root {
  --ink: #101010;
  --paper: #ffffff;
  --placeholder: #c4ccdf;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", Helvetica, Arial, sans-serif;

  --edge: 12px;          /* page margin */
  --footer-height: 64px;
  --blur: blur(2px);
  --ease: 300ms ease-in-out;
}

/* ---------- Base ---------- */

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

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.italic { font-style: italic; }
.underline { text-decoration: underline; }
.small { font-size: 12px; }
.label { font-size: 16px; }

/* Grey box behind images while they load */
.frame { background: var(--placeholder); overflow: hidden; }

/* ---------- Layout ---------- */

.page {
  padding: 13px var(--edge) calc(var(--footer-height) + 32px);
}

.header { display: flex; flex-direction: column; gap: 10px; }
.header .name { font-size: 30px; }
.header .lead { font-size: 14px; }
.header .title { font-size: 24px; }

.section { display: flex; flex-direction: column; gap: 10px; }
.section__title { font-size: 16px; font-style: italic; }

/* ---------- Hover blur ---------- */

.blurrable { transition: filter var(--ease); }
body.is-hovering .blurrable:not(.is-hovered) { filter: var(--blur); }

/* ---------- Info page ---------- */

.info { display: flex; flex-direction: column; gap: 42px; max-width: 772px; }

.rows { display: flex; flex-direction: column; gap: 10px; }

.row { display: grid; align-items: center; }
/* Only the text triggers the hover, not the empty space in and around the columns */
.rows .row { pointer-events: none; }
.rows .row > * { pointer-events: auto; justify-self: start; }
.row--project { grid-template-columns: 160px 105px 275px 60px 100px; column-gap: 18px; }
.row--project.is-hovered { font-style: italic; }

/* Locked / coming-soon projects: a note replaces the description on hover */
.row--project.is-locked { cursor: default; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; transition: opacity var(--ease); }
.swap__note { opacity: 0; }
/* The hidden description still sizes the cell, so keep it upright: the wider italic
   can wrap onto a second line and make the whole page jump */
.has-note.is-hovered .swap__description { opacity: 0; font-style: normal; }
.has-note.is-hovered .swap__note { opacity: 1; }
.row--list { grid-template-columns: 160px 65px 60px 100px; column-gap: 38px; }
.row--award { grid-template-columns: 160px 65px 60px; column-gap: 38px; }

/* Images that appear on the right when hovering a project */
.preview {
  position: fixed;
  top: 164px;
  right: var(--edge);
  bottom: var(--footer-height);
  width: 464px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.preview.is-visible { opacity: 1; }
.preview .frame { height: 299px; flex-shrink: 0; }

/* ---------- Project page ---------- */

.project { display: grid; grid-template-columns: 313px 1fr; gap: 30px; margin-top: 42px; }
.project__text { display: flex; flex-direction: column; gap: 10px; }
.project__images { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.project__images .frame { aspect-ratio: 16 / 10; }

/* ---------- Sketches page ---------- */

.sketches { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; }
.filter { font-size: 14px; padding: 4px 12px; opacity: 0.2; transition: opacity 200ms; }
.filter:hover, .filter.is-active { opacity: 1; }

.category-description { font-size: 14px; padding-left: 12px; }

.sketch-grid {
  --cols: 3;
  --gap: 12px;
  display: grid;
  /* minmax(0, …) keeps columns from growing with their content */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  max-width: 940px;
  container-type: inline-size; /* lets tiles size from the grid's width (cqw) */
}
.sketch { display: flex; flex-direction: column; gap: 8px; cursor: zoom-in; min-width: 0; }

/* Every frame has an exact height (no aspect-ratio + stretching, which Safari
   resolves differently and can make the grid grow on its own).
   Small tiles: one column wide at 304:190. Expanded sketch and the tiles
   beside it get pixel heights from JS. */
.sketch .frame {
  width: 100%;
  height: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 190 / 304);
}

.sketch.is-expanded { cursor: zoom-out; }

/* Timed carousel: images stacked on top of each other, only the current one is visible */
.carousel { position: relative; }
.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
}
.carousel img.is-current { opacity: 1; }
.sketch figcaption { font-size: 10px; }

.sketch-info {
  position: fixed;
  top: 132px;
  left: calc(var(--edge) + 940px + 46px);
  width: 235px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: 0;
  transition: opacity var(--ease);
}
.sketch-info.is-visible { opacity: 1; }

/* ---------- Expand animation (View Transitions) ----------
   Snapshots fill their box while it resizes, instead of stretching. */

::view-transition-group(*) {
  animation-duration: 550ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
  object-fit: cover;
  /* No cross-fade: show one sharp snapshot (new by default, old when shrinking — set in JS) */
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(*) { opacity: 0; }

/* ---------- Thoughts page ---------- */

.thoughts { display: flex; flex-direction: column; gap: 60px; margin-top: 50px; }

.thought { display: flex; gap: 30px; align-items: flex-start; }
.thought:nth-child(even) { margin-left: 476px; }

.thought__text { width: 313px; display: flex; flex-direction: column; gap: 14px; }
.thought__image { width: 304px; height: 190px; flex-shrink: 0; cursor: zoom-in; }

/* Clicked image: as big as the row allows (up to 620px), at its original proportions */
.thought__image.is-expanded {
  flex: 1 1 auto;
  width: auto;
  max-width: 620px;
  min-width: 0;
  height: auto;
  cursor: zoom-out;
}
.thought__image.is-expanded img { height: auto; }

/* ---------- Footer ---------- */

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--paper);
  padding: 24px var(--edge);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.footer__inner {
  max-width: 1256px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__nav { display: flex; gap: 100px; }
.footer__nav a:hover { font-family: var(--serif); font-style: italic; }
.footer__nav a.is-active { font-family: var(--serif); font-style: normal; }

/* ---------- Responsive ---------- */

.mobile-only { display: none; }

@media (max-width: 1280px) {
  .sketch-info { display: none; }
  .sketch figcaption.mobile-only { display: block; }
}

@media (max-width: 1100px) {
  .preview { display: none; }
}

@media (max-width: 900px) {
  .sketch-grid { --cols: 2; }
  .thought:nth-child(even) { margin-left: 0; }
  .project { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .page { padding-top: 16px; }

  .desktop-only { display: none; }
  .row--project,
  .row--list,
  .row--award { grid-template-columns: 1fr; row-gap: 2px; }
  .row--project { padding-bottom: 6px; }

  .sketch-grid { --cols: 1; }
  .category-description { padding-left: 0; }

  .thought { flex-direction: column; }
  .thought__text, .thought__image { width: 100%; }
  .thought__image.is-expanded { flex: none; width: 100%; max-width: none; }

  .footer__side { display: none; }
  .footer__inner { justify-content: center; }
  .footer__nav { gap: 32px; }
}