:root {
  --red: #56160c;
  --pink: #c64790;
  --orange: #df6631;
  --lilac: #ac87c1;
  --cream: #fff6ed;
}

@font-face {
  font-family: "Teenage Sunkies";
  src: url("assets/fonts/teenage-sunkies.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "GC Vank";
  src: url("assets/fonts/gc-vank.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Focus Grotesk";
  src: url("assets/fonts/focus-grotesk-regular.woff2") format("woff2");
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--red);
  color: var(--cream);
  font-family: "Focus Grotesk";
  font-synthesis: none;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
li,
figure,
blockquote,
fieldset,
legend,
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
strong,
b {
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.red-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--red);
}

.red-page::before {
  content: "";
  position: absolute;
  inset: -50vmax;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/splash-overlay-07.jpg");
  background-position: center;
  background-size: cover;
  opacity: 0.1;
  transform: rotate(90deg);
}

[data-overlay="splash"]::before {
  background-image: url("assets/splash-overlay-07.jpg");
}

[data-overlay="login"]::before {
  background-image: url("assets/login-overlay-04.jpg");
}

[data-overlay="menu"]::before {
  background-image: url("assets/menu-overlay-02.jpg");
}

[data-overlay="faq"]::before {
  background-image: url("assets/faq-overlay-05.jpg");
}

[data-overlay="upload"]::before {
  background-image: url("assets/upload-overlay-03.jpg");
}

[data-overlay="location"]::before {
  background-image: url("assets/location-overlay-09.jpg");
}

[data-overlay="songs"]::before {
  background-image: url("assets/songs-overlay-08.jpg");
}

[data-overlay="dress"]::before {
  background-image: url("assets/dress-overlay-01.jpg");
}

.red-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: soft-light;
}

.landing-logo-button {
  position: absolute;
  top: clamp(74px, 18vh, 180px);
  right: clamp(24px, 13vw, 180px);
  width: clamp(210px, 42vw, 560px);
  display: block;
  line-height: 0;
}

.landing-logo-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 12px;
}

.login-view {
  display: block;
  padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
}

.login-form {
  position: relative;
  min-height: calc(100vh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)));
  min-height: calc(100svh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)));
}

.login-logo-button {
  position: absolute;
  top: 8vh;
  right: clamp(22px, 8%, 42px);
  width: min(58%, 270px);
  padding: 0;
  line-height: 0;
}

.login-logo-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 12px;
}

.login-logo {
  width: 100%;
}

.login-enter-button {
  position: absolute;
  top: 66vh;
  right: clamp(20px, 7%, 36px);
  color: #4f5cd6;
  font-family: "Teenage Sunkies";
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  line-height: 0.82;
  text-transform: lowercase;
  transform: rotate(180deg);
}

.login-enter-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 10px;
}

.login-enter-button[disabled] {
  cursor: default;
  opacity: 0.7;
}

.login-back-button {
  position: absolute;
  top: 24vh;
  left: 13vw;
  z-index: 1;
  width: min(31.5%, 138px);
  line-height: 0;
}

.login-back-button img {
  width: 100%;
}

.login-back-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 10px;
}

.email-field {
  position: absolute;
  margin: 0;
}

.email-field {
  top: 48vh;
  right: clamp(20px, 7%, 36px);
  width: min(62%, 260px);
}

.login-form input {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.email-field input {
  color: var(--pink);
  font-family: "GC Vank";
  font-size: clamp(1.2rem, 5.8vw, 1.65rem);
  text-align: right;
  text-transform: lowercase;
}

.country-select {
  width: 100%;
  margin-bottom: clamp(8px, 2vw, 14px);
  color: var(--orange);
  font-family: "GC Vank";
  font-size: clamp(0.96rem, 4.6vw, 1.22rem);
  text-align: right;
  text-transform: lowercase;
}

.email-field input::placeholder {
  color: currentColor;
  opacity: 1;
}

.login-status {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(72vw, 320px);
  color: var(--orange);
  font-family: "Focus Grotesk";
  font-size: clamp(0.82rem, 2.6vw, 1rem);
  line-height: 1.15;
  text-align: right;
}

.home-screen {
  aspect-ratio: 1982 / 1242;
  min-height: 100vh;
  min-height: 100svh;
  container-type: size;
}

.home-link,
.blue-button {
  position: absolute;
  z-index: 1;
}

.home-link {
  display: block;
  line-height: 0.84;
  white-space: nowrap;
}

.home-guest-name {
  position: absolute;
  top: 9%;
  right: 7%;
  z-index: 1;
  max-width: min(48vw, 760px);
  color: #4f5cd6;
  font-family: "GC Vank";
  font-size: clamp(2.025rem, 4.32vw, 5.4rem);
  line-height: 0.95;
  text-align: right;
  text-transform: lowercase;
  transform: rotate(180deg);
}

.home-guest-name:empty {
  display: none;
}

.faq-link {
  top: 14.1%;
  left: 13.6%;
  color: #bd3430;
  font-family: "Teenage Sunkies";
  font-size: clamp(3.12rem, 6.825vw, 8.45rem);
}

.upload-link {
  top: 36.8%;
  left: 8.8%;
  color: var(--orange);
  font-family: "GC Vank";
  font-size: clamp(2.34rem, 5.135vw, 6.37rem);
}

.location-link {
  top: 53.9%;
  left: 50.7%;
  color: var(--lilac);
  font-family: "Focus Grotesk";
  font-size: clamp(1.04rem, 2.08vw, 2.665rem);
}

.songs-link {
  top: 63.1%;
  left: 5%;
  color: var(--pink);
  font-family: "Teenage Sunkies";
  font-size: clamp(2.47rem, 5.72vw, 7.085rem);
  transform: rotate(180deg);
}

.dress-link {
  top: 20%;
  right: 18.4%;
  color: #ff3b24;
  font-family: "GC Vank";
  font-size: clamp(1.3rem, 2.665vw, 3.3475rem);
  text-align: right;
}

.dress-link span {
  display: block;
}

.dress-link span + span {
  transform: rotate(180deg);
  transform-origin: center;
}

.blue-button {
  display: block;
  line-height: 0;
}

.blue-button img,
.page-back-button img {
  width: 100%;
}

.blue-top {
  right: 27.7%;
  bottom: 13.1%;
  width: 7.4%;
}

.blue-right {
  top: 32.2%;
  right: 8.2%;
  width: 8.5%;
}

.blue-left {
  top: 50.5%;
  left: 2.6%;
  width: 7.4%;
}

.blue-bottom {
  right: 27.7%;
  bottom: 13.1%;
  width: 7.4%;
}

.info-screen {
  display: grid;
  align-items: center;
  padding: clamp(38px, 8vw, 120px);
}

.page-back-button {
  position: absolute;
  top: 18%;
  left: 12%;
  z-index: 2;
  width: min(18vw, 138px);
  line-height: 0;
}

[data-overlay="songs"] .page-back-button {
  top: clamp(20px, 5vh, 56px);
  left: clamp(18px, 3vw, 64px);
  width: clamp(52px, 8vw, 90px);
}

[data-overlay="upload"] .page-back-button {
  top: clamp(20px, 5vh, 56px);
  left: clamp(18px, 3vw, 64px);
  width: clamp(52px, 8vw, 90px);
}

[data-overlay="faq"] .page-back-button {
  top: clamp(20px, 5vh, 56px);
  left: clamp(18px, 3vw, 64px);
  width: clamp(52px, 8vw, 90px);
}

[data-overlay="location"] .page-back-button {
  top: clamp(20px, 5vh, 56px);
  left: clamp(18px, 3vw, 64px);
  width: clamp(52px, 8vw, 90px);
}

[data-overlay="dress"] .page-back-button {
  top: clamp(20px, 5vh, 56px);
  left: clamp(18px, 3vw, 64px);
  width: clamp(52px, 8vw, 90px);
}

[data-overlay="dress"] .dress-data {
  color: #4f5cd6;
  font-family: "GC Vank";
  font-size: 1.5em;
  margin-top: clamp(28px, 5vw, 72px);
  margin-left: clamp(18px, 4vw, 64px);
  text-transform: lowercase;
}

[data-overlay="location"] .info-action {
  color: #4f5cd6;
  font-family: "GC Vank";
  text-transform: lowercase;
}

[data-overlay="location"] .info-content h1 {
  margin-left: 3%;
}

[data-overlay="location"] .info-content p:nth-of-type(1) {
  margin-left: 1%;
}

[data-overlay="location"] .info-content p:nth-of-type(2) {
  margin-left: 4%;
}

[data-overlay="location"] .info-action {
  margin-left: 1%;
}

[data-overlay="songs"] .info-content {
  gap: 0;
}

[data-overlay="songs"] .info-content h1 {
  margin-left: clamp(0px, 2vw, 34px);
}

[data-overlay="songs"] .info-content p {
  margin-top: clamp(18px, 3.2vw, 46px);
  margin-left: clamp(18px, 5vw, 82px);
}

[data-overlay="songs"] .song-form {
  margin-top: clamp(24px, 2.8vw, 38px);
}

[data-overlay="songs"] .song-input[name="song"] {
  margin-left: clamp(0px, 3vw, 48px);
}

[data-overlay="songs"] .song-input[name="artist"] {
  margin-top: clamp(16px, 2.2vw, 28px);
  margin-left: clamp(22px, 6vw, 96px);
  text-align: right;
}

[data-overlay="songs"] .song-submit {
  margin-top: clamp(20px, 3.4vw, 48px);
  margin-left: clamp(8px, 4vw, 64px);
}

[data-overlay="songs"] .song-status {
  margin-top: clamp(10px, 1.8vw, 24px);
  margin-left: clamp(34px, 7vw, 112px);
}

[data-overlay="songs"] .song-list {
  margin-top: clamp(38px, 6vw, 86px);
  margin-left: clamp(12px, 5vw, 78px);
  margin-right: 0;
  justify-items: end;
  color: #4f5cd6;
  font-family: "GC Vank";
  text-transform: lowercase;
  text-align: right;
}

.info-content {
  position: relative;
  z-index: 1;
  width: min(76vw, 860px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 22px;
}

.info-content h1 {
  color: var(--pink);
  font-family: "Teenage Sunkies";
  font-size: clamp(4.5rem, 11vw, 11rem);
  line-height: 0.85;
}

.info-content p,
.info-action,
.upload-drop span,
.upload-status,
.song-input,
.song-status,
.song-list {
  color: var(--lilac);
  font-family: "Focus Grotesk";
  font-size: clamp(1.25rem, 2.8vw, 2.4rem);
  line-height: 1.1;
}

.info-action {
  width: fit-content;
}

.upload-drop {
  width: min(100%, 520px);
  min-height: 170px;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(172, 135, 193, 0.7);
}

.upload-drop input {
  display: none;
}

.upload-gallery {
  width: min(100%, 520px);
  columns: 2 150px;
  column-gap: 10px;
}

.upload-gallery:empty {
  display: none;
}

.upload-gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid rgba(79, 92, 214, 0.74);
  background: rgba(79, 92, 214, 0.16);
}

.upload-gallery-item img,
.upload-gallery-item video {
  display: block;
  width: 100%;
  height: auto;
}

.upload-status {
  min-height: 1.1em;
  color: var(--orange);
  font-size: clamp(0.92rem, 2.3vw, 1.2rem);
}

.song-input {
  width: min(100%, 520px);
  border-bottom: 1px solid var(--lilac);
}

.question-form {
  width: min(100%, 620px);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.question-field {
  flex: 1 1 260px;
}

.question-field input {
  width: 100%;
  border-bottom: 1px solid var(--lilac);
  color: var(--lilac);
  font-family: "Focus Grotesk";
  font-size: clamp(1.25rem, 2.8vw, 2.4rem);
  line-height: 1.1;
}

.question-field input::placeholder {
  color: var(--lilac);
  opacity: 1;
}

.question-submit {
  flex: 0 0 auto;
  color: #4f5cd6;
  font-family: "GC Vank";
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
}

.question-submit[disabled] {
  cursor: default;
  opacity: 0.7;
}

.question-status {
  flex-basis: 100%;
  min-height: 1.1em;
  color: var(--orange);
  font-family: "Focus Grotesk";
  font-size: clamp(0.92rem, 2.3vw, 1.2rem);
}

.question-list {
  width: min(100%, 720px);
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}

.question-list:empty {
  display: none;
}

.question-item {
  display: grid;
  gap: 8px;
}

.question-text,
.reply-text {
  font-family: "Focus Grotesk";
  font-size: clamp(1.05rem, 2.4vw, 1.85rem);
  line-height: 1.12;
}

.question-text {
  color: var(--lilac);
}

.reply-text {
  max-width: 86%;
  margin-left: clamp(22px, 5vw, 72px);
  color: var(--orange);
}

.song-input::placeholder {
  color: var(--lilac);
  opacity: 1;
}

.song-form {
  width: min(100%, 520px);
  display: grid;
  gap: 18px;
}

.song-submit {
  justify-self: start;
  color: var(--orange);
  font-family: "GC Vank";
  text-transform: lowercase;
  cursor: pointer;
}

.song-submit[disabled] {
  cursor: default;
  opacity: 0.7;
}

.song-status {
  min-height: 1.1em;
  color: var(--orange);
  font-size: clamp(0.92rem, 2.3vw, 1.2rem);
}

.song-list {
  width: min(100%, 640px);
  display: grid;
  gap: 12px;
  font-size: clamp(1.18rem, 2.9vw, 1.9rem);
}

.song-list li {
  border-bottom: 1px solid rgba(172, 135, 193, 0.35);
  padding-bottom: 10px;
}

[data-overlay="songs"] .song-list li {
  color: #4f5cd6;
  font-family: "GC Vank";
  text-transform: lowercase;
}

[data-overlay="songs"] .song-list li:nth-child(6n + 1) {
  margin-right: 3%;
}

[data-overlay="songs"] .song-list li:nth-child(6n + 2) {
  margin-right: 1%;
}

[data-overlay="songs"] .song-list li:nth-child(6n + 3) {
  margin-right: 4%;
}

[data-overlay="songs"] .song-list li:nth-child(6n + 4) {
  margin-right: 1%;
}

[data-overlay="songs"] .song-list li:nth-child(6n + 5) {
  margin-right: 5%;
}

[data-overlay="songs"] .song-list li:nth-child(6n) {
  margin-right: 9%;
}

.swatches {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.swatches span {
  aspect-ratio: 1;
}

@media (max-width: 640px) {
  .email-field {
    top: 43vh;
  }

  .login-enter-button {
    top: 59vh;
    right: clamp(20px, 7%, 36px);
    font-size: clamp(2rem, 13vw, 3.2rem);
  }

  .landing-logo-button {
    top: 44vh;
    right: auto;
    left: 14vw;
    width: min(68vw, 330px);
  }

  .home-screen {
    aspect-ratio: auto;
  }

  .home-guest-name {
    top: 2%;
    right: 42%;
    max-width: 34vw;
    font-size: clamp(1.2825rem, 6.48vw, 1.8225rem);
  }

  .faq-link {
    top: 15%;
    left: 12%;
    font-size: 11.7vw;
  }

  .upload-link {
    top: 36%;
    left: 9%;
    font-size: 9.425vw;
  }

  .location-link {
    top: 55%;
    left: 51%;
    font-size: 4.68vw;
  }

  .songs-link {
    top: 70%;
    left: 4%;
    font-size: 9.23vw;
  }

  .dress-link {
    top: 22%;
    right: 10%;
    font-size: 5.59vw;
  }

  .blue-top {
    width: 17%;
    right: 14%;
    bottom: 6%;
  }

  .blue-right {
    width: 20%;
    top: 34%;
    right: 5%;
  }

  .blue-left {
    width: 18%;
    top: 49%;
    left: 3%;
  }

  .blue-bottom {
    width: 17%;
    right: 14%;
    bottom: 6%;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .email-field {
    top: 52vh;
  }

  .home-guest-name {
    top: 3%;
    right: 52%;
    max-width: 30vw;
    font-size: clamp(1.35rem, 3.51vw, 2.025rem);
  }

  .faq-link {
    font-size: 8.45vw;
  }

  .upload-link {
    font-size: 6.24vw;
  }

  .location-link {
    font-size: 2.6vw;
  }

  .songs-link {
    font-size: 6.11vw;
  }

  .dress-link {
    font-size: 3.25vw;
  }

  .blue-top {
    right: 18%;
    bottom: 7%;
    width: 7.4%;
  }

  .blue-right {
    top: 37%;
    right: 3%;
    width: 7.5%;
  }

  .blue-bottom {
    right: 18%;
    bottom: 7%;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .login-logo-button {
    top: 7vh;
    width: min(35vh, 190px);
  }

  .email-field {
    top: 54vh;
  }

  .login-enter-button {
    top: 77vh;
    font-size: clamp(1.7rem, 6vw, 2.6rem);
  }

  .home-screen {
    aspect-ratio: auto;
  }

  .home-guest-name {
    top: 2%;
    right: 5%;
    max-width: 30vw;
  }

  .faq-link {
    top: 10%;
    left: 12%;
    font-size: 6.5vw;
  }

  .upload-link {
    top: 45%;
    left: 10%;
    font-size: 4.42vw;
  }

  .location-link {
    top: 55%;
    left: 52%;
    font-size: 1.95vw;
  }

  .songs-link {
    top: 72%;
    font-size: 4.55vw;
  }

  .dress-link {
    top: 18%;
    right: 5%;
    font-size: 2.275vw;
  }

  .blue-right {
    top: 52%;
    right: 5%;
    width: 6%;
  }

  .blue-left {
    top: 57%;
    left: 2%;
    width: 5.8%;
  }

  .blue-top {
    right: 18%;
    bottom: 7%;
    width: 5.8%;
  }
}

@media (max-aspect-ratio: 3 / 4) {
  .home-guest-name {
    top: 2%;
    right: 42%;
    max-width: 34vw;
    font-size: clamp(1.2825rem, 6.48vw, 1.8225rem);
  }

  .faq-link {
    top: 13%;
    left: 10%;
    font-size: 11.05vw;
  }

  .upload-link {
    top: 34%;
    left: 8%;
    font-size: 8.71vw;
  }

  .location-link {
    top: 54%;
    left: 50%;
    font-size: 4.29vw;
  }

  .songs-link {
    top: 73%;
    left: 4%;
    font-size: 8.32vw;
  }

  .dress-link {
    top: 24%;
    right: 8%;
    font-size: 5.2vw;
  }
}