@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700;800;900&display=swap");

:root { --font-ui: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Bebas Neue", Impact, "Arial Narrow", "Segoe UI", sans-serif; --ink: #f8fbff; --muted: #b7c2d8; --panel: rgba(11, 13, 28, 0.82); --line: rgba(255, 255, 255, 0.16); --cyan: #00d8ff; --pink: #ff2bbf; --yellow: #ffd028; --green: #54ff35; --red: #ff245d; --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0px; color: var(--ink); font-family: var(--font-ui); background: radial-gradient(circle at 15% 10%, rgba(255, 43, 191, 0.2), transparent 24rem), radial-gradient(circle at 85% 8%, rgba(0, 216, 255, 0.2), transparent 26rem), radial-gradient(circle at 70% 70%, rgba(84, 255, 53, 0.13), transparent 24rem), rgb(5, 6, 17); }

body::before { position: fixed; inset: 0px; z-index: -1; content: ""; opacity: 0.35; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(black, transparent 75%); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.site-header { position: sticky; top: 0px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem clamp(1rem, 4vw, 4rem); background: rgba(5, 6, 17, 0.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }

.brand, .main-nav, .hero-actions, .footer-actions { display: flex; align-items: center; }

.brand { gap: 0.65rem; }

.brand-mark { display: grid; place-items: center; width: 3.4rem; height: 3rem; color: rgb(5, 6, 17); font-weight: 950; overflow: hidden; background: rgb(26, 15, 8); border-radius: 0.5rem; border: 1px solid rgba(242, 118, 32, 0.5); box-shadow: rgba(242, 118, 32, 0.3) 0px 0px 22px; }

.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; }

.brand strong, .brand small { display: block; }

.brand strong { font-family: var(--font-display); font-weight: 900; }

.brand small { margin-top: 0.12rem; color: var(--muted); font-size: 0.78rem; }

.main-nav { gap: clamp(0.8rem, 2vw, 1.8rem); color: var(--muted); font-size: 0.95rem; font-weight: 800; }

.language-switch { display: grid; grid-template-columns: repeat(2, 2.2rem); flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(0, 216, 255, 0.34); border-radius: 0.4rem; }

.language-switch a { display: grid; place-items: center; min-height: 2.2rem; color: var(--muted); font-size: 0.78rem; font-weight: 900; }

.language-switch a.is-active { color: rgb(5, 6, 17); background: var(--cyan); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0px, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: calc(-5rem + 100vh); padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 5rem) 3rem; overflow: hidden; background: linear-gradient(90deg, rgba(5, 6, 17, 0.02), rgba(5, 6, 17, 0.22) 44%, rgba(5, 6, 17, 0.76)), linear-gradient(rgba(5, 6, 17, 0.02), rgba(5, 6, 17, 0.16) 54%, rgb(5, 6, 17) 98%), url("assets/the-outsider-radio-nerd-bg.png") center center / cover no-repeat; }

.hero::after { position: absolute; inset: auto 0px 0px; height: 9rem; content: ""; background: linear-gradient(transparent, rgb(5, 6, 17)); pointer-events: none; }

.hero-copy { position: relative; z-index: 1; max-width: 46rem; padding-top: clamp(14rem, 30vw, 22rem); }

.eyebrow { margin: 0px 0px 0.8rem; color: var(--cyan); font-size: 0.82rem; font-weight: 900; letter-spacing: 0px; text-transform: uppercase; }

h1, h2, h3, p { overflow-wrap: anywhere; }

.wordmark { margin: 0px; font-family: var(--font-display); line-height: 0.84; letter-spacing: 0.03em; filter: drop-shadow(rgba(0, 216, 255, 0.42) 0px 0px 14px) drop-shadow(rgba(255, 43, 191, 0.36) 0px 0px 26px); }

.wordmark span, .wordmark strong { display: block; width: fit-content; text-transform: uppercase; }

.wordmark span { margin-left: 0.25rem; color: var(--cyan); font-size: clamp(1.4rem, 3.8vw, 3rem); font-weight: 950; text-shadow: rgba(0, 216, 255, 0.9) 0px 0px 10px, rgba(255, 43, 191, 0.45) 0px 0px 18px; }

.wordmark strong { color: rgb(5, 6, 17); font-size: clamp(4.4rem, 12.5vw, 9.8rem); font-weight: 950; letter-spacing: 0.01em; -webkit-text-stroke: clamp(0.08rem, 0.35vw, 0.2rem) rgb(255, 208, 40); text-shadow: rgba(255, 208, 40, 0.95) 0px 0px 0.22em, rgba(255, 43, 191, 0.82) 0px 0px 0.42em, rgba(0, 216, 255, 0.55) 0px 0px 0.7em, rgb(255, 43, 191) 0.06em 0.06em 0px, rgb(0, 216, 255) -0.035em -0.035em 0px; }

h2 { margin: 0px; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 900; line-height: 0.96; letter-spacing: 0.02em; }

h3 { margin: 0px; font-family: var(--font-display); font-size: 1.85rem; font-weight: 900; line-height: 0.98; letter-spacing: 0.02em; }

.tagline { margin: 0px; color: var(--cyan); font-size: clamp(1.3rem, 3vw, 2.5rem); font-style: italic; font-weight: 500; text-shadow: rgba(0, 216, 255, 0.55) 0px 0px 18px; }

.hero-text { max-width: 42rem; margin: 1.35rem 0px 0px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; }

.hero-text strong { color: white; }

.hero-actions { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0.88rem 1.2rem; border: 1px solid transparent; border-radius: 0.45rem; font-weight: 900; text-align: center; }

.primary { color: rgb(5, 6, 17); background: linear-gradient(135deg, var(--yellow), var(--pink)); box-shadow: rgba(255, 43, 191, 0.34) 0px 0px 24px; }

.secondary { color: var(--cyan); background: rgba(255, 255, 255, 0.06); border-color: rgba(0, 216, 255, 0.38); }

.audio-toggle { color: white; background: rgba(255, 43, 191, 0.16); border-color: rgba(255, 43, 191, 0.52); }

.audio-toggle.is-playing { color: rgb(5, 6, 17); background: linear-gradient(135deg, var(--green), var(--cyan)); border-color: transparent; }

.audio-toggle-fixed { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; min-width: 7rem; min-height: 2.8rem; padding: 0.72rem 1rem; color: white; font: inherit; font-weight: 900; background: rgba(5, 6, 17, 0.92); border: 1px solid rgba(255, 43, 191, 0.52); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.4) 0 12px 34px; cursor: pointer; }

.is-page-loading main { opacity: 0.55; pointer-events: none; }

main { transition: opacity 160ms ease; }

.partner-section { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; background: linear-gradient(135deg, rgba(0, 216, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(255, 255, 255, 0.03); }

.partner-copy { max-width: none; }

.partner-copy p { color: var(--muted); line-height: 1.55; }

.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1rem; margin-top: 1.4rem; }

.city-card { display: grid; gap: 0.55rem; min-height: 10rem; padding: 1rem; background: rgba(5, 6, 17, 0.74); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.22) 0px 14px 36px; }

.city-logo { display: block; width: 100%; max-height: 5.8rem; object-fit: contain; padding: 0.45rem; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0.45rem; }

.city-card strong { font-size: 1.15rem; }

.city-card span { width: fit-content; padding: 0.36rem 0.58rem; color: rgb(5, 6, 17); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; background: var(--green); border-radius: 999px; }

.city-card.is-coming span { background: var(--yellow); }

.city-card p { margin: 0px; color: var(--muted); line-height: 1.45; }

.guest-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.1rem 0px 1.3rem; }

.guest-strip span, .guest-chip { padding: 0.58rem 0.75rem; color: white; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 850; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 216, 255, 0.28); border-radius: 999px; }

.guest-chip { cursor: pointer; }

.guest-chip:hover { border-color: rgba(255, 43, 191, 0.72); }

.bio-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(30rem, 34rem); grid-template-columns: none; gap: 0.85rem; width: calc(-2rem + 100vw); margin: -0.2rem 0px 1.3rem; overflow-x: auto; padding-bottom: 0.5rem; }

.bio-panel { position: relative; display: grid; gap: 0.75rem; align-content: start; margin: 0px; padding: 1rem; overflow-wrap: normal; background: rgba(5, 6, 17, 0.72); border: 1px solid rgba(255, 43, 191, 0.3); border-radius: 0.5rem; }

.bio-panel[hidden] { display: none; }

.bio-panel h3, .bio-panel p { margin: 0px; }

.bio-panel p { color: var(--muted); line-height: 1.55; overflow-wrap: normal; }

.bio-close { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: white; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 900; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }

.partner-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.partner-poster { margin: 0px; }

.partner-poster img { width: 100%; max-height: 24rem; object-fit: contain; background: white; border: 1px solid rgba(0, 216, 255, 0.32); border-radius: 0.5rem; box-shadow: var(--shadow); }

.broadcast-band { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 0px clamp(1rem, 5vw, 5rem); padding: clamp(1.3rem, 4vw, 2.2rem); background: linear-gradient(135deg, rgba(0, 216, 255, 0.14), rgba(255, 43, 191, 0.14)); border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: var(--shadow); }

.radio-card { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.85rem; }

.radio-card img { width: 5.6rem; height: 5.6rem; object-fit: contain; border-radius: 1rem; box-shadow: rgba(0, 216, 255, 0.24) 0px 0px 22px; }

.app-note { display: inline-flex; align-items: center; min-height: 3.1rem; padding: 0.78rem 1rem; color: var(--cyan); font-weight: 850; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 216, 255, 0.38); border-radius: 0.45rem; }

.broadcast-band p, .section-heading p { color: var(--muted); line-height: 1.5; }

.venue-line { margin-bottom: 0px; font-weight: 750; }

.venue-line a, .site-footer a:not(.button) { color: var(--cyan); text-decoration: underline; text-underline-offset: 0.18rem; }

.manifesto-section { padding: clamp(2.4rem, 6vw, 4.5rem) 0px; }

.manifesto-inner { max-width: none; margin: 0px auto; padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 5vw, 5rem); background: linear-gradient(135deg, rgba(255, 43, 191, 0.11), rgba(0, 216, 255, 0.08)), rgba(5, 6, 17, 0.82); border-block: 1px solid rgba(255, 255, 255, 0.16); border-inline: 0px; border-radius: 0px; box-shadow: var(--shadow); }

.manifesto-inner h2 { max-width: 28ch; }

.manifesto-copy { column-count: 3; column-gap: clamp(1.4rem, 4vw, 3rem); margin-top: 1.5rem; color: var(--muted); font-size: clamp(0.98rem, 1.35vw, 1.12rem); line-height: 1.55; }

.manifesto-copy p { margin: 0px 0px 1rem; break-inside: avoid; }

.heart-section { display: grid; grid-template-columns: minmax(13rem, 0.35fr) minmax(0px, 1fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; margin: 0px clamp(1rem, 5vw, 5rem); padding: clamp(1.4rem, 4vw, 2.4rem); background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 216, 255, 0.06)), rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.5rem; box-shadow: var(--shadow); }

.heart-logo { margin: 0px; justify-self: center; }

.heart-logo img { width: min(100%, 15rem); background: white; border-radius: 0.5rem; box-shadow: rgba(0, 216, 255, 0.18) 0px 0px 30px; }

.heart-copy { max-width: 54rem; }

.heart-copy h2 { max-width: 18ch; }

.heart-copy p { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.6; }

.heart-copy strong { color: white; }

.section { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); }

.section-heading { max-width: 52rem; margin-bottom: 1.6rem; }

.magazine-section { background: linear-gradient(rgba(255, 43, 191, 0.08), rgba(0, 216, 255, 0.05)), rgba(255, 255, 255, 0.02); border-block: 1px solid rgba(255, 255, 255, 0.1); }

.magazine-heading { max-width: 58rem; }

.magazine-visual { margin: 0px 0px 1.2rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.32) 0px 22px 54px; }

.magazine-visual img { width: 100%; max-height: 26rem; object-fit: cover; object-position: center center; }

.magazine-grid { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 1rem; align-items: stretch; }

.magazine-feature, .magazine-card { display: grid; align-content: start; gap: 1rem; min-height: 18rem; padding: 1.25rem; background: rgba(5, 6, 17, 0.78); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.magazine-feature { background: linear-gradient(135deg, rgba(255, 208, 40, 0.16), rgba(255, 43, 191, 0.13)), rgba(5, 6, 17, 0.84); border-color: rgba(255, 208, 40, 0.46); }

.magazine-card:nth-child(2) { border-color: rgba(84, 255, 53, 0.42); }

.magazine-card:nth-child(3) { border-color: rgba(255, 43, 191, 0.46); }

.magazine-card:nth-child(4) { border-color: rgba(0, 216, 255, 0.42); }

.magazine-card { transition: transform 180ms, border-color 180ms, background 180ms; }

.magazine-card:hover { transform: translateY(-0.18rem); background: rgba(11, 13, 28, 0.9); border-color: rgba(0, 216, 255, 0.65); }

.magazine-feature h3, .magazine-card h3 { font-size: clamp(1.35rem, 2vw, 2rem); }

.magazine-feature p, .magazine-card p { margin: 0px; color: var(--muted); line-height: 1.55; }

.magazine-kicker { width: fit-content; padding: 0.42rem 0.65rem; color: var(--cyan); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; background: rgba(0, 216, 255, 0.08); border: 1px solid rgba(0, 216, 255, 0.32); border-radius: 999px; }

.text-link { width: fit-content; color: var(--yellow); font-weight: 900; text-decoration: underline; text-underline-offset: 0.18rem; }

.page-hero { min-height: 28rem; padding: clamp(7rem, 12vw, 10rem) clamp(1rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem); background: linear-gradient(90deg, rgba(5, 6, 17, 0.14), rgba(5, 6, 17, 0.72) 48%, rgba(5, 6, 17, 0.94)), linear-gradient(rgba(5, 6, 17, 0.1), rgb(5, 6, 17)); border-bottom: 1px solid var(--line); }

.page-hero > * { position: relative; z-index: 1; }

.page-hero h1 { width: fit-content; max-width: 13ch; margin: 0px; color: rgb(5, 6, 17); font-family: var(--font-display); font-size: clamp(3.8rem, 9.5vw, 8.2rem); font-weight: 950; line-height: 0.86; letter-spacing: 0.03em; -webkit-text-stroke: clamp(0.06rem, 0.2vw, 0.14rem) rgb(255, 208, 40); text-shadow: rgba(0, 0, 0, 0.9) 0px 5px 24px, rgba(255, 208, 40, 0.7) 0px 0px 18px, rgba(255, 43, 191, 0.46) 0px 0px 28px; text-transform: uppercase; }

.page-hero p:not(.eyebrow) { max-width: 52rem; margin: 1.25rem 0px 0px; color: rgb(236, 242, 255); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.55; text-shadow: rgba(0, 0, 0, 0.9) 0px 2px 14px; }

.retro-page-hero .eyebrow,
.game-page-hero .eyebrow,
.nerd-page-hero .eyebrow,
.indie-page-hero .eyebrow { display: inline-flex; width: fit-content; padding: 0.42rem 0.65rem; color: rgb(5, 6, 17); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; background: var(--yellow); border-radius: 999px; text-shadow: none; }

.game-page-hero .eyebrow,
.indie-page-hero .eyebrow { background: var(--green); }

.nerd-page-hero .eyebrow { background: var(--pink); }

.magazine-page-hero { background: linear-gradient(90deg, rgba(5, 6, 17, 0.22), rgba(5, 6, 17, 0.76) 48%, rgba(5, 6, 17, 0.96)), url("assets/the-outsider-magazine-editorial.png") center center / cover no-repeat; }

.retro-page-hero { background: url("assets/rubrica-cartoni-title-bg.png") center center / cover no-repeat; }

.game-page-hero { background: url("assets/rubrica-game-title-bg.png") center center / cover no-repeat; }

.nerd-page-hero { background: url("assets/rubrica-nerd-title-bg.png") center center / cover no-repeat; }

.indie-page-hero { background: linear-gradient(90deg, rgba(5, 6, 17, 0.24), rgba(5, 6, 17, 0.78) 48%, rgba(5, 6, 17, 0.96)), url("assets/milano-indies-general.png") center center / cover no-repeat; }

.submit-page-hero { background: linear-gradient(90deg, rgba(5, 6, 17, 0.26), rgba(5, 6, 17, 0.9)), radial-gradient(circle at 20% 20%, rgba(255, 43, 191, 0.32), transparent 28rem), radial-gradient(circle at 82% 24%, rgba(0, 216, 255, 0.28), transparent 24rem), rgb(5, 6, 17); }

.rubric-image-hero { min-height: clamp(14rem, 32vw, 24rem); padding: 0px; background-size: cover; background-position: center center; }

.rubric-image-hero > * { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }

.editorial-layout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(18rem, 0.34fr); gap: 1rem; align-items: start; }

.editorial-main, .editorial-aside, .article-teaser { background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.editorial-main { padding: clamp(1.2rem, 3vw, 2rem); }

.editorial-main h2 { max-width: 18ch; }

.editorial-main p:not(.eyebrow), .editorial-aside li, .article-teaser p { color: var(--muted); line-height: 1.6; }

.editorial-main p:last-child { margin-bottom: 0px; }

.editorial-aside { padding: 1.2rem; border-color: rgba(0, 216, 255, 0.34); }

.editorial-aside h3 { margin-bottom: 0.9rem; }

.feature-list { display: grid; gap: 0.75rem; margin: 0px; padding-left: 1.1rem; }

.article-board { padding-top: 0px; }

.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1rem; }

.article-teaser { display: grid; gap: 0.75rem; align-content: start; min-height: 14rem; padding: 1.2rem; }

.article-teaser span { width: fit-content; padding: 0.4rem 0.62rem; color: var(--cyan); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; background: rgba(0, 216, 255, 0.08); border: 1px solid rgba(0, 216, 255, 0.32); border-radius: 999px; }

.article-teaser p { margin: 0px; }

.article-teaser h3 a { color: inherit; }

.article-badge-link { width: fit-content; padding: 0.4rem 0.62rem; color: var(--cyan); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; background: rgba(0, 216, 255, 0.08); border: 1px solid rgba(0, 216, 255, 0.32); border-radius: 999px; }

.featured-special { border-color: rgba(255, 217, 61, 0.46); }

.robottoni-hero { min-height: clamp(24rem, 62vw, 42rem); align-items: end; background: linear-gradient(90deg, rgba(5, 6, 17, 0.9), rgba(5, 6, 17, 0.16) 62%), linear-gradient(0deg, rgba(5, 6, 17, 0.92), transparent 55%), url("assets/speciale-robottoni-hero-hd.png") center center / cover no-repeat; }

.robottoni-hero > div { max-width: 48rem; }

.robottoni-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr); gap: 1rem; align-items: stretch; }

.robottoni-poster { min-height: 26rem; margin: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; }

.robottoni-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

.category-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }

.category-nav a { padding: 0.55rem 0.72rem; color: white; font-weight: 850; background: rgba(0, 216, 255, 0.08); border: 1px solid rgba(0, 216, 255, 0.3); border-radius: 0.4rem; }

.robot-search-band { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; gap: 0.8rem; align-items: center; padding-top: 0; }

.robot-search-band label { color: white; font-weight: 900; }

.robot-search-band input { min-height: 3rem; padding: 0.75rem 0.9rem; color: white; font: inherit; background: rgba(5, 6, 17, 0.82); border: 1px solid rgba(0, 216, 255, 0.36); border-radius: 0.45rem; }

.robot-search-band p { margin: 0; color: var(--muted); }

.robot-category { padding-top: 1rem; scroll-margin-top: 6rem; }

.robot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }

.robot-card { min-width: 0; background: rgba(5, 6, 17, 0.76); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.24) 0 12px 32px; }

.robot-card[hidden], .robot-category[hidden] { display: none; }

.robot-card summary { display: grid; gap: 0.55rem; min-height: 7.2rem; padding: 1rem; list-style: none; cursor: pointer; }

.robot-card summary::-webkit-details-marker { display: none; }

.robot-card summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; color: var(--cyan); font-size: 1.5rem; font-weight: 900; }

.robot-card[open] summary::after { content: "-"; }

.robot-card summary span { width: fit-content; color: var(--yellow); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }

.robot-card summary strong { color: white; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0; }

.robot-card p { margin: 0; padding: 0 1rem 1rem; color: var(--muted); line-height: 1.58; }

.robot-community { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 2rem; background: rgba(255, 43, 191, 0.08); border-block: 1px solid rgba(255, 43, 191, 0.24); }

.robot-community h2, .robot-community p { margin-bottom: 0; }

.dubbing-hero { min-height: clamp(24rem, 58vw, 40rem); align-items: end; background: linear-gradient(90deg, rgba(5, 6, 17, 0.92), rgba(5, 6, 17, 0.28) 62%), linear-gradient(0deg, rgba(5, 6, 17, 0.94), transparent 58%), url("assets/the-outsider-radio-nerd-bg.png") center center / cover no-repeat; }

.dubbing-hero > div { max-width: 50rem; }

.dubbing-search-band { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; gap: 0.8rem; align-items: center; padding-top: 0; }

.dubbing-search-band label { color: white; font-weight: 900; }

.dubbing-search-band input { min-height: 3rem; padding: 0.75rem 0.9rem; color: white; font: inherit; background: rgba(5, 6, 17, 0.82); border: 1px solid rgba(255, 43, 191, 0.38); border-radius: 0.45rem; }

.dubbing-search-band p { margin: 0; color: var(--muted); }

.dubbing-category { padding-top: 1rem; scroll-margin-top: 6rem; }

.dubbing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }

.dubbing-card { min-width: 0; background: rgba(5, 6, 17, 0.76); border: 1px solid rgba(255, 43, 191, 0.22); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.24) 0 12px 32px; }

.dubbing-card[hidden], .dubbing-category[hidden] { display: none; }

.dubbing-card summary { display: grid; gap: 0.55rem; min-height: 7.2rem; padding: 1rem; list-style: none; cursor: pointer; }

.dubbing-card summary::-webkit-details-marker { display: none; }

.dubbing-card summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; color: var(--pink); font-size: 1.5rem; font-weight: 900; }

.dubbing-card[open] summary::after { content: "-"; }

.dubbing-card summary span { width: fit-content; color: var(--cyan); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }

.dubbing-card summary strong { color: white; font-family: var(--font-display); font-size: 1.28rem; letter-spacing: 0; }

.dubbing-card p { margin: 0; padding: 0 1rem 1rem; color: var(--muted); line-height: 1.58; }

.memory-hero { min-height: clamp(24rem, 58vw, 40rem); align-items: end; background: linear-gradient(90deg, rgba(5, 6, 17, 0.9), rgba(5, 6, 17, 0.2) 62%), linear-gradient(0deg, rgba(5, 6, 17, 0.94), transparent 58%), url("assets/banner-80s-90s.png") center center / cover no-repeat; }

.memory-hero > div { max-width: 52rem; }

.memory-search-band { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; gap: 0.8rem; align-items: center; padding-top: 0; }

.memory-search-band label { color: white; font-weight: 900; }

.memory-search-band input { min-height: 3rem; padding: 0.75rem 0.9rem; color: white; font: inherit; background: rgba(5, 6, 17, 0.82); border: 1px solid rgba(255, 217, 61, 0.4); border-radius: 0.45rem; }

.memory-search-band p { margin: 0; color: var(--muted); }

.memory-category { padding-top: 1rem; scroll-margin-top: 6rem; }

.memory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }

.memory-card { min-width: 0; background: rgba(5, 6, 17, 0.76); border: 1px solid rgba(255, 217, 61, 0.24); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.24) 0 12px 32px; }

.memory-card[hidden], .memory-category[hidden] { display: none; }

.memory-card summary { display: grid; gap: 0.55rem; min-height: 7.2rem; padding: 1rem; list-style: none; cursor: pointer; }

.memory-card summary::-webkit-details-marker { display: none; }

.memory-card summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; color: var(--yellow); font-size: 1.5rem; font-weight: 900; }

.memory-card[open] summary::after { content: "-"; }

.memory-card summary span { width: fit-content; color: var(--pink); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }

.memory-card summary strong { color: white; font-family: var(--font-display); font-size: 1.28rem; letter-spacing: 0; }

.memory-card p { margin: 0; padding: 0 1rem 1rem; color: var(--muted); line-height: 1.58; }

@media (max-width: 880px) {
  .robottoni-intro { grid-template-columns: 1fr; }
  .robot-grid, .dubbing-grid, .memory-grid { grid-template-columns: 1fr 1fr; }
  .robot-search-band, .dubbing-search-band, .memory-search-band { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .robot-grid, .dubbing-grid, .memory-grid { grid-template-columns: 1fr; }
  .robottoni-poster { min-height: 22rem; }
  .robot-community { align-items: flex-start; flex-direction: column; }
}

.article-meta { font-size: 0.92rem; font-weight: 850; color: var(--cyan) !important; }

.admin-list { display: grid; gap: 1rem; }

.admin-submission { display: grid; gap: 0.75rem; padding: 1.2rem; background: var(--panel); border: 1px solid rgba(255, 43, 191, 0.28); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.admin-submission p { margin: 0px; color: var(--muted); line-height: 1.55; }

.admin-submission strong { color: white; }

.admin-submission form { margin: 0px; }

.submit-section { padding-top: 0px; }

.submit-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1rem; margin-top: 1rem; }

.submit-card { min-height: 10rem; padding: 1.2rem; background: var(--panel); border: 1px solid rgba(0, 216, 255, 0.3); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.submit-card strong { display: block; color: white; font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; }

.submit-card span { display: block; margin-top: 0.65rem; color: var(--muted); line-height: 1.55; }

.submit-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.submission-form { display: grid; gap: 1rem; margin-bottom: 1rem; padding: clamp(1rem, 3vw, 1.4rem); background: rgba(5, 6, 17, 0.78); border: 1px solid rgba(255, 43, 191, 0.28); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1rem; }

.submission-form label { display: grid; gap: 0.45rem; }

.submission-form label > span { color: white; font-weight: 900; }

.submission-form input, .submission-form select, .submission-form textarea { width: 100%; min-height: 3rem; color: var(--ink); font: inherit; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(0, 216, 255, 0.28); border-radius: 0.45rem; padding: 0.78rem 0.9rem; outline: none; }

.submission-form select { color: var(--ink); background-color: rgb(18, 22, 42); }

.submission-form select option { color: rgb(5, 6, 17); background-color: rgb(248, 251, 255); }

.submission-form textarea { resize: vertical; }

.submission-form input:focus, .submission-form select:focus, .submission-form textarea:focus { border-color: var(--cyan); box-shadow: rgba(0, 216, 255, 0.14) 0px 0px 0px 0.18rem; }

.submission-form input[name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.consent-row { grid-template-columns: auto minmax(0px, 1fr); align-items: start; }

.consent-row input { width: 1.1rem; min-height: 1.1rem; margin-top: 0.2rem; }

.consent-row span { color: var(--muted); line-height: 1.5; }

.form-status { display: grid; gap: 0.3rem; margin-bottom: 1rem; padding: 1rem; background: rgba(84, 255, 53, 0.12); border: 1px solid rgba(84, 255, 53, 0.36); border-radius: 0.5rem; }

.form-status[hidden] { display: none; }

.form-status strong { color: white; }

.form-status span { color: var(--muted); }

.form-status.is-error { background: rgba(255, 36, 93, 0.12); border-color: rgba(255, 36, 93, 0.4); }

.rubric-list, .sponsor-grid { display: grid; gap: 1rem; }

.sponsor-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }

.rubric-card, .sponsor-item { min-height: 18rem; padding: 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 48px; }

.rubric-card { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(0px, 1fr); gap: 0px; align-items: stretch; overflow: hidden; padding: 0px; }

.rubric-card p, .rubric-card strong, .sponsor-item span { color: var(--muted); line-height: 1.5; }

.rubric-card strong { display: block; color: white; }

.rubric-tag { width: fit-content; padding: 0.42rem 0.65rem; color: rgb(5, 6, 17); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; background: var(--yellow); border-radius: 999px; }

.rubric-content { display: grid; align-content: center; gap: 1rem; padding: 1.4rem; }

.rubric-visual { width: 100%; height: 100%; min-height: 16rem; border-right: 1px solid var(--line); }

.rubric-banner { object-fit: cover; object-position: center center; }

.rubric-placeholder { display: grid; place-items: center; min-height: 12rem; color: var(--yellow); font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 950; background: linear-gradient(135deg, rgba(255, 208, 40, 0.2), rgba(255, 36, 93, 0.14)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 0.08rem, transparent 0.08rem, transparent 0.45rem), rgb(17, 9, 17); text-shadow: rgba(255, 208, 40, 0.7) 0px 0px 18px, rgba(255, 36, 93, 0.5) 0px 0px 34px; }

.retro { border-color: rgba(255, 208, 40, 0.55); }

.game { border-color: rgba(84, 255, 53, 0.5); }

.game .rubric-tag { background: var(--green); }

.nerd { border-color: rgba(255, 43, 191, 0.55); }

.nerd .rubric-tag { background: var(--pink); }

.sponsor-section { background: rgba(255, 255, 255, 0.03); }

.sponsor-item { min-height: 10rem; }

.sponsor-item strong, .site-footer strong { display: block; color: white; font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; }

.sponsor-item span { display: block; margin-top: 0.6rem; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 5vw, 5rem); background: rgb(5, 6, 17); border-top: 1px solid var(--line); }

.site-footer p { margin: 0.35rem 0px 0px; color: var(--muted); }

.footer-actions { flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 920px) {
  .site-header { align-items: flex-start; flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 0.2rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .partner-section { grid-template-columns: 1fr; }
  .broadcast-band, .heart-section, .site-footer { display: grid; }
  .heart-section { grid-template-columns: 1fr; }
  .manifesto-copy { column-count: 2; }
  .bio-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; }
  .rubric-list, .sponsor-grid, .magazine-grid, .editorial-layout, .article-grid, .submit-grid, .form-grid, .city-grid { grid-template-columns: 1fr; }
  .rubric-card { grid-template-columns: 1fr; }
  .rubric-visual { border-right: 0px; border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .page-hero { min-height: 24rem; padding-top: 7rem; }
  .page-hero h1 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .main-nav { flex-wrap: wrap; gap: 0.55rem 0.85rem; overflow-x: visible; font-size: 0.86rem; }
  .brand-mark { width: 2.65rem; height: 2.65rem; }
  .wordmark strong { font-size: 3.3rem; }
  .manifesto-copy { column-count: 1; }
}