/* Keep the complete scene visible at desktop and mobile hero sizes. */
.hero-art--video {
  min-width: 0;
}
.hero-art--video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: lighten;
  image-rendering: pixelated;
}
@media (max-width: 580px) {
  .hero-art--video {
    height: auto;
    min-height: 0;
    aspect-ratio: 1259 / 720;
  }
}

/* Cat strip: a slow horizontal marquee of all 25 Codex Pets. */
.cat-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 6px 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.cat-strip.is-in { opacity: 1; }
.cat-strip__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cat-strip__track {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: max-content;
  animation: strip-scroll 74s linear infinite;
}
.cat-strip__viewport:hover .cat-strip__track { animation-play-state: paused; }
@keyframes strip-scroll { to { transform: translateX(-50%); } }

.strip-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(68px, 7.4svh, 108px);
}
.strip-sprite {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 96 / 104;
  background-image: var(--strip);
  background-size: 1700% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: transform 160ms ease;
}
.strip-cat:is(:hover, :focus-visible) .strip-sprite { transform: translateY(-6px) scale(1.1); }
.strip-cat:focus-visible { outline: 2px solid #00eadb; outline-offset: 2px; }

.strip-cat.is-glitch .strip-sprite { animation: strip-glitch 420ms steps(2, end); }
@keyframes strip-glitch {
  0%, 100% { filter: none; translate: 0 0; }
  20% { filter: drop-shadow(-3px 0 0 #00e4ff) drop-shadow(3px 0 0 #ff4940); translate: 2px 0; }
  45% { filter: drop-shadow(3px 0 0 #62ff00) drop-shadow(-2px 0 0 #674aff); translate: -2px 0; }
  70% { filter: drop-shadow(-2px 0 0 #ffe600) drop-shadow(2px 0 0 #00c8ff); translate: 1px 0; }
}

/* Compact desktop landing: fold the strip into the fixed-height single page. */
@media (min-width: 900px) and (min-height: 600px) {
  .shell { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .cat-strip { padding: 2px 0; }
}

@media (max-width: 580px) {
  .strip-cat { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-strip__track { animation: none; }
  .cat-strip__viewport { overflow-x: auto; }
  .strip-cat.is-glitch .strip-sprite { animation: none; }
}

/* Integrated hero (desktop): the portal video bleeds to the right edge of the
   viewport and dissolves into the page on its left and bottom edges, so the
   title sits on the scene instead of beside a boxed clip. */
@media (min-width: 861px) {
  .hero { position: relative; isolation: isolate; }
  .hero-copy { position: relative; z-index: 1; }
  .hero-copy h1, .hero-copy .hero-mini { text-shadow: 0 2px 0 #05070c, 0 0 24px rgba(5, 7, 12, 0.85); }
  .hero-art--video {
    position: absolute;
    z-index: 0;
    top: -12px;
    bottom: -28px;
    left: 30%;
    right: calc(50% - 50vw);
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-art--video video { object-fit: cover; object-position: 70% center; }
}

/* Hero call to action: the game's pixel button (stepped corners, rainbow rim). */
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; position: relative; z-index: 1; }
.px-cta {
  --step: polygon(0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px));
  display: inline-block; padding: 2px; clip-path: var(--step);
  background: var(--rainbow);
  filter: drop-shadow(0 0 10px rgba(255, 59, 214, 0.3));
  transition: transform 120ms steps(2, end), filter 160ms ease;
}
.px-cta-face {
  display: block; padding: 10px 18px 9px; clip-path: var(--step);
  background: #0c0d0f; color: #f6f7f5; font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; white-space: nowrap;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.14), inset -2px -2px 0 rgba(0, 0, 0, 0.6);
}
.px-cta:hover, .px-cta:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 0 20px rgba(59, 216, 255, 0.6)); }
.px-cta:active { transform: translateY(1px); }
.px-cta:hover .px-cta-face, .px-cta:focus-visible .px-cta-face { background: #15171b; }
.px-cta:active .px-cta-face { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.14); }
.px-link { font-size: 16px; color: var(--muted); padding: 10px 0; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .px-cta { transition: none; } }
@media (max-width: 580px) { .hero-actions { margin-top: 18px; gap: 16px; } .px-cta-face { font-size: 15px; padding: 10px 16px 9px; } }

/* Mini radio HUD: a small pixel window in the hero's top-right corner. */
.mini-radio {
  --step: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  position: absolute; z-index: 2; top: 14px; right: 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: rgba(12, 13, 15, 0.72); backdrop-filter: blur(6px);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 12px;
}
.mini-radio::before {
  content: ""; position: absolute; inset: 0; padding: 1px; clip-path: var(--step); pointer-events: none;
  background: var(--rainbow); opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.mini-radio.is-playing::before { opacity: 1; }
.mr-btn { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text); font-size: 18px; line-height: 1; }
.mr-btn:hover { color: #00eadb; }
.mr-play { background: rgba(255, 255, 255, 0.08); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.5); }
.mr-play svg { width: 14px; height: 14px; fill: currentColor; }
.mr-icon-pause, .is-playing .mr-icon-play { display: none; }
.is-playing .mr-icon-pause { display: inline; }
.mr-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.mr-eq i { width: 3px; height: 3px; background: var(--muted); }
.is-live .mr-eq i { background: #64ff00; animation: mr-eq 900ms steps(4, end) infinite; }
.is-live .mr-eq i:nth-child(2) { animation-delay: -300ms; background: #00eadb; }
.is-live .mr-eq i:nth-child(3) { animation-delay: -600ms; background: #ffe900; }
.is-live .mr-eq i:nth-child(4) { animation-delay: -150ms; background: #ff49cf; }
@keyframes mr-eq { 0%, 100% { height: 3px; } 25% { height: 12px; } 50% { height: 6px; } 75% { height: 14px; } }
.mr-info { display: grid; min-width: 0; width: 132px; }
.mr-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.mr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.mr-frame { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; left: 0; top: 0; }
@media (prefers-reduced-motion: reduce) { .is-live .mr-eq i { animation: none; height: 8px; } }
@media (max-width: 860px) { .mini-radio { position: relative; top: auto; right: auto; align-self: flex-start; order: 2; } }

/* Full-bleed bottom: the cat strip and the footer run edge to edge of the
   viewport instead of stopping at the centered column. */
html, body { overflow-x: clip; }
.cat-strip, .footer { margin-inline: calc(50% - 50vw); }
.cat-strip__viewport {
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.footer { padding-inline: clamp(20px, 3vw, 48px); }

/* Mini radio, borderless: just the controls floating on the scene, with
   chromatic pixel buttons. */
.mini-radio { background: none; backdrop-filter: none; box-shadow: none; clip-path: none; padding: 0; gap: 10px; }
.mini-radio::before { display: none; }
.mini-radio .mr-btn {
  width: 30px; height: 30px; color: #f6f7f5; font-size: 18px;
  background: #0c0d0f;
  box-shadow: 0 0 0 2px #0c0d0f, 0 0 0 3px transparent;
  position: relative; isolation: isolate;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}
.mini-radio .mr-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 2px;
  background: var(--rainbow);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.mini-radio .mr-btn:hover { color: #0c0d0f; background: var(--rainbow); }
.mini-radio .mr-btn:active { transform: translateY(1px); }
.mini-radio .mr-play { width: 34px; height: 34px; }
.mini-radio.is-playing .mr-play { text-shadow: -1px 0 #00eadb, 1px 0 #ff49cf; filter: drop-shadow(0 0 8px rgba(255, 73, 207, 0.5)); }
.mini-radio .mr-name { text-shadow: 0 1px 0 #05070c, 0 0 10px rgba(5, 7, 12, 0.9); }

/* Radio lives in the header, a little apart from the social icons. */
.header .mini-radio { position: static; order: 0; margin-left: 10px; padding-left: 22px; border-left: 1px solid var(--line); align-self: center; }
.header .mini-radio .mr-info { width: 118px; }
@media (max-width: 1180px) { .header .mini-radio .mr-info { display: none; } }
@media (max-width: 860px) { .header .mini-radio { margin-left: 0; padding-left: 12px; } }

/* Smaller, quieter radio: buttons under the size of the social icons. */
.header .mini-radio { gap: 7px; padding-left: 18px; }
.header .mini-radio .mr-btn { width: 22px; height: 22px; font-size: 13px; }
.header .mini-radio .mr-play { width: 24px; height: 24px; }
.header .mini-radio .mr-play svg { width: 10px; height: 10px; }
.header .mini-radio .mr-btn::before { padding: 1px; }
.header .mini-radio .mr-eq { height: 10px; gap: 1px; }
.header .mini-radio .mr-eq i { width: 2px; }
@keyframes mr-eq { 0%, 100% { height: 2px; } 25% { height: 8px; } 50% { height: 4px; } 75% { height: 10px; } }
.header .mini-radio .mr-info { width: 96px; }
.header .mini-radio .mr-label { font-size: 8px; }
.header .mini-radio .mr-name { font-size: 11px; }

/* Footer logo a bit larger so it matches the signature text. */
.footer-signature > img { width: 96px; height: 16px; margin-right: 3px; }

/* Tablet + phone: one column; the video runs edge to edge under the title and
   dissolves into the page on every side, like the desktop version. */
@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-art--video {
    position: relative; height: auto; min-height: 0; aspect-ratio: 1600 / 916;
    margin-inline: calc(50% - 50vw); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-art--video video { object-fit: cover; }
}
/* Phone: the radio collapses to a single play button beside the socials. */
@media (max-width: 580px) {
  .brand { width: 160px; }
  .header .mini-radio { padding-left: 0; margin-left: 0; border-left: 0; }
  .header .mini-radio .mr-skip, .header .mini-radio .mr-eq { display: none; }
}

/* ---- Wide screens: use more of the width -------------------------------
   The column was capped at 1536px, so on wide monitors the menu and title sat
   far from the edges while the cat strip ran edge to edge. The page now
   spreads to 1920px with the same side gutter as the footer. */
@media (min-width: 861px) {
  .shell { max-width: 2240px; padding-inline: clamp(20px, 3vw, 56px); }
  .footer { padding-inline: clamp(20px, 3vw, 56px); }
  /* Video starts further left, with a longer, softer dissolve. */
  .hero-art--video {
    left: 22%;
    opacity: .92;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 22%, #000 48%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 22%, #000 48%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  }
  /* The three destination cards sit centred in their columns. */
  .destinations .card { justify-content: center; }
}

/* ---- Radio: no frames, just glitchy pixel controls --------------------- */
.header .mini-radio .mr-btn {
  width: auto; height: 26px; padding: 0 3px; background: none; box-shadow: none; clip-path: none;
  font-size: 20px; color: #f6f7f5; transition: transform 90ms steps(2, end);
}
.header .mini-radio .mr-btn::before { display: none; }
.header .mini-radio .mr-play { width: 26px; }
.header .mini-radio .mr-play svg { width: 16px; height: 16px; }
.header .mini-radio .mr-btn:hover,
.header .mini-radio .mr-btn:focus-visible {
  background: none; color: #f6f7f5;
  text-shadow: -2px 0 #00eadb, 2px 0 #ff49cf;
  filter: drop-shadow(-1px 0 #00eadb) drop-shadow(1px 0 #ff49cf);
  transform: translateX(1px);
}
.header .mini-radio.is-playing .mr-play { filter: drop-shadow(-1px 0 #00eadb) drop-shadow(1px 0 #ff49cf); text-shadow: none; }

/* Room above the strip so a hovered/tapped cat (lifted and scaled) never has
   its ears clipped by the viewport's overflow. */
.cat-strip__viewport { padding-top: 16px; margin-top: -16px; }

/* Hero lead: what launches today, in one line under the collection line. */
.hero-lead { margin: 14px 0 0; max-width: 40ch; font-size: 17px; line-height: 1.45; color: #c8ccd0; text-wrap: pretty; text-shadow: 0 1px 0 #05070c, 0 0 18px rgba(5, 7, 12, .9); }
.hero-lead--next { margin-top: 10px; }
.hero-collection { text-wrap: balance; }
/* The pet's three moods, as little pixel status chips. */
.hero-states { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.hero-states .st {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 3px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  background: rgba(5, 7, 12, .78);
  box-shadow: 0 0 0 1px currentColor inset;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}
.hero-states .st span { font-size: 14px; line-height: 1; }
.st--work { color: #00eadb !important; }
.st--wait { color: #ff6b6b !important; }
.st--done { color: #64ff00 !important; }
.st--work span { animation: st-spin 1.2s steps(8, end) infinite; display: inline-block; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st--work span { animation: none; } }
.hero-lead b { color: var(--text); font-weight: 600; }
.hero-actions { margin-top: 20px; }
@media (max-width: 580px) { .hero-lead { font-size: 15px; } .hero-states .st { font-size: 11px; } }

/* ---- UX review fixes ---------------------------------------------------- */
/* Radio arrows: a real tap/click target on desktop. */
.header .mini-radio .mr-btn { min-width: 26px; }
/* Cat check "Try again" when the challenge fails to load. */
.cat-check-retry { margin-left: 6px; padding: 2px 8px; font: inherit; font-size: 13px; color: #0b0d14; background: #e9ff9d; border: 0; cursor: pointer; }
@media (max-width: 580px) {
  /* Phone: the radio would be a lone, unlabeled ▸ — hide it; the District has its own music. */
  .header .mini-radio { display: none; }
  /* Plush Pets and Codex Pets (what is out) full width; the two coming-soon cards side by side. */
  .destinations { grid-template-columns: 1fr 1fr; gap: 10px; }
  .destinations .card--pets { grid-column: 1 / -1; }
  .destinations .card--pets .district-art-frame { width: 200px; }
  .destinations :is(.card--whitelist, .card--arcade) { padding: 0 4px 18px; }
  .destinations :is(.card--whitelist, .card--arcade) .district-art-frame { width: 118px; }
  .destinations :is(.card--whitelist, .card--arcade) h2 { font-size: 17px; }
  .destinations :is(.card--whitelist, .card--arcade) p { font-size: 13px; }
}

/* The one-screen desktop layout may grow instead of overlapping: when the
   hero needs more height than the screen has, the page scrolls a little
   rather than the CTA sliding under the cards. */
@media (min-width: 900px) and (min-height: 600px) {
  .shell { height: auto; min-height: 100svh; }
  main { grid-template-rows: auto auto; }
  .hero { padding-bottom: 28px; }
}

/* "What is this?" next to the hero CTA and in the footer. */
.hero-actions .px-link { font-size: 15px; }
.footer-readme { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Collection line: two lines, same measure as the lead below, clear of the video. */
.hero-collection { max-width: 40ch; text-transform: uppercase; }
.hero-collection span { display: block; }
.hero-collection span + span { color: var(--muted); }

/* ---- Ambient sweep (dark-preview.js): the same looks as hover ---------- */
.holo.is-sweep, .is-sweep .holo {
  background-image: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent;
}
.hero-lead.is-sweep, .hero-states .st.is-sweep, .px-link.is-sweep, .social.is-sweep svg {
  animation: pixel-glitch 420ms steps(2, end) both;
}
.social.is-sweep::before { opacity: 1; }
.px-cta.is-sweep { transform: translateY(-2px); filter: drop-shadow(0 0 20px rgba(59, 216, 255, 0.6)); }
.px-cta.is-sweep .px-cta-face { background: #15171b; }
.destinations .card.is-sweep .district-art-frame {
  transform: translateY(-12px) scale(1.14);
  filter: drop-shadow(-1px 0 0 rgba(255, 73, 207, .32)) drop-shadow(1px 0 0 rgba(0, 234, 219, .36)) drop-shadow(0 9px 8px rgba(0, 0, 0, .27));
}
.destinations .card--pets.is-sweep .district-art-frame { transform: translateY(-10px) scale(1.07); }
.destinations .card.is-sweep .district-art-frame::after { opacity: .68; }
.destinations .card.is-sweep .district-art-frame .district-art { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-lead.is-sweep, .hero-states .st.is-sweep, .px-link.is-sweep, .social.is-sweep svg { animation: none; }
  .px-cta.is-sweep, .destinations .card.is-sweep .district-art-frame { transform: none; }
}

/* ---- Design review fixes ------------------------------------------------ */
/* 1. What is out leads the row (Plush Pets, then Codex Pets); the coming-soon art rests muted. */
@media (min-width: 861px) {
  .destinations { grid-template-columns: 1.2fr 1.2fr .9fr .9fr; }
  .destinations :is(.card--whitelist, .card--arcade):not(:hover):not(:focus-visible):not(.is-sweep) .district-art-frame {
    filter: saturate(.55) brightness(.8);
  }
}
/* 3. The footer is where the brand signs off: readable sizes, bigger mark. */
.footer-links { font-size: 14px; }
.footer-origin, .footer-signature .creator { font-size: 13px; }
.footer .platform-link { font-size: 14px; }
.footer-signature > img { width: 120px; height: 20px; }
/* 4. The strip says what it is. */
.cat-strip__label {
  flex: 0 0 auto; padding-left: clamp(20px, 3vw, 56px);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3; color: var(--muted);
}
@media (max-width: 580px) { .cat-strip__label { display: none; } }

/* ---- Wordmark: tightly cropped exports at exact display sizes ----------
   weird-cats-logo-2026-w200/-w400.webp are the 1500×500 master trimmed to
   the art and box-filtered so one head block of the cat is 2 px (w200) or
   4 px (w400). They are shown at 200 CSS px (header) and 100 CSS px (footer),
   i.e. 1:1 device pixels at 1x and 2x, so no pixelated resampling is needed. */
.brand { width: 200px; }
.brand img { width: 100%; height: auto; image-rendering: auto; }
@media (max-width: 580px) { .brand { width: 150px; } }
.footer-signature > img { width: 100px; height: auto; object-fit: contain; image-rendering: auto; transform: none; }

/* ---- Silkscreen for small uppercase labels ------------------------------
   Pixelify Sans turns to mush at 8–13px; Silkscreen is drawn for those sizes
   (crisp at 8px, and at 12px on 2x screens). Lowercase maps to caps in this
   font, so the labels are uppercase anyway. Not used on @nett0eth: its 0 and
   O are the same glyph. */
.hero-mini, .win p.win-eyebrow, .win p.win-note, .cat-strip__label,
.header .mini-radio .mr-label, .footer-origin {
  font-family: "Silkscreen", "WC Digits", "Pixelify Sans", monospace;
  font-weight: 400;
  text-transform: uppercase;
}
.eyebrow.hero-mini { font-size: 12px; letter-spacing: 0.06em; }
.hero-collection { font-size: 12px; letter-spacing: 0.04em; line-height: 1.5; }
.win p.win-eyebrow { font-size: 12px; letter-spacing: 0.06em; }
.win p.win-note { font-size: 12px; letter-spacing: 0.04em; }
.cat-strip__label { font-size: 12px; letter-spacing: 0.04em; line-height: 1.4; }
.header .mini-radio .mr-label { font-size: 8px; letter-spacing: 0.08em; }
.footer-origin { font-size: 12px; letter-spacing: 0.02em; }
@media (max-width: 580px) { .hero-collection { letter-spacing: 0; } }

/* ---- 8px vertical rhythm ------------------------------------------------
   Every vertical gap between hero → cards → strip → footer, and inside the
   hero, is 8 / 16 / 24 / 32 (or 40 / 48 on the roomier layouts). */
.hero { padding: 48px 0 40px; }
.hero h1 { margin: 24px 0; }
.hero-lead { margin-top: 16px; }
.hero-states { margin-top: 8px; }
.hero-lead--next { margin-top: 8px; }
.hero-actions { margin-top: 24px; }
.destinations { gap: 16px; padding-bottom: 40px; }
.cat-strip { padding: 8px 0; }
.footer { padding-block: 16px; min-height: 56px; }
@media (min-width: 900px) and (min-height: 600px) {
  .hero { padding: 24px 0 32px; }
  .hero h1 { margin: 16px 0; }
  .destinations { gap: 16px; padding-bottom: 24px; }
  .cat-strip { padding: 8px 0; }
}
@media (max-width: 580px) {
  .hero { padding: 32px 0 24px; }
  .hero h1 { margin: 16px 0; }
  .hero-actions { margin-top: 24px; }
  .destinations { gap: 8px; padding-bottom: 32px; }
  .footer { row-gap: 8px; column-gap: 16px; }
}

/* ---- "● LIVE  install ▸" under the strip label ---------------------------
   The one way into the install steps on the page, kept tiny. */
.cat-strip__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: clamp(20px, 3vw, 56px);
}
.cat-strip__side .cat-strip__label { padding-left: 0; }
.strip-live { display: inline-flex; align-items: center; gap: 8px; }
.strip-live__tag {
  font: 8px/1 "Silkscreen", "WC Digits", "Pixelify Sans", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64ff00;
}
.strip-install {
  height: 16px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px #05070c, inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.55);
}
.strip-install:is(:hover, :focus-visible) { background: var(--rainbow); color: #0c0d0f; }
.strip-install:active { box-shadow: 0 0 0 1px #05070c, inset 1px 1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.2); }
.strip-install:focus-visible { outline-offset: 2px; }
@media (max-width: 580px) { .cat-strip__side { display: none; } }
/* Social marks use outlines for Instagram and TikTok. */
.social svg[fill="none"] { fill: none; }

/* Keep the expanded community links readable when the compact header is tight. */
@media (min-width: 861px) and (max-width: 1080px) {
  .header { flex-wrap: wrap !important; column-gap: 16px; }
  .header .menu { order: 3; width: 100%; justify-content: center; margin-left: 0; border-top: 1px solid var(--line); }
  .header .socials { margin-left: auto; }
}
@media (max-width: 580px) {
  .header .socials { order: 2; width: 100%; justify-content: center; margin-left: 0; padding: 0; gap: clamp(12px, 4vw, 22px); }
  .header .menu { order: 3; }
}

/* Social marks in their brand colours (X and Telegram stay white). Stroke only, no plates. */
.header .social.brand-pin { color: #e60023; }
.header .social.brand-tt { color: #fff; }
.header .social.brand-tt svg { filter: drop-shadow(-1.2px -1px 0 #25f4ee) drop-shadow(1.2px 1px 0 #fe2c55); }
.header .social.brand-tt:is(:hover, :focus-visible) svg { filter: drop-shadow(-2px 0 0 #25f4ee) drop-shadow(2px 0 0 #fe2c55); }
/* GIPHY is a solid block while the other marks are thin strokes: draw it
   smaller so it reads the same size as its neighbours. */
.header .social.giphy svg { width: 16px; height: 19px; }
@media (max-width: 580px) { .header .social.giphy svg { width: 14px; height: 16px; } }