/* Owner's four annotated refinements. Local candidate, September 27. */
/* A narrow editorial spine uses the landing's previously empty left edge. */
.hero-name{position:absolute;inset:0 auto 0 0;width:50px;z-index:4;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--rule);color:var(--paper);background:color-mix(in srgb,var(--black) 68%,transparent)}
.hero-name span{writing-mode:vertical-rl;transform:rotate(180deg);font:900 32px/1 var(--display);letter-spacing:.14em;transition:letter-spacing 1.4s,color 1.4s}
.hero-name:hover span{letter-spacing:.22em;color:var(--accent)}
.hero-copy{left:max(82px,4vw);width:calc(65% - 50px)}
/* The official marks sit directly in the site's material, with a fine baseline. */
.brand-destination,.platform-card{background:transparent!important;color:var(--paper)!important;border:0;border-bottom:1px solid var(--rule);box-shadow:none!important}
.brand-destination{position:relative}
.brand-destination:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s}
.brand-destination:hover:after{transform:scaleX(1)}
.topbar .brand-destination{padding:12px 10px;min-height:56px}
.native-suno{display:inline-flex;position:relative;flex-shrink:0;align-items:center;justify-content:center}
.native-suno:after{content:'';position:absolute;inset:0;background:currentColor;mask:url(brand/suno-official.svg) center/contain no-repeat;-webkit-mask:url(brand/suno-official.svg) center/contain no-repeat}
.native-suno .suno-logo{opacity:0}
:root[data-theme=light] .youtube-logo{content:url(brand/youtube-almostblack.png)}
.platform-card{justify-content:flex-start;padding-inline:14px;gap:24px;transition:color 1s,border-color 1s,transform 1s}
.platform-card:before{height:1px;transform:scaleX(0)}
.platform-card:hover{transform:translateY(-2px)}
.board-platform{min-width:170px;padding-inline:10px}
/* About belongs to the field. Same ground, a soft clearing, no rectangular card. */
.about-copy{top:23%;left:7%;width:42%;max-width:720px;padding:0;border:0;background:none;color:var(--board-ink);isolation:isolate}
.about-copy:before{content:'';position:absolute;inset:-100px -110px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side,var(--board-paper) 48%,color-mix(in srgb,var(--board-paper) 85%,transparent) 72%,transparent 100%)}
.about-copy h2{font:500 18px/1.4 var(--mono);letter-spacing:.18em;margin:0 0 30px;display:flex;align-items:center;gap:20px}
.about-copy h2:before{content:'';height:1px;width:52px;background:currentColor}
.about-copy .about-lead{font:900 clamp(52px,5.6vw,112px)/.96 var(--display);letter-spacing:-.025em;margin:0 0 32px;max-width:none;text-wrap:initial}
.about-copy .about-detail{font:400 clamp(22px,1.65vw,30px)/1.5 Arial,Helvetica,sans-serif;max-width:29ch;text-wrap:pretty;margin:0}
.board-links{color:var(--board-ink)}
.board-links .brand-destination{color:var(--board-ink)!important;border-bottom-color:color-mix(in srgb,var(--board-ink) 35%,transparent)}
.board-links .icon-button{background:transparent;color:var(--board-ink);border-color:color-mix(in srgb,var(--board-ink) 35%,transparent)}
/* Oversized transport: atmospheric motion responds to actual play/pause state. */
.transport-row{position:relative;isolation:isolate;min-height:174px;grid-template-columns:122px minmax(0,1fr) 90px;gap:32px;padding:16px 0;--play-progress:0%}
.transport-row:after{content:'';position:absolute;bottom:0;left:0;width:var(--play-progress);height:2px;background:var(--accent);box-shadow:0 0 16px var(--accent);transition:width .24s linear;pointer-events:none}
.transport-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.25;transition:opacity 1.8s}
.transport-atmosphere i{position:absolute;width:60%;height:160%;top:-30%;left:16%;background:radial-gradient(ellipse,var(--accent),transparent 68%);opacity:.22;filter:blur(22px);animation:transport-drift 13s ease-in-out infinite alternate;animation-play-state:paused}
.transport-atmosphere i:nth-child(2){left:50%;background:radial-gradient(ellipse,var(--secondary),transparent 70%);animation-delay:-6s;animation-duration:19s}
.transport-atmosphere i:nth-child(3){width:42%;height:1px;left:18%;top:78%;background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(1px);opacity:.65;animation-duration:9s}
body[data-playing=true] .transport-atmosphere{opacity:1}
body[data-playing=true] .transport-atmosphere i{animation-play-state:running}
.transport-row .play-button{width:122px;height:122px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 60%,var(--paper));background:color-mix(in srgb,var(--accent) 9%,var(--black));color:var(--paper);gap:10px;box-shadow:inset 0 0 35px color-mix(in srgb,var(--accent) 12%,transparent);transition:background 1.4s,box-shadow 1.4s,transform 1.4s}
.transport-row .play-button:hover{transform:scale(1.035);background:color-mix(in srgb,var(--accent) 22%,var(--black))}
body[data-playing=true] .transport-row .play-button{box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 22%,transparent),0 0 40px color-mix(in srgb,var(--accent) 15%,transparent)}
.transport-row .play-symbol{font-size:32px}.transport-row .play-word{font-size:15px;letter-spacing:.08em}
.transport-row .seek-caption{font-size:clamp(18px,1.6vw,28px);letter-spacing:.025em;align-items:center;min-height:34px;padding:0}
.transport-row .seek-caption span:last-child{font-size:16px;white-space:nowrap}
.transport-row .seek-times{font-size:16px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted)}
.transport-row #seek{height:46px}
.transport-row #seek::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--accent) var(--progress),var(--rule) var(--progress))}
.transport-row #seek::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 40%,transparent)}
.transport-row #seek::-moz-range-track{height:4px;background:var(--rule)}
.transport-row #seek::-moz-range-progress{height:4px;background:var(--accent)}
.transport-row #seek::-moz-range-thumb{width:16px;height:16px}
.transport-row .signal-glyph{position:relative;isolation:isolate;font-size:72px;opacity:1;color:color-mix(in srgb,var(--accent) 28%,#fff);filter:drop-shadow(0 0 3px #fff9) drop-shadow(0 0 12px var(--accent));transition:filter 1.6s}
.transport-row .signal-glyph:before{content:'';position:absolute;inset:-25px;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#ffffff90 0%,color-mix(in srgb,var(--accent) 50%,transparent) 18%,color-mix(in srgb,var(--accent) 16%,transparent) 40%,transparent 70%);opacity:.65;transition:opacity 1.6s,transform 1.6s}
.transport-row .signal-glyph .stareye{filter:drop-shadow(0 0 1px #fff);}
body[data-playing=true] .transport-row .signal-glyph{filter:drop-shadow(0 0 5px #fffc) drop-shadow(0 0 20px var(--accent))}
body[data-playing=true] .transport-row .signal-glyph:before{opacity:1;transform:scale(1.18)}
:root[data-theme=light] .transport-row .signal-glyph{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent) 65%,#111)) drop-shadow(0 0 12px var(--accent))}
@keyframes transport-drift{from{transform:translateX(-20%) scaleX(.8)}to{transform:translateX(30%) scaleX(1.2)}}
@media(max-width:1000px){.about-copy{width:45%;left:6%}.about-copy .about-lead{font-size:clamp(50px,6vw,74px)}.transport-row{grid-template-columns:104px minmax(0,1fr) 64px;gap:24px}.transport-row .play-button{width:104px;height:104px}}
@media(max-width:700px){
 .hero-name{width:30px}.hero-name span{font-size:23px;letter-spacing:.1em}.hero-copy{left:46px;width:calc(100% - 62px)}.eyebrow{font-size:14px;gap:8px}.eyebrow-rule{width:18px}.record-title{font-size:clamp(62px,min(17vw,28cqh),110px)}
 .hero{height:clamp(250px,calc(100svh - 402px),560px)}
 .about-copy{top:130px;left:30px;right:30px;width:auto;max-width:none;padding:0}.about-copy h2{font-size:16px;margin-bottom:22px}.about-copy .about-lead{font-size:clamp(48px,11vw,70px);margin-bottom:22px}.about-copy .about-detail{font-size:22px;max-width:27ch}.about-copy:before{inset:-65px -35px}
 .about-starman{top:43%;height:49%;width:110%;right:-16%}.board-links{bottom:24px;left:24px;gap:12px}.board-platform{min-width:115px}.board-links .icon-button{width:48px;height:48px;padding:12px}.board-links .suno-logo{height:24px}.board-links .youtube-mark{width:110px;height:24px}.board-links .youtube-mark .youtube-logo{height:48px!important}
 .transport-row{min-height:138px;grid-template-columns:82px minmax(0,1fr);gap:18px;padding:14px 0}.transport-row .play-button{width:82px;height:82px;gap:8px}.transport-row .play-symbol{font-size:25px}.transport-row .play-word{font-size:13px}.transport-row .seek-caption{font-size:16px;line-height:1.35}.transport-row .seek-times{font-size:14px}.transport-row #seek{height:42px}.transport-row .signal-glyph{display:none}
 .platform-card{padding:12px 6px;gap:10px}.platform-card .suno-logo{height:25px}
}
@media(prefers-reduced-motion:reduce){.transport-atmosphere i{animation:none!important}}
html[data-motion=off] .transport-atmosphere i,html[data-hidden=true] .transport-atmosphere i{animation-play-state:paused!important}

/* Bio refinement: artist identity, one platform dock, one contact destination. */
.topbar>.brand{width:52px;display:grid;place-items:center;padding:5px}
.platform-dock .origin-lexicon{font:16px/1.55 var(--mono);letter-spacing:.04em}
.about-copy{top:24%;left:7%;width:39%;max-width:660px;color:var(--paper);background:none;isolation:auto}
.about-copy:before{content:none}
.about-copy h2{display:block;font:900 clamp(64px,6.9vw,136px)/.95 var(--display);letter-spacing:-.035em;margin:0 0 34px;color:var(--paper)}
.about-copy h2:before{content:none}
.about-copy .about-lead{font:400 clamp(25px,2.25vw,40px)/1.32 Arial,Helvetica,sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0 0 30px;text-wrap:pretty}
.about-copy .about-detail{font:400 clamp(21px,1.65vw,29px)/1.5 Arial,Helvetica,sans-serif;max-width:27ch;color:var(--paper);text-wrap:pretty}
.about-starman{height:100%;width:86%;top:0;right:-13%}
.board-links{left:7%;bottom:9%;width:fit-content;padding:0}
.contact-link{display:flex;align-items:center;gap:clamp(32px,5vw,90px);min-height:64px;padding:12px 0;font:500 clamp(22px,2vw,32px)/1.3 var(--mono);letter-spacing:.08em;color:var(--paper);border-bottom:1px solid color-mix(in srgb,var(--paper) 40%,transparent)}
.contact-link span{font-size:1.45em;transition:transform 1.2s}.contact-link:hover{color:var(--accent);border-color:var(--accent)}.contact-link:hover span{transform:translate(5px,-5px)}
@media(max-width:1000px) and (min-width:701px){.about-copy{left:6%;width:44%}.about-copy h2{font-size:clamp(64px,8.4vw,88px)}.about-copy .about-lead{font-size:28px}.about-starman{width:102%;right:-24%;height:100%}}
@media(max-width:700px){
 .about-board{height:118svh;min-height:1040px}.about-copy{top:72px;left:30px;right:30px;width:auto;max-width:440px}.about-copy h2{font-size:clamp(58px,13vw,88px);margin-bottom:24px}.about-copy .about-lead{font-size:26px;line-height:1.3;margin-bottom:20px;max-width:23ch}.about-copy .about-detail{font-size:21px;max-width:25ch}
 .about-starman{top:38%;height:60%;width:133%;right:-28%}.board-links{left:30px;bottom:30px}.contact-link{font-size:22px;gap:55px;min-height:52px}
}

/* Owner selected wordmark 14: Undercut. Uses the current theme ink. */
.about-copy h2.about-wordmark{font-size:inherit;line-height:0;width:100%;max-width:660px;margin:0 0 30px}
.wordmark-undercut{display:block;width:100%;aspect-ratio:830/210;background:currentColor;mask:url(brand/slopgott-undercut.svg) center/contain no-repeat;-webkit-mask:url(brand/slopgott-undercut.svg) center/contain no-repeat}
@media(max-width:700px){.about-copy h2.about-wordmark{margin-bottom:24px;max-width:440px}}

/* Artist record: light Lexicon, collectible fields, no invented stats. */
.identity-record{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0;max-width:560px;color:var(--paper)}
.identity-record>div{padding:13px 0 15px;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);min-width:0}
.identity-record .identity-wide{grid-column:1/-1}
.identity-record dt{font:500 12px/1.4 var(--mono);letter-spacing:.09em;margin:0 0 5px;opacity:.72}
.identity-record dd{font:500 clamp(18px,1.45vw,27px)/1.2 var(--mono);letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
.identity-record .identity-person dd{font-size:clamp(25px,2.2vw,40px);letter-spacing:-.055em}
.identity-record .identity-sound dd{font:500 clamp(25px,2.2vw,40px)/1.12 Arial,Helvetica,sans-serif;letter-spacing:-.035em}
.identity-sound dd span{font-family:var(--mono);font-size:.7em}
@media(max-width:700px){.identity-record{max-width:390px;gap:0 20px}.identity-record>div{padding:10px 0 12px}.identity-record dt{font-size:11px}.identity-record dd{font-size:17px}.identity-record .identity-person dd,.identity-record .identity-sound dd{font-size:27px}.about-starman{top:45%;height:53%}}

/* September 28: the slim StarEye is shared with QYRE Press. */
.site-shell .topbar>.brand{width:96px;height:64px;padding:0;flex-shrink:0}
.site-shell .topbar>.brand .stareye{width:96px;height:96px;display:block;fill:currentColor}
.signal-glyph .stareye{display:block;width:64px;height:64px;fill:currentColor}
.platform-dock .origin-lexicon{white-space:nowrap;font-size:clamp(11px,1vw,14px);line-height:1.4;letter-spacing:.025em}
/* Noir reverses the About field, so its type must use that field's ink. */
:root[data-scheme=noir] .about-copy,
:root[data-scheme=noir] .about-copy h2,
:root[data-scheme=noir] .identity-record,
:root[data-scheme=noir] .contact-link,
:root[data-scheme=noir] .about-register,
:root[data-scheme=noir] .about-copy:after,
:root[data-scheme=noir] .about-board .board-frame span{color:var(--board-ink)}
:root[data-scheme=noir] .contact-link{border-bottom-color:color-mix(in srgb,var(--board-ink) 40%,transparent)}
:root[data-scheme=noir] .contact-link:hover{color:var(--board-ink);border-bottom-color:currentColor}
/* A transparent viewport layer removes chroma behind the actual seek position. */
#playback-wake{position:fixed;inset:0 auto 0 0;width:0;height:100dvh;z-index:2147483646;pointer-events:none;opacity:var(--playback-wake-strength,0);backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1)}
/* The played visual field softens behind the same seek boundary; copy stays above it. */
.hero::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--playback-blur-width,0px);z-index:2;pointer-events:none;opacity:var(--playback-wake-strength,0);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html[data-motion=off] #playback-wake,html[data-motion=off] .hero::after{opacity:var(--playback-wake-active,0)}
@media(prefers-reduced-motion:reduce){#playback-wake,.hero::after{opacity:var(--playback-wake-active,0)}}
/* Title hover keeps its play-button cue without blurring other content. */
.record-title{pointer-events:auto}
@media(hover:hover) and (pointer:fine){
  body:has(.record-title:hover) .transport-row .play-button{
    transform:scale(1.16);position:relative;z-index:6;
    background:color-mix(in srgb,var(--accent) 50%,#fff);color:#080808;border-color:var(--accent);
    box-shadow:0 0 32px color-mix(in srgb,var(--accent) 60%,transparent),0 0 70px color-mix(in srgb,var(--accent) 25%,transparent);
  }
}
/* NOIR+: one inherited color keeps every highlight in phase without JS frames. */
@property --noir-highlight{syntax:'<color>';inherits:true;initial-value:#00ffff}
@keyframes noir-highlight-cycle{
  0%,100%{--noir-highlight:#00ffff}
  33.333%{--noir-highlight:#ffff00}
  66.667%{--noir-highlight:#ff00ff}
}
:root[data-scheme=noir-plus]{animation:noir-highlight-cycle 24s linear infinite;--orb-fill:var(--noir-highlight);--orb-glow:color-mix(in srgb,var(--noir-highlight) 24%,transparent)}
:root[data-scheme=noir-plus][data-theme=light] :is(.hero-being,.about-being){background:#000;filter:none}
:root[data-scheme=noir-plus][data-theme=dark] :is(.hero-being,.about-being){background:#fff;filter:none}
:root[data-scheme=noir-plus]{--being-outside:#fff;--being-inside:#000}
:root[data-scheme=noir-plus][data-theme=light]{--being-outside:#000;--being-inside:#fff}
:root[data-scheme=noir-plus] :is(.hero-art,.about-starman):has(>.being-orb:not([hidden])) :is(.hero-being,.about-being){
  background:radial-gradient(circle at var(--orb-x,50%) var(--orb-y,50%),var(--being-inside) 0 var(--orb-radius,0px),var(--being-outside) calc(var(--orb-radius,0px) + .5px));
  background-size:100% 100%;background-position:0 0;animation:none;
}
:root[data-scheme=noir-plus] .about-board{--board-paper:#000;--board-ink:#f5f5f5;background:#000}
:root[data-scheme=noir-plus] .about-starman{--being-outside:#fff;--being-inside:#000}
:root[data-scheme=noir-plus][data-theme=dark] .being-orb{outline:1px solid #ffffff3d;outline-offset:-1px}
:root[data-scheme=noir-plus] :is(.about-copy,.about-copy h2,.identity-record,.contact-link,.about-register,.about-copy:after,.about-board .board-frame span){color:var(--board-ink)}
:root[data-scheme=noir-plus] .contact-link{border-bottom-color:color-mix(in srgb,var(--board-ink) 40%,transparent)}
/* Bright CYM is decoration on light paper; labels and focus remain dark ink. */
:root[data-scheme=noir-plus][data-theme=light] :is(.hero-name:hover span,.contact-link:hover,.star-menu a:hover,.star-menu button:hover){color:var(--paper)}
:root[data-scheme=noir-plus][data-theme=light] :is(.eyebrow-index,.record-index button[aria-current=true] span,.record-index button:hover,.external a:hover,.about-link:hover,.icon-button:hover,.icon-button:focus-visible,.appearance-toggle[aria-expanded=true]){color:color-mix(in srgb,var(--noir-highlight) 35%,#111)}
:root[data-scheme=noir-plus][data-theme=light] :focus-visible{outline-color:#111}
:root[data-scheme=noir-plus] .contact-link:hover{color:var(--board-ink);border-bottom-color:currentColor}
:root[data-scheme=noir-plus][data-motion=off],:root[data-scheme=noir-plus][data-hidden=true]{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){:root[data-scheme=noir-plus]{animation:none!important}}
/* Dark portals in selected schemes; other duotones retain their white portal. */
.being-orb{background:var(--orb-fill,#fff);box-shadow:0 0 28px var(--orb-glow,#ffffff24)}
:root[data-theme=dark][data-scheme=noir]{--orb-fill:#080808;--orb-glow:#ffffff18}
:root[data-theme=dark][data-scheme=noir] .being-orb{outline:1px solid color-mix(in srgb,var(--paper) 24%,transparent);outline-offset:-1px}
:root[data-theme=dark]:is([data-scheme=oxide],[data-scheme=solar]){--orb-fill:color-mix(in srgb,var(--accent) 16%,#000);--orb-glow:color-mix(in srgb,var(--accent) 18%,transparent)}
@media(max-width:1000px){.signal-glyph .stareye{width:52px;height:52px}}
@media(max-width:700px){.site-shell .topbar>.brand{width:69px;height:48px}.site-shell .topbar>.brand .stareye{width:69px;height:69px}}

/* September 29: a reserved place for the artist's curated radio. */
.platform-dock{grid-template-columns:repeat(4,minmax(0,1fr))}
.radio-placeholder{display:block;width:100%;min-height:58px;padding:12px 16px;border:1px solid #80808055;border-radius:0;background:#8080800d;color:#8b8b8b;font:500 16px/1.3 var(--mono);letter-spacing:.04em;text-align:center;cursor:not-allowed;opacity:1;-webkit-text-fill-color:currentColor}
:root[data-theme=light] .radio-placeholder{color:#666;background:#8080800a}
.transport-row #seek{touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media(max-width:1400px){.platform-dock .platform-action{display:none}}
@media(max-width:1199px){.platform-dock{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-dock .origin-lexicon{grid-column:1/-1}.platform-dock .platform-card{justify-content:center}.platform-dock .platform-arrow{display:none}.radio-placeholder{font-size:14px;padding-inline:10px}}
@media(max-width:700px){.platform-dock{grid-template-columns:repeat(2,minmax(0,1fr))}.radio-placeholder{grid-column:1/-1;min-height:44px;font-size:12px;padding:8px 12px;letter-spacing:.02em}}