:root {
  --black: #08090f;
  --night: #0d1020;
  --night-2: #14182b;
  --card: rgba(255, 255, 255, 0.045);
  --gold: #d8b84b;
  --gold-light: #f1d978;
  --ivory: #f5efe0;
  --muted: #aaa89f;
  --line: rgba(216, 184, 75, 0.2);
  --serif: "Noto Serif KR", "Gowun Batang", Georgia, serif;
  --display: "Cinzel", "Noto Serif KR", serif;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  color: var(--ivory);
  background: var(--black);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 50% 12%, #15182a 0, var(--black) 40rem); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
button, a { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; top: 0.6rem; left: 0.6rem; z-index: 100; padding: 0.7rem 1rem; color: var(--black); background: var(--gold-light); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
#atmosphere { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0.58; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; background: rgba(255,255,255,0.04); }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8f7221, var(--gold-light)); }
.topbar { position: fixed; top: 0; left: 50%; z-index: 50; display: flex; align-items: center; justify-content: space-between; width: min(100%, 900px); min-height: 4.2rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid rgba(216,184,75,0.11); background: linear-gradient(to bottom, rgba(8,9,15,0.92), rgba(8,9,15,0)); transform: translateX(-50%); }
.wordmark { display: flex; align-items: center; gap: 0.6rem; color: var(--gold-light); font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.13em; text-decoration: none; }
.wordmark span { font-size: 1rem; }
.top-actions { display: flex; align-items: center; gap: 0.15rem; }
.theme-button,
.share-button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.8rem; padding: 0 0.65rem; border: 0; color: var(--ivory); background: transparent; font-size: 0.76rem; cursor: pointer; }
.theme-button { border: 1px solid rgba(216,184,75,0.18); border-radius: 2rem; }
.theme-button:hover, .theme-button:focus-visible { border-color: rgba(216,184,75,0.55); background: rgba(216,184,75,0.08); }
.invitation-shell { position: relative; z-index: 1; width: min(100%, 900px); margin: 0 auto; border-inline: 1px solid rgba(216,184,75,0.08); background: rgba(8,9,15,0.76); box-shadow: 0 0 80px rgba(0,0,0,0.55); }
.invitation-shell::before { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(circle 11rem at var(--pointer-x) var(--pointer-y), rgba(241,217,120,0.075), transparent 72%); opacity: 0; transition: opacity 300ms ease; content: ""; }
body.pointer-active .invitation-shell::before { opacity: 1; }
.section { position: relative; padding: clamp(5.5rem, 12vw, 9rem) clamp(1.25rem, 6vw, 4.8rem); overflow: hidden; }
.full-screen { min-height: 100svh; }
.section-heading { margin-bottom: 2.5rem; text-align: center; }
.section-kicker { margin: 0 0 0.75rem; color: var(--gold); font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.28em; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 7vw, 3.8rem); line-height: 1.25; letter-spacing: -0.055em; font-weight: 600; }
.section-description { max-width: 34rem; margin: 0.9rem auto 0; color: var(--muted); font-size: 0.83rem; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.intro { position: relative; display: grid; place-items: center; overflow: hidden; text-align: center; isolation: isolate; }
.intro::before { position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at center 55%, rgba(216,184,75,0.07), transparent 36%), linear-gradient(180deg, rgba(8,9,15,0.55), rgba(8,9,15,0.95)); content: ""; }
.intro-media { position: absolute; inset: 0; z-index: -4; }
.intro-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.intro-media video.is-ready { opacity: 0.32; }
.intro-aura { position: absolute; z-index: -2; border: 1px solid rgba(216,184,75,0.25); border-radius: 50%; filter: blur(0.2px); animation: aura 10s ease-in-out infinite alternate; }
.intro-aura-one { width: min(72vw, 560px); aspect-ratio: 1; }
.intro-aura-two { width: min(48vw, 360px); aspect-ratio: 1; border-color: rgba(216,184,75,0.08); animation-delay: -5s; }
.intro-content { width: min(100% - 2.4rem, 760px); animation: introIn 1.5s both 0.2s; }
.intro-label { margin: 0 0 1.25rem; color: var(--gold); font-family: var(--display); font-size: clamp(0.58rem, 1.5vw, 0.72rem); letter-spacing: 0.36em; }
.intro-years { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1rem; color: #8f8d86; font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.32em; }
.intro-years i { width: 2.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.intro h1 { margin: 0; font-size: clamp(2.35rem, 8vw, 5.1rem); line-height: 1.32; letter-spacing: -0.07em; font-weight: 400; }
.intro h1 span, .intro h1 strong { display: block; }
.intro h1 strong { color: var(--gold-light); font-weight: 600; text-shadow: 0 0 34px rgba(216,184,75,0.18); }
.intro-subtitle { margin: 1.6rem 0 0; color: #bbb6a8; font-size: clamp(0.95rem, 2vw, 1.1rem); }
.scroll-cue { position: absolute; bottom: 1.7rem; left: 50%; display: grid; justify-items: center; gap: 0.5rem; color: #77756e; text-decoration: none; transform: translateX(-50%); }
.scroll-cue span { font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.3em; }
.scroll-cue i { width: 1px; height: 2.5rem; background: linear-gradient(var(--gold), transparent); animation: scrollLine 1.8s ease-in-out infinite; }

.event { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; background: linear-gradient(160deg, rgba(17,21,38,0.94), rgba(9,10,17,0.93) 70%); }
.event-stage { position: relative; max-width: 340px; margin: 0 auto; }
.portrait-frame { position: relative; z-index: 2; aspect-ratio: 4 / 5.4; margin: 0; overflow: hidden; border: 1px solid rgba(216,184,75,0.45); border-radius: 48% 48% 0.45rem 0.45rem; box-shadow: 0 28px 60px rgba(0,0,0,0.48); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: saturate(0.82) contrast(1.06); }
.portrait-frame::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,9,15,0.42), transparent 44%); content: ""; }
.portrait-halo { position: absolute; top: -9%; left: -12%; width: 124%; aspect-ratio: 1; border: 1px solid rgba(216,184,75,0.24); border-radius: 50%; }
.stage-caption { position: absolute; z-index: 3; right: -1rem; bottom: 1rem; margin: 0; color: var(--gold); font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.22em; writing-mode: vertical-rl; }
.event-copy h2 { margin: 0; font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.24; letter-spacing: -0.06em; font-weight: 500; }
.event-copy h2 em { color: var(--gold-light); font-style: normal; font-size: 0.6em; }
.event-facts { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.event-facts p { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1rem; margin: 0; padding: 0.9rem 0; border-bottom: 1px solid rgba(216,184,75,0.11); }
.event-facts span { color: var(--gold); font-family: var(--display); font-size: 0.57rem; letter-spacing: 0.15em; }
.event-facts strong { font-size: 0.96rem; font-weight: 600; }
.event-facts .time-fact strong { color: var(--gold-light); font-size: 1.08rem; }
.countdown { grid-column: 1 / -1; margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--line); background: rgba(216,184,75,0.035); text-align: center; }
.countdown-label { margin: 0 0 0.85rem; color: #77756e; font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.24em; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 580px; margin: 0 auto; }
.countdown-grid p { margin: 0; border-right: 1px solid rgba(216,184,75,0.13); }
.countdown-grid p:last-child { border-right: 0; }
.countdown-grid strong, .countdown-grid span { display: block; }
.countdown-grid strong { color: var(--gold-light); font-family: var(--display); font-size: clamp(1.45rem, 4vw, 2.2rem); font-weight: 500; line-height: 1.2; }
.countdown-grid span { color: #77756e; font-family: var(--display); font-size: 0.48rem; letter-spacing: 0.12em; }

.letter { background: radial-gradient(circle at 100% 0%, rgba(216,184,75,0.08), transparent 35%), rgba(12,14,24,0.93); }
.letter-card { position: relative; max-width: 680px; margin: 0 auto; padding: clamp(2rem, 7vw, 4.5rem); border: 1px solid var(--line); background: linear-gradient(140deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)); box-shadow: 0 26px 70px rgba(0,0,0,0.32); }
.letter-card::before, .letter-card::after { position: absolute; width: 3rem; height: 3rem; border-color: var(--gold); opacity: 0.55; content: ""; }
.letter-card::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.letter-card::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.quote-mark { margin: -1.3rem 0 -1.7rem; color: var(--gold); font-family: Georgia, serif; font-size: 5rem; line-height: 1; }
.letter-card p { color: #c8c4b8; }
.letter-card .letter-lead { color: var(--ivory); font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 600; }
.signature { margin-top: 2.2rem; color: var(--gold-light) !important; text-align: right; }
.signature span { display: block; color: #77756e; font-size: 0.75rem; }

.program { background: radial-gradient(circle at 50% 16%, rgba(216,184,75,0.08), transparent 24rem), rgba(9,10,17,0.93); }
.record-player { position: relative; width: min(72vw, 330px); margin: 0 auto 4rem; aspect-ratio: 1.18; }
.record { position: absolute; top: 0; left: 0; display: grid; width: 82%; aspect-ratio: 1; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, #171923 0 4px, #090a10 5px 8px); box-shadow: 0 20px 45px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.05); animation: spin 12s linear infinite; }
.record::after { width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--black); content: ""; }
.record-label { position: absolute; display: grid; width: 38%; aspect-ratio: 1; place-items: center; align-content: center; border-radius: 50%; color: var(--night); background: radial-gradient(circle, var(--gold-light), #a37f20); text-align: center; }
.record-label small, .record-label span { font-family: var(--display); font-size: 0.35rem; letter-spacing: 0.12em; }
.record-label strong { font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.06em; }
.tonearm { position: absolute; top: 8%; right: 4%; width: 14%; height: 72%; border-radius: 2rem; background: linear-gradient(90deg, #554a36, #d6c49b 50%, #554a36); transform: rotate(13deg); transform-origin: top center; box-shadow: 0 5px 15px rgba(0,0,0,0.45); }
.tonearm::before { position: absolute; top: -8%; left: 50%; width: 170%; aspect-ratio: 1; border-radius: 50%; background: #2c2b31; box-shadow: inset 0 0 0 5px #17171d; content: ""; transform: translateX(-50%); }
.program-list { display: grid; gap: 0.8rem; }
.program-card { border: 1px solid rgba(216,184,75,0.12); background: rgba(255,255,255,0.025); transition: border-color 200ms ease, background 200ms ease; }
.program-card button { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; align-items: center; width: 100%; min-height: 5.7rem; padding: 1rem 1.15rem; border: 0; color: var(--ivory); background: transparent; text-align: left; cursor: pointer; }
.program-card button > span:nth-child(2) { display: grid; }
.program-no { color: var(--gold); font-family: var(--display); font-size: 0.75rem; }
.program-card small { color: #8b887f; font-size: 0.66rem; }
.program-card strong { font-size: clamp(0.98rem, 2.5vw, 1.15rem); line-height: 1.4; }
.program-card em { color: #aaa79d; font-size: 0.74rem; font-style: normal; }
.program-card button i { color: var(--gold); font-size: 1.2rem; font-style: normal; transition: transform 250ms ease; }
.program-card > p { display: none; margin: 0; padding: 0 1.15rem 1rem 4.65rem; color: #8d8a82; font-size: 0.76rem; }
.program-card.is-open { border-color: rgba(216,184,75,0.42); background: rgba(216,184,75,0.055); }
.program-card.is-open button i { transform: rotate(45deg); }
.program-card.is-open > p { display: block; }
.program-finale { border-color: rgba(216,184,75,0.4); background: linear-gradient(100deg, rgba(216,184,75,0.1), rgba(255,255,255,0.02)); }

.downloads { background: radial-gradient(circle at 16% 25%, rgba(216,184,75,0.1), transparent 18rem), rgba(13,16,27,0.93); }
.book-shell { max-width: 760px; margin: 0 auto 2.2rem; }
.book-status { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.book-status p { display: grid; margin: 0; }
.book-status p span { color: var(--gold-light); font-size: 0.86rem; font-weight: 700; }
.book-status p strong { color: #858177; font-family: var(--display); font-size: 0.58rem; letter-spacing: 0.14em; }
.book-hint { color: #858177; font-size: 0.67rem; }
.book-stage { position: relative; padding: 1.4rem 2.65rem; border: 1px solid rgba(216,184,75,0.18); outline: none; background: radial-gradient(circle at 50% 45%, rgba(216,184,75,0.11), transparent 55%), rgba(2,3,8,0.48); perspective: 1800px; touch-action: pan-y; }
.book-stage:focus-visible { box-shadow: 0 0 0 3px rgba(216,184,75,0.32); }
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 1.42; margin: 0 auto; transform-style: preserve-3d; filter: drop-shadow(0 22px 32px rgba(0,0,0,0.42)); }
.book-page { position: relative; z-index: 1; margin: 0; overflow: hidden; background: #f8f3e9; backface-visibility: hidden; }
.book-page img { display: block; width: 100%; height: 100%; object-fit: contain; background: #f8f3e9; }
.book-page-left { border-radius: 0.18rem 0 0 0.18rem; transform-origin: right center; }
.book-page-right { border-radius: 0 0.18rem 0.18rem 0; transform-origin: left center; }
.book-page.is-empty { background: linear-gradient(120deg, rgba(216,184,75,0.05), rgba(255,255,255,0.015)); }
.book-page.is-empty img { display: none; }
.book-spine { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; width: 1.25rem; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.24), rgba(255,255,255,0.09), rgba(0,0,0,0.18), transparent); transform: translateX(-50%); pointer-events: none; }
.book-turn-sheet { position: absolute; top: 0; right: 0; z-index: 7; width: 50%; height: 100%; opacity: 0; transform-origin: left center; transform-style: preserve-3d; pointer-events: none; }
.book-turn-face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #f8f3e9; backface-visibility: hidden; }
.book-turn-back { transform: rotateY(180deg); }
.book.is-turning-next .book-turn-sheet { opacity: 1; animation: turnNext 620ms cubic-bezier(.42,.06,.18,.98) forwards; }
.book.is-turning-prev .book-turn-sheet { right: auto; left: 0; opacity: 1; transform-origin: right center; animation: turnPrev 620ms cubic-bezier(.42,.06,.18,.98) forwards; }
.book-edge { position: absolute; top: 50%; z-index: 9; display: grid; width: 2.65rem; min-height: 4.5rem; padding: 0; border: 1px solid rgba(216,184,75,0.25); border-radius: 3rem; place-items: center; color: var(--gold-light); background: rgba(8,9,15,0.82); font-size: 2rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.book-edge-prev { left: 0.25rem; }
.book-edge-next { right: 0.25rem; }
.book-edge:disabled { opacity: 0.22; cursor: default; }
.book-controls { display: grid; grid-template-columns: 6.2rem 1fr 6.2rem; align-items: center; gap: 0.8rem; margin-top: 1rem; }
.book-controls > button { min-height: 3rem; border: 1px solid rgba(216,184,75,0.24); color: var(--ivory); background: rgba(255,255,255,0.025); cursor: pointer; }
.book-controls > button:disabled { opacity: 0.32; cursor: default; }
.book-dots { display: flex; justify-content: center; gap: 0.55rem; }
.book-dots button { position: relative; width: 2.65rem; height: 2.65rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.book-dots button::before { position: absolute; top: 50%; left: 50%; width: 0.75rem; height: 0.75rem; border: 1px solid var(--gold); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }
.book-dots button.is-active::before { background: var(--gold-light); box-shadow: 0 0 0 4px rgba(216,184,75,0.1); }
.book-zoom { display: block; width: fit-content; min-height: 2.75rem; margin: 0.65rem auto 0; padding: 0.55rem 0.8rem; color: #a8a398; font-size: 0.75rem; text-underline-offset: 0.25rem; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 700px; margin: 0 auto; }
.download-grid-single { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.download-grid-single .download-card { min-height: 9rem; }
.download-card { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1rem; align-items: center; min-height: 8.2rem; padding: 1.2rem; border: 1px solid rgba(216,184,75,0.24); color: var(--ivory); background: linear-gradient(145deg, rgba(216,184,75,0.1), rgba(255,255,255,0.025)); text-decoration: none; transition: transform 220ms ease, border-color 220ms ease, background 220ms ease; }
.download-card:hover, .download-card:focus-visible { border-color: rgba(216,184,75,0.62); background: linear-gradient(145deg, rgba(216,184,75,0.17), rgba(255,255,255,0.04)); transform: translateY(-4px); }
.download-card > span:nth-child(2) { display: grid; }
.download-card small { color: #918d84; font-size: 0.62rem; }
.download-card strong { font-size: 0.96rem; line-height: 1.45; }
.download-card em { margin-top: 0.2rem; color: var(--gold); font-size: 0.7rem; font-style: normal; }
.download-card > i { color: var(--gold-light); font-size: 1.35rem; font-style: normal; }
.download-icon { display: grid; width: 3.4rem; aspect-ratio: 1; border: 1px solid rgba(216,184,75,0.35); border-radius: 50%; place-items: center; color: var(--gold-light); }
.download-icon svg { width: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.download-note { margin: 1rem auto 0; color: #89867e; font-size: 0.74rem; text-align: center; }

.artists { background: rgba(17,20,33,0.93); }
.artist-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; max-width: 690px; margin: 0 auto 2.2rem; }
.artist-group { position: relative; min-height: 16.5rem; padding: 1.4rem; overflow: hidden; border: 1px solid rgba(216,184,75,0.17); background: linear-gradient(145deg, rgba(216,184,75,0.09), rgba(255,255,255,0.018)); }
.artist-group::after { position: absolute; right: -2rem; bottom: -2rem; width: 7rem; aspect-ratio: 1; border: 1px solid rgba(216,184,75,0.09); border-radius: 50%; content: ""; }
.artist-icon { width: 6.3rem; aspect-ratio: 1; margin-bottom: 1.35rem; border: 1px solid rgba(216,184,75,0.34); border-radius: 1.15rem; background-color: rgba(216,184,75,0.055); background-image: url("assets/music-pictograms.png"); background-repeat: no-repeat; background-size: 200% 200%; box-shadow: inset 0 0 24px rgba(216,184,75,0.055); }
.artist-icon-gayageum { background-position: 0 0; }
.artist-icon-gugak { background-position: 100% 0; }
.artist-icon-male-choir { background-position: 0 100%; }
.artist-icon-male-vocal { background-position: 100% 100%; }
.artist-type { margin: 0 0 0.25rem; color: var(--gold); font-family: var(--display); font-size: 0.58rem; letter-spacing: 0.14em; }
.artist-group h3 { margin: 0; font-size: 1.12rem; line-height: 1.4; }
.artist-group h3 + p { margin: 0.7rem 0 0; color: #8e8b83; font-size: 0.73rem; line-height: 1.65; }
.artist-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; max-width: 650px; margin: 0 auto; }
.artist-names span { padding: 0.5rem 0.85rem; border: 1px solid rgba(255,255,255,0.09); border-radius: 3rem; color: #b5b1a6; font-size: 0.76rem; }

.venue { background: linear-gradient(180deg, rgba(9,10,17,0.93), rgba(18,21,38,0.94)); }
.venue-glow { position: absolute; top: 5rem; left: 50%; width: 22rem; aspect-ratio: 1; border-radius: 50%; background: rgba(216,184,75,0.06); filter: blur(60px); transform: translateX(-50%); }
.church-photo { position: relative; max-width: 610px; aspect-ratio: 16 / 10; margin: 0 auto 1rem; overflow: hidden; border: 1px solid var(--line); background: #11131b; }
.church-photo img { width: 200%; height: 100%; max-width: none; object-fit: cover; object-position: left center; filter: saturate(0.78) contrast(1.04) brightness(0.78); }
.church-photo::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,9,15,0.65), transparent 45%); pointer-events: none; content: ""; }
.church-photo figcaption { position: absolute; z-index: 2; right: 0.8rem; bottom: 0.55rem; left: 0.8rem; color: rgba(245,239,224,0.72); font-size: 0.61rem; text-align: right; }
.church-photo figcaption a { text-underline-offset: 0.2rem; }
.venue-card { position: relative; max-width: 610px; margin: 0 auto; padding: clamp(2rem, 7vw, 4rem); border: 1px solid var(--line); background: rgba(255,255,255,0.035); text-align: center; box-shadow: 0 28px 75px rgba(0,0,0,0.36); }
.venue-pin { display: grid; width: 3.4rem; aspect-ratio: 1; margin: 0 auto 1rem; border: 1px solid rgba(216,184,75,0.5); border-radius: 50%; place-items: center; color: var(--gold-light); font-size: 1.3rem; }
.venue-card h3 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.2rem); }
.venue-floor { margin: 0.1rem 0 1rem; color: var(--gold); }
.venue-card address { color: #b3afa5; font-size: 0.92rem; font-style: normal; }
.parking { margin: 0.6rem 0 1.7rem; color: #7f7c75; font-size: 0.8rem; }
.map-buttons { display: grid; gap: 0.7rem; }
.map-buttons a { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; min-height: 3.6rem; padding: 0.5rem 1rem; border: 1px solid rgba(216,184,75,0.2); color: var(--ivory); background: rgba(255,255,255,0.035); text-decoration: none; text-align: left; font-size: 0.84rem; }
.map-buttons a span { display: grid; width: 1.55rem; aspect-ratio: 1; border-radius: 50%; place-items: center; color: var(--black); background: var(--gold-light); font-family: sans-serif; font-weight: 800; }
.map-buttons a i { color: var(--gold); font-style: normal; }

.footer { padding: 5.5rem 1.25rem 7rem; border-top: 1px solid rgba(216,184,75,0.1); background: #07080d; text-align: center; }
.footer-mark { display: grid; width: 3rem; aspect-ratio: 1; margin: 0 auto 1rem; border: 1px solid var(--line); border-radius: 50%; place-items: center; color: var(--gold); }
.footer > p { margin: 0.35rem; color: #77756f; font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.18em; }
.footer h2 { margin: 0.8rem 0; color: var(--gold-light); font-size: 1.5rem; }
.footer button { min-height: 3.4rem; margin-top: 1.5rem; padding: 0.6rem 1.4rem; border: 1px solid rgba(216,184,75,0.35); color: var(--ivory); background: transparent; cursor: pointer; }
.quick-nav { position: fixed; bottom: 0; left: 50%; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 900px); border-top: 1px solid rgba(216,184,75,0.18); background: rgba(9,10,17,0.94); backdrop-filter: blur(16px); transform: translateX(-50%); }
.quick-nav a { display: grid; min-height: 4.4rem; place-content: center; color: #c2beb3; text-align: center; text-decoration: none; font-size: 0.68rem; }
.quick-nav a + a { border-left: 1px solid rgba(216,184,75,0.13); }
.quick-nav span { color: var(--gold); font-size: 1.05rem; }

body[data-theme="light"] { color: #292718; background: radial-gradient(circle at 50% 10%, #fffdf8 0, #eee7d8 48rem); }
body[data-theme="light"] #atmosphere { opacity: 0.36; }
body[data-theme="light"] .scroll-progress { background: rgba(42,39,24,0.08); }
body[data-theme="light"] .topbar { border-color: rgba(111,83,19,0.16); background: linear-gradient(to bottom, rgba(248,244,235,0.97), rgba(248,244,235,0.82), rgba(248,244,235,0)); }
body[data-theme="light"] .wordmark { color: #765a16; }
body[data-theme="light"] .theme-button,
body[data-theme="light"] .share-button { color: #2d2a1b; }
body[data-theme="light"] .theme-button { border-color: rgba(111,83,19,0.28); background: rgba(255,255,255,0.55); }
body[data-theme="light"] .invitation-shell { border-color: rgba(111,83,19,0.14); background: rgba(247,243,233,0.9); box-shadow: 0 0 70px rgba(80,64,29,0.14); }
body[data-theme="light"] .invitation-shell::before { background: radial-gradient(circle 11rem at var(--pointer-x) var(--pointer-y), rgba(151,112,22,0.085), transparent 72%); }
body[data-theme="light"] .section-kicker,
body[data-theme="light"] .program-no,
body[data-theme="light"] .artist-type,
body[data-theme="light"] .venue-floor,
body[data-theme="light"] .download-card em { color: #7d6019; }
body[data-theme="light"] .section-description { color: #696557; }
body[data-theme="light"] .intro::before { background: radial-gradient(circle at center 55%, rgba(164,124,27,0.15), transparent 36%), linear-gradient(180deg, rgba(248,244,233,0.72), rgba(240,233,216,0.94)); }
body[data-theme="light"] .intro-media video.is-ready { opacity: 0.14; filter: sepia(0.2); }
body[data-theme="light"] .intro-years,
body[data-theme="light"] .scroll-cue { color: #6f6a5c; }
body[data-theme="light"] .intro h1 strong { color: #725817; text-shadow: 0 0 32px rgba(164,124,27,0.13); }
body[data-theme="light"] .intro-subtitle { color: #565143; }
body[data-theme="light"] .event { background: linear-gradient(160deg, rgba(255,253,248,0.94), rgba(238,231,216,0.93) 76%); }
body[data-theme="light"] .event-copy h2 em,
body[data-theme="light"] .event-facts .time-fact strong,
body[data-theme="light"] .countdown-grid strong,
body[data-theme="light"] .signature,
body[data-theme="light"] .artist-icon,
body[data-theme="light"] .venue-pin,
body[data-theme="light"] .download-icon,
body[data-theme="light"] .download-card > i,
body[data-theme="light"] .footer h2 { color: #725817 !important; }
body[data-theme="light"] .countdown { background: rgba(164,124,27,0.07); }
body[data-theme="light"] .countdown-label,
body[data-theme="light"] .countdown-grid span { color: #6b675a; }
body[data-theme="light"] .letter { background: radial-gradient(circle at 100% 0%, rgba(164,124,27,0.12), transparent 35%), rgba(246,241,231,0.93); }
body[data-theme="light"] .letter-card { background: rgba(255,255,255,0.64); box-shadow: 0 24px 55px rgba(80,64,29,0.12); }
body[data-theme="light"] .letter-card p { color: #504d41; }
body[data-theme="light"] .letter-card .letter-lead { color: #242216; }
body[data-theme="light"] .signature span { color: #6f6a5c; }
body[data-theme="light"] .program { background: radial-gradient(circle at 50% 16%, rgba(164,124,27,0.1), transparent 24rem), rgba(238,231,217,0.93); }
body[data-theme="light"] .program-card { border-color: rgba(111,83,19,0.2); background: rgba(255,255,255,0.52); }
body[data-theme="light"] .program-card button { color: #292718; }
body[data-theme="light"] .program-card small,
body[data-theme="light"] .program-card em,
body[data-theme="light"] .program-card > p { color: #625e51; }
body[data-theme="light"] .program-card.is-open { border-color: rgba(111,83,19,0.52); background: rgba(255,255,255,0.82); }
body[data-theme="light"] .program-finale { background: linear-gradient(100deg, rgba(164,124,27,0.13), rgba(255,255,255,0.62)); }
body[data-theme="light"] .downloads { background: radial-gradient(circle at 16% 25%, rgba(164,124,27,0.12), transparent 18rem), rgba(247,242,232,0.93); }
body[data-theme="light"] .book-stage { border-color: rgba(111,83,19,0.22); background: radial-gradient(circle at 50% 45%, rgba(164,124,27,0.13), transparent 55%), rgba(219,208,186,0.45); }
body[data-theme="light"] .book { filter: drop-shadow(0 20px 28px rgba(80,64,29,0.22)); }
body[data-theme="light"] .book-page.is-empty { background: linear-gradient(120deg, rgba(164,124,27,0.08), rgba(255,255,255,0.35)); }
body[data-theme="light"] .book-edge { border-color: rgba(111,83,19,0.28); color: #725817; background: rgba(255,253,248,0.92); }
body[data-theme="light"] .book-status p span { color: #725817; }
body[data-theme="light"] .book-status p strong,
body[data-theme="light"] .book-hint,
body[data-theme="light"] .book-zoom { color: #5f5a4d; }
body[data-theme="light"] .book-controls > button { border-color: rgba(111,83,19,0.26); color: #292718; background: rgba(255,255,255,0.62); }
body[data-theme="light"] .download-card { border-color: rgba(111,83,19,0.27); color: #292718; background: rgba(255,255,255,0.72); }
body[data-theme="light"] .download-card small,
body[data-theme="light"] .download-note { color: #625e51; }
body[data-theme="light"] .artists { background: rgba(235,228,214,0.93); }
body[data-theme="light"] .artist-group { border-color: rgba(111,83,19,0.22); background: linear-gradient(145deg, rgba(164,124,27,0.1), rgba(255,255,255,0.6)); }
body[data-theme="light"] .artist-group h3 + p { color: #5f5b4e; }
body[data-theme="light"] .artist-names span { border-color: rgba(42,39,24,0.14); color: #4e4a3e; background: rgba(255,255,255,0.38); }
body[data-theme="light"] .venue { background: linear-gradient(180deg, rgba(248,244,235,0.94), rgba(233,226,212,0.93)); }
body[data-theme="light"] .church-photo img { filter: saturate(0.86) contrast(1.02) brightness(0.96); }
body[data-theme="light"] .church-photo::after { background: linear-gradient(0deg, rgba(31,29,20,0.66), transparent 45%); }
body[data-theme="light"] .venue-card { background: rgba(255,255,255,0.7); box-shadow: 0 25px 55px rgba(80,64,29,0.13); }
body[data-theme="light"] .venue-card address { color: #4d493e; }
body[data-theme="light"] .parking { color: #625e51; }
body[data-theme="light"] .map-buttons a { border-color: rgba(111,83,19,0.25); color: #292718; background: rgba(255,255,255,0.66); }
body[data-theme="light"] .footer { border-color: rgba(111,83,19,0.14); background: #ded6c7; }
body[data-theme="light"] .footer > p { color: #5e5a4e; }
body[data-theme="light"] .footer button { color: #292718; border-color: rgba(111,83,19,0.42); }
body[data-theme="light"] .quick-nav { border-color: rgba(111,83,19,0.22); background: rgba(247,243,233,0.95); }
body[data-theme="light"] .quick-nav a { color: #3f3b30; }

@keyframes introIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aura { from { transform: scale(0.93); opacity: 0.25; } to { transform: scale(1.08); opacity: 0.7; } }
@keyframes scrollLine { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.45); opacity: 0.3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes turnNext { 0% { transform: rotateY(0); filter: brightness(1); } 48% { filter: brightness(0.72); } 100% { transform: rotateY(-180deg); filter: brightness(0.92); } }
@keyframes turnPrev { 0% { transform: rotateY(0); filter: brightness(1); } 48% { filter: brightness(0.72); } 100% { transform: rotateY(180deg); filter: brightness(0.92); } }

@media (max-width: 680px) {
  :root { font-size: 17px; }
  .section { padding-inline: 1.2rem; }
  .topbar { min-height: 3.8rem; }
  .wordmark { font-size: 0.57rem; }
  .theme-button, .share-button { min-height: 2.75rem; padding-inline: 0.55rem; }
  .theme-button { font-size: 0.68rem; }
  .intro-label { font-size: 0.52rem; letter-spacing: 0.18em; }
  .intro h1 { font-size: 2rem; letter-spacing: -0.075em; }
  .event { grid-template-columns: 1fr; }
  .event-stage { width: 72%; }
  .event-copy { text-align: center; }
  .event-facts { text-align: left; }
  .countdown { margin-top: 0; }
  .countdown-grid strong { font-size: 1.35rem; }
  .program-card button { grid-template-columns: 2rem 1fr auto; gap: 0.65rem; padding-inline: 0.9rem; }
  .program-card > p { padding-left: 3.55rem; }
  .download-grid { grid-template-columns: 1fr; }
  .download-card { min-height: 7.25rem; }
  .book-hint { display: none; }
  .book-stage { padding: 1rem 2.55rem; }
  .book { display: block; width: min(100%, 25rem); aspect-ratio: 0.708; }
  .book-page-left { display: none; }
  .book-page-right { width: 100%; height: 100%; border-radius: 0.18rem; }
  .book-spine { display: none; }
  .book-turn-sheet { width: 100%; overflow: hidden; }
  .book-turn-back { display: none; }
  .book-controls { grid-template-columns: 5.2rem 1fr 5.2rem; gap: 0.45rem; }
  .artist-groups { grid-template-columns: 1fr; }
  .artist-group { min-height: 13rem; padding: 1.3rem; }
  .artist-icon { width: 5.6rem; margin-bottom: 1.2rem; }
}

@media (max-width: 390px) {
  .wordmark { max-width: 8.4rem; line-height: 1.25; }
  .theme-button [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-button { width: 2.75rem; padding: 0; justify-content: center; }
  .share-button { font-size: 0.68rem; }
  .event-facts p { grid-template-columns: 4.5rem 1fr; gap: 0.6rem; }
  .download-card { grid-template-columns: 3rem 1fr auto; gap: 0.75rem; padding-inline: 0.9rem; }
  .download-icon { width: 3rem; }
  .book-stage { padding-inline: 2.15rem; }
  .book-edge { width: 2.75rem; min-height: 4rem; }
  .book-controls { grid-template-columns: 1fr 1fr; }
  .book-controls > button:first-child { grid-column: 1; grid-row: 2; }
  .book-controls > button:last-child { grid-column: 2; grid-row: 2; }
  .book-dots { grid-column: 1 / -1; grid-row: 1; }
  .book-controls > button { font-size: 0.72rem; }
  .quick-nav a { min-height: 4.25rem; font-size: 0.63rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  #atmosphere { display: none; }
  .invitation-shell::before { display: none; }
}