@font-face {
  font-family: "Monument Grotesk";
  src: url("./assets/font/MonumentGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --margin: 8px;
  --gutter: 8px;
  --cols: 26;
  --bg: #fff;
  --text: #111;
  --text-muted: rgba(17, 17, 17, 0.3);
  --nav-muted: rgba(255, 255, 255, 0.3);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Monument Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Temporarily disabled projects remain in the markup but never occupy a row
   in the visible index. */
.index .row[hidden] {
  display: none !important;
}

/* on large (27"+/32") screens, viewers typically sit further away, so the
   same CSS pixel size reads smaller — bump it up proportionally. */
@media (min-width: 1920px) {
  body {
    font-size: 11.5px;
  }
}

/* the same 26-column / 15px margin / 15px gutter / stretch grid as the Figma frame */
.site-nav,
.row {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  align-items: center;
  width: 100%;
  padding: 0 var(--margin);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: none;
  padding-top: 5px;
  padding-bottom: 14px;
  align-items: flex-start;
}

.site-nav__index {
  grid-column: 14 / span 5;
  grid-row: 1;
  white-space: nowrap;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, max-height 200ms ease, color 150ms ease;
}

.site-nav__index:hover {
  color: var(--nav-muted);
}

body.list-scrolled-away .site-nav__index,
body.has-active-project .site-nav__index {
  opacity: 1;
  max-height: 14px;
  pointer-events: auto;
}

/* the name stays pinned to the very left edge — the "N" shift for the
   list header shouldn't move it. it must also never truncate, so it can
   overflow into the free column next to it instead of clipping. */
.site-nav .col-nr {
  grid-column: 1 / span 1;
  overflow: visible;
  text-overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Information sits directly above Client, independent of where the Year
   column now sits in the list rows. */
.site-nav .col-year {
  grid-column: 8 / span 5;
  text-align: left;
}

.site-nav__columns {
  grid-column: 23 / span 4;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  overflow: visible;
}


.col {
  grid-row: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* exact column assignment on the 26-track grid, per Figma spec */
.col-nr {
  grid-column: 1 / span 1;
}

.col-project {
  grid-column: 3 / span 4;
}

.col-client {
  grid-column: 8 / span 5;
}

.col-medium {
  grid-column: 14 / span 5;
}

.col-year {
  grid-column: 20 / span 1;
}

.col-collab {
  grid-column: 23 / span 4;
}

.index {
  padding-top: 6px;
}

.rows {
  position: fixed;
  top: 33px;
  left: 0;
  right: 0;
  z-index: 5;
  background: none;
}

.site-nav {
  color: #fff;
  font-weight: 500;
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0 0.2px currentColor;
}

/* the list's own column header stays a plain, non-blended colour so it can
   reliably turn solid black on hover regardless of what's scrolling behind */
.row.head {
  color: var(--text-muted);
  transition: color 150ms ease;
}

.rows:hover .row.head {
  color: #111;
}

.head-label .full {
  display: none;
}

.rows:hover .row.head .head-label .short {
  display: none;
}

.rows:hover .row.head .head-label .full {
  display: inline;
}

.row:not(.head) {
  color: #111;
  transition: color 150ms ease;
}

.row[data-project] {
  cursor: default;
}

.rows:hover .row:not(.head):not(:hover) {
  color: var(--text-muted);
}

/* project selected in place (Overview → Images): the whole list stays
   visible, but only the current project is black by default; the rest
   sit dimmed, and still light up normally on their own hover. */
.rows:has(.is-current) .row:not(.head):not(.is-current) {
  color: var(--text-muted);
}

.rows:has(.is-current) .row:not(.head):not(.is-current):hover {
  color: #111;
}

.row.is-current {
  color: #111 !important;
}


/* gallery column picker — "Overview" label + 1–5 buttons to choose how
   many columns the gallery below uses */
.gallery-controls {
  position: sticky;
  top: 33px;
  z-index: 6;
  background: none;
  margin-bottom: var(--gutter);
  display: none;
}

.gallery-controls .col-nr {
  overflow: visible;
  text-overflow: clip;
}

.gallery-controls__label {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.gallery-controls__options {
  display: flex;
  gap: 4px;
  overflow: visible;
}

.gallery-cols-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  cursor: default;
  opacity: 0.3;
  transition: opacity 150ms ease;
}

.gallery-cols-btn.is-active {
  opacity: 1;
}

/* image gallery — edge-to-edge columns, 8px margin/gutter. the gallery's
   vertical start is pushed down via #index-list's min-height (set in JS)
   so that the first row + 8px gap lands right at the viewport bottom on
   load. column count is controlled via --gallery-cols (picker above). */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 2), 1fr);
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  padding: 0 var(--margin) var(--margin);
  align-items: start;
}

.gallery.is-overview {
  row-gap: 64px;
}

/* Home has one caption line plus a 5px gap before its first images. Keep
   individual project pages on exactly the same visual starting line. */
.gallery:not(.is-overview) {
  padding-top: calc(1em * 1.25 + 5px);
}

.overview-project {
  grid-column: 1 / -1;
}

.overview-project__media {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 2), minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.gallery.is-overview[data-cols="1"] .overview-project__media .gallery__item:nth-child(n + 2),
.gallery.is-overview[data-cols="2"] .overview-project__media .gallery__item:nth-child(n + 3),
.gallery.is-overview[data-cols="3"] .overview-project__media .gallery__item:nth-child(n + 4) {
  display: none;
}

.overview-project__caption {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  margin-bottom: 5px;
}

.overview-project__number {
  grid-column: 1 / span 1;
}

.overview-project__title {
  grid-column: 1 / span 6;
  cursor: pointer;
}

.overview-project__arrow {
  appearance: none;
  grid-column: 23 / span 4;
  justify-self: end;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* Continuous project feed: every project follows the previous one instead
   of replacing a separate overview gallery. */
.project-feed {
  display: block;
  padding: 0 var(--margin) var(--margin);
}

.project-section {
  scroll-margin-top: 41px;
  margin: 0 0 64px;
  cursor: pointer;
}

.project-section__header {
  padding: 0;
  margin-bottom: 0;
  align-items: start;
}

.project-section:not(.is-expanded) .project-section__header {
  margin-bottom: 5px;
}

.project-meta__number {
  grid-column: 1 / span 1;
}

.project-meta__identity {
  grid-column: 3 / span 4;
}

.project-section__name {
  appearance: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: default;
}

.project-meta__scope {
  grid-column: 8 / span 11;
}

.project-meta__year {
  grid-column: 20 / span 1;
}

.project-meta__secondary {
  display: block;
  color: var(--text-muted);
}

.project-meta__secondary a {
  color: inherit;
  text-decoration: none;
}

/* In the compact state only the project number and name are shown. */
.project-section:not(.is-expanded) .project-meta__secondary,
.project-section:not(.is-expanded) .project-meta__scope,
.project-section:not(.is-expanded) .project-meta__year {
  display: none;
}

.project-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 2), minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.gallery__item.gallery__item--natural .gallery__media {
  aspect-ratio: auto;
  background: transparent;
}

.gallery__item--natural .gallery__media video {
  height: auto;
  object-fit: contain;
}

.gallery__item--natural .gallery__media img {
  height: auto;
  object-fit: contain;
}

.gallery:not(.is-overview) > .gallery__item--full {
  grid-column: 1 / -1;
}

.project-section .project-section__text {
  display: none;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  row-gap: 0;
  width: 100%;
  min-width: 0;
  margin-bottom: 5px;
}

.project-section.is-expanded .project-section__text {
  display: grid;
}

.gallery__item--extra {
  display: none;
}

.project-section.is-expanded .gallery__item--extra {
  display: block;
}

.project-section__toggle {
  appearance: none;
  display: block;
  grid-column: 23 / span 4;
  justify-self: end;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: default;
  transition: color 150ms ease;
}

.project-section__toggle:hover,
.project-section__toggle:focus-visible {
  color: var(--text);
}

.project-section__text .gallery__text-paragraph {
  grid-column: 1 / -1;
  color: var(--text);
}

.project-section__text .gallery__text-paragraph--meta {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  row-gap: 0;
  align-items: start;
}

.project-section__text .gallery__text-label {
  grid-column: 1 / span 2;
}

.project-section__text .gallery__text-value {
  grid-column: 3 / -1;
  color: var(--text);
}

.project-section__text .gallery__text-paragraph:first-child {
  color: var(--text);
}

.project-section__grid .gallery__item:not(.gallery__item--text) {
  cursor: default;
}

.gallery__item {
  position: relative;
  transition: opacity 200ms ease;
  cursor: inherit;
}

.gallery__media {
  background: #d6d6d6;
  overflow: hidden;
}

.project-hover-indicator {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  color: var(--text);
  font: inherit;
  font-size: 1.53em;
  font-weight: 500;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  transition: opacity 100ms ease, transform 160ms ease;
}

.project-hover-indicator.is-visible {
  opacity: 1;
}

.project-hover-indicator.is-close {
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .project-section,
  .project-section * {
    cursor: none !important;
  }
}

.gallery__item.landscape .gallery__media {
  aspect-ratio: 3 / 2;
}

.gallery__item.portrait .gallery__media {
  aspect-ratio: 2 / 3;
}

.gallery__media img,
.gallery__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 200ms ease, filter 200ms ease;
}

/* Preserve unusually narrow/tall media in a standard landscape frame and
   anchor the uncropped result to the left edge. */
.gallery__item--contain-left .gallery__media {
  background: transparent;
}

.gallery__item--contain-left .gallery__media video,
.gallery__item--contain-left .gallery__media img {
  object-fit: contain;
  object-position: left center;
}

.gallery__project-name {
  position: static;
  display: block;
  width: 100%;
  margin-top: 4px;
  color: var(--text);
  text-align: left;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__media img,
  .gallery__media video,
  .gallery__project-name {
    transition: none;
  }
}

/* shown at its own true aspect ratio instead of the landscape/portrait
   presets, and "contain" instead of "cover" — so it's never cropped or
   zoomed in to fill the box, just scaled down to fit. */
.gallery__media--natural {
  aspect-ratio: var(--natural-ratio);
}

.gallery__media--natural img {
  object-fit: contain;
}

/* project text tile — sits where the first image would be, same column
   width, natural (non-cropped) height. */
.gallery__item--text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.single-project__text {
  grid-column: 1 / -1;
  width: 100%;
  gap: 0;
}

.project-list-description {
  display: grid;
  grid-column: 3 / -1;
  grid-row: 2;
  grid-template-rows: 0fr;
  width: 100%;
  padding: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-list-description.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.project-list-description__inner {
  min-height: 0;
  overflow: hidden;
}

.project-list-description .gallery__text-paragraph {
  width: 100%;
  margin: 0;
  color: var(--text);
}

.project-list-description .gallery__text-label {
  color: var(--text-muted);
}

.gallery__text-paragraph {
  margin: 0;
}

.gallery__text-label {
  color: var(--text-muted);
}

.gallery__text-paragraph a {
  color: inherit;
  text-decoration: none;
}

.gallery__caption {
  display: flex;
  gap: var(--gutter);
  margin-top: 4px;
}

.gallery__caption-name {
  flex: 1;
  text-align: right;
}

@media (max-width: 760px) {
  .gallery {
    grid-template-columns: 1fr;
    width: 100%;
    overflow: hidden;
  }

  .overview-project__media {
    grid-template-columns: 1fr;
  }

  .gallery.is-overview .overview-project,
  .gallery.is-overview .overview-project__media,
  .gallery.is-overview .gallery__item,
  .gallery.is-overview .gallery__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .gallery.is-overview .gallery__media img,
  .gallery.is-overview .gallery__media video {
    max-width: 100%;
  }

  /* The two SFGA posters belong to the same project and use the regular
     image gutter, not the 64px spacing reserved for separate projects. */
  .gallery.is-overview .overview-project[data-project="9"] .overview-project__media {
    row-gap: var(--gutter) !important;
  }

  .gallery .gallery__item[data-project="9"] {
    margin: 0;
  }

  .overview-project__caption {
    grid-template-columns: repeat(12, 1fr);
  }

  .overview-project__title {
    grid-column: 1 / span 8;
  }

  .overview-project__arrow {
    grid-column: 11 / span 2;
  }

  .project-list-description {
    grid-column: 2 / -1;
    grid-row: 6;
  }

  .project-section {
    margin-bottom: 40px;
  }

  .project-section__header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 0;
  }

  .project-meta__number {
    grid-column: 1;
    grid-row: 1;
  }

  .project-meta__identity {
    grid-column: 2 / span 6;
    grid-row: 1;
  }

  .project-meta__year {
    grid-column: 12;
    grid-row: 1;
    text-align: right;
  }

  .project-meta__scope {
    grid-column: 2 / span 11;
    grid-row: 2;
    margin-top: 8px;
  }

  .project-section__toggle {
    grid-column: 8 / span 5;
    grid-row: 1;
    justify-self: end;
  }

  .project-section.is-expanded .project-section__toggle {
    grid-row: 3;
    margin-top: 8px;
  }

  .project-section__grid {
    grid-template-columns: 1fr;
  }

  .project-section .project-section__text {
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
  }

  .project-section__text .gallery__text-paragraph {
    grid-column: 1 / -1;
  }

  .project-section__text .gallery__text-paragraph--meta {
    grid-template-columns: repeat(12, 1fr);
  }

  .project-section__text .gallery__text-label {
    grid-column: 1 / span 3;
  }

  .project-section__text .gallery__text-value {
    grid-column: 4 / -1;
  }

  /* only one column is ever shown on mobile, so the 1/2/3/4 picker
     doesn't do anything here — remove it. */
  .gallery-controls__options {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-nav,
  .row {
    grid-template-columns: repeat(12, 1fr);
  }

  .site-nav .col-year {
    grid-column: 8 / span 3;
  }

  .site-nav__index {
    grid-column: 11 / span 2;
  }

  .site-nav__columns {
    display: none;
  }

  .col-nr {
    grid-column: 1 / span 1;
  }

  .col-project {
    grid-column: 2 / span 6;
  }

  .col-client {
    grid-column: 8 / span 5;
  }

  .col-year {
    grid-column: 12 / span 1;
  }

  .site-nav .col-collab,
  .site-nav .col-medium,
  .row .col-collab,
  .row .col-medium,
  .row .col-year {
    display: none;
  }

  .row[data-project].is-mobile-expanded .col-collab,
  .row[data-project].is-mobile-expanded .col-medium,
  .row[data-project].is-mobile-expanded .col-year {
    display: block;
    grid-column: 2 / -1;
    overflow: visible;
    text-overflow: clip;
  }

  .row[data-project].is-mobile-expanded .col-client {
    grid-column: 2 / -1;
    grid-row: 2;
    overflow: visible;
    text-overflow: clip;
  }

  .row[data-project].is-mobile-expanded .col-project {
    grid-column: 2 / -1;
    overflow: visible;
    text-overflow: clip;
  }

  .row[data-project].is-mobile-expanded .col-collab {
    grid-row: 3;
  }

  .row[data-project].is-mobile-expanded .col-medium {
    grid-row: 4;
  }

  .row[data-project].is-mobile-expanded .col-year {
    grid-row: 5;
  }

  /* Keep the compact list on one line. Opening a project restores the full
     client name because the replacement only applies to collapsed rows. */
  .row[data-project]:not(.is-mobile-expanded) .col[data-mobile-short] {
    font-size: 0;
  }

  .row[data-project]:not(.is-mobile-expanded) .col[data-mobile-short]::after {
    content: attr(data-mobile-short);
    font-size: 11.5px;
    line-height: 1.25;
  }

  /* "Renée Labek" and "Overview" need more than one narrow mobile column
     to not overlap with what sits next to them — widen both and push
     the neighbouring column over accordingly, keeping the two rows
     aligned with each other. */
  .site-nav .col-nr,
  .gallery-controls .col-nr {
    grid-column: 1 / span 3;
  }

  .site-nav .col-project,
  .gallery-controls .col-project {
    grid-column: 4 / span 9;
  }
}

/* plain nav links (Information / Index) look like the rest of the nav text */
.site-nav a {
  color: inherit;
  text-decoration: none;
  font: inherit;
  transition: color 150ms ease;
}

.site-nav a:hover {
  color: var(--nav-muted);
}

.site-nav .gallery-cols-btn:hover {
  opacity: 0.3;
}

/* Information page — reuses the exact same .row / col-nr / col-project /
   col-client / col-medium / col-year / col-collab grid as the list on
   the home page. text columns here wrap onto multiple lines instead of
   truncating, so rows get more breathing room and top-align instead of
   centering. */
.info-page .row {
  align-items: start;
}

.info-page .row.head {
  color: var(--text-muted);
}

/* same hover behaviour as the home page list: hovering a stack keeps the
   row under the cursor black and dims all its other rows. only the
   actual lists take part — the bio flow text and Mail/Social/Imprint
   on the right are handled separately and never dim. */
.info-lists .row:not(.head):not(.info-about-mail .row) {
  color: #111;
  transition: color 150ms ease;
}

.info-lists .row.head {
  transition: color 150ms ease;
}

.info-lists:hover .row.head {
  color: #111;
}

.info-lists:hover .row:not(.head):not(:hover):not(.info-about-mail .row) {
  color: var(--text-muted);
}

/* Location / Academic background (the subhead row) and Project /
   Recognition (the shared top header) also turn black while hovering
   the list, same as the other headings. */
.info-lists:hover .info-subhead .col-collab,
.info-lists:hover .info-subhead .col-project,
.info-lists:hover .info-subhead .col-client {
  color: #111;
}

.info-page:has(.info-lists:hover) > .row.head .col-project,
.info-page:has(.info-lists:hover) > .row.head .col-client {
  color: #111;
}

/* the overlay stacks (About, Location) are transparent full-width
   boxes — without this, hovering the *other* stack underneath them
   would incorrectly register on the overlay instead, since it sits on
   top everywhere, even where its own text isn't. only their actual
   text should be able to catch the pointer. */
.info-stack--about,
.info-stack--location {
  pointer-events: none;
}

.info-stack--about .col,
.info-stack--location .col {
  pointer-events: auto;
}

.info-page .col {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.info-page a.col,
.info-page .col a {
  color: inherit;
  text-decoration: none;
}

/* the second "Year" / "Worked at" column moves toward the middle of the
   page, independent of where Client sits in the home list. */
.info-page .col-year {
  grid-column: 1 / span 1;
}

.info-page .col-collab {
  grid-column: 3 / span 4;
}

.info-subhead .col-collab,
.info-subhead .col-project,
.info-subhead .col-client,
.info-subhead .info-mail-label,
.info-subhead .info-mail-value {
  color: var(--text-muted);
}

/* mobile-only heading above Recognitions — on desktop the section is
   already announced by the shared "Recognition" head column, so this
   would just be a redundant repeat there. */
.info-recognitions-heading {
  display: none;
}

/* Previously at / Academic Background now flows right below the
   Recognitions list instead of sitting beside it. Mail is anchored to
   this stack too, so it starts at the same height as the upper
   "Location" (the head row). */
.info-stack--worked-at {
  margin-top: 0;
  position: relative;
}

/* Location sits beside "Previously at" (same row area, further right),
   independently stacked so its own short height doesn't get coupled to
   the taller Previously-at column. */
.info-secondary {
  position: relative;
}

.info-stack--location {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* About sits at the same height as Recognition itself — overlaid on the
   same starting line, independent of the (shorter) Previously-at /
   Location column below it. */
.info-stacks {
  position: relative;
}

.info-stack--about {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.info-about-mail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.info-about-mail .col {
  pointer-events: auto;
}

/* same hover-dim behaviour as the list on the left (rows dim, headings
   go black) — but scoped to this block only, independent of the list. */
.info-about-mail .row:not(.info-subhead) {
  color: #111;
  transition: color 150ms ease;
}

.info-about-mail .row.info-subhead {
  transition: color 150ms ease;
}

.info-about-mail:hover .row.info-subhead {
  color: #111;
}

.info-about-mail:hover .info-subhead .info-mail-label,
.info-about-mail:hover .info-subhead .info-mail-value {
  color: #111;
}

.info-about-mail:hover .info-imprint {
  color: #111;
}

.info-about-mail:hover .row:not(.info-subhead):not(:hover) {
  color: var(--text-muted);
}

.info-bio {
  margin: 0;
}

a.info-mail-value {
  color: inherit;
  text-decoration: none;
}

a.info-mail-value.info-imprint {
  color: var(--text-muted);
}

.imprint-page {
  padding-top: 6px;
}

.imprint-content {
  align-items: start;
}

.imprint-heading {
  color: var(--text-muted);
}

.imprint-copy {
  grid-column: 3 / -1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.imprint-copy p {
  margin: 0 0 16px;
}

.imprint-copy a {
  color: inherit;
  text-decoration: none;
}

.imprint-label {
  color: var(--text-muted);
}

/* below 760px the 26-col grid is too narrow to hold Project/Recognition
   etc. side by side without wrapping every word onto its own line — so
   each field stacks full-width instead, and the independently overlaid
   stacks (About, Previously-at, Location) go back to plain document
   flow, one after another. */
@media (max-width: 760px) {
  .info-page .row {
    display: block;
    padding: 4px var(--margin);
  }

  .info-page .info-lists {
    margin-top: 64px;
  }

  .info-page .info-stack--worked-at {
    margin-top: 64px;
  }

  .info-page .info-mail-row {
    padding-bottom: 0;
  }

  .info-page .info-social-row {
    padding-top: 0;
  }

  .info-page .col {
    display: block;
    grid-column: auto;
  }

  .imprint-page .imprint-copy {
    display: block;
    margin-top: 16px;
  }

  .info-stacks,
  .info-secondary,
  .info-stack--about {
    position: static;
  }

  .info-stack--location {
    position: static;
    margin-top: 16px;
  }

  .info-about-mail {
    position: static;
    margin-top: 8px;
  }

  /* every data row now labels itself (see below), so the standalone
     header/subhead rows ("Year / Project / Recognition / About",
     "Year / Previously at / Location", "Academic background",
     "Mail", "Social") are redundant here and just take up space. */
  .info-page .row.head,
  .info-page .info-subhead:not(.info-academic-heading) {
    display: none;
  }

  .info-page .row.head.info-worked-heading {
    display: block;
    padding: 4px var(--margin);
    color: var(--text-muted);
    transition: color 150ms ease;
  }

  .info-worked-heading .col-year,
  .info-worked-heading .col-client {
    display: none;
  }

  /* the one heading that's the other way round: not shown on desktop,
     only appears here, above the Recognitions list. */
  .info-recognitions-heading {
    display: block;
    padding: 4px var(--margin);
    color: var(--text-muted);
    transition: color 150ms ease;
  }

  .info-lists:hover .info-recognitions-heading,
  .info-lists:hover .row.head.info-worked-heading {
    color: #111;
  }

  /* "Academic background" stays too, as the same kind of heading — just
     the MA/Location columns either side of it are dropped. */
  .info-academic-heading {
    display: block;
    padding: 4px var(--margin);
    margin-top: 64px;
  }

  .info-academic-heading .col-year,
  .info-academic-heading .col-client {
    display: none;
  }

  /* label the value on its left — "Year", "Project", "Recognition", … —
     matching what the (now hidden) header row used to say for that
     column. reuses the exact same 12-column mobile grid as the header
     (label in columns 1–3, value in 4–12), so the value lines up flush
     with "Visual Communication" above it instead of a fixed pixel
     guess. the value itself sits in a dedicated wrapper (.info-value)
     so a <br> inside it stays entirely within that right-hand column
     instead of its second line dropping back to the full page width. */
  .info-page .row:not(.head):not(.info-subhead) .col {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
  }

  .info-page .row:not(.head):not(.info-subhead) .col::before {
    content: var(--mobile-label, "");
    grid-column: 1 / span 3;
    color: var(--text-muted);
  }

  .info-value {
    grid-column: 4 / span 9;
    min-width: 0;
  }

  .info-stack--recognitions .row:not(.head) .col-nr {
    --mobile-label: "Year";
  }
  .info-stack--recognitions .row:not(.head) .col-project {
    --mobile-label: "Project";
  }
  .info-stack--recognitions .row:not(.head) .col-client {
    --mobile-label: "Recognition";
  }

  .info-stack--worked-at .row:not(.head):not(.info-subhead):not(.info-academic-entry) .col-year {
    --mobile-label: "Year";
  }
  .info-stack--worked-at .row:not(.head):not(.info-subhead):not(.info-academic-entry) .col-collab {
    --mobile-label: "Previously at";
  }
  .info-stack--worked-at .row:not(.head):not(.info-subhead):not(.info-academic-entry) .col-client {
    --mobile-label: "Location";
  }

  .info-academic-entry .col-year {
    --mobile-label: "Year";
  }
  .info-academic-entry .col-collab {
    --mobile-label: "MA";
  }
  .info-academic-entry .col-client {
    --mobile-label: "Location";
  }

  /* the letter codes (A, B, C, …) in front of the year are desktop-only
     bookkeeping — there's just one flat list here, so drop them. */
  .info-letter {
    display: none;
  }

  /* "MA" is the label here already, so restate it in front of the
     degree name too — mobile only, the desktop text is unchanged. */
  .info-academic-entry .col-collab .info-value::before {
    content: "MA ";
  }

  .info-mail-row .info-mail-value {
    --mobile-label: "Mail";
  }
  .info-social-row .info-mail-value {
    --mobile-label: "Social";
  }

  /* no text label needed here, but it still keeps the same left-hand
     gutter as every other line so "Imprint" lines up in column 4 too */
  .info-imprint {
    --mobile-label: "";
  }

  .info-imprint-row {
    margin-top: 64px;
  }

  .info-imprint .info-value {
    grid-column: 1 / -1;
  }

  .info-bio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    --mobile-label: "About";
  }

  .info-bio::before {
    content: var(--mobile-label, "");
    grid-column: 1 / span 3;
    color: var(--text-muted);
  }
}

/* too narrow here for a forced break without ending up 3 lines deep —
   let it wrap naturally instead. */
@media (max-width: 1200px) {
  .info-optional-break {
    display: none;
  }
}

/* Project detail page — reuses the exact same fixed list as the home
   page (same class/id), so the promoted row lands in the identical
   spot the click animation left it in. The description/role text sits
   below it, in its own narrow column, same editorial style as the
   About bio. */
.project-detail {
  margin-top: 8px;
  align-items: start;
}

.project-text {
  grid-column: 1 / -1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.project-description,
.project-role {
  margin: 0;
}

.project-role {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .project-detail {
    display: block;
    padding: 4px 0;
  }

  .project-detail .col {
    display: block;
    grid-column: auto;
  }
}