:root {
  color-scheme: light;
  --canvas: #f6ec45;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--canvas);
}

.home-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--canvas);
  overflow: hidden;
}

a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.home-canvas {
  position: relative;
  width: 100vw;
  height: 100svh;
  background: var(--canvas);
  overflow: hidden;
}

.home-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(56.25vw, 810px);
  aspect-ratio: 1440 / 3000;
  transform: translate(-50%, -48%);
}

.home-canvas__image,
.home-hover {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.home-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 1;
}

.home-link--club:hover ~ .home-hover--club,
.home-link--club:focus-visible ~ .home-hover--club,
.home-link--concepts:hover ~ .home-hover--concepts,
.home-link--concepts:focus-visible ~ .home-hover--concepts,
.home-link--about:hover ~ .home-hover--about,
.home-link--about:focus-visible ~ .home-hover--about {
  opacity: 1;
}

.home-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.home-link {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--hit-width);
  height: 1.2%;
  transform: translate(-50%, -50%);
  outline-offset: 4px;
  z-index: 2;
}

.home-link::before {
  content: "";
  position: absolute;
  inset: -70% -14%;
}

.home-link--club {
  left: 43.28%;
  top: 51.35%;
  --hit-width: 5.5%;
}

.home-link--concepts {
  left: 49.82%;
  top: 51.35%;
  --hit-width: 10%;
}

.home-link--about {
  left: 57.03%;
  top: 51.35%;
  --hit-width: 7%;
}

.canvas-page {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  overflow-x: hidden;
  overflow-y: auto;
}

.canvas-page:has(.about-canvas) {
  min-height: 100svh;
  overflow: hidden;
}

.about-canvas {
  position: relative;
  width: 100vw;
  height: 100svh;
  margin: 0 auto;
  background: var(--canvas);
  font-family: Arial, Helvetica, sans-serif;
}

.about-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 1260px);
  transform: translate(-50%, -45%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-wanderers {
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.about-copy {
  width: min(100%, 1120px);
  color: #000;
  font-size: clamp(14px, 1.35vw, 27px);
  line-height: 1.15;
  text-align: center;
  padding: clamp(16px, 1.6vw, 34px) 0 clamp(20px, 2.3vw, 46px);
  z-index: 2;
}

.about-copy p {
  margin: 0 0 1.45em;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-copy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.about-back {
  width: min(13.5vw, 150px);
  display: block;
  line-height: 0;
  outline-offset: 6px;
  z-index: 3;
}

.about-back img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.club-canvas {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  background: var(--canvas);
}

.club-canvas__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.club-anchor {
  position: absolute;
  left: 0;
  top: 45%;
  width: 1px;
  height: 1px;
}

.club-video {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: cover;
}

.club-video--manifesto {
  left: 24.15%;
  top: 5.85%;
  width: 51.7%;
  height: 30.63%;
}

.club-actions {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.club-action {
  position: absolute;
  transform: translate(-50%, -50%);
  outline-offset: 4px;
  z-index: 3;
}

.club-action--learn {
  left: 50%;
  top: 39.62%;
  width: 13.5%;
  height: 1.35%;
}

.club-action--discord {
  left: 50%;
  top: 78.05%;
  width: 17.8%;
  height: 1.3%;
}

.club-action--instagram {
  left: 50%;
  top: 79.55%;
  width: 15.6%;
  height: 1.3%;
}

.club-action--back {
  left: 49.6%;
  top: 85.8%;
  width: 14%;
  height: 3.4%;
}

.club-map-marker {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline-offset: 4px;
  z-index: 4;
}

.club-map-marker--sweet-auburn {
  left: 52.05%;
  top: 64.85%;
  width: 3.1%;
  aspect-ratio: 1;
}

.club-map-marker--castleberry-hill {
  left: 46.5%;
  top: 65.6%;
  width: 3.1%;
  aspect-ratio: 1;
}

.club-map-marker--summerhill {
  left: 50.65%;
  top: 67.75%;
  width: 3.1%;
  aspect-ratio: 1;
}

.club-map-preview {
  --preview-x: 50%;
  --preview-y: 50%;
  position: fixed;
  left: var(--preview-x);
  top: var(--preview-y);
  width: min(316px, 34vw);
  aspect-ratio: 316 / 211;
  object-fit: cover;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 100ms ease;
  pointer-events: none;
  z-index: 20;
}

.club-map-preview.is-visible {
  opacity: 1;
}

.club-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.club-action--learn:hover ~ .club-hover--learn,
.club-action--learn:focus-visible ~ .club-hover--learn,
.club-action--discord:hover ~ .club-hover--discord,
.club-action--discord:focus-visible ~ .club-hover--discord,
.club-action--instagram:hover ~ .club-hover--instagram,
.club-action--instagram:focus-visible ~ .club-hover--instagram {
  opacity: 1;
}

.concepts-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--canvas);
  overflow: hidden;
}

.concepts-canvas {
  position: relative;
  width: 100vw;
  height: 100svh;
  background: var(--canvas);
  overflow: hidden;
}

.concepts-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(75vw, 1080px);
  aspect-ratio: 1440 / 3000;
  transform: translate(-50%, -50%);
  perspective: 1400px;
}

.concepts-canvas__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.concepts-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 120ms ease;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}

.concepts-map {
  --map-ry: 0deg;
  position: absolute;
  left: 28.35%;
  top: 30.7%;
  width: 44.8%;
  height: auto;
  transform:
    perspective(900px)
    rotateY(var(--map-ry));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 325ms linear;
  user-select: none;
  will-change: transform;
  z-index: 1;
}

.concepts-soccer-map-button {
  position: absolute;
  left: 50%;
  top: 61.75%;
  width: 19.5%;
  height: 1.2%;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  outline-offset: 4px;
  z-index: 3;
}

.concepts-soccer-map-button:hover ~ .concepts-hover--soccer-map,
.concepts-soccer-map-button:focus-visible ~ .concepts-hover--soccer-map,
.concepts-art.is-tapped .concepts-hover--soccer-map {
  opacity: 1;
}

.concepts-back {
  position: absolute;
  left: 50%;
  top: 65.8%;
  width: 16%;
  height: 4.3%;
  transform: translate(-50%, -50%);
  outline-offset: 4px;
  z-index: 4;
}

.map-page-canvas {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  background: var(--canvas);
  font-family: Arial, Helvetica, sans-serif;
  container-type: inline-size;
}

.map-page-canvas__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.map-print,
.map-crop,
.map-static,
.map-copy,
.map-actions,
.map-hover {
  position: absolute;
}

.map-print,
.map-crop,
.map-copy-mask {
  background: var(--canvas);
}

.map-print {
  display: block;
  padding: 1.3%;
  border: 0;
  cursor: zoom-in;
  line-height: 0;
  background: var(--canvas);
  z-index: 3;
  pointer-events: auto;
}

.map-print img,
.map-crop img {
  display: block;
  user-select: none;
  pointer-events: none;
}

.map-print--top {
  left: 47.6%;
  top: 4.78%;
  width: 48.4%;
  box-shadow: 0 0 0 28px var(--canvas);
  z-index: 6;
}

.map-print--top img {
  width: 100%;
  height: auto;
}

.map-crop {
  margin: 0;
  overflow: hidden;
  background: var(--canvas);
}

.map-crop--culture {
  left: 5.35%;
  top: 30.45%;
  width: 42.2%;
  height: 16.55%;
  border-radius: 28px;
}

.map-crop--culture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-crop--starting {
  left: 51.2%;
  top: 56.75%;
  width: 42.3%;
  height: 16.85%;
  border-radius: 30px;
}

.map-crop--starting img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-static {
  margin: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  background: var(--canvas);
}

.map-static img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.map-static--culture {
  left: 5.35%;
  top: 30.45%;
  width: 42.2%;
  height: 16.55%;
  border-radius: 28px;
}

.map-static--starting {
  left: 51.2%;
  top: 59.55%;
  width: 42.3%;
  height: 16.85%;
  border-radius: 30px;
  z-index: 5;
}

.map-button-normal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: none;
  pointer-events: none;
  user-select: none;
  z-index: 6;
}

.map-back-normal {
  position: absolute;
  left: 49.5%;
  top: 88.95%;
  width: 13.5%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

.map-old-own-mask {
  position: absolute;
  left: 34.4%;
  top: 76.55%;
  width: 32%;
  height: 5.0%;
  background: var(--canvas);
  pointer-events: none;
  z-index: 4;
}

.map-heading {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.25% 0.45%;
  background: var(--canvas);
  color: #000;
  font-family: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  pointer-events: none;
  z-index: 6;
}

.map-heading--intro {
  left: 4.55%;
  top: 5.75%;
  width: 42%;
  height: 3.2%;
  font-size: clamp(15px, 3.95cqw, 50px);
}

.map-heading--world {
  left: 4.55%;
  top: 14.35%;
  width: 42%;
  height: 3.85%;
  font-size: clamp(14px, 3.6cqw, 45px);
}

.map-heading--culture {
  left: 51.4%;
  top: 32.85%;
  width: 34%;
  height: 5.05%;
  align-items: flex-end;
  padding-bottom: 0.45%;
  font-size: clamp(14px, 3.45cqw, 43px);
}

.map-heading--infra {
  left: 4.45%;
  top: 47.9%;
  width: 91%;
  height: 3.45%;
  text-align: center;
  justify-content: center;
  font-size: clamp(12px, 3.1cqw, 39px);
}

.map-heading--starting {
  left: 4.55%;
  top: 56.45%;
  width: 43%;
  height: 7.5%;
  align-items: flex-end;
  padding-bottom: 0.45%;
  font-size: clamp(14px, 3.45cqw, 43px);
}

.map-copy {
  color: #000;
  background: var(--canvas);
  font-size: clamp(8px, 1.8cqw, 24px);
  line-height: 1.15;
  z-index: 2;
  padding: 0.15% 0.3%;
}

.map-copy p {
  margin: 0 0 1.12em;
}

.map-copy--intro {
  left: 4.9%;
  top: 8.84%;
  width: 39%;
  height: 5.0%;
}

.map-copy--world {
  left: 4.9%;
  top: 18.65%;
  width: 41.5%;
  height: 10.8%;
}

.map-copy--culture {
  left: 52.0%;
  top: 38.05%;
  width: 41%;
  height: 7.7%;
}

.map-copy--infra {
  left: 9.8%;
  top: 51.65%;
  width: 80.5%;
  height: 4.7%;
  text-align: center;
}

.map-copy--starting {
  left: 4.9%;
  top: 64.15%;
  width: 44%;
  height: 12.5%;
}

.map-starting-list {
  max-width: 100%;
  font-family: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 2.6cqw, 37px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.map-copy--credit {
  left: 19.5%;
  top: 79.55%;
  width: 60%;
  height: 4.4%;
  text-align: center;
  z-index: 6;
}

.map-actions {
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.map-action {
  position: absolute;
  transform: translate(-50%, -50%);
  outline-offset: 4px;
  pointer-events: auto;
  text-decoration: none;
  z-index: 5;
}

.map-action--buy {
  left: 10.7%;
  top: 13.75%;
  width: 12.5%;
  height: 1.35%;
  display: none;
}

.map-action--own {
  left: 50%;
  top: 85.4%;
  width: 31%;
  height: 1.8%;
  display: none;
}

.map-action--back {
  left: 49.5%;
  top: 88.95%;
  width: 18%;
  height: 3.25%;
}

.map-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.82);
  z-index: 100;
}

.map-lightbox.is-open {
  display: grid;
}

.map-lightbox__viewport {
  width: calc(100vw - 56px);
  height: calc(100vh - 56px);
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
}

.map-lightbox__viewport.is-dragging {
  cursor: grabbing;
}

.map-lightbox__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 253.44%;
  max-width: none;
  max-height: none;
  transform: translate(var(--map-pan-x, 0px), var(--map-pan-y, 0px));
  transition: none;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

.map-lightbox__close {
  position: fixed;
  top: 20px;
  right: 20px;
  border: 0;
  padding: 8px 12px;
  background: #f6ec45;
  color: #000;
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  z-index: 101;
  text-decoration: none;
}

@media (max-width: 700px) {
  .home-art {
    width: min(104vw, calc(100svh * 1440 / 3000));
  }

  .about-stack {
    width: min(92vw, 680px);
    transform: translate(-50%, -50%);
  }

  .about-copy {
    font-size: clamp(13px, 3.65vw, 18px);
    padding: 18px 0 28px;
  }

  .about-back {
    width: min(24vw, 110px);
  }

  .club-canvas {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 18px 56px;
  }

  .club-canvas::before {
    content: "";
    order: 3;
    display: block;
    width: min(100%, 579px);
    aspect-ratio: 579 / 815.87;
    margin: 18px 0 22px;
    background: url("assets/wander-map.svg") center / contain no-repeat;
  }

  .club-canvas__image {
    display: none;
  }

  .club-video--manifesto {
    position: relative;
    order: 1;
    left: auto;
    top: auto;
    width: min(100%, 560px);
    height: auto;
    aspect-ratio: 1081 / 1351;
    object-fit: contain;
    margin: 0 auto 18px;
  }

  .club-actions {
    position: static;
    display: contents;
  }

  .club-action {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-height: 44px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    z-index: 5;
  }

  .club-action--learn {
    order: 2;
    margin: 0 auto 22px;
    font-size: 18px;
  }

  .club-action--learn::before {
    content: "LEARN MORE";
  }

  .club-action--discord {
    order: 4;
    margin: 28px auto 0;
    font-size: 18px;
  }

  .club-action--discord::before {
    content: "JOIN THE DISCORD";
  }

  .club-action--instagram {
    order: 5;
    margin: 0 auto 22px;
    font-size: 18px;
  }

  .club-action--instagram::before {
    content: "FIND US ON IG";
  }

  .club-action--back {
    order: 6;
    width: min(30vw, 120px);
    aspect-ratio: 1.8;
    margin: 0 auto;
    background: url("assets/back-arrow.svg") center / contain no-repeat;
    font-size: 0;
  }

  .club-hover {
    display: none;
  }

  .club-map-marker {
    position: absolute;
    display: block;
    transform: translate(-50%, -50%);
  }

  .club-map-marker--sweet-auburn,
  .club-map-marker--castleberry-hill,
  .club-map-marker--summerhill {
    width: 10%;
    z-index: 6;
  }

  .club-map-marker--castleberry-hill {
    left: 46.5%;
    top: calc(44px + min(100vw - 36px, 560px) * 1.249 + 84px + min(100vw - 36px, 579px) * 0.66);
  }

  .club-map-marker--sweet-auburn {
    left: 53.8%;
    top: calc(44px + min(100vw - 36px, 560px) * 1.249 + 84px + min(100vw - 36px, 579px) * 0.635);
  }

  .club-map-marker--summerhill {
    left: 52.3%;
    top: calc(44px + min(100vw - 36px, 560px) * 1.249 + 84px + min(100vw - 36px, 579px) * 0.71);
  }

  .club-map-preview {
    width: min(316px, 80vw);
  }

  .concepts-art {
    width: min(104vw, calc(100svh * 1440 / 3000));
  }

  .concepts-soccer-map-button {
    width: 34%;
    height: 2.2%;
  }

  .concepts-back {
    width: 26%;
    height: 6%;
  }

  .map-page-canvas {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 44px 18px 56px;
    container-type: normal;
  }

  .map-page-canvas__image,
  .map-button-normal,
  .map-back-normal,
  .map-old-own-mask {
    display: none;
  }

  .map-print,
  .map-static,
  .map-copy,
  .map-heading,
  .map-actions,
  .map-action {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    transform: none;
  }

  .map-heading {
    display: block;
    padding: 0;
    background: transparent;
    pointer-events: auto;
    font-size: clamp(31px, 10.2vw, 48px);
    line-height: 0.9;
  }

  .map-heading--intro {
    order: 1;
  }

  .map-copy--intro {
    order: 2;
  }

  .map-action--buy {
    order: 3;
  }

  .map-print--top {
    order: 4;
  }

  .map-heading--world {
    order: 5;
  }

  .map-copy--world {
    order: 6;
  }

  .map-static--culture {
    order: 7;
  }

  .map-heading--culture {
    order: 8;
  }

  .map-copy--culture {
    order: 9;
  }

  .map-heading--infra {
    order: 10;
    margin-top: 24px;
    text-align: left;
  }

  .map-copy--infra {
    order: 11;
    text-align: left;
  }

  .map-heading--starting {
    order: 12;
    margin-top: 26px;
  }

  .map-copy--starting {
    order: 13;
  }

  .map-static--starting {
    order: 14;
  }

  .map-copy--credit {
    order: 15;
    text-align: center;
  }

  .map-action--own {
    order: 16;
  }

  .map-action--back {
    order: 17;
  }

  .map-copy {
    padding: 0;
    background: transparent;
    font-size: clamp(17px, 4.3vw, 21px);
    line-height: 1.18;
  }

  .map-copy p {
    margin-bottom: 0.95em;
  }

  .map-copy p:last-child {
    margin-bottom: 0;
  }

  .map-starting-list {
    font-size: clamp(22px, 7vw, 36px);
    line-height: 0.98;
  }

  .map-print {
    padding: 10px;
    margin: 10px 0 18px;
    width: 100%;
    box-shadow: none;
  }

  .map-print img {
    width: 100%;
  }

  .map-static {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 18px;
    margin: 14px 0;
  }

  .map-static img {
    height: 100%;
    object-fit: cover;
  }

  .map-actions {
    display: contents;
  }

  .map-action {
    display: flex;
    align-self: flex-start;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
  }

  .map-action--buy {
    display: none;
    margin: -6px 0 10px;
    font-size: 18px;
  }

  .map-action--buy::before {
    content: "BUY NOW";
  }

  .map-action--own {
    display: none;
    align-self: center;
    margin-top: 10px;
    font-size: clamp(28px, 8vw, 42px);
  }

  .map-action--own::before {
    content: "Own the Map";
  }

  .map-action--back {
    align-self: center;
    width: min(30vw, 120px);
    aspect-ratio: 1.8;
    margin-top: 8px;
    background: url("assets/back-arrow.svg") center / contain no-repeat;
    font-size: 0;
  }

  .map-lightbox {
    padding: 12px;
  }

  .map-lightbox__viewport {
    width: calc(100vw - 24px);
    height: calc(100svh - 24px);
  }

  .map-lightbox__close {
    top: 12px;
    right: 12px;
    padding: 10px 14px;
    font-size: 15px;
  }
}