/* A warm invitation, with the emblem as its visual anchor. */
body.app-flow {
  --paper: #fbf7ef;
  --ink: #332d24;
  --muted: #766b5b;
  --gold: #96713a;
  --line: #bba47b40;
  --shadow: 0 8px 30px #5a43200a;
  background: radial-gradient(ellipse at 100% 0, #f1e2cb80, transparent 45%), #fbf7ef;
  color: var(--ink);
}
body.app-flow::before, body.app-flow::after, .app-flow .ambient-film { display: none; }
.app-flow h1, .app-flow h2, .app-flow h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; color: #3c392b; }
.app-flow .topbar { border-bottom: 1px solid var(--line); background: #fbf7eff2; box-shadow: none; backdrop-filter: none; }
.app-flow .brand-mark { width: 42px; height: 42px; box-shadow: 0 0 0 1px #b69b6b50; }
.app-flow .brand strong { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.app-flow .brand small { color: #897046; font-size: .58rem; letter-spacing: .12em; }
.app-flow main { max-width: 1440px; margin-inline: auto; }
.app-flow main > section { scroll-margin-top: 88px; }
.app-flow .hero { gap: 36px; padding-top: 44px; }
.app-flow .hero-cover { display: grid; place-items: center; min-width: 0; }
.app-flow .hero h1 em { font-family: Georgia, serif; font-weight: 400; color: #96713a; }
.app-flow .topbar nav { background: #fbf7eff5; grid-template-columns: repeat(var(--navigation-count, 6), minmax(0, 1fr)); }
.app-flow .topbar nav a.active { background: #3e5547; color: #fffaf0; }
.app-flow .guest-reminder-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.app-flow .hero::before, .app-flow .hero::after { display: none; }
.app-flow .hero-copy > .eyebrow { color: #897046; font-size: .65rem; letter-spacing: .16em; }
.app-flow h1 { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.15; letter-spacing: -.045em; }
.app-flow .hero-line { max-width: 440px; color: var(--muted); font-size: .9rem; line-height: 1.9; }
.app-flow .home-pills, .app-flow .home-stat-grid { display: none; }
.app-flow .hero-emblem-panel { background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; }
.app-flow .hero-emblem { width: min(72vw, 310px); height: auto; aspect-ratio: 1; border-radius: 50%; animation: none; box-shadow: 0 0 0 6px #fbf7ef, 0 0 0 7px #bba47b60, 0 12px 40px #84612615; }
.app-flow .button { min-height: 46px; border-radius: 12px; box-shadow: none; font-size: .8rem; font-weight: 600; transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.app-flow .button.primary { color: #fffaf0; background: #3e5547; border: 1px solid #3e5547; }
.app-flow .button.ghost { color: #5c503c; background: #fffdf980; border: 1px solid #d9cdb9; }
.app-flow .button:active, .app-flow .chip:active { transform: scale(.97); }
.app-flow :focus-visible { outline: 2px solid #96713a; outline-offset: 4px; }
.app-flow .quick-actions { gap: 12px; }
.app-flow .quick-actions a { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.app-flow .quick-actions a > span { display: none; }
.app-flow .quick-actions small { line-height: 1.6; }
.app-flow .countdown-panel { width: 100%; background: #f4ecdd; border: 1px solid #d8c6a5; border-radius: 20px; box-shadow: none; padding: 24px; }
.app-flow .countdown-panel .panel-label { text-align: center; color: #76623f; font: italic 1rem Georgia, serif; text-transform: none; letter-spacing: 0; }
.app-flow .countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.app-flow .countdown-grid div { background: transparent; border: 0; border-right: 1px solid #bba47b55; border-radius: 0; padding: 10px 2px; }
.app-flow .countdown-grid div:last-child { border: 0; }
.app-flow .countdown-grid strong { font-weight: 400; color: #775e32; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.app-flow .countdown-grid span { font-size: .55rem; letter-spacing: .1em; color: #766b5b; font-weight: 600; }
.app-flow .next-event { background: transparent; border: 0; text-align: center; font-size: .75rem; color: #766b5b; }
.app-flow .home-dashboard { grid-template-columns: 1fr; }
.app-flow .pass-banner, .app-flow .access-pass-card { background: #3e5547; border: 1px solid #72816b; border-radius: 22px 6px 22px 6px; box-shadow: none; outline: 1px solid #e7d6a845; outline-offset: -8px; }
.app-flow .pass-banner strong, .app-flow .access-pass-card h3 { color: #fff8e7; }
.app-flow .pass-banner span, .app-flow .pass-banner small, .app-flow .access-pass-card p { color: #e4e3d3; }
.app-flow .pass-seal { background: url('assets/ja-emblem.png') center / cover; border: 1px solid #dec692; box-shadow: none; }
.app-flow .access-pass-card h3 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.18; }
.app-flow .pass-banner::before, .app-flow .pass-banner::after { display: none; }
.app-flow .section-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.app-flow .section-heading > .eyebrow { display: none; }
.app-flow .section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; letter-spacing: -.035em; }
.app-flow .event-card, .app-flow .guest-card, .app-flow .media-card { border: 1px solid #e4dac8; background: #fffdf8; border-radius: 20px; box-shadow: 0 6px 24px #60482006; }
.app-flow .event-card { min-height: 0; gap: 14px; padding: 18px; }
.app-flow .event-card::before, .app-flow .event-card::after { display: none; }
.app-flow .event-card-top b { background: #f1eadc; color: #79643e; border-radius: 6px; font-size: .58rem; }
.app-flow .event-date { color: #79643e; font-size: .65rem; font-weight: 600; line-height: 1.6; }
.app-flow .event-visual { border-radius: 100px 100px 12px 12px; min-height: 160px; }
.app-flow .event-visual span { display: none; }
.app-flow .event-visual::after { background: url('assets/botanical-sprig.svg') center / 138px 138px no-repeat; opacity: .85; }
.app-flow .event-card h3 { font-size: 1.7rem; line-height: 1.2; }
.app-flow .event-card > p { font-size: .8rem; line-height: 1.7; }
.app-flow .event-guide-copy { display: none; }
.app-flow .event-meta { margin: 0; gap: 6px; }
.app-flow .event-meta span { font-size: .62rem; padding: 6px 9px; border: 0; background: #f4efe5; color: #655b47; }
.app-flow .event-detail-button { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: #3e5547; padding: 15px 0 2px; text-align: left; font-weight: 600; }
.app-flow .event-detail-button::after { content: '\2197'; float: right; }
.app-flow .guest-console, .app-flow .guest-list-wrap, .app-flow .portal-card, .app-flow .memory-panel, .app-flow .upload-panel, .app-flow .core-panel { background: #fffdf880; box-shadow: none; border: 1px solid #e4dac8; border-radius: 20px; backdrop-filter: none; }
.app-flow .guest-next-card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; box-shadow: none; }
.app-flow .guest-next-card h2 { font-size: 1.8rem; }
.app-flow .guest-next-card > p { color: var(--muted); line-height: 1.8; font-size: .8rem; }
.app-flow .guest-reminder-grid > span { background: transparent; border-radius: 0; border-right: 1px solid var(--line); }
.app-flow .dress-guide-card { background: #eff0e6; border: 0; border-radius: 12px; }
.app-flow .mini-event-card { background: #fffdf8; border: 1px solid #e4dac8; border-radius: 14px; box-shadow: none; }
.app-flow .chip { border: 1px solid #d9cdb9; background: transparent; color: #665b48; min-height: 40px; box-shadow: none; }
.app-flow .chip.active { color: #fffaf0; background: #3e5547; border-color: #3e5547; }
.app-flow input, .app-flow select, .app-flow textarea { background: #fffefa; border-color: #d9cdb9; border-radius: 10px; min-height: 44px; }
.app-flow input[type='checkbox'] { min-height: 16px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #3e5547; }
.app-flow .check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.app-flow .check-grid label { padding: 10px; min-height: 44px; font-size: .72rem; line-height: 1.4; }
.app-flow label > span { color: #6a604f; font-weight: 600; }
.app-flow .file-drop { border: 1px dashed #99a18a; background: #f0f1e7; border-radius: 16px; }
.app-flow .media-grid { gap: 16px; }
.app-flow .empty-memory-card { grid-column: 1 / -1; border: 1px dashed #d9cdb9; background: transparent; border-radius: 16px; box-shadow: none; }
.app-flow .media-card { overflow: hidden; }
.app-flow .media-card img, .app-flow .media-card video { aspect-ratio: 4 / 5; object-fit: cover; }
.app-flow .event-detail-card { background: #fbf7ef; border: 1px solid #d9cdb9; border-radius: 24px; }
.app-flow .event-sheet:not([hidden]) .event-detail-card { animation: invitation-sheet 350ms cubic-bezier(.2,.7,.2,1) both; }
.app-flow .planner-tabs { gap: 8px; padding-bottom: 12px; }
.app-flow .planner-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.app-flow .planner-overview-grid article { min-height: 90px; padding: 16px; border-radius: 12px; background: #f4efe4; border: 0; }
.app-flow .planner-tabs { scrollbar-width: none; }
.app-flow .planner-tabs::-webkit-scrollbar { display: none; }
.app-flow .planner-panel.active { animation: invitation-page 300ms ease both; }
.app-flow .active-screen { animation: invitation-page 450ms ease both; }
.reveal-on-scroll { opacity: 0; translate: 0 18px; transition: opacity 650ms ease var(--reveal-delay, 0ms), translate 650ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-revealed { opacity: 1; translate: 0 0; }
@keyframes invitation-page { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes invitation-sheet { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
.invitation-curtains { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #e9d3aa 0%, #f9edcf 7%, #d4b783 14%, #eeddb7 21%); box-shadow: inset -12px 0 40px #79623b20; animation-duration: 2600ms; animation-timing-function: cubic-bezier(.65,0,.25,1); animation-delay: 750ms; animation-fill-mode: both; }
.curtain::after { content: ''; position: absolute; inset: 18px; border: 1px solid #af8d5255; border-radius: 0 0 42% 42%; }
.curtain-left { left: 0; transform-origin: left top; animation-name: curtain-left-open; }
.curtain-right { right: 0; transform-origin: right top; animation-name: curtain-right-open; }
.curtain-seal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: curtain-seal-fade 700ms ease 1050ms both; }
.curtain-seal img { border-radius: 50%; box-shadow: 0 0 0 6px #fff3d750, 0 12px 40px #79623b30; }
.curtain-seal span { font: italic 1.5rem Georgia, serif; color: #6b522a; }
@keyframes curtain-left-open { to { transform: translateX(-103%) rotate(-4deg); } }
@keyframes curtain-right-open { to { transform: translateX(103%) rotate(4deg); } }
@keyframes curtain-seal-fade { to { opacity: 0; transform: scale(.92); } }
@media (hover: hover) {
  .app-flow .button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px #59432312; }
  .app-flow .mini-event-card:hover { border-color: #bba47b; }
}
@media (min-width: 981px) {
  .app-flow .hero { align-items: center; }
  .app-flow .hero-copy { grid-column: 1; grid-row: 1 / span 2; }
  .app-flow .hero-cover { grid-column: 2; grid-row: 1; }
  .app-flow .hero-emblem-panel { grid-column: 2; grid-row: 2; }
  .app-flow .event-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
@media (max-width: 980px) {
  .app-flow .hero { gap: 28px; }
  .app-flow .hero-emblem-panel { justify-items: center; }
  .app-flow .hero-emblem { width: 210px; }
  .app-flow .event-rail { grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; }
}
@media (max-width: 680px) {
  .app-flow .topbar { padding: 12px 18px; }
  .app-flow .brand { margin: 0; }
  .app-flow .brand small { display: block; font-size: .52rem; }
  .app-flow .topbar nav { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: #fbf7eff5; padding: 7px 8px max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px #60482005; }
  .app-flow .topbar nav a { border-radius: 12px; color: #7c7465; min-height: 52px; font-weight: 600; }
  .app-flow .topbar nav a.active { background: #e9ecdf; color: #3e5547; }
  .app-flow .hero { padding: 30px 20px 32px; gap: 26px; }
  .app-flow #home.active-screen { display: flex; flex-direction: column; }
  .app-flow .hero-cover { order: 0; width: 100%; }
  .app-flow .hero-copy { display: contents; text-align: center; }
  .app-flow .hero-copy > .eyebrow { order: 1; margin: 0; text-align: center; }
  .app-flow .hero-copy > h1 { order: 2; margin: -10px 0 0; text-align: center; }
  .app-flow .hero-copy > .hero-line { order: 3; margin: -12px auto 0; text-align: center; }
  .app-flow .hero-emblem-panel { order: 4; }
  .app-flow .hero-actions { order: 5; margin: 0; }
  .app-flow .guest-home-panel { order: 6; width: 100%; }
  .app-flow .quick-actions { order: 7; width: 100%; }
  .app-flow .home-dashboard { order: 8; width: 100%; }
  .app-flow h1 { font-size: clamp(2.5rem, 11vw, 3.7rem); }
  .app-flow .hero-line { font-size: .8rem; margin-inline: auto; }
  .app-flow .hero-actions { justify-content: center; }
  .app-flow .hero-emblem-panel { width: 100%; gap: 28px; }
  .app-flow .hero-emblem { width: 190px; }
  .app-flow .guest-home-panel { text-align: left; }
  .app-flow .guest-home-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .app-flow .guest-home-actions .button { font-size: .66rem; padding: 10px 5px; min-width: 0; }
  .app-flow .mini-event-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-flow .section { padding: 28px 18px 44px; }
  .app-flow .event-rail { grid-template-columns: minmax(0,1fr); margin: 0; padding: 0; gap: 20px; }
  .app-flow .event-card { padding: 18px; }
  .app-flow .event-visual { min-height: 180px; }
  .app-flow .event-detail-card { max-height: 88dvh; }
  .app-flow .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .app-flow .media-card div { padding: 10px; }
  .app-flow .media-actions { flex-wrap: wrap; }
  .app-flow .media-actions .button { font-size: .65rem; padding: 8px; }
  .app-flow .hero-copy, .app-flow .hero-emblem-panel, .app-flow .memory-layout > *, .app-flow .portal-grid > *, .app-flow .guest-console, .app-flow .guest-list-wrap { min-width: 0; }
}
/* Scenic stationery and small, useful keepsakes. */
.app-flow { background: #faf6ef; }
.app-flow .hero-cover {
  position: relative;
  min-height: 320px;
  border-radius: 160px 160px 24px 24px;
  background: #f0e4cf url('assets/invitation-garden.jpg') center top / cover;
  overflow: hidden;
  isolation: isolate;
}
.app-flow .hero-cover::after { content: ''; position: absolute; inset: 9px; border: 1px solid #fff9e8a0; border-radius: inherit; z-index: -1; }
.app-flow .hero-cover .hero-emblem { width: 150px; box-shadow: 0 0 0 5px #fff7e89c, 0 0 0 6px #b99b6280, 0 10px 30px #7653262a; }
.app-flow .hero-copy > .eyebrow { font-weight: 600; }
.app-flow .countdown-panel { padding: 18px 22px 14px; border-radius: 18px; background: #fffdf8; border: 1px solid #e8ddca; box-shadow: 0 6px 24px #785b2410; position: relative; }
.app-flow .countdown-panel::before { content: ''; position: absolute; width: 26px; height: 2px; background: #b29460; top: 0; left: calc(50% - 13px); }
.app-flow .countdown-panel .panel-label { font: italic .9rem Georgia,serif; margin: 0 0 7px; }
.app-flow .countdown-grid strong { font-size: 2rem; }
.app-flow .countdown-grid div { padding-block: 5px; }
.app-flow .next-event { margin-top: 10px; font-size: .67rem; }
.app-flow .guest-home-panel { margin-top: 0; gap: 14px; }
.widget-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-flow .widget-section-title h2 { font-size: 1.16rem; margin: 0; letter-spacing: -.025em; }
.widget-section-title a { font-size: .62rem; color: #6f6b50; white-space: nowrap; padding-block: 10px; }
[data-art='garden'] { --ceremony-art: url('assets/invitation-garden.jpg'); }
[data-art='day'] { --ceremony-art: url('assets/ceremony-day.jpg'); }
[data-art='night'] { --ceremony-art: url('assets/ceremony-night.jpg'); }
[data-art='mehendi'] { --ceremony-art: url('assets/event-mehendi-home.jpg'); --ceremony-accent: #466846; --ceremony-tint: #edf1e4; }
[data-art='mayra'] { --ceremony-art: url('assets/event-mayra-living-room.jpg'); --ceremony-accent: #99683c; --ceremony-tint: #f7edde; }
[data-art='sangeet'] { --ceremony-art: url('assets/event-sangeet-lights.jpg'); --ceremony-accent: #655070; --ceremony-tint: #f0eaf3; }
[data-art='haldi'] { --ceremony-art: url('assets/event-haldi-pool.jpg'); --ceremony-accent: #927018; --ceremony-tint: #faf1d6; }
[data-art='shaadi'] { --ceremony-art: url('assets/event-shaadi-mandap.jpg'); --ceremony-accent: #97474e; --ceremony-tint: #f7e9e6; }
[data-art='reception'] { --ceremony-art: url('assets/event-reception-banquet.jpg'); --ceremony-accent: #435a70; --ceremony-tint: #e9eef2; }
.app-flow .event-card[data-art] .event-date, .app-flow .event-card[data-art] .event-detail-button { color: var(--ceremony-accent, #79643e); }
.app-flow .event-card[data-art] .event-meta span { background: var(--ceremony-tint, #f4efe5); color: var(--ceremony-accent, #655b47); }
.next-celebration-widget { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr) 16px; gap: 16px; padding: 10px; background: #fffdf8; color: #3c392b; border: 1px solid #e4dac8; border-radius: 20px; box-shadow: 0 5px 18px #76532608; text-align: left; cursor: pointer; min-height: 134px; }
.next-widget-art { position: relative; min-height: 112px; border-radius: 12px; background: var(--ceremony-art) center / cover; }
.next-widget-art > span { position: absolute; top: 7px; left: 7px; width: 35px; padding: 6px 2px; background: #fffaf0ef; border-radius: 8px; text-align: center; font: 1.15rem/1 Georgia,serif; color: #785e32; }
.next-widget-art small { display: block; font: .48rem/1.6 'Plus Jakarta Sans',sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.next-widget-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 7px; min-width: 0; }
.next-widget-copy > small { font-size: .52rem; letter-spacing: .12em; color: #9b7a47; }
.next-widget-copy > strong { font: 1.5rem/1.15 'Playfair Display',Georgia,serif; }
.next-widget-copy > span { color: #7c7262; font-size: .65rem; line-height: 1.5; }
.next-widget-copy > b { background: #e9eddf; color: #4a624c; font-size: .54rem; padding: 4px 8px; border-radius: 5px; font-weight: 600; }
.widget-arrow { align-self: center; color: #8d794e; }
.delight-widget-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.delight-widget { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid #e2decd; border-radius: 18px; background: #eff0e6; color: #3f4736; text-align: left; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; }
.widget-kicker { display: flex; justify-content: space-between; gap: 8px; font-size: .57rem; letter-spacing: .035em; font-weight: 600; line-height: 1.5; }
.widget-kicker > span { font-size: .8rem; }
.delight-widget > strong { font: 1.06rem/1.2 'Playfair Display',Georgia,serif; margin-top: 2px; }
.delight-widget > small { font-size: .68rem; color: #69725e; margin-top: 5px; line-height: 1.5; }
.outfit-swatches { display: flex; align-items: center; height: 63px; padding-left: 5px; }
.outfit-swatches i { width: 35px; height: 35px; border-radius: 50%; border: 3px solid #eff0e6; margin-left: -5px; box-shadow: 0 2px 5px #494b3220; }
.album-widget { background: #f8eae1; border-color: #ecdcd0; color: #775545; }
.album-widget > small { color: #8b6d5a; }
.album-illustration { position: relative; display: block; height: 63px; width: 100%; }
.album-illustration i { position: absolute; top: 7px; left: 20px; width: 44px; height: 45px; border: 4px solid #fffdf8; border-bottom-width: 10px; box-shadow: 0 3px 8px #805b3820; background: url('assets/ceremony-night.jpg') center / cover; transform: rotate(-13deg); }
.album-illustration i + i { left: 48px; top: 10px; background-image: url('assets/ceremony-day.jpg'); transform: rotate(12deg); }
.little-note-widget { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; border: 1px solid #e5d7bf; background: #f4ebda; }
.little-note-widget > span:first-child { font-size: 1.5rem; color: #96713a; }
.little-note-widget > span:nth-child(2) { min-width: 0; flex: 1; }
.little-note-widget small { display: block; color: #957447; font-size: .5rem; letter-spacing: .09em; margin-bottom: 5px; }
.little-note-widget strong { display: block; font-size: .75rem; line-height: 1.5; }
.app-flow .event-visual { background: var(--ceremony-art, var(--event-bg)) center / cover; border-radius: 14px; min-height: 190px; }
.app-flow .event-visual::before, .app-flow .event-visual::after { display: none; }
.app-flow .event-detail-visual { background: var(--ceremony-art, var(--event-bg)) center / cover; min-height: 180px; border-radius: 16px; }
.app-flow .event-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.app-flow .event-detail-grid article { background: #fffdf8; border: 1px solid #e8dfcf; border-radius: 12px; padding: 12px; }
.app-flow .event-detail-grid article strong { font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.app-flow .event-detail-grid article span { font-size: .58rem; }
.app-flow .event-dress-guide { background: #edf0e5; border: 0; border-radius: 14px; box-shadow: none; }
.app-flow .section-heading { position: relative; padding: 24px; min-height: 120px; display: flex; align-items: end; border: 1px solid #e9deca; border-radius: 18px; overflow: hidden; background: linear-gradient(90deg,#fcf8f0 15%,#fcf8f0eb 55%,#fcf8f050), url('assets/invitation-garden.jpg') right 35% / cover; }
.app-flow .section-heading h2 { position: relative; font-size: 2.2rem; max-width: 95%; }
.app-flow .access-pass-card { padding-top: 46px; background: linear-gradient(120deg,#344e40f7 30%,#344e40a8), url('assets/invitation-garden.jpg') center / cover; }
.app-flow .portal-event-pass { background: #fffdf8; border-radius: 14px; border-color: #e6ddcc; }
.app-flow .pass-banner { background: linear-gradient(110deg,#344e40 12%,#344e40d9 60%,#344e4050), url('assets/invitation-garden.jpg') right center / cover; }
.app-flow .pass-banner > span { display: none; }
.app-flow .pass-banner strong { font-size: 1.6rem; }
.app-flow .pass-banner small { font-size: .7rem; }
.app-flow .empty-memory-card { padding: 100px 22px 28px; background: linear-gradient(to bottom,#fffaf000,#fffaf0 78%), url('assets/invitation-garden.jpg') center top / 100% auto no-repeat; text-align: center; min-height: 230px; }
@media (hover:hover) { .delight-widget:hover, .next-celebration-widget:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #76532612; } }
@media (min-width:981px) { .app-flow .hero-cover { min-height: 350px; } .app-flow .hero-copy { align-self: start; } .app-flow .guest-home-panel { margin-top: 28px; } }
@media (max-width:680px) {
  .app-flow .hero { padding-top: 0; gap: 20px; }
  .app-flow .hero-cover { width: calc(100% + 40px); margin-inline: -20px; min-height: 230px; border-radius: 0 0 45% 45% / 0 0 22px 22px; background-position: center top; }
  .app-flow .hero-cover::after { display: none; }
  .app-flow .hero-cover .hero-emblem { width: 132px; }
  .app-flow .hero-copy > .eyebrow { font-size: .55rem; }
  .app-flow .hero-copy > h1 { font-size: clamp(2.1rem,10vw,2.7rem); margin-top: -10px; }
  .app-flow .hero-copy > .hero-line { margin-top: -9px; font-size: .72rem; }
  .app-flow .hero-emblem-panel { margin-top: 2px; }
  .app-flow .countdown-panel .panel-label { font-size: .8rem; }
  .app-flow .countdown-grid strong { font-size: 1.9rem; }
  .app-flow .countdown-grid span { margin-top: 5px; font-size: .49rem; }
  .app-flow .guest-home-panel { gap: 12px; }
  .app-flow .section-heading { min-height: 106px; padding: 22px 18px; }
  .app-flow .section-heading h2 { font-size: 1.9rem; }
  .app-flow .event-card { padding: 12px; gap: 12px; }
  .app-flow .event-card-top { padding-inline: 3px; }
  .app-flow .event-card h3, .app-flow .event-card > p, .app-flow .event-meta, .app-flow .event-detail-button { margin-inline: 6px; }
  .app-flow .event-card h3 { font-size: 1.7rem; }
  .app-flow .event-visual { min-height: 185px; }
  .app-flow .home-dashboard { margin-top: 0; }
  .app-flow .pass-banner { padding: 23px; }
}
@media (max-width:360px) {
  .next-celebration-widget { grid-template-columns: 78px minmax(0,1fr) 10px; gap: 10px; }
  .next-widget-copy > strong { font-size: 1.3rem; }
  .delight-widget { padding: 12px; }
  .widget-kicker { font-size: .55rem; }
  .widget-section-title h2 { font-size: 1.05rem; }
}
.app-flow .event-card { background-color: #fffdf8f5; }
.app-flow .topbar { display: contents; }
.app-flow .event-card { position: relative; }
.event-card-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; margin: 0; min-height: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none; cursor: pointer; }
.event-card-hit:hover { background: transparent; transform: none; }
.event-card-hit:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.event-card-actions { display: flex; gap: 10px; position: relative; z-index: 2; margin-top: 8px; }
.event-card-actions .button { flex: 1; padding: 10px 12px; font-size: .75rem; }
.event-venue-detail { grid-column: 1 / -1; }
.event-create-panel { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf8; }
.event-create-panel > summary { display: flex; justify-content: space-between; align-items: center; color: #3e5547; font-size: 1rem; list-style: none; }
.event-create-panel > summary::-webkit-details-marker { display: none; }
.event-create-form, .event-edit-form, .announcement-composer { display: grid; gap: 16px; }
.event-create-form { margin-top: 20px; }
.event-create-form h3 { display: none; }
.event-guest-options { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0; }
.event-guest-options label, #newEventGuests label { display: flex; gap: 10px; align-items: center; padding-block: 8px; }
.event-guest-options input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: #3e5547; }
.announcement-composer { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf8; }
.announcement-feed { margin-top: 22px; }
body.pass-open { overflow: hidden; }
.pass-drawer { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: end; }
.pass-backdrop { position: absolute; inset: 0; border: 0; border-radius: 0; background: #211b1666; }
.pass-drawer-card { position: relative; z-index: 1; width: min(460px, 100%); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: #fbf7ef; box-shadow: -16px 0 60px #38291c26; animation: invitation-drawer 260ms ease both; }
.pass-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pass-drawer-heading h2 { font-size: 1.5rem; margin: 0; }
.pass-drawer .portal-card { padding: 0; border: 0; background: transparent; }
.pass-drawer .portal-events { margin-top: 18px; }
@keyframes invitation-drawer { from { transform: translateX(100%); } to { transform: translateX(0); } }
nav a[href="#announcements"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); font-size: clamp(.48rem, 2.1vw, .64rem); }
.invitation-restore { display: grid; gap: 12px; margin-block: 18px; padding: 20px; background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; }
.invitation-restore label { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; }
.invitation-restore input { width: 100%; min-width: 0; font-size: 16px; }
.invitation-restore p { margin: 0; color: #8b3f38; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) {
  .app-flow *, .app-flow *::before, .app-flow *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-on-scroll { opacity: 1; translate: none; }
  .invitation-curtains { display: none; }
}

/* Local preview: one album picker, with a shared personal notification inbox. */
.notification-bell { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); z-index: 45; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid #d9cdb9; border-radius: 50%; background: #fffdf8f5; color: #3e5547; box-shadow: 0 4px 18px #38291c12; }
.notification-bell svg { width: 22px; height: 22px; }
#notificationCount { position: absolute; top: -3px; right: -3px; min-width: 18px; padding: 2px 4px; border-radius: 10px; background: #97474e; color: white; font-size: 10px; }
.notifications-open { overflow: hidden; }
.notification-item p { white-space: pre-line; line-height: 1.6; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #97474e; flex-shrink: 0; }
.upload-album-choices { display: grid; gap: 10px; margin-top: 20px; }
.app-flow .memory-layout { display: flex; flex-direction: column; gap: 18px; }
.app-flow .memory-panel { display: contents; }
.app-flow #albumToolbar { order: -1; display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 2px 0 10px; scrollbar-width: thin; }
.app-flow #albumToolbar > * { flex-shrink: 0; }
.app-flow #uploadForm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.app-flow #uploadForm .file-drop { flex: 1 1 200px; min-height: 104px; }
.app-flow .section-heading { padding-right: 48px; }
.app-flow #memories, .app-flow .memory-layout, .app-flow #memories .section-heading { min-width: 0; width: 100%; max-width: 100%; }
.app-flow #albumToolbar { min-width: 0; width: 100%; }
.app-flow #uploadForm { min-width: 0; width: 100%; }
.app-flow #uploadForm .file-drop { min-width: 0; max-width: 100%; }
.app-flow #uploadForm input[type='file'] { min-width: 0; width: 100%; max-width: 100%; font-size: .75rem; }
.app-flow #mediaGrid { min-width: 0; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.app-flow .empty-memory-card { min-width: 0; width: 100%; }

/* A light notification popover and an event-wise outfit lookbook. */
.notification-bell, .notification-bell:hover { background: transparent; border-color: transparent; box-shadow: none; }
#notificationDrawer { align-items: start; padding: max(68px, calc(env(safe-area-inset-top) + 58px)) 12px 16px; }
#notificationDrawer .pass-backdrop { background: transparent; backdrop-filter: none; }
#notificationDrawer .pass-drawer-card { width: min(350px, 100%); height: auto; max-height: min(560px, calc(100dvh - 100px)); padding: 18px; border: 1px solid #fffaf0b3; border-radius: 22px; background: #fffaf0c9; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 12px 44px #3e34251c; animation: notification-arrive 160ms ease both; }
#notificationDrawer .pass-drawer-heading { margin-bottom: 12px; }
#notificationDrawer .pass-drawer-heading h2 { font-size: 1.25rem; }
#notificationDrawer .chip { min-height: 34px; padding: 6px 10px; }
#notificationDrawer .notification-item { padding: 14px 0; background: transparent; border: 0; border-top: 1px solid #bba47b40; border-radius: 0; box-shadow: none; }
#notificationDrawer #notificationFeed { margin-top: 14px; }
#notificationDrawer #guestAnnouncementPush { font-size: .7rem; min-height: 36px; }
.dress-guide-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 10px; }
.dress-guide-tabs .chip { flex-shrink: 0; }
.outfit-guide-content { padding: 20px 4px 8px; }
.outfit-guide-content h4 { font: 500 1.65rem 'Playfair Display', Georgia, serif; margin: 8px 0 14px; }
.outfit-guide-content > p:last-child { color: var(--muted); line-height: 1.8; }
@keyframes notification-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #notificationDrawer .pass-drawer-card { animation: none; } }
.app-flow .events-pass-shortcut { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; margin-top: 14px; padding: 6px 12px; font-size: .72rem; background: #fffdf966; }
.app-flow .event-card .event-visual { min-height: 210px; }
.app-flow .event-card-actions { align-items: center; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); pointer-events: none; }
.event-card-hint { flex: 1; color: var(--ceremony-accent, #3e5547); font-size: .72rem; line-height: 1.5; }
.event-card-hint > span { margin-left: 7px; }
.app-flow .event-card-actions .button { flex: 0 0 auto; min-height: 34px; padding: 6px 14px; font-size: .68rem; pointer-events: auto; }
.app-flow .event-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-inline: 6px; }
.app-flow .event-title-row h3 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.app-flow .event-title-row .event-meta { flex: 0 1 44%; justify-content: flex-end; margin: 0; min-width: 0; text-align: right; }
.app-flow .event-title-row .event-meta span { max-width: 100%; line-height: 1.4; text-align: center; }

/* Guest directory: compact people cards and a focused form popup. */
.app-flow #guests { display: none; }
.app-flow #guests.active-screen { display: block; }
.app-flow #guests .guest-console { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 22px; background: transparent; border: 0; border-radius: 0; }
.app-flow #guests .section-heading { flex: 1; margin: 0; padding-bottom: 0; border: 0; }
.app-flow #addGuestButton { flex-shrink: 0; min-height: 40px; padding: 10px 16px; }
.app-flow .guest-list-wrap { padding: 0; border: 0; background: transparent; }
.app-flow .guest-list-wrap .toolbar { margin-bottom: 18px; }
.app-flow .guest-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(310px,100%),1fr)); gap: 14px; }
.app-flow .guest-person-card { display: block; padding: 18px; min-width: 0; border-radius: 22px; background: linear-gradient(135deg,#fffdf9,#f9f3e8); }
.guest-person-heading { display: flex; align-items: center; gap: 12px; }
.guest-avatar { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #e6eadf; color: #3e5547; font: 500 1rem Georgia,serif; }
.guest-person-heading > div { flex: 1; min-width: 0; }
.app-flow .guest-person-heading strong { display: block; font-size: 1rem; color: #3c392b; overflow-wrap: anywhere; }
.app-flow .guest-person-heading div > span { display: block; font-size: .72rem; color: #81745f; margin-top: 4px; }
.guest-edit-button { flex-shrink: 0; border: 0; background: transparent; color: #3e5547; padding: 8px 0 8px 8px; font-size: .72rem; }
.guest-person-summary { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; color: #81745f; font-size: .72rem; }
.app-flow .guest-person-card .guest-details { border-top: 1px solid #bba47b30; margin-top: 14px; padding-top: 10px; }
.app-flow .guest-person-card .guest-details > summary { padding: 4px 0; background: transparent; color: #706044; font-size: .72rem; border-radius: 0; }
.app-flow .guest-person-card .guest-details > summary::before { content: ''; }
.guest-phone { font-size: .8rem; color: var(--muted); }
.guest-person-card .invite-row { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-person-card .invite-row input { min-width: 0; flex: 1 1 160px; }
.guest-person-card .danger { margin-top: 12px; }
.guest-editor-open { overflow: hidden; }
#guestDialog { place-items: center; padding: 20px; }
#guestDialog .pass-drawer-card { width: min(550px,100%); height: auto; max-height: calc(100dvh - 40px); border-radius: 24px; }
#guestDialog .guest-form { display: grid; gap: 16px; }
.guest-undo { position: fixed; z-index: 110; left: 50%; transform: translateX(-50%); bottom: 100px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 16px; background: #3e5547; color: #fffaf0; box-shadow: 0 6px 24px #38291c22; }
.guest-undo .chip { color: #fffaf0; border-color: #fffaf080; }
@media(max-width:600px) { #guestDialog { place-items: end center; padding: 12px; } #guestDialog .pass-drawer-card { max-height: calc(100dvh - 32px); padding: 20px; } .app-flow #guests .section-heading { padding-right: 0; } .app-flow #guests .guest-console { padding-top: 32px; } }
.announcement-editor-open { overflow: hidden; }
#announcementDialog { place-items: center; padding: 20px; }
#announcementDialog .pass-drawer-card { width: min(550px,100%); height: auto; max-height: calc(100dvh - 40px); border-radius: 24px; }
#announcementDialog .announcement-composer { padding: 0; margin: 0; background: transparent; border: 0; }
#announcementDialog .export-actions { flex-wrap: wrap; }
#addAnnouncementButton { margin-top: 18px; }
.app-flow .announcement-card { padding: 20px; border-radius: 22px; background: linear-gradient(135deg,#fffdf9,#f9f3e8); border: 1px solid #e4dac8; }
.announcement-card-actions { gap: 8px; flex-wrap: wrap; }
.announcement-card-actions .chip { min-height: 34px; padding: 7px 11px; font-size: .7rem; }
@media(max-width:600px) { #announcementDialog { place-items: end center; padding: 12px; } #announcementDialog .pass-drawer-card { max-height: calc(100dvh - 32px); padding: 20px; } }
/* Compact header actions, swipeable tabs and one upload action. */
.app-flow #guests .guest-console { display: block; }
.app-flow #guests .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 24px 20px; }
.app-flow #guests .section-heading h2 { font-size: clamp(1.6rem, 5vw, 2.6rem); min-width: 0; }
.app-flow #addGuestButton { margin: 0; min-height: 38px; padding: 9px 12px; font-size: .75rem; }
.swipe-controls { display: grid; grid-template-columns: 26px minmax(0,1fr) 26px; align-items: center; gap: 5px; min-width: 0; width: 100%; }
.app-flow .memory-layout > .swipe-controls { order: -1; }
.swipe-arrow { width: 26px; height: 36px; border: 0; border-radius: 12px; padding: 0; background: transparent; color: #665b48; font-size: 26px; line-height: 1; box-shadow: none; }
.swipe-arrow:disabled { opacity: .2; cursor: default; }
.app-flow #albumToolbar, .dress-guide-tabs { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.app-flow #albumToolbar::-webkit-scrollbar, .dress-guide-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.app-flow #albumToolbar { padding: 4px 0; margin: 0; }
.dress-guide-tabs { padding: 14px 0; }
.app-flow #uploadForm { display: block; padding: 0; border: 0; background: transparent; }
.app-flow #uploadForm > .button { width: 100%; min-height: 48px; margin: 0; }
@media(prefers-reduced-motion:reduce) { .app-flow #albumToolbar, .dress-guide-tabs { scroll-behavior: auto; } }
.app-flow .memory-panel > .swipe-controls { order: -1; }
.app-flow .swipe-controls #albumToolbar { order: 0; }
/* Swipe the content; navigation lives underneath, aligned to the right. */
.app-flow #albumToolbar.album-footer { display: flex; align-items: center; justify-content: space-between; order: 0; overflow: visible; padding: 12px 0; gap: 16px; }
.album-position { display: flex; align-items: center; gap: 10px; min-width: 0; }
.album-position strong { font: 500 1rem 'Playfair Display',Georgia,serif; }
.album-position small, .guide-footer > small { font-size: .68rem; color: var(--muted); }
.album-download { background: transparent; border: 0; color: var(--muted); padding: 8px; }
.below-swipe-arrows { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.below-swipe-arrows .swipe-arrow { width: 38px; height: 38px; font-size: 20px; border: 1px solid var(--line); background: #fffdf866; }
.guide-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--line); }
#mediaGrid, .outfit-guide-content { touch-action: pan-y; }
/* Invitation details, with less chrome and one clear sharing action. */
.app-flow .guest-person-card { background: #fffdf9; border-color: #ded5c44d; padding: 20px; box-shadow: 0 5px 20px #60482005; }
.guest-avatar { width: 44px; height: 44px; background: #e8ebdf; border: 1px solid #d8dfca; }
.app-flow .guest-person-heading strong { font-size: 1.05rem; }
.app-flow .guest-person-card .guest-details { margin-top: 18px; padding-top: 14px; }
.app-flow .guest-person-card .guest-details > summary { display: flex; align-items: center; justify-content: space-between; color: #7d715c; font-weight: 500; }
.app-flow .guest-person-card .guest-details > summary::after { content: '+'; font-size: 18px; font-weight: 400; }
.app-flow .guest-person-card .guest-details[open] > summary::after { content: '−'; }
.app-flow .guest-person-card .guest-tags { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.app-flow .guest-person-card .guest-tag { display: block; background: #eff1e8; color: #526249; border: 0; border-radius: 8px; padding: 8px 10px; font-size: .68rem; font-weight: 500; }
.guest-invite-actions { display: grid; gap: 14px; margin-top: 18px; }
.app-flow .guest-invite-actions > .button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; color: #3e5547; border-color: #cdd5c2; background: #f8f9f3; font-size: .74rem; }
.guest-secondary-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.guest-secondary-actions a { color: #7d715c; font-size: .68rem; text-decoration: none; }
.guest-remove-button { background: transparent; border: 0; padding: 8px 0; color: #9b6259; font-size: .68rem; }

.event-attendance-row { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.event-attendance-row:empty { display: none; }
.attendance-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; min-height: 38px; border: 1px solid #d9cdb9; background: transparent; border-radius: 24px; font-size: .72rem; color: #81745f; }
.attendance-toggle.joining { background: #edf1e6; border-color: #d2ddc6; color: #3e5547; }
.attendance-toggle:focus-visible { outline: 2px solid #96713a; outline-offset: 3px; }
.app-flow .guest-person-card .guest-tag.not-joining { color: #976b62; background: #f4eae5; }
.app-flow .event-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-flow .event-card-top .attendance-toggle { position: relative; z-index: 2; flex-shrink: 0; min-height: 32px; padding: 6px 10px; font-size: .65rem; }
.app-flow #announcementList { display: grid; gap: 12px; max-height: none; height: auto; overflow: visible; padding: 0; }
.app-flow .announcement-card.announcement-preview { padding: 0; border-radius: 20px; overflow: hidden; }
.announcement-preview-button { display: grid; gap: 10px; width: 100%; padding: 20px; border: 0; background: transparent; text-align: left; color: var(--ink); }
.announcement-preview-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.announcement-preview-top strong { font-size: .95rem; line-height: 1.5; }
.announcement-preview-copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; color: var(--muted); font-size: .8rem; }
.announcement-preview-meta { font-size: .66rem; color: #958571; }
.announcement-full-message { white-space: pre-wrap; line-height: 1.8; margin: 22px 0; }
.announcement-delivery { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
#notificationDrawer .notification-item { position: relative; display: flex; gap: 10px; align-items: start; }
.notification-open { flex: 1; display: grid; gap: 8px; min-width: 0; padding: 0; background: transparent; border: 0; text-align: left; color: var(--ink); }
.notification-open strong { font-size: .85rem; line-height: 1.5; }
.notification-open > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; line-height: 1.6; color: var(--muted); }
.notification-open small { font-size: .65rem; color: #958571; }
.notification-dismiss, .inbox-clear { border: 0; background: transparent; color: #958571; padding: 4px; }
.notification-dismiss { flex-shrink: 0; font-size: 22px; line-height: 1; min-width: 28px; min-height: 32px; }
.inbox-actions { display: flex; justify-content: flex-end; }
.inbox-clear { font-size: .7rem; }
#notificationDrawer .inbox-close { border: 0; font-size: 22px; background: transparent; }
#notificationDrawer .pass-drawer-heading { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; }
#notificationDrawer .pass-drawer-heading h2 { font-size: 1.08rem; }
#notificationDrawer #guestAnnouncementPush { min-height: 32px; max-width: 124px; padding: 6px 8px; font-size: .6rem; line-height: 1.3; }
#notificationDrawer .inbox-close { padding: 4px; min-width: 24px; }
#notificationDrawer .inbox-actions { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
#pushFeedback { font-size: .74rem; line-height: 1.6; color: var(--muted); background: #edf1e6b3; padding: 10px; border-radius: 10px; }
/* Decorative welcome elephants and a glass-clear bottom navigation. */
.welcome-elephant { position: absolute; width: min(250px, 91%); height: auto; bottom: 22%; pointer-events: none; opacity: .95; }
.elephant-left { right: 4%; }
.elephant-right { left: 4%; transform: scaleX(-1); }
.app-flow .topbar nav { background: #fbf7ef40; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: #bba47b30; box-shadow: 0 -3px 22px #60482004; }
.app-flow .topbar nav a.active { background: #dce4d380; color: #294a38; }
@media(max-height:600px) { .welcome-elephant { bottom: 12%; width: min(170px,75%); } }
@media(prefers-reduced-motion:reduce) { .welcome-elephant { animation: none; } }

.countdown-clock { display: grid; grid-template-columns: clamp(28px, 8vw, 46px) minmax(0,1fr) clamp(28px, 8vw, 46px); align-items: center; gap: 4px; min-width: 0; }
.clock-elephant { display: block; width: 100%; height: auto; }
.clock-elephant-right { transform: scaleX(-1); }
.app-flow .countdown-clock .countdown-grid { min-width: 0; }
.app-flow .countdown-clock .countdown-grid strong { font-size: clamp(1.45rem, 6vw, 1.9rem); }
/* Larger elephants sit across the card edges, with the timer clear in the middle. */
.countdown-clock { position: relative; display: block; }
.countdown-clock .clock-elephant { position: absolute; z-index: 1; top: 50%; width: clamp(88px, 20vw, 112px); height: auto; transform: translateY(-50%); pointer-events: none; }
.countdown-clock .clock-elephant:first-child { left: -68px; }
.countdown-clock .clock-elephant-right { right: -68px; transform: translateY(-50%) scaleX(-1); }
.app-flow .hero-emblem-panel .countdown-panel { width: calc(100% - 64px); margin-inline: auto; padding-inline: 22px; overflow: visible; }
.app-flow .countdown-clock .countdown-grid { position: relative; z-index: 2; margin-inline: 12px; }
@media(max-width:360px) { .app-flow .hero-emblem-panel .countdown-panel { width: calc(100% - 50px); padding-inline: 12px; } .countdown-clock .clock-elephant { width: 72px; } .countdown-clock .clock-elephant:first-child { left: -50px; } .countdown-clock .clock-elephant-right { right: -50px; } .app-flow .countdown-clock .countdown-grid { margin-inline: 14px; } }
/* Give the side elephants a taller presence without changing the countdown card. */
.countdown-clock .clock-elephant { transform: translateY(-50%) scaleY(1.3); }
.countdown-clock .clock-elephant-right { transform: translateY(-50%) scale(-1,1.3); }

/* Temporary event layout comparison. */
/* These are local comparison pages only. */
.preview-layout-label { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 22px;font-size:.68rem;color:#8b785b; }
.preview-layout-label a { color:#3e5547;text-decoration:none;white-space:nowrap; }
.preview-layout-label > span { text-align:right; }
#eventLayoutPager { display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px 0 6px; }
.preview-page-count { font-size:.68rem;color:#8b785b;font-variant-numeric:tabular-nums;margin-left:auto; }
.preview-page-arrow { width:38px;height:38px;border:1px solid #bba47b50;border-radius:50%;background:#fffdf8;color:#3e5547;font-size:18px; }
.preview-page-arrow:disabled { opacity:.3; }
.preview-dots { display:flex;gap:6px;align-items:center; }
.preview-dots button { width:6px;height:6px;border:0;border-radius:50%;padding:0;background:#d7cdbb;transition:width 220ms ease,background 220ms ease; }
.preview-dots button.selected { width:21px;border-radius:5px;background:#3e5547; }
.app-flow.layout-carousel #eventRail, .app-flow:is(.layout-stories,.layout-daystories) #eventRail { display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:100%;padding:4px 3px 14px;position:relative; }
.layout-carousel #eventRail::-webkit-scrollbar,:is(.layout-stories,.layout-daystories) #eventRail::-webkit-scrollbar { display:none; }
.app-flow.layout-carousel .event-card { flex:0 0 87%; min-width:0;scroll-snap-align:start;align-self:stretch; }
.app-flow.layout-carousel .event-card .event-visual { min-height:260px; }
.app-flow.layout-carousel .event-card h3 { font-size:1.9rem; }
.app-flow.layout-carousel .event-title-row { align-items:start;gap:8px; }
.app-flow.layout-carousel .event-title-row .event-meta { flex-basis:40%; }
.app-flow.layout-timeline #eventRail { display:block;overflow:visible;padding:0 0 0 20px;border-left:1px solid #cab993; }
.timeline-stop { position:relative;margin-bottom:26px; }
.timeline-stop::before { content:'';position:absolute;width:9px;height:9px;left:-25px;top:8px;border-radius:50%;background:#96713a;box-shadow:0 0 0 5px #fbf7ef; }
.timeline-date { color:#8c693a;font-size:.74rem;letter-spacing:.08em;min-height:12px;margin-bottom:12px; }
.app-flow.layout-timeline .event-card { padding:12px;gap:12px; }
.app-flow.layout-timeline .event-visual { min-height:175px; }
.app-flow.layout-timeline .event-card h3 { font-size:1.6rem; }
.app-flow.layout-gallery #eventRail { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;padding:0; }
.app-flow.layout-gallery .event-card { min-width:0;padding:9px;gap:10px;border-radius:17px; }
.app-flow.layout-gallery .event-visual { min-height:130px;border-radius:11px; }
.app-flow.layout-gallery .event-card h3 { font-size:1.2rem;line-height:1.25; }
.app-flow.layout-gallery .event-title-row { flex-direction:column;align-items:start;gap:8px;margin:0 2px; }
.app-flow.layout-gallery .event-title-row .event-meta { flex-basis:auto; }
.app-flow.layout-gallery .event-meta span { padding:4px 6px;font-size:.52rem; }
.app-flow.layout-gallery .event-card-top { gap:4px;padding:0; }
.app-flow.layout-gallery .event-date { font-size:.49rem; }
.app-flow.layout-gallery .attendance-toggle { font-size:0!important;min-height:26px!important;padding:4px 7px!important; }
.app-flow.layout-gallery .attendance-toggle > span { font-size:.65rem; }
.app-flow.layout-gallery .event-card-hint { font-size:.56rem; }
.app-flow.layout-gallery .event-card-actions .button { font-size:.56rem;padding:4px 7px;min-height:28px; }
.preview-day-tabs { display:flex;gap:10px;margin-bottom:22px; }
.preview-day { flex:1;display:grid;gap:4px;place-items:center;min-width:0;border:1px solid #dfd3bd;border-radius:18px;background:#fffdf8;padding:13px 4px;color:#8a7350;transition:background 200ms ease,transform 200ms ease,color 200ms ease; }
.preview-day strong { font:500 1.5rem Georgia,serif; }
.preview-day span { font-size:.55rem;letter-spacing:.12em; }
.preview-day.selected { color:#fffaf0;background:#3e5547;border-color:#3e5547;transform:translateY(-3px);box-shadow:0 6px 16px #3e55471a; }
.app-flow.layout-days #eventRail { display:grid;grid-template-columns:1fr;gap:18px;overflow:visible;padding:0; }
.day-event-enter { animation:day-event-enter 320ms ease both; }
@keyframes day-event-enter { from {opacity:0;transform:translateY(10px);}to {opacity:1;transform:none;} }
.app-flow:is(.layout-stories,.layout-daystories) .event-card { position:relative;flex:0 0 100%;min-width:0;height:clamp(440px,67svh,720px);min-height:440px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border:0;border-radius:26px;overflow:hidden;color:white; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card .event-visual { position:absolute;inset:0;min-height:0;border-radius:0;margin:0;background-position:center; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card::before { display:block;content:'';position:absolute;inset:0;z-index:1;border:0;border-radius:0;background:linear-gradient(180deg,#211b1645,transparent 35%,#1a2314d9);pointer-events:none; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card-top { position:absolute;z-index:2;left:18px;right:18px;top:18px;pointer-events:none; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card .event-date { color:white;background:#1b261b6b;padding:7px 10px;border-radius:18px;backdrop-filter:blur(8px);font-size:.63rem; }
.app-flow:is(.layout-stories,.layout-daystories) .attendance-toggle { pointer-events:auto;background:#fffdf8e6;color:#3e5547; }
.app-flow:is(.layout-stories,.layout-daystories) .event-title-row { position:relative;z-index:2;align-items:start;flex-direction:column;gap:12px;margin:0 0 20px;pointer-events:none; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card h3 { color:#fffdf8;font-size:2.5rem;line-height:1.1;max-width:90%;text-shadow:0 2px 16px #0003; }
.app-flow:is(.layout-stories,.layout-daystories) .event-meta span { background:#fffaf02b!important;color:#fffaf0!important;border:1px solid #fffaf050;backdrop-filter:blur(6px); }
.app-flow:is(.layout-stories,.layout-daystories) .event-card-actions { border-color:#fffaf050;position:relative;z-index:2;margin:0; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card-hint { color:#fffaf0; }
.app-flow:is(.layout-stories,.layout-daystories) .event-card-actions .button { background:#fffaf01a;border-color:#fffaf060;color:white; }
.preview-chooser { padding:36px 20px; }
.preview-chooser main { max-width:700px!important; }
.chooser-emblem { width:68px;height:68px;border-radius:50%;margin-bottom:22px;box-shadow:0 0 0 4px #eee1cb; }
.preview-chooser h1 { font-size:clamp(2.6rem,8vw,4rem);margin:12px 0; }
.chooser-intro { color:#81745f;line-height:1.8;max-width:470px; }
.chooser-options { display:grid;gap:12px;margin:28px 0; }
.chooser-option { display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #e4dac8;border-radius:20px;background:#fffdf8;color:#3c392b;text-decoration:none;transition:transform 180ms ease,box-shadow 180ms ease; }
.chooser-number { display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e9eddf;color:#3e5547;font:1.2rem Georgia,serif;flex-shrink:0; }
.chooser-option > span:nth-child(2) { flex:1; }
.chooser-option strong { display:block;font:1.15rem Georgia,serif; }
.chooser-option small { display:block;color:#81745f;line-height:1.6;margin-top:7px; }
.chooser-option:hover { transform:translateY(-3px);box-shadow:0 8px 22px #6048200a; }
.chooser-note { color:#9c8c73;font-size:.75rem;margin-top:22px; }
@media(min-width:800px) { .app-flow.layout-carousel .event-card { flex-basis:400px; } .app-flow:is(.layout-stories,.layout-daystories) #eventRail { max-width:660px;margin-inline:auto; } .app-flow:is(.layout-stories,.layout-daystories) #eventLayoutPager { max-width:660px;margin-inline:auto; } .app-flow.layout-gallery #eventRail { grid-template-columns:repeat(3,minmax(0,1fr)); } .app-flow.layout-timeline #eventRail { max-width:800px;margin-inline:auto; } .app-flow.layout-days #eventRail { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

.event-layout-chooser { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 20px;min-width:0; }
.event-layout-chooser > label { font-size:.75rem;color:#81745f;white-space:nowrap; }
.app-flow .event-layout-chooser select { min-width:0;max-width:230px;flex:1;font-size:.75rem;min-height:40px;background:#fffdf8; }

/* Day chapters with immersive event cards stacked vertically. */
#eventLayoutPager:empty { display:none; }
.app-flow.layout-daystories #eventRail { display:flex;flex-direction:column;gap:20px;overflow:visible;scroll-snap-type:none;margin-top:0;padding:0; }
.app-flow.layout-daystories .event-card { flex:0 0 auto;width:100%;scroll-snap-align:none; }
.layout-daystories .event-card[hidden] { display:none!important; }
.layout-daystories #eventLayoutTools { max-width:660px;margin-inline:auto; }
.layout-daystories .preview-day-tabs { margin:4px 0 18px;gap:10px; }
.layout-daystories .preview-day { border-radius:20px;padding:12px 4px; }
.layout-daystories .event-card { animation:day-event-enter 380ms ease both; }
@media(max-width:360px) { .app-flow.layout-daystories .event-card { padding:18px;height:clamp(420px,64svh,620px);min-height:420px; } .app-flow.layout-daystories .event-card h3 { font-size:2.1rem; } }
@media(prefers-reduced-motion:reduce) { .layout-daystories .event-card { animation:none; } }

/* Cinematic welcome: curtain, silent film, then elephants arriving home. */
.welcome-film { position:fixed;inset:0;z-index:999;background:#fbf7ef;overflow:hidden;isolation:isolate; }
.welcome-film[hidden],.welcome-bridge[hidden] { display:none; }
.welcome-film video { width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#171b20;transition:opacity 1000ms ease; }
.welcome-skip { position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:5;border:1px solid #e1d0af99;background:#fbf7efcc;backdrop-filter:blur(12px);border-radius:24px;padding:12px 18px;color:#665035;font:500 .75rem 'Plus Jakarta Sans',sans-serif;cursor:pointer; }
.welcome-bridge { position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#fffdf7,#f1e5ce);opacity:0;transition:opacity 1000ms ease; }
.show-bridge .welcome-bridge { opacity:1; }
.show-bridge video { opacity:0; }
.welcome-halo { position:absolute;width:min(80vw,600px);aspect-ratio:1;left:50%;top:45%;transform:translate(-50%,-50%);border:1px solid #bfa16a44;border-radius:50%;box-shadow:0 0 0 22px #bfa16a08,0 0 0 23px #bfa16a22; }
.welcome-bridge-copy { position:absolute;left:20px;right:20px;top:24%;text-align:center;color:#806437; }
.welcome-bridge-copy > span { font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; }
.app-flow .welcome-bridge-copy h2 { font-size:clamp(2rem,7vw,4rem);color:#5a4b32;line-height:1.3;margin:18px 0 12px; }
.welcome-bridge-copy h2 em { color:#aa8244; }
.welcome-bridge-copy i { font:italic 1rem Georgia,serif;color:#8a7653; }
.journey-elephant { position:absolute;top:52%;width:clamp(110px,31vw,200px);height:auto;object-fit:contain;transform-origin:top left; }
.journey-left { right:50%; }
.journey-right { left:50%; }
.journey-elephant img { display:block;width:100%;height:auto; }
.journey-right img { transform:scaleX(-1); }
.welcome-active { overflow:hidden; }
.welcome-active main,.welcome-active .topbar,.welcome-active #notificationBell { opacity:0;pointer-events:none; }
.welcome-active.welcome-revealing main,.welcome-active.welcome-revealing .topbar,.welcome-active.welcome-revealing #notificationBell { opacity:1;transition:opacity 1600ms ease 200ms; }
.welcome-active .countdown-clock .clock-elephant { visibility:hidden; }
.welcome-film.fly-home { background:transparent;pointer-events:none; }
.fly-home .welcome-bridge { background:transparent; }
.fly-home .welcome-halo,.fly-home .welcome-bridge-copy,.fly-home .welcome-skip { opacity:0;transition:opacity 700ms ease; }
.fly-home video { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .welcome-film { display:none!important; } }

/* Let the welcome paper dissolve gradually into the real home screen. */
.welcome-bridge { background:transparent;isolation:isolate; }
.welcome-bridge::before { content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,#fffdf7,#f1e5ce);opacity:1;transition:opacity 1800ms ease; }
.fly-home .welcome-bridge::before { opacity:0; }

/* Champagne silk drapes, with soft folds and a fine embroidered edge. */
.curtain { background:linear-gradient(180deg,#fff8e844,transparent 35%,#a2824b26),repeating-linear-gradient(90deg,#ad8e5c 0%,#dec79d 3%,#fff3d9 8%,#ebd8b3 14%,#baa071 19%,#f6e7cb 25%);box-shadow:inset -18px 0 30px #654e2722,0 0 35px #3a2b1840; }
.curtain-right { background:linear-gradient(180deg,#fff8e844,transparent 35%,#a2824b26),repeating-linear-gradient(270deg,#ad8e5c 0%,#dec79d 3%,#fff3d9 8%,#ebd8b3 14%,#baa071 19%,#f6e7cb 25%); }
.curtain::before { content:'';position:absolute;inset:0 0 auto;height:25%;background:linear-gradient(160deg,#fff4dd99,#c7a77555 48%,#fff0cf88);border-radius:0 0 70% 32%;border-bottom:2px solid #b18c505c;box-shadow:0 8px 18px #72562d19; }
.curtain-right::before { border-radius:0 0 32% 70%; }
.curtain::after { inset:12px;border:1px solid #fff6df66;border-radius:0;box-shadow:inset 0 0 0 4px #bd9c6122; }
.curtain-seal { gap:10px; }
.curtain-seal span { font:italic clamp(1.9rem,7vw,3.1rem) Georgia,serif;color:#725630;text-shadow:0 1px 14px #fff6e6; }
.curtain-seal small { font-size:.56rem;color:#80643d;letter-spacing:.2em;text-transform:uppercase; }
@keyframes curtain-left-open { to { transform:translate3d(-103%,0,0); } }
@keyframes curtain-right-open { to { transform:translate3d(103%,0,0); } }

/* A little handwritten-feeling note, with no frame around the elephants. */
.welcome-bridge-copy { top:23%;left:28px;right:28px;max-width:520px;margin-inline:auto; }
.welcome-bridge-copy .welcome-tiny-heart { display:block;font:1.7rem Georgia,serif;color:#b2976c;letter-spacing:0;margin-bottom:18px; }
.app-flow .welcome-bridge-copy h2 { font-size:clamp(2rem,7.5vw,3.4rem);line-height:1.23;letter-spacing:-.035em;margin:0 auto 20px;max-width:460px;text-wrap:balance; }
.welcome-typed-line { margin:0 auto 24px;min-height:3em;max-width:310px;color:#806f56;font-size:.85rem;line-height:1.8;text-wrap:balance; }
.welcome-type-caret { display:inline-block;width:1px;height:1em;background:#a38656;margin-left:3px;vertical-align:-.1em;animation:welcome-caret 800ms step-end infinite; }
.typing-done .welcome-type-caret { opacity:0;animation:none;transition:opacity 500ms ease; }
.welcome-bridge-copy i { font-size:.9rem;color:#9a8059; }
.welcome-bridge .journey-elephant { top:60%; }
@keyframes welcome-caret { 50% { opacity:0; } }
@media(max-height:650px) { .welcome-bridge-copy { top:15%; } .welcome-bridge .journey-elephant { top:65%; } .welcome-bridge-copy .welcome-tiny-heart { margin-bottom:10px; } }