/* ============================================================
   PEAK & POUR — playful illustrative consumer brand system
   Concept work. Deliberately NOT the studio warm-editorial voice.
   ============================================================ */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-0.woff2") format("woff2");
  font-weight: 400 800;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-0.woff2") format("woff2");
  font-weight: 400 900;
}

:root {
  --sun: #FFC400;        /* sunshine yellow — primary brand colour */
  --coral: #FF5A3C;      /* coral red — action + flavour accents   */
  --teal: #0E3A43;       /* deep teal — ink alternative, cool balance */
  --ink: #21201C;        /* warm near-black for text               */
  --cream: #FFF6E5;      /* warm cream canvas                      */
  --sky: #8FD8F2;        /* small-pop blue — used sparingly        */
  --r-lg: 32px;          /* the system is round: big radii everywhere */
  --r-md: 20px;
  --r-pill: 999px;
}

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

body.pp {
  background: var(--cream);
  color: var(--ink);
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
  font-weight: 500;
  line-height: 1.45;
}

.pp .display {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.pp .script-note {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 600;
}

/* honesty band — required on every render */
.pp .label-band {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--cream);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 24px; font-weight: 600;
}
.pp .label-band .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }

/* chunky pill button */
.pp .btn {
  display: inline-block; background: var(--coral); color: #fff;
  border-radius: var(--r-pill); padding: 14px 34px;
  font-weight: 700; font-size: 20px; text-decoration: none;
  box-shadow: 0 6px 0 rgba(33,32,28,.18);
}
.pp .btn--sun { background: var(--sun); color: var(--teal); }

/* sticker card */
.pp .sticker {
  background: #fff; border: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: 8px 8px 0 var(--sun);
  padding: 28px;
}

.pp .swatch-row { display: flex; gap: 12px; }
.pp .swatch { width: 92px; height: 92px; border-radius: 24px; border: 3px solid var(--ink); position: relative; }
.pp .swatch span { position: absolute; bottom: 6px; left: 8px; font-size: 12px; font-weight: 700; }

/* icon grid */
.pp .icon-tile {
  width: 108px; height: 108px; border-radius: 28px;
  background: #fff; border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.pp .icon-tile--sun { background: var(--sun); }
.pp .icon-tile--coral { background: var(--coral); border-color: var(--ink); }
.pp .icon-tile svg { width: 58px; height: 58px; }

.pp .token-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pp .token-table td { border-top: 2px dashed rgba(33,32,28,.25); padding: 10px 8px; vertical-align: top; }
.pp .token-table td:first-child { font-weight: 700; white-space: nowrap; }

.pp .photo-frame {
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 10px 10px 0 var(--coral);
}
.pp .photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pp .blob { position: absolute; border-radius: 50%; z-index: 0; }

.pp .kicker {
  display: inline-block; background: var(--teal); color: var(--cream);
  border-radius: var(--r-pill); padding: 6px 18px;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pp .kicker--sun { background: var(--sun); color: var(--teal); }
.pp .kicker--coral { background: var(--coral); color: #fff; }