/* Prime Bites' world: pink, cream and deep plum, Fredoka for display — a viral dessert
   brand meeting game day. Its marks: frosting drips, stickers, a player card, a turf
   playbook and a scoreboard.

   Contrast: plum on cream 12.4:1, on white 14.2:1; muted 6.0:1 on cream, 6.8:1 on white;
   cream on plum 12.4:1. Bright pink #D4548C is 3.4–3.7:1 on cream and plum — large
   type, marks and chart bars only. Small pink text: #A8326A on light grounds (5.5:1),
   #F2A7C6 on plum (7.5:1). Stickers: plum on light pink 7.5:1, white on deep pink 6.3:1. */

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

.case--pb {
  --w-ground: #F6F0D6;
  --w-dark: #3B2430;
  --w-ink: #3B2430;
  --w-muted: #6A5560;
  --w-on-dark: #F6F0D6;
  --w-muted-on-dark: #CDB9C2;
  --w-accent: #D4548C;
  --w-accent-text: #A8326A;
  --w-accent-on-dark: #F2A7C6;
  --w-pink-light: #F2A7C6;
  --w-line: rgb(59 36 48 / 0.18);
  --w-display: "Fredoka", "Trebuchet MS", sans-serif;
  --w-display-weight: 600;
}

.case--pb .cs-display {
  letter-spacing: -0.005em;
}

.p-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.p-head .cs-h2 { max-width: 24ch; }
.p-head .cs-lead { margin-inline: auto; }

/* ---------- Icons ---------- */

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg { width: 2.25rem; height: 2.25rem; }

.icon-bub--white { background: #fff; }

.icon-bub {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--w-pink-light);
  color: var(--w-ink);
}

/* ---------- Stickers ---------- */

.sticker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.95rem;
  border: 2px solid var(--w-ink);
  border-radius: 999px;
  background: var(--w-pink-light);
  color: var(--w-ink);
  font-family: var(--w-display);
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--w-ink);
  transform: rotate(var(--tilt, -3deg));
}

.sticker--deep {
  background: var(--w-accent-text);
  color: #fff;
}

.sticker--cream {
  background: var(--w-ground);
}

/* ---------- Frosting drip divider ---------- */

.drip {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  margin-bottom: -1px;
  color: var(--w-accent);
}

/* Where cream meets plum, the section above drips into the one below. */
.drip--into-dark {
  background: var(--w-dark);
  color: var(--w-ground);
}

.drip--from-dark {
  background: var(--w-ground);
  color: var(--w-dark);
}

/* ---------- Header ---------- */

.case--pb .cs-head {
  background: var(--w-ground);
  color: var(--w-ink);
}

.p-hero {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.p-hero__text {
  display: grid;
  justify-items: center;
  text-align: center;
}

.case--pb .cs-head__title {
  font-size: clamp(3.5rem, 1.5rem + 9vw, 8.5rem);
}

.case--pb .cs-head__title .accent {
  color: var(--w-accent);
}

.case--pb .cs-head__sub {
  margin-inline: auto;
}

.case--pb .cs-head__meta {
  justify-items: center;
}

.p-hero__art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.p-hero__art::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--w-pink-light);
}

.p-hero__art img {
  position: relative;
  width: 82%;
  height: auto;
  filter: drop-shadow(0 18px 24px rgb(59 36 48 / 0.25));
}

.p-hero__art .sticker {
  position: absolute;
}

.p-hero__art .sticker:nth-of-type(1) { top: 4%; left: -2%; --tilt: -7deg; }
.p-hero__art .sticker:nth-of-type(2) { bottom: 6%; right: -2%; --tilt: 5deg; }

@media (min-width: 64rem) {
  .p-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .p-hero__text { justify-items: start; text-align: left; }
  .case--pb .cs-head__sub { margin-inline: 0; }
  .case--pb .cs-head__meta { justify-items: start; }
}

/* ---------- Overview: centred, stats as chunky stickers ---------- */

.p-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
}

.p-stat {
  display: grid;
  justify-items: center;
  min-width: 10rem;
  padding: var(--space-5) var(--space-6);
  border: 2.5px solid var(--w-ink);
  border-radius: 26px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--w-ink);
  transform: rotate(var(--tilt, 0deg));
}

.p-stat:nth-child(1) { --tilt: -2.5deg; }
.p-stat:nth-child(2) { --tilt: 1.5deg; }
.p-stat:nth-child(3) { --tilt: -1deg; }
.p-stat:nth-child(4) { --tilt: 2.5deg; background: var(--w-pink-light); }

.p-stat dd {
  order: -1;
  margin: 0;
  font-family: var(--w-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
}

.p-stat dt {
  margin-top: var(--space-1);
  color: var(--w-muted);
}

.p-stat:nth-child(4) dt { color: var(--w-ink); }

/* ---------- Scope: the brief as a ticket ---------- */

.ticket {
  display: grid;
  max-width: 56rem;
  margin: var(--space-8) auto 0;
  border: 2.5px solid var(--w-on-dark);
  border-radius: 24px;
  overflow: hidden;
}

.ticket__stub {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--w-accent-text);
  color: #fff;
  font-family: var(--w-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.ticket__body {
  padding: var(--space-6);
}

.ticket__brief {
  font-size: var(--step-1);
}

.ticket__terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 2px dashed var(--w-line);
  text-align: center;
}

.ticket__terms dd {
  margin: 0;
  color: var(--w-accent-on-dark);
  font-family: var(--w-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
}

.ticket__terms dt {
  margin-top: var(--space-2);
  color: var(--w-muted-on-dark);
  font-size: var(--step--1);
}

.ticket__terms div {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 52rem) {
  .ticket { grid-template-columns: 9rem minmax(0, 1fr); }
  .ticket__stub { writing-mode: vertical-rl; transform: rotate(180deg); border-left: 2.5px dashed rgb(255 255 255 / 0.5); }
}

.p-facts {
  display: grid;
  gap: var(--space-5) var(--space-8);
  margin: var(--space-8) 0 0;
}

.p-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: start;
}

.p-facts .icon-bub {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
}

.p-facts dt {
  color: var(--w-accent-on-dark);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-facts dd { margin: 0; }

@media (min-width: 52rem) {
  .p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Method: three stages, literally narrowing ---------- */

.narrow {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.narrow__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-6);
  border: 2.5px solid var(--w-ink);
  border-radius: 28px;
  background: #fff;
}

/* Steps are list items 1, 3 and 5 — the arrows between them are 2 and 4. */
.narrow__step:nth-child(3) { background: #FBE6EF; }
.narrow__step:nth-child(5) { background: var(--w-pink-light); }

.narrow__n {
  color: var(--w-accent-text);
  font-weight: 700;
}

.narrow__title {
  margin-top: var(--space-1);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.narrow__step p {
  margin-top: var(--space-3);
}

.narrow__aside {
  color: var(--w-muted);
  font-style: italic;
}

.narrow__step:nth-child(5) .narrow__aside,
.narrow__step:nth-child(5) .narrow__n { color: var(--w-ink); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--w-dark);
  color: var(--w-on-dark);
  font-size: var(--step--1);
  font-weight: 600;
}

@media (min-width: 52rem) {
  .narrow__step:nth-child(1) { width: 100%; }
  .narrow__step:nth-child(3) { width: 86%; }
  .narrow__step:nth-child(5) { width: 72%; }
}

.narrow__arrow {
  color: var(--w-accent);
  font-size: 1.75rem;
  line-height: 1;
}

/* The instrument, folded away. */
.fold {
  max-width: 64rem;
  margin: var(--space-7) auto 0;
  border: 2.5px solid var(--w-ink);
  border-radius: 22px;
  background: #fff;
}

.fold summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--w-display);
  font-size: 1.375rem;
  font-weight: 600;
}

.fold summary::-webkit-details-marker { display: none; }

.fold summary small {
  color: var(--w-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
}

.fold summary::after {
  content: "+";
  margin-left: auto;
  color: var(--w-accent-text);
  font-size: 1.75rem;
  line-height: 1;
}

.fold[open] summary::after { content: "−"; }

.fold__body {
  padding: 0 var(--space-6) var(--space-6);
}

.fold .instrument { margin-top: 0; }

/* ---------- Jake: a player card ---------- */

.card-wrap {
  display: grid;
  justify-items: center;
  margin-top: var(--space-8);
}

.player {
  width: min(100%, 44rem);
  border: 3px solid var(--w-ink);
  border-radius: 28px;
  background: var(--w-dark);
  color: var(--w-on-dark);
  box-shadow: 8px 8px 0 var(--w-accent);
  overflow: hidden;
  transform: rotate(-1.2deg);
}

.player__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  background: var(--w-accent-text);
  color: #fff;
}

.player__badge {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 3px solid #fff;
  border-radius: 50%;
  font-family: var(--w-display);
  font-size: 2.25rem;
  font-weight: 600;
}

.player__name {
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1;
}

.player__pos {
  margin-top: var(--space-2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player dl {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6);
}

.player dl > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
}

.player dt {
  color: var(--w-accent-on-dark);
  font-family: var(--w-display);
  font-size: 1.375rem;
  font-weight: 600;
}

.player dd {
  grid-column: 2;
  margin: 0;
}

.player .icon {
  grid-row: span 2;
  color: var(--w-accent-on-dark);
}

@media (min-width: 52rem) {
  .player dl { grid-template-columns: 1fr 1fr; }
}

.motion .player.reveal { transform: translateY(2rem) rotate(-4deg) scale(0.97); }
.motion .player.reveal.is-in { transform: rotate(-1.2deg); }

.card-note {
  max-width: 34rem;
  margin: var(--space-7) auto 0;
  color: var(--w-muted);
  font-style: italic;
  text-align: center;
}

/* ---------- Findings ---------- */

.p-finding {
  padding-block: var(--space-8);
  border-top: 2px dashed var(--w-line);
}

.p-finding:first-of-type { margin-top: var(--space-7); }

.p-finding__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.p-finding__n {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--w-accent-text);
  color: #fff;
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.p-finding__title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.p-finding__body {
  max-width: 44rem;
  margin-top: var(--space-6);
  font-size: var(--step-1);
}

.p-finding__body p + p { margin-top: var(--space-4); }

.p-finding__body strong { color: var(--w-accent-text); }

.p-split {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .p-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .p-split--even { grid-template-columns: 1fr auto 1fr; }
}

.case--pb .chart {
  margin-top: 0;
  padding: var(--space-5) var(--space-6);
  border: 2.5px solid var(--w-ink);
  border-radius: 22px;
  background: #fff;
}

.case--pb .chart__bar { border-radius: 999px; }

@media (min-width: 64rem) {
  .case--pb .p-split .chart__bars li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "track track";
  }
}

/* 01: the face-off. */
.faceoff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.faceoff__side {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2.5px solid var(--w-ink);
  border-radius: 24px;
  background: #fff;
}

.faceoff__side--win {
  background: var(--w-pink-light);
  box-shadow: 5px 5px 0 var(--w-ink);
  transform: rotate(-2deg);
}

.faceoff__n {
  font-family: var(--w-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 600;
  line-height: 1;
}

.faceoff__side:not(.faceoff__side--win) .faceoff__n { color: var(--w-muted); }

.faceoff__vs {
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: 2rem;
  font-weight: 600;
}

.faceoff__label {
  font-weight: 600;
}

/* 02: interest ≠ participation, between the two charts. */
.neq {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.neq small {
  max-width: 10rem;
  color: var(--w-ink);
  font-size: 1rem;
  line-height: 1.3;
}

/* 03 + 05 callouts. */
.p-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border: 2.5px solid var(--w-ink);
  border-radius: 24px;
  background: var(--w-pink-light);
  box-shadow: 5px 5px 0 var(--w-ink);
}


.p-callout__title {
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* 04: Sweet, 6 of 102. */
.sweet {
  display: grid;
  justify-items: center;
  text-align: center;
}

.sweet__n {
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: clamp(5rem, 3rem + 9vw, 9rem);
  font-weight: 600;
  line-height: 0.9;
}

.sweet__of {
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.sweet__l {
  max-width: 18rem;
  margin-top: var(--space-3);
  color: var(--w-muted);
}

/* ---------- Campaign: a turf playbook ---------- */

.turf {
  background:
    repeating-linear-gradient(90deg, #3B2430 0 8%, #46293A 8% 16%),
    #3B2430;
}

.turf .p-head .cs-eyebrow { color: var(--w-accent-on-dark); }

.gameday {
  font-size: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  line-height: 0.95;
}

.gameday span { color: var(--w-accent); }

.yard {
  display: flex;
  justify-content: space-between;
  width: 100%;          /* the centred head would otherwise shrink it to its content */
  max-width: 48rem;
  margin: var(--space-5) auto 0;
  padding-top: var(--space-2);
  border-top: 2px solid rgb(246 240 214 / 0.35);
  color: var(--w-muted-on-dark);
  font-family: var(--w-display);
  font-weight: 600;
}

.plays {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.play {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: var(--space-6);
  border: 2px solid rgb(246 240 214 / 0.3);
  border-radius: 24px;
  background: rgb(21 10 16 / 0.35);
}

.play__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.play__num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 2px solid var(--w-on-dark);
  border-radius: 50%;
  font-family: var(--w-display);
  font-weight: 600;
}

.play__title {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.play p { max-width: 36rem; }

.play__answers {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: var(--w-pink-light);
  color: var(--w-ink);
  font-weight: 600;
}

.play figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.play figcaption {
  margin-top: var(--space-2);
  color: var(--w-muted-on-dark);
  font-size: var(--step--1);
  font-style: italic;
}

@media (min-width: 64rem) {
  .plays { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .play { grid-column: span 2; }
  .play--hero { grid-column: span 4; grid-row: span 2; }
  .play--wide { grid-column: span 3; }
}

/* The budget on a scoreboard. */
.scoreboard {
  display: grid;
  gap: var(--space-5);
  max-width: 52rem;
  margin: var(--space-9) auto 0;
  padding: var(--space-6);
  border: 4px solid #1E1218;
  border-radius: 20px;
  background: #1E1218;
  box-shadow: 0 0 0 3px var(--w-accent), 0 18px 40px rgb(0 0 0 / 0.35);
  text-align: center;
}

.scoreboard__label {
  color: var(--w-muted-on-dark);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scoreboard__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.scoreboard__cell {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: 12px;
  background: #2A1922;
}

.scoreboard__num {
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 0 18px rgb(212 84 140 / 0.55);
}

.scoreboard__cell--avail .scoreboard__num {
  color: var(--w-on-dark);
  text-shadow: none;
}

.scoreboard__vs {
  color: var(--w-muted-on-dark);
  font-family: var(--w-display);
  font-weight: 600;
}

.scoreboard p:last-child {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--w-on-dark);
}

.p-measure {
  max-width: 44rem;
  margin: var(--space-7) auto 0;
  font-size: var(--step-1);
  text-align: center;
}

/* ---------- Notes: a pull quote ---------- */

.pull {
  max-width: 50rem;
  margin: 0 auto;
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem);
  line-height: 1;
  text-align: center;
}

.pull span { color: var(--w-accent); }

.p-cols {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--step-1);
}

@media (min-width: 64rem) {
  .p-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.case--pb .cs-pager {
  justify-items: center;
  text-align: center;
}

/* Phones: the two budget cells stack, "vs" between them. */
@media (max-width: 39.99rem) {
  .scoreboard__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .scoreboard {
    padding: var(--space-5) var(--space-4);
  }
}