/* A fixed canvas with click pagination, including secondary pages. */
[hidden] { display: none !important; }
html, body { height: 100%; height: 100svh; overflow: clip !important; scroll-behavior: auto; }
html { color-scheme: dark; }
body { --header-space: 108px; --bottom-space: max(14px,env(safe-area-inset-bottom)); }
main { min-height: 0; }
footer { display: none !important; }
.immersive-site main, .journey { height: 100svh; }
.journey.is-ready .story-viewport, .journey.is-about .story-viewport { height: 100svh; grid-template-rows: minmax(0,1fr) 44px; }
.surface, .catalogue-scroll, .live-playlist, .contact-surface, .newsletter-surface, .about-surface { overflow: clip; overscroll-behavior: none; }
.about-surface, .catalogue-surface, .contact-surface, .newsletter-surface, .record-surface { background: var(--bg); }
.catalogue-scroll { flex: 1; }
.surface-foot { display: none; }
.story-bottomline { position: static; border-top: 0; }
.catalogue-row[hidden], .live-playlist button[hidden] { display: none; }
.click-pager { display: flex; align-items: center; justify-content: space-between; min-height: 44px; flex-shrink: 0; gap: 8px; border-top: 1px solid var(--border); }
.click-pager button, .about-tabs button, .panel-switch { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--grey-light); cursor: pointer; font: .85rem 'Barlow Condensed',sans-serif; }
.click-pager button:hover, .about-tabs button:hover, .panel-switch:hover { color: var(--white); background: var(--blue-faint); }
.click-pager [data-page-range], .click-pager > span { color: var(--grey-light); font: .65rem 'DM Mono',monospace; font-variant-numeric: tabular-nums; }
.click-pager button:disabled { opacity: .3; }
.text-paged { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; height: 100%; gap: 8px; }
.text-paged:has(> .click-pager[hidden]) { grid-template-rows: minmax(0,1fr); gap: 0; }
.text-viewport { min-width: 0; min-height: 0; overflow: clip; }
.text-columns { width: 100%; height: 100%; column-gap: 24px; column-fill: auto; will-change: transform; }
.text-columns h2, .text-columns h3 { break-after: avoid; }
.text-columns p { orphans: 2; widows: 2; }
.about-surface { padding: 0; }
.is-ready .stage[data-scene=about] .artist-surface { position: absolute; top: 0; }
.about-inner { display: flex; flex-direction: column; height: 100%; gap: 12px; padding: 0; }
.about-top { position: static; padding: 0; flex-shrink: 0; min-height: 44px; background: transparent; }
.about-top { gap: 12px; align-items: stretch; border-bottom: 1px solid var(--border); }
.about-top .about-tabs { flex: 1; min-width: 0; border-bottom: 0; gap: clamp(8px,1.3vw,18px); }
.about-top .scene-back { flex-shrink: 0; align-self: flex-start; }
.about-top h1.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.artist-open > picture { display: block; position: absolute; inset: 0; overflow: clip; }
.is-ready .artist-photo { position: absolute; max-width: none; object-fit: fill; }
.stage[aria-busy=true] .artist-photo { transform: none !important; transition: none; }
.travelling-sleeve { position: absolute; z-index: 6; pointer-events: none; object-fit: cover; transform-origin: 0 0; }
.record-cover > picture { display: block; width: 100%; height: 100%; }
.catalogue-row picture { display: block; flex: none; width: 34px; height: 34px; }
.about-top h1 { font-size: 2.3rem; }
.about-tabs { display: flex; gap: 16px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.about-tabs button { padding-inline: 0; font-size: 1rem; border-bottom: 2px solid transparent; }
.about-tabs button[aria-pressed=true] { color: var(--white); border-color: var(--blue); }
.about-top .about-tabs button { white-space: nowrap; font-size: clamp(.85rem,1.25vw,1rem); }
.about-panels { flex: 1; min-height: 0; }
.about-main { display: flex; flex-direction: column; height: 100%; gap: 20px; }
.about-booking .contact-links a { border-radius: 2px; }
.about-biography { flex: 1; min-height: 0; }
.about-booking { flex-shrink: 0; padding-top: 16px; }
.about-booking h2 { margin-bottom: 4px; }
.about-booking .contact-links a { padding-block: 10px; }
.about-main { justify-content: center; }
.about-booking { margin-top: 0; }
.about-booking .contact-roles { color: #a7b2cb; }
.about-booking h2 { color: #dce3f5; }
.about-support ul { gap: 0 24px; }
.about-support li { font-family: 'Barlow Condensed',sans-serif; font-size: 1.35rem; letter-spacing: .01em; transition: color .18s,background-color .18s; }
.record-player > div { width: 100%; }
.record-player { overflow: hidden; border-radius: 12px; background: var(--bg); }
.record-player iframe { border-radius: 0; }
.record-caption p { white-space: normal; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.record-retry { min-height: 44px; border: 0; background: transparent; color: var(--white); font-size: .9rem; cursor: pointer; }
.record-object[data-status=playing] .record-back { border-color: rgba(26,92,255,.65); }
.record-cover::after { content: 'Play'; position: absolute; right: 12px; bottom: 12px; padding: 8px 14px; color: white; background: rgba(3,3,8,.8); border: 1px solid rgba(255,255,255,.3); opacity: 0; transform: translateY(4px); transition: opacity .2s,transform .2s; font: .85rem 'Barlow Condensed',sans-serif; }
html[lang=es] .record-cover::after { content: 'Escuchar'; }
.record-cover:is(:hover,:focus-visible)::after { opacity: 1; transform: translateY(0); }
.about-tabs button, .catalogue-release, .live-playlist button { transition: color .18s,background-color .18s,border-color .18s; }
.about-tabs button:active, .click-pager button:active:not(:disabled) { background: rgba(26,92,255,.16); }
.about-panels > :not([hidden]) { animation: about-copy-enter .2s var(--ease-ui); }
@keyframes about-copy-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .record-cover::after { transition: none; transform: none; } }
.about-support { display: flex; flex-direction: column; height: 100%; border: 0; padding: 0; min-height: 0; gap: 8px; }
.about-support > h2 { display: none; }
.about-support ul { flex: 1; min-height: 0; align-content: center; overflow: clip; }
.about-support li { min-height: 48px; height: 48px; padding-block: 0; line-height: 1.05; text-wrap: balance; }
.about-booking-tab, .booking-switch { display: none; }
[data-about-panel=booking] .about-booking-tab { display: block; }
.artist-reel video, .reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-poster { z-index: 1; pointer-events: none; }
.artist-reel[data-frame=ready] .reel-poster { opacity: 0; }
.artist-reel button { z-index: 2; }
.artist-reel { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.025); transition: opacity .2s ease, transform .6s var(--ease-ui), visibility 0s .2s; }
.artist-surface[data-reel-visible=true] .artist-reel { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition: opacity .6s var(--ease-ui), transform .8s var(--ease-ui), visibility 0s; }
.artist-wordmark { transition: opacity .2s var(--ease-ui); }
.artist-surface[data-reel-visible=true] .artist-wordmark { opacity: 0; }
@media (prefers-reduced-motion:reduce) { .artist-reel, .artist-wordmark { transition: none !important; transform: none !important; } }
.stage[data-about-compact=true] .about-booking { display: none; }
.stage[data-about-compact=true] .about-booking-tab { display: block; }
.live-surface > [data-pager=live] { padding-inline: 12px; }
.stage:not([data-scene=videos]) [data-pager=live] { display: none; }
.live-playlist { flex-shrink: 0 !important; }
.nav-panel { display: contents; }
nav[aria-label="Main navigation"] .nav-menu-toggle { display: inline-flex; }
nav .nav-extras { position: absolute; right: var(--page-gutter); top: calc(100% + 8px); width: min(560px,calc(100vw - 32px)); padding: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 16px; background: var(--bg); border: 1px solid var(--border); }
nav .nav-extras :is(a,button) { min-height: 44px; padding: 0 8px; display: flex; align-items: center; text-align: left; color: var(--grey-light); font: .7rem 'DM Mono',monospace; text-decoration: none; text-transform: uppercase; background: transparent; border: 0; cursor: pointer; }
nav .nav-extras :is(a,button):hover { color: var(--white); background: var(--blue-faint); }
@media (max-width:900px) {
  body { --header-space: 92px; }
  nav .nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--page-gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
  nav.menu-open .nav-panel { display: grid; gap: 12px; }
  nav.menu-open .nav-links { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; padding: 0; border: 0; background: transparent; }
  .immersive-site nav.menu-open .nav-links { row-gap: 0; column-gap: 16px; }
  nav.menu-open .nav-links a { display: flex; height: 44px; min-height: 44px; padding-block: 0; }
  nav .nav-extras { position: static; width: 100%; padding: 8px 0 0; grid-template-columns: repeat(2,minmax(0,1fr)); border: 0; border-top: 1px solid var(--border); gap: 0 16px; }
}
@media (max-width:640px) {
  body { --header-space: 88px; }
  .record-object[data-flipped=true] { width: 100%; height: 100%; aspect-ratio: auto; }
  .record-back { padding: 8px 0; }
  .record-back-header { padding-inline: 8px; }
  .about-tabs { gap: 16px; }
  .about-biography p { font-size: 1.05rem; line-height: 1.5; }
  .about-main { gap: 12px; }
  .contact-surface h2 { font-size: 2.3rem; }
  .stage[data-scene=home] .live-play { top: 12px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; }
  .stage[data-scene=home] .live-caption { right: 12px; }
  .stage[data-scene=home] .live-caption h2 { font-size: 1.35rem; }
}
.stage[data-layout=short] .record-paging, .stage[data-layout=short] .surface-foot { display: none; }
@media (max-width:640px) and (max-height:740px) {
  .stage[data-scene=works] .record-surface:has([data-flipped=false]) { display: grid; grid-template-columns: minmax(0,.45fr) minmax(0,.55fr); align-items: center; gap: 14px; }
  .stage[data-scene=works] .record-surface:has([data-flipped=false]) .record-object { width: 100%; height: auto; aspect-ratio: 1; }
  .stage[data-scene=works] .record-surface:has([data-flipped=false]) .record-caption { width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; }
  .stage[data-scene=works] .record-surface:has([data-flipped=false]) .record-caption h2 { white-space: normal; text-wrap: balance; }
  .stage[data-scene=works] .record-surface:has([data-flipped=false]) .record-caption > div { max-width: 100%; }
}
.stage[data-layout=short] .record-caption h2 { font-size: 1.65rem; }
.stage[data-layout=short] .record-object[data-flipped=true] { width: 100%; height: 100%; aspect-ratio: auto; }
.stage[data-layout=short] .record-back { padding: 4px 8px; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 8px; }
.stage[data-layout=short] .record-back-header { flex-direction: column; justify-content: center; align-items: stretch; }
.stage[data-layout=short] .record-player iframe { height: 152px; }
.stage[data-layout=short][data-scene=videos] .live-surface { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.65fr); grid-template-rows: minmax(0,1fr) auto; }
.stage[data-layout=short][data-scene=videos] .live-image { grid-row: 1 / -1; min-height: 0; }
.stage[data-layout=short][data-scene=videos] .live-playlist { display: block; padding-inline: 12px; }
.stage[data-layout=short][data-scene=videos] .live-watch { left: 8px; top: 8px; }
.stage[data-layout=short] .about-booking { display: none; }
.stage[data-layout=short] .about-booking-tab, .stage[data-layout=short] .booking-switch { display: block; }
.stage[data-layout=short] .about-inner { gap: 6px; }
.stage[data-layout=short] .about-top h1 { font-size: 2rem; }
.stage[data-layout=short] .about-biography p { font-size: 1rem; line-height: 1.45; }
.stage[data-layout=short] .newsletter-surface .nl-sub { display: none; }
.stage[data-layout=short] .newsletter-surface .conversion-newsletter { padding-top: 0 !important; }
.stage[data-layout=short] .newsletter-surface .nl-title { font-size: 1.6rem !important; }
.stage[data-layout=short] .newsletter-surface .nl-terms { min-height: 32px !important; }
@media (max-height:500px) and (orientation:landscape) {
  body { --header-space: 64px; }
  nav[aria-label="Main navigation"], .immersive-site .immersive-nav, body:not(.immersive-site) nav[aria-label="Main navigation"] { height: 56px; min-height: 56px; padding-block: 6px; }
  .story-viewport { padding-top: 64px; padding-bottom: max(4px,env(safe-area-inset-bottom)); row-gap: 6px; }
  nav.menu-open .nav-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
  nav .nav-extras { grid-template-columns: repeat(4,minmax(0,1fr)); }
  nav.menu-open .nav-panel { padding-block: 4px 8px; gap: 4px; }
}
@media (max-width:640px) and (max-height:550px) and (orientation:portrait) {
  nav.menu-open .nav-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
  nav .nav-extras { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 8px; }
}

body:not(.immersive-site) main { height: 100svh; padding: var(--header-space) max(var(--page-gutter),env(safe-area-inset-right)) var(--bottom-space) max(var(--page-gutter),env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 12px; overflow: clip; }
.legal-section { padding: 0; min-height: 0; height: 100%; width: 100%; max-width: 1000px; }
.legal-container { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.legal-container > .page-back { position: static; width: max-content; margin: 0; flex-shrink: 0; border: 1px solid var(--border); }
.legal-title { position: absolute; top: 6px; left: 96px; font-size: 2rem; }
.legal-intro { display: none; }
.legal-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex-shrink: 0; margin: 0; padding: 0; overflow: clip; }
.legal-nav-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; white-space: normal; text-align: center; }
.legal-content-tab.active.text-paged { display: grid; height: auto; flex: 1; min-height: 0; padding: 16px; overflow: clip; }
.legal-content-tab p, .legal-content-tab ul { font-size: 1rem; line-height: 1.5; }
.legal-content-tab h2 { font-size: 1.7rem; margin-bottom: 16px; }
.legal-content-tab h3 { font-size: 1.05rem; margin-top: 16px; }
body:not(.immersive-site) .links-page-hero { padding: 0; display: flex; justify-content: flex-start; align-items: center; gap: 24px; flex-shrink: 0; }
body:not(.immersive-site) .links-page-hero .page-back { margin: 0; }
body:not(.immersive-site) .links-page-hero .links-page-kicker { margin: 0; font-size: 1.5rem; }
body:not(.immersive-site) .conversion-links { flex: 1; min-height: 0; padding: 0; background: transparent; border: 0; }
.conversion-links .links-inner { height: 100%; max-width: 600px; display: grid; align-items: center; }
body:not(.immersive-site) .conversion-links .links-grid { height: 100%; max-height: 440px; display: grid; grid-template-rows: repeat(5,minmax(44px,1fr)); gap: 12px; }
body:not(.immersive-site) .conversion-links .link-card { padding: 8px 16px; }
.demodrop-shell { height: 100%; width: 100%; max-width: 1000px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.demodrop-header { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.demodrop-header .page-back { margin: 0; flex-shrink: 0; }
.demodrop-header .panel-switch { margin-left: auto; }
.demodrop-header .demodrop-hero { padding: 0; border: 0; }
.demodrop-header .demodrop-title { font-size: 2.5rem; }
.demodrop-subtitle { display: none; }
.demodrop-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.demodrop-panel.text-paged { flex: 1; width: 100%; padding: 16px; border: 1px solid var(--border); }
.demodrop-panel .demodrop-rules { display: block; }
.demodrop-panel .demodrop-rules li { display: block; margin-bottom: 12px; }
.demodrop-panel .demodrop-rules li::before { display: none; }
.demodrop-form-wrap { padding: 16px; height: 100%; min-height: 0; width: 100%; }
.demodrop-form { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 12px; }
.wizard-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: clip; }
.demodrop-field input { min-height: 44px; }
.demodrop-field textarea { height: 100px; min-height: 100px; resize: none; }
.demodrop-submit { min-height: 44px; flex-shrink: 0; }
.demodrop-msg { margin: 0; flex-shrink: 0; }
.demodrop-msg:empty { display: none; }
.demodrop-consent { padding: 0; font-size: .9rem; line-height: 1.4; }
.demodrop-consent input { flex-shrink: 0; }
.tour-page > .page-back { align-self: flex-start; margin: 0; flex-shrink: 0; }
.tour-pages { flex: 1; min-height: 0; }
.tour-page .tour-pages .modern-tour { padding: 0; background: transparent; }
.tour-page .tour-pages .tour-header { padding: 0; margin: 0 0 20px; }
.tour-page .tour-pages .tour-title { font-size: 2.5rem; }
.tour-page .tour-pages .tour-list { display: block; }
.tour-page .tour-pages .tour-row { break-inside: avoid; padding: 16px 0; }
@media (max-width:640px) {
  .demodrop-header { flex-wrap: wrap; gap: 8px 16px; }
  .demodrop-header .demodrop-hero { flex-basis: 100%; order: 2; }
  .demodrop-header .demodrop-title { font-size: 2rem; }
  .demodrop-form-wrap { padding: 12px; }
  .demodrop-shell { gap: 12px; }
}
@media (max-height:500px) and (orientation:landscape) {
  body:not(.immersive-site) .conversion-links .links-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(44px,1fr)); }
  .demodrop-header { flex-wrap: nowrap; }
  .demodrop-header .demodrop-hero { flex-basis: auto; order: 0; }
  .demodrop-header .demodrop-title { font-size: 1.65rem; }
  .demodrop-shell, .legal-container { gap: 6px; }
  .demodrop-form-wrap { padding: 0; border: 0; background: transparent; }
  .demodrop-form { gap: 4px; }
  .demodrop-field textarea { min-height: 64px; height: 64px; }
  .demodrop-field input { min-height: 44px; padding-block: 8px; }
  .legal-content-tab.active.text-paged { padding: 8px 12px; }
  .legal-container { display: grid; grid-template-columns: 64px minmax(0,1fr); grid-template-rows: 44px minmax(0,1fr); column-gap: 12px; }
  .legal-container > .page-back { grid-column: 1; grid-row: 1; }
  .legal-title { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-nav { grid-column: 2; grid-row: 1; }
  .legal-content-tab.active { grid-column: 1 / -1; grid-row: 2; }
}

/* The sleeve stays in place; listening opens a compact player underneath. */
.record-object { perspective: none; }
.record-turn { transform: none !important; transform-style: flat; transition: none; }
.record-front, .record-back { backface-visibility: visible; -webkit-backface-visibility: visible; }
.record-back { display: none; }
.record-object[data-flipped=true] { width: 100%; height: 100%; aspect-ratio: auto; }
.record-object[data-flipped=true] .record-turn { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.record-object[data-flipped=true] .record-front { position: relative; inset: auto; flex: none; width: var(--record-art-size); height: var(--record-art-size); }
.record-object[data-flipped=true] .record-cover::after { display: none; }
.record-object[data-flipped=true] .record-back { position: relative; inset: auto; transform: none; display: flex; flex-direction: column; flex: none; width: min(100%,max(var(--record-art-size),320px)); height: 196px; padding: 0; gap: 0; border: 0; background: transparent; animation: panel-enter .22s var(--ease-ui); }
.record-object[data-flipped=true] .record-back-header { flex-direction: row; height: 44px; padding: 0; align-items: center; justify-content: space-between; }
.record-back-header .record-return { padding-left: 0; }
.record-object[data-flipped=true] .record-player { flex: none; width: 100%; height: 152px; }
.record-object[data-flipped=true] .record-player iframe { height: 152px; }
.record-object[data-status=error] .record-player { display: none; }
.record-object[data-status=error] .record-retry { flex: 1; text-align: left; border-block: 1px solid var(--border); }
.record-surface[data-compact-player=true] .record-front { display: none; }
.record-surface[data-compact-player=true] .record-turn { justify-content: center; gap: 0; }
@media (prefers-reduced-motion:reduce) { .reel-poster { transition: none; } }
.record-object[data-flipped=false] .record-back { display: none; }

/* Clear release selection and booking actions. */
.catalogue-browse { gap: 8px; padding-top: 6px; }
.catalogue-browse button { min-width: 54px; min-height: 44px; padding: 0 8px; border: 1px solid var(--border); color: var(--white); font: 600 1rem 'Barlow Condensed',sans-serif; }
.catalogue-browse button:not(:disabled) { border-color: var(--blue); background: var(--blue); color: white; }
.catalogue-browse button:not(:disabled):hover, .catalogue-browse button:not(:disabled):focus-visible { border-color: var(--blue-mid); background: var(--blue-mid); }
.catalogue-browse button[aria-disabled=true] { opacity: .48; }
.catalogue-browse .mono { color: #b9c4dd; font-size: .7rem; white-space: nowrap; }
.booking-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; margin-top: 8px; background: var(--blue); color: white; text-decoration: none; font: 600 1.05rem 'Barlow Condensed',sans-serif; transition: background-color .18s, transform .18s; }
.booking-cta:hover { background: var(--blue-mid); }
.booking-cta:active { transform: scale(.98); }
@media (prefers-reduced-motion:reduce) { .booking-cta { transition: none; } }