/* ========================================================
   PET MUTANT — Indie game studio style
   References: cultofthelamb.com, capybaragames.com
   ======================================================== */

:root {
  --display-font: 'Bowlby One', 'Sigmar', system-ui, sans-serif;
  --bg-deep: #1a0e1f;
  --bg-card: #2a1a35;
  --bg-card-2: #3d2547;
  --accent-pink: #e06594;
  --accent-pink-dark: #b73378;
  --accent-cyan: #5eead4;
  --accent-yellow: #fde047;
  --accent-green: #84e154;
  --accent-purple: #a855f7;
  --cream: #fef3d7;
  --ink: #0a0612;
  --grain: 0.4;

  /* Site-wide "body copy / small text" sizing. Anchored on the about-section
     paragraph that Nate flagged as the right size — anything sub-headline
     (descriptions, footnotes, list captions, drawer rows, etc.) should pull
     these vars so the whole site reads consistently. */
  --text-body-size: 17px;
  --text-body-leading: 1.6;

  /* ===== Hero ray palette =========================================
     The hero's spinning sunbeams alternate between a "warm" and "cool"
     band. Each band tweens through colors *within its own group only*,
     so warm stays warm and cool stays cool — no brown halftones during
     transitions. Edit these to taste. Each value should already
     include its alpha. */
  /* All palette colors are intentionally high-saturation. Linear sRGB
     interpolation between two same-hue saturated colors stays
     saturated; pulling any single value toward a "soft/dusty" version
     drops the cycle into a less vibrant midpoint, which is what was
     reading as washed-out before. Alphas are also pushed to 0.80 so
     the rays dominate the bg instead of mixing with it. */
  --rays-warm-1: rgba(255,  30, 150, 0.80);  /* hot pink */
  --rays-warm-2: rgba(255,  80, 180, 0.80);  /* bright pink */
  --rays-warm-3: rgba(245,  50, 130, 0.80);  /* magenta pink */
  --rays-warm-4: rgba(255,   0, 110, 0.80);  /* deep pink */
  --rays-warm-5: rgba(255,  60, 170, 0.80);  /* punch pink */

  --rays-cool-1: rgba(  0, 130, 255, 0.80);  /* true blue */
  --rays-cool-2: rgba( 40, 180, 255, 0.80);  /* sky blue */
  --rays-cool-3: rgba( 80, 100, 255, 0.80);  /* royal blue */
  --rays-cool-4: rgba(  0, 170, 255, 0.80);  /* electric blue */
  --rays-cool-5: rgba( 60, 200, 255, 0.80);  /* cyan blue */
}

/* Registered properties — required so that --ray-warm/--ray-cool
   actually interpolate (tween) between palette colors in the keyframes
   below. Without these the colors would snap. */
@property --ray-warm {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255, 30, 150, 0.80);
}
@property --ray-cool {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(0, 130, 255, 0.80);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--cream);
  font-family: 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
  /* Disable Chrome's scroll-anchoring globally. Without this, when
     a delayed font swap or lazy image load shifts content above the
     viewport, the browser silently re-scrolls to "keep content
     stable" — which after a programmatic smooth-scroll reads as a
     mysterious second scroll a few seconds later. */
  overflow-anchor: none;
}

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

.display {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}

/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 36px;
}
/* Dark scrim behind the nav so the logo + pills stay legible over busy
   content. Opacity is driven by scroll (--nav-scrim-opacity, set in JS):
   0 at the very top of the page, ramping to 1 once content scrolls under
   the bar. Sits behind the nav's children via z-index:-1 (the fixed .nav
   is its own stacking context). */
.nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110%;
  background: linear-gradient(
    to bottom,
    rgba(10, 6, 18, 0.95) 0%,
    rgba(10, 6, 18, 0.82) 40%,
    rgba(10, 6, 18, 0) 100%
  );
  opacity: var(--nav-scrim-opacity, 0);
  transition: opacity 120ms linear;
  pointer-events: none;
  z-index: -1;
}
.nav-logo-sticker {
  width: 55px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.nav-logo-sticker:hover { transform: rotate(-6deg) scale(1.05); }
.nav-menu-btn {
  background: var(--cream);
  border: 3px solid var(--ink);
  color: var(--ink);
  width: 56px; height: 56px;
  border-radius: 14px;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
  opacity: 0.5;
  pointer-events: none;
}
.nav-menu-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.nav-menu-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.nav-menu-btn span {
  width: 22px; height: 3px; background: var(--ink); display: block;
  position: relative;
}
.nav-menu-btn span::before, .nav-menu-btn span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--ink);
}
.nav-menu-btn span::before { top: -7px; }
.nav-menu-btn span::after { top: 7px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Neutral-dark base under the rays — when this layer was tinted with
     pink-dark/purple, the translucent blue ray bands would mix with it
     to a muddy olive-brown. A near-black backdrop lets each ray show
     close to its true color. */
  background:
    radial-gradient(ellipse at 50% 50%, #1f1228 0%, var(--bg-deep) 70%);
}
.hero-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 260vmax; height: 260vmax;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* z-index 0 keeps the rays behind the logo (which sits at the
     normal flow level inside the stage) but the tagline + signup form
     have z-index 1 so they stay readable on top of these huge rays. */
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    var(--ray-warm)   0deg  15deg, var(--ray-cool)  15deg  30deg,
    var(--ray-warm)  30deg  45deg, var(--ray-cool)  45deg  60deg,
    var(--ray-warm)  60deg  75deg, var(--ray-cool)  75deg  90deg,
    var(--ray-warm)  90deg 105deg, var(--ray-cool) 105deg 120deg,
    var(--ray-warm) 120deg 135deg, var(--ray-cool) 135deg 150deg,
    var(--ray-warm) 150deg 165deg, var(--ray-cool) 165deg 180deg,
    var(--ray-warm) 180deg 195deg, var(--ray-cool) 195deg 210deg,
    var(--ray-warm) 210deg 225deg, var(--ray-cool) 225deg 240deg,
    var(--ray-warm) 240deg 255deg, var(--ray-cool) 255deg 270deg,
    var(--ray-warm) 270deg 285deg, var(--ray-cool) 285deg 300deg,
    var(--ray-warm) 300deg 315deg, var(--ray-cool) 315deg 330deg,
    var(--ray-warm) 330deg 345deg, var(--ray-cool) 345deg 360deg
  );
  /* Different durations on the warm/cool cycles so the two groups never
     stay in lockstep — gives the background more organic variety. */
  animation:
    spin 60s linear infinite,
    rays-warm-cycle 24s ease-in-out infinite,
    rays-cool-cycle 31s ease-in-out infinite;
  opacity: 1;
  /* "Lights come on" transition when js-rope-armed is removed: the
     rays fade from dim/grey to full saturation and brightness. The
     spin/cycle animations resume from their paused frame at the same
     moment (no transition on animation-play-state — it just flips). */
  transition: filter 0.7s ease-out;
}
/* Rope-armed state: rays freeze + dim like the lights are off. Removed
   when the rope snaps (assets/launch.js → releaseLogo). */
html.js-rope-armed .hero-rays {
  animation-play-state: paused;
  filter: brightness(0.18) saturate(0.4);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rays-warm-cycle {
  0%   { --ray-warm: var(--rays-warm-1); }
  20%  { --ray-warm: var(--rays-warm-2); }
  40%  { --ray-warm: var(--rays-warm-3); }
  60%  { --ray-warm: var(--rays-warm-4); }
  80%  { --ray-warm: var(--rays-warm-5); }
  100% { --ray-warm: var(--rays-warm-1); }
}
@keyframes rays-cool-cycle {
  0%   { --ray-cool: var(--rays-cool-1); }
  20%  { --ray-cool: var(--rays-cool-2); }
  40%  { --ray-cool: var(--rays-cool-3); }
  60%  { --ray-cool: var(--rays-cool-4); }
  80%  { --ray-cool: var(--rays-cool-5); }
  100% { --ray-cool: var(--rays-cool-1); }
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 900px;
}
/* Sizes itself to the logo and acts as the positioning context for
   .hero-rays — so the rays' rotation pivot is the logo's true center,
   not the hero section's center. Without this, on mobile the rays
   look like they're orbiting from somewhere below the logo because
   the tagline + signup pull the section-center downward. */
.hero-logo-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.hero-logo {
  width: min(78vw, 720px);
  /* Reserve the correct height BEFORE the PNG decodes. Without this,
     the <img> reports height: auto with no intrinsic info pre-decode,
     the hero-logo-wrap stays ~0px tall, and once decode finishes the
     wrapper snaps to its real height — pushing everything below down.
     1440/924 matches the source PNG so this is exactly right. */
  aspect-ratio: 1440 / 924;
  /* One-shot fall-in + squash-bounce on page load. Bottom-anchored origin
     keeps the squash feeling planted on impact. Ends at rotate(0) so the
     wrapper's bob (running off center origin) fully owns the swing. */
  animation: hero-fall-bounce 1.4s cubic-bezier(.36, .07, .19, .97) both;
  transform-origin: 50% 100%;
}
/* Rope-intro armed: logo is held off-stage until the user pulls the
   rope. assets/launch.js removes this class on rope-break, at which
   point .hero-logo's animation runs as normal. The opacity:0 +
   animation-play-state:paused combo means the logo doesn't even render
   its first keyframe until released, avoiding a one-frame flash at the
   top of the screen. */
html.js-rope-armed .hero-logo {
  opacity: 0;
  animation-play-state: paused;
}
html.js-rope-armed .hero-logo-wrap { animation: none; }
/* Returning visitor in the same tab session — the rope-pull intro
   already played, so render the hero as if it had always been there:
   no fall-bounce, no bob handoff delay, no screen shake, no tagline
   pop-in. The tagline reveal logic in assets/launch.js also bails
   when this class is present (no event ever fires for it). */
html.hero-opened .hero-logo {
  animation: none;
  opacity: 1;
}
html.hero-opened .hero-logo-wrap { animation: none; }
html.hero-opened body.page-launch { animation: none; }
/* Specificity bumped (html.js.hero-opened) so it wins over the
   html.js .hero-tagline { visibility: hidden } rule below — without it
   the tagline stays invisible after a drop reveal, because pmHeroIntroSeen
   skips the rope intro and pm:hero:fall (which would otherwise trigger
   revealTagline()) never fires. */
html.js.hero-opened .hero-tagline { visibility: visible; }
/* Hide the "pet the mutant" hotspot while the logo is off-stage —
   otherwise its focus outline shows through as a dashed rectangle and
   keyboard tab order lands on an invisible target. Removed alongside
   js-rope-armed when the rope snaps. */
html.js-rope-armed .heart-spot-logo { display: none; }
@keyframes hero-fall-bounce {
  0% {
    transform: translateY(-115vh) rotate(-8deg);
    animation-timing-function: cubic-bezier(.55, .085, .68, .53); /* gravity ease-in */
  }
  60% {
    transform: translateY(0) rotate(0deg);
  }
  /* Impact: squash horizontally, compress vertically. */
  66% { transform: translateY(0) scale(1.12, 0.84) rotate(0deg); }
  /* Bounce up, slightly stretched. */
  76% { transform: translateY(-26px) scale(0.96, 1.06) rotate(0deg); }
  /* Second, smaller squash. */
  84% { transform: translateY(0) scale(1.05, 0.94) rotate(0deg); }
  92% { transform: translateY(-8px) scale(0.99, 1.02) rotate(0deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

/* ====================================================================
   Hero rope intro — Verlet rope sim driven by assets/launch.js.
   .hero-rope-stage is a full-viewport pointer-events:none overlay
   containing the SVG polyline (the rope) and the .hero-rope-ball
   (the draggable knob). Motion lives in JS — no keyframes here.
   ==================================================================== */
.hero-rope-stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  /* Drops the entire stage (rope + ball) in from above the viewport on
     mount. The Verlet sim is already running underneath at rest with
     the ball pre-kicked, so when the stage lands the ball is mid-tug
     and continues bouncing elastically. backwards fill-mode means the
     stage renders at translateY(-100%) from the moment it appears in
     the DOM, before the animation's first frame — no pop. */
  animation: hero-rope-stage-drop 0.6s cubic-bezier(.55, .085, .68, .53) backwards;
}
@keyframes hero-rope-stage-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
/* Retract — used when a drop reveal fires while the rope is still
   dangling. The whole stage slides upward off screen so the present
   takes over the spotlight. JS suppresses pointer-events + cancels
   the Verlet sim before adding this class. */
.hero-rope-stage.is-retracting {
  pointer-events: none;
  animation: hero-rope-stage-retract 0.55s cubic-bezier(.5, .04, .9, .25) forwards;
}
@keyframes hero-rope-stage-retract {
  from { transform: translateY(0); }
  to   { transform: translateY(-110%); }
}
.hero-rope-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* overflow:visible lets the polyline extend above the viewBox's top
     edge so the pin (negative-y) stays invisibly off-screen. The stage's
     own overflow:hidden then clips it at the viewport edge, giving the
     impression the rope continues off-screen upward. */
  overflow: visible;
  pointer-events: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-rope-ball {
  /* JS sets transform: translate(x, y) every frame to track the
     last simulation point. The transform anchor is the ball's top-
     left; JS subtracts half the ball size (= 32px with border-box)
     so the visual center lands ON the simulation point — keeping the
     ball centered on the rope. box-sizing:border-box is critical:
     without it the 4px border adds to the visual size and the ball
     drifts ~4px right of the rope line. */
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid var(--ink);
  /* Cel-shaded sphere — three hard-stop bands (highlight, midtone,
     shadow) anchored to a top-left light source. Double-stops at
     the same percentage produce the crisp comic-book band edges
     instead of a smooth radial blend. */
  background: radial-gradient(
    circle at 32% 28%,
    #fff7b3   0%   22%,
    #fde047  22%   62%,
    #b9931b  62%  100%
  );
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: filter 140ms, color 140ms;
  will-change: transform;
}
/* Hover + held states use the same banded gradient with a pink palette
   so the cel-shading is consistent across all states. */
.hero-rope-ball:hover,
.hero-rope-ball.is-held {
  background: radial-gradient(
    circle at 32% 28%,
    #ffd2e2   0%   22%,
    var(--accent-pink)  22%   62%,
    #7e2748  62%  100%
  );
  color: var(--cream);
}
.hero-rope-ball.is-held { cursor: grabbing; }
.hero-rope-stage.is-broken .hero-rope-ball { pointer-events: none; }
/* Invisible hit-area expander — extends pointer capture 32px in every
   direction so the effective grab zone is ~128px (2× visual size). The
   pseudo-element is part of the button's rendering, so clicks/touches
   on it route to the button's handlers. overflow:visible on the parent
   ensures the pseudo isn't clipped by the rounded button background. */
.hero-rope-ball { overflow: visible; }
.hero-rope-ball::before {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  /* No background — purely a hit target. */
}
@media (prefers-reduced-motion: reduce) {
  .hero-rope-stage { display: none; }
}

/* Screen shake on logo impact. Scoped to .page-launch only — every other
   page (checkout, thanks) has no logo to slam, so the body shouldn't jolt.
   Delay = ~60% of the 1.4s fall so it kicks in the instant the logo first
   hits its resting line. Body transform makes position:fixed descendants
   (nav, grain) shake with the page, selling it as a single cohesive jolt. */
body.page-launch { animation: screen-shake 0.55s ease-out 0.82s 1; }
/* Rope intro armed: skip the page-load shake and wait for JS to
   re-trigger it via .is-falling after the rope breaks. */
html.js-rope-armed body.page-launch { animation: none; }
html.js-rope-armed body.page-launch.is-falling {
  animation: screen-shake 0.55s ease-out 0.82s 1;
}
@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-3px, 2px); }
  30%  { transform: translate(3px, -2px); }
  45%  { transform: translate(-2px, -1px); }
  60%  { transform: translate(2px, 2px); }
  75%  { transform: translate(-1px, -1px); }
  90%  { transform: translate(1px, 0); }
  100% { transform: translate(0, 0); }
}
/* Tagline row + the cta below sit ABOVE the rays (which are now
   anchored to the logo and span the section). z-index: 1 keeps them
   readable on top of the huge spinning conic-gradient. */
.hero-tagline-row {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hero-countdown {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  font-family: var(--display-font);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: clamp(14px, 2vw, 18px);
  box-shadow: 4px 4px 0 var(--accent-pink);
  /* translateY shifts the bar up by ~1 bar-height without affecting
     layout of the logo/tagline below. The bar's intrinsic height is
     ~40px (8px padding × 2 + ~18px content + 3px border × 2). */
  transform: translateY(-40px) rotate(-0.5deg);
}
.hero-countdown-label { opacity: 0.85; }
.hero-countdown-clock {
  color: var(--accent-yellow);
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.04em;
}
/* 24-hour blackout after a drop reveal — hides both countdown
   surfaces so drop day reads celebratory. Set by the inline head
   script reading localStorage.pmCountdownHiddenUntil. */
html.countdown-hidden .hero-countdown,
html.countdown-hidden .signup-countdown { display: none; }
.hero-tagline {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(20px, 2.8vw, 36px);
  line-height: 1.05;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 18px 0 0;
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  display: inline-block;
  transform: rotate(-2deg);
}
/* JS-enabled hides the tagline until assets/launch.js → revealTagline
   splits the text into per-letter spans and adds .is-revealed. The
   no-JS fallback (no html.js class) shows the tagline as before. */
html.js .hero-tagline { visibility: hidden; }
html.js .hero-tagline.is-revealed { visibility: visible; }
.hero-tagline-word {
  display: inline-block;
  white-space: nowrap;
}
.hero-tagline-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0.2) rotate(var(--r, 0deg)) translateY(var(--ty, 20px));
  will-change: transform, opacity;
}
.hero-tagline.is-revealed .hero-tagline-char {
  animation: hero-tagline-pop 0.55s cubic-bezier(.34, 1.7, .64, 1) var(--d, 0ms) both;
}
@keyframes hero-tagline-pop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(var(--r, 0deg)) translateY(var(--ty, 20px));
  }
  60% {
    opacity: 1;
    transform: scale(1.22) rotate(0deg) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero-tagline { visibility: visible; }
  .hero-tagline-char {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* Hero email signup */
.hero-signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 540px;
}
.hero-signup-label {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
.hero-signup-row {
  display: flex;
  width: 100%;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  padding: 5px;
}
.hero-signup-row input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 22px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.hero-signup-row input::placeholder { color: rgba(0,0,0,0.4); }
.hero-signup-row button {
  background: var(--accent-pink);
  color: var(--cream);
  border: 3px solid var(--ink);
  padding: 10px 22px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.hero-signup-row button:hover { transform: rotate(-3deg); background: var(--accent-yellow); color: var(--ink); -webkit-text-stroke: 0; }
.hero-signup-done {
  background: var(--cream);
  color: var(--ink);
  padding: 18px 30px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-cta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: 0.2em;
  color: var(--cream);
  opacity: 0.8;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  animation: bob-scroll 1.6s ease-in-out infinite;
}
@keyframes bob-scroll { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* Marquee */
.marquee {
  background: var(--accent-yellow);
  border-top: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  overflow: hidden;
  position: relative;
  z-index: 10;
  padding: 14px 0;
  transform: rotate(-1.5deg);
  margin: -20px -30px;
}
.marquee.alt { background: var(--accent-pink); transform: rotate(1deg); margin: 0 -30px -20px; }
.marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: scroll-x var(--marq-dur, 30s) linear infinite;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.04em;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee-track > span:not(.dot) {
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.marquee-track .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.marquee.alt .marquee-track { color: #fff; -webkit-text-stroke: 0; }
.marquee.alt .marquee-track .dot { background: #fff; border: none; }
/* --marq-shift is set in JS to the exact pixel width of one half post-clone,
   so the loop boundary lands on a whole pixel (no 0.5px subpixel flicker). */
@keyframes scroll-x { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(calc(var(--marq-shift, 50%) * -1), 0, 0); } }
.marquee.alt .marquee-track { animation-direction: reverse; }

/* Showcase */
.showcase {
  background: var(--bg-deep);
  padding: 100px 32px 80px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.showcase-head {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}
.showcase-eyebrow {
  display: inline-block;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  background: var(--accent-cyan);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
  margin-bottom: 16px;
}
.showcase-title {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
}
.showcase-title .pink { color: var(--accent-pink); }
.showcase-title .yellow { color: var(--accent-yellow); }
.showcase-sub {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.85;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1800px;
  margin: 0 auto;
}
@media (max-width: 800px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }

.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
}
.tile:hover {
  transform: translate(-3px, -3px) rotate(-1deg);
  box-shadow: 8px 8px 0 var(--ink);
  z-index: 5;
}
.tile-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-time {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  color: var(--cream);
  font-size: 22px;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.04em;
  z-index: 3;
}
.tile-coin {
  position: absolute;
  top: 12px; right: 14px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-yellow);
  border: 3px solid var(--ink);
  z-index: 3;
  box-shadow: 2px 2px 0 var(--ink);
}
.tile-label {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}
.tile-label .price { color: var(--accent-yellow); }

/* Countdown / coming soon */
.countdown {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.countdown-intro {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(20px, 2.5vw, 30px);
  text-transform: uppercase;
  color: var(--cream);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 600px) { .countdown-grid { grid-template-columns: repeat(2, 1fr); } }
.countdown-unit {
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 26px 12px 20px;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
}
.countdown-unit:nth-child(1) { transform: rotate(-1.5deg); }
.countdown-unit:nth-child(2) { transform: rotate(1deg); }
.countdown-unit:nth-child(3) { transform: rotate(-1deg); }
.countdown-unit:nth-child(4) { transform: rotate(1.5deg); }
.countdown-unit:hover {
  box-shadow: 9px 9px 0 var(--ink);
  transform: translate(-2px, -2px) rotate(-3deg);
}
.countdown-num {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  color: var(--cream);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  /* Stacked single-pixel offsets render as a solid filled shadow on iOS,
     where a single text-shadow + text-stroke leaves a hollow-outline ghost. */
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown-lbl {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-top: 10px;
}
.countdown-date {
  margin-top: 36px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(16px, 2vw, 24px);
  text-transform: uppercase;
  color: var(--accent-yellow);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.06em;
}
.countdown-live {
  margin-top: 32px;
  display: inline-block;
  padding: 22px 42px;
  background: var(--accent-green);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 8px 8px 0 var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  text-transform: uppercase;
  color: var(--cream);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
}

/* About */
.about {
  background: var(--bg-card);
  padding: 100px 32px;
  position: relative;
  border-top: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  overflow: hidden;
}
.about-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

.about-portrait {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  border: 5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 12px 12px 0 var(--ink);
  position: relative;
  overflow: hidden;
  transform: rotate(-2deg);
}
.about-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.about-portrait .label {
  position: absolute;
  bottom: 14px; left: 14px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  padding: 6px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}

.about-content h2 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
}
.about-content h2 .pink { color: var(--accent-pink); }
.about-content h2 .green { color: var(--accent-green); }
.about-content p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  margin: 0 0 14px;
  color: var(--cream);
  opacity: 0.92;
}
.about-content strong {
  background: var(--accent-yellow);
  color: var(--ink);
  padding: 0 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.about-sign {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 24px;
  color: var(--accent-pink);
  text-transform: uppercase;
  margin-top: 18px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* Socials */
.socials {
  background: var(--bg-deep);
  padding: 90px 32px 100px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.socials-head {
  max-width: 1200px;
  margin: 0 auto 36px;
  text-align: center;
}
.socials-head h3 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  margin: 0;
  text-transform: uppercase;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
  line-height: 0.95;
}
.socials-head h3 .at { color: var(--accent-pink); }
.socials-head p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.85;
  margin: 18px auto 0;
  max-width: 540px;
}

.socials-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .socials-grid { grid-template-columns: repeat(2, 1fr); } }

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 18px 26px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s;
}

.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10,6,18,0.22) 1.4px, transparent 1.8px);
  background-size: 12px 12px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.25s;
}

.social-card::after {
  content: "✦";
  position: absolute;
  top: 8px;
  right: 14px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  transform: rotate(10deg);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

.social-card:nth-child(odd)  { transform: rotate(-1deg); }
.social-card:nth-child(even) { transform: rotate(1deg); }

.social-card:hover {
  transform: translate(-3px, -4px) rotate(-2.5deg);
  box-shadow: 10px 10px 0 var(--ink);
}
.social-card:nth-child(2):hover { transform: translate(-3px, -4px) rotate(2.5deg); }
.social-card:nth-child(4):hover { transform: translate(-3px, -4px) rotate(2.5deg); }

.social-card:hover::before { opacity: 0.85; }
.social-card:hover::after { transform: rotate(-15deg) scale(1.3); }

.social-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.social-icon svg {
  width: 64%;
  height: 64%;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
}

.social-card:hover .social-icon {
  animation: socialPop 0.6s ease-in-out;
}

@keyframes socialPop {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-15deg) scale(1.12); }
  50%  { transform: rotate(12deg) scale(1.12); }
  75%  { transform: rotate(-6deg) scale(1.06); }
  100% { transform: rotate(0deg) scale(1); }
}

.social-name {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 8px;
}

.social-handle {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  background: var(--ink);
  color: var(--cream);
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

.social-card:hover .social-handle {
  transform: scale(1.06);
}

@media (max-width: 480px) {
  .socials { padding: 70px 12px 80px; }
  .socials-grid { gap: 10px; }
  .social-card { padding: 22px 8px 18px; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); min-width: 0; }
  .social-card::after { top: 6px; right: 8px; font-size: 16px; }
  .social-icon { width: 54px; height: 54px; margin-bottom: 10px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
  .social-name { margin-bottom: 6px; }
  .social-handle {
    padding: 3px 9px;
    letter-spacing: 0;
    /* Long handles like "youtube.com/petmutant" used to push the pill
       past the card edge — break-all gives the renderer permission to
       wrap mid-string when there's no other break opportunity. */
    word-break: break-all;
  }
}

/* Signup section */
.signup-section {
  background: var(--accent-pink);
  padding: 100px 32px;
  position: relative;
  border-top: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  overflow: hidden;
}
.signup-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.signup-inner h2 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
}
.signup-inner p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  margin: 0 0 28px;
  color: var(--ink);
  font-weight: 700;
  max-width: 580px;
  margin-left: auto; margin-right: auto;
}
.signup-form {
  display: flex;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  padding: 6px;
}
.signup-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 22px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.signup-form input::placeholder { color: rgba(0,0,0,0.4); }
.signup-form button {
  background: var(--accent-pink);
  color: var(--cream);
  border: 3px solid var(--ink);
  padding: 12px 26px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.signup-form button:hover {
  transform: rotate(-3deg);
  background: var(--accent-yellow);
  color: var(--ink);
  -webkit-text-stroke: 0;
}
.signup-done {
  background: var(--cream);
  color: var(--ink);
  padding: 20px 30px;
  border-radius: 999px;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  display: inline-block;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}

/* Bottom signup form on small viewports — match the proportions of the
   hero form so the input + button fit cleanly inside the rounded capsule
   instead of overflowing the section edge. */
@media (max-width: 600px) {
  .signup-section { padding: 70px 18px; }
  .signup-form {
    padding: 5px;
    border-width: 3px;
    box-shadow: 5px 5px 0 var(--ink);
    max-width: 420px;
  }
  .signup-form input {
    font-size: 16px;
    padding: 10px 16px;
  }
  .signup-form button {
    font-size: 15px;
    padding: 10px 16px;
    border-width: 2px;
  }
  .signup-inner h2 { text-shadow: 4px 4px 0 var(--ink); }
  .signup-inner p { font-size: var(--text-body-size); }
  .signup-done { padding: 16px 22px; font-size: 18px; box-shadow: 5px 5px 0 var(--ink); }
}

/* Footer */
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 70px 32px 30px;
  position: relative;
  z-index: 2;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Two-column layout: brand stretches to take available space, social
     hugs the right edge. Previously this was 2fr/1fr/1fr/1fr with the
     last two columns empty, which left the social icons stranded in
     the middle. */
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
/* Icon-only social row in the footer — replaces the old "Social" h4
   + text link list. Inherits color from `footer a` (cream), flips to
   pink on hover. SVGs use currentColor so they recolor with the
   anchor. justify-content:flex-end pins them to the right of their
   grid cell on desktop. */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 120ms, transform 120ms, color 120ms;
}
.footer-social a:hover {
  opacity: 1;
  color: var(--accent-pink);
  transform: translate(-1px, -1px);
}
.footer-social svg { width: 30px; height: 30px; display: block; }
/* Mobile: the footer-grid collapses to one column with the brand on
   top and .footer-social on the next row. Render the icons as a
   single horizontal row centered below the brand text — same shape
   as desktop, just sitting under the brand instead of beside it.
   Slightly larger hit area than desktop (52px) for thumb tap. */
@media (max-width: 760px) {
  .footer-social {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .footer-social a { width: 52px; height: 52px; }
  .footer-social svg { width: 32px; height: 32px; }
}
footer h4 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--accent-yellow);
  letter-spacing: 0.04em;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer a { color: var(--cream); font-weight: 600; font-size: var(--text-body-size); line-height: var(--text-body-leading); opacity: 0.85; }
footer a:hover { color: var(--accent-pink); opacity: 1; }
.footer-brand-img {
  width: 180px;
  margin-bottom: 14px;
}
.footer-brand p { font-size: var(--text-body-size); line-height: var(--text-body-leading); opacity: 0.6; max-width: 360px; }
.footer-meta {
  max-width: 1200px;
  margin: 50px auto 0;
  padding-top: 22px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.65;
  gap: 12px;
}
.footer-meta-made {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-flag-emoji {
  font-size: 14px;
  line-height: 1;
}
/* Mobile: stack the three pieces vertically, all centered. */
@media (max-width: 760px) {
  .footer-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* Hidden by default — shown only after form submission */
[hidden] { display: none !important; }

/* Visually-hidden label for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer "coming soon" placeholder links */
footer a.coming-soon {
  cursor: not-allowed;
  opacity: 0.55;
}
footer a.coming-soon::after {
  content: " · soon";
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
footer a.coming-soon:hover { color: var(--cream); opacity: 0.7; }

/* ===========================================================
   Subtle background motion: halftone drift, corner sun-rays,
   pulsing radial highlight, scroll-reveal fade.
   =========================================================== */

/* Hand-placed halftone speckle (varied dot sizes) that drifts diagonally.
   Multiple radial-gradients in a single 128×128 tile create the irregular
   feel of indie-print misregistration without needing a bitmap. */
.showcase::before, .about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at  20px  18px, rgba(254,243,215,0.18) 1.4px, transparent 2.4px),
    radial-gradient(circle at  62px  44px, rgba(254,243,215,0.18) 2.8px, transparent 3.8px),
    radial-gradient(circle at 104px  22px, rgba(254,243,215,0.18) 1.0px, transparent 1.8px),
    radial-gradient(circle at  38px  72px, rgba(254,243,215,0.18) 2.0px, transparent 3.0px),
    radial-gradient(circle at  84px  92px, rgba(254,243,215,0.18) 1.5px, transparent 2.5px),
    radial-gradient(circle at 118px  68px, rgba(254,243,215,0.18) 3.2px, transparent 4.2px),
    radial-gradient(circle at  10px 110px, rgba(254,243,215,0.18) 0.9px, transparent 1.6px),
    radial-gradient(circle at  74px 116px, rgba(254,243,215,0.18) 2.3px, transparent 3.3px),
    radial-gradient(circle at 110px 100px, rgba(254,243,215,0.18) 1.2px, transparent 2.0px),
    radial-gradient(circle at  48px   6px, rgba(254,243,215,0.18) 1.0px, transparent 1.8px),
    radial-gradient(circle at   8px  56px, rgba(254,243,215,0.18) 2.6px, transparent 3.6px),
    radial-gradient(circle at  92px  60px, rgba(254,243,215,0.18) 1.4px, transparent 2.2px);
  background-size: 128px 128px;
  background-repeat: repeat;
  animation: halftone-drift 60s linear infinite;
  z-index: 0;
}
@keyframes halftone-drift {
  to { background-position: 384px -256px; }
}

/* Lift content above the drifting halftone + corner rays */
.showcase-head, .countdown, .about-grid,
.socials-head, .socials-grid { position: relative; z-index: 1; }

/* Big blurred sun-ray glow filling the showcase + socials sections.
   Centered and oversized so the rays read as expansive sunbeams sweeping
   through the section, not a small pinwheel parked in a corner. */
.showcase::after, .socials::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 260vmax;
  height: 260vmax;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(255, 77, 166, 0.14)   0deg  15deg, transparent  15deg  30deg,
    rgba(94, 234, 212, 0.12)  30deg  45deg, transparent  45deg  60deg,
    rgba(255, 77, 166, 0.14)  60deg  75deg, transparent  75deg  90deg,
    rgba(94, 234, 212, 0.12)  90deg 105deg, transparent 105deg 120deg,
    rgba(255, 77, 166, 0.14) 120deg 135deg, transparent 135deg 150deg,
    rgba(94, 234, 212, 0.12) 150deg 165deg, transparent 165deg 180deg,
    rgba(255, 77, 166, 0.14) 180deg 195deg, transparent 195deg 210deg,
    rgba(94, 234, 212, 0.12) 210deg 225deg, transparent 225deg 240deg,
    rgba(255, 77, 166, 0.14) 240deg 255deg, transparent 255deg 270deg,
    rgba(94, 234, 212, 0.12) 270deg 285deg, transparent 285deg 300deg,
    rgba(255, 77, 166, 0.14) 300deg 315deg, transparent 315deg 330deg,
    rgba(94, 234, 212, 0.12) 330deg 345deg, transparent 345deg 360deg
  );
  filter: blur(28px);
  animation: spin-corner 90s linear infinite;
  z-index: 0;
  mix-blend-mode: screen;
}
.socials::after  { animation-direction: reverse; }
@keyframes spin-corner {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pulsing radial highlight on the pink Signup panel */
.signup-section::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22) 0%, transparent 55%);
  animation: pulse-glow 8s ease-in-out infinite;
  z-index: 0;
}
.signup-inner { position: relative; z-index: 1; }
@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Cartoon star burst — fires once when the hero logo hits the ground.
   z-index 4 sits ABOVE the hero rays (z:1) but BELOW the .hero-content
   stacking context (z:5), so stars appear behind the logo. */
.star-particle {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  width: 72px;
  height: 72px;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
  animation: star-burst 1.9s cubic-bezier(.18, .72, .3, 1) forwards;
}
.star-particle svg { width: 100%; height: 100%; display: block; }
/* Mini variant — smaller + shorter for subtle UI feedback like a cart
   add. Used with PMParticles.burst({ mini: true }). */
.star-particle.is-mini {
  width: 22px;
  height: 22px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
  animation-duration: 0.8s;
}
/* Heart-shape variant — slightly smaller than stars so the two shapes
   read as distinct in a mixed burst. Uses the same star-burst keyframe
   for motion. */
.star-particle.is-heart { width: 48px; height: 48px; }
/* Cloud-puff variant for the crate-land moment. Soft, drifty, fades
   slowly — reads as cartoony cumulus clouds blooming out of the floor
   rather than dirt or glitter. */
.star-particle.is-dust {
  width: 90px;
  height: 56px;
  animation-duration: 1.15s;
  filter: blur(0.5px) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}
@keyframes star-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 360deg)) scale(1.1);
    opacity: 0;
  }
}

/* Click hotspots over the two monsters — invisible, but cursor: pointer hints
   that something happens when you tap. Heart particles spawn on click. */
.hero-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* Bob runs on the wrapper with a centered origin so the logo *swings*
     around its true center instead of pivoting on its bottom edge. The
     1.4s delay hands off cleanly from .hero-logo's fall-bounce. */
  animation: hero-bob 4s ease-in-out 1.4s infinite;
  transform-origin: 50% 50%;
  /* Isolate so the ::before halo (z-index: -1) stays scoped behind
     the logo image instead of leaking out of the wrapper's stack. */
  isolation: isolate;
}
/* Soft dark halo — reads as a giant very-blurry drop shadow behind
   the logo. Sized at ~180% of the wrapper so the gradient fades to
   transparent well before its own edges, then blur(...) feathers it
   further so there's no hard ring against the rays. */
.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 22%,
    rgba(0, 0, 0, 0.00) 55%
  );
  filter: blur(40px);
}
.heart-spot {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 6;
}
.heart-spot:focus-visible {
  outline: 3px dashed rgba(255, 94, 138, 0.7);
  outline-offset: 4px;
  border-radius: 14px;
}
/* Cyan monster pokes out of the right portion of the logo. */
.heart-spot-logo {
  right: 4%;
  top: 6%;
  width: 44%;
  height: 78%;
}
/* Felted plushie sits on the left shoulder in the photo. */
.heart-spot-photo {
  left: 4%;
  bottom: 8%;
  width: 36%;
  height: 40%;
}

/* Heart burst particles — spawned by JS at click point, removed on animationend. */
.heart-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 28px;
  height: 28px;
  will-change: transform, opacity;
  animation: heart-burst 1.1s cubic-bezier(.18, .72, .3, 1) forwards;
}
.heart-particle svg { width: 100%; height: 100%; display: block; }
@keyframes heart-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -100px))) rotate(var(--rot, 0deg)) scale(1);
    opacity: 0;
  }
}

/* Scroll-reveal: fade in marked elements once. Hidden only when JS is around. */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
html.js [data-reveal].is-visible { opacity: 1; }

/* Respect users who'd rather not be wiggled at */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-rays { animation: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .hero-logo, .scroll-cue { animation: none !important; }
}

/* ========================================================
   LAUNCH PAGE (launch.php) — cart pill + commerce tile UI
   ======================================================== */

/* ---- Cart pill ---- */
.cart-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-pink);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms, box-shadow 120ms;
}
.cart-pill:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.cart-pill[data-empty="true"] { background: var(--cream); opacity: 0.75; }
.cart-pill-icon { font-size: 18px; line-height: 1; }
.cart-pill-count {
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  min-width: 24px;
  text-align: center;
}
.cart-pill[data-empty="true"] .cart-pill-count { display: none; }

/* Quick squash-and-stretch when an item lands in the cart. Triggered
   by assets/particles.js on pm:cart:add. transform-origin defaults to
   center so the pill scales in place without nudging neighbors. */
.cart-pill.is-pulsing { animation: cart-pill-pulse 0.5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cart-pill-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-pill.is-pulsing { animation: none; }
}

/* Wrap holding currency switcher + cart pill in the nav top-right. */
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav-right .cart-pill { margin-left: 0; }   /* parent flex handles spacing */

/* Currency switcher pill — same shape as cart pill, smaller. Click to toggle
   between CAD and USD; flag + label sync from assets/currency.js. */
.currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.currency-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent-yellow);
}
.currency-pill[data-currency="USD"] { background: var(--accent-cyan); }
.currency-pill .currency-flag { font-size: 16px; line-height: 1; }
.currency-pill .currency-label { font-weight: 400; }

/* Sound mute toggle — compact icon-only sibling of .currency-pill. */
.sound-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.sound-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent-yellow);
}
.sound-pill[data-muted="true"] { background: #ddd6c8; }
.sound-pill .sound-pill-off { display: none; }
.sound-pill[data-muted="true"] .sound-pill-on  { display: none; }
.sound-pill[data-muted="true"] .sound-pill-off { display: inline; }

/* ---- LIVE banner ---- */
.live-banner { text-align: center; padding: 24px 20px 30px; }
.live-banner-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: var(--accent-green);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.live-banner-pill .live-dot {
  width: 10px; height: 10px;
  background: #dc2626; border-radius: 50%;
  animation: live-blink 1.2s infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.live-banner-sub {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--cream);
  opacity: 0.85;
  text-align: left;
}
.live-banner-signup {
  margin: 22px auto 0;
  max-width: 560px;
  padding: 0 20px;
}
/* Signup form's home inside the hero — sits under the tagline, above the
   fold. Width tracks the tagline; shadow slims down so the pill doesn't
   fight the logo for weight. */
.hero-signup {
  margin-top: 28px;
  width: 100%;
  /* Same trick as .hero-tagline-row: lift above the 260vmax .hero-rays
     disc (z-index 0), otherwise the rays paint over the form and it
     reads as semi-transparent. */
  position: relative;
  z-index: 1;
}
.hero-signup .signup-form { box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 600px) {
  .hero-signup { margin-top: 18px; padding: 0 12px; }
}
.live-banner-overseas {
  max-width: 580px;
  margin: 14px auto 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--cream);
  opacity: 0.7;
  font-weight: 600;
}
.live-banner-overseas a {
  color: var(--accent-yellow);
  text-decoration: underline;
}
.cart-drawer-shipping-note a {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 700;
}

/* ---- Live grid + tiles ----
   The .live-grid scope here overrides the legacy .tile rules from the
   showcase template (aspect-ratio 4/3, overflow:hidden, absolutely
   positioned .tile-art). Without these overrides the meta + buttons
   render below the absolutely-positioned art, get clipped by overflow,
   and clicks bubble to the wrong layer. */
.live-grid {
  /* Flexbox instead of grid so partial rows center horizontally.
     Tiles flex-grow into the full row when there's a row's worth of
     them; when a category has fewer items than fit on a row, the row
     centers automatically via justify-content. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  padding: 30px 20px 40px;
  /* Cap scales with the viewport so wide screens wrap 4–5 tiles per row
     instead of stopping at 3. Tiles stay <=320px (see .live-grid > .tile),
     so the extra width becomes more columns, not fatter tiles. */
  max-width: min(96vw, 1800px);
  margin: 0 auto;
}
.live-grid > .tile {
  flex: 1 1 280px;
  max-width: 320px;
  min-width: 0;
}
.live-grid > .tile-feature {
  flex: 1 1 100%;
  max-width: none;
}
/* When .live-grids stack (one per category), trim vertical padding so
   they don't double-pad against the .category-heading sitting between
   them — tightens the rhythm without losing top/bottom breathing room. */
.live-grid + .live-grid,
.category-heading + .live-grid { padding-top: 8px; }
.live-grid:has(+ .category-heading) { padding-bottom: 12px; }

.category-heading {
  font-family: var(--display-font);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 36px auto 0;
  padding: 0 20px;
  max-width: 1240px;
  color: var(--cream);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 4px 4px 0 var(--ink);
}
@media (max-width: 800px) {
  .category-heading { margin-top: 24px; text-shadow: 3px 3px 0 var(--ink); }
}
.category-blurb {
  max-width: 900px;
  margin: 10px auto 20px;
  padding: 0 20px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--cream);
  opacity: 0.85;
  text-align: left;
}
.category-heading + .category-blurb + .live-grid { padding-top: 8px; }

/* Category nav pills — landing page shows only the mutants; these jump
   to the other groups (?cat=slug). Same visual family as .nav-link. */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1240px;
  margin: 28px auto 0;
  padding: 0 20px;
  /* Pills are the #shop anchor target — keep breathing room above them
     when the browser scrolls here after a category navigation. */
  scroll-margin-top: 24px;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  font-family: 'Bowlby One', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease;
}
.category-pill:hover {
  transform: rotate(-2deg) scale(1.06);
  background: var(--accent-yellow);
}
.category-pill.is-active {
  background: var(--accent-pink);
  color: var(--cream);
  transform: rotate(-1.5deg);
  -webkit-text-stroke: 0.5px var(--ink);
}
.category-pill.is-active:hover { transform: rotate(-1.5deg); background: var(--accent-pink); }
.category-nav + .live-grid,
.category-nav + .category-panel,
.category-nav + .category-heading { padding-top: 10px; margin-top: 18px; }
/* Hidden panels/grids must actually vanish — .live-grid's display:flex
   would otherwise override the [hidden] attribute's UA display:none. */
.category-panel[hidden],
.pm-home-only[hidden] { display: none !important; }
@media (max-width: 600px) {
  .category-nav { gap: 8px; margin-top: 20px; }
  .category-pill {
    padding: 7px 14px;
    font-size: 12px;
    border-width: 2.5px;
    box-shadow: 2px 2px 0 var(--ink);
  }
}
@media (max-width: 800px) {
  .live-grid {
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .tile-buy { padding: 7px 16px; }
}

/* Phone: 2-up grid, tighter spacing, smaller type everywhere */
@media (max-width: 600px) {
  :root {
    --text-body-size: 13px;
    --text-body-leading: 1.45;
  }

  /* --- Grid layout --- */
  .live-grid {
    gap: 10px;
    padding: 16px 6px 24px;
  }
  .live-grid + .live-grid,
  .category-heading + .live-grid { padding-top: 4px; }
  .live-grid:has(+ .category-heading) { padding-bottom: 6px; }

  .live-grid > .tile {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 5px);
    border-width: 3px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .live-grid > .tile-feature {
    flex: 1 1 100%;
    max-width: none;
  }
  .live-grid .tile:hover {
    transform: translate(-2px, -2px) rotate(var(--tile-tilt));
    box-shadow: 5px 5px 0 var(--ink);
  }

  /* --- Page-level side margins: 6px everywhere --- */
  .hero { padding-left: 6px; padding-right: 6px; }
  .live-banner { padding-left: 6px; padding-right: 6px; }
  .live-banner-sub { padding: 0 6px; }
  .live-banner-signup { padding: 0 6px; margin-top: 14px; }
  .live-banner-overseas { padding: 0 6px; }
  .showcase { padding-left: 12px; padding-right: 12px; }
  .about { padding-left: 6px; padding-right: 6px; }
  .socials { padding-left: 6px; padding-right: 6px; }
  .signup-section { padding-left: 6px; padding-right: 6px; }
  footer { padding-left: 6px; padding-right: 6px; }

  /* --- Category headings --- */
  .category-heading {
    margin-top: 18px;
    padding: 0 6px;
    text-shadow: 2px 2px 0 var(--ink);
    -webkit-text-stroke-width: 1px;
  }
  .category-blurb {
    padding: 0 6px;
    margin: 6px auto 12px;
  }

  /* --- Regular tile innards --- */
  .live-grid .tile .tile-meta {
    padding: 10px 10px 12px;
    gap: 6px;
  }
  .live-grid .tile .tile-name {
    line-height: 1.15;
  }
  .live-grid .tile .tile-description-toggle {
    font-size: 10px;
    padding: 3px 10px;
    margin-top: 6px;
  }
  .live-grid .tile .tile-buy {
    padding: 8px 10px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .live-grid .tile .price-burst {
    width: 62px;
    height: 62px;
    top: -8px;
    right: -8px;
  }
  .live-grid .tile .featured-tag {
    font-size: 9px;
    padding: 3px 7px;
    border-width: 2px;
    top: 8px; left: 8px;
  }

  /* --- Pickers (size/color/edition) --- */
  .tile-picker { gap: 6px; }
  .picker-row { gap: 4px; }
  .picker-label { font-size: 10px; }
  .picker-opts { gap: 4px; }
  .picker-size {
    padding: 4px 8px;
    border-width: 2px;
    box-shadow: 1px 1px 0 var(--ink);
  }
  .picker-color {
    width: 24px; height: 24px;
    border-width: 2px;
    box-shadow: 1px 1px 0 var(--ink);
    outline-width: 2px;
    outline-offset: 2px;
  }
  .picker-edition,
  .picker-size-select {
    padding: 7px 30px 7px 10px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--ink);
    background-size: 12px;
    background-position: right 8px center;
  }
  .picker-note { font-size: 11px; }

  /* --- About / Hey I'm Nate section --- */
  .about {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .about-grid {
    gap: 24px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .about-portrait {
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .about-portrait .label {
    font-size: 11px;
    padding: 4px 9px;
    border-width: 2px;
    bottom: 10px; left: 10px;
  }
  .about-content h2 {
    margin-bottom: 14px;
    -webkit-text-stroke-width: 2px;
    text-shadow: 3px 3px 0 var(--ink);
  }
  .about-content p {
    margin-bottom: 10px;
  }
  .about-sign {
    font-size: 18px;
    margin-top: 12px;
  }
}

.live-grid .tile {
  aspect-ratio: auto;
  overflow: visible;
  cursor: default;
  border-radius: 14px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
  background: var(--accent-pink);
  /* Positioning ancestor for the price-burst, which now lives as a direct
     child of the tile (not inside .tile-art) so its corner offset is
     independent of the art column's width. */
  position: relative;
  /* Each tile gets a random tilt set inline as --tile-tilt by launch.php.
     Having a transform applied at rest also promotes the tile to its own
     composited layer, which keeps text + images rendering at the higher-
     quality path that previously only kicked in on :hover. */
  --tile-tilt: 0deg;
  transform: rotate(var(--tile-tilt));
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1), box-shadow 140ms;
}
.live-grid .tile:hover {
  /* Lift + shadow on hover, but DON'T change rotation — the random tilt is
     what we want shoppers to see consistently. */
  transform: translate(-3px, -3px) rotate(var(--tile-tilt));
  box-shadow: 9px 9px 0 var(--ink);
  z-index: 5;
}

.tile-bg-pink   { background: var(--accent-pink); }
.tile-bg-cyan   { background: var(--accent-cyan); }
.tile-bg-yellow { background: var(--accent-yellow); }
.tile-bg-green  { background: var(--accent-green); }
.tile-bg-purple { background: var(--accent-purple); }

.live-grid .tile-art {
  position: relative;
  inset: auto;
  aspect-ratio: 1 / 1;
  border-bottom: 4px solid var(--ink);
  overflow: visible;            /* let price burst hang out the corner */
  background: transparent;
}
.tile-art-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: inherit;
}
/* Round the inner panels to match the tile's outer radius (14px tile
   minus 4px border = 10px inner). Column layout: art on top, meta on
   bottom. Featured/giveaway override these per their row layout below. */
.live-grid .tile-art-clip {
  border-radius: 10px 10px 0 0;
}
.live-grid .tile .tile-meta {
  border-radius: 0 0 10px 10px;
}
.live-grid .tile-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Promote to a composited layer so the browser uses its high-quality image
     scaler at rest. Without this, idle tiles get the low-quality downscale
     and only "snap into focus" on :hover (which adds a rotate transform). */
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}

/* ---- Multi-photo carousel (only shown when product has 2+ gallery images) ---- */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 54px; height: 54px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 100ms, box-shadow 100ms, background 100ms;
}
.gallery-nav:hover {
  background: var(--accent-yellow);
  transform: translateY(calc(-50% - 1px)) translateX(-1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.gallery-nav:active {
  transform: translateY(calc(-50% + 1px)) translateX(1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-prev::before { content: ''; display: block; margin-top: -3px; margin-left: -3px; line-height: 0; }
.gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(254, 243, 215, 0.85);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
}
.gallery-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
  transition: background 100ms;
}
.gallery-dot.is-active {
  background: var(--ink);
}
.gallery-dot:hover:not(.is-active) {
  background: rgba(10, 6, 18, 0.35);
}
@media (max-width: 600px) {
  .gallery-nav { width: 30px; height: 30px; font-size: 22px; }
  .gallery-prev { left: 6px; }
  .gallery-next { right: 6px; }
  .gallery-dots { bottom: 8px; padding: 4px 8px; gap: 6px; }
  .gallery-dot { width: 8px; height: 8px; }
}
.tile-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--cream);
  padding: 20px; text-align: center;
}
.tile-placeholder span {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 24px; line-height: 1.05;
  letter-spacing: 0.02em;
}

/* Featured-this-week corner tag */
.featured-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: var(--accent-pink);
  color: var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-3deg);
}

/* Rotating starburst price sticker, top-right of art */
.price-burst {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 92px;
  height: 92px;
  z-index: 4;
  display: grid;
  place-items: center;
  filter: drop-shadow(2px 3px 0 var(--ink));
}
.price-burst-shape {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: burst-spin 14s linear infinite;
}
.price-burst-text {
  position: relative;
  z-index: 1;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1;
}
/* Sold-out variant: red burst with cream "GONE!" text */
.price-burst-sold .price-burst-text { color: var(--cream); }
@keyframes burst-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .price-burst-shape { animation: none; }
}

/* "NEW" sticker — slapped on the top-left of any product tile whose
   drop fired most recently. Rendered inside .tile-art-clip so it
   pins to the image, not the whole tile (which would float over the
   tilt + meta text on featured tiles). Auto-removed by re-rendering
   the page after the next drop fires. */
.tile-new-sticker {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  background: #dc2626;
  color: var(--cream);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-8deg);
  pointer-events: none;
}
@media (max-width: 800px) { .tile-new-sticker { font-size: 11px; padding: 4px 8px; } }

/* ====================================================================
   Drop reveal sequence — dramatic curtain that fires when a scheduled
   drop's countdown ticks to zero on the page. Spawned by
   assets/launch.js → openDropReveal. Three phases:
     1. dark overlay fades in + present falls from top
     2. user taps present → polaroids explode outward + particles +
        sound. After ~2.5s the overlay fades out and the page reloads
        so the newly-visible drop products land on the rendered page.
   ==================================================================== */
.drop-reveal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 6, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: auto;
  overflow: hidden;
}
.drop-reveal.is-active { opacity: 1; }
.drop-reveal.is-closing { opacity: 0; pointer-events: none; }

/* Present graphic — falls from above viewport down to center stage.
   The image src points at /images/crate.png; if that's missing the
   alt text + a CSS placeholder fallback keeps the ceremony intact. */
.drop-reveal-present {
  position: relative;
  /* z-index above the particle layer (4) so dust + stars puff out
     BEHIND the crate but still in front of the dark overlay backdrop. */
  z-index: 5;
  width: clamp(180px, 28vw, 320px);
  height: clamp(180px, 28vw, 320px);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transform: translateY(-130vh);
  /* Squash pivots from the bottom edge so the impact reads like the
     crate is hitting a floor — top compresses down, bottom stays put. */
  transform-origin: 50% 100%;
  /* Two chained animations so JS can pin the dust + prompt reveal to
     the exact moment the fall finishes via animationend (the previous
     single-animation + setTimeout approach drifted whenever the main
     thread was busy — landing position varied refresh-to-refresh).
     Fall is strong ease-in for gravity; squash runs immediately after
     with its own per-segment easing in the keyframes. */
  animation:
    drop-present-fall 0.79s cubic-bezier(0.7, 0, 0.84, 0) forwards,
    drop-present-squash 0.31s 0.79s forwards;
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.5));
}
.drop-reveal-present img { width: 100%; height: 100%; object-fit: contain; display: block; }
.drop-reveal-present.is-tapped {
  animation: drop-present-pop 0.45s cubic-bezier(.55,.085,.68,.53) forwards;
  pointer-events: none;
}
@keyframes drop-present-fall {
  from { transform: translateY(-130vh) rotate(-6deg); }
  to   { transform: translateY(0) rotate(0deg); }
}
@keyframes drop-present-squash {
  0% {
    animation-timing-function: ease-out;
    transform: translateY(0) scale(1, 1) rotate(0deg);
  }
  21% {
    animation-timing-function: ease-in-out;
    transform: translateY(0) scale(1.12, 0.84) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) scale(0.97, 1.05) rotate(0deg);
  }
  100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
@keyframes drop-present-pop {
  0%   { transform: scale(1)   rotate(0deg);   opacity: 1; }
  60%  { transform: scale(1.4) rotate(15deg);  opacity: 0.8; }
  100% { transform: scale(0)   rotate(-180deg); opacity: 0; }
}

.drop-reveal-prompt {
  font-family: var(--display-font);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.05;
  color: var(--cream);
  letter-spacing: 0.06em;
  margin-top: 22px;
  text-align: center;
  text-shadow: 3px 3px 0 #000;
  /* Hidden until the crate lands and JS adds .is-revealed; the per-
     letter pop runs alongside the dust puffs. Once revealed, the
     parent gets the gentle pulse so the call-to-action breathes. */
  visibility: hidden;
}
.drop-reveal-prompt.is-revealed {
  visibility: visible;
  animation: drop-prompt-pulse 1.6s ease-in-out infinite;
  animation-delay: 700ms;
}
.drop-reveal-prompt.is-hidden { opacity: 0; }
.drop-reveal-prompt-word {
  display: inline-block;
  white-space: nowrap;
}
.drop-reveal-prompt-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--ty, 14px)) rotate(var(--r, 0deg));
}
.drop-reveal-prompt.is-revealed .drop-reveal-prompt-char {
  animation: drop-prompt-pop 0.55s cubic-bezier(.34, 1.7, .64, 1) var(--d, 0ms) both;
}
@keyframes drop-prompt-pop {
  0%   { opacity: 0; transform: translateY(var(--ty, 14px)) rotate(var(--r, 0deg)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes drop-prompt-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Polaroids — created in JS at center (last point of present), each
   given a CSS variable for its final x/y/rotation so the animation
   below carries it to that spot. */
.drop-polaroid {
  position: absolute;
  top: 50%;
  left: 50%;
  /* z-index above .star-particle (4) so the particle burst happens
     BEHIND the polaroids, not in front of them. */
  z-index: 6;
  width: clamp(130px, 18vw, 200px);
  background: var(--cream);
  border: 4px solid var(--ink);
  padding: 10px 10px 30px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  opacity: 0;
  animation: drop-polaroid-burst 1.4s cubic-bezier(.18, .72, .3, 1) forwards;
  will-change: transform, opacity;
}
.drop-polaroid.is-featured {
  /* ~2× the standard polaroid so the featured mutant reads as the
     centerpiece of the drop. */
  width: clamp(260px, 36vw, 400px);
  z-index: 7;
  animation-duration: 1.6s;
}
/* No-featured drops: every polaroid renders large — near the featured
   size — since there's no centerpiece reserving the middle. The wider
   fan (set in JS) keeps them from overlapping. */
.drop-polaroid.is-big {
  width: clamp(240px, 34vw, 380px);
}
.drop-polaroid-art {
  aspect-ratio: 1 / 1;
  background: var(--accent-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--ink);
}
.drop-polaroid-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.drop-polaroid-caption {
  font-family: 'Shadows Into Light', cursive;
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  text-align: center;
  margin-top: 6px;
  line-height: 1;
  text-transform: uppercase;
}
/* Bigger cards get bigger captions so the handwriting fills the white
   strip under the photo. */
.drop-polaroid.is-big .drop-polaroid-caption,
.drop-polaroid.is-featured .drop-polaroid-caption {
  font-size: 38px;
}
@keyframes drop-polaroid-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1) rotate(var(--rot, 0deg));
    opacity: 1;
  }
  100% {
    transform:
      translate(calc(-50% + var(--dx, 0px)),
                calc(-50% + var(--dy, 0px)))
      scale(1) rotate(var(--rot, 0deg));
    opacity: 1;
  }
}

/* Fall-out — polaroids drop off the bottom of the screen toward the
   product grid below, instead of fading. easeInBack timing pulls them
   up slightly before they fall, like they're being yanked over the
   edge of a table. Rotation increments a little so they tumble as
   they fall.
   `both` fill-mode (vs forwards) makes the element render at the 0%
   keyframe during any animation-delay too — so staggered fall starts
   (set per-polaroid in JS) don't flicker through the base styles. */
.drop-polaroid.is-falling-out {
  animation: drop-polaroid-fall-out 0.95s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
@keyframes drop-polaroid-fall-out {
  0% {
    transform:
      translate(calc(-50% + var(--dx, 0px)),
                calc(-50% + var(--dy, 0px)))
      scale(1) rotate(var(--rot, 0deg));
    opacity: 1;
  }
  100% {
    transform:
      translate(calc(-50% + var(--dx, 0px)),
                calc(-50% + var(--dy, 0px) + 130vh))
      scale(0.85) rotate(calc(var(--rot, 0deg) + 22deg));
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drop-polaroid.is-falling-out { animation: none; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drop-reveal-present { animation: none; transform: translateY(0); }
  .drop-polaroid { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tile-meta {
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: inherit; color: var(--ink);
  flex: 1;
}
.tile-name {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
}
.tile-description {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 600;
  margin: 0;
  /* Bake the opacity into rgba so child elements (like <strong>) can override
     the alpha individually — opacity on the parent dims everything visually. */
  color: rgba(10, 6, 18, 0.85);
}
/* Category blurb on the featured tile — its own paragraph so it never
   runs inline off the end of the product description. */
.tile-featured-blurb { margin: 0.8em 0 0; }
/* Collapsible description: clamp to two lines by default with the
   browser's native … ellipsis, and surface a capsule "more…" toggle.
   JS unhides the toggle once it measures actual overflow (and removes
   it again if the text fits within the clamp). */
.tile-description-text[data-pm-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-feature .tile-description-text[data-pm-clamp] {
  -webkit-line-clamp: 10;
}
@media (max-width: 600px) {
  .tile-feature .tile-description-text[data-pm-clamp] {
    -webkit-line-clamp: 2;
  }
}
.tile-description-text[data-pm-clamp].is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.tile-description-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 5px 14px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.12s, background 0.12s;
}
.tile-description-toggle:hover {
  background: var(--accent-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.tile-description-toggle::before { content: 'more…'; }
.tile-description-toggle.is-open::before { content: 'less'; }
/* Inline formatting from the WYSIWYG editor. contenteditable in Chrome
   wraps blocks in <div>, Firefox uses <br>, Safari uses <p> — style all
   three so the rendered description looks consistent regardless. */
.tile-description p,
.tile-description div { margin: 0 0 0.6em; }
.tile-description p:last-child,
.tile-description div:last-child { margin-bottom: 0; }
.tile-description ul,
.tile-description ol { margin: 0 0 0.6em 1.4em; padding: 0; }
.tile-description li { margin-bottom: 0.15em; }
.tile-description a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tile-description a:hover { text-decoration-thickness: 2px; }
.tile-description strong, .tile-description b {
  font-weight: 800;
  /* Full-strength ink so bold reads "punchier" than just the weight bump
     against the dimmed body color. */
  color: var(--ink);
}
.tile-price {
  /* Price moved to .price-burst sticker; keeping selector available in case
     a tile ever wants an inline price. Hidden by default in the live grid. */
  display: none;
}

/* ---- Featured tile (Murp this week) ---- */
.live-grid .tile-feature {
  /* Inner flex layout for the wide featured tile (art column + meta).
     Outer .live-grid switched to flex so this tile uses flex-basis 100%
     to span the row (defined in the .live-grid block above). */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--accent-pink);
}
.live-grid .tile-feature .tile-art {
  /* Image column scales with viewport: ≥240px so it stays a recognizable
     image, ≤620px so it doesn't dominate, preferred 32vw which is what
     actually shrinks at narrow viewports. */
  flex: 0 0 clamp(240px, 32vw, 620px);
  width: clamp(240px, 32vw, 620px);
  min-width: 0;
  border-bottom: 0;
  border-right: 4px solid var(--ink);
  /* Black behind the image so any rounded-corner gap reads as the dark
     page bg, not a white edge. Inherited by the giveaway tile too. */
  background: var(--ink);
  /* Hard clip so the absolute-positioned .tile-art-clip can't paint past
     this column's right edge and bleed into the meta panel. */
  overflow: hidden;
  /* Art on the LEFT — round its left corners to match the tile. */
  border-radius: 10px 0 0 10px;
}
.live-grid .tile-feature .tile-meta {
  flex: 1 1 0;
  min-width: 0;            /* allow the meta panel to shrink + text to wrap */
  border-radius: 0 10px 10px 0;
}
/* Featured: art on the LEFT — round its left corners, square the right
   (which butts against the meta panel). */
.live-grid .tile-feature .tile-art-clip {
  border-radius: 10px 0 0 10px;
}
.live-grid .tile-feature .tile-art img {
  /* Fill the art cell completely, cropping the edges as needed. At wide
     viewports the cell is roughly square so cropping is minimal; at narrow
     viewports the cell becomes tall-rectangular (long meta panel) and the
     image crops the sides instead of letterboxing into a tiny square. */
  object-fit: cover;
}
.live-grid .tile-feature .tile-meta {
  /* Padding-top clears the burst (which sits in the upper-right corner of the
     whole tile) while leaving the body text at full panel width. The title
     gets its own right-padding below to keep long names from running into the
     burst horizontally. */
  padding: 60px 32px 36px;
  gap: 16px;
}
.live-grid .tile-feature .tile-name {
  /* Reserve room on the right so the burst (~132px wide + 22px overhang)
     never collides with the title text. Description below uses the full
     panel width since it starts BELOW the burst. */
  padding-right: 150px;
}
.live-grid .tile-feature .tile-name {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}
.live-grid .tile-feature .tile-description {
  /* Featured panel reads a touch crisper than the regular tiles — bump the
     base body color to a higher alpha (bold strong/b stays full-ink as set
     by .tile-description strong above). */
  color: rgba(10, 6, 18, 0.92);
}
.live-grid .tile-feature .tile-buy {
  font-size: 22px;
  padding: 16px 20px;
}
.live-grid .tile-feature .price-burst {
  width: 132px; height: 132px;
  top: -22px; right: -22px;
}
.live-grid .tile-feature .price-burst-text { font-size: 30px; }
.live-grid .tile-feature .featured-tag {
  font-size: 13px;
  padding: 6px 12px;
  top: 18px; left: 18px;
}
/* Below ~620px the side-by-side layout has too little room even for a
   portrait crop, so stack vertically (image on top, text below). */
@media (max-width: 620px) {
  .live-grid .tile-feature {
    display: flex;
    flex-direction: column;
  }
  .live-grid .tile-feature .tile-art {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(220px, 55vw, 340px);
    aspect-ratio: auto;
    border-right: 0;
    border-bottom: 3px solid var(--ink);
    /* Stacked: art on top — round top corners only. */
    border-radius: 10px 10px 0 0;
  }
  .live-grid .tile-feature .tile-meta {
    flex: 1;
    padding: 14px 14px 16px;
    gap: 8px;
    border-radius: 0 0 10px 10px;
  }
  .live-grid .tile-feature .tile-name {
    padding-right: 65px;
  }
  .live-grid .tile-feature .tile-buy {
    padding: 10px 14px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .live-grid .tile-feature .price-burst {
    width: 68px; height: 68px;
    top: -8px; right: -8px;
  }
  .live-grid .tile-feature .featured-tag {
    font-size: 9px;
    padding: 3px 7px;
    border-width: 2px;
    top: 8px; left: 8px;
    letter-spacing: 0.08em;
  }
}

/* Side-by-side at 621–1000px: shrink the burst + title reserve so the now-
   narrower meta panel can fit the title cleanly. */
@media (min-width: 621px) and (max-width: 1000px) {
  .live-grid .tile-feature .tile-meta {
    padding: 50px 22px 28px;
    gap: 12px;
  }
  .live-grid .tile-feature .tile-name {
    padding-right: 110px;
    font-size: clamp(22px, 3.4vw, 36px);
  }
  .live-grid .tile-feature .tile-buy {
    font-size: 18px;
    padding: 14px 16px;
  }
  .live-grid .tile-feature .price-burst {
    width: 92px; height: 92px;
    top: -16px; right: -16px;
  }
  .live-grid .tile-feature .price-burst-text { font-size: 22px; }
  .live-grid .tile-feature .featured-tag {
    font-size: 11px;
    padding: 5px 10px;
    top: 12px; left: 12px;
  }
}

/* ---- Giveaway tile ---- */
.tile-giveaway {
  background: var(--accent-green);
}
.live-grid .tile-giveaway {
  flex-direction: row-reverse;
}
.live-grid .tile-giveaway .tile-art {
  flex: 0 0 clamp(200px, 26vw, 460px);
  width: clamp(200px, 26vw, 460px);
  border-right: 0;
  border-left: 4px solid var(--ink);
  /* Landscape crop keeps the block shorter than the square featured art
     above (height = art width otherwise). */
  aspect-ratio: 5 / 4;
  /* Hard cap so a wide viewport can't grow the block back up. */
  max-height: 360px;
  border-radius: 0 10px 10px 0;
}
.live-grid .tile-giveaway .tile-meta {
  padding: 26px 32px 24px;
  /* Meta on the LEFT — round its left corners. */
  border-radius: 10px 0 0 10px;
}
.live-grid .tile-giveaway .tile-name {
  padding-right: 0;
}
.live-grid .tile-giveaway .price-burst {
  left: auto;
  right: calc(clamp(200px, 26vw, 460px) - 55px);
  width: 110px; height: 110px;
  top: -18px;
}
.live-grid .tile-giveaway .price-burst-text {
  font-size: 22px;
  text-align: center;
  line-height: 1.1;
  max-width: 70px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.giveaway-tag {
  position: absolute;
  top: 14px; right: 14px; left: auto;
  z-index: 3;
  background: var(--accent-yellow);
  color: var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(3deg);
}
.live-grid .tile-giveaway .giveaway-tag {
  font-size: 13px;
  padding: 6px 12px;
  top: 18px; right: 18px; left: auto;
}
.giveaway-preview-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 6;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  letter-spacing: 0.04em;
}
.tile-giveaway .tile-buy,
.tile-buy.tile-giveaway-cta {
  background: var(--accent-yellow);
  color: var(--ink);
}
.tile-giveaway .tile-buy:hover,
.tile-buy.tile-giveaway-cta:hover {
  background: var(--cream);
}
@media (max-width: 620px) {
  .live-grid .tile-giveaway {
    flex-direction: column;
  }
  .live-grid .tile-giveaway .tile-art {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(180px, 45vw, 280px);
    border-left: 0;
    border-bottom: 3px solid var(--ink);
    /* Stacked: art on top — round top corners only. */
    border-radius: 10px 10px 0 0;
  }
  .live-grid .tile-giveaway .tile-meta {
    padding: 14px 14px 16px;
    border-radius: 0 0 10px 10px;
  }
  .live-grid .tile-giveaway .price-burst {
    left: auto; right: -8px;
    width: 68px; height: 68px;
    top: -8px;
  }
  .live-grid .tile-giveaway .price-burst-text { font-size: 16px; }
  .live-grid .tile-giveaway .giveaway-tag {
    font-size: 9px;
    padding: 3px 7px;
    border-width: 2px;
    /* Stacked layout: tag top-left to match the featured tile. */
    top: 8px; left: 8px; right: auto;
    letter-spacing: 0.08em;
  }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .live-grid .tile-giveaway .tile-meta {
    padding: 28px 22px 22px;
  }
  .live-grid .tile-giveaway .price-burst {
    width: 80px; height: 80px;
    left: auto; right: -12px; top: -12px;
  }
  .live-grid .tile-giveaway .price-burst-text { font-size: 18px; }
  .live-grid .tile-giveaway .giveaway-tag {
    font-size: 11px;
    padding: 5px 10px;
    top: 12px; right: 12px; left: auto;
  }
}

/* ---- Giveaway modal ---- */
.giveaway-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.giveaway-modal[hidden] { display: none; }
.giveaway-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 18, 0.7);
  cursor: pointer;
}
.giveaway-modal-body {
  position: relative;
  background: var(--cream);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  border-radius: 14px;
  padding: 48px 42px 36px;
  max-width: 620px;
  width: 100%;
  text-align: center;
}
.giveaway-modal-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
  padding: 4px;
}
.giveaway-modal-close:hover { opacity: 0.6; }
.giveaway-modal-title {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 0.95;
  margin: 0 0 8px;
  color: var(--accent-green);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}
.giveaway-modal-sub {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--ink);
}
.giveaway-modal-desc {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--ink);
  margin: 0 0 20px;
}
.giveaway-modal-form {
  display: flex;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  padding: 5px;
}
.giveaway-modal-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.giveaway-modal-form input::placeholder { color: rgba(0,0,0,0.4); }
.giveaway-modal-form button {
  background: var(--accent-green);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 10px 22px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.giveaway-modal-form button:hover {
  transform: rotate(-3deg);
  background: var(--accent-yellow);
}
.giveaway-modal-done {
  background: var(--accent-green);
  color: var(--ink);
  padding: 16px 24px;
  border-radius: 999px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  display: inline-block;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
}
@media (max-width: 500px) {
  .giveaway-modal-body { padding: 36px 20px 24px; }
  .giveaway-modal-form {
    flex-direction: column;
    border-radius: 16px;
    padding: 6px;
  }
  .giveaway-modal-form input { padding: 12px 14px; text-align: center; }
  .giveaway-modal-form button { border-radius: 12px; padding: 12px; }
}

/* ---- Reusable confirm modal (window.PMConfirm) ---- */
.pm-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.pm-confirm.is-open { opacity: 1; }
.pm-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 18, 0.7);
  cursor: pointer;
}
.pm-confirm-box {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border: 5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 var(--ink);
  padding: 28px 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}
.pm-confirm.is-open .pm-confirm-box { transform: translateY(0) scale(1); }
.pm-confirm-title {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1;
  margin: 0 0 10px;
}
.pm-confirm-msg {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 700;
  margin: 0 0 20px;
}
.pm-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.pm-confirm-actions button {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 100ms, box-shadow 100ms, background 120ms, color 120ms;
}
.pm-confirm-actions button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.pm-confirm-cancel { background: var(--cream); color: var(--ink); }
.pm-confirm-ok     { background: var(--accent-green); color: var(--cream); }
.pm-confirm-ok.is-danger { background: #dc2626; color: var(--cream); }

/* ---- Picker UI ---- */
.tile-picker { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.picker-row { display: flex; flex-direction: column; gap: 6px; }
.picker-label {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.picker-opts { display: flex; flex-wrap: wrap; gap: 6px; }

.picker-size {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 80ms, box-shadow 80ms, background 80ms, color 80ms;
}
.picker-size:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.picker-size.is-selected {
  background: var(--ink);
  color: var(--cream);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.picker-color {
  width: 30px; height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 2px 2px 0 var(--ink);
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: transform 80ms, box-shadow 80ms, outline-color 80ms;
}
.picker-color:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.picker-color.is-selected { outline-color: var(--ink); }

/* Custom-styled select — native renders too OS-flavored against the brutalist look */
.picker-edition,
.picker-size-select {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  width: 100%;
  padding: 10px 38px 10px 14px;
  border: 3px solid var(--ink);
  background-color: var(--cream);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 9 L10 4' stroke='%230a0612' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: transform 80ms, box-shadow 80ms;
}
.picker-edition:hover,
.picker-size-select:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.picker-edition:focus,
.picker-size-select:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--ink);
}
.picker-note {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* ---- Buy button ----
   margin-top: auto pins the CTA to the bottom of the tile-meta flex column,
   so buttons line up across tiles regardless of how much description /
   picker content sits above. */
.tile-buy {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.06em;
  background: #3b8534;
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  margin-top: auto;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 100ms, box-shadow 100ms, background 140ms, color 140ms;
}
.tile-buy:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.tile-buy:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.tile-buy.is-flashing {
  background: var(--accent-green);
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
/* Validation / duplicate error feedback — red flash + brief shake.
   Matches the #dc2626 used on the "GONE!" sold-out burst so red reads
   consistently as "no" across the site. */
.tile-buy.is-flashing-error {
  background: #dc2626;
  color: var(--cream);
  animation: tile-buy-shake 0.45s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes tile-buy-shake {
  10%, 90%      { transform: translate(-1px, 2px); }
  20%, 80%      { transform: translate( 3px, 2px); }
  30%, 50%, 70% { transform: translate(-5px, 2px); }
  40%, 60%      { transform: translate( 5px, 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tile-buy.is-flashing-error { animation: none; }
}
.tile-buy.is-incart,
.tile-buy[disabled] {
  background: var(--ink);
  color: var(--cream);
  cursor: not-allowed;
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
  opacity: 0.85;
}
.tile-buy.is-incart:hover,
.tile-buy[disabled]:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

/* ---- Drop countdown on signup form ----
   Sits BELOW the email field. Big bold numbers in yellow, smaller cream
   label above. Designed to be the next big thing your eye lands on after
   submitting the email — communicates "we'll be back Friday at 5pm." */
.signup-countdown {
  margin: 36px auto 0;
  text-align: center;
}
.signup-countdown-label {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 10px;
}
.signup-countdown-clock {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ========================================================
   CHECKOUT PAGE (checkout.php)
   ======================================================== */

.page-checkout,
.page-thanks {
  background: var(--bg-deep);
  min-height: 100vh;
  /* Belt + suspenders: prevent any oversized child (Stripe iframes,
     box-shadows, drawer panels) from triggering horizontal scroll. */
  overflow-x: hidden;
}
.page-checkout, .page-thanks { max-width: 100vw; }

/* Override the launch-page floating nav: on checkout/thanks the nav should
   take normal flow so the heading below it isn't tucked under a translucent
   bar. Also drop the shaded bg — without overlap there's nothing to dim. */
.page-checkout .nav,
.page-thanks .nav {
  position: static;
  background: transparent;
  padding: 16px 24px;
}
.checkout-back {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 2px solid var(--cream);
  border-radius: 8px;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.checkout-back:hover { background: var(--cream); color: var(--ink); }

.checkout {
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 20px 80px;
  color: var(--cream);
}
.checkout-head { text-align: center; margin-bottom: 30px; }
.checkout-head h1 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.checkout-head .muted { font-size: var(--text-body-size); line-height: var(--text-body-leading); opacity: 0.75; margin: 0; }
.checkout h2 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 30px;
}
@media (max-width: 720px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

/* ---- Cart lines ---- */
.checkout-cart, .checkout-summary, .checkout-form-wrap {
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--accent-pink);
  padding: 22px;
}
.checkout-summary { box-shadow: 6px 6px 0 var(--accent-cyan); }
.checkout-form-wrap { box-shadow: 6px 6px 0 var(--accent-yellow); }

.cart-lines { display: flex; flex-direction: column; gap: 12px; }
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px dashed var(--ink);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-name {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
}
.cart-line-variant {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 700;
  opacity: 0.65;
  margin-top: 2px;
  text-transform: capitalize;
}
.cart-line-qty {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 700;
  opacity: 0.65;
  margin-top: 2px;
}
.cart-line-right { display: flex; align-items: center; gap: 10px; }
.cart-line-price {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
}
.cart-line-remove {
  background: transparent;
  border: 2px solid var(--ink);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: var(--ink);
  transition: background 100ms, color 100ms;
}
.cart-line-remove:hover { background: var(--ink); color: var(--cream); }

.empty-cart { text-align: center; padding: 30px 0; }
.empty-cart p { margin: 0 0 16px; font-weight: 700; }
.btn-link {
  display: inline-block;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.05em;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 10px 18px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--accent-pink);
  transition: transform 100ms, box-shadow 100ms;
}
.btn-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent-pink); }

/* ---- Summary ---- */
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  padding: 8px 0;
  font-weight: 700;
}
.summary-line.summary-total {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  border-top: 3px solid var(--ink);
  margin-top: 6px;
  padding-top: 12px;
}
.summary-note {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 14px;
  font-weight: 600;
}
.summary-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.checkout-summary .muted, .checkout-cart .muted, .checkout-form .muted { opacity: 0.6; }

/* ---- Form ---- */
.checkout-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.checkout-form .full { grid-column: 1 / -1; }
.checkout-form label { display: flex; flex-direction: column; gap: 4px; }
.checkout-form label > span:first-child {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.checkout-form input, .checkout-form select {
  font: inherit;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  background: #fff;
  color: var(--ink);
  width: 100%;             /* override default input intrinsic width */
  max-width: 100%;
  min-width: 0;
}
.checkout-form input:focus, .checkout-form select:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}
.checkout-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 9 L10 4' stroke='%230a0612' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}
.checkout-form input:invalid:not(:placeholder-shown) {
  border-color: #b91c1c;
}

@media (max-width: 600px) {
  /* Drop the 2-column form grid on small phones — every field gets its
     own row instead of squashing into ~50% width cells. */
  .checkout-form { grid-template-columns: 1fr; }
  .checkout-form-wrap { padding: 18px; }
  .checkout-cart, .checkout-summary { padding: 18px; }
  .checkout { padding: 24px 14px 60px; }
}

.checkout-payment-placeholder {
  grid-column: 1 / -1;
  background: var(--bg-deep);
  color: var(--cream);
  border: 3px dashed var(--ink);
  padding: 18px;
  margin: 8px 0 4px;
}
.checkout-payment-placeholder strong {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}
.checkout-payment-placeholder p { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-leading); opacity: 0.85; }

.btn-place {
  grid-column: 1 / -1;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.06em;
  background: var(--accent-pink);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 100ms, box-shadow 100ms;
  margin-top: 4px;
}
.btn-place:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn-place:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* Secondary action — cream-on-ink-border, brutalist match for .btn-place.
   Used for "Edit shipping address", "Start over", etc. Smaller and quieter
   than .btn-place but matches the visual language. */
.btn-cancel {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 100ms, color 100ms, transform 100ms, box-shadow 100ms;
}
.btn-cancel:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-cancel:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.form-note {
  grid-column: 1 / -1;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  margin: 4px 0 0;
  font-weight: 600;
}
.payment-note {
  /* Extra breathing room above the Stripe disclosure so it doesn't crowd
     the Pay / Start Over button row. */
  margin-top: 20px;
}
.charge-currency-note {
  display: block;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--accent-yellow);
  border: 2px solid var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.checkout-foot {
  text-align: center;
  padding: 24px 20px 30px;
  font-size: 12px;
  color: var(--cream);
  opacity: 0.5;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-weight: 700;
}
.checkout-foot a { color: inherit; text-decoration: underline; }

/* Stripe Payment Element wrapper + payment-stage */
#payment-element {
  background: #fff;
  padding: 16px;
  border: 3px solid var(--ink);
  margin: 8px 0 16px;
  min-height: 80px;
}
.form-stage-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 12px;
}
/* Primary action always sits flush right within a stage row. With one
   button (stage 1: just Continue), it pushes itself to the right edge.
   With a cancel sibling first (stage 2: Edit shipping → Continue), the
   cancel stays at the left and Continue is pushed to the right. */
.form-stage-row .btn-place { margin-left: auto; }

/* Shipping method selector — chunky radio cards. Even with one option, the
   visual confirmation step is useful before payment, and the layout makes
   it trivial to add more options later (USA, international). */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 4px;
}
.shipping-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: background 100ms, transform 100ms, box-shadow 100ms;
}
.shipping-option:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.shipping-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  position: relative;
}
.shipping-option input[type="radio"]:checked {
  background: var(--ink);
  box-shadow: inset 0 0 0 4px #fff;
}
.shipping-option.is-selected { background: #fef3d7; }
.shipping-option-info { flex: 1; min-width: 0; }
.shipping-option-label {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.shipping-option-eta {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: #555;
  font-weight: 600;
  margin-top: 2px;
}
.shipping-option-cost {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Mobile: stack the three pieces of each shipping option vertically.
   Row 1 is the carrier/service label, row 2 the radio + price side by
   side, row 3 the ETA below. display:contents on the .info wrapper
   lets its children (label + eta) participate in the parent grid. */
@media (max-width: 700px) {
  .shipping-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label label"
      "radio cost"
      "eta   eta";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    padding: 12px 14px;
  }
  .shipping-option > input[type="radio"] { grid-area: radio; }
  .shipping-option-info  { display: contents; }
  .shipping-option-label { grid-area: label; }
  .shipping-option-eta   { grid-area: eta; }
  .shipping-option-cost  { grid-area: cost; font-size: 19px; }
}
.payment-error {
  background: #fee2e2;
  border: 3px solid #b91c1c;
  color: #b91c1c;
  padding: 12px 16px;
  font-weight: 700;
  margin: 12px 0;
}

/* ========================================================
   THANKS PAGE (thanks.php)
   ======================================================== */
/* (.page-thanks layout merged into .page-checkout above to share rules.) */

.thanks-logo {
  text-align: center;
  margin: 28px auto 12px;
  padding: 0 20px;
}
.thanks-logo img {
  width: clamp(180px, 28vw, 260px);
  height: auto;
  display: inline-block;
}

.thanks { max-width: 640px; margin: 12px auto 60px; padding: 0 20px; }
.thanks-card {
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  padding: 32px 32px 36px;
  position: relative;
}
.thanks-card-good { box-shadow: 8px 8px 0 var(--accent-green); }
.thanks-card-pending { box-shadow: 8px 8px 0 var(--accent-yellow); }
.thanks-card-bad { box-shadow: 8px 8px 0 #b91c1c; }
.thanks-card h1 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
  margin: 0 0 12px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.thanks-card h3 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 14px; letter-spacing: 0.06em;
  margin: 24px 0 8px;
}
.thanks-id { margin: 0 0 16px; font-size: var(--text-body-size); line-height: var(--text-body-leading); color: #555; font-weight: 700; }
.thanks-id strong { color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.thanks-blurb { margin: 0 0 8px; font-size: var(--text-body-size); line-height: var(--text-body-leading); font-weight: 600; }
.thanks-stamp {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  background: var(--accent-green);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 6px 14px;
  font-size: 16px;
  letter-spacing: 0.1em;
  transform: rotate(8deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.thanks-items {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-weight: 700;
}
.thanks-items td {
  padding: 8px 0;
  border-bottom: 1px dashed #ccc;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
}
.thanks-items .right { text-align: right; }
.thanks-items td .muted { font-size: var(--text-body-size); line-height: var(--text-body-leading); font-weight: 600; opacity: 0.65; margin-top: 2px; }
.thanks-totals-row td { padding-top: 14px; border-top: 2px solid var(--ink); border-bottom: 0; }
.thanks-grand td {
  border-top: 2px solid var(--ink);
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  padding: 12px 0 4px;
}
.thanks-address { font-style: normal; font-size: var(--text-body-size); line-height: var(--text-body-leading); font-weight: 700; }
.thanks-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid #ddd; font-size: var(--text-body-size); line-height: var(--text-body-leading); }
.thanks-foot a { color: var(--ink); text-decoration: underline; }

/* ========================================================
   CART DRAWER (cart-drawer.php) — slide-out from right
   ======================================================== */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  /* Clip the off-screen panel + its pink shadow so they can't bleed past the
     viewport's right edge and create a vertical pink stripe / horizontal
     scroll. Without this, fixed-positioned descendants escape body's
     overflow:hidden in some browsers. */
  overflow: hidden;
}
.cart-drawer[aria-hidden="false"] { pointer-events: auto; }

.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 18, 0.55);
  opacity: 0;
  transition: opacity 220ms;
}
.cart-drawer[aria-hidden="false"] .cart-drawer-backdrop { opacity: 1; }

.cart-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--cream);
  color: var(--ink);
  border-left: 4px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms;
}
/* Pink shadow only paints when drawer is open — keeps the closed-state
   panel from leaving a visible stripe at the viewport's right edge. */
.cart-drawer[aria-hidden="false"] .cart-drawer-panel {
  transform: translateX(0);
  box-shadow: -10px 0 0 var(--accent-pink);
}

.cart-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 4px solid var(--ink);
  background: var(--accent-pink);
}
.cart-drawer-head h2 {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.cart-drawer-count {
  display: inline-block;
  background: var(--ink); color: var(--cream);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 14px;
  margin-left: 6px;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
}
.cart-drawer-close {
  background: var(--cream);
  border: 3px solid var(--ink);
  width: 38px; height: 38px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: transform 100ms, box-shadow 100ms;
}
.cart-drawer-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px 22px;
}

.cart-drawer-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 16px 0;
  border-bottom: 2px dashed #ccc;
}
.cart-drawer-line:last-child { border-bottom: 0; }
.cart-drawer-line-info { flex: 1; min-width: 0; }
.cart-drawer-line-name {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.cart-drawer-line-sub {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: #555;
  font-weight: 700;
  margin-top: 4px;
  text-transform: capitalize;
}
.cart-drawer-qty {
  font-weight: 700;
  color: #555;
  font-size: 12px;
  margin-top: 6px;
}
.cart-drawer-line-right {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.cart-drawer-line-remove {
  background: var(--cream);
  border: 2px solid var(--ink);
  width: 32px; height: 32px;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 100ms, color 100ms, transform 100ms, box-shadow 100ms;
}
.cart-drawer-line-remove svg { display: block; }
.cart-drawer-line-remove:hover {
  background: #b91c1c;
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.cart-drawer-line-remove:focus {
  outline: none;
  background: #b91c1c;
  color: #fff;
}
.cart-drawer-line-price {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  white-space: nowrap;
}

.cart-drawer-empty {
  text-align: center;
  padding: 48px 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 700;
  color: var(--ink);
}

.cart-drawer-foot {
  border-top: 4px solid var(--ink);
  padding: 18px 22px 22px;
  background: #fff;
}
.cart-drawer-foot[data-empty="true"] { display: none; }

.cart-drawer-total {
  display: flex; justify-content: space-between;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 24px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.cart-drawer-shipping-note {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: #555;
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cart-drawer-checkout-btn {
  display: block;
  text-align: center;
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 16px;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--accent-pink);
  transition: transform 100ms, box-shadow 100ms;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cart-drawer-checkout-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--accent-pink);
}
.cart-drawer-keep-shopping {
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 700;
  text-decoration: underline;
  padding: 8px;
  font-family: 'Nunito', sans-serif;
}

body.drawer-open,
body.giveaway-open { overflow: hidden; }

@media (max-width: 480px) {
  .cart-drawer-panel { width: 100vw; box-shadow: none; border-left: 0; }
}

/* Sold-out tiles render full-color, full-opacity — the GONE burst +
   "ADOPTED" footer label carry the message without dimming the art. */
.tile-soldlabel {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 18px;
  text-align: center;
  padding: 14px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  margin-top: auto;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.grid-foot { text-align: center; padding: 0 20px 60px; font-size: var(--text-body-size); line-height: var(--text-body-leading); max-width: 720px; margin: 0 auto; }
.grid-foot.muted { color: var(--cream); opacity: 0.7; }
.grid-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.grid-foot a:hover { opacity: 1; }
.grid-foot-flag { font-size: 1.2em; margin-right: 4px; vertical-align: -2px; }

/* ============================================================
   MOBILE FONT-SIZE TIERS (max-width: 600px)
   One value per tier → every member updates.
   Placed late in the file so source-order wins over all earlier
   same-specificity mobile overrides (620px block, 480px, etc.)
   ============================================================ */
@media (max-width: 600px) {

  /* --- Tier 1: Headings — match category-heading --- */
  .marquee-track,
  .category-heading,
  .about-content h2,
  .socials-head h3,
  .signup-inner h2,
  .signup-countdown-clock,
  .social-name {
    font-size: clamp(20px, 5.5vw, 28px);
  }

  /* --- Tier 2: Body text — match category-blurb --- */
  .live-banner-sub,
  .live-grid .tile .tile-description,
  .live-grid .tile-feature .tile-description,
  .tile-description-text,
  .category-blurb,
  .grid-foot,
  .about-content p,
  .socials-head p,
  .social-handle,
  .signup-inner p,
  .signup-form input,
  .footer-brand p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* --- Tier 3: Buttons / store UI --- */
  .live-grid .tile .tile-buy,
  .live-grid .tile-feature .tile-buy,
  .picker-edition,
  .picker-size-select,
  .tile-soldlabel,
  .picker-size {
    font-size: 13px;
    letter-spacing: 0;
    line-height: 13px;
  }

  /* --- Tier 4: Price tags & product names --- */
  .live-grid .tile .price-burst-text,
  .live-grid .tile-feature .price-burst-text,
  .live-grid .tile .tile-name,
  .live-grid .tile-feature .tile-name {
    font-size: 15px;
  }

  /* --- Product photos: landscape crop --- */
  .live-grid .tile-art {
    aspect-ratio: 16 / 9;
  }

  /* --- Price burst: simple circle, smaller --- */
  .live-grid .tile .price-burst {
    width: 44px;
    height: 44px;
    top: -4px;
    right: -4px;
    filter: none;
    background: var(--accent-yellow);
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .live-grid .tile .price-burst-shape {
    display: none;
  }
  .live-grid .tile .price-burst-text {
    font-size: 13px;
    letter-spacing: 0;
  }

  /* --- Hide GONE burst on sold products --- */
  .live-grid .tile .price-burst-sold {
    display: none;
  }

  /* --- Hide NEW stickers --- */
  .tile-new-sticker {
    display: none;
  }

  /* --- Bottom countdown: match hero style --- */
  .signup-countdown {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px auto 0;
    padding: 8px 14px;
    background: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--accent-pink);
    transform: rotate(-0.5deg);
  }
  .signup-countdown-label {
    font-size: inherit;
    letter-spacing: 0.06em;
    color: var(--cream);
    opacity: 0.85;
    margin-bottom: 0;
  }
  .signup-countdown-clock {
    color: var(--accent-yellow);
    letter-spacing: 0.04em;
  }

  /* --- Hide gallery nav on mobile (lightbox handles it) --- */
  .gallery-nav,
  .gallery-dots {
    display: none;
  }

  /* --- Magnifying glass tap hint on images --- */
  .tile-art-clip::after {
    content: '\1F50D';
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 5;
    font-size: 14px;
    line-height: 1;
    background: #fff;
    color: #000;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    box-shadow: 1px 1px 0 var(--ink);
    display: grid;
    place-items: center;
    pointer-events: none;
  }
}

/* ---- Lightbox (mobile image viewer) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}
.lightbox-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  max-width: 100vw;
  max-height: 100vh;
}
.lightbox-img {
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border: 3px solid var(--cream);
  border-radius: 4px;
  background: var(--ink);
}
.lightbox-controls {
  display: flex;
  gap: 12px;
}
.lightbox-btn {
  font-family: var(--display-font); text-transform: uppercase; font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}
.lightbox-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.lightbox-close {
  background: var(--accent-pink);
  color: var(--ink);
}

/* ============================================================
   COMMISSIONS PAGE + /pay + thanks-commission + homepage CTA
   ============================================================ */

/* Header link */
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  margin-right: 8px;
  background: var(--accent-pink);
  color: var(--ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  font-family: 'Bowlby One', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease;
}
.nav-link:hover { transform: rotate(-2deg) scale(1.04); background: var(--accent-yellow); }

/* --- /commissions page ------------------------------------------------- */

.page-commissions { background: var(--cream); }

.comm-hero {
  background: var(--ink);
  color: var(--cream);
  padding: 60px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.comm-hero-inner { max-width: 880px; margin: 0 auto; }
.comm-hero-badge {
  display: inline-block;
  background: var(--accent-yellow);
  color: var(--ink);
  border: 2px solid var(--cream);
  font-family: 'Bowlby One', sans-serif;
  font-size: 14px;
  padding: 6px 14px;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  transform: rotate(-2deg);
}
.comm-hero-title {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}
.comm-hero-title span { display: block; }
.comm-hero-title-accent { color: var(--accent-pink); }
.comm-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 28px;
  opacity: 1;
}
.comm-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  margin: 0 auto 30px;
  max-width: 100%;
}
.comm-hero-status.closed {
  background: var(--accent-pink);
  color: var(--cream);
  border-color: var(--cream);
}
.comm-hero-dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: #22c55e;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
  animation: comm-pulse 1.6s ease-in-out infinite;
}
@keyframes comm-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.comm-hero-cta {
  display: inline-block;
  background: var(--accent-yellow);
  color: var(--ink);
  border: 3px solid var(--cream);
  border-radius: 12px;
  padding: 16px 36px;
  font-family: 'Bowlby One', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--accent-pink);
  transition: all 0.18s ease;
}
.comm-hero-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--accent-pink);
}

.comm-section { max-width: 1100px; margin: 0 auto; padding: 60px 24px; }
.comm-section-title {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.comm-section-sub {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.8;
}

/* "How it works" steps */
.comm-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.comm-step {
  background: #140a1c;
  color: var(--cream);
  border: 3px solid var(--ink);
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
  isolation: isolate;
}
.comm-step:nth-child(odd)  { transform: rotate(-0.8deg); }
.comm-step:nth-child(even) { transform: rotate(0.8deg); }
/* Soft colored glow that drifts inside each step box — each card
   gets its own brand-accent blob via :nth-child overrides below, with
   a staggered animation delay so the four boxes don't pulse in sync. */
.comm-step::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  background: var(--accent-pink);
  animation: comm-step-blob 16s ease-in-out infinite;
}
.comm-step:nth-child(1)::before { background: var(--accent-pink);   animation-delay:  0s; }
.comm-step:nth-child(2)::before { background: var(--accent-cyan);   animation-delay: -4s; }
.comm-step:nth-child(3)::before { background: var(--accent-yellow); animation-delay: -8s; }
.comm-step:nth-child(4)::before { background: var(--accent-purple); animation-delay: -12s; }
@keyframes comm-step-blob {
  0%   { transform: translate(-22%, -18%) scale(0.9); }
  33%  { transform: translate( 22%, -10%) scale(1.1); }
  66%  { transform: translate(-10%,  24%) scale(1.0); }
  100% { transform: translate(-22%, -18%) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .comm-step::before { animation: none; }
}
.comm-step-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent-pink);
  color: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: 'Bowlby One', sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  position: relative;
}
.comm-step h3 {
  font-family: 'Bowlby One', sans-serif;
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  position: relative;
}
.comm-step p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  color: var(--cream);
  opacity: 0.92;
  position: relative;
}

/* Size tiers */
.comm-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.comm-tier {
  background: #fff;
  border: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.comm-tier:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.comm-tier-gallery {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  cursor: pointer;
}
.comm-tier-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.comm-tier-img.is-active { opacity: 1; }
.comm-tier-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 12px, #f0e4c4 12px, #f0e4c4 24px);
  font-family: 'Bowlby One', sans-serif;
  text-align: center;
}
.comm-tier-placeholder span { font-size: 32px; }
.comm-tier-placeholder small { font-size: 11px; margin-top: 8px; opacity: 0.7; }
.comm-tier-dots {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.comm-tier-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--cream);
  padding: 0; cursor: pointer;
}
.comm-tier-dot.is-active { background: var(--ink); }
.comm-tier-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--accent-pink);
  color: var(--ink);
}
.comm-tier-name {
  font-family: 'Bowlby One', sans-serif;
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.comm-tier-price {
  font-size: 14px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.comm-tier-price strong {
  font-family: 'Bowlby One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  background: var(--accent-yellow);
  border: 1.5px solid var(--ink);
  padding: 2px 8px;
  margin: 0 4px;
}
.comm-tier-currency { color: var(--ink); opacity: 0.7; font-size: 12px; margin-left: 2px; }
.comm-tier-desc { font-size: 14px; line-height: 1.5; flex: 1; margin: 0 0 16px; color: var(--ink); }
.comm-tier-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  padding: 12px 18px;
  font-family: 'Bowlby One', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  border: 2px solid var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.comm-tier-cta:hover { background: var(--accent-pink); color: var(--cream); }

/* FAQ */
.comm-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.comm-faq-item {
  background: var(--cream);
  border: 2.5px solid var(--ink);
  padding: 0;
}
.comm-faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 800;
  font-size: 15px;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
.comm-faq-item summary::-webkit-details-marker { display: none; }
.comm-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Bowlby One', sans-serif;
  font-size: 22px;
  color: var(--accent-pink);
}
.comm-faq-item[open] summary::after { content: '−'; }
.comm-faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.55;
}
.comm-faq-item a { color: var(--accent-pink-dark); }

/* Inquiry form */
.comm-form-section { background: var(--ink); color: var(--cream); margin-top: 40px; padding: 70px 24px 90px; max-width: none; }
.comm-form-section .comm-section-title,
.comm-form-section .comm-section-sub { color: var(--cream); }
.comm-form-wrap { max-width: 720px; margin: 0 auto; }
.comm-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--cream);
  padding: 28px;
}
.comm-field { display: flex; flex-direction: column; gap: 6px; }
.comm-field-full { grid-column: 1 / -1; }
.comm-field label,
.comm-field > label { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.comm-field .req { color: var(--accent-pink-dark); }
.comm-field .muted { color: #666; font-weight: 600; text-transform: none; letter-spacing: 0; }
.comm-form input[type="text"],
.comm-form input[type="email"],
.comm-form input[type="tel"],
.comm-form input:not([type]),
.comm-form select,
.comm-form textarea {
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
}
.comm-form input:focus, .comm-form select:focus, .comm-form textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--ink);
}
.comm-form textarea { resize: vertical; min-height: 80px; }

/* Honeypot — visually hidden but parseable to bots */
.comm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.comm-size-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.comm-size-opt { position: relative; cursor: pointer; }
.comm-size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.comm-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border: 2px solid var(--ink);
  background: #fff;
  text-align: center;
  transition: all 0.15s ease;
}
.comm-size-opt input:checked + .comm-size-card {
  background: var(--accent-yellow);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.comm-size-label { font-family: 'Bowlby One', sans-serif; font-size: 15px; letter-spacing: 0.02em; }
.comm-size-price { font-size: 12px; color: #666; font-weight: 700; }

/* Upload */
.comm-upload { border: 2px dashed var(--ink); padding: 16px; background: #fff; }
.comm-upload input[type="file"] { display: block; width: 100%; font-weight: 700; }
.comm-upload-hint { font-size: 12px; color: #666; margin-top: 8px; }
.comm-upload-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.comm-upload-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-cyan);
  border: 1.5px solid var(--ink);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}
.comm-upload-chip.is-error { background: #fca5a5; }
.comm-upload-chip-name { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-upload-chip-size { color: #555; font-weight: 600; }
.comm-upload-err  { background: #fca5a5; border: 1.5px solid var(--ink); padding: 6px 10px; font-size: 13px; font-weight: 700; }
.comm-upload-note { font-size: 12px; color: #666; font-style: italic; margin-top: 4px; }

.comm-form-tos {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #555;
  line-height: 1.45;
  margin-top: 4px;
}
.comm-form-actions { grid-column: 1 / -1; display: flex; justify-content: center; }
.comm-form-submit {
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  font-family: 'Bowlby One', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--accent-pink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.comm-form-submit:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent-pink); }
.comm-form-submit:disabled { opacity: 0.6; cursor: wait; }
.comm-form-error {
  grid-column: 1 / -1;
  background: #fee2e2;
  border: 2px solid #b91c1c;
  padding: 10px 14px;
  font-weight: 700;
  color: #7f1d1d;
}

.comm-form-done {
  max-width: 560px;
  margin: 0 auto;
  background: var(--cream);
  border: 3px solid var(--cream);
  padding: 40px 30px;
  text-align: center;
  color: var(--ink);
}
.comm-form-done-stamp {
  display: inline-block;
  background: #22c55e;
  color: var(--cream);
  border: 2.5px solid var(--ink);
  font-family: 'Bowlby One', sans-serif;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 4px 14px;
  margin-bottom: 14px;
  transform: rotate(-2deg);
}
.comm-form-done h3 { font-family: 'Bowlby One', sans-serif; font-size: 26px; margin: 0 0 10px; text-transform: uppercase; }
.comm-form-done p { font-size: 15px; line-height: 1.55; }

/* --- Home-page commission tile ----------------------------------------
   Renders inside .live-grid as another .tile-feature, so it inherits the
   full-width side-by-side layout (and vertical stack < 620px) from the
   featured product styles above. Just a few overrides for the CTA button
   anchor (which is an <a>, not a <button>) and the featured-tag accent. */
.live-grid .tile-commissions .featured-tag {
  background: var(--accent-pink);
  color: var(--cream);
  border-color: var(--ink);
}
.live-grid .tile-commissions .tile-buy-commissions {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.live-grid .tile-commissions .tile-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 14px, #f0e4c4 14px, #f0e4c4 28px);
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* --- /pay page --------------------------------------------------------- */
.page-pay { background: var(--cream); }
.pay { max-width: 980px; margin: 0 auto; padding: 32px 24px 80px; }
.pay-card {
  background: #fff;
  border: 3px solid var(--ink);
  padding: 32px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 6px 6px 0 var(--ink);
}
.pay-card h1 { font-family: 'Bowlby One', sans-serif; letter-spacing: 0.02em; }
.pay-card code { background: var(--accent-yellow); padding: 2px 6px; }
.pay-card-empty { text-align: left; }
.pay-card-paid .pay-stamp,
.pay-card-bad,
.pay-card-paid {
  text-align: center;
}
.pay-stamp {
  display: inline-block;
  background: #22c55e;
  color: var(--cream);
  border: 3px solid var(--ink);
  padding: 4px 14px;
  font-family: 'Bowlby One', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  transform: rotate(-3deg);
}
.pay-card-bad  { border-color: #b91c1c; }
.pay-card-bad h1 { color: #b91c1c; }

.pay-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: flex-start;
}
.pay-summary, .pay-form-wrap {
  background: #fff;
  border: 3px solid var(--ink);
  padding: 28px;
  box-shadow: 5px 5px 0 var(--ink);
}
.pay-summary h1 { font-family: 'Bowlby One', sans-serif; font-size: 22px; margin: 0 0 16px; letter-spacing: 0.02em; }
.pay-summary-card { background: var(--cream); border: 2px solid var(--ink); padding: 20px; }
.pay-summary-kind { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-pink-dark); margin-bottom: 6px; }
.pay-summary-pet  { font-family: 'Bowlby One', sans-serif; font-size: 20px; line-height: 1.15; margin-bottom: 4px; }
.pay-summary-note { font-size: 14px; line-height: 1.45; margin: 6px 0 14px; color: #444; }
.pay-summary-amount { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--ink); }
.pay-summary-amount-num {
  display: inline-block;
  font-family: 'Bowlby One', sans-serif;
  font-size: 32px;
  letter-spacing: 0.02em;
  background: var(--accent-yellow);
  border: 2px solid var(--ink);
  padding: 4px 12px;
}
.pay-summary-foot { font-size: 12px; line-height: 1.5; margin-top: 16px; }

.pay-form-wrap h1, .pay-form-wrap h2 {
  font-family: 'Bowlby One', sans-serif;
  letter-spacing: 0.02em;
  margin-top: 0;
}

@media (max-width: 800px) {
  .pay-grid { grid-template-columns: 1fr; }
}

/* Reuse checkout-form classes — already styled. Add a couple tweaks for /pay
   so the layout still flows on mobile. */
.page-pay .checkout-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.page-pay .checkout-form .full { grid-column: 1 / -1; }
.page-pay .checkout-form label { display: flex; flex-direction: column; gap: 4px; }
.page-pay .checkout-form input,
.page-pay .checkout-form select {
  border: 2px solid var(--ink);
  padding: 10px 12px;
  background: #fff;
  font: inherit;
  font-weight: 600;
}
.page-pay .checkout-form input:focus,
.page-pay .checkout-form select:focus { outline: none; box-shadow: 3px 3px 0 var(--ink); }
.page-pay .checkout-form input:disabled,
.page-pay .checkout-form select:disabled { background: var(--cream); color: #666; }
.page-pay .checkout-form span { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.page-pay .checkout-form .muted { color: #666; font-weight: 600; text-transform: none; letter-spacing: 0; }

.form-stage-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.btn-place {
  background: var(--ink); color: var(--cream); border: 3px solid var(--ink);
  font-family: 'Bowlby One', sans-serif; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 14px 28px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--accent-pink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-place:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent-pink); }
.btn-place:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel {
  background: transparent; color: var(--ink); border: 2px solid var(--ink);
  padding: 12px 20px; cursor: pointer; font-weight: 700;
  font-size: 14px;
}
.btn-cancel:hover { background: var(--ink); color: var(--cream); }
.payment-error {
  background: #fee2e2; border: 2px solid #b91c1c;
  padding: 12px 14px; color: #7f1d1d; font-weight: 700; margin-top: 14px;
}

/* thanks-commission inherits .thanks-card from thanks.php styles. Just a
   couple of extras for the commission-specific bits. */
.thanks-card-commission { background: var(--cream); }
.thanks-next {
  background: var(--accent-yellow);
  border: 2px solid var(--ink);
  padding: 14px 16px;
  margin: 18px 0;
}
.thanks-next h3 {
  font-family: 'Bowlby One', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.thanks-next p { margin: 0; font-size: 14px; line-height: 1.5; }