@charset "UTF-8";
:root { --ink: #090909; --paper: #f4f1ec; --pink: #f1a9bf; --purple: #b399e3; --muted: #aaa6a4; --line: #393039; --mono: "Courier New", Courier, monospace; --gutter: clamp(24px,5vw,80px); --nav-font: 22px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
/* One stationary texture per viewport; the mobile asset preserves its native detail. */
:root { --site-texture: url('/assets/wnoow-crisp-quiet-desktop.webp?v=5.0.5'); }
body { position: relative; isolation: isolate; margin: 0; background: var(--ink); color: var(--paper); font-family: Arial,Helvetica,sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ink) var(--site-texture) center / cover no-repeat; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
#main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 10; padding: 14px; background: var(--pink); color: var(--ink); }
.skip-link:focus { top: 16px; }
.site-header { display: grid; grid-template-columns: minmax(180px,250px) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,80px); max-width: 1600px; padding: 24px var(--gutter) 28px; margin: auto; }
.brand { position: relative; flex-shrink: 0; width: 250px; transform: rotate(-2deg); transition: transform .25s; }
.brand-pink { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.brand:hover, .brand:focus-visible { transform: rotate(0) translateY(-2px); }
.brand:hover .brand-pink, .brand:focus-visible .brand-pink { opacity: 1; }
.primary-navigation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
.primary-navigation a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 0 16px; }
.primary-navigation a + a::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line); transform: rotate(1deg); }
.nav-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; animation: art-drift 6s ease-in-out infinite; }
.nav-art img { object-fit: contain; width: 110px; max-height: 48px; transition: transform .25s; }
.nav-store .nav-art { animation-delay: -2s; }
.nav-store img { width: 30px; transform: rotate(7deg); }
.nav-videos .nav-art { animation-delay: -4s; }
.nav-videos img { width: 48px; transform: rotate(-7deg); }
.nav-label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 4px; color: var(--paper); font: 400 var(--nav-font)/1.1 var(--mono); text-transform: uppercase; transition: color .2s,transform .2s; }
.primary-navigation a[aria-current=page] .nav-label { color: var(--purple); }
.primary-navigation a:hover .nav-label, .primary-navigation a:focus-visible .nav-label { color: var(--pink); transform: translateY(-2px) rotate(-2deg); }
.primary-navigation a:hover img, .primary-navigation a:focus-visible img { transform: rotate(0) scale(1.06); }
.hero { display: grid; grid-template-columns: 52% 48%; max-width: 1600px; min-height: 600px; margin: auto; }
.hero-image { display: grid; grid-template-rows: minmax(0,1fr) auto; position: relative; min-height: 580px; margin: 12px 26px 44px var(--gutter); padding: 12px 12px 0; transform: rotate(-1.5deg); border: 1px solid #ddd7cc; background: linear-gradient(130deg,#fffdf9,var(--paper) 64%,#e5dfd2); box-shadow: 0 1px 0 #fff inset, 2px 3px 0 #bcb5ad, 11px 14px 0 #332144, 18px 26px 36px #0009; transition: transform .3s,box-shadow .3s; }
.photo-window { display: block; position: relative; min-height: 0; overflow: hidden; background: #090715; box-shadow: 0 0 0 1px #bdb8b0; }
.photo-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform .3s,filter .3s; }
.photo-credit { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: #35302c; font: 10px/1.3 var(--mono); letter-spacing: .02em; }
.photo-credit > span { font-size: 18px; }
.hero-image:hover, .hero-image:focus-visible { transform: rotate(-.5deg) translateY(-3px); box-shadow: 0 1px 0 #fff inset, 2px 3px 0 #bcb5ad, 13px 18px 0 #44255f, 18px 28px 36px #0009; }
.hero-image:hover img, .hero-image:focus-visible img { transform: scale(1.015); filter: contrast(1.04); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px var(--gutter) 48px 24px; }
.hero-copy h1 { width: 100%; max-width: 490px; margin: 0; transform: rotate(-3deg); }
.album-title-link { display: block; position: relative; transition: transform .25s; }
.album-title-art { display: block; width: 100%; height: auto; overflow: visible; }
/* Rotate the original spiral around its own center; the lettering stays fixed. */
.album-title-spiral { transform-box: view-box; transform-origin: 551px 400px; animation: album-spiral-turn 20s linear infinite; }
@keyframes album-spiral-turn { to { transform: rotate(360deg); } }
.album-title-tint { opacity: 0; transition: opacity .35s; pointer-events: none; }
.album-title-link:focus-visible .album-title-tint { opacity: 1; }
.album-title-link:hover { transform: rotate(1deg); }
.release-card { display: flex; align-items: center; justify-content: center; gap: 34px; width: 100%; margin-top: 36px; }
.album-sleeve { width: 128px; flex-shrink: 0; border: 8px solid var(--paper); transform: rotate(-8deg); box-shadow: 2px 2px 0 #bcb5ad, 10px 10px 0 #32233e, 10px 15px 20px #0008; transition: transform .3s; }
.release-card:hover .album-sleeve { transform: rotate(-3deg); }
.release-card p { margin: 0 0 16px; font: 14px/1.65 var(--mono); }
.release-card p strong { color: var(--pink); font-weight: 400; }
.listen-link { display: inline-flex; align-items: center; gap: 20px; min-height: 46px; padding: 12px 0; color: var(--paper); font: 400 var(--nav-font)/1.1 var(--mono); text-transform: uppercase; transition: color .2s,transform .2s; }
.listen-link:hover, .listen-link:focus-visible { color: var(--pink); transform: translateY(-2px); }
.listen-link > span { transition: transform .2s; }
.listen-link:hover > span, .listen-link:focus-visible > span { transform: translate(2px,-2px); }
.site-footer { position: relative; background: transparent; color: var(--paper); padding: 38px var(--gutter) 28px; }
.social-links { display: flex; justify-content: center; align-items: center; gap: 14px; margin: -8px 0 0; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--paper); transition: color .2s,transform .2s; }
.social-links svg { width: 23px; height: 23px; }
.social-links span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.social-links a:hover, .social-links a:focus-visible { color: var(--pink); transform: translateY(-3px) rotate(-5deg); }
.footer-layout { display: flex; flex-direction: column; gap: 36px; max-width: 1300px; margin: auto; }
.community-signups { display: grid; grid-template-columns: minmax(0,650px) minmax(0,350px); align-items: start; gap: 14px clamp(28px,4vw,56px); width: 100%; max-width: 1100px; margin: auto; }
.community-signups > section { min-width: 0; }
.community-signups > .signup-heading { grid-column: 1 / -1; margin-bottom: 0; text-align: center; }
.discord-signup { width: 100%; max-width: 350px; justify-self: center; }
.discord-invite { position: relative; display: flex; flex-direction: column; height: var(--laylo-height,200px); overflow: hidden; border: 1px solid #615367; border-radius: 16px; background: #19151c; color: var(--paper); }
.discord-brand { position: absolute; top: 18px; right: 20px; color: var(--purple); }
.discord-brand svg { display: block; width: 28px; height: 28px; }
.discord-invite-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; flex: 1; min-height: 0; padding: 18px 22px; }
.discord-identity { display: flex; align-items: center; gap: 16px; width: 100%; }
.discord-identity > div { min-width: 0; }
.discord-icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; object-fit: cover; }
.discord-identity strong { display: block; font: bold 32px/1.05 var(--mono); }
.discord-status { display: block; margin-top: 7px; font: 15px/1.2 var(--mono); color: #d8d1dd; }
.discord-status.is-live::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #76c69b; margin-right: 8px; }
.discord-invite-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; max-width: 100%; min-height: 40px; padding: 10px 14px; border-radius: 6px; background: var(--pink); color: var(--ink); font: bold 16px/1.2 var(--mono); transition: background .2s; }
.discord-invite:hover .discord-invite-button, .discord-invite:focus-visible .discord-invite-button { background: var(--purple); }
.community-signups > .signup { margin: 0 auto; }
.signup { width: 100%; max-width: 650px; margin: auto; padding: 0; color: var(--paper); background: none; border: 0; border-radius: 0; box-shadow: none; }
.signup-heading { display: flex; align-items: center; justify-content: center; gap: 34px; margin-bottom: 14px; }
.signup-heading img { width: 54px; height: 64px; object-fit: contain; transform: rotate(-10deg); filter: drop-shadow(1px 2px 0 #743e6380); }
.signup-heading h2 { font: 600 30px/1.1 var(--mono); letter-spacing: -.055em; margin: 0; }
.laylo-frame { display: block; width: 100%; height: 200px; border: 0; background: #e3537f; border-radius: 16px; }
.contacts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; font-style: normal; width: 100%; }
.contacts > div { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.contact-emails { display: flex; flex-direction: column; min-width: 0; }
.contacts span { color: var(--pink); font: bold 12px/1.5 var(--mono); text-transform: uppercase; }
.contacts a { display: block; padding: 12px 0; min-height: 44px; width: fit-content; max-width: 100%; color: var(--paper); font: 13px/1.5 var(--mono); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .2s,transform .2s; }
.contacts a:hover, .contacts a:focus-visible { color: var(--pink); transform: translateY(-2px); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 1300px; margin: 32px auto 0; text-align: center; }
.footer-bottom small { color: #bcb4b6; font: 10px/1.5 var(--mono); }
.home-link { transition: color .2s,transform .2s; }
.home-link:hover, .home-link:focus-visible { color: var(--pink); transform: translateX(-3px); }
/* The intro enhances the homepage; a closed dialog never hides the site without JS. */
.intro-open { overflow: hidden; }
.watch-intro { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 36px 24px; border: 0; margin: 0; background: var(--ink) var(--site-texture) center / cover no-repeat; color: var(--paper); overflow: hidden; }
.watch-intro::backdrop { background: var(--ink); }
.watch-intro[open] { display: grid; place-items: center; }
.watch-intro { transition: opacity .2s ease-out; }
.watch-intro.is-revealing { opacity: 0; pointer-events: none; }
/* The home art is painted behind the modal; idle drift resumes on entry. */
.intro-open .site-header .nav-art { animation-play-state: paused; }
.watch-intro[open] .watch-light { will-change: transform; }
.watch-content { text-align: center; }
.watch-content h2:focus { outline: none; }
.watch-content h2 { position: relative; z-index: 2; margin: 0 0 40px; font: bold clamp(28px,4vw,48px)/1.2 var(--mono); letter-spacing: -.05em; }
.watch-eye-art { position: relative; display: block; width: min(340px,65vw); margin: auto; cursor: pointer; transition: filter .2s; }
.watch-intro:not(.is-facing) .watch-eye-art:hover,
.watch-intro:not(.is-facing) .watch-eye-art:focus-visible { filter: drop-shadow(0 0 14px #f252b23d); }
.watch-eye { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1151; overflow: visible; transform-origin: 50% 75%; animation: eye-scan 7s ease-in-out infinite; }
.watch-pupil { animation: pupil-scan 7s ease-in-out infinite; }
.watch-light { pointer-events: none; position: absolute; left: 51%; top: 80%; width: 50px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#fff 0 12%,#fffef3e8 22%,#e4d1ffb3 42%,transparent 70%); opacity: 0; transform: translate(-50%,-50%) scale(.1); transition: transform .9s cubic-bezier(.4,0,.2,1),opacity .7s ease-in-out; }
.is-facing .watch-eye { animation: none; transform: rotate(0) scale(1.04); }
.is-facing .watch-pupil { animation: none; transform: translate(0,-8px); }
.is-lit .watch-light { opacity: 1; transform: translate(-50%,-50%) scale(70); }
.watch-actions { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 42px; margin: 34px auto 0; transition: opacity .3s; }
.watch-yes { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; min-height: 48px; padding: 12px 8px; border: 0; background: none; color: var(--paper); font: 400 var(--nav-font)/1.1 var(--mono); text-transform: uppercase; transition: color .2s,transform .2s; }
.watch-yes:hover, .watch-yes:focus-visible { color: var(--pink); transform: translateY(-2px) rotate(-2deg); }
.is-facing .watch-actions { opacity: 0; }
@keyframes art-drift { 0%,100% { transform: translateY(1px) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes eye-scan { 0%,100% { transform: rotate(-4deg); } 30%,50% { transform: rotate(4deg); } 75% { transform: rotate(0); } }
@keyframes pupil-scan { 0%,100% { transform: translate(-48px,-12px); } 30%,50% { transform: translate(48px,-22px); } 75% { transform: translate(0,-8px); } }
@media (hover:hover) and (pointer:fine) { .album-title-link:hover .album-title-tint { opacity: 1; } }

.tour-page { max-width: 1240px; padding: 12px var(--gutter) 42px; margin: auto; }
.page-heading { transform: rotate(-.15deg); display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.page-heading h1 { font: bold 42px/1.1 var(--mono); text-transform: uppercase; margin: 0; color: var(--pink); }
.home-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 12px/1.5 var(--mono); }
.tour-source { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 11px/1.5 var(--mono); }
.tour-source { color: var(--muted); margin-top: 16px; }
.tour-widget { min-height: 180px; }
.bit-widget-initializer { display: inline-flex; align-items: center; min-height: 44px; padding: 20px 0; font: 13px/1.5 var(--mono); color: var(--pink); }
/* Keep the native live feed and its ticket / waitlist links; only change presentation. */
.tour-widget .bit-follow-section-wrapper { display: none !important; }
.tour-widget .bit-play-my-city-wrapper { display: none !important; }
.tour-widget:has(.bit-event) + .tour-source { display: none; }
.tour-widget .bit-widget { padding: 0 !important; }
.tour-widget .bit-event { display: grid !important; grid-template-columns: minmax(0,1fr) 192px !important; gap: 24px !important; align-items: center !important; padding: 10px 0 !important; text-align: left !important; }
.tour-widget .bit-mobile-date-and-share-wrapper, .tour-widget .bit-desktop-social-share-button, .tour-widget .bit-location-under-mobile, .tour-widget .bit-location-under-tablet { display: none !important; }
.tour-widget .bit-details-inner-wrapper { display: grid !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 125px minmax(0,1fr) minmax(0,1fr) !important; column-gap: 22px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; align-items: center !important; }
.tour-widget .bit-details-inner-wrapper > .bit-details { display: contents !important; }
.tour-widget .bit-date-wrapper { display: block !important; grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important; }
.tour-widget .bit-date { font: 12px/1.5 var(--mono) !important; }
.tour-widget .bit-titleWrapper { display: block !important; grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.tour-widget .bit-venue { font-size: 13px !important; line-height: 1.4 !important; }
.tour-widget .bit-location-under-desktop { display: block !important; grid-column: 3 !important; grid-row: 1 !important; font-size: 13px !important; line-height: 1.4 !important; }
.tour-widget .bit-event-buttons { display: flex !important; grid-column: 2 !important; grid-row: 1 !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: 192px !important; margin: 0 !important; padding: 0 !important; }
.tour-widget .bit-rsvp-container, .tour-widget .bit-offers-inner-wrapper, .tour-widget .bit-offers-container { width: auto !important; margin: 0 !important; padding: 0 !important; }
.tour-widget .bit-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 36px !important; width: 91px !important; margin: 0 !important; padding: 8px 10px !important; border-radius: 0 !important; font: 11px/1.5 var(--mono) !important; transition: background-color .2s,transform .2s !important; }
.tour-widget .bit-offers { background: url('/assets/paper-wear.svg') center/720px 720px repeat, var(--pink) url('/assets/photocopy-grain.svg') repeat !important; border-color: var(--pink) !important; color: var(--ink) !important; }
.tour-widget .bit-rsvp { background: transparent !important; border-color: var(--line) !important; color: var(--paper) !important; }
.tour-widget .bit-rsvp svg path { fill: currentColor !important; }
.tour-widget .bit-event a:focus-visible { outline: 2px solid var(--pink) !important; outline-offset: 3px !important; }
.tour-source { transition: color .2s,transform .2s; }
.tour-source:hover, .tour-source:focus-visible { color: var(--pink); transform: translateY(-2px); }
.tour-widget .bit-button:hover, .tour-widget .bit-button:focus-visible { background-color: var(--purple) !important; border-color: var(--purple) !important; color: var(--ink) !important; transform: translateY(-2px) rotate(-1deg); }
.tour-widget .bit-offers.bit-sold-out-button { background: #5f526f !important; border-color: #5f526f !important; color: var(--paper) !important; }
.tour-widget .bit-offers.bit-sold-out-button:hover, .tour-widget .bit-offers.bit-sold-out-button:focus-visible { background: #746185 !important; border-color: #746185 !important; color: var(--paper) !important; }

/* A straight, quiet lyric-booklet grid, in video release order. */
.videos-page { position: relative; isolation: isolate; max-width: 1240px; margin: auto; padding: 12px var(--gutter) 80px; }
.video-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 52px 88px; list-style: none; padding: 34px 30px 0; margin: 0; }
.video-gallery li { min-width: 0; }
.video-entry { display: block; text-align: center; padding: 12px 16px 20px; transition: transform .3s; }
.video-art { display: flex; align-items: center; justify-content: center; position: relative; height: 230px; margin: 0 auto 22px; }
.video-art img { width: 260px; max-height: 230px; object-fit: contain; transform: rotate(-5deg); transition: transform .35s,filter .35s; }
.video-bundy .video-art img { width: 250px; transform: rotate(7deg); }
.video-dent .video-art img { width: 190px; transform: rotate(-7deg); }
.video-suffocate .video-art img { width: 150px; transform: rotate(8deg); }
.video-entry h2 { min-height: 72px; margin: 0; color: var(--pink); font: bold clamp(24px,2.6vw,34px)/1.05 var(--mono); letter-spacing: -.05em; }
.video-entry h2 > span { display: inline-block; font-size: 18px; vertical-align: middle; transition: transform .25s; }
.video-lyric { margin: 18px 0 0; color: #d3cccf; font: 13px/1.65 var(--mono); }
.video-entry:hover, .video-entry:focus-visible { transform: translateY(-4px); }
.video-entry:hover .video-art img, .video-entry:focus-visible .video-art img { transform: rotate(0) scale(1.05); filter: drop-shadow(0 0 18px #b399e32b); }
.video-entry:hover h2, .video-entry:focus-visible h2 { color: var(--purple); }
.video-entry:hover h2 > span, .video-entry:focus-visible h2 > span { transform: translate(2px,-2px); }

@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero-image { min-height: 0; aspect-ratio: .95; }
}
@media (max-width: 1000px) {
  .site-header { grid-template-columns: minmax(160px,210px) minmax(0,1fr); gap: 24px; }
  .brand { width: 210px; }
  .primary-navigation { width: 100%; }
  .primary-navigation a { padding: 0 12px; }
  :root { --nav-font: 19.8px; }
  .hero-image { margin-right: 16px; }
  .hero-copy { padding-left: 12px; padding-right: 32px; }
  .release-card { gap: 22px; }
  .album-sleeve { width: 112px; }
  .listen-link { gap: 20px; }
  .release-card p { font-size: 14px; }
  .contacts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .contacts a { font-size: 11px; }
  .tour-widget .bit-details-inner-wrapper { grid-template-columns: 108px minmax(0,1fr) minmax(0,1fr) !important; column-gap: 14px !important; }
  .tour-widget .bit-event { gap: 18px !important; }
  .video-gallery { gap: 36px 32px; padding-left: 0; padding-right: 0; }
  .video-entry { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 720px) {
  :root { --site-texture: url('/assets/wnoow-crisp-quiet-mobile.webp?v=5.0.5'); }
  .site-header { grid-template-columns: 1fr; gap: 16px; padding: 20px 24px 24px; }
  .brand { width: 190px; justify-self: center; }
  .primary-navigation { width: 100%; }
  .primary-navigation a { padding: 0 8px; }
  .nav-art { height: 48px; }
  .nav-art img { width: 94px; max-height: 48px; }
  .nav-store img { width: 31px; }
  .nav-videos img { width: 47px; }
  :root { --nav-font: 18.7px; }
  .nav-label { padding: 10px 0; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-image { width: calc(100% - 64px); max-width: calc(100% - 64px); min-width: 0; align-self: center; min-height: 0; aspect-ratio: 1.05; margin: 6px 0 22px; padding: 8px 8px 0; box-shadow: 0 1px 0 #fff inset, 1px 2px 0 #bcb5ad, 7px 9px 0 #332144, 12px 18px 24px #0009; }
  .photo-window img { object-position: center 33%; }
  .photo-credit { min-width: 0; min-height: 38px; font-size: 8px; overflow-wrap: anywhere; }
  .photo-credit > span { font-size: 15px; }
  .hero-copy { min-width: 0; width: 100%; padding: 18px 28px 42px; }
  .hero-copy h1 { max-width: 440px; }
  .release-card { margin-top: 24px; gap: 28px; }
  .album-sleeve { width: 96px; border-width: 6px; box-shadow: 1px 2px 0 #bcb5ad, 6px 7px 0 #32233e; }
  .release-card p { font-size: 13px; margin-bottom: 10px; }
  .listen-link { min-height: 44px; padding: 11px 0; gap: 20px; }
  .site-footer { padding: 20px 24px 24px; }
  .footer-layout { gap: 24px; }
  .community-signups { grid-template-columns: minmax(0,1fr); max-width: 650px; gap: 14px; }
  .discord-signup { margin-top: 10px; }
  .discord-invite { height: var(--laylo-height,220px); }
  .discord-invite-body { padding: 18px; }
  .discord-brand { right: 18px; }
  .discord-invite-button { font-size: 14px; gap: 12px; padding-inline: 12px; }
  .signup-heading { gap: 18px; margin-bottom: 12px; }
  .signup-heading h2 { font-size: 24px; }
  .signup-heading img { width: 40px; height: 50px; }
  .laylo-frame { height: 220px; }
  .contacts { grid-template-columns: 1fr; gap: 6px; }
  .contacts > div { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 10px; align-items: center; }
  .contacts span { font-size: 10px; }
  .contacts a { font-size: 11px; }
  .footer-bottom { margin-top: 24px; }
  .tour-page { padding: 8px 24px 30px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading h1 { font-size: 30px; }
  .watch-eye-art { width: min(280px,70vw); }
  .watch-content h2 { margin-bottom: 32px; }
  .tour-widget .bit-event { grid-template-columns: minmax(0,1fr) 94px !important; gap: 16px !important; padding: 12px 0 !important; }
  .tour-widget .bit-details-inner-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .tour-widget .bit-details-inner-wrapper > .bit-details { display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; width: 100% !important; text-align: left !important; }
  .tour-widget .bit-date-wrapper { margin-bottom: 6px !important; }
  .tour-widget .bit-date { font-size: 11px !important; }
  .tour-widget .bit-location-under-desktop { font-size: 13px !important; }
  .tour-widget .bit-titleWrapper { margin-top: 3px !important; }
  .tour-widget .bit-venue { font-size: 11px !important; color: var(--muted) !important; }
  .tour-widget .bit-event-buttons { flex-direction: column !important; align-items: stretch !important; width: 94px !important; gap: 6px !important; }
  .tour-widget .bit-rsvp-container, .tour-widget .bit-offers-inner-wrapper, .tour-widget .bit-offers-container { width: 100% !important; }
  .tour-widget .bit-button { width: 100% !important; min-height: 44px !important; font-size: 11px !important; }
  .videos-page { padding: 8px 24px 40px; }
  .video-gallery { grid-template-columns: 1fr; gap: 32px; padding: 22px 0 0; max-width: 440px; margin: auto; }
  .video-entry { padding: 10px 16px 22px; }
  .video-art { height: 200px; margin-bottom: 18px; }
  .video-art img { width: 230px; max-height: 200px; }
  .video-bundy .video-art img { width: 220px; }
  .video-dent .video-art img { width: 164px; }
  .video-suffocate .video-art img { width: 130px; }
  .video-entry h2 { font-size: 30px; }
  .video-lyric { font-size: 12px; margin-top: 14px; }
}
@media (max-width: 360px) {
  .brand { width: 190px; justify-self: center; }
  :root { --nav-font: 16.5px; }
  .release-card { gap: 16px; }
  .album-sleeve { width: 96px; }
  .listen-link { gap: 18px; }
  .release-card p { font-size: 13px; }
  .signup-heading h2 { font-size: 22px; }
  .contacts > div { grid-template-columns: 76px minmax(0,1fr); gap: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .watch-pupil { transform: translate(0,-8px); }
}

/* A small after-hours arcade, printed in the album's palette. */
.game-page { max-width: 1160px; margin: auto; padding: 12px var(--gutter) 70px; }
.game-layout { display: grid; grid-template-columns: minmax(280px,360px) minmax(240px,300px); justify-content: center; align-items: start; gap: 60px; padding-top: 20px; }
.game-stage { width: 300px; max-width: 100%; margin: auto; scroll-margin-top: 20px; }
.game-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; padding-bottom: 14px; font: 11px/1.4 var(--mono); text-transform: uppercase; }
.game-stats strong { display: block; color: var(--pink); font: 400 22px/1.2 var(--mono); margin-top: 4px; }
.game-board-wrap { position: relative; width: 100%; padding: 7px; border: 1px solid #eee8dd66; background: var(--paper) url('/assets/photocopy-grain.svg') repeat; box-shadow: 5px 6px 0 #583e6870; }
.game-board-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; }
.game-board-wrap.did-clear { box-shadow: 0 0 0 4px var(--purple),5px 6px 0 #583e6870; }
.game-overlay { position: absolute; inset: 7px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 20px; text-align: center; background: #090909d9 url('/assets/photocopy-grain.svg'); }
.game-overlay[hidden] { display: none; }
.game-overlay p { font: 13px/1.6 var(--mono); }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; border: 0; padding: 8px 0; color: var(--paper); background: none; font: 400 18px/1.2 var(--mono); transition: color .2s,transform .2s; }
.text-button:hover, .text-button:focus-visible { color: var(--pink); transform: translateY(-2px) rotate(-1deg); }
.game-controls { position: sticky; bottom: 10px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) 1.4fr minmax(0,1fr); gap: 5px; margin-top: 18px; padding: 5px 0; background: #090909ee; z-index: 1; }
.game-controls button { min-height: 48px; padding: 4px; border: 1px solid #f4f1ec55; border-radius: 2px; background: #252029 url('/assets/photocopy-grain.svg'); color: var(--paper); font: 400 18px/1 var(--mono); touch-action: none; transition: color .15s,background-color .15s,transform .15s; }
.game-controls button[data-game-action=drop] { font-size: 12px; }
.game-controls button:hover, .game-controls button:focus-visible, .game-controls button:active { background-color: var(--purple); color: var(--ink); transform: translateY(-2px); }
.game-keyboard { font: 10px/1.6 var(--mono); color: var(--muted); text-align: center; }
.game-side { display: flex; flex-direction: column; gap: 30px; }
.game-next h2 { font: 400 13px/1.2 var(--mono); text-transform: uppercase; margin: 0; }
.game-next canvas { display: block; width: 100%; max-width: 260px; height: auto; }
.game-next-mobile { display: none; }
.game-leaderboard { position: relative; padding: 24px 20px 18px; border: 1px solid #f4f1ec55; background: #19141a url('/assets/paper-wear.svg') repeat; transform: rotate(.7deg); box-shadow: 3px 4px 0 #442d5190; }
.leaderboard-heading { display: flex; align-items: center; gap: 16px; min-height: 80px; margin: -15px -6px 8px 0; }
.leaderboard-heading h2 { font: 400 24px/1.15 var(--mono); text-transform: uppercase; margin: 0; max-width: 120px; color: var(--pink); }
.leaderboard-heading img { width: 65px; height: 100px; object-fit: contain; transform: rotate(9deg); margin-left: auto; }
#leaderboard-list { list-style: none; margin: 0; padding: 0; font: 12px/1.4 var(--mono); }
#leaderboard-list li { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 13px 0; border-bottom: 1px dashed #f4f1ec33; }
#leaderboard-list .leaderboard-empty { display: block; color: var(--muted); }
#leaderboard-list strong { color: var(--purple); font-weight: 400; }
.score-rank { color: var(--muted); font-size: 10px; }
#leaderboard-status { margin: 14px 0 0; font: 10px/1.5 var(--mono); color: var(--muted); }
.leaderboard-refresh { font-size: 11px; min-height: 44px; }
.score-dialog { width: min(420px,calc(100% - 32px)); padding: 30px; border: 1px solid var(--paper); background: var(--ink) url('/assets/photocopy-grain.svg'); color: var(--paper); box-shadow: 7px 8px 0 #74518b; }
.score-dialog::backdrop { background: #090909c9; }
.score-dialog h2 { color: var(--pink); margin: 0 0 18px; font: 400 30px/1.2 var(--mono); }
.finished-score { font: 16px/1.6 var(--mono); }
.score-dialog label { display: block; margin: 20px 0 8px; font: 12px/1.4 var(--mono); }
.score-dialog input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--purple); border-radius: 0; background: #f4f1ec; color: var(--ink); font: 16px/1.4 var(--mono); }
.score-note, #score-status { font: 11px/1.5 var(--mono); }
.score-note { color: var(--muted); }
.score-dialog .play-again { display: flex; margin: 12px 0; }
.score-dialog .home-link { color: var(--muted); }
.game-player { width: 220px; align-self: center; margin: 0 0 4px; padding: 18px 17px 16px; border: 1px solid #d6c8d0; border-radius: 18px 17px 22px 19px; color: var(--ink); background: url('/assets/photocopy-grain.svg') repeat, linear-gradient(125deg,#f4e8ef,var(--paper) 55%,#d6cad9); box-shadow: 2px 3px 0 #998d9d,7px 8px 0 #40294b; transform: rotate(-3deg); }
.player-screen { min-height: 117px; padding: 11px 12px 12px; border: 2px solid #53504f; border-radius: 5px; background: #201e22 url('/assets/photocopy-grain.svg'); color: var(--paper); box-shadow: inset 1px 2px 5px #0009; }
.player-screen img { width: 83px; height: auto; margin-bottom: 9px; }
.player-screen h2 { margin: 0; color: var(--pink); font: 400 18px/1.3 var(--mono); }
#player-status { margin: 4px 0 9px; font: 9px/1.4 var(--mono); }
.player-track { height: 3px; background: #f4f1ec44; }
#player-progress { display: block; width: 0; height: 100%; background: var(--purple); }
.player-wheel { position: relative; width: 150px; height: 150px; margin: 17px auto 0; border-radius: 50%; border: 1px solid #c7bbcb; background: #b69bc134; box-shadow: inset 0 1px 2px #ffffffaa; }
.player-wheel button { position: absolute; display: flex; align-items: center; justify-content: center; border: 0; color: #332839; background: transparent; transition: color .2s,transform .2s; }
.player-wheel button:hover, .player-wheel button:focus-visible { color: #875397; transform: scale(1.07); }
#player-mute { left: 37px; top: 0; width: 76px; height: 44px; font: 11px/1 var(--mono); }
#player-play { left: 47px; top: 47px; width: 56px; height: 56px; border: 1px solid #c1adcb; border-radius: 50%; font: 21px/1 var(--mono); background: #eee1ef; box-shadow: inset 1px 1px 2px #fff9,0 1px 1px #ad9ab088; }
#player-volume { position: absolute; left: 26px; bottom: 8px; width: 98px; height: 28px; margin: 0; accent-color: #765482; cursor: pointer; }
@media (max-width: 1000px) { .game-layout { gap: 36px; } }
@media (max-width: 720px) {
  .game-page { padding: 8px 24px 50px; }
  .game-layout { grid-template-columns: minmax(0,1fr); gap: 44px; padding-top: 8px; }
  .game-stage { width: 260px; scroll-margin-top: 12px; }
  .game-keyboard, .game-side > .game-next { display: none; }
  .game-next-mobile { display: flex; align-items: center; gap: 14px; min-height: 46px; color: var(--muted); font: 10px/1.4 var(--mono); }
  .game-next-mobile canvas { width: 210px; height: auto; }
  .game-side { width: 100%; max-width: 320px; justify-self: center; gap: 38px; }
  .game-player { margin: 0 auto; }
  .game-leaderboard { padding: 24px; }
}

.arcade-sticker { position: absolute; right: var(--gutter); bottom: 24px; display: flex; align-items: center; justify-content: center; width: 58px; height: 88px; transform: rotate(9deg); transition: transform .25s,filter .25s; }
.arcade-sticker img { width: 100%; max-height: 88px; object-fit: contain; filter: drop-shadow(1px 2px 0 #55304770); }
.arcade-sticker:hover, .arcade-sticker:focus-visible { transform: rotate(-3deg) translateY(-4px); filter: drop-shadow(0 0 6px #9b6cba55); }
@media(max-width:720px){.arcade-sticker{right:20px;bottom:20px;width:42px;height:64px;}.arcade-sticker img{max-height:64px;}}

.page-game main { padding-top: 22px; }
.game-footer { text-align:center; padding:24px; color:var(--pink); font:12px var(--mono); }

.page-game .page-heading { position:relative; justify-content:center; min-height:66px; padding-inline:75px; }
.page-game .page-heading .home-link { position:absolute; left:0; top:14px; }
#game-message { text-transform:uppercase; font-size:22px; }
@media(max-width:720px){.page-game .page-heading{padding-inline:60px;}}

/* Give the album artwork room; the player and score card stay secondary. */
.game-layout { grid-template-columns:minmax(320px,440px) minmax(200px,220px); gap:40px; }
.game-stage { width:400px; }
.game-player { width:185px; padding:15px 13px 13px; }
.player-screen { padding:9px; min-height:110px; }
.player-wheel { width:130px; height:130px; margin-top:13px; }
#player-mute { left:25px; width:80px; }
#player-play { left:40px; top:40px; width:50px; height:50px; }
#player-volume { left:18px; bottom:3px; width:94px; }
.game-leaderboard { padding:22px 16px 14px; }
.leaderboard-heading h2 { font-size:21px; }
.leaderboard-heading img { width:52px; height:80px; }
@media(max-width:720px){
 .game-layout { grid-template-columns:minmax(0,1fr); gap:38px; }
 .game-stage { width:300px; }
 .game-side { max-width:260px; }
}

.arcade-sticker { right:calc(var(--gutter) + 24px); bottom:48px; animation:ribbon-hint 15s ease-in-out infinite; }
.arcade-sticker:hover,.arcade-sticker:focus-visible { animation:none; }
@keyframes ribbon-hint {
  0%,92%,100% { transform:rotate(9deg); }
  93%,95% { transform:rotate(5deg) translateY(-1px); }
  94%,96% { transform:rotate(13deg) translateY(-1px); }
  97% { transform:rotate(8deg); }
}
@media(max-width:720px){.arcade-sticker{right:32px;bottom:48px;}}

/* Keep navigation still; retain pointer feedback. */
.nav-art{animation:none!important}
.video-gallery{gap:28px;padding:20px 0 0}.video-heading{display:flex;align-items:center;gap:14px;min-height:56px;margin-bottom:10px}.video-heading img{width:44px;height:44px;object-fit:contain}.video-heading h2{font:400 20px/1.2 var(--mono);margin:0;color:var(--pink)}.video-player{position:relative;aspect-ratio:16/9;background:#090909;overflow:hidden;border:1px solid var(--line)}.video-facade{display:block;position:relative;width:100%;height:100%}.video-facade>img{width:100%;height:100%;object-fit:cover}.video-play{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:var(--paper);text-shadow:0 2px 10px #000;transition:color .2s,transform .2s}.video-facade:hover .video-play{color:var(--pink);transform:scale(1.1)}.video-player iframe{display:block;width:100%;height:100%;border:0}.video-external{display:inline-block;margin-top:8px;padding:5px 0;font:12px var(--mono);color:var(--muted)}.video-external:hover{color:var(--pink)}
@media(max-width:720px){.video-gallery{gap:22px;padding:12px 0 0;max-width:none}.video-heading{min-height:40px;margin-bottom:8px}.video-heading img{width:34px;height:34px}.video-heading h2{font-size:18px}.video-external{margin-top:4px}}

/* Single-video loop; controls stay below and outside the player. */
.video-carousel{max-width:1000px;margin:20px auto 0;position:relative}.video-carousel:focus{outline:none}.video-carousel:focus-visible{outline:2px solid var(--purple);outline-offset:6px}.video-carousel .video-gallery{display:block;padding:0;margin:0;max-width:none}.video-carousel li[hidden]{display:none!important}.video-carousel .video-heading{justify-content:center;margin:16px 60px 0;min-height:52px;gap:14px}.video-carousel .video-heading img{width:48px;height:48px}.video-carousel .video-heading h2{font-size:22px}.video-carousel .video-external{display:block;width:max-content;margin:6px auto 0}.video-controls{display:flex;justify-content:space-between;align-items:center;position:absolute;left:0;right:0;top:calc(100% - 76px);pointer-events:none}.video-controls button{pointer-events:auto;display:grid;place-items:center;width:48px;height:48px;border:0;background:transparent;color:var(--paper);font:32px/1 var(--mono);transition:color .2s,transform .2s}.video-controls button:hover{color:var(--pink);transform:translateY(-2px)}.video-carousel .video-player{width:100%;aspect-ratio:16/9}.video-carousel .video-player iframe{height:100%;width:100%}
@media(max-width:720px){.video-carousel{margin-top:12px}.video-carousel .video-heading{margin:12px 46px 0;min-height:52px;gap:10px}.video-carousel .video-heading img{width:38px;height:38px}.video-carousel .video-heading h2{font-size:17px}.video-controls button{width:44px;height:48px;font-size:28px}.video-controls{top:calc(100% - 76px)}}

.video-carousel .video-heading{margin:18px 62px 0;min-height:76px;gap:18px}.video-carousel .video-heading img{width:64px;height:64px}.video-carousel .video-heading h2{font-size:28px}.video-controls{top:auto;bottom:14px}
@media(max-width:720px){.video-carousel .video-heading{margin:14px 44px 0;min-height:74px;gap:12px}.video-carousel .video-heading img{width:52px;height:52px;flex-shrink:0}.video-carousel .video-heading h2{font-size:22px}.video-controls{top:auto;bottom:13px}}

/* Compact mobile artist header and album-first home composition. */
.listen-link{background:var(--pink);color:var(--ink);padding:12px 18px;box-shadow:3px 4px 0 #56364f;transform:rotate(-1deg)}.listen-link:hover,.listen-link:focus-visible{color:var(--ink);background:#f6bdd0;transform:rotate(0) translateY(-2px)}
@media(max-width:720px){
.site-header{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px 18px;align-items:center}.brand{width:84px;justify-self:start}.primary-navigation a{gap:5px;padding:0 3px;min-height:64px;justify-content:center}.primary-navigation a+a:before{top:12px;bottom:12px}.nav-art{height:27px}.nav-art img{width:53px;max-height:27px}.nav-store img{width:18px}.nav-videos img{width:28px}.nav-label{min-height:24px;font-size:13px;padding:0;line-height:1.1}
.hero-image{width:calc(100% - 48px);max-width:calc(100% - 48px);aspect-ratio:1.8;margin:8px 0 18px;padding:6px 6px 0;grid-template-rows:minmax(0,1fr) 25px}.photo-credit{min-height:25px;font-size:7px}.photo-window img{object-position:center 33%}.hero-copy{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto auto;gap:10px 22px;align-items:center;padding:12px 24px 26px}.hero-copy h1{grid-column:2;grid-row:1;align-self:end;width:100%;max-width:210px;transform:rotate(-2deg)}.release-card{display:contents}.album-sleeve{grid-column:1;grid-row:1 / span 2;width:100%;max-width:180px;justify-self:center;border-width:6px;transform:rotate(-5deg)}.release-copy{grid-column:2;grid-row:2;align-self:start;min-width:0}.release-card p{font-size:13px;line-height:1.5;margin:2px 0 12px}.listen-link{font-size:17px;padding:10px 14px;gap:16px;min-height:42px}.site-footer{padding-top:12px}
}
/* Give the portrait breathing room; fit release copy to the sleeve height. */
@media(max-width:720px){.hero-image{aspect-ratio:1.3}.photo-window img{object-position:center 18%}.hero-copy{gap:6px 22px;padding-top:10px;padding-bottom:22px}.hero-copy h1{max-width:135px;justify-self:start}.release-card p{font-size:12px;line-height:1.4;margin:0 0 8px}.listen-link{font-size:15px;min-height:36px;padding:8px 12px;gap:13px}}
/* Center the mobile album pairing and its right-hand caption stack. */
@media(max-width:720px){.hero-copy{width:100%;max-width:390px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 20px}.hero-copy h1{justify-self:center}.release-copy{width:100%;text-align:center}.release-copy .listen-link{justify-content:center}.album-sleeve{justify-self:center}}
@media(max-width:720px){.site-header{grid-template-columns:96px minmax(0,1fr)}.brand{width:96px}}