:root {
  --ink: #07150f;
  --acid: #d7ff43;
  --paper: #e7c27c;
  --bone: #f3e6c8;
  --rust: #a9462d;
  --signal: .48;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--bone); background: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--ink); background: var(--acid); }

.site-shell { position: relative; min-height: 100vh; background: var(--ink); }
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .16; background-image: repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,.32) 0 1px, transparent 1px 4px); background-size: 7px 7px; mix-blend-mode: soft-light; }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; min-height: 82px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(243,230,200,.28); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-eye { width: 24px; height: 15px; border: 1px solid var(--acid); border-radius: 80% 10%; transform: rotate(45deg); position: relative; }
.brand-eye::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--acid); left: 9px; top: 4px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--acid); }
.nav-buy { padding: 12px 18px; border: 1px solid var(--acid); color: var(--acid); }

.hero { position: relative; min-height: 900px; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 54% 46%; align-items: center; padding: 110px 5vw 70px; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(7,21,15,.96) 0%, rgba(7,21,15,.58) 48%, rgba(7,21,15,.2) 100%), url('./radio-jungle.webp') center / cover no-repeat; filter: saturate(calc(.75 + var(--signal) * .6)); transform: scale(1.03); transition: filter .4s ease; }
.hero::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; right: 10%; top: 18%; background: rgba(215,255,67,.12); box-shadow: 0 0 100px rgba(215,255,67,.11); z-index: -2; }
.hero-copy { position: relative; z-index: 2; max-width: 780px; }
.eyebrow { font-size: 11px; letter-spacing: .2em; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--paper); }
.eyebrow span { display: inline-block; width: 8px; height: 8px; background: var(--rust); border-radius: 50%; box-shadow: 0 0 0 5px rgba(169,70,45,.22); animation: blink 1.5s infinite; }
@keyframes blink { 50% { opacity: .3; } }
h1, h2, .footer-title { margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .82; }
h1 { font-size: clamp(76px, 9.4vw, 172px); margin-top: 38px; text-shadow: 3px 3px 0 rgba(7,21,15,.5); }
h1 em { color: var(--acid); font-style: normal; -webkit-text-stroke: 1px var(--acid); }
.lede { max-width: 480px; font-family: Georgia, serif; font-style: italic; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.45; color: var(--paper); margin: 28px 0; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.button, .ticker { border: 0; min-height: 58px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 36px; font-size: 12px; letter-spacing: .1em; font-weight: 900; cursor: pointer; }
.button-acid { color: var(--ink); background: var(--acid); box-shadow: 6px 6px 0 var(--rust); transition: transform .2s ease, box-shadow .2s ease; }
.button-acid:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--rust); }
.ticker { color: var(--paper); background: rgba(7,21,15,.56); border: 1px dashed rgba(231,194,124,.55); }

.cat-stage { position: relative; display: grid; place-items: center; align-self: center; z-index: 1; }
.cat-button { width: min(42vw, 640px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 49% 51% 47% 53%; overflow: hidden; background: var(--paper); cursor: pointer; box-shadow: 0 25px 90px rgba(0,0,0,.6), 0 0 0 2px var(--paper), 0 0 0 11px rgba(7,21,15,.8); transform: rotate(2deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .3s ease; position: relative; }
.cat-button:hover { transform: rotate(-1deg) scale(1.025); filter: saturate(1.12) contrast(1.03); }
.cat-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nose-target { position: absolute; left: 39%; top: 52%; width: 90px; height: 90px; display: grid; place-items: center; color: var(--acid); background: rgba(7,21,15,.83); border: 1px solid var(--acid); border-radius: 50%; font-size: 9px; letter-spacing: .12em; line-height: 1.3; opacity: 0; transform: scale(.5); transition: .25s ease; }
.cat-button:hover .nose-target { opacity: 1; transform: scale(1); }
.cat-caption { position: absolute; bottom: -44px; transform: rotate(-2deg); color: var(--paper); font: italic 14px Georgia, serif; }
.orbit { position: absolute; border: 1px solid rgba(215,255,67,.55); border-radius: 50%; z-index: -1; animation: orbit 14s linear infinite; }
.orbit::before { content: "вњ¦"; position: absolute; color: var(--acid); font-size: 26px; top: -14px; left: 50%; }
.orbit-one { width: 115%; height: 115%; }
.orbit-two { width: 135%; height: 78%; transform: rotate(61deg); animation-direction: reverse; animation-duration: 18s; }
@keyframes orbit { to { rotate: 360deg; } }
.broadcast-stamp { position: absolute; z-index: 5; right: 4.5vw; top: 108px; border: 1px solid var(--acid); color: var(--acid); padding: 10px 12px; transform: rotate(3deg); display: grid; text-align: center; font-size: 9px; letter-spacing: .17em; }
.broadcast-stamp span { background: var(--rust); color: var(--bone); padding: 4px; margin: -16px 15px 5px; }
.broadcast-stamp b { font-size: 15px; }
.broadcast-stamp small { margin-top: 5px; }
.scroll-note { position: absolute; bottom: 22px; right: 5vw; font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }

.section-index { font-size: 10px; letter-spacing: .25em; font-weight: 900; color: var(--rust); }
.tuner-section { position: relative; padding: 110px 6vw 130px; display: grid; grid-template-columns: 38% 62%; gap: 0 5vw; color: var(--ink); background: var(--paper); overflow: hidden; }
.tuner-section::after { content: "((((  •  ))))"; position: absolute; color: rgba(7,21,15,.08); font: 900 clamp(90px,16vw,250px) Impact,sans-serif; bottom: -60px; left: -20px; white-space: nowrap; }
.tuner-section > .section-index { grid-column: 1 / -1; margin-bottom: 55px; }
.tuner-copy h2 { font-size: clamp(68px,7vw,120px); }
.tuner-copy h2 i { color: var(--rust); font-style: normal; }
.tuner-copy p { font: italic 18px/1.5 Georgia,serif; max-width: 380px; margin-top: 30px; }
.radio-console { position: relative; z-index: 1; align-self: center; color: var(--bone); background: #101712; border: 2px solid var(--ink); box-shadow: 14px 14px 0 var(--rust); padding: 26px 30px 30px; }
.radio-console::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(231,194,124,.2); pointer-events: none; }
.radio-topline { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .18em; color: var(--paper); }
.live-light { display: flex; gap: 8px; align-items: center; }
.live-light i { width: 7px; height: 7px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 10px var(--acid); }
.radio-display { margin: 20px 0 26px; padding: 18px 22px; min-height: 126px; display: flex; align-items: center; justify-content: space-between; color: var(--acid); background: #09100b; border: 1px solid rgba(215,255,67,.25); box-shadow: inset 0 0 35px rgba(215,255,67,.04); }
.radio-display div { display: grid; gap: 7px; }
.radio-display small, .dial-label { font-size: 9px; letter-spacing: .2em; color: var(--paper); }
.radio-display strong { font: 900 24px Impact,sans-serif; letter-spacing: .12em; }
.radio-display > b { font: 400 clamp(45px,6vw,92px) Impact,sans-serif; letter-spacing: .03em; line-height: 1; }
.radio-display sup { font: 700 10px Arial,sans-serif; margin-left: 8px; }
.dial-label { display: block; margin-bottom: 12px; }
.frequency { width: 100%; appearance: none; height: 8px; background: linear-gradient(90deg, var(--rust), var(--acid)); border: 1px solid var(--paper); cursor: ew-resize; }
.frequency::-webkit-slider-thumb { appearance: none; width: 25px; height: 35px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--acid); }
.ticks { display: flex; justify-content: space-between; margin-top: 10px; color: var(--paper); font-size: 8px; letter-spacing: .1em; }
.radio-console blockquote { min-height: 44px; margin: 28px 0 0; padding-top: 22px; border-top: 1px dashed rgba(231,194,124,.3); color: var(--paper); font: italic 16px/1.45 Georgia,serif; }

.manifesto { min-height: 760px; display: grid; grid-template-columns: 43% 57%; background: var(--bone); color: var(--ink); }
.manifesto-art { position: relative; min-height: 700px; background: url('./radio-jungle.webp') 72% center / cover; display: grid; place-items: center; overflow: hidden; }
.manifesto-art::after { content: ""; position: absolute; inset: 0; background: rgba(169,70,45,.24); mix-blend-mode: color; }
.giant-eye { position: relative; z-index: 1; display: grid; place-items: center; width: 280px; height: 280px; color: var(--acid); border: 2px solid var(--acid); border-radius: 50%; font-size: 150px; text-shadow: 0 0 30px var(--acid); }
.manifesto-art p { position: absolute; z-index: 2; bottom: 35px; left: 35px; margin: 0; color: var(--acid); font: 900 24px/1 Impact,sans-serif; letter-spacing: .03em; transform: rotate(-3deg); }
.manifesto-copy { padding: 95px 7vw; display: flex; flex-direction: column; justify-content: center; }
.manifesto-copy h2 { font-size: clamp(64px,7vw,118px); margin: 48px 0 35px; }
.manifesto-copy h2 span { color: var(--rust); }
.manifesto-copy > p { max-width: 680px; font: 18px/1.65 Georgia,serif; }
.rules { margin-top: 50px; border-top: 2px solid var(--ink); }
.rules div { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--ink); align-items: center; }
.rules b { color: var(--rust); font-size: 11px; }
.rules span { font-size: 12px; font-weight: 900; letter-spacing: .12em; }

.ritual { padding: 120px 6vw; color: var(--bone); background: var(--rust); position: relative; overflow: hidden; }
.ritual::before { content: ""; position: absolute; width: 560px; height: 560px; border: 80px double rgba(7,21,15,.08); border-radius: 50%; right: -140px; top: -200px; }
.ritual .section-index { color: var(--ink); }
.ritual > h2 { margin-top: 45px; font-size: clamp(90px,13vw,210px); }
.ritual > h2 span { color: var(--acid); -webkit-text-stroke: 2px var(--ink); }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid rgba(243,230,200,.6); }
.ritual-grid article { display: grid; grid-template-columns: 65px 1fr; gap: 20px; padding: 28px 30px 40px 0; border-bottom: 1px solid rgba(243,230,200,.6); }
.ritual-grid article + article { border-left: 1px solid rgba(243,230,200,.6); padding-left: 30px; }
.ritual-grid article > b { display: grid; place-items: center; align-self: start; width: 42px; height: 42px; color: var(--ink); background: var(--acid); border-radius: 50%; }
.ritual-grid h3 { margin: 3px 0 14px; font: 900 18px Impact,sans-serif; letter-spacing: .05em; }
.ritual-grid p { margin: 0; font: italic 15px/1.5 Georgia,serif; color: var(--paper); }
.mega-buy { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 65px; padding: 22px 32px; background: var(--acid); color: var(--ink); font: 900 clamp(32px,5vw,76px) Impact,sans-serif; letter-spacing: -.02em; box-shadow: 11px 11px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.mega-buy:hover { transform: translate(5px,5px); box-shadow: 6px 6px 0 var(--ink); }
.mega-buy i { font-style: normal; font-family: Arial,sans-serif; }

footer { padding: 100px 6vw 28px; background: var(--ink); }
.footer-title { font-size: clamp(70px,11vw,170px); }
.footer-title span { color: var(--acid); }
.socials { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 70px; border-top: 1px solid rgba(243,230,200,.3); }
.socials a { display: grid; grid-template-columns: 50px 1fr auto; gap: 20px; align-items: center; padding: 25px 0; border-bottom: 1px solid rgba(243,230,200,.3); font-size: 11px; letter-spacing: .12em; transition: color .2s; }
.socials a + a { padding-left: 25px; border-left: 1px solid rgba(243,230,200,.3); }
.socials a:hover { color: var(--acid); }
.socials b { color: var(--acid); font: 900 25px Impact,sans-serif; }
.socials i { font-style: normal; font-size: 24px; margin-right: 20px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 25px; margin-top: 65px; color: rgba(243,230,200,.45); font-size: 8px; letter-spacing: .14em; }

.hijack { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; gap: 18px; padding: 30px; text-align: center; color: var(--ink); background: var(--acid); opacity: 0; pointer-events: none; clip-path: circle(0 at 73% 43%); transition: clip-path .6s cubic-bezier(.77,0,.18,1), opacity .1s .5s; }
.is-hijacked .hijack { opacity: 1; pointer-events: auto; clip-path: circle(150% at 73% 43%); transition: clip-path .7s cubic-bezier(.77,0,.18,1), opacity .1s; }
.hijack::before, .hijack::after { content: "MEOW MEOW MEOW MEOW MEOW"; position: absolute; left: -5%; right: -5%; color: var(--rust); font: 900 8vw Impact,sans-serif; white-space: nowrap; opacity: .18; transform: rotate(-7deg); }
.hijack::before { top: 5%; }.hijack::after { bottom: 5%; transform: rotate(6deg); }
.hijack button { position: absolute; right: 30px; top: 20px; border: 0; background: none; font-size: 60px; cursor: pointer; }
.hijack p { margin: 0; font-size: 11px; letter-spacing: .2em; font-weight: 900; }
.hijack strong { font: 900 clamp(70px,15vw,240px)/.8 Impact,sans-serif; letter-spacing: -.05em; }
.hijack span { font: italic 16px Georgia,serif; }

@media (max-width: 900px) {
  .nav { min-height: 70px; padding: 0 20px; }.nav-links a:not(.nav-buy) { display: none; }.nav-buy { padding: 10px 12px; }
  .hero { min-height: 980px; height: auto; grid-template-columns: 1fr; padding: 115px 22px 75px; align-content: start; }
  .hero-bg { background-position: 66% center; opacity: .75; }.hero-copy { z-index: 3; }.eyebrow { max-width: 280px; line-height: 1.5; }
  h1 { font-size: clamp(66px, 20vw, 110px); margin-top: 24px; }.lede { margin: 20px 0; }.button, .ticker { width: 100%; }
  .cat-stage { margin-top: -20px; justify-self: end; }.cat-button { width: min(86vw,520px); }.broadcast-stamp { top: 85px; right: 18px; }.scroll-note { display: none; }
  .tuner-section { padding: 85px 22px 100px; grid-template-columns: 1fr; }.tuner-section > .section-index { margin-bottom: 35px; }.tuner-copy p { margin-bottom: 45px; }.radio-console { padding: 22px 18px; box-shadow: 8px 8px 0 var(--rust); }.radio-display { padding: 14px; }.radio-display > b { font-size: clamp(40px,13vw,64px); }
  .manifesto { grid-template-columns: 1fr; }.manifesto-art { min-height: 500px; }.manifesto-copy { padding: 80px 22px; }.manifesto-copy h2 { margin-top: 35px; }
  .ritual { padding: 90px 22px; }.ritual-grid { grid-template-columns: 1fr; margin-top: 50px; }.ritual-grid article + article { border-left: 0; padding-left: 0; }.mega-buy { padding: 20px 18px; }
  footer { padding: 80px 22px 25px; }.socials { grid-template-columns: 1fr; }.socials a + a { padding-left: 0; border-left: 0; }.footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }