/* chapters.mjs owns a cancellable, nearest-page magnet after native scrolling
   stops. Root CSS snapping can re-snap backwards when mobile chrome resizes. */
html{scroll-snap-type:none;scroll-padding:0;--chapter-height:100svh;--chapter-top:max(78px,calc(env(safe-area-inset-top) + 58px));--chapter-bottom:max(100px,calc(env(safe-area-inset-bottom) + 78px))}
@supports(height:100dvh){html{--chapter-height:100dvh}}
/* The controller preserves the reading anchor; avoid a second native correction. */
.theme-modern main{overflow-anchor:none}
.theme-modern main>section{min-height:var(--chapter-height);scroll-snap-align:none;scroll-margin:0}
.hero-modern{display:grid;grid-template-rows:auto minmax(240px,1fr) auto;gap:18px;padding:var(--chapter-top) 0 var(--chapter-bottom)}

.hero-media{height:auto;min-height:0;margin:0 16px;align-self:stretch}
.hero-location{margin:0}
.invitation-modern{display:flex;flex-direction:column;justify-content:center;padding:var(--chapter-top) 28px var(--chapter-bottom)}
.invitation-modern .family{flex:none}
.gallery-heading{padding:0 26px}.photo-caption{padding:0 24px;min-height:0;line-height:1.6}
.event-modern{display:flex;flex-direction:column;justify-content:center;padding:var(--chapter-top) 20px var(--chapter-bottom)}
.event-modern>h2{font-size:clamp(30px,calc(var(--chapter-height) * .043),36px);margin:0 6px 16px}
.date-card,.venue-card{padding:22px;flex:none}.date-display{padding:4px 0 14px}.date-display>strong{font-size:clamp(72px,calc(var(--chapter-height) * .11),102px)}
.week{padding-bottom:16px}.week>div{gap:6px}.venue-card{margin-top:12px}.venue-card h3{margin:5px 0;font-size:23px}.venue-card .address{margin-top:6px}.venue-actions{margin-top:14px}
.reply-modern{display:grid;grid-template-rows:minmax(200px,1fr) auto;gap:28px;padding:var(--chapter-top) 0 var(--chapter-bottom)}
.reply-photo{position:relative;height:auto;min-height:0}.reply-photo img{position:absolute;inset:0}.reply-content{padding:0 28px}.reply-content h2{font-size:clamp(30px,calc(var(--chapter-height) * .042),35px)}
.reply-content>p:not(.demo-note){margin-top:18px}.theme-modern .final-answer{margin-top:22px}

html[data-short-viewport]{--chapter-top:max(68px,calc(env(safe-area-inset-top) + 48px));--chapter-bottom:max(90px,calc(env(safe-area-inset-bottom) + 72px))}
html[data-short-viewport] .hero-modern{grid-template-rows:auto minmax(210px,1fr) auto;gap:12px}
html[data-short-viewport] .gallery-heading h2{font-size:26px}
html[data-short-viewport] .invitation-modern h2{font-size:32px}
html[data-short-viewport] .invitation-copy{margin-top:23px}
html[data-short-viewport] .family{margin-top:30px;padding-top:22px}
html[data-short-viewport] .reply-modern{gap:22px}
html[data-short-viewport] .reply-content h2{font-size:30px}
@media(max-width:350px){.hero-media{margin-left:12px;margin-right:12px}.invitation-modern,.reply-content{padding-left:24px;padding-right:24px}.event-modern{padding-left:16px;padding-right:16px}.date-card,.venue-card{padding:19px}.venue-card h3{font-size:21px}.gallery-heading{padding-left:24px;padding-right:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}}
/* Apple "Today at Apple" card: the photo fills the whole card and the copy
   sits in its quiet upper area (the evening sky), eyebrow, big title, one
   line of detail and text links. The card grows to fill the screen. */
.event-modern{display:flex;flex-direction:column;justify-content:flex-start;padding:calc(env(safe-area-inset-top) + 28px) 16px var(--chapter-bottom)}
.event-modern .venue-card{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:320px;padding:0;overflow:hidden;background:#0b1730;color:#f5f5f7;box-shadow:0 5px 17px #00000010}
.venue-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:12% 100%}
.event-modern .venue-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(9 18 40 / .55) 0,rgb(9 18 40 / .18) 38%,rgb(9 18 40 / 0) 60%);pointer-events:none}
.event-modern .venue-body{position:relative;z-index:1;padding:24px 24px 14px}
.venue-eyebrow{margin:0;font-size:13px;font-weight:600;color:#cfd8ea;letter-spacing:-.01em}
.event-modern .venue-card h3{margin:6px 0 8px;font-size:29px;font-weight:650;letter-spacing:-.045em;line-height:1.15;color:#fff;text-shadow:0 1px 12px rgb(0 0 0 / .25)}
.venue-copy{margin:0;font-size:15px;line-height:1.5;color:#e8ecf4;letter-spacing:-.02em;text-shadow:0 1px 8px rgb(0 0 0 / .3)}
.event-modern .venue-actions{display:flex;gap:18px;margin-top:12px}
.venue-link{display:inline-flex;align-items:center;gap:3px;min-height:32px;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-shadow:0 1px 8px rgb(0 0 0 / .3)}
.venue-link span{font-size:16px;line-height:1}
/* Apple Calendar medium widget (iOS 26): red weekday, a large day number and
   the day's event on the left; the month grid on the right, the day in a red
   circle. Sized up from the home-screen widget to the card's width. */
.event-modern .cal-widget{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:start;padding:20px 20px 16px 22px;background:#fff;color:#1d1d1f}
.cal-widget p{margin:0}
.cal-weekday{font-size:15px;font-weight:600;color:#ff3b30;letter-spacing:-.01em}
.cal-day{font-size:56px;font-weight:600;letter-spacing:-.045em;line-height:1.02;margin-top:0}
.cal-events{margin:16px 0 0;padding:0;list-style:none}
.cal-events li{display:flex;gap:9px;align-items:stretch}
.cal-bar{width:4px;border-radius:2px;background:#ff3b30;flex:none}
.cal-events b{display:block;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.cal-events div>span{display:block;font-size:13px;color:#6e6e73;line-height:1.35;margin-top:2px;letter-spacing:-.01em}
.cal-right{min-width:0}
.cal-month{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,27px);gap:4px 3px;font-size:12.5px;text-align:center;font-variant-numeric:tabular-nums}
.cal-grid b{font-weight:600;color:#86868b;font-size:10.5px}
.cal-grid span{height:26px;line-height:26px;border-radius:50%;color:#1d1d1f}
.cal-grid span.is-day{background:#ff3b30;color:#fff;font-weight:700}
.cal-add{text-decoration:none;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:2px;margin-top:14px;padding:0;border:0;background:none;color:#0071e3;font:inherit;font-size:14px;font-weight:500;cursor:pointer;min-height:30px}
.cal-add span{font-size:16px;line-height:1}
@media(max-width:380px){.cal-grid{grid-template-columns:repeat(7,24px);gap:3px 3px;font-size:11.5px}.cal-grid span{height:23px;line-height:23px}.cal-day{font-size:48px}}
@media(max-width:350px){.cal-grid{grid-template-columns:repeat(7,21px);font-size:10.5px}.cal-grid span{height:21px;line-height:21px}.cal-day{font-size:42px}.event-modern .cal-widget{column-gap:12px;padding:18px 16px 14px 18px}}