/*
Theme Name:   Bella Comsom
Theme URI:    https://bellacomsom.com
Author:       Gue Hyun Lee
Description:  Portfolio theme for Bella Comsom. Includes the content model (Works, Sound, About fields, REST output). Requires the Secure Custom Fields plugin; Simple Custom Post Order is recommended for drag-and-drop ordering.
Version:      1.1.0
Requires at least: 6.3
Requires PHP: 8.0
Text Domain:  bella-comsom
*/

/*
Theme Name: Bella Comsom
Author: Gue Hyun Lee
Version: 1.0
*/

/* ==========================================================
   Fonts
   ========================================================== */
@font-face {
  font-family: "FreeSerif";
  src: url("assets/fonts/FreeSerif-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FreeSerif";
  src: url("assets/fonts/FreeSerif-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "FreeSerif";
  src: url("assets/fonts/FreeSerif-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FreeSerif";
  src: url("assets/fonts/FreeSerif-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================
   Settings — tweak the look here
   ========================================================== */
:root {
  /* Colours */
  --bg: #f5f5f5;
  --text: #555555;
  --text-light: #aaaaaa; /* About: section + year labels */
  --muted: #8f8f8f; /* logo, unselected language */
  --hover: #3cff00;

  /* Typefaces */
  --sans:
    "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Adobe Fonts (pul5knv) */
  --serif: "FreeSerif", "Times New Roman", serif;

  /* Type */
  --fs-small: 0.8rem; /* 12.8px — preview, works, footer */
  --fs-logo: 4.25rem; /* 68px — "Bella Comsom" */
  --fs-bio: 1.25rem; /* 20px — About text (FreeSerif) */
  --leading-bio: 0.96;
  --leading: 0.98; /* line distance 98% */
  --tracking: -0.02em; /* letter spacing -2% */

  /* 8-column grid */
  --columns: 8;
  --margin: 16px; /* page edge */
  --gap: 16px; /* space between columns */

  /* Work list */
  --line-max: 26em; /* longer lines wrap onto a second column */
  --work-gap: 0px; /* extra space between works */

  /* Logo: Figma "Layer blur 0.8" ≈ CSS blur(0.4px) (Figma's value is about 2× CSS) */
  --logo-blur: 0.4px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --slide: 0.45s;
}

/* ==========================================================
   Base
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
}

.page-home {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ==========================================================
   Header: preview + logo
   ========================================================== */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2;
  padding: var(--margin) var(--margin) 0;
}

.logo {
  display: inline-block;
  font-size: var(--fs-logo);
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--muted);
  filter: blur(var(--logo-blur));
}

/* Language toggle — top right on every page */
.lang {
  position: fixed;
  top: calc(var(--margin) - 4px);
  right: calc(var(--margin) - 4px);
  z-index: 10;
  display: flex;
  gap: 0.35em;
  padding: 4px;
  background: color-mix(
    in srgb,
    var(--bg) 50%,
    transparent
  ); /* stays readable over scrolling images */
  border-radius: 4px;
}

.lang button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--muted);
  cursor: pointer;
}
.lang button[aria-pressed="true"] {
  color: var(--text);
  cursor: default;
}
.lang button:hover {
  color: var(--text);
}

/* Height animates 0 → content height, so the logo is pushed down */
.preview {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--slide) var(--ease);
}
.preview.is-open {
  grid-template-rows: 1fr;
}

.preview__clip {
  min-height: 0;
  overflow: hidden;
}

.preview__content {
  grid-template-rows: auto 1fr; /* title row stays tight; extra height goes below */
  align-items: start;
  padding-bottom: var(--gap);
  transform: translateY(-100%);
  transition: transform var(--slide) var(--ease);
}
.preview.is-open .preview__content {
  transform: none;
}

/* Column 1: title, 16px, year + material · 3–4 images · 5–7 description */
.preview__title {
  grid-column: 1;
  grid-row: 1;
  text-transform: uppercase;
}
.preview__meta {
  grid-column: 1;
  grid-row: 2;
  margin-top: 16px;
}
.preview__thumbs {
  display: contents;
}
.preview__desc {
  grid-column: 5 / span 3;
  grid-row: 1 / span 2;
  max-height: calc(10em * var(--leading));   /* max 10 lines */
  overflow: hidden;
}
/* Longer texts fade out over the last 3 lines (class set in script.js) */
.preview__desc.is-cut {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.preview__thumbs img {
  grid-row: 1 / span 2;
}
.preview__thumbs img:nth-child(1) {
  grid-column: 3;
}
.preview__thumbs img:nth-child(2) {
  grid-column: 4;
}
.preview__thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.preview__desc p + p {
  margin-top: 1em;
}

/* ==========================================================
   Work list — rotated "sound wave" columns
   ========================================================== */
.works {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  display: flex;
  overflow: hidden;
}

.works__track {
  flex: none;
  display: flex;
  align-items: center; /* lines centre on the middle axis → wave shape */
  margin: 0 auto; /* centred while it fits on screen */
}

.work {
  display: flex;
  align-items: center;
  padding-right: var(--work-gap);
  font-family: var(--serif);
  font-weight: 400;
  transition: color 0.15s;
}

/* Each line becomes a column, reading bottom → top */
.work__line {
  writing-mode: vertical-rl;
  text-orientation: sideways; /* rotate every glyph, incl. ′ ″ “ ” */
  transform: rotate(180deg);
  max-height: var(--line-max);
  text-align: center;
}

.work.is-active {
  color: var(--hover);
}
.work:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Category divider: · · · · Name · · · · — horizontal, 4px from the list */
.works__cat {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 4px;
  font-family: var(--serif);
  font-weight: 400;
  white-space: nowrap;
}
.works__cat-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Marquee: track holds two copies, slides one copy's width, loops */
.works.is-marquee .works__track {
  margin: 0;
  animation: marquee var(--duration, 40s) linear infinite;
}
.works.has-hover .works__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .works {
    overflow-x: auto;
  }
}

.works__message {
  margin: 0 auto;
}

/* ==========================================================
   Footer
   ========================================================== */
.bottom {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: var(--margin);
}

/* Imprint · Privacy Policy, 8px apart */
.bottom__legal {
  display: flex;
  gap: 8px;
}

/* "Back" on About / Work pages — fixed where "About" sits on the landing page.
   The small background keeps it readable over scrolling text and images. */
.back {
  position: fixed;
  left: calc(var(--margin) - 4px);
  bottom: calc(var(--margin) - 4px);
  z-index: 10;
  padding: 4px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border-radius: 4px;
}

/* ==========================================================
   Work page
   ========================================================== */

/* Two columns, each scrolls on its own:
   left (1–4)  = title/year/material/credits + videos
   right (5–8) = description + images */
.page-work {
  overflow: hidden;
}
.work-page {
  height: 100vh;
  height: 100dvh;
  padding: 0 var(--margin);
}
.work-page__col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--margin) 0 calc(var(--margin) * 3);
}
.work-page__col::-webkit-scrollbar {
  display: none;
}
.work-page__col--left {
  grid-column: 1 / span 4;
}
.work-page__col--right {
  grid-column: 5 / span 4;
}

/* Left top: 1 title + year/material · 2–3 credits.
   Its height is matched to the description (work.js), so videos and
   images start at the same line. */
.work-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  align-content: start;
}

.work-head__info {
  grid-column: 1;
}
.work-head__title {
  font-size: inherit;
  text-transform: uppercase;
}
.work-head__meta {
  margin-top: 16px; /* exactly 16px below the title */
}

/* Credits: role in column 2, names in column 3, one row per credit */
.work-head__credits {
  grid-column: 2 / span 2;
}
.work-head__credits > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}
.work-head__credits > div + div {
  margin-top: 16px;
}

/* Right top: description in columns 5–7 */
.work-desc {
  grid-column: 1 / span 3;
}
.work-desc p + p {
  margin-top: 1em;
}

.work-video,
.work-images {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--gap);
}
.work-video .embed {
  width: 100%;
}
.work-images img {
  display: block;
  width: 100%;
  height: auto;
}

.work-page figcaption {
  margin-top: 0.5em;
}

/* ==========================================================
   About page
   ========================================================== */
.page-about {
  overflow: hidden;
}

/* Two columns that scroll independently, each filling the screen height */
.about {
  height: 100vh;
  height: 100dvh;
  padding: 0 var(--margin);
}

.about__intro,
.about__events {
  grid-row: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* hide scrollbars (Firefox) */
  padding: var(--margin) 0 calc(var(--margin) * 3);
}
.about__intro::-webkit-scrollbar,
.about__events::-webkit-scrollbar {
  display: none; /* hide scrollbars (Chrome, Safari) */
}

/* Left: logo + photo + bio in columns 1–3.
   Photo and bio are 84% wide (434px at 1440, as in Figma). */
.about__intro {
  grid-column: 1 / span 3;
}
.about__logo {
  display: block;
  width: max-content;
}
.about__photo,
.about__bio {
  width: 84%;
}
.about__photo {
  display: block;
  height: auto;
}
.about__photo[hidden] {
  display: none;
}
.about__bio {
  margin-top: 0.5em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-bio);
  line-height: var(--leading-bio);
}
.about__bio p + p {
  margin-top: 1em;
}

/* Contact: small label + text links.
   Desktop: under the download buttons (right column). Phones: under the bio. */
.about__contact {
  margin-top: 2.6em;
}
.about__contact--desktop {
  grid-column: 1 / -1;
}
.about__contact--desktop .about__label {
  margin-left: calc(-1 * var(--gap)); /* hangs like the events labels */
}
.about__contact--mobile,
.about__contact[hidden] {
  display: none;
}
.about__label {
  margin-bottom: 8px;
  font-size: inherit;
  color: var(--text-light);
}
.about__links {
  list-style: none;
}
.about__links a:hover {
  text-decoration: underline;
}

/* Right: events in columns 4–8. Dates sit in column 4, text in 5–7.
   Labels hang one gutter to the left of the dates, so the scroll area
   starts one gutter early. Starts level with the top of the photo. */
.about__events {
  grid-column: 4 / -1;
  margin-left: calc(-1 * var(--gap));
  padding-left: var(--gap);
  padding-top: calc(var(--margin) + var(--fs-logo) + 6px);
}
.about__events-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap);
  align-content: start;
}
.events,
.events__group,
.events__list,
.events__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-content: start;
}

.events__title,
.events__year {
  grid-column: 1 / -1;
  margin-left: calc(-1 * var(--gap));
  font-size: inherit;
  color: var(--text-light);
}
.events__group,
.events__list {
  margin-top: 0.9em;
}
.events__group:first-child {
  margin-top: 1.3em;
}
.events__list {
  list-style: none;
}
.events__item time {
  grid-column: 1;
}
.events__text {
  grid-column: 2 / span 3;
}
a.events__text:hover {
  text-decoration: underline;
}
.events__text em {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1em;
}

.about__downloads {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: 2.6em;
}

/* Pill button */
.button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.button:hover,
.button:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

/* ==========================================================
   Discography · Sound Design & Composition · Improvisation pages
   9 columns · 16px gutter · 16px margin
   Two entries per row: columns 1–4 and 5–8 (column 9 stays empty)
   ========================================================== */
.page-sound {
  /* one column of the 9-column grid */
  --col9: calc((100vw - 2 * var(--margin) - 8 * var(--gap)) / 9);
}

.sound {
  padding: var(--margin) var(--margin) calc(var(--margin) * 4);
}
.sound__heading {
  margin-bottom: 16px;
  font-size: inherit;
  text-transform: uppercase;
  color: var(--text-light);
}

.sound__list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 16px;
  align-items: start;
}

/* Each entry: 4 grid columns */
.sound__item {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  scroll-margin-top: var(--margin);
}
.sound__item:nth-child(odd)  { grid-column: 1 / span 4; }
.sound__item:nth-child(even) { grid-column: 5 / span 4; }

.sound__title + .sound__credits,
.sound__title + .sound__buttons {
  margin-top: 8px;
}

.sound__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

/* Discography: cover (col 1) · title + credits (cols 2–3, credits flow
   into a 2nd column once they reach the bottom of the cover) · buttons below */
.sound__cover {
  grid-column: 1;
}
.sound__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.sound__item--album .sound__info {
  grid-column: 2 / span 2;
  display: flex;
  flex-direction: column;
  height: var(--col9);           /* as tall as the cover */
}
.sound__item--album .sound__title {
  width: calc(50% - var(--gap) / 2);
}
.sound__item--album .sound__credits {
  flex: 1;
  min-height: 0;
  columns: 2;
  column-gap: var(--gap);
  column-fill: auto;
}
.sound__item--album .sound__buttons {
  grid-column: 1 / -1;
  margin-top: 16px;
}

/* Sound Design: video (cols 1–3) · title + buttons stacked (col 4) */
.sound__video {
  grid-column: 1 / span 3;
}
.sound__video .embed {
  width: 100%;
  --ratio: 16 / 9;
}
.sound__item--video .sound__info {
  grid-column: 4;
}
.sound__item--video .sound__buttons {
  flex-direction: column;
}

/* Improvisation: media one column tall, natural width (max 2 columns);
   title 16px to the right */
.sound__item--impro {
  display: flex;
  gap: 16px;
}
.sound__media {
  flex: none;
}
.sound__media img,
.sound__media .embed {
  display: block;
  height: var(--col9);
  max-width: calc(2 * var(--col9) + var(--gap));
}
.sound__media img {
  width: auto;
  object-fit: cover;
}
.sound__media .embed {
  width: calc(var(--col9) * 16 / 9);
  aspect-ratio: auto;
}

/* Small filled button (REVIEW, INTERVIEW, YOUTUBE …) — shown as typed */
.button--small {
  padding: 2px 4px;
  border: 0;
  border-radius: 3px;
  background: #d2d2d2;
  line-height: 1.1;
}
.button--small:hover,
.button--small:focus-visible {
  background: var(--text);
  color: #fff;
}

/* ==========================================================
   External players + cookie consent (consent.js)
   ========================================================== */
.embed {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background: var(--text);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #e4e4e4;
}

/* Grey panel shown instead of the player until "I agree" */
.embed__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  color: #f5f5f5;
}
.embed__text {
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
.embed__title {
  margin-bottom: 1em;
}
.embed__consent a,
.consent-prefs a {
  text-decoration: underline;
}
.embed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.embed__btn {
  padding: 3px 4px;
  border: 0;
  border-radius: 3px;
  background: #e4e4e4;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.embed__btn--dark {
  background: #3a3a3a;
  color: #f5f5f5;
}
.embed__btn:hover {
  background: #fff;
  color: var(--text);
}

/* Small players (Improvisation): tighter panel */
.sound__media .embed__consent {
  padding: 10px;
  gap: 8px;
}
.sound__media .embed__title {
  margin-bottom: 0.5em;
}

/* "Change my preference" window */
.consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--margin);
  background: rgba(245, 245, 245, 0.7);
}
.consent-prefs__panel {
  width: min(360px, 100%);
  display: grid;
  gap: 1em;
  padding: 20px;
  background: var(--text);
  color: #f5f5f5;
}
.consent-prefs__list {
  display: grid;
  gap: 0.5em;
}
.consent-prefs__list input {
  accent-color: var(--hover);
}

/* ==========================================================
   Imprint + Privacy Policy (8-column grid, FreeSerif text)
   ========================================================== */
.legal {
  padding: var(--margin) var(--margin) calc(var(--margin) * 4);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-bio); /* 20px */
  line-height: var(--leading-bio); /* 96% */
}
.legal__heading {
  margin-bottom: 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: var(--leading);
  text-transform: uppercase;
  color: var(--text-light);
}
.legal h2 {
  font: inherit;
}
.legal a:hover,
.legal__link:hover {
  text-decoration: underline;
}
.legal__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Imprint: two blocks of 4 columns each */
.imprint {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}
.imprint__block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1em;
  align-content: start;
}
.imprint__full {
  grid-column: 1 / -1;
}
.imprint__label {
  grid-column: 1;
} /* e.g. "Kontakt" */
.imprint__label--wide {
  grid-column: 1 / span 2;
}
.imprint__value {
  grid-column: 3 / span 2;
} /* e.g. the e-mail */

/* Privacy: title in columns 1–4, text in columns 5–8 */
.privacy {
  display: grid;
  row-gap: 1em;
}
.privacy__section {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.privacy__section > h2 {
  grid-column: 1 / span 4;
}
.privacy__section > div {
  grid-column: 5 / span 4;
}
.privacy__section p + p,
.privacy__section p + ul,
.privacy__section ul + p {
  margin-top: 1em;
}
.privacy__section ul {
  list-style: none;
}
.privacy__section li::before {
  content: "- ";
}

/* ==========================================================
   Small screens: 4 columns
   ========================================================== */
@media (max-width: 700px) {
  :root {
    --columns: 4;
    --fs-logo: 2.5rem;
  }
  .preview__desc {
    display: none;
  }

  /* Work page stacks in one normal scroll: header, description, video, images */
  .page-work {
    overflow: auto;
  }
  .work-page {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    height: auto;
    padding: var(--margin) var(--margin) calc(var(--margin) * 3);
  }
  .work-page__col {
    display: contents;
  }
  .work-head {
    order: 1;
    row-gap: 1.5em;
    min-height: 0 !important;
  }
  .work-head__info,
  .work-head__credits {
    grid-column: 1 / -1;
  }
  .work-head__info {
    padding-right: 56px;   /* keep long titles clear of the EN/PT toggle */
  }
  .work-desc {
    order: 2;
    min-height: 0 !important;
  }
  .work-video {
    order: 3;
  }
  .work-images {
    order: 4;
  }

  /* About page stacks: logo, photo, bio, events — one normal scroll */
  .page-about {
    overflow: auto;
  }
  .about {
    height: auto;
  }
  .about__intro,
  .about__events {
    grid-column: 1 / -1;
    overflow: visible;
    padding-bottom: 0;
  }
  .about__photo,
  .about__bio {
    width: 100%;
  }
  .about__contact--mobile {
    display: block;
  }
  .about__contact--desktop,
  .about__contact--mobile[hidden] {
    display: none;
  }
  .about__events {
    grid-row: 2;
    margin: 3em 0 0;
    padding: 0 0 var(--margin);
  }
  .about__events-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Legal pages stack */
  .imprint {
    grid-template-columns: 1fr;
    row-gap: 3em;
  }
  .privacy__section > h2,
  .privacy__section > div {
    grid-column: 1 / -1;
  }
  .privacy__section > div {
    margin-top: 0.5em;
  }

  /* Sound pages: one entry per row */
  .page-sound {
    --col9: calc((100vw - 2 * var(--margin) - 3 * var(--gap)) / 4);
  }
  .sound__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sound__item:nth-child(odd),
  .sound__item:nth-child(even) {
    grid-column: 1 / -1;
  }

  /* Discography: cover (cols 1–2) · title + credits (cols 3–4) · buttons below */
  .sound__cover {
    grid-column: 1 / span 2;
  }
  .sound__item--album .sound__info {
    grid-column: 3 / span 2;
    height: auto;
  }
  .sound__item--album .sound__title {
    width: auto;
  }
  .sound__item--album .sound__credits {
    columns: auto;
  }

  /* Sound Design: video full width · title · buttons in a row */
  .sound__item--video {
    row-gap: 8px;
  }
  .sound__video,
  .sound__item--video .sound__info {
    grid-column: 1 / -1;
  }
  .sound__item--video .sound__buttons {
    flex-direction: row;
  }

  /* Improvisation: media full width (natural height) · title */
  .sound__item--impro {
    flex-direction: column;
    gap: 8px;
  }
  .sound__media {
    width: 100%;
  }
  .sound__media img {
    width: 100%;
    height: auto;
    max-width: none;
  }
  .sound__media .embed {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: var(--ratio, 16 / 9);
  }

  /* "Back" moves to the bottom right on phones (all pages) */
  .back {
    left: auto;
    right: calc(var(--margin) - 4px);
  }
  .events__title,
  .events__year {
    margin-left: 0;
  }
}