/* ============================================================
   Pep Club — a Tiny Byte Studio prototype
   Dopamine colour, demonstrated rather than asserted.

   THE SPINE: one token set, three values.
   #site carries the safe 2023–25 palette. #site.dopamine and
   #site.october swap ONLY custom properties. Border WIDTH is
   identical in all three sets, so every version lays out to the same
   pixel — flipping the switch must not move anything. Radius and tilt
   are paint-only, so they are free to change. app.js asserts this on
   every flip, and across all three sets on load.

   Ported from the trend-03 film set
   (~/Documents/tinybyte/prototypes/trends-003-dopamine), which was a
   fixed 540x960 stage. The palettes are carried over unchanged — they
   were contrast-tested for the film and the numbers are the point.
   ============================================================ */

/* ---------- token sets ---------------------------------------- */

#site {
  /* ── the safe default, 2023–2025 ── */
  --bg:      #F4F2ED;
  --ink2:    #3A3832;
  --head:    #23221E;
  --muted:   #7C7970;
  --pop1:    #8C9484;   /* sage  */
  --pop2:    #E8E4DA;   /* bone  */
  --pop3:    #A9A296;   /* taupe */
  --on1:     #FFFFFF;
  --on2:     #3A3832;
  --on3:     #FFFFFF;
  --navbg:   #E8E4DA;
  --navink:  #3A3832;
  --chip:    #FFFFFF;
  --bc:      #DDD8CE;
  --bw:      2px;       /* border WIDTH — identical in both sets */
  --rad:     8px;
  --radbig:  10px;
  --tiltA:   0deg;
  --tiltB:   0deg;
  --tiltC:   0deg;
  --tiltD:   0deg;
  --stripbg: #E8E4DA;
  --stripink:#3A3832;
  --stripacc:#8C9484;
  --ctabg:   #8C9484;
  --ctaink:  #FFFFFF;
  --btnbg:   #23221E;
  --btnink:  #FFFFFF;
  --quoteink:#23221E;

  /* The two coloured words in the hero. They default to the pops, so
     safe and dopamine behave exactly as they always have — the
     indirection exists because October's candy orange is a fine
     BACKGROUND and a terrible piece of text (2.34:1 on the cream).
     Carrying its own token lets the hero stay legible without making
     the accent tile go quiet. */
  --heroB:   var(--pop1);
  --heroY:   var(--pop3);
}

/* ── the dopamine token set ──────────────────────────────────────
   Note --on3: navy on hot pink, not cream. Cream on this pink measures
   3.34:1 and fails body text; navy measures 5.07:1 and passes. That one
   substitution is the whole craft argument. */
#site.dopamine {
  --bg:      #FFF8E7;
  --ink2:    #2A2A55;
  --head:    #12123A;
  --muted:   #5A5A88;
  --pop1:    #2B4CFF;   /* electric blue */
  --pop2:    #F5FF3D;   /* acid yellow   */
  --pop3:    #FF2E7E;   /* hot pink      */
  --on1:     #FFF8E7;
  --on2:     #12123A;
  --on3:     #12123A;
  --navbg:   #2B4CFF;
  --navink:  #FFF8E7;
  --chip:    #FFF8E7;
  --bc:      #12123A;
  --bw:      2px;
  --rad:     14px;
  --radbig:  20px;
  --tiltA:  -1.8deg;
  --tiltB:   1.4deg;
  --tiltC:  -0.9deg;
  --tiltD:   1.6deg;
  --stripbg: #12123A;
  --stripink:#F5FF3D;
  --stripacc:#FF2E7E;
  --ctabg:   #FF2E7E;
  --ctaink:  #12123A;
  --btnbg:   #F5FF3D;
  --btnink:  #12123A;
  --quoteink:#12123A;
}

/* ── the October token set ───────────────────────────────────────
   Halloween done as dopamine colour: violet, slime green and candy
   orange on a warm cream, rather than the usual black / pumpkin /
   blood red. Ported from the October campaign film
   (~/Documents/tinybyte/prototypes/oct-001-halloween-dopamine).

   The point of the season being a PALETTE and not a redesign is that
   this set obeys the same two rules as the other two: --bw is still
   2px and no font changes, so the layout assertion holds across all
   three. Deleting this block and the october button in November
   returns the page to exactly what it was.

   Deliberately NOT here: cobwebs, drips, or a black background. The
   campaign's own rule is "keep the season, lose the black", and a
   prototype that argued that while wearing a cobweb would be worth
   nothing. */
#site.october {
  --bg:      #FFF1D6;
  --ink2:    #2A1140;
  --head:    #1B0A2E;
  --muted:   #6B4A8A;
  --pop1:    #7B2FF7;   /* electric violet */
  --pop2:    #B9FF3D;   /* slime green     */
  --pop3:    #FF7A18;   /* candy orange    */
  --on1:     #FFF1D6;
  --on2:     #1B0A2E;
  --on3:     #1B0A2E;
  --navbg:   #7B2FF7;
  --navink:  #FFF1D6;
  --chip:    #FFF1D6;
  --bc:      #1B0A2E;
  --bw:      2px;
  --rad:     14px;
  --radbig:  20px;
  --tiltA:  -1.8deg;
  --tiltB:   1.4deg;
  --tiltC:  -0.9deg;
  --tiltD:   1.6deg;
  --stripbg: #1B0A2E;
  --stripink:#B9FF3D;
  --stripacc:#FF7A18;
  --ctabg:   #B9FF3D;
  --ctaink:  #1B0A2E;
  --btnbg:   #7B2FF7;
  --btnink:  #FFF1D6;
  --quoteink:#1B0A2E;

  /* Candy orange measures 2.34:1 as text on this cream — fine on a
     can, useless in a headline. Burnt orange keeps the season and
     measures 5.34:1, so the hero passes AA for normal text, never
     mind display. */
  --heroB:   #7B2FF7;   /* 5.24:1 on the cream */
  --heroY:   #B33A06;   /* 5.34:1 on the cream */
}

/* ---------- base ---------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #0d0d10;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

#site {
  background: var(--bg);
  color: var(--ink2);
  /* Every colour change rides this, so the flip reads as one motion
     rather than thirty independent ones. */
  transition: background-color .45s ease, color .45s ease;
}

#site *,
#site *::before,
#site *::after {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, border-radius .45s ease,
              transform .45s ease, fill .45s ease, stroke .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  #site, #site *, #site *::before, #site *::after { transition: none !important; }
}

.pc-wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

#site h1, #site h2, #site h3 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  color: var(--head);
  margin: 0;
  letter-spacing: -.03em;
  line-height: 1;
}

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

.pc-nav {
  background: var(--navbg);
  color: var(--navink);
  border-bottom: var(--bw) solid var(--bc);
}
.pc-nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: clamp(.85rem, 2vw, 1.15rem);
}
.pc-nav b {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.25rem); letter-spacing: .12em;
}
.pc-nav .pill {
  border: var(--bw) solid currentColor; border-radius: 100px;
  padding: .4rem 1rem; font-size: .82rem; font-weight: 600;
  white-space: nowrap;
}

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

.pc-hero { padding-block: clamp(3rem, 8vw, 6rem); position: relative; }
.pc-hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.pc-squig { width: clamp(90px, 12vw, 130px); height: auto; display: block; margin-bottom: 1.25rem; }
.pc-squig path { stroke: var(--pop3); }

.pc-hero h1 {
  font-weight: 700;
  font-size: clamp(3.2rem, 12vw, 7.5rem);
  line-height: .88;
}
.pc-hero h1 .b { color: var(--heroB); }
.pc-hero h1 .y { color: var(--heroY); }

.pc-hero p {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.5; max-width: 34ch; color: var(--ink2);
}

.pc-hero__cta {
  display: inline-block; margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--btnbg); color: var(--btnink);
  border-radius: var(--rad); padding: .9rem 1.6rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  text-decoration: none; transform: rotate(var(--tiltA));
}

/* cans */
.pc-cans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.6vw, 1rem); }
.pc-can {
  aspect-ratio: 1 / 2.25;
  border: var(--bw) solid var(--bc); border-radius: var(--radbig);
  display: flex; align-items: flex-end; justify-content: center;
  padding: .85rem .5rem; text-align: center;
  font-size: clamp(.62rem, 1.1vw, .78rem); font-weight: 700;
  letter-spacing: .04em; line-height: 1.2;
}
.pc-can:nth-child(1) { background: var(--pop3); color: var(--on3); transform: rotate(var(--tiltA)); }
.pc-can:nth-child(2) { background: var(--pop2); color: var(--on2); transform: rotate(var(--tiltB)); }
.pc-can:nth-child(3) { background: var(--pop1); color: var(--on1); transform: rotate(var(--tiltC)); }

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

.pc-strip {
  background: var(--stripbg); color: var(--stripink);
  border-block: var(--bw) solid var(--bc);
  overflow: hidden; padding-block: .85rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: .14em; font-size: clamp(.78rem, 1.5vw, .95rem);
  white-space: nowrap;
}
.pc-strip__track { display: inline-block; animation: pc-marquee 22s linear infinite; }
.pc-strip b { color: var(--stripacc); margin-inline: .85rem; }
@keyframes pc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pc-strip__track { animation: none; } }

/* ---------- blobs ----------------------------------------------- */

.pc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.pc-blob {
  border: var(--bw) solid var(--bc); border-radius: var(--radbig);
  background: var(--chip); padding: clamp(1.4rem, 3vw, 2rem);
}
.pc-blob:nth-child(1) { transform: rotate(var(--tiltA)); }
.pc-blob:nth-child(2) { transform: rotate(var(--tiltD)); }
.pc-blob:nth-child(3) { transform: rotate(var(--tiltC)); }
.pc-blob h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; margin-bottom: .7rem; line-height: 1.15; }
.pc-blob p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink2); }

/* ---------- facts ------------------------------------------------ */

.pc-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 2vw, 1.25rem); padding-bottom: clamp(3rem, 7vw, 5rem);
}
.pc-fact {
  border: var(--bw) solid var(--bc); border-radius: var(--radbig);
  padding: clamp(1.2rem, 3vw, 1.9rem); text-align: center;
}
.pc-fact:nth-child(1) { background: var(--pop1); color: var(--on1); transform: rotate(var(--tiltB)); }
.pc-fact:nth-child(2) { background: var(--pop2); color: var(--on2); transform: rotate(var(--tiltC)); }
.pc-fact:nth-child(3) { background: var(--pop3); color: var(--on3); transform: rotate(var(--tiltA)); }
.pc-fact b {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: inherit;
}
.pc-fact span { display: block; margin-top: .45rem; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- quote ------------------------------------------------- */

.pc-quote { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pc-quote p {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 4.2vw, 2.7rem); line-height: 1.15;
  letter-spacing: -.02em; color: var(--quoteink);
  margin: 0; max-width: 20ch;
}
.pc-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .92rem; color: var(--muted); }

/* ---------- flavours ---------------------------------------------- */

.pc-flav { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pc-flav h2 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; margin-bottom: 1.5rem; }
.pc-flav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: clamp(.85rem, 2vw, 1.1rem);
  border-bottom: var(--bw) solid var(--bc);
  font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 600;
}
.pc-flav__row em {
  font-style: normal; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--pop2); color: var(--on2);
  border-radius: 100px; padding: .3rem .8rem; white-space: nowrap;
}

/* ---------- cta + footer ------------------------------------------- */

.pc-cta {
  background: var(--ctabg); color: var(--ctaink);
  border: var(--bw) solid var(--bc); border-radius: var(--radbig);
  padding: clamp(2rem, 6vw, 4rem); text-align: center;
  transform: rotate(var(--tiltD)); margin-bottom: clamp(3rem, 7vw, 5rem);
}
.pc-cta h2 { color: inherit; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; }
.pc-cta a {
  display: inline-block; margin-top: 1.5rem;
  background: var(--btnbg); color: var(--btnink);
  border-radius: var(--rad); padding: .95rem 1.8rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  text-decoration: none;
}
.pc-foot {
  border-top: var(--bw) solid var(--bc);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  font-size: .88rem; color: var(--muted);
}

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

@media (max-width: 860px) {
  .pc-hero__grid { grid-template-columns: 1fr; }
  .pc-cans { max-width: 420px; }
  .pc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pc-facts { grid-template-columns: 1fr; }
  .pc-flav__row { font-size: 1rem; }
}