/* Neto's Figma redesign (AEEM_Ticket & Landing page, oct-2026), layered over styles.css.
   Helvetica Now Display is not licensed for the web, so its role falls to the Helvetica stack;
   Monte Stella comes from his Adobe Fonts kit like everywhere else. */
:root {
  --acid: #ffcb00;
  --deep: #232709;
  --forest: #2e340c;
  --gold: rgba(255, 203, 0, .87);
  --teal: rgba(0, 255, 217, .87);
  --helvetica: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --monte: "monte-stella", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  /* The RSVP steps inherit these from styles.css, so they follow the gold palette too. */
  --paper: var(--gold);
  --muted: rgba(255, 203, 0, .66);
  --line: rgba(255, 203, 0, .4);
  --ink: var(--deep);
}

/* Neto's "Fondo web AEEM" loop fills the viewport edge to edge on every step (cropped by
   cover). It sits behind an olive and black veil, as the plantation did in the Figma frame;
   the poster shows while it loads and stays put for reduced motion. */
html { background: var(--deep) url("../assets/fondo-aeem-poster.jpg") center / cover no-repeat fixed; }
body,
body.rsvp-active { background: none; }
.bg-video,
.bg-veil { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bg-video { z-index: -2; object-fit: cover; }
.bg-veil {
  z-index: -1;
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    linear-gradient(rgba(35, 39, 9, .45), rgba(35, 39, 9, .45));
}
@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }

.sound-toggle {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--acid);
  border-radius: 50%;
  background: rgba(35, 39, 9, .8) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcb00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");
  cursor: pointer;
}
.sound-toggle[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcb00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 24px 16px 0;
  color: var(--gold);
  font-family: var(--helvetica);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .21em;
  text-transform: uppercase;
}
.tagline span { flex: 1 1 0; }
.tagline span:first-child { text-align: right; }
.tagline-mark { width: 36px; height: auto; flex: 0 0 auto; }

.title-art { filter: none; }
.panel h2, .confirmation-dialog h2 { color: var(--gold); }
.director { color: var(--gold); font-family: var(--monte); font-weight: 500; text-transform: uppercase; }
.director strong { font-weight: 500; }

.panel { margin: 0 16px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.panel-inner { width: 100%; padding: 0; }
/* Past the summary the forms need a solid surface to stay legible over the photo. */
.panel:has(#event-summary[hidden]) .panel-inner { padding: 26px 22px 22px; border: 1px solid var(--acid); background: rgba(35, 39, 9, .94); }

.event-box { padding: 21px 22px 26px; border: 1px solid var(--acid); }
#panel-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--acid);
  color: var(--gold);
  font-family: var(--monte);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .21em;
  line-height: 1.2;
}
.event { margin: 0 0 23px; border: 0; }
.event div { grid-template-columns: 110px 1fr; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--acid); }
.event div:last-child { border-bottom: 1px solid var(--acid); }
.event dt, .event dd { color: var(--gold); font-family: var(--helvetica); font-weight: 400; letter-spacing: .21em; text-transform: uppercase; }
.event dt { font-size: 10px; line-height: 1.25; }
.event dd { font-size: 13px; }
.event a { text-decoration: none; }
.event a:hover { text-decoration: underline; }
.deadline-bar {
  margin: 0;
  padding: 12px 10px;
  background: var(--gold);
  color: var(--deep);
  font-family: var(--helvetica);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .21em;
  text-align: center;
  text-transform: uppercase;
}

.pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 59px;
  margin: 30px 0 0;
  padding: 0 30px;
  border: 0;
  border-radius: 39px;
  background: var(--teal);
  color: var(--deep);
  cursor: pointer;
  font-family: var(--monte);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pill-cta:hover { background: #00ffd9; }
.pill-cta .arrow {
  width: 24px;
  height: 14px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h22M16 1l6 6-6 6' fill='none' stroke='%23152311' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.credits { margin: 0; padding: 36px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border: 0; text-align: center; }
.credits img { width: 100px; height: auto; }

/* RSVP steps: the Figma only drew the landing, so the forms borrow its type, lines and pill. */
.panel h2:not(#panel-title), .confirmation-dialog h2 {
  font-family: var(--monte);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
}
.step, label, legend { color: var(--gold); font-family: var(--helvetica); letter-spacing: .21em; }
input, .phone-control { border: 1px solid var(--acid); background: rgba(255, 203, 0, .06); color: var(--acid); }
input::placeholder { color: rgba(255, 203, 0, .4); }
.phone-control input { background: transparent; }
.phone-prefix { color: var(--gold); }
input:focus, button:focus-visible, a:focus-visible, .phone-control:focus-within { outline-color: rgba(0, 255, 217, .6); }
.primary {
  min-height: 55px;
  border-radius: 39px;
  background: var(--teal);
  color: var(--deep);
  font-family: var(--monte);
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .02em;
}
.primary:hover:not(:disabled) { background: #00ffd9; }
.secondary { border-color: var(--acid); border-radius: 39px; color: var(--gold); font-family: var(--monte); font-size: 20px; font-style: italic; font-weight: 500; }
.text-link, .text-button { color: var(--gold); font-family: var(--helvetica); }
.welcome strong { font-family: var(--monte); font-size: 24px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ticket-option { border-color: var(--acid); }
.ticket-option[aria-pressed="true"], .ticket-option.stamped[aria-pressed="true"], .ticket-option.open-seat[aria-pressed="true"] { background: var(--acid); color: var(--deep); }
.ticket-option.stamped { background: rgba(255, 203, 0, .16); }
.ticket-option.released:not(:disabled) { border-style: dashed; border-color: rgba(255, 203, 0, .45); color: rgba(255, 203, 0, .55); cursor: pointer; }
.check-field { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; color: var(--gold); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-transform: none; cursor: pointer; }
.check-field input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--acid); }
.companion-title { font-family: var(--monte); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.all-sent { background: rgba(255, 203, 0, .1); }
.all-sent-copy { font-family: var(--monte); font-size: 24px; font-style: italic; font-weight: 500; }
.status { border-left-color: var(--acid); background: rgba(255, 203, 0, .1); }
.confirmation-dialog { border: 1px solid var(--acid); background: var(--deep); }
.confirmation-dialog::backdrop { background: rgba(10, 12, 3, .55); }

@media (max-width: 839px) {
  .page { display: flex; flex-direction: column; }
  .visual { min-height: 0; padding: 28px 20px 30px; }
  .title-block { width: min(66vw, 300px); margin: 0 auto; }
  /* The credit stays on one line; the flex column lets it overflow the narrow title evenly. */
  .title-block { display: flex; flex-direction: column; align-items: center; }
  .director { font-size: clamp(13px, 4.3vw, 17px); white-space: nowrap; }
  .panel { margin-bottom: 0; }
  body.rsvp-active .tagline { display: none; }
  .event div { grid-template-columns: 100px 1fr; }
  .event dd, .deadline-bar { letter-spacing: .14em; }
}

@media (min-width: 840px) {
  .tagline { gap: 40px; padding: 0; font-size: 13.75px; }
  .tagline-mark { width: 56px; }
  .page {
    grid-template-columns: minmax(260px, 340px) minmax(360px, 420px);
    grid-template-areas: "tagline tagline" "visual panel" "credits credits";
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: clamp(64px, 10vw, 140px);
    row-gap: 56px;
    padding: 56px 36px;
  }
  .tagline { grid-area: tagline; }
  .visual { grid-area: visual; }
  .panel { grid-area: panel; margin: 0; }
  .credits { grid-area: credits; padding: 0; }
  .title-block { width: 100%; }
  .director { margin-top: 24px; font-size: 21px; text-align: left; white-space: nowrap; }
  .event-box { padding: 21px 26px 26px; }
  .event div { grid-template-columns: 137px 1fr; }
  .pill-cta { width: auto; margin-top: 30px; }
}