/* ============================================================
   MKTCHHA — the feed come alive
   Official brand kit palette + typography (Aug 2026)
   tokens: ink(Charcoal) / paper(Parchment) / pistachio(Pistachio) /
           matcha-deep(Matcha Green) / pink(Cherry Blossom) / pink-hot(Matcha Green)
   ============================================================ */

@font-face {
  font-family: "Kravitz Extra Thermal";
  src: url("fonts/Kravitz-Extra-Thermal.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Gothic";
  src: url("fonts/AvantGardeGothic-Medium.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Gothic";
  src: url("fonts/AvantGardeGothic-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
/* AvantGardeGothic-Demi.otf is a corrupt file Chrome can't decode (fails
   with FontFace status "error" despite a valid OTTO header). Bold.otf is a
   separate, working file — real bold instead of browser-synthesized bold. */
@font-face {
  font-family: "Avant Garde Gothic";
  src: url("fonts/AvantGardeGothic-Bold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Gothic";
  src: url("fonts/AvantGardeGothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Biro Script";
  src: url("fonts/Biro-Script-Reduced.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Charcoal, Parchment, Pistachio, Matcha Green, Cherry Blossom — official brand kit */
  --ink: #525049;
  --paper: #f8efda;
  --pistachio: #badd7f;
  --matcha-deep: #75a12d;
  --pink: #ffb7c5;
  --pink-hot: #75a12d;

  --display: "Kravitz Extra Thermal", "Anton", "Arial Black", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --script: var(--body);
  --body: "Avant Garde Gothic", "Schibsted Grotesk", "Segoe UI", sans-serif;

  --shadow-sticker: 0 2px 0 rgba(82, 80, 73, 0.9);
  --border-sticker: 2px solid var(--ink);
  --radius: 18px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  /* subtle paper dot grid */
  background-image: radial-gradient(rgba(82, 80, 73, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

::selection { background: var(--pink-hot); color: var(--paper); }

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

[hidden] { display: none !important; }

a { color: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 3px solid var(--pink-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- prototype gate (delete at launch) ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: var(--border-sticker);
  border-radius: 999px;
  padding: 0.8em 1.6em;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn--pink { background: var(--pink-hot); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--pink-hot); }
.btn--ink:hover { box-shadow: 5px 5px 0 var(--pink-hot); }
.btn--ghost { background: transparent; }
.btn--outline {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 3px 3px 0 rgba(248, 239, 218, 0.35);
}
.btn--outline:hover { box-shadow: 5px 5px 0 rgba(248, 239, 218, 0.35); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0.75rem; left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.5rem 0.6rem 0.5rem 1.2rem;
  background: var(--paper);
  border: var(--border-sticker);
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(82, 80, 73, 0.9);
  z-index: 50;
}
/* frosted-glass nav only where backdrop-filter actually works — browsers
   without it (many Android in-app WebViews, incl. WhatsApp's) would
   otherwise render the translucent background with no blur, letting
   scrolled content show through the nav */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: rgba(248, 239, 218, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
/* scroll progress lives inside the nav pill — a soft brand-colour fill
   that grows from the left as you scroll. Sits behind everything else.
   (.nav__progress has its own overflow:hidden for the pill-shaped clip —
   .nav itself must stay unclipped or it traps the mobile dropdown below it) */
.nav__progress {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  overflow: hidden;
}
.nav__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    rgba(186, 221, 127, 0.28) 0%,
    rgba(255, 183, 197, 0.28) 55%,
    rgba(117, 161, 45, 0.28) 100%);
  border-right: 2px solid rgba(82, 80, 73, 0.4);
}
.nav > *:not(.nav__progress) { position: relative; z-index: 1; }
.nav__logo {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__logo-mark { height: 1.55rem; width: auto; display: block; }
.nav__links { display: flex; gap: clamp(1.4rem, 2.5vw, 2.4rem); align-items: center; }
.nav__links a {
  text-decoration: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  position: relative;
  transition: color 0.18s ease;
}
.nav__links a:hover { color: var(--pink-hot); }
/* the mobile-only CTA lives inside the dropdown; hidden on desktop */
.nav__links-cta { display: none; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: var(--pink-hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { padding: 0.55em 1.2em; font-size: 0.95rem; }

/* social icons — desktop pair sits in the pill, mobile pair lives in the dropdown */
.nav__social { display: flex; gap: 0.7rem; align-items: center; }
.nav__social a { display: flex; color: var(--ink); transition: color 0.18s ease; }
.nav__social a:hover { color: var(--pink-hot); }
.nav__social svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.nav__social--mobile { display: none; }

/* hamburger — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  transition: rotate 0.3s ease;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] { rotate: 90deg; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 7rem var(--gutter) 5rem;
  overflow: hidden;
}
.hero__inner {
  --strap-size: clamp(1rem, 1.9vw, 1.3rem);
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 60rem;
}
.hero__eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  margin-bottom: 1rem;
}
.hero__wordmark {
  line-height: 0.95;
  font-size: 0; /* image row — no text metrics to size against */
}
/* cropped straight from the nav logo's own render (same fonts, same
   kerning baked in as pixel gaps between crops), so the hero wordmark is
   pixel-faithful to it instead of a separately-approximated text version.
   height clamp is the old font-size clamp scaled by the crop's own
   padded-height-to-font-size ratio (70/90), so it grows at the same rate. */
.ltr { display: inline-block; height: clamp(2.6rem, 13.7vw, 10.2rem); width: auto; vertical-align: bottom; transform-origin: 50% 85%; }
@media (min-width: 721px) {
  .ltr { height: clamp(2.8rem, 15vw, 13rem); }
}
.hero__strap {
  font-family: var(--script);
  font-size: var(--strap-size);
  color: var(--matcha-deep);
  margin-top: 1.4rem;
}
.hero__cta {
  display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.hero__hint {
  font-family: var(--script);
  /* always a fixed fraction of the strap's own size, so it stays smaller at every viewport width */
  font-size: calc(var(--strap-size) * 0.82);
  color: var(--matcha-deep);
  margin-top: 2.4rem;
}

/* ---------- stickers (signature) ---------- */

.stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sticker {
  position: absolute;
  left: var(--x); top: var(--y);
  rotate: var(--r);
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* hand the whole gesture to GSAP Draggable, don't let the page try to scroll under a drag */
  will-change: transform;
}
.sticker:active { cursor: grabbing; }

.polaroid {
  background: var(--paper);
  border: var(--border-sticker);
  border-radius: 6px;
  padding: 0.55rem 0.55rem 0.4rem;
  width: clamp(120px, 15vw, 185px);
  box-shadow: 6px 6px 0 rgba(82, 80, 73, 0.85);
}
.polaroid__img {
  display: grid;
  place-content: center;
  text-align: center;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--pistachio);
  gap: 0.1rem;
  padding: 0.4rem;
}
.polaroid--pink .polaroid__img { background: var(--pink); }
.polaroid--paper .polaroid__img { background: var(--paper); }
.polaroid__big {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
}
.polaroid__small { font-family: var(--script); font-size: 1.15rem; }
.polaroid__caption {
  font-family: var(--script);
  font-size: 1.05rem;
  text-align: center;
  padding-top: 0.3rem;
}
.polaroid__img--club span {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1.1;
}
/* real photos: fill the frame instead of centering a glyph */
.polaroid__img--photo {
  display: block;
  padding: 0;
  overflow: hidden;
}
.polaroid__img--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.polaroid--photo { width: clamp(160px, 21vw, 260px); }

/* rotating photo slideshow: two stacked <img> layers, crossfade by
   toggling is-active — main.js swaps the hidden layer's src ahead of time
   so the fade never reveals a blank frame */
.polaroid__img--slideshow { position: relative; }
.polaroid__img--slideshow .polaroid__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.polaroid__img--slideshow .polaroid__slide.is-active { opacity: 1; }

/* the full-size polaroid (~231px tall) doesn't fit the gap between the
   fixed-height nav and the headline at any realistic hero height —
   shrink it so it clears both */
.stickers .polaroid--pink { width: clamp(126px, 13vw, 178px); }
.stickers .polaroid--green { width: clamp(126px, 13vw, 178px); }

.tape {
  position: absolute;
  top: -10px; left: 50%;
  translate: -50% 0;
  width: 74px; height: 22px;
  background: rgba(186, 221, 127, 0.75);
  border: 1.5px dashed rgba(82, 80, 73, 0.35);
  rotate: -3deg;
}
.tape--slant { rotate: 6deg; background: rgba(255, 183, 197, 0.85); }

@keyframes spin { to { transform: rotate(360deg); } }

.bow { width: clamp(70px, 8vw, 104px); }
.bow__svg path, .bow__svg circle { fill: var(--pink); stroke: var(--ink); stroke-width: 3; }
.bow__svg .bow__ribbon { stroke: var(--pink); }

.latte { width: clamp(58px, 6.5vw, 84px); }
.latte__glass { fill: rgba(255, 255, 255, 0.5); stroke: var(--ink); }
.latte__fill { fill: var(--matcha-deep); opacity: 0.55; stroke: none; }
.latte__ice { fill: rgba(255, 255, 255, 0.8); stroke: var(--ink); stroke-width: 1.5; }
.latte__straw { stroke: var(--pink-hot); }

.matcha { width: clamp(66px, 7.5vw, 96px); }
.matcha__bowl { fill: var(--paper); stroke: var(--ink); }
.matcha__powder { fill: var(--matcha-deep); stroke: var(--ink); stroke-width: 2; }
.matcha__whisk { stroke: var(--ink); fill: none; }

.note {
  font-family: var(--script);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  background: var(--pistachio);
  border: var(--border-sticker);
  padding: 0.7rem 1rem;
  border-radius: 4px;
  box-shadow: 5px 5px 0 rgba(82, 80, 73, 0.85);
  max-width: 190px;
}

.spark { font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--pink-hot); }
.spark--2 { color: var(--matcha-deep); }

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: var(--border-sticker);
  border-bottom: var(--border-sticker);
  padding: 0.65rem 0;
  background: var(--pistachio);
}
.marquee--pink { background: var(--pink); }
.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.06em;
}
.marquee__track--reverse { animation-direction: reverse; }
/* spans are the skew target (the track's transform belongs to the marquee animation) */
.marquee__track > span { display: inline-block; will-change: transform; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */

.section { padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter); position: relative; }
.section--green { background: var(--matcha-deep); }
.section--green .headline { color: var(--paper); }
.section--pink { background: var(--pink); }
.section--paper { background: transparent; }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow--script { color: var(--pink); }
.section--ink .headline em {
  color: var(--pistachio);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 118 6' fill='none' stroke='%23FFF6EC' stroke-width='3.5' stroke-linecap='round'/></svg>");
}
.section__inner { max-width: 1200px; margin: 0 auto; }
.section__inner--narrow { max-width: 760px; }
.section__note { font-family: var(--script); font-size: 1.3rem; margin-top: 0.4rem; }

.eyebrow--script {
  font-family: var(--script);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--pink-hot);
  display: inline-block;
}
.section--green .eyebrow--script { color: var(--pink); }
.section--pink .eyebrow--script { color: var(--ink); }

.headline {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  max-width: 20ch;
  margin-top: 0.4rem;
}
.headline em {
  font-family: var(--body);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pink-hot);
  /* hand-drawn underline, drawn on when the headline reveals (.squiggled) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 118 6' fill='none' stroke='%23525049' stroke-width='3.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 0% 0.2em;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.headline.squiggled em { background-size: 100% 0.2em; }
.section--green .headline em { color: var(--paper); }
.headline .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.headline .word > span { display: inline-block; }

/* ---------- service cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.75rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  align-items: start; /* cards hug their content — stretching left dead space under short ones */
}
.card {
  position: relative;
  background: var(--paper);
  border: var(--border-sticker);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: 6px 6px 0 rgba(82, 80, 73, 0.9);
  rotate: var(--tilt);
  transition: rotate 0.25s ease, translate 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  rotate: 0deg;
  translate: 0 -6px;
  box-shadow: 9px 12px 0 rgba(82, 80, 73, 0.9);
}
.card__icon { width: 52px; margin-bottom: 0.9rem; }
.card__icon svg { stroke: var(--ink); fill: none; }
.card__icon circle[r="2.4"] { fill: var(--ink); }
.card__title {
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.card__copy { font-size: 0.98rem; }
/* Kravitz Extra Thermal renders "&" as a tiny underlined "and" ligature —
   too small to read at display sizes. Render it in the body font instead. */
.amp { font-family: var(--body); text-transform: none; letter-spacing: 0; }
.card__tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__tags span {
  font-size: 0.78rem;
  font-weight: 700;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  background: var(--pink);
}
.card:nth-child(2n) .card__tags span { background: var(--pistachio); }

/* service package tiers */
.card__tiers { list-style: none; display: grid; gap: 1rem; margin-top: 0.4rem; }
.card__tiers li {
  display: grid;
  gap: 0.15rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--pink);
}
.card:nth-child(2n) .card__tiers li { border-left-color: var(--pistachio); }
.card__tiers strong {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.card__tiers span { font-size: 0.94rem; }
.card__tiers em {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.02rem;
  color: var(--matcha-deep);
}

/* ---------- client wall ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 172px));
  justify-content: center;
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.wall__card {
  display: grid;
  gap: 0.3rem;
  text-decoration: none;
  border: var(--border-sticker);
  border-radius: var(--radius);
  padding: 1.1rem 0.9rem;
  background: var(--paper);
  box-shadow: 5px 5px 0 rgba(82, 80, 73, 0.9);
  rotate: var(--tilt);
  transition: rotate 0.25s ease, translate 0.25s ease, box-shadow 0.25s ease;
}
.wall__card:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 9px 12px 0 rgba(82, 80, 73, 0.9); }
.wall__card--pink { background: var(--pink); }
.wall__card--green { background: var(--pistachio); }
.wall__card--reserved { background: transparent; border-style: dashed; box-shadow: none; }
.wall__card--reserved:hover { box-shadow: 6px 6px 0 rgba(82, 80, 73, 0.25); }
.wall__name {
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.wall__card--reserved .wall__name { color: rgba(82, 80, 73, 0.55); }
.wall__kind { font-size: 0.8rem; font-weight: 500; line-height: 1.25; }
.wall__card--logo { padding: 0.65rem 0.65rem 0.85rem; justify-items: center; text-align: center; }
.wall__logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: calc(var(--radius) - 8px);
  border: var(--border-sticker);
}
.wall__card--logo .wall__kind { margin-top: 0.2rem; }
.wall__ps { font-family: var(--script); font-size: 1.25rem; margin-top: 1.6rem; }

/* ---------- about ---------- */

.section__inner--about {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.25rem);
}
/* the crew polaroid is the only thing in its column — size it to the column
   so it balances the text block instead of floating in dead space */
.about__crew .polaroid--photo { width: 100%; }
.about__copy {
  max-width: 46ch;
  margin-top: 1.2rem;
  font-size: 1.05rem;
  opacity: 0.92;
}
.about__copy-logo {
  display: inline-block;
  height: 1.5em;
  width: auto;
  vertical-align: middle;
  margin-bottom: 0.1em;
}
.about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.about__chips span {
  display: inline-block;
  border: 2px solid var(--paper);
  border-radius: 999px;
  padding: 0.35em 1em;
  font-weight: 700;
  font-size: 0.9rem;
  rotate: -1.5deg;
}
.about__chips span:nth-child(2n) {
  background: var(--pink-hot);
  border-color: var(--pink-hot);
  rotate: 1.5deg;
}
.about__note {
  font-family: var(--script);
  font-size: 1.2rem;
  color: var(--pink);
  margin-top: 1.5rem;
}
.about__crew { display: grid; gap: 1.1rem; justify-items: center; }
.about__crew-photos {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  justify-content: center;
}
.about__crew .polaroid { rotate: var(--r); color: var(--ink); position: relative; width: clamp(190px, 26vw, 320px); }
.about__crew .polaroid__caption {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  padding: 0.45rem 0.3rem 0.15rem;
  white-space: nowrap;
}
.about__crew-desc {
  font-family: var(--body);
  font-size: clamp(0.92rem, 1.5vw, 1.1rem);
  color: var(--pink);
  text-align: center;
  max-width: 42ch;
  rotate: -0.5deg;
}
.about__crew-desc strong { color: var(--pink); font-weight: 700; }
.about__face { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.about__copy strong { color: var(--pistachio); }

/* founder bios */
.founders {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* exactly two founders — auto-fit would leave a gap column */
  gap: clamp(1.2rem, 2.4vw, 1.75rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  align-items: stretch; /* equal-height cards — matches the paired-bio symmetry */
}
.founder__text { align-self: start; /* bio hugs top, doesn't stretch into blank space */ }
.founder {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.2rem;
  align-items: start;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-sticker);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.founder__photo {
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.founder__name {
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.founder__role {
  font-family: var(--script);
  font-size: 1.15rem;
  color: var(--matcha-deep);
  margin-bottom: 0.5rem;
}
.founder__bio { font-size: 0.94rem; line-height: 1.5; }
.founder__bio + .founder__bio { margin-top: 0.7rem; }
.founders__together {
  grid-column: 1 / -1;
  font-family: var(--body); /* match the bio text — script read inconsistent next to it */
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--pink);
  text-align: center;
  max-width: 60ch;
  margin: 0.6rem auto 0;
}

/* ---------- client love letters ---------- */

.loveletters__title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
}
.loveletters__title em {
  font-family: var(--body);
  font-style: normal;
  text-transform: none;
  color: var(--pink-hot);
}
/* proper boxes, like a real testimonial grid — closed by default, each
   one a self-contained card you open to read, not an always-open wall.
   Horizontal scrolling row (not a wrapping grid) on every viewport, with
   prev/next buttons either side for mouse/keyboard users who won't swipe. */
.loveletters__wrap { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.8rem; }
.loveletters {
  flex: 1;
  display: flex;
  /* flex-start so opening one <details> card doesn't stretch every
     sibling's background to match the opened card's expanded height —
     the default (stretch) makes it look like every card grew */
  align-items: flex-start;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  overflow-x: auto;
  /* both snap and smooth-behavior are off by default so the JS auto-drift
     can accumulate sub-pixel scrollLeft writes each frame; the prev/next
     buttons pass behavior:"smooth" per-call, and snap is re-enabled on
     the row while the user is actively touching so swipes still align
     to card edges (never on hover — that snap-on-enter is the "glitch"
     people see when their cursor hits the card) */
  scrollbar-width: none;
  padding: 0.3rem 0.2rem 0.6rem;
}
.loveletters.is-snap { scroll-snap-type: x mandatory; }
.loveletters::-webkit-scrollbar { display: none; }
.loveletters__nav {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--border-sticker);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(82, 80, 73, 0.9);
  transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.loveletters__nav:hover { translate: 0 -2px; box-shadow: 4px 5px 0 rgba(82, 80, 73, 0.9); }
.loveletters__nav:active { translate: 0 0; box-shadow: 2px 2px 0 rgba(82, 80, 73, 0.9); }
.letter {
  position: relative;
  flex: 0 0 clamp(270px, 32vw, 360px);
  scroll-snap-align: start;
  background: var(--pink);
  border: var(--border-sticker);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(82, 80, 73, 0.9);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.letter--green { background: var(--pistachio); }
.letter--paper { background: var(--paper); }
.letter:hover { translate: 0 -4px; }
.letter[open] { box-shadow: 8px 9px 0 rgba(82, 80, 73, 0.9); }
.letter__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 2rem 1.5rem 1.6rem;
  cursor: pointer;
  list-style: none;
}
.letter__summary::-webkit-details-marker { display: none; }
.letter__badge {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: var(--border-sticker);
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.letter--paper .letter__badge { background: var(--pink); }
.letter__badge img { width: 100%; height: 100%; object-fit: cover; }
.letter__name {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.letter__role {
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.7;
}
.letter__toggle {
  font-family: var(--script);
  font-size: 1.05rem;
  color: var(--matcha-deep);
  margin-top: 0.7rem;
}
.letter[open] .letter__toggle { display: none; }
.letter__quote {
  padding: 0 1.5rem 1.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}
.letter__quote p + p { margin-top: 0.8rem; }

/* ---------- club ---------- */

.section__inner--club {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.headline--club { max-width: none; }
.club__the {
  font-family: var(--script);
  text-transform: none;
  font-size: 0.55em;
  display: block;
  color: var(--pink-hot);
}
.club__copy { margin: 0.9rem 0; font-size: 1.02rem; max-width: 46ch; }
.club__copy:last-of-type { margin-bottom: 1.6rem; }
.club__welcome {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 1.2rem;
}
.club__copy--punch { font-family: var(--script); font-weight: 700; font-size: 1.3rem; }
.club__subhead {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 1.6rem;
}
.club__collage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.club__collage .polaroid { rotate: var(--r); position: relative; cursor: grab; will-change: transform; touch-action: none; }
.club__collage .polaroid:active { cursor: grabbing; }

/* ---------- contact / chat ---------- */

.chat {
  position: relative;
  margin-top: 2.2rem;
  background: var(--paper);
  border: var(--border-sticker);
  border-radius: 26px;
  box-shadow: 8px 8px 0 rgba(82, 80, 73, 0.9);
  padding: 1.4rem clamp(1.1rem, 3vw, 2rem) 1.8rem;
  rotate: -0.5deg;
}
.chat > .tape { top: -12px; }

/* ---------- chat nuggets + mascot ---------- */
.nuggets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.nugget {
  position: absolute;
  left: var(--nx); top: var(--ny);
  font-size: 1rem;
  line-height: 1;
  animation: nuggetBob 3.2s ease-in-out infinite;
  animation-delay: var(--nd, 0s);
}
.nugget--pink { color: var(--pink-hot); }
.nugget--green { color: var(--matcha-deep); }
.nugget--ink { color: var(--ink); }
.nugget--bow { width: 30px; height: auto; }
.nugget--bow path, .nugget--bow circle { fill: var(--pink); stroke: var(--ink); stroke-width: 3; }
@keyframes nuggetBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-9px) rotate(8deg); }
}

.mascot {
  position: absolute;
  top: -46px; right: 22px;
  width: 74px;
  z-index: 4;
  animation: mascotBob 3.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.mascot svg { filter: drop-shadow(3px 4px 0 rgba(82, 80, 73, 0.55)); }
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
/* mascot blinks now and then */
.mascot__eye { animation: mascotBlink 5s infinite; transform-origin: center; }
@keyframes mascotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
.chat__header {
  display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 2px dashed rgba(82, 80, 73, 0.25);
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
}
.chat__avatar {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--pink-hot); color: var(--paper);
  border: var(--border-sticker);
  border-radius: 50%;
  font-size: 1.3rem;
  animation: avatarSway 4s ease-in-out infinite;
}
@keyframes avatarSway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
/* the mascot reacts when you start typing */
.chat__avatar.react { animation: avatarBounce 0.6s ease; }
@keyframes avatarBounce {
  0%, 100% { scale: 1; rotate: 0deg; }
  30% { scale: 1.45; rotate: -16deg; }
  60% { scale: 0.86; rotate: 12deg; }
  80% { scale: 1.1; rotate: -4deg; }
}
.chat__avatar::after {
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #3fae5c;
  border: 2px solid var(--paper);
  animation: onlinepulse 2.4s ease-out infinite;
}
@keyframes onlinepulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 174, 92, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63, 174, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 174, 92, 0); }
}
.contact__arrow {
  position: absolute;
  top: 46px; right: -64px;
  width: 74px;
  rotate: 12deg;
}
.contact__arrow path { stroke: var(--ink); }
.section__inner--narrow { position: relative; }
.chat__status { display: block; font-size: 0.82rem; opacity: 0.65; }
.chat__hicons { display: flex; gap: 0.8rem; margin-left: auto; }
.chat__hicons svg { width: 22px; height: 22px; stroke: var(--ink); opacity: 0.75; }
.chat__day {
  text-align: center;
  font-family: var(--script);
  font-size: 1.05rem;
  opacity: 0.55;
  margin-bottom: 0.9rem;
}
.chat__bubble {
  max-width: 30ch;
  padding: 0.7em 1em;
  border: var(--border-sticker);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.chat__bubble--in {
  position: relative;
  background: var(--pistachio);
  border-radius: 18px 18px 18px 4px;
}
.chat__bubble--out {
  background: var(--pink);
  border-radius: 18px 18px 4px 18px;
  margin-left: auto;
}
/* little messenger tail on incoming (green) bubbles — ink outline + fill */
.chat__bubble--in::before,
.chat__label::before {
  content: "";
  position: absolute;
  left: -7px; bottom: -2px;
  border-width: 0 0 13px 11px;
  border-style: solid;
  border-color: transparent transparent var(--ink) transparent;
}
.chat__bubble--in::after,
.chat__label::after {
  content: "";
  position: absolute;
  left: -4px; bottom: 0;
  border-width: 0 0 9px 8px;
  border-style: solid;
  border-color: transparent transparent var(--pistachio) transparent;
}
/* conversation rhythm: question and answer sit tight (0.45rem),
   each new exchange gets air (margin-top on the question) */
.chat__form { display: grid; gap: 0.45rem; margin-top: 1rem; }
.chat__typing { display: inline-flex; gap: 5px; align-items: center; padding: 0.85em 1em; }
.chat__typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(82, 80, 73, 0.55);
  animation: typing 1s infinite ease-in-out;
}
.chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.hp { position: absolute; left: -9999px; }
/* their questions: small green bubbles on the left */
.chat__label {
  position: relative;
  justify-self: start;
  max-width: 30ch;
  margin-top: 1.15rem;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--pistachio);
  border: var(--border-sticker);
  border-radius: 16px 16px 16px 4px;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: translate 0.2s ease, rotate 0.2s ease, box-shadow 0.2s ease;
}
/* the question you're answering leans in */
.chat__label.is-active {
  translate: 0 -3px;
  rotate: -1.5deg;
  box-shadow: 3px 4px 0 rgba(82, 80, 73, 0.35);
}
/* "seen" heart pops onto an answered question */
.chat__seen {
  position: absolute;
  right: -10px; bottom: -10px;
  font-size: 0.8rem;
  line-height: 1;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 4px;
  animation: seenpop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes seenpop { from { transform: scale(0); } }
.chip-pop {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  font-size: 1.3rem;
}

/* sparkle that trails the caret while typing */
.type-spark {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  font-size: 0.85rem;
  animation: typeSparkFloat 0.6s ease-out forwards;
}
@keyframes typeSparkFloat {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.15) rotate(30deg); }
}
/* your answers: compact outgoing bubbles on the right */
.chat__input {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.75em 1.1em;
  border: var(--border-sticker);
  border-radius: 18px 18px 4px 18px;
  background: #fef2f5;
  width: 68%;
  justify-self: end;
  transition: background 0.15s ease, width 0.2s ease;
}
.chat__input--area { width: 84%; }
.chat__input:focus { outline: 3px solid var(--pink-hot); outline-offset: 1px; background: #fff2f8; }
.chat__input::placeholder { color: rgba(82, 80, 73, 0.8); }
.chat__input--area { resize: vertical; min-height: 90px; }
.chat__chips { border: none; display: grid; gap: 0.55rem; margin-top: 1.15rem; }
.chat__chips .chat__label { margin-top: 0; }
.chat__chips legend {
  margin-bottom: 0.1rem;
  float: left;
  width: max-content; /* legends ignore padding when sizing — prevents the "?" clipping */
  max-width: 100%;
}
.chat__chiprow {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: flex-end;
  clear: both;
}
.chat__chips label { cursor: pointer; }
.chat__chips input { position: absolute; opacity: 0; }
.chat__chips span {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.35em 1em;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--paper);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.chat__chips label:hover span { background: var(--pink); }
.chat__chips input:checked + span { background: var(--ink); color: var(--paper); transform: scale(1.05); }
.chat__chips input:focus-visible + span { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
.chat__send { justify-self: end; margin-top: 1.1rem; }
.chat__send:hover { animation: sendWiggle 0.5s ease; }
@keyframes sendWiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -4deg; }
  75% { rotate: 4deg; }
}
.chat__error { font-size: 0.92rem; color: #b3123d; font-weight: 500; }
.chat__error a { color: inherit; }
.chat__success { margin-top: 1rem; }

/* ---------- footer ---------- */

.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem;
  overflow: hidden;
}
.footer__sparks { position: absolute; inset: 0; pointer-events: none; }
.footer__spark {
  position: absolute;
  left: var(--fx); top: var(--fy);
  font-size: var(--fs);
  color: var(--pink);
  animation: sparkfloat 4s ease-in-out infinite alternate;
}
.footer__spark--green { color: var(--pistachio); animation-delay: 1.3s; }
@keyframes sparkfloat {
  from { transform: translateY(0) rotate(0deg); opacity: 0.55; }
  to { transform: translateY(-10px) rotate(25deg); opacity: 1; }
}
.footer__top {
  position: absolute;
  top: 1.3rem; right: var(--gutter);
  width: clamp(64px, 8vw, 96px);
  transition: scale 0.2s ease;
}
.footer__top:hover { scale: 1.1; }
/* ring text spins, arrow stays upright */
.footer__top-text {
  animation: spin 16s linear infinite;
  transform-box: view-box;
  transform-origin: 60px 60px;
}
.footer__top-bg { fill: var(--pink-hot); stroke: var(--paper); stroke-width: 2.5; }
.footer__top-text { font-family: var(--body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; fill: var(--paper); text-transform: uppercase; }
.footer__top-arrow { font-size: 30px; fill: var(--paper); }
.footer__cta {
  position: relative;
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(2.2rem, 5vw, 3.8rem);
}
.footer__script {
  font-family: var(--script);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--pink);
}
.footer__pills { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.footer__big {
  position: relative;
  line-height: 1;
  text-align: center;
  user-select: none;
}
/* keeps "Mkt" and "CHHA" each intact as one unit — if the wordmark ever
   needs to wrap (e.g. sized up big on mobile) it breaks cleanly between
   the two words, never mid-letter */
.footer__big-group { display: inline-block; white-space: nowrap; }
/* cropped from the same render as the nav logo and hero wordmark — see
   .ltr in the hero rules for how the crops/kerning were built. height
   clamp is the old font-size clamp scaled by the same 70/90 crop ratio. */
.footer__big img {
  display: inline-block;
  height: clamp(3.11rem, 12.44vw, 10.11rem);
  width: auto;
  vertical-align: bottom;
  transition: transform 0.25s ease;
}
/* hover-only lift, gated so iOS Safari can't latch it as a stuck tap-state
   on individual letters — that stuck rotate+lift on adjacent bold glyphs
   at this font size is what read as a garbled wordmark on phones */
@media (hover: hover) and (pointer: fine) {
  .footer__big img:hover { transform: translateY(-8px) rotate(-2deg); }
  .footer__big img:nth-child(2n):hover { transform: translateY(-8px) rotate(2deg); }
}
.footer__address { text-align: center; margin-top: 1rem; }
.footer__address a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.88rem;
  color: var(--paper);
  opacity: 0.62;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer__address a:hover { opacity: 1; color: var(--pink); }
.footer__address svg { width: 13px; height: 13px; flex-shrink: 0; }
.footer__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.4rem;
  border-top: 1.5px solid rgba(248, 239, 218, 0.25);
  padding-top: 1.4rem;
  background: var(--ink);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__links a { text-decoration: none; font-weight: 500; }
.footer__links a:hover { color: var(--pink); }
.footer__legal { font-size: 0.88rem; opacity: 0.7; }
.footer__credit-group { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: middle; }
.footer__credit-arrow { opacity: 0.55; }
.footer__credit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.85;
  background: rgba(248, 239, 218, 0.08);
  border: 1px solid rgba(248, 239, 218, 0.22);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.footer__credit svg { width: 15px; height: 15px; stroke: currentColor; }
.footer__credit:hover, .footer__credit:focus-visible {
  opacity: 1;
  color: var(--pink);
  background: rgba(248, 239, 218, 0.14);
  border-color: var(--pink);
  transform: translateY(-2px) scale(1.08);
}

/* ---------- confetti + cursor ---------- */

#confetti {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 90;
}
.cursor-dot {
  position: fixed;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pink);
  border: 1.5px solid var(--ink);
  pointer-events: none;
  z-index: 80;
  translate: -50% -50%;
  display: none;
  transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
}
.cursor-dot.is-hover { width: 24px; height: 24px; opacity: 0.55; }
@media (pointer: fine) {
  .cursor-dot { display: block; }
}
.spark-trail {
  position: fixed;
  pointer-events: none;
  z-index: 79;
  font-size: 0.8rem;
  color: var(--pink);
  -webkit-text-stroke: 0.6px var(--ink);
  animation: sparkfade 0.7s ease-out forwards;
}
@keyframes sparkfade {
  to { opacity: 0; transform: translateY(-14px) scale(0.4) rotate(40deg); }
}

/* ---------- promo popup (Tuff Muff x Mktchha poster) ---------- */

.promo {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: min(270px, calc(100vw - 2rem), calc((100vh - 2.5rem) * 0.75));
  width: min(270px, calc(100vw - 2rem), calc((100svh - 2.5rem) * 0.75));
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(82, 80, 73, 0.35);
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.promo.is-open { opacity: 1; transform: none; }
.promo__link { display: block; }
.promo__link:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: -6px; }
.promo__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  transition: transform 0.3s ease;
}
.promo__link:hover .promo__img { transform: scale(1.03); }
.promo__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-sticker);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.promo__close:hover { background: var(--pink); transform: scale(1.08); }
.promo__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: var(--ink);
  transform-origin: left;
}
.promo.is-open .promo__timer { animation: promoTimer 5s linear forwards; }
.promo.is-paused .promo__timer { animation-play-state: paused; }
@keyframes promoTimer { to { transform: scaleX(0); } }
@media (max-width: 520px) {
  .promo {
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    width: min(215px, 60vw, calc((100svh - 2.5rem) * 0.75));
  }
  .promo__close { width: 32px; height: 32px; top: 0.45rem; right: 0.45rem; }
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .section__inner--club { grid-template-columns: 1fr; }
  .section__inner--about { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; }
  /* stack: a photo column beside text squeezes the bio to ~20 chars a line */
  .founder { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem 1.1rem; }
  .founder__photo { width: 128px; aspect-ratio: 1; }
  .club__collage { margin-top: 1rem; }
  .about__crew { margin-top: 1rem; }
  /* two 190px-min photos side by side need ~400px — wider than most phones.
     that forced the whole single-column grid track (headline, body copy)
     wide enough to overflow the viewport. shrink the floor so they fit. */
  .about__crew .polaroid { width: clamp(120px, 40vw, 160px); }
  .contact__arrow { display: none; }
}

@media (max-width: 720px) {
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__social--desktop { display: none; }
  .nav__social--mobile { display: flex; justify-content: center; padding: 0.7rem 0 0.3rem; }
  /* #navLinks (id) beats the ".nav > *:not(.nav__progress) { position: relative }"
     rule above, which otherwise wins on specificity and traps the dropdown in flow */
  #navLinks.nav__links {
    position: absolute;
    top: calc(100% + 25px);
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border: var(--border-sticker);
    border-radius: var(--radius);
    padding: 0.5rem 0;
    min-width: 200px;
    box-shadow: 4px 4px 0 rgba(82, 80, 73, 0.9);
    rotate: -1.5deg;
  }
  #navLinks.nav__links.is-open {
    display: flex;
    animation: navDrop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .nav__links a {
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
  }
  .nav__links a::after { display: none; }
  .nav__links-cta {
    display: block;
    margin-top: 0.3rem;
    padding: 0.7rem 1.2rem !important;
    background: var(--pink-hot);
    color: var(--paper);
    border-top: 2px dashed rgba(82, 80, 73, 0.35);
    text-align: center;
    font-size: 0.95rem;
  }
  @keyframes navDrop {
    from { opacity: 0; translate: 0 -12px; rotate: 3deg; }
    to { opacity: 1; translate: 0 0; rotate: -1.5deg; }
  }
  .hero { padding-top: 6rem; min-height: 92svh; }
  /* on small screens: stickers form a frame — polaroids clearly below the
     fixed nav, a cluster filling the space under the CTAs. positions come
     from inline --x/--y custom props, so override left/top directly */
  /* sized off svh, not a flat px value — mobile Safari's address bar eats
     real viewport height, and the nav (fixed) sits a constant distance from
     the eyebrow below it, so the gap these two cards sit in shrinks with
     the viewport. Scaling them down with it keeps both clear of the logo
     without hiding them. Top is a flat px offset, not svh-scaled, because
     it's measured off the fixed nav, whose position doesn't move with
     viewport height. */
  .stickers .polaroid .polaroid__caption { display: none; }
  .ltr { height: clamp(3.4rem, 20vw, 9rem); }
  /* big enough now that "Mkt" and "CHHA" wrap onto their own line each
     (see .footer__big-group) instead of staying floored at a size that
     reads as an afterthought against the rest of the footer */
  .footer__big img { height: clamp(4.2rem, 24vw, 10rem); }
  .footer__big-group:last-child { margin-top: 0.15em; }
  .stickers .polaroid--pink {
    left: 62%; top: 68px;
    width: clamp(60px, 10.1svh, 108px);
  }
  .stickers .polaroid--green {
    left: 4%; top: 66px;
    width: clamp(54px, 10.2svh, 80px);
  }
  .stickers .bow { width: 58px; left: 6%; top: 69%; }
  .stickers .note { max-width: 150px; font-size: 0.92rem; padding: 0.55rem 0.8rem; left: 7%; top: 82%; }
  /* iced-latte + matcha: parked in the open gap under the CTAs, clear of note/bow */
  .stickers .latte { left: 62%; top: 78%; width: 52px; }
  .stickers .matcha { left: 78%; top: 78%; width: 56px; }
  .stickers .spark--1 { left: 8%; top: 36%; }
  .stickers .spark--2 { left: 85%; top: 86%; }
  .sticker { opacity: 0.92; }
  .chat__bubble { max-width: 90%; }
  .chat__input { width: 86%; }
  .chat__input--area { width: 94%; }
  .chat__send { justify-self: stretch; text-align: center; }
  .footer__cta { margin-top: 3.6rem; } /* clear the back-to-top badge */
  /* footer bottom-half on mobile: everything below the big wordmark
     stacks and centers, so the wrapped rows don't collapse to the left
     edge and read as a ragged bulleted list. */
  .footer__row { flex-direction: column; gap: 1.4rem; text-align: center; }
  .footer__links { justify-content: center; gap: 0.5rem 1.4rem; }
  .footer__legal { line-height: 1.7; }
  .footer__credit-sep { display: none; }
  .footer__credit-group { display: flex; justify-content: center; margin-top: 0.55rem; }

  /* founder card stacks to one column on phones — center the photo, name
     and role instead of them defaulting to the start edge of the row */
  .founder__photo { justify-self: center; }
  .founder__name, .founder__role { text-align: center; }

  /* client wall cards read small with a lot of wasted side margin on
     phones — size them up so each one fills most of the screen width */
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 380px;
    margin-inline: auto;
    gap: 0.9rem;
  }
  .wall__card {
    rotate: calc(var(--tilt) * 0.35);
    box-shadow: 4px 4px 0 rgba(82, 80, 73, 0.9);
    padding: 0.75rem 0.65rem;
  }
  .wall__card--logo { padding: 0.55rem 0.55rem 0.7rem; align-content: start; gap: 0.45rem; }
  .wall__card--logo .wall__name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3em;
    text-align: center;
    font-size: 0.9rem;
  }
  .wall__card--logo .wall__kind { margin-top: -0.35rem; font-size: 0.72rem; }

  /* love letters: buttons shrink to leave more room for the card itself */
  .loveletters__wrap { gap: 0.35rem; }
  .loveletters__nav { width: 34px; height: 34px; font-size: 1.25rem; }
  .letter { flex-basis: min(64vw, 260px); }

  /* nav: tighter on phones */
  .nav { padding: 0.4rem 0.5rem 0.4rem 0.9rem; gap: 0.5rem; }
  .nav__logo { font-size: 1.15rem; }
  .nav__cta { padding: 0.5em 1em; font-size: 0.88rem; }

  /* chat: smaller mascot, calmer nuggets on phones */
  .mascot { width: 56px; top: -34px; right: 14px; }
  .nuggets .nugget:nth-child(n+5) { display: none; }
  .nugget--bow { width: 22px; }

  /* form fields: comfy touch targets */
  .chat__input { min-height: 48px; }
  .chat__chips span { padding: 0.45em 1.1em; }

  /* footer sparks: --fx/--fy are percentages of the whole (tall, stacked)
     footer, so the desktop positions land on top of the CTA buttons, the
     big wordmark, or the link row here. Re-parked into the actual gaps
     between those blocks at mobile stack heights. !important because the
     desktop values are inline styles on the element — the only way an
     external stylesheet rule can outrank those is to out-cascade them. */
  .footer__sparks .footer__spark:nth-child(1)  { --fx: 15% !important; --fy: 1%   !important; }
  .footer__sparks .footer__spark:nth-child(2)  { --fx: 45% !important; --fy: 1%   !important; }
  .footer__sparks .footer__spark:nth-child(3)  { --fx: 62% !important; --fy: 1%   !important; }
  .footer__sparks .footer__spark:nth-child(4)  { --fx: 8%  !important; --fy: 51%  !important; }
  .footer__sparks .footer__spark:nth-child(5)  { --fx: 30% !important; --fy: 51%  !important; }
  .footer__sparks .footer__spark:nth-child(6)  { --fx: 55% !important; --fy: 51%  !important; }
  .footer__sparks .footer__spark:nth-child(7)  { --fx: 80% !important; --fy: 51%  !important; }
  .footer__sparks .footer__spark:nth-child(8)  { --fx: 25% !important; --fy: 69.5%!important; }
  .footer__sparks .footer__spark:nth-child(9)  { --fx: 70% !important; --fy: 69.5%!important; }
  .footer__sparks .footer__spark:nth-child(10) { --fx: 15% !important; --fy: 97%  !important; }
  .footer__sparks .footer__spark:nth-child(11) { --fx: 45% !important; --fy: 97%  !important; }
  .footer__sparks .footer__spark:nth-child(12) { --fx: 75% !important; --fy: 97%  !important; }
}

/* very tight phones */
@media (max-width: 360px) {
  .nav__cta { padding: 0.4em 0.8em; font-size: 0.8rem; }
  .nav__logo { font-size: 1rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .spark-trail { display: none; }
  .chat__typing { display: none; }
  .headline em { background-size: 100% 0.2em; }
  .footer__spark { animation: none; }
  .footer__top-text { animation: none; }
  .chat__avatar::after { animation: none; }
  .chat__avatar { animation: none; }
  .chat__send:hover { animation: none; }
  .chat__seen { animation: none; }
  .nugget { animation: none; }
  .mascot { animation: none; }
  .mascot__eye { animation: none; }
  .type-spark { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}