:root {
  --event-ink: #21152c;
  --event-purple: #7854a3;
  --event-lilac: #e8e5f9;
  --event-cream: #faf8f2;
  --event-dark: #1b102b;
  --event-coral: #df806c;
  --event-line: rgb(33 21 44 / 22%);
}

html { scroll-behavior: smooth; }
body.event-styling-page {
  background: var(--event-cream);
  color: var(--event-ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}
body.event-styling-page h1,
body.event-styling-page h2,
body.event-styling-page h3,
body.event-styling-page p { overflow-wrap: anywhere; }
body.event-styling-page h1,
body.event-styling-page h2,
body.event-styling-page h3,
body.event-styling-page p { margin-top: 0; }
body.event-styling-page h1,
body.event-styling-page h2,
body.event-styling-page h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
body.event-styling-page h1 em,
body.event-styling-page h2 em { color: var(--event-coral); font-style: normal; }
body.event-styling-page a { color: inherit; }
body.event-styling-page button,
body.event-styling-page input,
body.event-styling-page select,
body.event-styling-page textarea { font: inherit; }
body.event-styling-page :focus-visible { outline: 3px solid var(--event-coral); outline-offset: 4px; }

body.event-styling-page > header[data-homepage-region="01-site-header"] {
  position: relative;
  z-index: 30;
  background: #fff;
  box-shadow: 0 3px 0 rgb(120 84 163 / 14%);
}
body.event-styling-page > header[data-homepage-region="01-site-header"] [data-homepage-region-content] { background: #fff; }
body.event-styling-page .site-header__auth a,
body.event-styling-page .site-header__auth button { color: inherit; text-decoration: none; }
body.event-styling-page .site-header__auth a:hover,
body.event-styling-page .site-header__auth a:focus-visible,
body.event-styling-page .site-header__auth button:hover,
body.event-styling-page .site-header__auth button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.event-styling-main { display: block; }
.event-styling-main > section { position: relative; }
.event-section-frame { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.event-kicker { margin-bottom: 1.35rem; color: var(--event-purple); font-size: .75rem; font-weight: 700; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.event-button { align-items: center; border: 1px solid transparent; border-radius: 999px; display: inline-flex; gap: .75rem; justify-content: center; min-height: 3.25rem; padding: .8rem 1.4rem; font-size: .95rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.event-button:hover { transform: translateY(-2px); }
.event-button--light { background: #fff; color: var(--event-dark) !important; }
.event-button--light:hover { background: var(--event-coral); color: #fff !important; }
.event-button--dark { background: var(--event-dark); color: #fff !important; }
.event-button--dark:hover { background: var(--event-purple); }
.event-text-link { color: var(--event-purple) !important; display: inline-flex; gap: .55rem; font-size: .95rem; font-weight: 700; text-decoration: none; }
.event-text-link:hover { color: var(--event-coral) !important; }

.event-hero { min-height: 675px; align-items: center; background: var(--event-dark) url("../assets/images/elitegamenights-themed-decor.webp") center / cover no-repeat; color: #fff; display: flex; isolation: isolate; }
.event-hero::before { background: linear-gradient(90deg, rgb(27 16 43 / 91%) 0%, rgb(27 16 43 / 62%) 45%, rgb(27 16 43 / 18%) 100%); content: ""; inset: 0; position: absolute; z-index: -1; }
.event-hero__wash { border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; height: 520px; position: absolute; right: 11%; top: 13%; width: 520px; z-index: -1; }
.event-hero__wash::after { border: 1px solid rgb(255 255 255 / 19%); border-radius: 50%; content: ""; inset: 13%; position: absolute; }
.event-hero__content { margin-left: max(48px, calc((100% - 1200px) / 2)); max-width: 640px; padding-block: 5.5rem; }
.event-hero .event-kicker { color: #f6cabf; }
.event-hero h1 { font-size: clamp(3.4rem, 7vw, 7.5rem); letter-spacing: -.06em; line-height: .92; margin-bottom: 2rem; }
.event-hero__lead { color: rgb(255 255 255 / 87%); font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 500px; }
.event-hero__stamp { align-items: center; border: 1px solid rgb(255 255 255 / 54%); border-radius: 50%; bottom: 12%; display: flex; flex-direction: column; height: 150px; justify-content: center; letter-spacing: .17em; position: absolute; right: 16%; text-align: center; width: 150px; }
.event-hero__stamp span { font-size: .6rem; }
.event-hero__stamp strong { color: #f6cabf; font: 700 2.5rem/1 Georgia, serif; margin: .5rem 0; }

.styling-introduction { background: var(--event-lilac); padding: clamp(5rem, 10vw, 9rem) 0; }
.styling-introduction__grid { align-items: start; display: grid; gap: clamp(3rem, 9vw, 10rem); grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.styling-introduction h2,
.styling-pillars h2,
.occasion-guide h2,
.event-notes h2 { color: var(--event-purple); font-size: clamp(2.8rem, 5.4vw, 5.6rem); letter-spacing: -.06em; line-height: .96; margin-bottom: 0; }
.styling-introduction__copy { max-width: 550px; padding-top: .4rem; }
.styling-introduction__copy p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); margin-bottom: 1.4rem; }
.styling-introduction__copy .event-text-link { margin-top: 1.2rem; }

.styling-pillars { background: var(--event-cream); padding: clamp(5rem, 10vw, 9rem) 0; }
.section-heading-row { align-items: end; display: flex; gap: 3rem; justify-content: space-between; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-heading-row__aside { max-width: 360px; margin-bottom: .3rem; }
.styling-pillars__grid { border-top: 1px solid var(--event-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.styling-pillar { border-right: 1px solid var(--event-line); min-height: 290px; padding: 1.6rem 2rem 1.6rem 0; }
.styling-pillar + .styling-pillar { padding-left: 2rem; }
.styling-pillar:last-child { border-right: 0; }
.styling-pillar__number { color: var(--event-coral); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .15em; margin-bottom: 3.6rem; }
.styling-pillar h3 { color: var(--event-purple); font-size: clamp(1.6rem, 2.2vw, 2.15rem); margin-bottom: .8rem; }
.styling-pillar p { max-width: 300px; }

.styling-feature { background: var(--event-dark); color: #fff; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.styling-feature__media { min-height: 640px; }
.styling-feature__media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.styling-feature__copy { align-self: center; max-width: 550px; padding: clamp(4rem, 8vw, 8rem); }
.styling-feature__copy .event-kicker { color: #f6cabf; }
.styling-feature__copy h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); letter-spacing: -.06em; line-height: .95; margin-bottom: 2rem; }
.styling-feature__copy p { color: rgb(255 255 255 / 80%); font-size: 1.05rem; }
.styling-feature__copy .event-button { margin-top: 1.5rem; }

.occasion-guide { background: #fff; padding: clamp(5rem, 10vw, 9rem) 0; }
.occasion-guide__header { align-items: end; display: grid; gap: 4rem; grid-template-columns: minmax(0, 1fr) minmax(250px, .65fr); margin-bottom: 4rem; }
.occasion-guide__header > p { margin: 0 0 .35rem; }
.occasion-guide__list { border-top: 1px solid var(--event-line); }
.occasion-card { align-items: center; border-bottom: 1px solid var(--event-line); display: grid; gap: 1.4rem; grid-template-columns: 48px 1fr 40px; padding: 1.65rem 0; }
.occasion-card__index { color: var(--event-coral); font: 700 1.25rem/1 Georgia, serif; }
.occasion-card h3 { color: var(--event-purple); font-size: clamp(1.45rem, 2vw, 2rem); margin-bottom: .3rem; }
.occasion-card p { margin: 0; max-width: 650px; }
.occasion-card__arrow { color: var(--event-coral); font-size: 1.5rem; justify-self: end; }

.event-notes { background: var(--event-lilac); padding: clamp(5rem, 10vw, 9rem) 0; }
.event-notes__feed { border-top: 1px solid rgb(120 84 163 / 30%); }
.event-notes__status { color: var(--event-purple); padding: 2rem 0; }
.event-note { align-items: stretch; border-bottom: 1px solid rgb(120 84 163 / 30%); display: grid; gap: clamp(1.5rem, 5vw, 5rem); grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); padding: 1.5rem 0; }
.event-note__image { aspect-ratio: 1.55; background: #d6d0ea; display: block; height: auto; object-fit: cover; width: 100%; }
.event-note__body { align-self: center; max-width: 650px; padding: 1rem 0; }
.event-note__date { color: var(--event-purple); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; }
.event-note h3 { color: var(--event-purple); font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1.05; margin-bottom: .8rem; }
.event-note p { font-size: 1.05rem; margin-bottom: 1.3rem; max-width: 570px; }

.event-consultation { background: var(--event-coral); color: #fff; padding: clamp(5rem, 10vw, 8rem) 0; }
.event-consultation__inner { display: grid; gap: clamp(3rem, 8vw, 9rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin: 0 auto; width: min(1200px, calc(100% - 96px)); }
.event-consultation .event-kicker { color: #fff; }
.event-consultation h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); letter-spacing: -.06em; line-height: .95; margin-bottom: 2rem; }
.event-consultation__intro > p:last-child { font-size: 1.1rem; max-width: 420px; }
.styling-form { display: grid; gap: 1.4rem 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.styling-form__field { min-width: 0; }
.styling-form__field--wide { grid-column: 1 / -1; }
.styling-form label,
.auth-form label,
.profile-form label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .45rem; text-transform: uppercase; }
.styling-form input,
.styling-form select,
.styling-form textarea { background: #fff; border: 1px solid transparent; border-radius: 0; color: var(--event-ink); min-height: 3.25rem; padding: .8rem 1rem; width: 100%; }
.styling-form textarea { min-height: 8rem; resize: vertical; }
.styling-form input[aria-invalid="true"],
.styling-form select[aria-invalid="true"],
.styling-form textarea[aria-invalid="true"] { border-color: var(--event-dark); }
.styling-form__error { color: var(--event-dark); display: block; font-size: .8rem; min-height: 1.25rem; padding-top: .25rem; }
.styling-form__submit { border: 0; cursor: pointer; grid-column: 1 / -1; justify-self: start; }
.styling-form__status { grid-column: 1 / -1; margin: 0; }

body.event-styling-page > footer.site-footer { background: var(--event-dark); color: #fff; }
body.event-styling-page > footer.site-footer .site-footer__content { background: var(--event-dark); }
body.event-styling-page > footer.site-footer .site-footer__heading,
body.event-styling-page > footer.site-footer .site-footer__copy { color: #fff; }
body.event-styling-page > footer.site-footer .site-footer__legal { align-items: center; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
body.event-styling-page > footer.site-footer .site-footer__legal-link,
body.event-styling-page > footer.site-footer .site-footer__consent-link { color: #fff; text-decoration: none; }
body.event-styling-page > footer.site-footer .site-footer__legal-link:hover,
body.event-styling-page > footer.site-footer .site-footer__legal-link:focus-visible,
body.event-styling-page > footer.site-footer .site-footer__consent-link:hover,
body.event-styling-page > footer.site-footer .site-footer__consent-link:focus-visible { color: #f6cabf; text-decoration: underline; text-underline-offset: 3px; }
body.event-styling-page > footer.site-footer .site-footer__consent-link { background: transparent; border: 0; cursor: pointer; padding: 0; }

.consent-preferences { align-items: center; background: rgb(27 16 43 / 60%); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 1100; }
.consent-preferences[hidden] { display: none; }
.consent-preferences__panel { background: var(--event-cream); color: var(--event-ink); max-width: 31rem; padding: clamp(1.5rem, 5vw, 3rem); position: relative; width: 100%; }
.consent-preferences__header h2 { color: var(--event-purple); font: 700 clamp(2rem, 4vw, 3rem)/1 Georgia, serif; letter-spacing: -.04em; margin-bottom: 1rem; }
.consent-preferences__close,
.auth-drawer__close { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 2rem; line-height: 1; padding: .25rem; position: absolute; right: 1rem; top: 1rem; }
.consent-preferences__option { align-items: flex-start; border-top: 1px solid var(--event-line); display: flex; gap: .75rem; padding: 1rem 0; }
.consent-preferences__option input { accent-color: var(--event-purple); margin-top: .3rem; }
.consent-preferences__option span { display: grid; gap: .25rem; }
.consent-preferences__option small { color: rgb(33 21 44 / 70%); }
.consent-preferences__panel .event-button { border: 0; cursor: pointer; margin-top: .75rem; }

.auth-drawer { display: flex; inset: 0; position: fixed; z-index: 1200; }
.auth-drawer[hidden] { display: none; }
.auth-drawer__backdrop { background: rgb(27 16 43 / 68%); flex: 1; }
.auth-drawer__panel { background: var(--event-cream); color: var(--event-ink); max-width: 34rem; overflow-y: auto; padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) 3rem; position: relative; width: min(100%, 34rem); }
.auth-drawer__panel h2 { color: var(--event-purple); font: 700 clamp(2.4rem, 5vw, 4rem)/.94 Georgia, serif; letter-spacing: -.05em; margin-bottom: 2rem; }
.auth-drawer__panel .event-kicker { margin-bottom: 1rem; }
.auth-tabs { border-bottom: 1px solid var(--event-line); display: flex; gap: 1.4rem; margin-bottom: 2rem; }
.auth-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--event-purple); cursor: pointer; font-weight: 700; padding: .7rem 0; }
.auth-tabs button[aria-selected="true"] { border-bottom-color: var(--event-coral); }
.auth-form,
.profile-form { display: grid; gap: 1rem; }
.auth-form__split { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-form__field input,
.auth-form__field textarea,
.profile-form__avatar-wrap input { background: #fff; border: 1px solid var(--event-line); color: var(--event-ink); min-height: 3rem; padding: .7rem .8rem; width: 100%; }
.auth-form__field textarea { resize: vertical; }
.auth-form .event-button,
.profile-form .event-button { border: 0; cursor: pointer; justify-self: start; margin-top: .4rem; }
.auth-form__status,
.profile-form__status { color: var(--event-purple); min-height: 1.4rem; }
.profile-form__avatar-wrap { align-items: center; display: flex; gap: 1rem; }
.profile-form__avatar-wrap > div:last-child { flex: 1; }
.profile-form__avatar { align-items: center; animation: event-avatar-in .45s ease both; background: var(--event-purple); background-position: center; background-size: cover; border-radius: 50%; color: #fff; display: flex; flex: 0 0 4.5rem; font: 700 1.4rem/1 Georgia, serif; height: 4.5rem; justify-content: center; overflow: hidden; }
.profile-form__avatar.has-image { color: transparent; }
.profile-form__avatar-wrap small { display: block; font-size: .75rem; margin-top: .35rem; }
@keyframes event-avatar-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 900px) {
  .event-section-frame,
  .event-consultation__inner { width: min(100% - 48px, 720px); }
  .event-hero__content { margin-left: 24px; max-width: 580px; }
  .event-hero__wash { height: min(380px, 100%); right: 0; width: min(380px, 100%); }
  .event-hero__stamp { bottom: 8%; right: 7%; }
  .styling-feature { grid-template-columns: 1fr; }
  .styling-feature__media { min-height: 480px; }
  .styling-feature__copy { max-width: none; }
  .occasion-guide__header { gap: 2rem; }
}

@media (max-width: 640px) {
  body.event-styling-page h1,
  body.event-styling-page h2 { letter-spacing: -.045em; }
  .event-section-frame,
  .event-consultation__inner { width: calc(100% - 32px); }
  .event-hero { min-height: 600px; }
  .event-hero::before { background: linear-gradient(90deg, rgb(27 16 43 / 91%), rgb(27 16 43 / 52%)); }
  .event-hero__content { margin-left: 16px; max-width: calc(100% - 32px); padding-block: 4rem; }
  .event-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .event-hero__lead { font-size: 1rem; }
  .event-hero__wash { height: min(260px, 100%); opacity: .55; right: 0; top: 9%; width: min(260px, 100%); }
  .event-hero__stamp { bottom: 6%; height: 105px; right: 8%; width: 105px; }
  .event-hero__stamp strong { font-size: 1.8rem; }
  .styling-introduction__grid,
  .occasion-guide__header,
  .event-consultation__inner { grid-template-columns: 1fr; }
  .styling-introduction__copy { padding-top: 0; }
  .section-heading-row { align-items: start; display: block; }
  .section-heading-row__aside { margin-top: 1.6rem; }
  .styling-pillars__grid { grid-template-columns: 1fr; }
  .styling-pillar,
  .styling-pillar + .styling-pillar { border-bottom: 1px solid var(--event-line); border-right: 0; min-height: 0; padding: 1.5rem 0; }
  .styling-pillar:last-child { border-bottom: 0; }
  .styling-pillar__number { margin-bottom: 1.6rem; }
  .styling-feature__media { min-height: 300px; }
  .styling-feature__copy { padding: 4rem 16px; }
  .occasion-guide__header { gap: 1.5rem; margin-bottom: 2.5rem; }
  .occasion-card { gap: .75rem; grid-template-columns: 28px 1fr 24px; }
  .occasion-card p { font-size: .94rem; }
  .event-note { gap: 1rem; grid-template-columns: 1fr; }
  .event-note__image { aspect-ratio: 1.7; }
  .event-note__body { padding: .5rem 0 1.25rem; }
  .styling-form { grid-template-columns: 1fr; }
  .styling-form__field--wide,
  .styling-form__submit,
  .styling-form__status { grid-column: auto; }
  .styling-form__submit { width: 100%; }
  body.event-styling-page > footer.site-footer .site-footer__legal { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .auth-drawer__backdrop { display: none; }
  .auth-drawer__panel { max-width: none; width: 100%; }
  .auth-form__split { gap: .75rem; }
}
