/* ============================================================
   8 TRACKS + 1 — Blend Crew deck styles
   Built on Blend design system tokens (colors_and_type.css).
   ============================================================ */

:root {
  /* Slide type scale @ 1920×1080 */
  --type-mega:     220px;
  --type-title:    104px;
  --type-h2:       72px;
  --type-subtitle: 60px;
  --type-h3:       44px;
  --type-body-lg:  32px;
  --type-body:     28px;
  --type-small:    22px;
  --type-meme:     34px;
  --type-eyebrow:  22px;
  --type-mono-sm:  20px;
  --pad-x:         96px;
  --pad-y:         88px;
  --gap-block:     40px;
}

html, body { margin: 0; padding: 0; background: #000; }
* { box-sizing: border-box; }

/* ---------- slide chrome ---------- */
.slide {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--blend-ink);
  background: var(--blend-cream);
}
.slide--dark { background: var(--blend-black); color: var(--blend-cream); }

.stripe {
  position: absolute; left: 0; right: 0; height: 14px;
  display: flex; z-index: 4;
}
.stripe.top    { top: 0; }
.stripe.bottom { bottom: 0; }
.stripe > span { flex: 1; }
.stripe > span:nth-child(1){ background:#2457E5; }
.stripe > span:nth-child(2){ background:#FDCD03; }
.stripe > span:nth-child(3){ background:#F7B6C2; }
.stripe > span:nth-child(4){ background:#13A454; }
.stripe > span:nth-child(5){ background:#FF7403; }

.foot {
  position: absolute; left: 64px; right: 64px; bottom: 30px;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--fg2);
  letter-spacing: 0.04em;
  font-weight: 500;
  z-index: 6;
}
/* On track slides, the footer also needs to clear the photo so it sits on cream */
.slide:has(.track) .foot { left: 920px; right: 64px; }
.slide:has(.track) .foot .crew { color: var(--fg2); }
.foot .crew { font-weight: 600; color: var(--fg2); }
.foot .grow { flex: 1; }
.foot .pg { font-feature-settings: "tnum" 1; }
.slide--dark .foot { color: rgba(255,248,232,0.55); }
.slide--dark .foot .crew { color: rgba(255,248,232,0.8); }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--blend-orange);
  letter-spacing: 0;
  transform: rotate(-2deg);
  display: inline-block;
}
.eyebrow--blue { color: var(--blend-blue); }
.eyebrow--green { color: var(--blend-green); }

.mono-tag {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg2);
  font-weight: 500;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--blend-ink);
  margin: 0;
}
.title    { font-size: var(--type-title); }
.h2       { font-family: var(--font-display); font-weight: 700; font-size: var(--type-h2); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.h3       { font-family: var(--font-display); font-weight: 700; font-size: var(--type-h3); line-height: 1.05; letter-spacing: -0.015em; margin: 0; }

.body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.45;
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0;
}
.body-lg { font-size: var(--type-body-lg); line-height: 1.4; }
.body-sm { font-size: var(--type-small); line-height: 1.5; color: var(--fg2); }

.meme {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--type-meme);
  color: var(--blend-orange);
  line-height: 1.2;
}
.meme--ink   { color: var(--blend-ink); }
.meme--blue  { color: var(--blend-blue); }
.meme--green { color: var(--blend-green); }
.meme--cream { color: var(--blend-cream); }

.underline {
  background-image: url("assets/vector-underline.svg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.32em;
  padding-bottom: 0.12em;
}

.label-block {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: 600;
  margin: 0 0 10px;
}

/* ---------- meme strip / punchline bar ---------- */
.punch {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x); bottom: 96px;
  border-top: 2px dashed var(--blend-ink);
  padding-top: 20px;
  display: flex; align-items: flex-start; gap: 22px;
  z-index: 5;
  min-height: 70px;
}
/* On track slides, photo is on the left — keep the punch bar inside the
   text column so its dashed border doesn't cut across the photo. */
.slide .track ~ .punch,
.track + .punch { /* fallback */ }
.slide:has(.track) .punch {
  left: 920px;
  right: 64px;
}
.punch .lol {
  flex-shrink: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 24px;
  color: var(--blend-cream);
  background: var(--blend-ink);
  padding: 6px 14px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
  white-space: nowrap;
  line-height: 1.1;
}
.punch .lol--orange { background: var(--blend-orange); color: var(--blend-cream); }
.punch .lol--blue   { background: var(--blend-blue); color: var(--blend-cream); }
.punch .lol--green  { background: var(--blend-green); color: var(--blend-cream); }
.punch .lol--yellow { background: var(--blend-yellow); color: var(--blend-ink); }

.punch .text {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--blend-ink);
  text-wrap: balance;
  flex: 1;
  min-width: 0;
}

.slide--dark .punch { border-top-color: rgba(255,248,232,0.4); }
.slide--dark .punch .text { color: var(--blend-cream); }

/* ---------- cards ---------- */
.card {
  background: var(--blend-white);
  border: 2px solid var(--blend-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: 28px 30px;
}
.card--cream { background: var(--blend-cream-2); }
.card--yellow { background: var(--blend-yellow); }
.card--orange { background: var(--blend-orange); color: var(--blend-cream); }
.card--blue   { background: var(--blend-blue);   color: var(--blend-cream); }
.card--green  { background: var(--blend-green);  color: var(--blend-cream); }
.card--pink   { background: var(--blend-pink);   color: var(--blend-ink); }

/* ---------- track slide layout ---------- */
.track {
  display: grid;
  grid-template-columns: 860px 1fr;
  height: 100%;
}
.track-photo {
  position: relative;
  background: #111;
  overflow: hidden;
}
.track-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.track-photo .photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55));
  z-index: 1;
}
.track-photo .photo-caption {
  position: absolute; left: 40px; right: 40px; bottom: 36px;
  color: var(--blend-cream);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.track-photo .track-num-stamp {
  position: absolute;
  top: 40px; left: 40px;
  font-family: var(--font-mono);
  color: var(--blend-cream);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: rgba(0,0,0,0.55);
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 2;
}
.track-photo .shape-stamp {
  position: absolute; right: -40px; bottom: -40px;
  width: 220px; height: 220px;
  z-index: 2;
  filter: drop-shadow(6px 6px 0 var(--blend-ink));
}

.track-body {
  position: relative;
  padding: 80px 64px 220px 60px;
  display: flex; flex-direction: column;
  gap: 22px;
}
.track-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 68px;
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--blend-ink);
}
.track-name em {
  font-style: italic;
  color: var(--blend-orange);
}
.track-num {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.2em;
  color: var(--fg2);
  text-transform: uppercase;
  font-weight: 600;
}

.track-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  align-items: start;
}
.track-row .tag {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 24px;
  color: var(--blend-cream);
  background: var(--blend-ink);
  padding: 4px 14px 6px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  transform: rotate(-2deg);
  justify-self: start;
  line-height: 1.15;
}
.track-row .tag--blue   { background: var(--blend-blue); }
.track-row .tag--orange { background: var(--blend-orange); }
.track-row .tag--green  { background: var(--blend-green); }
.track-row .copy {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.42;
  color: var(--blend-ink);
}
.track-row .copy b {
  font-weight: 700;
}

/* ---------- numbered stage cards ---------- */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.stage-card {
  border: 2px solid var(--blend-ink);
  border-radius: 22px;
  padding: 32px 32px 36px;
  background: var(--blend-white);
  box-shadow: var(--shadow-hard-lg);
  display: flex; flex-direction: column;
  gap: 18px;
  min-height: 360px;
}
.stage-card .num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--fg2);
}
.stage-card .head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--blend-ink);
}
.stage-card .body {
  font-size: 24px;
  line-height: 1.5;
  color: var(--fg1);
}
.stage-card.color-yellow { background: var(--blend-yellow); }
.stage-card.color-pink   { background: var(--blend-pink); }
.stage-card.color-cream  { background: var(--blend-cream-2); }
.stage-card.color-blue   { background: var(--blend-blue); color: var(--blend-cream); }
.stage-card.color-blue .head,
.stage-card.color-blue .body { color: var(--blend-cream); }
.stage-card.color-blue .num  { color: rgba(255,248,232,0.7); }
.stage-card.color-green  { background: var(--blend-green); color: var(--blend-cream); }
.stage-card.color-green .head,
.stage-card.color-green .body { color: var(--blend-cream); }
.stage-card.color-green .num  { color: rgba(255,248,232,0.7); }
.stage-card.color-orange { background: var(--blend-orange); color: var(--blend-cream); }
.stage-card.color-orange .head,
.stage-card.color-orange .body { color: var(--blend-cream); }
.stage-card.color-orange .num  { color: rgba(255,248,232,0.7); }

/* ---------- blended grid ---------- */
.bx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bx-card {
  border: 2px solid var(--blend-ink);
  border-radius: 20px;
  background: var(--blend-white);
  box-shadow: var(--shadow-hard);
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
}
.bx-card .mash {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.015em;
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  color: var(--blend-ink);
}
.bx-card .mash .x {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--blend-orange);
  font-weight: 600;
}
.bx-card .desc {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.45;
  color: var(--fg1);
}

/* ---------- decorative shapes ---------- */
.shape-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* ---------- the +1 stamp ---------- */
.plus-one {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px; height: 200px;
  background: var(--blend-orange);
  color: var(--blend-cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  letter-spacing: -0.04em;
  border: 3px solid var(--blend-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-hard-lg);
  transform: rotate(-8deg);
}

/* ---------- big numeric ---------- */
.bignum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 360px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--blend-ink);
  margin: 0;
}