:root {
  color-scheme: dark;
  --cream: #f9efe4;
  --velvet: #39080d;
  --gold: #ffdbb5;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  background: #120c0b;
  color: var(--cream);
}

.hero {
  position: relative;
  display: grid;
  justify-items: center;
  grid-template-rows: minmax(56px, 1fr) auto minmax(56px, 1fr);
  padding: clamp(24px, 3.25vw, 68px) 12px;
  background: var(--velvet) url("./assets/veludo.png") center / cover no-repeat;
}

.hero-nav {
  display: flex;
  align-self: start;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: min(50.1vw, 940px);
  min-width: 470px;
}

.hero-nav a {
  display: grid;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  color: #dfd1be;
  font: 400 clamp(17px, 1.83vw, 32px) / 1.05 "Courier New", monospace;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.hero-nav a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.hero-nav a > span {
  display: inline-block;
  filter: drop-shadow(0 1px 0 #544137) drop-shadow(1px 2px 1px #210305);
}

.nav-letter { display: inline-block; }

@supports (background-clip: text) {
  .hero-nav a > span:not(:has(.nav-letter)),
  .hero-nav .nav-letter {
    background: linear-gradient(180deg, #f2e8d6 16%, #dbceba 55%, #ae9d88 100%);
    background-clip: text;
    color: transparent;
  }
}

.hero-content {
  grid-row: 2;
  width: min(75vw, 1320px, 150svh);
}

.hero-scroll-cue { display: none; }

.hero-brand {
  position: relative;
  padding-top: 11.15%;
}

.hero-brand h1 { margin: 0; }

.hero-logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero-seal {
  position: absolute;
  top: 0;
  right: 13.6%;
  width: 28.62%;
  rotate: 10.46deg;
}

.hero-seal-art {
  display: block;
  width: 100%;
  height: auto;
}

.hero-details {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  margin-top: 5.2%;
  padding-right: 2.7%;
  color: #fff9f3;
  font: 700 3.472vw / .97 "Courier New", monospace;
  text-transform: uppercase;
}

.hero-details p { margin: 0; }
.hero-date { text-align: right; }
.hero-date .ampersand { margin-inline: .06em .14em; }

.ampersand {
  width: 1.2em;
  height: auto;
  margin-inline: .04em;
  vertical-align: -.08em;
}

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

.countdown {
  position: relative;
  padding: clamp(30px, 4.24vw, 66px) 0 clamp(40px, 6vw, 96px);
  background: #000;
}

.countdown-divider {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(10px, 1.53vw, 22px);
  transform: translateY(-50%);
  background: url("./assets/divisor-prata.png") center / max(100%, 1762px) 100% no-repeat;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25%;
  width: min(87.6%, 1262px);
  margin-inline: auto;
}

.countdown-card {
  display: grid;
  place-items: center;
  aspect-ratio: 421 / 308;
  color: #211a15;
  background: url("./assets/placas-regressiva.png") var(--plate-position, 0%) 0 / 428.504% 100% no-repeat;
  container-type: inline-size;
}

.countdown-card:nth-child(2) { --plate-position: 33.333%; }
.countdown-card:nth-child(3) { --plate-position: 66.595%; }
.countdown-card:nth-child(4) { --plate-position: 100%; }

.countdown-number {
  transform: translateY(-12%);
  font: 700 clamp(24px, 25cqi, 82px) / 1 "Courier New", Courier, monospace;
  font-variant-numeric: tabular-nums;
}

@supports (background-clip: text) {
  .countdown-number {
    background:
      repeating-linear-gradient(104deg, #fff4d81c 0 1px, #100e0c16 1px 2px, transparent 2px 4px),
      linear-gradient(174deg, #262018 19%, #625a4b 32%, #302820 45%, #1e1915 58%, #544b40 70%, #211a15 82%);
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 #fff0c880) drop-shadow(0 -1px 0 #17110c70);
  }
}

@media (forced-colors: active) {
  .countdown-number {
    background: none;
    color: CanvasText;
    filter: none;
  }
}

.line-up {
  background: #000;
}

.line-up-title { margin: 0; }

.line-up-title img,
.line-up-frame {
  display: block;
  width: 100%;
  height: auto;
}

.line-up-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 4vw, 32px);
  width: min(90%, 560px);
  margin: 0 auto;
  padding: 16px 0 0;
  list-style: none;
}

.line-up-card {
  position: relative;
  display: grid;
  place-items: center;
  container-type: inline-size;
}

.line-up-caption {
  position: absolute;
  inset: 12% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  color: #332820;
  font: 700 clamp(10px, 9cqi, 22px) / 1.1 "Courier New", Courier, monospace;
  text-align: center;
}

.line-up-caption span {
  color: #65594d;
  font: italic 400 clamp(10px, 6.2cqi, 15px) / 1 Georgia, serif;
  text-shadow: 0 1px 0 #fffdf2;
}

.line-up-caption img {
  display: block;
  width: min(59%, 122px);
  height: auto;
  filter: brightness(0.78);
}

.line-up-portrait {
  position: absolute;
  inset: 7.5% 6.1%;
  overflow: hidden;
  background: #000;
}

.line-up-portrait > img {
  position: absolute;
  top: var(--photo-y);
  left: var(--photo-x);
  width: var(--photo-width);
  height: var(--photo-height);
  max-width: none;
}

.line-up-portrait--vinicius {
  --photo-x: -21.27%;
  --photo-y: -2.08%;
  --photo-width: 121.23%;
  --photo-height: 228.57%;
}

.line-up-portrait--erika {
  --photo-x: -23.38%;
  --photo-y: -77.25%;
  --photo-width: 129.11%;
  --photo-height: 246.31%;
}

.line-up-portrait--emaus-music {
  inset-block: 6.25% 5%;
  --photo-x: -10.48%;
  --photo-y: 0%;
  --photo-width: 112.23%;
  --photo-height: 100%;
}

.line-up-credit {
  position: absolute;
  inset: 0;
  padding: 3% 4%;
  background: linear-gradient(195deg, #000b, transparent 47%);
  color: #ece5da;
  font: 400 clamp(12px, 9.6cqi, 22px) / 1 "Courier Prime", "Courier New", monospace;
  text-align: right;
  text-shadow: 0 1px 2px #000;
}

.line-up-credit strong { display: block; font-weight: inherit; }
.line-up-credit span { font-size: max(9px, .72em); }

.line-up-title {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: 24px 6%;
  background: #000;
}

.line-up-title img { width: min(100%, 470px); }
.line-up-cue { display: none; }
.line-up-carousel-mark,
.line-up-carousel-hint { display: none; }

.line-up-footer {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 20px 64px;
  text-align: center;
  font: 400 clamp(14px, 1.5vw, 18px) / 1.5 "Courier New", Courier, monospace;
}

.line-up-footer p { margin: 0; }

.line-up-footer a {
  position: relative;
  padding: 13px 24px;
  border: 1px solid #b3a493;
  background: linear-gradient(165deg, #fff5e7, #d4c3af);
  box-shadow: inset 0 1px #fff9, 0 3px 12px #e9ceb326;
  color: var(--velvet);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

:is(.line-up-ticket, .purchase-action) { position: relative; cursor: pointer; }
:is(.line-up-ticket, .purchase-action) > span { position: relative; }

:is(.line-up-ticket, .purchase-action)::before,
:is(.line-up-ticket, .purchase-action)::after {
  position: absolute;
  pointer-events: none;
  content: "";
  opacity: 0;
}

:is(.line-up-ticket, .purchase-action)::before {
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, #fffdf3dd 50%, transparent 60%) 100% 0 / 240% 100%;
}

:is(.line-up-ticket, .purchase-action)::after {
  top: -9px;
  right: 7px;
  width: 19px;
  height: 19px;
  background: #fffae7;
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 60%, 50% 100%, 41% 60%, 0 50%, 41% 39%);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.line-up-ticket, .purchase-action) { transition: scale .24s ease-out; }
  :is(.line-up-ticket, .purchase-action):is(:hover, :focus-visible) { scale: 1.045; }
  :is(.line-up-ticket, .purchase-action):is(:hover, :focus-visible)::before { animation: ticket-shine 0.42s ease-out; }
  :is(.line-up-ticket, .purchase-action):is(:hover, :focus-visible)::after { animation: ticket-glint 0.34s ease-out 0.32s both; }
}

@keyframes ticket-shine {
  0% { background-position: 100% 0; opacity: 0; }
  18%, 75% { opacity: 1; }
  100% { background-position: 0 0; opacity: 0; }
}

@keyframes ticket-glint {
  0% { opacity: 0; transform: scale(.3); }
  28% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(.45); }
}

.line-up-footer a:focus-visible,
.line-up-cue:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.line-up.is-scroll-animated .line-up-scroll { min-height: 240svh; }

.line-up.is-scroll-animated .line-up-sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
}

@media (width < 800px) {
  .line-up.is-mobile-carousel .line-up-scroll { min-height: 620svh; }

  .is-mobile-carousel .line-up-carousel-mark {
    position: absolute;
    top: clamp(20px, 7svh, 64px);
    left: 50%;
    display: block;
    width: min(45vw, 25svh, 188px);
    height: auto;
    translate: -50% 0;
  }

  .is-mobile-carousel .line-up-carousel-hint {
    position: absolute;
    bottom: clamp(20px, 7svh, 64px);
    left: 50%;
    display: block;
    width: clamp(22px, 7vw, 32px);
    height: auto;
    translate: -50% 0;
  }

  .line-up-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 2.5vw, 14px);
    width: min(100%, 430px);
    margin-inline: auto;
    padding: 12px clamp(10px, 3vw, 18px);
  }

  .line-up-cards { display: contents; }

  .line-up-title {
    position: static;
    grid-column: 1 / -1;
    order: 1;
    width: 100%;
    padding: 4px 0;
  }

  .line-up-card:nth-child(n + 5) { order: 2; }

  .line-up-card {
    width: min(100%, 185px);
    aspect-ratio: 284 / 271;
    background: url("./assets/line-up/frame-square.png") center / contain no-repeat;
  }

  .line-up-card .line-up-frame { display: none; }
  .line-up-portrait--emaus-music { inset: 7.5% 6.1%; }
  .line-up-portrait--emaus-music > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 64%;
  }

  .is-mobile-carousel .line-up-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 0;
    overflow: clip;
  }

  .is-mobile-carousel .line-up-title,
  .is-mobile-carousel .line-up-cards {
    grid-area: 1 / 1;
    width: 100%;
  }

  .is-mobile-carousel .line-up-title {
    z-index: 3;
    width: min(86%, 360px);
    background: transparent;
  }

  .is-mobile-carousel .line-up-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    gap: 0;
    padding: 0;
  }

  .is-mobile-carousel .line-up-card {
    grid-area: 1 / 1;
    width: min(72vw, 46svh, 315px);
    order: 0;
    aspect-ratio: 304 / 477;
    background-image: url("./assets/line-up/frame-tall.png");
    background-size: 94% 96%;
    filter: drop-shadow(10px 9px 10px #000c);
  }

  .is-mobile-carousel .line-up-portrait { inset: 6% 8%; }
  .is-mobile-carousel .line-up-portrait > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 27%;
  }

  .is-mobile-carousel .line-up-portrait--erika > img { object-position: center 65%; }
  .is-mobile-carousel .line-up-portrait--emaus-music {
    background: url("./assets/line-up/emaus-music.png") center / cover no-repeat;
  }
  .is-mobile-carousel .line-up-portrait--emaus-music > img {
    object-fit: contain;
    object-position: center 44%;
    background: linear-gradient(#000b, #000d);
  }
  .is-mobile-carousel .line-up-credit {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 6px;
    padding: 7%;
    background: linear-gradient(0deg, #000e, transparent 54%);
    font-size: clamp(16px, 8.5cqi, 30px);
  }

  .is-mobile-carousel .line-up-caption img { width: 55%; }
  .is-mobile-carousel .line-up-caption span { font-size: clamp(14px, 6cqi, 20px); }
}

@media (min-width: 800px) and (min-height: 500px) {
  .line-up-sticky {
    display: grid;
    place-items: center;
  }

  .line-up-stage {
    position: relative;
    width: min(100%, 150svh, 1440px);
    aspect-ratio: 1440 / 958;
  }

  .line-up-title {
    position: absolute;
    top: 44.89%;
    left: 28.125%;
    width: 43.75%;
    padding: 0;
    background: none;
  }

  .line-up-title img { width: 100%; }
  .line-up-cards { display: contents; }

  .line-up-card {
    position: absolute;
    top: calc((var(--y) - 10) / 958 * 100%);
    left: calc((var(--x) - var(--w) * .065) / 1440 * 100%);
    width: calc(var(--w) * 1.13 / 1440 * 100%);
  }

  .line-up.is-scroll-animated .line-up-cue {
    position: absolute;
    bottom: 4.75%;
    left: 50%;
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    cursor: pointer;
  }

  .line-up-cue img { grid-area: 1 / 1; }
  .line-up-cue img:last-child,
  .line-up-cue:is(:hover, :focus-visible) img:first-child { opacity: 0; }
  .line-up-cue:is(:hover, :focus-visible) img:last-child { opacity: 1; }
}

.conference-story {
  background: #102d1c url("./assets/recap/verde.png") center / cover no-repeat;
}

.recap {
  --recap-seam: 49%;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  padding-inline: 4%;
}

.recap::before {
  position: absolute;
  inset: 0 0 auto;
  height: var(--recap-seam);
  background: #000;
  content: "";
}

.recap-divider {
  top: var(--recap-seam);
}

.recap-frame {
  position: relative;
  z-index: 1;
  width: min(85vw, 1115px);
  aspect-ratio: 1346 / 968;
}

.recap-frame-art,
.recap-frame-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.recap-frame-shadow {
  top: 1.3%;
  left: -1.8%;
  width: 102.6%;
  mix-blend-mode: multiply;
  z-index: -1;
}

.recap-screen {
  position: absolute;
  inset: 14% 13.3%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(ellipse, #26352c, #101612 75%);
  color: var(--cream);
  text-align: center;
}

.recap-placeholder {
  display: grid;
  width: clamp(38px, 8vw, 100px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #e9ddcdaa;
  border-radius: 50%;
  background: #e9ddcd17;
  box-shadow: inset 0 1px #fff3, 0 8px 30px #0007;
}

.recap-play {
  width: 28%;
  aspect-ratio: 1;
  background: var(--cream);
  clip-path: polygon(12% 0, 100% 50%, 12% 100%);
}

.recap-video { display: none; }
.recap-video[src] { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.recap-screen:has(.recap-video[src]) .recap-placeholder { position: absolute; clip-path: inset(50%); }

.conference-about {
  overflow: clip;
  padding-bottom: clamp(30px, 5vw, 74px);
}

.letter-stage {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: min(20.3vw, 292px) 0 min(14vw, 202px);
}

.conference-letter {
  position: relative;
  z-index: 2;
  width: 58.4%;
  margin-left: 19.3%;
  padding: 3%;
  background: radial-gradient(ellipse 150% 88% at center, #f0e4ce 56%, #b8ae9b 100%);
  box-shadow: 0 18px 32px #0007, 0 7px 20px #0005;
  color: #130e0a;
  font: 400 clamp(13px, 1.667cqi, 24px) / 1.2 "Courier Prime", "Courier New", monospace;
}

.conference-letter h2 {
  margin: 0 0 .22em;
  font: 700 clamp(25px, 3.47cqi, 50px) / 1.14 "Courier Prime", "Courier New", monospace;
  text-transform: uppercase;
}

.conference-letter p { margin: 0 0 1.25em; }
.conference-letter p:last-child { margin-bottom: 0; }
.conference-letter .letter-label { margin-bottom: .55em; color: #500208; font-size: .67em; text-transform: uppercase; }

.letter-envelope,
.letter-photo {
  position: absolute;
  display: block;
  margin: 0;
}

.letter-envelope {
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 18px 16px #0008);
}

.letter-envelope--closed { left: 10.3%; bottom: 1%; width: 71.1%; rotate: -6.97deg; }
.letter-envelope--open { left: 11.95%; top: 1.9%; width: 73%; }

.letter-photo {
  z-index: 3;
  width: 11.35%;
  aspect-ratio: 271 / 376;
  padding: .8%;
  background: url("./assets/recap/letter-photo-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 5px #0005);
}

.letter-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.letter-photo--left { z-index: 1; left: 11.3%; top: 33%; rotate: -16.41deg; }
.letter-photo--top { left: 56.6%; top: 13%; width: 13.7%; rotate: 8.03deg; }
.letter-photo--right { left: 67.1%; top: 22%; rotate: 13.81deg; }

@media (width < 700px) {
  .recap { padding-inline: 1%; }
  .recap-frame { width: min(96vw, 560px); }
  .recap-placeholder { width: clamp(48px, 11vw, 72px); }
  .conference-about { padding-top: clamp(24px, 7vw, 48px); }
  .letter-stage { padding: 31vw 0 11vw; }
  .conference-letter { width: 78%; margin-left: 11%; padding: 5%; font-size: clamp(13px, 3.1cqi, 17px); }
  .conference-letter h2 { font-size: clamp(21px, 5.1cqi, 34px); }
  .letter-envelope { filter: none; }
  .letter-envelope--closed { left: 2%; bottom: 5vw; width: 94%; }
  .letter-envelope--open { left: 1%; width: 98%; top: 0; }
  .letter-photo { padding: 1%; filter: drop-shadow(0 3px 3px #0005); }
  .letter-photo--left { z-index: 3; left: 51%; top: 16vw; width: 14%; }
  .letter-photo--top { left: 63%; top: 14vw; width: 15%; }
  .letter-photo--right { left: 75%; top: 17vw; width: 14%; }
}

.tickets,
.conference-faq {
  padding: clamp(58px, 9vw, 134px) clamp(18px, 5vw, 72px);
  font: 400 16px / 1.5 "Courier Prime", "Courier New", monospace;
}

.tickets { background: #000; }
.purchase-heading { margin: 0 auto clamp(32px, 6vw, 70px); text-align: center; }
.purchase-heading p {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.purchase-heading h2 {
  margin: 0;
  font: 400 clamp(36px, 6.7vw, 90px) / .96 Georgia, serif;
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  width: min(100%, 1120px);
  margin-inline: auto;
}
.ticket-card {
  grid-column: span 5;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
  padding: clamp(24px, 3.4vw, 48px);
  border: 1px solid #a7967c;
  background: radial-gradient(ellipse at 50% 35%, #f6ead3 25%, #dcd0b8);
  color: #271810;
}
.ticket-card--fast {
  border-color: #bf9954;
  box-shadow: inset 0 0 0 4px #d8c296, inset 0 0 0 5px #97723b;
}
.ticket-card h3,
.faq-support h3 { margin: 0; font: 400 clamp(26px, 3vw, 43px) / 1 Georgia, serif; }
.ticket-card p,
.faq-support p { margin: 0; }
.ticket-price { color: #721b21; font-size: clamp(19px, 2.25vw, 30px); font-weight: 700; }

.purchase-action {
  display: inline-block;
  padding: 11px 15px;
  border: 1px solid #711c22;
  background: #711c22;
  color: #fff1db;
  font: 700 13px / 1.35 "Courier Prime", "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.ticket-card .purchase-action { margin-top: 6px; }
.purchase-action--outline { background: transparent; color: #711c22; }
.purchase-action:disabled { opacity: .7; }

.conference-faq { color-scheme: light; background: #efe3cc; color: #301c13; }
.conference-faq .purchase-heading p,
.faq-group summary { color: #781b22; }
.faq-groups { width: min(100%, 860px); margin-inline: auto; }
.faq-group + .faq-group { margin-top: 34px; }
.faq-group h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.faq-group details { border-block-start: 1px solid #ab9172; }
.faq-group details:last-child { border-block-end: 1px solid #ab9172; }
.faq-group summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary::after { content: "+" / ""; font-size: 22px; line-height: 1; }
.faq-group details[open] summary::after { content: "−" / ""; }
.faq-group details p { margin: 0; padding: 0 28px 16px 0; }
.faq-support {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: clamp(45px, 8vw, 92px) auto 0;
  text-align: center;
}

@media (width < 700px) {
  .ticket-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 740px) {
  .hero {
    padding-block: 20px;
  }

  .hero-nav {
    width: min(100%, 485px);
    min-width: 0;
    gap: 4px;
  }

  .hero-nav a {
    padding-inline: 5px;
    font-size: clamp(12px, 4vw, 20px);
  }

  .hero-content {
    width: min(100%, 540px);
  }

  .hero-scroll-cue {
    grid-row: 3;
    align-self: end;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--cream);
  }
  .hero-scroll-cue span {
    width: 13px;
    height: 13px;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    rotate: 45deg;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-scroll-cue span { animation: hero-scroll 1.65s ease-in-out infinite alternate; }
  }

  .hero-details { font-size: clamp(18px, 5.8vw, 35px); }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 20px);
    width: min(90%, 550px);
  }
}

@keyframes hero-scroll { to { translate: 0 7px; } }

@font-face {
  font-family: "Benton Compressed";
  src: url("./assets/font/Benton Modern Font Family/BentonModDispComp-SemibldIt.otf") format("opentype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

.hero { min-height: 100vh; min-height: 100svh; }

.tickets {
  position: relative;
  isolation: isolate;
  padding-block: clamp(36px, 4.2vw, 62px) clamp(52px, 5vw, 76px);
  background: #af1616;
}
.tickets::before,
.conference-faq::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}
.tickets::before {
  background: url("./assets/ingressos/preco-textura.png") right -5vw bottom -16vw / min(43vw, 580px) auto no-repeat;
}
.ticket-grid {
  width: min(100%, 990px);
  grid-template-columns: minmax(0, 394fr) minmax(0, 581fr);
  grid-template-areas: "heading fast" "individual fast" "caravan volunteers";
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
.tickets .purchase-heading {
  grid-area: heading;
  container-type: inline-size;
  margin: 0;
  padding-left: 12%;
  text-align: left;
}
.purchase-heading h2,
.faq-group h3,
.faq-support h3 {
  font-family: "Benton Compressed", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
}
.tickets .purchase-heading h2 {
  color: #ece5da;
  font-size: clamp(30px, 18cqi, 76px);
  line-height: 1.2;
  text-shadow: 0 7px 9px #0008;
}
.purchase-heading > p { letter-spacing: .65em; }
.ticket-card {
  grid-column: auto;
  position: relative;
  isolation: isolate;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1vw, 14px);
  border: 0;
  background: none;
  color: #ece5da;
  text-align: center;
  box-shadow: none;
}
.ticket-card--individual { grid-area: individual; width: 100%; aspect-ratio: 394 / 550; padding: 15% 21%; }
.ticket-card--fast { grid-area: fast; width: 100%; aspect-ratio: 581 / 824; padding: 15% 24%; }
:is(.ticket-card--individual, .ticket-card--fast) { container-type: inline-size; }
:is(.ticket-card--individual, .ticket-card--fast) > * { min-width: 0; max-width: 100%; }
.ticket-card--individual::before,
.ticket-card--fast::before,
.ticket-tag::before {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.ticket-card--individual::before {
  top: 50%;
  left: 50%;
  width: 140%;
  height: 71.5%;
  background: url("./assets/ingressos/individual.png") center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
  filter: drop-shadow(7px 4px 6px #35060466);
}
.ticket-card--fast::before {
  inset: 0;
  translate: -2px 0;
  background: url("./assets/ingressos/fastpass.png") right center / 139.89% 100% no-repeat;
}
.ticket-card h3 { font: 700 clamp(20px, 2.4vw, 35px) / 1 "Courier Prime", "Courier New", monospace; text-transform: uppercase; }
.ticket-card--individual h3 { font-size: clamp(17px, 13.5cqi, 35px); }
.ticket-card--fast h3 { font-size: clamp(20px, 14.5cqi, 45px); }
.ticket-card h3 small { display: block; font-size: .47em; font-weight: 400; }
.ticket-status { padding: .45em .6em; background: #133b1a; font-size: clamp(9px, .98vw, 14px); text-transform: uppercase; }
.ticket-card .ticket-price { display: flex; align-items: baseline; justify-content: center; gap: .04em; color: inherit; font: 700 min(40cqi, 104px) / .9 "Courier New", monospace; filter: blur(2.5px); white-space: nowrap; letter-spacing: -.08em; }
.ticket-card--fast .ticket-price { font-size: min(40cqi, 134px); }
.ticket-price small { font-size: .36em; letter-spacing: 0; }
.ticket-card > p:not([class]) { font-size: clamp(12px, 1.25vw, 18px); line-height: 1.2; }
.ticket-card .purchase-action { border: 0; color: #500208; background: linear-gradient(115deg, #ece5da, #f0e4ce); }
.ticket-tag {
  width: min(100%, 329px);
  min-height: 205px;
  justify-items: start;
  padding: 27px;
  color: #500208;
  text-align: left;
  rotate: -3.43deg;
}
.ticket-tag:nth-of-type(3) { grid-area: caravan; justify-self: end; }
.ticket-tag:nth-of-type(4) { grid-area: volunteers; rotate: 4.43deg; }
.ticket-tag::before {
  top: 50%;
  left: 50%;
  width: 65%;
  aspect-ratio: 304 / 477;
  background: url("./assets/ingressos/etiqueta.png") center / 100% 100% no-repeat;
  height: auto;
  transform: translate(-50%, -50%) rotate(90deg);
  filter: drop-shadow(7px -2px 7px #33060842);
}
.ticket-tag > p:not([class]) { color: #21160f; }
.ticket-tag .purchase-action { justify-self: end; }

@media (width >= 700px) {
  .ticket-tag {
    min-height: 250px;
    padding: 28px 27px;
  }

  .ticket-tag::before {
    width: 77%;
    aspect-ratio: .77;
  }
}

.purchase-action.purchase-action--dark {
  border: 0;
  background: linear-gradient(115deg, #500208, #69161c);
  color: #ece5da;
  box-shadow: -4px 4px 4.7px #0004;
}
.conference-faq { position: relative; isolation: isolate; overflow: clip; background: #faf1ea; color: #133b1a; padding-bottom: clamp(90px, 17vw, 235px); }
.conference-faq::before {
  inset: auto auto 0 50%;
  width: min(125%, 1750px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, 39%);
  background: url("./assets/ingressos/perguntas.png") center / contain no-repeat;
}
.conference-faq .purchase-heading { margin-bottom: clamp(44px, 7vw, 105px); }
.conference-faq .purchase-heading p,
.faq-group summary { color: inherit; }
.faq-groups { width: min(100%, 1175px); }
.faq-group h3 { font-size: clamp(26px, 2.75vw, 40px); letter-spacing: 0; }
.faq-group details,
.faq-group details:last-child { border-color: #133b1a42; }
.faq-group details:first-of-type { border-top-color: #133b1a; }
.faq-group summary { min-height: clamp(53px, 6.3vw, 88px); font-size: clamp(15px, 1.9vw, 27px); line-height: 1.2; text-transform: uppercase; }
.faq-group summary::after,
.faq-group details[open] summary::after {
  content: "";
  width: 19px;
  height: 19px;
  background: url("./assets/ingressos/mais.svg") center / contain no-repeat;
}
.faq-group details[open] summary::after { transform: rotate(45deg); }
.faq-group details p { font-size: clamp(14px, 1.5vw, 21px); line-height: 1.3; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .faq-group summary::after { transition: transform .24s ease; }
  .faq-group details[open] > p { animation: faq-answer .26s ease-out; }
}
@keyframes faq-answer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (width < 700px) {
  .ticket-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "individual" "fast" "caravan" "volunteers"; }
  .tickets .purchase-heading { padding: 0; text-align: center; }
  .tickets .purchase-heading h2 { font-size: clamp(34px, 10vw, 62px); }
  .ticket-card { width: min(100%, 340px); justify-self: center; }
  .ticket-card--individual { width: min(88%, 280px); padding-inline: min(18.5%, 59px); }
  .ticket-card--fast {
    z-index: 1;
    width: min(112%, 98vw, 510px);
    margin-bottom: clamp(-44px, -8vw, -24px);
    padding-inline: min(24%, 115px);
  }
  .ticket-card--individual::before { left: calc(50% - 5px); }
  .ticket-card--fast::before { translate: -8px 0; }
  .ticket-card--individual .purchase-action,
  .ticket-card--fast .purchase-action {
    display: grid;
    place-items: center;
    min-height: 44px;
    font-size: 12px;
    padding-inline: 12px;
  }
  .ticket-tag:nth-of-type(3) { justify-self: center; }
  .ticket-tag { width: min(92%, 315px); }
}
.is-preloading { overflow: hidden; background-color: #133b1a; }
.is-preloading .page-preload:not([hidden]) { display: grid; }
.is-preloading .page-preload:not(.is-animating) > * { visibility: hidden; }
.page-preload {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  display: none;
  place-items: center;
  background: #133b1a url("./assets/preload/fundo.png") center / cover no-repeat;
}
.preload-brand { position: relative; z-index: 1; width: min(84vw, 903px, 136svh); aspect-ratio: 903 / 530; margin-bottom: 10svh; }
.preload-brand img, .preload-stamp, .preload-ornament { position: absolute; height: auto; }
.preload-emaus { width: 55%; left: 0; top: 10.7%; }
.preload-conference { width: 100%; left: 0; top: 43.3%; }
.preload-year { width: 25.1%; right: 1.6%; top: 66.7%; }
.preload-seal { width: 31.4%; left: 48%; top: 0; }
.preload-stamp { width: min(23%, 327px); bottom: -8%; right: 12%; }
.preload-ornament { width: min(63%, 907px); top: 86%; left: 50%; translate: -50% 0; }
.preload-progress { position: absolute; top: 78%; left: 0; width: 58%; color: #ece5da; font: 400 clamp(11px, 1.6vw, 20px) / 1 "Courier New", monospace; }
.preload-progress i { display: block; margin-top: 8px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }

@media (width < 700px) {
  .preload-brand { margin-bottom: 16svh; }

  /* Escala a composição inferior a partir da largura do frame do Figma. */
  .preload-stamp {
    width: 31.4%;
    right: .75%;
    bottom: -15.1vw;
  }
  .preload-ornament {
    width: 86.9%;
    left: 46.9%;
    top: auto;
    bottom: -54.7vw;
  }
}