:root { --red: #d41317; --ink: #0a0a0a; --soft: #f4f3f2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.7 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #111; background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.kicker, .sub, .races-title, .team h3 { font-family: "jaf-mashine", "Arial Black", Impact, sans-serif; font-weight: 700; }

/* subscribe: the strip on top and the footer share the form */
.strip { background: #111; color: #fff; padding: 0 20px; min-height: 68px; display: flex; flex-direction: column; justify-content: center; }
.strip-in { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 1.17rem; }
.signup-form { display: flex; gap: 8px; }
.signup-form input[type=email] { padding: 10px 14px; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-size: 1rem; min-width: 270px; }
.signup-form button { padding: 10px 22px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font: inherit; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: background .15s, transform .15s; }
.signup-form button:hover { background: #a80e12; transform: translateY(-1px); }
.signup-form input:focus-visible, .signup-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.trap { position: absolute; left: -9999px; }
.thanks { display: none; text-align: center; margin: 8px 0 0; font-size: .9rem; color: #9fe7a8; }
.thanks.show { display: block; }
.thanks.error { color: #ffb4b4; }

/* hero: the picture at its own shape (1440 x 901), from the top; it goes on behind the black band.
   The logo and the lockup are where the design has them (as a share of the width of the page). */
.hero { position: relative; height: 62.6vw; background: #8a1010 url(img/hero.jpg) center top / 100% auto no-repeat; color: #fff; }
.rfg { position: absolute; top: 6.1vw; left: 8.4vw; width: 9vw; line-height: 0; transition: opacity .15s; }
.rfg img { width: 100%; height: auto; }
.rfg:hover { opacity: .8; }
.lockup { position: absolute; top: 18.4vw; left: 15.6vw; width: 61.6vw; margin: 0; line-height: 0; }
.lockup img { width: 100%; height: auto; }

/* the story: a black brush band, then text with the goalie standing at the right */
.story { position: relative; }
.intro { margin-top: -18.6vw; position: relative; z-index: 2; background: url(img/brush-black.png) top center / 100% 100% no-repeat; min-height: 43vw; padding: 16.4vw 13vw 5.6vw 11vw; color: #fff; }
.intro-in { display: grid; grid-template-columns: 31vw minmax(0, 1fr); gap: 3vw; align-items: center; margin: 0; }
.kicker { margin: 0; font-size: clamp(1.2rem, 2.65vw, 2.45rem); line-height: 1.1; text-transform: uppercase; text-align: center; white-space: nowrap; transform: rotate(-5deg); letter-spacing: .02em; }
.lead { margin: 0; font-size: clamp(.9rem, 1.19vw, 1.15rem); max-width: 33vw; }
.goalie { position: absolute; z-index: 3; right: -3.7vw; top: 7.2vw; width: 47vw; height: 57.5vw; pointer-events: none; }
.about { position: relative; z-index: 2; margin-top: -5.6vw; padding: 0 8vw 0 11vw; }
.about p { margin: 0; max-width: 50vw; font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 2; }

/* the red band with the features; a Gork skates out of it on the left and the board stands on it
   at the right (places as a share of the width of the page, like the design) */
.features-wrap { position: relative; margin-top: 2.2vw; }
.features { margin: 0 5.6vw 0 26.7vw; aspect-ratio: 1146 / 483; background: url(img/brush-red.png) center / 100% 100% no-repeat; padding: 0 7vw 6.6vw 7.3vw; display: flex; align-items: center; color: #fff; }
.features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-weight: 500; font-size: clamp(.9rem, 1.36vw, 1.6rem); }
.features li::before { content: "\25B2"; display: inline-block; margin-right: .6em; font-size: .8em; }
.gork { position: absolute; z-index: 3; left: .5vw; top: -9.4vw; width: 30.6vw; pointer-events: none; }
.board { position: absolute; z-index: 3; left: 59vw; top: 12vw; width: 38vw; pointer-events: none; }

/* in the box */
.box { position: relative; padding: 1vw 8vw 0 11vw; }
.box p { margin: 0; max-width: 50vw; font-size: clamp(.9rem, 1.1vw, 1.05rem); line-height: 2; }
.box strong { color: var(--red); font-weight: 700; font-size: 1.3em; text-transform: uppercase; }

.br-m, .board-m { display: none; }

/* races */
.races { padding: 3vw 0 8vw; }
.races-title { margin: 0 0 3vw 4.9vw; width: 31vw; line-height: 0; }
.races-title img { width: 100%; height: auto; }
.teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 6vw; max-width: 1440px; margin: 0 auto; }
.teams { row-gap: 40px; }
.team { container-type: inline-size; }
.team img, .team .soon { display: block; width: 100%; border-radius: 6px; margin-bottom: 14px; }
/* a race without a picture yet */
.soon { aspect-ratio: 1 / 1; background: linear-gradient(160deg, #2b2b2b, #151515); display: grid; place-items: center; align-content: center; text-align: center; color: #8a8683; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.soon span::before { content: "\25B2"; display: block; color: var(--red); font-size: 1.4rem; margin-bottom: 8px; }
/* the name stays on one line: the size follows the width of the card, up to 1.5rem */
.team h3 { margin: 0 0 6px; font-size: clamp(.8rem, 8cqi, 1.5rem); white-space: nowrap; color: var(--red); text-transform: uppercase; }
.team p { margin: 0; font-size: .92rem; line-height: 1.65; color: #333; }

/* footer: copyright and subscribe, then the logo of Red Fasta Games */
footer.site { background: #111; color: #bbb; padding: 36px 20px 40px; text-align: center; }
.footer-row { max-width: 1100px; margin: 0 auto; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.copy { margin: 0; font-size: .85rem; }
.footer-rfg { display: inline-block; margin-top: 28px; line-height: 0; transition: opacity .15s; }
.footer-rfg:hover { opacity: .75; }

@media (max-width: 1000px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The phone (the design MobileGrit.pdf is 393 px wide: 1 px of it is .2545vw) */
@media (max-width: 800px) {
  .hero { height: 150vw; background-image: url(img/hero-mobile.jpg); background-size: 100% auto; background-position: center top; }
  .rfg { display: none; }
  .lockup { top: 33vw; left: 7.6vw; width: 84vw; }
  .intro { margin-top: -33vw; min-height: 154vw; padding: 24vw 9vw 0 12.2vw; background-image: url(img/brush-black-mobile.png); background-size: 100% 100%; }
  .intro-in { grid-template-columns: 1fr; gap: 7vw; align-items: start; }
  .kicker { font-size: 6.6vw; line-height: 1.05; transform: rotate(-6deg); margin: 0 -4vw; }
  .lead { max-width: none; font-size: 4vw; line-height: 6.36vw; }
  .goalie { top: 95.7vw; left: 2.3vw; right: auto; width: 97.7vw; height: 100.8vw; }
  .about { margin-top: 0; padding: 29vw 9vw 0 12.7vw; }
  .about p, .box p { max-width: none; font-size: 3.85vw; line-height: 6.36vw; }
  .features-wrap { margin-top: -2vw; }
  .features { margin: 0 0 -33vw; aspect-ratio: auto; display: block; min-height: 164vw; padding: 24vw 7vw 0 15.3vw; background-size: 112% 100%; background-position: center top; }
  .features ul { gap: 4.6vw; font-size: 3.87vw; line-height: 4.7vw; }
  .gork { left: 55vw; top: 73vw; width: 64vw; height: auto; }
  .box { padding: 0 12vw 0 15.3vw; }
  .box strong { display: block; width: min-content; margin-bottom: 1.5vw; font-size: 7.1vw; line-height: 1.1; }
  .story, .features-wrap, .box { overflow-x: clip; }
  .br-m { display: inline; }
  .board { display: none; }
  .board-m { display: block; width: 150vw; max-width: none; margin: 6vw 0 -4vw -24vw; pointer-events: none; }
  .races { padding-top: 0; }
  .races-title { width: 62vw; margin-left: 5vw; }
  .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; row-gap: 28px; padding: 0 5vw; }
  .team p { font-size: .82rem; }
  .signup-form { width: 100%; }
  .signup-form input[type=email] { flex: 1; min-width: 0; }
  .footer-row { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }