@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root { color-scheme: light; --bg: #f2eee7; --paper: #f8f6f1; --ink: #191816; --muted: #77716a; --line: rgba(25,24,22,.12); --soft: #e9e1d8; --accent: #b86f60; --accent-soft: #d7aca1; --max: 760px; --nav-h: 54px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }
button, a, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; width: 100%; }

.top-nav { position: fixed; z-index: 900; top: 0; left: 50%; transform: translateX(-50%); width: min(101%, var(--max)); height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto; column-gap: 16px; align-items: center; background: rgba(248,246,241,.82); border-bottom: 1px solid rgba(25,24,22,.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.top-nav button { border: 0; background: none; padding: 8px 0; cursor: pointer; font-size: 13px; }
.top-nav__back { justify-self: start; min-width: 0; white-space: nowrap; font-size: 15px !important; font-weight: 600; }
.top-nav__brand { justify-self: end; font-size: 10px; letter-spacing: 0; font-weight: 750; white-space: nowrap; }
.top-nav__share { justify-self: end; white-space: nowrap; }
.top-nav.is-story { background: rgba(22,21,19,.72); color: #fff; border-color: rgba(255,255,255,.12); }

.view-stack { min-height: 100vh; }
.app-view { display: none; }
.app-view--active { display: block; }

.page-shell { width: min(100%, var(--max)); margin: 0 auto; background: var(--paper); min-height: 100vh; overflow: hidden; box-shadow: 0 0 70px rgba(35,30,24,.08); }

.hero { min-height: 100svh; position: relative; padding: calc(var(--nav-h) + env(safe-area-inset-top) + 28px) 24px 48px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.hero__ambient { position: absolute; border-radius: 50%; opacity: .5; z-index: -1; pointer-events: none; }
.hero__ambient--one { width: 330px; height: 330px; background: #ece0d5; top: 8%; right: -170px; }
.hero__ambient--two { width: 240px; height: 240px; background: #efe4df; bottom: 10%; left: -150px; }
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; letter-spacing: .13em; }
.eyebrow { font-weight: 750; }
.hero__date { color: var(--muted); }
.hero__copy { margin-top: 9vh; }
.hero__small, .section-kicker { margin: 0 0 13px; font-size: 11px; letter-spacing: .17em; font-weight: 800; color: var(--accent); }
.hero h1 { margin: 0; line-height: .94; letter-spacing: -.06em; font-size: clamp(50px,13vw,88px); font-weight: 850; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { margin-top: 11px; font-style: normal; font-size: .62em; font-weight: 520; letter-spacing: -.05em; }
.hero__intro { white-space: pre-line; margin: 22px 0 0; color: #5d5852; font-size: 17px; line-height: 1.75; font-weight: 430; }
.hero__photo { width: min(100%,520px); margin: 42px 0 0 auto; position: relative; }
.hero__photo img, .photo-empty { aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; background: #e9e4dd; }
.hero__photo::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--line); z-index: -1; }
.hero__photo figcaption { margin-top: 13px; font-size: 10px; letter-spacing: .16em; text-align: right; color: var(--muted); }
.photo-empty { display: grid; place-items: center; color: var(--muted); }
.scroll-cue { margin-top: 35px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.scroll-cue i { display: block; width: 54px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; width: 50%; background: var(--ink); animation: scan 2s infinite ease-in-out; }

@keyframes scan { from { transform: translateX(-110%); } to { transform: translateX(220%); } }

.section { padding: 110px 28px; }
.intro-section { text-align: center; border-top: 1px solid var(--line); }
.section h2, .event-section h2, .parents-section h2, .story-entry h2, .album-page h2, .candle-section h2, .guestbook-section h2 { margin: 0; font-size: clamp(34px,8vw,54px); line-height: 1.16; letter-spacing: -.055em; font-weight: 680; }
.body-copy { margin: 24px 0 24px 0; color: var(--muted); font-size: 16px; line-height: 1.85; }

.event-section { padding: 108px 28px; }
.event-section--main { border-top: 1px solid var(--line); }
.event-date { padding: 26px 0 34px; display: flex; flex-direction: column; gap: 6px; }
.event-date strong { font-size: 41px; letter-spacing: -.05em; }
.event-date span { color: var(--accent); letter-spacing: .1em; font-size: 14px; }
.event-card { border-top: 1px solid var(--ink); }
.event-card > div { padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 85px 1fr; gap: 6px 10px; align-items: start; }
.event-card span { font-size: 10px; letter-spacing: .15em; color: var(--accent); padding-top: 3px; }
.event-card strong { font-size: 17px; line-height: 1.55; font-weight: 600; white-space: pre-line; }
.event-card strong span { display: block; margin-top: 6px; color: var(--accent); font-size: 13px; font-weight: 450; }
.event-card p { grid-column: 2; margin: -2px 0 0; color: var(--muted); font-size: 15px; }
.map-buttons, .contact-row { display: flex; gap: 8px; margin-top: 24px; }
.map-buttons a, .contact-row a { flex: 1; text-align: center; text-decoration: none; color: var(--ink); border: 1px solid var(--ink); padding: 15px 14px; border-radius: 3px; background: transparent; }

.story-entry { padding: 118px 28px 126px; background: #1d1b18; color: #f8f4ee; text-align: left; }
.story-entry .section-kicker { color: #d7aca1; }
.story-entry h2 { max-width: 520px; font-size: clamp(40px,9.5vw,64px); }
.story-entry > p:not(.section-kicker) { margin: 22px 0 44px; color: rgba(248,244,238,.65); line-height: 1.8; }
.story-entry__button { width: 100%; position: relative; border: 0; background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.018) 18%,rgba(255,255,255,.028) 50%,rgba(255,255,255,.018) 82%,rgba(255,255,255,0) 100%); color: inherit; padding: 25px 8px; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; transition: background .25s ease; }
.story-entry__button::before, .story-entry__button::after { content: ""; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent); pointer-events: none; }
.story-entry__button::before { top: 0; }
.story-entry__button::after { bottom: 0; }
.story-entry__button-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; }
.story-entry__button-copy small { color: rgba(224,180,169,.78); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.story-entry__button-copy strong { color: #f8f4ee; font-size: 18px; font-weight: 620; letter-spacing: -.015em; }
.story-entry__button i { flex: 0 0 auto; font-style: normal; font-size: 25px; line-height: 1; color: rgba(224,180,169,.78); animation: storyArrow 1.8s ease-in-out infinite; }
.story-entry__button:active { background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.03) 18%,rgba(255,255,255,.055) 50%,rgba(255,255,255,.03) 82%,rgba(255,255,255,0) 100%); }

@keyframes storyArrow { 0%,100% { transform: translate(-7px,7px); opacity: .72; } 50% { transform: translate(5px,-5px); opacity: 1; } }

.parents-section { padding: 95px 28px; background: #e9e0d7; }
.parents-section h2 { font-size: clamp(30px,7.2vw,46px); }
.contact-row a { font-size: 14px; }

/* Story view */

.app-view--story { background: #161513; color: #fff; }
.storybook { width: min(100%, var(--max)); margin: 0 auto; height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; background: #161513; }
.storybook::-webkit-scrollbar { display: none; }
.story-snap { min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
.story-cover { display: grid; place-items: center; padding: calc(var(--nav-h) + env(safe-area-inset-top) + 34px) 28px 40px; background: #1d1b18; }
.story-cover__inner { width: 100%; }
.story-cover h2 { margin: 0; font-size: clamp(54px,14vw,96px); line-height: .97; letter-spacing: -.07em; font-weight: 760; }
.story-cover p:not(.section-kicker) { margin: 28px 0 80px; color: rgba(255,255,255,.56); font-size: 16px; line-height: 1.8; }
.story-cover__line { width: 100%; height: 1px; background: rgba(255,255,255,.18); margin-bottom: 14px; }
.story-cover span { font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.48); }

.story-page { perspective: 1200px; overflow: hidden; background: #161513; }
.story-page__paper { min-height: 100svh; position: relative; transform-origin: 50% 50%; background: #111; overflow: hidden; transition: filter .22s ease, opacity .22s ease; will-change: transform, filter; }
.story-page__image { position: absolute; inset: 0; margin: 0; }
.story-page__image img { width: 100%; height: 100%; object-fit: cover; }
.story-page__shade { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(8,7,6,.05) 18%,rgba(8,7,6,.18) 48%,rgba(8,7,6,.86) 100%); }
.story-page__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 44px 28px max(46px,env(safe-area-inset-bottom)); }
.story-page__copy span { color: #e0b4a9; font-size: 10px; letter-spacing: .15em; font-weight: 760; }
.story-page__copy h3 { margin: 11px 0 14px; font-size: clamp(38px,9.4vw,64px); line-height: 1.06; letter-spacing: -.055em; }
.story-page__copy p { margin: 0; max-width: 520px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; }
.story-page__fold { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none; opacity: 0; background: linear-gradient(to top,rgba(255,255,255,.16),rgba(255,255,255,0)); transform-origin: bottom; transform: perspective(600px) rotateX(68deg); transition: opacity .2s ease; }
.story-page.is-turning .story-page__fold { opacity: 1; }
.story-page.is-turning .story-page__paper { filter: brightness(.80); }

.album-page { background: #eee9e2; color: var(--ink); padding: calc(var(--nav-h) + env(safe-area-inset-top) + 58px) 0 46px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.album-page__head { padding: 0 28px 34px; }
.album-page__head > p:last-child { margin: 18px 0 0; color: var(--muted); }
.album-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw,360px); gap: 12px; overflow-x: auto; padding: 0 28px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.album-strip::-webkit-scrollbar { display: none; }
.gallery-item { border: 0; padding: 0; background: transparent; text-align: left; cursor: zoom-in; scroll-snap-align: center; }
.gallery-item img { width: 100%; height: auto; }
.gallery-item span { display: block; padding-top: 11px; font-size: 12px; color: var(--muted); }
.album-page__hint { margin: 2px 28px 0; color: var(--accent); font-size: 13px; font-weight: bold; }

.candle-section { background: var(--paper); color: var(--ink); display: grid; place-items: center; padding: calc(var(--nav-h) + env(safe-area-inset-top) + 30px) 24px max(40px,env(safe-area-inset-bottom)); overflow: hidden; }
.candle-section__inner { width: 100%; text-align: center; position: relative; }
.candle-section__lead { margin: 16px 0 0; color: var(--muted); }
.cake { width: 180px; height: 180px; margin: 42px auto 14px; display: block; position: relative; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cake__plate, .cake__body, .cake__top, .cake__candle, .cake__flame { position: absolute; left: 50%; transform: translateX(-50%); display: block; }
.cake__plate { width: 150px; height: 12px; bottom: 16px; border-radius: 50%; background: #cec3b8; }
.cake__body { width: 118px; height: 72px; bottom: 26px; background: #ead6cd; border-radius: 8px 8px 16px 16px; box-shadow: inset 0 -12px rgba(255,255,255,.18); }
.cake__top { width: 118px; height: 24px; bottom: 86px; border-radius: 50%; background: #f4e4dd; }
.cake__candle { width: 8px; height: 38px; bottom: 100px; border-radius: 4px; background: repeating-linear-gradient(45deg,#d9998b 0 5px,#f2ddd6 5px 10px); }
.cake__flame { width: 17px; height: 26px; bottom: 140px; border-radius: 50% 50% 46% 46%; background: #efae5a; box-shadow: 0 0 28px rgba(239,174,90,.55); transform-origin: 50% 100%; animation: flame 1.1s infinite ease-in-out; transition: .35s ease; }

@keyframes flame { 0%,100% { transform: translateX(-50%) rotate(-4deg) scale(1); } 50% { transform: translateX(-50%) rotate(4deg) scale(.93,1.05); } }

.candle-section.is-blown .cake__flame { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.3); }
.wish-button { border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 12px 24px; cursor: pointer; }
.wish-message { margin: 14px 0 0; color: var(--muted); font-size: 13px; min-height: 20px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 7px; height: 12px; border-radius: 3px; opacity: 0; animation: confetti .95s ease-out forwards; }

@keyframes confetti { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)); } }

.candle-next { margin: 26px auto 0; animation: candleNext .6s ease both; }
.candle-next span { display: block; color: var(--muted); font-size: 12px; }
.candle-next strong { display: block; margin-top: 8px; font-size: 22px; line-height: 1.4; }
.candle-next i { display: block; margin-top: 13px; font-style: normal; animation: bob 1.2s infinite ease-in-out; }

@keyframes candleNext { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bob { 50% { transform: translateY(6px); } }

.guestbook-section { background: #e9e0d7; color: var(--ink); padding: calc(var(--nav-h) + env(safe-area-inset-top) + 60px) 28px 0; overflow-y: auto; scroll-snap-align: start; }
.guestbook-section__inner { min-height: calc(100svh - var(--nav-h)); }
.guestbook-lead { margin: 18px 0 34px; color: var(--muted); line-height: 1.75; }
.guestbook-form { padding: 26px 0; border-bottom: 1px solid rgba(25,24,22,.18); }
.guestbook-form label { display: block; margin-bottom: 22px; }
.guestbook-form label > span { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .08em; color: black; font-weight: bold; }
.guestbook-form input, .guestbook-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(25,24,22,.2); border-radius: 0; padding: 12px 0; background: transparent; color: var(--ink); outline: none; resize: none; }
.guestbook-form input:focus, .guestbook-form textarea:focus { border-bottom-color: var(--ink); }
.guestbook-form__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.guestbook-form__bottom small { color: var(--muted); }
.guestbook-form__bottom button { border: 1px solid var(--ink); background: var(--ink); color: white; padding: 12px 18px; cursor: pointer; }
.guestbook-status { min-height: 18px; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.guestbook-list { padding: 12px 0 12px; }
.guestbook-item { padding: 22px 0; border-bottom: 1px solid rgba(25,24,22,.12); }
.guestbook-item__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.guestbook-item__top strong { font-size: 14px; }
.guestbook-item__top time { font-size: 10px; color: var(--muted); }
.guestbook-item p { margin: 10px 0 0; color: #514c46; line-height: 1.75; white-space: pre-wrap; }
.guestbook-empty { padding: 34px 0; color: var(--muted); text-align: center; font-size: 13px; }

.guestbook-pagination { min-height: 38px; margin: 10px 0 46px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.guestbook-pagination[hidden] { display: none; }
.guestbook-pagination button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.guestbook-pagination button:hover { background: rgba(25,24,22,.06); color: var(--ink); }
.guestbook-pagination button.is-active { background: var(--ink); color: #fff; }
.guestbook-pagination button:disabled { opacity: .25; cursor: default; }
.guestbook-pagination__arrow { font-size: 22px !important; font-weight: 300 !important; line-height: 1; }
.guestbook-pagination__ellipsis { width: 24px; text-align: center; color: var(--muted); font-size: 12px; }

.story-ending { min-height: 72svh; padding: 90px 0 60px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 1px solid rgba(25,24,22,.16); }
.story-ending__mark { font-size: 150px; line-height: .8; font-weight: 250; letter-spacing: -.1em; color: var(--accent-soft); }
.story-ending p { margin: 38px 0 32px; font-size: 24px; line-height: 1.55; letter-spacing: -.04em; }
.story-ending button { width: min(100%,320px); border: 1px solid var(--ink); padding: 15px 14px; background: var(--ink); color: #fff; cursor: pointer; }
.story-ending small { margin-top: 55px; color: var(--muted); font-size: 11px; letter-spacing: .18em; }

.lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(14,13,12,.94); display: none; align-items: center; justify-content: center; color: white; touch-action: pan-y; }
.lightbox.is-open { display: flex; }
.lightbox__figure { width: 100%; margin: 0; padding: 62px 18px 108px; text-align: center; }
.lightbox__figure img { max-height: 74svh; width: 100%; object-fit: contain; transition: opacity .18s ease; }
.lightbox__figure figcaption { margin-top: 15px; font-size: 13px; color: rgba(255,255,255,.72); min-height: 20px; }
.lightbox__figure span { display: block; margin-top: 7px; color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: .14em; }
.lightbox__close, .lightbox__nav { position: absolute; z-index: 2; border: 0; color: white; cursor: pointer; }
.lightbox__close { top: max(18px,env(safe-area-inset-top)); right: 20px; background: none; font-size: 38px; font-weight: 200; }
.lightbox__nav { bottom: max(24px,env(safe-area-inset-bottom)); width: 54px; height: 54px; padding: 0; background: none; font-size: 40px; line-height: 1; opacity: .8; }
.lightbox__nav--prev { left: calc(50% - 95px); }
.lightbox__nav--next { right: calc(50% - 95px); }
#lightboxCounter { position: absolute; z-index: 2; left: 50%; bottom: calc(max(24px,env(safe-area-inset-bottom)) + 18px); transform: translateX(-50%); margin: 0; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
.lightbox__spinner { position: absolute; z-index: 3; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.9); border-radius: 50%; opacity: 0; pointer-events: none; animation: lightboxSpin .8s linear infinite; transition: opacity .15s ease; }
.lightbox__spinner.is-visible { opacity: 1; }
.lightbox__figure img.is-loading { opacity: 0; }

@keyframes lightboxSpin { to { transform: rotate(360deg); } }

.music-button { position: fixed; right: max(16px,calc((100vw - var(--max))/2 + 16px)); bottom: 18px; z-index: 1000; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(25,24,22,.16); background: rgba(248,246,241,.9); backdrop-filter: blur(8px); box-shadow: 0 8px 25px rgba(0,0,0,.08); cursor: pointer; }
.music-button.is-playing { animation: spin 4s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
body.is-locked { overflow: hidden; }

@media (min-width:761px) {
  .hero { padding-left: 42px; padding-right: 42px; }
  .section, .event-section, .parents-section, .story-entry { padding-left: 52px; padding-right: 52px; }
  .story-page__copy, .album-page__head { padding-left: 52px; padding-right: 52px; }
  .album-strip { padding-left: 52px; padding-right: 52px; }
  .guestbook-section { padding-left: 52px; padding-right: 52px; }
}

@media (max-width:420px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .desktop-only { display: none; }
  .event-card > div { grid-template-columns: 72px 1fr; }
  .top-nav { column-gap: 10px; }
  .top-nav__brand { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .storybook { scroll-snap-type: none; }
}

.kakao-map { width: 100%; aspect-ratio: 16 / 10; margin: 32px 0 20px; border-radius: 24px; overflow: hidden; pointer-events: none; }

.story-entry__parents { margin-top: 72px; }
.story-entry__parents .section-kicker { color: #d7aca1; }
.story-entry__parents h3 { margin: 0; font-size: clamp(30px,7.2vw,46px); line-height: 1.3; letter-spacing: -.045em; font-weight: 620; }
.contact-row--story { margin-top: 28px; }
.contact-row--story a { color: #f8f4ee; border-color: rgba(255,255,255,.35); background: transparent; font-weight: 650; }

.contact-row--story { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 28px; }
.contact-row--story a, .contact-row--story button { min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: #f8f4ee; border: 1px solid rgba(255,255,255,.35); padding: 15px 6px; border-radius: 3px; background: transparent; font-size: 13px; font-weight: 650; line-height: 1.3; cursor: pointer; white-space: nowrap; }

.account-modal { position: fixed; inset: 0; z-index: 1500; display: none; align-items: flex-end; justify-content: center; padding: 0; }
.account-modal.is-open { display: flex; }
.account-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(10,9,8,.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: pointer; }
.account-modal__sheet { position: relative; z-index: 1; width: min(100%,760px); max-height: 85svh; overflow-y: auto; padding: 30px 28px max(34px,env(safe-area-inset-bottom)); background: #f8f6f1; color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.22); animation: accountModalIn .28s cubic-bezier(.22,.8,.3,1); }
.account-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.account-modal__head .section-kicker { margin: 0 0 8px; }
.account-modal__head h3 { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: -.045em; font-weight: 680; }
.account-modal__close { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(25,24,22,.06); color: var(--ink); font-size: 28px; line-height: 1; font-weight: 300; cursor: pointer; }
.account-modal__lead { margin: 18px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.account-modal__item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.account-modal__label { font-size: 13px; font-weight: 750; color: var(--accent); }
.account-modal__account { min-width: 0; }
.account-modal__account strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.55; font-weight: 650; word-break: break-all; }
.account-modal__account span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.account-copy-button { flex: 0 0 auto !important; width: auto !important; min-width: 56px; padding: 8px 12px !important; border: 1px solid rgba(25,24,22,.22) !important; border-radius: 999px !important; background: transparent !important; color: var(--ink) !important; font-size: 12px !important; font-weight: 650; cursor: pointer; }
.account-copy-button.is-copied { background: var(--ink) !important; color: #fff !important; }
body.is-locked { overflow: hidden; }

@keyframes accountModalIn { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width:420px) {
  .contact-row--story a, .contact-row--story button { padding-left: 3px; padding-right: 3px; font-size: 12px; }
  .account-modal__sheet { padding-left: 22px; padding-right: 22px; }
  .account-modal__item { grid-template-columns: 36px minmax(0,1fr) auto; gap: 8px; }
  .account-modal__account strong { font-size: 15px; }
}

.custom-alert { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.custom-alert.is-open { display: flex; }
.custom-alert__backdrop { position: absolute; inset: 0; background: rgba(10,9,8,.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.custom-alert__box { position: relative; z-index: 1; width: min(100%,360px); padding: 28px 24px 22px; background: #f8f6f1; color: var(--ink); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.22); text-align: center; animation: customAlertIn .22s ease; }
.custom-alert__box p { margin: 0 0 22px; font-size: 15px; line-height: 1.65; }
.custom-alert__box button { width: 100%; border: 0; background: var(--ink); color: #fff; padding: 13px 16px; border-radius: 4px; font-weight: 650; cursor: pointer; }
@keyframes customAlertIn { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
/* StoryNote data and preview additions; original layout is retained. */
.event-card strong,.hero__intro { white-space: pre-line; }
.preview-banner {position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:8px 18px;background:#fff9;border:1px solid #d9cfc0;border-radius:30px;z-index:100;font-size:12px;backdrop-filter:blur(8px)}
.thankyou-page {max-width:680px;margin:auto;padding:80px 24px;text-align:center} .thankyou-page img{width:100%;max-height:560px;object-fit:cover;border-radius:120px 120px 24px 24px;margin:30px 0} .thankyou-page p{white-space:pre-line;line-height:2}