/* TREBLEDEFF — a deliberately dependency-free, mobile-first stylesheet */
:root {
  --ink: #050505;
  --surface: #0d0d0d;
  --surface-alt: #171717;
  --paper: #fffefa;
  --muted: #c6c4c2;
  --line: rgba(255, 254, 250, .2);
  --acid: #df1027;
  --acid-ink: #fffefa;
  --red: #8e0718;
  --max: 76rem;
  --gap: clamp(1.25rem, 3vw, 3rem);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-underline-offset: .18em; }
a:hover { color: var(--acid); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.skip-link { background: var(--acid); color: var(--acid-ink); font-weight: 800; left: 1rem; padding: .65rem 1rem; position: fixed; top: -4rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.eyebrow { color: var(--acid); font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 1.2rem; text-transform: uppercase; }
.display { font-size: clamp(3.2rem, 9.6vw, 8.5rem); font-weight: 800; letter-spacing: -.075em; line-height: .83; margin: 0; max-width: 10ch; text-transform: uppercase; }
.display--medium { font-size: clamp(2.8rem, 7vw, 5.8rem); max-width: 13ch; }
.lede { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.38rem); max-width: 38rem; }
.container { margin: 0 auto; max-width: var(--max); padding-left: var(--gap); padding-right: var(--gap); }
.section { padding-bottom: clamp(4rem, 10vw, 8rem); padding-top: clamp(4rem, 10vw, 8rem); }
.section--line { border-top: 1px solid var(--line); }
.surface { background: var(--surface); }
.surface-alt { background: var(--surface-alt); }
.button { align-items: center; background: var(--acid); border: 1px solid var(--acid); color: var(--acid-ink); display: inline-flex; font-size: .8rem; font-weight: 800; gap: .7rem; justify-content: center; letter-spacing: .08em; min-height: 3.2rem; padding: .75rem 1.1rem; text-decoration: none; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { background: transparent; color: var(--acid); transform: translateY(-2px); }
.button--ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.button--ghost:hover { border-color: var(--acid); color: var(--acid); }
.button svg { height: 1rem; width: 1rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.site-header { background: rgba(5,5,5,.9); border-bottom: 1px solid transparent; inset: 0 0 auto; position: sticky; z-index: 20; backdrop-filter: blur(14px); }
.site-header.is-scrolled { border-color: var(--line); }
.header-inner { align-items: center; display: flex; height: 4.8rem; justify-content: space-between; }
.brand { align-items: center; display: inline-flex; font-size: 1rem; font-weight: 900; gap: .5rem; letter-spacing: -.06em; line-height: 1; text-decoration: none; }
.brand:hover { color: var(--paper); }
.brand-mark { background: var(--acid); display: inline-grid; height: 1.35rem; place-items: center; width: 1.35rem; }
.brand-mark::before { background: var(--ink); box-shadow: 0 .42rem var(--ink), 0 -.42rem var(--ink); content: ""; height: .15rem; width: 1.35rem; }
.menu-toggle { align-items: center; background: transparent; border: 0; color: var(--paper); display: inline-flex; gap: .55rem; font-weight: 800; letter-spacing: .1em; padding: .5rem 0 .5rem .5rem; text-transform: uppercase; }
.menu-toggle-box { display: grid; gap: .3rem; width: 1.35rem; }
.menu-toggle-box span { background: currentColor; display: block; height: 2px; transition: transform .2s ease; width: 100%; }
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:first-child { transform: translateY(.2rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:last-child { transform: translateY(-.2rem) rotate(-45deg); }
.nav { background: var(--surface); border-top: 1px solid var(--line); display: none; left: 0; min-height: calc(100dvh - 4.8rem); padding: 2rem var(--gap); position: absolute; top: 4.8rem; width: 100%; }
.nav.is-open { display: block; }
.nav ul { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.06em; padding: .15rem 0; text-decoration: none; text-transform: uppercase; }
.nav-release-link { overflow-wrap: normal !important; text-wrap: nowrap; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--acid); }
.nav-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; margin-top: 2rem; padding-top: 1.5rem; }

.hero { min-height: 0; overflow: visible; position: relative; }
.hero .container { display: grid; min-height: 0; padding-bottom: 4rem; padding-top: min(53rem, calc(6.5rem + 75vw)); position: relative; z-index: 1; }
.hero-copy { align-self: start; }
.hero .display { max-width: 9.3ch; }
.hero .lede { margin-bottom: 0; }
.hero-art { background: #050505; inset: 0; overflow: visible; pointer-events: none; position: absolute; }
.hero-art::before { content: none; }
.hero-artwork { display: block; height: auto; margin: 4.75rem auto 0; max-width: calc(100% - 1rem); object-fit: contain; position: relative; width: 100%; z-index: 1; }
.hero-grid { background-image: linear-gradient(rgba(255,254,250,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.1) 1px, transparent 1px); background-size: 100% 4.2rem, 4.2rem 100%; inset: 0; mask-image: linear-gradient(90deg, #000, transparent 66%); opacity: .32; position: absolute; }
.waveform { display: none; }
.waveform i { animation: none; background: var(--acid); display: block; height: var(--h); opacity: .95; width: clamp(.3rem, .75vw, .7rem); }
.waveform i:nth-child(2n) { animation-delay: -.8s; }.waveform i:nth-child(3n) { animation-delay: -1.7s; }.waveform i:nth-child(4n) { animation-delay: -2.5s; }
@keyframes breathe { 50% { transform: scaleY(.6); } }
.hero-stamp { bottom: 1.25rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .11em; position: absolute; right: var(--gap); text-transform: uppercase; writing-mode: vertical-rl; }

.intro-grid, .split-grid { display: grid; gap: 2.5rem; }
.intro-side { border-left: 1px solid var(--acid); padding-left: 1.2rem; }
.intro-side p { color: var(--muted); font-size: 1rem; margin: 0; }
.statement { font-family: var(--serif); font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: -.055em; line-height: 1; margin: 0; max-width: 18ch; }
.statement em { color: var(--acid); font-style: normal; }
.link-arrow { align-items: center; color: var(--acid); display: inline-flex; font-size: .78rem; font-weight: 800; gap: .5rem; letter-spacing: .1em; margin-top: 1.7rem; text-decoration: none; text-transform: uppercase; }
.link-arrow svg { height: 1em; transition: transform .2s ease; width: 1em; }.link-arrow:hover svg { transform: translateX(.25rem); }

.marquee { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); overflow: hidden; padding: .85rem 0; white-space: nowrap; }
.marquee-track { animation: slide 26s linear infinite; display: inline-block; font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; }
.marquee-track span { color: var(--acid); margin: 0 1rem; }@keyframes slide { to { transform: translateX(-50%); } }

.service-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-card { background: var(--surface); display: flex; flex-direction: column; min-height: 16rem; padding: 1.5rem; transition: background .2s ease; }
.service-card:hover { background: var(--surface-alt); }.service-index { color: var(--acid); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.service-card h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.06em; line-height: .95; margin: auto 0 .8rem; text-transform: uppercase; }
.service-card p { color: var(--muted); font-size: .93rem; margin: 0; }

.listen-banner { align-items: end; background: var(--acid); color: var(--acid-ink); display: grid; gap: 2rem; padding: clamp(2rem, 5vw, 4.5rem); }
.listen-banner h2 { font-size: clamp(2.4rem, 6.5vw, 5.8rem); letter-spacing: -.075em; line-height: .84; margin: 0; max-width: 8ch; text-transform: uppercase; }
.listen-banner p { font-size: 1.08rem; margin: 0; max-width: 30rem; }.listen-banner .button { background: var(--acid-ink); border-color: var(--acid-ink); color: var(--acid); }.listen-banner .button:hover { background: transparent; color: var(--acid-ink); }

.page-hero { border-bottom: 1px solid var(--line); overflow: hidden; padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(3.5rem, 8vw, 6rem); position: relative; }
.page-hero::after { border: 1px solid rgba(223,16,39,.78); border-radius: 50%; content: ""; height: min(43vw, 33rem); position: absolute; right: -10vw; top: -12vw; width: min(43vw, 33rem); }
.page-hero--album { isolation: isolate; padding-top: clamp(13rem, 27vw, 22rem); }.page-hero--album::after { height: clamp(9rem, 20vw, 18rem); left: 50%; right: auto; top: clamp(1rem, 2vw, 2.5rem); transform: translateX(-50%) scale(1.12); width: clamp(9rem, 20vw, 18rem); }.album-hero-orbit-portrait { background: #050505; border: 1px solid rgba(255,91,21,.95); border-radius: 50%; box-shadow: 0 0 1.15rem rgba(255,80,16,.92), 0 0 3.2rem rgba(223,16,39,.8), 0 0 6.2rem rgba(132,8,13,.58), inset 0 0 1.75rem rgba(255,126,37,.7); height: clamp(9rem, 20vw, 18rem); isolation: isolate; left: 50%; margin: 0; overflow: visible; pointer-events: none; position: absolute; right: auto; top: clamp(1rem, 2vw, 2.5rem); transform: translateX(-50%); width: clamp(9rem, 20vw, 18rem); z-index: 0; }.album-hero-orbit-portrait::before { background: radial-gradient(ellipse at 19% 94%, rgba(255,245,206,.98) 0 4%, rgba(255,114,21,.96) 10%, transparent 24%), radial-gradient(ellipse at 39% 99%, rgba(255,249,218,.96) 0 5%, rgba(255,68,15,.98) 12%, transparent 27%), radial-gradient(ellipse at 62% 95%, rgba(255,238,186,.98) 0 4%, rgba(239,38,13,.98) 12%, transparent 28%), radial-gradient(ellipse at 82% 97%, rgba(255,249,215,.98) 0 4%, rgba(255,86,18,.98) 11%, transparent 25%), repeating-conic-gradient(from 180deg, transparent 0deg 5deg, rgba(255,247,211,.98) 7deg 11deg, rgba(255,99,19,1) 13deg 23deg, rgba(188,5,16,.94) 25deg 34deg, transparent 37deg 45deg); border-radius: 50%; content: ""; filter: blur(.36rem) drop-shadow(0 0 .7rem rgba(255,237,190,.96)) drop-shadow(0 0 1.65rem rgba(255,61,14,1)); inset: -15%; -webkit-mask: radial-gradient(circle, transparent 44%, #000 53% 78%, transparent 90%); mask: radial-gradient(circle, transparent 44%, #000 53% 78%, transparent 90%); mix-blend-mode: screen; opacity: 1; pointer-events: none; position: absolute; transform-origin: 50% 50%; z-index: 2; }.album-hero-orbit-portrait::after { background: radial-gradient(circle, transparent 50%, rgba(255,104,20,.25) 63%, rgba(238,21,19,.82) 82%, rgba(255,225,159,.7) 100%); border-radius: 50%; box-shadow: inset 0 0 1.55rem rgba(255,248,218,.6), inset 0 0 3.6rem rgba(244,31,12,.95); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 3; }.album-hero-orbit-portrait img { border-radius: 50%; display: block; filter: brightness(1.18) contrast(1.14); height: 100%; object-fit: cover; object-position: 50% 0%; position: relative; width: 100%; z-index: 1; }@keyframes portrait-flame-ring { 0% { filter: blur(.3rem) drop-shadow(0 0 .55rem rgba(255,237,190,.86)) drop-shadow(0 0 1.3rem rgba(255,61,14,.9)); transform: rotate(-3deg) scale(.96); } 52% { filter: blur(.48rem) drop-shadow(0 0 1.1rem rgba(255,244,205,1)) drop-shadow(0 0 2.25rem rgba(255,51,10,1)); transform: rotate(4deg) scale(1.06); } 100% { filter: blur(.36rem) drop-shadow(0 0 .7rem rgba(255,237,190,.96)) drop-shadow(0 0 1.65rem rgba(255,61,14,1)); transform: rotate(-3deg) scale(.98); } }@media (prefers-reduced-motion: no-preference) { .album-hero-orbit-portrait::before { animation: portrait-flame-ring 3.2s ease-in-out infinite alternate; } }
.page-hero .container { position: relative; z-index: 1; }.page-hero .lede { margin-bottom: 0; }
.page-hero:not(:has(.album-hero-orbit-portrait))::after { background: linear-gradient(145deg, rgba(5,5,5,.2), rgba(223,16,39,.22)), url('../img/trebledeff-about-portrait.jpeg') center / cover no-repeat; background-blend-mode: multiply, screen; box-shadow: 0 0 1.15rem rgba(255,80,16,.55), 0 0 3.2rem rgba(223,16,39,.45), inset 0 0 1.75rem rgba(255,126,37,.58); overflow: hidden; }
.page-number { color: var(--acid); font-size: .8rem; font-weight: 800; letter-spacing: .15em; margin-bottom: 3rem; text-transform: uppercase; }

.release-list { border-top: 1px solid var(--line); }.release { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1.25rem; grid-template-columns: 3.8rem 1fr auto; padding: 1.3rem 0; }.release-art { align-items: center; background: var(--acid); color: var(--acid-ink); display: flex; font-size: .68rem; font-weight: 900; height: 3.8rem; justify-content: center; letter-spacing: -.04em; text-align: center; width: 3.8rem; }.release:nth-child(2n) .release-art { background: var(--red); }.release h3 { font-size: clamp(1.15rem, 2.8vw, 1.75rem); letter-spacing: -.05em; line-height: .95; margin: 0 0 .35rem; text-transform: uppercase; }.release p { color: var(--muted); font-size: .82rem; margin: 0; }.release-action { background: transparent; border: 1px solid var(--line); color: var(--paper); height: 2.5rem; padding: 0 .85rem; }.release-action:hover { border-color: var(--acid); color: var(--acid); }
.note { border: 1px solid var(--line); color: var(--muted); margin-top: 2rem; max-width: 47rem; padding: 1rem 1.15rem; }.note strong { color: var(--paper); }

.preview-intro { align-items: end; display: grid; gap: 1.5rem; margin-bottom: 2.4rem; }
.preview-key { color: var(--muted); font-size: .82rem; max-width: 35rem; }.preview-key strong { color: var(--paper); }
.preview-grid { display: grid; gap: .9rem; }
.preview-card { background: linear-gradient(135deg, #111 0%, #080808 58%, #160407 100%); border: 1px solid var(--line); min-height: 23rem; overflow: hidden; padding: 1.1rem; position: relative; }
.preview-card::before { background: linear-gradient(90deg, transparent, rgba(223,16,39,.45), transparent); content: ""; height: 1px; left: -12%; position: absolute; top: 3.8rem; transform: rotate(-8deg); width: 124%; }
.preview-card::after { background-image: linear-gradient(rgba(255,254,250,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.04) 1px, transparent 1px); background-size: 1.55rem 1.55rem; content: ""; inset: 0; opacity: .48; pointer-events: none; position: absolute; }
.preview-card > * { position: relative; z-index: 1; }
.preview-header, .preview-timing, .preview-footer { align-items: center; display: flex; font-size: .65rem; font-weight: 800; justify-content: space-between; letter-spacing: .13em; text-transform: uppercase; }
.preview-header { color: var(--muted); }.preview-status { color: var(--acid); }.preview-card.is-loaded .preview-status { color: var(--paper); }
.cyborg-display { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: .8rem; margin: 1.25rem 0; min-height: 6.1rem; padding: .75rem 0; }
.cyborg-core { border: 1px solid var(--acid); border-radius: 50%; box-shadow: inset 0 0 0 .35rem #0a0a0a, 0 0 1.6rem rgba(223,16,39,.28); height: 4.35rem; position: relative; width: 4.35rem; }
.cyborg-core::before, .cyborg-core::after { background: var(--acid); content: ""; left: 50%; position: absolute; transform: translateX(-50%); }.cyborg-core::before { box-shadow: 0 0 .75rem var(--acid); height: 1.55rem; top: 1.36rem; width: 1px; }.cyborg-core::after { height: 1px; top: 2.1rem; width: 1.55rem; }
.signal-bars { align-items: center; display: flex; flex: 1; gap: .24rem; height: 4rem; justify-content: center; overflow: hidden; }.signal-bars i { animation: signal 1.65s ease-in-out infinite alternate; background: linear-gradient(var(--paper), var(--acid)); display: block; height: var(--bar); opacity: .75; width: .24rem; }.signal-bars i:nth-child(2n) { animation-delay: -.6s; }.signal-bars i:nth-child(3n) { animation-delay: -1.1s; }.preview-card:not(.is-playing) .signal-bars i { animation-play-state: paused; transform: scaleY(.38); }
@keyframes signal { to { transform: scaleY(.44); } }
.preview-card h3 { font-size: clamp(1.45rem, 3.4vw, 2.05rem); letter-spacing: -.06em; line-height: .9; margin: 0 0 .5rem; text-transform: uppercase; }.preview-card p { color: var(--muted); font-size: .88rem; margin: 0; min-height: 2.7rem; }
.preview-controls { align-items: center; display: grid; gap: .8rem; grid-template-columns: auto 1fr; margin-top: 1.2rem; }
.cyborg-toggle { align-items: center; background: var(--acid); border: 1px solid var(--acid); color: var(--paper); display: inline-flex; height: 2.75rem; justify-content: center; width: 2.75rem; }.cyborg-toggle:hover:not(:disabled) { background: var(--paper); color: var(--acid); }.cyborg-toggle:disabled { background: transparent; border-color: rgba(223,16,39,.55); color: var(--acid); cursor: not-allowed; }.cyborg-toggle svg { height: 1rem; width: 1rem; }
.preview-scrubber { accent-color: var(--acid); appearance: none; background: rgba(255,254,250,.22); height: 2px; width: 100%; }.preview-scrubber::-webkit-slider-thumb { appearance: none; background: var(--paper); border: 2px solid var(--acid); border-radius: 50%; height: .8rem; width: .8rem; }.preview-scrubber:disabled { opacity: .55; }
.preview-timing { color: var(--muted); margin: .75rem 0 1.1rem; }.preview-footer { border-top: 1px solid var(--line); color: var(--muted); padding-top: .85rem; }.preview-footer span:last-child { color: var(--acid); }

.media-feature { background: #080808; border: 1px solid var(--line); display: grid; overflow: hidden; }.media-video-frame { aspect-ratio: 16 / 9; background: #000; position: relative; }.media-video-frame::after { background-image: linear-gradient(rgba(255,254,250,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.04) 1px, transparent 1px); background-size: 2.2rem 2.2rem; content: ""; inset: 0; opacity: .24; pointer-events: none; position: absolute; }.media-video-frame video { background: #000; display: block; height: 100%; object-fit: contain; position: relative; width: 100%; z-index: 1; }.media-feature-copy { background: linear-gradient(145deg, #171717, #080808 68%, #210309); display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); }.media-feature-copy h3 { font-size: clamp(2.1rem, 5vw, 4.4rem); letter-spacing: -.075em; line-height: .84; margin: 0; text-transform: uppercase; }.media-feature-copy > p:not(.eyebrow):not(.media-runtime) { color: var(--muted); margin: 1.4rem 0 0; max-width: 31rem; }.media-runtime { color: var(--acid); font-size: .74rem; font-weight: 800; letter-spacing: .14em; margin: 1.25rem 0 0; text-transform: uppercase; }.media-runtime span { color: var(--paper); margin: 0 .4rem; }.future-media-grid { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }.future-media-slot { background: linear-gradient(145deg, #111, #0b0b0b 70%, #220409); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 15rem; overflow: hidden; padding: 1.25rem; position: relative; }.future-media-slot::before { background-image: linear-gradient(rgba(255,254,250,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.05) 1px, transparent 1px); background-size: 1.8rem 1.8rem; content: ""; inset: 0; opacity: .55; pointer-events: none; position: absolute; }.future-media-slot > * { position: relative; z-index: 1; }.media-slot-type { color: var(--acid); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.future-media-slot strong { font-size: clamp(1.55rem, 3.5vw, 2.3rem); letter-spacing: -.065em; line-height: .88; margin-top: auto; max-width: 8ch; text-transform: uppercase; }.future-media-slot p { color: var(--muted); font-size: .86rem; margin: .75rem 0 0; max-width: 19rem; }.media-slot-index { color: rgba(223,16,39,.42); font-size: 4.6rem; font-weight: 900; letter-spacing: -.1em; line-height: .75; position: absolute; right: .9rem; top: .9rem; z-index: 1; }
.catalogue-track-grid { display: grid; gap: .9rem; }.catalogue-track { background: linear-gradient(145deg, #171717, #090909 68%, #220409); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 19rem; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.1rem); position: relative; }.catalogue-track::after { background-image: linear-gradient(rgba(255,254,250,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.045) 1px, transparent 1px); background-size: 2rem 2rem; content: ""; inset: 0; opacity: .38; pointer-events: none; position: absolute; }.catalogue-track > * { position: relative; z-index: 1; }.catalogue-track--active { border-color: rgba(223,16,39,.7); }.catalogue-track--active::before { background: var(--acid); box-shadow: 0 0 1.7rem rgba(223,16,39,.55); content: ""; height: .35rem; position: absolute; right: 1.25rem; top: 1.25rem; width: .35rem; z-index: 2; }.catalogue-track-top, .catalogue-track-status { color: var(--muted); display: flex; font-size: .65rem; font-weight: 800; justify-content: space-between; letter-spacing: .14em; text-transform: uppercase; }.catalogue-track h3 { font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -.08em; line-height: .82; margin: auto 0 1rem; text-transform: uppercase; }.catalogue-track > p:not(.catalogue-track-status) { color: var(--muted); font-size: .9rem; margin: 0; max-width: 30rem; }.catalogue-track audio { accent-color: var(--acid); margin-top: 1.5rem; max-width: 100%; width: 100%; }.catalogue-track-status { border-top: 1px solid var(--line); color: var(--acid); margin: 1.2rem 0 0; padding-top: .9rem; }.catalogue-track-status span { color: var(--paper); }

.portrait-placeholder { aspect-ratio: 4 / 5; background: #080808 url('../img/trebledeff-site-artwork.png') center / 100% auto no-repeat; border: 1px solid var(--line); overflow: hidden; position: relative; }.portrait-placeholder::before { background: linear-gradient(135deg, rgba(5,5,5,.08), rgba(223,16,39,.12)); content: ""; inset: 0; position: absolute; }.portrait-placeholder::after { border: 1px solid rgba(255,254,250,.75); content: ""; inset: 1rem; position: absolute; }.portrait-copy h2 { font-size: clamp(2.1rem, 4vw, 3.8rem); letter-spacing: -.06em; line-height: .9; margin: 0 0 1.5rem; text-transform: uppercase; }.portrait-copy p { color: var(--muted); max-width: 42rem; }
.portrait-artwork { background: #050505; isolation: isolate; }.portrait-artwork img { display: block; filter: brightness(.86) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); height: 100%; object-fit: cover; position: relative; transition: filter .35s ease, transform .55s cubic-bezier(.2,.8,.2,1); width: 100%; z-index: 1; }.portrait-artwork::before { background: linear-gradient(135deg, rgba(2,2,2,.12), rgba(213,10,35,.46) 56%, rgba(255,254,250,.1)), #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .38; z-index: 2; }.portrait-artwork::after { border-color: rgba(255,254,250,.82); box-shadow: inset 0 0 2rem rgba(223,16,39,.24), 0 0 1.6rem rgba(223,16,39,.14); z-index: 3; }.portrait-artwork:hover img { filter: brightness(.98) contrast(1.22) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.fact-list { border-top: 1px solid var(--line); list-style: none; margin: 2.5rem 0 0; padding: 0; }.fact-list li { border-bottom: 1px solid var(--line); display: grid; gap: .8rem; grid-template-columns: 7rem 1fr; padding: .9rem 0; }.fact-list span { color: var(--acid); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.process-list { counter-reset: process; display: grid; gap: 0; list-style: none; margin: 2.5rem 0 0; padding: 0; }.process-list li { border-top: 1px solid var(--line); counter-increment: process; padding: 1.4rem 0 1.4rem 4rem; position: relative; }.process-list li::before { color: var(--acid); content: "0" counter(process); font-size: .78rem; font-weight: 800; left: 0; letter-spacing: .1em; position: absolute; top: 1.65rem; }.process-list h3 { font-size: 1.35rem; letter-spacing: -.04em; margin: 0 0 .4rem; text-transform: uppercase; }.process-list p { color: var(--muted); margin: 0; max-width: 38rem; }
.principles { display: grid; gap: 1rem; }.principle { border-top: 1px solid var(--line); padding: 1.4rem 0; }.principle h3 { color: var(--acid); font-size: 1.1rem; margin: 0 0 .55rem; text-transform: uppercase; }.principle p { color: var(--muted); margin: 0; max-width: 37rem; }

.contact-grid { display: grid; gap: 3rem; }.contact-details { border-top: 1px solid var(--line); list-style: none; margin: 2rem 0 0; padding: 0; }.contact-details li { border-bottom: 1px solid var(--line); padding: 1rem 0; }.contact-details small { color: var(--acid); display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; margin-bottom: .25rem; text-transform: uppercase; }.contact-details a { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.contact-form { background: var(--surface); padding: clamp(1.3rem, 3.5vw, 2.5rem); }.contact-form h2 { font-size: 1.7rem; letter-spacing: -.06em; margin: 0 0 1.7rem; text-transform: uppercase; }.form-row { display: grid; gap: 1rem; }.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }.field label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.field input, .field textarea { background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--paper); min-height: 3rem; padding: .7rem .8rem; }.field textarea { min-height: 9rem; resize: vertical; }.field input:focus, .field textarea:focus { border-color: var(--acid); outline: 0; }.form-status { color: var(--muted); font-size: .86rem; margin: 1rem 0 0; min-height: 1.3rem; }

.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 1.4rem; }.footer-grid { display: grid; gap: 2.5rem; }.footer-logo { font-size: clamp(2.3rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -.08em; line-height: .8; margin: 0; text-transform: uppercase; }.footer-nav { display: grid; gap: .5rem; }.footer-nav a { color: var(--muted); font-size: .85rem; text-decoration: none; }.footer-meta { border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: .72rem; gap: .6rem 1.5rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.2rem; }.footer-meta p { margin: 0; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (min-width: 42rem) { .form-row { grid-template-columns: 1fr 1fr; gap: 1.2rem; }.service-grid { grid-template-columns: repeat(2, 1fr); }.listen-banner { grid-template-columns: 1fr 1fr; }.listen-banner .button-row { align-self: end; justify-content: end; }.footer-grid { grid-template-columns: 1.3fr 1fr; }.intro-grid { grid-template-columns: 1.2fr .8fr; }.split-grid { grid-template-columns: .9fr 1.1fr; align-items: start; }.catalogue-track-grid, .future-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .header-inner { height: 5.1rem; }.menu-toggle { display: none; }.nav { align-items: center; background: transparent; border: 0; display: flex; min-height: 0; padding: 0; position: static; width: auto; }.nav ul { display: flex; gap: clamp(.6rem, 1.3vw, 1.15rem); }.nav a { font-size: .72rem; letter-spacing: .08em; padding: .5rem 0; }.nav-foot { display: none; }.hero { min-height: clamp(44rem, calc(100svh - 5.1rem), 54rem); }.hero .container { grid-template-columns: 1.15fr .85fr; }.hero-copy { padding-bottom: 1rem; }.hero .lede { margin-left: 20%; }.waveform { width: 55%; }.service-grid { grid-template-columns: repeat(4, 1fr); }.service-card { min-height: 20rem; padding: 1.7rem; }.contact-grid { grid-template-columns: .82fr 1.18fr; }.portrait-placeholder { max-width: 31rem; }.footer-grid { grid-template-columns: 1.3fr .65fr .7fr; }.footer-grid .lede { margin: 0; }.principles { grid-template-columns: repeat(2,1fr); column-gap: 4rem; }.page-hero:not(.page-hero--album)::after { right: 5vw; top: -18vw; }.media-feature { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .72fr); }.media-video-frame { aspect-ratio: auto; min-height: clamp(24rem, 43vw, 34rem); }.future-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 42rem) { .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.preview-intro { grid-template-columns: 1.1fr .9fr; }.preview-key { justify-self: end; } }
@media (min-width: 60rem) { .hero .container { grid-template-columns: .88fr 1.12fr; padding-top: clamp(5rem, 12vw, 9rem); }.hero-copy { align-self: end; }.hero-art { align-items: center; display: flex; inset: 0; justify-content: flex-end; padding: 0 max(3rem, 6vw) 0 0; position: absolute; }.hero-artwork { margin: 0; max-height: 76%; max-width: min(48.125vw, 48.125rem); transform: translateY(-3rem); width: auto; }.preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.preview-card { min-height: 25rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.catalogue-track-heading { align-items: flex-start; display: flex; gap: .8rem; justify-content: space-between; }.catalogue-track-heading .catalogue-track-top { flex: 1; min-width: 0; }.catalogue-track-logo { background: #050505; border: 1px solid rgba(255,254,250,.26); flex: 0 0 auto; height: 4.5rem; object-fit: contain; width: 6rem; }
.album-hero-grid { align-items: center; display: grid; gap: 2rem; }.album-artwork { aspect-ratio: 3 / 4; background: #050505; border: 1px solid var(--acid); box-shadow: .8rem .8rem 0 rgba(223,16,39,.25); margin: 0; max-width: 18rem; overflow: hidden; }.album-artwork img { display: block; height: 100%; object-fit: cover; width: 100%; }@media (min-width: 42rem) { .album-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(12rem, .48fr); }.album-artwork { justify-self: end; width: 100%; } }@media (min-width: 60rem) { .page-hero--album { padding-bottom: clamp(4.5rem, 9vw, 7rem); padding-top: clamp(13rem, 27vw, 22rem); }.album-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); } }
.media-feature-copy { padding: clamp(1.5rem, 3vw, 2.5rem); }.media-feature-copy h3 { font-size: clamp(2.1rem, 3.4vw, 3rem); letter-spacing: -.09em; overflow-wrap: anywhere; }@media (min-width: 60rem) { .media-feature { grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .8fr); } }
.album-hero-grid > :first-child { min-width: 0; }.dyseknostics-wordmark { color: var(--acid); font-family: var(--sans); font-size: clamp(2rem, 11.5vw, 5rem); font-weight: 900; letter-spacing: -.115em; line-height: .76; margin: 0; max-inline-size: 100%; min-width: 0; overflow-wrap: anywhere; paint-order: stroke fill; text-shadow: 0 .055em 0 #210309, 0 .095em 0 #050505; text-transform: uppercase; -webkit-text-stroke: clamp(1px, .09vw, 1.5px) var(--paper); }.dyseknostics-wordmark + .lede { margin-top: 1.7rem; }@media (min-width: 42rem) { .dyseknostics-wordmark { font-size: clamp(3rem, 8.5vw, 4.85rem); } }@media (min-width: 60rem) { .dyseknostics-wordmark { font-size: clamp(4.25rem, 8.4vw, 7.25rem); } }
.dyseknostics-wordmark { display: block; margin: 0; max-inline-size: 100%; min-width: 0; }.dyseknostics-wordmark img { display: block; height: auto; max-width: 100%; object-fit: contain; width: 100%; }
.dyseknostics-wordmark { background: #050505; }
/* Static presentation values keep CSP free of inline-style exceptions. */
.eyebrow--on-acid { color: var(--acid-ink); }
.service-grid--spaced { margin-top: 2.8rem; }
.principles--spaced { margin-top: 2.5rem; }
.waveform i:nth-child(1) { --h: 18%; }
.waveform i:nth-child(2) { --h: 48%; }
.waveform i:nth-child(3) { --h: 28%; }
.waveform i:nth-child(4) { --h: 76%; }
.waveform i:nth-child(5) { --h: 42%; }
.waveform i:nth-child(6) { --h: 92%; }
.waveform i:nth-child(7) { --h: 58%; }
.waveform i:nth-child(8) { --h: 35%; }
.waveform i:nth-child(9) { --h: 82%; }
.waveform i:nth-child(10) { --h: 50%; }
.waveform i:nth-child(11) { --h: 70%; }
.waveform i:nth-child(12) { --h: 25%; }
.waveform i:nth-child(13) { --h: 60%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(1) { --bar: 38%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(2) { --bar: 74%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(3) { --bar: 50%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(4) { --bar: 91%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(5) { --bar: 62%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(6) { --bar: 35%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(7) { --bar: 78%; }
.preview-card:nth-of-type(1) .signal-bars i:nth-child(8) { --bar: 45%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(1) { --bar: 44%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(2) { --bar: 84%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(3) { --bar: 61%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(4) { --bar: 38%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(5) { --bar: 96%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(6) { --bar: 57%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(7) { --bar: 72%; }
.preview-card:nth-of-type(2) .signal-bars i:nth-child(8) { --bar: 41%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(1) { --bar: 80%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(2) { --bar: 47%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(3) { --bar: 88%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(4) { --bar: 55%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(5) { --bar: 32%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(6) { --bar: 73%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(7) { --bar: 96%; }
.preview-card:nth-of-type(3) .signal-bars i:nth-child(8) { --bar: 58%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(1) { --bar: 36%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(2) { --bar: 68%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(3) { --bar: 94%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(4) { --bar: 51%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(5) { --bar: 82%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(6) { --bar: 42%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(7) { --bar: 64%; }
.preview-card:nth-of-type(4) .signal-bars i:nth-child(8) { --bar: 77%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(1) { --bar: 60%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(2) { --bar: 37%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(3) { --bar: 80%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(4) { --bar: 94%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(5) { --bar: 49%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(6) { --bar: 67%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(7) { --bar: 32%; }
.preview-card:nth-of-type(5) .signal-bars i:nth-child(8) { --bar: 87%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(1) { --bar: 85%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(2) { --bar: 55%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(3) { --bar: 41%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(4) { --bar: 92%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(5) { --bar: 69%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(6) { --bar: 35%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(7) { --bar: 78%; }
.preview-card:nth-of-type(6) .signal-bars i:nth-child(8) { --bar: 47%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(1) { --bar: 46%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(2) { --bar: 88%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(3) { --bar: 59%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(4) { --bar: 77%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(5) { --bar: 39%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(6) { --bar: 98%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(7) { --bar: 53%; }
.preview-card:nth-of-type(7) .signal-bars i:nth-child(8) { --bar: 67%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(1) { --bar: 73%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(2) { --bar: 42%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(3) { --bar: 90%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(4) { --bar: 64%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(5) { --bar: 37%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(6) { --bar: 81%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(7) { --bar: 56%; }
.preview-card:nth-of-type(8) .signal-bars i:nth-child(8) { --bar: 96%; }

/* Central audio-engine interface: real analysis renders to canvas, while CSS carries the lighter UI response. */
.audio-motion-section { background: #070707; border-bottom: 1px solid var(--line); padding: clamp(1.1rem, 3vw, 2.4rem) 0; }
.audio-motion-banner { align-items: stretch; background: linear-gradient(135deg, #130205, #050505 56%, #24040a); border: 1px solid rgba(223,16,39,.72); display: grid; isolation: isolate; min-height: clamp(22rem, 42vw, 34rem); overflow: hidden; position: relative; }
.audio-motion-banner::before { background-image: linear-gradient(rgba(255,254,250,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,254,250,.04) 1px, transparent 1px); background-size: 2.15rem 2.15rem; content: ""; inset: 0; opacity: .38; pointer-events: none; position: absolute; z-index: 1; }
.audio-motion-canvas { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.audio-motion-copy { align-self: end; max-width: min(42rem, 100%); min-width: 0; padding: clamp(1.5rem, 4vw, 3.5rem); position: relative; z-index: 2; }.audio-motion-copy .eyebrow { margin-bottom: 1.25rem; }.audio-motion-copy h2 { font-size: clamp(1.25rem, 5.2vw, 4.6rem); margin: 0; max-width: none; overflow-wrap: normal; white-space: nowrap; }.audio-motion-detail { color: var(--muted); font-size: .9rem; margin: 1.1rem 0 0; max-width: 34rem; }
.audio-motion-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.45rem; }.audio-motion-status { color: var(--paper); flex: 1 1 13rem; font-size: .69rem; font-weight: 800; letter-spacing: .12em; margin: 0; text-transform: uppercase; }.audio-motion-toggle { background: rgba(5,5,5,.78); border: 1px solid rgba(255,254,250,.56); color: var(--paper); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 900; letter-spacing: .1em; min-height: 2.75rem; padding: .72rem .95rem; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }.audio-motion-toggle:not(:disabled):hover { background: var(--acid); border-color: var(--acid); color: #050505; transform: translateY(-.1rem); }.audio-motion-toggle:disabled { cursor: not-allowed; opacity: .52; }.audio-motion-progress { appearance: none; background: rgba(255,254,250,.15); border: 0; display: block; height: .25rem; margin-top: 1.1rem; max-width: 27rem; overflow: hidden; width: 100%; }.audio-motion-progress::-webkit-progress-bar { background: rgba(255,254,250,.14); }.audio-motion-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--acid), var(--paper)); }.audio-motion-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--acid), var(--paper)); }
.audio-motion-art { align-items: center; display: flex; inset: 0 0 0 auto; justify-content: flex-end; opacity: .47; padding: clamp(.7rem, 2.3vw, 2rem); pointer-events: none; position: absolute; width: min(50%, 34rem); z-index: 0; }.audio-motion-art::before { background: radial-gradient(circle at 62% 48%, rgba(223,16,39,.26), transparent 60%); content: ""; inset: 0; position: absolute; }.audio-motion-art::after { background: linear-gradient(90deg, #080808 0%, rgba(8,8,8,.66) 18%, transparent 57%, rgba(8,8,8,.08)); content: ""; inset: 0; position: absolute; }.audio-motion-art img { filter: brightness(1.12) contrast(1.08) saturate(1.04); height: 100%; max-height: 26rem; object-fit: contain; position: relative; transition: filter .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); width: 100%; z-index: 1; }
.audio-motion-banner.is-playing { box-shadow: 0 0 3.4rem rgba(223,16,39,.16), inset 0 0 4rem rgba(223,16,39,.08); }.audio-motion-banner.is-playing[data-energy="mid"] .audio-motion-art { opacity: .58; }.audio-motion-banner.is-playing[data-energy="mid"] .audio-motion-art img { filter: brightness(1.2) contrast(1.12) saturate(1.08); transform: translateY(-.25rem); }.audio-motion-banner.is-playing[data-energy="high"] .audio-motion-art { opacity: .68; }.audio-motion-banner.is-playing[data-energy="high"] .audio-motion-art img { filter: brightness(1.28) contrast(1.16) saturate(1.13); transform: translateY(-.5rem) scale(1.025); }
.audio-motion-section.is-inline-track-banner { background: transparent; border: 0; grid-column: 1 / -1; padding: 0; }
.audio-motion-section.is-inline-track-banner > .container { max-width: none; padding-inline: 0; }
.audio-motion-section.is-inline-track-banner .audio-motion-banner { min-height: clamp(18rem, 34vw, 28rem); }
.catalogue-track-grid--scenes > .audio-motion-section.is-inline-track-banner { margin-bottom: calc(.9rem - clamp(1.4rem, 5vw, 5rem)); }

.cyborg-display { overflow: hidden; position: relative; }.cyborg-display > :not(.audio-scope) { position: relative; z-index: 1; }.audio-scope { display: block; pointer-events: none; }.audio-scope--preview { height: 100%; inset: 0; opacity: .8; position: absolute; width: 100%; z-index: 0; }.audio-scope--track { background: linear-gradient(90deg, rgba(223,16,39,.1), transparent 55%); border-bottom: 1px solid rgba(255,254,250,.12); border-top: 1px solid rgba(255,254,250,.12); height: 2.8rem; margin-top: 1.1rem; width: 100%; }
.catalogue-track { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.catalogue-track.is-active { border-color: rgba(223,16,39,.9); }.catalogue-track.is-playing { box-shadow: 0 .9rem 2.8rem rgba(223,16,39,.16); }.catalogue-track.is-playing[data-energy="mid"] { transform: translateY(-.12rem); }.catalogue-track.is-playing[data-energy="high"] { box-shadow: 0 1.1rem 3.25rem rgba(223,16,39,.27); transform: translateY(-.26rem) scale(1.005); }.catalogue-track.is-playing .catalogue-track-logo { box-shadow: 0 0 1.25rem rgba(223,16,39,.46); }.catalogue-track.is-playing[data-energy="high"] .catalogue-track-logo { transform: scale(1.035); }.catalogue-track.is-playing .catalogue-track-status { color: var(--paper); }.catalogue-track-status .track-live-state { color: var(--acid); margin-left: auto; }.catalogue-track.is-playing .track-live-state::before { background: var(--acid); border-radius: 50%; box-shadow: 0 0 .75rem var(--acid); content: ""; display: inline-block; height: .4rem; margin-right: .45rem; vertical-align: .05rem; width: .4rem; }
.media-feature { transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }.media-feature.is-playing { border-color: rgba(223,16,39,.82); box-shadow: 0 1.2rem 3rem rgba(223,16,39,.13); }.media-feature.is-playing[data-energy="high"] { box-shadow: 0 1.4rem 3.4rem rgba(223,16,39,.25); transform: translateY(-.14rem); }.media-feature.is-playing .media-video-frame::after { opacity: .42; }
.album-artwork { transition: box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }.album-artwork img { transition: filter .4s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .catalogue-track:hover, .catalogue-track:focus-within { border-color: rgba(255,254,250,.5); transform: translateY(-.28rem); }.catalogue-track.is-playing:hover { border-color: var(--acid); }.album-artwork:hover { box-shadow: 1.05rem 1.05rem 0 rgba(223,16,39,.42), 0 0 2.4rem rgba(223,16,39,.2); transform: translate(-.22rem, -.22rem); }.album-artwork:hover img { filter: contrast(1.07) saturate(1.14); transform: scale(1.035); } }
.catalogue-track:active { transform: scale(.992); }.button:focus-visible, .cyborg-toggle:focus-visible, .audio-motion-toggle:focus-visible, .release-action:focus-visible, .nav a:focus-visible, audio:focus-visible, video:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
@media (min-width: 42rem) { .audio-motion-banner { grid-template-columns: minmax(0, 1fr) minmax(14rem, .55fr); }.audio-motion-copy { padding-right: clamp(2rem, 8vw, 6rem); }.audio-motion-art { grid-column: 2; position: relative; width: 100%; }.audio-motion-art::after { background: linear-gradient(90deg, transparent, rgba(5,5,5,.22)); } }
@media (max-width: 31.99rem) { .audio-motion-banner { min-height: 23rem; }.audio-motion-copy { padding-bottom: 1.6rem; }.audio-motion-art { opacity: .13; width: 68%; }.audio-motion-toggle { width: 100%; }.audio-motion-progress { max-width: none; } }

/* Supplied DYSEKNOSTICS photo set: the portrait remains intact while the card provides the shared TREBLEDEFF grade and mark. */
.catalogue-track-photo { align-items: center; aspect-ratio: 4 / 3; background: #050505; border: 1px solid rgba(255,254,250,.2); display: flex; isolation: isolate; justify-content: center; margin: 1.15rem 0 0; overflow: hidden; position: relative; }.catalogue-track-photo::before, .catalogue-track-photo::after { content: ""; inset: 0; pointer-events: none; position: absolute; }.catalogue-track-photo::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; mix-blend-mode: screen; opacity: .42; z-index: 3; }.catalogue-track-photo::after { background: linear-gradient(135deg, rgba(2,2,2,.1), rgba(213,10,35,.34) 56%, rgba(255,254,250,.08)); mix-blend-mode: color; z-index: 2; }.catalogue-track-photo img { filter: brightness(1.34) contrast(1.13) saturate(.73) sepia(.32) hue-rotate(314deg); height: 100%; object-fit: contain; position: relative; transition: filter .35s ease, transform .55s cubic-bezier(.2,.8,.2,1); width: 100%; z-index: 1; }.catalogue-track-photo:hover img { filter: brightness(1.45) contrast(1.16) saturate(.83) sepia(.42) hue-rotate(314deg); transform: scale(1.018); }.catalogue-track.is-playing .catalogue-track-photo { border-color: rgba(223,16,39,.9); box-shadow: inset 0 0 2.8rem rgba(223,16,39,.24), 0 0 1.6rem rgba(223,16,39,.11); }.catalogue-track.is-playing .catalogue-track-photo::before { opacity: .56; }
.track-treatment--liftoff::after { background: linear-gradient(145deg, rgba(255,254,250,.14), rgba(216,9,35,.34) 48%, rgba(4,4,4,.65)); }.track-treatment--catch-me-outside::after { background: linear-gradient(45deg, rgba(5,5,5,.72), rgba(216,9,35,.4) 52%, rgba(255,254,250,.1)); }.track-treatment--catching-clouds::after { background: linear-gradient(135deg, rgba(5,5,5,.48), rgba(229,23,46,.52), rgba(255,254,250,.09)); }.track-treatment--evilution::after { background: linear-gradient(160deg, rgba(255,254,250,.1), rgba(5,5,5,.62) 48%, rgba(216,9,35,.44)); }.track-treatment--monstahhh::after { background: linear-gradient(90deg, rgba(5,5,5,.58), rgba(216,9,35,.4), rgba(255,254,250,.12)); }.track-treatment--heliocentric::after { background: linear-gradient(145deg, rgba(216,9,35,.43), rgba(5,5,5,.58) 56%, rgba(255,254,250,.11)); }.track-treatment--berty-skit::after { background: linear-gradient(35deg, rgba(4,4,4,.72), rgba(225,18,43,.47), rgba(255,254,250,.1)); }.track-treatment--illusionati::after { background: linear-gradient(155deg, rgba(255,254,250,.1), rgba(219,13,38,.54) 48%, rgba(4,4,4,.66)); }
.track-treatment--heliocentric::before, .track-treatment--heliocentric::after { display: none; }.track-treatment--heliocentric img, .track-treatment--heliocentric:hover img { filter: none; transform: none; }
.track-treatment--evilution::before, .track-treatment--evilution::after { display: none; }.track-treatment--evilution img, .track-treatment--evilution:hover img { filter: none; transform: none; }
.track-treatment--illusionati::before, .track-treatment--illusionati::after { display: none; }.track-treatment--illusionati img, .track-treatment--illusionati:hover img { filter: none; transform: none; }
.catalogue-track-photo::before, .catalogue-track-photo::after { display: none; }.catalogue-track-photo img, .catalogue-track-photo:hover img { filter: none; transform: none; }
@media (min-width: 42rem) { .catalogue-track-photo { aspect-ratio: 16 / 10; } }

/* MONEY artwork: preserve the supplied portrait while carrying the same DYSEKNOSTICS card language. */
.track-treatment--money { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--money::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--money::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--money img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--money:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--mind-polluted { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--mind-polluted::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--mind-polluted::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--mind-polluted img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--mind-polluted:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--22-years { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--22-years::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--22-years::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--22-years img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--22-years:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--budget-empire { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--budget-empire::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--budget-empire::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--budget-empire img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--budget-empire:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--manic-maniac-methods { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--manic-maniac-methods::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--manic-maniac-methods::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--manic-maniac-methods img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--manic-maniac-methods:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--my-rocketship { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--my-rocketship::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--my-rocketship::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--my-rocketship img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--my-rocketship:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--bad-habit { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--bad-habit::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--bad-habit::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--bad-habit img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--bad-habit:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--blind-eyes { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--blind-eyes::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--blind-eyes::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--blind-eyes img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--blind-eyes:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--pills { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--pills::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--pills::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--pills img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--pills:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--drunk-n-stumblin { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--drunk-n-stumblin::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--drunk-n-stumblin::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--drunk-n-stumblin img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--drunk-n-stumblin:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--aus { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--aus::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--aus::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--aus img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--aus:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--the-introduction { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--the-introduction::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--the-introduction::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--the-introduction img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--the-introduction:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--fuck-gangster-rap { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--fuck-gangster-rap::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--fuck-gangster-rap::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--fuck-gangster-rap img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--fuck-gangster-rap:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--doors-curb { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--doors-curb::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--doors-curb::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--doors-curb img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--doors-curb:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--hokey-pokey { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--hokey-pokey::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--hokey-pokey::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--hokey-pokey img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--hokey-pokey:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--no-frills-hip-hop { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--no-frills-hip-hop::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--no-frills-hip-hop::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--no-frills-hip-hop img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--no-frills-hip-hop:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--erb-in-a-chair { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--erb-in-a-chair::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--erb-in-a-chair::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--erb-in-a-chair img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--erb-in-a-chair:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--impossible-goals { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--impossible-goals::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--impossible-goals::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--impossible-goals img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--impossible-goals:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--dr-erb { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--dr-erb::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--dr-erb::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--dr-erb img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--dr-erb:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--230 { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--230::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--230::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--230 img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--230:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--anzac-ave { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--anzac-ave::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--anzac-ave::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--anzac-ave img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--anzac-ave:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--mic-inda-mail-supplied { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--mic-inda-mail-supplied::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--mic-inda-mail-supplied::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--mic-inda-mail-supplied img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--mic-inda-mail-supplied:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }
.track-treatment--erbn-picnic { background: radial-gradient(circle at 75% 20%, rgba(223,16,39,.35), transparent 38%), #050505; }
.track-treatment--erbn-picnic::before { background: #050505 url('../img/trebledeff-site-artwork.png') center / min(86%, 24rem) auto no-repeat; display: block; mix-blend-mode: screen; opacity: .32; z-index: 3; }
.track-treatment--erbn-picnic::after { background: linear-gradient(135deg, rgba(2,2,2,.18), rgba(213,10,35,.46) 56%, rgba(255,254,250,.12)); display: block; mix-blend-mode: color; z-index: 2; }
.track-treatment--erbn-picnic img { filter: brightness(1.17) contrast(1.18) saturate(.82) sepia(.18) hue-rotate(320deg); object-fit: contain; }
.track-treatment--erbn-picnic:hover img { filter: brightness(1.27) contrast(1.2) saturate(.9) sepia(.24) hue-rotate(320deg); transform: scale(1.018); }

/* An unreleased video uses supplied cover art as a truthful static poster until its actual media master is attached. */
.media-video-frame--poster { margin: 0; }.media-video-frame--poster img { display: block; height: 100%; object-fit: contain; position: relative; width: 100%; z-index: 1; }.media-feature--unreleased { border-color: rgba(223,16,39,.68); }.media-feature--unreleased .media-feature-copy { background: linear-gradient(145deg, #180306, #080808 68%, #210309); }.media-unreleased-state { align-items: center; border-top: 1px solid var(--line); color: var(--acid); display: flex; font-size: .67rem; font-weight: 900; letter-spacing: .12em; margin: 1.4rem 0 0; padding-top: .9rem; text-transform: uppercase; }.media-unreleased-state::before { background: var(--acid); border-radius: 50%; box-shadow: 0 0 .8rem var(--acid); content: ""; height: .42rem; margin-right: .5rem; width: .42rem; }

/* WARMUPS: the poster remains real artwork; the live treatment sits around it. */
.let-you-down-stage { isolation: isolate; overflow: hidden; }.let-you-down-stage::after { z-index: 4; }.let-you-down-fire { background: radial-gradient(circle at 50% 112%, #ffefdd 0 3%, #e72b15 12%, #8d0810 28%, transparent 56%), linear-gradient(150deg, #050505 8%, #360408 44%, #080101 84%); inset: 0; overflow: hidden; pointer-events: none; position: absolute; transition: opacity .35s ease, z-index 0s linear .35s; z-index: 0; }.let-you-down-fire::before, .let-you-down-fire::after { bottom: -13%; content: ""; filter: blur(.45rem); height: 78%; left: -10%; mix-blend-mode: screen; opacity: .82; position: absolute; transform-origin: 50% 100%; width: 120%; }.let-you-down-fire::before { background: repeating-conic-gradient(from 210deg at 50% 100%, transparent 0deg 9deg, rgba(255,238,206,.72) 10deg 15deg, rgba(223,16,39,.93) 17deg 25deg, transparent 28deg 42deg); animation: let-you-down-flame-swell 4.6s ease-in-out infinite alternate; }.let-you-down-fire::after { background: radial-gradient(ellipse at 12% 96%, rgba(255,221,166,.9), transparent 23%), radial-gradient(ellipse at 35% 88%, rgba(223,16,39,.95), transparent 28%), radial-gradient(ellipse at 71% 94%, rgba(255,238,203,.8), transparent 23%), radial-gradient(ellipse at 91% 87%, rgba(223,16,39,.88), transparent 28%); animation: let-you-down-flame-drift 7s ease-in-out infinite alternate; }.let-you-down-fire span { bottom: -3rem; color: rgba(255,254,250,.84); font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 3.8rem); line-height: 1; opacity: .68; position: absolute; text-shadow: 0 0 .5rem #fff, 0 0 1.1rem var(--acid), 0 0 2.4rem #8e0718; animation: let-you-down-clef-rise var(--rise-duration, 8s) linear var(--rise-delay, 0s) infinite; }.let-you-down-fire span:nth-child(1) { --rise-duration: 8.4s; --rise-delay: -5.4s; left: 5%; }.let-you-down-fire span:nth-child(2) { --rise-duration: 10.5s; --rise-delay: -1.8s; left: 19%; }.let-you-down-fire span:nth-child(3) { --rise-duration: 7.6s; --rise-delay: -4.7s; left: 35%; }.let-you-down-fire span:nth-child(4) { --rise-duration: 9.8s; --rise-delay: -7.4s; left: 51%; }.let-you-down-fire span:nth-child(5) { --rise-duration: 7.2s; --rise-delay: -2.1s; left: 68%; }.let-you-down-fire span:nth-child(6) { --rise-duration: 10.8s; --rise-delay: -8.6s; left: 82%; }.let-you-down-fire span:nth-child(7) { --rise-duration: 8.9s; --rise-delay: -3.5s; left: 93%; }.let-you-down-poster { align-items: center; display: flex; inset: clamp(.7rem, 2vw, 1.45rem); justify-content: center; position: absolute; transition: opacity .35s ease, visibility .35s step-end; z-index: 3; }.let-you-down-poster img { box-shadow: 0 0 0 1px rgba(255,254,250,.35), 0 1.25rem 3.25rem rgba(0,0,0,.6), 0 0 2.6rem rgba(223,16,39,.35); display: block; height: 100%; max-width: 100%; object-fit: contain; width: auto; }.let-you-down-play { align-items: center; background: rgba(5,5,5,.88); border: 1px solid rgba(255,254,250,.7); bottom: clamp(.8rem, 3vw, 1.4rem); color: var(--paper); display: inline-flex; font-size: .68rem; font-weight: 900; gap: .55rem; justify-content: center; left: 50%; letter-spacing: .12em; min-height: 2.8rem; padding: .65rem 1rem; position: absolute; text-transform: uppercase; transform: translateX(-50%); transition: background .2s ease, border-color .2s ease, transform .2s ease; white-space: nowrap; }.let-you-down-play:hover { background: var(--acid); border-color: var(--acid); transform: translateX(-50%) translateY(-.15rem); }.let-you-down-play span:first-child { color: var(--acid); font-size: .9rem; }.let-you-down-play:hover span:first-child { color: var(--paper); }.let-you-down-stage video { opacity: 0; transition: opacity .35s ease; }.let-you-down-stage.is-video-active video { opacity: 1; }.let-you-down-stage.is-video-active .let-you-down-poster { opacity: 0; pointer-events: none; visibility: hidden; }.let-you-down-stage.is-video-active .let-you-down-fire { mix-blend-mode: screen; opacity: .34; transition-delay: 0s; z-index: 2; }@keyframes let-you-down-flame-swell { 0% { transform: scaleX(.86) scaleY(.78) translateY(6%); } 100% { transform: scaleX(1.13) scaleY(1.07) translateY(-3%); } }@keyframes let-you-down-flame-drift { 0% { transform: translate3d(-3%, 5%, 0) scale(1.06); } 100% { transform: translate3d(4%, -4%, 0) scale(.96); } }@keyframes let-you-down-clef-rise { 0% { opacity: 0; transform: translate3d(-.4rem, 1rem, 0) rotate(-8deg) scale(.72); } 14% { opacity: .75; } 78% { opacity: .48; } 100% { opacity: 0; transform: translate3d(.8rem, calc(-100% - 9rem), 0) rotate(13deg) scale(1.25); } }
.let-you-down-stage video[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .let-you-down-fire::before, .let-you-down-fire::after, .let-you-down-fire span { animation: none; }.let-you-down-fire span { bottom: 18%; opacity: .3; }.let-you-down-fire span:nth-child(n + 5) { display: none; } }
.let-you-down-stage::before { border: 1px solid rgba(223,16,39,.86); box-shadow: inset 0 0 2rem rgba(223,16,39,.23), 0 0 1.6rem rgba(223,16,39,.16); content: ""; inset: clamp(.45rem, 1.5vw, .9rem); pointer-events: none; position: absolute; z-index: 2; }.let-you-down-wordmark { letter-spacing: -.025em !important; word-spacing: .16em; white-space: nowrap; }.let-you-down-wordmark.display { font-size: clamp(1.55rem, 6vw, 4.4rem); line-height: .9; max-width: none; }.media-feature--let-you-down .let-you-down-wordmark { font-size: clamp(1.2rem, 3.1vw, 1.9rem); line-height: .93; max-width: 100%; overflow-wrap: normal; }

/* Cross-platform layout resilience: preserve the established composition without horizontal clipping. */
:where(.container, .intro-grid, .split-grid, .contact-grid, .footer-grid, .album-hero-grid, .media-feature, .audio-motion-banner, .preview-intro, .listen-banner) > * { min-inline-size: 0; }
img, video, audio, canvas { max-inline-size: 100%; }
video, audio, canvas { display: block; }
input, textarea { max-inline-size: 100%; width: 100%; }
.contact-details a, .form-status a, .footer-nav a, .catalogue-track h3, .media-feature-copy h3 { overflow-wrap: anywhere; }

@media (max-width: 41.99rem) {
  .nav { height: calc(100dvh - 4.8rem); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .nav a { font-size: clamp(1.75rem, 9vw, 3rem); overflow-wrap: anywhere; }
  .button-row > .button { flex: 1 1 12rem; }
  .release { gap: .75rem; grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .release-art { height: 3.4rem; width: 3.4rem; }
  .release-action { padding: 0 .65rem; }
  .fact-list li { grid-template-columns: minmax(5.25rem, .7fr) minmax(0, 1.3fr); }
  .catalogue-track { min-height: 0; }
  .catalogue-track-heading { gap: .65rem; }
  .catalogue-track-top, .catalogue-track-status { flex-wrap: wrap; gap: .35rem .6rem; }
  .catalogue-track-logo { height: 3.75rem; width: 5rem; }
  .catalogue-track h3 { font-size: clamp(1.9rem, 10.5vw, 3rem); }
  .album-artwork { margin-inline: auto; width: min(100%, 18rem); }
  .audio-motion-copy h2 { font-size: clamp(1rem, 5.2vw, 2.2rem); }
  .audio-motion-status { flex-basis: 100%; }
  .footer-meta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 59.99rem) and (max-height: 34rem) and (orientation: landscape) {
  .nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .nav a { font-size: clamp(1.25rem, 5vh, 2rem); }
  .nav-foot { margin-top: 1rem; }
  .hero .container { padding-bottom: 2rem; padding-top: min(34rem, calc(4.5rem + 60vw)); }
  .hero-artwork { margin-top: 4.25rem; max-width: min(72vw, 26rem); }
}

@media (min-width: 100rem) {
  :root { --gap: clamp(2rem, 3.5vw, 4.5rem); --max: 100rem; }
  body { font-size: 18px; }
  .header-inner { height: 6rem; }
  .brand { font-size: 1.15rem; }
  .nav a { font-size: .82rem; }
  .section { padding-bottom: clamp(5.5rem, 8vw, 9rem); padding-top: clamp(5.5rem, 8vw, 9rem); }
  .hero { min-height: clamp(52rem, calc(100svh - 6rem), 64rem); }
  .hero-art { padding-right: max(5rem, 8vw); }
  .audio-motion-banner { min-height: clamp(34rem, 34vw, 46rem); }
  .audio-motion-copy h2 { font-size: clamp(4rem, 4.75vw, 6.5rem); }
  .catalogue-track-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 120rem) {
  .catalogue-track-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* DYSEKNOSTICS scroll scenes: a progressive enhancement over the semantic release catalogue. */
.catalogue-track-grid--scenes { grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 5vw, 5rem); }
.catalogue-track-grid--scenes .track-scene { background: linear-gradient(135deg, #150206, #080808 48%, #26050b); display: grid; gap: clamp(1.15rem, 3.5vw, 3.6rem); grid-template-areas: "visual" "content" "player"; min-height: 0; overflow: hidden; padding: clamp(1rem, 3.2vw, 2.4rem); }
.track-scene::after { opacity: .24; z-index: 0; }.track-scene > * { min-width: 0; position: relative; z-index: 1; }
.track-scene-visual { min-width: 0; position: relative; }.track-scene-visual::before { background: radial-gradient(circle at 50% 50%, rgba(223,16,39,.28), transparent 64%); content: ""; filter: blur(1.4rem); inset: 15% 8%; pointer-events: none; position: absolute; }
.track-scene .catalogue-track-heading { grid-area: auto; position: relative; }.track-scene .catalogue-track-photo { aspect-ratio: 4 / 3; margin: 1rem 0 0; position: relative; }.track-scene .catalogue-track-photo img { object-fit: contain; }
.track-scene-visual { grid-area: visual; }.track-scene-content { align-self: center; grid-area: content; min-width: 0; }.track-scene-index { color: var(--acid); font-size: .67rem; font-weight: 900; letter-spacing: .16em; margin: 0 0 1.1rem; text-transform: uppercase; }
.track-scene h3 { font-size: clamp(1.08rem, 5.25vw, 2.9rem); letter-spacing: -.075em; line-height: .83; margin: 0; max-width: none; min-width: 0; overflow-wrap: normal; text-transform: uppercase; white-space: nowrap; }
.track-scene-context { color: var(--muted); font-size: clamp(.9rem, 1.8vw, 1.08rem); margin: 1.2rem 0 0; max-width: 37rem; }.track-scene-meta { border-top: 1px solid var(--line); display: grid; gap: .9rem 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.35rem 0 0; padding: 1rem 0 0; }.track-scene-meta div { min-width: 0; }.track-scene-meta dt { color: var(--acid); font-size: .59rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.track-scene-meta dd { color: var(--paper); font-size: .71rem; margin: .27rem 0 0; overflow-wrap: anywhere; }
.track-scene-player { align-items: center; border-top: 1px solid rgba(255,254,250,.24); display: grid; gap: .8rem 1rem; grid-area: player; grid-template-columns: auto 1fr; padding-top: 1rem; }.track-scene-toggle { align-items: center; background: var(--acid); border: 1px solid var(--acid); color: var(--paper); display: inline-flex; font-size: .68rem; font-weight: 900; gap: .85rem; justify-content: center; letter-spacing: .12em; min-height: 3.1rem; padding: .7rem 1rem; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }.track-scene-toggle:hover { background: var(--paper); color: var(--acid); transform: translateY(-.12rem); }.track-scene-toggle.is-playing { background: #050505; border-color: var(--paper); color: var(--paper); }.track-scene-duration { color: var(--paper); font-size: .72rem; font-weight: 900; justify-self: end; letter-spacing: .14em; text-transform: uppercase; }.track-scene-player audio { grid-column: 1 / -1; margin: 0; min-width: 0; width: 100%; }.track-scene-player .audio-scope--track { grid-column: 1 / -1; margin-top: 0; }.track-scene-player .catalogue-track-status { grid-column: 1 / -1; margin: 0; padding-top: .78rem; }
.track-scene.is-playing { border-color: var(--acid); }.track-scene.is-playing .track-scene-visual::before { opacity: 1; transform: scale(1.08); }.track-scene.is-playing .track-scene-toggle { box-shadow: 0 0 1.6rem rgba(223,16,39,.42); }
@media (min-width: 42rem) { .track-scene-meta { grid-template-columns: .68fr 1.12fr .68fr 1.12fr; }.track-scene .catalogue-track-photo { aspect-ratio: 16 / 10; } }
@media (min-width: 60rem) { .catalogue-track-grid--scenes .track-scene { align-items: center; grid-template-areas: "visual content" "visual player"; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); min-height: min(48rem, 78svh); }.catalogue-track-grid--scenes .track-scene:nth-child(even) { grid-template-areas: "content visual" "player visual"; grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr); }.track-scene .catalogue-track-photo { margin-top: 1.2rem; }.track-scene-content { padding: clamp(.4rem, 2vw, 1.5rem) 0; }.track-scene h3 { font-size: clamp(1.5rem, 3.4vw, 3.35rem); }.track-scene-player { align-self: start; } }
@media (min-width: 100rem) { .catalogue-track-grid--scenes .track-scene { min-height: min(58rem, 72svh); }.track-scene h3 { font-size: clamp(2rem, 3.2vw, 4rem); }.track-scene-context { font-size: 1.12rem; }.track-scene-meta dd { font-size: .8rem; } }
@media (prefers-reduced-motion: no-preference) { .track-scene, .track-scene-visual, .track-scene-content, .track-scene-player, .track-scene-visual::before { transition: opacity .65s ease, transform .75s cubic-bezier(.2,.75,.2,1), filter .65s ease, box-shadow .45s ease; }.has-scroll-scenes .track-scene:not(.is-in-view) .track-scene-visual { filter: saturate(.62) brightness(.78); opacity: .74; transform: translate3d(0, 1.5rem, 0) scale(.985); }.has-scroll-scenes .track-scene:not(.is-in-view) .track-scene-content, .has-scroll-scenes .track-scene:not(.is-in-view) .track-scene-player { opacity: .7; transform: translate3d(0, 1rem, 0); }.has-scroll-scenes .track-scene.is-scene-focused .track-scene-visual { transform: translate3d(0, -.25rem, 0); }.has-scroll-scenes .track-scene.is-scene-focused { box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35), 0 0 3rem rgba(223,16,39,.1); } }
@media (prefers-reduced-motion: reduce) { .track-scene-toggle { transition: none; } }

/* Keep DYSEKNOSTICS artist/release/credit details legible at every width. */
@media (max-width: 41.99rem) {
  .track-scene-meta { grid-template-columns: minmax(0, 1fr); }
}
.track-scene-meta dd { hyphens: none; overflow-wrap: normal; word-break: normal; }
@media (min-width: 32rem) and (max-width: 41.99rem) {
  .track-scene-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Site-wide platform resilience: protects every route, not only the music catalogue. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
:where(main, header, footer, section, article, nav, form, figure, .container) { min-inline-size: 0; }
:where(button, .button, .release-action, .audio-motion-toggle, .track-scene-toggle) { touch-action: manipulation; }
@media (any-pointer: coarse) { :where(.button, .release-action, .audio-motion-toggle, .track-scene-toggle, .menu-toggle) { min-height: 2.75rem; } }
@media (max-width: 41.99rem) { .container { padding-inline: clamp(1rem, 5vw, 1.5rem); }.page-hero:not(.page-hero--album) { padding-block: clamp(4rem, 15vw, 5.5rem) clamp(3rem, 10vw, 4.5rem); }.page-hero:not(.page-hero--album)::after { height: min(62vw, 20rem); right: -24vw; top: -12vw; width: min(62vw, 20rem); }.preview-intro { margin-bottom: 1.7rem; }.media-feature-copy, .future-media-slot { padding: 1.2rem; }.footer-grid, .footer-meta { gap: 1.5rem; }.footer-nav { min-width: 0; }.footer-nav a { overflow-wrap: anywhere; } }
@media (min-width: 100rem) { .container { max-width: 100rem; }.media-feature-copy { padding: clamp(2.5rem, 4vw, 5rem); }.future-media-slot { min-height: 18rem; } }

/* Runtime visual layer: it sits inside active supplied videos, never replaces them. */
.let-you-down-stage::before { z-index: 5; }
.runtime-video-logo { bottom: 2%; filter: brightness(1.3) contrast(1.25); height: 84%; left: 50%; max-width: 90%; object-fit: contain; opacity: 0; pointer-events: none; position: absolute; transform: translateX(-50%) scale(.92); transition: opacity .42s ease, transform 1.2s ease; width: 90%; z-index: 0; }
.runtime-video-silhouette { background: radial-gradient(ellipse at 50% 19%, rgba(255,255,255,.98) 0 10%, transparent 10.8%), radial-gradient(ellipse at 50% 69%, rgba(255,255,255,.94) 0 28%, transparent 29%); bottom: -5%; filter: drop-shadow(0 0 1rem rgba(255,255,255,.72)) drop-shadow(0 0 2.2rem rgba(223,16,39,.75)); height: 82%; left: 50%; opacity: 0; pointer-events: none; position: absolute; transform: translate3d(-50%, 7%, 0) scale(.9); transition: opacity .45s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); width: min(39%, 18rem); z-index: 0; }
.let-you-down-stage.is-video-active .runtime-video-logo { animation: runtime-logo-breathe 6.8s ease-in-out infinite alternate; mix-blend-mode: screen; opacity: .16; transform: translateX(-50%) scale(1); z-index: 2; }
.let-you-down-stage.is-video-active .runtime-video-silhouette { animation: runtime-silhouette-drift 5.8s ease-in-out infinite alternate; mix-blend-mode: screen; opacity: .21; transform: translate3d(-50%, 0, 0) scale(1); z-index: 3; }
.let-you-down-stage.is-video-active .let-you-down-fire { opacity: .42; z-index: 4; }
.walk-away-poster { background: radial-gradient(circle at 50% 70%, rgba(223,16,39,.44), transparent 42%), linear-gradient(145deg, #050505, #260307 64%, #050505); }
.walk-away-poster-art { align-items: center; background: linear-gradient(90deg, rgba(5,5,5,.78), rgba(5,5,5,.07) 50%, rgba(5,5,5,.78)), url('../img/trebledeff-site-artwork.png') center / contain no-repeat; border: 1px solid rgba(255,254,250,.28); box-shadow: 0 1.25rem 3.25rem rgba(0,0,0,.6), 0 0 2.6rem rgba(223,16,39,.35); display: flex; flex-direction: column; height: 100%; justify-content: flex-end; max-width: 100%; padding: clamp(1.1rem, 3vw, 2rem); position: relative; text-align: center; width: min(100%, 47rem); }
.walk-away-poster-art::before { background: radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.86) 0 8%, transparent 8.7%), radial-gradient(ellipse at 50% 69%, rgba(255,255,255,.7) 0 25%, transparent 26%); bottom: 6%; content: ""; filter: drop-shadow(0 0 .9rem rgba(255,255,255,.55)) drop-shadow(0 0 2.1rem rgba(223,16,39,.68)); height: 68%; left: 50%; mix-blend-mode: screen; opacity: .48; position: absolute; transform: translateX(-50%); width: min(36%, 14rem); }
.walk-away-poster-art span, .walk-away-poster-art small { position: relative; z-index: 1; }.walk-away-poster-art span { color: var(--paper); font-size: clamp(1.4rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; text-shadow: 0 .075em 0 #220309, 0 0 1.3rem rgba(223,16,39,.72); }.walk-away-poster-art small { color: var(--paper); font-size: .58rem; font-weight: 900; letter-spacing: .17em; margin-top: .65rem; text-transform: uppercase; }
@keyframes runtime-logo-breathe { from { filter: brightness(1.15) contrast(1.12); } to { filter: brightness(1.55) contrast(1.4); } }
@keyframes runtime-silhouette-drift { from { filter: drop-shadow(0 0 .7rem rgba(255,255,255,.62)) drop-shadow(0 0 1.8rem rgba(223,16,39,.6)); } to { filter: drop-shadow(0 0 1.25rem rgba(255,255,255,.9)) drop-shadow(0 0 3rem rgba(223,16,39,.88)); } }
@media (prefers-reduced-motion: reduce) { .let-you-down-stage.is-video-active .runtime-video-logo, .let-you-down-stage.is-video-active .runtime-video-silhouette { animation: none; }.let-you-down-stage.is-video-active .runtime-video-logo { opacity: .1; }.let-you-down-stage.is-video-active .runtime-video-silhouette { opacity: .12; }.let-you-down-stage.is-video-active .let-you-down-fire { opacity: .2; } }

/* Track details are deliberately spacious: labels and credits never compete for a line. */
.track-scene-meta { gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.track-scene-meta div { background: rgba(255,254,250,.035); border-left: 2px solid rgba(223,16,39,.7); min-width: 0; padding: .72rem .8rem; }
.track-scene-meta dt { line-height: 1.25; }
.track-scene-meta dd { line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
@media (min-width: 34rem) { .track-scene-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .track-scene-meta { gap: .85rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .track-scene-meta div { padding: .8rem .9rem; } .track-scene-meta dd { font-size: .78rem; } }

.aus-folder-heading { min-width: 0; }.aus-folder-heading img { background: #050505; display: block; height: auto; margin: 0 0 1rem; max-width: min(100%, 17rem); padding: .35rem; width: 100%; }.aus-folder-heading h2 { margin-top: .35rem; }.aus-folder-heading [data-keep-one-line] { font-size: clamp(1.22rem, 5.5vw, 4.25rem); letter-spacing: -.085em; line-height: .86; max-inline-size: 100%; overflow-wrap: normal; text-wrap: nowrap; white-space: nowrap; }
.release-page-title { font-size: clamp(1.2rem, 5.5vw, 4.25rem); letter-spacing: -.085em; line-height: .9; overflow-wrap: normal; text-wrap: nowrap; white-space: nowrap; }

/* The visual layer pauses truthfully with the master: clefs emerge from the fire only in active playback. */
.let-you-down-stage.is-video-active .runtime-video-logo { animation: none; opacity: .13; transform: translateX(-50%) scale(1); z-index: 2; }
.let-you-down-stage.is-video-active .runtime-video-silhouette { animation: none; opacity: .17; transform: translate3d(-50%, 0, 0) scale(1); z-index: 3; }
.let-you-down-stage.is-video-active .let-you-down-fire { opacity: .3; z-index: 4; }
.let-you-down-stage.is-video-active .let-you-down-fire::before, .let-you-down-stage.is-video-active .let-you-down-fire::after, .let-you-down-stage.is-video-active .let-you-down-fire span { animation-play-state: paused; }
.let-you-down-stage.is-video-playing .runtime-video-logo { animation: runtime-logo-breathe 6.8s ease-in-out infinite alternate; opacity: .24; }
.let-you-down-stage.is-video-playing .runtime-video-silhouette { animation: runtime-silhouette-drift 5.8s ease-in-out infinite alternate; opacity: .35; }
.let-you-down-stage.is-video-playing .let-you-down-fire { opacity: .5; }
.let-you-down-stage.is-video-playing .let-you-down-fire::before, .let-you-down-stage.is-video-playing .let-you-down-fire::after, .let-you-down-stage.is-video-playing .let-you-down-fire span { animation-play-state: running; }

/* OUTERCOURSE standby visual: the whole frame stays alive before the supplied film starts. */
.video-runtime-stage .runtime-video-vortex { background: radial-gradient(circle at 50% 50%, rgba(255,254,250,.82) 0 .35%, rgba(255,254,250,.2) .8%, transparent 5.5%), repeating-radial-gradient(ellipse at 50% 50%, rgba(255,254,250,.22) 0 .07rem, transparent .12rem 1.65rem), repeating-conic-gradient(from 218deg at 50% 50%, transparent 0deg 9deg, rgba(223,16,39,.78) 11deg 16deg, rgba(255,254,250,.36) 17deg 18.5deg, transparent 21deg 39deg); border-radius: 50%; filter: blur(.08rem) saturate(1.28); inset: -22%; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 10%, rgba(0,0,0,.98) 31%, rgba(0,0,0,.77) 61%, transparent 86%); mask-image: radial-gradient(ellipse at 50% 50%, #000 0 10%, rgba(0,0,0,.98) 31%, rgba(0,0,0,.77) 61%, transparent 86%); mix-blend-mode: screen; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; transform: rotate(-12deg) scale(.82); transform-origin: 50% 50%; transition: opacity .4s ease, transform .7s cubic-bezier(.2,.8,.2,1); z-index: 2; }.video-runtime-stage .runtime-video-vortex::before, .video-runtime-stage .runtime-video-vortex::after { content: ""; inset: 8%; pointer-events: none; position: absolute; }.video-runtime-stage .runtime-video-vortex::before { background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 1.8rem, rgba(223,16,39,.52) 1.86rem 1.94rem, transparent 2rem 3.25rem); mix-blend-mode: screen; opacity: .82; }.video-runtime-stage .runtime-video-vortex::after { background: radial-gradient(ellipse at 50% 50%, transparent 0 24%, rgba(223,16,39,.48) 44%, transparent 73%); filter: blur(.48rem); }.video-runtime-stage .runtime-video-vortex span { color: rgba(255,254,250,.94); font-family: Georgia, serif; font-size: clamp(1.05rem, 2.4vw, 2.55rem); left: var(--note-x); line-height: 1; opacity: var(--note-opacity); position: absolute; text-shadow: 0 0 .45rem #fff, 0 0 1.1rem var(--acid), 0 0 2.2rem #8e0718; top: var(--note-y); transform: translate(-50%, -50%) rotate(var(--note-tilt)); }.video-runtime-stage .runtime-video-vortex span:nth-child(1) { --note-x: 50%; --note-y: 25%; --note-tilt: -12deg; --note-opacity: .96; }.video-runtime-stage .runtime-video-vortex span:nth-child(2) { --note-x: 67%; --note-y: 30%; --note-tilt: 18deg; --note-opacity: .62; }.video-runtime-stage .runtime-video-vortex span:nth-child(3) { --note-x: 76%; --note-y: 44%; --note-tilt: 31deg; --note-opacity: .88; }.video-runtime-stage .runtime-video-vortex span:nth-child(4) { --note-x: 70%; --note-y: 61%; --note-tilt: 52deg; --note-opacity: .57; }.video-runtime-stage .runtime-video-vortex span:nth-child(5) { --note-x: 57%; --note-y: 72%; --note-tilt: 83deg; --note-opacity: .84; }.video-runtime-stage .runtime-video-vortex span:nth-child(6) { --note-x: 39%; --note-y: 68%; --note-tilt: -69deg; --note-opacity: .6; }.video-runtime-stage .runtime-video-vortex span:nth-child(7) { --note-x: 26%; --note-y: 54%; --note-tilt: -42deg; --note-opacity: .92; }.video-runtime-stage .runtime-video-vortex span:nth-child(8) { --note-x: 31%; --note-y: 38%; --note-tilt: -24deg; --note-opacity: .58; }.video-runtime-stage .runtime-video-vortex span:nth-child(9) { --note-x: 49%; --note-y: 39%; --note-tilt: 5deg; --note-opacity: .9; }.video-runtime-stage .runtime-video-vortex span:nth-child(10) { --note-x: 61%; --note-y: 48%; --note-tilt: 36deg; --note-opacity: .66; }.video-runtime-stage .runtime-video-vortex span:nth-child(11) { --note-x: 48%; --note-y: 58%; --note-tilt: -16deg; --note-opacity: .86; }.video-runtime-stage .runtime-video-vortex span:nth-child(12) { --note-x: 39%; --note-y: 47%; --note-tilt: -48deg; --note-opacity: .64; }
.video-runtime-stage:not(.is-video-active) video { filter: brightness(.24) contrast(1.24) saturate(.72); opacity: .38; transition: filter .35s ease, opacity .35s ease; }.video-runtime-stage:not(.is-video-active) .runtime-video-vortex { animation: runtime-vortex-idle 10.5s cubic-bezier(.4,0,.2,1) infinite alternate; opacity: .88; will-change: opacity, transform; }.video-runtime-stage:not(.is-video-active) .runtime-video-logo { bottom: -5%; height: 112%; max-width: none; mix-blend-mode: screen; opacity: .3; transform: translateX(-50%) scale(1); width: 112%; z-index: 4; }.video-runtime-stage:not(.is-video-active) .runtime-video-silhouette { bottom: -7%; height: 95%; mix-blend-mode: screen; opacity: .56; transform: translate3d(-50%, 0, 0) scale(1); width: min(52%, 25rem); z-index: 5; }.video-runtime-stage:not(.is-video-active) .let-you-down-fire { opacity: .62; z-index: 3; }.video-runtime-stage:not(.is-video-active) .let-you-down-fire::before, .video-runtime-stage:not(.is-video-active) .let-you-down-fire::after, .video-runtime-stage:not(.is-video-active) .let-you-down-fire span { animation-play-state: running; }
.runtime-video-idle-play { align-items: center; background: rgba(5,5,5,.8); border: 1px solid rgba(255,254,250,.82); bottom: clamp(.8rem, 3vw, 1.4rem); color: var(--paper); display: inline-flex; font: inherit; font-size: .67rem; font-weight: 900; gap: .55rem; justify-content: center; left: 50%; letter-spacing: .13em; min-height: 2.85rem; padding: .72rem 1rem; position: absolute; text-transform: uppercase; transform: translateX(-50%); transition: background .2s ease, border-color .2s ease, opacity .25s ease, transform .25s ease, visibility .25s step-end; white-space: nowrap; z-index: 8; }.runtime-video-idle-play span:first-child { color: var(--acid); font-size: .95rem; }.runtime-video-idle-play:hover, .runtime-video-idle-play:focus-visible { background: var(--acid); border-color: var(--acid); color: #050505; outline: 0; transform: translateX(-50%) translateY(-.14rem); }.runtime-video-idle-play:hover span:first-child, .runtime-video-idle-play:focus-visible span:first-child { color: #050505; }.video-runtime-stage.is-video-active .runtime-video-idle-play { opacity: 0; pointer-events: none; visibility: hidden; }
.video-runtime-stage--poster:not(.is-video-active) .runtime-video-logo { bottom: 2%; height: 84%; max-width: 90%; opacity: .16; transform: translateX(-50%) scale(1); width: 90%; z-index: 1; }.video-runtime-stage--poster:not(.is-video-active) .runtime-video-silhouette { bottom: -5%; height: 82%; opacity: .2; transform: translate3d(-50%, 0, 0) scale(1); width: min(39%, 18rem); z-index: 3; }.video-runtime-stage--poster:not(.is-video-active) .let-you-down-fire { opacity: .7; z-index: 0; }
.video-runtime-stage.is-video-active .runtime-video-vortex { opacity: .12; transform: rotate(0deg) scale(1); z-index: 2; }.video-runtime-stage.is-video-playing .runtime-video-vortex { animation: runtime-vortex-live 9s ease-in-out infinite alternate; opacity: .23; }.video-runtime-stage.is-video-active video { filter: none; opacity: 1; }
@keyframes runtime-vortex-idle { 0% { opacity: .5; transform: rotate(-18deg) scale(.72); } 54% { opacity: .96; transform: rotate(8deg) scale(1.13); } 100% { opacity: .62; transform: rotate(19deg) scale(.88); } }@keyframes runtime-vortex-live { from { opacity: .11; transform: rotate(-5deg) scale(.92); } to { opacity: .26; transform: rotate(8deg) scale(1.08); } }
@media (max-width: 41.99rem) { .video-runtime-stage .runtime-video-vortex { inset: -13%; }.video-runtime-stage .runtime-video-vortex::before { display: none; }.video-runtime-stage:not(.is-video-active) .runtime-video-logo { opacity: .24; }.video-runtime-stage:not(.is-video-active) .runtime-video-silhouette { opacity: .46; width: min(62%, 18rem); } }
@media (prefers-reduced-motion: reduce) { .video-runtime-stage .runtime-video-vortex, .video-runtime-stage.is-video-playing .runtime-video-vortex { animation: none; opacity: .55; transform: rotate(0deg) scale(1); }.video-runtime-stage:not(.is-video-active) .let-you-down-fire::before, .video-runtime-stage:not(.is-video-active) .let-you-down-fire::after, .video-runtime-stage:not(.is-video-active) .let-you-down-fire span { animation-play-state: paused; } }

/* The DYSEKNOSTICS portrait is encircled by a real transparent flame asset, not a synthetic colour ring. */
.album-hero-orbit-portrait { border: 0; box-shadow: 0 0 1rem rgba(223,16,39,.44); }
.album-hero-orbit-portrait::before { background: url('../img/dyseknostics-portrait-fire-ring.png') center / contain no-repeat; border-radius: 0; filter: drop-shadow(0 0 .5rem rgba(255,150,40,.78)) drop-shadow(0 0 1.45rem rgba(223,16,39,.7)); inset: -15%; -webkit-mask: none; mask: none; mix-blend-mode: normal; opacity: 1; }
.album-hero-orbit-portrait::after { background: none; box-shadow: none; }
@keyframes portrait-flame-ring { 0% { filter: drop-shadow(0 0 .34rem rgba(255,150,40,.64)) drop-shadow(0 0 .95rem rgba(223,16,39,.56)); transform: rotate(-.8deg) scale(.95); } 52% { filter: drop-shadow(0 0 .72rem rgba(255,218,128,.9)) drop-shadow(0 0 1.9rem rgba(255,43,13,.92)); transform: rotate(.8deg) scale(1.055); } 100% { filter: drop-shadow(0 0 .44rem rgba(255,150,40,.76)) drop-shadow(0 0 1.22rem rgba(223,16,39,.68)); transform: rotate(-.45deg) scale(.985); } }

/* OUTERCOURSE keeps its supplied film, flame and notation visual while removing the synthetic white centre patches. */
.outercourse-video-stage .runtime-video-silhouette { display: none; }

/* WARMUPS deliberately uses the generic TREBLEDEFF stage. The supplied square
   LET YOU DOWN cover belongs only to the separate LET YOU DOWN video below. */
.warmups-video-stage .warmups-poster-art { background-position: center 55%; }
.warmups-video-stage .let-you-down-poster { inset: clamp(1rem, 3vw, 2.2rem); }
.warmups-video-stage .runtime-video-silhouette { opacity: .35; }

/* LET YOU DOWN owns the supplied cover and its source-specific silhouette.
   The original image is not edited; fire and logo effects are composited around it. */
.let-you-down-video-stage:not(.is-video-active) .runtime-video-silhouette { display: none; }
.let-you-down-video-stage .let-you-down-poster { inset: clamp(1.2rem, 4vw, 3rem); overflow: visible; }
.let-you-down-video-stage .let-you-down-cover-art { box-shadow: 0 0 0 1px rgba(255,254,250,.92), 0 0 .8rem rgba(255,254,250,.54), 0 1.25rem 3.25rem rgba(0,0,0,.72), 0 0 2.8rem rgba(223,16,39,.62); position: relative; z-index: 2; }
.let-you-down-video-stage .let-you-down-white-silhouette-overlay,
.let-you-down-live-silhouette-overlay { box-shadow: none; display: block; filter: drop-shadow(0 0 .28rem rgba(255,255,255,.92)) drop-shadow(0 0 1.15rem rgba(223,16,39,.78)); height: 100%; left: 50%; max-width: 100%; mix-blend-mode: screen; object-fit: contain; pointer-events: none; position: absolute; top: 0; transform: translateX(-50%); width: auto; z-index: 3; }
.let-you-down-video-stage .let-you-down-white-silhouette-overlay { opacity: .92; }
.let-you-down-live-silhouette-overlay { opacity: 0; transform: translateX(-50%) scale(.94); transition: opacity .42s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.let-you-down-video-stage.is-video-active .let-you-down-live-silhouette-overlay { opacity: .2; transform: translateX(-50%) scale(1); }
.let-you-down-video-stage.is-video-playing .let-you-down-live-silhouette-overlay { animation: let-you-down-silhouette-drift 6.7s ease-in-out infinite alternate; }
@keyframes let-you-down-silhouette-drift { from { filter: drop-shadow(0 0 .22rem rgba(255,255,255,.68)) drop-shadow(0 0 .75rem rgba(223,16,39,.5)); opacity: .13; transform: translateX(-50%) translate3d(-.45%, .25%, 0) scale(.975); } to { filter: drop-shadow(0 0 .58rem rgba(255,255,255,.96)) drop-shadow(0 0 1.6rem rgba(223,16,39,.82)); opacity: .31; transform: translateX(-50%) translate3d(.5%, -.35%, 0) scale(1.025); } }
@media (max-width: 41.99rem) { .let-you-down-video-stage .let-you-down-poster { inset: 1rem; } }
@media (prefers-reduced-motion: reduce) { .let-you-down-live-silhouette-overlay { animation: none !important; } }

/* Shared live-fire contract: the genuine flame frame stays visible while the
   composited flame field supplies continuous updraft/flicker during playback. */
.video-runtime-stage .let-you-down-fire::before,
.video-runtime-stage .let-you-down-fire::after,
.video-runtime-stage .let-you-down-fire span,
.video-live-fire-frame {
  animation-play-state: paused;
  will-change: filter, opacity, transform;
}
.video-live-fire-frame {
  height: 112%;
  left: 50%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  transition: opacity .35s ease;
  width: 100%;
  z-index: 4;
}
.video-runtime-stage.is-video-active .video-live-fire-frame { opacity: .4; }
.video-runtime-stage.is-video-playing .let-you-down-fire::before {
  animation: treble-fire-core 2.9s cubic-bezier(.32,.04,.2,1) infinite;
  animation-play-state: running;
}
.video-runtime-stage.is-video-playing .let-you-down-fire::after {
  animation: treble-fire-embers 4.1s linear infinite;
  animation-play-state: running;
}
.video-runtime-stage.is-video-playing .let-you-down-fire span { animation-play-state: running; }
.video-runtime-stage.is-video-playing .video-live-fire-frame {
  animation: treble-fire-frame-flicker 2.9s steps(2, end) infinite;
  animation-play-state: running;
  opacity: .66;
  z-index: 6;
}
.warmups-artwork-stage .warmups-live-fire-frame { z-index: 6; }
.warmups-artwork-stage.is-video-playing .warmups-live-fire-frame {
  animation: treble-fire-frame-flicker 2.9s steps(2, end) infinite;
  animation-play-state: running;
  opacity: .72;
  z-index: 6;
}
.let-you-down-video-stage:not(.is-video-active) .video-live-fire-frame { opacity: .54; z-index: 1; }
@keyframes treble-fire-core {
  0%, 100% { opacity: .68; transform: translate3d(-2%, 7%, 0) scale(1.03, .86); }
  17% { opacity: .91; transform: translate3d(3%, -3%, 0) scale(.95, 1.12); }
  38% { opacity: .77; transform: translate3d(-4%, 2%, 0) scale(1.14, .94); }
  62% { opacity: .96; transform: translate3d(1%, -8%, 0) scale(.92, 1.27); }
  81% { opacity: .73; transform: translate3d(4%, -1%, 0) scale(1.1, 1.02); }
}
@keyframes treble-fire-embers {
  0%, 100% { opacity: .5; transform: translate3d(-4%, 9%, 0) scale(1.08); }
  29% { opacity: .86; transform: translate3d(4%, -6%, 0) scale(.96, 1.12); }
  57% { opacity: .61; transform: translate3d(-2%, 1%, 0) scale(1.16, .92); }
  78% { opacity: .79; transform: translate3d(3%, -9%, 0) scale(.93, 1.18); }
}
@keyframes treble-fire-frame-flicker {
  0%, 100% { filter: brightness(.92) contrast(1.04) saturate(1.02); transform: translate(-50%, -50%) translate3d(-.65%, .85%, 0) scale(1.005); }
  18% { filter: brightness(1.23) contrast(1.16) saturate(1.28); transform: translate(-50%, -50%) translate3d(.45%, -.55%, 0) scale(1.032); }
  43% { filter: brightness(1.04) contrast(1.1) saturate(1.12); transform: translate(-50%, -50%) translate3d(-.3%, -.85%, 0) scale(1.017); }
  69% { filter: brightness(1.34) contrast(1.18) saturate(1.36); transform: translate(-50%, -50%) translate3d(.72%, .2%, 0) scale(1.042); }
  86% { filter: brightness(.98) contrast(1.08) saturate(1.1); transform: translate(-50%, -50%) translate3d(-.5%, -.1%, 0) scale(1.022); }
}
@media (prefers-reduced-motion: reduce) {
  .video-runtime-stage .let-you-down-fire::before,
  .video-runtime-stage .let-you-down-fire::after,
  .video-runtime-stage .let-you-down-fire span,
  .video-runtime-stage .video-live-fire-frame,
  .warmups-artwork-stage .warmups-live-fire-frame { animation: none !important; }
}

/* Standby fire stays visibly alive at a low intensity; active playback raises the
   flame movement above it. This makes the frame read as fire before Play is pressed. */
.video-runtime-stage:not(.is-video-active) .let-you-down-fire::before {
  animation: treble-fire-core-standby 6.8s cubic-bezier(.3,.06,.2,1) infinite;
  animation-play-state: running;
}
.video-runtime-stage:not(.is-video-active) .let-you-down-fire::after {
  animation: treble-fire-embers-standby 8.5s linear infinite;
  animation-play-state: running;
}
.warmups-artwork-stage:not(.is-video-active) .warmups-fire-frame {
  animation: treble-fire-frame-standby 6.6s steps(2, end) infinite;
  will-change: filter, opacity, transform;
}
.let-you-down-video-stage:not(.is-video-active) .video-live-fire-frame {
  animation: treble-fire-frame-standby 6.6s steps(2, end) infinite;
  animation-play-state: running;
}
@keyframes treble-fire-core-standby {
  0%, 100% { opacity: .54; transform: translate3d(-1%, 3%, 0) scale(1.01, .93); }
  24% { opacity: .78; transform: translate3d(1.8%, -2%, 0) scale(.97, 1.08); }
  52% { opacity: .6; transform: translate3d(-2%, 1%, 0) scale(1.07, .96); }
  77% { opacity: .73; transform: translate3d(1.2%, -4%, 0) scale(.98, 1.12); }
}
@keyframes treble-fire-embers-standby {
  0%, 100% { opacity: .4; transform: translate3d(-2%, 4%, 0) scale(1.03); }
  35% { opacity: .66; transform: translate3d(2%, -3%, 0) scale(.98, 1.06); }
  71% { opacity: .48; transform: translate3d(-1%, -1%, 0) scale(1.08, .97); }
}
@keyframes treble-fire-frame-standby {
  0%, 100% { filter: brightness(.88) contrast(1.02) saturate(.96); opacity: .74; transform: translate(-50%, -50%) translate3d(-.3%, .45%, 0) scale(1.006); }
  23% { filter: brightness(1.13) contrast(1.11) saturate(1.18); opacity: .94; transform: translate(-50%, -50%) translate3d(.34%, -.3%, 0) scale(1.021); }
  57% { filter: brightness(.98) contrast(1.07) saturate(1.08); opacity: .8; transform: translate(-50%, -50%) translate3d(-.2%, -.48%, 0) scale(1.012); }
  81% { filter: brightness(1.21) contrast(1.15) saturate(1.27); opacity: .98; transform: translate(-50%, -50%) translate3d(.5%, .12%, 0) scale(1.028); }
}
@media (prefers-reduced-motion: reduce) {
  .video-runtime-stage:not(.is-video-active) .let-you-down-fire::before,
  .video-runtime-stage:not(.is-video-active) .let-you-down-fire::after,
  .warmups-artwork-stage:not(.is-video-active) .warmups-fire-frame,
  .let-you-down-video-stage:not(.is-video-active) .video-live-fire-frame { animation: none !important; }
}

/* Video poster finish: keep the supplied artwork clean while the existing
   TREBLEDEFF logo and fire treatment carry the visual identity. */
.warmups-video-stage .runtime-video-silhouette,
.let-you-down-video-stage .runtime-video-silhouette,
.warmups-video-stage .walk-away-poster-art::before { display: none; }
.warmups-video-stage .let-you-down-poster,
.let-you-down-video-stage .let-you-down-poster { background: linear-gradient(145deg, rgba(5,5,5,.72), rgba(38,3,7,.44) 64%, rgba(5,5,5,.7)); }
.warmups-video-stage .runtime-video-logo,
.let-you-down-video-stage .runtime-video-logo { bottom: auto; filter: brightness(1.46) contrast(1.34) drop-shadow(0 0 .5rem rgba(255,74,26,.9)) drop-shadow(0 0 1.65rem rgba(223,16,39,.76)); height: 34%; max-width: 80%; mix-blend-mode: screen; opacity: .56; top: 3.5%; width: 80%; z-index: 4; }
.warmups-video-stage.is-video-active .runtime-video-logo,
.let-you-down-video-stage.is-video-active .runtime-video-logo { opacity: .42; z-index: 5; }
.warmups-video-stage.is-video-playing .runtime-video-logo,
.let-you-down-video-stage.is-video-playing .runtime-video-logo { opacity: .58; }
.warmups-video-stage:not(.is-video-active) .let-you-down-fire,
.let-you-down-video-stage:not(.is-video-active) .let-you-down-fire { opacity: .84; }
.let-you-down-video-stage:not(.is-video-active) .video-live-fire-frame { opacity: .68; }
.let-you-down-stage .let-you-down-play { z-index: 7; }
.let-you-down-video-stage:not(.is-video-active) .let-you-down-play { cursor: pointer; display: inline-flex; opacity: 1; pointer-events: auto; visibility: visible; z-index: 8; }
.let-you-down-video-stage:not(.is-video-active) .let-you-down-play:disabled { cursor: wait; opacity: .76; }

/* A.U.S. artwork treatment: use the existing transparent flame frame as a
   living border so every supplied image stays intact inside the fire. */
.aus-track-grid .track-scene .catalogue-track-photo { background: #050505; border: 0; box-shadow: 0 0 1.4rem rgba(223,16,39,.2); overflow: visible; padding: clamp(.3rem, 1vw, .6rem); }
.aus-track-grid .track-scene .catalogue-track-photo::before { animation: aus-flame-border-pulse 4.8s ease-in-out infinite; background: url('../img/dyseknostics-tracks/warmups-fire-frame.png') center / 100% 100% no-repeat; display: block; filter: drop-shadow(0 0 .32rem rgba(255,150,40,.78)) drop-shadow(0 0 1.2rem rgba(223,16,39,.68)); inset: -.55rem; opacity: .9; transform-origin: 50% 50%; will-change: filter, opacity, transform; z-index: 4; }
.aus-track-grid .track-scene .catalogue-track-photo::after { background: linear-gradient(135deg, rgba(255,254,250,.03), rgba(223,16,39,.12) 56%, rgba(5,5,5,.06)); border: 1px solid rgba(255,254,250,.16); box-shadow: inset 0 0 1.8rem rgba(223,16,39,.18), 0 0 1.1rem rgba(223,16,39,.18); display: block; inset: 0; z-index: 2; }
.aus-track-grid .track-scene .track-treatment--manic-maniac-methods::after { background: none; border-color: rgba(255,254,250,.16); box-shadow: inset 0 0 1.8rem rgba(223,16,39,.14), 0 0 1.1rem rgba(223,16,39,.18); mix-blend-mode: normal; }
@keyframes aus-flame-border-pulse { 0%, 100% { filter: drop-shadow(0 0 .25rem rgba(255,150,40,.66)) drop-shadow(0 0 .9rem rgba(223,16,39,.58)); opacity: .76; transform: scale(.985); } 50% { filter: drop-shadow(0 0 .58rem rgba(255,218,128,.94)) drop-shadow(0 0 1.65rem rgba(255,43,13,.9)); opacity: 1; transform: scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .aus-track-grid .track-scene .catalogue-track-photo::before { animation: none; opacity: .88; transform: none; } }

/* THE DYSEKTAHHH audio artwork: keep the supplied photo intact while giving
   it the same fire field and white silhouette language as the other archive art. */
.track-scene .track-treatment--the-dysektahhh { background: radial-gradient(circle at 50% 18%, rgba(255,118,35,.28), transparent 34%), radial-gradient(circle at 50% 78%, rgba(223,16,39,.28), transparent 62%), #050505; border: 0; box-shadow: 0 0 1.4rem rgba(223,16,39,.24); overflow: visible; padding: clamp(.35rem, 1vw, .65rem); }
.track-scene .track-treatment--the-dysektahhh::before { animation: dysektahhh-flame-border-pulse 5.2s ease-in-out infinite; background: url('../img/dyseknostics-tracks/warmups-fire-frame.png') center / 100% 100% no-repeat; display: block; filter: drop-shadow(0 0 .32rem rgba(255,150,40,.8)) drop-shadow(0 0 1.2rem rgba(223,16,39,.7)); inset: -.58rem; opacity: .94; transform-origin: 50% 50%; will-change: filter, opacity, transform; z-index: 4; }
.track-scene .track-treatment--the-dysektahhh::after { background: linear-gradient(135deg, rgba(255,254,250,.02), rgba(223,16,39,.16) 58%, rgba(5,5,5,.08)); border: 2px solid rgba(255,254,250,.86); box-shadow: inset 0 0 0 1px rgba(255,254,250,.22), inset 0 0 1.8rem rgba(223,16,39,.18), 0 0 1rem rgba(255,254,250,.18); display: block; inset: .42rem; mix-blend-mode: normal; z-index: 2; }
.track-scene .track-treatment--the-dysektahhh > img:first-child { object-fit: contain; position: relative; z-index: 1; }
.track-scene .track-treatment--the-dysektahhh .dysektahhh-white-silhouette-overlay { display: block; filter: drop-shadow(0 0 .28rem rgba(255,255,255,.94)) drop-shadow(0 0 1.15rem rgba(223,16,39,.72)); height: calc(100% - .72rem); left: 50%; max-width: none; mix-blend-mode: screen; object-fit: contain; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); width: auto; z-index: 3; }
@keyframes dysektahhh-flame-border-pulse { 0%, 100% { filter: drop-shadow(0 0 .25rem rgba(255,150,40,.68)) drop-shadow(0 0 .9rem rgba(223,16,39,.58)); opacity: .78; transform: scale(.985); } 50% { filter: drop-shadow(0 0 .58rem rgba(255,218,128,.96)) drop-shadow(0 0 1.65rem rgba(255,43,13,.92)); opacity: 1; transform: scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .track-scene .track-treatment--the-dysektahhh::before { animation: none; opacity: .88; transform: none; } }

/* Listen hero: fill its existing orbit with supplied portrait artwork using the
   same circular image, flame-ring and glow treatment as the album artwork. */
.page-hero--listen::after { display: none; }
.listen-hero-orbit-portrait { height: clamp(7rem, 20vw, 15rem); left: auto; right: clamp(1rem, 6vw, 5rem); top: 50%; transform: translateY(-50%); width: clamp(7rem, 20vw, 15rem); }
.listen-hero-orbit-portrait img { object-position: 50% 38%; }
@media (max-width: 41.99rem) {
  .listen-hero-orbit-portrait { opacity: .88; right: .9rem; top: 2.2rem; transform: none; }
}

/* About portrait: reuse the same circular flame-ring treatment in the split
   layout while keeping the supplied portrait contained in its artwork slot. */
.about-portrait-orbit { aspect-ratio: 1; height: auto; left: auto; margin: 0 auto; max-width: 31rem; position: relative; right: auto; top: auto; transform: none; width: 100%; }
.about-portrait-orbit::after { border-radius: 50%; }
.about-portrait-orbit img { object-position: 50% 28%; }

/* About hero: fill the existing top-right circle with the submitted portrait. */
.page-hero--about::after { display: none; }
.about-hero-orbit { height: clamp(7rem, 20vw, 15rem); left: auto; right: clamp(1rem, 6vw, 5rem); top: 50%; transform: translateY(-50%); width: clamp(7rem, 20vw, 15rem); }
.about-hero-orbit img { object-position: 50% 28%; }
@media (max-width: 41.99rem) {
  .about-hero-orbit { opacity: .88; right: .9rem; top: 2.2rem; transform: none; }
}

/* Services hero: use the same supplied-image orbit treatment as Listen. */
.page-hero--services::after { display: none; }
.services-hero-orbit-portrait { height: clamp(7rem, 20vw, 15rem); left: auto; right: clamp(1rem, 6vw, 5rem); top: 50%; transform: translateY(-50%); width: clamp(7rem, 20vw, 15rem); }
.services-hero-orbit-portrait img { object-position: 50% 30%; }
@media (max-width: 41.99rem) {
  .services-hero-orbit-portrait { opacity: .88; right: .9rem; top: 2.2rem; transform: none; }
}

/* Keep the existing portraits and flame frames visible on every page size. */
.page-hero--portrait::after { display:none; }
.page-hero-orbit-portrait { height:clamp(7rem,20vw,15rem); width:clamp(7rem,20vw,15rem); left:auto; right:clamp(1rem,6vw,5rem); top:50%; transform:translateY(-50%); }
.page-hero-orbit-portrait img { object-position:50% 28%; }
@media (min-width:42rem) {
 .page-hero:has(.album-hero-orbit-portrait):not(.page-hero--album) .container { padding-right:calc(clamp(7rem,20vw,15rem) + 10vw); }
}
@media (max-width:41.99rem) {
 .page-hero:has(.album-hero-orbit-portrait):not(.page-hero--album) { padding-top:13rem; }
 .page-hero:has(.album-hero-orbit-portrait):not(.page-hero--album) > .album-hero-orbit-portrait { height:8rem; width:8rem; left:50%; right:auto; top:2rem; transform:translateX(-50%); opacity:1; }
}