* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #efeee8; color: #8c8579; font-family: var(--font-montserrat), Arial, sans-serif; font-size: 1.062rem; line-height: 1.45; }
.hero { height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; }
.hero-photo, .wash { position: absolute; inset: 0; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.65) brightness(1.14); transform: scale(1.01); }
.wash { background: rgba(157, 151, 140, .48); }
h1 { position: relative; margin: 5vh 0 0; font: 400 clamp(4.75rem, 8.2vw, 7.625rem) / .95 var(--font-cormorant), serif; letter-spacing: -.025em; }
.hero-content { position: absolute; z-index: 1; top: calc(50% + 8rem); left: 50%; transform: translateX(-50%); }
.down { display: none; }
.password-form { width: min(19rem, calc(100vw - 3rem)); color: #fff; font-family: var(--font-montserrat), sans-serif; text-align: left; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.password-field { position: relative; }
.password-form input { width: 100%; height: 2.7rem; padding: .6rem 4.5rem .6rem .8rem; border: 1px solid rgba(255, 255, 255, .62); border-radius: .15rem; outline: 0; background: rgba(255, 255, 255, .07); color: #fff; font: inherit; backdrop-filter: blur(.2rem); }
.password-form input:focus { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.password-form input::placeholder { color: rgba(255, 255, 255, .82); opacity: 1; }
.password-form .reveal { position: absolute; inset: 0 .3rem 0 auto; padding: 0 .6rem; border: 0; background: transparent; color: #fff; font: 500 .72rem/1 var(--font-montserrat), sans-serif; cursor: pointer; }
.password-form .submit { width: 100%; height: 2.55rem; margin-top: .55rem; border: 1px solid rgba(255, 255, 255, .62); border-radius: .15rem; background: rgba(255, 255, 255, .14); color: #fff; font: 500 .76rem/1 var(--font-montserrat), sans-serif; cursor: pointer; backdrop-filter: blur(.2rem); }
.password-form .submit:hover { background: rgba(255, 255, 255, .24); }
.password-form .submit:disabled { opacity: .65; cursor: wait; }
.password-form .error { min-height: 1.25rem; margin: .55rem 0 0; color: #fff; font-size: .78rem; text-align: center; }
.hero.show-scroll-cue .down { display: grid; position: fixed; z-index: 3; bottom: 1.5rem; left: 50%; width: 2.562rem; height: 2.562rem; transform: translateX(-50%); place-items: center; border-radius: 50%; background: rgba(140, 135, 125, .82); color: #fff; text-decoration: none; animation: scroll-cue 1.25s ease-in-out infinite; }
@keyframes scroll-cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, .5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.show-scroll-cue .down { animation: none; }
}
.site-header { --menu-icon-color: #fff; position: fixed; z-index: 20; inset: 0 0 auto; height: 4.25rem; background: transparent; backdrop-filter: blur(0); display: flex; justify-content: center; align-items: center; opacity: 1; visibility: visible; transition: background .22s ease, backdrop-filter .22s ease; }
.site-header.is-visible { --menu-icon-color: #68635b; background: rgba(239, 238, 232, .94); backdrop-filter: blur(0.5625rem); }
nav { display: flex; gap: 2.125rem; }
.site-header nav { opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.site-header.is-visible nav { opacity: 1; pointer-events: auto; }
nav a { color: #787267; text-decoration: none; padding: 0.3125rem 0; border-bottom: 1px solid transparent; white-space: nowrap; }
nav a.active, nav a:hover { border-color: currentColor; }
.menu { position: absolute; z-index: 2; display: grid; top: 1.25rem; left: 1.25rem; width: 2.625rem; height: 2.625rem; border: 0; border-radius: 0.8125rem; background: #f3f1eb; place-content: center; gap: 0.3125rem; }
.menu i { display: block; width: 1.188rem; height: 1px; background: var(--menu-icon-color, #68635b); }
.menu-open::after { content: ""; position: fixed; z-index: 19; inset: 0; background: rgba(54, 51, 45, .28); }
.menu-open .site-header { --menu-icon-color: #68635b; position: fixed; z-index: 20; inset: 0 auto 0 0; width: 22.5rem; height: 100vh; display: block; overflow: visible; background: #efeee8; box-shadow: 0.5rem 0 1.5rem rgba(54, 51, 45, .08); }
.menu-open .site-header::before { content: "Jack & Shea"; position: absolute; z-index: 22; top: 2.625rem; left: 2.5rem; color: #302d28; font: 400 3rem / 1 var(--font-cormorant), serif; white-space: nowrap; }
.menu-open .site-header nav { position: absolute; z-index: 21; top: 8.75rem; left: 2.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.875rem; margin: 0; opacity: 1; pointer-events: auto; }
.menu-open .site-header nav a { color: #302d28; font-size: 1.25rem; border: 0; }
.menu-open .site-header .menu { position: absolute; z-index: 23; top: 1.25rem; right: 1.125rem; left: auto; background: transparent; }
.menu-open .site-header .menu i { position: absolute; left: 50%; top: 50%; width: 1.5rem; transform-origin: center; background: #68635b; }
.menu-open .site-header .menu i:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .site-header .menu i:nth-child(2) { display: none; }
.menu-open .site-header .menu i:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
@media (min-width: 43.81rem) {
  .site-header { background: transparent; backdrop-filter: none; }
  .site-header.is-visible { background: rgba(239, 238, 232, .94); backdrop-filter: blur(0.5625rem); }
  body:not(.menu-open) .site-header:not(.is-visible) nav a { color: #fff; }
  .site-header nav { opacity: 1; pointer-events: auto; }
  .site-header .menu { position: static; display: grid; flex: 0 0 2.625rem; width: 2.625rem; height: 2.625rem; margin: 0 1.25rem 0 0; }
  body:not(.menu-open) .site-header:not(.is-visible) .menu { background: transparent; }
  body:not(.menu-open) .site-header:not(.is-visible) .menu i { background: #fff; }
  .site-header.is-visible .menu { background: transparent; }
  .menu-open .site-header .menu { display: grid; position: absolute; z-index: 23; top: 1.25rem; right: 1.125rem; left: auto; width: 3rem; height: 3rem; padding: 0; overflow: visible; background: transparent; place-content: center; }
  .menu-open .site-header .menu i { display: block; width: 1.188rem; height: 1px; }
}
.section { scroll-margin-top: 4.25rem; }
.content-section { max-width: 53.75rem; margin: auto; padding: 1.5rem 0 8.75rem; }
.section h2 { margin: 0 0 3.125rem; text-align: center; font: 400 2.75rem / 1.2 var(--font-cormorant), serif; }
.welcome { min-height: 45.62rem; text-align: center; padding: 3.5rem 1.25rem 5.5rem; }
.welcome h2 { margin: 0 0 0.875rem; font-size: 2.125rem; }
.welcome h3 { margin: 0; font: 400 1.75rem var(--font-cormorant), serif; }
.intro { max-width: 33.75rem; margin: 4.5rem auto 0; font: 1.25rem / 1.48 var(--font-cormorant), serif; }
.intro p { margin: 0 0 1.875rem; }
.couple-photos { width: min(67.5rem, calc(100vw - 5rem)); margin: 6.25rem auto 1.875rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.couple-photo-frame { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 0.5rem; }
.couple-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.content-section > p { margin: 0 0 4.062rem; }
.location-photo { display: block; width: 100%; height: auto; margin: 0 0 4.375rem; border-radius: 0.5rem; }
.location-photos { position: relative; left: 50%; width: min(67.5rem, calc(100vw - 5rem)); margin: 0 0 4.375rem; transform: translateX(-50%); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
.location-photo-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.5rem; }
.location-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.travel-intro { max-width: 43rem; margin: 0 auto 3.25rem; text-align: center; }
.travel-intro strong { display: block; margin-bottom: 1rem; color: #70695f; font: 600 1.625rem var(--font-cormorant), serif; }
.travel-intro p { margin: 0; }
.travel-accordion { border-top: 1px solid #c9c4b9; }
.travel-accordion details { border-bottom: 1px solid #c9c4b9; }
.travel-accordion summary { position: relative; padding: 1.5rem 3.5rem 1.5rem 0; color: #70695f; font: 600 1.625rem var(--font-cormorant), serif; cursor: pointer; list-style: none; }
.travel-accordion summary::-webkit-details-marker { display: none; }
.travel-accordion summary::after { content: "+"; position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); color: #8c8579; font: 400 1.75rem/1 var(--font-montserrat), sans-serif; }
.travel-accordion details[open] summary::after { content: "−"; }
.travel-accordion summary:focus-visible { outline: 2px solid #8c8579; outline-offset: .25rem; }
.travel-details { max-width: 40rem; padding: .25rem 0 1.75rem; }
.travel-details p { margin: 0 0 1.5rem; }
.travel-details address { font-style: normal; line-height: 2.35; color: #504d47; }
.schedule { padding-top: 2.375rem; }
.schedule-days { display: grid; gap: 1rem; }
.day-card { overflow: hidden; border: 1px solid #d3cec3; border-radius: .625rem; background: rgba(255, 255, 255, .24); }
.day-card summary { display: grid; grid-template-columns: 4.25rem 1fr 2rem; gap: 1.25rem; align-items: center; min-height: 5.75rem; padding: .75rem 1.125rem .75rem .75rem; cursor: pointer; list-style: none; }
.day-card summary::-webkit-details-marker { display: none; }
.day-card summary:focus-visible { outline: 2px solid #8c8579; outline-offset: -3px; }
.date-badge { display: grid; width: 4.25rem; height: 4.25rem; place-content: center; border-radius: .4rem; background: #dedbd2; color: #68635b; text-align: center; }
.date-badge b { font: 500 1.75rem/1 var(--font-cormorant), serif; }
.date-badge small { margin-top: .2rem; text-transform: uppercase; letter-spacing: .14em; font: 500 .7rem/1 var(--font-montserrat), sans-serif; }
.day-overview { display: grid; gap: .3rem; min-width: 0; }
.day-overview strong { color: #70695f; font: 600 1.5rem/1.1 var(--font-cormorant), serif; }
.day-overview small { overflow: hidden; color: #8c8579; font: 400 .8rem/1.4 var(--font-montserrat), sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.day-chevron { color: #8c8579; font: 400 2rem/1 var(--font-cormorant), serif; text-align: center; transition: transform .2s ease; }
.day-card[open] .day-chevron { transform: rotate(90deg); }
.day-card .timeline { border-top: 1px solid #d3cec3; border-left: 1px solid #c9c4b9; margin: 0 2rem 0 3.125rem; padding: 2rem 1rem .25rem 2.625rem; }
.timeline article { position: relative; margin-bottom: 3.5rem; }
.timeline article::before { content: ""; position: absolute; width: 0.5625rem; height: 0.5625rem; border: 0.125rem solid #8b8376; border-radius: 50%; background: #efeee8; left: -3rem; top: 0.5rem; }
.timeline small { text-transform: uppercase; letter-spacing: .15em; font: 500 0.9375rem var(--font-cormorant), serif; }
.timeline h4 { margin: 0.5625rem 0 0.625rem; font: 400 1.938rem var(--font-cormorant), serif; }
.timeline em { display: block; font: 1rem var(--font-cormorant), serif; color: #57534b; }
.timeline p { margin: 0.5rem 0 1.25rem; }
.questions { padding-top: 2.5rem; }
.questions > p { margin-top: -2.625rem; }
.questions dl { margin-top: 4.5rem; }
.questions dt { margin-top: 3.375rem; font: 600 1.188rem var(--font-cormorant), serif; color: #776f63; }
.questions dd { margin: 0.75rem 0 0; }
.packing { min-height: 46.25rem; display: flex; flex-direction: column; text-align: center; padding: 5.625rem 1.25rem; }
.packing > div { margin: auto; }
.packing h3 { margin: 0; font: 600 1.688rem var(--font-cormorant), serif; }
.packing p { margin: 0.625rem 0; }
.site-footer { min-height: 45vh; display: flex; justify-content: center; align-items: flex-end; padding: 4rem 1.5rem; }
.site-footer button { padding: .55rem .9rem; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #8c8579; font: 400 .8rem/1 var(--font-montserrat), sans-serif; cursor: pointer; }
.site-footer button:hover, .site-footer button:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 43.75rem) {
  body { font-size: 1rem; }
  .hero-photo { object-position: 33% center; }
  .hero h1 { width: auto; max-width: calc(100vw - 2rem); white-space: nowrap; text-align: center; font-size: clamp(2.5rem, 16vw, 4.062rem); line-height: 1.15; }
  .hero-content { top: calc(50% + 6rem); }
  .menu { position: absolute; z-index: 2; display: grid; top: 1.25rem; left: 1.25rem; width: 2.625rem; height: 2.625rem; border: 0; border-radius: 0.8125rem; background: transparent; place-content: center; gap: 0.3125rem; }
  .menu i { display: block; width: 1.188rem; height: 1px; }
  .down { display: grid; position: absolute; bottom: -1.25rem; left: 50%; width: 2.562rem; height: 2.562rem; transform: translateX(-50%); place-items: center; border-radius: 50%; background: #8c877d; color: #fff; text-decoration: none; }
  .site-header { height: 4.25rem; position: fixed; z-index: 20; inset: 0 0 auto; background: transparent; backdrop-filter: none; justify-content: flex-start; overflow: hidden; opacity: 1; visibility: visible; transition: none; }
  .site-header.is-visible { background: rgba(239, 238, 232, .96); backdrop-filter: blur(0.5625rem); transition: background .22s ease, backdrop-filter .22s ease; }
  .menu { z-index: 2; }
  .site-header nav { display: flex; flex: 1; min-width: 0; margin-left: 6rem; gap: 2.5rem; padding-right: 2rem; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 1.5rem; scrollbar-width: none; }
  .site-header nav { transition: none; }
  .site-header.is-visible nav { transition: opacity .22s ease; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; font-size: 1rem; }
  .menu-open::after { content: ""; position: fixed; z-index: 19; inset: 0; background: rgba(54, 51, 45, .28); }
  .menu-open .site-header { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 55vw; height: 100vh; display: block; overflow: visible; background: #efeee8; box-shadow: 0.5rem 0 1.5rem rgba(54, 51, 45, .08); }
  .menu-open .site-header::before { content: "Jack & Shea"; position: absolute; z-index: 22; top: 2.625rem; left: 1.375rem; color: #302d28; font: 400 2.25rem / 1 var(--font-cormorant), serif; white-space: nowrap; }
  .menu-open .site-header nav { position: absolute; z-index: 21; top: 7.625rem; left: 1.375rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; margin: 0; overflow: visible; }
  .menu-open .site-header nav a { color: #302d28; font-size: 1.125rem; border: 0; }
  .menu-open .site-header .menu { position: absolute; z-index: 23; top: 1.25rem; right: 0.875rem; left: auto; width: 3rem; height: 3rem; padding: 0; overflow: visible; background: transparent; place-content: center; }
  .content-section { padding: 4.375rem 1.5rem 6.25rem; }
  .welcome { padding: 3.5rem 1.5rem 5.625rem; min-height: 45rem; }
  .section h2 { font-size: 2.375rem; }
  .welcome h2 { font-size: 1.812rem; }
  .welcome h3 { font-size: 1.438rem; }
  p { margin-inline: 0.75rem; }
  .intro p, .content-section p, .packing p { margin-bottom: 2.625rem; }
  .couple-photos { width: 100%; margin-top: 4.375rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6%; scrollbar-width: none; }
  .couple-photos::-webkit-scrollbar { display: none; }
  .couple-photo-frame { flex: 0 0 88%; scroll-snap-align: center; }
  .location-photos { left: auto; width: 100%; margin-right: -1.5rem; transform: none; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6%; scrollbar-width: none; }
  .location-photos::-webkit-scrollbar { display: none; }
  .location-photo-frame { flex: 0 0 88%; scroll-snap-align: center; }
  .travel-intro { margin-bottom: 2.5rem; }
  .travel-intro p { margin-inline: 0; }
  .travel-accordion summary { padding: 1.25rem 3rem 1.25rem 0; font-size: 1.4rem; }
  .travel-details p { margin: 0 0 1.5rem; }
  .schedule-days { gap: .75rem; }
  .day-card summary { grid-template-columns: 3.65rem 1fr 1.5rem; gap: .9rem; min-height: 5rem; padding: .65rem .85rem .65rem .65rem; }
  .date-badge { width: 3.65rem; height: 3.65rem; }
  .date-badge b { font-size: 1.55rem; }
  .day-overview strong { font-size: 1.35rem; }
  .day-card .timeline { margin: 0 1rem 0 2.4rem; padding: 1.75rem .25rem .1rem 1.875rem; }
  .timeline article::before { left: -2.25rem; }
  .packing { min-height: 37.5rem; }
}