/* ShutterSheep Studio — site styles
   Built on top of the ShutterSheep design tokens.
   Keep it warm, paper-toned, sticker-shadowed. No glassmorphism. */

@import url('./colors_and_type.css');

:root {
  --shadow-sticker:    0 4px 0 rgba(61,36,24,0.15);
  --shadow-sticker-h:  0 7px 0 rgba(61,36,24,0.20);
  --shadow-sticker-press: 0 1px 0 rgba(61,36,24,0.18);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --grain-tint:  rgba(61, 36, 24, 0.045);

  /* Magnifying-glass cursors (brand ink). Plus = can zoom in more,
     minus = click to zoom back out. Hotspot at the lens centre (13,13). */
  --cursor-zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%233D2418' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8' fill='%23FFFBF2'/%3E%3Cline x1='18.8' y1='18.8' x2='27' y2='27'/%3E%3Cline x1='13' y1='9.6' x2='13' y2='16.4'/%3E%3Cline x1='9.6' y1='13' x2='16.4' y2='13'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in;
  --cursor-zoom-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%233D2418' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8' fill='%23FFFBF2'/%3E%3Cline x1='18.8' y1='18.8' x2='27' y2='27'/%3E%3Cline x1='9.6' y1='13' x2='16.4' y2='13'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-out;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* Subtle paper grain — at 0.04 opacity per the design system */
  background-image:
    radial-gradient(var(--grain-tint) 1px, transparent 1px),
    radial-gradient(var(--grain-tint) 1px, transparent 1px);
  background-size: 22px 22px, 17px 17px;
  background-position: 0 0, 8px 11px;
  overflow-x: hidden;
}

::selection { background: #F6D6B1; color: var(--ink); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* ─────────────────────────────────────────
   Nav
   ───────────────────────────────────────── */
.nav-wrap { position: sticky; top: 0; z-index: 40; }
.nav-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(61,36,24,0.07);
}
.nav-wrap.scrolled::before {
  opacity: 1;
}
.nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  max-width: 1180px; margin: 0 auto; width: 100%;
}
.nav-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.nav-brand img { width: 44px; height: 44px; object-fit: contain; transition: transform 360ms var(--ease-bounce); }
.nav-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-brand .word {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); letter-spacing: -0.01em;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  color: var(--ink); cursor: pointer; padding: 6px 4px;
  border-bottom: 2.5px solid transparent;
  transition: border-color 220ms var(--ease-soft), transform 220ms var(--ease-bounce);
}
.nav-link:hover { transform: translateY(-1px); border-bottom-color: var(--caramel-deep); }
.nav-link.active { border-bottom-color: var(--caramel-deep); }
/* ─────────────────────────────────────────
   Buttons
   ───────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 12px 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  cursor: pointer; color: var(--ink);
  background: var(--paper-soft);
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sticker);
  transition: transform 180ms var(--ease-bounce), box-shadow 180ms ease, background 220ms ease;
  white-space: nowrap;
  user-select: none;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-sticker-h); }
.btn:active { transform: translateY(2px);  box-shadow: var(--shadow-sticker-press); }
/* Primary buttons + caramel header pills share one caramel fill. */
.btn.primary, .pill.caramel { background: var(--accent-fill); }
.btn.accent  { background: var(--blush-deep); }
.btn.small   { padding: 8px 14px; font-size: 13px; border-width: 2.5px; }
.btn.ghost   { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--paper-soft); transform: translateY(-2px); box-shadow: var(--shadow-sticker); }

/* ─────────────────────────────────────────
   Pills
   ───────────────────────────────────────── */
.pill {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--blush);
  color: var(--ink);
  white-space: nowrap;
}
.pill.cream   { background: var(--paper-soft); }
.pill.sage    { background: #DCEAD6; }
.pill.bare    { border: none; background: transparent; padding: 0; }

/* ─────────────────────────────────────────
   Hero
   ───────────────────────────────────────── */
.hero {
  position: relative;
  padding: 32px 0 84px;
  overflow: visible;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: center;
  min-height: 560px;
}

.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 7.4vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 22px 0 22px;
  color: var(--ink);
}
.hero h1 .accent-w {
  color: #F7F6F6; /* sampled from the mascot's wool */
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(61, 36, 24, 0.18);
}
.hero h1 .wiggle-letter {
  display: inline-block;
  transition: transform 280ms var(--ease-bounce), color 220ms ease;
  will-change: transform;
}
.hero h1 .wiggle-letter:hover {
  transform: translateY(-6px) rotate(-4deg) scale(1.06);
}
.hero p.lead {
  font-family: var(--font-body); font-weight: 500;
  font-size: 19px; line-height: 1.55; color: var(--fg-muted);
  max-width: 480px;
  margin: 0 0 32px;
}
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-meta-row {
  display: flex; gap: 18px; align-items: center;
  margin-top: 32px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-mute); font-weight: 500;
}
.hero-meta-row .dot { color: var(--ink-faint); }
.hero-meta-row b { color: var(--ink); font-weight: 700; }

/* Mascot stage — the centerpiece. The whole stage is clickable
   (taps fire a camera flash + shutter sound) so users don't have to
   chase the dodging mascot to trigger it. */
.mascot-stage {
  position: relative;
  /* Lift the mascot above the sticky nav (z-index:40) so the jump/"eek!"
     pop-up renders in front of the menu. The stage's hit-box stays below the
     nav and the art is pointer-events:none, so menu clicks are unaffected. */
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  min-height: 520px;
  user-select: none;
  touch-action: pan-y;
  cursor: pointer;
}
.mascot-stage:focus-visible {
  outline: 3px dashed var(--caramel-deep);
  outline-offset: 8px;
  border-radius: 32px;
}
.mascot-host {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1168 / 1346;
  transition: transform 480ms var(--ease-bounce);
  will-change: transform;
}
.mascot-host img.mascot-art {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 0 rgba(61,36,24,0.10));
}

/* Speech bubble — sits above the mascot's head so it never overlaps the body */
.no-touchy {
  position: absolute;
  left: 50%; top: 0%;
  transform: translateX(-50%) translateY(-90%) scale(0.7);
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 7px 14px 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--shadow-sticker);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 320ms var(--ease-bounce);
  z-index: 5;
}
.no-touchy.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-96%) scale(1);
}
.no-touchy::after {
  content: '';
  position: absolute; left: 50%; bottom: -8px;
  width: 12px; height: 12px;
  background: var(--paper-soft);
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

/* Cursor sparkle */
.cursor-spark {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--caramel);
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%);
  /* No transform transition: it's already lerped per-frame in JS. */
  transition: background 220ms ease;
}
.cursor-spark.warm { background: var(--blush-deep); }

/* ─────────────────────────────────────────
   Sections — generic
   ───────────────────────────────────────── */
section { position: relative; }
.section { padding: 80px 0; }
.section.bordered {
  background: var(--paper-deep);
}

/* ─────────────────────────────────────────
   Section bands — unique cream tone per section
   so the eye can land on a band by color alone
   while scrolling. Adjacent bands never share a hue.
   No ink divider lines — color alone separates.
   ───────────────────────────────────────── */
.hero           { background: var(--paper);       }
#work           { background: var(--paper-deep);  }
#in-production  { background: var(--caramel-soft); }
#merch          { background: var(--wool-shade);  }
#about.section.bordered { background: var(--paper); }
#contact        { background: var(--paper-deep);  }
footer          { background: var(--paper-soft);  }

/* ─────────────────────────────────────────
   Section eyebrow — pill row at the top of every
   section, flush with the container's left edge
   so all eyebrows form a single visual column down
   the page. Sits above any internal grid.
   ───────────────────────────────────────── */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
/* On sections with extra top padding (.section is 80px),
   the pill already breathes. On the hero with only 32px
   top padding, give it a touch more room. */
.hero .section-eyebrow { margin-top: 8px; margin-bottom: 22px; }
.merch-section .section-eyebrow { margin-bottom: 32px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 60px);
  letter-spacing: -0.025em; line-height: 1; margin: 14px 0 0;
}
.section-head .lead {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; color: var(--fg-muted); max-width: 380px; margin: 0;
}

/* Header band with a decorative mascot: a true two-column composition.
   LEFT column (copy) holds the eyebrow pill pinned to the top and the
   heading pinned to the bottom (space-between) so it fills the band's
   full height. RIGHT column holds the mascot, stretched to that same
   height and bottom-anchored. Both columns span the band edge-to-edge,
   so there is no dead space above or below either one. The art stays in
   normal flow (never clipped by the cards) and the transparent PNG
   blends straight onto the paper background. */
/* Mascot sizing: EXPAND-TO-COPY model. The copy column sizes to its own text
   (flex: 0 1 auto) and the mascot column fills whatever width is left over,
   left-aligned — so the art's left edge sits right next to the copy instead of
   being pinned to the page centre. No centering; the mascot expands toward the
   text. Height follows the intrinsic aspect ratio (longer side maximised). */
.section-head.has-mascot {
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 44px;
}
.section-head-copy {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding-right: clamp(16px, 3vw, 48px);
}
.section-head-copy .section-eyebrow { margin: 0; }
.section-head-copy .section-head-title { flex: 0 0 auto; }
.section-head-copy .section-head-title h2 { margin: 0; }
.section-mascot-reveal {
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}
.section-mascot {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 820px) {
  .section-head.has-mascot { flex-direction: column; gap: 18px; }
  .section-head-copy { flex: 0 0 auto; width: 100%; min-width: 0; padding-right: 0; }
  .section-mascot-reveal { flex: 0 0 auto; align-self: stretch; justify-content: center; margin-top: 8px; }
  .section-mascot { width: min(100%, 460px); }
}

/* ─────────────────────────────────────────
   Work — categories + cards
   ───────────────────────────────────────── */
.cat-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sticker);
}
.cat-tab {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: background 220ms ease, transform 220ms var(--ease-bounce), border-color 220ms ease;
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--ink);
}
.cat-tab:hover { transform: translateY(-1px); }
.cat-tab.active {
  background: var(--caramel);
  border-color: var(--ink);
}
.cat-tab[data-cat="nature"].active { background: #DCEAD6; }
.cat-tab[data-cat="music"].active { background: var(--blush); }
.cat-tab .count {
  font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 22px;
}
.work-card {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper-soft);
  box-shadow: var(--shadow-sticker);
  cursor: pointer;
  transition: transform 240ms var(--ease-bounce), box-shadow 240ms ease;
  display: flex; flex-direction: column;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sticker-h); }
.work-card.size-lg { grid-column: span 4; grid-row: span 2; }
.work-card.size-md { grid-column: span 3; grid-row: span 2; }
.work-card.size-sm { grid-column: span 2; grid-row: span 2; }
.work-card.size-wide { grid-column: span 6; grid-row: span 2; }

/* When WorkCards are wrapped in a Reveal, the wrapper claims the grid span
   so the reveal animation has a real box to animate, and the inner card fills it. */
.work-card-reveal { display: flex; }
.work-card-reveal > .work-card { width: 100%; }
.work-card-reveal.size-lg   { grid-column: span 4; grid-row: span 2; }
.work-card-reveal.size-md   { grid-column: span 3; grid-row: span 2; }
.work-card-reveal.size-sm   { grid-column: span 2; grid-row: span 2; }
.work-card-reveal.size-wide { grid-column: span 6; grid-row: span 2; }

.work-thumb {
  position: relative; flex: 1;
  display: flex; align-items: stretch; justify-content: stretch;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
}
.work-thumb .wash { position: absolute; inset: 0; }
.work-thumb .wash.nature-1 { background: linear-gradient(135deg,#DCEAD6 0%,#9BC48B 100%); }
.work-thumb .wash.nature-2 { background: linear-gradient(135deg,#C4DCE7 0%,#9DBED0 100%); }
.work-thumb .wash.nature-3 { background: linear-gradient(135deg,#EFD7C8 0%,#C8A38B 100%); }
.work-thumb .wash.nature-4 { background: linear-gradient(135deg,#FFE6B8 0%,#E8B976 100%); }
.work-thumb .wash.music-1  { background: linear-gradient(135deg,#FBC9CD 0%,#F4A4AC 100%); }
.work-thumb .wash.music-2  { background: linear-gradient(135deg,#F4DCC9 0%,#E8B976 100%); }
.work-thumb .wash.music-3  { background: linear-gradient(135deg,#FDE3E5 0%,#FBC9CD 100%); }
.work-thumb .wash.music-4  { background: linear-gradient(135deg,#FFE6B8 0%,#FBC9CD 100%); }

.work-thumb .scenery {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.work-thumb .scenery svg { width: 100%; height: 100%; display: block; }

.play-disc {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sticker);
  transition: transform 240ms var(--ease-bounce);
  z-index: 2;
}
.work-card:hover .play-disc { transform: translate(-50%, -50%) scale(1.08) rotate(-6deg); }

.work-meta {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper-soft);
}
.work-meta .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.work-meta h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); margin: 0;
  line-height: 1.1;
}
.work-card.size-sm .work-meta h3 { font-size: 18px; }
.work-meta .small {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Inline player overlay (replaces the thumb when active) */
.work-player {
  position: absolute; inset: 0;
  background: #000;
  z-index: 3;
  display: flex; align-items: stretch; justify-content: stretch;
}
.work-player iframe,
.work-player video {
  width: 100%; height: 100%;
  border: 0; display: block;
  background: #000;
}
.work-player .close-x {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sticker);
  z-index: 2;
}

/* ─────────────────────────────────────────
   About strip
   ───────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }
.about-mascot {
  background: var(--paper-soft);
  border: 4px solid var(--ink);
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow-sticker-h);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transform: rotate(-2deg);
  transition: transform 280ms var(--ease-bounce);
}
.about-mascot:hover { transform: rotate(0deg) scale(1.02); }
.about-mascot img { width: 100%; max-width: 100%; border-radius: 24px; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.about h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.025em; line-height: 1.02;
  margin: 12px 0 18px;
}
.about p {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; line-height: 1.65; color: var(--fg-muted);
  max-width: 540px; margin: 0 0 14px;
}

.fact-row {
  display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap;
}
.fact {
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sticker);
  min-width: 130px;
}
.fact .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block; line-height: 1;
}
.fact .lab {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 4px; display: block;
}

/* ─────────────────────────────────────────
   Merch — plushie tease + wishlist
   ───────────────────────────────────────── */
.merch-section { padding: 96px 0 88px; position: relative; }

.merch-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 64px;
  /* Anchored to start (top) so the polaroid stays put as the right-column
     wishlist UI expands/collapses across its CTA → form → done states.
     With `end`, the polaroid was dropping down on every state change. */
  align-items: start;
}

/* Left — mascot in a thick cream frame, gift-tag pinned at the corner */
.merch-art {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 18px;
}
.merch-art-frame {
  position: relative;
  width: 100%;
  background: var(--paper-soft);
  border: 4px solid var(--ink);
  border-radius: 32px;
  padding: 16px 16px 58px;
  box-shadow: var(--shadow-sticker-h);
  transform: rotate(-1.5deg);
  transition: transform 360ms var(--ease-bounce);
  overflow: hidden;            /* clip the corner ribbon at the rounded edge */
}
.merch-art-frame:hover { transform: rotate(0deg) translateY(-3px); }
.merch-art-caption {
  /* Handwritten "polaroid caption" under the photo */
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 30px;
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
}
.merch-art-caption-hash {
  font-size: 0.62em;
  display: inline-block;
  transform: translateY(-2px);
  margin-right: 1px;
}
.merch-art-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 2.5px solid var(--ink);
}

/* "Coming soon" ribbon — diagonal corner banner pinned to the top-right
   of the polaroid. The polaroid's overflow:hidden clips it cleanly to
   the rounded edge, so it looks like part of the print. */
.merch-ribbon {
  position: absolute;
  top: 22px;
  right: -52px;
  width: 180px;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 8px 0 9px;
  transform: rotate(45deg);
  transform-origin: center;
  /* Blush-deep > caramel-deep here. Caramel sat too close to the
     polaroid's cream wash; the blush reads as a clean stamp against
     the paper, and ties to the brand's cheek-spot pink. */
  background: var(--blush-deep);
  border-top:    2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  box-shadow:
    0 4px 0 rgba(61, 36, 24, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.05;
}

/* Click-to-zoom polaroid trigger */
.merch-art-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 18px;
  cursor: var(--cursor-zoom-in);
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.merch-art-zoom:focus-visible {
  outline: 3px solid var(--blush-deep);
  outline-offset: 4px;
  border-radius: 20px;
}
.merch-art-zoom img { transition: transform 320ms var(--ease-bounce); }
.merch-art-zoom:hover img { transform: scale(1.015); }
.merch-art-zoom-hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translate(-50%, 6px);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 280ms var(--ease-bounce);
  white-space: nowrap;
}
.merch-art-zoom:hover .merch-art-zoom-hint,
.merch-art-zoom:focus-visible .merch-art-zoom-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Lightbox */
.merch-lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: merchLbIn 260ms var(--ease-bounce);
}
@keyframes merchLbIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.merch-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(61, 36, 24, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  cursor: var(--cursor-zoom-out);
}
.merch-lightbox-scroller {
  position: relative;
  margin: 24px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(61, 36, 24, 0.35);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  width: auto; height: auto;
  max-width: 94vw; max-height: 88vh;
}
.merch-lightbox-scroller.is-actual {
  width: auto; height: auto;
  max-width: min(94vw, 1400px);
  max-height: min(88vh, 900px);
  overflow: auto;
  align-items: flex-start; justify-content: flex-start;
  cursor: var(--cursor-zoom-out);
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper-deep);
}
.merch-lightbox-scroller.is-actual::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.merch-lightbox-scroller.is-actual::-webkit-scrollbar-track {
  background: var(--paper-deep);
}
.merch-lightbox-scroller.is-actual::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 999px;
  border: 3px solid var(--paper-deep);
}
.merch-lightbox-scroller.is-actual::-webkit-scrollbar-thumb:hover {
  background: var(--caramel-deep);
}
.merch-lightbox-scroller.is-actual::-webkit-scrollbar-corner {
  background: var(--paper-deep);
}
.merch-lightbox-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 200ms ease;
}
.merch-lightbox-img.is-fit {
  max-width: 94vw;
  max-height: 88vh;
  width: auto; height: auto;
  cursor: var(--cursor-zoom-in);
  border-radius: 20px;
}
.merch-lightbox-img.is-actual {
  width: auto; height: auto;
  max-width: none; max-height: none;
  cursor: var(--cursor-zoom-out);
}
.merch-lightbox-bar {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.merch-lightbox-hint {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.merch-lightbox-close {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(61, 36, 24, 0.18);
  transition: transform 180ms var(--ease-bounce), box-shadow 180ms ease;
  padding: 0;
}
.merch-lightbox-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(61, 36, 24, 0.18);
}
.merch-lightbox-close:active {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(61, 36, 24, 0);
}
@media (max-width: 640px) {
  .merch-lightbox-scroller { width: 96vw; height: 86vh; margin: 12px; border-width: 3px; border-radius: 18px; }
  .merch-lightbox-close { top: 14px; right: 14px; }
  .merch-lightbox-bar { bottom: 14px; }
}

/* Gift tag — anchored to the polaroid frame's top-right corner */
.merch-tag {
  position: absolute;
  top: -22px; right: 18px;
  display: flex; flex-direction: column; align-items: center;
  z-index: 3;
  transform: rotate(8deg);
  pointer-events: none;
}
.merch-tag-string {
  width: 2.5px; height: 26px;
  background: var(--ink);
  border-radius: 2px;
  margin-bottom: -2px;
}
.merch-tag-paper {
  background: var(--caramel);
  border: 2.5px solid var(--ink);
  border-radius: 12px 12px 18px 18px;
  padding: 10px 16px 12px;
  box-shadow: var(--shadow-sticker);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
  line-height: 1.1;
}
.merch-tag-paper::before {
  content: '';
  position: absolute; top: -3px; left: 50%;
  width: 10px; height: 10px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
}
.merch-tag-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}
.merch-tag-name {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

/* "Coming spring" dot pill */
.merch-dot {
  width: 8px; height: 8px;
  background: var(--caramel-deep);
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
  animation: merchDot 1.6s ease-in-out infinite;
}
@keyframes merchDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.6); opacity: 0.55; }
}

/* Right — copy */
.merch-copy h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.4vw, 64px);
  letter-spacing: -0.028em; line-height: 0.98;
  margin: 14px 0 18px;
  color: var(--ink);
}
.merch-copy .merch-lead {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; line-height: 1.6;
  color: var(--fg-muted);
  max-width: 480px;
  margin: 0 0 26px;
}

/* Specs row — three little stat cards */
.merch-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.merch-specs li {
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 10px 16px 12px;
  box-shadow: var(--shadow-sticker);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 120px;
}
.merch-spec-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.merch-spec-lab {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Wishlist — initial CTA */
.wishlist-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Handwritten callout below the polaroid — the note sits centered
   under the "sheep #001" caption; the arrow extends rightward across
   the column gap and points at the join-the-wishlist button. */
.merch-art-callout {
  position: relative;
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.merch-art-callout-note {
  display: block;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  transform: translateY(17px) rotate(-2deg);
  white-space: nowrap;
}
.merch-art-callout-arrow {
  position: absolute;
  /* left / top / width / height / viewBox are all set by JS so the
     arrow's bounding box spans from the note (bottom-left) to the
     wishlist button (top-right) at any viewport. */
  left: 0;
  top: 0;
  width: 320px;
  height: 60px;
  overflow: visible;
  pointer-events: none;
  color: var(--ink);
}
.merch-art-callout-hash {
  font-size: 0.62em;
  display: inline-block;
  transform: translateY(-2px);
  margin-right: 1px;
}
@media (max-width: 980px) {
  .merch-art-callout-arrow { display: none; }
}
.wishlist-hint {
  font-family: var(--font-hand);
  font-size: 20px; color: var(--ink-mute);
}

/* Wishlist — open form */
.wishlist-form {
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-sticker);
  max-width: 520px;
  animation: wishlistIn 320ms var(--ease-bounce);
}
@keyframes wishlistIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wishlist-field {
  display: flex; gap: 10px; align-items: center;
}
.wishlist-field input {
  flex: 1;
  font: inherit;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 11px 18px;
  outline: none;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms var(--ease-bounce);
  min-width: 0;
}
.wishlist-field input::placeholder { color: var(--ink-faint); }
.wishlist-field input:focus {
  box-shadow: 0 0 0 3px var(--accent-fill);
}
.wishlist-form.has-error .wishlist-field input {
  border-color: var(--blush-deep);
  box-shadow: 0 0 0 3px rgba(244, 164, 172, 0.35);
}
.wishlist-meta {
  margin-top: 8px;
  padding: 0 6px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.wishlist-err { color: var(--blush-deep); font-weight: 600; }

/* Wishlist — done */
.wishlist-done {
  display: inline-flex; gap: 14px; align-items: center;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px 20px 14px 14px;
  box-shadow: var(--shadow-sticker);
  max-width: 520px;
  animation: wishlistIn 320ms var(--ease-bounce);
}
.wishlist-done-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blush);
  border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  flex: none;
}
.wishlist-done-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--ink); line-height: 1.1;
}
.wishlist-done-sub {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.4;
}
.wishlist-done-sub b { color: var(--ink); font-weight: 700; }

/* ─────────────────────────────────────────
   Contact CTA
   ───────────────────────────────────────── */
.cta {
  margin: 72px 0 32px;
  background: var(--caramel);
  border: 4px solid var(--ink);
  border-radius: 40px;
  padding: 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  box-shadow: var(--shadow-sticker-h);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--blush);
  border: 4px solid var(--ink);
  opacity: 0.6;
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 8px 0 12px;
  color: var(--ink);
}
.cta p {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; color: var(--ink); margin: 0; max-width: 460px;
}

/* ─────────────────────────────────────────
   Footer
   ───────────────────────────────────────── */
.footer {
  padding: 28px 0 36px;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink-mute);
  flex-wrap: wrap; gap: 12px;
}
.footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer .links a { color: var(--ink); text-decoration: none; cursor: pointer; }
.footer .links a:hover { color: var(--caramel-deep); }
.footer .heart-glyph { color: var(--heart); }

/* ─────────────────────────────────────────
   Reveal-on-scroll — entry animation slides + fades. We use
   visibility/translateY ONLY (no opacity) because in some browser
   states a transition from opacity 0 → 1 can get stuck at 0 when
   the element is created and revealed in the same render frame.
   Sliding from a 14px offset reads as a soft entry without that risk.
   ───────────────────────────────────────── */
.reveal {
  transform: translateY(18px);
  transition: transform 800ms var(--ease-bounce);
  will-change: transform;
}
.reveal.in { transform: translateY(0); }

/* ─────────────────────────────────────────
   In production — cards re-use the work-card skeleton (thumb on top,
   meta with pill + date + h3 + optional description) so the section
   visually rhymes with the films grid. Only the thumb contents and
   the status badge change per state.
   ───────────────────────────────────────── */
.inprod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.work-card-reveal.inprod-feature-reveal { width: 100%; }
.work-card-reveal.inprod-feature-reveal > .work-card { width: 100%; }

/* .inprod-card is a work-card variant with a slightly more spacious
   meta block (these cards carry a description, not just a runtime). */
.inprod-card .work-meta {
  padding: 20px 22px 22px;
  gap: 10px;
}
.inprod-card .card-desc {
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}

.inprod-feature .work-thumb {
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;            /* don't let flex resize away from aspect ratio */
  background: var(--paper-deep);
}
.inprod-feature .work-thumb image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.inprod-feature .work-meta {
  padding: 24px 28px 26px;
  gap: 12px;
}
.inprod-feature .work-meta h3 {
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.025em; line-height: 1.0;
}
.inprod-feature .card-desc {
  font-size: 16px; line-height: 1.6;
  max-width: 560px;
}

.inprod-side {
  display: flex; flex-direction: column; gap: 20px;
}
.inprod-side .work-card-reveal { width: 100%; }
.inprod-side .work-card-reveal > .work-card { width: 100%; }
.inprod-side .inprod-card .work-thumb {
  /* Shorter than feature thumb so the stacked side column stays
     visually comparable to the single feature card next to it. */
  aspect-ratio: 21 / 9;
  flex: 0 0 auto;
}

/* Soft pre-production washes for cards without imagery yet */
.work-thumb .wash.inprod-wash-up {
  /* Caramel/warm — "almost rolling" */
  background:
    linear-gradient(135deg, #F4DCC9 0%, #E8B976 65%, #D49A4F 100%);
}
.work-thumb .wash.inprod-wash-des {
  /* Cool, paper-clean — "still on the drawing board" */
  background:
    linear-gradient(135deg, #EDE5D6 0%, #DCD1BC 100%);
}

/* ─────────────────────────────────────────
   Thumb-status badge — small pill that sits over a card thumb to
   signal state (filming now / upcoming / designing / coming soon).
   Shared between in-production and the merch section eyebrow.
   ───────────────────────────────────────── */
.thumb-status {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--paper-soft);
  color: var(--ink);
  box-shadow: var(--shadow-sticker);
  z-index: 2;
  white-space: nowrap;
}
.thumb-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--caramel-deep);
}

/* Live state: red, glowing, pulsing — only used for "filming now". */
.thumb-status.dot-live .thumb-status-dot {
  background: #D9382F;
  box-shadow: 0 0 0 2px rgba(217, 56, 47, 0.20);
  animation: merchDot 1.6s ease-in-out infinite;
}
/* Upcoming / coming-soon — caramel, static (no pulse). */
.thumb-status.dot-caramel .thumb-status-dot {
  background: var(--caramel-deep);
}
/* Designing / earliest — wool (near-white) ringed in ink, no pulse. */
.thumb-status.dot-wool .thumb-status-dot {
  background: var(--wool);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* Inline (non-absolute) variant — for use in section eyebrow rows
   where the badge sits next to other pills instead of over a card thumb. */
.thumb-status.is-inline {
  position: static;
}

/* ─────────────────────────────────────────
   Follow — newsletter + socials
   ───────────────────────────────────────── */
.follow {
  margin: 72px 0 32px;
  background: #FDF4E7; /* sampled from the mascot's face */
  border: 4px solid var(--ink);
  border-radius: 40px;
  padding: 56px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center;
  box-shadow: var(--shadow-sticker-h);
  position: relative;
  overflow: hidden;
}
.follow::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--blush);
  border: none;
  opacity: 0.6;
  z-index: 0;
}
.follow > * { position: relative; z-index: 1; }
.follow-copy h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 8px 0 12px;
  color: var(--ink);
}
.follow-copy p {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; color: var(--ink); margin: 0; max-width: 460px;
}

.follow-actions {
  display: flex; flex-direction: column; gap: 18px;
  align-items: stretch;
}
.follow-form {
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-sticker);
}
.follow-field {
  display: flex; gap: 10px; align-items: center;
}
.follow-field input {
  flex: 1;
  font: inherit;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 11px 18px;
  outline: none;
  transition: box-shadow 180ms ease, border-color 180ms ease;
  min-width: 0;
}
.follow-field input::placeholder { color: var(--ink-faint); }
.follow-field input:focus { box-shadow: 0 0 0 3px var(--accent-fill); }
.follow-form.has-error .follow-field input {
  border-color: var(--blush-deep);
  box-shadow: 0 0 0 3px rgba(244, 164, 172, 0.35);
}
.follow-meta {
  margin-top: 8px;
  padding: 0 6px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-mute);
}
.follow-err { color: var(--blush-deep); font-weight: 600; }

.follow-done {
  display: inline-flex; gap: 14px; align-items: center;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px 20px 14px 14px;
  box-shadow: var(--shadow-sticker);
}
.follow-done-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blush);
  border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  flex: none;
}
.follow-done-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--ink); line-height: 1.1;
}
.follow-done-sub {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.4;
}
.follow-done-sub b { color: var(--ink); font-weight: 700; }

.follow-socials {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
  padding: 0 6px;
}
.follow-social {
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease, transform 200ms var(--ease-bounce);
  cursor: pointer;
}
.follow-social:hover {
  border-bottom-color: var(--ink);
  transform: translateY(-1px);
}
.follow-social-sep {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ─────────────────────────────────────────
   Camera flash overlay (mascot click easter egg)
   ───────────────────────────────────────── */
.cam-flash {
  position: fixed; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: screen;
}
.cam-flash.fire { animation: camFlash 480ms ease-out; }
@keyframes camFlash {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Make the mascot clickable for the flash easter egg */
.mascot-host { cursor: pointer; }

/* Tiny tilt prep — work cards already have shadows; let the transform property carry tilt */
.work-card { transform-style: preserve-3d; }

/* ─────────────────────────────────────────
   Work toolbar (category tabs + caption)
   ───────────────────────────────────────── */
.work-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
}
.work-toolbar .caption {
  color: var(--ink-mute); font-family: var(--font-body); font-size: 13px;
}

/* ─────────────────────────────────────────
   Reel modal
   ───────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(61,36,24,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; z-index: 99;
}
.modal-card {
  background: var(--paper); border: 4px solid var(--ink);
  border-radius: 28px; max-width: 920px; width: 100%;
  box-shadow: 0 8px 0 rgba(61,36,24,0.25); overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 3px solid var(--ink);
  background: var(--paper-soft);
}
.modal-head .title-row { display: flex; gap: 10px; align-items: center; }
.modal-head .title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.modal-frame { aspect-ratio: 16 / 9; background: #000; }
.modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─────────────────────────────────────────
   Contact — right-hand copy column
   ───────────────────────────────────────── */
.cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cta-actions .hint {
  font-family: var(--font-hand); font-size: 22px;
  color: var(--ink); margin-left: 6px;
}

/* ─────────────────────────────────────────
   Responsive
   ───────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .mascot-stage { min-height: 420px; }
  .work-grid { grid-template-columns: repeat(4, 1fr); }
  .work-card.size-lg, .work-card.size-md, .work-card.size-wide { grid-column: span 4; }
  .work-card.size-sm { grid-column: span 2; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .merch-grid { grid-template-columns: 1fr; gap: 40px; }
  .merch-art-frame { max-width: 420px; }
  .inprod-grid { grid-template-columns: 1fr; gap: 22px; }
  .inprod-side { flex-direction: row; }
  .inprod-side-card { flex: 1; }
  .follow { grid-template-columns: 1fr; padding: 40px; }
  .cta { grid-template-columns: 1fr; padding: 40px; }
  .nav-links { gap: 16px; }
  .process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav-links .nav-link { display: none; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card.size-lg, .work-card.size-md, .work-card.size-wide, .work-card.size-sm { grid-column: span 2; }
  .container { padding: 0 18px; }
  .nav { padding: 14px 18px; }
  .inprod-side { flex-direction: column; }
}

/* ─────────────────────────────────────────
   (Sound toggle removed — tab sounds always play, no UI.)
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   Google sign-in button (shared: login + submit)
   ───────────────────────────────────────── */
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
  background: var(--paper-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sticker);
  transition: transform 160ms var(--ease-bounce), box-shadow 160ms ease, background 160ms ease;
}
.google-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sticker-h); background: var(--paper); }
.google-btn:active { transform: translateY(2px); box-shadow: var(--shadow-sticker-press); }
.google-btn:disabled, .google-btn.is-pending { opacity: 0.7; cursor: default; transform: none; }
.google-btn .google-g {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--caramel-deep);
}

/* ─────────────────────────────────────────
   Submit section (public video submission)
   ───────────────────────────────────────── */
.submit-section { background: var(--paper-deep); }
.submit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.submit-copy h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: -0.025em; line-height: 1; margin: 14px 0 18px;
  color: var(--ink);
}
.submit-copy p {
  font-family: var(--font-body); font-weight: 500;
  font-size: 17px; color: var(--fg-muted); max-width: 440px;
  margin: 0 0 22px;
}
.submit-notes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.submit-notes li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--ink-soft);
}
.submit-notes li b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.submit-notes li > span:last-child { white-space: nowrap; }
.submit-notes .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--caramel); border: 2px solid var(--ink);
}

.submit-panel {
  background: var(--paper-soft);
  border: 4px solid var(--ink);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 8px 0 rgba(61,36,24,0.16);
  display: flex; flex-direction: column; gap: 16px;
}
.submit-panel-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--ink);
}
.submit-panel-sub {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--ink-mute); margin: 0;
}
.submit-signin { display: flex; flex-direction: column; gap: 14px; }

.submit-account {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--border-soft);
}
.submit-account-who {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submit-account-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--success); border: 1.5px solid var(--ink);
}
.submit-signout {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--ink-mute);
  background: transparent; border: none; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--caramel);
  text-underline-offset: 3px; flex: none;
}
.submit-signout:hover { color: var(--ink); }

.submit-drop {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  padding: 20px;
  background: var(--paper);
  border: 2.5px dashed var(--ink-mute);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  font: inherit; color: var(--ink);
}
.submit-drop:hover { border-color: var(--ink); background: var(--paper-soft); }
.submit-drop.has-file { border-style: solid; border-color: var(--ink); background: var(--paper-soft); }
.submit-drop.is-busy { opacity: 0.6; cursor: default; }
.submit-drop-icon {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--caramel-soft);
  border: 2.5px solid var(--ink);
  border-radius: 14px; color: var(--ink);
}
.submit-drop-prompt, .submit-drop-file { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.submit-drop-prompt .lead-line, .submit-drop-file .name {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submit-drop-prompt .sub-line, .submit-drop-file .size {
  font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--ink-mute);
  white-space: nowrap;
}

.submit-progress { display: flex; flex-direction: column; gap: 6px; }
.submit-progress-track {
  height: 12px; border-radius: 999px;
  background: var(--paper); border: 2.5px solid var(--ink);
  overflow: hidden;
}
.submit-progress-fill {
  height: 100%; background: var(--caramel);
  border-right: 2px solid var(--ink);
  transition: width 200ms ease;
}
.submit-progress-label {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.submit-error {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: #9A2929;
  background: #FBD7D7;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
}
.submit-actions { display: flex; }
.submit-actions .btn { width: 100%; justify-content: center; }

.submit-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.submit-done-mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blush); border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.submit-done-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.submit-done-sub {
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink-mute);
  line-height: 1.5;
}
.submit-done-sub b { color: var(--ink); font-weight: 700; }
.submit-done-actions { margin-top: 6px; }

@media (max-width: 980px) {
  .submit-grid { grid-template-columns: 1fr; gap: 32px; }
}