@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/CormorantGaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/CormorantGaramond-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fonts/CormorantGaramond-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('./fonts/CormorantGaramond-500i.woff2') format('woff2'); }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/GreatVibes-400.woff2') format('woff2'); }

:root {
  --ds-page: #f8f4ea;
  --ds-ink: #333a2e;
  --ds-ink-2: #6d7261;
  --ds-hairline: rgba(51, 82, 60, 0.22);
  --green: #33523c;
  --green-soft: rgba(51, 82, 60, 0.55);
  --cream-line: rgba(51, 82, 60, 0.35);
}

html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); color: var(--ds-ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.55; }

.frame { font-family: 'Cormorant Garamond', Georgia, serif; border: 1px solid var(--green-soft); outline: 1px solid var(--green-soft); outline-offset: 5px; padding: 28px 18px 34px; margin: 10px 4px; }
@media (min-width: 768px) { .frame { padding: 44px 40px 48px; margin: 14px 8px; } }

.w-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; margin-bottom: 26px; font-family: 'Cormorant Garamond', Georgia, serif; }
.w-nav a { color: var(--ds-ink); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 2px; }
.w-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--green); }
.w-nav a.w-pill { background: var(--green); color: #f8f4ea; border-radius: 999px; padding: 8px 18px; letter-spacing: 0.12em; }
.w-nav a.w-pill[aria-current="page"] { box-shadow: none; }
@media (max-width: 600px) { .w-nav a { display: inline-flex; align-items: center; min-height: 44px; } .w-nav a.w-pill { min-height: 0; } }

.hero { text-align: center; }
.names { font-family: 'Great Vibes', 'Cormorant Garamond', cursive; font-weight: 400; font-size: clamp(46px, 13vw, 84px); line-height: 1.15; margin: 6px 0 2px; color: var(--ds-ink); }
.date-line { white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 14px; font-style: italic; font-size: clamp(19px, 5vw, 24px); letter-spacing: 0.12em; color: var(--ds-ink); margin: 4px 0 8px; }
.date-line::before, .date-line::after { content: ""; height: 1px; width: min(70px, 18vw); background: var(--cream-line); }

.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto; color: var(--green); }
.ornament .o-line { height: 1px; width: min(80px, 22vw); background: var(--cream-line); }
.ornament svg { width: 54px; height: 14px; display: block; }

.watercolor { display: block; width: 100%; max-width: 720px; margin: 10px auto; }

.script { font-family: 'Great Vibes', cursive; font-weight: 400; }
.venue-line { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(21px, 5.6vw, 27px); margin: 6px 0; }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ds-ink); margin: 18px 0 2px; }
.sub { font-size: 18px; color: var(--ds-ink-2); margin: 2px 0 0; }

.schedule { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 10px; max-width: 640px; margin: 20px auto 4px; }
@media (min-width: 768px) { .schedule { grid-template-columns: repeat(4, 1fr); } }
.sched-item { text-align: center; padding: 4px 6px; }
.sched-item svg { width: 34px; height: 34px; stroke: var(--green); fill: none; stroke-width: 1.4; }
.sched-time { font-size: 20px; font-weight: 600; margin-top: 6px; }
.sched-name { font-size: 17px; }
.sched-place { font-size: 15px; color: var(--ds-ink-2); }
.preliminary { font-size: 15px; font-style: italic; color: var(--ds-ink-2); text-align: center; margin: 8px 0 0; }

.quote { font-style: italic; font-size: clamp(19px, 5vw, 23px); text-align: center; margin: 18px 0 6px; }

.trio { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; margin: 22px auto 0; }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio a { display: block; text-align: center; text-decoration: none; color: var(--ds-ink); border-top: 1px solid var(--cream-line); padding: 16px 10px 4px; }
.trio .t-label { font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }
.trio .t-text { font-size: 16.5px; color: var(--ds-ink-2); margin-top: 6px; }

.page-title { text-align: center; font-family: 'Great Vibes', cursive; font-weight: 400; font-size: clamp(38px, 10vw, 56px); margin: 4px 0 2px; }
.section { max-width: 640px; margin: 18px auto; text-align: center; }
.section h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; margin: 26px 0 10px; }
.section a { color: var(--green); }
.fact-row { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; padding: 12px 2px; border-bottom: 1px solid var(--ds-hairline); }
.fact-row .f-time { font-weight: 600; font-size: 19px; }
.fact-row .f-time:empty { display: none; }
.fact-row .f-name { font-size: 19px; }
.fact-row .f-detail { font-size: 16px; color: var(--ds-ink-2); }

.ph { font-style: italic; color: #8a7f57; }
.ph::before { content: "Plassholder: "; font-weight: 600; font-style: normal; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.ph-card { border: 1px dashed rgba(51, 82, 60, 0.45); border-radius: 6px; padding: 14px 16px; margin: 10px 0; }

.w-button { display: inline-block; background: var(--green); color: #f8f4ea !important; text-decoration: none; border-radius: 999px; padding: 12px 26px; font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.photo { display: block; width: 100%; border-radius: 4px; }
.photo.feature { max-width: 480px; margin: 14px auto 0; }
.photo-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.photo-btn.feature { max-width: 480px; margin: 14px auto 0; }
.photo-btn img { display: block; width: 100%; border-radius: 4px; }
.photo-btn.feature img { margin: 0; }
.gallery { columns: 2; column-gap: 10px; margin-top: 10px; }
.gallery .photo-btn { margin-bottom: 10px; break-inside: avoid; }
.center { text-align: center; }
.signoff { text-align: center; font-family: 'Great Vibes', cursive; font-size: clamp(28px, 8vw, 40px); margin: 30px 0 4px; }
.schedule.single { grid-template-columns: 1fr; }

.om-video { display: block; width: 100%; max-width: 320px; height: auto; margin: 28px auto 0; border: 1px solid var(--cream-line); background: #000; }

/* Photo viewer (port of the File PhotoViewer) */
#pv-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 26, 18, 0.92); z-index: 1000; flex-direction: column; align-items: center; justify-content: center; }
.pv-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #f8f4ea; }
.pv-title { font-family: 'Great Vibes', cursive; font-size: 26px; }
.pv-counter { font-size: 15px; letter-spacing: 0.08em; }
.pv-close { background: none; border: none; color: #f8f4ea; font-size: 34px; line-height: 1; cursor: pointer; padding: 4px 10px; }
.pv-img { max-width: min(92vw, 900px); max-height: 78vh; border-radius: 4px; object-fit: contain; }
.pv-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #f8f4ea; font-size: 46px; cursor: pointer; padding: 18px 16px; min-width: 48px; min-height: 48px; }
.pv-prev { left: 6px; }
.pv-next { right: 6px; }

/* FileCard equivalent: centered page column (max-width 1040px, 36px padding like the original) */
.card { max-width: 1040px; margin: 0 auto; padding: 36px; box-sizing: border-box; }
@media (max-width: 767px) { .card { padding: 10px 4px; } }