/* GlitchYard — bold site styles (header, menu, buttons, footer, subpages).
   Structure and motion follow superplay.co's homepage; colours, type and content are ours. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --cream: #FFFFF5; --cream-2: #F9F9ED; --ink: #212121; --ink-2: #8D8D87;
  --purple: #7B3FE4; --purple-deep: #5A28B8; --blue: #2E6BFF; --yellow: #FFD400; --yellow-light: #FFE14C; --orange: #EB8D00;
  --pink: #FF3D8A; --lilac: #C9B8FF; --green: #38D996;
  --font-head: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-weight: 600; line-height: 1.5; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.headline { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.005em; }
.d-flex { display: flex; }
.hide-lg { display: block; } .hide-sm { display: none; }
@media (max-width: 524px) { .hide-lg { display: none; } .hide-sm { display: block; } }

/* ── buttons (SP .btn: pill, 1px border, hard 4px drop) ── */
.btn { align-items: center; border: 1px solid var(--ink); border-radius: 100px; box-shadow: 0 4px 0 0 var(--ink); cursor: pointer; display: inline-flex; font-family: var(--font-body); font-size: 20px; font-weight: 900; isolation: isolate; justify-content: center; line-height: 1; padding: 15px 30px; position: relative; text-align: center; transition: box-shadow .3s linear, transform .3s linear, background-color .4s, color .4s; color: var(--cream); background: var(--purple); }
.btn:hover { box-shadow: 0 2px 0 0 var(--ink); transform: translateY(2px); }
.btn-yellow { background: var(--yellow); border-color: var(--yellow-light); box-shadow: 0 4px 0 0 var(--orange); color: var(--ink); }
.btn-yellow:hover { box-shadow: 0 2px 0 0 var(--orange); }
.btn-large { border-radius: 250px; box-shadow: 0 10px 0 0 var(--orange); font-size: clamp(26px, 3.5vw, 50px); line-height: 1.33; padding: 22px 50px; }
.btn-large:hover { box-shadow: 0 3px 0 0 var(--orange); }

/* ── header ── */
.site-header { left: 0; padding: 16px 20px 0; position: fixed; top: 0; transition: padding .3s linear, transform .5s ease; width: 100%; z-index: 9000; }
@media (min-width: 992px) { .site-header { padding: 26px 42px 0; } }
.site-header__wrapper { display: flex; justify-content: space-between; align-items: center; height: 44px; }
@media (min-width: 992px) { .site-header__wrapper { height: 75px; align-items: flex-start; } }
.site-header__logo { display: flex; align-items: center; gap: 10px; position: relative; z-index: 100; color: var(--cream); }
.site-header__logo img { height: 44px; width: 44px; border-radius: 12px; box-shadow: 0 4px 0 0 rgba(0,0,0,.35); }
@media (min-width: 992px) { .site-header__logo img { height: 64px; width: 64px; border-radius: 16px; } }
.site-header__logo .wordmark { font-family: var(--font-head); font-size: 26px; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0,0,0,.35); transition: color .3s; }
@media (min-width: 992px) { .site-header__logo .wordmark { font-size: 36px; } }
.site-header__logo[data-style="dark"] { color: var(--ink); } .site-header__logo[data-style="dark"] .wordmark { text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.site-header__aside { display: flex; align-items: center; gap: 10px; }
@media (min-width: 992px) { .site-header__aside { gap: 30px; height: 38px; } }
.site-header__button { border-radius: 18px; font-size: 12px; line-height: 16px; padding: 3px 20px 4px; }
@media (min-width: 992px) { .site-header__button { border-radius: 26px; font-size: 18px; line-height: 22px; padding: 5px 30px 6px; } }
.site-header__button[data-style="purple"] { background: var(--purple); color: var(--cream); }
.site-header__button[data-style="blue"] { background: var(--blue); color: var(--cream); }
.site-header__button[data-style="yellow"] { background: var(--yellow); color: var(--ink); }
.site-header__button[data-style="white"] { background: var(--cream); color: var(--ink); }
.site-header__menu-btn { background: transparent; border: 0; cursor: pointer; height: 24px; padding: 0; position: relative; width: 32px; z-index: 100; }
.site-header__menu-btn span, .site-header__menu-btn span::after, .site-header__menu-btn span::before { background: #fff; border-radius: 10px; height: 3px; position: absolute; transition: transform .3s linear, background-color .3s, top .3s; width: 100%; left: 0; }
.site-header__menu-btn span { top: 50%; margin-top: -1.5px; }
.site-header__menu-btn span::after, .site-header__menu-btn span::before { content: ""; display: block; }
.site-header__menu-btn span::before { top: -10px; } .site-header__menu-btn span::after { top: 10px; }
.site-header__menu-btn[data-style="dark"] span, .site-header__menu-btn[data-style="dark"] span::after, .site-header__menu-btn[data-style="dark"] span::before { background: var(--ink); }
.site-header__menu-btn.active span { background: var(--ink); transform: rotate(45deg); }
.site-header__menu-btn.active span::after, .site-header__menu-btn.active span::before { background: var(--ink); top: 0; }
.site-header__menu-btn.active span::after { transform: rotate(90deg); }
.site-header.menu-opened .site-header__logo { color: var(--ink); } .site-header.menu-opened .wordmark { text-shadow: 0 3px 0 rgba(0,0,0,.12); }

/* ── full-screen menu (slides down) ── */
.main-menu { height: 100vh; left: 0; position: fixed; top: 0; transform: translateY(-150%); transition: transform 1s cubic-bezier(.5,1.25,.59,1.09); width: 100%; will-change: transform; z-index: 90; }
.main-menu.menu-opened { transform: translateY(0); }
.main-menu__wrapper { background: var(--cream-2); padding: 124px 20px 48px; position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; border-radius: 0 0 28px 28px; box-shadow: 0 0 200px rgba(0,0,0,.5); }
@media (min-width: 992px) { .main-menu__wrapper { padding: 136px 50px 48px; } }
@media (min-width: 1200px) { .main-menu__wrapper { padding-left: 100px; padding-right: 100px; } }
.main-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.main-menu__list a { color: var(--purple); font-family: var(--font-head); font-size: 51px; line-height: 1; text-transform: uppercase; transition: color .3s linear; }
.main-menu__list a:hover { color: var(--ink); }
@media (min-width: 768px) { .main-menu__list a { font-size: 7vw; } }
@media (min-width: 1200px) { .main-menu__list a { font-size: 105px; } }
.main-menu__bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink); }
@media (min-width: 992px) { .main-menu__bottom { align-items: flex-start; } }
.main-menu__bottom p { font-size: 18px; font-weight: 900; }
.main-menu__bottom .links { display: flex; gap: 8px; flex-wrap: wrap; }
.main-menu__bottom .links a { background: var(--ink); color: var(--cream-2); border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 800; transition: background-color .3s; }
.main-menu__bottom .links a:hover { background: var(--purple); }

/* ── footer (cream slab with the diagonal cut, dark copyright bar) ── */
.home-site-footer { isolation: isolate; position: relative; z-index: 100; color: var(--ink); }
.home-site-footer__box { --box-f-color: var(--cream-2); margin-top: 32px; padding: 24px 42px 28px; width: 100%; position: relative; }
.home-site-footer__box::after { background: var(--box-f-color); bottom: 0; content: ""; height: calc(100% + 30px); left: 0; position: absolute; width: 100%; z-index: -1;
  clip-path: polygon(99.968% 32.578%, 99.931% 30.821%, 99.822% 29.148%, 99.647% 27.578%, 99.412% 26.134%, 99.121% 24.837%, 98.782% 23.707%, 98.399% 22.767%, 97.977% 22.037%, 97.522% 21.539%, 97.04% 21.294%, 3.355% .058%, 2.826% .099%, 2.32% .449%, 1.846% 1.083%, 1.411% 1.975%, 1.022% 3.101%, .688% 4.435%, .414% 5.951%, .21% 7.625%, .082% 9.43%, .037% 11.342%, .037% 99.808%, 99.968% 99.808%); }
@media (max-width: 767.98px) { .home-site-footer__box::after { clip-path: polygon(99.955% 19.371%, 99.888% 17.975%, 99.694% 16.645%, 99.383% 15.397%, 98.965% 14.248%, 98.449% 13.213%, 97.844% 12.311%, 97.161% 11.558%, 96.409% 10.97%, 95.598% 10.564%, 94.738% 10.357%, 6.098% .155%, 5.14% .175%, 4.224% .445%, 3.364% .946%, 2.575% 1.656%, 1.869% 2.555%, 1.262% 3.622%, .765% 4.838%, .393% 6.181%, .16% 7.631%, .079% 9.168%, .079% 99.864%, 99.955% 99.864%); } }
.footer-content { display: flex; justify-content: space-between; margin: 0 auto; gap: 24px; }
.footer-content__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(24px, 2.5vw, 48px); flex-wrap: wrap; }
.footer-content__list > li { display: flex; flex-direction: column; }
.footer-content__list > li > .menu-title, .footer-content__list > li > a { color: var(--ink); font-size: clamp(16px, 1.075vw, 28px); font-weight: 800; line-height: 135%; margin: 0 0 8px; }
.footer-content__list .sub-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-content__list .sub-menu a { font-size: clamp(12px, .75vw, 18px); line-height: 135%; font-weight: 600; }
.footer-content__list .sub-menu a:hover { text-decoration: underline; }
.footer-content__socials { align-self: flex-end; display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px; }
.footer-content__socials__title { font-size: clamp(16px, 1.075vw, 28px); font-weight: 800; margin: 0 0 8px; }
.footer-content__socials__wrapper { display: flex; gap: 8px; }
.footer-content__socials__wrapper a { height: clamp(35px, 2.4vw, 58px); width: clamp(35px, 2.4vw, 58px); border-radius: 8px; background: var(--purple); color: var(--cream); display: grid; place-items: center; transition: background-color .3s; }
.footer-content__socials__wrapper a:hover { background: var(--ink); }
.footer-content__socials__wrapper svg { width: 18px; height: 18px; }
.home-site-footer__copyright { background: var(--ink); color: var(--cream); width: 100%; }
.home-site-footer__copyright-container { display: flex; justify-content: space-between; gap: 12px; padding: 15px 42px 16px; font-size: clamp(12px, .75vw, 18px); font-weight: 400; }
@media (max-width: 524px) { .home-site-footer__box { margin-top: 72px; padding: 24px 18px; } .footer-content { flex-direction: column; align-items: center; text-align: center; } .footer-content__list { flex-direction: column; gap: 16px; } .footer-content__socials { align-self: center; align-items: center; } .home-site-footer__copyright-container { padding: 22px 18px; flex-direction: column; text-align: center; } }

/* ── subpages ── */
.page { background: var(--purple); color: var(--cream); min-height: 100vh; }
.page .page-hero { padding: clamp(140px, 22vh, 220px) 20px clamp(48px, 8vh, 96px); text-align: center; }
.page .page-hero h1 { font-size: clamp(56px, 10vw, 180px); line-height: .92; text-transform: uppercase; color: var(--cream); }
.page .page-hero p { max-width: 60ch; margin: 24px auto 0; font-size: clamp(17px, 1.4vw, 22px); font-weight: 700; }
.page .band { padding: clamp(48px, 7vw, 110px) 20px; }
.page .band--cream { background: var(--cream-2); color: var(--ink); }
.page .band--blue { background: var(--blue); }
.page .band--yellow { background: var(--yellow); color: var(--ink); }
.page .inner { max-width: 1180px; margin: 0 auto; }
.page h2.headline { font-size: clamp(40px, 6vw, 96px); line-height: .95; text-transform: uppercase; }
.page .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 36px; }
.page .tile-card { background: var(--cream); color: var(--ink); border-radius: 28px; padding: 28px; box-shadow: 0 8px 0 0 rgba(0,0,0,.18); transform: rotate(-1deg); transition: transform .35s; }
.page .tile-card:nth-child(even) { transform: rotate(1.2deg); }
.page .tile-card:hover { transform: rotate(0); }
.page .tile-card .k { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); font-weight: 900; }
.page .tile-card h3 { font-family: var(--font-head); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; text-transform: uppercase; margin: 8px 0 10px; }
.page .tile-card p { font-weight: 600; }
.page .art-frame { border-radius: 36px; overflow: hidden; box-shadow: 0 12px 0 0 rgba(0,0,0,.2); margin-top: 36px; position: relative; aspect-ratio: 2.39/1; background: var(--purple-deep); }
.page .art-frame img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.page .art-frame img.art { position: absolute; inset: 8% 6%; width: 88%; height: 84%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.page .badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.page .badges img { display: block; width: auto; }
.page .badges img[src$=".png"] { margin: -12px -10px; }
.page .lede-sm { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; opacity: .8; }

/* ── footer additions (2026-10): richer columns, Follow us + store badges, legal notice, legal strip in the dark bar ── */
.footer-content__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; align-self: flex-start; }
.footer-content__socials { align-self: auto; margin-bottom: 0; }
.footer-content__socials__wrapper a { border-radius: 10px; }
.footer-content__socials__wrapper a:hover { background: var(--ink); color: var(--yellow); }
.footer-content__store { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.footer-content__store__wrapper { display: flex; gap: 10px; align-items: center; }
.footer-content__store__wrapper img { height: clamp(36px, 2.6vw, 48px); width: auto; display: block; border-radius: 7px; transition: transform .2s ease; }
.footer-content__store__wrapper a:hover img { transform: translateY(-3px); }
.footer-content__list > li > a:hover { text-decoration: underline; }
.footer-content__notice { margin: 26px 0 0; max-width: 72ch; font-size: clamp(11px, .7vw, 15px); line-height: 1.5; font-weight: 600; color: var(--ink); opacity: .72; }
.home-site-footer__copyright-container { align-items: center; flex-wrap: wrap; }
.home-site-footer__legal { display: flex; gap: 18px; margin: 0; }
.home-site-footer__legal a { color: var(--cream); opacity: .85; } .home-site-footer__legal a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 767.98px) {
  .footer-content__aside { align-items: center; align-self: center; }
  .footer-content__store { align-items: center; }
  .footer-content__notice { text-align: center; margin-left: auto; margin-right: auto; }
  .home-site-footer__copyright-container { justify-content: center; text-align: center; }
  .home-site-footer__legal { justify-content: center; flex-wrap: wrap; gap: 12px 16px; }
}
/* the homepage engine's blanket `.hp-container img/svg { width:100%; height:100%; pointer-events:none }` must not reach the footer */
.home-site-footer .footer-content__store__wrapper img { height: clamp(36px, 2.6vw, 48px); width: auto; pointer-events: auto; }
.home-site-footer .footer-content__socials__wrapper svg { width: 18px; height: 18px; pointer-events: none; }
.home-site-footer a, .home-site-footer img { pointer-events: auto; }
/* the crew (rate-us art) leans ON the cream slab: big, bottom-left, following the slant. The footer is an isolated
   stacking context; the slab is the box's ::after at z -1, so the crew at z -2 paints BEHIND the slab (its lower
   part sinks under the cream edge) yet above the footer's own background. */
.home-site-footer { padding-top: clamp(220px, 24vw, 420px); overflow: hidden; }
.home-site-footer__box { position: relative; }
.home-site-footer .home-site-footer__crew, .hp-container .home-site-footer img.home-site-footer__crew { position: absolute; left: clamp(0px, 2vw, 40px); bottom: calc(100% - 56px); width: clamp(460px, 52vw, 1000px); height: auto; z-index: -2; pointer-events: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.2)); }
@media (max-width: 767.98px) { .home-site-footer { padding-top: 210px; } .home-site-footer .home-site-footer__crew { left: 50%; transform: translateX(-50%); width: min(98vw, 540px); bottom: calc(100% - 36px); } }
/* on the homepage the band IS the end scene (purple already), so the footer needs less of its own headroom */
.hp-container .home-site-footer { padding-top: clamp(140px, 16vw, 260px); }