/*
Theme Name: sincemcmxc
Author: SINCE MCMXC
Description: A fully customizable artist landing page with colours, typography, logos, copy, layout, Spotify players and streaming links.
Version: 1.15.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: since-mcmxc
*/
:root{color-scheme:dark;--bg:#0b1014;--panel:#10181e;--border:#39444b;--text:#f2f0e9;--muted:#aeb8bf;--accent:#dbb581;--button:#dbb581;--button-text:#141a1e;--button-hover:#efd1a9;--button-hover-text:#141a1e;--hover:#dbb581;--tile-hover:#1a252d;--hero-text:#f2f0e9;--header-bg:#0b1014;--footer-bg:#0b1014;--bg-rgb:11,16,20;--heading-font:Inter,ui-sans-serif,system-ui,sans-serif;--body-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--brand-font:Inter,ui-sans-serif,system-ui,sans-serif;--heading-weight:800;--body-size:1rem;--hero-size:7rem;--hero-mobile-size:4.25rem;--section-size:3.125rem;--brand-size:1.25rem;--content-width:1240px;--section-space:85px;--hero-height:690px;--button-radius:0px;--player-radius:12px;--tile-radius:0px;--logo-width:210px;--music-columns:3;--hero-align:left;--image-x:50%;--image-y:50%;--image-opacity:.73}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font:var(--body-size)/1.6 var(--body-font)}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}a:hover{color:var(--hover)}.wrap{width:min(var(--content-width),calc(100% - 96px));margin:auto}.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--text);color:var(--bg);padding:12px}.skip:focus{top:12px}.masthead{min-height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.wordmark{font:600 var(--brand-size) var(--brand-font);letter-spacing:.09em}.nav{display:flex;align-items:center;gap:35px;font-size:14px}.nav .outline{border:1px solid var(--border);padding:9px 21px;border-radius:2px}.hero{position:relative;min-height:var(--hero-height);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border)}.hero-art{position:absolute;inset:0 0 0 35%;width:65%;height:100%;object-fit:cover;object-position:var(--image-x) var(--image-y);opacity:var(--image-opacity);transform:scale(1.13)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 4%,rgba(var(--bg-rgb),.93) 24%,rgba(var(--bg-rgb),.44) 55%,rgba(var(--bg-rgb),.06) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 36%);pointer-events:none}.hero-content{position:relative;z-index:1;padding:var(--section-space) 0 100px}.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 25px}.hero h1{font-family:var(--heading-font);font-weight:400;font-size:clamp(2.5rem,7.7vw,var(--hero-size));letter-spacing:-.055em;line-height:.98;margin:0 0 30px}.hero h1 span{display:block}.hero-copy{max-width:360px;color:var(--hero-text);font-size:18px;margin-bottom:34px}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:52px;padding:13px 25px;background:var(--button);color:var(--button-text);font-size:14px;font-weight:650;border:1px solid var(--button)}.button:hover{background:var(--button-hover);color:var(--button-hover-text)}.button.secondary{background:transparent;color:var(--text);border-color:var(--border)}.actions{display:flex;gap:14px;flex-wrap:wrap}.hero-note{margin-top:48px;font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}.section{padding:var(--section-space) 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px}.section-head h2{font:400 clamp(1.75rem,4vw,var(--section-size))/1.15 var(--heading-font);letter-spacing:-.03em;margin:0}.section-head .eyebrow{margin-bottom:12px}.small-link{font-size:14px;border-bottom:1px solid var(--border);padding-bottom:4px}.players{display:grid;grid-template-columns:repeat(var(--music-columns),minmax(0,1fr));gap:24px}.track{border-top:1px solid var(--border);padding-top:22px;min-width:0}.track-num{font-size:12px;color:var(--accent);letter-spacing:.16em}.track h3{font:400 1.6875rem var(--heading-font);margin:12px 0 3px}.track p{color:var(--muted);font-size:14px;margin:0 0 22px}.track iframe{display:block;width:100%;border:0;border-radius:var(--player-radius);background:var(--panel)}.player-link{display:inline-block;font-size:13px;color:var(--muted);margin-top:12px}.streaming{background:var(--panel);border-block:1px solid var(--border)}.streaming .intro{max-width:390px;color:var(--muted);margin:0}.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-left:1px solid var(--border);margin-top:40px}.platform{padding:28px 20px;border:1px solid var(--border);border-left:0;display:flex;flex-direction:column;gap:22px;transition:background .2s}.platform:hover{background:var(--tile-hover)}.platform strong{font-size:17px;font-weight:500}.platform small{font-size:12px;color:var(--muted)}.platform .symbol{font:400 1.875rem var(--heading-font);color:var(--accent);height:32px}.platform span:last-child{display:flex;justify-content:space-between;align-items:center}.footer{padding:35px 0;display:flex;justify-content:space-between;gap:24px;align-items:center}.footer p{color:var(--muted);font-size:12px;margin:0}.fineprint{font-size:12px;color:var(--muted);margin-top:22px}.general-content{min-height:55vh;padding-block:60px}.general-content img{max-width:100%;height:auto}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.players{grid-template-columns:1fr}.platforms{grid-template-columns:repeat(3,minmax(0,1fr))}.platform{border-left:1px solid var(--border)}.platforms{border-left:0}.hero{min-height:min(var(--hero-height),620px)}}@media(max-width:600px){.wrap{width:calc(100% - 36px)}.masthead{min-height:82px}.wordmark{font-size:min(var(--brand-size),1.25rem)}.nav{gap:18px}.nav .outline{display:none}.hero{min-height:min(var(--hero-height),670px);align-items:end}.hero-art{inset:0;width:100%;height:100%;object-position:var(--image-x) var(--image-y);opacity:var(--image-opacity)}.hero:after{background:linear-gradient(0deg,var(--bg) 1%,rgba(var(--bg-rgb),.75) 35%,rgba(var(--bg-rgb),.15) 85%)}.hero-content{padding:210px 0 50px}.hero h1{font-size:var(--hero-mobile-size)}.hero-copy{font-size:16px;max-width:290px}.hero-note{margin-top:30px}.section{padding:min(var(--section-space),55px) 0}.section-head{align-items:start;flex-direction:column;gap:16px}.track{display:block}.track p{margin-bottom:18px}.platforms{grid-template-columns:1fr 1fr}.platform{padding:22px 16px}.footer{align-items:start;flex-direction:column}.button{padding-inline:17px}.eyebrow{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Editable design tokens apply to all page regions. */
.site-header{background:rgba(var(--header-bg-rgb,11,16,20),var(--header-normal-alpha,1))}.site-footer{background:var(--footer-bg)}
.masthead{gap:24px;padding-block:20px}.wordmark{overflow-wrap:anywhere;min-width:0}.brand-logo{display:block;width:var(--logo-width);max-width:100%;max-height:100px;object-fit:contain}.footer .brand-logo{max-height:80px}
.nav{flex-wrap:wrap;justify-content:flex-end}.nav-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px}.nav-menu a{display:block}.nav-menu li{margin:0}
.hero-content{text-align:var(--hero-align);color:var(--hero-text)}.hero h1{overflow-wrap:anywhere}.hero-copy{max-width:100%;white-space:normal}.actions{justify-content:var(--hero-align)}
.button,.nav .outline{border-radius:var(--button-radius)}.platform{border-radius:var(--tile-radius)}.platform-logo{display:block;height:36px;max-width:120px;object-fit:contain;object-position:left center}.platform strong{overflow-wrap:anywhere}.platform small{font-size:.875rem}.track h3,.section-head h2{overflow-wrap:anywhere}.track iframe{min-width:0}.track p{min-height:1.5em}.players:empty,.platforms:empty{display:none}
@media(max-width:1000px){.players{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.players{grid-template-columns:1fr}.masthead{flex-wrap:wrap;gap:12px}.nav{justify-content:flex-start}.brand-logo{max-width:min(var(--logo-width),65vw)}.hero-content{padding-top:180px}.hero-copy{max-width:100%}.actions{gap:12px}.section-head .intro{max-width:100%}}

.hero .button.secondary{color:var(--hero-text)}

.hero .button.secondary:hover{color:var(--button-hover-text)}

/* 1.2.0: image branding, 629andco typography, and left-aligned responsive logo. */
.hero h1{font-weight:var(--heading-weight);letter-spacing:-.065em;line-height:1.04}
.section-head h2,.track h3{font-weight:var(--heading-weight);letter-spacing:-.045em}
.nav{font-weight:700}.brand-logo{object-position:left center}
.brand-logo--bundled{width:min(var(--logo-width),180px);height:auto;aspect-ratio:1.8;object-fit:cover;max-height:none}
.footer .brand-logo--bundled{max-height:none}.spotify-player{min-width:0;width:100%}.spotify-player iframe{display:block;width:100%}
@media(max-width:1000px){.footer{align-items:flex-start;text-align:left}.footer .wordmark{margin-left:0;margin-right:auto;align-self:flex-start;flex-shrink:0}.footer .brand-logo{object-position:left center}.footer .brand-logo--bundled{width:min(var(--logo-width),150px)}}
@media(max-width:600px){.footer.wrap{width:calc(100% - 24px);margin-inline:12px}.footer .brand-logo{display:block;margin:0}.hero h1{font-size:min(var(--hero-mobile-size),16vw)}}

/* Refined player cards: retain full Spotify controls and editable design tokens. */
.track{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--border);border-color:color-mix(in srgb,var(--border) 60%,transparent);border-radius:calc(var(--player-radius) + 8px);background:var(--panel);background:color-mix(in srgb,var(--panel) 55%,var(--bg))}
.track-num{position:absolute;top:23px;right:20px;font-size:10px;line-height:1.5;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.track h3{font-size:1.375rem;line-height:1.3;letter-spacing:-.025em;margin:0 34px 5px 0}
.track p{font-size:.8125rem;line-height:1.5;margin:0 0 18px}
.track .spotify-player{margin-top:auto;padding-top:4px}
.track .player-link{align-self:flex-start;font-size:.75rem;line-height:1.5;margin-top:14px;padding-block:3px;overflow-wrap:anywhere}
@media(max-width:600px){.track{padding:18px}.track-num{top:21px;right:18px}}

/* 1.4.0: balanced hero, soft surfaces and accessible motion. */
:root{--hero-overlay:.45;--button-radius:8px;--tile-radius:16px}
.masthead{min-height:100px;padding-block:12px;border-color:color-mix(in srgb,var(--border) 55%,transparent)}
.nav{font-weight:600}.nav a,.button,.small-link,.player-link{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.nav .outline{padding:10px 18px}.button{font-weight:600;min-height:50px}
.hero{isolation:isolate;align-items:center;min-height:var(--hero-height);padding:48px 0;border-color:color-mix(in srgb,var(--border) 45%,transparent)}
.hero:after{content:none}
.hero-visual{position:absolute;z-index:0;inset:auto max(4vw,calc((100% - var(--content-width))/2)) auto auto;top:50%;transform:translateY(-50%);width:min(45%,560px);aspect-ratio:1;overflow:hidden;border-radius:24px}
.hero .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--image-x) var(--image-y);transform:none;opacity:var(--image-opacity)}
.hero-visual:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--hero-overlay);background:radial-gradient(ellipse at 60% 40%,transparent 25%,var(--bg) 100%),linear-gradient(90deg,var(--bg),transparent 48%),linear-gradient(0deg,var(--bg),transparent 42%)}
.hero-content{padding:32px 0;z-index:1;pointer-events:none}
.hero-message{width:56%;pointer-events:auto}
.hero h1{font-size:clamp(2.5rem,6.8vw,var(--hero-size));line-height:1.03;margin-bottom:24px;letter-spacing:-.06em}
.hero .eyebrow{margin-bottom:20px}.hero-copy{font-size:17px;line-height:1.75;margin:0 0 28px}.hero-note{margin:32px 0 0;font-size:10px;letter-spacing:.2em}
.hero .actions{gap:10px}.hero .button{font-size:13px;padding-inline:20px}
.hero--background .hero-visual{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;border-radius:0}
.hero--background .hero-visual:after{background:linear-gradient(90deg,var(--bg) 3%,rgba(var(--bg-rgb),.8) 30%,transparent 100%),radial-gradient(ellipse at 65% 40%,transparent 15%,var(--bg) 100%)}
.hero--background .hero-message{width: min(100%,660px)}
.section-head{margin-bottom:30px;gap:32px}.section-head h2{font-size:clamp(1.75rem,3.5vw,var(--section-size));line-height:1.16;letter-spacing:-.04em}
.section-head .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:14px}.section-head .intro{font-size:14px;max-width:340px}.small-link{font-size:13px;white-space:nowrap}
.streaming{background:color-mix(in srgb,var(--panel) 60%,var(--bg));border-color:color-mix(in srgb,var(--border) 45%,transparent)}
.platforms{gap:12px;border:0;margin-top:32px}.platform{border:1px solid var(--border);border-color:color-mix(in srgb,var(--border) 55%,transparent);padding:24px 20px;gap:18px;background:var(--bg);transition:background-color .2s ease,border-color .2s ease,transform .25s ease}
.platform strong{font-size:15px;font-weight:600}.platform small{font-size:12px}.platform .symbol{font-size:26px}.platform:hover{border-color:var(--accent)}
.footer{padding-block:32px}.fineprint{line-height:1.7}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.platform:hover{transform:translateY(-3px)}}
@media(max-width:1000px){.hero-visual{right:24px;width:46%}.hero-message{width:57%}.hero .actions{flex-direction:column;align-items:flex-start}.platforms{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.masthead{min-height:82px;padding-block:10px}.hero{min-height:0;padding:44px 0 36px;display:flex;flex-direction:column;gap:30px}.hero-content{padding:0;order:0}.hero-message{width:100%}.hero h1{font-size:min(var(--hero-mobile-size),16vw)}.hero-copy{font-size:15px}.hero .actions{flex-direction:row;align-items:center;flex-wrap:wrap}.hero .button{padding-inline:16px;font-size:12px}.hero-note{margin-top:24px}.hero-visual{position:relative;inset:auto;transform:none;order:1;width:calc(100% - 48px);max-width:420px;flex-shrink:0;border-radius:18px}.hero--background{min-height:600px;justify-content:center}.hero--background .hero-visual{position:absolute;inset:0;max-width:none}.hero--background .hero-visual:after{background:linear-gradient(0deg,var(--bg),rgba(var(--bg-rgb),.65) 45%,transparent 100%),radial-gradient(ellipse,transparent,var(--bg))}.section-head{gap:18px}.platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform{padding:20px 16px}.footer .small-link{white-space:normal}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.platform{transform:none!important}}

/* Independent hero button appearances are opt-in; theme defaults remain inherited. */
.hero-button--primary{--hb-bg:var(--hero-primary-bg);--hb-text:var(--hero-primary-text);--hb-border:var(--hero-primary-border);--hb-hover-bg:var(--hero-primary-hover-bg);--hb-hover-text:var(--hero-primary-hover-text);--hb-hover-border:var(--hero-primary-hover-border);--hb-font-size:var(--hero-primary-font-size);--hb-height:var(--hero-primary-height);--hb-padding:var(--hero-primary-padding);--hb-radius:var(--hero-primary-radius);}
.hero-button--secondary{--hb-bg:var(--hero-secondary-bg);--hb-text:var(--hero-secondary-text);--hb-border:var(--hero-secondary-border);--hb-hover-bg:var(--hero-secondary-hover-bg);--hb-hover-text:var(--hero-secondary-hover-text);--hb-hover-border:var(--hero-secondary-hover-border);--hb-font-size:var(--hero-secondary-font-size);--hb-height:var(--hero-secondary-height);--hb-padding:var(--hero-secondary-padding);--hb-radius:var(--hero-secondary-radius);}
.hero .button.hero-button--custom{background:var(--hb-bg);color:var(--hb-text);border:1px solid var(--hb-border);border-radius:var(--hb-radius);font-size:var(--hb-font-size);min-height:var(--hb-height);padding:12px var(--hb-padding);max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.4}
.hero .button.hero-button--custom.hero-button--outline{background:transparent}
.hero .button.hero-button--custom.hero-button--text{background:transparent;border-color:transparent}
.hero .button.hero-button--custom:hover{background:var(--hb-hover-bg);color:var(--hb-hover-text);border-color:var(--hb-hover-border)}
.hero .button.hero-button--custom.hero-button--text:hover{background:transparent;border-color:transparent}

/* Loading overlay: hidden without JavaScript, with a five-second fail-open limit. */
:root{--loader-bg:#0b1014;--loader-text:#aeb8bf;--loader-accent:#dbb581;--loader-logo-width:200px}
.site-loader{display:none;position:fixed;inset:0;z-index:99990;background:var(--loader-bg);color:var(--loader-text);place-items:center;padding:24px;opacity:1;transition:opacity var(--loader-fade,400ms) ease}
.mcmxc-loading .site-loader{display:grid}.site-loader.is-leaving{opacity:0;pointer-events:none}
.loader-content{text-align:center;max-width:100%}.loader-logo{display:block;width:var(--loader-logo-width);max-width:75vw;max-height:50vh;height:auto;object-fit:contain;margin:auto}
.loader-logo--bundled{aspect-ratio:1.8;object-fit:cover}.loader-text{font-size:12px;letter-spacing:.14em;margin:24px 0 0;overflow-wrap:anywhere}
.loader-line{display:block;position:relative;overflow:hidden;width:72px;height:2px;margin:22px auto 0;background:color-mix(in srgb,var(--loader-accent) 20%,transparent)}
.loader-line:after{content:"";position:absolute;inset:0;background:var(--loader-accent);transform-origin:left;animation:mcmxc-loader-line 1.3s ease-in-out infinite}
@keyframes mcmxc-loader-line{0%,100%{transform:scaleX(.2);opacity:.4}50%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.site-loader{transition:none}.loader-line:after{animation:none}}

/* Parallax affects only artwork; text and controls remain steady. */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
.hero--right.has-parallax .hero-visual{transform:translateY(calc(-50% + var(--parallax-y,0px)))}
.hero--background.has-parallax .hero-art{top:calc(-1 * var(--parallax-range,36px));height:calc(100% + 2 * var(--parallax-range,36px));transform:translateY(var(--parallax-y,0px))}
}
.copyright-link{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px;transition:color .2s ease}
.copyright-link:hover{text-decoration-color:currentColor}

/* Persistent navigation shares the page grid and clears WordPress's admin bar. */
.site-header--sticky{position:sticky;top:0;z-index:1000;isolation:isolate;transition:background-color .2s ease,box-shadow .2s ease}
body.admin-bar .site-header--sticky{top:32px}
:root{--header-bg-rgb:11,16,20;--header-scroll-alpha:.55;--header-scroll-blur:12px}
.site-header--sticky.is-scrolled{background:rgba(var(--header-bg-rgb),var(--header-scroll-alpha));box-shadow:0 8px 24px rgba(0,0,0,.12)}
@supports(backdrop-filter:blur(16px)){
.site-header--sticky.is-scrolled{backdrop-filter:blur(var(--header-scroll-blur));-webkit-backdrop-filter:blur(var(--header-scroll-blur))}
}
html:has(.site-header--sticky),html.has-sticky-menu{scroll-padding-top:calc(var(--sticky-menu-height,128px) + var(--sticky-menu-top,0px) + 20px)}
.skip{position:fixed;z-index:1001}.skip:focus{top:calc(var(--sticky-menu-top,0px) + 12px)}
@media(max-width:782px){body.admin-bar .site-header--sticky{top:46px}}
@media(max-width:600px){body.admin-bar .site-header--sticky{top:0}}

/* Near-full-screen hero includes the menu and leaves a small next-section reveal. */
:root{--hero-screen-height:96vh;--hero-screen-height-stable:96svh;--hero-admin-offset:0px}
body.admin-bar{--hero-admin-offset:32px}
.hero.hero--screen{min-height:max(380px,calc(var(--hero-screen-height) - var(--sticky-menu-height,125px) - var(--hero-admin-offset)));}
@supports(height:100svh){.hero.hero--screen{min-height:max(380px,calc(var(--hero-screen-height-stable) - var(--sticky-menu-height,125px) - var(--hero-admin-offset)))}}
@media(max-width:782px){body.admin-bar{--hero-admin-offset:46px}}
@media(max-width:600px){.hero.hero--screen{padding-block:28px 24px;gap:24px;justify-content:center}.hero--right.hero--screen .hero-visual{width:min(calc(100% - 48px),30vh)}@supports(height:100svh){.hero--right.hero--screen .hero-visual{width:min(calc(100% - 48px),30svh)}}}

/* Centered scroll cue links to the next visible section. */
:root{--hero-scroll-size:32px;--hero-scroll-offset:14px;--hero-scroll-speed:2000ms;--hero-scroll-hover:#f4eee5}
.hero:has(.hero-scroll){padding-bottom:calc(max(44px,var(--hero-scroll-size) + 12px) + var(--hero-scroll-offset) + 14px)}
.hero-scroll{position:absolute;z-index:2;left:50%;bottom:var(--hero-scroll-offset);transform:translateX(-50%);width:max(44px,calc(var(--hero-scroll-size) + 12px));height:max(44px,calc(var(--hero-scroll-size) + 12px));display:grid;place-items:center;color:var(--hero-scroll,var(--accent));border-radius:50%}
.hero-scroll[data-position="left"]{left:max(4vw,calc((100% - var(--content-width))/2));transform:none}
.hero-scroll[data-position="right"]{left:auto;right:max(4vw,calc((100% - var(--content-width))/2));transform:none}
.hero-scroll svg{display:block;height:var(--hero-scroll-size);width:calc(var(--hero-scroll-size) * .75);animation:mcmxc-scroll-cue var(--hero-scroll-speed) ease-in-out infinite}
.hero-scroll[data-animation="pulse"] svg{animation-name:mcmxc-scroll-pulse}
.hero-scroll[data-animation="none"] svg{animation:none}
@keyframes mcmxc-scroll-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero-scroll:hover{color:var(--hero-scroll-hover)}.hero-scroll:hover svg,.hero-scroll:focus-visible svg{animation-play-state:paused}
@keyframes mcmxc-scroll-cue{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(4px);opacity:1}}
@media(max-width:600px){.hero--right.hero--screen:has(.hero-scroll) .hero-visual{width:min(calc(100% - 48px),24vh)}@supports(height:100svh){.hero--right.hero--screen:has(.hero-scroll) .hero-visual{width:min(calc(100% - 48px),24svh)}}}
@media(prefers-reduced-motion:reduce){.hero-scroll svg{animation:none}}

/* Matching glass surfaces for calls to action and music destinations. */
:root{--glass-alpha:.55;--glass-hover-alpha:.67;--glass-fill:55%;--glass-blur:12px}
body[data-glass="on"] :is(.button:not(.hero-button--custom),.nav .outline,#music .small-link,.track .player-link,.platform){background-color:rgba(var(--header-bg-rgb),var(--glass-alpha));background-image:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.015));color:var(--text);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.1);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .25s ease}
body[data-glass="on"] :is(.button:not(.hero-button--custom),.nav .outline,#music .small-link,.track .player-link,.platform):hover{background-color:rgba(var(--header-bg-rgb),var(--glass-hover-alpha));border-color:var(--accent);color:var(--hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.14)}
body[data-glass="on"] .hero .button:not(.hero-button--custom):not(:hover){color:var(--hero-text)}
body[data-glass="on"] .hero .button:not(.secondary):not(.hero-button--custom){border-color:color-mix(in srgb,var(--accent) 65%,transparent)}
body[data-glass="on"] :is(#music .small-link,.track .player-link){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:var(--button-radius);max-width:100%;white-space:normal;overflow-wrap:anywhere}
.hero .button.hero-button--custom.hero-button--glass{background-color:var(--hb-bg);background-color:color-mix(in srgb,var(--hb-bg) var(--glass-fill),transparent);background-image:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.015));backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.1)}
.hero .button.hero-button--custom.hero-button--glass:hover{background-color:var(--hb-hover-bg);background-color:color-mix(in srgb,var(--hb-hover-bg) var(--glass-fill),transparent)}

/* A separate bottom credit keeps the entire text/logo treatment in one link. */
:root{--credit-logo-width:90px}
.footer-credit{border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent);padding-block:14px 20px;text-align:center;color:var(--muted);font-size:12px}
.footer-credit-content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:44px;max-width:100%;padding:6px 10px;line-height:1.5;overflow-wrap:anywhere;border-radius:4px}
.footer-credit-name{font-weight:600;color:var(--text)}
a.footer-credit-content:hover,a.footer-credit-content:hover .footer-credit-name{color:var(--hover)}
.footer-credit-logo{display:block;width:var(--credit-logo-width);max-width:100%;height:auto;max-height:64px;object-fit:contain}
@media(max-width:600px){.footer-credit.wrap{width:calc(100% - 24px);margin-inline:12px}}