@font-face {
  font-family: "Fredoka"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Fredoka-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2"; font-weight: 500 700; font-style: normal; font-display: swap;
  src: url("fonts/Baloo2.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --sky: #FFE3C7;
  --sky-far: #FBEEE2;
  --surface: #FAF6F0;
  --cream: #F5EEDD;
  --accent: #F26A5A;
  --accent-2: #8FE0C2;
  --ink: #3A342E;
  --road: #7E7873;
  --pad: 20px;
  --r-card: 24px;
  --r-row: 16px;
  --r-tag: 8px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-far) 0%, var(--sky) 55%, var(--sky-far) 100%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
a:focus-visible,
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-tag);
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--pad); }

/* ---------- hero: asymmetric split ---------- */

.hero {
  padding-block: 28px 44px;
  display: grid;
  gap: 24px;
  align-items: center;
}

.tag {
  display: inline-block;
  background: var(--accent-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--r-tag);
  margin: 0 0 14px;
}

h1 {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--accent);
  -webkit-text-stroke: 3px var(--cream);
  paint-order: stroke fill;
}
h1 span { display: block; }

.lede { margin: 0; max-width: 34ch; font-size: 1.05rem; }

picture { display: block; }

.hero-shot {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(58, 52, 46, 0.18);
  width: 100%;
}

@media (max-width: 699px) {
  .hero-shot { max-height: 42vh; width: auto; margin-inline: auto; }
}

/* ---------- showcase ---------- */

.showcase { padding-block: 12px 44px; }

h2 {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--ink);
}

.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  padding: 4px var(--pad) 8px;
  margin-inline: calc(var(--pad) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

.shot { scroll-snap-align: start; margin: 0; }

.shot img {
  width: 100%;
  border-radius: var(--r-card);
  box-shadow: 0 14px 30px rgba(58, 52, 46, 0.16);
  background: var(--surface);
}

.shot figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--ink);
}

/* ---------- how it plays: band with hairline groups ---------- */

.plays {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 28px 22px;
  margin-bottom: 44px;
}

.plays dl { margin: 0; }
.plays div {
  padding-block: 18px;
  border-top: 2px solid var(--cream);
}
.plays div:first-of-type { border-top: 0; padding-top: 4px; }
.plays dt {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 2px;
}
.plays dd { margin: 0; max-width: 60ch; }

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

footer {
  border-top: 2px solid var(--cream);
  padding-block: 24px 36px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  font-size: 0.95rem;
}

footer .logo { display: inline-block; }
footer .logo img { width: 150px; image-rendering: pixelated; }

.flinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
}
.flinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

.made { margin: 0; color: var(--ink); }

/* ---------- wider screens ---------- */

@media (min-width: 700px) {
  :root { --pad: 32px; }
  body { font-size: 18px; }
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    padding-block: 40px 64px;
  }
  h1 { font-size: clamp(3.6rem, 7vw, 5.6rem); }
  .lede { font-size: 1.15rem; }
  .showcase { padding-block: 12px 64px; }
  .strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: 32px 28px;
    padding-inline: 0;
    margin-inline: 0;
    align-items: start;
  }
  .plays {
    padding: 40px 44px;
    margin-bottom: 64px;
  }
  .plays dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 44px;
  }
  .plays div:nth-of-type(2) { border-top: 0; padding-top: 4px; }
  footer { grid-template-columns: 1fr auto; justify-items: start; text-align: left; align-items: center; }
  footer .flinks { grid-row: 1; grid-column: 2; }
  footer .made { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .strip { grid-template-columns: repeat(4, 1fr); gap: 28px 22px; }
}

@media (min-width: 1100px) {
  h1 { font-size: 6rem; -webkit-text-stroke-width: 4px; }
  .lede { font-size: 1.3rem; }
  .plays dt { font-size: 1.3rem; }
}

/* ---------- hover ---------- */

@media (prefers-reduced-motion: no-preference) {
  .shot img { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }
  .shot:hover img {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(58, 52, 46, 0.22);
  }
}