:root {
  --burgundy: #691728;
  --burgundy-deep: #4a101d;
  --wine: #7b2a3a;
  --rose: #bd7a82;
  --rose-light: #e8c6c3;
  --blush: #ead4ce;
  --ivory: #f7efe7;
  --paper: #fbf6f0;
  --ink: #32141a;
  --muted: #80585d;
  --line: rgba(105, 23, 40, 0.28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --script: "Italianno", "Brush Script MT", cursive;
  --display: "Bodoni Moda", Didot, Georgia, serif;
  --hand: "Italianno", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body.menu-open { overflow: hidden; }
body.invitation-locked { overflow: hidden; }
body.portal-open { overflow-x: hidden; overflow-y: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.paper-grain { position: fixed; z-index: 50; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }

.site-bar { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 28px 42px; color: var(--burgundy); letter-spacing: .25em; transition: opacity .45s ease .75s; }
body.invitation-locked .site-bar { opacity: 0; pointer-events: none; }
.menu-toggle { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .25em; }
.menu-lines { display: grid; gap: 6px; width: 26px; }
.menu-lines i { display: block; height: 1px; width: 26px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.bar-date { text-decoration: none; font-family: var(--serif); font-size: 17px; letter-spacing: .2em; }
.menu-backdrop { position: fixed; z-index: 35; inset: 0; background: rgba(34, 8, 14, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.site-menu { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(420px, 90vw); padding: 102px 52px 42px; background: var(--ivory); transform: translateX(-105%); transition: transform .4s cubic-bezier(.22, .7, .25, 1); box-shadow: 18px 0 60px rgba(38, 7, 14, .2); }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open .site-menu { transform: translateX(0); }
.menu-close { position: absolute; top: 21px; right: 26px; border: 0; background: transparent; color: var(--burgundy); font-family: var(--serif); font-size: 42px; line-height: 1; cursor: pointer; }
.menu-kicker, .menu-footer { color: var(--rose); font-size: 11px; font-weight: 600; letter-spacing: .26em; }
.site-menu nav { margin: 48px 0; }
.site-menu nav a { display: flex; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--burgundy); text-decoration: none; font-family: var(--serif); font-size: clamp(27px, 4vw, 38px); }
.site-menu nav a span { align-self: center; font-family: var(--sans); font-size: 10px; letter-spacing: .18em; }
.menu-footer { position: absolute; bottom: 42px; margin: 0; }

.hero { position: fixed; z-index: 8; inset: 0; display: flex; min-height: 100svh; height: 100svh; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: var(--burgundy); background: linear-gradient(145deg, var(--paper) 0%, var(--ivory) 45%, #efd9d6 100%); transform-origin: 50% 0; perspective: 1400px; }
.hero::before { position: absolute; z-index: 0; inset: 0; background-image: radial-gradient(rgba(105,23,40,.1) .5px, transparent .5px); background-size: 5px 5px; opacity: .12; content: ""; }
body.invitation-open .hero { animation: invitationReveal .7s cubic-bezier(.72, 0, .22, 1) 1.65s forwards; pointer-events: none; }
.cover-intro { position: relative; z-index: 2; margin-bottom: clamp(45px, 7vh, 72px); text-align: center; }
.cover-intro p { margin: 0 0 11px; color: var(--burgundy); font-family: var(--serif); font-size: clamp(16px, 1.8vw, 22px); font-weight: 500; letter-spacing: .22em; }
.cover-intro h1 { margin: 0; color: var(--burgundy-deep); font-family: var(--script); font-size: clamp(68px, 8.5vw, 108px); font-style: normal; font-weight: 400; line-height: 1.1; letter-spacing: normal; text-transform: none; white-space: nowrap; }
.cover-intro h1 i { color: var(--rose); font-family: var(--serif); font-size: .65em; font-style: italic; font-weight: 400; }
.cover-intro small { display: block; margin-top: 18px; color: var(--muted); font-family: var(--serif); font-size: clamp(10px, 1.2vw, 13px); letter-spacing: .25em; }
.envelope-object { position: relative; z-index: 3; display: block; width: min(700px, 88vw); aspect-ratio: 1.62; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 22px 30px rgba(40,5,13,.3)); transition: transform .25s ease; isolation: isolate; }
.envelope-image { position: absolute; z-index: 6; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* Animate clipped copies of the original photograph; the closed artwork is unchanged. */
.envelope-interior, .envelope-letter, .envelope-front, .envelope-moving-flap { position: absolute; pointer-events: none; visibility: hidden; }
.envelope-front, .envelope-moving-flap { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.envelope-interior { z-index: 1; inset: 6.6% 5% 8%; border-radius: 3px; background: #491322 url("assets/envelope-closed.png") center 12% / 150% 500%; box-shadow: inset 0 20px 35px #260812; }
.envelope-letter { z-index: 2; inset: 14% 10% 13%; display: block; background: #fff; box-shadow: 0 3px 15px #26081255; }
/* Reuse the photographed sun from the original gold seal. */
.letter-sun { position: absolute; top: 18%; left: 50%; width: 18%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: url("assets/envelope-closed.png") 49.27% 61.74% / 821.05% 530.53% no-repeat; }
.envelope-front { z-index: 3; clip-path: polygon(0 0, 5.099% 6.6%, 7.965% 20%, 10.831% 24%, 41.402% 59%, 42.357% 66%, 45.223% 70%, 50.000% 73%, 53.821% 71%, 57.643% 65%, 57.643% 58%, 90.124% 23%, 93.946% 18%, 95.379% 6.6%, 97.767% 0, 97.767% 100%, 0 100%); }
.envelope-moving-flap { z-index: 4; clip-path: polygon(5.099% 6.6%, 95.379% 6.6%, 93.946% 18%, 90.124% 23%, 57.643% 58%, 57.643% 65%, 53.821% 71%, 50.000% 73%, 45.223% 70%, 42.357% 66%, 41.402% 59%, 10.831% 24%, 7.965% 20%); transform-origin: 50% 6.6%; }
body.invitation-open .envelope-object { transform: none; perspective: 1100px; }
body.invitation-open .envelope-image { visibility: hidden; }
body.invitation-open .envelope-interior, body.invitation-open .envelope-letter, body.invitation-open .envelope-front, body.invitation-open .envelope-moving-flap { visibility: visible; }
body.invitation-open .envelope-moving-flap { animation: liftOriginalFlap 1.1s cubic-bezier(.4,0,.2,1) .12s both; }
body.invitation-open .cover-intro, body.invitation-open .open-hint { animation: fadeCoverCopy .3s ease forwards; }
@keyframes liftOriginalFlap { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(170deg); filter: brightness(.75); } }
@keyframes fadeCoverCopy { to { opacity: 0; } }
.envelope-object::before, .envelope-object::after { display: none; }
.envelope-object:hover, .envelope-object:focus-visible { transform: translateY(-5px) scale(1.01); outline: none; }
.envelope-back { display: none; }
.envelope-side { display: none; }
.envelope-side-left { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.envelope-side-right { right: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); background: linear-gradient(215deg, #68192d, #4d1020); }
.envelope-flap { display: none; }
.seal-medallion { display: none; }
.seal-medallion::before { position: absolute; inset: 12%; border: 1px solid rgba(96,54,12,.55); border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,227,148,.18); content: ""; }
.seal-sun { position: relative; z-index: 1; display: block; width: 31%; height: 31%; border: 1px solid rgba(91,49,9,.78); border-radius: 50%; }
.seal-sun::before { position: absolute; inset: -12px; background: repeating-conic-gradient(from 0deg, rgba(91,49,9,.75) 0deg 1deg, transparent 1deg 24deg); content: ""; -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 16px 19px, transparent 20px); mask: radial-gradient(circle, transparent 0 15px, #000 16px 19px, transparent 20px); }
.open-hint { position: relative; z-index: 3; margin: clamp(34px, 6vh, 64px) 0 0; color: var(--burgundy); text-align: center; font-family: var(--serif); font-size: clamp(15px, 2vw, 21px); font-style: italic; letter-spacing: .08em; }
body.invitation-open .envelope-flap { animation: openFlap .7s cubic-bezier(.4,0,.2,1) forwards; }
body.invitation-open .seal-medallion { animation: breakSeal .45s ease forwards; }
@keyframes breakSeal { to { opacity: 0; transform: translate(-50%, -50%) rotate(18deg) scale(.35); } }
@keyframes openFlap { 0% { transform: rotateX(0); } 100% { transform: rotateX(178deg); opacity: .12; } }
@keyframes invitationReveal { from { transform: translateY(0); } to { transform: translateY(-105%); } }

.portal { position: relative; height: 100svh; min-height: 660px; overflow: hidden; background: var(--paper); }
.portal-view { position: absolute; inset: 0; display: none; }
.portal-view.is-active { display: block; animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.portal-title { position: absolute; z-index: 5; top: calc(5.5% + 24px); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.portal-title p { margin: 0 0 7px; color: var(--burgundy); font-size: 9px; font-weight: 600; letter-spacing: .38em; }
.portal-title h2 { margin: 0; color: var(--burgundy-deep); font-family: var(--script); font-size: clamp(56px, 7vw, 88px); font-weight: 400; line-height: .78; }
.portal-title h2 i { color: var(--rose); font-family: var(--serif); font-size: .65em; }
.portal .portal-film { position: absolute; z-index: 3; top: 18%; left: 8%; width: 185px; padding: 15px 28px; transform: rotate(-2deg); }
.portal .portal-film .film-frames { gap: 7px; }
.portal .portal-film .film-frame { width: 129px; height: 93px; border-width: 3px; }
.portal-polaroid { position: absolute; z-index: 2; width: 210px; margin: 0; padding: 12px 12px 38px; background: #fffdf9; box-shadow: 0 12px 28px rgba(74,16,29,.18); }
.portal-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.portal-polaroid figcaption { margin-top: 8px; color: var(--rose); text-align: center; font-family: var(--script); font-size: 26px; }
.polaroid-one { top: 22%; right: 8%; transform: rotate(6deg); }
.polaroid-two { right: 24%; bottom: 9%; width: 185px; transform: rotate(-7deg); }
.portal-spot { position: absolute; z-index: 4; display: flex; width: 170px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 44% 56% 63% 37% / 55% 42% 58% 45%; cursor: pointer; transition: transform .2s ease; }
.portal-spot:hover, .portal-spot:focus-visible { transform: scale(1.06) rotate(0); outline: none; }
.portal-spot span { font-family: var(--script); font-size: 48px; line-height: .8; }
.portal-spot small { margin-top: 12px; font-size: 7px; font-weight: 600; letter-spacing: .22em; }
.spot-details { top: 24%; left: 34%; color: #fff7f0; background: var(--burgundy); transform: rotate(3deg); }
.spot-rsvp { top: 51%; right: 11%; width: 145px; color: var(--burgundy-deep); background: var(--rose-light); transform: rotate(-5deg); }
.spot-gifts { bottom: 13%; left: 27%; width: 155px; border: 1px solid var(--line); color: var(--burgundy); background: var(--ivory); transform: rotate(5deg); }
.portal-castle { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 22%; overflow: hidden; }
.portal-castle::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,16,29,.05), rgba(74,16,29,.48)); content: ""; }
.portal-castle img { width: 100%; height: 100%; object-fit: cover; object-position: center 61%; filter: saturate(.85); }
.portal-castle span { position: absolute; z-index: 1; right: 28px; bottom: 18px; color: #fff8f1; font-size: 8px; font-weight: 600; letter-spacing: .25em; }
.portal-page { padding: max(100px, 12vh) max(8vw, 28px) 60px; color: var(--ink); background: var(--ivory); text-align: center; overflow-y: auto; }
.portal-page.is-active { display: block; }
.page-back { position: absolute; top: 28px; left: 28px; border: 0; color: var(--burgundy); background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .2em; }
.page-kicker { margin: 0; color: var(--rose); font-size: 9px; font-weight: 600; letter-spacing: .3em; }
.portal-page h2 { margin: 8px 0 38px; color: var(--burgundy-deep); font-family: var(--script); font-size: clamp(76px, 11vw, 128px); font-weight: 400; line-height: .78; }
[data-view="gifts"] h2 { margin-bottom: 18px; }
.gift-illustration { display: block; width: clamp(180px, 22vw, 240px); height: auto; margin: 0 auto 22px; }
.page-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 800px; margin: 0 auto; text-align: left; }
.page-columns b { color: var(--burgundy); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .18em; }
.page-columns p, .gift-copy { color: #644047; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.gift-copy { max-width: 620px; margin: 0 auto; font-size: 23px; }
.gift-fund-link { display: inline-block; max-width: 100%; margin-top: 30px; padding: 17px 25px; background: var(--burgundy); color: var(--ivory); font-family: var(--serif); font-size: 19px; line-height: 1.35; text-decoration: none; }
.gift-fund-link:hover { background: var(--burgundy-deep); }
.gift-fund-link:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 5px; }
.portal-rsvp { display: grid; gap: 14px; max-width: 580px; margin: 0 auto; text-align: left; }
.portal-rsvp label { color: var(--burgundy); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portal-rsvp input, .portal-rsvp select, .portal-rsvp textarea { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.45); font-size: 15px; text-transform: none; }
.portal-rsvp button { justify-self: center; margin-top: 8px; padding: 14px 22px; border: 0; color: #fff; background: var(--burgundy); cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.portal-form-status { margin: 0; color: var(--wine); text-align: center; font-family: var(--serif); }
.portal-rsvp .rsvp-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-rsvp > label, .portal-rsvp .rsvp-name-fields label { font-size: 12px; }
.portal-rsvp fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-rsvp legend { margin-bottom: 9px; color: var(--burgundy); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portal-rsvp .rsvp-presence { display: grid; gap: 9px; }
.portal-rsvp .rsvp-presence label { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.38); cursor: pointer; }
.portal-rsvp .rsvp-presence input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--burgundy); }
.portal-rsvp .rsvp-presence span { color: var(--ink); font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-transform: none; }
@media (max-width: 520px) { .portal-rsvp .rsvp-name-fields { grid-template-columns: 1fr; } }
.weekend, .programme, .infos, .rsvp, .detail-panel { display: none !important; }

.section-cream { background: var(--ivory); }
.section-blush { background: var(--blush); }
.weekend { display: grid; grid-template-columns: minmax(390px, .95fr) minmax(420px, 1.05fr); min-height: 100svh; overflow: hidden; }
.castle-banner { position: relative; grid-column: 1 / -1; height: clamp(340px, 62vw, 720px); margin: 0; overflow: hidden; background: var(--burgundy-deep); }
.castle-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 57%; filter: saturate(.86) contrast(1.04) brightness(1.03); }
.castle-banner::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42,9,17,.58)); content: ""; }
.castle-banner figcaption { position: absolute; z-index: 1; right: clamp(22px, 5vw, 70px); bottom: clamp(24px, 5vw, 58px); color: #fff8f0; font-family: var(--serif); font-size: clamp(20px, 3vw, 36px); font-style: italic; }
.castle-banner figcaption span { display: block; margin-bottom: 7px; color: #e8b1b3; text-align: right; font-family: var(--sans); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .3em; }
.detail-launchers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 5vw, 70px); padding: clamp(70px, 10vw, 130px) max(7vw, 24px); background: var(--paper); }
.detail-blob { justify-self: center; display: flex; width: min(260px, 24vw); aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 42% 58% 63% 37% / 48% 38% 62% 52%; cursor: pointer; transform: rotate(-3deg); transition: transform .25s ease, box-shadow .25s ease; }
.detail-blob:nth-child(2) { border-radius: 58% 42% 39% 61% / 43% 62% 38% 57%; transform: rotate(4deg); }
.detail-blob:nth-child(3) { border-radius: 39% 61% 55% 45% / 61% 41% 59% 39%; transform: rotate(-5deg); }
.detail-blob:hover, .detail-blob:focus-visible { transform: rotate(0) translateY(-7px); box-shadow: 0 18px 34px rgba(74,16,29,.18); outline: none; }
.detail-blob span { font-family: var(--script); font-size: clamp(39px, 5vw, 65px); line-height: .8; }
.detail-blob small { margin-top: 17px; font-size: 8px; font-weight: 600; letter-spacing: .25em; }
.blob-wine { color: #fff7f0; background: var(--burgundy); }
.blob-wine small { color: #e9b5b7; }
.blob-rose { color: var(--burgundy-deep); background: var(--rose-light); }
.blob-ivory { border: 1px solid var(--line); color: var(--burgundy); background: var(--ivory); }
.detail-panel { width: min(620px, calc(100vw - 34px)); max-height: calc(100svh - 34px); padding: clamp(45px, 8vw, 85px); border: 0; color: var(--ink); background: var(--ivory); text-align: center; box-shadow: 0 26px 80px rgba(44,8,16,.35); }
.detail-panel::backdrop { background: rgba(48,9,18,.72); backdrop-filter: blur(5px); }
.panel-close { position: absolute; top: 14px; right: 20px; border: 0; color: var(--burgundy); background: transparent; cursor: pointer; font-family: var(--serif); font-size: 39px; }
.panel-kicker { margin: 0 0 9px; color: var(--rose); font-size: 9px; font-weight: 600; letter-spacing: .28em; }
.detail-panel h2 { margin: 0; color: var(--burgundy-deep); font-family: var(--script); font-size: clamp(61px, 9vw, 92px); font-weight: 400; line-height: .9; }
.panel-rule { width: 72px; margin: 24px auto; border-top: 1px solid var(--rose); }
.detail-panel p:not(.panel-kicker) { color: #644047; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.detail-panel a { display: inline-block; margin-top: 18px; padding: 14px 20px; color: #fff8f1; background: var(--burgundy); text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.film-area { position: relative; display: flex; align-items: center; justify-content: center; min-height: 745px; padding: 70px 30px 78px; background: #f3e7de; }
.film-area::before { position: absolute; top: 12%; left: 7%; width: 160px; height: 420px; border-left: 1px solid rgba(189, 122, 130, .5); content: ""; transform: rotate(9deg); }
.film-area::after { position: absolute; right: 9%; bottom: 10%; width: 180px; height: 240px; border: 1px solid rgba(189, 122, 130, .3); border-radius: 50%; content: ""; transform: rotate(-26deg); }
.film-label { position: absolute; top: 46px; left: 9%; z-index: 2; color: var(--burgundy); font-size: 10px; font-weight: 600; letter-spacing: .2em; line-height: 1.7; }
.film-label span { color: var(--rose); }
.filmstrip { position: relative; z-index: 1; width: 270px; padding: 24px 45px; background: #1b1718; box-shadow: 0 20px 44px rgba(67, 12, 22, .18); transform: rotate(-2deg); }
.film-frames { display: grid; gap: 11px; }
.film-frame { width: 180px; height: 137px; margin: 0; overflow: hidden; background: #0e0d0d; border: 4px solid #0e0d0d; }
.film-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.film-frame:nth-child(1) img { object-position: 55% 42%; }
.film-frame:nth-child(2) img { object-position: 51% 67%; }
.film-frame:nth-child(3) img { object-position: 52% 43%; }
.film-frame:nth-child(4) img { object-position: 50% 39%; }
.perforations { position: absolute; top: 10px; bottom: 10px; width: 28px; background: repeating-linear-gradient(to bottom, var(--ivory) 0 13px, transparent 13px 24px, var(--ivory) 24px 37px, transparent 37px 48px); background-size: 100% 48px; opacity: .98; }
.perforations-left { left: 7px; }
.perforations-right { right: 7px; }
.film-code { position: absolute; color: rgba(247, 239, 231, .55); font-family: var(--sans); font-size: 8px; letter-spacing: .14em; writing-mode: vertical-rl; }
.film-code-top { top: 49px; left: 18px; }
.film-code-bottom { right: 18px; bottom: 48px; transform: rotate(180deg); }
.portal .portal-film .perforations { top: 7px; bottom: 7px; width: 15px; background: repeating-linear-gradient(to bottom, var(--ivory) 0 9px, transparent 9px 17px, var(--ivory) 17px 26px, transparent 26px 34px); background-size: 100% 34px; opacity: .96; }
.portal .portal-film .perforations-left { left: 5px; }
.portal .portal-film .perforations-right { right: 5px; }
.portal .portal-film .film-code { z-index: 2; color: rgba(247,239,231,.7); font-size: 5px; letter-spacing: .12em; }
.portal .portal-film .film-code-top { top: 42px; left: 10px; }
.portal .portal-film .film-code-bottom { right: 10px; bottom: 42px; }
.weekend-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84px clamp(40px, 8vw, 120px); text-align: center; }
.sun-mark { position: relative; display: block; width: 63px; height: 63px; margin: 0 0 20px; border: 1px solid var(--rose); border-radius: 50%; }
.sun-mark::before { position: absolute; inset: -16px; background: repeating-conic-gradient(from 0deg, var(--rose) 0deg 1deg, transparent 1deg 15deg); content: ""; -webkit-mask: radial-gradient(circle, transparent 0 35px, #000 36px 39px, transparent 40px); mask: radial-gradient(circle, transparent 0 35px, #000 36px 39px, transparent 40px); }
.weekend-copy .section-kicker, .infos .section-kicker, .section-heading .section-kicker { color: var(--wine); }
.weekend-copy h2, .section-heading h2, .rsvp h2 { margin: 5px 0 0; font-family: var(--serif); font-size: clamp(49px, 6vw, 78px); font-weight: 500; letter-spacing: .08em; line-height: .95; }
.script-line { margin: 13px 0 14px; color: var(--wine); font-family: var(--script); font-size: clamp(58px, 6vw, 79px); line-height: .68; }
.ornament-rule, .heading-line { position: relative; display: block; width: 88px; height: 18px; }
.ornament-rule::before, .ornament-rule::after { position: absolute; top: 9px; width: 35px; border-top: 1px solid var(--rose); content: ""; }
.ornament-rule::before { left: 0; }
.ornament-rule::after { right: 0; }
.ornament-rule i { position: absolute; top: 7px; left: 41px; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }
.intro-text { max-width: 410px; margin: 16px auto 0; color: #5c363b; font-family: var(--serif); font-size: 21px; line-height: 1.45; }
.fountain-drawing { width: min(520px, 100%); margin-top: 32px; color: #9b5e68; }

.programme { padding: 90px clamp(25px, 7vw, 110px) 105px; }
.section-heading { text-align: center; }
.section-heading h2 { color: var(--burgundy-deep); font-size: clamp(42px, 5vw, 63px); }
.heading-line { margin: 20px auto 50px; }
.heading-line::before { position: absolute; top: 9px; left: 8px; width: 72px; border-top: 1px solid var(--rose); content: ""; }
.heading-line::after { position: absolute; top: 6px; left: 43px; width: 7px; height: 7px; border-radius: 50%; background: var(--wine); content: ""; }
.programme-layout { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: clamp(25px, 5vw, 85px); max-width: 1120px; margin: 0 auto; }
.program-day { min-width: 0; }
.day-label { margin: 0 0 34px; color: var(--burgundy); text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .24em; }
.day-label span { color: var(--wine); }
.event-list { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.event-list::before { position: absolute; top: 11px; bottom: 15px; left: 83px; border-left: 1px solid var(--rose); content: ""; }
.event { position: relative; display: grid; grid-template-columns: 67px 33px 1fr; gap: 0; min-height: 71px; }
.event time { padding-top: 3px; color: var(--burgundy); text-align: right; font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.event-dot { z-index: 1; justify-self: center; width: 8px; height: 8px; margin-top: 8px; border: 2px solid var(--blush); border-radius: 50%; background: var(--burgundy); box-shadow: 0 0 0 3px var(--rose); }
.event h3 { margin: 0; color: var(--burgundy-deep); font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .12em; line-height: 1.15; }
.event p { margin: 7px 0 0; color: #68464b; font-size: 13px; line-height: 1.55; }
.programme-seal { align-self: center; justify-self: center; display: flex; width: 112px; height: 112px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--rose); border-radius: 50%; color: var(--burgundy); font-family: var(--serif); font-size: 30px; transform: rotate(-8deg); }
.programme-seal i { margin: -6px -3px; color: var(--wine); font-size: 21px; }
.programme-seal small { margin-top: 8px; color: var(--rose); font-family: var(--sans); font-size: 8px; letter-spacing: .28em; }
.sunday-day .event-list { margin-top: 85px; }
.sunday-day .event-list::before { top: 11px; bottom: auto; height: 64px; }
.sunday-note { margin: 42px 0 0 100px; color: #86565c; font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.35; }

.infos { padding: 95px clamp(25px, 7vw, 110px) 105px; }
.infos-heading h2 { color: var(--burgundy-deep); }
.place-feature { display: grid; grid-template-columns: minmax(330px, 1fr) minmax(310px, .82fr); max-width: 1120px; min-height: 375px; margin: 0 auto 30px; background: #f0dfd8; }
.place-image-wrap { position: relative; min-height: 375px; overflow: hidden; }
.place-image-wrap::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgba(42, 9, 17, .2)); content: ""; }
.place-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.image-stamp { position: absolute; z-index: 1; top: 22px; left: 24px; display: grid; width: 64px; height: 64px; place-content: center; border: 1px solid rgba(255, 247, 240, .8); color: #fff; text-align: center; font-size: 8px; letter-spacing: .14em; }
.image-stamp b { margin-top: 3px; color: #e1a0a2; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.place-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 52px clamp(35px, 5vw, 75px); }
.card-kicker { margin: 0 0 13px; color: var(--rose); font-size: 10px; font-weight: 600; letter-spacing: .23em; }
.place-copy h3 { margin: 0 0 18px; color: var(--burgundy-deep); font-family: var(--serif); font-size: clamp(38px, 5vw, 58px); font-weight: 500; line-height: .82; letter-spacing: .08em; }
.place-copy h3 em { color: var(--wine); font-size: .78em; font-style: italic; letter-spacing: .02em; }
.place-copy p:not(.card-kicker) { max-width: 390px; margin: 0; color: #633b41; font-family: var(--serif); font-size: 18px; line-height: 1.4; }
.text-link, .card-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--burgundy); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.text-link span, .card-link span, .stay-links span { color: var(--rose); font-size: 16px; }
.text-link:hover, .card-link:hover, .stay-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.info-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; max-width: 1120px; margin: 0 auto; }
.info-card { position: relative; min-height: 315px; padding: 30px 29px 26px; border: 1px solid rgba(105, 23, 40, .25); background: rgba(255, 255, 255, .3); overflow: hidden; }
.info-card::after { position: absolute; right: -48px; bottom: -52px; width: 130px; height: 130px; border: 1px solid rgba(189, 122, 130, .4); border-radius: 50%; content: ""; }
.info-card-burgundy { color: #fff5ef; border-color: var(--burgundy); background: var(--burgundy); }
.info-card-burgundy .card-kicker, .info-card-burgundy .card-number { color: #e5a2a4; }
.info-card-burgundy h3 { color: #fff5ef; }
.info-card-burgundy p:not(.card-kicker):not(.card-note) { color: #f2d4d0; }
.card-number { display: block; margin-bottom: 34px; color: var(--rose); font-family: var(--serif); font-size: 31px; line-height: 1; }
.info-card h3 { margin: 0 0 15px; color: var(--burgundy-deep); font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: .14em; }
.info-card p:not(.card-kicker):not(.card-note) { position: relative; z-index: 1; margin: 0; color: #603c42; font-size: 13px; line-height: 1.7; }
.card-note { position: relative; z-index: 1; margin: 17px 0 0; color: #e6b4b4; font-size: 11px; letter-spacing: .08em; }
.card-link { position: absolute; z-index: 1; bottom: 25px; left: 29px; color: var(--burgundy); }
.info-card-burgundy .card-link { color: #fff7ef; }
.stay-links { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 18px; }
.stay-links a { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(105, 23, 40, .2); color: var(--burgundy); text-decoration: none; font-family: var(--serif); font-size: 16px; }
.dress-swatches { display: flex; gap: 8px; margin-top: 35px; }
.dress-swatches i { display: block; width: 25px; height: 25px; border-radius: 50%; }
.dress-swatches i:nth-child(1) { background: var(--burgundy); }
.dress-swatches i:nth-child(2) { background: var(--rose); }
.dress-swatches i:nth-child(3) { background: #f7efe7; border: 1px solid var(--rose); }
.access-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; max-width: 1120px; margin: 30px auto 0; padding: 23px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-icon { color: var(--rose); font-family: var(--serif); font-size: 38px; }
.access-note b { color: var(--burgundy); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.access-note p { margin: 4px 0 0; color: #6c454a; font-size: 12px; line-height: 1.5; }
.access-note a { color: var(--burgundy); text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .13em; white-space: nowrap; }
.access-note a:hover { text-decoration: underline; text-underline-offset: 4px; }

.rsvp { padding: 102px 25px 110px; color: #fff8f1; background: var(--burgundy); text-align: center; }
.rsvp-inner { max-width: 820px; margin: 0 auto; }
.rsvp .section-kicker { color: #e3a0a3; }
.rsvp h2 { margin-top: 7px; color: #fff8f1; font-size: clamp(57px, 8vw, 94px); letter-spacing: .13em; }
.rsvp-lead { margin: 14px auto 34px; color: #f2d4d1; font-family: var(--serif); font-size: 22px; }
.rsvp form { text-align: left; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rsvp label { display: block; margin: 0 0 18px; color: #f7dcd7; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.rsvp input, .rsvp select, .rsvp textarea { display: block; width: 100%; margin-top: 8px; padding: 14px 13px; border: 1px solid rgba(255, 242, 235, .42); border-radius: 0; outline: none; color: #fff; background: rgba(255, 255, 255, .06); font-size: 14px; letter-spacing: 0; text-transform: none; transition: border-color .2s ease, background .2s ease; }
.rsvp select option { color: var(--ink); }
.rsvp textarea { resize: vertical; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { border-color: #f1b5b4; background: rgba(255, 255, 255, .12); }
.submit-button { display: block; margin: 8px auto 0; padding: 15px 22px; border: 0; color: var(--burgundy); background: var(--ivory); cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .15em; transition: background .2s ease, transform .2s ease; }
.submit-button span { margin-left: 8px; color: var(--rose); font-size: 17px; }
.submit-button:hover, .submit-button:focus-visible { background: #fff; transform: translateY(-2px); }
.form-status { max-width: 620px; margin: 24px auto 0; color: #f0c9c8; text-align: center; font-size: 11px; line-height: 1.5; }
.form-status.is-success { color: #fff4dc; }
.site-footer { padding: 22px 15px 28px; color: #f3d5d1; background: var(--burgundy-deep); text-align: center; }
.site-footer p { margin: 0; font-family: var(--serif); font-size: 18px; letter-spacing: .28em; }
.site-footer p span { color: #df989c; }
.site-footer small { display: block; margin-top: 7px; color: #ca777e; font-size: 9px; letter-spacing: .25em; }
.site-footer b { display: block; margin-top: 14px; color: #df989c; font-family: var(--serif); font-size: 18px; font-weight: 400; }

@media (max-width: 900px) {
  .site-bar { padding: 22px 24px; }
  .hero { height: 820px; }
  .weekend { grid-template-columns: 1fr; }
  .film-area { min-height: 650px; }
  .weekend-copy { min-height: 610px; }
  .programme-layout { gap: 25px; }
  .programme-seal { width: 90px; height: 90px; font-size: 24px; }
  .place-feature { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-card:first-child { grid-column: span 2; min-height: 270px; }
}

@media (max-width: 650px) {
  .site-bar { padding: 18px 19px; }
  .menu-toggle { gap: 10px; font-size: 10px; }
  .menu-lines, .menu-lines i { width: 22px; }
  .bar-date { font-size: 14px; }
  .site-menu { width: 88vw; padding: 93px 32px 35px; }
  .site-menu nav { margin: 35px 0; }
  .site-menu nav a { padding: 14px 0; font-size: 29px; }
  .hero { min-height: 690px; height: 100svh; max-height: 820px; }
  .cover-intro { max-width: 92vw; margin-bottom: 48px; }
  .cover-intro p { margin-bottom: 16px; font-size: 14px; line-height: 1.6; letter-spacing: .16em; }
  .cover-intro h1 { font-size: clamp(54px, 16vw, 76px); letter-spacing: normal; }
  .cover-intro small { margin-top: 14px; font-size: 9px; letter-spacing: .2em; }
  .envelope-object { width: 92vw; }
  .open-hint { max-width: 90vw; margin-top: 43px; font-size: 17px; line-height: 1.2; }
  .portal { min-height: 620px; }
  .portal-title { top: calc(4% + 24px); }
  .portal-title h2 { font-size: 51px; }
  .portal .portal-film { top: 15%; left: 5%; width: 126px; padding: 10px 19px; }
  .portal .portal-film .film-frame { width: 88px; height: 64px; }
  .portal .portal-film .perforations { top: 5px; bottom: 5px; width: 10px; background: repeating-linear-gradient(to bottom, var(--ivory) 0 6px, transparent 6px 12px, var(--ivory) 12px 18px, transparent 18px 24px); background-size: 100% 24px; }
  .portal .portal-film .perforations-left { left: 4px; }
  .portal .portal-film .perforations-right { right: 4px; }
  .portal .portal-film .film-code { font-size: 4px; }
  .portal .portal-film .film-code-top { top: 30px; left: 7px; }
  .portal .portal-film .film-code-bottom { right: 7px; bottom: 30px; }
  .portal-polaroid { width: 122px; padding: 7px 7px 24px; }
  .portal-polaroid figcaption { font-size: 18px; }
  .polaroid-one { top: 17%; right: 4%; }
  .polaroid-two { right: 7%; bottom: 20%; width: 116px; }
  .portal-spot { width: 112px; }
  .portal-spot span { font-size: 32px; }
  .spot-details { top: 34%; left: 35%; }
  .spot-rsvp { top: 51%; right: 5%; width: 100px; }
  .spot-gifts { bottom: 21%; left: 15%; width: 108px; }
  .portal-castle { height: 18%; }
  .portal-castle span { right: 12px; bottom: 10px; font-size: 6px; }
  .portal-page { padding: 90px 24px 35px; }
  .page-columns { grid-template-columns: 1fr; gap: 20px; }
  .portal-page h2 { margin-bottom: 30px; font-size: 72px; }
  .film-area { min-height: 620px; padding: 90px 18px 60px; }
  .film-label { top: 35px; left: 8%; font-size: 9px; }
  .filmstrip { width: 242px; padding: 21px 39px; }
  .film-frame { width: 164px; height: 125px; }
  .film-code { font-size: 7px; }
  .weekend-copy { min-height: 580px; padding: 73px 25px 70px; }
  .weekend-copy h2 { font-size: 48px; }
  .script-line { font-size: 59px; }
  .intro-text { font-size: 19px; }
  .fountain-drawing { margin-top: 24px; }
  .castle-banner { height: 390px; }
  .castle-banner img { object-position: center 56%; }
  .detail-launchers { grid-template-columns: 1fr; gap: 35px; padding: 70px 22px 82px; }
  .detail-blob { width: min(245px, 68vw); }
  .programme { padding: 72px 20px 78px; }
  .section-heading h2 { font-size: 40px; }
  .heading-line { margin-bottom: 37px; }
  .programme-layout { display: block; }
  .programme-seal { margin: 45px auto 42px; }
  .day-label { font-size: 12px; letter-spacing: .18em; }
  .event-list::before { left: 74px; }
  .event { grid-template-columns: 58px 33px 1fr; }
  .event time { font-size: 14px; }
  .event h3 { font-size: 15px; letter-spacing: .09em; }
  .event p { font-size: 12px; }
  .sunday-day .event-list { margin-top: 0; }
  .sunday-note { margin: 35px 0 0 91px; font-size: 16px; }
  .infos { padding: 76px 18px 78px; }
  .place-feature { display: block; }
  .place-image-wrap { min-height: 270px; }
  .place-copy { padding: 40px 30px 44px; }
  .place-copy h3 { font-size: 46px; }
  .info-grid { display: block; }
  .info-card, .info-card:first-child { min-height: 290px; margin-bottom: 15px; }
  .access-note { grid-template-columns: auto 1fr; gap: 12px 18px; padding: 20px 5px; }
  .access-note a { grid-column: 2; }
  .rsvp { padding: 78px 21px 86px; }
  .rsvp-lead { font-size: 20px; line-height: 1.35; }
  .form-grid { display: block; }
  .site-footer p { font-size: 15px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Landscape arrival: all text stays in the open central sky. */
.castle-arrival { position: relative; background: var(--paper); }
.castle-arrival-layout { position: relative; width: 100%; }
.castle-arrival-photo { position: relative; width: 100%; margin: 0; isolation: isolate; }
.castle-arrival-photo img { display: block; width: 100%; height: auto; }
 .castle-arrival-photo figcaption { position: absolute; z-index: 2; inset: 0; color: var(--burgundy-deep); text-align: center; }
.castle-arrival-photo figcaption p { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); margin: 0; font-family: var(--display); font-size: clamp(17px, 2.7vw, 36px); font-weight: 400; letter-spacing: .12em; line-height: 1.2; white-space: nowrap; }
.castle-arrival-photo h2 { position: absolute; top: 24%; left: 48%; transform: translateX(-50%); width: 28%; margin: 0; font-family: var(--display); font-size: clamp(15px, 3vw, 42px); font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: .025em; }
.castle-arrival-photo h2 span { display: block; margin: .3em 0; font-family: var(--serif); font-style: italic; font-size: .65em; letter-spacing: .02em; }
.castle-continue { position: absolute; z-index: 3; bottom: clamp(10px, 2vw, 28px); left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(247,239,231,.8); border-radius: 50%; color: var(--ivory); background: rgba(54,30,26,.4); backdrop-filter: blur(3px); text-decoration: none; transition: background .2s ease; }
.castle-continue:hover { background: var(--burgundy); }
.castle-continue:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.portal { scroll-margin-top: 0; }

/* A complete arrival screen, unlocked by the chevron. */
body.castle-pending { overflow: hidden; }
body.castle-pending .site-bar,
body.castle-pending .portal,
body.castle-pending .site-footer { display: none; }
.castle-arrival { height: var(--arrival-height, 100svh); background: repeating-linear-gradient(90deg, var(--rose-light) 0 18px, var(--burgundy) 18px 36px); overflow: hidden; }
.castle-arrival-layout { height: 100%; display: flex; align-items: center; justify-content: center; }
.castle-arrival-photo { width: min(100%, calc((var(--arrival-height, 100svh) - 40px) * 1426 / 1103)); flex: none; border: 0; container-type: inline-size; }
.castle-arrival-photo figcaption p { font-size: clamp(17px, 2.7cqw, 36px); }
.castle-arrival-photo h2 { font-size: clamp(15px, 3cqw, 42px); }
.castle-continue { bottom: max(24px, env(safe-area-inset-bottom)); background: var(--burgundy-deep); }
body.castle-pending .castle-continue { position: fixed; bottom: auto; top: calc(var(--arrival-height, 100svh) - 80px); }

/* Three original colour photographs and a pink RSVP envelope. */
.portal { height: max(1100px, 100svh); }
.portal-title { top: 55px; }
.portal .portal-film { top: 180px; }
.portal-polaroid { padding: 10px 10px 12px; }
.portal-polaroid img { display: block; height: auto; aspect-ratio: auto; object-fit: contain; }
.polaroid-one { top: 180px; right: 10%; width: 210px; }
.polaroid-two { top: 540px; left: 36%; right: auto; bottom: auto; width: 210px; }
.polaroid-three { top: 830px; right: 10%; width: 230px; transform: rotate(5deg); }
.spot-details { top: 235px; left: 40%; }
.spot-gifts { top: 845px; bottom: auto; left: 40%; }
.rsvp-envelope { position: absolute; z-index: 4; top: 590px; right: 9%; width: 220px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: rotate(4deg); transition: transform .2s ease; }
.rsvp-envelope img { display: block; width: 100%; height: auto; }
.rsvp-envelope span { position: absolute; top: 29%; left: 0; width: 100%; color: var(--burgundy-deep); font-family: var(--display); font-size: 24px; letter-spacing: .08em; text-align: center; }
.rsvp-envelope:hover { transform: rotate(0deg) translateY(-4px); }
.rsvp-envelope:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 6px; }
@media (max-width: 650px) {
 .portal { height: 1040px; }
 .portal-title { top: 52px; }
 .portal .portal-film { top: 155px; }
 .portal-polaroid { padding: 7px 7px 9px; }
 .polaroid-one { top: 155px; right: 6%; width: 34%; max-width: 160px; }
 .spot-details { top: 400px; left: auto; right: 8%; }
 .polaroid-two { top: 550px; left: 7%; right: auto; bottom: auto; width: 36%; max-width: 165px; }
 .rsvp-envelope { top: 575px; right: 5%; width: 40%; max-width: 185px; }
 .rsvp-envelope span { font-size: 20px; }
 .polaroid-three { top: 820px; right: 7%; width: 40%; max-width: 180px; }
 .spot-gifts { top: 830px; bottom: auto; left: 7%; }
}

@media (min-width: 651px) and (max-width: 1000px) {
 .polaroid-one, .polaroid-two { width: 175px; }
 .polaroid-three { width: 190px; right: 7%; }
 .spot-details { width: 135px; }
 .rsvp-envelope { width: 175px; right: 5%; }
 .spot-gifts { left: 35%; width: 135px; }
}

/* Invitation copy and grouped stationery controls. */
.portal-title { width: min(90%, 650px); white-space: normal; }
.portal-title p { max-width: 420px; margin: 0 auto 16px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: .025em; }
.portal-title h2 { white-space: nowrap; }
.spot-details { left: auto; right: calc(10% + 225px); top: 250px; width: 165px; aspect-ratio: 1.1; border-radius: 50% 50% 10px 10px; transform: rotate(-5deg); }
.spot-gifts { left: auto; right: calc(10% + 245px); top: 855px; width: 175px; aspect-ratio: 1.25; border: 0; border-radius: 0; clip-path: polygon(8% 0,92% 0,92% 8%,100% 8%,100% 92%,92% 92%,92% 100%,8% 100%,8% 92%,0 92%,0 8%,8% 8%); background: var(--rose-light); transform: rotate(5deg); }
.portal-spot small { font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.polaroid-two { left: auto; right: calc(8% + 305px); top: 560px; }
.rsvp-envelope { top: 565px; right: 8%; width: 300px; transform: rotate(-3deg); }
.rsvp-envelope .rsvp-envelope-copy { top: 21%; left: 0; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 4px; }
.rsvp-envelope-copy b { font-family: var(--display); font-size: 36px; font-weight: 400; line-height: 1.15; letter-spacing: .025em; }
.rsvp-envelope-copy small { font-family: var(--serif); font-size: 16px; line-height: 1.2; letter-spacing: .08em; }
@media (max-width: 650px) {
 .portal-title p { max-width: 300px; font-size: 17px; margin-bottom: 14px; }
 .portal .portal-film { top: 170px; }
 .polaroid-one { top: 170px; }
 .spot-details { top: calc(190px + min(34vw, 160px) * 1.3333); right: 5%; left: auto; width: 125px; }
 .spot-details span, .spot-gifts span { font-size: 35px; }
 .portal-spot small { font-size: 12px; }
 .polaroid-two { top: 560px; left: 5%; right: auto; width: 35%; }
 .rsvp-envelope { top: 580px; right: 2%; width: 54%; max-width: 250px; }
 .rsvp-envelope-copy b { font-size: clamp(26px, 7vw, 34px); }
 .rsvp-envelope-copy small { font-size: 13px; }
 .spot-gifts { top: 840px; right: calc(7% + min(40vw, 180px) + 8px); left: auto; width: 125px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .spot-details { right: calc(10% + 185px); width: 145px; }
 .polaroid-two { top: 650px; right: calc(5% + 275px); }
 .rsvp-envelope { top: 655px; right: 5%; width: 260px; }
 .spot-gifts { right: calc(7% + 205px); width: 155px; }
}

/* Scalloped medallion, oval label, and a single centred RSVP. */
.spot-details { aspect-ratio: 1; border-radius: 0; clip-path: polygon(100.00% 50.00%,99.77% 51.96%,99.08% 53.86%,98.02% 55.68%,96.65% 57.39%,95.12% 58.97%,93.53% 60.45%,92.01% 61.85%,90.67% 63.21%,89.59% 64.60%,88.80% 66.07%,88.32% 67.67%,88.10% 69.41%,88.08% 71.33%,88.17% 73.39%,88.25% 75.56%,88.21% 77.76%,87.97% 79.93%,87.44% 81.98%,86.57% 83.81%,85.36% 85.36%,83.81% 86.57%,81.98% 87.44%,79.93% 87.97%,77.76% 88.21%,75.56% 88.25%,73.39% 88.17%,71.33% 88.08%,69.41% 88.10%,67.67% 88.32%,66.07% 88.80%,64.60% 89.59%,63.21% 90.67%,61.85% 92.01%,60.45% 93.53%,58.97% 95.12%,57.39% 96.65%,55.68% 98.02%,53.86% 99.08%,51.96% 99.77%,50.00% 100.00%,48.04% 99.77%,46.14% 99.08%,44.32% 98.02%,42.61% 96.65%,41.03% 95.12%,39.55% 93.53%,38.15% 92.01%,36.79% 90.67%,35.40% 89.59%,33.93% 88.80%,32.33% 88.32%,30.59% 88.10%,28.67% 88.08%,26.61% 88.17%,24.44% 88.25%,22.24% 88.21%,20.07% 87.97%,18.02% 87.44%,16.19% 86.57%,14.64% 85.36%,13.43% 83.81%,12.56% 81.98%,12.03% 79.93%,11.79% 77.76%,11.75% 75.56%,11.83% 73.39%,11.92% 71.33%,11.90% 69.41%,11.68% 67.67%,11.20% 66.07%,10.41% 64.60%,9.33% 63.21%,7.99% 61.85%,6.47% 60.45%,4.88% 58.97%,3.35% 57.39%,1.98% 55.68%,0.92% 53.86%,0.23% 51.96%,0.00% 50.00%,0.23% 48.04%,0.92% 46.14%,1.98% 44.32%,3.35% 42.61%,4.88% 41.03%,6.47% 39.55%,7.99% 38.15%,9.33% 36.79%,10.41% 35.40%,11.20% 33.93%,11.68% 32.33%,11.90% 30.59%,11.92% 28.67%,11.83% 26.61%,11.75% 24.44%,11.79% 22.24%,12.03% 20.07%,12.56% 18.02%,13.43% 16.19%,14.64% 14.64%,16.19% 13.43%,18.02% 12.56%,20.07% 12.03%,22.24% 11.79%,24.44% 11.75%,26.61% 11.83%,28.67% 11.92%,30.59% 11.90%,32.33% 11.68%,33.93% 11.20%,35.40% 10.41%,36.79% 9.33%,38.15% 7.99%,39.55% 6.47%,41.03% 4.88%,42.61% 3.35%,44.32% 1.98%,46.14% 0.92%,48.04% 0.23%,50.00% 0.00%,51.96% 0.23%,53.86% 0.92%,55.68% 1.98%,57.39% 3.35%,58.97% 4.88%,60.45% 6.47%,61.85% 7.99%,63.21% 9.33%,64.60% 10.41%,66.07% 11.20%,67.67% 11.68%,69.41% 11.90%,71.33% 11.92%,73.39% 11.83%,75.56% 11.75%,77.76% 11.79%,79.93% 12.03%,81.98% 12.56%,83.81% 13.43%,85.36% 14.64%,86.57% 16.19%,87.44% 18.02%,87.97% 20.07%,88.21% 22.24%,88.25% 24.44%,88.17% 26.61%,88.08% 28.67%,88.10% 30.59%,88.32% 32.33%,88.80% 33.93%,89.59% 35.40%,90.67% 36.79%,92.01% 38.15%,93.53% 39.55%,95.12% 41.03%,96.65% 42.61%,98.02% 44.32%,99.08% 46.14%,99.77% 48.04%); }
.spot-gifts { aspect-ratio: 1.25; border-radius: 50%; clip-path: none; }
.rsvp-envelope .rsvp-envelope-copy { top: 30%; transform: translateY(-50%); gap: 0; }

/* A looser scrapbook arrangement, keeping faces and controls clear. */
.polaroid-one { transform: rotate(10deg); right: 8%; }
.polaroid-two { transform: rotate(-11deg); top: 535px; }
.polaroid-three { transform: rotate(9deg); top: 810px; right: 8%; }
.spot-details { transform: rotate(-12deg); top: 325px; right: calc(8% + 205px); }
.spot-gifts { transform: rotate(-9deg); top: 905px; right: calc(8% + 215px); }
.rsvp-envelope { top: 585px; transform: rotate(7deg); }
@media (max-width: 650px) {
 .polaroid-one { right: 7%; top: 180px; }
 .polaroid-two { left: 6%; top: 545px; }
 .polaroid-three { right: 7%; top: 805px; }
 .spot-details { top: calc(213px + min(34vw, 160px) * 1.3333); right: 10%; }
 .rsvp-envelope { right: 3%; top: 610px; transform: rotate(8deg); }
 .spot-gifts { top: 920px; right: auto; left: 9%; transform: rotate(-12deg); }
 .portal { height: 1090px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .spot-details { right: calc(8% + 185px); top: 330px; }
 .polaroid-two { top: 620px; }
 .rsvp-envelope { top: 680px; }
 .spot-gifts { right: calc(8% + 195px); top: 915px; }
}

/* RSVP copy contained in the flap, burgundy rounded-diamond gift label. */
.rsvp-envelope { container-type: inline-size; }
.rsvp-envelope .rsvp-envelope-copy { top: 28%; gap: 3px; }
.rsvp-envelope-copy b { font-size: clamp(22px, 11cqw, 34px); line-height: 1; }
.rsvp-envelope-copy small { font-size: clamp(12px, 4.6cqw, 14px); line-height: 1.1; letter-spacing: .045em; }
.spot-gifts { border-radius: 0; background: var(--burgundy); color: var(--ivory); clip-path: polygon(100.00% 50.00%,99.91% 50.98%,99.64% 52.46%,99.18% 54.21%,98.55% 56.16%,97.74% 58.25%,96.76% 60.45%,95.62% 62.73%,94.32% 65.07%,92.87% 67.45%,91.27% 69.84%,89.55% 72.24%,87.69% 74.62%,85.73% 76.96%,83.66% 79.26%,81.50% 81.50%,79.26% 83.66%,76.96% 85.73%,74.62% 87.69%,72.24% 89.55%,69.84% 91.27%,67.45% 92.87%,65.07% 94.32%,62.73% 95.62%,60.45% 96.76%,58.25% 97.74%,56.16% 98.55%,54.21% 99.18%,52.46% 99.64%,50.98% 99.91%,50.00% 100.00%,49.02% 99.91%,47.54% 99.64%,45.79% 99.18%,43.84% 98.55%,41.75% 97.74%,39.55% 96.76%,37.27% 95.62%,34.93% 94.32%,32.55% 92.87%,30.16% 91.27%,27.76% 89.55%,25.38% 87.69%,23.04% 85.73%,20.74% 83.66%,18.50% 81.50%,16.34% 79.26%,14.27% 76.96%,12.31% 74.62%,10.45% 72.24%,8.73% 69.84%,7.13% 67.45%,5.68% 65.07%,4.38% 62.73%,3.24% 60.45%,2.26% 58.25%,1.45% 56.16%,0.82% 54.21%,0.36% 52.46%,0.09% 50.98%,0.00% 50.00%,0.09% 49.02%,0.36% 47.54%,0.82% 45.79%,1.45% 43.84%,2.26% 41.75%,3.24% 39.55%,4.38% 37.27%,5.68% 34.93%,7.13% 32.55%,8.73% 30.16%,10.45% 27.76%,12.31% 25.38%,14.27% 23.04%,16.34% 20.74%,18.50% 18.50%,20.74% 16.34%,23.04% 14.27%,25.38% 12.31%,27.76% 10.45%,30.16% 8.73%,32.55% 7.13%,34.93% 5.68%,37.27% 4.38%,39.55% 3.24%,41.75% 2.26%,43.84% 1.45%,45.79% 0.82%,47.54% 0.36%,49.02% 0.09%,50.00% 0.00%,50.98% 0.09%,52.46% 0.36%,54.21% 0.82%,56.16% 1.45%,58.25% 2.26%,60.45% 3.24%,62.73% 4.38%,65.07% 5.68%,67.45% 7.13%,69.84% 8.73%,72.24% 10.45%,74.62% 12.31%,76.96% 14.27%,79.26% 16.34%,81.50% 18.50%,83.66% 20.74%,85.73% 23.04%,87.69% 25.38%,89.55% 27.76%,91.27% 30.16%,92.87% 32.55%,94.32% 34.93%,95.62% 37.27%,96.76% 39.55%,97.74% 41.75%,98.55% 43.84%,99.18% 45.79%,99.64% 47.54%,99.91% 49.02%); }

/* Compact asymmetric collage; gold sun echoes the opening seal. */
.portal { height: 910px; }
.portal-view[data-view="home"] { max-width: 960px; margin-inline: auto; }
.portal-title { top: 40px; }
.portal-title p { max-width: 460px; }
.portal .portal-film { top: 175px; }
.polaroid-one { top: 175px; right: 8%; }
.polaroid-two { top: 455px; transform: rotate(-7deg); }
.polaroid-three { top: 660px; right: 8%; }
.spot-details { top: 310px; right: calc(8% + 205px); aspect-ratio: 1; background: linear-gradient(135deg, #edcc80, #cda04f); color: var(--burgundy-deep); clip-path: polygon(50.00% 0.00%,55.09% 11.33%,62.94% 1.70%,64.92% 13.97%,75.00% 6.70%,73.74% 19.06%,85.36% 14.64%,80.94% 26.26%,93.30% 25.00%,86.03% 35.08%,98.30% 37.06%,88.67% 44.91%,100.00% 50.00%,88.67% 55.09%,98.30% 62.94%,86.03% 64.92%,93.30% 75.00%,80.94% 73.74%,85.36% 85.36%,73.74% 80.94%,75.00% 93.30%,64.92% 86.03%,62.94% 98.30%,55.09% 88.67%,50.00% 100.00%,44.91% 88.67%,37.06% 98.30%,35.08% 86.03%,25.00% 93.30%,26.26% 80.94%,14.64% 85.36%,19.06% 73.74%,6.70% 75.00%,13.97% 64.92%,1.70% 62.94%,11.33% 55.09%,0.00% 50.00%,11.33% 44.91%,1.70% 37.06%,13.97% 35.08%,6.70% 25.00%,19.06% 26.26%,14.64% 14.64%,26.26% 19.06%,25.00% 6.70%,35.08% 13.97%,37.06% 1.70%,44.91% 11.33%); transform: rotate(-8deg); }
.spot-gifts { top: 735px; right: calc(8% + 220px); aspect-ratio: 1; clip-path: polygon(100.00% 50.00%,99.77% 51.96%,99.08% 53.86%,98.02% 55.68%,96.65% 57.39%,95.12% 58.97%,93.53% 60.45%,92.01% 61.85%,90.67% 63.21%,89.59% 64.60%,88.80% 66.07%,88.32% 67.67%,88.10% 69.41%,88.08% 71.33%,88.17% 73.39%,88.25% 75.56%,88.21% 77.76%,87.97% 79.93%,87.44% 81.98%,86.57% 83.81%,85.36% 85.36%,83.81% 86.57%,81.98% 87.44%,79.93% 87.97%,77.76% 88.21%,75.56% 88.25%,73.39% 88.17%,71.33% 88.08%,69.41% 88.10%,67.67% 88.32%,66.07% 88.80%,64.60% 89.59%,63.21% 90.67%,61.85% 92.01%,60.45% 93.53%,58.97% 95.12%,57.39% 96.65%,55.68% 98.02%,53.86% 99.08%,51.96% 99.77%,50.00% 100.00%,48.04% 99.77%,46.14% 99.08%,44.32% 98.02%,42.61% 96.65%,41.03% 95.12%,39.55% 93.53%,38.15% 92.01%,36.79% 90.67%,35.40% 89.59%,33.93% 88.80%,32.33% 88.32%,30.59% 88.10%,28.67% 88.08%,26.61% 88.17%,24.44% 88.25%,22.24% 88.21%,20.07% 87.97%,18.02% 87.44%,16.19% 86.57%,14.64% 85.36%,13.43% 83.81%,12.56% 81.98%,12.03% 79.93%,11.79% 77.76%,11.75% 75.56%,11.83% 73.39%,11.92% 71.33%,11.90% 69.41%,11.68% 67.67%,11.20% 66.07%,10.41% 64.60%,9.33% 63.21%,7.99% 61.85%,6.47% 60.45%,4.88% 58.97%,3.35% 57.39%,1.98% 55.68%,0.92% 53.86%,0.23% 51.96%,0.00% 50.00%,0.23% 48.04%,0.92% 46.14%,1.98% 44.32%,3.35% 42.61%,4.88% 41.03%,6.47% 39.55%,7.99% 38.15%,9.33% 36.79%,10.41% 35.40%,11.20% 33.93%,11.68% 32.33%,11.90% 30.59%,11.92% 28.67%,11.83% 26.61%,11.75% 24.44%,11.79% 22.24%,12.03% 20.07%,12.56% 18.02%,13.43% 16.19%,14.64% 14.64%,16.19% 13.43%,18.02% 12.56%,20.07% 12.03%,22.24% 11.79%,24.44% 11.75%,26.61% 11.83%,28.67% 11.92%,30.59% 11.90%,32.33% 11.68%,33.93% 11.20%,35.40% 10.41%,36.79% 9.33%,38.15% 7.99%,39.55% 6.47%,41.03% 4.88%,42.61% 3.35%,44.32% 1.98%,46.14% 0.92%,48.04% 0.23%,50.00% 0.00%,51.96% 0.23%,53.86% 0.92%,55.68% 1.98%,57.39% 3.35%,58.97% 4.88%,60.45% 6.47%,61.85% 7.99%,63.21% 9.33%,64.60% 10.41%,66.07% 11.20%,67.67% 11.68%,69.41% 11.90%,71.33% 11.92%,73.39% 11.83%,75.56% 11.75%,77.76% 11.79%,79.93% 12.03%,81.98% 12.56%,83.81% 13.43%,85.36% 14.64%,86.57% 16.19%,87.44% 18.02%,87.97% 20.07%,88.21% 22.24%,88.25% 24.44%,88.17% 26.61%,88.08% 28.67%,88.10% 30.59%,88.32% 32.33%,88.80% 33.93%,89.59% 35.40%,90.67% 36.79%,92.01% 38.15%,93.53% 39.55%,95.12% 41.03%,96.65% 42.61%,98.02% 44.32%,99.08% 46.14%,99.77% 48.04%); background: var(--burgundy); color: var(--ivory); }
.rsvp-envelope { top: 515px; }
@media (max-width: 650px) {
 .portal { height: 885px; }
 .portal-title p { max-width: 310px; font-size: 17px; }
 .polaroid-one { top: 180px; right: 7%; }
 .polaroid-two { top: 500px; left: 5%; }
 .polaroid-three { top: 700px; right: 7%; }
 .spot-details { top: calc(227px + min(34vw, 160px) * 1.3333); right: 10%; width: 125px; }
 .spot-details span { font-size: 33px; }
 .spot-details small { font-size: 11px; letter-spacing: .03em; }
 .rsvp-envelope { top: 545px; right: 3%; }
 .spot-gifts { top: 745px; left: 16%; right: auto; width: 125px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .portal { height: 960px; }
 .polaroid-two { top: 590px; }
 .rsvp-envelope { top: 625px; }
 .polaroid-three { top: 765px; }
 .spot-details { top: 315px; right: calc(8% + 175px); }
 .spot-gifts { top: 790px; right: calc(8% + 190px); }
}

/* Fine burgundy sun from the supplied reference. */
.spot-details { background: transparent; clip-path: none; border: 0; color: var(--burgundy); transform: rotate(-5deg); }
.spot-details .details-sun { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.spot-details span { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); font-size: 24px; line-height: 1; }
.spot-details small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 3px 0 0; font-size: 11px; white-space: nowrap; letter-spacing: .035em; }
.spot-details:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 6px; }
@media (max-width: 650px) { .spot-details span { font-size: 19px; } }

/* Larger sun with a solid, readable central medallion. */
.spot-details { width: 245px; top: 285px; right: calc(8% + 185px); }
.spot-details::before { content: ""; position: absolute; z-index: 1; left: 49.1%; top: 48.4%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--burgundy); transform: translate(-50%, -50%); }
.spot-details .details-label { z-index: 2; left: 49.1%; top: 48.4%; width: 43%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ivory); }
.details-label b { font-family: var(--script); font-size: 36px; font-weight: 400; line-height: .95; }
.spot-details .details-label small { position: static; transform: none; margin: 0; font-family: var(--serif); font-size: 12px; line-height: 1.1; letter-spacing: .015em; }
@media (max-width: 650px) {
 .spot-details { width: 190px; top: calc(200px + min(34vw, 160px) * 1.3333); right: 5%; }
 .details-label b { font-size: 29px; }
 .spot-details .details-label small { font-size: 11px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .spot-details { width: 210px; right: calc(8% + 170px); }
 .details-label b { font-size: 32px; }
}

/* Longer separated rays, with room around the sun and grouped gifts. */
.portal { height: 1040px; }
.spot-details { --sun-disc: 114px; width: 300px; left: 32%; right: auto; top: 190px; transform: none; }
.spot-details::before { width: var(--sun-disc); }
.spot-details .details-label { width: var(--sun-disc); }
.spot-details .details-sun { mask-image: radial-gradient(circle at 49.1% 48.4%, transparent 0 calc(var(--sun-disc) / 2 + 9px), #000 calc(var(--sun-disc) / 2 + 10px)); -webkit-mask-image: radial-gradient(circle at 49.1% 48.4%, transparent 0 calc(var(--sun-disc) / 2 + 9px), #000 calc(var(--sun-disc) / 2 + 10px)); }
.polaroid-two { top: 550px; }
.rsvp-envelope { top: 585px; }
.polaroid-three { top: 780px; }
.spot-gifts { top: 790px; right: calc(8% + 212px); }
@media (max-width: 650px) {
 .portal { --after-sun: calc(235px + min(34vw, 160px) * 1.3333 + min(230px, 60vw) + 42px); height: calc(var(--after-sun) + 410px); }
 .spot-details { --sun-disc: 90px; width: min(230px, 60vw); top: calc(235px + min(34vw, 160px) * 1.3333); left: auto; right: 5%; }
 .polaroid-two { top: var(--after-sun); }
 .rsvp-envelope { top: calc(var(--after-sun) + 25px); }
 .polaroid-three { top: calc(var(--after-sun) + 220px); }
 .spot-gifts { top: calc(var(--after-sun) + 235px); left: 16%; right: auto; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .portal { height: 1190px; }
 .spot-details { --sun-disc: 98px; width: 260px; top: 465px; left: auto; right: 5%; }
 .polaroid-two { top: 750px; }
 .rsvp-envelope { top: 775px; }
 .polaroid-three { top: 970px; }
 .spot-gifts { top: 980px; right: calc(8% + 185px); }
}

/* Center the cover in the visible viewport and lift the diving Polaroid. */
.hero { height: var(--arrival-height, 100svh); min-height: 0; max-height: none; padding-bottom: clamp(24px, 5svh, 48px); }
.polaroid-two { top: 510px; }
@media (max-width: 650px) { .polaroid-two { top: calc(var(--after-sun) - 55px); } }
@media (min-width: 651px) and (max-width: 1000px) { .polaroid-two { top: 710px; } }

/* Enlarge the entire photobooth strip, preserving the approved photo crops. */
.portal .portal-film { left: 10%; transform: rotate(-6deg) scale(1.4); transform-origin: top left; }
@media (max-width: 650px) {
 .portal .portal-film { top: 155px; left: 10%; transform: rotate(-6deg) scale(1.38); }
}

/* Give the longer, left-leaning strip room beside the sun. */
@media (min-width: 1001px) { .spot-details { left: 40%; } }
@media (max-width: 1000px) { .spot-details { right: 1%; } }

/* Reverse the two tilts and extend the strip without stretching faces. */
.portal .portal-film { left: 5%; }
.portal .portal-film .film-frames { gap: 18px; }
.polaroid-one { transform: rotate(-8deg); }
@media (min-width: 1001px) {
 .spot-details { left: 38%; top: 210px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
 .spot-details { right: 3%; top: 500px; }
}
@media (max-width: 650px) {
 .portal .portal-film { left: 3%; }
 .portal { --after-sun: calc(650px + min(230px, 60vw) + 42px); }
 .spot-details { top: 650px; right: 5%; }
 .polaroid-two { top: var(--after-sun); }
}

/* Compact, staggered collage with a dedicated clear space for the sun. */
.portal { height: 1040px; }
.portal .portal-film { left: 0; top: 180px; transform: rotate(-1.5deg) scale(1.4); }
.polaroid-one { top: 185px; right: calc(6% + 8px); transform: rotate(2deg); }
.spot-details { top: 225px; left: 34%; right: auto; }
.polaroid-two { top: 575px; left: 34%; right: auto; transform: rotate(-9deg); }
.rsvp-envelope { top: 575px; right: 3%; transform: rotate(5deg); }
.polaroid-three { top: 805px; right: 10%; transform: rotate(-5deg); }
.spot-gifts { top: 815px; left: 37%; right: auto; transform: rotate(9deg); }
@media (min-width: 651px) and (max-width: 1000px) {
 .portal { height: 1110px; }
 .polaroid-one { right: calc(5% + 8px); }
 .spot-details { top: 480px; left: auto; right: 4%; width: 240px; }
 .polaroid-two { top: 810px; left: 4%; }
 .rsvp-envelope { top: 760px; right: 2%; }
 .polaroid-three { top: 935px; right: 4%; }
 .spot-gifts { top: 910px; left: 37%; }
}
@media (max-width: 650px) {
 .portal { height: 1060px; }
 .portal .portal-film { top: 175px; left: -4px; transform: rotate(-1.5deg) scale(1.38); }
 .polaroid-one { top: 190px; right: calc(4% + 6px); transform: rotate(2deg); }
 .spot-details { top: calc(245px + min(34vw, 160px) * 1.3333); left: auto; right: 1%; width: min(46vw, 230px); }
 .polaroid-two { top: 660px; left: 3%; right: auto; transform: rotate(-8deg); }
 .rsvp-envelope { top: 645px; right: 0; transform: rotate(5deg); }
 .polaroid-three { top: 850px; right: 7%; transform: rotate(-6deg); }
 .spot-gifts { top: 865px; left: 6%; right: auto; transform: rotate(10deg); }
}

/* Details only: the approved arrival and collage remain unchanged. */
.portal:has(.wedding-details.is-active) { height:auto; min-height:100svh; overflow:visible; }
.wedding-details.is-active { position:relative; inset:auto; overflow:visible; }
.wedding-details { padding:95px 24px 65px; }
.wedding-details header,.wedding-details section,.wedding-details nav { max-width:780px; margin-inline:auto; }
.wedding-details header>p:last-child { font:18px/1.6 var(--serif); max-width:440px; margin:22px auto; }
.wedding-details h2 { font-size:clamp(54px,9vw,90px); line-height:1.1; margin:12px 0 24px; }
.wedding-details h3 { font:500 21px/1.3 var(--serif); color:var(--burgundy); margin:8px 0; }
.wedding-details p { font-size:16px; line-height:1.7; }
.details-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px; padding:20px 0 34px; }
.wedding-details a { color:var(--burgundy); text-underline-offset:5px; }
.details-nav a { font-size:14px; }
.details-date { font:26px var(--serif)!important; color:var(--burgundy); }
.details-timeline { list-style:none; margin:24px auto 60px; padding:0; max-width:610px; }
.details-timeline li { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; min-height:210px; padding:20px 0; }
.details-timeline li::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rose); }
.details-timeline li::after { content:''; position:absolute; left:calc(50% - 4px); top:50%; width:9px; height:9px; border-radius:50%; background:var(--burgundy); }
.details-timeline li:nth-child(even) .fp-art { grid-column:2; grid-row:1; }
.details-timeline li:nth-child(even)>div { grid-column:1; grid-row:1; }
.details-timeline time { font:30px var(--serif); color:var(--burgundy); }
.fp-art { position:relative; display:block; overflow:hidden; width:100%; max-width:180px; justify-self:center; }
.fp-art img { position:absolute; height:auto; max-width:none; }
.details-timeline li:last-child { margin-top:25px; }
.details-practical { border-top:1px solid var(--rose); padding:45px 0; }
.details-locations,.details-transport { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.details-locations>div { padding:20px 14px; background:var(--rose-light); }
.details-transport { margin-top:20px; }
.details-transport>div { display:grid; gap:28px; align-content:start; }
.details-transport p { margin:0; }
.details-stay { background:var(--burgundy); color:var(--ivory); padding:35px 24px 40px; }
.wedding-details .details-stay h2,.wedding-details .details-stay a,.details-stay .page-kicker { color:var(--ivory); }
.details-stay p { max-width:480px; margin-inline:auto; }
.details-link { display:inline-block; padding:14px 20px; border:1px solid currentColor; background:transparent; color:var(--burgundy); font:15px var(--serif); cursor:pointer; margin:15px 0; }
.details-dress { padding:48px 0 24px; }
@media(max-width:650px) {
 .wedding-details { padding:85px 20px 40px; }
 .details-timeline li { gap:26px; min-height:205px; }
 .wedding-details h3 { font-size:18px; }
 .details-timeline p { font-size:14px; line-height:1.5; }
 .details-locations,.details-transport { grid-template-columns:1fr; gap:14px; }
 .details-transport,.details-transport>div { gap:20px; }
 .details-timeline .fp-art { max-width:145px; }
}

.wedding-details .details-date { display:flex; align-items:center; justify-content:center; gap:18px; }
.wedding-details .details-date::before,.wedding-details .details-date::after { content:''; width:48px; height:1px; background:var(--rose); }
.wedding-details .details-timeline { margin-bottom:25px; }
.details-sunday li:first-child .fp-art { grid-column:2; grid-row:1; }
.details-sunday li:first-child>div { grid-column:1; grid-row:1; }
.wedding-details .details-sunday { margin-bottom:60px; }

/* Warm the programme artwork into the invitation paper. */
.wedding-details .fp-art { background: transparent; }
.wedding-details .fp-art img { filter: sepia(.22) saturate(.7); mix-blend-mode: multiply; }

.wedding-details .evening-couple { display:block; width:210px; max-width:58%; height:auto; margin:22px auto 30px; }
