/* =========================================================
   BISCUIT — house style
   paper · ink · grain
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Cabin+Sketch:wght@400;700&family=Caveat:wght@500;700&family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300..900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --paper: #F2EBD8;
  --paper-warm: #ECE3CB;
  --paper-deep: #E5DCC1;
  --ink: #2A2620;          /* softened from harsh black to pencil */
  --ink-soft: #3D3830;
  --ink-mute: #7A7060;
  --green: #2BAA2F;
  --green-deep: #1F8222;
  --red: #E14B3D;
  --red-deep: #C13628;
  --yellow: #F2D74A;
  --blue: #3F6FB8;

  /* new — softer accents to support the illustrated palette */
  --coral:      #E8909A;   /* primary CTA, like Odosketch's pink button */
  --coral-deep: #D17280;
  --sky:        #B5C9D6;   /* sketchy clouds & atmosphere */
  --sky-ink:    #6B8FA8;   /* cloud outlines */

  /* crayon card colors — saturated construction-paper palette */
  --crayon-1:  #F2A35E;
  --crayon-2:  #6FBFC8;
  --crayon-3:  #E7B23B;
  --crayon-4:  #B89FE3;
  --crayon-5:  #E7798A;
  --crayon-6:  #7BC082;
  --crayon-7:  #E3D04B;
  --crayon-8:  #D6594E;
  --crayon-9:  #6A8FE3;
  --crayon-10: #B7A14E;
  --crayon-11: #9B5BA8;
  --crayon-12: #95C8E0;
  --crayon-13: #E89BAA;

  --font-display: 'Cabin Sketch', 'Bagel Fat One', system-ui, sans-serif;
  --font-display-bold: 'Bagel Fat One', system-ui, sans-serif;  /* kept for places that need real weight */
  --font-edit: 'Instrument Serif', Georgia, serif;
  --font-hand: 'Caveat', 'Bradley Hand', cursive;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-stamp: 6px 6px 0 var(--ink);
  --shadow-stamp-lg: 10px 10px 0 var(--ink);
  --border-ink: 3px solid var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain overlay — subtle paper texture covering the entire viewport */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

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

/* =========================================================
   nav
   ========================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--border-ink);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__brand-mark {
  width: 30px;
  height: 30px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  transform: rotate(-6deg);
  overflow: hidden;
}
.nav__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav__links a {
  position: relative;
  padding-bottom: 2px;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--ink);
  transition: width 0.25s ease;
}

.nav__links a:hover::after { width: 100%; }

.nav__cta {
  font-family: var(--font-display);
  font-size: 14px;
  background: var(--green);
  color: var(--ink);
  padding: 10px 18px;
  border: var(--border-ink);
  box-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.nav__cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* quieter nav link, used for "Lab" — meme generator is a side product */
.nav__link-quiet {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 22px;
  color: var(--green-deep);
  transform: rotate(-3deg);
  display: inline-block;
  padding: 0 4px;
}
.nav__link-quiet:hover { color: var(--ink); }

/* =========================================================
   buttons (re-usable stamp style)
   ========================================================= */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display-bold);
  font-size: 22px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 28px;
  border: var(--border-ink);
  box-shadow: var(--shadow-stamp);
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.stamp:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.stamp:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }

.stamp--green  { background: var(--green); color: var(--ink); }
.stamp--coral  { background: var(--coral); color: var(--ink); }
.stamp--red    { background: var(--red); color: var(--paper); }
.stamp--yellow { background: var(--yellow); color: var(--ink); }
.stamp--paper  { background: var(--paper); color: var(--ink); }

.stamp--big {
  font-size: 38px;
  padding: 24px 44px;
  box-shadow: var(--shadow-stamp-lg);
}

.stamp--big:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--ink); }
.stamp--big:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }

/* =========================================================
   hero
   ========================================================= */

.hero {
  position: relative;
  padding: 80px 32px 60px;
  overflow: hidden;
}

.hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 14px;
  margin-bottom: 28px;
  transform: rotate(-1.5deg);
}

.hero__eyebrow .dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* sketched cloud doodles in the hero corners */
.cloud {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.cloud--1 {
  top: -16px;
  left: 36%;
  width: clamp(96px, 9vw, 130px);
  transform: rotate(-4deg);
  opacity: 0.85;
}
.cloud--2 {
  top: 4px;
  right: 6%;
  width: clamp(110px, 11vw, 150px);
  transform: rotate(6deg);
  opacity: 0.85;
}
@keyframes cloud-drift {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes cloud-drift-2 {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50%      { transform: translateY(-5px) rotate(7deg); }
}
.cloud--1 { animation: cloud-drift 9s ease-in-out infinite; }
.cloud--2 { animation: cloud-drift-2 11s ease-in-out infinite; }
@media (max-width: 720px) {
  .cloud--1 { left: 50%; transform: translateX(-50%) rotate(-4deg); }
  .cloud--2 { top: 0; right: -10px; }
}

/* "ready to meet him?" handwritten kicker pointing at the headline */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 32px;
  color: var(--coral-deep);
  margin-bottom: 12px;
  transform: rotate(-3deg);
  position: relative;
  z-index: 2;
}
.hero__kicker .hand-svg { width: 50px; height: 40px; }
.hero__kicker .hand-svg path { stroke: var(--coral-deep); stroke-width: 2.4; }

@media (max-width: 720px) {
  .hero__kicker { font-size: 26px; }
  .hero__kicker .hand-svg { width: 40px; height: 32px; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  position: relative;
}

.hero__title em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--green-deep);
}

.hero__sub {
  font-family: var(--font-edit);
  font-size: clamp(22px, 2.4vw, 32px);
  font-style: italic;
  max-width: 620px;
  line-height: 1.25;
  margin-bottom: 40px;
  color: var(--ink-soft);
}

.hero__sub strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: normal;
  background: var(--yellow);
  padding: 0 8px;
  display: inline-block;
  transform: rotate(-2deg);
}

.hero__ctas {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-left: 8px;
}

/* hero floating dog */
.hero__dog {
  position: absolute;
  right: -40px;
  top: 40px;
  width: clamp(280px, 32vw, 480px);
  transform: rotate(8deg);
  pointer-events: none;
  filter: drop-shadow(8px 8px 0 var(--ink));
}

.hero__dog img { width: 100%; }

@keyframes wobble {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(5deg) translateY(-6px); }
}

.hero__dog { animation: wobble 5s ease-in-out infinite; }

/* handwritten note next to the hero dog: "the man himself" + curved arrow */
.hero__hand-note {
  position: absolute;
  right: 6vw;
  bottom: 30px;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  transform: rotate(-6deg);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}
.hero__hand-note .hand-svg {
  width: 70px;
  height: 46px;
  margin-bottom: -2px;
}
@media (max-width: 960px) {
  .hero__hand-note { display: none; }
}

/* tape strips around the hero */
.tape {
  position: absolute;
  background: var(--yellow);
  opacity: 0.9;
  width: 90px;
  height: 24px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* scattered marks */
.scatter {
  position: absolute;
  font-family: var(--font-display);
  color: var(--red);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   marquee
   ========================================================= */

.marquee {
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 18px 0;
  position: relative;
}

.marquee__track {
  display: flex;
  gap: 48px;
  align-items: center;
  white-space: nowrap;
  animation: scroll 38s linear infinite;
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: -0.01em;
}

.marquee__track:hover { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}

.marquee__star {
  display: inline-block;
  width: 24px; height: 24px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

.marquee__face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--paper);
  overflow: hidden;
  flex-shrink: 0;
}

.marquee__face img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  margin: -15%;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   manifesto
   ========================================================= */

.manifesto {
  padding: 120px 32px;
  position: relative;
  background: var(--paper-warm);
  border-bottom: var(--border-ink);
  overflow: hidden;  /* clip the paw when it's off-screen left */
}

/* ====================================================
   treat-grab: a paw sneaks in from the left, grabs a
   bone treat, and retreats. Scroll-driven via index.js
   ==================================================== */

.treat-grab {
  position: absolute;
  left: 0;
  /* dead vertically centered in the manifesto section */
  top: 50%;
  width: 340px;
  height: 240px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

/* hide on narrower screens — there's not enough margin to hold it */
@media (max-width: 1200px) {
  .treat-grab { display: none; }
}

.treat-grab__bone {
  position: absolute;
  left: 70px;
  top: 50%;
  width: 96px;
  height: auto;
  transform: translateY(-50%) rotate(-6deg);
  opacity: var(--bone-opacity, 1);
  /* no CSS opacity transition — JS drives it on every frame for smoothness */
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.10));
  will-change: opacity;
}

.treat-grab__paw {
  position: absolute;
  left: 0;
  top: 50%;
  /* width sets the box dimension; after rotate(90deg) it becomes
     the visual height, and height:auto becomes the visual width */
  width: 240px;
  height: auto;
  /* The source image is in its natural vertical orientation
     (paw pads up, arm extending down). We rotate 90° CW so paw
     points right (toward the bone) and arm extends off-screen left.
     --paw-tilt adds an organic micro-rotation during the journey. */
  transform:
    translateX(var(--paw-x, -120%))
    translateY(-50%)
    rotate(calc(90deg + var(--paw-tilt, 0deg)));
  transform-origin: center center;
  z-index: 1;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.10));
  will-change: transform;
}

.manifesto__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.manifesto__label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.manifesto__label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--ink);
}

.manifesto__quote {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.05;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.manifesto__quote span {
  background: var(--green);
  font-style: normal;
  font-family: var(--font-display);
  padding: 0 10px;
  display: inline-block;
  transform: rotate(-1deg);
  margin: 0 4px;
}

.manifesto__body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
}

.manifesto__body p + p { margin-top: 16px; }

/* Contract address — sketchy ticket-stub with click-to-copy */
.ca-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 14px;
  background: var(--paper-warm);
  border: 2px dashed var(--ink-mute);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  text-align: left;
  max-width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.ca-block:hover {
  border-color: var(--ink);
  border-style: solid;
  background: var(--paper);
  transform: translateY(-1px);
}
.ca-block:active { transform: translateY(0); }

.ca-block__label {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--green-deep);
  transform: rotate(-4deg);
  display: inline-block;
  flex-shrink: 0;
  padding: 0 4px;
}

.ca-block__addr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  word-break: break-all;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.ca-block__icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.ca-block__icon svg { width: 18px; height: 18px; }
.ca-block:hover .ca-block__icon { color: var(--ink); }

.ca-block__hint {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-mute);
  white-space: nowrap;
  flex-shrink: 0;
  transform: rotate(-2deg);
}
@media (max-width: 720px) {
  .ca-block__hint { display: none; }
  .ca-block__addr { font-size: 12px; }
}

/* "copied!" feedback after click */
.ca-block.is-copied::after {
  content: 'copied!';
  position: absolute;
  top: -22px;
  right: 16px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 22px;
  color: var(--green-deep);
  transform: rotate(-6deg);
  pointer-events: none;
  animation: ca-copied 1.4s ease forwards;
}
@keyframes ca-copied {
  0%   { opacity: 0; transform: rotate(-6deg) translateY(8px); }
  20%  { opacity: 1; transform: rotate(-6deg) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-6deg) translateY(-6px); }
}

.manifesto__art {
  position: relative;
  display: grid;
  place-items: center;
}

.manifesto__art-frame {
  background: var(--paper);
  border: var(--border-ink);
  box-shadow: var(--shadow-stamp-lg);
  padding: 24px;
  transform: rotate(-3deg);
  width: 100%;
  max-width: 460px;
  position: relative;
}

/* sketchy second stroke — looks like the line was drawn twice */
.manifesto__art-frame::before {
  content: '';
  position: absolute;
  inset: -7px -5px -3px -6px;
  border: 1.8px solid var(--ink);
  transform: rotate(0.4deg);
  pointer-events: none;
  opacity: 0.7;
}
.manifesto__art-frame::after {
  content: '';
  position: absolute;
  inset: 4px 7px 6px 5px;
  border: 1.4px solid var(--ink);
  transform: rotate(-0.3deg);
  pointer-events: none;
  opacity: 0.45;
}

.manifesto__art-frame img { width: 100%; position: relative; z-index: 1; }

/* BUY button — replaces the old "Biscuit, swole" caption tag */
.manifesto__buy {
  position: absolute;
  bottom: -22px;
  right: -14px;
  background: var(--green);
  color: var(--ink);
  padding: 14px 26px;
  font-family: var(--font-display-bold);
  font-size: 26px;
  letter-spacing: 0.02em;
  border: var(--border-ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(4deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.manifesto__buy:hover {
  transform: rotate(2deg) translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--ink);
  background: #38C53D;
}
.manifesto__buy:active {
  transform: rotate(4deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

/* handwritten side-note pointing at the framed dog */
.manifesto__note {
  position: absolute;
  top: -8px;
  left: -32px;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--green-deep);
  transform: rotate(-8deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.manifesto__note .hand-svg {
  width: 56px;
  height: 40px;
}
.manifesto__note .hand-svg path { stroke: var(--green-deep); }

@media (max-width: 720px) {
  .manifesto__note { font-size: 22px; left: -8px; top: -28px; }
}

/* =========================================================
   gallery — all the moods
   ========================================================= */

.gallery {
  padding: 100px 32px 110px;
  position: relative;
}

.gallery__head {
  max-width: 1280px;
  margin: 0 auto 64px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.gallery__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  position: relative;
}

.gallery__title em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--coral-deep);
  position: relative;
  display: inline-block;
}

/* hand-drawn wobbly underline beneath "moods." */
.gallery__title em::after {
  content: '';
  position: absolute;
  left: -4%;
  right: 12%;
  bottom: -14px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' fill='none' stroke='%23D17280' stroke-width='3' stroke-linecap='round'><path d='M3 11 Q 30 4, 60 9 T 120 8 T 180 10 T 237 7'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.gallery__intro {
  max-width: 360px;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink-soft);
  align-self: flex-end;
  position: relative;
  padding-left: 48px;
}

.gallery__intro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 36px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12 Q 12 8, 24 12 T 36 12'/><path d='M30 6 L 36 12 L 30 18'/></svg>");
  background-repeat: no-repeat;
}

.gallery__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}

.mood-card {
  position: relative;
  background: var(--paper);
  border: var(--border-ink);
  padding: 14px 14px 18px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

/* hand-drawn ribbon/bookmark in the top-right corner of each card */
.mood-card__ribbon {
  position: absolute;
  top: -10px;
  right: 18px;
  width: 38px;
  height: 50px;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 4;
  transform: rotate(2deg);
}
.mood-card__ribbon svg { width: 100%; height: 100%; display: block; }
.mood-card:nth-child(2) .mood-card__ribbon { transform: rotate(-3deg); right: 22px; }
.mood-card:nth-child(3) .mood-card__ribbon { transform: rotate(4deg);  right: 14px; }
.mood-card:nth-child(4) .mood-card__ribbon { transform: rotate(-1deg); right: 20px; }

.mood-card:nth-child(4n+1) { transform: rotate(-1deg); }
.mood-card:nth-child(4n+2) { transform: rotate(0.6deg); }
.mood-card:nth-child(4n+3) { transform: rotate(-0.4deg); }
.mood-card:nth-child(4n+4) { transform: rotate(1.4deg); }

.mood-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 10px 10px 0 var(--ink);
  z-index: 5;
}

/* Image area — no colored frame, just the image on the polaroid card */
.mood-card__img-wrap {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  overflow: hidden;
  background: transparent;
}

.mood-card__img-wrap img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mood-card__num {
  position: absolute;
  top: 8px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.mood-card__label {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.mood-card__sub {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* "+ many more soon" gallery footer (replaces the old in-grid placeholder) */
.gallery__more {
  max-width: 1200px;
  margin: 56px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.gallery__more .hand-svg {
  width: 78px;
  height: 50px;
  transform: rotate(-3deg);
}
.gallery__more .hand-svg path { stroke: var(--ink-mute); stroke-width: 2.4; }

.gallery__more-text {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 32px;
  color: var(--ink-soft);
  line-height: 1.1;
  transform: rotate(-1.5deg);
  display: inline-block;
}

.gallery__more-link {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--coral-deep);
  border-bottom: 2px dotted var(--coral-deep);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.gallery__more-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .gallery__more-text { font-size: 26px; }
  .gallery__more-link { font-size: 22px; }
}

/* =========================================================
   featured strip — TODAY'S MOOD
   ========================================================= */

.feature {
  padding: 120px 32px;
  background: var(--ink);
  color: var(--paper);
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
  position: relative;
  overflow: hidden;
}

.feature__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.feature__label {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--green);
  color: var(--ink);
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 28px;
}

.feature__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 8.5vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}

.feature__title em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--yellow);
}

.feature__copy {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 36px;
  color: rgba(242, 235, 216, 0.85);
  max-width: 460px;
}

.feature__art {
  position: relative;
  display: grid;
  place-items: center;
}

.feature__art img {
  width: 100%;
  max-width: 520px;
  filter: drop-shadow(0 0 30px rgba(43, 170, 47, 0.3));
}

.feature__sparkle {
  position: absolute;
  font-family: var(--font-display);
  color: var(--yellow);
  font-size: 64px;
  pointer-events: none;
}

/* =========================================================
   CTA
   ========================================================= */

.cta {
  padding: 140px 32px;
  text-align: center;
  position: relative;
  background: var(--green);
  border-bottom: var(--border-ink);
  overflow: hidden;
}

.cta__inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: var(--ink);
}

.cta__sub {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  margin-bottom: 48px;
  color: var(--ink-soft);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.cta__bg {
  position: absolute;
  font-family: var(--font-display);
  color: var(--green-deep);
  font-size: 320px;
  line-height: 0.8;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
}

/* =========================================================
   lab-note — small handwritten "p.s. there's a meme lab" mention
   ========================================================= */

.lab-note {
  padding: 70px 32px 110px;
  position: relative;
  background: var(--paper);
  border-top: 2px dashed var(--ink-mute);
}

.lab-note__inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}

.lab-note__ps {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.85;
  color: var(--green-deep);
  transform: rotate(-6deg);
  display: inline-block;
}

.lab-note__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.lab-note__line {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--ink-soft);
}

.lab-note__line em {
  font-family: var(--font-hand);
  font-weight: 700;
  font-style: normal;
  color: var(--ink);
  font-size: 1.15em;
}

.lab-note__btn-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.lab-note__sig {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-mute);
  transform: rotate(-2deg);
  display: inline-block;
}

@media (max-width: 720px) {
  .lab-note__inner { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .lab-note__ps { font-size: 72px; }
}

/* =========================================================
   hand-drawn accents — arrows, underlines, scribbles, notes
   ========================================================= */

.hand-note {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.05;
  display: inline-block;
}
.hand-note--lg     { font-size: 30px; font-weight: 700; }
.hand-note--green  { color: var(--green-deep); }
.hand-note--red    { color: var(--red-deep); }
.hand-note--tilt-l { transform: rotate(-4deg); }
.hand-note--tilt-r { transform: rotate(3deg); }

.hand-svg {
  display: block;
  overflow: visible;
  pointer-events: none;
}
.hand-svg path,
.hand-svg circle,
.hand-svg ellipse,
.hand-svg line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hand-svg--green path { stroke: var(--green-deep); }
.hand-svg--red   path { stroke: var(--red-deep); }

/* hand-drawn wavy section dividers */
.sketch-divider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 24px;
}
.sketch-divider svg:first-child {
  display: block;
  width: 100%;
  height: 30px;
}
.sketch-divider .paper-plane {
  position: absolute;
  top: 22px;
  right: 22%;
  width: 56px;
  height: 38px;
  transform: rotate(-12deg);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.08));
  animation: plane-drift 6s ease-in-out infinite;
}
@keyframes plane-drift {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50%      { transform: translateY(-8px) rotate(-9deg); }
}
@media (max-width: 720px) {
  .sketch-divider { padding: 32px 16px 16px; }
  .sketch-divider .paper-plane { right: 12%; width: 44px; height: 30px; }
}

/* meme lab toast — surfaces image-load errors */
.ml-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 30px);
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border: var(--border-ink);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(520px, calc(100vw - 40px));
}
.ml-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   scroll & interaction animations
   ========================================================= */

/* hero dog parallax (drives via --parallax-y from JS) */
.hero__dog {
  --parallax-y: 0px;
}
.hero__dog img {
  transform: translateY(var(--parallax-y));
  transition: transform 0.05s linear;
}

/* a generic reveal: starts hidden, .is-in shows it */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* manifesto art slides in from the right with extra flair */
.manifesto__art[data-reveal] {
  transform: translateY(28px) translateX(40px) rotate(2deg);
}
.manifesto__art[data-reveal].is-in {
  transform: translateY(0) translateX(0) rotate(0deg);
  transition-duration: 1s;
}

/* manifesto pointer-tilt (driven by JS via --tilt-x / --tilt-y) */
[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  perspective: 1000px;
  transform-style: preserve-3d;
}
[data-tilt] .manifesto__art-frame {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-tilt]:hover .manifesto__art-frame {
  transform: rotate(-3deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

/* gallery card stagger: pop in with bounce */
.reveal-pop {
  opacity: 0;
  transform: translateY(40px) scale(0.92) rotate(0deg);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-pop.is-in { opacity: 1; }
.mood-card.reveal-pop.is-in:nth-child(4n+1) { transform: translateY(0) scale(1) rotate(-1deg); }
.mood-card.reveal-pop.is-in:nth-child(4n+2) { transform: translateY(0) scale(1) rotate(0.6deg); }
.mood-card.reveal-pop.is-in:nth-child(4n+3) { transform: translateY(0) scale(1) rotate(-0.4deg); }
.mood-card.reveal-pop.is-in:nth-child(4n+4) { transform: translateY(0) scale(1) rotate(1.4deg); }
.mood-coming.reveal-pop.is-in { transform: translateY(0) scale(1) rotate(-0.6deg); }

/* hover: dance harder than the rest state */
.mood-card {
  transform-origin: center;
}
.mood-card:hover .mood-card__img-wrap {
  animation: jiggle 0.5s ease-in-out;
}
@keyframes jiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

/* tap bounce on mood card click — rides alongside link nav */
.mood-card.is-tapped {
  animation: card-tap 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-tap {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.mood-card:hover { animation: none; }

/* hero dog "poke" easter egg */
.hero__dog.is-poked img {
  animation: dog-jump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dog-jump {
  0%   { transform: translateY(var(--parallax-y, 0)) rotate(0deg); }
  30%  { transform: translateY(calc(var(--parallax-y, 0px) - 50px)) rotate(-12deg); }
  60%  { transform: translateY(calc(var(--parallax-y, 0px) - 8px)) rotate(8deg); }
  100% { transform: translateY(var(--parallax-y, 0)) rotate(0deg); }
}

/* gallery title underline draws itself in when revealed */
.gallery__head[data-reveal] .gallery__title em::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
.gallery__head[data-reveal].is-in .gallery__title em::after {
  transform: scaleX(1);
}

/* the "p.s." in the lab note bobs gently — like the hand is still on the page */
.lab-note[data-reveal].is-in .lab-note__ps {
  animation: ps-bob 4s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes ps-bob {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-6px); }
}

/* hand-drawn SVG arrows draw themselves in via stroke-dashoffset
   — works in any container that's revealed via [data-reveal] */
.hand-svg path {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}
[data-reveal] .hand-svg path {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].is-in .hand-svg path {
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal-pop,
  .hero__dog img,
  [data-tilt] .manifesto__art-frame {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   footer
   ========================================================= */

.footer {
  padding: 60px 32px 40px;
  border-top: var(--border-ink);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.footer__bottom {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px dashed var(--ink-mute);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  z-index: 1;  /* above the biscuit-rise so © text is never blocked */
}

/* =========================================================
   end-of-page biscuit — sprouts up from below the footer's
   bottom edge, sits to the right next to the © row
   (15-20% from the right edge), no overshoot
   ========================================================= */

.biscuit-rise {
  position: absolute;
  bottom: 0;
  right: 12.5%;
  width: clamp(160px, 18vw, 280px);
  /* container height matches image aspect (783/678 ≈ 1.155) so
     the dog fills exactly when at translateY(0) */
  height: clamp(185px, 21vw, 324px);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.biscuit-rise img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  /* start: pushed below container, hidden by overflow */
  transform: translateY(100%);
  /* easeOutQuart — smooth landing with NO overshoot above the bottom */
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.biscuit-rise.is-in img {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .biscuit-rise img {
    transform: translateY(0) !important;
    transition: none !important;
  }
}

/* on narrow screens, recenter so he doesn't crowd the right edge */
@media (max-width: 720px) {
  .biscuit-rise {
    right: 50%;
    transform: translateX(50%);
    width: clamp(160px, 38vw, 220px);
    height: clamp(185px, 44vw, 254px);
  }
}

.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.footer__tagline {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 380px;
}

.footer__tagline--small {
  font-size: 15px;
  color: var(--ink-mute);
  margin-top: 14px;
}

/* empty 3rd grid column reserves space for the biscuit-rise — keeps the
   page columns from collapsing when the dog overlaps it */
.footer__col--biscuit-slot {
  min-height: 1px;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}

.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 8px; font-size: 15px; }
.footer__col a { border-bottom: 1px dashed transparent; transition: border-color 0.2s; }
.footer__col a:hover { border-bottom-color: var(--ink); }

/* =========================================================
   responsive
   ========================================================= */

@media (max-width: 960px) {
  .nav { padding: 12px 20px; }
  .nav__links { gap: 16px; }
  .nav__links a:not(.nav__cta):not(.nav__link-quiet) { display: none; }

  .hero { padding: 60px 20px 40px; }
  .hero__dog { display: none; }
  .hero__title { font-size: clamp(60px, 18vw, 120px); }

  .manifesto { padding: 80px 20px; }
  .manifesto__inner { grid-template-columns: 1fr; gap: 60px; }

  .gallery { padding: 80px 20px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .feature { padding: 80px 20px; }
  .feature__inner { grid-template-columns: 1fr; gap: 40px; }

  .cta { padding: 100px 20px; }

  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 560px) {
  .gallery__grid { grid-template-columns: 1fr 1fr; }
  .marquee__track { font-size: 28px; }
  .marquee__face { width: 44px; height: 44px; }
}

/* =========================================================
   MEME LAB
   ========================================================= */

body.lab {
  background: var(--paper-warm);
  overflow: hidden;
  height: 100vh;
}

.lab-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.lab-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  border-bottom: var(--border-ink);
}

.lab-nav__left,
.lab-nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lab-nav__back {
  font-family: var(--font-display);
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-nav__back .nav__brand-mark { width: 26px; height: 26px; font-size: 14px; }

.lab-nav__title {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
  border-left: 1px solid var(--ink);
  padding-left: 16px;
  margin-left: 4px;
}

.lab-tabs {
  display: flex;
  gap: 0;
  border: var(--border-ink);
  background: var(--paper);
}

.lab-tab {
  font-family: var(--font-display);
  font-size: 15px;
  padding: 10px 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-right: 2px solid var(--ink);
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: background 0.15s;
}

.lab-tab:last-child { border-right: none; }
.lab-tab:hover { background: var(--paper-deep); }
.lab-tab.is-active { background: var(--ink); color: var(--paper); }

.lab-action {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  background: var(--paper);
  border: var(--border-ink);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.lab-action:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.lab-action--solid { background: var(--ink); color: var(--paper); }
.lab-action--green { background: var(--green); color: var(--ink); }

.lab-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  min-height: 0;
}

/* ========== left rail: stickers + uploader ========== */

.rail {
  background: var(--paper);
  border-right: var(--border-ink);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail--right { border-right: none; border-left: var(--border-ink); }

/* a rail__pane is a vertical region inside a rail (templates pane or
   upload pane). It needs to be a flex column AND inherit the rail's
   bounded height so its inner .rail__scroll can claim flex:1 and
   actually scroll. Without this, the template grid overflows the rail
   on short viewports and the bottom tiles get clipped. */
.rail__pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.rail__pane[hidden] { display: none; }   /* keep [hidden] working */

/* the right rail is two stacked sections: sticker drawer + properties */
.rail--right { display: flex; flex-direction: column; min-height: 0; }

/* DESKTOP: the .mobile-pane wrappers (added for the mobile bottom-sheet
   system) are plain divs and break the flex chain on desktop. These rules
   restore the layout: sticker pane caps at 50% of rail height, properties
   pane fills the remainder. Scoped ≥1081px so they don't fight the mobile
   sheet rules. */
@media (min-width: 1081px) {
  .rail .mobile-pane--templates {
    /* same flex-chain fix as the right rail — without this the templates
       wrapper is display:block and breaks the height inheritance */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .rail--right .mobile-pane--stickers {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    max-height: 50%;
    min-height: 0;
    border-bottom: 2px solid var(--ink);
  }
  .rail--right .mobile-pane--properties {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

.sticker-drawer {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 16px;
  /* desktop border-bottom is on .mobile-pane--stickers wrapper above */
}

.rail__head--props {
  flex-shrink: 0;
}

.rail__head {
  padding: 16px 18px 10px;
  border-bottom: 1px dashed var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rail__head strong { color: var(--ink); font-weight: normal; }

.rail__scroll {
  overflow-y: auto;
  padding: 14px;
  flex: 1;
}

.rail__hint {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  padding: 0 18px 12px;
}

.template-grid,
.sticker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.template-tile,
.sticker-tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}

.template-tile:hover,
.sticker-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 2;
}

.template-tile img,
.sticker-tile img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.template-tile.is-active {
  background: var(--green);
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

.uploader {
  margin: 14px 18px 0;
  padding: 28px 18px;
  background: var(--paper-deep);
  border: 3px dashed var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.uploader:hover { background: var(--paper-warm); }

.uploader.is-drag { background: var(--green); }

.uploader__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 8px;
}

.uploader__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.uploader input[type="file"] { display: none; }

/* ========== center: canvas ========== */

.stage-wrap {
  background: 
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(26,26,26,0.04) 14px 16px),
    var(--paper-warm);
  display: grid;
  place-items: center;
  padding: 40px;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.stage-frame {
  background: var(--paper);
  border: var(--border-ink);
  box-shadow: var(--shadow-stamp-lg);
  position: relative;
}

.stage-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  padding: 40px;
}

.stage-empty[hidden] { display: none; }

.stage-empty__inner {
  max-width: 320px;
}

.stage-empty__title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 0.95;
  margin-bottom: 12px;
}

.stage-empty__title em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--green-deep);
}

.stage-empty__sub {
  font-family: var(--font-edit);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
}

#stage-container {
  display: block;
}

.stage-toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: var(--paper);
  border: var(--border-ink);
  padding: 8px;
  box-shadow: var(--shadow-stamp);
  z-index: 5;
}

.stage-toolbar button {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 8px 14px;
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}

.stage-toolbar button:hover { background: var(--yellow); }
.stage-toolbar button.danger { background: var(--red); color: var(--paper); }
.stage-toolbar button.danger:hover { background: var(--red-deep); }

/* ========== right rail: properties ========== */

.props {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.props__empty {
  font-family: var(--font-edit);
  font-style: italic;
  color: var(--ink-mute);
  text-align: center;
  padding: 40px 10px;
  font-size: 15px;
  line-height: 1.4;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}

.field input[type="text"],
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  resize: vertical;
}

.field textarea { min-height: 80px; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }

.field input[type="text"]:focus,
.field textarea:focus,
.field select:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--ink);
  border-radius: 0;
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--green);
  border: 2px solid var(--ink);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--green);
  border: 2px solid var(--ink);
  cursor: pointer;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.swatch {
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform 0.1s;
}

.swatch:hover { transform: scale(1.1); }
.swatch.is-active { outline: 2px solid var(--green); outline-offset: 2px; }

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mini-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}

.mini-btn:hover { background: var(--paper-deep); }
.mini-btn.danger { background: var(--red); color: var(--paper); }
.mini-btn.danger:hover { background: var(--red-deep); }

.tag {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
}

/* ========== mobile ========== */

@media (max-width: 1080px) {
  body.lab { overflow: auto; height: auto; }
  .lab-shell { height: auto; }
  .lab-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .rail, .rail--right { border: none; border-bottom: var(--border-ink); }
  .rail--right { border-bottom: none; border-top: var(--border-ink); }
  .rail__scroll { max-height: 360px; }
  .stage-wrap { padding: 20px; min-height: 60vh; }
  .lab-nav { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .lab-nav__title { display: none; }
}
/* =========================================================
   SSJ EASTER EGG
   triggered by clicking the No. 08 ASCENDED mood card.
   builds a fullscreen overlay with a dog ascension sequence —
   aura, lightning, gold particles rising, screen shake.
   ========================================================= */

/* subtle hint that the No. 08 card is doing something special:
   on hover, a faint gold glow leaks behind it — discoverable but
   not obvious */
.mood-card--ssj {
  position: relative;
}
.mood-card--ssj::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle at center,
    rgba(255, 215, 0, 0.35) 0%,
    rgba(255, 180, 0, 0.15) 35%,
    transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
  z-index: -1;
  filter: blur(12px);
}
.mood-card--ssj:hover::after,
.mood-card--ssj:focus-visible::after {
  opacity: 1;
}

/* page shake removed — applying transform to <html> breaks
   position: fixed on the overlay, sending it off-screen.
   plenty of motion happens inside the overlay anyway. */

/* OVERLAY ROOT */
.ssj-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  animation: ssj-overlay-in 0.5s ease-out forwards;
  font-family: 'Bagel Fat One', Impact, sans-serif;
}
@keyframes ssj-overlay-in {
  0%   { background: rgba(255, 255, 255, 0.95); }
  35%  { background: rgba(255, 255, 255, 0.95); }
  100% { background: rgba(8, 8, 14, 0.92); }
}

.ssj-overlay.is-out {
  animation: ssj-overlay-out 0.6s ease-in forwards;
}
@keyframes ssj-overlay-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* WHITE FLASH — instant blast at the start */
.ssj-flash {
  position: absolute;
  inset: 0;
  background: white;
  pointer-events: none;
  animation: ssj-flash 0.45s ease-out forwards;
}
@keyframes ssj-flash {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* RADIAL GOLD GLOW BACKGROUND */
.ssj-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center,
      rgba(255, 230, 100, 0.45) 0%,
      rgba(255, 150, 0, 0.22) 28%,
      rgba(80, 30, 0, 0.4) 60%,
      transparent 80%);
  pointer-events: none;
  animation: ssj-bg-flicker 0.18s steps(2, end) infinite 0.45s;
  opacity: 0;
  animation-fill-mode: both;
}
@keyframes ssj-bg-flicker {
  0%   { opacity: 0.85; }
  100% { opacity: 1; }
}

/* CENTER STAGE — holds aura + dog */
.ssj-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* AURA — pulsing radial behind the dog */
.ssj-aura {
  grid-area: 1 / 1;
  width: min(85vw, 720px);
  height: min(85vw, 720px);
  background: radial-gradient(circle,
    rgba(255, 255, 220, 1) 0%,
    rgba(255, 215, 0, 0.85) 18%,
    rgba(255, 130, 0, 0.45) 42%,
    rgba(255, 80, 0, 0.15) 60%,
    transparent 75%);
  filter: blur(28px);
  animation: ssj-aura-pulse 0.32s ease-in-out infinite alternate 0.4s;
  opacity: 0;
  animation-fill-mode: both;
  border-radius: 50%;
}
.ssj-aura--inner {
  width: min(50vw, 420px);
  height: min(50vw, 420px);
  background: radial-gradient(circle,
    rgba(255, 255, 240, 1) 0%,
    rgba(255, 240, 150, 0.95) 35%,
    rgba(255, 200, 0, 0.5) 65%,
    transparent 85%);
  filter: blur(14px);
  animation-duration: 0.18s;
  animation-delay: 0.45s;
  mix-blend-mode: screen;
}
@keyframes ssj-aura-pulse {
  from { opacity: 0.78; transform: scale(0.95); }
  to   { opacity: 1;    transform: scale(1.12); }
}

/* DOG — rises from below, settles, then quivers */
.ssj-dog-wrap {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  animation: ssj-dog-rise 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ssj-dog-rise {
  0%   { opacity: 0; transform: translateY(70vh) scale(0.25) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(-24px) scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
.ssj-dog {
  display: block;
  width: min(58vw, 460px);
  height: auto;
  filter:
    drop-shadow(0 0 22px rgba(255, 240, 150, 0.95))
    drop-shadow(0 0 60px rgba(255, 200, 0, 0.7))
    drop-shadow(0 0 110px rgba(255, 150, 0, 0.5));
  animation: ssj-dog-shake 0.06s linear infinite 1s;
}
@keyframes ssj-dog-shake {
  0%   { transform: translate(-1.5px, -1px); }
  25%  { transform: translate(1.5px, -1px); }
  50%  { transform: translate(1px, 1.5px); }
  75%  { transform: translate(-1px, 1.5px); }
  100% { transform: translate(-1.5px, -1px); }
}

/* LIGHTNING — bolts radiate from a 1px-square anchor at center */
.ssj-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 3;
}
.ssj-bolt {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--len);
  height: 60px;
  transform: translate(0, -30px) rotate(var(--angle));
  transform-origin: 0 50%;
  opacity: 0;
  animation: ssj-bolt-flicker var(--dur) ease-in-out infinite var(--delay);
}
.ssj-bolt svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 14px rgba(255, 220, 80, 0.85));
}
@keyframes ssj-bolt-flicker {
  0%, 100% { opacity: 0; transform: translate(0, -30px) rotate(var(--angle)) scaleX(0); }
  10%      { opacity: 1; transform: translate(0, -30px) rotate(var(--angle)) scaleX(1); }
  18%      { opacity: 0.3; }
  26%      { opacity: 1; }
  34%      { opacity: 0.5; }
  60%      { opacity: 1; }
  75%      { opacity: 0; }
}

/* GOLD PARTICLES rising from bottom */
.ssj-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.ssj-particle {
  position: absolute;
  bottom: -20px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, #fff7c4 0%, #ffd54a 60%, #ff9c2a 100%);
  border-radius: 50%;
  box-shadow:
    0 0 8px 2px rgba(255, 220, 100, 0.85),
    0 0 18px 6px rgba(255, 160, 0, 0.4);
  animation: ssj-particle-rise var(--dur) linear var(--delay) infinite;
}
@keyframes ssj-particle-rise {
  0%   { bottom: -20px;  opacity: 0; transform: translateX(0) scale(0.5); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { bottom: 110vh; opacity: 0; transform: translateX(var(--drift)) scale(1.2); }
}

/* TEXT — "OVER 9000 / power level confirmed" */
.ssj-text {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
  animation: ssj-text-in 0.8s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ssj-text__main {
  display: block;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: clamp(48px, 11vw, 132px);
  letter-spacing: 0.04em;
  color: #FFE066;
  text-shadow:
    0 0 8px #fff,
    0 0 24px rgba(255, 220, 80, 0.95),
    0 0 60px rgba(255, 160, 0, 0.7),
    5px 5px 0 #1A1A1A,
    -2px -2px 0 #1A1A1A,
    2px -2px 0 #1A1A1A,
    -2px 2px 0 #1A1A1A;
  -webkit-text-stroke: 2px #1A1A1A;
  animation: ssj-text-pulse 0.42s ease-in-out infinite alternate 1.2s;
  transform: rotate(-3deg);
}
.ssj-text__sub {
  display: block;
  margin-top: 8px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 400;
  color: #fff8d0;
  text-shadow: 0 0 10px rgba(255, 200, 0, 0.85), 1px 1px 0 #1A1A1A;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
@keyframes ssj-text-in {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(-12deg); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes ssj-text-pulse {
  from { transform: rotate(-3deg) scale(1); }
  to   { transform: rotate(-3deg) scale(1.05); }
}

/* DISMISS HINT — small line at the bottom */
.ssj-hint {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 240, 180, 0.7);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: ssj-hint-in 0.6s 2.4s ease-out forwards;
}
@keyframes ssj-hint-in {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* MOBILE TUNING */
@media (max-width: 720px) {
  .ssj-aura { width: 110vw; height: 110vw; }
  .ssj-aura--inner { width: 70vw; height: 70vw; }
  .ssj-dog { width: 78vw; }
  .ssj-text { top: 12%; }
  .ssj-text__main { font-size: clamp(40px, 14vw, 90px); }
}

/* REDUCED MOTION — keep the moment but strip the chaos */
@media (prefers-reduced-motion: reduce) {
  .ssj-overlay,
  .ssj-flash,
  .ssj-bg,
  .ssj-aura,
  .ssj-dog-wrap,
  .ssj-dog,
  .ssj-bolt,
  .ssj-particle,
  .ssj-text,
  .ssj-text__main,
  .ssj-hint {
    animation-duration: 0.4s !important;
    animation-iteration-count: 1 !important;
  }
  .ssj-dog { animation: none; }
  .ssj-aura { animation: none; opacity: 1; }
  .ssj-text__main { animation: none; }
}

/* =========================================================
   BULL EGG (No. 01 VICTORIOUS)
   green chart pump — candles rain up, parabolic line draws
   across the screen, $ + ↑ particles fly, ticker tape scrolls.
   ========================================================= */

/* subtle green halo on the No. 01 card hover, mirrors the SSJ pattern */
.mood-card--bull {
  position: relative;
}
.mood-card--bull::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle at center,
    rgba(43, 170, 47, 0.40) 0%,
    rgba(110, 220, 120, 0.18) 35%,
    transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
  z-index: -1;
  filter: blur(12px);
}
.mood-card--bull:hover::after,
.mood-card--bull:focus-visible::after {
  opacity: 1;
}

/* OVERLAY ROOT */
.bull-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  animation: bull-overlay-in 0.5s ease-out forwards;
  font-family: 'Bagel Fat One', Impact, sans-serif;
}
@keyframes bull-overlay-in {
  0%   { background: rgba(180, 255, 200, 0.95); }
  30%  { background: rgba(180, 255, 200, 0.95); }
  100% { background: rgba(4, 18, 8, 0.94); }
}
.bull-overlay.is-out { animation: bull-overlay-out 0.6s ease-in forwards; }
@keyframes bull-overlay-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* GREEN FLASH at the start */
.bull-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6FE07A 0%, #2BAA2F 100%);
  pointer-events: none;
  animation: bull-flash 0.5s ease-out forwards;
}
@keyframes bull-flash {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* RADIAL GLOW BACKGROUND (under everything) */
.bull-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(80, 220, 100, 0.30) 0%,
      rgba(40, 150, 60, 0.18) 30%,
      rgba(5, 20, 8, 0.6) 65%,
      transparent 90%);
  pointer-events: none;
  opacity: 0;
  animation: bull-bg-in 0.6s 0.35s ease-out forwards;
}
@keyframes bull-bg-in { to { opacity: 1; } }

/* TRADING-CHART GRID overlay */
.bull-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(110, 220, 120, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110, 220, 120, 0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0;
  animation: bull-grid-in 0.7s 0.45s ease-out forwards;
}
@keyframes bull-grid-in { to { opacity: 1; } }

/* STOCK TICKER tape at the very top */
.bull-ticker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to bottom, #0a1a0c, #061008);
  border-bottom: 2px solid #2BAA2F;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 6;
  box-shadow: 0 4px 18px rgba(43, 170, 47, 0.35);
  transform: translateY(-100%);
  animation: bull-ticker-drop 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bull-ticker-drop { to { transform: translateY(0); } }
.bull-ticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #6FE07A;
  text-transform: uppercase;
  padding-left: 100%;
  animation: bull-ticker-slide 22s linear infinite 1s;
  gap: 14px;
}
.bull-ticker__track > span {
  text-shadow: 0 0 6px rgba(110, 220, 120, 0.7);
}
.bull-ticker__dot {
  color: #2BAA2F;
  font-size: 10px;
  opacity: 0.7;
}
@keyframes bull-ticker-slide { to { transform: translateX(-100%); } }

/* PARABOLIC CHART LINE drawing across the screen */
.bull-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.bull-chart__line,
.bull-chart__glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bull-draw 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
  vector-effect: non-scaling-stroke;
}
.bull-chart__line {
  stroke: #6FE07A;
  stroke-width: 4;
  filter: drop-shadow(0 0 4px #2BAA2F) drop-shadow(0 0 14px rgba(43, 170, 47, 0.7));
}
.bull-chart__glow {
  stroke: #2BAA2F;
  stroke-width: 14;
  opacity: 0.55;
  filter: blur(6px);
}
@keyframes bull-draw { to { stroke-dashoffset: 0; } }

/* GREEN CANDLES rising from below */
.bull-candles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.bull-candle {
  position: absolute;
  bottom: -160px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: linear-gradient(to bottom, #6FE07A, #2BAA2F 35%, #1F8C24 100%);
  border: 2px solid #0c2f10;
  box-shadow:
    0 0 8px rgba(43, 170, 47, 0.55),
    inset 0 1px 0 rgba(180, 255, 190, 0.5);
  animation: bull-candle-rise var(--dur) linear var(--delay) infinite;
  border-radius: 1px;
}
.bull-candle::before {
  content: "";
  position: absolute;
  top: calc(var(--wick-top) * -1);
  left: 50%;
  width: 2px;
  height: var(--wick-top);
  background: #2BAA2F;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(110, 220, 120, 0.6);
}
.bull-candle::after {
  content: "";
  position: absolute;
  bottom: calc(var(--wick-bot) * -1);
  left: 50%;
  width: 2px;
  height: var(--wick-bot);
  background: #2BAA2F;
  transform: translateX(-50%);
}
@keyframes bull-candle-rise {
  0%   { bottom: -160px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { bottom: 110vh; opacity: 0; }
}

/* CENTER STAGE (aura + dog) */
.bull-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}
.bull-aura {
  grid-area: 1 / 1;
  width: min(85vw, 680px);
  height: min(85vw, 680px);
  background: radial-gradient(circle,
    rgba(220, 255, 230, 1) 0%,
    rgba(110, 220, 120, 0.85) 18%,
    rgba(43, 170, 47, 0.5) 42%,
    rgba(20, 90, 25, 0.18) 60%,
    transparent 75%);
  filter: blur(28px);
  animation: bull-aura-pulse 0.36s ease-in-out infinite alternate 0.5s;
  opacity: 0;
  animation-fill-mode: both;
  border-radius: 50%;
}
.bull-aura--inner {
  width: min(48vw, 400px);
  height: min(48vw, 400px);
  background: radial-gradient(circle,
    rgba(240, 255, 245, 1) 0%,
    rgba(180, 255, 190, 0.95) 35%,
    rgba(80, 200, 100, 0.55) 65%,
    transparent 85%);
  filter: blur(14px);
  animation-duration: 0.2s;
  animation-delay: 0.55s;
  mix-blend-mode: screen;
}
@keyframes bull-aura-pulse {
  from { opacity: 0.78; transform: scale(0.95); }
  to   { opacity: 1;    transform: scale(1.12); }
}

/* DOG — same rise pattern as SSJ but green-tinted shadows */
.bull-dog-wrap {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  animation: bull-dog-rise 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bull-dog-rise {
  0%   { opacity: 0; transform: translateY(70vh) scale(0.25) rotate(8deg); }
  60%  { opacity: 1; transform: translateY(-24px) scale(1.12) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
.bull-dog {
  display: block;
  width: min(58vw, 460px);
  height: auto;
  filter:
    drop-shadow(0 0 22px rgba(180, 255, 200, 0.95))
    drop-shadow(0 0 60px rgba(110, 220, 120, 0.7))
    drop-shadow(0 0 110px rgba(43, 170, 47, 0.5));
  animation: bull-dog-float 1.4s ease-in-out infinite alternate 1s;
}
@keyframes bull-dog-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* PARTICLES — $, +, ↑ rising from bottom */
.bull-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.bull-particle {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: var(--size);
  color: #B6FFC2;
  text-shadow:
    0 0 6px #fff,
    0 0 14px rgba(43, 170, 47, 0.95),
    0 0 28px rgba(43, 170, 47, 0.6),
    2px 2px 0 #0c2f10;
  -webkit-text-stroke: 1.5px #0c2f10;
  user-select: none;
  animation: bull-particle-rise var(--dur) ease-out var(--delay) infinite;
}
@keyframes bull-particle-rise {
  0%   { bottom: -40px; opacity: 0; transform: translateX(0) rotate(0deg) scale(0.6); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { bottom: 110vh; opacity: 0; transform: translateX(var(--drift)) rotate(var(--rot)) scale(1.1); }
}

/* TEXT — "UP ONLY" + sub */
.bull-text {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 7;
  animation: bull-text-in 0.9s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bull-text__main {
  display: block;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  /* tighter clamp + nowrap so "ONLY UP DOG" lands on a single line.
     Previous values fit "UP ONLY" but the longer phrase wrapped
     between dog and text. */
  font-size: clamp(44px, 10vw, 130px);
  white-space: nowrap;
  letter-spacing: 0.04em;
  color: #B6FFC2;
  text-shadow:
    0 0 10px #fff,
    0 0 30px rgba(43, 170, 47, 0.95),
    0 0 70px rgba(43, 170, 47, 0.6),
    5px 5px 0 #1A1A1A,
    -2px -2px 0 #1A1A1A,
    2px -2px 0 #1A1A1A,
    -2px 2px 0 #1A1A1A;
  -webkit-text-stroke: 2px #1A1A1A;
  transform: rotate(-2deg);
  animation: bull-text-pulse 0.42s ease-in-out infinite alternate 1.4s;
}
.bull-text__sub {
  display: block;
  margin-top: 8px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 400;
  color: #d6ffe0;
  text-shadow: 0 0 10px rgba(43, 170, 47, 0.85), 1px 1px 0 #1A1A1A;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
@keyframes bull-text-in {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(8deg); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes bull-text-pulse {
  from { transform: rotate(-2deg) scale(1); }
  to   { transform: rotate(-2deg) scale(1.05); }
}

/* DISMISS HINT */
.bull-hint {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(190, 255, 200, 0.7);
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  animation: bull-hint-in 0.6s 2.6s ease-out forwards;
}
@keyframes bull-hint-in {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* MOBILE TUNING */
@media (max-width: 720px) {
  .bull-aura       { width: 110vw; height: 110vw; }
  .bull-aura--inner{ width: 70vw;  height: 70vw; }
  .bull-dog        { width: 78vw; }
  .bull-text       { top: 14%; }
  .bull-text__main { font-size: clamp(36px, 12vw, 80px); }
  .bull-ticker     { height: 30px; }
  .bull-ticker__track { font-size: 12px; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .bull-overlay,
  .bull-flash,
  .bull-bg,
  .bull-grid,
  .bull-ticker,
  .bull-chart__line,
  .bull-chart__glow,
  .bull-candle,
  .bull-aura,
  .bull-dog-wrap,
  .bull-dog,
  .bull-particle,
  .bull-text,
  .bull-text__main,
  .bull-hint {
    animation-duration: 0.5s !important;
    animation-iteration-count: 1 !important;
  }
  .bull-ticker__track { animation-duration: 60s !important; animation-iteration-count: infinite !important; }
  .bull-aura { animation: none; opacity: 1; }
  .bull-dog  { animation: none; }
  .bull-text__main { animation: none; }
}

/* =========================================================
   MATRIX EGG (No. 12 SHOCKED)
   two-stage: pill choice → blue (back to page) or red (6s journey
   through falling katakana rain w/ typewriter sequence).
   ========================================================= */

/* subtle dual-color halo on the No. 12 card — cyan + red blend */
.mood-card--matrix { position: relative; }
.mood-card--matrix::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 50%,
    rgba(80, 180, 255, 0.40) 0%,
    rgba(80, 180, 255, 0.15) 40%,
    transparent 60%),
    radial-gradient(circle at 70% 50%,
    rgba(255, 60, 60, 0.40) 0%,
    rgba(255, 60, 60, 0.15) 40%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
  z-index: -1;
  filter: blur(12px);
}
.mood-card--matrix:hover::after,
.mood-card--matrix:focus-visible::after { opacity: 1; }

/* OVERLAY ROOT — black, full-bleed */
.matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  font-family: 'Bagel Fat One', Impact, sans-serif;
  animation: matrix-overlay-in 0.5s ease-out forwards;
}
@keyframes matrix-overlay-in {
  0%   { background: rgba(0, 0, 0, 0); }
  100% { background: rgba(0, 0, 0, 0.96); }
}
.matrix-overlay.is-out { animation: matrix-overlay-out 0.7s ease-in forwards; }
@keyframes matrix-overlay-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* CHOICE SCREEN */
.matrix-choice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  text-align: center;
  color: #f0f0f0;
  width: min(92vw, 720px);
  animation: matrix-choice-in 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: opacity 0.5s ease-out, transform 0.6s ease-out;
}
@keyframes matrix-choice-in {
  0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.matrix-overlay.is-blue .matrix-choice,
.matrix-overlay.is-red .matrix-choice {
  animation: none; /* cancel the entrance animation; otherwise it forwards opacity:1 and the choice never leaves */
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5);
  pointer-events: none;
}

.matrix-choice__prompt {
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: clamp(64px, 11vw, 140px);
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
  margin-bottom: 36px;
  line-height: 0.9;
}

.matrix-choice__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  margin-bottom: 38px;
}

.matrix-choice__sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 22px);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* PILLS */
.pill {
  position: relative;
  width: clamp(150px, 22vw, 240px);
  height: clamp(58px, 8vw, 90px);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.pill__seam {
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-0.5px);
  pointer-events: none;
}
.pill__shine {
  position: absolute;
  top: 6px;
  left: 22%;
  right: 22%;
  height: 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), transparent 90%);
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}
.pill__label { position: relative; z-index: 2; }

.pill--blue {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    linear-gradient(180deg, #74C2FF 0%, #2C7CD6 50%, #144A8E 100%);
  box-shadow:
    0 0 30px rgba(80, 160, 255, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.6),
    inset 0 -6px 14px rgba(0, 20, 60, 0.45);
  transform: rotate(-9deg);
}
.pill--blue:hover {
  transform: rotate(-2deg) scale(1.08);
  box-shadow:
    0 0 60px rgba(120, 200, 255, 0.95),
    0 0 120px rgba(80, 160, 255, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.6),
    inset 0 -6px 14px rgba(0, 20, 60, 0.45);
  filter: brightness(1.15);
}

.pill--red {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    linear-gradient(180deg, #FF7A7A 0%, #D62929 50%, #8E1414 100%);
  box-shadow:
    0 0 30px rgba(255, 80, 80, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.6),
    inset 0 -6px 14px rgba(60, 0, 0, 0.45);
  transform: rotate(9deg);
}
.pill--red:hover {
  transform: rotate(2deg) scale(1.08);
  box-shadow:
    0 0 60px rgba(255, 130, 130, 0.95),
    0 0 120px rgba(255, 60, 60, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.6),
    inset 0 -6px 14px rgba(60, 0, 0, 0.45);
  filter: brightness(1.15);
}

/* BLUE PILL TAKEN — gentle fade to white-blue, then out */
.matrix-overlay.is-blue {
  animation: matrix-blue-out 0.95s ease-out forwards;
}
@keyframes matrix-blue-out {
  0%   { background: rgba(0, 0, 0, 0.96); }
  35%  { background: rgba(180, 220, 255, 0.92); }
  100% { background: rgba(0, 0, 0, 0); opacity: 0; }
}

/* RED FLASH — quick red bloom when red pill is chosen */
.matrix-redflash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(255, 50, 50, 0.65) 0%,
    rgba(220, 0, 0, 0.35) 30%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}
.matrix-overlay.is-red .matrix-redflash {
  animation: matrix-red-burst 0.8s ease-out forwards;
}
@keyframes matrix-red-burst {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* MATRIX RAIN */
.matrix-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.7s ease-in;
  pointer-events: none;
}
.matrix-overlay.is-rain .matrix-rain { opacity: 1; }

.matrix-column {
  position: absolute;
  top: -120vh;
  left: var(--x);
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: #00ff41;
  text-shadow: 0 0 4px #00ff41;
  line-height: 1.05;
  white-space: pre;
  user-select: none;
  pointer-events: none;
  animation: matrix-fall var(--dur) linear var(--delay) infinite;
}
.matrix-char {
  display: block;
  /* prior version mirrored chars with scaleX(-1) for that authentic
     katakana feel — but mirrored English words are unreadable, so
     we don't mirror anymore. Everything else matches the original. */
}
.matrix-char.is-head {
  color: #ffffff;
  text-shadow:
    0 0 6px #ffffff,
    0 0 14px #00ff41,
    0 0 28px rgba(0, 255, 65, 0.6);
}
@keyframes matrix-fall {
  0%   { top: -120vh; }
  100% { top: 130vh; }
}

/* CRT SCANLINES — only visible during red journey */
.matrix-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.6s ease-in;
}
.matrix-overlay.is-rain .matrix-scanlines { opacity: 1; }

/* TYPEWRITER TEXT */
.matrix-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 42px);
  color: #5DFF5D;
  text-shadow:
    0 0 8px #00ff41,
    0 0 18px rgba(0, 255, 65, 0.55);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease-in;
  /* a darker halo behind the text for legibility against rain */
  padding: 14px 28px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%);
}
.matrix-overlay.is-red .matrix-text { opacity: 1; }

.matrix-text::after {
  content: '_';
  margin-left: 2px;
  animation: matrix-cursor 0.7s steps(1) infinite;
}
@keyframes matrix-cursor {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* WHITE FLASH at the very end */
.matrix-whiteflash {
  position: absolute;
  inset: 0;
  background: white;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}
.matrix-overlay.is-final .matrix-whiteflash {
  animation: matrix-white 0.85s ease-out forwards;
}
@keyframes matrix-white {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* MOBILE TUNING */
@media (max-width: 720px) {
  .matrix-choice__pills { flex-direction: column; gap: 22px; }
  .pill--blue, .pill--red { transform: rotate(0); }
  .pill--blue:hover, .pill--red:hover { transform: scale(1.06); }
  .matrix-column { font-size: 14px; }
  .matrix-text { font-size: clamp(16px, 4vw, 26px); padding: 10px 18px; white-space: normal; }
}

/* REDUCED MOTION — keep the moment, calm the chaos */
@media (prefers-reduced-motion: reduce) {
  .matrix-overlay,
  .matrix-choice,
  .matrix-redflash,
  .matrix-whiteflash,
  .matrix-column,
  .matrix-char,
  .pill--blue,
  .pill--red {
    animation-duration: 0.5s !important;
    animation-iteration-count: 1 !important;
  }
  .matrix-column { animation-iteration-count: infinite !important; animation-duration: 12s !important; }
  .matrix-text::after { animation: none; }
  .pill--blue:hover, .pill--red:hover { transform: rotate(0) scale(1.03); }
}

/* =========================================================
   MOBILE POLISH — overrides only
   These rules sit at the end of the file so cascade wins
   without touching any existing desktop rule. Triggered at
   ≤960px (tablet) and ≤720px (phone).
   ========================================================= */

/* ============ NAV ============ */
@media (max-width: 720px) {
  .nav { padding: 10px 16px; }
  .nav__brand { font-size: 22px; }
  .nav__brand-mark {
    width: 28px; height: 28px; font-size: 13px;
  }
  .nav__link-quiet { font-size: 13px; }
}

/* ============ HERO — bring the dog back ============ */
@media (max-width: 960px) {
  /* override the existing display: none from the 960px breakpoint */
  .hero__dog {
    display: block;
    position: relative;
    right: auto;
    top: auto;
    margin: 28px auto 0;
    width: min(72vw, 360px);
    transform: rotate(-3deg);
    animation: hero-dog-wobble-mobile 5s ease-in-out infinite;
    z-index: 1;
    /* parallax JS still sets --parallax-y; on mobile we ignore it */
  }
  .hero__dog img { display: block; }

  @keyframes hero-dog-wobble-mobile {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(-6deg) translateY(-4px); }
  }

  .hero__inner { padding-bottom: 24px; }
  .hero__ctas  { gap: 14px; flex-wrap: wrap; }
  .hero__meta  { font-size: 11px; line-height: 1.5; flex-basis: 100%; }

  /* clouds shouldn't overlap the dog */
  .cloud--1 { width: 100px; }
  .cloud--2 { width: 80px; }
}

@media (max-width: 720px) {
  .hero__title { font-size: clamp(54px, 17vw, 100px); }
  .hero__sub   { font-size: clamp(17px, 4.6vw, 22px); }
  .hero__kicker { font-size: clamp(20px, 5.6vw, 28px); }
  .hero__dog { width: min(78vw, 320px); margin-top: 24px; }
  .stamp { font-size: 16px; padding: 10px 18px; }
}

/* ============ MANIFESTO — keep the BUY image visible but smaller ============ */
@media (max-width: 960px) {
  .manifesto__inner { gap: 48px; }
  .manifesto__art { max-width: 360px; margin: 0 auto; }

  /* CA block — make sure it doesn't overflow horizontally */
  .ca-block {
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ca-block__addr {
    font-size: 13px;
    word-break: break-all;
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .manifesto { padding: 64px 18px; }
  .manifesto__quote {
    font-size: clamp(30px, 9vw, 48px);
    margin-bottom: 24px;
  }
  .manifesto__body { font-size: 16px; line-height: 1.55; }
  .manifesto__art  { max-width: 300px; }
  .manifesto__buy {
    font-size: 18px;
    padding: 8px 16px;
    bottom: -14px;
    right: -8px;
  }
}

/* ============ GALLERY — tighten card padding ============ */
@media (max-width: 720px) {
  .gallery { padding: 64px 18px; }
  .gallery__title { font-size: clamp(48px, 14vw, 84px); }
  .gallery__intro { font-size: 22px; padding-left: 40px; }
  .gallery__intro::before { width: 28px; }

  .gallery__grid { gap: 14px; }
  .mood-card {
    padding: 10px 10px 14px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .mood-card__label { font-size: 18px; }
  .mood-card__sub   { font-size: 16px; }
  .mood-card__num   { font-size: 10px; top: 6px; right: 10px; }
  .mood-card__ribbon {
    width: 28px;
    height: 38px;
    right: 8px;
    top: -7px;
  }

  .gallery__more { margin-top: 40px; }
  .gallery__more .hand-svg { width: 60px; }
}

/* ============ FOOTER ============ */
@media (max-width: 720px) {
  .footer { padding: 64px 18px 90px; }
  .footer__brand { font-size: 44px; }
  .footer__tagline { font-size: 16px; }
  .footer__inner { gap: 24px; }
  /* footer__bottom already gets flex-direction: column at 960px */
  .footer__bottom { font-size: 10px; gap: 10px; }
}

/* ============ MEME LAB MOBILE ============ */

/* Most lab layout already collapses at ≤1080px. These rules tighten
   the bits that still overflow or get awkward on phones. */

@media (max-width: 1080px) {
  /* nav action buttons need to fit alongside the tabs */
  .lab-action { font-size: 13px; padding: 8px 12px; }
  .lab-nav__right { gap: 8px; }
  .lab-nav__back { font-size: 14px; }

  /* stage frame must shrink with the viewport — not be locked at 700px */
  .stage-frame {
    max-width: 100%;
    margin: 0 auto;
  }
  .stage-wrap { padding: 16px; min-height: auto; }

  /* template / sticker grids — go to 3-col so tiles aren't huge */
  .template-grid,
  .sticker-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* toolbar — wrap rather than overflow */
  .stage-toolbar {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 12px auto 0;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
  }
  .stage-toolbar button {
    font-size: 13px;
    padding: 7px 12px;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  /* nav row reflow — tabs go full-width on a new line */
  .lab-nav { padding: 8px 12px; gap: 8px; }
  .lab-nav__left { flex: 0 0 auto; }
  .lab-nav__right { flex: 0 0 auto; }
  .lab-tabs {
    order: 3;
    flex: 1 0 100%;
    margin-top: 4px;
  }
  .lab-tab {
    flex: 1;
    font-size: 13px;
    padding: 8px 10px;
  }
  .lab-action { font-size: 12px; padding: 6px 10px; letter-spacing: 0.02em; }

  /* rail headings tighter */
  .rail__head { padding: 12px 14px 8px; font-size: 12px; }
  .rail__hint { padding: 0 14px 10px; font-size: 13px; }
  .rail__scroll { max-height: 280px; padding: 0 10px 14px; }

  /* sticker / template tiles — smaller */
  .template-grid,
  .sticker-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sticker-drawer { padding: 0 10px 14px; }

  /* toolbar buttons — 2 per row max so labels read well */
  .stage-toolbar { padding: 6px; gap: 6px; }
  .stage-toolbar button {
    font-size: 12px;
    padding: 8px 10px;
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    white-space: nowrap;
  }

  /* properties panel — stack range pairs vertically */
  .props { padding: 14px; }
  .field__row { flex-direction: column; gap: 14px; }
  .field__label { font-size: 12px; }
  .field textarea, .field select { font-size: 14px; }
  .swatches { gap: 6px; }
  .swatch { width: 28px; height: 28px; }
  .btn-row { gap: 6px; }
  .mini-btn { font-size: 12px; padding: 7px 10px; }

  /* uploader — shorter */
  .uploader { padding: 28px 16px; }
  .uploader__title { font-size: 18px; }
  .uploader__sub { font-size: 13px; }
}

/* ============ ENSURE NO HORIZONTAL OVERFLOW ============ */
@media (max-width: 960px) {
  /* belt-and-braces — anything that wants to extend past viewport
     gets clipped instead of forcing a horizontal scroll */
  html, body { overflow-x: hidden; }
}

/* =========================================================
   MEME LAB — MOBILE BOTTOM-SHEET SYSTEM
   On mobile (≤1080px) the lab becomes app-like: the canvas takes
   the full available space. Tapping a bottom tab slides that panel
   up as a sheet over the canvas. Tapping the active tab again, the
   backdrop, the close handle, or (for templates) picking a base
   closes the sheet. Desktop layout untouched.
   ========================================================= */

/* default: bottom tab bar + sheet handles + backdrop hidden on desktop */
.lab-mobile-tabs { display: none; }
.lab-sheet-handle { display: none; }
.lab-sheet-backdrop { display: none; }

@media (max-width: 1080px) {
  /* App-locked layout: prevent body scroll; sheet handles its own. */
  body.lab {
    overflow: hidden;
    height: 100vh;
  }
  .lab-shell {
    height: 100vh;
    padding-bottom: 60px;       /* room for the fixed bottom tab bar */
    box-sizing: border-box;
  }

  /* lab-body becomes a flex column. Stage takes ALL available space
     since the rails are now fixed-position sheets, not in-flow. */
  .lab-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .stage-wrap {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 14px;
    overflow: hidden;
  }

  /* ===== RAILS BECOME BOTTOM SHEETS =====
     Removed from flex flow; positioned fixed above the bottom tab bar.
     Hidden by translateY(100%) when no tab is active. */
  .rail,
  .rail--right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;                         /* sit above the bottom tab bar */
    height: min(64vh, 540px);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(105%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 40;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  /* slide the active sheet into view */
  body.lab[data-mobile-tab="templates"]  .rail:not(.rail--right),
  body.lab[data-mobile-tab="stickers"]   .rail--right,
  body.lab[data-mobile-tab="properties"] .rail--right {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Within the right rail (which holds both stickers + properties
     panels stacked), only show the active pane. */
  .mobile-pane { display: none; }
  body.lab[data-mobile-tab="templates"]  .mobile-pane--templates,
  body.lab[data-mobile-tab="stickers"]   .mobile-pane--stickers,
  body.lab[data-mobile-tab="properties"] .mobile-pane--properties {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
  }

  /* Hide the Templates/Upload sub-toggle in the top nav when the
     templates sheet isn't open — it's only relevant there. */
  body.lab:not([data-mobile-tab="templates"]) .lab-tabs { display: none; }

  /* sticker drawer: scrolls inside the sheet */
  .sticker-drawer { max-height: none; padding: 12px 14px 16px; border-bottom: none; flex: 1 1 auto; overflow-y: auto; }
  .rail__scroll   { max-height: none; flex: 1 1 auto; }

  /* ===== DRAG HANDLE / CLOSE PILL =====
     The little iOS-style pill at the top center of each open sheet.
     Tapping it closes. Whole button is tappable but only the visual
     pill is shown. */
  .lab-sheet-handle {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 0 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .lab-sheet-handle__pill {
    display: block;
    width: 44px;
    height: 5px;
    margin: 0 auto;
    background: var(--ink-mute, #999);
    border-radius: 999px;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.2s;
  }
  .lab-sheet-handle:active .lab-sheet-handle__pill {
    opacity: 1;
    transform: scaleX(1.15);
  }

  /* ===== BACKDROP =====
     Translucent layer above the canvas (but below the sheet) that
     dims when a sheet is open. Tapping it closes. */
  .lab-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    bottom: 60px;                         /* doesn't cover bottom tab bar */
    background: rgba(0, 0, 0, 0.42);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.34s ease;
  }
  body.lab:not([data-mobile-tab="none"]) .lab-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ========== BOTTOM TAB BAR ========== */
  .lab-mobile-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    z-index: 50;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.04);
  }
  .lab-mobile-tab {
    flex: 1;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 6px 4px 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .lab-mobile-tab svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .lab-mobile-tab span { line-height: 1; }
  .lab-mobile-tab:active { transform: scale(0.95); }
  .lab-mobile-tab.is-active {
    background: var(--ink);
    color: var(--paper);
  }
  .lab-mobile-tab.is-active svg { stroke: var(--paper); }
}

/* On phones, drop the icons to keep tabs compact and just label-driven */
@media (max-width: 480px) {
  .lab-mobile-tab svg { width: 18px; height: 18px; }
  .lab-mobile-tab { font-size: 9px; gap: 2px; }
}
/* =========================================================
   JETPACK EGG (No. 04 ADVENTURE)
   7-second flying mini-game. Touch-and-drag on mobile,
   WASD on desktop. Sky-blue overlay with drifting clouds.
   ========================================================= */

/* hover halo on the jetpack card — sky blue */
.mood-card--jetpack { position: relative; }
.mood-card--jetpack::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle at center,
    rgba(120, 200, 255, 0.45) 0%,
    rgba(120, 200, 255, 0.15) 40%,
    transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
  z-index: -1;
  filter: blur(12px);
}
.mood-card--jetpack:hover::after,
.mood-card--jetpack:focus-visible::after { opacity: 1; }

/* OVERLAY ROOT — full-screen, scroll-locked, gesture-locked */
.jet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  outline: none;
  cursor: grab;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  background: linear-gradient(to bottom,
    #87CEEB 0%,
    #B5DCEF 40%,
    #DDF0F8 80%,
    #F2EBD8 100%);
  animation: jet-overlay-in 0.5s ease-out;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
.jet-overlay:active { cursor: grabbing; }
@keyframes jet-overlay-in {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
.jet-overlay.is-out { animation: jet-overlay-out 0.6s ease-in forwards; }
@keyframes jet-overlay-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

.jet-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 220, 150, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.jet-stars { position: absolute; inset: 0; pointer-events: none; }
.jet-star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  transform: scale(var(--scale, 1));
  opacity: 0.6;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: jet-star-twinkle 2.4s ease-in-out infinite var(--delay);
}
@keyframes jet-star-twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.95; }
}

.jet-clouds { position: absolute; inset: 0; pointer-events: none; }
.jet-cloud {
  position: absolute;
  top: var(--top);
  left: 110vw;
  width: var(--size);
  height: calc(var(--size) * 0.5);
  opacity: var(--opacity);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06));
  animation: jet-cloud-drift var(--dur) linear infinite var(--delay);
}
.jet-cloud svg { width: 100%; height: 100%; }
@keyframes jet-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-130vw); }
}

.jet-dog {
  position: absolute;
  top: 0; left: 0;
  width: clamp(80px, 14vw, 140px);
  height: auto;
  pointer-events: none;
  z-index: 5;
  transform: translate(-9999px, -9999px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  will-change: transform;
}
.jet-dog img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
}
.jet-dog__flame {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255, 255, 200, 0.95) 0%,
    rgba(255, 180, 0, 0.85) 30%,
    rgba(255, 80, 0, 0.7) 60%,
    transparent 90%);
  border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
  filter: blur(2px);
  animation: jet-flame 0.12s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes jet-flame {
  from { transform: translateX(-50%) scaleY(0.85) scaleX(0.9); opacity: 0.85; }
  to   { transform: translateX(-50%) scaleY(1.15) scaleX(1.05); opacity: 1; }
}

.jet-hud {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: jet-hud-in 0.6s 0.2s ease-out both;
}
@keyframes jet-hud-in {
  0%   { opacity: 0; transform: translate(-50%, -12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
.jet-hud__title {
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  color: white;
  -webkit-text-stroke: 2px #1A1A1A;
}
.jet-hud__sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid #1A1A1A;
}
.jet-hud__keys { font-weight: 700; letter-spacing: 0.3em; color: #1A1A1A; }
.jet-hud__tip { color: #555; font-size: 10px; }
.jet-hud__timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  margin-top: 4px;
}
.jet-hud__bar {
  width: 140px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1.5px solid #1A1A1A;
  border-radius: 999px;
  overflow: hidden;
}
.jet-hud__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #2BAA2F, #6FE07A);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.1s linear;
}
.jet-hud__seconds {
  font-size: 22px;
  color: white;
  -webkit-text-stroke: 2px #1A1A1A;
  min-width: 24px;
  text-align: center;
}

.jet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 11;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #1A1A1A;
  background: rgba(255, 255, 255, 0.85);
  color: #1A1A1A;
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0 0 4px;
  box-shadow: 2px 2px 0 #1A1A1A;
}
.jet-close:hover { background: white; }
.jet-close:active { transform: scale(0.92); box-shadow: 1px 1px 0 #1A1A1A; }

.jet-end {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 12;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.jet-end[hidden] { display: none; }
.jet-end.is-in { animation: jet-end-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes jet-end-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.jet-end__title {
  font-family: 'Bagel Fat One', Impact, sans-serif;
  font-size: clamp(48px, 9vw, 110px);
  color: white;
  -webkit-text-stroke: 3px #1A1A1A;
  text-shadow: 6px 6px 0 #1A1A1A;
  transform: rotate(-2deg);
}
.jet-end__sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: #1A1A1A;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .jet-dog { width: clamp(70px, 22vw, 120px); }
  .jet-hud__title { font-size: 16px; }
  .jet-hud__sub { font-size: 9px; padding: 3px 8px; gap: 6px; }
  .jet-hud__bar { width: 100px; }
  .jet-close { width: 48px; height: 48px; font-size: 30px; top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .jet-cloud { animation: none; left: 50vw; }
  .jet-dog__flame { animation: none; }
  .jet-star { animation: none; opacity: 0.6; }
}