/* Responsive refinement layer: preserves the existing visual system. */
:root { --site-gutter: clamp(20px, 3vw, 56px); }

img, video { max-width: 100%; }

.topbar,
.hero,
.section-intro,
.filters,
.identity,
footer { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }

.coming-soon { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }

/* Keep the complete single artwork visible at every viewport size. */
.coming-soon-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #070707;
}

.coming-soon-cover img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.filters { scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }

.release-tile:focus-visible,
.filters button:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

@media (max-width: 1100px) {
  .topbar nav { gap: 20px; }
  .header-actions { gap: 5px; }
  .header-social { width: 38px; }
  .release-tile > span { transform: none; padding: 40px 16px 16px; }
  .release-tile small { white-space: normal; text-align: right; }
  .coming-soon-release { grid-template-columns: minmax(230px, 38vw) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .topbar { height: 68px; }
  .topbar nav { top: 68px; }
  .hero { min-height: 680px; padding-top: 108px; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(4.25rem, 18vw, 7rem); }
  .hero-line { max-width: 15em; line-height: 1.35; }
  .section-intro { padding-top: 68px; padding-bottom: 36px; gap: 24px; }
  .filters { top: 68px; }
  .filters button { min-height: 52px; }
  .release-tile > span { padding: 38px 12px 12px; }
  .release-tile b { line-height: 1.05; }
  .coming-soon { padding-top: 70px; padding-bottom: 80px; }
  .coming-soon-copy h4 { font-size: clamp(3.6rem, 17vw, 5.5rem); }
  .coming-soon-player, .coming-soon-copy > p:not(.kicker) { max-width: none; }
  .identity { min-height: 620px; }
  footer > strong { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  :root { --site-gutter: 16px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { right: 56px; }
  .language-switch button { min-width: 28px; }
  .release-tile b { font-size: .86rem; }
  .coming-soon-cover span { top: 12px; left: 12px; }
}

@media (pointer: coarse) {
  .release-tile > span { transform: none; }
}

/* Compact release covers with readable captions below the artwork. */
.release-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; padding: 24px var(--site-gutter); background: var(--black); }
.release-tile { aspect-ratio: auto; overflow: hidden; align-self: start; }
.release-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.release-tile > span { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0 8px; background: none; transform: none; }
.release-tile b { font-size: clamp(.85rem,1.2vw,1.15rem); line-height: 1.2; overflow-wrap: anywhere; }
.release-tile small { display: block; font-size: 9px; white-space: normal; text-align: left; }
@media (max-width:1100px) { .release-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } }
@media (max-width:680px) {
 .release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 18px; padding-bottom: 18px; }
 .release-tile > span { padding: 10px 0 6px; gap: 5px; }
 .release-tile b { font-size: .75rem; line-height: 1.25; }
 .release-tile small { font-size: 8px; }
 .release-badge { font-size: 8px; padding: 5px 6px; }
}

/* Keep the next release compact beside the main catalogue. */
.coming-soon { padding-top: 42px; padding-bottom: 48px; }
.coming-soon-heading { margin-bottom: 24px; }
.coming-soon h3 { font-size: clamp(1.8rem,3vw,2.6rem); line-height: 1; }
.coming-soon-release { grid-template-columns: minmax(160px,220px) minmax(0,1fr); gap: 32px; padding-top: 20px; }
.coming-soon-copy { padding: 0; }
.coming-soon-copy .kicker { margin-bottom: 12px; font-size: 10px; }
.coming-soon-copy h4 { font-size: clamp(2rem,3.6vw,3.5rem); line-height: .95; letter-spacing: -.045em; }
.coming-soon-copy > p:not(.kicker) { margin: 16px 0 20px; font-size: .95rem; line-height: 1.5; }
.coming-soon-player { max-width: 400px; padding-top: 12px; }
.coming-soon-cover span { top: 10px; left: 10px; padding: 6px 8px; font-size: 8px; }
.release-calendar { margin-top: 28px; padding-top: 20px; }
.release-calendar h4 { margin-bottom: 16px; font-size: 1.25rem; }
.release-calendar li { padding: 14px 0; gap: 8px; }
.release-calendar strong { font-size: 1.2rem; }
@media (max-width:680px) {
 .coming-soon { padding-top: 32px; padding-bottom: 36px; }
 .coming-soon-heading { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; }
 .coming-soon-heading .kicker { margin: 0; font-size: 10px; }
 .coming-soon h3 { font-size: 1.8rem; }
 .coming-soon-release { grid-template-columns: 112px minmax(0,1fr); gap: 16px; }
 .coming-soon-cover { align-self: start; }
 .coming-soon-copy h4 { font-size: clamp(1.45rem,5.5vw,2.1rem); line-height: 1; }
 .coming-soon-copy > p:not(.kicker) { margin: 12px 0 16px; font-size: .85rem; }
 .coming-soon-player audio { height: 40px; }
 .coming-soon-player span { font-size: 8px; letter-spacing: .02em; }
 .coming-soon-cover span { font-size: 7px; padding: 4px 5px; top: 6px; left: 6px; }
 .release-calendar ol { grid-template-columns: 1fr; gap: 0; }
 .release-calendar li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; }
 .release-calendar time { font-size: 11px; }
 .release-calendar strong { font-size: 1rem; }
}
@media (max-width:380px) {
 .coming-soon-release { grid-template-columns: 88px minmax(0,1fr); gap: 12px; }
}

/* Compact artist identity without removing its content. */
.identity { min-height: 0; padding-top: 48px; padding-bottom: 48px; align-items: center; }
.identity-copy { max-width: 1120px; }
.identity-copy > .kicker { margin-bottom: 18px; font-size: 10px; }
.identity h2 { font-size: clamp(2.4rem,4.2vw,4.2rem); line-height: .98; letter-spacing: -.045em; }
.identity-copy .identity-lead { max-width: 680px; margin-top: 20px; font-size: .98rem; line-height: 1.55; }
.identity-details { margin-top: 28px; }
.identity-details article { min-height: 0; padding: 20px 24px 22px 0; }
.identity-details article + article { padding-left: 24px; }
.identity-details h3 { margin: 16px 0 10px; font-size: 11px; }
.identity-details span { font-size: 10px; }
.identity-details p { font-size: .9rem; line-height: 1.5; }
@media (max-width:760px) {
 .identity { min-height: 0; padding-top: 36px; padding-bottom: 36px; }
 .identity h2 { font-size: clamp(2rem,8vw,3rem); }
 .identity-copy .identity-lead { margin-top: 16px; font-size: .92rem; }
 .identity-details { margin-top: 22px; }
 .identity-details article, .identity-details article + article { padding: 16px 0; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 12px; row-gap: 8px; }
 .identity-details span { grid-column: 1; grid-row: 1; align-self: center; }
 .identity-details h3 { grid-column: 2; grid-row: 1; margin: 0; }
 .identity-details p { grid-column: 2; margin: 0; max-width: 100%; font-size: .87rem; line-height: 1.5; }
}

/* Show the full Identity film in its own 16:9 frame. */
.identity { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,4vw,64px); align-items: center; background: #050505; }
.identity::after { display: none; }
.identity > video { position: static; inset: auto; grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; opacity: 1; background: #000; }
.identity > .identity-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.identity h2 { font-size: clamp(2rem,3.4vw,3.4rem); }
.identity-details { grid-template-columns: 1fr; }
.identity-details article, .identity-details article + article { min-height: 0; padding: 14px 0; border-left: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 12px; row-gap: 8px; }
.identity-details article + article { border-top: 1px solid var(--line); }
.identity-details span { grid-column: 1; grid-row: 1; align-self: center; }
.identity-details h3 { grid-column: 2; grid-row: 1; margin: 0; }
.identity-details p { grid-column: 2; max-width: none; }
@media (max-width:760px) {
 .identity { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .identity > video { grid-column: 1; grid-row: 1; }
 .identity > .identity-copy { grid-column: 1; grid-row: 2; }
 .identity h2 { font-size: clamp(2rem,8vw,3rem); }
}

/* Balance the complete film with a tighter text column. */
.identity { padding-top: 32px; padding-bottom: 32px; gap: clamp(24px,3vw,48px); }
.identity-copy > .kicker { margin-bottom: 14px; }
.identity-copy .identity-lead { margin-top: 16px; line-height: 1.5; }
.identity-details { margin-top: 18px; }
.identity-details article, .identity-details article + article { padding: 10px 0; row-gap: 6px; }
.identity-details p { margin: 0; line-height: 1.45; }
@media (max-width:760px) {
 .identity { padding-top: 28px; padding-bottom: 28px; gap: 24px; }
}

/* Immersive Identity background with a protected text layer. */
.identity { position: relative; isolation: isolate; overflow: hidden; display: block; padding-top: 40px; padding-bottom: 40px; }
.identity > video { position: absolute; inset: 0 auto 0 0; width: 130%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: center; z-index: -2; }
.identity::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.86) 36%, rgba(5,5,5,.35) 65%, rgba(5,5,5,.12) 100%); }
.identity > .identity-copy { position: relative; width: 52%; max-width: 660px; padding: 0; }
@media (max-width:760px) {
 .identity { padding-top: 32px; padding-bottom: 32px; }
 .identity > video { width: 100%; object-position: 60% center; }
 .identity::after { background: linear-gradient(180deg, rgba(5,5,5,.66), rgba(5,5,5,.83)); }
 .identity > .identity-copy { width: 100%; max-width: none; }
}

/* Artist portrait aligned with the Identity headline. */
.identity-heading { display: grid; grid-template-columns: clamp(100px,11vw,156px) minmax(0,1fr); align-items: center; gap: clamp(16px,2vw,28px); }
.identity-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 2px; }
.identity-heading h2 { margin: 0; font-size: clamp(1.65rem,2.7vw,2.8rem); }
@media(max-width:760px) {
 .identity-heading { grid-template-columns: clamp(88px,25vw,132px) minmax(0,1fr); gap: 16px; }
 .identity-heading h2 { font-size: clamp(1.45rem,5.3vw,2.4rem); }
}

/* Lift film detail while keeping the text's dark overlays. */
.hero > video { filter: brightness(1.10); }
.identity > video { filter: brightness(1.15); }