/* ============================================================
   sections.css — giao diện từng trang:
   Bìa · Lịch chiếu · Timeline · Giới thiệu · Thư ngỏ · Xác nhận · The End
============================================================ */

/* ============ 1. BÌA THIỆP ============ */
.cover {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 56px;
  padding-bottom: 72px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 42% at 50% 30%, rgba(255, 120, 80, .22), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 48%, var(--velvet-700) 0%, var(--velvet-900) 72%, #1a0204 100%);
}

/* Màn nhung hai bên + tia sáng chéo như poster */
.cover__rays {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 236, 190, .2) 0%, transparent 26%),
    conic-gradient(from 105deg at 0% 0%, transparent 0deg, rgba(255, 230, 180, .12) 6deg, transparent 12deg,
      rgba(255, 230, 180, .08) 20deg, transparent 27deg, rgba(255, 230, 180, .06) 36deg, transparent 44deg);
}

.cover__rays::before,
.cover__rays::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2%, rgba(255, 110, 100, .12) 9%, rgba(0, 0, 0, .35) 16%);
  background-size: 60% 100%;
}

.cover__rays::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.cover__rays::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
  mask-image: linear-gradient(270deg, #000, transparent);
}

.cover__inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.cover__producer {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .38em;
  color: var(--gold-100);
}

.cover__producer strong { font-weight: 800; color: var(--gold-300); }

.cover__eyebrow {
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--text-soft);
}

.cover__premiere {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 5.4vw, 24px);
  letter-spacing: .1em;
  color: var(--gold-100);
}

.cover__premiere span { color: var(--gold-300); }

.cover__title {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(76px, 26vw, 150px);
  line-height: 1.06;
  letter-spacing: .02em;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 30px rgba(240, 201, 106, .25));
}

.cover__tagline {
  font-weight: 800;
  font-size: clamp(15px, 4.6vw, 24px);
  letter-spacing: .12em;
  color: #fff8ea;
}

.cover__tagline-vi {
  font-size: 14px;
  font-style: italic;
  color: var(--text-soft);
}

.cover__trophy {
  position: relative;
  width: min(62vw, 250px);
  margin: 18px auto 8px;
}

.cover__trophy::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, .35), transparent 65%);
}

.cover__trophy svg,
.cover__trophy img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
  animation: trophyFloat 5s ease-in-out infinite alternate;
}

@keyframes trophyFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8px, 0); }
}

.cover__guest {
  margin: 6px auto 26px;
  max-width: 100%;
}

.cover__guest-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.cover__guest-name {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(32px, 9.5vw, 48px);
  line-height: 1.3;
  color: var(--gold-100);
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.cover__guest-name.is-long { font-size: clamp(26px, 7.4vw, 38px); }
.cover__guest-name.is-very-long { font-size: clamp(21px, 5.8vw, 30px); }

/* Hai góc dưới: HCM trái, Hà Nội phải — 2 cột hẹp, không đè nhau */
.cover__venues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.cover__venue {
  padding-top: 10px;
  border-top: 1px solid rgba(240, 201, 106, .45);
  text-align: left;
  min-width: 0;
}

.cover__venue--right { text-align: right; }

.cover__venue-region {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-100);
}

.cover__venue-date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 5.4vw, 26px);
  line-height: 1.25;
  color: var(--gold-300);
}

.cover__venue-place {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--gold-300);
  opacity: .8;
}

.scroll-cue__line {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, var(--gold-300));
  animation: cueDrop 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes cueDrop {
  0% { transform: scaleY(0); opacity: 0; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (min-width: 960px) {
  .cover__inner {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-areas:
      "trophy head"
      "trophy guest"
      "venues venues";
    column-gap: 48px;
    align-items: center;
  }

  .cover__head { grid-area: head; }
  .cover__trophy { grid-area: trophy; width: min(100%, 420px); }
  .cover__guest { grid-area: guest; }
  .cover__venues { grid-area: venues; width: 100%; max-width: 780px; margin: 10px auto 0; }
}

/* ============ 2. LỊCH CHIẾU ============ */
.schedule {
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgba(122, 12, 18, .4), transparent 70%),
    var(--ink-2);
}

.tickets {
  display: grid;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto 40px;
}

@media (min-width: 420px) {
  .tickets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}

@media (min-width: 768px) {
  .tickets { gap: 26px; }
}

/* Vé xem phim: thân vé + cuống vé răng cưa */
.ticket {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #3a1e0c;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}

.ticket__main {
  flex: 1;
  padding: 0 14px 16px;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(180deg, #f8edd2, #eddcb4);
  -webkit-mask: radial-gradient(circle 10px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}

.ticket__band {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 0 -14px 14px;
  padding: 8px 14px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--velvet-900), var(--velvet-700) 50%, var(--velvet-900));
  color: var(--gold-100);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

.ticket__region {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 5.6vw, 28px);
  line-height: 1.15;
  color: var(--velvet-700);
  margin-bottom: 12px;
}

.ticket__info { display: grid; gap: 10px; }

.ticket__info dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a5a1c;
}

.ticket__info dd {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #2b1508;
  overflow-wrap: anywhere;
}

.ticket__info dd strong {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--velvet-700);
}

.ticket__info .is-pending { font-weight: 500; font-style: italic; color: #8a6a4a; }

.ticket__stub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
  border-top: 2px dashed rgba(122, 12, 18, .35);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #e9d6a8, #dcc287);
  -webkit-mask: radial-gradient(circle 10px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}

.ticket__seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--velvet-700);
}

.ticket__seat b {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .04em;
}

.ticket__barcode {
  height: 20px;
  opacity: .5;
  background: repeating-linear-gradient(90deg, #3a1e0c 0 2px, transparent 2px 4px, #3a1e0c 4px 5px, transparent 5px 8px,
      #3a1e0c 8px 11px, transparent 11px 13px);
}

.btn-map {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--velvet-500), var(--velvet-700));
  color: var(--gold-100);
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 4px 10px rgba(61, 4, 8, .3);
}

.btn-map:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-map svg { flex: none; }

/* Lịch tháng */
.calendar {
  max-width: 460px;
  margin: 0 auto 40px;
  padding: 24px 14px 18px;
  text-align: center;
}

.calendar__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--gold-100);
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar__weekdays span {
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-500);
}

.calendar__weekdays span:last-child { color: var(--gold-300); }

.calendar__day {
  position: relative;
  min-height: 48px;
  padding-top: 8px;
  font-size: 14px;
  line-height: 24px;
  color: var(--text-soft);
}

.calendar__day--target { color: var(--velvet-900); font-weight: 800; }

.calendar__star {
  position: absolute;
  top: 0;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  filter: drop-shadow(0 0 8px rgba(240, 201, 106, .55));
  animation: starGlow 2.6s ease-in-out infinite alternate;
}

@keyframes starGlow {
  from { transform: scale(.94); }
  to { transform: scale(1.06); }
}

.calendar__num { position: relative; z-index: 1; display: block; }

.calendar__tag {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--gold-300);
}

/* Đồng hồ đếm ngược */
.countdowns {
  display: grid;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}

@media (min-width: 680px) {
  .countdowns { grid-template-columns: 1fr 1fr; }
}

.countdown {
  padding: 18px 10px 16px;
  text-align: center;
}

.countdown__label {
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.countdown__clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}

.countdown__unit {
  min-width: 50px;
  padding: 7px 3px 5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a1a12, #140c09);
  border: 1px solid rgba(240, 201, 106, .25);
}

.countdown__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold-100);
}

.countdown__cap {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--text-dim);
}

.countdown__sep {
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-500);
}

.countdown__status {
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold-100);
}

/* ============ 3. TIMELINE — CỘT TRỤ DẢI PHIM ĐỨNG ============ */
.program {
  background: linear-gradient(180deg, var(--ink-2), var(--ink) 55%, var(--ink-2));
}

.reel-timeline {
  --time-w: 72px;
  --spine-w: 26px;
  --gap: 10px;
  position: relative;
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 6px 0;
}

@media (min-width: 768px) {
  .reel-timeline { --time-w: 120px; --spine-w: 32px; --gap: 18px; }
}

.reel-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--time-w) + var(--gap));
  width: var(--spine-w);
  border-radius: 4px;
  border-inline: 1px solid rgba(240, 201, 106, .2);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' preserveAspectRatio='none'><rect x='3' y='6' width='5' height='9' rx='1.4' fill='%23e9dcc0' fill-opacity='.7'/><rect x='18' y='6' width='5' height='9' rx='1.4' fill='%23e9dcc0' fill-opacity='.7'/></svg>") 0 0 / 100% 22px repeat-y,
    #090504;
}

.reel-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--time-w) var(--spine-w) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: center;
  padding: 10px 0;
}

.reel-timeline__time {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.15;
  color: var(--gold-100);
}

.reel-timeline__time small {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.reel-timeline__node {
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--gold-300);
  box-shadow: 0 0 0 3px #090504, 0 0 14px rgba(240, 201, 106, .7);
}

.reel-timeline__frame {
  position: relative;
  padding: 14px 14px 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(243, 230, 200, .08), rgba(243, 230, 200, .03));
  border: 1px solid rgba(240, 201, 106, .24);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .5);
}

.reel-timeline__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--film-cream);
}

.reel-timeline__desc {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.reel-timeline__item--final .reel-timeline__frame {
  background: linear-gradient(135deg, rgba(122, 12, 18, .6), rgba(61, 4, 8, .65));
  border-color: rgba(240, 201, 106, .55);
}

.reel-timeline__item--final .reel-timeline__title { color: var(--gold-100); font-size: 21px; }

/* Biển phân cảnh (clapperboard) nhỏ */
.clap {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10.5px;
}

.clap__top {
  display: block;
  height: 9px;
  border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(-45deg, var(--film-cream) 0 6px, #111 6px 12px);
  transform-origin: 0 100%;
  transform: rotate(-16deg);
  transition: transform .35s cubic-bezier(.5, 0, .75, 0) .7s;
  margin-bottom: 1px;
}

.reel-timeline__item.is-visible .clap__top { transform: rotate(0deg); }

.clap__body {
  display: block;
  padding: 3px 8px;
  border: 1px solid var(--film-cream);
  border-radius: 0 0 2px 2px;
  background: #111;
  color: var(--film-cream);
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}

/* ============ 4. GIỚI THIỆU ============ */
.about {
  padding-top: 56px;
  padding-bottom: 56px;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, #1f130d, var(--ink) 75%);
}

/* Dải cuộn phim chạy ngang, tràn tới sát dải phim hai rìa */
.about .reel { margin-inline: calc(var(--strip-w) - var(--edge-pad)); }

.about__card {
  max-width: 660px;
  margin: 30px auto;
  padding: 30px 20px 18px;
  text-align: center;
}

.about__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 5.6vw, 28px);
  line-height: 1.3;
  letter-spacing: .02em;
}

.about__emoji {
  display: block;
  font-size: 28px;
  margin-bottom: 4px;
}

.about__sub {
  margin: 2px 0 18px;
  font-family: var(--font-script);
  font-size: 30px;
  line-height: 1.3;
  color: var(--gold-100);
}

.about__card p:not(.about__sub) {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-soft);
  text-align: justify;
  text-align-last: center;
}

/* ============ 5. THƯ NGỎ — RẠP CHIẾU ============ */
.letter {
  padding-inline: 10px;
  background: radial-gradient(ellipse 100% 55% at 50% 22%, #26140d, var(--ink) 72%);
}

.cinema--letter {
  max-width: 1000px;
  margin: 0 auto;
  padding: 44px 10px 0;
  border-radius: 22px;
  border: 1px solid rgba(240, 201, 106, .12);
}

.cinema--letter .cinema__lights { height: 44px; }
.cinema--letter .cinema__beam { display: none; top: 70px; height: 380px; width: 38%; }

.letter__screen {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 10px;
  border: 6px solid #1d120c;
  border-radius: 6px;
  background: #050302;
  box-shadow: 0 0 0 2px rgba(201, 151, 59, .45), 0 0 54px rgba(255, 236, 200, .16), inset 0 0 40px rgba(255, 236, 200, .05);
}

.cinema__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 880px;
  margin: 12px auto 0;
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.credits__replay {
  flex: none;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 106, .5);
  background: rgba(20, 12, 9, .85);
  color: var(--gold-100);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cinema--letter .seats {
  position: relative;
  height: 130px;
  margin: 16px -10px 0;
}

@media (min-width: 768px) {
  .letter { padding-inline: 24px; }
  .cinema--letter { padding: 56px 28px 0; }
  .cinema--letter .cinema__beam { display: block; }
  .letter__screen { padding: 18px; }
  .letter__screen.has-video { flex-direction: row; align-items: center; }
  .letter__screen.has-video .throwback { flex: 0 0 46%; }
  .letter__screen.has-video .credits { flex: 1; min-width: 0; }
  .credits { height: 440px; }
  .cinema--letter .seats { height: 180px; margin-inline: -28px; }
}

/* ============ 6. XÁC NHẬN THAM DỰ ============ */
.rsvp {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(122, 12, 18, .45), transparent 70%),
    var(--ink-2);
}

.rsvp__head {
  max-width: 520px;
  margin: 0 auto 26px;
  text-align: center;
}

.rsvp__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
}

.rsvp__title-script {
  font-family: var(--font-script);
  font-size: clamp(44px, 13vw, 66px);
  line-height: 1.2;
  color: var(--gold-100);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.rsvp__title-caps {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 6vw, 30px);
  letter-spacing: .12em;
}

.rsvp__desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-soft);
}

/* Thẻ form như một tấm vé vàng */
.gold-ticket {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 20px 22px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(160deg, #fff3c4 0%, #f0c96a 38%, #d8a94f 66%, #f3d98e 100%);
  color: var(--velvet-900);
  box-shadow: 0 0 0 1px var(--gold-700), 0 0 0 6px rgba(240, 201, 106, .14), 0 26px 50px rgba(0, 0, 0, .55);
}

/* Răng cưa hai bên chỗ đường xé vé */
.gold-ticket::before,
.gold-ticket::after {
  content: "";
  position: absolute;
  top: 31px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--gold-700);
}

.gold-ticket::before { left: -11px; }
.gold-ticket::after { right: -11px; }

.gold-ticket__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -20px 18px;
  padding: 12px 22px;
  border-bottom: 2px dashed rgba(61, 4, 8, .35);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--velvet-700);
}

.field {
  min-width: 0;
  margin-bottom: 16px;
  border: 0;
}

.field__label {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--velvet-900);
}

.field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(122, 12, 18, .35);
  border-radius: 10px;
  background: rgba(255, 251, 238, .88);
  font: inherit;
  font-size: 16px;
  color: #2b0a06;
  outline: none;
}

.field__input::placeholder { color: #9a7a5a; }
.field__input:focus { border-color: var(--velvet-700); box-shadow: 0 0 0 3px rgba(122, 12, 18, .18); }

.choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.choice { position: relative; display: block; cursor: pointer; }

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  height: 100%;
  min-height: 48px;
  padding: 8px 8px;
  border: 1.5px solid rgba(122, 12, 18, .35);
  border-radius: 10px;
  background: rgba(255, 251, 238, .62);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--velvet-900);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.choice__sub {
  display: block;
  width: 100%;
  font-size: 11.5px;
  font-weight: 500;
  opacity: .85;
}

.choice input:checked + .choice__pill {
  border-color: var(--velvet-900);
  background: linear-gradient(180deg, var(--velvet-500), var(--velvet-700));
  color: var(--gold-100);
  box-shadow: 0 4px 12px rgba(61, 4, 8, .35);
}

.choice input:focus-visible + .choice__pill { outline: 2px solid var(--velvet-900); outline-offset: 2px; }

.field.has-error .choice__pill,
.field.has-error .field__input { border-color: #b3121c; box-shadow: 0 0 0 2px rgba(179, 18, 28, .25); }

.rsvp__status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--velvet-900);
}

.rsvp__status.is-error { color: #8f0a12; }

/* ============ 7. THE END ============ */
.finale {
  padding: 90px 16px 56px;
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #1f130d, var(--ink) 70%);
}

.finale__end {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(50px, 15vw, 90px);
  line-height: 1.15;
  transition-duration: 3s;
}

.finale__line {
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.9;
  color: var(--text-soft);
}

.finale__dates {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--gold-300);
}

.finale__line span,
.finale__dates span { white-space: nowrap; }
.finale__dates .finale__dash { color: var(--text-dim); margin: 0 4px; }

@media (prefers-reduced-motion: reduce) {
  .cover__trophy svg,
  .cover__trophy img,
  .scroll-cue__line,
  .calendar__star { animation: none; }
  .clap__top { transition: none; transform: none; }
}