.access-page,
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding-block: var(--space-10) var(--space-12);
}

.access-page__icon {
  width: 157px;
  aspect-ratio: 157 / 134;
  background-image: url("../assets/images/eye-clap.webp");
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: access-eye-clap 2s steps(1) infinite;
  mix-blend-mode: darken;
}

@keyframes access-eye-clap {
  0%   { background-position: 0% 0%; }
  80%  { background-position: 50% 0%; }
  84%  { background-position: 100% 0%; }
  90%  { background-position: 50% 0%; }
  94%  { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .access-page__icon {
    animation: none;
  }
}

.access-page__title {
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.access-page__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.access-page__feedback {
  min-height: 1.5em;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

.access-page__help {
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.featured-product {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

.gallery {
  width: 100%;
  max-width: 512px;
  margin-inline: auto;
}

.gallery__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.gallery__thumbs button {
  width: 80px;
  opacity: 0.55;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.gallery__thumbs button[aria-pressed="true"],
.gallery__thumbs button:hover {
  opacity: 1;
}

.gallery__thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.featured-product__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.featured-product__title {
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.featured-product__price {
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
}

.featured-product__desc {
  letter-spacing: var(--tracking-tight);
}

.featured-product__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.featured-product__label {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.featured-product__form .cta-link {
  margin-inline: 0;
}

.featured-product__form .cta-link--large {
  font-size: var(--fs-heading);
}

.featured-product__feedback {
  min-height: 1.5em;
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .featured-product {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.contact-page__headline {
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .contact-page__headline {
    white-space: nowrap;
  }
}

.contact-page__lead {
  max-width: 80ch;
  letter-spacing: var(--tracking-tight);
}

.contact-page__sent {
  max-width: 44ch;
  margin-inline: auto;
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
}

.contact-page__note {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-muted);
}

.contact-page__more {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
}

.prose {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  letter-spacing: var(--tracking-tight);
  padding-block: var(--space-4);
}

.prose p + p {
  margin-top: var(--space-3);
}

.totem-views {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 880px;
  margin-inline: auto;
  padding-block: var(--space-4) var(--space-8);
}

.totem-views img {
  height: 200px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.totem-views figcaption {
  margin-top: var(--space-1);
  text-align: center;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .totem-views {
    grid-template-columns: repeat(4, 1fr);
  }
}

.concept-art {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
}

.concept-art__hero {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-1);
}

.concept-art__hero figcaption {
  flex-shrink: 0;
  align-self: center;
  font-size: var(--fs-body);
  white-space: nowrap;
}

.concept-art__hero img:nth-child(2) {
  flex-shrink: 0;
  width: 24px;
  height: auto;
}

.concept-art__hero img:last-child {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.concept-art__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.concept-art__details img {
  width: 154px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-inline: auto;
}

.concept-art__details figcaption {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}

.concept-art__notes h3 {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.concept-art__notes ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.concept-art__notes li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 768px) {
  .concept-art {
    grid-template-columns: 1fr 1.4fr 0.8fr;
    align-items: start;
  }
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-6);
}

.hero__mark {
  width: clamp(96px, 12vw, 165px);
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-3);
  background-image: url("../assets/images/head-spritesheet.webp");
  background-size: 400% 400%;
  background-repeat: no-repeat;
  animation: hero-mark-sprite 3.5s steps(1) infinite;
  mix-blend-mode: darken;
}

@keyframes hero-mark-sprite {
  0%        { background-position: 0% 0%; }
  53.03571% { background-position: 33.3333% 0%; }
  54.64286% { background-position: 66.6667% 0%; }
  56.25%    { background-position: 100% 0%; }
  69.28571% { background-position: 0% 33.3333%; }
  70.89286% { background-position: 33.3333% 33.3333%; }
  72.5%     { background-position: 66.6667% 33.3333%; }
  74.10714% { background-position: 100% 33.3333%; }
  75.71429% { background-position: 0% 66.6667%; }
  77.32143% { background-position: 33.3333% 66.6667%; }
  90.35714% { background-position: 66.6667% 66.6667%; }
  91.96429% { background-position: 100% 66.6667%; }
  93.57143% { background-position: 0% 100%; }
  95.17857% { background-position: 33.3333% 100%; }
  96.78571% { background-position: 66.6667% 100%; }
  98.39286% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark {
    animation: none;
  }
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.hero__dates,
.hero__location {
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}


.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-8) var(--space-4);
}

.cta-band__eyebrow {
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cta-band .cta-link--large {
  margin-top: var(--space-4);
}

.menu-page,
.program-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-10);
}

.menu-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "links links"
    "prev  next";
  align-content: center;
  justify-items: center;
  gap: var(--space-6);
}

.menu-page > nav {
  grid-area: links;
}

.menu-page__side--prev {
  grid-area: prev;
  justify-self: start;
  text-align: left;
}

.menu-page__side--next {
  grid-area: next;
  justify-self: end;
  text-align: right;
}

.menu-page__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.menu-page__links a {
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.menu-page__side {
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

@media (min-width: 768px) {

  .menu-page {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .menu-page__side {
    max-width: 12rem;
  }
}

.program-page {
  gap: var(--space-4);
}

.program-page__figure {
  width: min(320px, 56vw);
  aspect-ratio: 400 / 472;
  background-image: url("../assets/images/walking-cycle.webp");
  background-size: 400% 300%;
  background-repeat: no-repeat;
  animation: program-walk 1.2s steps(1) infinite;
  mix-blend-mode: darken;
}

@keyframes program-walk {
  0%        { background-position: 0% 0%; }
  8.33333%  { background-position: 33.3333% 0%; }
  16.66667% { background-position: 66.6667% 0%; }
  25%       { background-position: 100% 0%; }
  33.33333% { background-position: 0% 50%; }
  41.66667% { background-position: 33.3333% 50%; }
  50%       { background-position: 66.6667% 50%; }
  58.33333% { background-position: 100% 50%; }
  66.66667% { background-position: 0% 100%; }
  75%       { background-position: 33.3333% 100%; }
  83.33333% { background-position: 66.6667% 100%; }
  91.66667% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .program-page__figure {
    animation: none;
  }
}

.program-page__status {
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tickets-intro {
  margin: var(--space-3) auto var(--space-6);
  text-align: center;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.section-heading {
  text-align: center;
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.tickets-introduction {
  margin: var(--space-8) auto;
  text-align: center;
}

.tickets-introduction p + p {
  margin-top: var(--space-2);
}

.accordion__list {
  margin-block: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.accordion__list li {
  position: relative;
  padding-left: var(--space-3);
}

.traces-meta {
  text-align: center;
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

.traces-intro {
  max-width: 50ch;
  margin: var(--space-6) auto;
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
}

.traces-hero {
  position: relative;
  max-width: 950px;
  margin-inline: auto;
  margin-block: var(--space-6);
}

.traces-hero img {
  width: 100%;
  height: auto;
}

.traces-hero::before {
  content: "";
  position: absolute;
  width: 83px;
  height: 123px;
  left: -83px;
  top: -62px;
  background: url("../assets/images/before_firest_rite.svg") no-repeat center;
  background-size: contain;
}

.traces-hero::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 100px;
  right: -30px;
  bottom: -33px;
  background: url("../assets/images/regular-release-ticket.svg") no-repeat center;
  background-size: contain;
  transform: scale(2.5);
}

.trace {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  max-width: 950px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .trace {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
}

.trace__intro {
  text-align: left;
}

.trace__title {
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-1);
}

.trace__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 4px;
  background: url("../assets/images/underline.svg") no-repeat left center;
  background-size: 100% 100%;
}

.trace__text {
  letter-spacing: var(--tracking-tight);
  font-size: var(--fs-link);
  margin-top: var(--space-2);
}

.trace__stamp-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trace__stamp {
  text-align: center;
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: rotate(-8deg);
}

@media (min-width: 768px) {
  .trace_tierce {
    grid-template-columns: 1fr 2fr;
  }
}

.trace_tierce:before {
  content: "";
  position: absolute;
  width: 56px;
  height: 67px;
  background: url("../assets/images/early-bird-ticket.svg") no-repeat center;
  left: 28%;
  top: 0;
  transform: scale(1.5);
}

.trouble-page {
  padding-block: var(--space-4) var(--space-12);
}

.trouble-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.trouble-form__feedback {
  min-height: 1.5em;
  text-align: center;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

.trouble-form {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.trouble-form__grid {
  display: grid;
}

@media (min-width: 768px) {
  .trouble-form__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
  }
}

.trouble-form__submit {
  align-self: center;
  margin-top: var(--space-6);
}

.concept-art__notes li::before,
.accordion__list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
}

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6) var(--content-padding-inline);
}

.error-page__code {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 1;
}

.error-page__mark {
  flex-shrink: 0;
  width: clamp(5rem, 16vw, 11rem);
  aspect-ratio: 1 / 1;
  background-image: url("../assets/images/head-spritesheet.webp");
  background-size: 400% 400%;
  background-repeat: no-repeat;
  animation: hero-mark-sprite 3.5s steps(1) infinite;
  mix-blend-mode: darken;
}

@media (prefers-reduced-motion: reduce) {
  .error-page__mark {
    animation: none;
  }
}

.error-page__text {
  max-width: 50ch;
  font-size: var(--fs-link);
  letter-spacing: var(--tracking-wide);
}

.error-page .cta-link--large {
  font-size: var(--fs-lang);
}

@media (max-width: 767px) {
  .discover-page .page-title,
  .traces-page .page-title {
    margin-top: var(--space-8);
  }
}