:root {
  color-scheme: dark;
  --ink: #22291d;
  --deep: #192117;
  --panel: #2b3626;
  --paper: #f5eedf;
  --muted: #c0bcb0;
  --gold: #e6b953;
  --gold-shine: #ffebaf;
  --gold-glint: 50%;
  --gold-angle: 108deg;
  --gold-foil: linear-gradient(var(--gold-angle), #ba8c39 0%, #c99b42 20%, #e4b654 43%, #fff1b7 50%, #e6b750 57%, #c89a40 80%, #ba8c39 100%);
  --gold-foil-text: linear-gradient(var(--gold-angle), #cda047 0%, #e4b654 43%, #fff1b7 50%, #e6b750 57%, #cda047 100%);
  --line: #4c5942;
  --display: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--paper); background: var(--ink); font: 16px/1.55 var(--sans); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
[hidden] { display: none !important; }
p, h1, h2, h3 { margin: 0; }
img { display: block; max-width: 100%; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; z-index: 3; top: 0; left: 12px; padding: 10px 14px; background: var(--ink); transform: translateY(-125%); }
.skip:focus { transform: translateY(0); }
.top { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; letter-spacing: .12em; white-space: nowrap; }
.accent { color: var(--gold); }
.top nav { display: flex; gap: clamp(20px, 3.5vw, 46px); color: var(--muted); font-weight: 600; font-size: 14px; }
.top nav a:hover, .footer a:hover { color: var(--gold); }
.top-store { display: inline-flex; align-items: center; gap: 15px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.hero { border-top: 1px solid var(--line); background: radial-gradient(ellipse at 73% 24%, #34422b, transparent 68%), var(--ink); }
.hero-inner { min-height: clamp(490px, 48vw, 635px); display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: center; }
.portrait { grid-column: 2; grid-row: 1; position: relative; width: 100%; max-width: 496px; justify-self: end; }
.portrait img { width: 100%; height: auto; }
.portrait { padding-bottom: 3rem; }
.artist-home .portrait { padding-bottom:58px }
.portrait-art { position: relative; margin-left: 36px; }
.hero-actions {
  position:absolute; left:0; bottom:0; width:min(100%, 390px); z-index:2;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.5rem,1.5vw,.85rem);
}
.hero-portal { position:relative }
.hero-portal summary, .hero-actions .hero-merch {
  display:flex; width:100%; min-height:58px; padding-inline:clamp(.65rem,1.5vw,1.3rem);
  background:var(--deep); border-color:var(--gold); color:var(--paper);
  font-size:clamp(.74rem,2.5vw,.92rem); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.hero-portal summary { justify-content:center; padding-right:1.55rem; list-style:none; cursor:pointer }
.hero-actions :is(summary,.hero-merch):is(:hover,:focus-visible) { color:var(--gold-shine); border-color:var(--gold-shine) }
.hero-portal summary::-webkit-details-marker { display:none }
.portal-arrow { position:absolute; right:clamp(.55rem,1.5vw,1rem); width:.6rem; height:.6rem; border:solid var(--gold); border-width:2px 0 0 2px; rotate:45deg; translate:0 .15rem }
.portal-menu {
  position:absolute; inset:auto 0 calc(100% + .45rem); display:grid; background:var(--deep);
  border:1px solid var(--line); box-shadow:0 -8px 35px #0007; padding:.4rem; min-width:10rem;
}
.hero-portal:not([open]) .portal-menu { display:none }
.portal-menu a {
  min-height:46px; display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .85rem; font-weight:700; border-bottom:1px solid var(--line)
}
.portal-menu a:last-child { border:0 }
.portal-menu a span { color:var(--gold); font-size:.68rem; letter-spacing:.1em }
.portal-menu a:is(:hover,:focus-visible) { color:var(--gold); background:var(--panel) }
@media(prefers-reduced-motion:no-preference) {
  .hero-portal[open] .portal-menu { animation:portal-rise 280ms cubic-bezier(.22,.72,.24,1) both }
  @keyframes portal-rise { from { opacity:0; translate:0 14px } to { opacity:1; translate:0 0 } }
}
.portrait-motion {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; visibility:hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-motion] .portrait-motion { visibility:visible }
  .hero[data-hero-motion^="point"] .portrait-art > img { visibility:hidden }
  .hero[data-hero-motion="point-hold"] #browse-releases {
    border-color:var(--gold);
    box-shadow:0 0 0 2px #ffebaf55;
  }
}

.portrait-index, .portrait-cross { position: absolute; z-index: 1; color: var(--gold-shine); }
.portrait-index { bottom: 23px; right: 25px; font-size: 11px; letter-spacing: .28em; font-weight: 800; }
.portrait-cross { top: 17px; right: 23px; font-size: 24px; }
.hero-copy { grid-column: 1; grid-row: 1; max-width: 710px; padding: 44px 0 52px; }
.eyebrow { font-size: 11px; line-height: 1.45; font-weight: 800; letter-spacing: .20em; text-transform: uppercase; color: var(--gold); }
.signal { display: inline-block; width: 7px; height: 7px; margin-right: 8px; transform: rotate(45deg); vertical-align: 1px; background: var(--gold); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.057em; }
.hero h1 { font-size: clamp(52px, 8vw, 120px); line-height: .86; margin: 24px 0; }
h1 em, h2 em { font-weight: 500; color: var(--gold); }
.hero h1 em { text-shadow: 0 3px 22px #17181199; }
.intro { max-width: 390px; font-size: 17px; color: var(--muted); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 17px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 800; line-height: 1.25; transition: color .18s, background .18s, border .18s; }
.primary { background: var(--gold); border-color: var(--gold); color: #20170e; }
.primary:hover { filter: brightness(1.09); border-color: var(--gold-shine); }
.outline { border-color: #79786a; color: var(--paper); }
.outline:hover { border-color: var(--gold); color: var(--gold); }
.strip { background: var(--gold); color: #20170e; }
.strip-inner { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 5vw, 70px); text-align: center; font-weight: 800; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.strip-inner [aria-hidden] { font-size: 13px; }
.feature { padding-block: 92px; display: grid; grid-template-columns: minmax(170px, 340px) minmax(0, 1fr); gap: clamp(40px, 8vw, 116px); align-items: center; }
.feature-art { padding: 11px; border: 1px solid #656856; position: relative; }
.feature h2, .section-top h2, .about h2 { font-size: clamp(46px, 7vw, 91px); line-height: .98; margin: 12px 0 14px; }
.feature-copy > p:not(.eyebrow) { color: var(--muted); max-width: 430px; font-size: 17px; margin-bottom: 23px; }
.shop { border-block: 1px solid #394032; padding-block: 72px 82px; background: var(--deep); }
.section-top { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 24px; margin-bottom: 24px; }
.section-top > p { color: var(--muted); max-width: 380px; padding-bottom: 13px; }
.section-top strong { color: var(--paper); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filters button { min-height: 42px; color: var(--muted); background: transparent; padding: 7px 13px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.filters button:hover, .filters button[aria-pressed="true"] { background: #353325; border-color: var(--gold); color: var(--gold); }
.catalog-status { min-height: 1.5em; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.record { display: flex; flex-direction: column; border: 1px solid var(--line); min-width: 0; background: var(--panel); }
.record-art { aspect-ratio: 1.22; background: radial-gradient(ellipse at 50% 72%, #747557, #272c24 58%, #1c221b); display: grid; place-items: center; overflow: hidden; color: var(--gold); font-family: var(--display); font-size: 60px; }
.record-art img { width: 100%; height: 100%; object-fit: cover; }
.record-copy { padding: 18px 16px 15px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.record h3 { font-family: var(--display); font-size: 29px; line-height: 1.08; font-weight: 500; letter-spacing: -.035em; overflow-wrap: anywhere; }
.record-date, .record-note { color: var(--muted); font-size: 13px; }
.record-note { margin: 0 0 3px; }
.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 10px; }
.record-actions .button { min-height: 42px; padding-inline: 10px; }
.record-actions .text-link { font-size: 13px; padding: 8px 0; }
.record-status { font-size: 12px; color: var(--muted); margin-top: 3px; }
.text-link { text-decoration: underline; text-underline-offset: 5px; color: var(--gold); font-weight: 700; }
.text-link:hover { color: var(--gold-shine); }
.about { padding-block: 80px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; }
.about-copy { color: var(--muted); max-width: 430px; font-size: 17px; }
.about-copy p { margin-bottom: 18px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 13px; }
.player { position: fixed; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(690px, calc(100% - 24px)); background: var(--panel); padding: 10px 14px; border: 1px solid var(--gold); box-shadow: 0 8px 24px #0b0d09; display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; }
.player strong, .player .eyebrow { display: block; }
.player audio { width: 100%; height: 40px; }
.player button { min-width: 39px; min-height: 39px; color: var(--paper); border: 1px solid var(--line); background: transparent; font-size: 24px; line-height: 1; }
.player p:empty { display: none; }
.player p { color: var(--muted); grid-column: 1 / -1; font-size: 13px; }
.manage { padding-block: 34px 70px; }
.manage h1 { font-size: clamp(46px, 8vw, 89px); line-height: 1; margin-block: 12px; }
.manage .intro { max-width: 610px; }
.manage h2 { font-size: 31px; line-height: 1.1; margin-bottom: 15px; }
#manage-status { margin-block: 12px; color: var(--gold); min-height: 25px; }
.edit-layout { display: grid; grid-template-columns: 1fr 1.6fr; align-items: start; gap: 20px; }
.panel { padding: 22px; border: 1px solid var(--line); background: var(--panel); }
.setup { max-width: 580px; }
.setup p { margin-bottom: 15px; color: var(--muted); }
.release-list { display: grid; gap: 8px; margin-bottom: 16px; }
.release-list button { background: var(--deep); color: var(--paper); border: 1px solid var(--line); padding: 9px 12px; min-height: 45px; text-align: left; }
.release-list button[aria-current="true"], .release-list button:hover { border-color: var(--gold); }
.release-list small { display: block; color: var(--muted); }
#editor-form { display: grid; gap: 14px; }
#editor-form label { display: grid; gap: 5px; font-size: 14px; }
#editor-form small, .form-status { color: var(--muted); }
#editor-form input:not([type=checkbox]), #editor-form textarea { width: 100%; min-width: 0; min-height: 43px; color: var(--paper); border: 1px solid var(--line); background: var(--deep); padding: 8px 10px; }
#editor-form .checkbox { display: flex; gap: 9px; align-items: center; }
.checkbox input { accent-color: var(--gold); width: 17px; height: 17px; }
#editor-form button { justify-self: start; }
.form-status:empty { display: none; }
@media (max-width: 900px) {
  .wrap { width: min(100% - 56px, 1160px); }
  .hero h1 { font-size: clamp(61px, 10.2vw, 100px); }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 34px); }
  .top { min-height: 65px; gap: 12px; }
  .brand { gap: 6px; font-size: 14px; }
  .brand img { width: 27px; height: 27px; }
  .top nav { gap: 15px; font-size: 13px; }
  .top:not(.manage-top) .top-store { display: none; }
  .hero-inner { min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .portrait { order: -1; align-self: center; }
  .portrait-index { right: 13px; bottom: 11px; }
  .portrait-cross { right: 13px; top: 9px; }
  .hero-copy { padding: 23px 0 29px; }
  .hero h1 { font-size: clamp(44px, 12.2vw, 72px); margin-block: 14px 16px; }
  .intro { font-size: 15px; }
  .actions { margin-top: 19px; gap: 8px; }
  .button { padding-inline: 12px; }
  .strip-inner { gap: 8px; font-size: 8px; letter-spacing: .09em; }
  .feature, .about, .section-top, .edit-layout { grid-template-columns: 1fr; gap: 17px; }
  .feature, .about { padding-block: 45px; }
  .feature-art { width: min(68%, 270px); }
  .shop { padding-block: 43px; }
  .section-top { margin-bottom: 12px; }
  .section-top > p { padding-bottom: 0; }
  .catalog { grid-template-columns: 1fr; gap: 15px; }
  .record-art { aspect-ratio: 1.45; }
  .footer-inner { font-size: 11px; gap: 8px; }
  .panel { padding: 15px; }
  .player { grid-template-columns: 1fr auto; }
  .player audio { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.download-link { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; margin-left: auto; color: var(--gold); font-weight: 700; font-size: 13px; padding: 7px 0; }
.download-link:hover { text-decoration: underline; }
.shop-message { margin-block: 12px; color: var(--gold); }
.shop-message:empty { display: none; }
.download-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.download-form h2 { margin-bottom: 0; }
.download-form p { color: var(--muted); font-size: 14px; }
.download-form label { display: grid; gap: 8px; }
.download-form button { justify-self: start; }
.download-form input { max-width: 100%; }
.orders { display: grid; gap: 14px; max-width: 640px; }
.order-card p { color: var(--muted); margin-bottom: 12px; }
.order-card h2 { margin-bottom: 6px; }
@media (max-width: 620px) { .download-link { margin-left: 0; padding-inline: 5px; } }
.bandlab { padding-block: 76px 72px; border-bottom: 1px solid var(--line); }
.bandlab .section-top { grid-template-columns: 1.65fr 1fr; }
.bandlab .section-top h2 { font-size: clamp(48px, 6.7vw, 85px); }
.bandlab-follow { justify-self: end; max-width: 260px; padding-bottom: 13px; color: var(--muted); }
.bandlab-follow p { margin-bottom: 9px; }
.bandlab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bandlab-grid .record-art { aspect-ratio: 1; }
.bandlab-grid .record-copy { padding: 13px 14px 15px; }
.bandlab-grid .record-copy .text-link { margin-top: auto; padding-top: 5px; font-size: 13px; }
.bandlab-meta { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; }
.explicit { border: 1px solid var(--line); padding: 0 4px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) {
  .bandlab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bandlab { padding-block: 45px; }
  .bandlab .section-top { grid-template-columns: 1fr; }
  .bandlab-follow { justify-self: start; padding-bottom: 5px; }
  .bandlab-grid { gap: 10px; }
  .bandlab-grid .record-copy { padding: 10px 8px 12px; }
  .bandlab-grid h3 { font-size: clamp(19px, 5vw, 28px); }
}

/* Artist homepage */
html:has(.artist-home) { scroll-padding-top: var(--scroll-offset, 88px); }
.artist-header {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.artist-home .skip, .dmark .skip { position: fixed; z-index: 4; }
.artist-header nav { gap: clamp(8px, 3vw, 36px); }
.artist-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
}
.artist-header nav a:last-child { color: var(--gold); }
.artist-home .hero-inner { min-height: 0; padding-block: 20px; }
.artist-home .hero h1 { font-size: clamp(48px, 8vw, 112px); line-height: .92; }
.artist-home .feature {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(38px, 6vw, 76px);
}
.artist-home .feature h2,
.artist-home .section-top h2,
.artist-home .about h2,
.collection-feature h2 { font-size: clamp(38px, 6vw, 72px); }
.artist-home .bandlab { border-bottom: 0; }
.artist-home .record-art { aspect-ratio: 1; }
.artist-home .record-art img { object-fit: contain; }
.artist-home .record-actions .button, .artist-home .filters button { min-height: 44px; }
.collection-feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(38px, 6vw, 76px);
  border-bottom: 1px solid var(--line);
}
.collection-copy h2 { line-height: 1; margin-block: 12px; }
.collection-copy > p:not(.eyebrow) { color: var(--muted); max-width: 32ch; margin-bottom: 18px; }
@media (max-width: 620px) {
  html:has(.artist-home) { scroll-padding-top: var(--scroll-offset, 112px); }
  .artist-header .top {
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 0;
    padding-top: 7px;
  }
  .artist-header nav { width: 100%; justify-content: space-between; gap: 0; }
  .artist-home .hero-inner { padding-block: 0 20px; }
  .artist-home .hero-copy { padding-bottom: 0; }
  .artist-home .portrait { order: 0; width: min(100%, 330px); }
  .artist-home .hero h1 { font-size: clamp(44px, 12.2vw, 72px); }
  .artist-home .feature {
    grid-template-columns: minmax(88px, .75fr) minmax(0, 1.25fr);
    align-items: start;
  }
  .artist-home .feature h2 { font-size: clamp(28px, 7vw, 44px); }
  .artist-home .feature-copy > p:not(.eyebrow) { font-size: 14px; margin-bottom: 12px; }
  .collection-feature { grid-template-columns: 1fr; }
  .artist-home .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .artist-home .catalog .record-copy { padding: 10px; }
  .artist-home .catalog .record h3 { font-size: clamp(18px, 5vw, 26px); }
}

.scroll-header { position: sticky; top: 0; z-index: 3; }
.scroll-nav a[aria-current="location"] {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: 2px;
}
.scroll-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.scroll-top {
  position: fixed;
  z-index: 2;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--paper);
  background: var(--deep);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}
.scroll-top:hover { color: var(--gold); }
.artist-home:has(.player:not([hidden])) .scroll-top { bottom: 148px; }
/* Artist pages */
.artist-header nav { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem clamp(.55rem,2vw,1.55rem); }
.artist-header nav a { white-space:nowrap }
.artist-header nav a[aria-current="page"] { color:var(--gold); text-underline-offset:.25em; text-decoration:underline }
.artist-home .strip { margin-bottom:0 }
.artist-home .bandlab,.artist-home .shop,.artist-home .about { padding-block:clamp(2.5rem,6vw,4.25rem) }
.artist-home .section-top h2,.artist-home .about h2 { font-size:clamp(2.4rem,6vw,4.2rem) }
.artist-home .section-top { margin-bottom:1.15rem }
.artist-home .catalog,.artist-home .bandlab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
.artist-home :is(.catalog,.bandlab-grid) .record {
  display:grid;
  grid-template-columns:clamp(64px,12vw,104px) minmax(0,1fr);
  align-items:start;
}
.artist-home :is(.catalog,.bandlab-grid) .record-art { margin:.75rem 0 .75rem .75rem; aspect-ratio:1; }
.artist-home :is(.catalog,.bandlab-grid) .record-copy { padding:.7rem .85rem .75rem; gap:.35rem }
.artist-home :is(.catalog,.bandlab-grid) .record h3 { font-size:clamp(1.15rem,2.6vw,1.65rem); margin:0 }
.artist-home .bandlab-grid .record-copy .text-link { justify-self:start; align-self:flex-start }
.provider-embed {
  display:block; grid-column:1/-1; width:100%; min-width:0; border:0; border-radius:.55rem;
  background:var(--deep); margin-block:.15rem .65rem;
}
.bandlab-grid .provider-embed { width:calc(100% - 1.4rem); margin-inline:auto }

.artist-home .record-actions { padding-top:.15rem }
.artist-home .record-actions .button { padding-inline:.65rem }
.booking h1 { font:500 clamp(2.5rem,6vw,4.4rem)/1 var(--display); letter-spacing:-.035em; margin:.45rem 0 .7rem }
.booking > p:not(.eyebrow) { color:var(--muted); max-width:63ch }

.booking { max-width:770px; padding-block:clamp(2.5rem,7vw,5rem) }
.booking form { display:grid; gap:1rem; margin-top:1.5rem; padding:clamp(1rem,4vw,1.5rem); background:var(--panel); border:1px solid var(--line) }
.booking-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
.booking label { display:grid; gap:.35rem; font-weight:650 }
.booking input,.booking textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:.25rem; padding:.7rem; background:var(--deep); color:var(--paper); font:inherit }
.booking textarea { resize:vertical; }
.booking .actions { align-items:center; margin:0 }
.booking-status { color:var(--gold); margin:.25rem 0 0 }
.booking-status:empty { display:none }

@media(max-width:700px) {
  .artist-home .catalog,.artist-home .bandlab-grid { grid-template-columns:1fr }
  .artist-home .bandlab-follow { margin:0; padding:0 }
}
@media(max-width:475px) {
  .booking-fields { grid-template-columns:1fr }
  .artist-header nav { gap:.25rem .65rem }
}

/* The homepage moves like a record: alternating turns, with native vertical scroll. */
.artist-home main { overflow:clip }
.artist-home .hero-copy .intro { max-width:none }
.streaming-inline { white-space:nowrap }
.streaming-icons { display:inline-flex; align-items:center; vertical-align:middle; margin-left:.2rem }
.streaming-icons a {
  display:inline-grid; place-items:center; width:40px; height:44px; border-radius:50%; color:var(--gold);
}
.streaming-icons a:is(:hover,:focus-visible) { color:var(--gold-shine) }
.streaming-icons svg { width:21px; height:21px }
.artist-home .feature { margin-block:0; padding-block:clamp(1.2rem,4vw,2.75rem); }
.artist-home .feature-copy audio { display:block; width:min(100%,32rem); margin:.45rem 0 .85rem }
.artist-home .feature-copy .movement-line,.movement-line { color:var(--gold); font-size:clamp(.95rem,2vw,1.15rem); margin:.4rem 0 .7rem }
.movement-link { width:min(100% - 34px,1040px); height:clamp(42px,7vw,84px); margin-inline:auto; background:url("movement.svg") center/100% 100% no-repeat; opacity:.74; pointer-events:none }
.movement-link.drift-right { transform:scaleX(-1) }
/* The winding track follows scroll progress. Its accents share one tempo. */
[data-scroll-reveal] {
  --motion-ease: cubic-bezier(.22, .72, .24, 1);
  --motion-duration: 640ms;
  --motion-step: 78ms;
  --beat: 0;
}
[data-beat="1"] { --beat: 1 }
[data-beat="2"] { --beat: 2 }
[data-beat="3"] { --beat: 3 }
@media (prefers-reduced-motion: no-preference) {
  [data-movement-track] { transform: translate3d(var(--turn-x, 0px), var(--turn-y, 0px), 0) }
  .scroll-revealed {
    animation: motion-accent var(--motion-duration) var(--motion-ease) calc(var(--beat) * var(--motion-step)) both;
  }
  @keyframes motion-accent {
    from { opacity: .56; translate: 0 9px }
    to { opacity: 1; translate: 0 0 }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.artist-home) { scroll-behavior: auto }
}
.artist-home :is(.videos,.invitation) { padding-block:clamp(1.35rem,4.5vw,3.15rem) }
.artist-home :is(.videos,.invitation) h2 { font:500 clamp(2.4rem,6vw,4.2rem)/1 var(--display); letter-spacing:-.04em; margin:.3rem 0 }
.video-layout {
  display:grid; grid-template-columns:minmax(0,1.85fr) minmax(230px,1fr);
  column-gap:clamp(.75rem,2.6vw,2rem); margin-top:1.25rem;
}
.video-screen { grid-area:1 / 1; background:var(--deep); border:1px solid var(--line); overflow:hidden }
.video-cover,.video-screen iframe { display:block; position:relative; width:100%; aspect-ratio:16/9; min-height:200px; border:0; padding:0; background:var(--deep) }
.video-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.65 }
.video-cover:focus-visible { outline-offset:-5px }
.video-play-label {
  position:absolute; left:50%; top:50%; translate:-50% -50%; padding:.75rem 1rem;
  background:var(--gold); color:var(--deep); white-space:nowrap; font-size:.85rem; font-weight:800
}
.video-caption { grid-area:2 / 1; display:flex; justify-content:space-between; align-items:center; gap:.65rem; padding:.7rem 0 }
.video-status { grid-area:3 / 1 }
.video-caption p,.video-status,#video-next { color:var(--muted); font-size:.86rem }
.video-queue {
  grid-area:1 / 2; contain:size; min-width:0; min-height:0;
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  padding:clamp(.45rem,1.2vw,.85rem);
}
.video-queue ol {
  --queue-gap:.35rem;
  display:grid; flex:1; min-height:0; grid-auto-rows:calc((100% - 2 * var(--queue-gap)) / 3);
  gap:var(--queue-gap); list-style:none; padding:0 .2rem 0 0; margin:.45rem 0 0;
  overflow-y:auto; scrollbar-color:var(--gold) var(--deep); scroll-snap-type:y proximity;
}
.video-queue li { min-height:0; scroll-snap-align:start }
.video-queue button {
  --queue-art:clamp(1.5rem,3vw,2.75rem);
  color:var(--paper); background:var(--deep); width:100%; height:100%; border:1px solid var(--line);
  display:grid; grid-template-columns:var(--queue-art) minmax(0,1fr); gap:.6rem; align-items:center;
  padding:.12rem .4rem; text-align:left; font-size:.875rem; font-weight:700; line-height:1.2;
}
.video-queue button:is([aria-current],:hover) { border-color:var(--gold); color:var(--gold) }
.video-queue button:focus-visible { outline-offset:-3px }
.video-queue button img { width:var(--queue-art); height:var(--queue-art); object-fit:cover }
.video-queue small { display:block; color:var(--muted); font-size:.7rem; font-weight:400; margin-top:.12rem }

.artist-home .catalog { display:grid; grid-template-columns:1fr; gap:0 }
.artist-home .catalog .record { border-width:0 0 1px; background:transparent; grid-template-columns:clamp(50px,10vw,78px) minmax(0,1fr) }
.artist-home .catalog .record-copy { min-height:78px }
.artist-home .catalog .record-note { max-width:65ch }
.artist-home .catalog .record-art { margin:.55rem 0 .55rem .3rem }
.station-art { position:relative; background:var(--deep); border:1px solid var(--line); padding:.5rem }
.station-art img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover }
.station-art-label { display:flex; align-items:center; gap:.3rem; padding:.55rem .2rem .1rem; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold) }
.station-art-label span:last-child { margin-left:auto; color:var(--muted) }
.station-console { border:1px solid var(--line); background:var(--panel); padding:clamp(.7rem,2vw,1.15rem); margin-block:1rem; max-width:32rem }
.station-track { font:500 clamp(1.45rem,3.5vw,2.35rem)/1.1 var(--display); margin:.35rem 0 }
.station-cue { color:var(--muted); font-size:.86rem; min-height:1.4em }
.station-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem }
.station-actions .button { min-height:42px; padding:.4rem .65rem }
.station-preview { max-width:32rem; margin-bottom:.55rem; color:var(--muted); font-size:.85rem }
.station-preview summary { padding:.35rem 0; cursor:pointer }
#radio-feature-form { margin:.65rem 0 1rem }
#radio-feature-form label { display:grid; gap:.3rem }
#radio-feature-form select { width:100%; min-height:40px; padding:.45rem; color:var(--paper); background:var(--deep); border:1px solid var(--line) }

.artist-home .about-copy { max-width:58ch }
.story-gallery, .collection-lookbook { display:grid; gap:clamp(.55rem,1.5vw,1.1rem) }
.story-gallery { grid-column:1/-1; grid-template-columns:1fr 1.16fr 1fr }
.story-gallery figure, .collection-lookbook figure { margin:0 }
.story-gallery figure, .collection-lookbook figure { min-width:0 }
.story-gallery img, .collection-lookbook img {
  display:block; width:100%; height:auto; object-fit:cover; background:var(--panel); border:1px solid var(--line)
}
.story-gallery img { aspect-ratio:4/4.5; object-position:50% 25% }
.story-gallery figure:nth-child(2) img { object-position:52% 24% }
.story-gallery figcaption, .collection-lookbook figcaption {
  display:flex; justify-content:space-between; gap:.4rem; padding:.45rem .05rem;
  color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase
}
.collection-feature { grid-template-columns:1fr; gap:clamp(1.05rem,2.5vw,2rem) }
.collection-copy > p:not(.eyebrow) { max-width:58ch }
.collection-lookbook { grid-template-columns:repeat(4,minmax(0,1fr)) }
.collection-lookbook img { aspect-ratio:3/4; object-position:50% 44% }
.invitation { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.1rem }
.invitation .movement-line { margin-bottom:0 }
.footer-socials { padding-block:0 1.1rem }
.socials { display:flex; align-items:center; justify-content:flex-end; gap:.38rem }
.socials a { width:2rem; height:2rem; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--paper) }
.socials a:hover,.socials a:focus-visible { border-color:var(--gold); color:var(--gold) }
.socials svg { width:1.06rem; height:1.06rem }
.artist-home .top {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:1rem;
}
.artist-home .top .brand { justify-self:start }
.header-dx { grid-column:2; display:grid; place-items:center; width:58px; min-height:50px }
.header-dx img { width:47px; height:auto }
.header-records-seal { grid-column:3; justify-self:end; width:clamp(42px,4.5vw,54px); height:auto }
.lyrics-list { display:grid; margin-top:1.4rem }
.lyrics-list li { padding:.75rem 0; border-bottom:1px solid var(--line) }
.lyrics-list li a { margin-left:.65rem }
@media(max-width:700px) {
  .artist-home .feature { grid-template-columns:minmax(0,1fr); gap:.9rem }
  .station-art { max-width:min(100%,340px) }
  .video-layout { grid-template-columns:minmax(0,1fr) }
  .video-queue { grid-area:4 / 1; aspect-ratio:16/9; min-height:202px }
  .feature-copy { grid-row:1 }
  .story-gallery, .collection-lookbook { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .story-gallery figure:first-child { grid-column:1/-1 }
  .story-gallery figure:first-child img { aspect-ratio:5/4; object-position:50% 28% }
  .artist-home .footer-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; padding-block:1rem }
  .artist-home .footer .socials { justify-content:flex-start }
}
@media(max-width:540px) {
  .artist-home .top { padding-top:0; gap:0 }
}

.primary, .strip, .signal, .scroll-progress, .video-play-label {
  background-image:var(--gold-foil);
  background-size:230% 100%;
  background-position:var(--gold-glint) center;
}
@media (forced-colors: none) {
  @supports (background-clip:text) {
    .accent, .eyebrow, .text-link, .movement-line, .artist-home .feature-copy .movement-line,
    .portal-menu a span, h1 em, h2 em, .station-art-label, .download-link, .top-store,
    .portrait-index, .portrait-cross {
      background-image:var(--gold-foil-text);
      background-size:230% 100%;
      background-position:var(--gold-glint) center;
      background-clip:text;
      color:transparent;
      text-decoration-color:var(--gold);
    }
    .text-link:is(:hover,:focus-visible) { background-image:none; color:var(--gold-shine) }
  }
  @supports (mask:url("movement.svg")) {
    .movement-link {
      mask:url("movement.svg") center/100% 100% no-repeat;
      background:var(--gold-foil) var(--gold-glint) center/230% 100%;
    }
  }
}