/* The supplied city artwork frames one diagonal, three-layer poster. */
.story>.section-heading>div{width:100%}
.story>.section-heading{margin-bottom:25px}
.story .story-running{padding-top:22.67px}
@media(max-width:700px){.story .story-running{padding-top:16.67px}}
@media(max-width:700px){.story>.section-heading{margin-bottom:17.5px}}
.story>.section-heading h2{display:flex;align-items:center;justify-content:center;gap:.18em;width:min(100%,1100px);aspect-ratio:2048/442;padding:3% 4%;background:url('assets/sign.png') center / 85% 85% no-repeat;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:clamp(24px,5.3vw,88px);line-height:1;letter-spacing:-.025em;transform:none;color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.story>.section-heading h2{translate:-7.5% 0}
.story>.section-heading h2>span{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.story>.section-heading .eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);padding:8px 12px;-webkit-text-stroke:0;text-shadow:none;transform:none}
@media(max-width:700px){.story>.section-heading h2{font-size:5.7vw;padding:3% 4%}.story>.section-heading h2>span{-webkit-text-stroke-width:2.5px}}
.hero {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 640px;
  max-height: none;
  background: #57c8f8 url('assets/bg.png') center bottom / cover no-repeat;
}
.hero .site-header { flex-shrink: 0; height: 86px; }
.hero .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.hero .site-header nav { grid-column: 2; }
.supplied-logo { width: 108px; padding: 0; line-height: 0; justify-self: start; }
.supplied-logo img { width: 100%; height: auto; }
.hero-title.supplied-title {
  width: 56%;
  font-size: 0;
  line-height: 0;
  transform: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.supplied-title img { width: 100%; height: auto; }
.footer .footer-rabbit.footer-end {
  display: block;
  position: absolute;
  width: min(40vw, 580px);
  height: auto;
  top: auto;
  right: 0;
  bottom: 80px;
  rotate: none;
  pointer-events: none;
}
.footer .footer-bottom { margin-right: min(24vw, 345px); }
.footer .footer-bottom > span:last-child { padding-right: 0; }
.footer .footer-actions { grid-template-columns: minmax(270px, 1fr) minmax(0, 1.5fr) minmax(260px, 1.1fr); }
@media(max-width:1100px) {
  .footer { padding-bottom: 30px; }
  .footer .footer-bottom { margin-right: 0; margin-top: 290px; }
  .footer .footer-actions { grid-template-columns: minmax(270px,1fr) minmax(0,1.7fr); }
  .footer .footer-rabbit.footer-end { width: 450px; bottom: 110px; }
}
@media(max-width:700px) {
  .footer { padding-bottom: 76px; }
  .footer .footer-bottom { margin-top: 260px; }
  .footer .footer-actions { grid-template-columns: 1fr; }
  .footer .footer-rabbit.footer-end { width: min(98vw,390px); bottom: 170px; }
}
.hero .site-header nav {
  padding: 0 18px;
  background: #fffef8e8;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-scene {
  container-type: inline-size;
  flex: 0 0 auto;
  width: min(80%, calc((100svh - 265px) * 1.74), 1400px);
  height: auto;
  aspect-ratio: 2.05;
  max-width: none;
  margin: auto;
  isolation: isolate;
  translate: 4vw -6svh;
}
.hero-title {
  left: 3%;
  top: -3%;
  font-size: 34cqw;
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--white);
  -webkit-text-stroke: 12px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--ink), 12px 12px 0 var(--ink);
  transform: rotate(-12deg) skewX(-14deg);
  transform-origin: center;
  z-index: 1;
}
.hero-art {
  width: 66%;
  max-width: none;
  left: 26%;
  top: 3%;
  transform: rotate(9deg);
  z-index: 2;
}
.hero-art img { filter: drop-shadow(0 3px 0 #11110f33); }
.hero-bottom { position: static; display: contents; }
.hero-bottom h2 {
  position: absolute;
  left: 6%;
  top: 63%;
  font-size: 17.5cqw;
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--white);
  -webkit-text-stroke: 12px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--ink), 12px 12px 0 var(--ink);
  white-space: nowrap;
  transform: rotate(-10deg) skewX(-14deg);
  z-index: 3;
}
.hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  display: flex;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}
.hero #enter-chaos {
  position: relative;
  pointer-events: auto;
  padding: 14px 25px;
  font-size: clamp(14px, 1.25vw, 23px);
  justify-content: center;
  border-radius: 16px;
  transform: none;
  z-index: 4;
}
@media(max-width:700px) {
  .hero { min-height: 640px; background-position: 50% bottom; }
  .hero .site-header { height: 80px; padding: 18px 6%; }
  .hero .site-header nav { padding: 0 10px; }
  .hero-scene { width: 86%; aspect-ratio: 1.08; margin: auto auto; translate: 2vw -6svh; }
  .hero-title { font-size: 49cqw; left: 3%; top: -2%; -webkit-text-stroke-width: 6px; text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--ink); }
  .hero-art { width: 94%; left: 4%; top: 29%; transform: rotate(9deg); }
  .hero-bottom h2 { left: 3%; top: 74%; font-size: 18cqw; -webkit-text-stroke-width: 6px; text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--ink); }
  .hero-cta { bottom: 72px; }
  .hero #enter-chaos { font-size: 13px; padding: 13px 19px; border-width: 3px; border-radius: 12px; }
}
@media(max-height:700px) and (min-width:701px) {
  .hero { min-height: 540px; }
  .hero-scene { width: min(77%, calc((max(100svh, 540px) - 235px) * 1.74)); }
}
@media(max-width:700px) {
  .hero .site-header { height: 124px; grid-template-rows: 42px auto; row-gap: 10px; }
  .hero .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hero .site-header nav a:first-child { display: block; }
  .supplied-logo { width: 80px; }
  .hero-title.supplied-title { width: 82%; }
}