/*
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.0.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.6875rem; /* 11px — 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;
}

.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
   ========================================================== */

/* Header (pinned): 1 title + year/material · 2–3 credits.
   Transparent and click-through, so the description and images can
   scroll up past it in columns 5–8. */
.work-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2;
  align-items: start;
  padding: var(--margin) var(--margin) var(--gap);
  pointer-events: none;
}
.work-head > * {
  pointer-events: auto;
}

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

/* Credits: role in column 2, names in column 3, one row per credit */
.work-head__credits {
  grid-column: 2 / span 2;
  grid-row: 1;
}
.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;
}

/* Body: description (row 1, columns 5–7), then video left / images right.
   Row 1 is at least as tall as the pinned header, so nothing starts under it. */
.work-body {
  grid-template-rows:
    minmax(calc(var(--head-h, 0px) - var(--margin) - var(--gap)), auto)
    auto;
  row-gap: var(--gap);
  align-items: start;
  padding: var(--margin);
}

.work-desc {
  grid-column: 5 / span 3;
  grid-row: 1;
}
.work-desc p + p {
  margin-top: 1em;
}

.work-video {
  grid-column: 1 / span 4;
  grid-row: 2;
  position: sticky;
  top: var(--head-h, 0px);
  display: grid;
  gap: var(--gap);
}
.work-video .embed {
  width: 100%;
}

.work-images {
  grid-column: 5 / span 4;
  grid-row: 2;
  display: grid;
  gap: var(--gap);
}
.work-images img {
  display: block;
  width: 100%;
  height: auto;
}

.work-body 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 / Improvisation page
   9 columns · 16px gutter · 16px margin · 3 columns per section
   ========================================================== */
.page-sound {
  overflow: hidden;
  /* one column of the 9-column grid */
  --col9: calc((100vw - 2 * var(--margin) - 8 * var(--gap)) / 9);
}

.sound {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  height: 100vh;
  height: 100dvh;
  padding: 0 var(--margin);
}

/* Each section: heading stays, list scrolls on its own */
.sound__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sound__heading {
  padding: var(--margin) 0 16px;
  font-size: inherit;
  text-transform: uppercase;
  color: var(--text-light);
}
.sound__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: calc(var(--margin) * 3);
}
.sound__scroll::-webkit-scrollbar {
  display: none;
}

.sound__list {
  display: grid;
  row-gap: var(--gap);
}

/* Entry inside a section: the section's 3 columns */
.sound__item {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  scroll-margin-top: 0;
}

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

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

/* Discography: cover · title + credits · buttons */
.sound__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Sound Design: video in 2 columns · title + buttons */
.sound__video {
  grid-column: 1 / span 2;
}
.sound__video .embed {
  width: 100%;
  --ratio: 16 / 9;
}

/* Improvisation: media one column tall, natural width; title 16px 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 pill button (REVIEWS, YOUTUBE …) */
.button--small {
  padding: 4px 10px;
  text-transform: uppercase;
}

/* ==========================================================
   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: header, description, video, images — nothing sticks */
  .work-head {
    position: static;
    row-gap: 1.5em;
    padding-bottom: 0;
  }
  .work-head__info {
    grid-column: 1 / -1;
  }
  .work-head__credits {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .work-body {
    grid-template-rows: none;
    padding-top: 1.5em;
  }
  .work-desc,
  .work-video,
  .work-images {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
  }
  .work-video {
    margin-bottom: var(--gap);
  }

  /* 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 page — accordion: one page scroll. Section headings stick
     stacked at the top once reached, and wait stacked at the bottom
     before that. Short content simply follows the heading. */
  .page-sound {
    overflow: auto;
    --sh: 27px; /* heading row: 16px space + 11px text */
  }
  .sound {
    display: block;
    height: auto;
    padding: 0 var(--margin) var(--margin);
  }
  .sound__col,
  .sound__scroll {
    display: contents; /* headings share one scroll area */
  }
  .sound__heading {
    position: sticky;
    z-index: 2;
    top: calc(var(--i) * var(--sh));
    bottom: calc(var(--margin) + (2 - var(--i)) * var(--sh));
    height: var(--sh);
    padding: var(--margin) 0 0;
    line-height: calc(var(--sh) - var(--margin));
    background: var(--bg);
    box-shadow: 0 8px 0 var(--bg); /* 8px clear space under the heading */
  }
  /* 16px clear strip along the bottom edge (under "Back") */
  .page-sound::after {
    content: "";
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1;
    height: var(--margin);
    background: var(--bg);
  }
  .sound__list {
    padding-top: 8px;
  }
  .sound__item {
    scroll-margin-top: calc(3 * var(--sh) + 8px);
  }

  /* Discography: cover in 2 columns · title + credits, buttons at the bottom */
  .sound__item--album {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
  }
  .sound__item--album .sound__cover {
    grid-row: 1 / span 2;
  }
  .sound__item--album .sound__buttons {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

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

  /* 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;
  }
}