.visuals-page {
  padding: clamp(1.4rem, 3vw, 2.75rem) clamp(1rem, 3vw, 3rem) clamp(5rem, 9vw, 9rem);
}

.visuals-masthead {
  min-height: calc(58vh - 4rem);
  display: grid;
  grid-template-columns: minmax(22rem, 0.94fr) minmax(20rem, 0.64fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
}

.visuals-masthead h1 {
  max-width: 11ch;
  margin-bottom: 0;
  font-size: clamp(4.1rem, 8.2vw, 9.2rem);
  line-height: 0.84;
  font-weight: 950;
  text-transform: uppercase;
}

:lang(ko) .visuals-masthead h1,
:lang(ja) .visuals-masthead h1 {
  max-width: 13ch;
  font-size: clamp(3.35rem, 6.7vw, 7rem);
  line-height: 0.98;
  word-break: keep-all;
}

:lang(ja) .visuals-masthead h1 {
  overflow-wrap: anywhere;
  word-break: normal;
}

.visuals-masthead > p {
  max-width: 38rem;
  color: var(--soft);
  font-size: clamp(1.02rem, 1.45vw, 1.28rem);
  line-height: 1.68;
}

.visuals-controls {
  position: sticky;
  top: 4.35rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 9, 0.92);
}

.visuals-controls button {
  appearance: none;
  border: 1px solid var(--line);
  border-right: 0;
  padding: 0.72rem 1rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}

.visuals-controls button:last-child {
  border-right: 1px solid var(--line);
}

.visuals-controls button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

.visual-masonry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  background: transparent;
}

.visual-tile {
  display: grid;
  grid-template-rows: auto auto auto;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #050505;
  color: var(--fg);
  text-align: left;
}

.visual-open {
  appearance: none;
  display: contents;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.visual-tile-wide {
  grid-column: auto;
}

.visual-tile-tall {
  grid-row: auto;
}

.visual-tile-image {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.visual-tile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.visual-tile-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(0.9) contrast(1.08);
  transition: filter 180ms ease, transform 220ms ease;
}

.visual-tile-copy {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.55rem) clamp(1rem, 2vw, 1.55rem) 0.6rem;
  background:
    linear-gradient(135deg, rgba(215, 31, 42, 0.1), transparent 42%),
    rgba(5, 5, 5, 0.96);
}

.visual-tile-audio {
  display: grid;
  gap: 0.65rem;
  padding: 0.15rem clamp(1rem, 2vw, 1.55rem) clamp(1rem, 2vw, 1.55rem);
  background: rgba(5, 5, 5, 0.96);
}

.visual-tile-subtitle,
.visual-tile-track-label,
.visual-tile-tracks {
  color: #c7c0b8;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.visual-tile strong {
  display: block;
  font-size: clamp(1.55rem, 3vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
}

.visual-tile-thought {
  display: block;
  max-width: 42rem;
  color: var(--soft);
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.72;
}

.visual-tile-track-label {
  margin-top: 0.55rem;
  color: var(--muted);
}

.visual-track-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visual-track-list li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.36fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

.visual-track-list span {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.visual-track-list strong {
  color: var(--fg);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.visual-track-list em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.visual-tile:hover .visual-tile-image img {
  filter: saturate(1) contrast(1.14);
  transform: scale(1.025);
}

.visual-lightbox {
  width: min(92vw, 74rem);
  max-height: 92vh;
  border: 1px solid var(--line-strong);
  padding: 0;
  background: #050505;
  color: var(--fg);
}

.visual-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.visual-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  border: 1px solid var(--line-strong);
  padding: 0.7rem 0.85rem;
  background: rgba(5, 5, 5, 0.82);
  color: var(--fg);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}

.visual-lightbox figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
  margin: 0;
}

.visual-lightbox img {
  width: 100%;
  height: min(86vh, 48rem);
  object-fit: contain;
  background: #000;
}

.visual-lightbox figcaption {
  align-self: end;
  padding: clamp(1rem, 2vw, 2rem);
}

.visual-lightbox span,
.visual-lightbox em {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
}

.visual-lightbox strong {
  display: block;
  margin: 0.85rem 0 1rem;
  font-size: clamp(1.8rem, 3vw, 3.6rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.visual-lightbox p {
  color: var(--soft);
  line-height: 1.72;
}

.visual-lightbox-tracks {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.visual-lightbox-tracks .visual-track-list {
  margin-top: 0.85rem;
}

@media (max-width: 960px) {
  .visuals-masthead {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .visual-lightbox figure {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .visuals-page {
    padding-top: 2.75rem;
  }

  .visuals-masthead {
    padding-top: 1.65rem;
    padding-bottom: 2.35rem;
  }

  .visuals-masthead h1,
  :lang(ko) .visuals-masthead h1,
  :lang(ja) .visuals-masthead h1 {
    max-width: 100%;
    font-size: clamp(2.5rem, 12vw, 4rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
  }

  .visuals-controls {
    top: var(--mobile-header-height);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .visuals-controls button {
    border-right: 0;
    padding: 0.72rem 0.25rem;
    font-size: 0.65rem;
  }

  .visual-masonry {
    grid-template-columns: 1fr;
  }

  .visual-tile,
  .visual-tile-tall {
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: auto auto auto;
  }

  .visual-track-list li {
    grid-template-columns: 1fr;
  }

  .visual-tile-wide {
    grid-column: auto;
  }

  .visual-lightbox {
    width: calc(100vw - 1.5rem);
  }

  .visual-lightbox img {
    height: auto;
    max-height: 68vh;
  }
}