/* ——— Settings: change colors and font here ——— */

:root {
  /* Accent: hover, active links, subtle underlines, small markers only */
  --accent: rgb(255, 90, 60);

  /* Shown behind images while they load */
  --loading: #f6e9a8;

  --bg: #f9f4e9;
  --fg: #111111;
  --fg-muted: #6b6b6b;
  --line: #cfcfcf;

  /* Cursors: an arrow everywhere, a hand over anything clickable.
     Their colors are in public/cursor-arrow.svg and public/cursor-hand.svg */
  --cursor-arrow: url("/public/cursor-arrow.svg") 1 1, auto;
  --cursor-hand: url("/public/cursor-hand.svg") 8 2, pointer;

  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --max-width: 1400px;
}

/* ——— Base ——— */

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

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

body {
  cursor: var(--cursor-arrow);
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

p {
  margin: 0 0 1em;
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--accent);
}

a,
button {
  cursor: var(--cursor-hand);
}

a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--page-pad);
  top: -3rem;
  background: var(--bg);
  padding: 0.25rem 0.5rem;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ——— Header ——— */

.site-header,
.page,
.site-footer {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.site-header ul,
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header a,
.site-footer a {
  text-decoration: none;
}

.top-nav {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: 13px;
}

.top-nav ul,
.site-footer ul {
  gap: 0.5rem 1.25rem;
}

.logo-link {
  display: block;
  width: clamp(260px, 40vw, 560px);
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
}

/* Blending keeps the logo clean on the page color, even if a version has a white background */
.site-logo {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.category-nav {
  margin-top: 1.75rem;
  font-size: 13px;
}

.category-nav ul {
  justify-content: center;
  gap: 0.5rem 2rem;
}

.site-header a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ——— Page ——— */

.page {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ——— Gallery ——— */

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four works: two columns, every tile the same size,
   in a narrower centered block so the tiles don't feel huge */
@media (min-width: 600px) {
  .gallery--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1260px;
    margin-inline: auto;
  }

  .gallery.gallery--two .is-wide {
    grid-column: auto;
  }

  .gallery.gallery--two .is-wide .thumb {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* A tile left alone on the last row sits in the middle column */
@media (min-width: 1000px) {
  .gallery:not(.gallery--installation, .gallery--two) li:last-child:nth-child(3n+1):not(.is-wide) {
    grid-column: 2;
  }
}

/* A wider tile ("wide": true): two columns wide, the same height as its row,
   so the grid stays even (from tablet width up) */

@media (min-width: 600px) {
  .gallery {
    grid-auto-flow: dense; /* smaller tiles fill in around it, so no holes */
  }

  .gallery .is-wide {
    grid-column: span 2;
  }

  .gallery .is-wide .thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; /* used only when it has a row to itself */
  }
}

@media (min-width: 1000px) {
  .gallery .is-wide .thumb {
    aspect-ratio: 3.1;
  }
}

/* Installation: two images side by side, one 2 columns wide and one 3 columns wide.
   They share one height, chosen so the footer is only a short scroll away. */

.gallery--installation {
  align-items: start;
}

.gallery--installation .thumb {
  aspect-ratio: 4 / 5;
}

@media (min-width: 600px) {
  .gallery--installation {
    grid-template-columns: repeat(5, 1fr);
  }

  .gallery--installation li:nth-child(odd) {
    grid-column: span 2;
  }

  .gallery--installation li:nth-child(even) {
    grid-column: span 3;
  }

  .gallery--installation .thumb {
    aspect-ratio: auto;
    height: clamp(260px, calc(100vh - 290px), 520px);
  }
}

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--loading);
  text-decoration: none;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(240, 240, 240, 0.8);
  color: var(--fg);
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Name first and slightly stronger; description quieter underneath */
.thumb-name {
  font-weight: 500;
}

.thumb-description,
.project-description {
  color: var(--fg-muted);
}

.thumb:hover .thumb-title,
.thumb:focus-visible .thumb-title {
  opacity: 1;
}

/* ——— Project page ——— */

.project-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 13px;
}

.project-links a {
  text-decoration: none;
}

/* Work pages have no header: the top bar starts where About and Contact sit on other pages */
.page--work {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

.project-links {
  align-items: center;
}

.logo-small img {
  display: block;
  width: clamp(88px, 8vw, 116px);
  height: auto;
  mix-blend-mode: multiply;
}

/* At the end of a work: "Next project  Name  →", on the right */
.project-next {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 13px;
}

.project-next a {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  text-decoration: none;
}

.next-label {
  color: var(--fg-muted);
}

.project {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* Project opening: name on the left, text on the right (same proportions as the About page) */

.project-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

/* A category with one work: the name above the main image, the text below it */
.project-top {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.project > .project-media + .project-intro {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

@media (min-width: 760px) {
  .project-intro {
    grid-template-columns: minmax(180px, 22%) 1fr;
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  .project-intro--below .project-text {
    grid-column: 2;
  }
}

.project-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.project-description {
  display: block;
  margin-top: 0.15rem;
}

.project-text {
  max-width: 38rem;
  color: #333333;
  font-size: 17px;
  line-height: 1.65;
}

.project-text p {
  margin: 0;
}

.project-text p + p {
  margin-top: 1.1em;
}

/* Small line of details: "Format · Pages · Year" */
.project-details {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-muted);
  font-size: 13px;
}

/* The dot sits after each item, so a wrapped line never starts with one */
.project-details li:not(:last-child)::after {
  content: "·";
  margin: 0 0.75em;
}

.project-media {
  margin: 0;
}

/* A single large image or video, shown whole */

.project-media img,
.project-media video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  margin-inline: auto;
  background: var(--loading);
}

.project-section {
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

.project-section-title {
  margin-bottom: 1.25rem;
  font-size: 13px;
  font-weight: 400;
}

/* In a collection, each work's name is set like the page title */
.project-section-title.project-title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* A section's own short text (one work inside a collection) */
.project-section-text {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  color: #333333;
  font-size: 15px;
  line-height: 1.65;
}

/* Flowing rows: every image keeps its own shape, never cropped.
   Images in one row share the same height and together fill the width. */

.flow {
  --row: clamp(220px, 28vw, 420px); /* roughly how tall a row is */
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Keeps the last row from stretching when it isn't full */
.flow::after {
  content: "";
  flex-grow: 999;
}

.flow .project-media {
  flex: var(--r) 1 calc(var(--r) * var(--row));
  min-width: 0;
}

.flow img,
.flow video {
  width: 100%;
  max-height: none;
  aspect-ratio: var(--r);
  object-fit: cover;
}

/* Optional layout for single items, set in the content */

.flow .size-small {
  flex-basis: calc(var(--r) * var(--row) * 0.6);
}

/* Large: alone in its row, about 1.7 times the usual row height, with empty space beside it */
.flow .size-large {
  flex: 0 0 100%;
}

.flow .size-large > img,
.flow .size-large > video,
.flow .size-large > .spread {
  width: min(100%, calc(var(--r) * var(--row) * var(--s, 1.7)));
  margin-left: 0;
}

.flow .align-right > img,
.flow .align-right > video,
.flow .align-right > .spread {
  margin-left: auto;
}

.flow .align-center > img,
.flow .align-center > video,
.flow .align-center > .spread {
  margin-inline: auto;
}

.flow .size-full {
  flex-basis: 100%;
}

/* A tall full-width video is never taller than the screen, so it can always be seen whole.
   Landscape videos simply fill the width, edge to edge with the images. */
.flow .size-full:not(.is-landscape) > video {
  width: min(100%, calc(85vh * var(--r)));
  margin-inline: auto;
}

/* Half: exactly two side by side */
.flow .size-half {
  flex: 0 0 calc(50% - 9px);
}

/* Row: a few images side by side at the same height, filling the line */
.row-group {
  display: flex;
  gap: 18px;
}

.row-item {
  flex: var(--ri) 1 0;
  min-width: 0;
}

.flow .row-group img,
.flow .row-group video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ri);
}

/* A small vertical nudge for one image in a row ("nudge" in the content) */
.row-item img {
  translate: 0 var(--nudge, 0);
  scale: var(--part-scale, 1);
}

/* Images with see-through areas: no loading color behind them */
.flow img.see-through,
.project-media img.see-through {
  background: none;
}

/* Floating objects: more air around and between them */
.flow .row--floating {
  margin-block: clamp(2rem, 5vw, 5rem);
}

.row--floating .row-group {
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* Joined: two halves of one picture, edge to edge, on every screen */
.row--joined .row-group,
.row--floating.row--joined .row-group {
  gap: 0;
  flex-direction: row;
}

/* On a phone, one under the other, each whole */
@media (max-width: 599px) {
  .row-group {
    flex-direction: column;
  }

  /* Small drawn figures (a narrowed row) stay side by side, using the full width */
  .row-group--narrow {
    flex-direction: row;
    max-width: 100% !important;
  }
}

/* Panorama: one long image at a comfortable height, scrolled sideways */
.panorama-track {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}

.panorama-track::-webkit-scrollbar {
  display: none;
}

/* Separate frames, like flipping through a carousel */
.panorama--frames .panorama-track {
  gap: 14px;
}

.panorama-track.is-dragging {
  cursor: grabbing;
}

.flow .panorama-track img {
  flex: none;
  width: auto;
  max-width: none;
  height: min(82vh, 860px);
  user-select: none;
}

.panorama-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.panorama-nav button:disabled {
  opacity: 0.25;
  cursor: var(--cursor-arrow);
}

@media (max-width: 599px) {
  .flow .panorama-track img {
    height: min(60vh, 420px);
  }
}

/* Mosaic: one large image (two thirds) and two small ones stacked beside it */
.mosaic-grid {
  display: grid;
  gap: 18px;
}

.flow .mosaic-grid img {
  width: 100%;
  max-height: none;
}

.flow .mosaic-small img,
.flow .mosaic-big img {
  height: auto;
  aspect-ratio: auto;
}

@media (min-width: 600px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mosaic-big {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .mosaic--right .mosaic-big {
    grid-column: 2 / 4;
  }

  .mosaic--right .mosaic-small {
    grid-column: 1;
  }

  /* The large image fills the height of the two small ones */
  .flow .mosaic-big img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* Spread: pages side by side, no gap */
.spread {
  display: flex;
  width: 100%;
  aspect-ratio: var(--r);
}

.flow .spread img,
.flow .spread video {
  flex: var(--ri) 1 0;
  width: auto;
  min-width: 0;
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 599px) {
  .flow .project-media {
    flex-basis: 100%;
  }

  .flow .size-large > img,
  .flow .size-large > video,
  .flow .size-large > .spread {
    width: 100%;
  }
}

.project-media figcaption {
  margin-top: 0.75rem;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: center;
}

/* ——— Stories: a list of titles, each opens its images ——— */

.story-list {
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.story-list li {
  border-top: 1px solid var(--line);
}

.story-open {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.9rem 0 1.1rem;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
}

.story-name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.story-label {
  color: var(--fg-muted);
  font-size: 12px;
}

.story-title {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
}

.story-plus {
  font-size: 18px;
  line-height: 1;
}

.story-open:hover .story-title,
.story-open:hover .story-plus {
  color: var(--accent);
}

.story-open:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* Thin line arrows in the viewer */

.viewer-prev,
.viewer-next,
.carousel-prev,
.carousel-next,
.panorama-prev,
.panorama-next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  border: 0;
  background: none;
  color: var(--fg);
}

.viewer-prev:hover,
.viewer-next:hover,
.carousel-prev:hover,
.carousel-next:hover,
.panorama-prev:hover,
.panorama-next:hover {
  color: var(--accent);
}

/* ——— Carousel: a story in parts, scrolled sideways ———
   On a computer exactly three frames fit the row and each swipe moves three;
   on a phone one at a time, with the next peeking in.
   The row is kept modest, with air around it: frames are at most 520px tall
   (or 62% of the screen), the row never fills more than 90% of the width, and it stays centered. */

.carousel,
.project--carousel {
  --show: 1.15;
  --frame-h: min(62vh, 520px);
}

@media (min-width: 900px) {
  .carousel,
  .project--carousel {
    --show: 3;
  }

  /* A work that is one carousel: the page narrows to the row's width,
     so the title lines up with the first image */
  .project--carousel {
    max-width: min(calc(var(--show) * var(--frame-h) * var(--r) + (var(--show) - 1) * 18px), 90%);
    margin-inline: auto;
  }

  .project--carousel .carousel-track {
    max-width: 100%;
  }
}

.carousel-track {
  position: relative;
  display: flex;
  gap: 18px;
  max-width: min(calc(var(--show) * var(--frame-h) * var(--r) + (var(--show) - 1) * 18px), 90%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track li {
  flex: none;
  width: calc((100% - (var(--show) - 1) * 18px) / var(--show));
  scroll-snap-align: start;
}

.flow .carousel-track img,
.flow .carousel-track video {
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: auto;
}

@media (max-width: 899px) {
  .carousel-track {
    max-width: 100%;
  }
}

/* Arrows and count in the middle; "Next project" (when present) at the right end of the same row */
.carousel-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 13px;
}

.carousel-controls {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Posts: a series of small carousels, each with its own name, two per row on a computer.
   One image at a time, with the next one peeking in. */
.carousel--post,
.project--posts {
  --show: 1.15;
  --frame-h: min(62vh, 520px);
  --post-w: calc(var(--show) * var(--frame-h) * var(--r) + (var(--show) - 1) * 18px);
  --post-gap: clamp(3rem, 6vw, 6rem);
}

.post-title {
  margin-bottom: 1rem;
  font-size: 15px;
  font-weight: 500;
}

@media (min-width: 900px) {
  /* The whole work is as wide as two posts and the space between them, centered */
  .project--posts {
    max-width: min(calc(2 * var(--post-w) + var(--post-gap)), 100%);
    margin-inline: auto;
  }

  .project--posts .flow {
    column-gap: var(--post-gap);
    row-gap: clamp(2.5rem, 5vw, 4rem);
  }

  .project--posts .flow::after {
    display: none;
  }

  .flow .carousel--post {
    flex: 0 0 calc(50% - var(--post-gap) / 2);
  }

  .carousel--post .carousel-track {
    max-width: 100%;
  }
}

.carousel-nav .project-next {
  grid-column: 3;
  justify-self: end;
  margin-top: 0;
}

@media (max-width: 599px) {
  .carousel-nav {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .carousel-controls {
    grid-column: 1;
  }

  /* Posts: a series of small carousels, each with its own name, two per row on a computer.
   One image at a time, with the next one peeking in. */
.carousel--post {
  --show: 1.15;
  --frame-h: min(62vh, 520px);
}

.post-title {
  margin-bottom: 1rem;
  font-size: 15px;
  font-weight: 500;
}

@media (min-width: 900px) {
  .flow .carousel--post {
    flex: 0 0 auto;
    width: min(calc(var(--show) * var(--frame-h) * var(--r) + (var(--show) - 1) * 18px), calc(50% - 9px));
    margin-inline: auto;
  }

  .flow .carousel--post + .carousel--post + .carousel--post {
    margin-top: clamp(2rem, 4vw, 3.5rem);
  }

  .carousel--post .carousel-track {
    max-width: 100%;
  }
}

.carousel-nav .project-next {
    grid-column: 1;
    justify-self: end;
    margin-top: 2rem;
  }
}

.carousel-nav button:disabled {
  opacity: 0.25;
  cursor: var(--cursor-arrow);
}


/* Story viewer: white, full screen, one image at a time */

.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--page-pad);
  border: 0;
  background: var(--bg);
  color: var(--fg);
}

.viewer[open] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.viewer::backdrop {
  background: var(--bg);
}

.viewer-top {
  display: flex;
  justify-content: space-between;
}

.viewer-close,
.viewer-next-story {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}

.viewer-close:hover,
.viewer-next-story:hover {
  color: var(--accent);
}

/* Story title and author, centered above the image */
.viewer-heading {
  font-size: 13px;
  text-align: center;
}

.viewer-heading p {
  margin: 0;
}

.viewer-story-author {
  color: var(--fg-muted);
}

.viewer-story-author:empty {
  display: none;
}

.viewer-stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Every story image uses the same 1080 × 1350 frame (4:5), as large as the screen allows */
.viewer-stage .project-media img,
.viewer-stage .project-media video {
  width: min(calc(100vw - 2 * var(--page-pad)), calc((100dvh - 12rem) * 4 / 5));
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 13px;
}

/* ——— About and Contact ——— */

.info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 760px) {
  .info {
    grid-template-columns: minmax(180px, 22%) 1fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
}

.info-portrait {
  width: 100%;
  max-width: 320px;
  height: auto;
  background: var(--loading);
}

.info-text {
  max-width: 38rem;
  color: #333333;
  font-size: 16px;
  line-height: 1.75;
}

.info-text p {
  margin: 0;
}

.info-text p + p {
  margin-top: 1.1em;
}

.info-section + .info-section {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.info-heading {
  margin-bottom: 1rem;
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.timeline {
  margin: 0;
}

.timeline-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
}

.timeline-row + .timeline-row {
  margin-top: 1rem;
}

.timeline dd {
  margin: 0;
}

.inline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inline-list li {
  display: inline;
  white-space: nowrap;
}

/* Thin vertical line between items */
.inline-list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 0.85em;
  background: currentColor;
  vertical-align: -0.1em;
}

.contact-buttons {
  display: flex;
  gap: 0.5rem;
  /* the icons line up with the text above, not their wider click area */
  margin: 0 0 0 -10px;
  padding: 0;
  list-style: none;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
}

/* Hand-drawn lines (icons and the CV button frame), with a slight ink wobble */
.sketch {
  display: block;
  overflow: visible;
  filter: url(#sketch);
}

.icon-button:hover,
.text-button:hover {
  color: var(--accent);
}

.text-button {
  position: relative;
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.3rem;
  color: var(--fg);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.sketch-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ——— Blending ———
   Images marked "blend": true in the content: their white takes on the background color,
   like a print on tinted paper. Works best with light backgrounds. */

.blend img,
.blend video,
.thumb.blend img {
  mix-blend-mode: multiply;
}

/* Blended images float on the page, so no loading color behind them */
.blend img {
  background: none;
}

/* One image in a blended row that keeps its own whites ("blend": false) */
.row-item.no-blend img {
  mix-blend-mode: normal;
}

/* Behind a blended thumbnail, show the page color instead of the loading color,
   so the white blends into the background */
.thumb.blend {
  background: var(--bg);
}

/* Images marked "trim": true lose a hair's width at each edge,
   hiding a thin line that is part of the file */
.trim img,
.trim video,
.thumb.trim img {
  clip-path: inset(0.5%);
}

/* The whole picture, smaller inside its tile ("thumbnail_fit") */
.thumb.fit img {
  object-fit: contain;
  padding: 3%;
}

/* Around a fitted thumbnail, the page color instead of the loading color */
.thumb.fit {
  background: var(--bg);
}

/* ——— Footer ——— */

.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  font-size: 13px;
}