/* Super Studio Games. Copied to dist/style.css by build_pages.py; edit this file, not the copy.
   Based on the old Curiosity Kills site's style.css (the facility after dark: bone text, wordmark red, tile green, hazard
   yellow), with the studio pages added. Single dark theme on purpose. The Content Security Policy allows no inline styles,
   so every style lives here. */

/* Pixelify Sans: the game's sign font (SIL Open Font License, /assets/fonts/OFL.txt), self-hosted. Headings only. */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/PixelifySans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0b0d0c;
  --ink-2: #111513;
  --ink-3: #171c19;
  --line: #27302b;
  --bone: #efe6d2;
  --fog: #a9b1ac;
  --blood: #d03a31;
  --blood-deep: #6e1612;
  --tile: #3a9f82;
  --hazard: #e8b230;
  --discord: #5865f2;
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The invite code is never set in the pixel font: its 5 looks like S and its Z like 2. */
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --label: 700 13px/1.2 var(--body);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--body); font-size: 17px; line-height: 1.6; overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bone); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--hazard); color: #000; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* Pixel type for big titles only. No ligatures: the pixel font's "fl" glyph reads as "A". */
.px, h1, h2, h3, .fact b { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.4vw, 48px); text-shadow: 3px 3px 0 var(--blood-deep); }
h3 { font-size: 22px; }
p { margin: 0; }
.eyebrow { font: var(--label); letter-spacing: .16em; color: var(--hazard); text-transform: uppercase; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--bone); max-width: 62ch; }
.muted { color: var(--fog); }
.small { font-size: 14px; }

/* Studio bar */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11, 13, 12, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mark { width: 12px; height: 12px; flex: none; background: var(--hazard); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(232, 178, 48, .55), 0 0 14px rgba(232, 178, 48, .45); }
.brand-name { font: 800 15px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.brand-name span { color: var(--hazard); }
.nav .links { display: flex; gap: 20px; margin-left: auto; overflow-x: auto; scrollbar-width: none; white-space: nowrap; min-width: 0; }
.nav .links::-webkit-scrollbar { display: none; }
.nav .links a { text-decoration: none; color: var(--fog); font-size: 15px; padding: 6px 0; }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--bone); }
.nav .links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--hazard); }
@media (max-width: 760px) { .nav .links a.optional { display: none; } }
/* Phones: the header keeps the brand and two links; Discord is in every page body and the footer. */
@media (max-width: 430px) { .nav .wrap { gap: 12px; } .nav .links { gap: 14px; } .brand-name { font-size: 13px; letter-spacing: .1em; } .nav .btn.discord { display: none; } }

/* Game bar (Curiosity Kills pages) */
.subnav { background: var(--ink-2); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 22px; min-height: 52px; }
.game-brand { flex: none; }
.game-brand img { height: 22px; width: auto; }
.sublinks { display: flex; gap: 18px; margin-left: auto; overflow-x: auto; scrollbar-width: none; white-space: nowrap; min-width: 0; }
.sublinks::-webkit-scrollbar { display: none; }
.sublinks a { text-decoration: none; color: var(--fog); font-size: 14px; padding: 6px 0; }
.sublinks a:hover, .sublinks a[aria-current="page"] { color: var(--bone); }
@media (max-width: 640px) { .subnav .wrap { gap: 14px; } .game-brand img { height: 16px; } .sublinks { gap: 14px; padding-right: 24px;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 700; font-size: 16px; text-decoration: none; padding: 12px 18px 11px; border-radius: 4px; border: 2px solid var(--bone); color: var(--bone); background: transparent; }
.btn:hover { background: rgba(239, 230, 210, .08); }
.btn.primary { background: var(--hazard); border-color: var(--hazard); color: #15120a; }
.btn.primary:hover { background: #f3c450; border-color: #f3c450; }
.btn.discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn.discord:hover { filter: brightness(1.08); }
.btn.store { background: #fff; border-color: #fff; color: #1c2b33; }
.btn.store:hover { background: #e9edf2; border-color: #e9edf2; }
.btn.small { font-size: 14px; padding: 7px 12px 6px; flex: none; }
.btn img { height: 18px; width: auto; flex: none; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow-link { color: var(--hazard); font-weight: 700; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; }

/* ---------- Studio home ---------- */
.s-hero { position: relative; background: var(--ink); border-bottom: 1px solid var(--line); }
.s-hero picture { position: relative; display: block; }
.s-hero picture img { width: 100%; height: clamp(520px, 56.25vw, 880px); object-fit: cover; object-position: 50% 38%; }
/* Darken toward the text and into the page, and a cold vignette at the edges. */
.s-hero picture::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 6, .55) 0%, rgba(5, 6, 6, 0) 22%, rgba(5, 6, 6, 0) 42%, rgba(5, 6, 6, .82) 72%, var(--ink) 100%),
    linear-gradient(90deg, rgba(5, 6, 6, .6) 0%, rgba(5, 6, 6, .25) 38%, transparent 60%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.s-hero-inner { position: relative; z-index: 1; margin-top: clamp(-400px, -27vw, -260px); padding-bottom: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.s-hero-title { display: grid; gap: 14px; min-width: 0; }
.studio-title { font-size: clamp(44px, 6vw, 86px); line-height: 1; letter-spacing: .01em; color: var(--bone); text-shadow: 4px 4px 0 #000, 0 0 40px rgba(0, 0, 0, .6); }
.studio-title span { display: block; }
.studio-title .l1 { white-space: nowrap; }
.studio-title .l2 { color: var(--hazard); }
@media (max-width: 359px) { .studio-title .l1 { white-space: normal; } }
.s-hero .eyebrow { text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.byline { font: 700 14px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--fog); }
.s-hero .lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.feature { background: rgba(11, 13, 12, .78); border: 1px solid rgba(239, 230, 210, .14); border-top: 3px solid var(--blood); border-radius: 6px; padding: clamp(18px, 2.4vw, 26px);
  display: grid; gap: 14px; backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); min-width: 0; }
.feature-tag { font: var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--blood); display: flex; align-items: center; gap: 10px; }
.feature-tag::before { content: ""; width: 8px; height: 8px; background: var(--blood); box-shadow: 0 0 10px var(--blood); }
.feature-logo { width: min(100%, 420px); height: auto; }
.feature p.desc { color: var(--bone); }
@media (max-width: 900px) { .s-hero-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .s-hero picture img { height: auto; aspect-ratio: 900 / 1286; object-position: 50% 50%; }
  .s-hero-inner { margin-top: -230px; }
}

section.band { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--line); }
section.band > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 72ch; min-width: 0; }

/* Studio intro */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.intro-text { display: grid; gap: 16px; min-width: 0; }
.intro figure { margin: 0; display: grid; gap: 8px; }
.intro figure img { border: 1px solid var(--line); border-radius: 4px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.intro figcaption { font-size: 14px; color: var(--fog); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pillar { border-top: 2px solid var(--hazard); padding-top: 10px; display: grid; gap: 4px; min-width: 0; }
.pillar b { font: 800 14px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.pillar span { font-size: 15px; color: var(--fog); }
@media (max-width: 860px) { .intro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* Games grid. A lone game spans the row (.wide); when more games join, drop .wide and the grid fills in. */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.game-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.game-card .art { display: block; overflow: hidden; background: #050606; }
.game-card .art img { width: 100%; aspect-ratio: 1232 / 706; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.game-card .art:hover img { transform: scale(1.03); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .game-card .art img { transition: none; } .game-card .art:hover img { transform: none; } }
.game-body { padding: clamp(18px, 2.6vw, 30px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.game-body h3 { font-size: clamp(28px, 3.4vw, 40px); text-shadow: 3px 3px 0 var(--blood-deep); }
.game-card.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; }
.game-card.wide .art img { height: 100%; }
.game-card.wide .game-body { align-content: center; }
@media (max-width: 860px) { .game-card.wide { grid-template-columns: minmax(0, 1fr); } .game-card.wide .art img { height: auto; } }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font: var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog); border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px 5px; background: var(--ink-3); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.contact-mail { font: 800 clamp(20px, 3.2vw, 34px)/1.2 var(--body); color: var(--hazard); text-decoration: none; word-break: break-all; }
.contact-mail:hover { text-decoration: underline; }
@media (max-width: 760px) { .contact { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* About */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line);
  background: radial-gradient(900px 360px at 85% 0%, rgba(58, 159, 130, .14), transparent 70%), var(--ink); }
.page-hero .wrap { display: grid; gap: 16px; }
.page-hero h1 { font-size: clamp(38px, 6vw, 72px); text-shadow: 4px 4px 0 var(--blood-deep); max-width: 18ch; }
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.about-text { display: grid; gap: 16px; min-width: 0; }
.about figure { margin: 0; display: grid; gap: 8px; }
.about figure img { border: 1px solid var(--line); border-radius: 4px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.about figcaption { font-size: 14px; color: var(--fog); }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }

/* ---------- Curiosity Kills ---------- */
.hero { position: relative; background: #050606; }
.hero picture img { width: 100%; height: auto; }
.hero-band { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #050606, var(--ink)); }
.hero-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 34px 48px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: var(--label); text-transform: uppercase; letter-spacing: .12em; color: var(--tile); border: 1px solid var(--tile); padding: 6px 12px 5px; border-radius: 3px; width: fit-content; }
.status::before { content: ""; width: 8px; height: 8px; background: var(--tile); box-shadow: 0 0 10px var(--tile); }

/* How it plays: alternating image and text rows. */
.plays { display: grid; gap: clamp(28px, 5vw, 56px); }
.play { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: center; }
.play:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.play:nth-child(even) .play-media { order: 2; }
.play-media { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.play-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.play-text { display: grid; gap: 12px; min-width: 0; }
.play-text h3 { font-size: clamp(26px, 3vw, 34px); color: var(--bone); text-shadow: 2px 2px 0 var(--blood-deep); }
.play-text .where { font: var(--label); color: #e8564d; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 820px) { .play, .play:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .play:nth-child(even) .play-media { order: 0; } }

/* Monsters: poster cards. */
.monsters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .monsters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .monsters { grid-template-columns: minmax(0, 1fr); } }
.monster { margin: 0; position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--ink-2); display: grid; }
.monster img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; }
.monster .cap { position: absolute; inset: auto 0 0 0; padding: 48px 14px 14px; background: linear-gradient(180deg, transparent, rgba(5, 6, 6, .92) 55%); display: grid; gap: 3px; }
/* Monster names in the body face: the pixel font's Z reads as 2 ("2ombie"). */
.monster .name { font: 900 26px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--bone); text-shadow: 2px 2px 0 var(--blood-deep); }
.monster .place { font: var(--label); letter-spacing: .12em; color: var(--fog); text-transform: uppercase; }
.monster .line { font: 700 14px/1.35 var(--body); letter-spacing: .03em; color: #ff6a5f; text-transform: uppercase; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.gallery a { display: block; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--ink-2); text-decoration: none; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: filter .15s ease; }
.gallery a:hover img { filter: brightness(1.12); }
.gallery figcaption { padding: 9px 12px 10px; font-size: 14px; color: var(--fog); }
.gallery figure { margin: 0; }
@media (prefers-reduced-motion: reduce) { .gallery img { transition: none; } }

/* Cosmetics */
.cosmo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cosmo video, .cosmo img.still { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #0d0f14; }
.cosmo img.still { display: none; }
@media (prefers-reduced-motion: reduce) { .cosmo video { display: none; } .cosmo img.still { display: block; } }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.swatches figure { margin: 0; display: grid; gap: 6px; }
.swatches img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #0d0f14; }
.swatches figcaption { font: var(--label); color: var(--fog); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 640px) { .cosmo { gap: 8px; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); min-width: 0; gap: 12px; }
.fact { background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 16px; display: grid; gap: 6px; min-width: 0; }
.fact b { font-family: var(--pixel); font-weight: 400; font-size: 24px; color: var(--hazard); }
.fact span { color: var(--fog); font-size: 15px; }
ul.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
ul.ticks li { padding-left: 22px; position: relative; color: var(--bone); }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--blood); }

/* Platforms */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.platform { background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.platform-name { font: 900 24px/1.1 var(--body); letter-spacing: .04em; color: var(--bone); }
.platform.quiet { border-style: dashed; background: transparent; }

/* Discord */
.discord-band { background: radial-gradient(1200px 400px at 70% 0%, rgba(88, 101, 242, .18), transparent 60%), var(--ink); }
.discord-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.discord-grid > img { border-radius: 4px; border: 1px solid var(--line); }
.discord-logo { width: min(240px, 60%); height: auto; }
.codebox { display: grid; gap: 8px; }
.codebox .label { font: var(--label); letter-spacing: .16em; color: var(--fog); text-transform: uppercase; }
.code { font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 5vw, 44px); letter-spacing: .1em; padding: 10px 16px 8px; border: 2px solid var(--discord); border-radius: 4px; background: #0d1020; width: fit-content; max-width: 100%; user-select: all; }
@media (max-width: 860px) { .discord-grid { grid-template-columns: minmax(0, 1fr); } }

/* Made by (game page) */
.studio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center; }
.studio img { width: clamp(180px, 26vw, 300px); height: auto; }
@media (max-width: 700px) { .studio { grid-template-columns: minmax(0, 1fr); } }

/* Footer */
footer { padding-block: 44px 56px; background: #080a09; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.foot-brand { display: grid; gap: 6px; align-content: start; }
.foot-name { display: flex; align-items: center; gap: 10px; font: 800 15px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.foot-brand a { color: var(--hazard); }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-head { font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.foot-col a { color: var(--bone); text-decoration: none; font-size: 15px; width: fit-content; }
.foot-col a:hover { text-decoration: underline; }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Information pages (support, privacy, deletion, 404, moved) */
main.legal { max-width: 860px; margin: 0 auto; padding: 48px var(--gutter) 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
main.legal h1 { font-size: clamp(34px, 5vw, 52px); text-shadow: 3px 3px 0 var(--blood-deep); }
main.legal h2 { font-size: 26px; margin-top: 18px; text-shadow: 2px 2px 0 var(--blood-deep); }
main.legal p, main.legal li { color: var(--bone); }
main.legal a { color: var(--hazard); }
main.legal ol { display: grid; gap: 8px; padding-left: 22px; margin: 0; }
.contact-link { font: 700 20px/1.3 var(--body); }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.support-grid section { background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 18px; display: grid; gap: 10px; min-width: 0; }
.code-inline { font-family: var(--mono); letter-spacing: .06em; }

/* YouTube band (Curiosity Kills page only) */
.youtube-band { background: linear-gradient(135deg, #ff0000 0%, #c40000 55%, #8a0000 100%); color: #fff; }
.youtube-band .lead { color: rgba(255,255,255,.92); }
.youtube-band h2 { color: #fff; }
.youtube-grid { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.youtube-icon { width: min(220px, 100%); height: auto; justify-self: center; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.yt-handle { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; letter-spacing: .02em; margin: 6px 0 14px; }
.btn.youtube { background: #fff; border-color: #fff; color: #c40000; font-weight: 700; }
.btn.youtube:hover { filter: brightness(.95); }
@media (max-width: 860px) { .youtube-grid { grid-template-columns: minmax(0, 1fr); } .youtube-icon { width: 140px; } }