/* Phase 3 hybrid local-audio player: Spotify metadata + self-hosted transparent custom playback. */
.phase3-sections {
  --p3-line: rgba(255,255,255,.18);
  --p3-line-strong: rgba(255,255,255,.34);
  --p3-text: rgba(255,255,255,.94);
  --p3-muted: rgba(255,255,255,.58);
  --p3-dim: rgba(255,255,255,.34);
  --p3-green: #92ffb4;
  --p3-blue: #83cfff;
  width: min(820px, calc(100vw - 34px));
  max-width: calc(100vw - 34px);
  margin: clamp(18px, 3.2vh, 34px) auto clamp(16px, 2.8vh, 28px);
  color: var(--p3-text);
  font-family: inherit;
  text-align: center;
  position: relative;
  z-index: 5;
  isolation: isolate;
}
.phase3-tabs{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.7vw,36px);flex-wrap:nowrap;user-select:none;-webkit-user-select:none}.phase3-tab,.phase3-slash{font-size:clamp(.70rem,1vw,.82rem);letter-spacing:.17em;text-transform:uppercase;line-height:1.1}.phase3-tab{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.58);padding:0 0 .45rem;font:inherit;font-weight:760;cursor:pointer;position:relative;transition:color .22s ease,text-shadow .22s ease}.phase3-tab::after{content:"";position:absolute;left:0;right:.17em;bottom:0;height:1px;background:currentColor;opacity:0;transform:scaleX(.72);transform-origin:center;box-shadow:0 0 10px currentColor;transition:opacity .22s ease,transform .22s ease}.phase3-tab:hover,.phase3-tab.is-active{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.42)}.phase3-tab.is-active::after{opacity:.95;transform:scaleX(1)}.phase3-slash{color:rgba(255,255,255,.42);padding-bottom:.45rem}
.phase3-panel{height:0;overflow:hidden;opacity:0;transform:translateY(-6px) scale(.985);transition:height .46s cubic-bezier(.22,.61,.36,1),opacity .22s cubic-bezier(.22,.61,.36,1),transform .32s cubic-bezier(.22,.61,.36,1),margin .28s cubic-bezier(.22,.61,.36,1);margin-top:0;max-width:100%;box-sizing:border-box}.phase3-panel.is-open{opacity:1;transform:translateY(0) scale(1);margin-top:clamp(15px,3.4vh,32px)}.phase3-panel.is-section-fading-out{opacity:0;transform:translateY(4px) scale(.992);pointer-events:none}.phase3-panel.is-section-fading-in .phase3-carousel{animation:phase3-section-fade-in .28s cubic-bezier(.22,.61,.36,1) both}@keyframes phase3-section-fade-in{from{opacity:0;transform:translateY(5px) scale(.996)}to{opacity:1;transform:translateY(0) scale(1)}}
.phase3-carousel{--p3-arrow-top:50%;position:relative;width:100%;max-width:100%;padding:0 54px;box-sizing:border-box;background:transparent;overflow:visible}.phase3-scroll{width:min(668px,100%);max-width:100%;margin:0 auto;overflow-x:auto;overflow-y:hidden;background:transparent;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent;--p3-side-fade:clamp(38px,7vw,78px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--p3-side-fade),#000 calc(100% - var(--p3-side-fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--p3-side-fade),#000 calc(100% - var(--p3-side-fade)),transparent 100%)}.phase3-scroll::-webkit-scrollbar{height:4px}.phase3-scroll::-webkit-scrollbar-track{background:transparent}.phase3-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}.phase3-scroll.is-programmatic-scroll{scroll-snap-type:none!important;scroll-behavior:auto!important;overscroll-behavior-x:none}
.phase3-scroll:focus{outline:none}.phase3-scroll:focus-visible{outline:1px solid rgba(255,255,255,.28);outline-offset:8px;border-radius:18px}.phase3-track{display:flex;align-items:flex-start;gap:16px;width:max-content;min-width:100%}.phase3-spacer{flex:0 0 0}
.phase3-card{width:min(580px,calc(100vw - 160px));max-width:100%;min-height:90px;border:1px solid rgba(255,255,255,.20);border-radius:16px;background:transparent!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;transition:min-height .28s cubic-bezier(.2,.8,.2,1),border-color .2s ease;display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;text-align:left;position:relative;z-index:2;flex:0 0 auto;align-self:flex-start;scroll-snap-align:center;scroll-snap-stop:always;box-sizing:border-box;overflow:hidden;isolation:isolate}.phase3-card.is-playing{border-color:rgba(146,255,180,.36)}.phase3-card>*{position:relative;z-index:1}.phase3-art{width:70px;height:70px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04) center/cover no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;clip-path:inset(0)}.phase3-art img{width:100%;height:100%;object-fit:cover;display:block}.phase3-content{min-width:0;display:grid;gap:7px;align-content:center}.phase3-heading{display:grid;gap:4px;min-width:0;text-align:left}.phase3-title{font-size:clamp(.82rem,1.1vw,.98rem);letter-spacing:.15em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.16}.phase3-subtitle{font-size:.64rem;letter-spacing:.08em;color:var(--p3-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.2}.phase3-track-browser{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:7px;align-items:center;margin-top:1px}.phase3-track-nav{width:22px;height:22px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:transparent;color:rgba(255,255,255,.72);display:grid;place-items:center;font:inherit;line-height:1;cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease}.phase3-track-nav:hover{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.045)}.phase3-current-track{min-width:0;color:rgba(255,255,255,.88);font-size:.62rem;letter-spacing:.075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase3-track-count{color:rgba(255,255,255,.42);font-size:.56rem;letter-spacing:.12em;white-space:nowrap}.phase3-track-browser[data-single="true"] .phase3-track-nav,.phase3-track-browser[data-single="true"] .phase3-track-count{display:none}.phase3-links{display:grid;gap:7px;justify-items:end;align-content:center;min-width:max-content}.phase3-link{color:var(--p3-green);text-decoration:none;font-size:.66rem;letter-spacing:.075em;font-weight:760;white-space:nowrap;text-shadow:0 0 12px rgba(146,255,180,.22)}.phase3-link[data-accent="apple"]{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.16)}.phase3-link[data-accent="youtube"]{color:#ffb3b3;text-shadow:0 0 10px rgba(255,120,120,.16)}.phase3-link[data-accent="soundcloud"]{color:#ffc08a;text-shadow:0 0 10px rgba(255,128,36,.18)}.phase3-link[data-accent="project"]{color:var(--p3-blue);text-shadow:0 0 12px rgba(131,207,255,.18)}.phase3-link:hover{text-decoration:underline;text-underline-offset:4px}.phase3-link.is-hidden{display:none}.phase3-player{grid-column:1/-1;display:grid;grid-template-columns:auto 42px minmax(0,1fr) 42px auto;gap:9px;align-items:center;width:100%;color:rgba(255,255,255,.8);font-size:.62rem;letter-spacing:.05em;margin-top:0}.phase3-play{width:24px;height:24px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:transparent;color:#fff;padding:0;cursor:pointer;display:grid;place-items:center;transition:color .18s ease,border-color .18s ease,background .18s ease}.phase3-play:hover{border-color:rgba(146,255,180,.42);color:var(--p3-green);background:rgba(146,255,180,.06)}.phase3-play:disabled{opacity:.32;cursor:default}.phase3-play::before{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;margin-left:2px}.phase3-play.is-playing::before{width:9px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}.phase3-time{font-size:.58rem;color:rgba(255,255,255,.56);white-space:nowrap}.phase3-play-count{font-size:.56rem;letter-spacing:.1em;color:rgba(255,255,255,.42);text-transform:uppercase;white-space:nowrap}.phase3-waveform{height:28px;display:flex;align-items:center;gap:2px;cursor:pointer;touch-action:manipulation}.phase3-wave-bar{flex:1 1 0;min-width:2px;max-width:5px;height:var(--bar-h,40%);border-radius:999px;background:rgba(255,255,255,.16);transition:background .12s ease,box-shadow .12s ease,transform .12s ease}.phase3-wave-bar.is-filled{background:rgba(255,255,255,.9);box-shadow:0 0 7px rgba(255,255,255,.28)}.phase3-waveform:hover .phase3-wave-bar{background-color:rgba(255,255,255,.25)}.phase3-waveform:hover .phase3-wave-bar.is-filled{background-color:#fff}.phase3-no-audio{grid-column:1/-1;color:rgba(255,255,255,.34);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;display:none}.phase3-card:not(.has-audio) .phase3-no-audio{display:block}.phase3-card:not(.has-audio) .phase3-player{grid-template-columns:auto 1fr auto}.phase3-empty{color:var(--p3-muted);font-size:.82rem;letter-spacing:.08em;padding:20px 0 6px}.phase3-visually-hidden{position:absolute!important;width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;white-space:nowrap}.phase3-arrow{position:absolute;top:var(--p3-arrow-top);transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.86);display:grid;place-items:center;font-size:1.55rem;line-height:1;padding-bottom:.14em;cursor:pointer;z-index:3;box-shadow:none;transition:color .2s ease,text-shadow .2s ease,transform .2s ease,opacity .2s ease}.phase3-arrow:hover{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.44);background:transparent}.phase3-arrow:active{transform:translateY(-50%) scale(.96)}.phase3-arrow:disabled{opacity:.22;cursor:default;pointer-events:none}.phase3-arrow.prev{left:0}.phase3-arrow.next{right:0}
@media(max-width:760px){.phase3-sections{width:min(100%,calc(100vw - 20px));margin-top:clamp(12px,2.1vh,20px);margin-bottom:clamp(12px,2vh,18px)}.phase3-tabs{gap:9px}.phase3-tab,.phase3-slash{font-size:clamp(.50rem,2.05vw,.64rem);letter-spacing:.075em}.phase3-tab{padding-bottom:.34rem}.phase3-tab::after{right:.075em}.phase3-panel.is-open{margin-top:clamp(10px,2.1vh,16px)}.phase3-carousel{padding:0 28px}.phase3-scroll{width:min(306px,calc(100vw - 78px));padding:1px 0 7px;scrollbar-width:none;--p3-side-fade:22px}.phase3-scroll::-webkit-scrollbar{display:none}.phase3-track{gap:10px}.phase3-card{width:min(278px,calc(100vw - 104px));min-height:86px;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"art content" "art links" "player player";gap:7px 10px;align-items:center;padding:8px 10px;border-radius:14px;background:transparent!important;border-color:rgba(255,255,255,.20)}.phase3-art{grid-area:art;width:52px;height:52px;border-radius:9px}.phase3-content{grid-area:content;gap:4px;align-content:center}.phase3-title{font-size:clamp(.66rem,2.6vw,.78rem);letter-spacing:.09em;line-height:1.12}.phase3-subtitle{font-size:.50rem;letter-spacing:.05em;line-height:1.18}.phase3-track-browser{grid-template-columns:auto minmax(0,1fr) auto auto;gap:5px}.phase3-track-nav{width:18px;height:18px;font-size:.72rem}.phase3-current-track{font-size:.49rem;letter-spacing:.045em}.phase3-track-count{font-size:.45rem;letter-spacing:.08em}.phase3-links{grid-area:links;display:flex;gap:8px;justify-content:flex-start;align-items:center;min-width:0}.phase3-link{font-size:.50rem;letter-spacing:.045em}.phase3-player{grid-area:player;grid-column:1/-1;grid-template-columns:auto 30px minmax(0,1fr) 30px;gap:5px;margin-top:2px;font-size:.50rem}.phase3-play{width:20px;height:20px}.phase3-time{font-size:.46rem}.phase3-play-count{grid-column:1/-1;font-size:.44rem;letter-spacing:.08em}.phase3-waveform{height:22px;gap:1.5px}.phase3-wave-bar{min-width:1.5px}.phase3-no-audio{font-size:.44rem;letter-spacing:.07em}.phase3-arrow{width:30px;height:30px;font-size:1.05rem}.phase3-arrow.prev{left:-2px}.phase3-arrow.next{right:-2px}}
@media(hover:hover) and (pointer:fine){html,body,.page{width:100vw!important;max-width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;max-height:100vh!important;max-height:100dvh!important;overflow:hidden!important;scrollbar-width:none!important}html::-webkit-scrollbar,body::-webkit-scrollbar,.page::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.page{padding-top:clamp(10px,1.7vh,18px)!important;padding-bottom:clamp(10px,1.7vh,18px)!important}.stage{max-height:calc(100vh - 20px)!important;max-height:calc(100dvh - 20px)!important}body.phase3-open .stage{--section-gap:clamp(12px,2.1vh,23px);--footer-gap:clamp(5px,1.3vh,12px)}body.phase3-audio-playing .stage{--section-gap:clamp(9px,1.7vh,19px);--footer-gap:clamp(4px,1.1vh,10px)}}

/* Phase 3 UI polish: transparent cards, album/EP song browser, refined controls. */
.phase3-card,
.phase3-card::before,
.phase3-card::after {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.phase3-title-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.phase3-release-badge {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 18px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  font-size: .48rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.phase3-track-browser {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 24px !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 2px !important;
  min-width: 0;
}
.phase3-track-browser[data-single="true"] {
  display: none !important;
}
.phase3-track-center {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.phase3-current-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.phase3-current-track {
  min-width: 0;
  color: rgba(255,255,255,.90);
  font-size: .61rem;
  letter-spacing: .055em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase3-track-count {
  color: rgba(255,255,255,.46);
  font-size: .53rem;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.phase3-track-rail {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phase3-track-rail::-webkit-scrollbar { display: none; }
.phase3-track-choice {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.52);
  min-width: 0;
  max-width: 142px;
  padding: 4px 8px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: .51rem;
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, text-shadow .18s ease, transform .18s ease;
}
.phase3-track-choice span {
  color: rgba(255,255,255,.36);
  font-size: .46rem;
  letter-spacing: .06em;
}
.phase3-track-choice:hover,
.phase3-track-choice:focus-visible {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
  outline: none;
}
.phase3-track-choice.is-active {
  color: #fff;
  border-color: rgba(146,255,180,.48);
  text-shadow: 0 0 10px rgba(146,255,180,.20);
}
.phase3-track-choice.is-active span { color: var(--p3-green); }
.phase3-track-nav {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.70) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .18s ease, border-color .18s ease, transform .18s ease, text-shadow .18s ease;
}
.phase3-track-nav::before {
  content: "‹";
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-.035em);
}
.phase3-track-nav[data-track-step="1"]::before { content: "›"; }
.phase3-track-nav:hover,
.phase3-track-nav:focus-visible {
  color: #fff !important;
  border-color: rgba(255,255,255,.36) !important;
  background: transparent !important;
  text-shadow: 0 0 11px rgba(255,255,255,.28);
  outline: none;
}
.phase3-track-nav:active { transform: scale(.96); }
.phase3-play.is-playing::before {
  width: 8px !important;
  height: 10px !important;
  border: 0 !important;
  margin-left: 0 !important;
  background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px, currentColor 6px 8px);
  border-radius: 1px;
}
.phase3-player {
  grid-template-columns: auto 42px minmax(0, 1fr) 42px auto !important;
}

@media (max-width: 760px) {
  .phase3-title-line { gap: 6px; }
  .phase3-release-badge {
    min-width: 30px;
    height: 15px;
    padding: 0 5px;
    font-size: .39rem;
    letter-spacing: .09em;
  }
  .phase3-track-browser {
    grid-template-columns: 20px minmax(0, 1fr) 20px !important;
    gap: 5px !important;
  }
  .phase3-track-nav {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
  }
  .phase3-track-nav::before {
    font-size: .86rem;
    transform: translateY(-.04em);
  }
  .phase3-current-track { font-size: .48rem; letter-spacing: .035em; }
  .phase3-track-count { font-size: .42rem; letter-spacing: .08em; }
  .phase3-track-rail { gap: 4px; }
  .phase3-track-choice {
    max-width: 104px;
    padding: 3px 6px 3px 5px;
    font-size: .43rem;
    gap: 4px;
  }
  .phase3-track-choice span { font-size: .39rem; }
  .phase3-player {
    grid-template-columns: auto 30px minmax(0, 1fr) 30px !important;
  }
  .phase3-play.is-playing::before {
    width: 7px !important;
    height: 9px !important;
    background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px);
  }
}


/* Phase 3 album browser refinement: numeric-only track pills with smooth rendering. */
.phase3-current-row {
  display: none !important;
}
.phase3-track-center {
  gap: 0 !important;
}
.phase3-track-browser {
  grid-template-columns: 25px minmax(0, 1fr) 25px !important;
}
.phase3-track-rail {
  justify-content: center;
  gap: 6px !important;
  padding: 2px 0 !important;
}
.phase3-track-choice {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 22px !important;
  padding: 0 !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.54) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.phase3-track-choice span {
  color: inherit !important;
  font-size: .49rem !important;
  font-weight: 850;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
.phase3-track-choice:hover,
.phase3-track-choice:focus-visible {
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32) !important;
  transform: none !important;
}
.phase3-track-choice.is-active {
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(146,255,180,.60), 0 0 12px rgba(146,255,180,.14) !important;
}
.phase3-track-nav::before {
  transform: none !important;
  line-height: 1 !important;
}
@media (max-width: 760px) {
  .phase3-track-browser { grid-template-columns: 21px minmax(0, 1fr) 21px !important; }
  .phase3-track-rail { gap: 4px !important; }
  .phase3-track-choice {
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    height: 19px !important;
  }
  .phase3-track-choice span { font-size: .40rem !important; }
}

/* Phase 3 album current-song label: track names stay out of the number browser, but remain visible beside the release title. */
.phase3-title-line {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) auto !important;
  align-items: center !important;
}
.phase3-active-song {
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  display: block;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  color: rgba(146,255,180,.92);
  background: linear-gradient(90deg, rgba(146,255,180,.10), rgba(146,255,180,.025));
  box-shadow: inset 0 0 0 1px rgba(146,255,180,.18);
  font-size: .50rem;
  font-weight: 760;
  line-height: 18px;
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase3-card[data-release-label*="ep"] .phase3-active-song {
  color: rgba(131,207,255,.94);
  background: linear-gradient(90deg, rgba(131,207,255,.11), rgba(131,207,255,.025));
  box-shadow: inset 0 0 0 1px rgba(131,207,255,.20);
}
.phase3-active-song:empty {
  display: none;
}
@media (max-width: 760px) {
  .phase3-title-line {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 4px;
  }
  .phase3-active-song {
    grid-column: 1 / -1;
    max-width: 100%;
    height: 15px;
    padding: 0 6px;
    font-size: .39rem;
    line-height: 15px;
    letter-spacing: .045em;
  }
}


/* Phase 3 album label refinement: active song title is shown beside the release title, not inside the numeric track browser. */
.phase3-active-song {
  text-transform: none !important;
  letter-spacing: .045em !important;
  font-weight: 780 !important;
}
.phase3-card[data-release-label*="ep"] .phase3-active-song {
  color: rgba(131,207,255,.96) !important;
}
.phase3-card:not([data-release-label*="ep"]) .phase3-active-song {
  color: rgba(146,255,180,.94) !important;
}

/* Phase 3 gapless + radio refinement. */
.phase3-release-badge.is-gapless {
  color: rgba(255,255,255,.94);
  border-color: rgba(146,255,180,.34);
  background: rgba(146,255,180,.055);
  box-shadow: inset 0 0 0 1px rgba(146,255,180,.08), 0 0 14px rgba(146,255,180,.055);
}
.phase3-card.is-gapless-release .phase3-player {
  box-shadow: inset 0 0 0 1px rgba(146,255,180,.055);
  border-radius: 999px;
  padding: 2px 4px 2px 2px;
}
.phase3-card.is-gapless-release .phase3-play-count::after {
  content: " · radio";
  color: rgba(146,255,180,.62);
}
@media (max-width:760px) {
  .phase3-card.is-gapless-release .phase3-player {
    border-radius: 14px;
    padding: 2px 3px;
  }
}


/* Mobile dynamic album/single height refinement + smoother carousel fitting. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-scroll {
    transition: height .34s cubic-bezier(.2,.8,.2,1);
    overflow-y: hidden !important;
  }
  .phase3-track {
    align-items: flex-start !important;
  }
  .phase3-card.is-single-card {
    min-height: 76px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .phase3-card.is-single-card .phase3-art {
    width: 48px !important;
    height: 48px !important;
  }
  .phase3-card.is-album-card {
    min-height: 112px !important;
  }
  .phase3-card.is-album-card .phase3-art {
    width: 54px !important;
    height: 54px !important;
  }
  body.phase3-current-single .phase3-panel.is-open {
    margin-top: clamp(7px, 1.55vh, 12px) !important;
  }
  body.phase3-current-single .phase3-sections {
    margin-top: clamp(8px, 1.6vh, 14px) !important;
    margin-bottom: clamp(7px, 1.4vh, 12px) !important;
  }
  body.phase3-current-album .phase3-panel.is-open {
    margin-top: clamp(5px, 1.15vh, 10px) !important;
  }
  body.phase3-current-album .phase3-sections {
    margin-top: clamp(5px, 1.1vh, 11px) !important;
    margin-bottom: clamp(5px, 1.1vh, 10px) !important;
  }
  body.phase3-current-album .phase3-tabs {
    transform: scale(.94);
    transform-origin: center center;
  }
  body.phase3-current-album .phase3-tab,
  body.phase3-current-album .phase3-slash {
    font-size: clamp(.46rem, 1.86vw, .58rem) !important;
  }
  body.phase3-current-album .phase3-player {
    gap: 4px !important;
  }
  body.phase3-current-single .phase3-player {
    margin-top: 0 !important;
  }
}


/* Phase 4 Latest cards: news/social cards do not use the local audio player. */
.phase3-card[data-section="latest"] .phase3-player,
.phase3-card[data-section="latest"] .phase3-track-browser {
  display: none !important;
}
.phase3-card[data-section="latest"] .phase3-title-line {
  grid-template-columns: minmax(0, 1fr);
}
.phase3-card[data-section="latest"] .phase3-title {
  letter-spacing: .105em;
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.phase3-card[data-section="latest"] .phase3-art {
  position: relative;
}
.phase3-latest-media-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.phase3-latest-media-link img {
  transition: transform .28s ease, filter .28s ease;
}
.phase3-card[data-section="latest"]:hover .phase3-latest-media-link img {
  transform: scale(1.035);
  filter: brightness(1.08);
}
.phase3-latest-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 8px;
  color: rgba(255,255,255,.36);
  font-size: .46rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.phase3-latest-chip {
  position: absolute;
  left: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  min-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.56);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .43rem;
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phase3-latest-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 20px rgba(0,0,0,.28);
  display: grid;
  place-items: center;
}
.phase3-latest-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(255,255,255,.9);
  margin-left: 2px;
}
.phase3-card[data-section="latest"] .phase3-links {
  min-width: 78px;
}
.phase3-card[data-section="latest"] .phase3-link[data-accent="project"] {
  color: #83cfff;
}

/* Phase 4 Latest cards: taller news layout with clearer text and one platform link only. */
.phase3-card[data-section="latest"] {
  min-height: 148px;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  padding: 14px 16px;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 116px;
  height: 116px;
  align-self: center;
}
.phase3-card[data-section="latest"] .phase3-content {
  align-content: center;
  gap: 9px;
}
.phase3-card[data-section="latest"] .phase3-heading {
  gap: 8px;
}
.phase3-card[data-section="latest"] .phase3-title {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.36em;
  font-size: clamp(.92rem, 1.22vw, 1.05rem);
  line-height: 1.18;
  letter-spacing: .075em;
  font-weight: 850;
  text-shadow: 0 0 14px rgba(255,255,255,.16);
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  min-height: 4.96em;
  font-size: .64rem;
  line-height: 1.24;
  letter-spacing: .055em;
  color: rgba(255,255,255,.64);
}
.phase3-card[data-section="latest"] .phase3-links {
  min-width: 92px;
  justify-self: end;
  align-self: center;
  justify-items: end;
}
.phase3-card[data-section="latest"] .phase3-link:not([data-role="project"]) {
  display: none !important;
}
.phase3-link[data-accent="instagram"] {
  color: #ffb3df;
  text-shadow: 0 0 10px rgba(255,120,210,.16);
}
.phase3-link[data-accent="patreon"] {
  color: #ffb0a2;
  text-shadow: 0 0 10px rgba(255,112,92,.16);
}
.phase3-card[data-section="latest"] .phase3-link[data-accent="youtube"] {
  color: #ffb3b3;
}
.phase3-card[data-section="latest"] .phase3-link[data-accent="soundcloud"] {
  color: #ffc08a;
}
.phase3-card[data-section="latest"] .phase3-link[data-accent="project"] {
  color: #83cfff;
}

@media(max-width:760px) {
  .phase3-card[data-section="latest"] {
    min-height: 152px;
    grid-template-columns: 66px minmax(0, 1fr);
    grid-template-areas: "art content" "links links";
    gap: 9px 11px;
    padding: 10px 11px;
    align-items: center;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 66px;
    height: 66px;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    gap: 6px;
  }
  .phase3-card[data-section="latest"] .phase3-heading {
    gap: 6px;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    min-height: 2.32em;
    font-size: clamp(.70rem, 2.7vw, .82rem);
    line-height: 1.16;
    letter-spacing: .062em;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    min-height: 4.84em;
    font-size: .52rem;
    line-height: 1.21;
    letter-spacing: .04em;
  }
  .phase3-card[data-section="latest"] .phase3-links {
    grid-area: links;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    padding-top: 1px;
  }
}


/* Phase 4 polish: smaller section navigation, taller Latest cards, flexible long titles, platform badges. */
.phase3-tab,
.phase3-slash {
  font-size: clamp(.49rem, .70vw, .57rem) !important;
  letter-spacing: .12em !important;
}
.phase3-tabs {
  gap: clamp(10px, 1.9vw, 25px) !important;
}
body.phase3-current-album .phase3-tab,
body.phase3-current-album .phase3-slash {
  font-size: clamp(.43rem, .62vw, .51rem) !important;
  letter-spacing: .105em !important;
}
.phase3-card[data-section="latest"] {
  min-height: 206px !important;
  grid-template-columns: 126px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 18px 16px 15px !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 126px !important;
  height: 126px !important;
  align-self: start !important;
  margin-top: 21px !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  align-content: start !important;
  gap: 10px !important;
  padding-top: 20px !important;
}
.phase3-card[data-section="latest"] .phase3-heading {
  gap: 10px !important;
}
.phase3-card[data-section="latest"] .phase3-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-height: 4.58em !important;
  max-height: none !important;
  font-size: clamp(.84rem, 1.04vw, .97rem) !important;
  line-height: 1.145 !important;
  letter-spacing: .055em !important;
  font-weight: 900 !important;
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  -webkit-line-clamp: 4 !important;
  min-height: 4.88em !important;
  font-size: .62rem !important;
  line-height: 1.22 !important;
}
.phase3-card[data-section="latest"] .phase3-links {
  padding-top: 22px !important;
  align-self: start !important;
}
.phase3-latest-network-badge {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 4 !important;
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  max-width: calc(100% - 16px);
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(131,207,255,.72);
  box-shadow: 0 0 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
  font-size: .46rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .105em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phase3-latest-network-badge[data-accent="instagram"] {
  background: linear-gradient(135deg, rgba(131,58,180,.92), rgba(253,29,29,.88), rgba(252,176,69,.88));
  box-shadow: 0 0 18px rgba(253,29,140,.20), inset 0 1px 0 rgba(255,255,255,.20);
}
.phase3-latest-network-badge[data-accent="patreon"] {
  background: rgba(255,66,77,.88);
  box-shadow: 0 0 18px rgba(255,66,77,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.phase3-latest-network-badge[data-accent="youtube"] {
  background: rgba(255,0,0,.88);
  box-shadow: 0 0 18px rgba(255,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.phase3-latest-network-badge[data-accent="soundcloud"] {
  background: rgba(255,85,0,.9);
  box-shadow: 0 0 18px rgba(255,85,0,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
@media(max-width:760px) {
  .phase3-tab,
  .phase3-slash,
  body.phase3-current-album .phase3-tab,
  body.phase3-current-album .phase3-slash {
    font-size: clamp(.35rem, 1.43vw, .45rem) !important;
    letter-spacing: .052em !important;
  }
  .phase3-tabs {
    gap: 7px !important;
  }
  .phase3-card[data-section="latest"] {
    min-height: 228px !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    gap: 10px 12px !important;
    padding: 13px 11px 10px !important;
    align-items: start !important;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 74px !important;
    height: 74px !important;
    margin-top: 22px !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding-top: 20px !important;
    gap: 7px !important;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    min-height: 5.68em !important;
    font-size: clamp(.61rem, 2.22vw, .72rem) !important;
    line-height: 1.135 !important;
    letter-spacing: .04em !important;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    min-height: 4.72em !important;
    font-size: .49rem !important;
    line-height: 1.18 !important;
  }
  .phase3-card[data-section="latest"] .phase3-links {
    padding-top: 2px !important;
    justify-content: flex-end !important;
  }
  .phase3-latest-network-badge {
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
    min-height: 17px;
    padding: 0 6px;
    font-size: .38rem;
    letter-spacing: .075em;
  }
}

/* Phase 4 completion patch: Latest cards stay visibly taller, long social titles get real vertical room, and platform badges stay pinned on top-left. */
.phase3-card[data-section="latest"] {
  min-height: 238px !important;
  grid-template-columns: 138px minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: start !important;
  padding: 20px 18px 17px !important;
  overflow: hidden !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 138px !important;
  height: 138px !important;
  align-self: start !important;
  margin-top: 24px !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  align-content: start !important;
  gap: 11px !important;
  padding-top: 23px !important;
}
.phase3-card[data-section="latest"] .phase3-heading {
  gap: 10px !important;
}
.phase3-card[data-section="latest"] .phase3-title {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  min-height: 5.72em !important;
  max-height: none !important;
  font-size: clamp(.82rem, .98vw, .95rem) !important;
  line-height: 1.145 !important;
  letter-spacing: .05em !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px rgba(255,255,255,.16) !important;
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  min-height: 4.88em !important;
  font-size: .62rem !important;
  line-height: 1.22 !important;
}
.phase3-card[data-section="latest"] .phase3-links {
  padding-top: 25px !important;
  align-self: start !important;
  justify-self: end !important;
}
.phase3-latest-network-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 6 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-height: 21px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  font-size: .47rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 0 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.phase3-latest-network-badge[data-accent="instagram"] {
  background: linear-gradient(135deg, rgba(131,58,180,.96), rgba(253,29,29,.92), rgba(252,176,69,.92)) !important;
}
.phase3-latest-network-badge[data-accent="patreon"] {
  background: rgba(255,66,77,.94) !important;
}
.phase3-latest-network-badge[data-accent="youtube"] {
  background: rgba(255,0,0,.94) !important;
}
.phase3-latest-network-badge[data-accent="soundcloud"] {
  background: rgba(255,85,0,.94) !important;
}
@media(max-width:760px) {
  .phase3-card[data-section="latest"] {
    min-height: 252px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    gap: 11px 12px !important;
    padding: 14px 11px 11px !important;
    align-items: start !important;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 82px !important;
    height: 82px !important;
    margin-top: 24px !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding-top: 23px !important;
    gap: 7px !important;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    min-height: 6.8em !important;
    font-size: clamp(.57rem, 2.1vw, .70rem) !important;
    line-height: 1.135 !important;
    letter-spacing: .034em !important;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    min-height: 4.72em !important;
    font-size: .49rem !important;
    line-height: 1.18 !important;
  }
  .phase3-card[data-section="latest"] .phase3-links {
    padding-top: 1px !important;
    justify-content: flex-end !important;
  }
  .phase3-latest-network-badge {
    top: 7px !important;
    left: 7px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    font-size: .38rem !important;
    letter-spacing: .075em !important;
  }
}


/* Phase 4 Latest professional card layout patch: wider readable title column, cleaner alignment, stronger editorial spacing. */
.phase3-card[data-section="latest"] {
  width: min(650px, calc(100vw - 96px)) !important;
  min-height: 214px !important;
  grid-template-columns: 132px minmax(0, 1fr) minmax(76px, auto) !important;
  grid-template-areas: "art content links" !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 24px 18px 20px !important;
  border-radius: 18px !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  grid-area: art !important;
  width: 132px !important;
  height: 132px !important;
  margin-top: 18px !important;
  align-self: center !important;
  border-radius: 12px !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  grid-area: content !important;
  min-width: 0 !important;
  width: 100% !important;
  align-self: center !important;
  align-content: center !important;
  padding-top: 20px !important;
  gap: 10px !important;
}
.phase3-card[data-section="latest"] .phase3-heading {
  width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
}
.phase3-card[data-section="latest"] .phase3-title-line {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.phase3-card[data-section="latest"] .phase3-active-song,
.phase3-card[data-section="latest"] .phase3-release-badge {
  display: none !important;
}
.phase3-card[data-section="latest"] .phase3-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  font-size: clamp(.86rem, 1.03vw, 1rem) !important;
  line-height: 1.13 !important;
  letter-spacing: .045em !important;
  font-weight: 900 !important;
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  width: 100% !important;
  max-width: 96% !important;
  min-height: 0 !important;
  font-size: .62rem !important;
  line-height: 1.25 !important;
  letter-spacing: .052em !important;
  -webkit-line-clamp: 4 !important;
}
.phase3-card[data-section="latest"] .phase3-links {
  grid-area: links !important;
  align-self: start !important;
  justify-self: end !important;
  justify-items: end !important;
  min-width: 76px !important;
  padding-top: 16px !important;
}
.phase3-card[data-section="latest"] .phase3-link[data-role="project"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 24px !important;
  padding: 0 0 0 8px !important;
  font-size: .60rem !important;
  line-height: 1 !important;
  letter-spacing: .065em !important;
  font-weight: 900 !important;
  text-align: right !important;
}
.phase3-latest-network-badge {
  top: 10px !important;
  left: 10px !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  font-size: .44rem !important;
  letter-spacing: .095em !important;
}
.phase3-latest-chip {
  left: 6px !important;
  bottom: 6px !important;
  min-height: 17px !important;
  line-height: 16px !important;
  font-size: .40rem !important;
  letter-spacing: .08em !important;
}
.phase3-latest-play {
  width: 31px !important;
  height: 31px !important;
  background: rgba(0,0,0,.40) !important;
}

@media(max-width:760px) {
  .phase3-card[data-section="latest"] {
    width: min(314px, calc(100vw - 70px)) !important;
    min-height: 238px !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    padding: 15px 12px 11px !important;
    align-items: start !important;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 86px !important;
    height: 86px !important;
    margin-top: 23px !important;
    align-self: start !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding-top: 22px !important;
    align-self: start !important;
    gap: 7px !important;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    font-size: clamp(.60rem, 2.42vw, .74rem) !important;
    line-height: 1.13 !important;
    letter-spacing: .032em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    max-width: 100% !important;
    font-size: .49rem !important;
    line-height: 1.2 !important;
    letter-spacing: .036em !important;
  }
  .phase3-card[data-section="latest"] .phase3-links {
    padding-top: 0 !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
  }
  .phase3-card[data-section="latest"] .phase3-link[data-role="project"] {
    min-height: 21px !important;
    font-size: .49rem !important;
    letter-spacing: .045em !important;
  }
}

/* Phase 4 Latest inline player patch: click-to-load official platform players inside the artwork frame. */
.phase3-card[data-section="latest"] .phase3-latest-media-link,
.phase3-card[data-section="latest"] .phase3-latest-media-trigger {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}
.phase3-card[data-section="latest"] .phase3-latest-media-trigger {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: inherit !important;
}
.phase3-card[data-section="latest"] .phase3-latest-media-trigger:focus-visible {
  outline: 1px solid rgba(255,255,255,.46) !important;
  outline-offset: 3px !important;
}
.phase3-card[data-section="latest"] .phase3-latest-media-link img,
.phase3-card[data-section="latest"] .phase3-latest-media-trigger img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .28s ease, filter .28s ease !important;
}
.phase3-card[data-section="latest"]:hover .phase3-latest-media-link img,
.phase3-card[data-section="latest"]:hover .phase3-latest-media-trigger img {
  transform: scale(1.035) !important;
  filter: brightness(1.08) !important;
}
.phase3-card[data-section="latest"].is-latest-embed-open .phase3-latest-media-link,
.phase3-card[data-section="latest"].is-latest-embed-open .phase3-latest-media-trigger {
  pointer-events: none !important;
}
.phase3-latest-embed-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: rgba(0,0,0,.94) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 20px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.42) !important;
}
.phase3-latest-embed-player {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}
.phase3-latest-embed-player.is-soundcloud {
  background: #070707 !important;
}
.phase3-latest-embed-player.is-instagram {
  background: #050505 !important;
}
.phase3-latest-audio-shell {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
  padding: 16px 10px 10px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .48rem !important;
  line-height: 1.18 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.phase3-latest-audio-shell audio {
  width: 100% !important;
  max-width: 100% !important;
  height: 32px !important;
}
.phase3-latest-embed-close {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 12 !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(0,0,0,.62) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.phase3-latest-embed-close:hover,
.phase3-latest-embed-close:focus-visible {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.phase3-card[data-section="latest"].is-latest-embed-open .phase3-latest-play,
.phase3-card[data-section="latest"].is-latest-embed-open .phase3-latest-chip {
  opacity: 0 !important;
}
.phase3-card[data-section="latest"].is-latest-embed-open .phase3-art {
  box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 18px 36px rgba(0,0,0,.42) !important;
}
@media(max-width:760px) {
  .phase3-latest-embed-close {
    top: 4px !important;
    right: 4px !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 13px !important;
  }
  .phase3-latest-audio-shell {
    padding: 10px 7px 7px !important;
    font-size: .40rem !important;
    gap: 7px !important;
  }
  .phase3-latest-audio-shell audio {
    height: 28px !important;
  }
}

/* Phase 4 album/title room + Latest 16:9 artwork refinement. */
.phase3-card.is-album-card:not([data-section="latest"]) {
  width: min(620px, calc(100vw - 128px)) !important;
  min-height: 138px !important;
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
  gap: 12px 16px !important;
  align-items: center !important;
  padding: 14px 16px 13px !important;
  border-radius: 18px !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-art {
  width: 78px !important;
  height: 78px !important;
  border-radius: 12px !important;
  align-self: center !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-content {
  gap: 9px !important;
  align-content: center !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-heading {
  gap: 7px !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-title-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "albumTitle releaseBadge releaseGapless"
    "activeSong activeSong activeSong" !important;
  gap: 7px 8px !important;
  align-items: start !important;
  min-width: 0 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-title {
  grid-area: albumTitle !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
  font-size: clamp(.86rem, 1.08vw, 1.02rem) !important;
  line-height: 1.15 !important;
  letter-spacing: .082em !important;
  font-weight: 900 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
  grid-area: activeSong !important;
  display: block !important;
  height: auto !important;
  min-height: 22px !important;
  max-width: 100% !important;
  padding: 4px 9px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  font-size: .56rem !important;
  letter-spacing: .048em !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song:empty {
  display: none !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-release-badge {
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  height: 20px !important;
  min-width: 42px !important;
  padding: 0 9px !important;
  font-size: .46rem !important;
  letter-spacing: .12em !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-release-badge:not(.is-gapless) {
  grid-column: 2 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-release-badge.is-gapless {
  grid-column: 3 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-browser {
  margin-top: 0 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-rail {
  justify-content: flex-start !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-player {
  margin-top: 2px !important;
}

.phase3-card[data-section="latest"] .phase3-art {
  width: 132px !important;
  height: 74px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  align-self: center !important;
  margin-top: 20px !important;
}
.phase3-card[data-section="latest"] .phase3-latest-media-link,
.phase3-card[data-section="latest"] .phase3-latest-media-trigger,
.phase3-card[data-section="latest"] .phase3-latest-embed-frame {
  aspect-ratio: 16 / 9 !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card.is-album-card:not([data-section="latest"]) {
    width: min(306px, calc(100vw - 74px)) !important;
    min-height: 148px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "art content"
      "links links"
      "player player" !important;
    gap: 6px 9px !important;
    padding: 8px 10px 8px !important;
    align-items: start !important;
    border-radius: 15px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-art {
    width: 54px !important;
    height: 54px !important;
    border-radius: 9px !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-content {
    gap: 5px !important;
    align-content: start !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-heading {
    gap: 5px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-title-line {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "albumTitle releaseBadge releaseGapless"
      "activeSong activeSong activeSong" !important;
    gap: 4px 5px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: clamp(.62rem, 2.42vw, .74rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .052em !important;
    overflow-wrap: anywhere !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 18px !important;
    max-height: 34px !important;
    padding: 3px 7px !important;
    font-size: .43rem !important;
    line-height: 1.18 !important;
    letter-spacing: .035em !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-release-badge {
    min-width: 27px !important;
    height: 15px !important;
    padding: 0 5px !important;
    font-size: .34rem !important;
    letter-spacing: .07em !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-subtitle {
    font-size: .47rem !important;
    line-height: 1.12 !important;
    letter-spacing: .04em !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-browser {
    grid-template-columns: 19px minmax(0, 1fr) 19px !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-rail {
    justify-content: flex-start !important;
    gap: 3px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 17px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice span {
    font-size: .36rem !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-nav {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-links {
    gap: 7px !important;
    min-height: 16px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-link {
    font-size: .46rem !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-player {
    gap: 4px !important;
    margin-top: 0 !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-waveform {
    height: 19px !important;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 86px !important;
    height: 48px !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 9px !important;
    margin-top: 24px !important;
  }
}

/* Keep Latest cards the same overall size, but give video/social thumbnails a proper 16:9 frame. */
.phase3-card[data-section="latest"] {
  grid-template-columns: 160px minmax(0, 1fr) minmax(76px, auto) !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 160px !important;
  height: 90px !important;
  aspect-ratio: 16 / 9 !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="latest"] {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
  .phase3-card[data-section="latest"] .phase3-art {
    width: 96px !important;
    height: 54px !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* Phase 4 Other Projects + Collaborations navigation/card polish. */
.phase3-tabs {
  gap: clamp(12px, 2.25vw, 30px) !important;
  transform: none !important;
}
.phase3-tab,
.phase3-slash,
body.phase3-current-album .phase3-tab,
body.phase3-current-album .phase3-slash {
  font-size: clamp(.59rem, .84vw, .69rem) !important;
  letter-spacing: .118em !important;
  line-height: 1.1 !important;
}
body.phase3-current-album .phase3-tabs,
body.phase3-current-single .phase3-tabs {
  transform: none !important;
}
.phase3-tab.is-active[data-section="latest"] { color: #83cfff !important; text-shadow: 0 0 15px rgba(131,207,255,.46) !important; }
.phase3-tab.is-active[data-section="discography"] { color: #92ffb4 !important; text-shadow: 0 0 15px rgba(146,255,180,.40) !important; }
.phase3-tab.is-active[data-section="collaborations"] { color: #ffc08a !important; text-shadow: 0 0 15px rgba(255,192,138,.36) !important; }
.phase3-tab.is-active[data-section="side_projects"] { color: #c4a5ff !important; text-shadow: 0 0 15px rgba(196,165,255,.40) !important; }
.phase3-tab.is-active::after { background: currentColor !important; }

.phase3-card[data-section="side_projects"] {
  width: min(650px, calc(100vw - 96px)) !important;
  min-height: 210px !important;
  grid-template-columns: 180px minmax(0, 1fr) minmax(86px, auto) !important;
  grid-template-areas: "art content links" !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 20px 18px !important;
  border-radius: 18px !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  grid-area: art !important;
  width: 180px !important;
  height: 101px !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center center !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  grid-area: content !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: center !important;
  align-content: center !important;
  gap: 9px !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-heading { gap: 9px !important; text-align: left !important; }
.phase3-card[data-section="side_projects"] .phase3-title-line {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(.88rem, 1.05vw, 1.02rem) !important;
  line-height: 1.13 !important;
  letter-spacing: .055em !important;
  font-weight: 900 !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: .62rem !important;
  line-height: 1.24 !important;
  letter-spacing: .052em !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-active-song,
.phase3-card[data-section="side_projects"] .phase3-release-badge,
.phase3-card[data-section="side_projects"] .phase3-track-browser,
.phase3-card[data-section="side_projects"] .phase3-player {
  display: none !important;
}
.phase3-card[data-section="side_projects"] .phase3-links {
  grid-area: links !important;
  align-self: start !important;
  justify-self: end !important;
  justify-items: end !important;
  min-width: 86px !important;
  padding-top: 8px !important;
}
.phase3-card[data-section="side_projects"] .phase3-link[data-role="project"] {
  color: #c4a5ff !important;
  text-shadow: 0 0 12px rgba(196,165,255,.20) !important;
  font-size: .60rem !important;
  letter-spacing: .065em !important;
  font-weight: 900 !important;
}
.phase3-card[data-section="side_projects"] .phase3-link:not([data-role="project"]) { display: none !important; }

.phase3-card[data-section="collaborations"] .phase3-links {
  gap: 6px !important;
  min-width: 112px !important;
  align-self: center !important;
}
.phase3-card[data-section="collaborations"] .phase3-extra-link {
  color: #ffc08a !important;
  text-shadow: 0 0 10px rgba(255,192,138,.22) !important;
}
.phase3-card[data-section="collaborations"] .phase3-link {
  font-size: .61rem !important;
  letter-spacing: .062em !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-tabs { gap: 8px !important; transform: none !important; }
  .phase3-tab,
  .phase3-slash,
  body.phase3-current-album .phase3-tab,
  body.phase3-current-album .phase3-slash {
    font-size: clamp(.42rem, 1.72vw, .54rem) !important;
    letter-spacing: .064em !important;
  }
  .phase3-card[data-section="side_projects"] {
    width: min(314px, calc(100vw - 70px)) !important;
    min-height: 186px !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding: 14px 12px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 112px !important;
    height: 63px !important;
    aspect-ratio: 16 / 9 !important;
    align-self: start !important;
    margin-top: 0 !important;
    border-radius: 9px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    align-self: start !important;
    align-content: start !important;
    gap: 6px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(.62rem, 2.42vw, .75rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .04em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .48rem !important;
    line-height: 1.18 !important;
    letter-spacing: .035em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-links {
    min-width: 0 !important;
    padding-top: 0 !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-link[data-role="project"] {
    font-size: .49rem !important;
    letter-spacing: .045em !important;
  }
  .phase3-card[data-section="collaborations"] .phase3-links {
    min-width: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .phase3-card[data-section="collaborations"] .phase3-link {
    font-size: .47rem !important;
    letter-spacing: .04em !important;
  }
}

/* Phase 4.1 Other Projects + instant upload polish: no external snapshot dependency, more content space. */
.phase3-card[data-section="side_projects"] {
  width: min(760px, calc(100vw - 92px)) !important;
  min-height: 220px !important;
  grid-template-columns: 164px minmax(0, 1fr) !important;
  grid-template-areas: "art content" !important;
  column-gap: 18px !important;
  align-items: center !important;
  padding: 22px 24px !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  width: 164px !important;
  height: 92px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 13px !important;
  align-self: center !important;
  background: radial-gradient(circle at 26% 22%, rgba(196,165,255,.14), transparent 34%), rgba(255,255,255,.035) !important;
}
.phase3-card[data-section="side_projects"] .phase3-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  grid-area: content !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding-right: 96px !important;
  align-content: center !important;
  gap: 11px !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-heading {
  width: 100% !important;
  max-width: none !important;
  gap: 10px !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-title-line {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  max-width: none !important;
  font-size: clamp(.98rem, 1.18vw, 1.12rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .062em !important;
  font-weight: 900 !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  max-width: none !important;
  font-size: .66rem !important;
  line-height: 1.28 !important;
  letter-spacing: .052em !important;
  text-align: left !important;
}
.phase3-card[data-section="side_projects"] .phase3-links {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  grid-area: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
  justify-items: end !important;
  z-index: 4 !important;
}
.phase3-card[data-section="side_projects"] .phase3-project-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.64);
  letter-spacing: .16em;
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(196,165,255,.14), transparent 38%),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,.10), transparent 30%),
    rgba(255,255,255,.035);
}
.phase3-card[data-section="side_projects"] .phase3-project-placeholder span {
  transform: translateX(.08em);
  opacity: .9;
}
.phase3-card[data-section="side_projects"] .phase3-latest-placeholder {
  display: none !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="side_projects"] {
    width: min(322px, calc(100vw - 68px)) !important;
    min-height: 178px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    column-gap: 11px !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding: 13px 12px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 108px !important;
    height: 61px !important;
    align-self: start !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding-right: 0 !important;
    gap: 6px !important;
    align-content: start !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(.66rem, 2.44vw, .78rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .045em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .49rem !important;
    line-height: 1.18 !important;
    letter-spacing: .035em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-links {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    grid-area: links !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    display: flex !important;
    padding: 0 !important;
  }
}

/* Phase 4.1 refinement: narrower Other Projects cards + Latest badge-as-link action. */
.phase3-card[data-section="side_projects"] {
  width: min(665px, calc(100vw - 112px)) !important;
  min-height: 212px !important;
  grid-template-columns: 208px minmax(0, 1fr) !important;
  grid-template-areas: "art content" !important;
  column-gap: 20px !important;
  align-items: center !important;
  padding: 22px 22px !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  grid-area: art !important;
  width: 208px !important;
  height: 117px !important;
  aspect-ratio: 16 / 9 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  grid-area: content !important;
  align-self: center !important;
  align-content: center !important;
  padding-right: 76px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  font-size: clamp(.96rem, 1.14vw, 1.10rem) !important;
  line-height: 1.12 !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  -webkit-line-clamp: 4 !important;
  font-size: .64rem !important;
  line-height: 1.28 !important;
}
.phase3-card[data-section="side_projects"] .phase3-links {
  top: 20px !important;
  right: 20px !important;
}

.phase3-card[data-section="latest"] {
  grid-template-columns: 160px minmax(0, 1fr) 92px !important;
}
.phase3-card[data-section="latest"] .phase3-links {
  display: none !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  padding-right: 4px !important;
}
.phase3-latest-network-badge {
  left: auto !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 8 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
a.phase3-latest-network-badge:hover,
a.phase3-latest-network-badge:focus-visible {
  background: #fff !important;
  color: #070707 !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 22px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.7) !important;
  outline: none !important;
  text-shadow: none !important;
}
a.phase3-latest-network-badge:active {
  transform: translateY(-50%) scale(.97) !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="side_projects"] {
    width: min(306px, calc(100vw - 72px)) !important;
    min-height: 184px !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding: 12px 11px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 116px !important;
    height: 65px !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding-right: 0 !important;
    align-self: center !important;
    align-content: center !important;
    gap: 6px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(.62rem, 2.35vw, .74rem) !important;
    line-height: 1.1 !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .47rem !important;
    line-height: 1.16 !important;
  }
  .phase3-card[data-section="latest"] {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    padding-right: 11px !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding-right: 0 !important;
  }
  .phase3-latest-network-badge {
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    font-size: .37rem !important;
    letter-spacing: .07em !important;
  }
  a.phase3-latest-network-badge:active {
    transform: scale(.97) !important;
  }
}

/* Phase 4.2: larger Latest artwork, compact short-post cards, and Other Projects badge/link controls. */
.phase3-card[data-section="latest"] {
  width: min(668px, calc(100vw - 96px)) !important;
  min-height: 218px !important;
  grid-template-columns: 238px minmax(0, 1fr) !important;
  grid-template-areas: "art content" !important;
  column-gap: 22px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 22px 22px !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  grid-area: art !important;
  width: 238px !important;
  height: 134px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
  border-radius: 13px !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  grid-area: content !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 58px 0 0 !important;
  align-self: center !important;
  align-content: center !important;
  gap: 10px !important;
}
.phase3-card[data-section="latest"] .phase3-title {
  min-height: 0 !important;
  font-size: clamp(.88rem, 1.05vw, 1.02rem) !important;
  line-height: 1.13 !important;
  letter-spacing: .044em !important;
}
.phase3-card[data-section="latest"] .phase3-subtitle {
  min-height: 0 !important;
  max-width: 100% !important;
  font-size: .62rem !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 4 !important;
}
.phase3-card[data-section="latest"].is-latest-compact {
  min-height: 164px !important;
  grid-template-columns: 214px minmax(0, 1fr) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-art {
  width: 214px !important;
  height: 120px !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: clamp(.82rem, .98vw, .96rem) !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-subtitle {
  -webkit-line-clamp: 2 !important;
}
.phase3-latest-network-badge {
  left: auto !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.phase3-card[data-section="side_projects"] {
  width: min(572px, calc(100vw - 112px)) !important;
  min-height: 198px !important;
  grid-template-columns: 206px minmax(0, 1fr) !important;
  grid-template-areas: "art content" !important;
  column-gap: 20px !important;
  align-items: center !important;
  padding: 22px 22px !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  grid-area: art !important;
  width: 206px !important;
  height: 116px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  grid-area: content !important;
  padding-right: 60px !important;
  align-self: center !important;
  align-content: center !important;
  gap: 9px !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  -webkit-line-clamp: 3 !important;
  font-size: clamp(.92rem, 1.08vw, 1.06rem) !important;
  line-height: 1.13 !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  -webkit-line-clamp: 4 !important;
  font-size: .61rem !important;
  line-height: 1.27 !important;
}
.phase3-card[data-section="side_projects"] .phase3-links {
  display: none !important;
}
.phase3-project-network-badge {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 8 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-height: 21px !important;
  max-width: 82px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(196,165,255,.94) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  font-size: .45rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .095em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  box-shadow: 0 0 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
a.phase3-project-network-badge:hover,
a.phase3-project-network-badge:focus-visible {
  background: #fff !important;
  color: #070707 !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 22px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.7) !important;
  outline: none !important;
}
a.phase3-project-network-badge:active {
  transform: translateY(-50%) scale(.97) !important;
}
.phase3-project-inline-link {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 1px !important;
  color: rgba(196,165,255,.96) !important;
  text-decoration: none !important;
  font-size: .60rem !important;
  line-height: 1.16 !important;
  letter-spacing: .052em !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0 14px rgba(196,165,255,.22) !important;
}
.phase3-project-inline-link:hover,
.phase3-project-inline-link:focus-visible {
  color: #fff !important;
  outline: none !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="latest"] {
    width: min(318px, calc(100vw - 70px)) !important;
    min-height: 188px !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 11px !important;
    padding: 14px 11px !important;
  }
  .phase3-card[data-section="latest"] .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 128px !important;
    height: 72px !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding: 20px 0 0 0 !important;
    gap: 6px !important;
    align-content: start !important;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    font-size: clamp(.61rem, 2.42vw, .74rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .034em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .47rem !important;
    line-height: 1.17 !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact {
    min-height: 138px !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 118px !important;
    height: 66px !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-title {
    -webkit-line-clamp: 2 !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-subtitle {
    -webkit-line-clamp: 2 !important;
  }
  .phase3-latest-network-badge,
  .phase3-project-network-badge {
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    min-height: 18px !important;
    max-width: 76px !important;
    padding: 0 7px !important;
    font-size: .36rem !important;
    letter-spacing: .07em !important;
  }
  a.phase3-latest-network-badge:active,
  a.phase3-project-network-badge:active {
    transform: scale(.97) !important;
  }
  .phase3-card[data-section="side_projects"] {
    width: min(292px, calc(100vw - 72px)) !important;
    min-height: 172px !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 10px !important;
    padding: 12px 11px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 116px !important;
    height: 65px !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding-right: 0 !important;
    padding-top: 18px !important;
    gap: 5px !important;
    align-content: start !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(.60rem, 2.3vw, .72rem) !important;
    line-height: 1.1 !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .46rem !important;
    line-height: 1.15 !important;
  }
  .phase3-project-inline-link {
    font-size: .46rem !important;
    line-height: 1.12 !important;
    letter-spacing: .035em !important;
  }
}

/* Phase 4.3: project link wiring, narrower side-reveal cards, album pill alignment, global radio control. */
.phase3-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 1.5vw, 18px) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.phase3-nav-row .phase3-tabs {
  flex: 0 1 auto !important;
}
.phase3-global-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-6px) scale(.96) !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
.phase3-global-control.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) scale(1) !important;
}
.phase3-global-play {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 24px !important;
  padding: 0 10px 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(146,255,180,.22) !important;
  color: rgba(255,255,255,.84) !important;
  background: rgba(0,0,0,.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: inherit !important;
  font-size: .48rem !important;
  line-height: 1 !important;
  letter-spacing: .105em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 0 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.phase3-global-play:hover,
.phase3-global-play:focus-visible {
  color: #fff !important;
  border-color: rgba(146,255,180,.48) !important;
  background: rgba(146,255,180,.07) !important;
  box-shadow: 0 0 22px rgba(146,255,180,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline: none !important;
}
.phase3-global-play:active { transform: scale(.97) !important; }
.phase3-global-icon {
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid currentColor !important;
  margin-left: 2px !important;
}
.phase3-global-play.is-playing .phase3-global-icon {
  width: 8px !important;
  height: 10px !important;
  border: 0 !important;
  border-left: 3px solid currentColor !important;
  border-right: 3px solid currentColor !important;
  margin-left: 0 !important;
}

.phase3-card[data-section="latest"] {
  width: min(612px, calc(100vw - 132px)) !important;
  min-height: 214px !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  padding: 21px 22px !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 220px !important;
  height: 124px !important;
  aspect-ratio: 16 / 9 !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  padding-right: 54px !important;
}
.phase3-card[data-section="latest"].is-latest-compact {
  width: min(560px, calc(100vw - 146px)) !important;
  min-height: 156px !important;
  grid-template-columns: 194px minmax(0, 1fr) !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-art {
  width: 194px !important;
  height: 109px !important;
}

.phase3-card[data-section="side_projects"] {
  width: min(526px, calc(100vw - 148px)) !important;
  min-height: 190px !important;
  grid-template-columns: 188px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  padding: 20px 20px !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  width: 188px !important;
  height: 106px !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
  justify-self: start !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  padding-right: 54px !important;
  align-self: center !important;
  align-content: center !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  font-size: clamp(.86rem, 1vw, 1.02rem) !important;
  line-height: 1.13 !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  font-size: .59rem !important;
  line-height: 1.25 !important;
}
.phase3-project-art-link,
.phase3-project-title-link {
  color: inherit !important;
  text-decoration: none !important;
}
.phase3-project-art-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.phase3-project-art-link:hover img,
.phase3-project-art-link:focus-visible img {
  transform: scale(1.025) !important;
}
.phase3-project-art-link:focus-visible,
.phase3-project-title-link:focus-visible {
  outline: 1px solid rgba(196,165,255,.54) !important;
  outline-offset: 3px !important;
}
.phase3-project-title-link:hover { color: #fff !important; text-shadow: 0 0 14px rgba(196,165,255,.24) !important; }
.phase3-project-inline-link {
  color: rgba(196,165,255,.96) !important;
  margin-top: 0 !important;
}
.phase3-project-network-badge {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-width: 72px !important;
}

.phase3-track-rail {
  align-items: center !important;
}
.phase3-track-choice,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.phase3-track-choice span,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice span {
  display: block !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
  margin: 0 !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-nav-row {
    gap: 6px !important;
  }
  .phase3-global-play {
    min-height: 20px !important;
    padding: 0 7px 0 6px !important;
    gap: 5px !important;
    font-size: .37rem !important;
    letter-spacing: .07em !important;
  }
  .phase3-global-icon {
    border-top-width: 4px !important;
    border-bottom-width: 4px !important;
    border-left-width: 7px !important;
  }
  .phase3-global-play.is-playing .phase3-global-icon {
    width: 7px !important;
    height: 9px !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
  }
  .phase3-card[data-section="latest"] {
    width: min(292px, calc(100vw - 86px)) !important;
    min-height: 178px !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 13px 10px !important;
  }
  .phase3-card[data-section="latest"] .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 118px !important;
    height: 66px !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact {
    width: min(278px, calc(100vw - 92px)) !important;
    min-height: 136px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 108px !important;
    height: 61px !important;
  }
  .phase3-card[data-section="side_projects"] {
    width: min(276px, calc(100vw - 88px)) !important;
    min-height: 164px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 11px 10px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 108px !important;
    height: 61px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding-right: 0 !important;
    padding-top: 18px !important;
  }
  .phase3-project-network-badge {
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    max-width: 72px !important;
  }
  .phase3-track-choice,
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
  }
}

/* Phase 4.4: centered carousel edges, polished project wrapping, and active-song pill alignment. */
.phase3-scroll {
  scroll-padding-inline: max(0px, var(--p3-edge-space, 0px)) !important;
}
.phase3-spacer {
  display: block !important;
  flex: 0 0 max(0px, var(--p3-edge-space, 0px)) !important;
  width: max(0px, var(--p3-edge-space, 0px)) !important;
  min-width: max(0px, var(--p3-edge-space, 0px)) !important;
  pointer-events: none !important;
}
.phase3-track {
  justify-content: flex-start !important;
}
.phase3-track:has(.phase3-card:only-of-type) {
  justify-content: center !important;
}

.phase3-active-song,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 20px !important;
  padding: 3px 9px 3px !important;
  line-height: 1.05 !important;
  vertical-align: middle !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
  min-height: 23px !important;
  line-height: 1.12 !important;
}
.phase3-track-choice,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.phase3-track-choice span,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1em !important;
  line-height: 1 !important;
  transform: translateY(-0.01em) !important;
}

.phase3-card[data-section="latest"] {
  width: min(588px, calc(100vw - 150px)) !important;
  min-height: 210px !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  padding: 20px 21px !important;
}
.phase3-card[data-section="latest"] .phase3-art {
  width: 210px !important;
  height: 118px !important;
}
.phase3-card[data-section="latest"] .phase3-content {
  padding-right: 50px !important;
}
.phase3-card[data-section="latest"].is-latest-compact {
  width: min(532px, calc(100vw - 160px)) !important;
  min-height: 150px !important;
  grid-template-columns: 184px minmax(0, 1fr) !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-art {
  width: 184px !important;
  height: 104px !important;
}

.phase3-card[data-section="side_projects"] {
  width: min(512px, calc(100vw - 158px)) !important;
  min-height: 190px !important;
  grid-template-columns: 168px minmax(0, 1fr) 74px !important;
  grid-template-areas: "art content badge" !important;
  column-gap: 16px !important;
  padding: 20px 18px !important;
  align-items: center !important;
}
.phase3-card[data-section="side_projects"] .phase3-art {
  grid-area: art !important;
  width: 168px !important;
  height: 95px !important;
  aspect-ratio: 16 / 9 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
}
.phase3-card[data-section="side_projects"] .phase3-content {
  grid-area: content !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  align-self: center !important;
  align-content: center !important;
  gap: 8px !important;
}
.phase3-card[data-section="side_projects"] .phase3-heading {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 6px !important;
  align-content: center !important;
}
.phase3-card[data-section="side_projects"] .phase3-title-line {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
}
.phase3-card[data-section="side_projects"] .phase3-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  font-size: clamp(.82rem, .98vw, .98rem) !important;
  line-height: 1.14 !important;
  letter-spacing: .065em !important;
}
.phase3-card[data-section="side_projects"] .phase3-subtitle {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  max-width: 100% !important;
  font-size: .56rem !important;
  line-height: 1.28 !important;
  letter-spacing: .05em !important;
}
.phase3-card[data-section="side_projects"] .phase3-links,
.phase3-card[data-section="side_projects"] .phase3-player,
.phase3-card[data-section="side_projects"] .phase3-track-browser,
.phase3-card[data-section="side_projects"] .phase3-active-song,
.phase3-card[data-section="side_projects"] .phase3-release-badge {
  display: none !important;
}
.phase3-project-network-badge {
  grid-area: badge !important;
  position: static !important;
  transform: none !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 74px !important;
  width: max-content !important;
  white-space: nowrap !important;
}
a.phase3-project-network-badge:active {
  transform: scale(.97) !important;
}
.phase3-project-inline-link {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  font-size: .56rem !important;
  line-height: 1.18 !important;
  letter-spacing: .045em !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-spacer {
    flex-basis: max(0px, var(--p3-edge-space, 0px)) !important;
    width: max(0px, var(--p3-edge-space, 0px)) !important;
  }
  .phase3-active-song,
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
    min-height: 17px !important;
    padding: 2px 7px !important;
    line-height: 1.08 !important;
    align-items: center !important;
  }
  .phase3-card[data-section="latest"] {
    width: min(284px, calc(100vw - 92px)) !important;
    min-height: 176px !important;
    grid-template-columns: 114px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 13px 9px !important;
  }
  .phase3-card[data-section="latest"] .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 114px !important;
    height: 64px !important;
  }
  .phase3-card[data-section="latest"] .phase3-content {
    padding-right: 0 !important;
    padding-top: 20px !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact {
    width: min(270px, calc(100vw - 98px)) !important;
    min-height: 134px !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 104px !important;
    height: 59px !important;
  }
  .phase3-card[data-section="side_projects"] {
    width: min(268px, calc(100vw - 96px)) !important;
    min-height: 164px !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 9px !important;
    padding: 12px 10px 10px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 104px !important;
    height: 59px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding: 18px 0 0 0 !important;
    gap: 5px !important;
    align-content: start !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 2 !important;
    font-size: clamp(.58rem, 2.25vw, .70rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .045em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 3 !important;
    font-size: .45rem !important;
    line-height: 1.15 !important;
  }
  .phase3-project-inline-link {
    -webkit-line-clamp: 2 !important;
    font-size: .45rem !important;
    line-height: 1.12 !important;
    letter-spacing: .032em !important;
  }
  .phase3-project-network-badge {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    max-width: 70px !important;
  }
  a.phase3-project-network-badge:active { transform: scale(.97) !important; }
}

/* Phase 4.5: footer global radio control, single title cleanup, latest centering stabilization. */
.phase3-nav-row {
  justify-content: center !important;
}
.phase3-global-control-footer {
  width: 100% !important;
  margin: clamp(7px, 1.2vh, 12px) auto 0 !important;
  display: none !important;
  justify-content: center !important;
  transform: translateY(-4px) scale(.96) !important;
}
.phase3-global-control-footer.is-visible {
  display: flex !important;
  transform: translateY(0) scale(1) !important;
}
.phase3-global-control-footer .phase3-global-play {
  min-height: 25px !important;
  padding: 0 12px 0 10px !important;
}
.phase3-card:not(.is-album-card) .phase3-active-song,
.phase3-card.is-single-card .phase3-active-song {
  display: none !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
  display: inline-flex !important;
}
.phase3-card[data-section="latest"] {
  scroll-snap-align: center !important;
}
.phase3-track .phase3-spacer:first-child,
.phase3-track .phase3-spacer:last-child {
  flex-shrink: 0 !important;
}

@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-global-control-footer {
    margin-top: clamp(5px, .9vh, 8px) !important;
  }
  .phase3-global-control-footer .phase3-global-play {
    min-height: 22px !important;
    padding: 0 9px 0 8px !important;
  }
}


/* Phase 4.6: exact latest carousel centering + stronger symmetrical side fade. */
.phase3-scroll {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  --p3-side-fade: clamp(54px, 8.2vw, 92px) !important;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) 0 0 / 100% 100% no-repeat !important;
  mask: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) 0 0 / 100% 100% no-repeat !important;
  mask-mode: alpha !important;
}
.phase3-card[data-section="latest"] {
  scroll-snap-align: center !important;
  scroll-margin-inline: 0 !important;
}
.phase3-card[data-section="latest"]:first-of-type {
  margin-left: 0 !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-scroll {
    --p3-side-fade: 28px !important;
  }
}

/* Phase 4.7: mobile carousel scale-up and alignment polish. Desktop rules above remain untouched. */
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-sections {
    width: min(100%, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    margin-top: clamp(8px, 1.7vh, 16px) !important;
    margin-bottom: clamp(8px, 1.6vh, 14px) !important;
  }
  .phase3-tabs {
    width: 100% !important;
    gap: clamp(7px, 2.05vw, 11px) !important;
    justify-content: center !important;
  }
  .phase3-tab,
  .phase3-slash {
    font-size: clamp(.52rem, 2.18vw, .68rem) !important;
    letter-spacing: .072em !important;
  }
  .phase3-panel.is-open {
    margin-top: clamp(8px, 1.85vh, 14px) !important;
  }
  .phase3-carousel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .phase3-scroll {
    width: min(350px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    padding-top: 1px !important;
    padding-bottom: 8px !important;
  }
  .phase3-track {
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .phase3-card {
    width: min(322px, calc(100vw - 56px)) !important;
    min-height: 118px !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    align-items: center !important;
  }
  .phase3-art {
    width: 66px !important;
    height: 66px !important;
    border-radius: 11px !important;
  }
  .phase3-content {
    gap: 6px !important;
    min-width: 0 !important;
  }
  .phase3-heading {
    gap: 5px !important;
  }
  .phase3-title {
    font-size: clamp(.73rem, 3.05vw, .90rem) !important;
    line-height: 1.14 !important;
    letter-spacing: .075em !important;
  }
  .phase3-subtitle {
    font-size: clamp(.52rem, 2.12vw, .62rem) !important;
    line-height: 1.2 !important;
    letter-spacing: .052em !important;
  }
  .phase3-links {
    gap: 9px !important;
    flex-wrap: wrap !important;
  }
  .phase3-link {
    font-size: .54rem !important;
    letter-spacing: .046em !important;
  }
  .phase3-player {
    grid-template-columns: auto 34px minmax(0, 1fr) 34px !important;
    gap: 6px !important;
    margin-top: 3px !important;
  }
  .phase3-play {
    width: 24px !important;
    height: 24px !important;
  }
  .phase3-waveform {
    height: 26px !important;
    gap: 2px !important;
  }
  .phase3-time {
    font-size: .49rem !important;
  }
  .phase3-play-count,
  .phase3-no-audio {
    font-size: .47rem !important;
  }
  .phase3-arrow {
    width: 28px !important;
    height: 34px !important;
    font-size: 1.18rem !important;
  }
  .phase3-arrow.prev { left: -4px !important; }
  .phase3-arrow.next { right: -4px !important; }

  .phase3-card.is-single-card:not([data-section="latest"]):not([data-section="side_projects"]) {
    min-height: 120px !important;
  }
  .phase3-card.is-single-card:not([data-section="latest"]):not([data-section="side_projects"]) .phase3-art {
    width: 66px !important;
    height: 66px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) {
    min-height: 158px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-art {
    width: 70px !important;
    height: 70px !important;
  }
  .phase3-title-line {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-title-line {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 6px !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 19px !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 3px 8px !important;
    font-size: .45rem !important;
    line-height: 1.05 !important;
    letter-spacing: .035em !important;
  }
  .phase3-track-browser {
    grid-template-columns: 23px minmax(0, 1fr) 23px !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }
  .phase3-track-nav {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }
  .phase3-track-choice {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 21px !important;
  }
  .phase3-track-choice span {
    font-size: .43rem !important;
    transform: translateY(0) !important;
  }

  .phase3-card[data-section="latest"] {
    width: min(326px, calc(100vw - 48px)) !important;
    min-height: 220px !important;
    grid-template-columns: 142px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 12px !important;
    padding: 14px 12px !important;
    align-items: center !important;
  }
  .phase3-card[data-section="latest"] .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 142px !important;
    height: 80px !important;
    aspect-ratio: 16 / 9 !important;
    align-self: center !important;
  }
  .phase3-card[data-section="latest"] .phase3-content,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-content {
    padding: 22px 0 0 0 !important;
    align-self: stretch !important;
    align-content: center !important;
    gap: 6px !important;
  }
  .phase3-card[data-section="latest"] .phase3-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(.65rem, 2.85vw, .84rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .055em !important;
  }
  .phase3-card[data-section="latest"] .phase3-subtitle {
    -webkit-line-clamp: 4 !important;
    font-size: .48rem !important;
    line-height: 1.18 !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact {
    width: min(312px, calc(100vw - 56px)) !important;
    min-height: 174px !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 132px !important;
    height: 74px !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact .phase3-title {
    -webkit-line-clamp: 3 !important;
  }
  .phase3-latest-badge,
  .phase3-latest-badge-link {
    right: 8px !important;
    top: 8px !important;
    max-width: 74px !important;
    font-size: .43rem !important;
    line-height: 18px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
  }

  .phase3-card[data-section="side_projects"] {
    width: min(318px, calc(100vw - 52px)) !important;
    min-height: 206px !important;
    grid-template-columns: 138px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 12px !important;
    padding: 14px 12px !important;
    align-items: center !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 138px !important;
    height: 78px !important;
    aspect-ratio: 16 / 9 !important;
    align-self: center !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-content {
    padding: 20px 0 0 0 !important;
    align-self: stretch !important;
    align-content: center !important;
    gap: 6px !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-title {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(.66rem, 2.75vw, .84rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .052em !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    -webkit-line-clamp: 4 !important;
    font-size: .48rem !important;
    line-height: 1.18 !important;
  }
  .phase3-project-inline-link {
    -webkit-line-clamp: 2 !important;
    font-size: .48rem !important;
    line-height: 1.14 !important;
  }
  .phase3-project-network-badge {
    right: 8px !important;
    top: 8px !important;
    max-width: 76px !important;
    min-height: 18px !important;
    line-height: 18px !important;
    font-size: .43rem !important;
    padding: 0 7px !important;
  }

  body.phase3-current-single .phase3-sections,
  body.phase3-current-album .phase3-sections {
    margin-top: clamp(7px, 1.45vh, 14px) !important;
    margin-bottom: clamp(7px, 1.35vh, 13px) !important;
  }
  body.phase3-current-album .phase3-tabs {
    transform: none !important;
  }
  body.phase3-current-album .phase3-tab,
  body.phase3-current-album .phase3-slash {
    font-size: clamp(.50rem, 2.05vw, .64rem) !important;
  }
}

@media(max-width:380px), (hover: none) and (pointer: coarse) and (max-width:380px) {
  .phase3-card[data-section="latest"] {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    width: min(312px, calc(100vw - 42px)) !important;
  }
  .phase3-card[data-section="latest"] .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact .phase3-art {
    width: 132px !important;
    height: 74px !important;
  }
  .phase3-card[data-section="side_projects"] {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    width: min(306px, calc(100vw - 42px)) !important;
  }
  .phase3-card[data-section="side_projects"] .phase3-art {
    width: 128px !important;
    height: 72px !important;
  }
  .phase3-card {
    width: min(308px, calc(100vw - 48px)) !important;
  }
}

/* Phase 4.8: latest edge fade repair, single-item scrollbar cleanup, site-icon admin support. */
.phase3-scroll.is-single-item {
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.phase3-scroll.is-single-item::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.phase3-carousel.is-single-item .phase3-arrow { display: none !important; }
.phase3-carousel.phase3-carousel-latest {
  overflow: visible !important;
}
.phase3-carousel.phase3-carousel-latest::before,
.phase3-carousel.phase3-carousel-latest::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 9px;
  width: clamp(54px, 8vw, 92px);
  z-index: 4;
  pointer-events: none;
  opacity: .98;
}
.phase3-carousel.phase3-carousel-latest::before {
  left: 54px;
  background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.70) 28%, rgba(0,0,0,0) 100%);
}
.phase3-carousel.phase3-carousel-latest::after {
  right: 54px;
  background: linear-gradient(270deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.70) 28%, rgba(0,0,0,0) 100%);
}
.phase3-carousel.phase3-carousel-latest .phase3-arrow { z-index: 6 !important; }
.phase3-carousel.phase3-carousel-latest .phase3-scroll {
  --p3-side-fade: clamp(58px, 8.5vw, 96px) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel.phase3-carousel-latest::before,
  .phase3-carousel.phase3-carousel-latest::after {
    width: 34px !important;
    bottom: 7px !important;
  }
  .phase3-carousel.phase3-carousel-latest::before { left: 18px !important; }
  .phase3-carousel.phase3-carousel-latest::after { right: 18px !important; }
  .phase3-carousel.phase3-carousel-latest .phase3-scroll { --p3-side-fade: 30px !important; }
}

/* Phase 4.9: Latest fade repaired to match Discography — no overlay rectangles. */
.phase3-carousel.phase3-carousel-latest::before,
.phase3-carousel.phase3-carousel-latest::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.phase3-carousel.phase3-carousel-latest {
  overflow: visible !important;
  background: transparent !important;
}
.phase3-carousel.phase3-carousel-latest .phase3-scroll {
  background: transparent !important;
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  --p3-side-fade: clamp(48px, 7vw, 82px) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
}
.phase3-carousel.phase3-carousel-latest .phase3-track {
  background: transparent !important;
}
.phase3-carousel.phase3-carousel-latest.is-single-item .phase3-scroll,
.phase3-scroll.is-single-item {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel.phase3-carousel-latest .phase3-scroll {
    --p3-side-fade: 26px !important;
  }
}

/* Phase 4.10: visible published dates for every Latest card. */
.phase3-card[data-section="latest"] .phase3-latest-date {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.58) !important;
  font-size: .56rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.phase3-card[data-section="latest"].is-latest-compact .phase3-latest-date {
  font-size: .54rem !important;
  margin-top: 1px !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="latest"] .phase3-latest-date {
    font-size: .54rem !important;
    letter-spacing: .105em !important;
  }
}

/* Phase 4: merged Patreon + YouTube latest badge stack */
.phase3-latest-badge-stack {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 7px !important;
  max-width: 86px !important;
  pointer-events: none !important;
}
.phase3-latest-badge-stack .phase3-latest-network-badge {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  min-width: 62px !important;
  max-width: 86px !important;
  pointer-events: auto !important;
}
.phase3-latest-badge-stack a.phase3-latest-network-badge:hover,
.phase3-latest-badge-stack a.phase3-latest-network-badge:focus-visible {
  transform: none !important;
}
.phase3-latest-badge-stack a.phase3-latest-network-badge:active {
  transform: scale(.97) !important;
}
.phase3-card[data-section="latest"] .phase3-latest-badge-stack + .phase3-art,
.phase3-card[data-section="latest"] .phase3-latest-badge-stack ~ .phase3-art {
  z-index: 1 !important;
}
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-latest-badge-stack {
    top: 12px !important;
    right: 12px !important;
    transform: none !important;
    gap: 5px !important;
    max-width: 76px !important;
  }
  .phase3-latest-badge-stack .phase3-latest-network-badge {
    min-width: 54px !important;
    max-width: 76px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    font-size: .41rem !important;
  }
}

/* Phase 5: carousel card presets + longer discography title room. */
.phase3-card[data-card-preset="discography_single_player"],
.phase3-card.is-preset-discography_single_player:not([data-section="latest"]) {
  width: min(650px, calc(100vw - 112px)) !important;
  grid-template-columns: 76px minmax(0, 1fr) minmax(72px, auto) !important;
  gap: 14px 16px !important;
  min-height: 112px !important;
  padding: 13px 16px !important;
}
.phase3-card[data-card-preset="discography_album_player"],
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) {
  width: min(700px, calc(100vw - 104px)) !important;
  grid-template-columns: 88px minmax(0, 1fr) minmax(72px, auto) !important;
  gap: 14px 18px !important;
  min-height: 156px !important;
  padding: 15px 18px !important;
}
.phase3-card[data-card-preset="discography_single_player"] .phase3-art,
.phase3-card.is-preset-discography_single_player:not([data-section="latest"]) .phase3-art {
  width: 76px !important;
  height: 76px !important;
}
.phase3-card[data-card-preset="discography_album_player"] .phase3-art,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-art {
  width: 88px !important;
  height: 88px !important;
}
.phase3-card[data-card-preset="discography_single_player"] .phase3-heading,
.phase3-card[data-card-preset="discography_album_player"] .phase3-heading,
.phase3-card.is-preset-discography_single_player:not([data-section="latest"]) .phase3-heading,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-heading {
  gap: 6px !important;
}
.phase3-card[data-card-preset="discography_single_player"] .phase3-title,
.phase3-card[data-card-preset="discography_album_player"] .phase3-title,
.phase3-card.is-preset-discography_single_player:not([data-section="latest"]) .phase3-title,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  overflow-wrap: anywhere !important;
}
.phase3-card[data-card-preset="discography_single_player"] .phase3-subtitle,
.phase3-card[data-card-preset="discography_album_player"] .phase3-subtitle,
.phase3-card.is-preset-discography_single_player:not([data-section="latest"]) .phase3-subtitle,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-subtitle,
.phase3-card[data-card-preset="discography_album_player"] .phase3-active-song,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-active-song {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
  overflow-wrap: anywhere !important;
}
.phase3-card[data-card-preset="discography_album_player"] .phase3-title-line,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-title-line {
  grid-template-columns: minmax(0,1fr) !important;
  row-gap: 4px !important;
}
.phase3-card[data-card-preset="discography_album_player"] .phase3-active-song,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-active-song {
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.16 !important;
}
.phase3-card[data-card-preset="large_social_media_post"][data-section="latest"],
.phase3-card.is-preset-large_social_media_post[data-section="latest"] {
  width: min(670px, calc(100vw - 92px)) !important;
  min-height: 226px !important;
  grid-template-columns: 156px minmax(0, 1fr) minmax(82px, auto) !important;
}
.phase3-card[data-card-preset="large_social_media_post"][data-section="latest"] .phase3-art,
.phase3-card.is-preset-large_social_media_post[data-section="latest"] .phase3-art {
  width: 156px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}
.phase3-card[data-card-preset="small_social_media_post"][data-section="latest"],
.phase3-card.is-preset-small_social_media_post[data-section="latest"] {
  width: min(500px, calc(100vw - 112px)) !important;
  min-height: 166px !important;
  grid-template-columns: 116px minmax(0, 1fr) minmax(70px, auto) !important;
  padding: 18px 16px !important;
  column-gap: 14px !important;
}
.phase3-card[data-card-preset="small_social_media_post"][data-section="latest"] .phase3-art,
.phase3-card.is-preset-small_social_media_post[data-section="latest"] .phase3-art {
  width: 116px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  margin-top: 10px !important;
}
.phase3-card[data-card-preset="small_social_media_post"][data-section="latest"] .phase3-title,
.phase3-card.is-preset-small_social_media_post[data-section="latest"] .phase3-title {
  font-size: clamp(.78rem, .9vw, .92rem) !important;
  line-height: 1.16 !important;
  letter-spacing: .04em !important;
}
.phase3-card[data-card-preset="small_social_media_post"][data-section="latest"] .phase3-subtitle,
.phase3-card.is-preset-small_social_media_post[data-section="latest"] .phase3-subtitle {
  font-size: .58rem !important;
  -webkit-line-clamp: 3 !important;
}
.phase3-card[data-card-preset="other_website_projects"],
.phase3-card.is-preset-other_website_projects {
  width: min(560px, calc(100vw - 116px)) !important;
}
@media (max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-card-preset="discography_single_player"],
  .phase3-card.is-preset-discography_single_player:not([data-section="latest"]) {
    width: min(302px, calc(100vw - 82px)) !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 98px !important;
    padding: 9px 10px !important;
  }
  .phase3-card[data-card-preset="discography_album_player"],
  .phase3-card.is-preset-discography_album_player:not([data-section="latest"]) {
    width: min(318px, calc(100vw - 70px)) !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    min-height: 132px !important;
    padding: 9px 10px !important;
  }
  .phase3-card[data-card-preset="discography_single_player"] .phase3-art,
  .phase3-card.is-preset-discography_single_player:not([data-section="latest"]) .phase3-art,
  .phase3-card[data-card-preset="discography_album_player"] .phase3-art,
  .phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-art {
    width: 58px !important;
    height: 58px !important;
  }
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"],
  .phase3-card.is-preset-large_social_media_post[data-section="latest"] {
    width: min(322px, calc(100vw - 56px)) !important;
    min-height: 308px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" !important;
  }
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"],
  .phase3-card.is-preset-small_social_media_post[data-section="latest"] {
    width: min(300px, calc(100vw - 64px)) !important;
    min-height: 214px !important;
    grid-template-columns: 102px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
  }
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"] .phase3-art,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"] .phase3-art {
    width: 100% !important;
    max-width: 270px !important;
    margin: 0 auto !important;
  }
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"] .phase3-art,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"] .phase3-art {
    width: 102px !important;
    margin: 0 !important;
  }
  .phase3-card[data-card-preset="other_website_projects"],
  .phase3-card.is-preset-other_website_projects {
    width: min(304px, calc(100vw - 70px)) !important;
  }
}

/* Phase 5.1: manual Collaboration cards can use social/player and website presets. */
.phase3-card.is-social-card {
  width: min(670px, calc(100vw - 92px)) !important;
  min-height: 226px !important;
  grid-template-columns: 156px minmax(0, 1fr) minmax(82px, auto) !important;
  grid-template-areas: "art content links" !important;
  gap: 18px !important;
  align-items: center !important;
}
.phase3-card.is-social-card .phase3-player,
.phase3-card.is-social-card .phase3-track-browser,
.phase3-card.is-social-card .phase3-active-song,
.phase3-card.is-social-card .phase3-release-badge,
.phase3-card.is-social-card .phase3-links {
  display: none !important;
}
.phase3-card.is-social-card .phase3-art {
  width: 156px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.phase3-card.is-social-card .phase3-latest-media-link,
.phase3-card.is-social-card .phase3-latest-media-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}
.phase3-card.is-social-card .phase3-latest-media-link img,
.phase3-card.is-social-card .phase3-latest-media-trigger img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .32s ease, filter .32s ease !important;
}
.phase3-card.is-social-card:hover .phase3-latest-media-link img,
.phase3-card.is-social-card:hover .phase3-latest-media-trigger img {
  transform: scale(1.035) !important;
  filter: brightness(1.08) saturate(1.08) !important;
}
.phase3-card.is-social-card .phase3-title-line {
  display: block !important;
}
.phase3-card.is-social-card .phase3-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  font-size: clamp(.9rem, 1.15vw, 1.1rem) !important;
  line-height: 1.13 !important;
  letter-spacing: .05em !important;
}
.phase3-card.is-social-card .phase3-subtitle {
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  line-height: 1.32 !important;
}
.phase3-card.is-social-card .phase3-latest-badge-stack {
  top: 50% !important;
  right: 15px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}
.phase3-card.is-social-card .phase3-latest-chip {
  display: inline-flex !important;
}
.phase3-card.is-social-card.is-preset-small_social_media_post {
  width: min(500px, calc(100vw - 112px)) !important;
  min-height: 166px !important;
  grid-template-columns: 116px minmax(0, 1fr) minmax(70px, auto) !important;
  padding: 18px 16px !important;
  column-gap: 14px !important;
}
.phase3-card.is-social-card.is-preset-small_social_media_post .phase3-art {
  width: 116px !important;
  margin-top: 10px !important;
}
.phase3-card.is-social-card.is-preset-small_social_media_post .phase3-title {
  font-size: clamp(.78rem, .9vw, .92rem) !important;
  line-height: 1.16 !important;
  letter-spacing: .04em !important;
}
.phase3-card.is-social-card.is-preset-small_social_media_post .phase3-subtitle {
  font-size: .58rem !important;
  -webkit-line-clamp: 3 !important;
}
.phase3-card[data-section="collaborations"].is-project-card,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects {
  width: min(560px, calc(100vw - 116px)) !important;
  grid-template-columns: 142px minmax(0, 1fr) minmax(72px, auto) !important;
  grid-template-areas: "art content links" !important;
  align-items: center !important;
  min-height: 166px !important;
}
.phase3-card[data-section="collaborations"].is-project-card .phase3-art,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-art {
  width: 142px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}
.phase3-card[data-section="collaborations"].is-project-card .phase3-player,
.phase3-card[data-section="collaborations"].is-project-card .phase3-track-browser,
.phase3-card[data-section="collaborations"].is-project-card .phase3-active-song,
.phase3-card[data-section="collaborations"].is-project-card .phase3-release-badge,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-player,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-track-browser,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-active-song,
.phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-release-badge {
  display: none !important;
}
.phase3-latest-embed-player.is-spotify {
  background: #000 !important;
}
@media (max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-card.is-social-card {
    width: min(322px, calc(100vw - 56px)) !important;
    min-height: 308px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" !important;
  }
  .phase3-card.is-social-card .phase3-art {
    width: 100% !important;
    max-width: 270px !important;
    margin: 0 auto !important;
  }
  .phase3-card.is-social-card.is-preset-small_social_media_post {
    width: min(300px, calc(100vw - 64px)) !important;
    min-height: 214px !important;
    grid-template-columns: 102px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
  }
  .phase3-card.is-social-card.is-preset-small_social_media_post .phase3-art {
    width: 102px !important;
    margin: 0 !important;
  }
  .phase3-card.is-social-card .phase3-latest-badge-stack {
    top: 12px !important;
    right: 12px !important;
    transform: none !important;
  }
  .phase3-card[data-section="collaborations"].is-project-card,
  .phase3-card[data-section="collaborations"].is-preset-other_website_projects {
    width: min(304px, calc(100vw - 70px)) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" !important;
  }
  .phase3-card[data-section="collaborations"].is-project-card .phase3-art,
  .phase3-card[data-section="collaborations"].is-preset-other_website_projects .phase3-art {
    width: 100% !important;
    max-width: 250px !important;
    margin: 0 auto !important;
  }
}
.phase3-card.is-social-card.is-latest-embed-open .phase3-latest-media-link,
.phase3-card.is-social-card.is-latest-embed-open .phase3-latest-media-trigger {
  opacity: 0 !important;
  pointer-events: none !important;
}
.phase3-card.is-social-card.is-latest-embed-open .phase3-latest-play,
.phase3-card.is-social-card.is-latest-embed-open .phase3-latest-chip {
  opacity: 0 !important;
}
.phase3-card.is-social-card.is-latest-embed-open .phase3-art {
  background: #000 !important;
}
.phase3-latest-network-badge[data-accent="spotify"] {
  border-color: rgba(30,215,96,.78) !important;
  color: #1ed760 !important;
  background: rgba(30,215,96,.12) !important;
}
.phase3-latest-network-badge[data-accent="spotify"]:hover,
.phase3-latest-network-badge[data-accent="spotify"]:focus-visible {
  color: #fff !important;
  border-color: rgba(255,255,255,.85) !important;
  background: rgba(30,215,96,.28) !important;
}

/* Phase 5.1: final Album/EP active-song and track-pill vertical centering.
   Keeps long song titles readable while the label background stays visually aligned. */
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-title-line {
  align-items: start !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song,
.phase3-card[data-card-preset="discography_album_player"] .phase3-active-song,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-active-song {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  min-height: 24px !important;
  height: auto !important;
  padding: 4px 10px 5px !important;
  border-radius: 999px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
  background-clip: padding-box !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song:empty { display: none !important; }
.phase3-track-rail { align-items: center !important; }
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: none !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media(max-width:760px), (hover:none) and (pointer:coarse) {
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song,
  .phase3-card[data-card-preset="discography_album_player"] .phase3-active-song,
  .phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-active-song {
    min-height: 20px !important;
    padding: 3px 8px 4px !important;
    line-height: 1.14 !important;
  }
}

/* Phase 5.2 unified hybrid radio: hidden parking spot for active media when its card/section is not visible. */
.phase3-radio-park {
  position: fixed !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: .01 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: -1 !important;
}
.phase3-latest-embed-frame.is-radio-frame {
  contain: layout paint !important;
}
.phase3-card.is-latest-embed-open.is-playing .phase3-art {
  border-color: rgba(146,255,180,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(146,255,180,.10) !important;
}

/* Phase 5.1 playable artwork URLs: YouTube/SoundCloud/etc. can live inside Collaboration and Other Project artwork frames without changing card layout. */
.phase3-card.has-playable-artwork .phase3-latest-media-link,
.phase3-card.has-playable-artwork .phase3-latest-media-trigger {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
}
.phase3-card.has-playable-artwork .phase3-latest-media-link img,
.phase3-card.has-playable-artwork .phase3-latest-media-trigger img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .28s ease, filter .28s ease !important;
}
.phase3-card.has-playable-artwork:hover .phase3-latest-media-link img,
.phase3-card.has-playable-artwork:hover .phase3-latest-media-trigger img {
  transform: scale(1.035) !important;
  filter: brightness(1.08) saturate(1.06) !important;
}
.phase3-card.has-playable-artwork.is-latest-embed-open .phase3-latest-media-link,
.phase3-card.has-playable-artwork.is-latest-embed-open .phase3-latest-media-trigger {
  pointer-events: none !important;
}
.phase3-card.is-project-card.has-playable-artwork .phase3-art {
  position: relative !important;
}
.phase3-card.is-project-card.has-playable-artwork .phase3-latest-chip {
  left: 6px !important;
  bottom: 6px !important;
}
.phase3-card.is-project-card.has-playable-artwork .phase3-latest-play {
  width: 32px !important;
  height: 32px !important;
}

/* Phase 5.1: 10% narrower large carousel cards + 85% border-opacity polish. */
@media (min-width: 761px) {
  .phase3-card[data-card-preset="discography_album_player"],
  .phase3-card.is-preset-discography_album_player:not([data-section="latest"]) {
    width: min(630px, calc(100vw - 104px)) !important;
  }
  .phase3-card[data-card-preset="discography_single_player"],
  .phase3-card.is-preset-discography_single_player:not([data-section="latest"]) {
    width: min(585px, calc(100vw - 112px)) !important;
  }
  .phase3-card[data-section="latest"] {
    width: min(551px, calc(100vw - 132px)) !important;
  }
  .phase3-card[data-section="latest"].is-latest-compact,
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"],
  .phase3-card.is-preset-small_social_media_post[data-section="latest"],
  .phase3-card.is-social-card.is-preset-small_social_media_post {
    width: min(500px, calc(100vw - 146px)) !important;
  }
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"],
  .phase3-card.is-preset-large_social_media_post[data-section="latest"],
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post) {
    width: min(603px, calc(100vw - 92px)) !important;
  }
  .phase3-card[data-section="side_projects"] {
    width: min(473px, calc(100vw - 148px)) !important;
  }
  .phase3-card[data-card-preset="other_website_projects"],
  .phase3-card.is-preset-other_website_projects,
  .phase3-card[data-section="collaborations"].is-project-card,
  .phase3-card[data-section="collaborations"].is-preset-other_website_projects {
    width: min(504px, calc(100vw - 116px)) !important;
  }
}
.phase3-card {
  border-color: rgba(255,255,255,.17) !important;
}
.phase3-card.is-playing {
  border-color: rgba(146,255,180,.31) !important;
}
.phase3-art {
  border-color: rgba(255,255,255,.15) !important;
}
.phase3-track-nav,
.phase3-play,
.phase3-latest-embed-close,
.phase3-global-play,
.phase3-latest-chip,
.phase3-link-chip {
  border-color: rgba(255,255,255,.19) !important;
}

/* Phase 5.1: uniform carousel card width across every public section.
   Match the desktop Single Song/Discography card width, while preserving each card type's internal layout and height. */
@media (min-width: 761px) {
  :root {
    --p3-uniform-card-width: 585px;
    --p3-uniform-card-width-safe: calc(100vw - 132px);
  }

  .phase3-card,
  .phase3-card[data-section="latest"],
  .phase3-card[data-section="latest"].is-latest-compact,
  .phase3-card[data-section="side_projects"],
  .phase3-card[data-section="collaborations"],
  .phase3-card.is-social-card,
  .phase3-card.is-project-card,
  .phase3-card[data-card-preset="discography_album_player"],
  .phase3-card[data-card-preset="discography_single_player"],
  .phase3-card[data-card-preset="large_social_media_post"],
  .phase3-card[data-card-preset="small_social_media_post"],
  .phase3-card[data-card-preset="other_website_projects"],
  .phase3-card.is-preset-discography_album_player:not([data-section="latest"]),
  .phase3-card.is-preset-discography_single_player:not([data-section="latest"]),
  .phase3-card.is-preset-large_social_media_post,
  .phase3-card.is-preset-small_social_media_post,
  .phase3-card.is-preset-other_website_projects,
  .phase3-card[data-section="collaborations"].is-project-card,
  .phase3-card[data-section="collaborations"].is-preset-other_website_projects {
    width: min(var(--p3-uniform-card-width), var(--p3-uniform-card-width-safe)) !important;
    max-width: min(var(--p3-uniform-card-width), var(--p3-uniform-card-width-safe)) !important;
  }

  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"],
  .phase3-card.is-preset-small_social_media_post[data-section="latest"],
  .phase3-card.is-social-card.is-preset-small_social_media_post {
    width: min(var(--p3-uniform-card-width), var(--p3-uniform-card-width-safe)) !important;
    max-width: min(var(--p3-uniform-card-width), var(--p3-uniform-card-width-safe)) !important;
  }
}

/* Phase 5.1: carousel readability polish — sliding Album/EP number rail + wider Discography Single titles. */
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-center {
  min-width: 0 !important;
  overflow: hidden !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-rail {
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  overscroll-behavior-x: contain !important;
  padding: 2px 4px !important;
  max-width: 100% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%) !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
  flex: 0 0 auto !important;
  scroll-snap-align: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
}
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-rail {
    padding-inline: 3px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%) !important;
  }
  .phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
  }
}

@media (min-width: 761px) {
  .phase3-card[data-section="discography"].is-single-card,
  .phase3-card[data-section="discography"].is-preset-discography_single_player,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] {
    grid-template-columns: 58px minmax(0, 1fr) max-content !important;
    column-gap: 11px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-art,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-art,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-art {
    width: 58px !important;
    height: 58px !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-content,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-content,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-content {
    min-width: 0 !important;
    width: 100% !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-title,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    letter-spacing: .105em !important;
    line-height: 1.12 !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-links,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-links,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-links {
    min-width: 48px !important;
    gap: 5px !important;
    justify-items: end !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-link,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-link,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-link {
    font-size: .61rem !important;
    letter-spacing: .045em !important;
  }
}


/* Phase 5.1: Collaboration EP cross-list + wider single-card title lanes. */
@media (min-width: 761px) {
  .phase3-card[data-section="discography"].is-single-card,
  .phase3-card[data-section="discography"].is-preset-discography_single_player,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  .phase3-card[data-section="collaborations"].is-single-card,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] {
    grid-template-columns: 50px minmax(0, 1fr) 42px !important;
    column-gap: 8px !important;
    padding-left: 11px !important;
    padding-right: 10px !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-art,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-art,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-art,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-art,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-art,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-art {
    width: 50px !important;
    height: 50px !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-content,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-content,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-content,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-content,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-content,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-content {
    min-width: 0 !important;
    width: 100% !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-title,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-title,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-title,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-title,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    letter-spacing: .072em !important;
    line-height: 1.12 !important;
    font-size: clamp(.80rem, 1vw, .95rem) !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-links,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-links,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-links,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-links,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-links,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-links {
    min-width: 42px !important;
    max-width: 42px !important;
    gap: 4px !important;
    justify-items: end !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-link,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-link,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-link,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-link,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-link,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-link {
    font-size: .56rem !important;
    letter-spacing: .025em !important;
  }
}

/* Phase 5.1: single-song title lane fix — singles should use the full content column before wrapping.
   Earlier album-label grid rules split .phase3-title-line into title/active-song/badge columns globally;
   singles have no active-song pill, so this restores a full-width title lane for Discography/Collaboration single cards. */
@media (min-width: 761px) {
  .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-title-line,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-title-line,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-title-line,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-title-line {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-title,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-title,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-title,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-title,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-title {
    width: 100% !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: .055em !important;
    font-size: clamp(.80rem, .96vw, .93rem) !important;
    line-height: 1.12 !important;
  }
  .phase3-card[data-section="discography"].is-single-card .phase3-content,
  .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-content,
  .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-content,
  .phase3-card[data-section="collaborations"].is-single-card .phase3-content,
  .phase3-card[data-section="collaborations"].is-preset-discography_single_player .phase3-content,
  .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"] .phase3-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Phase 5.1: Spotify Public Web Player card preset.
   Professional wide embedded Spotify player layout. The Spotify iframe is the visual priority,
   while title/description/link controls become a compact side panel. */
.phase3-card.has-spotify-public-player,
.phase3-card[data-card-preset="spotify_public_web_player"],
.phase3-card.is-preset-spotify_public_web_player {
  min-height: 192px !important;
  grid-template-columns: minmax(130px, .48fr) minmax(330px, 1.42fr) auto !important;
  grid-template-areas: "content art links" !important;
  align-items: center !important;
  column-gap: 16px !important;
  overflow: visible !important;
}
.phase3-card.has-spotify-public-player .phase3-art,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-art,
.phase3-card.is-preset-spotify_public_web_player .phase3-art {
  grid-area: art !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 152px !important;
  min-height: 152px !important;
  max-height: 152px !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  background: #121212 !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 40px rgba(0,0,0,.20) !important;
  overflow: hidden !important;
  clip-path: none !important;
}
.phase3-spotify-public-shell {
  width: 100% !important;
  min-width: 0 !important;
  height: 152px !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #121212 !important;
}
.phase3-spotify-public-player {
  width: 100% !important;
  min-width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  border: 0 !important;
  border-radius: 12px !important;
  display: block !important;
  background: #121212 !important;
}
.phase3-card.has-spotify-public-player .phase3-content,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-content,
.phase3-card.is-preset-spotify_public_web_player .phase3-content {
  grid-area: content !important;
  min-width: 0 !important;
  gap: 8px !important;
  align-content: center !important;
}
.phase3-card.has-spotify-public-player .phase3-heading,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-heading,
.phase3-card.is-preset-spotify_public_web_player .phase3-heading {
  gap: 7px !important;
}
.phase3-card.has-spotify-public-player .phase3-title-line,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-title-line,
.phase3-card.is-preset-spotify_public_web_player .phase3-title-line {
  grid-template-columns: minmax(0, 1fr) !important;
}
.phase3-card.has-spotify-public-player .phase3-title,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-title,
.phase3-card.is-preset-spotify_public_web_player .phase3-title {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  line-height: 1.15 !important;
  letter-spacing: .07em !important;
  font-size: clamp(.76rem, .96vw, .9rem) !important;
}
.phase3-card.has-spotify-public-player .phase3-subtitle,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-subtitle,
.phase3-card.is-preset-spotify_public_web_player .phase3-subtitle {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}
.phase3-card.has-spotify-public-player .phase3-links,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-links,
.phase3-card.is-preset-spotify_public_web_player .phase3-links {
  grid-area: links !important;
}
.phase3-card.has-spotify-public-player .phase3-latest-chip,
.phase3-card.has-spotify-public-player .phase3-latest-play,
.phase3-card.is-preset-spotify_public_web_player .phase3-latest-chip,
.phase3-card.is-preset-spotify_public_web_player .phase3-latest-play,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-latest-chip,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-latest-play,
.phase3-card.has-spotify-public-player .phase3-track-browser,
.phase3-card.has-spotify-public-player .phase3-player,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-track-browser,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-player,
.phase3-card.is-preset-spotify_public_web_player .phase3-track-browser,
.phase3-card.is-preset-spotify_public_web_player .phase3-player,
.phase3-card.has-spotify-public-player .phase3-active-song,
.phase3-card.has-spotify-public-player .phase3-release-badge,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-active-song,
.phase3-card[data-card-preset="spotify_public_web_player"] .phase3-release-badge,
.phase3-card.is-preset-spotify_public_web_player .phase3-active-song,
.phase3-card.is-preset-spotify_public_web_player .phase3-release-badge {
  display: none !important;
}
@media (max-width: 760px) {
  .phase3-card.has-spotify-public-player,
  .phase3-card[data-card-preset="spotify_public_web_player"],
  .phase3-card.is-preset-spotify_public_web_player {
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" "links" !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .phase3-card.has-spotify-public-player .phase3-art,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-art,
  .phase3-card.is-preset-spotify_public_web_player .phase3-art {
    grid-area: art !important;
    width: 100% !important;
    height: 152px !important;
  }
  .phase3-card.has-spotify-public-player .phase3-content,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-content,
  .phase3-card.is-preset-spotify_public_web_player .phase3-content {
    grid-area: content !important;
  }
  .phase3-card.has-spotify-public-player .phase3-links,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-links,
  .phase3-card.is-preset-spotify_public_web_player .phase3-links {
    grid-area: links !important;
    justify-content: flex-start !important;
  }
}

/* Phase 5.1: Spotify Public Web Player layout hard-fix.
   This final override prevents the normal Single Song / social-thumbnail rules from shrinking
   Spotify embeds into a tiny artwork column. Spotify preset cards prioritize a wide official
   iframe, with text compressed into a small side panel. */
@media (min-width: 761px) {
  .phase3-card.has-spotify-public-player,
  .phase3-card.is-spotify-public-card,
  .phase3-card[data-card-preset="spotify_public_web_player"] {
    width: min(580px, calc(100vw - 160px)) !important;
    max-width: 100% !important;
    min-height: 190px !important;
    display: grid !important;
    grid-template-columns: minmax(84px, 112px) minmax(360px, 1fr) minmax(42px, auto) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "content art links" !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px 14px 18px 14px !important;
    overflow: hidden !important;
  }
  .phase3-card.has-spotify-public-player > .phase3-art,
  .phase3-card.is-spotify-public-card > .phase3-art,
  .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-art {
    grid-area: art !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    aspect-ratio: auto !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: none !important;
    transform: none !important;
    background: #121212 !important;
  }
  .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell,
  .phase3-card.has-spotify-public-player .phase3-spotify-public-player,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-player,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-player {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #121212 !important;
  }
  .phase3-card.has-spotify-public-player > .phase3-content,
  .phase3-card.is-spotify-public-card > .phase3-content,
  .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-content {
    grid-area: content !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 112px !important;
    gap: 6px !important;
    align-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .phase3-card.has-spotify-public-player .phase3-heading,
  .phase3-card.is-spotify-public-card .phase3-heading,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-heading {
    gap: 5px !important;
    min-width: 0 !important;
  }
  .phase3-card.has-spotify-public-player .phase3-title-line,
  .phase3-card.is-spotify-public-card .phase3-title-line,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-title-line {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }
  .phase3-card.has-spotify-public-player .phase3-title,
  .phase3-card.is-spotify-public-card .phase3-title,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    white-space: normal !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: clip !important;
    font-size: clamp(.68rem, .84vw, .80rem) !important;
    line-height: 1.13 !important;
    letter-spacing: .045em !important;
  }
  .phase3-card.has-spotify-public-player .phase3-subtitle,
  .phase3-card.is-spotify-public-card .phase3-subtitle,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-subtitle {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    white-space: normal !important;
    overflow: hidden !important;
    font-size: .52rem !important;
    line-height: 1.18 !important;
    letter-spacing: .045em !important;
  }
  .phase3-card.has-spotify-public-player > .phase3-links,
  .phase3-card.is-spotify-public-card > .phase3-links,
  .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-links {
    grid-area: links !important;
    min-width: 42px !important;
    max-width: 58px !important;
    justify-self: end !important;
    justify-items: end !important;
    gap: 4px !important;
    padding: 0 !important;
  }
}
@media (max-width: 760px) {
  .phase3-card.has-spotify-public-player,
  .phase3-card.is-spotify-public-card,
  .phase3-card[data-card-preset="spotify_public_web_player"] {
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" "links" !important;
    min-height: 0 !important;
  }
  .phase3-card.has-spotify-public-player > .phase3-art,
  .phase3-card.is-spotify-public-card > .phase3-art,
  .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-art,
  .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell,
  .phase3-card.has-spotify-public-player .phase3-spotify-public-player,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-player,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-player {
    width: 100% !important;
    min-width: 100% !important;
    height: 152px !important;
    min-height: 152px !important;
  }
}


/* Phase 5.1: Spotify player-only card preset.
   This preset intentionally hides all site-side title/description/badges/links and lets
   the official Spotify embed fill the whole carousel card width. */
.phase3-card.is-spotify-player-only,
.phase3-card.has-spotify-public-player.is-spotify-player-only,
.phase3-card[data-card-preset="spotify_public_web_player"].is-spotify-player-only {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "art" !important;
  align-items: center !important;
  justify-items: stretch !important;
  min-height: 190px !important;
  padding: 18px !important;
  gap: 0 !important;
}
.phase3-card.is-spotify-player-only > .phase3-art,
.phase3-card.has-spotify-public-player.is-spotify-player-only > .phase3-art,
.phase3-card[data-card-preset="spotify_public_web_player"].is-spotify-player-only > .phase3-art {
  grid-area: art !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  max-height: 152px !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: none !important;
  transform: none !important;
  background: #121212 !important;
}
.phase3-card.is-spotify-player-only .phase3-spotify-public-shell,
.phase3-card.is-spotify-player-only .phase3-spotify-public-player {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  max-height: 152px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  display: block !important;
  overflow: hidden !important;
}
.phase3-card.is-spotify-player-only > .phase3-content,
.phase3-card.is-spotify-player-only > .phase3-links,
.phase3-card.is-spotify-player-only > .phase3-player,
.phase3-card.is-spotify-player-only > .phase3-latest-badge-stack,
.phase3-card.is-spotify-player-only > .phase3-project-network-badge,
.phase3-card.is-spotify-player-only .phase3-title,
.phase3-card.is-spotify-player-only .phase3-subtitle {
  display: none !important;
}
@media (max-width: 760px) {
  .phase3-card.is-spotify-player-only,
  .phase3-card.has-spotify-public-player.is-spotify-player-only,
  .phase3-card[data-card-preset="spotify_public_web_player"].is-spotify-player-only {
    min-height: 0 !important;
    padding: 14px !important;
  }
}

/* Phase 5: Collaboration featuring-artist pills beside card titles. */
.phase3-card[data-section="collaborations"].has-featuring-artists:not(.has-spotify-public-player) .phase3-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.phase3-card[data-section="collaborations"].has-featuring-artists:not(.has-spotify-public-player) .phase3-title-text {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.phase3-featured-artists {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
  vertical-align: middle;
}
.phase3-featured-artists-prefix {
  color: rgba(255,255,255,.42);
  font-size: .55rem;
  letter-spacing: .10em;
  text-transform: lowercase;
}
.phase3-featured-artist-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  max-width: 180px;
  padding: 2px 8px 1px;
  border: 1px solid rgba(30,215,96,.34);
  border-radius: 999px;
  color: rgba(190,255,211,.94);
  background: rgba(30,215,96,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(30,215,96,.09);
  font-size: .52rem;
  line-height: 1.1;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase3-featured-artist-pill:hover {
  color: #fff;
  border-color: rgba(30,215,96,.62);
  background: rgba(30,215,96,.12);
  text-decoration: none;
}
@media (max-width:760px) {
  .phase3-card[data-section="collaborations"].has-featuring-artists:not(.has-spotify-public-player) .phase3-title {
    gap: 5px !important;
  }
  .phase3-featured-artists {
    gap: 4px;
  }
  .phase3-featured-artists-prefix {
    font-size: .45rem;
    letter-spacing: .07em;
  }
  .phase3-featured-artist-pill {
    min-height: 15px;
    max-width: 120px;
    padding: 1px 6px;
    font-size: .42rem;
    letter-spacing: .045em;
  }
}

/* Phase 5: large social/latest post text-lane widening.
   Uses the unused gap before the platform badges without allowing text to sit under them. */
@media (min-width: 761px) {
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only),
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only),
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) {
    grid-template-columns: 156px minmax(0, 1fr) 76px !important;
    column-gap: 16px !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) > .phase3-content,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) > .phase3-content,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-content {
    padding-right: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-title-line,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-title-line,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-title-line,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-subtitle,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-subtitle,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-subtitle {
    max-width: 100% !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-latest-badge-stack,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-latest-badge-stack,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-latest-badge-stack {
    right: 16px !important;
    max-width: 76px !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-latest-badge-stack .phase3-latest-network-badge,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-player-only) .phase3-latest-badge-stack .phase3-latest-network-badge,
  .phase3-card.is-social-card:not(.is-preset-small_social_media_post):not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-latest-badge-stack .phase3-latest-network-badge {
    max-width: 76px !important;
  }
}

/* Phase 5.2: footer radio transport controls — symbol-only, larger play/pause + next. */
.phase3-global-control-footer {
  gap: 10px !important;
  align-items: center !important;
}
.phase3-global-button,
.phase3-global-control-footer .phase3-global-play,
.phase3-global-control-footer .phase3-global-next {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
}
.phase3-global-control-footer .phase3-global-play {
  padding: 0 !important;
}
.phase3-global-icon {
  border-top-width: 8px !important;
  border-bottom-width: 8px !important;
  border-left-width: 13px !important;
  margin-left: 3px !important;
}
.phase3-global-play.is-playing .phase3-global-icon {
  width: 13px !important;
  height: 17px !important;
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  margin-left: 0 !important;
}
.phase3-global-next {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.84) !important;
  background: rgba(0,0,0,.22) !important;
  cursor: pointer !important;
  box-shadow: 0 0 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease !important;
}
.phase3-global-next:hover,
.phase3-global-next:focus-visible {
  color: #fff !important;
  border-color: rgba(146,255,180,.48) !important;
  background: rgba(146,255,180,.07) !important;
  box-shadow: 0 0 22px rgba(146,255,180,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline: none !important;
}
.phase3-global-next:active { transform: scale(.97) !important; }
.phase3-global-next:disabled {
  opacity: .34 !important;
  cursor: default !important;
  pointer-events: none !important;
}
.phase3-global-next-icon {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 17px !important;
}
.phase3-global-next-icon::before,
.phase3-global-next-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 8.5px solid transparent !important;
  border-bottom: 8.5px solid transparent !important;
  border-left: 9px solid currentColor !important;
}
.phase3-global-next-icon::before { left: 0 !important; }
.phase3-global-next-icon::after { left: 7px !important; }
@media(max-width:760px), (hover: none) and (pointer: coarse) {
  .phase3-global-control-footer { gap: 8px !important; }
  .phase3-global-button,
  .phase3-global-control-footer .phase3-global-play,
  .phase3-global-control-footer .phase3-global-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  .phase3-global-icon {
    border-top-width: 7px !important;
    border-bottom-width: 7px !important;
    border-left-width: 11px !important;
  }
  .phase3-global-play.is-playing .phase3-global-icon {
    width: 12px !important;
    height: 15px !important;
  }
}


/* Phase 5.2: Instagram Reel/Post playable embed preset. Public Reels/Posts/TV URLs use the same polished social-card frame, with direct story media supported when the API supplies it. */
.phase3-card.is-preset-instagram_reel_post_embed .phase3-art {
  position: relative !important;
}
.phase3-card.is-preset-instagram_reel_post_embed .phase3-latest-chip {
  border-color: rgba(228,64,95,.62) !important;
  color: rgba(255,210,222,.92) !important;
}
.phase3-card.is-preset-instagram_reel_post_embed.is-latest-embed-open .phase3-art {
  background: #050505 !important;
}
.phase3-card.is-preset-instagram_reel_post_embed .phase3-latest-embed-player.is-instagram {
  background: #050505 !important;
}


/* Phase 6: Biography carousel card preset. Text-first card, positioned in normal Phase 3 carousel flow. */
@media (min-width: 761px) {
  .phase3-sections:has(.phase3-carousel-biography) {
    width: min(1628px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px) !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-scroll {
    width: min(1520px, calc(100vw - 142px)) !important;
    max-width: min(1520px, calc(100vw - 142px)) !important;
  }
}
.phase3-card.is-biography-card,
.phase3-card[data-section="biography"],
.phase3-card.is-preset-biography {
  width: min(1520px, calc(100vw - 142px)) !important;
  max-width: min(1520px, calc(100vw - 142px)) !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  grid-template-columns: 1fr !important;
  padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3.1vw, 38px) !important;
  overflow: visible !important;
  align-items: stretch !important;
  text-align: var(--phase6-bio-align, left) !important;
}
.phase3-card.is-biography-card .phase3-biography-content,
.phase3-card[data-section="biography"] .phase3-biography-content {
  width: 100%;
  min-width: 0;
  display: block;
  font-family: var(--phase6-bio-font-family, inherit);
  text-align: var(--phase6-bio-align, left);
}
.phase3-biography-kicker {
  margin: 0 0 .72rem;
  color: var(--phase6-bio-kicker-color, rgba(255,255,255,.52));
  font-size: var(--phase6-bio-kicker-size, clamp(.56rem, .78vw, .68rem));
  line-height: 1.25;
  letter-spacing: var(--phase6-bio-kicker-tracking, .20em);
  text-transform: uppercase;
  font-weight: var(--phase6-bio-kicker-weight, 760);
}
.phase3-biography-title {
  margin: 0 0 clamp(.85rem, 1.8vw, 1.25rem);
  color: var(--phase6-bio-title-color, #fff);
  font-size: var(--phase6-bio-title-size, clamp(1.05rem, 2.2vw, 1.55rem));
  line-height: var(--phase6-bio-title-line-height, 1.08);
  letter-spacing: var(--phase6-bio-title-tracking, .15em);
  text-transform: uppercase;
  font-weight: var(--phase6-bio-title-weight, 800);
}
.phase3-biography-copy {
  width: 100%;
  color: var(--phase6-bio-body-color, rgba(255,255,255,.82));
  font-size: var(--phase6-bio-body-size, clamp(.70rem, .98vw, .92rem));
  font-weight: var(--phase6-bio-body-weight, 400);
  line-height: var(--phase6-bio-body-line-height, 1.68);
  letter-spacing: var(--phase6-bio-body-tracking, .028em);
  text-wrap: pretty;
}
.phase3-biography-copy p {
  margin: 0 0 1em;
}
.phase3-biography-copy p:last-child {
  margin-bottom: 0;
}
.phase3-biography-copy .phase6-about-link {
  --phase6-link-color: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 760;
  transition: color .18s ease, border-color .18s ease, background .18s ease, text-shadow .18s ease;
}
.phase6-about-style-subtle .phase3-biography-copy .phase6-about-link {
  border-bottom: 1px dotted rgba(255,255,255,.34);
}
.phase6-about-style-subtle .phase3-biography-copy .phase6-about-link:hover,
.phase6-about-style-subtle .phase3-biography-copy .phase6-about-link:focus-visible {
  color: #fff;
  border-bottom-color: var(--phase6-link-color);
  text-shadow: 0 0 15px color-mix(in srgb, var(--phase6-link-color) 50%, transparent);
}
.phase6-about-style-glow .phase3-biography-copy .phase6-about-link {
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.phase6-about-style-glow .phase3-biography-copy .phase6-about-link:hover,
.phase6-about-style-glow .phase3-biography-copy .phase6-about-link:focus-visible {
  color: var(--phase6-link-color);
  border-bottom-color: var(--phase6-link-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--phase6-link-color) 65%, transparent);
}
.phase6-about-style-pill .phase3-biography-copy .phase6-about-link {
  display: inline-block;
  padding: .03em .38em .07em;
  border: 1px solid color-mix(in srgb, var(--phase6-link-color) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--phase6-link-color) 10%, transparent);
}
.phase6-about-style-pill .phase3-biography-copy .phase6-about-link:hover,
.phase6-about-style-pill .phase3-biography-copy .phase6-about-link:focus-visible {
  background: color-mix(in srgb, var(--phase6-link-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--phase6-link-color) 72%, transparent);
}
.phase3-carousel.phase3-carousel-biography .phase3-scroll,
.phase3-carousel.phase3-carousel-biography .phase3-track {
  overflow-y: visible !important;
}
.phase3-carousel.phase3-carousel-biography .phase3-arrow {
  top: 50%;
}
@media (max-width: 760px) {
  .phase3-sections:has(.phase3-carousel-biography) {
    width: min(100%, calc(100vw - 8px)) !important;
    max-width: calc(100vw - 8px) !important;
  }
  .phase3-carousel.phase3-carousel-biography {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-scroll {
    width: min(612px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }
  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    width: min(612px, calc(100vw - 32px)) !important;
    max-width: min(612px, calc(100vw - 32px)) !important;
    padding: 16px 16px 18px !important;
    border-radius: 15px !important;
  }
  .phase3-biography-kicker {
    font-size: .50rem;
    letter-spacing: .16em;
    margin-bottom: .62rem;
  }
  .phase3-biography-title {
    font-size: var(--phase6-bio-mobile-title-size, clamp(.84rem, 3.7vw, 1.08rem));
    letter-spacing: var(--phase6-bio-title-tracking, .105em);
    margin-bottom: .78rem;
  }
  .phase3-biography-copy {
    font-size: var(--phase6-bio-mobile-body-size, clamp(.58rem, 2.55vw, .70rem));
    line-height: var(--phase6-bio-mobile-line-height, 1.58);
    letter-spacing: var(--phase6-bio-body-tracking, .015em);
  }
  .phase3-biography-copy p { margin-bottom: .88em; }
}
@supports not (color: color-mix(in srgb, white, transparent)) {
  .phase6-about-style-pill .phase3-biography-copy .phase6-about-link { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
  .phase6-about-style-subtle .phase3-biography-copy .phase6-about-link:hover,
  .phase6-about-style-glow .phase3-biography-copy .phase6-about-link:hover { text-shadow: 0 0 14px rgba(255,255,255,.26); }
}


/* Phase 6.1: Biography wide-card center fix.
   The Biography card stays 100% wider, but the widened shell is centered from the
   stage midpoint and the carousel/card widths are calculated from the shell, not
   from raw 100vw values that can drift right on padded pages. */
@media (min-width: 761px) {
  .phase3-sections:has(.phase3-carousel-biography) {
    --phase6-bio-shell-width: min(1628px, calc(100vw - 34px));
    width: var(--phase6-bio-shell-width) !important;
    max-width: var(--phase6-bio-shell-width) !important;
    align-self: flex-start !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 54px !important;
    padding-right: 54px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-track {
    width: 100% !important;
    min-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-spacer {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 760px) {
  .phase3-sections:has(.phase3-carousel-biography) {
    --phase6-bio-mobile-shell-width: min(100%, calc(100vw - 10px));
    width: var(--phase6-bio-mobile-shell-width) !important;
    max-width: var(--phase6-bio-mobile-shell-width) !important;
    align-self: flex-start !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-track {
    width: 100% !important;
    min-width: 100% !important;
    justify-content: center !important;
  }
  .phase3-carousel.phase3-carousel-biography .phase3-spacer {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* Phase 6.2: Biography promo photo slideshow. */
.phase3-biography-layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.3vw, 34px);
  align-items: start;
}
.phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout {
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
}
.phase3-biography-promo {
  position: sticky;
  top: 14px;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(255,255,255,.13);
  background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.08), rgba(255,255,255,.025) 50%, rgba(0,0,0,.24));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 60px rgba(0,0,0,.26);
}
.phase3-biography-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 34%, rgba(0,0,0,.18));
  mix-blend-mode: screen;
  opacity: .34;
}
.phase3-biography-promo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 900ms ease, transform 4200ms ease;
}
.phase3-biography-promo-slide.is-active { opacity: 1; transform: scale(1); }
.phase3-card.is-biography-card.has-biography-promo .phase3-biography-content { padding-top: clamp(2px, .45vw, 8px); }
@media (max-width: 980px) and (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout { grid-template-columns: minmax(230px, 34%) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout { grid-template-columns: 1fr; gap: 14px; }
  .phase3-biography-promo { position: relative; top: auto; border-radius: 16px; max-height: 52vh; }
}

/* Phase 6.3: Biography downloadable PDF button. */
.phase3-card.is-biography-card,
.phase3-card[data-section="biography"],
.phase3-card.is-preset-biography {
  position: relative !important;
}
.phase3-biography-download {
  position: absolute;
  z-index: 9;
  top: clamp(12px, 1.4vw, 20px);
  right: clamp(12px, 1.5vw, 22px);
  width: clamp(38px, 3.1vw, 48px);
  height: clamp(38px, 3.1vw, 48px);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.24);
  box-shadow: 0 14px 38px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.phase3-biography-download svg {
  width: 54%;
  height: 54%;
  display: block;
}
.phase3-biography-download:hover,
.phase3-biography-download:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.105);
  transform: translateY(-1px) scale(1.035);
  box-shadow: 0 18px 46px rgba(0,0,0,.34), 0 0 22px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
  outline: none;
}
.phase3-biography-download.is-busy {
  pointer-events: none;
  opacity: .68;
  animation: phase3-bio-download-pulse 900ms ease-in-out infinite alternate;
}
@keyframes phase3-bio-download-pulse {
  from { transform: scale(1); }
  to { transform: scale(.94); }
}
.phase3-card.is-biography-card .phase3-biography-content {
  padding-right: clamp(34px, 4.5vw, 66px);
}
.phase3-card.is-biography-card.has-biography-promo .phase3-biography-content {
  padding-right: clamp(38px, 4.8vw, 68px);
}
@media (max-width: 760px) {
  .phase3-biography-download {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,.30);
  }
  .phase3-card.is-biography-card .phase3-biography-content,
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content {
    padding-right: 40px;
  }
}

/* Phase 6.6: Firefox carousel snap-lock fix + Biography newspaper columns. */
@supports (-moz-appearance: none) {
  @media (min-width: 761px) {
    .phase3-scroll {
      scroll-snap-type: none !important;
      scroll-behavior: auto !important;
    }
    .phase3-card {
      scroll-snap-align: none !important;
      scroll-snap-stop: normal !important;
    }
  }
}

@media (min-width: 761px) {
  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    --phase6-bio-promo-width: clamp(270px, 30vw, 430px);
    --phase6-bio-promo-height: calc(var(--phase6-bio-promo-width) * .75);
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout {
    grid-template-columns: var(--phase6-bio-promo-width) minmax(0, 1fr) !important;
    align-items: start !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo {
    aspect-ratio: auto !important;
    height: var(--phase6-bio-promo-height) !important;
    min-height: var(--phase6-bio-promo-height) !important;
    max-height: var(--phase6-bio-promo-height) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content {
    min-height: var(--phase6-bio-promo-height) !important;
  }
  .phase3-biography-copy {
    column-count: 3;
    column-gap: clamp(18px, 2.1vw, 34px);
    column-rule: 1px solid rgba(255,255,255,.10);
    column-fill: balance;
    text-align: left;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy {
    min-height: var(--phase6-bio-promo-height);
  }
  .phase3-biography-copy p {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .phase3-biography-copy p + p {
    margin-top: 0;
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    --phase6-bio-promo-width: clamp(230px, 28vw, 320px);
  }
  .phase3-biography-copy {
    column-count: 2;
  }
}

@media (max-width: 760px) {
  .phase3-biography-copy {
    column-count: 1 !important;
    column-gap: 0 !important;
    column-rule: 0 !important;
  }
}


/* Phase 6.7: square full-height Biography promo photo + top-right close action + slicker global transport. */
@media (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-size: min(clamp(390px, 38vw, 650px), calc(100vh - 168px));
    --phase6-bio-promo-width: var(--phase6-bio-promo-size) !important;
    --phase6-bio-promo-height: var(--phase6-bio-promo-size) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout {
    grid-template-columns: var(--phase6-bio-promo-size) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo {
    position: relative !important;
    top: auto !important;
    width: var(--phase6-bio-promo-size) !important;
    height: var(--phase6-bio-promo-size) !important;
    min-height: var(--phase6-bio-promo-size) !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    align-self: stretch !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy {
    min-height: var(--phase6-bio-promo-size) !important;
  }
}
.phase3-biography-actions {
  position: absolute;
  z-index: 12;
  top: clamp(12px, 1.4vw, 20px);
  right: clamp(12px, 1.5vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.phase3-biography-actions .phase3-biography-download,
.phase3-biography-actions .phase3-biography-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: clamp(36px, 2.65vw, 44px) !important;
  height: clamp(36px, 2.65vw, 44px) !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(13px) !important;
  -webkit-backdrop-filter: blur(13px) !important;
}
.phase3-biography-actions .phase3-biography-download svg,
.phase3-biography-actions .phase3-biography-close svg {
  width: 52% !important;
  height: 52% !important;
}
.phase3-biography-actions .phase3-biography-download:hover,
.phase3-biography-actions .phase3-biography-download:focus-visible,
.phase3-biography-actions .phase3-biography-close:hover,
.phase3-biography-actions .phase3-biography-close:focus-visible {
  color: #fff !important;
  border-color: rgba(255,255,255,.36) !important;
  background: rgba(255,255,255,.105) !important;
  transform: translateY(-1px) scale(1.025) !important;
  outline: none !important;
}
.phase3-card.is-biography-card .phase3-biography-content,
.phase3-card.is-biography-card.has-biography-promo .phase3-biography-content {
  padding-right: clamp(76px, 7vw, 112px) !important;
}
.phase3-global-control-footer {
  gap: 8px !important;
  margin-top: clamp(5px, .9vh, 10px) !important;
}
.phase3-global-button,
.phase3-global-control-footer .phase3-global-play,
.phase3-global-control-footer .phase3-global-next {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
  border-width: 1px !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}
.phase3-global-control-footer .phase3-global-play:hover,
.phase3-global-control-footer .phase3-global-play:focus-visible,
.phase3-global-control-footer .phase3-global-next:hover,
.phase3-global-control-footer .phase3-global-next:focus-visible {
  border-color: rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 0 18px rgba(255,255,255,.055), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.phase3-global-icon {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid currentColor !important;
  margin: 0 0 0 2px !important;
}
.phase3-global-play.is-playing .phase3-global-icon {
  width: 10px !important;
  height: 13px !important;
  border: 0 !important;
  border-left: 3px solid currentColor !important;
  border-right: 3px solid currentColor !important;
  margin: 0 !important;
}
.phase3-global-next-icon {
  width: 15px !important;
  height: 13px !important;
  transform: translateX(1px) !important;
}
.phase3-global-next-icon::before,
.phase3-global-next-icon::after {
  border-top-width: 6.5px !important;
  border-bottom-width: 6.5px !important;
  border-left-width: 7px !important;
}
.phase3-global-next-icon::after { left: 6px !important; }
@media (max-width: 760px) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
  }
  .phase3-biography-actions { top: 10px; right: 10px; gap: 6px; }
  .phase3-biography-actions .phase3-biography-download,
  .phase3-biography-actions .phase3-biography-close {
    width: 32px !important;
    height: 32px !important;
  }
  .phase3-card.is-biography-card .phase3-biography-content,
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content {
    padding-right: 0 !important;
    padding-top: 40px !important;
  }
  .phase3-global-control-footer { gap: 7px !important; }
  .phase3-global-button,
  .phase3-global-control-footer .phase3-global-play,
  .phase3-global-control-footer .phase3-global-next {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  .phase3-global-icon {
    border-top-width: 5.5px !important;
    border-bottom-width: 5.5px !important;
    border-left-width: 8px !important;
  }
  .phase3-global-play.is-playing .phase3-global-icon {
    width: 9px !important;
    height: 12px !important;
  }
}

/* Phase 6.8: smaller adaptive Biography promo image. */
@media (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-size: min(clamp(190px, 19vw, 325px), calc(100vh - 190px)) !important;
    --phase6-bio-promo-width: var(--phase6-bio-promo-size) !important;
    --phase6-bio-promo-height: var(--phase6-bio-promo-size) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    grid-template-columns: var(--phase6-bio-promo-size) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.2vw, 32px) !important;
    align-items: start !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
    width: var(--phase6-bio-promo-size) !important;
    height: var(--phase6-bio-promo-size) !important;
    min-height: var(--phase6-bio-promo-size) !important;
    max-height: var(--phase6-bio-promo-size) !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    min-height: var(--phase6-bio-promo-size) !important;
    padding-top: 0 !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    min-height: var(--phase6-bio-promo-size) !important;
    column-count: 3 !important;
    column-gap: clamp(16px, 1.9vw, 28px) !important;
    column-fill: balance !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-size: min(clamp(180px, 23vw, 285px), calc(100vh - 190px)) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    column-count: 2 !important;
  }
}

@media (max-width: 880px) and (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-size: clamp(160px, 26vw, 230px) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    column-count: 1 !important;
    column-rule: 0 !important;
  }
}

@media (max-width: 760px) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
    width: min(52vw, 220px) !important;
    height: min(52vw, 220px) !important;
    margin-inline: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Phase 6.9: 3:4 portrait Biography promo image, keeping adaptive newspaper text. */
@media (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-width: min(clamp(170px, 17vw, 300px), calc((100vh - 190px) * .75)) !important;
    --phase6-bio-promo-height: calc(var(--phase6-bio-promo-width) * 1.3333333333) !important;
    --phase6-bio-promo-size: var(--phase6-bio-promo-width) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    grid-template-columns: var(--phase6-bio-promo-width) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.1vw, 31px) !important;
    align-items: start !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
    width: var(--phase6-bio-promo-width) !important;
    height: var(--phase6-bio-promo-height) !important;
    min-height: var(--phase6-bio-promo-height) !important;
    max-height: var(--phase6-bio-promo-height) !important;
    aspect-ratio: 3 / 4 !important;
    align-self: start !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    min-height: var(--phase6-bio-promo-height) !important;
    padding-top: 0 !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    min-height: var(--phase6-bio-promo-height) !important;
    column-count: 3 !important;
    column-gap: clamp(16px, 1.85vw, 28px) !important;
    column-fill: balance !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-width: min(clamp(160px, 21vw, 255px), calc((100vh - 190px) * .75)) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    column-count: 2 !important;
  }
}

@media (max-width: 880px) and (min-width: 761px) {
  .phase3-card.is-biography-card.has-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo {
    --phase6-bio-promo-width: clamp(145px, 23vw, 210px) !important;
  }
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
    column-count: 1 !important;
    column-rule: 0 !important;
  }
}

@media (max-width: 760px) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
    width: min(48vw, 190px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 4 !important;
    margin-inline: auto !important;
  }
}

/* Phase 6.10: mobile portrait centering + compact section navigation.
   Desktop remains untouched. This override intentionally avoids structural redesign. */
@media (max-width:760px) and (orientation:portrait), (hover:none) and (pointer:coarse) and (orientation:portrait) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    display: grid !important;
    place-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  .stage {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform-origin: center center !important;
    left: auto !important;
    right: auto !important;
  }

  .stage > *,
  .title-shell,
  .links,
  .phase3-sections,
  .phase3-panel,
  .contact-row,
  .copyright {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  .title-shell {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .title {
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform-origin: center center !important;
  }

  .links {
    width: min(100%, calc(100vw - 26px)) !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: min(var(--gap, 6px), 6px) !important;
    overflow: visible !important;
    transform-origin: center center !important;
  }

  .phase3-sections {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .phase3-tabs {
    width: 80vw !important;
    max-width: 80vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(1px, .72vw, 4px) !important;
    overflow: hidden !important;
    transform-origin: center center !important;
  }

  .phase3-tab,
  .phase3-slash {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-size: clamp(.34rem, 1.42vw, .46rem) !important;
    letter-spacing: .028em !important;
    line-height: 1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }

  .phase3-tab {
    padding-bottom: .22rem !important;
  }

  .phase3-slash {
    width: .22em !important;
    opacity: .35 !important;
    transform: scaleX(.65) !important;
    padding-bottom: .22rem !important;
  }

  .phase3-panel.is-open {
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
  }

  .phase3-carousel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .phase3-scroll {
    width: min(306px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .phase3-track {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
  }

  .phase3-card:only-child,
  .phase3-track > .phase3-card:first-child:last-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .phase3-arrow.prev { left: 0 !important; }
  .phase3-arrow.next { right: 0 !important; }

  .contact-row,
  .copyright {
    width: min(100%, calc(100vw - 24px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Phase 6.11: professional mobile pop-up carousel navigation.
   Mobile portrait uses a single compact menu icon all through the site; desktop tabs remain untouched. */
.phase3-menu-toggle,
.phase3-menu-popover {
  display: none;
}

@media (max-width: 760px) and (orientation: portrait) {
  .phase3-nav-row {
    position: relative !important;
    width: min(100%, calc(100vw - 20px)) !important;
    min-height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    z-index: 80 !important;
  }

  .phase3-nav-row .phase3-tabs {
    display: none !important;
  }

  .phase3-menu-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(0,0,0,.20) !important;
    color: rgba(255,255,255,.92) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 82 !important;
    transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
    touch-action: manipulation !important;
  }

  .phase3-menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border-radius: inherit !important;
  }

  .phase3-menu-toggle:hover,
  .phase3-menu-toggle:focus-visible,
  .phase3-nav-row.is-menu-open .phase3-menu-toggle {
    transform: translateY(-1px) scale(1.02) !important;
    border-color: rgba(146,255,180,.44) !important;
    background: rgba(0,0,0,.34) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 24px rgba(146,255,180,.08), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .phase3-menu-toggle:active {
    transform: translateY(0) scale(.96) !important;
  }

  .phase3-menu-icon {
    width: 17px !important;
    height: 12px !important;
    display: grid !important;
    gap: 3px !important;
    align-content: center !important;
    justify-items: stretch !important;
  }

  .phase3-menu-icon span {
    display: block !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: .92 !important;
    transform-origin: center !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease, width .18s ease !important;
  }

  .phase3-menu-icon span:nth-child(2) {
    width: 72% !important;
    justify-self: end !important;
  }

  .phase3-nav-row.is-menu-open .phase3-menu-icon span:nth-child(1) {
    transform: translateY(4px) rotate(45deg) !important;
  }

  .phase3-nav-row.is-menu-open .phase3-menu-icon span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(.2) !important;
  }

  .phase3-nav-row.is-menu-open .phase3-menu-icon span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg) !important;
  }

  .phase3-menu-current {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px,1px,1px,1px) !important;
    white-space: nowrap !important;
  }

  .phase3-menu-popover {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    width: min(82vw, 322px) !important;
    max-width: calc(100vw - 28px) !important;
    transform: translate(-50%, -8px) scale(.975) !important;
    transform-origin: top center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 81 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 24px !important;
    padding: 12px !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(146,255,180,.10), transparent 38%),
      linear-gradient(180deg, rgba(22,22,22,.84), rgba(3,3,3,.72)) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
    transition: opacity .18s ease, visibility .18s ease, transform .22s cubic-bezier(.2,.8,.2,1) !important;
    box-sizing: border-box !important;
  }

  .phase3-nav-row.is-menu-open .phase3-menu-popover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  .phase3-menu-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 4px 5px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin-bottom: 8px !important;
  }

  .phase3-menu-head span {
    color: rgba(255,255,255,.42) !important;
    font-size: .48rem !important;
    letter-spacing: .18em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  .phase3-menu-head strong {
    color: rgba(255,255,255,.88) !important;
    font-size: .58rem !important;
    letter-spacing: .12em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .phase3-menu-list {
    display: grid !important;
    gap: 6px !important;
  }

  .phase3-menu-option {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.86) !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.2,.8,.2,1), color .16s ease !important;
    touch-action: manipulation !important;
  }

  .phase3-menu-option:hover,
  .phase3-menu-option:focus-visible {
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.16) !important;
    transform: translateX(1px) !important;
    outline: none !important;
  }

  .phase3-menu-option.is-active {
    color: #fff !important;
    background: rgba(146,255,180,.075) !important;
    border-color: rgba(146,255,180,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(146,255,180,.07) !important;
  }

  .phase3-menu-number {
    color: rgba(255,255,255,.36) !important;
    font-size: .50rem !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .phase3-menu-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .66rem !important;
    line-height: 1.05 !important;
    letter-spacing: .09em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .phase3-menu-state {
    color: rgba(255,255,255,.42) !important;
    font-size: .43rem !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .phase3-menu-option.is-active .phase3-menu-state {
    color: rgba(146,255,180,.74) !important;
  }

  .phase3-panel.is-open {
    margin-top: clamp(10px, 2vh, 16px) !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .phase3-menu-toggle,
  .phase3-menu-popover {
    display: none !important;
  }
}

/* Phase 6.12: mobile pop-up nav backdrop layer.
   The menu stays above everything while the full page behind it dims and blurs. */
.phase3-mobile-menu-backdrop {
  display: none;
}

@media (max-width: 760px) and (orientation: portrait) {
  html.phase3-mobile-menu-open,
  body.phase3-mobile-menu-open {
    overflow-x: hidden !important;
  }

  .phase3-mobile-menu-backdrop {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 14%, rgba(146,255,180,.075), transparent 34%),
      rgba(0,0,0,.48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9990 !important;
    backdrop-filter: blur(11px) brightness(.62) saturate(.95) !important;
    -webkit-backdrop-filter: blur(11px) brightness(.62) saturate(.95) !important;
    transition: opacity .20s ease, visibility .20s ease !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .phase3-mobile-menu-backdrop.is-visible,
  body.phase3-mobile-menu-open .phase3-mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.phase3-mobile-menu-open .phase3-nav-row {
    z-index: 10010 !important;
  }

  body.phase3-mobile-menu-open .phase3-menu-toggle {
    position: relative !important;
    z-index: 10030 !important;
  }

  body.phase3-mobile-menu-open .phase3-menu-popover {
    position: fixed !important;
    top: max(74px, calc(env(safe-area-inset-top, 0px) + 62px)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(86vw, 344px) !important;
    max-height: min(72dvh, 560px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    z-index: 10020 !important;
    transform: translate(-50%, -10px) scale(.975) !important;
    box-shadow:
      0 34px 96px rgba(0,0,0,.62),
      0 0 0 1px rgba(255,255,255,.04),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  body.phase3-mobile-menu-open .phase3-nav-row.is-menu-open .phase3-menu-popover {
    transform: translate(-50%, 0) scale(1) !important;
  }
}

/* Phase 6.13: mobile popup navigation layer repair.
   Android Chrome screenshots showed the previous popup trapped in the transformed
   page stack, letting social/contact/footer layers paint above it. This moves the
   visible menu to a true body-level fixed layer and suppresses the original in-stage
   popover while the menu is open. */
.phase3-mobile-section-menu-layer {
  display: none;
}

@media (max-width: 760px) and (orientation: portrait) {
  .phase3-mobile-menu-backdrop {
    z-index: 2147483200 !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(146,255,180,.09), transparent 38%),
      radial-gradient(circle at 50% 100%, rgba(255,255,255,.035), transparent 48%),
      rgba(0,0,0,.60) !important;
    backdrop-filter: blur(15px) brightness(.58) saturate(.95) !important;
    -webkit-backdrop-filter: blur(15px) brightness(.58) saturate(.95) !important;
  }

  .phase3-mobile-section-menu-layer {
    display: grid !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483400 !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 14px !important;
    padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(22px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) scale(.99) !important;
    transition: opacity .20s ease, visibility .20s ease, transform .24s cubic-bezier(.2,.8,.2,1) !important;
  }

  .phase3-mobile-section-menu-layer.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translateY(0) scale(1) !important;
  }

  .phase3-mobile-section-menu-panel {
    width: min(86vw, 380px) !important;
    max-width: calc(100vw - 34px) !important;
    max-height: min(68dvh, 560px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 26px !important;
    padding: 14px !important;
    background:
      radial-gradient(circle at 50% -14%, rgba(146,255,180,.13), transparent 42%),
      linear-gradient(180deg, rgba(24,24,24,.92), rgba(4,4,4,.82)) !important;
    box-shadow:
      0 34px 110px rgba(0,0,0,.72),
      0 0 0 1px rgba(255,255,255,.035),
      inset 0 1px 0 rgba(255,255,255,.13) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    transform: translateY(10px) scale(.975) !important;
    transition: transform .24s cubic-bezier(.2,.8,.2,1) !important;
  }

  .phase3-mobile-section-menu-layer.is-visible .phase3-mobile-section-menu-panel {
    transform: translateY(0) scale(1) !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-head {
    padding: 5px 6px 12px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-list {
    gap: 8px !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-option {
    min-height: 50px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.035) !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-option.is-active {
    background: rgba(146,255,180,.095) !important;
    border-color: rgba(146,255,180,.34) !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-name {
    font-size: .70rem !important;
    letter-spacing: .105em !important;
  }

  .phase3-mobile-section-menu-layer .phase3-menu-state {
    font-size: .45rem !important;
  }

  .phase3-menu-layer-close {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(146,255,180,.34) !important;
    background: rgba(0,0,0,.42) !important;
    color: rgba(255,255,255,.90) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.56), 0 0 28px rgba(146,255,180,.08), inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .phase3-menu-layer-close span,
  .phase3-menu-layer-close span::before,
  .phase3-menu-layer-close span::after {
    display: block !important;
    width: 19px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .phase3-menu-layer-close span {
    position: relative !important;
    background: transparent !important;
  }

  .phase3-menu-layer-close span::before,
  .phase3-menu-layer-close span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }

  .phase3-menu-layer-close span::before { transform: rotate(45deg) !important; }
  .phase3-menu-layer-close span::after { transform: rotate(-45deg) !important; }

  body.phase3-mobile-menu-open .phase3-nav-row .phase3-menu-popover {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.phase3-mobile-menu-open .phase3-nav-row .phase3-menu-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.phase3-mobile-menu-open .stage,
  body.phase3-mobile-menu-open .contact-row,
  body.phase3-mobile-menu-open .copyright,
  body.phase3-mobile-menu-open .phase3-global-control,
  body.phase3-mobile-menu-open .phase3-global-control-footer {
    filter: blur(5px) brightness(.62) saturate(.88) !important;
    -webkit-filter: blur(5px) brightness(.62) saturate(.88) !important;
    pointer-events: none !important;
  }

  body.phase3-mobile-menu-open .contact-row,
  body.phase3-mobile-menu-open .copyright,
  body.phase3-mobile-menu-open .social-row,
  body.phase3-mobile-menu-open .phase3-global-control,
  body.phase3-mobile-menu-open .phase3-global-control-footer {
    z-index: 1 !important;
  }
}

/* Phase 6.14: mobile carousel media/text alignment repair.
   Android Chrome screenshots showed media frames and text blocks using several
   older mobile overrides at once, causing uneven horizontal/vertical alignment.
   This final mobile-only layer normalizes card centering, media placement and
   text padding without changing desktop. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-carousel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-inline: auto !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .phase3-scroll {
    width: min(92vw, 382px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
    padding-top: 2px !important;
    padding-bottom: 8px !important;
    scroll-padding-inline: max(0px, var(--p3-edge-space, 0px)) !important;
    box-sizing: border-box !important;
  }

  .phase3-track {
    align-items: center !important;
    gap: 12px !important;
  }

  .phase3-card {
    box-sizing: border-box !important;
    margin-inline: 0 !important;
    text-align: left !important;
    transform-origin: center center !important;
  }

  .phase3-card .phase3-art,
  .phase3-card .phase3-content,
  .phase3-card .phase3-heading,
  .phase3-card .phase3-title-line,
  .phase3-card .phase3-title,
  .phase3-card .phase3-subtitle,
  .phase3-card .phase3-latest-date {
    box-sizing: border-box !important;
  }

  /* Compact audio/discography cards: keep the efficient image-left/text-right
     design, but remove the older top padding that made text sit too low. */
  .phase3-card:not([data-section="latest"]):not([data-section="side_projects"]):not([data-section="biography"]):not(.is-social-card):not(.is-project-card):not(.is-preset-other_website_projects):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) {
    width: min(84vw, 336px) !important;
    max-width: calc(100vw - 44px) !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    grid-template-areas: "art content" "links links" "player player" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: center !important;
    justify-items: stretch !important;
    padding: 12px !important;
  }

  .phase3-card:not([data-section="latest"]):not([data-section="side_projects"]):not([data-section="biography"]):not(.is-social-card):not(.is-project-card):not(.is-preset-other_website_projects):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art {
    grid-area: art !important;
    width: 66px !important;
    height: 66px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .phase3-card:not([data-section="latest"]):not([data-section="side_projects"]):not([data-section="biography"]):not(.is-social-card):not(.is-project-card):not(.is-preset-other_website_projects):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    align-content: center !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  /* Media/editorial cards: use one clean vertical stack on mobile. The media and
     all text now share the same left/right edge, fixing the visible offset in
     Latest, Collaborations social cards, and Other Projects. */
  .phase3-card[data-section="latest"],
  .phase3-card[data-section="side_projects"],
  .phase3-card.is-social-card,
  .phase3-card.is-project-card,
  .phase3-card.is-preset-other_website_projects,
  .phase3-card[data-card-preset="large_social_media_post"],
  .phase3-card[data-card-preset="small_social_media_post"],
  .phase3-card[data-card-preset="other_website_projects"] {
    width: min(84vw, 342px) !important;
    max-width: calc(100vw - 44px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "art" "content" "links" "player" !important;
    align-items: start !important;
    justify-items: stretch !important;
    row-gap: 11px !important;
    column-gap: 0 !important;
    padding: 14px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .phase3-card[data-section="latest"] > .phase3-art,
  .phase3-card[data-section="side_projects"] > .phase3-art,
  .phase3-card.is-social-card > .phase3-art,
  .phase3-card.is-project-card > .phase3-art,
  .phase3-card.is-preset-other_website_projects > .phase3-art,
  .phase3-card[data-card-preset="large_social_media_post"] > .phase3-art,
  .phase3-card[data-card-preset="small_social_media_post"] > .phase3-art,
  .phase3-card[data-card-preset="other_website_projects"] > .phase3-art {
    grid-area: art !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
    border-radius: 13px !important;
  }

  .phase3-card[data-section="latest"] > .phase3-content,
  .phase3-card[data-section="side_projects"] > .phase3-content,
  .phase3-card.is-social-card > .phase3-content,
  .phase3-card.is-project-card > .phase3-content,
  .phase3-card.is-preset-other_website_projects > .phase3-content,
  .phase3-card[data-card-preset="large_social_media_post"] > .phase3-content,
  .phase3-card[data-card-preset="small_social_media_post"] > .phase3-content,
  .phase3-card[data-card-preset="other_website_projects"] > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start !important;
    align-content: start !important;
    justify-self: stretch !important;
    gap: 7px !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] .phase3-heading,
  .phase3-card[data-section="side_projects"] .phase3-heading,
  .phase3-card.is-social-card .phase3-heading,
  .phase3-card.is-project-card .phase3-heading,
  .phase3-card.is-preset-other_website_projects .phase3-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] .phase3-title,
  .phase3-card[data-section="side_projects"] .phase3-title,
  .phase3-card.is-social-card .phase3-title,
  .phase3-card.is-project-card .phase3-title,
  .phase3-card.is-preset-other_website_projects .phase3-title {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(.76rem, 3.25vw, .94rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .055em !important;
  }

  .phase3-card[data-section="latest"] .phase3-subtitle,
  .phase3-card[data-section="side_projects"] .phase3-subtitle,
  .phase3-card.is-social-card .phase3-subtitle,
  .phase3-card.is-project-card .phase3-subtitle,
  .phase3-card.is-preset-other_website_projects .phase3-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: clamp(.50rem, 2.18vw, .62rem) !important;
    line-height: 1.22 !important;
    letter-spacing: .045em !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-date {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: clamp(.50rem, 2.12vw, .60rem) !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-badge-stack,
  .phase3-latest-badge-stack {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    align-items: flex-end !important;
  }

  .phase3-latest-network-badge,
  .phase3-project-network-badge {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    max-width: 86px !important;
  }

  .phase3-card[data-section="side_projects"] .phase3-project-network-badge,
  .phase3-card.is-project-card .phase3-project-network-badge,
  .phase3-card.is-preset-other_website_projects .phase3-project-network-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }

  .phase3-card[data-section="side_projects"] .phase3-links,
  .phase3-card.is-project-card .phase3-links,
  .phase3-card.is-preset-other_website_projects .phase3-links,
  .phase3-card[data-section="latest"] .phase3-links,
  .phase3-card.is-social-card .phase3-links {
    grid-area: links !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 9px !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-chip,
  .phase3-card.is-social-card .phase3-latest-chip {
    left: 8px !important;
    bottom: 8px !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-play,
  .phase3-card.is-social-card .phase3-latest-play {
    width: 34px !important;
    height: 34px !important;
  }

  /* Spotify player-only cards keep the player-first full-width behavior, but are
     centered with the same mobile shell. */
  .phase3-card.has-spotify-public-player,
  .phase3-card.is-spotify-public-card,
  .phase3-card[data-card-preset="spotify_public_web_player"],
  .phase3-card.is-preset-spotify_public_web_player {
    width: min(84vw, 342px) !important;
    max-width: calc(100vw - 44px) !important;
    margin-inline: 0 !important;
    padding: 12px !important;
    justify-items: stretch !important;
  }
}

/* Phase 6.15: mobile text/thumbnail edge lock.
   Android portrait cards can still inherit older preset-specific widths that make
   text start wider/earlier than the visible 16:9 thumbnail. This final mobile
   layer locks media/editorial card text to the exact same centered column as the
   thumbnail: equal width, equal left edge, equal right edge. Desktop untouched. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-card[data-section="latest"],
  .phase3-card[data-section="side_projects"],
  .phase3-card.is-social-card,
  .phase3-card.is-project-card,
  .phase3-card.is-preset-other_website_projects,
  .phase3-card[data-card-preset="large_social_media_post"],
  .phase3-card[data-card-preset="small_social_media_post"],
  .phase3-card[data-card-preset="other_website_projects"] {
    --phase6-mobile-media-text-width: min(100%, 296px);
    justify-items: center !important;
  }

  .phase3-card[data-section="latest"] > .phase3-art,
  .phase3-card[data-section="side_projects"] > .phase3-art,
  .phase3-card.is-social-card > .phase3-art,
  .phase3-card.is-project-card > .phase3-art,
  .phase3-card.is-preset-other_website_projects > .phase3-art,
  .phase3-card[data-card-preset="large_social_media_post"] > .phase3-art,
  .phase3-card[data-card-preset="small_social_media_post"] > .phase3-art,
  .phase3-card[data-card-preset="other_website_projects"] > .phase3-art,
  .phase3-card[data-section="latest"] > .phase3-content,
  .phase3-card[data-section="side_projects"] > .phase3-content,
  .phase3-card.is-social-card > .phase3-content,
  .phase3-card.is-project-card > .phase3-content,
  .phase3-card.is-preset-other_website_projects > .phase3-content,
  .phase3-card[data-card-preset="large_social_media_post"] > .phase3-content,
  .phase3-card[data-card-preset="small_social_media_post"] > .phase3-content,
  .phase3-card[data-card-preset="other_website_projects"] > .phase3-content,
  .phase3-card[data-section="latest"] > .phase3-links,
  .phase3-card[data-section="side_projects"] > .phase3-links,
  .phase3-card.is-social-card > .phase3-links,
  .phase3-card.is-project-card > .phase3-links,
  .phase3-card.is-preset-other_website_projects > .phase3-links,
  .phase3-card[data-card-preset="large_social_media_post"] > .phase3-links,
  .phase3-card[data-card-preset="small_social_media_post"] > .phase3-links,
  .phase3-card[data-card-preset="other_website_projects"] > .phase3-links {
    width: var(--phase6-mobile-media-text-width) !important;
    max-width: var(--phase6-mobile-media-text-width) !important;
    justify-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .phase3-card[data-section="latest"] .phase3-heading,
  .phase3-card[data-section="side_projects"] .phase3-heading,
  .phase3-card.is-social-card .phase3-heading,
  .phase3-card.is-project-card .phase3-heading,
  .phase3-card.is-preset-other_website_projects .phase3-heading,
  .phase3-card[data-card-preset="large_social_media_post"] .phase3-heading,
  .phase3-card[data-card-preset="small_social_media_post"] .phase3-heading,
  .phase3-card[data-card-preset="other_website_projects"] .phase3-heading,
  .phase3-card[data-section="latest"] .phase3-title-line,
  .phase3-card[data-section="side_projects"] .phase3-title-line,
  .phase3-card.is-social-card .phase3-title-line,
  .phase3-card.is-project-card .phase3-title-line,
  .phase3-card.is-preset-other_website_projects .phase3-title-line,
  .phase3-card[data-card-preset="large_social_media_post"] .phase3-title-line,
  .phase3-card[data-card-preset="small_social_media_post"] .phase3-title-line,
  .phase3-card[data-card-preset="other_website_projects"] .phase3-title-line,
  .phase3-card[data-section="latest"] .phase3-title,
  .phase3-card[data-section="side_projects"] .phase3-title,
  .phase3-card.is-social-card .phase3-title,
  .phase3-card.is-project-card .phase3-title,
  .phase3-card.is-preset-other_website_projects .phase3-title,
  .phase3-card[data-card-preset="large_social_media_post"] .phase3-title,
  .phase3-card[data-card-preset="small_social_media_post"] .phase3-title,
  .phase3-card[data-card-preset="other_website_projects"] .phase3-title,
  .phase3-card[data-section="latest"] .phase3-subtitle,
  .phase3-card[data-section="side_projects"] .phase3-subtitle,
  .phase3-card.is-social-card .phase3-subtitle,
  .phase3-card.is-project-card .phase3-subtitle,
  .phase3-card.is-preset-other_website_projects .phase3-subtitle,
  .phase3-card[data-card-preset="large_social_media_post"] .phase3-subtitle,
  .phase3-card[data-card-preset="small_social_media_post"] .phase3-subtitle,
  .phase3-card[data-card-preset="other_website_projects"] .phase3-subtitle,
  .phase3-card[data-section="latest"] .phase3-latest-date,
  .phase3-card.is-social-card .phase3-latest-date {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-media-link,
  .phase3-card[data-section="side_projects"] .phase3-project-art-link,
  .phase3-card.is-project-card .phase3-project-art-link,
  .phase3-card.is-social-card .phase3-latest-media-link {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phase 6.16: mobile unified editorial card style.
   Latest Posts and Other Projects now share one professional mobile card language,
   matching the clean 'Minds Ensemble' style: one centered 16:9 media/poster block,
   then text and actions locked to the exact same column, independent of whether the
   source is YouTube, SoundCloud, Instagram, Patreon, or a normal website/project. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-card[data-section="latest"],
  .phase3-card[data-section="side_projects"] {
    --phase6-mobile-editorial-column: min(100%, 304px);
    --phase6-mobile-editorial-gap: 10px;
    width: min(86vw, 352px) !important;
    max-width: calc(100vw - 34px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "art"
      "content"
      "links"
      "player" !important;
    justify-items: center !important;
    align-items: start !important;
    row-gap: var(--phase6-mobile-editorial-gap) !important;
    column-gap: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] > .phase3-art,
  .phase3-card[data-section="side_projects"] > .phase3-art {
    grid-area: art !important;
    width: var(--phase6-mobile-editorial-column) !important;
    max-width: var(--phase6-mobile-editorial-column) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .phase3-card[data-section="latest"] > .phase3-art img,
  .phase3-card[data-section="side_projects"] > .phase3-art img,
  .phase3-card[data-section="latest"] > .phase3-art iframe,
  .phase3-card[data-section="side_projects"] > .phase3-art iframe,
  .phase3-card[data-section="latest"] > .phase3-art .phase3-latest-media-link,
  .phase3-card[data-section="side_projects"] > .phase3-art .phase3-project-art-link,
  .phase3-card[data-section="latest"] > .phase3-art .phase3-latest-media-trigger,
  .phase3-card[data-section="side_projects"] > .phase3-art .phase3-latest-media-trigger {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    border-radius: inherit !important;
  }

  .phase3-card[data-section="latest"] > .phase3-content,
  .phase3-card[data-section="side_projects"] > .phase3-content,
  .phase3-card[data-section="latest"] > .phase3-links,
  .phase3-card[data-section="side_projects"] > .phase3-links {
    width: var(--phase6-mobile-editorial-column) !important;
    max-width: var(--phase6-mobile-editorial-column) !important;
    min-width: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] > .phase3-content,
  .phase3-card[data-section="side_projects"] > .phase3-content {
    grid-area: content !important;
    display: block !important;
  }

  .phase3-card[data-section="latest"] .phase3-heading,
  .phase3-card[data-section="side_projects"] .phase3-heading,
  .phase3-card[data-section="latest"] .phase3-title-line,
  .phase3-card[data-section="side_projects"] .phase3-title-line,
  .phase3-card[data-section="latest"] .phase3-title,
  .phase3-card[data-section="side_projects"] .phase3-title,
  .phase3-card[data-section="latest"] .phase3-title-text,
  .phase3-card[data-section="side_projects"] .phase3-title-text,
  .phase3-card[data-section="latest"] .phase3-latest-date,
  .phase3-card[data-section="side_projects"] .phase3-latest-date,
  .phase3-card[data-section="latest"] .phase3-subtitle,
  .phase3-card[data-section="side_projects"] .phase3-subtitle,
  .phase3-card[data-section="side_projects"] .phase3-project-inline-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"] .phase3-heading,
  .phase3-card[data-section="side_projects"] .phase3-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .phase3-card[data-section="latest"] .phase3-title-line,
  .phase3-card[data-section="side_projects"] .phase3-title-line {
    display: block !important;
    min-height: 0 !important;
  }

  .phase3-card[data-section="latest"] .phase3-title,
  .phase3-card[data-section="side_projects"] .phase3-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(.78rem, 3.32vw, .96rem) !important;
    line-height: 1.14 !important;
    letter-spacing: .06em !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-date,
  .phase3-card[data-section="side_projects"] .phase3-latest-date {
    display: block !important;
    font-size: clamp(.50rem, 2.14vw, .61rem) !important;
    line-height: 1.25 !important;
    letter-spacing: .10em !important;
    opacity: .66 !important;
  }

  .phase3-card[data-section="latest"] .phase3-subtitle,
  .phase3-card[data-section="side_projects"] .phase3-subtitle {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(.51rem, 2.24vw, .64rem) !important;
    line-height: 1.24 !important;
    letter-spacing: .045em !important;
    opacity: .72 !important;
  }

  .phase3-card[data-section="latest"] > .phase3-links,
  .phase3-card[data-section="side_projects"] > .phase3-links {
    grid-area: links !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-badge-stack,
  .phase3-card[data-section="latest"] .phase3-latest-network-badge,
  .phase3-card[data-section="side_projects"] .phase3-project-network-badge {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-network-badge,
  .phase3-card[data-section="side_projects"] .phase3-project-network-badge {
    max-width: 92px !important;
    min-height: 22px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: .55rem !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-chip,
  .phase3-card[data-section="side_projects"] .phase3-latest-chip {
    left: 9px !important;
    bottom: 9px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .phase3-card[data-section="latest"] .phase3-player,
  .phase3-card[data-section="side_projects"] .phase3-player,
  .phase3-card[data-section="latest"] .phase3-track-browser,
  .phase3-card[data-section="side_projects"] .phase3-track-browser,
  .phase3-card[data-section="latest"] .phase3-active-song,
  .phase3-card[data-section="side_projects"] .phase3-active-song,
  .phase3-card[data-section="latest"] .phase3-release-badge,
  .phase3-card[data-section="side_projects"] .phase3-release-badge {
    display: none !important;
  }
}

/* Phase 7: mobile-only unified editorial carousel cards.
   Every non-player media/editorial card now uses the same mobile structure:
   16:9 thumbnail/poster on top, platform/project badge top-right, then title,
   date/description and actions below. Local music/player cards and Spotify
   public web-player cards are deliberately excluded. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) {
    --phase7-mobile-editorial-width: min(88vw, 352px);
    --phase7-mobile-editorial-column: min(100%, 306px);
    width: var(--phase7-mobile-editorial-width) !important;
    max-width: calc(100vw - 30px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "art"
      "content"
      "links" !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art {
    grid-area: art !important;
    width: var(--phase7-mobile-editorial-column) !important;
    max-width: var(--phase7-mobile-editorial-column) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > *,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > * {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: inherit !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img {
    object-fit: cover !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links {
    width: var(--phase7-mobile-editorial-column) !important;
    max-width: var(--phase7-mobile-editorial-column) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-content {
    grid-area: content !important;
    display: block !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line {
    display: block !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: clamp(.78rem, 3.32vw, .96rem) !important;
    line-height: 1.14 !important;
    letter-spacing: .055em !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-date,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-date,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-date {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: clamp(.50rem, 2.14vw, .61rem) !important;
    line-height: 1.25 !important;
    letter-spacing: .10em !important;
    opacity: .66 !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(.51rem, 2.24vw, .64rem) !important;
    line-height: 1.24 !important;
    letter-spacing: .045em !important;
    opacity: .72 !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-links {
    grid-area: links !important;
    display: flex !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
    max-width: calc(100% - 20px) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 12 !important;
    max-width: 104px !important;
    transform: none !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-network-badge,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-network-badge,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-network-badge,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-project-network-badge {
    min-height: 22px !important;
    max-width: 104px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: .52rem !important;
    line-height: 1 !important;
    letter-spacing: .105em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-chip,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-chip,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-chip {
    left: 9px !important;
    bottom: 9px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-play,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-play,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-play {
    width: 34px !important;
    height: 34px !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge,
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge,
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge,
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge,
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge {
    display: none !important;
  }
}

/* Phase 7.2: mobile navigation performance + Android tap-highlight cleanup.
   Android Chrome was dropping FPS when the carousel section menu opened because
   the mobile nav used several fullscreen blur/backdrop-filter/filter layers at
   once. This final mobile-only layer keeps the same popup behavior, but changes
   the expensive effects to opacity-only dimming and removes accidental blue tap
   / selection highlights from interactive public UI controls. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html,
  body,
  .stage,
  .phase3-sections,
  .phase3-sections *,
  .social-row,
  .social-row *,
  .contact-row,
  .contact-row *,
  .copyright,
  .copyright *,
  .phase3-global-control,
  .phase3-global-control *,
  .phase3-global-control-footer,
  .phase3-global-control-footer * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }

  .phase3-sections,
  .phase3-sections button,
  .phase3-sections a,
  .phase3-sections [role="button"],
  .phase3-sections [role="menuitem"],
  .phase3-sections .phase3-card,
  .phase3-sections .phase3-art,
  .phase3-sections .phase3-latest-thumb,
  .phase3-sections .phase3-website-frame,
  .phase3-sections .phase3-links,
  .phase3-sections .phase3-link,
  .social-row,
  .social-row button,
  .social-row a,
  .dropdown,
  .dropdown *,
  .contact-row,
  .contact-row a,
  .copyright,
  .phase3-global-control,
  .phase3-global-control-footer,
  .phase3-global-control button,
  .phase3-global-control-footer button {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation;
  }

  .phase3-sections *::selection,
  .social-row *::selection,
  .contact-row *::selection,
  .copyright::selection {
    background: transparent !important;
    color: inherit !important;
  }

  .phase3-menu-toggle,
  .phase3-menu-popover,
  .phase3-mobile-menu-backdrop,
  .phase3-mobile-section-menu-layer,
  .phase3-mobile-section-menu-panel,
  .phase3-menu-layer-close,
  .phase3-menu-option,
  .phase3-menu-option * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  .phase3-menu-toggle,
  .phase3-menu-popover,
  .phase3-mobile-section-menu-panel,
  .phase3-menu-layer-close,
  .phase3-latest-network-badge,
  .phase3-project-network-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .phase3-menu-toggle {
    background: rgba(0,0,0,.38) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
    transition: opacity .12s linear, border-color .12s linear, background .12s linear !important;
    will-change: opacity;
  }

  .phase3-menu-toggle:hover,
  .phase3-menu-toggle:focus-visible,
  .phase3-nav-row.is-menu-open .phase3-menu-toggle {
    transform: none !important;
    background: rgba(0,0,0,.48) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .phase3-mobile-menu-backdrop {
    background: rgba(0,0,0,.58) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition: opacity .13s linear, visibility 0s linear .13s !important;
    will-change: opacity;
    contain: strict;
  }

  .phase3-mobile-menu-backdrop.is-visible,
  body.phase3-mobile-menu-open .phase3-mobile-menu-backdrop {
    transition: opacity .13s linear, visibility 0s linear 0s !important;
  }

  .phase3-mobile-section-menu-layer {
    transform: none !important;
    transition: opacity .13s linear, visibility 0s linear .13s !important;
    will-change: opacity;
    contain: layout style paint;
  }

  .phase3-mobile-section-menu-layer.is-visible {
    transform: none !important;
    transition: opacity .13s linear, visibility 0s linear 0s !important;
  }

  .phase3-mobile-section-menu-panel {
    background: linear-gradient(180deg, rgba(24,24,24,.96), rgba(3,3,3,.92)) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    contain: content;
    -webkit-overflow-scrolling: touch;
  }

  .phase3-mobile-section-menu-layer.is-visible .phase3-mobile-section-menu-panel {
    transform: none !important;
  }

  .phase3-menu-layer-close {
    background: rgba(0,0,0,.70) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background .12s linear, border-color .12s linear !important;
  }

  body.phase3-mobile-menu-open .stage,
  body.phase3-mobile-menu-open .contact-row,
  body.phase3-mobile-menu-open .copyright,
  body.phase3-mobile-menu-open .phase3-global-control,
  body.phase3-mobile-menu-open .phase3-global-control-footer {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: .42 !important;
    transition: opacity .13s linear !important;
    pointer-events: none !important;
  }

  body:not(.phase3-mobile-menu-open) .stage,
  body:not(.phase3-mobile-menu-open) .contact-row,
  body:not(.phase3-mobile-menu-open) .copyright,
  body:not(.phase3-mobile-menu-open) .phase3-global-control,
  body:not(.phase3-mobile-menu-open) .phase3-global-control-footer {
    opacity: 1;
  }

  .phase3-menu-option {
    transition: background .10s linear, border-color .10s linear, color .10s linear !important;
  }

  .phase3-menu-option:hover,
  .phase3-menu-option:focus-visible {
    transform: none !important;
  }

  .phase3-menu-option:focus,
  .phase3-menu-toggle:focus,
  .phase3-menu-layer-close:focus,
  .phase3-link:focus,
  .phase3-latest-network-badge:focus,
  .phase3-project-network-badge:focus,
  .phase3-latest-play:focus,
  .phase3-arrow:focus,
  .phase3-play:focus {
    outline: none !important;
  }

  .phase3-menu-option:focus-visible,
  .phase3-menu-toggle:focus-visible,
  .phase3-menu-layer-close:focus-visible,
  .phase3-link:focus-visible,
  .phase3-latest-network-badge:focus-visible,
  .phase3-project-network-badge:focus-visible,
  .phase3-latest-play:focus-visible,
  .phase3-arrow:focus-visible,
  .phase3-play:focus-visible {
    outline: 1px solid rgba(255,255,255,.42) !important;
    outline-offset: 3px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .phase3-mobile-menu-backdrop,
    .phase3-mobile-section-menu-layer,
    .phase3-mobile-section-menu-panel,
    .phase3-menu-toggle,
    .phase3-menu-layer-close,
    .phase3-menu-option {
      transition: none !important;
      animation: none !important;
    }
  }
}


/* Phase 7.3: mobile split inline navigation.
   Restores the original desktop-style text navigation on mobile and removes the
   popup section menu layer. Mobile portrait now has a top nav row above the
   carousel and a bottom nav row below the carousel scrollbar. Desktop remains
   on the original single full nav row. */
.phase3-tabs-mobile-top,
.phase3-mobile-bottom-nav-row {
  display: none !important;
}

@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-menu-toggle,
  .phase3-menu-popover,
  .phase3-mobile-menu-backdrop,
  .phase3-mobile-section-menu-layer,
  .phase3-mobile-section-menu-panel,
  .phase3-menu-layer-close {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.phase3-mobile-menu-open .stage,
  body.phase3-mobile-menu-open .contact-row,
  body.phase3-mobile-menu-open .copyright,
  body.phase3-mobile-menu-open .phase3-global-control,
  body.phase3-mobile-menu-open .phase3-global-control-footer,
  html.phase3-mobile-menu-open .stage,
  html.phase3-mobile-menu-open .contact-row,
  html.phase3-mobile-menu-open .copyright,
  html.phase3-mobile-menu-open .phase3-global-control,
  html.phase3-mobile-menu-open .phase3-global-control-footer {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    pointer-events: auto !important;
  }

  .phase3-nav-row {
    width: min(100%, calc(100vw - 20px)) !important;
    min-height: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 6 !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .phase3-nav-row .phase3-tabs.phase3-tabs-all {
    display: none !important;
  }

  .phase3-nav-row .phase3-tabs.phase3-tabs-mobile-top,
  .phase3-mobile-bottom-nav-row .phase3-tabs.phase3-tabs-mobile-bottom {
    display: flex !important;
    width: min(94vw, 390px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(4px, 1.35vw, 9px) !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .phase3-mobile-bottom-nav-row {
    display: flex !important;
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    justify-content: center !important;
    align-items: center !important;
    margin: clamp(8px, 1.6vh, 14px) auto 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
  }

  .phase3-tabs-mobile-top .phase3-tab,
  .phase3-tabs-mobile-bottom .phase3-tab,
  .phase3-tabs-mobile-top .phase3-slash,
  .phase3-tabs-mobile-bottom .phase3-slash {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-size: clamp(.63rem, 2.58vw, .84rem) !important;
    letter-spacing: .035em !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-transform: uppercase !important;
  }

  .phase3-tabs-mobile-top .phase3-tab,
  .phase3-tabs-mobile-bottom .phase3-tab {
    padding-bottom: .28rem !important;
  }

  .phase3-tabs-mobile-top .phase3-slash,
  .phase3-tabs-mobile-bottom .phase3-slash {
    width: .28em !important;
    opacity: .36 !important;
    transform: scaleX(.72) !important;
    padding-bottom: .28rem !important;
  }

  .phase3-panel.is-open {
    margin-top: clamp(9px, 1.7vh, 15px) !important;
  }

  .phase3-panel:not(.is-open) + .phase3-mobile-bottom-nav-row {
    margin-top: clamp(8px, 1.4vh, 12px) !important;
  }

  .phase3-sections {
    margin-bottom: clamp(8px, 1.35vh, 13px) !important;
  }
}


/* Phase 7.4: larger mobile split navigation typography.
   Mobile-only polish: enlarges the restored inline navigation text by roughly
   50% while keeping desktop navigation untouched. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-tabs-mobile-top .phase3-tab,
  .phase3-tabs-mobile-bottom .phase3-tab,
  .phase3-tabs-mobile-top .phase3-slash,
  .phase3-tabs-mobile-bottom .phase3-slash {
    font-size: clamp(.63rem, 2.58vw, .84rem) !important;
  }
}

/* Phase 7.5: tighter idle mobile split navigation spacing.
   Mobile-only polish for the default closed/idle landing state: pulls the top
   navigation row closer to the title and keeps the two split nav rows closer
   together while leaving open carousel/player states and desktop untouched. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .title-shell {
    margin-bottom: clamp(5px, .85vh, 9px) !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-sections {
    margin-top: 0 !important;
    margin-bottom: clamp(6px, 1vh, 10px) !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-nav-row {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-panel:not(.is-open) + .phase3-mobile-bottom-nav-row,
  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-mobile-bottom-nav-row {
    margin-top: clamp(1px, .28vh, 4px) !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Phase 7.6: mobile lower-nav to social/footer breathing room.
   Mobile-only polish: keeps the split navigation rows tight near the title, but
   moves the social icon/contact/footer group farther away from the lower nav row
   in the default closed landing state. Open carousel/player layouts are left
   unchanged to protect vertical fit. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-sections {
    margin-bottom: clamp(22px, 3.6vh, 34px) !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .links {
    margin-top: clamp(2px, .45vh, 5px) !important;
  }
}

/* Phase 7.7: mobile Biography promo 16:9 + tighter photo/text gap.
   Mobile-only: changes Biography promo slideshow from portrait/square to a
   wide 16:9 image and reduces the stacked promo-to-copy gap by about 20%.
   Desktop Biography newspaper layout remains untouched. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    row-gap: 11px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
    width: min(100%, 306px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    position: relative !important;
    top: auto !important;
    align-self: start !important;
    justify-self: center !important;
  }

  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    padding-top: 40px !important;
    margin-top: 0 !important;
  }
}

/* Phase 7.8: mobile Biography promo-to-text closer.
   Mobile-only: pulls the Biography text block nearer to the 16:9 promo image
   without changing desktop Biography, navigation, or other carousel sections. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    gap: 7px !important;
    row-gap: 7px !important;
  }

  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Phase 7.9: mobile Biography text eased slightly away from promo.
   Mobile-only micro-adjustment: keeps the 16:9 promo image but restores a
   small amount of breathing room after the previous closer text patch. */
@media (max-width: 760px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    gap: 9px !important;
    row-gap: 9px !important;
  }

  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    padding-top: 2px !important;
    margin-top: 0 !important;
  }
}


/* Phase 7.10: mobile portrait lock + Other Projects duplicate CTA cleanup.
   Mobile browsers cannot always force OS/browser orientation unless the site is
   installed/fullscreen, so we request portrait via JS/manifest and block mobile
   landscape with a light overlay instead of allowing the layout to reflow. */
.phase3-card[data-section="side_projects"] .phase3-project-inline-link,
.phase3-card.is-project-card .phase3-project-inline-link,
.phase3-card[data-card-preset="other_website_projects"] .phase3-project-inline-link {
  display: none !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html,
  body {
    overflow: hidden !important;
    background: #000 !important;
  }

  body::before {
    content: "Portrait mode only";
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      radial-gradient(circle at 50% 36%, rgba(255,255,255,.10), transparent 34%),
      rgba(0,0,0,.96);
    color: rgba(255,255,255,.86);
    font-family: var(--title-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: clamp(.82rem, 2.8vh, 1.02rem);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    pointer-events: auto;
  }

  body::after {
    content: "Rotate your phone back to portrait.";
    position: fixed;
    left: 18px;
    right: 18px;
    top: calc(50% + 34px);
    z-index: 2147483647;
    color: rgba(255,255,255,.46);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(.62rem, 2.1vh, .78rem);
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
  }

  .page,
  .background-slide,
  .mobile-lava-lamp,
  .light-fields,
  .film-grain,
  .phase3-global-control {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Phase 7.11: Android Chrome mobile carousel anti-flicker pass.
   Mobile-only: avoid mask/repaint artifacts and defer heavy visual changes while
   the horizontal carousel is actively being touched/scrolled. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-scroll {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    contain: layout paint !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phase3-track,
  .phase3-card,
  .phase3-art,
  .phase3-art img,
  .phase3-latest-media-link,
  .phase3-project-art-link {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }

  .phase3-card,
  .phase3-card * {
    -webkit-tap-highlight-color: transparent !important;
  }

  .phase3-scroll.is-user-scrolling .phase3-card,
  .phase3-scroll.is-user-scrolling .phase3-card *,
  .phase3-scroll.is-user-scrolling .phase3-art img,
  .phase3-scroll.is-user-scrolling .phase3-biography-promo-slide {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }

  .phase3-scroll.is-user-scrolling .phase3-card {
    box-shadow: none !important;
  }
}


/* Phase 7.13: Android Chrome native-scroll stabilizer.
   The previous v7.12 touchend-controlled snap caused echo / horizontal position
   fighting on Android Chrome. This pass restores native touch scrolling and only
   keeps safe visual fixes: no mobile masks, no forced GPU card layers, no heavy
   transitions while the user scrolls. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-scroll {
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-size: auto !important;
    mask-size: auto !important;
    contain: none !important;
    transform: none !important;
    isolation: auto !important;
    will-change: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phase3-scroll.is-programmatic-scroll {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .phase3-track,
  .phase3-card,
  .phase3-card::before,
  .phase3-card::after,
  .phase3-art,
  .phase3-art img,
  .phase3-latest-media-link,
  .phase3-project-art-link,
  .phase3-biography-promo-slide {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .phase3-card {
    z-index: 1 !important;
    opacity: 1 !important;
  }

  .phase3-scroll.is-user-scrolling .phase3-card,
  .phase3-scroll.is-user-scrolling .phase3-card *,
  .phase3-scroll.is-user-scrolling .phase3-art img,
  .phase3-scroll.is-user-scrolling .phase3-biography-promo-slide {
    transition-property: none !important;
    animation: none !important;
    filter: none !important;
  }
}

/* Phase 7.14: Mobile carousel section-state reset.
   Prevent Android Chrome from carrying stale scroll/programmatic classes, delayed
   section timers, or dynamic height transitions from Discography into the other
   carousel sections. Native touch scrolling stays in charge; visual changes wait
   until the swipe has fully settled. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-scroll {
    transition-property: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phase3-scroll.is-user-scrolling,
  .phase3-scroll.is-user-scrolling .phase3-track,
  .phase3-scroll.is-user-scrolling .phase3-card,
  .phase3-scroll.is-user-scrolling .phase3-art,
  .phase3-scroll.is-user-scrolling .phase3-art img,
  .phase3-scroll.is-user-scrolling .phase3-latest-media-link,
  .phase3-scroll.is-user-scrolling .phase3-project-art-link,
  .phase3-scroll.is-user-scrolling .phase3-biography-promo-slide {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .phase3-scroll:not(.is-user-scrolling) .phase3-card {
    z-index: auto !important;
  }
}

/* Phase 7.15: Android Chrome stable mobile carousel mode.
   Repeated scroll-state fixes were not enough because Discography's mobile
   album/single layout classes could still resize the shell while Chrome was
   snapping. This final mobile-only layer removes dynamic height/margin/card
   transitions from the carousel browsing surface and keeps every section on a
   stable natural-height scroller. Desktop remains unchanged. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-panel,
  .phase3-panel.is-open,
  .phase3-carousel,
  .phase3-scroll,
  .phase3-track,
  .phase3-card,
  .phase3-card::before,
  .phase3-card::after,
  .phase3-art,
  .phase3-art img,
  .phase3-content,
  .phase3-links,
  .phase3-player,
  .phase3-track-browser,
  .phase3-latest-media-link,
  .phase3-project-art-link,
  .phase3-biography-promo-slide {
    transition-property: none !important;
    animation-name: none !important;
  }

  .phase3-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
    isolation: auto !important;
    perspective: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .phase3-track {
    align-items: flex-start !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  .phase3-card {
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    isolation: auto !important;
  }

  .phase3-card.is-playing,
  .phase3-card.is-current-mobile-card,
  .phase3-scroll:not(.is-user-scrolling) .phase3-card {
    z-index: 1 !important;
  }

  body.phase3-current-single .phase3-panel.is-open,
  body.phase3-current-album .phase3-panel.is-open,
  body.phase3-current-single .phase3-sections,
  body.phase3-current-album .phase3-sections {
    margin-top: inherit !important;
    margin-bottom: inherit !important;
  }

  body.phase3-current-album .phase3-tabs,
  body.phase3-current-single .phase3-tabs,
  body.phase3-current-album .phase3-tabs-mobile-top,
  body.phase3-current-single .phase3-tabs-mobile-top,
  body.phase3-current-album .phase3-tabs-mobile-bottom,
  body.phase3-current-single .phase3-tabs-mobile-bottom {
    transform: none !important;
  }

  .phase3-panel.is-section-fading-in .phase3-carousel,
  .phase3-panel.is-section-fading-out {
    animation: none !important;
    transform: none !important;
  }
}


/* Phase 7.24: desktop carousel scrollbar clearance + real Other Projects fade.
   Clean repair after the edge-fade experiments: no pseudo-element overlays, no
   black/grey gradient rectangles. Desktop fades are pure alpha masks on the
   actual scrollport. Mobile keeps the stable no-mask carousel path. */
@media (min-width: 761px) {
  .phase3-carousel,
  .phase3-carousel.phase3-carousel-latest,
  .phase3-carousel.phase3-carousel-side_projects {
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
  }

  .phase3-carousel::before,
  .phase3-carousel::after,
  .phase3-carousel.phase3-carousel-latest::before,
  .phase3-carousel.phase3-carousel-latest::after,
  .phase3-carousel.phase3-carousel-side_projects::before,
  .phase3-carousel.phase3-carousel-side_projects::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-scroll {
    width: min(668px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 2px !important;
    padding-bottom: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.24) transparent !important;
    --p3-side-fade: clamp(48px, 7vw, 82px) !important;
    -webkit-mask: linear-gradient(90deg,
      transparent 0,
      #000 var(--p3-side-fade),
      #000 calc(100% - var(--p3-side-fade)),
      transparent 100%) 0 0 / 100% 100% no-repeat !important;
    mask: linear-gradient(90deg,
      transparent 0,
      #000 var(--p3-side-fade),
      #000 calc(100% - var(--p3-side-fade)),
      transparent 100%) 0 0 / 100% 100% no-repeat !important;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 var(--p3-side-fade),
      #000 calc(100% - var(--p3-side-fade)),
      transparent 100%) !important;
    mask-image: linear-gradient(90deg,
      transparent 0,
      #000 var(--p3-side-fade),
      #000 calc(100% - var(--p3-side-fade)),
      transparent 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: 0 0 !important;
    mask-position: 0 0 !important;
    -webkit-mask-mode: alpha !important;
    mask-mode: alpha !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-scroll::-webkit-scrollbar {
    height: 4px !important;
  }
  .phase3-carousel:not(.is-single-item) .phase3-scroll::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .phase3-carousel:not(.is-single-item) .phase3-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22) !important;
    border-radius: 999px !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-track {
    align-items: flex-start !important;
    padding-bottom: 0 !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-card {
    margin-bottom: 0 !important;
  }

  /* Other Projects was not visibly fading because its active card occupied too
     much of the 668px scrollport, leaving no neighbouring card inside the right
     fade zone. Match Latest' professional desktop card proportion so the next
     card actually enters the mask and fades out smoothly. */
  .phase3-carousel.phase3-carousel-side_projects:not(.is-single-item) .phase3-scroll {
    width: min(668px, 100%) !important;
    --p3-side-fade: clamp(48px, 7vw, 82px) !important;
  }
  .phase3-carousel.phase3-carousel-side_projects:not(.is-single-item) .phase3-card[data-section="side_projects"] {
    width: min(551px, calc(100vw - 132px)) !important;
    max-width: min(551px, calc(100vw - 132px)) !important;
  }

  .phase3-carousel.is-single-item .phase3-scroll,
  .phase3-scroll.is-single-item {
    padding-bottom: 0 !important;
    scrollbar-width: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-size: auto !important;
    mask-size: auto !important;
  }
  .phase3-carousel.is-single-item .phase3-scroll::-webkit-scrollbar,
  .phase3-scroll.is-single-item::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel::before,
  .phase3-carousel::after,
  .phase3-carousel.phase3-carousel-latest::before,
  .phase3-carousel.phase3-carousel-latest::after,
  .phase3-carousel.phase3-carousel-side_projects::before,
  .phase3-carousel.phase3-carousel-side_projects::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .phase3-scroll,
  .phase3-carousel .phase3-scroll,
  .phase3-carousel:not(.is-single-item) .phase3-scroll,
  .phase3-carousel.phase3-carousel-latest .phase3-scroll,
  .phase3-carousel.phase3-carousel-side_projects .phase3-scroll {
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-size: auto !important;
    mask-size: auto !important;
    -webkit-mask-repeat: repeat !important;
    mask-repeat: repeat !important;
    background: transparent !important;
  }
}


/* Phase 7.25: mobile card width trim + desktop Other Projects fade parity.
   1) Mobile carousel cards are 10px narrower without changing the stable native
      scroll behavior.
   2) Desktop Other Projects uses the same fade mechanism, width and card-edge
      relationship as Latest: mask-only alpha fade on the scrollport, no overlays.
   3) Desktop scrollbar clearance returns to natural scroller height, with real
      bottom padding/margin instead of a forced inline height. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel .phase3-card {
    width: min(298px, calc(100vw - 58px)) !important;
    max-width: calc(100vw - 58px) !important;
  }

  .phase3-card[data-section="latest"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-section="digital_shop"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-section="side_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card.is-social-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card.is-project-card:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="large_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="small_social_media_post"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="instagram_reel_post_embed"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="other_website_projects"]:not(.has-audio):not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) {
    width: min(calc(86vw - 10px), 342px) !important;
    max-width: calc(100vw - 44px) !important;
  }

  .phase3-card.is-biography-card,
  .phase3-card[data-section="biography"],
  .phase3-card.is-preset-biography {
    width: min(612px, calc(100vw - 42px)) !important;
    max-width: min(612px, calc(100vw - 42px)) !important;
  }
}

@media (min-width: 761px) {
  .phase3-carousel:not(.is-single-item) .phase3-scroll {
    height: auto !important;
    padding-top: 2px !important;
    padding-bottom: 26px !important;
    margin-bottom: -4px !important;
    box-sizing: content-box !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-track {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .phase3-carousel:not(.is-single-item) .phase3-card {
    margin-bottom: 0 !important;
  }

  .phase3-carousel.phase3-carousel-side_projects {
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
  }

  .phase3-carousel.phase3-carousel-side_projects::before,
  .phase3-carousel.phase3-carousel-side_projects::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  .phase3-carousel.phase3-carousel-side_projects:not(.is-single-item) .phase3-scroll {
    width: min(668px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    --p3-side-fade: clamp(48px, 7vw, 82px) !important;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) 0 0 / 100% 100% no-repeat !important;
    mask: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) 0 0 / 100% 100% no-repeat !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--p3-side-fade), #000 calc(100% - var(--p3-side-fade)), transparent 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: 0 0 !important;
    mask-position: 0 0 !important;
  }

  .phase3-carousel.phase3-carousel-side_projects:not(.is-single-item) .phase3-track {
    background: transparent !important;
  }

  .phase3-carousel.phase3-carousel-side_projects:not(.is-single-item) .phase3-card[data-section="side_projects"] {
    width: min(668px, calc(100vw - 96px)) !important;
    max-width: min(668px, calc(100vw - 96px)) !important;
  }
}

/* Phase 7.26: mobile Other Projects CTA cleanup + Latest date visibility.
   Other Projects already has a top-right badge plus clickable artwork/title; the
   legacy bottom .phase3-links row can peek out as purple text on Android mobile.
   Hide that row only for mobile Other Projects and keep Latest date lines visible. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="side_projects"] > .phase3-links,
  .phase3-card[data-section="side_projects"] .phase3-links,
  .phase3-card[data-section="side_projects"] .phase3-link,
  .phase3-card[data-section="side_projects"] .phase3-extra-link,
  .phase3-card[data-section="side_projects"] .phase3-project-inline-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .phase3-card[data-section="latest"] .phase3-latest-date {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 761px) {
  .phase3-card[data-section="latest"] .phase3-latest-date {
    display: block !important;
    margin: 0 0 2px 0 !important;
    width: 100% !important;
    opacity: .68 !important;
    white-space: normal !important;
  }
}

/* Phase 7.27: desktop-only square Latest thumbnails/artworks.
   Keeps mobile untouched. Applies to all normal Latest media/artwork frames,
   including playable thumbnail frames, while leaving Spotify public-player cards alone. */
@media (min-width: 761px) {
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    min-height: 236px !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]).is-latest-compact {
    grid-template-columns: 164px minmax(0, 1fr) !important;
    min-height: 202px !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card),
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) {
    grid-template-columns: 184px minmax(0, 1fr) minmax(82px, auto) !important;
    min-height: 236px !important;
  }

  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card),
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) {
    grid-template-columns: 158px minmax(0, 1fr) minmax(76px, auto) !important;
    min-height: 198px !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) .phase3-art {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
    min-height: 180px !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]).is-latest-compact > .phase3-art,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]).is-latest-compact .phase3-art {
    width: 164px !important;
    height: 164px !important;
    min-width: 164px !important;
    min-height: 164px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) > .phase3-art,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) > .phase3-art,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) .phase3-art,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) .phase3-art {
    width: 184px !important;
    height: 184px !important;
    min-width: 184px !important;
    min-height: 184px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) > .phase3-art,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) > .phase3-art,
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) .phase3-art,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card) .phase3-art {
    width: 158px !important;
    height: 158px !important;
    min-width: 158px !important;
    min-height: 158px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art iframe,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art video,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-link,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-trigger,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-embed-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}


/* Phase 7.28: desktop Latest square-art fill polish.
   Keep the square 1:1 desktop Latest art frames, but make every thumbnail/artwork
   crop-fill the square instead of showing letterbox bars, background bands, or
   partially contained media. Spotify public-player cards remain excluded. */
@media (min-width: 761px) {
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art {
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > .phase3-latest-media-link,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > .phase3-latest-media-trigger,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art > .phase3-project-art-link {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    background: transparent !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art picture,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: transparent !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Phase 7.29: desktop Latest unified reference-card layout.
   The first merged Patreon+YouTube Latest card is the visual reference: every
   normal desktop Latest card now shares the same shell width, square artwork
   size, text lane, badge stack position, spacing, title/date/description rhythm,
   and square-cover media behavior. Mobile and Spotify public-player cards stay
   untouched. */
@media (min-width: 761px) {
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-section="latest"].is-latest-compact:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]),
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only),
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only),
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only),
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) {
    width: min(668px, calc(100vw - 96px)) !important;
    max-width: min(668px, calc(100vw - 96px)) !important;
    min-height: 236px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 184px minmax(0, 1fr) !important;
    grid-template-areas: "art content" !important;
    column-gap: 20px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-items: stretch !important;
    padding: 22px 22px !important;
    overflow: hidden !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  .phase3-card[data-section="latest"].is-latest-compact:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-art,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-art,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-art,
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-art,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-art {
    grid-area: art !important;
    width: 184px !important;
    height: 184px !important;
    min-width: 184px !important;
    min-height: 184px !important;
    max-width: 184px !important;
    max-height: 184px !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    background: transparent !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-section="latest"].is-latest-compact:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-content,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-content,
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-content,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    align-content: center !important;
    padding: 0 102px 0 0 !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-section="latest"].is-latest-compact:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-heading,
  .phase3-card[data-card-preset="large_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card.is-preset-large_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card[data-card-preset="small_social_media_post"][data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-heading,
  .phase3-card.is-preset-small_social_media_post[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-heading {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title-text,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-date {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
    min-height: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: clamp(.92rem, 1.08vw, 1.06rem) !important;
    line-height: 1.13 !important;
    letter-spacing: .044em !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-date {
    display: block !important;
    margin: 0 0 -1px 0 !important;
    color: rgba(255,255,255,.62) !important;
    font-size: .56rem !important;
    line-height: 1.05 !important;
    font-weight: 750 !important;
    letter-spacing: .112em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle {
    min-height: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 7px !important;
    max-width: 86px !important;
    pointer-events: none !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack .phase3-latest-network-badge {
    position: relative !important;
    inset: auto !important;
    min-width: 62px !important;
    max-width: 86px !important;
    min-height: 22px !important;
    padding: 6px 11px !important;
    font-size: .52rem !important;
    letter-spacing: .105em !important;
    line-height: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack a.phase3-latest-network-badge:hover,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-latest-badge-stack a.phase3-latest-network-badge:focus-visible {
    transform: none !important;
  }

  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-player,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-track-browser,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song,
  .phase3-card[data-section="latest"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge {
    display: none !important;
  }
}

/* Phase 7 WebOS / Smart-TV optimized branch.
   Desktop-style layout, but without mobile/touch media-query side effects or heavy visual effects. */
body.tvos-mode .phase3-sections {
  width: min(1120px, 94vw) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  transform: none !important;
}
body.tvos-mode .phase3-nav-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  transform: none !important;
}
body.tvos-mode .phase3-tabs.phase3-tabs-all {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2.1vw, 34px) !important;
  width: 100% !important;
  transform: none !important;
}
body.tvos-mode .phase3-tabs-mobile-top,
body.tvos-mode .phase3-mobile-bottom-nav-row,
body.tvos-mode .phase3-menu-layer,
body.tvos-mode .phase3-menu-backdrop,
body.tvos-mode .phase3-menu-toggle,
body.tvos-mode .phase3-menu-popover {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.tvos-mode .phase3-tab,
body.tvos-mode .phase3-slash {
  font-size: clamp(.86rem, 1.05vw, 1.08rem) !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
}
body.tvos-mode .phase3-tab {
  padding: 8px 4px 10px !important;
  min-height: 44px !important;
}
body.tvos-mode .phase3-panel.is-open {
  margin-top: 0 !important;
}
body.tvos-mode .phase3-carousel {
  width: min(1040px, 92vw) !important;
  padding: 0 64px 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
}
body.tvos-mode .phase3-scroll {
  width: min(780px, 100%) !important;
  max-width: 100% !important;
  padding: 4px 0 28px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: auto !important;
  mask: none !important;
  -webkit-mask: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  contain: none !important;
  will-change: auto !important;
  transform: none !important;
}
body.tvos-mode .phase3-scroll::-webkit-scrollbar { height: 10px !important; display: block !important; }
body.tvos-mode .phase3-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.08) !important; border-radius: 999px !important; }
body.tvos-mode .phase3-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.36) !important; border-radius: 999px !important; }
body.tvos-mode .phase3-track {
  gap: 18px !important;
  transform: none !important;
  will-change: auto !important;
}
body.tvos-mode .phase3-card {
  width: min(668px, calc(100vw - 250px)) !important;
  max-width: 668px !important;
  min-height: 110px !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
  transition: none !important;
}
body.tvos-mode .phase3-carousel-latest .phase3-card:not([data-card-preset="spotify_public_web_player"]):not(.has-spotify-public-player) {
  width: 668px !important;
}
body.tvos-mode .phase3-card,
body.tvos-mode .phase3-card *,
body.tvos-mode .phase3-art,
body.tvos-mode .phase3-art *,
body.tvos-mode .phase3-latest-media-frame,
body.tvos-mode .phase3-latest-media-frame * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
body.tvos-mode .phase3-title { font-size: clamp(.94rem, 1.1vw, 1.1rem) !important; }
body.tvos-mode .phase3-subtitle,
body.tvos-mode .phase3-latest-date-line { font-size: .70rem !important; }
body.tvos-mode .phase3-latest-description { font-size: .76rem !important; line-height: 1.45 !important; }
body.tvos-mode .phase3-arrow {
  width: 54px !important;
  height: 54px !important;
  font-size: 2rem !important;
  opacity: .96 !important;
  transform: translateY(-50%) !important;
}
body.tvos-mode .phase3-arrow.prev { left: 0 !important; }
body.tvos-mode .phase3-arrow.next { right: 0 !important; }
body.tvos-mode .phase3-section-fading-out,
body.tvos-mode .phase3-section-fading-in {
  opacity: 1 !important;
  transform: none !important;
}
body.tvos-mode .phase3-global-control {
  transform: none !important;
  transition: none !important;
}
@media (hover: none), (pointer: coarse) {
  body.tvos-mode .phase3-tabs.phase3-tabs-all { display: flex !important; }
  body.tvos-mode .phase3-tabs-mobile-top,
  body.tvos-mode .phase3-mobile-bottom-nav-row { display: none !important; }
  body.tvos-mode .phase3-scroll { scrollbar-width: auto !important; }
  body.tvos-mode .phase3-card { width: min(668px, calc(100vw - 250px)) !important; }
}

/* Phase 7 WebOS / Smart-TV biography + vertical card centering refinement.
   TV-only: keeps normal desktop/mobile untouched. */
body.tvos-mode .phase3-track {
  align-items: center !important;
}
body.tvos-mode .phase3-card,
body.tvos-mode .phase3-card[data-section],
body.tvos-mode .phase3-card[class*="is-preset-"] {
  align-self: center !important;
  align-items: center !important;
  justify-items: stretch !important;
}
body.tvos-mode .phase3-card > .phase3-art,
body.tvos-mode .phase3-card > .phase3-content,
body.tvos-mode .phase3-card > .phase3-links,
body.tvos-mode .phase3-card > .phase3-player,
body.tvos-mode .phase3-card > .phase3-latest-media-frame,
body.tvos-mode .phase3-card > .phase3-shop-media,
body.tvos-mode .phase3-card > .phase3-project-media {
  align-self: center !important;
}
body.tvos-mode .phase3-content,
body.tvos-mode .phase3-heading,
body.tvos-mode .phase3-links {
  align-content: center !important;
}
body.tvos-mode .phase3-scroll,
body.tvos-mode .phase3-carousel,
body.tvos-mode .phase3-panel {
  overflow-y: visible !important;
}
body.tvos-mode .phase3-card.is-biography-card,
body.tvos-mode .phase3-card[data-section="biography"],
body.tvos-mode .phase3-card.is-preset-biography {
  width: min(980px, calc(100vw - 250px)) !important;
  max-width: 980px !important;
  padding: clamp(24px, 2.4vw, 40px) !important;
  min-height: 0 !important;
  align-self: center !important;
}
body.tvos-mode .phase3-carousel-biography .phase3-scroll {
  width: min(1040px, 100%) !important;
  padding-bottom: 30px !important;
}
body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
  --tv-bio-photo-w: clamp(170px, 22vw, 280px);
  --tv-bio-photo-h: clamp(302px, 39.12vw, 498px);
  display: grid !important;
  grid-template-columns: var(--tv-bio-photo-w) minmax(0, 1fr) !important;
  gap: clamp(24px, 3vw, 42px) !important;
  align-items: center !important;
}
body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-promo,
body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-promo,
body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-promo {
  position: relative !important;
  top: auto !important;
  width: var(--tv-bio-photo-w) !important;
  height: var(--tv-bio-photo-h) !important;
  min-width: var(--tv-bio-photo-w) !important;
  min-height: var(--tv-bio-photo-h) !important;
  max-width: var(--tv-bio-photo-w) !important;
  max-height: var(--tv-bio-photo-h) !important;
  aspect-ratio: 9 / 16 !important;
  align-self: center !important;
  border-radius: clamp(16px, 1.8vw, 26px) !important;
}
body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-right: clamp(38px, 4vw, 62px) !important;
  align-self: center !important;
}
body.tvos-mode .phase3-biography-copy,
body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-copy,
body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-copy,
body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-copy {
  column-count: 1 !important;
  column-gap: 0 !important;
  column-rule: 0 !important;
  column-fill: auto !important;
  min-height: 0 !important;
  max-width: 62ch !important;
  font-size: clamp(.90rem, 1.05vw, 1.08rem) !important;
  line-height: 1.62 !important;
}
body.tvos-mode .phase3-biography-kicker {
  font-size: clamp(.72rem, .86vw, .86rem) !important;
}
body.tvos-mode .phase3-biography-title {
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
}
@media (max-width: 980px) {
  body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-layout,
  body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-layout,
  body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-layout {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  body.tvos-mode .phase3-card.is-biography-card.has-biography-promo .phase3-biography-content,
  body.tvos-mode .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-content,
  body.tvos-mode .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-content {
    width: min(680px, 100%) !important;
    padding-right: 0 !important;
  }
}

/* Phase 7 WebOS branch: desktop Collaborations equal-size cards.
   Desktop only: use the Spotify Public Web Player card as the visual reference.
   The Spotify card itself is intentionally untouched; all other Collaboration
   cards receive the same outer width/height so the carousel reads as one row of
   equal-sized cards. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-collaborations .phase3-track {
    align-items: stretch !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) {
    width: min(580px, calc(100vw - 160px)) !important;
    max-width: min(580px, calc(100vw - 160px)) !important;
    min-width: min(580px, calc(100vw - 160px)) !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    align-items: center !important;
    overflow: hidden !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-player {
    align-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
    max-height: 2.28em !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle {
    max-height: 3.96em !important;
    overflow: hidden !important;
  }
}

/* Phase 7 WebOS branch: desktop Collaborations full-height artwork.
   Keep Spotify Public Web Player cards untouched as the reference card. Make all
   other desktop Collaboration cards use a full-card-height artwork rail so album
   covers/artworks visually fill the card length instead of staying small. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) {
    grid-template-columns: 190px minmax(0, 1fr) minmax(48px, auto) !important;
    grid-template-areas: "art content links" !important;
    gap: 16px !important;
    padding: 0 14px 0 0 !important;
    align-items: stretch !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-art {
    grid-area: art !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art picture,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art video,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-link,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-trigger,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-project-art-link {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-player {
    align-self: center !important;
  }
}

/* Phase 7 WebOS branch: desktop Discography card parity.
   Use the current "Bir" Album card as the visual reference and make EP/single
   Discography cards share the same outer shell, artwork size, grid rhythm,
   links lane, and player spacing. Normal mobile and TVOS layouts are untouched. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    width: min(585px, calc(100vw - 132px)) !important;
    max-width: min(585px, calc(100vw - 132px)) !important;
    min-width: min(585px, calc(100vw - 132px)) !important;
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    grid-template-columns: 88px minmax(0, 1fr) minmax(72px, auto) !important;
    gap: 14px 18px !important;
    align-items: center !important;
    padding: 15px 18px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] > .phase3-art {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    align-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 9px !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-heading {
    gap: 7px !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "albumTitle releaseBadge releaseGapless"
      "activeSong activeSong activeSong" !important;
    gap: 7px 8px !important;
    align-items: start !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-title,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-title,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title {
    grid-area: albumTitle !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    font-size: clamp(.86rem, 1.08vw, 1.02rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .082em !important;
    font-weight: 900 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song {
    grid-area: activeSong !important;
    display: block !important;
    min-height: 22px !important;
    max-height: 32px !important;
    padding: 4px 9px !important;
    margin-top: 0 !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .56rem !important;
    letter-spacing: .048em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song:empty {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge {
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    height: 20px !important;
    min-width: 42px !important;
    padding: 0 9px !important;
    font-size: .46rem !important;
    letter-spacing: .12em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge:not(.is-gapless) {
    grid-column: 2 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge.is-gapless {
    grid-column: 3 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 1.3em !important;
    font-size: .64rem !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-browser {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    margin-top: 0 !important;
    min-height: 24px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-center {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-rail {
    justify-content: flex-start !important;
    gap: 4px !important;
    max-width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-choice {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 20px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-links {
    min-width: 72px !important;
    max-width: none !important;
    gap: 7px !important;
    justify-items: end !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-link {
    font-size: .66rem !important;
    letter-spacing: .075em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-player {
    margin-top: 2px !important;
    gap: 9px !important;
  }
}

/* Phase 7 WebOS branch: desktop Discography album/EP bottom containment fix.
   Album/EP cards need a little more vertical interior room than single cards
   because they carry the track browser plus local player/waveform row. This
   fixes the bottom overflow seen after the Bir-card parity pass without
   touching singles, mobile layouts, TVOS mode, or the player data path. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    padding-top: 13px !important;
    padding-bottom: 20px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] > .phase3-links {
    align-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-content {
    gap: 8px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-player {
    margin-top: -1px !important;
    align-self: end !important;
    min-height: 28px !important;
    max-height: 30px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-waveform,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-waveform,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-waveform {
    height: 24px !important;
    align-items: center !important;
  }
}


/* Phase 7 WebOS branch: mobile Spotify centering + mobile arrow/card alignment + project thumbnail fallback + social gap microfix.
   1) Mobile Spotify embeds get a wider official iframe inside a centered scroll shell so the
      usable middle of the Spotify player is shown by default.
   2) Mobile carousel arrows use the JS-computed active-card center instead of the full
      carousel shell center, so arrows line up vertically with cards across every section.
   3) Broken project thumbnails degrade to the existing neutral project placeholder instead
      of showing a missing-image icon.
   4) The social/contact/footer group is pulled 10px closer to the lower mobile nav row. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel {
    --p3-mobile-arrow-top: var(--p3-arrow-top, 50%);
  }
  .phase3-carousel .phase3-arrow {
    top: var(--p3-mobile-arrow-top) !important;
  }

  .phase3-card.has-spotify-public-player > .phase3-art,
  .phase3-card.is-spotify-public-card > .phase3-art,
  .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-art,
  .phase3-card.is-spotify-player-only > .phase3-art {
    overflow: hidden !important;
    padding: 0 !important;
  }

  .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell,
  .phase3-card.is-spotify-player-only .phase3-spotify-public-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
    background: #121212 !important;
  }
  .phase3-card.has-spotify-public-player .phase3-spotify-public-shell::-webkit-scrollbar,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-shell::-webkit-scrollbar,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell::-webkit-scrollbar,
  .phase3-card.is-spotify-player-only .phase3-spotify-public-shell::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .phase3-card.has-spotify-public-player .phase3-spotify-public-player,
  .phase3-card.is-spotify-public-card .phase3-spotify-public-player,
  .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-player,
  .phase3-card.is-spotify-player-only .phase3-spotify-public-player {
    width: min(430px, calc(100vw - 28px)) !important;
    min-width: min(430px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .phase3-art .phase3-broken-artwork-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    border-radius: inherit !important;
  }

  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .phase3-sections {
    margin-bottom: clamp(12px, 2.3vh, 24px) !important;
  }
  body:not(.phase3-open):not(.phase3-current-single):not(.phase3-current-album):not(.phase3-embed-open) .links {
    margin-top: 0 !important;
  }
}

/* Phase 7 WebOS branch: mobile open-section social gap microfix. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.phase3-open .phase3-sections {
    margin-bottom: clamp(2px, 1vh, 8px) !important;
  }
  body.phase3-open .links {
    margin-top: 0 !important;
  }
}

/* Phase 7.33 — playable artwork fullscreen controls
   Enables thumbnail/artwork video embeds to expand fullscreen/site-fullscreen on desktop, mobile and TVOS. */
.phase3-latest-embed-fullscreen {
  position: absolute !important;
  top: 5px !important;
  right: 32px !important;
  z-index: 13 !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(0,0,0,.62) !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.phase3-latest-embed-fullscreen:hover,
.phase3-latest-embed-fullscreen:focus-visible {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  outline: 1px solid rgba(255,255,255,.48) !important;
  outline-offset: 2px !important;
}
.phase3-latest-embed-frame:fullscreen,
.phase3-latest-embed-frame:-webkit-full-screen,
.phase3-latest-embed-frame.is-site-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}
.phase3-latest-embed-frame:fullscreen .phase3-latest-embed-player,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-player,
.phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-player {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000 !important;
}
.phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-close,
.phase3-latest-embed-frame:fullscreen .phase3-latest-embed-close,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-close {
  top: 16px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 24px !important;
  z-index: 1000001 !important;
  background: rgba(0,0,0,.72) !important;
}
.phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-fullscreen,
.phase3-latest-embed-frame:fullscreen .phase3-latest-embed-fullscreen,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-fullscreen {
  top: 16px !important;
  right: 66px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 21px !important;
  z-index: 1000001 !important;
  background: rgba(0,0,0,.72) !important;
}
body.phase3-player-fullscreen-open {
  overflow: hidden !important;
  touch-action: none !important;
}
body.tvos-mode .phase3-latest-embed-fullscreen {
  width: 34px !important;
  height: 34px !important;
  top: 8px !important;
  right: 50px !important;
  font-size: 18px !important;
  border-color: rgba(255,255,255,.42) !important;
  background: rgba(0,0,0,.78) !important;
}
body.tvos-mode .phase3-latest-embed-close {
  width: 34px !important;
  height: 34px !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 22px !important;
  background: rgba(0,0,0,.78) !important;
}
@media(max-width:760px) {
  .phase3-latest-embed-fullscreen {
    top: 4px !important;
    right: 27px !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 11px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-close,
  .phase3-latest-embed-frame:fullscreen .phase3-latest-embed-close,
  .phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-close,
  .phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-fullscreen,
  .phase3-latest-embed-frame:fullscreen .phase3-latest-embed-fullscreen,
  .phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-fullscreen {
    top: max(10px, env(safe-area-inset-top)) !important;
  }
}

/* Phase 7.34 — Discography pill centering, desktop Collaboration/Discography parity,
   Instagram 9:16 pop-out players, aligned fullscreen controls, and text global controls. */

/* 1) Album/EP song name pills and track-number pills: true visual centering on every version. */
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-active-song,
.phase3-card[data-card-preset="discography_album_player"] .phase3-active-song,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-active-song {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.12 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice,
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice span,
.phase3-card[data-card-preset="discography_album_player"] .phase3-track-choice,
.phase3-card[data-card-preset="discography_album_player"] .phase3-track-choice span,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-track-choice,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-track-choice span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  transform: none !important;
}
.phase3-card.is-album-card:not([data-section="latest"]) .phase3-track-choice,
.phase3-card[data-card-preset="discography_album_player"] .phase3-track-choice,
.phase3-card.is-preset-discography_album_player:not([data-section="latest"]) .phase3-track-choice {
  min-height: 21px !important;
  padding: 0 8px !important;
}

/* 2) Desktop Collaborations: mirror Discography card rhythm for non-Spotify cards.
   Spotify Public Web Player cards stay as dedicated official players. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-collaborations .phase3-track {
    align-items: center !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) {
    width: min(585px, calc(100vw - 132px)) !important;
    max-width: min(585px, calc(100vw - 132px)) !important;
    min-width: min(585px, calc(100vw - 132px)) !important;
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    grid-template-columns: 88px minmax(0, 1fr) minmax(72px, auto) !important;
    grid-template-areas:
      "art content links"
      "player player player" !important;
    gap: 10px 18px !important;
    align-items: center !important;
    padding: 15px 18px 14px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art {
    grid-area: art !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art img,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art video,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-link,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-latest-media-trigger,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-art .phase3-project-art-link {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    align-content: center !important;
    align-self: center !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-heading {
    gap: 7px !important;
    min-width: 0 !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "albumTitle releaseBadge releaseGapless"
      "activeSong activeSong activeSong" !important;
    gap: 7px 8px !important;
    align-items: start !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
    grid-area: albumTitle !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(.86rem, 1.08vw, 1.02rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .082em !important;
    font-weight: 900 !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-subtitle,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    color: rgba(255,255,255,.68) !important;
    font-size: .62rem !important;
    letter-spacing: .055em !important;
    line-height: 1.2 !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-links {
    grid-area: links !important;
    align-self: center !important;
    justify-items: end !important;
    gap: 7px !important;
    min-width: 72px !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) > .phase3-player {
    grid-area: player !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
    margin-top: -1px !important;
    min-height: 28px !important;
    max-height: 30px !important;
  }
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-waveform {
    height: 24px !important;
    align-items: center !important;
  }
}

/* 3) Instagram playable artwork opens as a centered 9:16 pop-out window. */
.phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame,
.phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame,
.phase3-card.is-latest-embed-open .phase3-latest-embed-frame[data-radio-kind="instagram"] {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(372px, 82vw, calc(82vh * 9 / 16)) !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 82vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999990 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #050505 !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.22) !important;
}
.phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame .phase3-latest-embed-player,
.phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame .phase3-latest-embed-player,
.phase3-card.is-latest-embed-open .phase3-latest-embed-frame[data-radio-kind="instagram"] .phase3-latest-embed-player {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame,
  .phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame,
  .phase3-card.is-latest-embed-open .phase3-latest-embed-frame[data-radio-kind="instagram"] {
    width: min(312px, 86vw, calc(78vh * 9 / 16)) !important;
    max-height: 78vh !important;
    border-radius: 16px !important;
  }
}
body.tvos-mode .phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame,
body.tvos-mode .phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame,
body.tvos-mode .phase3-card.is-latest-embed-open .phase3-latest-embed-frame[data-radio-kind="instagram"] {
  width: min(420px, 34vw, calc(76vh * 9 / 16)) !important;
  max-height: 76vh !important;
  border-radius: 20px !important;
}

/* 4 + 5) Centered circular close/fullscreen controls with a cleaner fullscreen icon. */
.phase3-latest-embed-close,
.phase3-latest-embed-fullscreen {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.phase3-latest-embed-close {
  font-size: 0 !important;
}
.phase3-latest-embed-close::before,
.phase3-latest-embed-close::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 1.7px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  left: 50% !important;
  top: 50% !important;
  transform-origin: 50% 50% !important;
}
.phase3-latest-embed-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.phase3-latest-embed-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
.phase3-fullscreen-icon {
  position: relative !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  color: currentColor !important;
}
.phase3-fullscreen-icon::before,
.phase3-fullscreen-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-color: currentColor !important;
  border-style: solid !important;
  border-width: 1.8px !important;
}
.phase3-fullscreen-icon::before {
  clip-path: polygon(0 0, 42% 0, 42% 18%, 18% 18%, 18% 42%, 0 42%, 0 0, 58% 0, 100% 0, 100% 42%, 82% 42%, 82% 18%, 58% 18%);
}
.phase3-fullscreen-icon::after {
  clip-path: polygon(0 58%, 18% 58%, 18% 82%, 42% 82%, 42% 100%, 0 100%, 0 58%, 58% 82%, 82% 82%, 82% 58%, 100% 58%, 100% 100%, 58% 100%);
}
.phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-close::before,
.phase3-latest-embed-frame.is-site-fullscreen .phase3-latest-embed-close::after,
.phase3-latest-embed-frame:fullscreen .phase3-latest-embed-close::before,
.phase3-latest-embed-frame:fullscreen .phase3-latest-embed-close::after,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-close::before,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-latest-embed-close::after {
  width: 16px !important;
  height: 2px !important;
}
.phase3-latest-embed-frame.is-site-fullscreen .phase3-fullscreen-icon,
.phase3-latest-embed-frame:fullscreen .phase3-fullscreen-icon,
.phase3-latest-embed-frame:-webkit-full-screen .phase3-fullscreen-icon {
  width: 17px !important;
  height: 17px !important;
}
@media(max-width:760px) {
  .phase3-latest-embed-close::before,
  .phase3-latest-embed-close::after { width: 8px !important; height: 1.45px !important; }
  .phase3-fullscreen-icon { width: 10px !important; height: 10px !important; }
}

/* 6) Text-based global radio controls: small centered pills with glow/hover. */
.phase3-global-control-footer {
  width: 100% !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: clamp(5px, .9vh, 10px) auto 0 !important;
  transform: none !important;
}
.phase3-global-control-footer.is-visible {
  display: flex !important;
}
.phase3-global-button,
.phase3-global-control-footer .phase3-global-play,
.phase3-global-control-footer .phase3-global-next {
  width: auto !important;
  height: 25px !important;
  min-width: 0 !important;
  min-height: 25px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(0,0,0,.16) !important;
  color: rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: .50rem !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease !important;
}
.phase3-global-button-text {
  display: inline-block !important;
  transform: translateY(.02em) !important;
  white-space: nowrap !important;
}
.phase3-global-icon,
.phase3-global-next-icon {
  display: none !important;
}
.phase3-global-control-footer .phase3-global-play:hover,
.phase3-global-control-footer .phase3-global-play:focus-visible,
.phase3-global-control-footer .phase3-global-next:hover,
.phase3-global-control-footer .phase3-global-next:focus-visible {
  color: #fff !important;
  border-color: rgba(146,255,180,.48) !important;
  background: rgba(146,255,180,.075) !important;
  box-shadow: 0 0 22px rgba(146,255,180,.18), 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
.phase3-global-control-footer .phase3-global-play:active,
.phase3-global-control-footer .phase3-global-next:active {
  transform: translateY(0) scale(.97) !important;
}
.phase3-global-control-footer .phase3-global-next:disabled {
  opacity: .36 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
@media (max-width: 760px), (hover:none) and (pointer:coarse) {
  .phase3-global-control-footer { gap: 7px !important; }
  .phase3-global-button,
  .phase3-global-control-footer .phase3-global-play,
  .phase3-global-control-footer .phase3-global-next {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 10px !important;
    font-size: .46rem !important;
    letter-spacing: .09em !important;
  }
}
body.tvos-mode .phase3-global-control-footer {
  gap: 12px !important;
  margin-top: 14px !important;
}
body.tvos-mode .phase3-global-button,
body.tvos-mode .phase3-global-control-footer .phase3-global-play,
body.tvos-mode .phase3-global-control-footer .phase3-global-next {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  font-size: .68rem !important;
  letter-spacing: .12em !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* Phase 7: final Discography album/EP active-song pill centering.
   Centers the song-title label horizontally and vertically inside its pill on every version. */
.phase3-card[data-section="discography"].is-album-card .phase3-active-song,
.phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
.phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  text-align: center !important;
  justify-self: stretch !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  padding: 4px 10px !important;
  line-height: 1.12 !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
}
.phase3-card[data-section="discography"].is-album-card .phase3-active-song:empty,
.phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song:empty,
.phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song:empty {
  display: none !important;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
  .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
  .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    min-height: 20px !important;
    max-height: 34px !important;
    padding: 3px 8px !important;
    line-height: 1.12 !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}
body.tvos-mode .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
body.tvos-mode .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  justify-self: stretch !important;
  align-self: center !important;
  line-height: 1.12 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Phase 7 WebOS branch: Discography equal-height cards.
   Uses the recent album/EP card height as the reference height and applies it
   to every normal desktop Discography card so albums, EPs, and singles sit on
   the same carousel baseline. Keeps the existing Bir-card design language and
   only normalizes containment/alignment; mobile and TVOS layouts stay untouched. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    padding-top: 13px !important;
    padding-bottom: 20px !important;
    align-items: center !important;
    align-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    align-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content {
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    align-self: end !important;
    min-height: 28px !important;
    max-height: 30px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-waveform {
    height: 24px !important;
    align-items: center !important;
  }
}

/* Phase 7 WebOS branch: Discography title/badge breathing polish.
   Keeps the equal-height Discography design, but gives two-line album/EP titles
   safer top breathing room and aligns EP/ALBUM badges to the active-song pill edge.
   Normal desktop only; mobile and TVOS layouts stay untouched. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    row-gap: 3px !important;
    align-items: center !important;
    align-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content {
    align-self: center !important;
    align-content: center !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-heading {
    gap: 5px !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "albumTitle releaseBadge"
      "activeSong activeSong" !important;
    gap: 6px 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title {
    grid-area: albumTitle !important;
    align-self: start !important;
    line-height: 1.12 !important;
    max-height: 2.24em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
    grid-area: activeSong !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 24px !important;
    max-height: 30px !important;
    padding: 3px 10px !important;
    box-sizing: border-box !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge:not(.is-gapless) {
    grid-area: releaseBadge !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge.is-gapless {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-subtitle {
    margin-top: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-browser {
    margin-top: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    align-self: end !important;
    min-height: 28px !important;
    max-height: 30px !important;
    margin-top: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-waveform {
    height: 24px !important;
    align-items: center !important;
  }
}

/* Phase 7 WebOS branch: Discography single-player artwork spacing polish.
   After the equal-height/title polish pass, single cards can make the local
   player row feel visually too close to the artwork. Keep the same Discography
   design language, but give single-player cards the same breathing distance
   that album/EP cards have between artwork/content and the player row.
   Normal desktop only; mobile and TVOS layouts stay untouched. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] {
    row-gap: 9px !important;
    padding-top: 18px !important;
    padding-bottom: 17px !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-content,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-links,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-links {
    align-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-player {
    align-self: end !important;
    margin-top: 5px !important;
    min-height: 28px !important;
    max-height: 30px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-waveform,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-waveform,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] .phase3-waveform {
    height: 24px !important;
    align-items: center !important;
  }
}

/* Phase 7 WebOS branch: Discography mobile + TVOS design parity.
   Carries the polished desktop Discography card adjustments into mobile and
   WebOS/TV without touching the already-good normal desktop rules. Mobile keeps
   the stable native-scroll surface; TVOS keeps the lightweight TV-safe branch. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    width: min(84vw, 326px) !important;
    max-width: calc(100vw - 54px) !important;
    min-width: min(84vw, 326px) !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) minmax(46px, auto) !important;
    grid-template-areas:
      "art content links"
      "player player player" !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: stretch !important;
    padding: 14px 12px 15px !important;
    border-radius: 17px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] > .phase3-art {
    grid-area: art !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art img,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art picture,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art video,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-trigger {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    align-content: center !important;
    justify-self: stretch !important;
    gap: 6px !important;
    text-align: left !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "albumTitle releaseBadge"
      "activeSong activeSong" !important;
    gap: 5px 6px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title {
    grid-area: albumTitle !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    font-size: clamp(.74rem, 3.15vw, .90rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .068em !important;
    font-weight: 900 !important;
    align-self: start !important;
    max-height: 2.24em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
    grid-area: activeSong !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 21px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: .50rem !important;
    letter-spacing: .045em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song:empty {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge:not(.is-gapless) {
    grid-area: releaseBadge !important;
    justify-self: end !important;
    align-self: start !important;
    height: 18px !important;
    min-width: 34px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .40rem !important;
    line-height: 1 !important;
    letter-spacing: .105em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge.is-gapless {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 1.25em !important;
    margin: 0 !important;
    font-size: .52rem !important;
    letter-spacing: .055em !important;
    line-height: 1.18 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-browser {
    margin-top: 0 !important;
    gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-center {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-rail {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-choice,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-choice span {
    min-height: 19px !important;
    height: 19px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-links {
    grid-area: links !important;
    align-self: center !important;
    justify-self: end !important;
    justify-items: end !important;
    min-width: 44px !important;
    max-width: 48px !important;
    gap: 4px !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-link {
    font-size: .48rem !important;
    letter-spacing: .025em !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    grid-area: player !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
    margin-top: 4px !important;
    min-height: 27px !important;
    max-height: 29px !important;
    width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-waveform {
    height: 23px !important;
    align-items: center !important;
  }
}

body.tvos-mode .phase3-carousel-discography .phase3-track {
  align-items: center !important;
}

body.tvos-mode .phase3-card[data-section="discography"],
body.tvos-mode .phase3-card[data-section="discography"].is-single-card,
body.tvos-mode .phase3-card[data-section="discography"].is-album-card,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_single_player,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_album_player,
body.tvos-mode .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
body.tvos-mode .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
  width: min(668px, calc(100vw - 250px)) !important;
  max-width: 668px !important;
  min-width: min(668px, calc(100vw - 250px)) !important;
  height: 214px !important;
  min-height: 214px !important;
  max-height: 214px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) minmax(82px, auto) !important;
  grid-template-areas:
    "art content links"
    "player player player" !important;
  column-gap: 22px !important;
  row-gap: 12px !important;
  align-items: center !important;
  align-content: center !important;
  padding: 20px 24px 18px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art {
  grid-area: art !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art img,
body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art picture,
body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art video,
body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-link,
body.tvos-mode .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-trigger {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

body.tvos-mode .phase3-card[data-section="discography"] > .phase3-content {
  grid-area: content !important;
  align-self: center !important;
  align-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-heading {
  gap: 6px !important;
  align-content: center !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-title-line,
body.tvos-mode .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
body.tvos-mode .phase3-card[data-section="discography"].is-album-card .phase3-title-line,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "albumTitle releaseBadge"
    "activeSong activeSong" !important;
  gap: 8px 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-title {
  grid-area: albumTitle !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.12 !important;
  max-height: 2.24em !important;
  font-size: clamp(.98rem, 1.08vw, 1.14rem) !important;
  letter-spacing: .075em !important;
  align-self: start !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-active-song,
body.tvos-mode .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
body.tvos-mode .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
body.tvos-mode .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
  grid-area: activeSong !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 28px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  font-size: .66rem !important;
  letter-spacing: .055em !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-active-song:empty {
  display: none !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-release-badge:not(.is-gapless) {
  grid-area: releaseBadge !important;
  justify-self: end !important;
  align-self: start !important;
  height: 24px !important;
  min-width: 50px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .50rem !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-release-badge.is-gapless {
  display: none !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-subtitle {
  margin: 0 !important;
  max-height: 1.25em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .74rem !important;
  letter-spacing: .07em !important;
  line-height: 1.2 !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-track-browser {
  margin-top: 0 !important;
  gap: 7px !important;
  align-items: center !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-track-choice,
body.tvos-mode .phase3-card[data-section="discography"] .phase3-track-choice span {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.tvos-mode .phase3-card[data-section="discography"] > .phase3-links {
  grid-area: links !important;
  align-self: center !important;
  justify-self: end !important;
  justify-items: end !important;
  min-width: 82px !important;
  gap: 7px !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-link {
  font-size: .68rem !important;
  letter-spacing: .055em !important;
  line-height: 1.1 !important;
}

body.tvos-mode .phase3-card[data-section="discography"] > .phase3-player {
  grid-area: player !important;
  grid-column: 1 / -1 !important;
  align-self: end !important;
  margin-top: 5px !important;
  min-height: 32px !important;
  max-height: 36px !important;
  width: 100% !important;
}

body.tvos-mode .phase3-card[data-section="discography"] .phase3-waveform {
  height: 28px !important;
  align-items: center !important;
}


/* Phase 7: Collaboration song-name pill centering across all versions.
   Fixes Anılarda collaboration album pill alignment without changing player logic. */
.phase3-card[data-section="collaborations"] .phase3-active-song,
.phase3-card[data-section="collaborations"].is-album-card .phase3-active-song,
.phase3-card[data-section="collaborations"].is-preset-discography_album_player .phase3-active-song,
.phase3-card[data-section="collaborations"][data-card-preset="discography_album_player"] .phase3-active-song {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.08 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  min-height: 22px !important;
}
.phase3-card[data-section="collaborations"] .phase3-active-song:empty {
  display: none !important;
}
.phase3-card[data-section="collaborations"] .phase3-track-choice,
.phase3-card[data-section="collaborations"] .phase3-track-choice span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  transform: none !important;
}
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"] .phase3-active-song {
    min-height: 22px !important;
    height: 22px !important;
    max-height: 24px !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 760px) {
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"] .phase3-active-song {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 28px !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}
body.tvos-mode .phase3-card[data-section="collaborations"] .phase3-active-song {
  min-height: 28px !important;
  height: 28px !important;
  max-height: 34px !important;
  justify-self: stretch !important;
  width: 100% !important;
}

/* Phase 7 rollback-safe fix: mobile Spotify no-scroll + mobile Discography Anılarda-style parity.
   Built from the stable CollabPill/SoundCloud baseline, not from the rejected follow-up.
   1) Spotify Web Player cards on mobile no longer create an internal horizontal scroll shell.
   2) Mobile Discography local-player cards return to the compact Collaboration/Anılarda-style rhythm:
      artwork left, content right, platform links and local player below, with clean centered pills. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body:not(.tvos-mode) .phase3-card.has-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] {
    width: min(84vw, 336px) !important;
    max-width: calc(100vw - 44px) !important;
    min-width: min(84vw, 336px) !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player > .phase3-art,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-art {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: auto !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    transform: none !important;
    background: #121212 !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-shell::-webkit-scrollbar,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-shell::-webkit-scrollbar,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-shell::-webkit-scrollbar,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-player {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    background: #121212 !important;
  }

  body:not(.tvos-mode) .phase3-carousel-discography .phase3-track {
    align-items: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_single_player"],
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] {
    width: min(84vw, 336px) !important;
    max-width: calc(100vw - 44px) !important;
    min-width: min(84vw, 336px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    grid-template-areas:
      "art content"
      "links links"
      "player player" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: stretch !important;
    padding: 12px !important;
    border-radius: 17px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art {
    grid-area: art !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art img,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art picture,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art video,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-link,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-art .phase3-latest-media-trigger {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-content {
    grid-area: content !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    align-content: center !important;
    justify-self: stretch !important;
    gap: 6px !important;
    text-align: left !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    align-content: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-single-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_single_player .phase3-title-line,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-title-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "albumTitle releaseBadge"
      "activeSong activeSong" !important;
    gap: 5px 6px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-title {
    grid-area: albumTitle !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    font-size: clamp(.74rem, 3.15vw, .90rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .068em !important;
    font-weight: 900 !important;
    align-self: center !important;
    max-height: 2.24em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-album-card .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"][data-card-preset="discography_album_player"] .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="discography"].is-preset-discography_album_player .phase3-active-song {
    grid-area: activeSong !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 22px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: .50rem !important;
    letter-spacing: .045em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-active-song:empty {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge:not(.is-gapless) {
    grid-area: releaseBadge !important;
    justify-self: end !important;
    align-self: center !important;
    height: 18px !important;
    min-width: 34px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .40rem !important;
    line-height: 1 !important;
    letter-spacing: .105em !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-release-badge.is-gapless {
    display: none !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 1.25em !important;
    margin: 0 !important;
    font-size: .52rem !important;
    letter-spacing: .055em !important;
    line-height: 1.18 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-browser {
    margin-top: 0 !important;
    gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-center {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-rail {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-choice,
  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-track-choice span {
    min-height: 19px !important;
    height: 19px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-links {
    grid-area: links !important;
    display: flex !important;
    align-self: center !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-link {
    font-size: .47rem !important;
    letter-spacing: .04em !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] > .phase3-player {
    grid-area: player !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
    margin-top: 2px !important;
    min-height: 27px !important;
    max-height: 30px !important;
    width: 100% !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="discography"] .phase3-waveform {
    height: 23px !important;
    align-items: center !important;
  }
}

/* Phase 7: Collaboration desktop invisible single-song pill + mobile Spotify drag-safe player.
   - Desktop: keep the Collaboration single active-song pill in layout but make it invisible.
   - Mobile: Spotify iframes must not trap horizontal carousel swipes. The iframe is visually intact,
     but touch gestures pass to the carousel track instead of creating an unscrollable touch island. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"].is-single-card:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"][data-card-preset="discography_single_player"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-active-song,
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"].is-preset-discography_single_player:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only) .phase3-active-song {
    opacity: 0 !important;
    color: transparent !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body:not(.tvos-mode) .phase3-card.has-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"],
  body:not(.tvos-mode) .phase3-card.has-spotify-public-player > .phase3-art,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card > .phase3-art,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only > .phase3-art,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] > .phase3-art,
  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell {
    touch-action: pan-x pan-y !important;
    -ms-touch-action: pan-x pan-y !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-shell,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-shell {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    pointer-events: auto !important;
  }

  body:not(.tvos-mode) .phase3-card.has-spotify-public-player .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-public-card .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card.is-spotify-player-only .phase3-spotify-public-player,
  body:not(.tvos-mode) .phase3-card[data-card-preset="spotify_public_web_player"] .phase3-spotify-public-player {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    pointer-events: none !important;
    touch-action: none !important;
  }
}

/* Phase 7: Desktop Collaboration Anılarda title/pill vertical alignment + SoundCloud artwork fix cache bump.
   Keep existing card geometry; only normalize the title/pill grid centering on desktop Collaboration music cards. */
@media (min-width: 761px) {
  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line {
    align-items: center !important;
    align-content: center !important;
    grid-auto-rows: minmax(22px, auto) !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.14 !important;
  }

  body:not(.tvos-mode) .phase3-card[data-section="collaborations"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-height: 22px !important;
    height: 22px !important;
    max-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}


/* Phase 7: Collaboration Anılarda EP badge / song-pill right-edge alignment.
   Keep the existing Collaboration card design, but make the EP badge share the same
   grid edge as the active-song pill in the Anılarda-style collaboration card. */
.phase3-card[data-section="collaborations"][data-release-label="ep"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "albumTitle releaseBadge releaseGapless"
    "activeSong activeSong activeSong" !important;
  align-items: start !important;
  align-content: start !important;
  gap: 6px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.phase3-card[data-section="collaborations"][data-release-label="ep"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-title {
  grid-area: albumTitle !important;
  align-self: start !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}

.phase3-card[data-section="collaborations"][data-release-label="ep"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-active-song {
  grid-area: activeSong !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.phase3-card[data-section="collaborations"][data-release-label="ep"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge:not(.is-gapless) {
  grid-area: releaseBadge !important;
  justify-self: end !important;
  align-self: start !important;
  margin-right: 0 !important;
}

.phase3-card[data-section="collaborations"][data-release-label="ep"]:not(.has-spotify-public-player):not(.is-spotify-public-card):not(.is-spotify-player-only):not([data-card-preset="spotify_public_web_player"]) .phase3-release-badge.is-gapless {
  grid-area: releaseGapless !important;
  justify-self: end !important;
  align-self: start !important;
  margin-right: 0 !important;
}


/* Website V1 hotfix: project artwork pass-through + desktop/WebOS arrow centering.
   Arrow buttons now use the JS-computed active-card center on every version, while
   mobile keeps its existing compatibility variable. */
.phase3-carousel .phase3-arrow {
  top: var(--p3-card-arrow-top, var(--p3-arrow-top, 50%)) !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-carousel .phase3-arrow {
    top: var(--p3-mobile-arrow-top, var(--p3-card-arrow-top, var(--p3-arrow-top, 50%))) !important;
  }
}



/* Phase 7 hotfix: desktop Biography horizontal read-more columns.
   The copy no longer collapses vertically. Instead, the full newspaper layout is
   kept in a clipped window that reveals one, two, then three columns horizontally.
   Mobile Biography remains untouched. */
@media (min-width: 881px) {
  .phase3-card.is-biography-card.has-bio-readmore,
  .phase3-card[data-section="biography"].has-bio-readmore,
  .phase3-card.is-preset-biography.has-bio-readmore {
    --phase7-bio-column-gap: clamp(16px, 1.85vw, 28px);
  }

  .phase3-biography-copy-window {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    transition: width .34s cubic-bezier(.22, .72, .18, 1), opacity .22s ease;
    will-change: width;
    contain: paint;
  }

  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-copy {
    max-height: none !important;
    min-height: var(--phase6-bio-promo-height, auto) !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: width .34s cubic-bezier(.22, .72, .18, 1);
    column-count: 3 !important;
    column-gap: var(--phase7-bio-column-gap) !important;
    column-fill: balance !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window {
    width: calc((100% - (var(--phase7-bio-column-gap) * 2)) / 3 + 0px);
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy {
    width: calc(300% + (var(--phase7-bio-column-gap) * 2)) !important;
    max-width: none !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window {
    width: calc(((100% - (var(--phase7-bio-column-gap) * 2)) / 3 * 2) + var(--phase7-bio-column-gap));
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy {
    width: calc(150% + (var(--phase7-bio-column-gap) / 2)) !important;
    max-width: none !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window {
    width: 100%;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .phase3-biography-readmore-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--phase7-bio-column-gap);
    align-items: start;
    margin-top: .84em;
    padding-right: 0;
  }

  .phase3-card.is-biography-card.has-biography-promo .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-biography-promo .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-biography-promo .phase3-biography-readmore-controls {
    padding-right: clamp(76px, 7vw, 112px);
  }

  .phase3-biography-readmore-toggle {
    justify-self: start;
    width: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: color-mix(in srgb, var(--phase6-link-color, #83e6ff) 78%, #ffffff 22%);
    font-family: var(--phase6-bio-font-family, inherit);
    font-size: var(--phase6-bio-body-size, clamp(.70rem, .98vw, .92rem));
    font-weight: 650;
    line-height: var(--phase6-bio-body-line-height, 1.68);
    letter-spacing: var(--phase6-bio-body-tracking, .028em);
    text-transform: none;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    text-shadow: 0 0 18px color-mix(in srgb, var(--phase6-link-color, #83e6ff) 32%, transparent);
    opacity: .9;
    transition: color .18s ease, opacity .18s ease, text-shadow .18s ease, transform .18s ease;
  }

  .phase3-biography-readmore-toggle:hover,
  .phase3-biography-readmore-toggle:focus-visible {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
    text-shadow: 0 0 22px color-mix(in srgb, var(--phase6-link-color, #83e6ff) 55%, transparent);
    transform: translateY(-1px);
    outline: none;
  }

  .phase3-biography-readmore-toggle.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .phase3-biography-readmore-toggle.is-column-one { grid-column: 1; }
  .phase3-biography-readmore-toggle.is-column-two { grid-column: 2; }
  .phase3-biography-readmore-spacer { grid-column: 3; }
}

@supports not (color: color-mix(in srgb, white, transparent)) {
  @media (min-width: 881px) {
    .phase3-biography-readmore-toggle {
      color: rgba(131,230,255,.9);
      text-shadow: 0 0 18px rgba(131,230,255,.18);
    }
    .phase3-biography-readmore-toggle:hover,
    .phase3-biography-readmore-toggle:focus-visible {
      color: #fff;
      text-shadow: 0 0 22px rgba(131,230,255,.35);
    }
  }
}

@media (max-width: 880px) {
  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-copy {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .phase3-biography-copy-window {
    width: 100% !important;
    overflow: visible !important;
  }
  .phase3-biography-readmore-controls {
    display: none !important;
  }
}


/* Phase 7 refinement: Biography read-more changes the desktop card width, not the card height.
   The full three-column text is measured once, locked at that height, and then clipped
   horizontally while the whole Biography card grows from one visible column to two to three. */
@media (min-width: 881px) {
  .phase3-card.is-biography-card.has-bio-readmore,
  .phase3-card[data-section="biography"].has-bio-readmore,
  .phase3-card.is-preset-biography.has-bio-readmore {
    --phase7-bio-column-gap: var(--p3-bio-column-gap-px, clamp(16px, 1.85vw, 28px));
    width: var(--p3-bio-stage3-card-width, min(1520px, calc(100vw - 142px))) !important;
    max-width: var(--p3-bio-stage3-card-width, min(1520px, calc(100vw - 142px))) !important;
    height: var(--p3-bio-locked-card-height, auto) !important;
    min-height: var(--p3-bio-locked-card-height, 0) !important;
    transition: width .34s cubic-bezier(.22, .72, .18, 1), max-width .34s cubic-bezier(.22, .72, .18, 1) !important;
    will-change: width;
    overflow: visible !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 {
    width: var(--p3-bio-stage1-card-width, min(820px, calc(100vw - 142px))) !important;
    max-width: var(--p3-bio-stage1-card-width, min(820px, calc(100vw - 142px))) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 {
    width: var(--p3-bio-stage2-card-width, min(1160px, calc(100vw - 142px))) !important;
    max-width: var(--p3-bio-stage2-card-width, min(1160px, calc(100vw - 142px))) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 {
    width: var(--p3-bio-stage3-card-width, min(1520px, calc(100vw - 142px))) !important;
    max-width: var(--p3-bio-stage3-card-width, min(1520px, calc(100vw - 142px))) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-layout,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-layout,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-layout {
    min-height: var(--p3-bio-locked-layout-height, var(--phase6-bio-promo-height, auto)) !important;
    align-items: start !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-copy-window {
    width: var(--p3-bio-stage3-window-width, var(--p3-bio-copy-full-width, 100%)) !important;
    max-width: none !important;
    height: var(--p3-bio-locked-copy-window-height, auto) !important;
    min-height: var(--p3-bio-locked-copy-window-height, 0) !important;
    overflow: hidden !important;
    transition: width .34s cubic-bezier(.22, .72, .18, 1) !important;
    will-change: width;
    contain: paint;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy-window {
    width: var(--p3-bio-stage1-window-width, calc((100% - (var(--phase7-bio-column-gap) * 2)) / 3)) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy-window {
    width: var(--p3-bio-stage2-window-width, calc(((100% - (var(--phase7-bio-column-gap) * 2)) / 3 * 2) + var(--phase7-bio-column-gap))) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy-window {
    width: var(--p3-bio-stage3-window-width, var(--p3-bio-copy-full-width, 100%)) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-copy,
  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-copy,
  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-copy,
  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-copy {
    width: var(--p3-bio-copy-full-width, 100%) !important;
    min-width: var(--p3-bio-copy-full-width, 100%) !important;
    max-width: none !important;
    min-height: 0 !important;
    height: var(--p3-bio-locked-copy-window-height, auto) !important;
    overflow: visible !important;
    column-count: 3 !important;
    column-gap: var(--phase7-bio-column-gap) !important;
    column-fill: balance !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-bio-readmore .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-bio-readmore .phase3-biography-readmore-controls,
  .phase3-card.is-biography-card.has-biography-promo.has-bio-readmore .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-biography-promo.has-bio-readmore .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-biography-promo.has-bio-readmore .phase3-biography-readmore-controls {
    width: var(--p3-bio-stage3-window-width, var(--p3-bio-copy-full-width, 100%)) !important;
    max-width: none !important;
    padding-right: 0 !important;
    margin-top: .64em !important;
    transition: width .34s cubic-bezier(.22, .72, .18, 1) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-1 .phase3-biography-readmore-controls {
    width: var(--p3-bio-stage1-window-width, 100%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-2 .phase3-biography-readmore-controls {
    width: var(--p3-bio-stage2-window-width, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-copy-stage-3 .phase3-biography-readmore-controls {
    width: var(--p3-bio-stage3-window-width, var(--p3-bio-copy-full-width, 100%)) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .phase3-card.is-biography-card.has-bio-readmore.is-bio-readmore-measuring,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-readmore-measuring,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-readmore-measuring,
  .phase3-card.is-biography-card.has-bio-readmore.is-bio-readmore-measuring .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore.is-bio-readmore-measuring .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore.is-bio-readmore-measuring .phase3-biography-copy-window {
    transition: none !important;
  }
}

/* V2 Events carousel: inserted between Latest and Discography without changing existing section geometry. */
.phase3-card.is-event-card {
  width: min(580px, calc(100vw - 160px));
  min-height: 126px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-color: rgba(168, 235, 255, .22);
}
.phase3-event-date-tile {
  width: 78px;
  height: 92px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(155deg, rgba(95,215,255,.10), rgba(180,130,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.phase3-event-date-tile span {
  font-size: .58rem;
  letter-spacing: .16em;
  color: rgba(168,235,255,.82);
  font-weight: 760;
}
.phase3-event-date-tile strong {
  font-size: 1.72rem;
  letter-spacing: -.04em;
  line-height: .98;
  font-weight: 760;
}
.phase3-event-date-tile em {
  font-style: normal;
  font-size: .50rem;
  letter-spacing: .10em;
  color: rgba(255,255,255,.50);
  text-transform: uppercase;
}
.phase3-event-content { gap: 5px; }
.phase3-event-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(168,235,255,.72);
  font-weight: 760;
}
.phase3-event-kicker b {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 2px 7px;
  color: rgba(255,255,255,.72);
  font-size: .50rem;
  letter-spacing: .11em;
  font-weight: 760;
}
.phase3-event-artist {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-size: .62rem;
  letter-spacing: .09em;
  color: rgba(255,255,255,.68);
}
.phase3-event-location-link {
  color: rgba(168,235,255,.92);
  text-decoration: none;
  text-underline-offset: 4px;
  font-weight: 760;
}
.phase3-event-location-link:hover {
  text-decoration: underline;
}
.phase3-event-location-text {
  color: rgba(168,235,255,.78);
  font-weight: 760;
}
.phase3-event-note {
  min-width: 0;
  text-align: left;
  font-size: .58rem;
  line-height: 1.34;
  letter-spacing: .045em;
  color: rgba(255,255,255,.56);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.phase3-event-actions {
  gap: 8px;
}
.phase3-event-action {
  color: rgba(168,235,255,.86);
  text-decoration: none;
  font-size: .61rem;
  letter-spacing: .09em;
  font-weight: 760;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(95,215,255,.16);
}
.phase3-event-action:hover { text-decoration: underline; text-underline-offset: 4px; }
.phase3-event-action.is-ticket { color: rgba(198,168,255,.90); }
.phase3-event-action.is-reminder { color: rgba(255,255,255,.86); }
.phase3-card.is-event-card.event-status-cancelled { opacity: .62; }
.phase3-card.is-event-card.event-status-postponed .phase3-event-kicker b { color: rgba(255,204,128,.86); }
.phase3-card.is-event-card.event-status-cancelled .phase3-event-kicker b { color: rgba(255,150,150,.88); }
.phase3-card.is-event-card.is-featured-event::after {
  content: "featured";
  position: absolute;
  right: 13px;
  top: 9px;
  font-size: .48rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(168,235,255,.65);
}
.phase3-card.is-event-card .phase3-player,
.phase3-card.is-event-card .phase3-track-browser,
.phase3-card.is-event-card .phase3-art { display: none !important; }

@media (max-width: 760px) {
  .phase3-card.is-event-card {
    width: min(278px, calc(100vw - 104px));
    min-height: 138px;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "eventdate content" "actions actions";
    gap: 8px 10px;
    padding: 9px 10px;
  }
  .phase3-event-date-tile {
    grid-area: eventdate;
    width: 58px;
    height: 74px;
    border-radius: 13px;
  }
  .phase3-event-date-tile span { font-size: .48rem; letter-spacing: .13em; }
  .phase3-event-date-tile strong { font-size: 1.33rem; }
  .phase3-event-date-tile em { font-size: .40rem; letter-spacing: .08em; }
  .phase3-card.is-event-card .phase3-content { grid-area: content; }
  .phase3-event-kicker { font-size: .46rem; letter-spacing: .10em; gap: 5px; }
  .phase3-event-kicker b { font-size: .42rem; padding: 1px 5px; }
  .phase3-event-artist { font-size: .50rem; letter-spacing: .055em; }
  .phase3-event-note { font-size: .46rem; letter-spacing: .04em; }
  .phase3-card.is-event-card .phase3-subtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .phase3-event-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 0;
  }
  .phase3-event-action { font-size: .48rem; letter-spacing: .055em; }
  .phase3-card.is-event-card.is-featured-event::after { display: none; }
}

/* Website V2 Events thumbnail cards: event image tile sits beside the date tile. */
.phase3-card.is-event-card.has-event-thumbnail {
  width: min(676px, calc(100vw - 142px));
  grid-template-columns: 78px 78px minmax(0, 1fr) auto;
}
.phase3-event-thumb-tile {
  width: 78px;
  height: 92px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  display: block;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(168,235,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.phase3-event-thumb-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 760px) {
  .phase3-card.is-event-card.has-event-thumbnail {
    width: min(330px, calc(100vw - 64px));
    grid-template-columns: 58px 58px minmax(0, 1fr);
    grid-template-areas: "eventdate eventthumb content" "actions actions actions";
  }
  .phase3-event-thumb-tile {
    grid-area: eventthumb;
    width: 58px;
    height: 74px;
    border-radius: 13px;
  }
}


/* V2.1: final desktop Latest media crop guard.
   YouTube/Instagram artwork must always fill the square visual frame; the
   source selection/fallback code provides the best thumbnail, and this layer
   prevents any later rule from containing or letterboxing the rendered media. */
@media (min-width: 761px) {
  .phase3-card[data-section="latest"] > .phase3-art,
  .phase3-card[data-section="latest"] > .phase3-art > .phase3-latest-media-link,
  .phase3-card[data-section="latest"] > .phase3-art > .phase3-latest-media-trigger {
    overflow: hidden !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .phase3-card[data-section="latest"] > .phase3-art img,
  .phase3-card[data-section="latest"] > .phase3-art picture,
  .phase3-card[data-section="latest"] > .phase3-art video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}

/* 2026-05-19 V2 Instagram standard embed popup
   Thumbnail clicks now open the official Instagram /embed/ page in a centered
   modal-style pop-up. The embed frame uses the media aspect supplied by the
   Latest payload when available, and falls back to Reel 9:16 / Post 1:1. */

.phase3-instagram-embed-modal-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999985 !important;
  pointer-events: none !important;
}
.phase3-instagram-embed-modal-host .phase3-latest-embed-frame.is-instagram-frame {
  pointer-events: auto !important;
}

body.phase3-instagram-popup-open {
  overflow: hidden !important;
}
body.phase3-instagram-popup-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999980 !important;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 34rem), rgba(0,0,0,.74) !important;
  backdrop-filter: blur(13px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.05) !important;
  pointer-events: none !important;
}
.phase3-latest-embed-frame.is-instagram-frame,
.phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame.is-instagram-frame,
.phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame.is-instagram-frame,
.phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-instagram-frame[data-radio-kind="instagram"] {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(540px, 92vw) !important;
  height: auto !important;
  aspect-ratio: var(--phase3-instagram-embed-aspect, 9 / 16) !important;
  max-width: 92vw !important;
  max-height: 88vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999990 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 32px 95px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5) !important;
}

.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="reel"],
.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="story"] {
  width: min(540px, 92vw, 49.5vh) !important;
  aspect-ratio: 9 / 16 !important;
}
.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="video"] {
  width: min(540px, 92vw, 70.4vh) !important;
  aspect-ratio: 4 / 5 !important;
}
.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="post"],
.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="carousel_album"],
.phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="image"] {
  width: min(540px, 92vw, 84vh) !important;
}
.phase3-latest-embed-frame.is-instagram-frame .phase3-latest-embed-player.is-instagram {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  background: #fff !important;
  object-fit: contain !important;
}
.phase3-latest-embed-frame.is-instagram-frame .phase3-latest-embed-close,
.phase3-latest-embed-frame.is-instagram-frame .phase3-latest-embed-fullscreen {
  z-index: 1000002 !important;
  background: rgba(0,0,0,.72) !important;
  border-color: rgba(255,255,255,.32) !important;
  color: #fff !important;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-latest-embed-frame.is-instagram-frame,
  .phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame.is-instagram-frame,
  .phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame.is-instagram-frame,
  .phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-instagram-frame[data-radio-kind="instagram"] {
    width: min(430px, 92vw) !important;
    max-height: 84svh !important;
    border-radius: 17px !important;
  }

  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="reel"],
  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="story"] {
    width: min(430px, 92vw, 47.25svh) !important;
  }
  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="video"] {
    width: min(430px, 92vw, 67.2svh) !important;
  }
  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="post"],
  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="carousel_album"],
  .phase3-latest-embed-frame.is-instagram-frame[data-instagram-item-type="image"] {
    width: min(430px, 92vw, 84svh) !important;
  }
}
body.tvos-mode .phase3-latest-embed-frame.is-instagram-frame {
  width: min(560px, 42vw) !important;
  max-height: 78vh !important;
  border-radius: 22px !important;
}

/* 2026-05-19 V2 Instagram native exact media modal
   The official Instagram iframe can letterbox reels/posts and often hides audio controls.
   When the Graph API provides a direct media URL, use a native media popup with the real
   media ratio, visible browser controls, no fullscreen button, and no forced black gutters. */
.phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
.phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
.phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
.phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame[data-radio-kind="instagram"] {
  width: min(540px, 92vw) !important;
  height: auto !important;
  aspect-ratio: var(--phase3-instagram-embed-aspect, 1 / 1) !important;
  max-width: 92vw !important;
  max-height: 88vh !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 28px 88px rgba(0,0,0,.72) !important;
}
.phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame .phase3-latest-embed-player.is-instagram-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame video.phase3-latest-embed-player.is-instagram-native {
  background: #000 !important;
}
.phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame .phase3-latest-embed-fullscreen {
  display: none !important;
}
.phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame .phase3-latest-embed-close {
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.68) !important;
  color: #fff !important;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
  .phase3-card.is-latest-embed-open[data-platform="instagram"] .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
  .phase3-card.is-latest-embed-open[data-card-preset="instagram_reel_post_embed"] .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame,
  .phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-instagram-frame.is-instagram-native-frame[data-radio-kind="instagram"] {
    max-height: 84svh !important;
    border-radius: 17px !important;
  }
}

/* 2026-05-19 V2 YouTube body-level original-aspect popup
   YouTube artwork/video triggers now use the same in-page modal system as the
   Instagram native popup. This is not window.open(), so browser pop-up blockers
   do not block the player. YouTube defaults to 16:9 and switches to 9:16 for
   Shorts/vertical items inferred by the frontend. */
.phase3-media-embed-modal-host,
.phase3-instagram-embed-modal-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999985 !important;
  pointer-events: none !important;
}
.phase3-media-embed-modal-host .phase3-latest-embed-frame.is-modal-frame,
.phase3-instagram-embed-modal-host .phase3-latest-embed-frame.is-modal-frame {
  pointer-events: auto !important;
}
body.phase3-media-popup-open {
  overflow: hidden !important;
}
body.phase3-media-popup-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999980 !important;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 34rem), rgba(0,0,0,.76) !important;
  backdrop-filter: blur(13px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.05) !important;
  pointer-events: none !important;
}
.phase3-latest-embed-frame.is-youtube-frame.is-modal-frame,
.phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-youtube-frame.is-modal-frame[data-radio-kind="youtube"] {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(920px, 92vw, calc(86vh * var(--phase3-youtube-embed-ratio, 1.7777778))) !important;
  height: auto !important;
  aspect-ratio: var(--phase3-youtube-embed-aspect, 16 / 9) !important;
  max-width: 92vw !important;
  max-height: 86vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999990 !important;
  overflow: hidden !important;
  contain: none !important;
  border-radius: 18px !important;
  background: #000 !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 32px 95px rgba(0,0,0,.74), 0 0 0 1px rgba(0,0,0,.54) !important;
}
.phase3-latest-embed-frame.is-youtube-frame.is-modal-frame .phase3-latest-embed-player.is-youtube,
.phase3-latest-embed-frame.is-youtube-frame.is-modal-frame iframe.phase3-latest-embed-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  display: block !important;
  border: 0 !important;
  background: #000 !important;
}
.phase3-latest-embed-frame.is-youtube-frame.is-modal-frame .phase3-latest-embed-fullscreen {
  display: none !important;
}
.phase3-latest-embed-frame.is-youtube-frame.is-modal-frame .phase3-latest-embed-close {
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
  border-radius: 999px !important;
  z-index: 1000002 !important;
  background: rgba(0,0,0,.68) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #fff !important;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .phase3-latest-embed-frame.is-youtube-frame.is-modal-frame,
  .phase3-card.is-latest-embed-open .phase3-latest-embed-frame.is-youtube-frame.is-modal-frame[data-radio-kind="youtube"] {
    width: min(92vw, calc(82svh * var(--phase3-youtube-embed-ratio, 1.7777778))) !important;
    max-height: 82svh !important;
    border-radius: 16px !important;
  }
  .phase3-latest-embed-frame.is-youtube-frame.is-modal-frame .phase3-latest-embed-close {
    top: 7px !important;
    right: 7px !important;
    width: 28px !important;
    height: 28px !important;
  }
}
body.tvos-mode .phase3-latest-embed-frame.is-youtube-frame.is-modal-frame {
  width: min(1120px, 78vw, calc(76vh * var(--phase3-youtube-embed-ratio, 1.7777778))) !important;
  max-height: 76vh !important;
  border-radius: 22px !important;
}

/* V2 hotfix: desktop Biography must first paint as one column.
   Earlier read-more measuring briefly painted the three-column newspaper layout in Safari/Firefox
   before collapsing to the default one-column stage. Keep the raw Biography copy single-column
   until the JS wrapper is fully prepared, then allow the clipped read-more system to use its
   internal three-column measurement invisibly. Mobile remains untouched. */
@media (min-width: 761px) {
  .phase3-card.is-biography-card:not(.has-bio-readmore) .phase3-biography-copy,
  .phase3-card[data-section="biography"]:not(.has-bio-readmore) .phase3-biography-copy,
  .phase3-card.is-preset-biography:not(.has-bio-readmore) .phase3-biography-copy {
    column-count: 1 !important;
    column-gap: 0 !important;
    column-rule: 0 !important;
    column-fill: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (min-width: 881px) {
  .phase3-card.is-biography-card.has-bio-readmore:not(.is-bio-readmore-ready),
  .phase3-card[data-section="biography"].has-bio-readmore:not(.is-bio-readmore-ready),
  .phase3-card.is-preset-biography.has-bio-readmore:not(.is-bio-readmore-ready),
  .phase3-card.is-biography-card.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy-window,
  .phase3-card[data-section="biography"].has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy-window,
  .phase3-card.is-preset-biography.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy-window,
  .phase3-card.is-biography-card.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy,
  .phase3-card[data-section="biography"].has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy,
  .phase3-card.is-preset-biography.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-copy,
  .phase3-card.is-biography-card.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-readmore-controls,
  .phase3-card[data-section="biography"].has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-readmore-controls,
  .phase3-card.is-preset-biography.has-bio-readmore:not(.is-bio-readmore-ready) .phase3-biography-readmore-controls {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .phase3-card.is-biography-card.is-bio-readmore-preparing,
  .phase3-card[data-section="biography"].is-bio-readmore-preparing,
  .phase3-card.is-preset-biography.is-bio-readmore-preparing {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .phase3-card.is-biography-card.is-bio-readmore-ready.is-bio-copy-stage-1,
  .phase3-card[data-section="biography"].is-bio-readmore-ready.is-bio-copy-stage-1,
  .phase3-card.is-preset-biography.is-bio-readmore-ready.is-bio-copy-stage-1 {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}