/*
 * The home page is the game's scene: blue sky on top, asphalt below, and the
 * road's double yellow line running down the middle of the page.
 */
.home {
  --sky: #4a8fe7;
  --asphalt: #44464d;
  --lane: #f4c20d;
  --paint: #f4f4ef;
  --kerb: #c9ccd3;
  --ink: #1d1e22;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --width: calc(60rem + 2 * var(--gutter));
  --line-width: 22px; /* two 8px stripes and a 6px gap */
  --road-padding-top: clamp(2.5rem, 6vw, 4.5rem);
  --road-padding-bottom: clamp(3rem, 7vw, 5rem);

  min-height: 100vh;
  background: var(--asphalt);
  color: var(--paint);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
}

.home a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

.home a:hover { color: var(--lane); }

.home a:focus-visible,
.home button:focus-visible {
  outline: 3px solid var(--lane);
  outline-offset: 4px;
  border-radius: 2px;
}

.home h1,
.home h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-weight: 800;
}

/* Sky */
.home__sky {
  background: var(--sky);
  padding-top: clamp(2rem, 6vw, 4.5rem);
}

.home__intro {
  max-width: var(--width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.home__intro h1 {
  margin: 0;
  font-size: clamp(3.75rem, 13vw, 10rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.home__intro p {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
}

/* The game sits on the horizon: sky behind its top half, asphalt behind the rest */
.game {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-inline: var(--gutter);
  background: linear-gradient(to bottom, transparent 45%, var(--asphalt) 45%);
}

.game__screen {
  max-width: calc(60rem - 20px); /* the border sits outside, so the frame lines up with the text */
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border: 10px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  box-sizing: content-box;
  position: relative;
}

.game__screen img,
.game__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.game__screen img { cursor: pointer; }

.game__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: .5em 1.2em;
  border-radius: 4px;
  background: var(--ink);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  transform: translate(-50%, -50%);
}

.game__loading[hidden] { display: none; }

.game__screen:fullscreen {
  max-width: none;
  border: 0;
  border-radius: 0;
}

.game__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding-top: 1.5rem;
}

.home .game__button {
  padding: .7em 1.4em;
  border: 2px solid var(--paint);
  border-radius: 4px;
  background: transparent;
  color: var(--paint);
  font: inherit;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.home .game__button:hover {
  border-color: var(--lane);
  color: var(--lane);
}

.home .game__button--play,
.home .game__button--play:hover {
  border-color: var(--lane);
  background: var(--lane);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

.home .game__button--play:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

.game__button[hidden] { display: none; }

/* Road */
.home__road {
  display: grid;
  grid-template-columns: 1fr var(--line-width) 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--width);
  margin: 0 auto;
  padding: var(--road-padding-top) var(--gutter) var(--road-padding-bottom);
}

.home__centre-line {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-block: calc(var(--road-padding-top) * -1 + 1.5rem) calc(var(--road-padding-bottom) * -1);
  background: linear-gradient(to right, var(--lane) 0 8px, transparent 8px 14px, var(--lane) 14px 22px);
}

.home__about { grid-column: 1; }
.home__made { grid-column: 3; }

.home__about p {
  max-width: 30rem;
  margin: 0 0 1em;
}

/* The portrait, on a yellow diamond road sign */
.home__sign {
  position: relative;
  width: 9.5rem;
  aspect-ratio: 1;
  margin: 1.6rem 0 3.4rem 1.9rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--lane);
  transform: rotate(45deg);
}

.home__sign::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 4px solid var(--ink);
  border-radius: 8px;
}

.home__sign img {
  position: absolute;
  top: 0;
  left: -13%;
  width: 126%;
  max-width: none;
  transform: rotate(-45deg) translateY(3%);
}

.home__made h2 {
  margin: 0 0 1rem;
  color: var(--lane);
  font-size: 2.5rem;
  line-height: 1;
}

.home__made ul,
.home__reach ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home__made li {
  padding: 1.1rem 0;
  border-top: 2px dashed rgb(244 244 239 / .35);
}

.home__made li:first-child {
  padding-top: 0;
  border-top: 0;
}

.home__made a {
  font-size: 1.5rem;
  font-weight: 600;
}

.home__made p {
  max-width: 28rem;
  margin: .3rem 0 0;
  color: var(--kerb);
}

.home__reach {
  grid-column: 1;
  align-self: end;
  margin-top: 2.5rem;
}

.home__reach ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

@media (max-width: 760px) {
  .home__road {
    grid-template-columns: var(--line-width) 1fr;
    column-gap: 1.25rem;
  }

  .home__centre-line {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .home__about,
  .home__made,
  .home__reach { grid-column: 2; }

  .home__made { margin-top: 2.5rem; }
  .game__screen { border-width: 6px; }
}