/* ========== Fonts (the game's own faces, ASCII only) ========== */
@font-face {
  font-family: "SpaceSlop Hand";
  src: url("../assets/fonts/SpaceSlopHand-Regular.woff2") format("woff2"),
       url("../assets/fonts/SpaceSlopHand-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "SpaceSlop Text";
  src: url("../assets/fonts/SpaceSlopText-Regular.woff2") format("woff2"),
       url("../assets/fonts/SpaceSlopText-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ========== Tokens ========== */
:root {
  --ink: #0a1138;
  --void: #02040e;
  --space-deep: #050a2c;
  --space: #0a1a5e;
  --blue: #2c74ff;
  --cyan: #74d3ff;
  --white: #ffffff;
  --cream: #fff4e3;
  --orange: #ff7a1c;
  --orange-hi: #ff9a3d;
  --orange-lo: #c74d06;
  --text-soft: #c7d6ff;
  --discord: #5865f2;

  --line: 4px;
  --drop: 0 7px 0 var(--ink);
  /* lopsided radii so boxes look cut out by hand */
  --wobble: 22px 30px 18px 34px / 30px 18px 32px 20px;
  --wobble-2: 34px 18px 30px 22px / 18px 32px 20px 30px;

  --font-hand: "SpaceSlop Hand", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-text: "SpaceSlop Text", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--cyan); }

h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--font-hand); line-height: 1.05; }

/* ========== Buttons ========== */
.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  white-space: nowrap;
  font-family: var(--font-hand);
  text-decoration: none;
  color: var(--white);
  border: var(--line) solid var(--ink);
  cursor: pointer;
  transform: translateY(var(--lift)) rotate(var(--tilt, 0deg));
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--wishlist {
  --tilt: -2deg;
  background: linear-gradient(180deg, var(--orange-hi) 0%, var(--orange) 55%, var(--orange-lo) 100%);
  border-radius: var(--wobble);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(0, 0, 0, .18), var(--drop);
  text-shadow: 0 3px 0 var(--ink);
  padding: .5em 1.1em .55em;
  font-size: 22px;
}
.btn--wishlist .steam-icon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  filter: drop-shadow(0 3px 0 var(--ink));
  flex: none;
}
.btn--wishlist:hover,
.btn--wishlist:focus-visible {
  --lift: -4px;
  --tilt: 1.5deg;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(0, 0, 0, .18), 0 11px 0 var(--ink);
  filter: brightness(1.06);
}
.btn--wishlist:active {
  --lift: 5px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 0 var(--ink);
  transition-duration: .06s;
}
.btn:focus-visible { outline: 3px dashed var(--cyan); outline-offset: 8px; }

.btn--big  { font-size: clamp(24px, 3vw, 30px); }
.btn--huge { font-size: clamp(24px, 4.2vw, 42px); padding: .45em 1.15em .5em; }

/* ========== Hero ========== */
.hero {
  position: relative;
  min-height: clamp(640px, 100svh, 1000px);
  display: flex;
  align-items: center;
  padding: 48px clamp(20px, 6vw, 96px) 120px;
  padding-left: max(clamp(20px, 6vw, 96px), calc((100% - 1600px) / 2 + 80px));
  isolation: isolate;
  overflow-x: clip;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: min(clamp(560px, 34vw, 640px), 100%); /* keep in sync with .stage --content-w */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__logo {
  width: 90%;
  margin-left: -2%;
  animation: bob 5.5s ease-in-out infinite;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}
.hero__tagline {
  margin: 10px 0 34px;
  font-family: var(--font-hand);
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.25;
  text-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(5, 10, 44, .8);
}
@media (min-width: 761px) {
  .hero__tagline { white-space: nowrap; }
}
/* secondary row under the wishlist button: Discord + the small print */
.hero__sub {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.btn--discord {
  --tilt: 1.5deg;
  padding: .45em .95em .5em .8em;
  font-size: 20px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--wobble-2);
  box-shadow: 0 5px 0 var(--ink);
}
.btn--discord .discord-icon { width: 1.3em; height: 1.3em; fill: var(--discord); flex: none; }
.btn--discord:hover,
.btn--discord:focus-visible {
  --lift: -3px;
  --tilt: -1deg;
  background: var(--cream);
  box-shadow: 0 8px 0 var(--ink);
}
.btn--discord:active { --lift: 4px; box-shadow: 0 1px 0 var(--ink); transition-duration: .06s; }

.hero__meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  text-shadow: 0 2px 6px rgba(5, 10, 44, .9);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-hand);
  font-size: 18px;
  opacity: .85;
  transition: opacity .2s;
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll svg { width: 30px; height: 30px; animation: nudge 1.8s ease-in-out infinite; }


/* ========== Space backdrop ========== */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}
.nebula {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.nebula__streak {
  position: absolute;
  left: -20%;
  width: 140%;
  border-radius: 50%;
  filter: blur(60px);
  transform-origin: center;
}
.nebula__streak--a {
  top: 8%;
  height: 34vh;
  rotate: -14deg;
  background: radial-gradient(closest-side, rgba(38, 92, 230, .42), rgba(20, 50, 160, .16) 60%, transparent);
}
.nebula__streak--b {
  top: 58%;
  height: 26vh;
  rotate: -18deg;
  background: radial-gradient(closest-side, rgba(90, 170, 255, .16), rgba(30, 60, 170, .07) 60%, transparent);
}

/* ========== Hero scene (cutout layers) ========== */
.scene {
  /* no z-index here on purpose: the drifter has to be able to float above the text */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.px { position: absolute; will-change: transform; }
.px img { width: 100%; height: auto; }

.bob--ship    { animation: bob-ship 9s ease-in-out infinite; }
.bob--drifter { animation: bob-drifter 7s ease-in-out infinite; }

.stage {
  --stage-w: min(1600px, 100%);
  --ship-w: min(48%, 820px);
  --drifter-w: min(24%, 400px);
  /* where the logo/text column sits, in stage coordinates (mirrors .hero padding) */
  --content-left: clamp(20px, 6vw, 96px);
  --content-w: clamp(560px, 34vw, 640px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--stage-w) / 2);
  width: var(--stage-w);
}
@media (min-width: 1632px) {
  .stage { --content-left: 80px; }
}
.ship {
  top: 12%;
  right: 1%;
  width: var(--ship-w);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
}
.drifter {
  /* drifts in front of the text column, overlapping its right edge, for depth */
  left: calc(var(--content-left) + var(--content-w) - var(--drifter-w) * .42);
  top: 46%;
  width: var(--drifter-w);
  z-index: 3;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55));
}

.rock img { filter: brightness(.9); }
.rock--1 { left: 34%; top: 4%; width: 120px; filter: blur(1px); }
.rock--2 { left: 3%; top: 8%; width: 70px; filter: blur(2px); opacity: .7; }
.rock--3 { left: 30%; bottom: 10%; width: 90px; filter: blur(1.5px); }
.rock--4 { left: 58%; top: 16%; width: 60px; filter: blur(2.5px); opacity: .6; }
.rock--front { right: 4%; bottom: -60px; width: 230px; z-index: 2; filter: blur(3px) brightness(.8); }

.junk img { animation: tumble var(--spin, 24s) linear infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.prop {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-image: url("../assets/img/props-atlas-v2.png");
  background-size: 300% 400%;
  background-repeat: no-repeat;
  animation: tumble var(--spin, 24s) linear infinite;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
}
.prop--battery      { background-position: 0 0; }
.prop--mug          { background-position: 50% 0; }
.prop--plunger      { background-position: 100% 0; }
.prop--buoy         { background-position: 0 33.333%; }
.prop--extinguisher { background-position: 50% 33.333%; }
.prop--notes        { background-position: 100% 33.333%; }
.prop--football     { background-position: 0 66.667%; }
.prop--doll         { background-position: 50% 66.667%; }
.prop--boombox      { background-position: 100% 66.667%; }
.prop--mitts        { background-position: 0 100%; }
.prop--crystal      { background-position: 50% 100%; }
.prop--wrench       { background-position: 100% 100%; }
.junk--battery { left: 47%; top: 30%; width: 70px; --spin: 30s; z-index: 1; }
.junk--mug     { left: 70%; bottom: 7%; width: 96px; --spin: -22s; z-index: 2; }
.junk--plunger { left: 3%; bottom: 6%; width: 90px; --spin: 40s; }

/* floaters in the side margins of the lower sections */
.section { position: relative; }
.section > :not(.junk--side) { position: relative; z-index: 1; }
.junk--side { z-index: 0; opacity: .95; }
.junk--buoy        { left: -150px; top: 30%; width: 130px; --spin: 36s; }
.junk--extinguisher{ right: -130px; top: 58%; width: 80px; --spin: -28s; }
.rock--side-a      { right: -210px; top: 8%; width: 140px; filter: blur(1.5px); }
.junk--notes       { left: -220px; top: 18%; width: 110px; --spin: 26s; }
.junk--football    { right: -200px; top: 42%; width: 90px; --spin: -18s; }
.junk--doll        { left: -170px; bottom: 6%; width: 90px; --spin: 44s; }
.rock--side-b      { right: -250px; bottom: 0; width: 120px; filter: blur(2px); opacity: .8; }
.junk--boombox     { left: -230px; top: 10%; width: 130px; --spin: -40s; }
.junk--mitts       { right: -210px; top: 4%; width: 110px; --spin: 30s; }
.junk--crystal     { right: -120px; bottom: 0; width: 60px; --spin: 20s; }

@media (max-width: 1180px) {
  .junk--side { display: none; }
}

@keyframes bob-ship {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-6px, 10px) rotate(-.8deg); }
}
@keyframes bob-drifter {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50%      { transform: translate(10px, -16px) rotate(4deg); }
}
@keyframes tumble {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ========== Sections ========== */
.section {
  width: min(1100px, 100% - 32px);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section--narrow { width: min(760px, 100% - 32px); }

.sticker-title {
  display: inline-block;
  margin-bottom: 36px;
  padding: .12em .6em .2em;
  font-size: clamp(34px, 5vw, 54px);
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble-2);
  box-shadow: var(--drop);
}
.sticker-title--tilt-left  { transform: rotate(-2.5deg); }
.sticker-title--tilt-right { transform: rotate(2deg); }

/* ========== Trailer screen ========== */
.screen {
  position: relative;
  width: 100%;
  padding: clamp(10px, 1.6vw, 18px);
  background: linear-gradient(180deg, #ffffff, #d9e6ff);
  border: var(--line) solid var(--ink);
  border-radius: 34px 40px 30px 44px / 40px 30px 44px 34px;
  box-shadow: 0 10px 0 var(--ink), 0 30px 60px rgba(0, 0, 0, .45);
  transform: rotate(-.6deg);
}
.screen__bolt {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b9c8ea;
  border: 3px solid var(--ink);
}
.screen__bolt--tl { top: 7px; left: 16px; }
.screen__bolt--tr { top: 9px; right: 18px; }
.screen__bolt--bl { bottom: 8px; left: 20px; }
.screen__bolt--br { bottom: 7px; right: 15px; }

.screen__inner {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 20px 26px 18px 28px / 26px 18px 28px 20px;
}
.screen__inner iframe,
.screen__inner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.screen__poster {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.screen__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .3s ease;
}
.screen__poster:hover img { transform: scale(1.03); filter: brightness(.88); }

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(76px, 11vw, 124px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--orange-hi), var(--orange) 55%, var(--orange-lo));
  border: var(--line) solid var(--ink);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), var(--drop);
  transform: translate(-50%, -50%) rotate(-4deg);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.play svg {
  width: 48%;
  margin-left: 8%;
  fill: var(--white);
  filter: drop-shadow(0 3px 0 var(--ink));
}
.screen__poster:hover .play,
.screen__poster:focus-visible .play { transform: translate(-50%, -50%) rotate(4deg) scale(1.08); }
.screen__poster:focus-visible { outline: 3px dashed var(--cyan); outline-offset: -10px; }

/* ========== Three jobs ========== */
.jobs {
  list-style: none;
  margin: clamp(44px, 6vw, 64px) 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.job {
  padding: 22px 24px 24px;
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: var(--drop);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.job:nth-child(1) { transform: rotate(-1.8deg); }
.job:nth-child(2) { transform: rotate(1.2deg) translateY(8px); border-radius: var(--wobble-2); }
.job:nth-child(3) { transform: rotate(-.8deg); }
.job:hover { transform: rotate(0) translateY(-4px); }
.job h3 {
  font-size: 32px;
  color: var(--blue);
  margin-bottom: 6px;
}
.job p { margin: 0; font-size: 17px; }

/* ========== Wishlist band ========== */
.band {
  position: relative;
  margin: clamp(10px, 3vw, 30px) 0;
  padding: clamp(40px, 6vw, 70px) 16px;
  background:
    radial-gradient(ellipse 60% 90% at 25% 50%, rgba(116, 211, 255, .35), transparent 70%),
    linear-gradient(180deg, #1c5cf0, #123fb8);
  border-block: var(--line) solid var(--ink);
  margin-inline: -40px;
  transform: rotate(-1.2deg);
  box-shadow: 0 8px 0 var(--ink);
}
.band__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  transform: rotate(1.2deg);
}
.band__crew {
  width: 100%;
  filter: drop-shadow(0 16px 20px rgba(5, 10, 44, .55));
  animation: bob 6.5s ease-in-out infinite reverse;
}
.band__text h2 {
  font-size: clamp(36px, 4.6vw, 56px);
  text-shadow: 0 4px 0 var(--ink);
}
.band__text p {
  margin: 14px 0 30px;
  font-size: 19px;
  max-width: 30ch;
}

/* ========== FAQ ========== */
.faq {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq__item {
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: 0 5px 0 var(--ink);
}
.faq__item:nth-child(even) { border-radius: var(--wobble-2); }
.faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 64px 16px 22px;
  font-family: var(--font-hand);
  font-size: clamp(21px, 2.4vw, 25px);
  line-height: 1.2;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-top: -17px;
  font-size: 28px;
  line-height: 1;
  color: var(--white);
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 46% 54% 50% 50%;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s;
}
.faq__item[open] summary::after { transform: rotate(135deg); background: var(--orange); }
.faq__item summary:focus-visible { outline: 3px dashed var(--blue); outline-offset: -6px; border-radius: 18px; }
.faq__item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 17px;
}
.faq__item a { color: var(--blue); }

/* ========== Community ========== */
.community { padding-top: 0; }
.community__lead {
  margin: -8px 0 28px;
  color: var(--text-soft);
  text-align: center;
}
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble-2);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s, background .18s;
}
.socials li:nth-child(odd) .social { transform: rotate(-2deg); }
.socials li:nth-child(even) .social { transform: rotate(1.5deg); border-radius: var(--wobble); }
.social svg { width: 26px; height: 26px; fill: var(--blue); flex: none; }
.social--discord { color: var(--white); background: var(--discord); }
.social--discord svg { fill: var(--white); }
.socials li .social--discord:hover,
.socials li .social--discord:focus-visible { background: #6b77ff; }
.socials li .social:hover,
.socials li .social:focus-visible {
  transform: translateY(-4px) rotate(0);
  box-shadow: 0 9px 0 var(--ink);
  background: var(--cream);
}
.social:focus-visible { outline: 3px dashed var(--cyan); outline-offset: 6px; }

/* ========== Footer ========== */
.footer {
  padding: 40px 16px 110px;
  text-align: center;
  color: var(--text-soft);
  font-size: 15px;
}
.footer__logo { width: 150px; margin: 0 auto 14px; opacity: .9; }
.footer__studio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  color: var(--white);
  text-decoration: none;
}
.footer__studio img {
  width: 30px;
  height: auto;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.footer__studio-by { font-size: 14px; color: var(--text-soft); }
.footer__studio-name { font-family: var(--font-hand); font-size: 20px; }
.footer__studio:hover img,
.footer__studio:focus-visible img { transform: rotate(-12deg); }
.footer__studio:hover .footer__studio-name { text-decoration: underline; text-underline-offset: 4px; }
.footer p { margin: 4px 0; }
.footer a { color: var(--white); }
.footer__joke { font-family: var(--font-hand); font-size: 17px; opacity: .7; }

/* ========== Floating wishlist ========== */
.float-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  font-size: 22px;
  --tilt: -3deg;
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) rotate(8deg) scale(.8);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s ease, filter .18s ease;
}
.float-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(var(--lift)) rotate(var(--tilt));
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--ink);
  text-align: center;
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: 0 5px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px) rotate(-1deg);
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

/* ========== Motion ========== */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-10px) rotate(.6deg); }
}
@keyframes drift {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.08) translateX(-1.5%); }
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .jobs { grid-template-columns: 1fr; gap: 20px; max-width: 520px; }
  .job:nth-child(2) { transform: rotate(1.2deg); }
  .band__inner { grid-template-columns: 1fr; text-align: center; }
  .band__crew { max-width: 560px; margin: 0 auto; }
  .band__text p { margin-inline: auto; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero {
    min-height: auto;
    align-items: flex-end;
    padding: 78vw 16px 96px;
  }
  .stage { --ship-w: 92vw; --drifter-w: 40vw; }
  .ship { top: 0; right: -16vw; }
  .drifter { right: auto; left: -1vw; top: 44vw; }
  .rock--1 { left: 4vw; top: 6vw; width: 70px; }
  .rock--3, .rock--4, .junk--mug, .junk--plunger { display: none; }
  .rock--front { width: 120px; bottom: -30px; }
  .junk--battery { left: 84vw; top: 74vw; width: 44px; }
  .hero__content { align-items: center; text-align: center; margin: 0 auto; }
  .hero__logo { width: min(440px, 92%); margin: 0; }
  .hero__tagline { margin-bottom: 26px; }
  .hero__meta { font-size: 15px; }
  .hero__sub { align-items: center; margin-top: 22px; }
  .band { margin-inline: 0; transform: none; }
  .band__inner { transform: none; }

  .float-cta { left: 16px; right: 16px; bottom: 14px; justify-content: center; --tilt: -1deg; }
  .toast { bottom: 90px; }
  .footer { padding-bottom: 100px; }
}

/* ========== Legal pages (privacy, terms) ========== */
.doc-page {
  /* static stars: these pages skip the canvas starfield script */
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, #cfe3ff 50%, transparent 51%),
    radial-gradient(2px 2px at 260px 160px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 210px, #9fc2ff 50%, transparent 51%),
    radial-gradient(ellipse 70% 30% at 20% 10%, rgba(38, 92, 230, .3), transparent 70%);
  background-size: 360px 240px, 360px 240px, 360px 240px, 360px 240px, 100% 100%;
  background-attachment: fixed;
}
.doc-header {
  width: min(820px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.doc-header__logo img { width: 130px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.doc-header__logo:hover img { transform: rotate(-3deg) scale(1.04); }
.doc-header__back {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--white);
  text-decoration: none;
  opacity: .85;
  transition: opacity .2s;
}
.doc-header__back:hover { opacity: 1; text-decoration: underline; }

.doc {
  width: min(820px, 100% - 32px);
  margin: 0 auto;
  padding: 40px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.doc .sticker-title { margin-bottom: 14px; }
.doc__updated { margin: 0 0 26px; color: var(--text-soft); font-size: 15px; }

.doc__card {
  width: 100%;
  padding: clamp(22px, 4vw, 44px);
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: var(--drop);
  font-size: 17px;
  line-height: 1.65;
}
.doc__card h2 {
  margin: 34px 0 10px;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--blue);
}
.doc__card > h2:first-child { margin-top: 0; }
.doc__card p { margin: 0 0 14px; }
.doc__card ul { margin: 0 0 14px; padding-left: 22px; }
.doc__card li { margin-bottom: 6px; }
.doc__card a { color: var(--blue); }
.doc__card strong { font-weight: 400; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.doc__summary {
  margin: 22px 0 8px;
  padding: 18px 22px 8px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--wobble-2);
  transform: rotate(-.6deg);
}
.doc__summary h2 { margin-top: 0; font-size: 24px; color: var(--ink); }
.doc__contact { font-size: 18px; }

.footer__sep { margin: 0 8px; opacity: .5; }