:root {
  --bg: #030303; --panel: rgba(10,10,8,.78); --gold: #d9aa4e; --light: #ffe09a;
  --text: #fff6df; --muted: #b8ad99; --green: #66f59a; --line: rgba(217,170,78,.27);
  --soft: rgba(255,224,154,.12); --shadow: 0 26px 82px rgba(0,0,0,.62); --radius: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at 50% 0%, rgba(217,170,78,.18), transparent 27%), linear-gradient(145deg,#000,#080806 48%,#020202);
}
a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; } svg { fill: currentColor; }
#goldParticles, .page-glow { position: fixed; inset: 0; pointer-events: none; }
#goldParticles { z-index: -1; }
.page-glow { z-index: -2; background: radial-gradient(circle at 50% 12%, rgba(255,212,112,.11), transparent 30%); }
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-content: center; gap: 12px;
  color: var(--light); background: var(--bg);
}
.loader.done { animation: loaderOut .7s ease forwards; }
.loader strong, .brand strong, .hero-copy h1 span, .photo strong, .footer strong { font-family: Georgia, "Times New Roman", serif; }
.loader strong { font-size: 4rem; animation: pulse 2.3s infinite; }
.loader span { color: var(--muted); font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; }
.site-header, main, .footer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 20; min-height: 74px; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--light); }
.brand span { color: var(--gold); font-size: 1.3rem; } .brand strong { font-size: 2.45rem; }
.header-actions { display: flex; align-items: center; gap: 22px; }
nav { display: flex; gap: 22px; } nav a { color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
nav a:hover { color: var(--light); }
.admin-button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,224,154,.55); border-radius: 999px; padding: 0 18px;
  color: var(--light); background: rgba(255,224,154,.08); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; transition: transform .2s, box-shadow .2s, background .2s;
}
.admin-button:hover { transform: translateY(-1px); background: rgba(255,224,154,.14); box-shadow: 0 0 24px rgba(217,170,78,.28); }
.hero { min-height: calc(100vh - 74px); display: grid; align-items: center; padding: 22px 0 36px; }
.hero-card, .panel, .card, .footer {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,224,154,.052), rgba(255,255,255,.015)), var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,240,190,.08); backdrop-filter: blur(18px);
}
.hero-card {
  min-height: 640px; display: grid; grid-template-columns: minmax(0,1fr) 285px; align-items: center; gap: 26px;
  padding: clamp(24px,5vw,52px); isolation: isolate;
}
.skyline { position: absolute; inset: auto 0 0; z-index: -1; height: 40%; display: flex; align-items: end; justify-content: center; gap: 18px; opacity: .34; }
.skyline i { width: clamp(34px,7vw,78px); height: var(--h); border: 1px solid var(--soft); background: repeating-linear-gradient(0deg,transparent 0 20px,rgba(255,224,154,.14) 21px 22px),#070705; }
.hero-copy { display: grid; justify-items: center; text-align: center; }
.kicker, .title h2, .status-head span, .details small, .confirm h2, .map-card h2 {
  color: var(--light); font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.crown { margin-top: 12px; color: var(--light); font-size: clamp(3.7rem,8vw,5.4rem); line-height: 1; animation: pulse 2.7s infinite; }
.hero-copy h1 { margin: 0; color: var(--light); font: 400 clamp(4rem,10vw,8rem)/.83 "Segoe Script","Brush Script MT",cursive; text-shadow: 0 0 30px rgba(255,224,154,.44); }
.hero-copy h1 span { display: block; font-size: 1.18em; font-weight: 600; background: linear-gradient(95deg,#755016,#fff1bb 25%,#d39b3b 50%,#fff7d0 72%,#8b5e1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 27px 0 0; color: #fff9ea; font-size: clamp(.98rem,2vw,1.2rem); letter-spacing: .23em; text-transform: uppercase; }
.sublead { max-width: 530px; margin: 14px 0 31px; color: var(--muted); line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; }
.button {
  min-width: min(355px,100%); min-height: 57px; display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  border: 1px solid rgba(255,224,154,.65); border-radius: 999px; padding: 0 26px; color: var(--light);
  background: linear-gradient(90deg,rgba(255,224,154,.04),rgba(255,224,154,.15),rgba(255,224,154,.04));
  cursor: pointer; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; transition: transform .2s, box-shadow .2s;
}
.button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 30px rgba(217,170,78,.36); } .button:disabled { opacity: .62; cursor: not-allowed; }
.status { min-height: 462px; display: grid; align-content: space-between; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.28); }
.status-head { display: grid; gap: 10px; } .status-head b { color: var(--green); font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; }
.status-head b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px var(--green); }
.orbit { width: 178px; height: 178px; display: grid; place-items: center; margin: auto; border: 1px solid var(--line); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 30px,rgba(255,224,154,.23) 31px 32px,transparent 33px 48px); animation: orbit 3s infinite; }
.orbit svg { width: 62px; height: 62px; color: var(--light); }
.access { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--soft); border-radius: 12px; }
.access small { color: var(--light); letter-spacing: .2em; text-transform: uppercase; } .access span { color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.panel, .lower, .footer { margin-top: 20px; } .panel { padding: clamp(20px,3vw,29px); }
.title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 22px; } .title h2 { margin: 0; }
.title span { height: 1px; background: linear-gradient(90deg,transparent,var(--line),transparent); }
.details, .countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.details article, .countdown div {
  min-height: 166px; display: grid; place-items: center; align-content: center; gap: 11px; padding: 17px;
  border: 1px solid var(--soft); border-radius: 14px; background: rgba(0,0,0,.25); text-align: center;
}
.details svg { width: 27px; height: 27px; color: var(--light); }
.details strong { max-width: 220px; color: var(--text); font-size: clamp(1.15rem,2vw,1.48rem); font-weight: 400; line-height: 1.3; text-transform: uppercase; }
.details p, .countdown span, .map-card p, .footer p { margin: 0; color: var(--muted); font-size: .76rem; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.countdown div { min-height: 113px; background: radial-gradient(circle at 50% 0%,rgba(255,224,154,.08),transparent 60%),rgba(0,0,0,.27); }
.countdown strong { color: var(--light); font-size: clamp(2.6rem,6vw,4.1rem); font-weight: 300; line-height: 1; text-shadow: 0 0 18px rgba(255,224,154,.4); }
.lower { display: grid; grid-template-columns: minmax(0,.95fr) minmax(300px,1.06fr) minmax(0,.95fr); gap: 18px; }
.confirm, .map-card { min-height: 470px; display: grid; align-content: space-between; gap: 19px; padding: clamp(19px,3vw,27px); }
.confirm h2, .map-card h2 { margin: 0; }
.confirm > p { max-width: 300px; margin: 0 auto; color: #efe4cc; line-height: 1.9; letter-spacing: .09em; text-align: center; }
.guests { padding: 14px; border: 1px solid var(--soft); border-radius: 14px; background: rgba(0,0,0,.27); } .guests[hidden] { display: none; }
.guests > span { display: block; margin-bottom: 11px; color: var(--light); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.guests ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guests li { padding: 9px 12px; border: 1px solid var(--soft); border-radius: 999px; text-align: center; }
.feedback { min-height: 20px; margin: 0; color: var(--light); font-size: .73rem; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.photo { min-height: 470px; } .photo img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.88),transparent 54%,rgba(0,0,0,.08)); }
.photo div { position: absolute; right: 18px; bottom: 20px; left: 18px; z-index: 2; text-align: center; }
.photo p { color: #efe5d2; font-size: .83rem; letter-spacing: .12em; line-height: 1.75; text-transform: uppercase; } .photo strong { color: var(--light); font-size: 2rem; font-weight: 400; }
.map { min-height: 240px; border: 1px solid var(--soft); border-radius: 14px; overflow: hidden; } .map iframe { width: 100%; min-height: 240px; height: 100%; border: 0; }
.outline { min-width: 100%; min-height: 53px; font-size: .75rem; }
.footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 18px; margin-bottom: 32px; padding: 21px 27px; } .footer strong { color: var(--light); font-size: 2.4rem; font-weight: 400; }
@media (max-width: 980px) { .hero-card, .lower { grid-template-columns: 1fr; } .status { width: min(440px,100%); min-height: 390px; margin: auto; } .details, .countdown { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px) { .site-header, main, .footer { width: min(100% - 20px,1120px); } nav { display:none; } .header-actions { gap: 10px; } .admin-button { min-height: 38px; padding: 0 14px; font-size: .68rem; } .hero { min-height:auto; padding-top:10px; } .hero-card { min-height:auto; padding:22px 16px; } .button { width:100%; min-width:0; font-size:.76rem; } .details, .countdown, .footer { grid-template-columns:1fr; } .title { grid-template-columns:1fr; text-align:center; } .title span { display:none; } .confirm, .map-card, .photo, .photo img { min-height:390px; } }