:root {
  --bg: #07070a;
  --bg-soft: #0d0d13;
  --surface: #111119;
  --surface-2: #171721;
  --surface-3: #20202c;
  --text: #f6f6f4;
  --muted: #aaaab7;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.2);
  --cyan: #00f0ea;
  --pink: #ff35ae;
  --acid: #c7ff2f;
  --orange: #ff6a00;
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --radius: 18px;
  --radius-lg: 28px;
  --shell: min(1220px, calc(100% - 40px));
  --header-h: 76px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; text-rendering: optimizeLegibility; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(circle at 12% 0%,rgba(0,240,234,.07),transparent 26rem),radial-gradient(circle at 92% 18%,rgba(255,53,174,.07),transparent 24rem); }
a { color: inherit; }
img { max-width: 100%; display: block; }
picture { display:block; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display:none !important; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:.75rem 1rem; z-index:9999; }
.skip-link:focus { left:1rem; top:1rem; }

.site-header { position:sticky; top:0; z-index:100; min-height:var(--header-h); border-bottom:1px solid transparent; background:rgba(7,7,10,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:border-color .2s ease, background .2s ease; }
.site-header.scrolled { border-color:var(--line); background:rgba(7,7,10,.94); }
.nav-wrap { min-height:var(--header-h); display:flex; align-items:center; gap:22px; }
.brand { width:184px; flex:0 0 auto; }
.brand img { width:100%; height:auto; }
.primary-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.primary-nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; color:#b7b7c2; padding:.55rem .62rem; border-radius:9px; font-size:.88rem; font-weight:800; }
.primary-nav a:hover, .primary-nav a.active, .primary-nav a[aria-current="page"] { color:#fff; background:#171721; }
.nav-toggle { display:none; min-width:48px; min-height:44px; border:1px solid var(--line-strong); background:#111119; color:#fff; border-radius:10px; font-weight:800; }

.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid transparent; border-radius:11px; padding:.82rem 1.05rem; text-decoration:none; background:var(--cyan); color:#001717; font-weight:950; letter-spacing:.01em; cursor:pointer; transition:transform .16s ease, filter .16s ease, border-color .16s ease; }
.button:hover { transform:translateY(-1px); filter:brightness(1.06); }
.button:focus-visible, .text-link:focus-visible, .primary-nav a:focus-visible { outline:3px solid rgba(0,240,234,.35); outline-offset:3px; }
.button-secondary { background:#111119; border-color:var(--line-strong); color:#fff; }
.button-pink { background:var(--pink); color:#fff; }
.button-small { min-height:40px; padding:.62rem .82rem; font-size:.84rem; }
.button[disabled] { opacity:.65; cursor:wait; transform:none; }
.text-link { color:var(--cyan); font-weight:900; text-decoration:none; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }

.eyebrow { margin:0 0 .7rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.14em; font-size:.73rem; font-weight:950; }
.kicker { color:var(--muted); font-size:.9rem; font-weight:800; }
.display { margin:.2rem 0 1.05rem; font-size:clamp(4rem,9vw,8.5rem); line-height:.82; letter-spacing:-.065em; text-transform:uppercase; font-weight:1000; }
.display .outline { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.7); }
.gradient-text { color:var(--cyan); }
.lead { max-width:790px; margin:0; color:#d6d6dd; font-size:clamp(1.05rem,1.9vw,1.35rem); }
.meta-line { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:22px; color:#c2c2cb; font-size:.85rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.meta-line span::before { content:"/"; color:var(--pink); margin-right:8px; }

.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid { min-height:min(830px,calc(100svh - var(--header-h))); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:clamp(34px,6vw,82px); align-items:center; padding:72px 0; }
.hero-copy { position:relative; z-index:2; }
.hero-art { position:relative; }
.hero-art::before { content:""; position:absolute; inset:-12px 18px 18px -12px; border:1px solid rgba(0,240,234,.35); border-radius:var(--radius-lg); }
.hero-art picture, .hero-art > img { position:relative; z-index:1; }
.hero-art img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.hero-stamp { position:absolute; z-index:3; right:-8px; bottom:20px; padding:.8rem 1rem; background:var(--acid); color:#0a0a0a; font-weight:1000; text-transform:uppercase; letter-spacing:.06em; transform:rotate(-3deg); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:34px; }
.hero-fact { border-top:2px solid var(--line-strong); padding-top:12px; }
.hero-fact strong { display:block; color:#fff; font-size:1.2rem; }
.hero-fact span { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }

.ticker { border-bottom:1px solid var(--line); background:#0b0b10; overflow:hidden; }
.ticker-inner { width:max-content; display:flex; gap:32px; padding:17px 0; animation:marquee 26s linear infinite; font-size:.82rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; color:#c9c9d0; }
.ticker b { color:var(--cyan); }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding:88px 0; content-visibility:auto; contain-intrinsic-size:1px 700px; }
.section-tight { padding:56px 0; }
.section-header { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.section-header > div { max-width:760px; }
.section-header h2, .prose h2, .epk-panel h2 { margin:.15rem 0 .6rem; font-size:clamp(2rem,4vw,4rem); line-height:.95; letter-spacing:-.045em; }
.section-header p { max-width:610px; margin:0; color:var(--muted); }
.rule-title { display:flex; align-items:center; gap:14px; }
.rule-title::after { content:""; height:1px; flex:1; background:var(--line); }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat { min-height:146px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:#0f0f16; }
.stat strong { display:block; font-size:clamp(2.3rem,4.5vw,4.4rem); line-height:.9; letter-spacing:-.05em; color:var(--cyan); }
.stat span { display:block; margin-top:14px; color:var(--muted); text-transform:uppercase; font-weight:900; letter-spacing:.09em; font-size:.72rem; }

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,70px); align-items:center; }
.split-media { min-width:0; }
.split-media img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.prose { max-width:760px; color:#d5d5dc; font-size:1.04rem; }
.prose p { margin:0 0 1.25rem; }
.prose strong { color:#fff; }
.prose blockquote { margin:1.8rem 0; padding:1rem 0 1rem 20px; border-left:3px solid var(--cyan); color:#fff; font-size:1.3rem; font-weight:800; }

.noodle-feature { min-height:430px; display:flex; align-items:flex-end; overflow:hidden; border:1px solid rgba(0,240,234,.32); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.9)),image-set(url('../img/optimized/noodle-drop-1200.webp') type('image/webp'),url('../img/noodle-drop.jpg') type('image/jpeg')) center/cover; }
.noodle-feature > div { width:min(760px,100%); padding:clamp(24px,5vw,46px); }
.noodle-feature h2 { margin:.2rem 0 .6rem; font-size:clamp(2.5rem,6vw,5.2rem); line-height:.9; letter-spacing:-.055em; }

.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#0f0f16; transition:transform .18s ease,border-color .18s ease; }
.card:hover { transform:translateY(-2px); border-color:rgba(0,240,234,.28); }
.card-media { display:block; aspect-ratio:1/1; overflow:hidden; background:#14141d; }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.card:hover .card-media img { transform:scale(1.02); }
.card-body { padding:20px; }
.card-meta { margin-bottom:7px; color:var(--cyan); font-size:.7rem; font-weight:950; text-transform:uppercase; letter-spacing:.11em; }
.card h3 { margin:.1rem 0 .45rem; font-size:1.22rem; line-height:1.15; }
.card p { margin:.5rem 0 1rem; color:var(--muted); }
.release-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.release-card .card-body { padding:16px; }
.release-card h3 { min-height:2.35em; font-size:1rem; }
.release-placeholder { height:100%; display:grid; place-items:center; background:#151520; color:var(--cyan); font-weight:1000; letter-spacing:.08em; }

.feature-product { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#0e0e14; }
.feature-product-media { min-height:520px; background:#15151d; }
.feature-product-media img { width:100%; height:100%; object-fit:cover; }
.feature-product-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,6vw,68px); }
.feature-product-copy h2 { margin:.15rem 0 .8rem; font-size:clamp(2.5rem,5vw,5.5rem); line-height:.9; letter-spacing:-.055em; }
.product-price { margin:18px 0; color:var(--acid); font-size:1.45rem; font-weight:1000; }
.product-badge { display:inline-flex; align-items:center; width:max-content; min-height:30px; padding:.35rem .55rem; border-radius:7px; background:#252533; color:#fff; font-size:.7rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; }
.product-badge.available { background:rgba(199,255,47,.12); color:var(--acid); }
.product-badge.coming_soon { background:rgba(255,106,0,.14); color:#ff9b50; }
.product-badge.sold_out { background:rgba(255,53,174,.12); color:#ff80c8; }
.merch-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
.filter-button { min-height:40px; border:1px solid var(--line); background:#101017; color:#c9c9d0; border-radius:999px; padding:.55rem .82rem; font-weight:850; cursor:pointer; }
.filter-button[aria-pressed="true"] { border-color:var(--cyan); color:#001717; background:var(--cyan); }
.merch-card { display:flex; flex-direction:column; }
.merch-card .card-body { display:flex; flex-direction:column; flex:1; }
.merch-card .merch-actions { display:flex; gap:8px; margin-top:auto; padding-top:10px; }
.merch-card .merch-actions .button { flex:1; }
.product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(30px,5vw,64px); align-items:start; }
.product-detail-media { position:sticky; top:calc(var(--header-h) + 22px); overflow:hidden; border-radius:var(--radius-lg); background:#13131b; border:1px solid var(--line); }
.product-detail-media img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.product-detail-copy { padding-top:14px; }
.product-detail-copy h1 { margin:.2rem 0 1rem; font-size:clamp(3rem,6vw,6.2rem); line-height:.88; letter-spacing:-.06em; }
.product-notes { margin:26px 0; padding:18px; border-left:3px solid var(--cyan); background:#101017; color:var(--muted); }

.event-list { display:grid; gap:10px; }
.event-row { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:20px; align-items:center; padding:20px; border:1px solid var(--line); border-radius:14px; background:#0f0f16; }
.event-date { color:var(--cyan); font-weight:1000; }
.event-row h3 { margin:0; }
.event-row p { margin:.25rem 0 0; color:var(--muted); }
.empty-state { padding:34px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:#0d0d13; color:var(--muted); }
.empty-state strong { color:#fff; }

.page-hero { padding:76px 0 48px; border-bottom:1px solid var(--line); }
.page-hero h1 { max-width:1000px; margin:.2rem 0 1rem; font-size:clamp(3.4rem,8vw,7.8rem); line-height:.84; letter-spacing:-.06em; text-transform:uppercase; }
.page-hero .lead { max-width:820px; }
.list-chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { border:1px solid var(--line); border-radius:999px; padding:.47rem .67rem; background:#101017; color:#d7d7dd; font-size:.81rem; }
.timeline { display:grid; gap:0; border-top:1px solid var(--line); }
.timeline-row { display:grid; grid-template-columns:180px 1fr; gap:30px; padding:28px 0; border-bottom:1px solid var(--line); }
.timeline-row strong { color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.timeline-row h3 { margin:0 0 .5rem; font-size:1.4rem; }
.timeline-row p { margin:0; color:var(--muted); }

.epk-panel { padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:#0f0f16; }
.epk-actions { display:flex; gap:9px; flex-wrap:wrap; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.gallery-item { grid-column:span 4; min-height:280px; margin:0; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:14px; background:#111118; }
.gallery-item:nth-child(5n+1) { grid-column:span 8; }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-caption { position:absolute; left:0; right:0; bottom:0; padding:35px 15px 14px; background:linear-gradient(transparent,rgba(0,0,0,.85)); font-weight:800; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field-full { grid-column:1/-1; }
label { font-weight:850; font-size:.87rem; }
input, textarea, select { width:100%; min-height:48px; border:1px solid var(--line-strong); background:#0b0b11; color:#fff; border-radius:10px; padding:.82rem .9rem; outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,240,234,.09); }
textarea { min-height:170px; resize:vertical; }
.form-help { margin-top:-2px; color:var(--muted); font-size:.8rem; }
.notice { border-radius:11px; padding:14px 15px; margin-bottom:18px; }
.notice-success { background:rgba(67,214,118,.1); border:1px solid rgba(67,214,118,.35); }
.notice-error { background:rgba(255,82,105,.1); border:1px solid rgba(255,82,105,.35); }

.site-footer { border-top:1px solid var(--line); background:#050507; padding:56px 0 calc(25px + env(safe-area-inset-bottom)); }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:42px; }
.footer-logo { width:210px; height:auto; margin-bottom:15px; }
.site-footer p { color:var(--muted); }
.site-footer h2 { margin-top:0; color:var(--cyan); font-size:.75rem; text-transform:uppercase; letter-spacing:.11em; }
.footer-links { display:grid; gap:8px; }
.footer-links a, .site-footer a { text-decoration:none; }
.footer-links a:hover, .site-footer a:hover { color:var(--cyan); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:38px; padding-top:20px; border-top:1px solid var(--line); color:#74747f; font-size:.78rem; }
.mobile-quickbar { display:none; }
.consent-banner { position:fixed; z-index:300; left:20px; right:20px; bottom:20px; width:min(760px,calc(100% - 40px)); margin:auto; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line-strong); border-radius:14px; background:#111119; box-shadow:var(--shadow); }
.consent-banner p { margin:.25rem 0 0; color:var(--muted); font-size:.86rem; }
.consent-actions { display:flex; gap:8px; flex:0 0 auto; }

@media (max-width: 1080px) {
  .nav-book { display:none; }
  .primary-nav a { padding:.52rem .44rem; font-size:.82rem; }
  .release-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 860px) {
  :root { --header-h:70px; --shell:min(100% - 30px,1220px); }
  .brand { width:165px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .primary-nav { display:none; position:absolute; top:calc(var(--header-h) - 1px); left:15px; right:15px; margin:0; padding:10px; flex-direction:column; align-items:stretch; gap:2px; background:#0d0d13; border:1px solid var(--line-strong); border-radius:0 0 14px 14px; box-shadow:var(--shadow); }
  .primary-nav.open { display:flex; }
  .primary-nav a { min-height:47px; padding:.7rem .8rem; font-size:.92rem; }
  body.nav-open { overflow:hidden; }
  .hero-grid { min-height:auto; grid-template-columns:1fr; padding:52px 0 64px; }
  .hero-art { width:min(660px,100%); }
  .hero-art::before { inset:-8px 10px 12px -8px; }
  .display { font-size:clamp(3.7rem,15vw,7rem); }
  .split, .feature-product, .product-detail { grid-template-columns:1fr; }
  .feature-product-media { min-height:auto; aspect-ratio:1/1; }
  .product-detail-media { position:static; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-row { grid-template-columns:1fr auto; }
  .event-date { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .gallery-item, .gallery-item:nth-child(5n+1) { grid-column:span 6; }
  .consent-banner { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 620px) {
  :root { --shell:min(100% - 22px,1220px); }
  body { padding-bottom:64px; }
  .section { padding:66px 0; }
  .section-tight { padding:44px 0; }
  .section-header { align-items:flex-start; flex-direction:column; gap:12px; }
  .hero-grid { padding:42px 0 52px; gap:35px; }
  .display { font-size:clamp(3.2rem,17vw,5rem); }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions .button { width:100%; }
  .hero-facts { grid-template-columns:1fr 1fr; }
  .hero-fact:last-child { grid-column:1/-1; }
  .hero-stamp { right:6px; bottom:12px; font-size:.72rem; }
  .stats-grid, .card-grid, .release-grid, .form-grid { grid-template-columns:1fr; }
  .stat { min-height:120px; }
  .field-full { grid-column:auto; }
  .noodle-feature { min-height:380px; }
  .merch-card .merch-actions { flex-direction:column; }
  .event-row { grid-template-columns:1fr; }
  .timeline-row { grid-template-columns:1fr; gap:8px; }
  .gallery-item, .gallery-item:nth-child(5n+1) { grid-column:1/-1; min-height:250px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .mobile-quickbar { position:fixed; z-index:200; left:0; right:0; bottom:0; display:grid; grid-template-columns:.8fr 1.2fr; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); background:rgba(7,7,10,.96); border-top:1px solid var(--line-strong); backdrop-filter:blur(12px); }
  .mobile-quickbar a { min-height:46px; display:grid; place-items:center; text-decoration:none; font-weight:950; border-radius:9px; }
  .mobile-quickbar a:first-child { color:#fff; }
  .mobile-quickbar a:last-child { background:var(--cyan); color:#001717; }
  .consent-banner { left:11px; right:11px; bottom:76px; width:auto; }
  .consent-actions { width:100%; display:grid; grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .ticker-inner { animation:none; }
}
