/* Formal invitation only; styles.css retains the original wave-date ending. */
:root {
  --paper:#fff;
  --paper-ink:#111;
  --script:'sloop-script-pro','Snell Roundhand',serif;
  --entry-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --page-space:clamp(40px,6svh,72px);
}
/* Cosmetic password gate; retain its sliding, scrambling prompt. */
body.is-locked { overflow:hidden; background:#0b0b0c; }
.entry-gate { position:fixed; inset:0; height:100dvh; z-index:200; overflow:hidden; background:#0b0b0c; color:#fff; transition:opacity .35s ease; }
.entry-shell { position:relative; width:100%; height:100%; }
.entry-artwork { position:absolute; inset:0; animation:flower-arrive 1.4s cubic-bezier(.16,1,.3,1) both; }
.entry-image-crop { position:absolute; inset:0; overflow:hidden; }
.entry-image-crop img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1); }
.entry-copy { --entry-title-size:clamp(100px,14vw,210px); position:absolute; top:54%; left:50%; z-index:2; width:max-content; max-width:90vw; transform:translate(-50%,-50%); pointer-events:none; }
.entry-shell h1 { display:block; width:auto; margin:0; opacity:1; color:#fff; font:400 var(--entry-title-size)/.95 var(--script); letter-spacing:0; text-align:center; text-transform:none; white-space:nowrap; }
.entry-trigger { position:absolute; inset:0; z-index:3; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
.entry-trigger:focus-visible { outline:1px solid #fffc; outline-offset:-10px; }
.entry-meta { width:max-content; max-width:95%; margin:10px 5% 0 auto; }
.entry-subtitle { margin:0; color:#fff; font:400 clamp(11px,1.12vw,16px)/1.5 var(--entry-sans); letter-spacing:.01em; text-align:left; text-transform:uppercase; }
/* Let the wedding line set both rows' width; the password field must not widen it. */
.entry-controls { position:relative; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:10px; contain:inline-size; width:100%; height:46px; z-index:4; font:400 clamp(11px,1.12vw,16px)/1.5 var(--entry-sans); pointer-events:none; }
/* Reserve the final prompt width while its visible letters slide and scramble. */
.entry-controls::before { content:'Enter password'; visibility:hidden; text-transform:uppercase; }
.entry-prompt { position:absolute; left:100%; top:0; transform:translateX(-100%); display:flex; align-items:center; height:44px; width:max-content; white-space:nowrap; text-transform:uppercase; color:#f4f4f4; transition:left .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.entry-artwork.is-opening .entry-prompt { left:0; transform:translateX(0); }
.entry-form { position:relative; grid-column:2; contain:inline-size; min-width:0; pointer-events:auto; opacity:0; transition:opacity .3s ease; }
.entry-artwork.is-password-ready .entry-form { opacity:1; }
.entry-password-line { display:flex; align-items:center; min-height:44px; }
.entry-password-line input { display:block; width:100%; min-width:0; height:44px; padding:0 4px; border:0; outline:0; border-radius:0; background:transparent; color:#fff; caret-color:#fff; font:16px/1.4 var(--display); }
.entry-password-line button { flex:0 0 44px; height:44px; padding:0; border:0; background:transparent; color:#fff; font:24px/1 var(--display); text-align:right; cursor:pointer; }
.entry-password-line button:focus-visible { outline:1px solid #fffc; outline-offset:-2px; }
.entry-error { position:absolute; top:100%; right:0; width:max-content; max-width:280px; margin:6px 0 0; color:#fff; font:12px/1.5 var(--display); text-align:right; text-shadow:0 1px 4px #000; }
.entry-no-script { position:absolute; bottom:30px; width:100%; text-align:center; font:14px/1.5 var(--display); }
.entry-gate.is-leaving { opacity:0; pointer-events:none; }
.entry-gate[hidden],.entry-form[hidden],.entry-trigger[hidden],#invitation-content[hidden] { display:none; }
@keyframes flower-arrive { from { opacity:.65; transform:translateY(36px) scale(1.025); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Bounded stationery composition: all pieces scale from the same canvas. */
.invitation-scene { padding:clamp(32px,5svh,56px) 28px clamp(64px,9svh,88px); min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--paper-ink); background:#fff; }
.invitation-heading { width:min(100%,760px); position:relative; z-index:8; margin:0 0 16px; padding-right:36px; text-align:right; text-transform:uppercase; }
.invitation-names { margin:0; font:700 clamp(36px,4vw,54px)/.98 var(--display); letter-spacing:-.075em; }
.invitation-announcement { margin:8px 0 0; font:13px/1.4 var(--mono); letter-spacing:.02em; }
.stationery { width:min(100%,clamp(480px,calc((100svh - 344px) * 760 / 515),760px)); aspect-ratio:760/515; position:relative; margin:0 auto; container-type:inline-size; }
.envelope { width:56%; height:100%; position:absolute; left:2%; top:0; filter:drop-shadow(0 8px 12px #00000012); }
.envelope-black { position:absolute; z-index:1; inset:0 auto auto 0; width:100%; height:auto; }
.envelope-photo { position:absolute; z-index:5; width:96%; aspect-ratio:800/576; margin:0; top:10%; left:-2%; transform:rotate(-13deg); }
.envelope-snapshot { position:absolute; top:7%; left:6%; width:88%; height:86%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.02); }
.envelope-photo-border { position:absolute; inset:0; width:100%; height:100%; }
.invitation-card { position:absolute; z-index:6; width:43%; height:78%; right:3%; top:13%; padding:6% 4% 5%; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(8deg); background:#fafaf8; box-shadow:0 3px 12px #00000015; }
.card-date,.card-place { margin:0; font:12px/1.35 var(--mono); text-transform:uppercase; letter-spacing:-.02em; }
.invitation-card h2 { margin:12px -12px; font:400 clamp(40px,6.5cqw,54px)/1.03 var(--script); letter-spacing:0; text-align:center; }
.invitation-card h2:focus { outline:none; }
.card-place { text-align:right; }
.invitation-afterword { width:min(100%,760px); margin:24px auto 0; }
.invitation-afterword p { margin:0; font:14px/1.65 var(--mono); letter-spacing:-.025em; text-transform:uppercase; }
.invitation-afterword a { min-height:44px; display:inline-flex; align-items:center; gap:12px; margin-top:8px; font:600 14px/1.5 var(--mono); text-transform:uppercase; }
.motion-ready .envelope { opacity:0; translate:0 36px; transition:opacity .7s ease,translate 1s cubic-bezier(.22,1,.36,1); }
.motion-ready .envelope-photo { opacity:0; transform:translateY(90px) rotate(0deg) scale(.85); transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s,opacity .5s .3s; }
.motion-ready .invitation-card { opacity:0; transform:translate(-80px,110px) rotate(0deg) scale(.8); transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .5s,opacity .6s .5s; }
.motion-ready.is-open .envelope { opacity:1; translate:0 0; }
.motion-ready.is-open .envelope-photo { opacity:1; transform:rotate(-13deg); }
.motion-ready.is-open .invitation-card { opacity:1; transform:rotate(8deg); }

/* Updated Canva hierarchy: bold editorial headlines and restrained Sloop accents. */
.invitation-page { background:#fff; color:#111; }
.step-heading h2 { font:700 clamp(36px,4.1vw,58px)/.9 var(--display); letter-spacing:-.075em; text-transform:uppercase; }
.script-eyebrow { margin:0 0 8px 4px; font:400 clamp(36px,3.5vw,48px)/1 var(--script); }
.invitation-page a:focus-visible,.invitation-scene a:focus-visible,.faq-item summary:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.rsvp-button,.booking-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 24px; border-radius:999px; color:#111; font:13px/1.4 var(--mono); text-transform:uppercase; text-decoration:none; }
/* Clear, gradient-free glass. Interaction adds a soft neutral halo, not a colour wash. */
:is(.rsvp-button,.booking-button,.date-section .calendar-link) { --glass-fill:rgba(255,255,255,.08); --glass-border:rgba(17,17,17,.2); --glass-hover-border:rgba(17,17,17,.32); --glass-glow:rgba(30,30,30,.1); --glass-pressed:rgba(255,255,255,.2); --glass-highlight:rgba(255,255,255,.85); --glass-rest-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04); --glass-hover-shadow:inset 0 1px 0 var(--glass-highlight),0 0 18px var(--glass-glow),0 4px 12px rgba(0,0,0,.06); border:1px solid var(--glass-border); background:var(--glass-fill); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--glass-rest-shadow); transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease; }
.date-section .calendar-link { --glass-fill:rgba(255,255,255,.025); --glass-border:rgba(255,255,255,.3); --glass-hover-border:rgba(255,255,255,.65); --glass-glow:rgba(255,255,255,.18); --glass-pressed:rgba(255,255,255,.09); --glass-highlight:rgba(255,255,255,.3); }
@media(hover:hover) {
  :is(.rsvp-button,.booking-button,.calendar-link):hover { background:var(--glass-fill); border-color:var(--glass-hover-border); box-shadow:var(--glass-hover-shadow); }
}
:is(.rsvp-button,.booking-button,.calendar-link):focus-visible { background:var(--glass-fill); border-color:var(--glass-hover-border); box-shadow:var(--glass-hover-shadow); outline:2px solid currentColor; outline-offset:4px; }
:is(.rsvp-button,.booking-button,.calendar-link):active,.calendar-link[aria-expanded="true"] { background-color:var(--glass-pressed); box-shadow:inset 0 1px 4px rgba(0,0,0,.12),inset 0 1px 0 var(--glass-highlight); }
.rsvp-section { min-height:100vh; min-height:100dvh; display:grid; align-items:center; padding:var(--page-space) clamp(24px,5vw,72px); }
.rsvp-layout { width:100%; max-width:1240px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,1.4fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(24px,2.5vw,40px); row-gap:24px; align-items:start; }
.rsvp-heading { grid-column:1; grid-row:1; }
.rsvp-heading h2 { font-size:clamp(32px,3.6vw,52px); }
.rsvp-card { grid-column:2; grid-row:1/3; align-self:center; min-height:570px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:#f8f8f5; box-shadow:0 1px 9px #0002; text-align:center; }
.rsvp-card-intro { margin:0; font:13px/1.2 var(--mono); text-transform:uppercase; }
.rsvp-card-center { padding:48px 0; }
.rsvp-by { margin:0 0 16px; font:700 18px/1.2 var(--display); letter-spacing:-.045em; text-transform:uppercase; }
.rsvp-deadline { margin:0 0 24px; font:400 clamp(48px,5.9vw,82px)/1.04 var(--script); }
.rsvp-deadline span { display:block; white-space:nowrap; }
.rsvp-card-bottom { display:flex; justify-content:space-between; gap:20px; font:12px/1.4 var(--mono); text-transform:uppercase; text-align:left; }
.rsvp-card-bottom p { margin:0; }
.rsvp-card-bottom p:last-child { text-align:right; }
.memory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.memory-grid-left { grid-column:1; grid-row:2; padding-top:20px; padding-bottom:52px; }
.memory-grid-right { grid-column:3; grid-row:1/3; align-self:center; padding-top:48px; padding-bottom:40px; }
.memory-grid img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1); }
.memory-grid .memory-brighter { filter:grayscale(1) brightness(1.2); }
.memory-grid .memory-waves { filter:grayscale(1) brightness(1.27); }
.memory-crop { aspect-ratio:3/4; overflow:hidden; }
.memory-grid .memory-palms img { height:100%; aspect-ratio:auto; object-position:left top; transform:scale(1.95); transform-origin:center top; filter:grayscale(1) brightness(1.3) contrast(1.2); }
.memory-grid-left > :nth-child(odd) { transform:translateY(52px); }
.memory-grid-right > :nth-child(even) { transform:translateY(40px); }
.memory-grid > :nth-child(2) { --reveal-delay:.1s; }
.memory-grid > :nth-child(3) { --reveal-delay:.16s; }
.memory-grid > :nth-child(4) { --reveal-delay:.22s; }
.travel-section { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; }
.travel-heading { grid-column:2; grid-row:1; margin:50px 0 0; padding:0 clamp(30px,4vw,68px); }
.travel-heading h2 span { display:block; }
.booking-button-mobile { display:none; }
.travel-panel { grid-column:1; grid-row:1/3; display:grid; place-items:center; padding:56px clamp(24px,6vw,92px); background:#215469 url('media/ocean-shore.jpg') center/cover no-repeat; }
.travel-note { width:min(100%,680px); padding:36px 28px; background:rgba(248,248,245,.95); color:#111; }
.travel-note h3 { margin:0 0 16px; font:700 19px/1.15 var(--display); letter-spacing:-.055em; text-transform:uppercase; }
.travel-note p { margin:0; font:14px/1.55 var(--mono); }
.travel-note p+p { margin-top:14px; }
.travel-note-part+.travel-note-part { margin-top:28px; }
.travel-note a:not(.booking-button),.faq-answer a { text-decoration:underline; text-underline-offset:3px; }
.travel-note .booking-button { margin-top:28px; }
.travel-memory { grid-column:2; grid-row:2; width:min(52.9%,333.5px); margin:24px 18% 52px auto; }
.travel-memory img { display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; filter:grayscale(1); }
.couple-portraits { position:relative; display:grid; place-items:center; padding:clamp(64px,11vw,160px) 28px; }
.portrait-backdrops { position:absolute; z-index:0; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.portrait-backdrops span:first-child { background:#111 url('media/water-texture.jpg') center/cover; }
.portrait-backdrops span:last-child { background:#aaa url('media/ocean-surf.jpg') center/cover; filter:grayscale(1); }
/* Keep only the portraits above the page's grain (100), below menus and the entry gate. */
.portrait-pair { position:relative; z-index:101; display:grid; grid-template-columns:1fr 1fr; width:min(54%,720px); }
.couple-portraits figure { width:100%; margin:0; }
.couple-portraits img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.portrait-kai { --reveal-delay:.14s; }
.faq-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr); gap:32px; align-items:center; padding:var(--page-space) max(28px,calc((100vw - 1100px)/2)); }
.ari-introduction .step-heading { width:80%; margin:0 auto 20px; text-align:right; }
.ari-tagline { margin:10px 0 0; font:12px/1.5 var(--mono); text-transform:uppercase; }
.ari-photo { width:80%; margin:0 auto; padding:16px; background:#f5f5f2; box-shadow:0 1px 3px #0003; transform:rotate(-1deg); }
.ari-photo-crop { aspect-ratio:1.1; overflow:hidden; }
.ari-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 65%; transform:scale(1.15); transform-origin:center; filter:none; }
.faq-panel { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,4vw,56px); background:#f8f8f5; }
.faq-item { border-bottom:1px solid #1112; }
.faq-item summary { list-style:none; display:flex; gap:14px; align-items:baseline; cursor:pointer; min-height:60px; padding:18px 0; font:16px/1.5 var(--mono); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::before { content:'+'; flex:0 0 12px; font:20px/1 var(--display); }
.faq-item[open] summary::before { content:'−'; }
.faq-answer { padding:0 0 20px 26px; font:14px/1.7 var(--mono); }
.faq-answer p { margin:0; }
.faq-contact { margin:40px 0 0; font:12px/1.7 var(--mono); }
.faq-contact a { display:inline-flex; align-items:center; gap:12px; min-height:44px; text-transform:uppercase; text-decoration:underline; text-underline-offset:5px; }
/* The opening copy joins the stationery with a smaller, gently staggered rise. */
.invitation-heading { --reveal-rise:14px; --reveal-delay:.15s; }
.invitation-afterword { --reveal-rise:14px; --reveal-delay:.45s; }
.reveal-ready { opacity:0; translate:0 var(--reveal-rise,26px); transition:opacity .85s ease var(--reveal-delay,0s),translate 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s); }
.reveal-ready.is-revealed,.reveal-ready:focus-within { opacity:1; translate:0 0; }
.invitation-afterword.reveal-ready:focus-within { transition-delay:0s; }
.calendar-link,.calendar-options a { min-height:44px; }
/* Smaller visible pills, with a full-height touch target and a shared horizontal row. */
.date-section .date-actions { flex-direction:row; flex-wrap:nowrap; gap:8px; min-height:44px; }
.date-section .calendar-menu { display:flex; }
.date-section .calendar-link { position:relative; display:inline-flex; align-items:center; justify-content:center; column-gap:.73em; min-height:39.6px; padding:7.2px 9.9px; font-size:10.8px; white-space:nowrap; }
.date-section .calendar-link span { margin-left:4.5px; font-size:10.8px; }
.date-section .calendar-link::after { content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.calendar-options { z-index:110; }
.calendar-options a { display:flex; align-items:center; }

/* Fit the desktop compositions to laptop height without shrinking the reading copy. */
@media(min-width:901px) {
  .rsvp-layout { max-width:min(1240px,145svh); }
}
@media(min-width:1100px) {
  .travel-section { min-height:100svh; grid-template-columns:3fr 2fr; grid-template-rows:auto 1fr; }
  .travel-panel { padding:var(--page-space) clamp(28px,2.5vw,44px); }
  .travel-note { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; padding:20px 28px; }
  .travel-note-part:first-child { grid-column:1/-1; }
  .travel-note-part+.travel-note-part { margin-top:0; }
  .travel-note h3 { margin-bottom:12px; }
  .travel-note .booking-button { justify-self:start; grid-column:1/-1; margin-top:0; }
  .travel-heading { margin-top:var(--page-space); padding-inline:clamp(28px,3vw,48px); }
  .travel-memory { align-self:start; width:min(66%,333.5px,calc((100svh - 350px) * 2 / 3)); margin:24px auto var(--page-space); }
}

/* At tablet widths the collage becomes a card followed by a compact contact sheet. */
@media(max-width:900px) {
  .rsvp-layout { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:620px; }
  .rsvp-heading { grid-column:1/-1; grid-row:auto; order:0; margin-bottom:12px; }
  .rsvp-heading h2 { font-size:clamp(38px,6vw,52px); }
  .rsvp-card { grid-column:1/-1; grid-row:auto; order:1; width:100%; min-height:510px; margin-bottom:16px; }
  .rsvp-deadline { font-size:clamp(60px,10vw,86px); }
  .memory-grid { display:contents; }
  .memory-grid > img,.memory-grid > .memory-crop { order:2; transform:none!important; }
  .travel-panel { padding:44px 28px; }
  .travel-note { padding:28px 22px; }
  .travel-memory { width:74.75%; margin-right:10%; }
  .faq-section { gap:28px; }
  .faq-panel { padding:28px; }
}
@media(max-width:700px) {
  .entry-copy { --entry-title-size:clamp(58px,18.5vw,120px); top:51%; max-width:90vw; }
  .entry-meta { margin-top:8px; margin-right:4%; }
  .entry-subtitle { font-size:10px; letter-spacing:0; }
  .entry-controls { font-size:11px; }
  .invitation-scene { min-height:0; padding:54px 26px 64px; }
  .invitation-heading { max-width:440px; padding-right:0; margin-bottom:26px; }
  .invitation-names { font-size:clamp(34px,9.4vw,50px); }
  .invitation-announcement { font-size:11px; }
  .stationery { width:min(100%,440px); aspect-ratio:340/455; }
  .envelope { width:77%; left:3%; }
  .envelope-photo { top:6%; }
  .invitation-card { width:70%; height:61%; right:2%; top:36%; padding:8% 6%; transform:rotate(5deg); }
  .invitation-card h2 { font-size:clamp(35px,11cqw,49px); line-height:1.02; margin:10px -8px; }
  .card-date,.card-place { font-size:11px; }
  .invitation-afterword { width:min(100%,440px); margin:30px auto 0; }
  .invitation-afterword p { font-size:12px; line-height:1.7; }
  .invitation-afterword a { font-size:12px; }
  .motion-ready .invitation-card { transform:translateY(36px) rotate(0deg); }
  .motion-ready.is-open .invitation-card { transform:rotate(5deg); }
  .rsvp-section { padding:52px 26px 64px; }
  .rsvp-layout { gap:12px; }
  .rsvp-card { min-height:440px; padding:24px 20px; }
  .rsvp-card-intro { font-size:12px; }
  .rsvp-card-center { padding:44px 0; }
  .rsvp-deadline { font-size:clamp(51px,14.4vw,76px); }
  .rsvp-by { font-size:16px; }
  .rsvp-card-bottom { font-size:10px; gap:12px; }
  .script-eyebrow { font-size:38px; }
  .step-heading h2 { font-size:clamp(36px,10vw,50px); }
  .travel-section { display:flex; flex-direction:column; }
  .travel-heading { margin:0; padding:8px 28px 32px; }
  .travel-heading h2 { font-size:clamp(28px,8vw,40px); line-height:1; white-space:nowrap; }
  .travel-heading h2 span { display:inline; }
  .booking-button-mobile { display:inline-flex; margin-top:18px; }
  .travel-panel { padding:42px 26px; }
  .travel-note { width:min(100%,440px); padding:28px 24px; }
  .travel-note h3 { font-size:18px; }
  .travel-note p { font-size:14px; }
  .travel-memory { width:min(70.15%,322px); margin:42px auto; }
  .portrait-pair { width:min(90%,520px); }
  .couple-portraits { padding:64px 22px; }
  .faq-section { grid-template-columns:1fr; padding:60px 26px; gap:32px; }
  .ari-introduction { width:min(100%,420px); margin:auto; }
  .ari-photo { padding:11.2px; }
  .faq-panel { width:min(100%,500px); margin:auto; padding:12px 24px 24px; }
  .faq-item summary { font-size:14px; }
  .faq-answer { padding-left:0; font-size:14px; }
  .faq-contact { margin-top:28px; }
  .calendar-options a { justify-content:center; }
}
@media(max-height:480px) {
  .entry-copy { --entry-title-size:clamp(62px,14vh,100px); top:48%; }
  .entry-subtitle { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .entry-artwork { animation:none; }
  .entry-gate,.entry-prompt,.entry-form { transition:none; }
  :is(.rsvp-button,.booking-button,.calendar-link) { transition:none; }
  .motion-ready .envelope,.motion-ready .envelope-photo,.motion-ready .invitation-card { transition:none; }
  .reveal-ready { opacity:1; translate:0 0; transition:none; }
}