:root {
  --ink: #17131a;
  --plum: #321c3b;
  --violet: #6c3a83;
  --orange: #f26822;
  --cream: #f5efe5;
  --paper: #fbf8f1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
section[id], article[id] { scroll-margin-top: 82px; }
.accessGate { min-height: 100svh; padding: 28px; display: grid; place-items: center; color: var(--cream); background: radial-gradient(circle at 50% 40%, #51305d 0, #2d1935 36%, #17131a 78%); text-align: center; }
.gateCard { width: min(520px, 100%); padding: clamp(40px, 7vw, 70px); border: 1px solid rgba(242,104,34,.42); background: rgba(23,19,26,.48); box-shadow: 0 30px 90px rgba(0,0,0,.22); }
.gateOrnament { margin-bottom: 22px; color: var(--orange); font-size: 28px; }
.gateCard h1 { margin: 20px 0 24px; font-size: clamp(48px, 7vw, 74px); line-height: .93; }
.gateCard > p:not(.kicker) { margin: 0 0 32px; color: #d9cedc; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; }
.accessForm { text-align: left; }
.accessForm label { display: block; margin-bottom: 9px; color: #d9cedc; font-size: 16px; }
.passwordRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.passwordRow input { min-width: 0; padding: 15px 16px; border: 1px solid rgba(245,239,229,.38); border-right: 0; border-radius: 0; outline: none; color: var(--cream); background: rgba(245,239,229,.08); font: inherit; font-size: 16px; }
.passwordRow input:focus { border-color: var(--orange); }
.passwordRow button { padding: 15px 20px; border: 1px solid var(--orange); border-radius: 0; color: var(--ink); background: var(--orange); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.passwordRow button span { margin-left: 7px; }
.accessError { min-height: 24px; margin: 10px 0 0; color: #ffad85; font-size: 16px; }
.hero { min-height: 100svh; padding: 28px clamp(22px, 5vw, 80px) 42px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cream); background: radial-gradient(circle at 50% 36%, #51305d 0, #2d1935 34%, #17131a 75%); overflow: hidden; position: relative; }
.hero::before, .hero::after { content: ""; position: absolute; width: 42vw; height: 42vw; border: 1px solid rgba(242,104,34,.18); border-radius: 50%; top: 24%; }
.hero::before { left: -28vw; }
.hero::after { right: -28vw; }
.nav { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; display: flex; justify-content: flex-end; align-items: center; padding: 14px clamp(22px, 5vw, 80px); color: var(--cream); background: rgba(23,19,26,.9); border-bottom: 2px solid rgba(108,58,131,.5); box-shadow: 0 6px 24px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 16px; letter-spacing: .1em; }
.navLinks { display: flex; align-items: center; gap: 28px; }
.navLinks > a, .navMore > summary { padding: 11px 4px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.navLinks > a:hover, .navLinks > a:focus-visible, .navMore > summary:hover, .navMore > summary:focus-visible { color: var(--orange); border-bottom-color: var(--orange); }
.navLinks > a[aria-current="page"], .navMore > summary[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); font-weight: 700; }
.navMore { display: none; position: relative; }
.navMore > summary { list-style: none; cursor: pointer; }
.navMore > summary::-webkit-details-marker { display: none; }
.navMore > summary::after { content: "⌄"; margin-left: 7px; color: var(--orange); }
.navMenu { min-width: 155px; position: absolute; z-index: 30; top: calc(100% + 9px); right: 0; padding: 8px; border: 1px solid rgba(245,239,229,.2); background: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.navMenu a { display: block; padding: 11px 13px; white-space: nowrap; }
.navMenu a:hover, .navMenu a:focus-visible, .navMenu a[aria-current="page"] { color: var(--orange); background: rgba(242,104,34,.08); outline: none; }
.page-home .day, .page-home .about, .page-home .rsvp { display: none; }
.pageMain { min-height: 100svh; padding-top: 72px; display: flex; flex-direction: column; }
.pageMain > main { flex: 1; display: flex; flex-direction: column; }
.pageMain > footer { margin-top: auto; }
.pageSection { flex: 1; }
.eventCards.singleCard { grid-template-columns: minmax(0, 1fr); max-width: 700px; }
.eventCards.singleCard { box-shadow: none; }
.eventCards.singleCard .eventCard { min-height: auto; padding: 0; background: transparent; }
.servicePage .day { background: var(--paper); }
.servicePage .ceremony .divider span { background: var(--paper); }
.celebrationPage, .celebrationPage .day { color: var(--cream); background: var(--ink); }
.celebrationPage .sectionIntro > p:last-child { color: #d9cedc; }
.celebrationPage .celebration .divider span { background: var(--ink); }
.heroOrnament { display: flex; gap: 15px; margin: auto 0 20px; color: var(--orange); font-size: 16px; }
.heroOrnament span:nth-child(2) { transform: scale(1.7); }
.eyebrow, .kicker, .cardLabel { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .28em; }
.eyebrow { color: #d9c9df; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: clamp(52px, 8.4vw, 122px); line-height: .82; letter-spacing: -.045em; margin: 27px 0 28px; }
h1 em { display: block; color: var(--orange); font-weight: 400; }
.titleName, .batMitzvahPhrase { display: block; }
.batMitzvahPhrase { white-space: nowrap; }
.titleBat { display: inline-block; width: .96em; height: .6em; margin: 0 .03em; vertical-align: -.03em; color: var(--orange); }
.titleBat svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(242,104,34,.16)); }
.heroIntro { color: #d9cedc; line-height: 1.7; margin: 0 0 36px; font-family: Georgia, serif; font-size: 17px; }
.heroDetails { width: min(760px, 100%); margin: 22px 0 32px; display: grid; grid-template-columns: 1fr; border-bottom: 1px solid rgba(245,239,229,.25); text-align: left; }
.heroEvent { padding: 22px clamp(18px, 3vw, 34px); display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: start; }
.heroEvent + .heroEvent { border-top: 1px solid rgba(245,239,229,.25); }
.heroDetails strong { color: var(--orange); font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.heroDetails span { color: #d9cedc; font-size: 16px; line-height: 1.4; }
.heroDetails .heroVenue { margin-top: 3px; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 700; }
.heroDetails .heroTime { margin-top: 4px; color: var(--cream); font-size: 20px; font-weight: 700; white-space: nowrap; }
.heroEventInfo { display: grid; gap: 7px; }
.heroSectionLink { width: fit-content; }
.heroAddress { width: fit-content; color: #d9cedc; font-size: 16px; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.heroAddress > span { color: var(--orange); }
.heroSectionLink:hover, .heroSectionLink:focus-visible, .heroAddress:hover, .heroAddress:focus-visible, .heroMore:hover, .heroMore:focus-visible { color: var(--orange); outline: none; }
.heroDetails .heroDetailNote { margin-top: 8px; color: #d9cedc; font-style: italic; font-weight: 400; text-align: left; }
.heroDetailNote a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.heroDetailNote a:hover, .heroDetailNote a:focus-visible { color: var(--orange); }
.heroDetails .heroMore { margin-top: 8px; color: var(--cream); font-size: 16px; font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.heroCity { grid-column: 1 / -1; margin: 0; padding: 11px 20px; border-top: 1px solid rgba(245,239,229,.25); color: #d9cedc; font-size: 16px; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.dateLockup { width: min(760px, 100%); padding: 18px 0; border-top: 1px solid rgba(245,239,229,.25); border-bottom: 1px solid rgba(245,239,229,.25); display: grid; grid-template-columns: auto auto auto; justify-content: center; gap: clamp(22px, 4vw, 58px); align-items: center; font-size: 16px; letter-spacing: .2em; }
.dateLockup strong { font-family: Georgia, serif; color: var(--orange); font-size: 42px; font-weight: 400; line-height: 1; }
.dateMain { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; font-family: Georgia, serif; color: var(--orange); font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.scrollCue { margin-top: auto; padding-top: 34px; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; }
.scrollCue span { color: var(--orange); margin-left: 10px; }
.day { padding: clamp(90px, 10vw, 150px) clamp(22px, 7vw, 110px); background: var(--paper); }
.sectionIntro { max-width: 670px; margin: 0 auto 70px; text-align: center; }
.kicker { color: var(--orange); }
.sectionIntro h1, .sectionIntro h2, .rsvp h1, .rsvp h2 { font-size: clamp(46px, 6vw, 80px); line-height: .96; letter-spacing: -.035em; margin: 22px 0 26px; }
.sectionIntro > p:last-child { max-width: 560px; margin: auto; color: #6c626a; line-height: 1.8; font-size: 17px; }
.sectionIntroLink { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sectionIntroLink:hover, .sectionIntroLink:focus-visible { color: var(--orange); }
.eventCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; margin: auto; box-shadow: 0 25px 80px rgba(38,22,42,.13); }
.eventCard { min-height: 690px; padding: clamp(38px, 5vw, 68px); position: relative; overflow: hidden; }
.eventCard > :not(.moon) { position: relative; z-index: 1; }
.ceremony { background: var(--cream); }
.celebration { background: var(--ink); color: var(--cream); }
.cardMeta { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.cardLabel { color: var(--violet); }
.celebration .cardLabel { color: var(--orange); }
.eventCard h3 { font-size: clamp(42px, 4vw, 62px); line-height: .98; letter-spacing: -.035em; margin: 26px 0 30px; position: relative; z-index: 1; }
.divider { height: 1px; background: #d8cec5; position: relative; margin: 0 0 42px; }
.divider span { position: absolute; left: 0; top: -8px; padding-right: 12px; background: var(--cream); color: var(--orange); font-size: 16px; }
.celebration .divider { background: #403945; }
.celebration .divider span { background: var(--ink); }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; margin-bottom: 25px; }
dt { font-size: 16px; letter-spacing: .2em; color: #8e8188; padding-top: 4px; }
dd { margin: 0; line-height: 1.55; font-family: Georgia, serif; font-size: 16px; }
.addressLink { display: inline; border-bottom: 1px solid currentColor; }
.addressLink span { color: var(--orange); white-space: nowrap; }
.venueMapLink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.venueMapLink:hover, .venueMapLink:focus-visible { color: var(--orange); outline: none; }
.attire { min-height: 44px; margin: 34px 0 0; padding: 16px 18px; border-left: 2px solid var(--violet); background: rgba(108,58,131,.07); font-size: 16px; line-height: 1.5; }
.celebration .attire { border-color: var(--orange); background: rgba(242,104,34,.08); color: #d9cedc; }
.infoLink { display: inline-block; width: fit-content; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; color: #6c626a; border: 0; padding: 0; }
.celebration .infoLink { color: #d9cedc; }
.headingInfoLink { margin: -12px 0 30px; }
.detailInfoLink { display: block; margin-top: 7px; color: inherit; }
.arrivalSection { margin-top: 58px; padding-top: 52px; border-top: 1px solid #d1c4b8; }
.arrivalSection h2, .arrivalSection h3 { margin: 16px 0 32px; font-size: 34px; }
.arrivalGrid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.arrivalGrid h3, .arrivalGrid h4 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.arrivalGrid p { margin: 0; color: #6c626a; font-size: 16px; line-height: 1.75; }
.arrivalGrid a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.arrivalGrid a span { color: var(--orange); }
.afterwardSection { margin-top: 58px; padding-top: 52px; border-top: 1px solid #d1c4b8; }
.afterwardSection h2, .afterwardSection h3 { margin: 16px 0 18px; font-size: 34px; }
.afterwardSection > p:last-child { margin: 0; color: #6c626a; font-size: 16px; line-height: 1.75; }
.celebrationInfo { margin-top: 58px; padding-top: 52px; border-top: 1px solid #403945; }
.celebrationInfo h2, .celebrationInfo h3 { margin: 16px 0 32px; font-size: 34px; }
.celebrationInfoGrid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.celebrationInfoGrid h3, .celebrationInfoGrid h4 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.celebrationInfoGrid p { margin: 0; color: #d9cedc; font-size: 16px; line-height: 1.75; }
.pageFaqPrompt { margin: 58px 0 0; padding-top: 36px; border-top: 1px solid #d1c4b8; color: #6c626a; font-size: 18px; }
.pageFaqPrompt a { color: var(--violet); text-decoration: underline; text-underline-offset: 4px; }
.celebrationPage .pageFaqPrompt { border-top-color: #403945; color: #d9cedc; }
.celebrationPage .pageFaqPrompt a { color: var(--orange); }
.faqSection { margin-top: 58px; }
.faqPage .faqContent { width: min(760px, 100%); margin: auto; }
.faqPage .faqSection { margin-top: 0; }
.faqHeading { margin: 16px 0 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.faqSection h2, .faqSection h3 { margin: 0; font-size: 34px; }
.faqToggleAll { flex: 0 0 auto; padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--violet); background: transparent; font: inherit; font-size: 16px; cursor: pointer; }
.faqToggleAll:hover, .faqToggleAll:focus-visible { color: var(--orange); outline: none; }
.faqList { border-bottom: 1px solid #d1c4b8; }
.faqList details { border-top: 1px solid #d1c4b8; scroll-margin-top: 100px; }
.faqList summary { padding: 19px 44px 19px 0; position: relative; list-style: none; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.35; cursor: pointer; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--violet); font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 400; }
.faqList details[open] summary::after { content: "−"; }
.faqList details > p { margin: -3px 44px 20px 0; color: #6c626a; font-size: 16px; line-height: 1.7; }
.faqGroupTitle { margin: 0; padding: 17px 0; color: var(--violet); font-family: Arial, Helvetica, sans-serif; font-size: 16px; letter-spacing: .22em; text-transform: uppercase; }
.celebrationFaqGroup { margin-top: 42px; color: var(--orange); border-top: 1px solid #d1c4b8; }
.celebrationPage .faqList { border-bottom-color: #403945; }
.celebrationPage .faqList details { border-top-color: #403945; }
.celebrationPage .faqList summary::after, .celebrationPage .faqToggleAll { color: var(--orange); }
.celebrationPage .faqList details > p { color: #d9cedc; }
.moon { width: 230px; height: 230px; border-radius: 50%; position: absolute; z-index: 0; right: -66px; top: 74px; background: var(--orange); opacity: .72; box-shadow: 0 0 70px rgba(242,104,34,.17); }
.moon::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--ink); left: -48px; top: -20px; }
.hero > :not(.backgroundSymbols, .nav) { position: relative; z-index: 1; }
.backgroundSymbols { position: absolute; z-index: 0; inset: 0; pointer-events: none; color: var(--cream); opacity: .09; }
.magenDavid { position: absolute; right: 7%; top: 15%; font-size: clamp(100px, 13vw, 180px); line-height: 1; transform: rotate(8deg); }
.broom { position: absolute; left: 4%; bottom: 18%; width: 210px; height: 16px; border-radius: 99px; background: currentColor; transform: rotate(-28deg); transform-origin: left center; }
.broom::before { content: ""; position: absolute; right: -54px; top: -24px; width: 72px; height: 64px; background: currentColor; clip-path: polygon(0 35%, 100% 0, 82% 100%, 0 65%); }
.broom::after { content: ""; position: absolute; right: 8px; top: -9px; width: 7px; height: 34px; border-radius: 3px; background: var(--orange); }
.cat { position: absolute; right: 13%; bottom: 9%; width: 70px; height: 105px; border-radius: 48% 48% 42% 42%; background: currentColor; }
.cat::before { content: ""; position: absolute; left: 9px; top: -37px; width: 52px; height: 52px; border-radius: 50%; background: currentColor; clip-path: polygon(0 0, 35% 18%, 65% 18%, 100% 0, 88% 100%, 12% 100%); }
.cat::after { content: ""; position: absolute; left: 54px; top: 43px; width: 72px; height: 72px; border: 14px solid currentColor; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(22deg); }
.heroPumpkin { position: absolute; width: 86px; height: 66px; border-radius: 46% 46% 48% 48%; background: var(--orange); box-shadow: inset 17px 0 0 rgba(23,19,26,.3), inset -17px 0 0 rgba(23,19,26,.3); }
.heroPumpkin::before { content: ""; position: absolute; left: 36px; top: -18px; width: 14px; height: 24px; border-radius: 5px 5px 0 0; background: var(--cream); transform: rotate(8deg); }
.heroPumpkin::after { content: ""; position: absolute; inset: 11px 24px 9px; border-left: 2px solid rgba(245,239,229,.55); border-right: 2px solid rgba(245,239,229,.55); border-radius: 50%; }
.pumpkinOne { left: 13%; top: 18%; transform: rotate(-10deg) scale(.75); }
.pumpkinTwo { right: 29%; bottom: 12%; transform: rotate(9deg) scale(.52); }
.about { padding: clamp(90px, 10vw, 145px) clamp(22px, 7vw, 110px); color: var(--cream); background: var(--plum); overflow: hidden; }
.aboutIntro { max-width: 1130px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 390px) minmax(0, 620px); justify-content: center; align-items: center; gap: clamp(50px, 8vw, 120px); }
.aboutMark { width: min(100%, 390px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(242,104,34,.45); border-radius: 50%; color: var(--orange); background: radial-gradient(circle, rgba(242,104,34,.14), transparent 66%); font-family: Georgia, "Times New Roman", serif; font-size: clamp(120px, 18vw, 240px); line-height: 1; }
.aboutContent h1, .aboutContent h2 { margin: 20px 0 28px; font-size: clamp(52px, 7vw, 88px); line-height: .94; letter-spacing: -.04em; }
.aboutContent > p:last-child { margin: 0; max-width: 560px; color: #d8cbdc; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.8; }
.photoSection { max-width: 1180px; margin: clamp(80px, 10vw, 140px) auto 0; }
.photoSection h2 { margin: 18px 0 38px; font-size: clamp(42px, 5vw, 68px); line-height: 1; }
.photoGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photoTile { min-width: 0; padding: 0; position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(245,239,229,.18); color: var(--cream); background: var(--ink); cursor: zoom-in; }
.photoTile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease, opacity .25s ease; }
.photoTile:hover img, .photoTile:focus-visible img { transform: scale(1.035); opacity: .88; }
.photoTile span { position: absolute; left: 0; bottom: 0; padding: 9px 12px; background: rgba(23,19,26,.78); font-size: 16px; letter-spacing: .08em; }
.photoLightbox { width: min(94vw, 1180px); max-width: none; height: min(92vh, 920px); max-height: none; padding: 46px 22px 22px; border: 1px solid rgba(245,239,229,.28); color: var(--cream); background: #100d12; overflow: hidden; }
.photoLightbox::backdrop { background: rgba(10,7,11,.9); backdrop-filter: blur(5px); }
.photoLightbox figure { width: 100%; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 12px; }
.photoLightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.photoLightbox figcaption { min-height: 23px; font-size: 16px; letter-spacing: .08em; }
.lightboxClose { width: 42px; height: 42px; position: absolute; z-index: 1; top: 6px; right: 8px; border: 0; color: var(--cream); background: transparent; font-size: 34px; line-height: 1; cursor: pointer; }
.rsvp { min-height: 700px; padding: 120px 24px; background: var(--plum); color: var(--cream); text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
.rsvp::before { content: ""; width: 520px; height: 520px; position: absolute; border: 1px solid rgba(242,104,34,.2); border-radius: 50%; top: 80px; }
.rsvp > * { position: relative; z-index: 1; }
.rsvp h1, .rsvp h2 { margin: 24px 0; }
.rsvp > p:nth-of-type(2) { color: #d8cbdc; line-height: 1.8; }
.rsvpButton { margin: 28px 0 40px; padding: 17px 26px; border: 1px solid var(--orange); color: var(--orange); font-size: 16px; letter-spacing: .18em; }
.bat { position: absolute; color: var(--orange); font-size: 76px; transform: rotate(-15deg); opacity: .8; }
.batOne { left: 10%; top: 26%; }
.batTwo { right: 12%; bottom: 20%; transform: rotate(22deg) scale(.7); }
footer { padding: 26px clamp(22px, 7vw, 110px); display: flex; justify-content: center; gap: 20px; align-items: center; background: var(--ink); color: #9e929f; font-size: 16px; letter-spacing: .04em; }
.footerContact { display: grid; gap: 8px; text-align: center; line-height: 1.45; }
.footerContact a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 721px) and (max-height: 1240px) {
  .hero { padding-top: 108px; }
}

@media (max-width: 720px) {
  .nav { justify-content: flex-end; padding: 10px 14px; font-size: 16px; letter-spacing: .04em; }
  .navLinks { flex: 1 1 auto; width: 0; min-width: 0; justify-content: flex-start; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .navLinks::-webkit-scrollbar { display: none; }
  .navLinks a { padding: 10px 2px; }
  .hero { min-height: 820px; padding-top: 100px; }
  .hero::before, .hero::after { width: 80vw; height: 80vw; }
  h1 { font-size: clamp(48px, 14vw, 68px); }
  .dateLockup { width: min(330px, 100%); grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  .dateLockup > span:not(.dateMain) { font-size: 16px; }
  .dateLockup > span:first-child { justify-self: start; }
  .dateLockup > span:last-child { justify-self: end; }
  .dateMain { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: 42px; }
  .dateMain > span { font-size: inherit; }
  .heroDetails { grid-template-columns: 1fr; border-top: 0; }
  .heroEvent { grid-template-columns: 1fr; gap: 12px; padding: 22px 14px; }
  .heroDetails strong { font-size: 21px; }
  .heroDetails .heroTime { font-size: 18px; }
  .arrivalGrid { grid-template-columns: 1fr; gap: 28px; }
  .celebrationInfoGrid { grid-template-columns: 1fr; gap: 28px; }
  .eventCards { grid-template-columns: 1fr; }
  .eventCard { min-height: auto; }
  dl > div { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .eventCard.celebration { padding-bottom: 58px; }
  .celebration .moon { right: -140px; top: 82px; opacity: .55; }
  .aboutIntro { grid-template-columns: 1fr; gap: 45px; text-align: center; }
  .aboutMark { width: min(250px, 75vw); margin: auto; }
  .aboutContent > p:last-child { margin-inline: auto; }
  .photoSection { text-align: left; }
  .photoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .photoLightbox { width: 100vw; height: 100dvh; padding: 52px 12px 18px; border: 0; }
  .bat { display: none; }
  .cat { right: 8%; }
  .pumpkinOne { left: 7%; top: 27%; transform: rotate(-10deg) scale(.58); }
  .pumpkinTwo { right: 8%; bottom: 24%; transform: rotate(9deg) scale(.42); }
  footer { justify-content: center; gap: 15px; text-align: center; }
}

@media (max-width: 600px) {
  .navLinks { width: auto; justify-content: flex-end; gap: 10px; overflow: visible; }
  .navOverflowItem { display: none; }
  .navMore { display: block; }
  .navLinks > a, .navMore > summary { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skipLink {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--orange);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform .15s ease;
}
.skipLink:focus { transform: translateY(0); }
main:focus { outline: none; }
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  border-radius: 2px;
}
.accessForm input:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .skipLink { transition: none; }
}