@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { --ink: #21322e; --muted: #65716c; --cream: #f7f3eb; --coral: #df735d; --coral-dark: #c65c4a; --line: rgba(33,50,46,.15); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); }
.slides-page { overflow: hidden; }
.slide { position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; opacity: 0; pointer-events: none; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.slide.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.slide:nth-child(1) { background: #f7f3eb; }.slide:nth-child(2) { background: #e4ede6; }.slide:nth-child(3) { background: #f3e6dc; }
.slide-copy { width: min(88vw, 760px); position: relative; }.intro-slide h1 { font-size: clamp(4.5rem, 11vw, 9rem); }.slide-number { position: absolute; right: 0; top: 0; color: var(--muted); font: .72rem 'DM Mono', monospace; letter-spacing: .1em; }.agenda-copy ul { margin: 2.4rem 0 0; padding: 0; list-style: none; font: 1rem/2.1 'DM Mono', monospace; }.agenda-copy li { border-top: 1px solid var(--line); padding: .45rem 0; }.agenda-copy li::before { content: '✦'; color: var(--coral); padding-right: .8rem; }.moments-layout { width: min(88vw, 1000px); min-height: 60vh; position: relative; display: grid; place-items: center; }.moment-copy { text-align: center; }.scribble { position: absolute; left: 4%; top: 8%; color: var(--coral-dark); font: italic 2rem/1 'Playfair Display', serif; transform: rotate(-12deg); }.circle-note { position: absolute; right: 8%; bottom: 8%; width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--cream); font: .75rem/1.4 'DM Mono', monospace; transform: rotate(11deg); }.moments-layout .slide-number { top: 0; right: 0; }.image-slide { background: #d9e6df; display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 8vw, 7rem); }.image-copy { position: relative; width: min(35vw, 350px); }.image-copy h1 { font-size: clamp(3.8rem, 6vw, 6.3rem); }.photo-grid { width: min(47vw, 590px); height: min(66vh, 570px); display: grid; grid-template-columns: 1fr .9fr; grid-template-rows: 1fr .8fr; gap: 1rem; }.photo { display: flex; align-items: flex-end; padding: 1rem; overflow: hidden; color: white; font: .67rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; background-size: cover; background-position: center; box-shadow: 0 12px 30px rgba(33,50,46,.16); }.photo-one { grid-row: span 2; background: linear-gradient(20deg, rgba(33,50,46,.38), transparent), url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=800&q=80'); }.photo-two { background: linear-gradient(20deg, rgba(33,50,46,.35), transparent), url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=700&q=80'); }.photo-three { background: linear-gradient(20deg, rgba(33,50,46,.35), transparent), url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=700&q=80'); }
.question-slide { background: #dfeae2; overflow: hidden; }
.question-slide::before, .question-slide::after { content: '✦'; position: absolute; color: var(--coral); font-size: clamp(5rem, 14vw, 11rem); opacity: .75; }.question-slide::before { left: 9%; top: 14%; }.question-slide::after { right: 9%; bottom: 11%; font-size: clamp(3rem, 8vw, 7rem); }
.question-content { text-align: center; position: relative; z-index: 1; }
.eyebrow, .hint, label { font: 500 .72rem/1.4 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { color: var(--coral-dark); margin: 0 0 1.35rem; }
h1 { margin: 0; font: 500 clamp(2.9rem, 7vw, 6.1rem)/.98 'Playfair Display', Georgia, serif; letter-spacing: -.05em; }
.choice-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2.75rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.45rem; border: 1px solid transparent; border-radius: 999px; font: 500 .76rem/1 'DM Mono', monospace; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-2px); }.button-yes { background: var(--coral); color: white; }.button-yes:hover { background: var(--coral-dark); }.button-no { border-color: var(--ink); color: var(--ink); background: transparent; }
.progress { position: fixed; left: 50%; bottom: 2.2rem; width: min(180px, 36vw); height: 2px; background: rgba(33,50,46,.18); transform: translateX(-50%); z-index: 2; }.progress span { display: block; height: 100%; width: 25%; background: var(--coral); transition: width .4s ease; }.hint { position: fixed; left: 0; right: 0; bottom: .75rem; text-align: center; color: var(--muted); margin: 0; z-index: 2; }
.date-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 15% 12%, #f4d8c9 0 5%, transparent 5.2%), radial-gradient(circle at 88% 85%, #cfe0d4 0 9%, transparent 9.2%), var(--cream); }.date-card { width: min(100%, 620px); padding: clamp(2.25rem, 8vw, 5rem); background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 24px 70px rgba(33,50,46,.11); border-radius: 2px; }.back-link { display: inline-block; margin-bottom: 3.5rem; color: var(--muted); text-decoration: none; font: .74rem 'DM Mono', monospace; }.intro { margin: 1.4rem 0 2.2rem; color: var(--muted); font: 1rem/1.6 'DM Mono', monospace; max-width: 29rem; }form { display: grid; gap: .75rem; }.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }.date-fields div { display: grid; gap: .5rem; }label { color: var(--ink); }input[type=date] { width: 100%; padding: 1rem; color: var(--ink); background: #fffdfa; border: 1px solid var(--line); border-radius: 2px; font: 1rem 'DM Mono', monospace; }form .button { width: 100%; margin-top: 1rem; border: 0; }button:disabled { opacity: .6; cursor: wait; }#message { min-height: 1.5rem; margin: .4rem 0 0; color: var(--coral-dark); font: .78rem/1.5 'DM Mono', monospace; }.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: rgba(33,50,46,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }.modal.visible { opacity: 1; pointer-events: auto; }.modal-card { width: min(100%, 440px); text-align: center; padding: 3rem 2rem; background: var(--cream); box-shadow: 0 18px 70px rgba(0,0,0,.24); }.modal-card h2 { margin: 0; font: 500 2.9rem/1 'Playfair Display', Georgia, serif; letter-spacing: -.04em; }.modal-card p:not(.eyebrow) { color: var(--muted); font: .9rem/1.6 'DM Mono', monospace; }.modal-card .button { margin-top: 1rem; border: 0; }
@media (max-width: 700px) { .image-slide { flex-direction: column; gap: 2rem; padding: 4rem 1.5rem; overflow-y: auto; }.image-copy { width: min(88vw, 500px); }.photo-grid { width: min(88vw, 500px); height: 420px; }.image-copy .slide-number { top: 0; } } @media (max-width: 520px) { h1 { font-size: 3.1rem; }.date-card { padding: 2.25rem 1.5rem; }.back-link { margin-bottom: 2.5rem; }.date-fields { grid-template-columns: 1fr; } }

/* Warsaw scrapbook slide */
.image-slide { display: block; padding: 2.5rem 6vw; background: #f5dfc5; overflow: hidden; }
.image-copy { position: absolute; top: 2.7rem; left: 6vw; right: 6vw; width: auto; z-index: 2; }
.image-copy h1 { font-size: clamp(3.2rem, 6vw, 6rem); }
.photo-grid { position: relative; width: min(82vw, 1050px); height: min(69vh, 570px); margin: clamp(8.5rem, 17vh, 10rem) auto 0; }
.photo, .landmark, .ticket { position: absolute; box-shadow: 0 10px 22px rgba(65,45,30,.22); }
.photo { display: flex; align-items: flex-end; padding: .7rem .7rem 2.3rem; overflow: hidden; color: #35312c; font: .6rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; background-color: #fffdf7; background-size: calc(100% - 1.4rem) calc(100% - 3rem); background-position: .7rem .7rem; background-repeat: no-repeat; }
.photo-one { left: 9%; top: 0; width: 27%; height: 80%; transform: rotate(-8deg); background-image: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=800&q=80'); }
.photo-two { left: 39%; top: 18%; width: 24%; height: 60%; transform: rotate(7deg); background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=700&q=80'); }
.photo-three { right: 3%; top: 2%; width: 26%; height: 73%; transform: rotate(11deg); background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=700&q=80'); }
.landmark { display: grid; place-items: center; width: 120px; height: 132px; padding: .55rem; background: #fffdf7; transform: rotate(-5deg); }.landmark span { font: .55rem 'DM Mono', monospace; text-transform: uppercase; }
.palace { left: 1%; bottom: 2%; }.palace i { position: relative; display: block; width: 35px; height: 72px; background: repeating-linear-gradient(90deg, #536b67 0 4px, #f1cb83 4px 7px); }.palace i::before { content: ''; position: absolute; left: 12px; top: -30px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 30px solid #536b67; }
.mermaid { right: 22%; bottom: -2%; transform: rotate(8deg); background: #c8dbe1; }.mermaid i { font: 3.5rem Georgia, serif; color: #385a64; }.ticket { right: 0; bottom: 1%; width: 135px; padding: 1rem; background: #d56d54; color: #fff9e8; text-align: center; font: .65rem/1.5 'DM Mono', monospace; letter-spacing: .08em; transform: rotate(-9deg); }.ticket b { font-size: .85rem; }.ticket small { display: block; margin-top: .6rem; font-size: .55rem; }
.question-slide .button { min-width: 165px; padding: 1.25rem 2rem; font-size: .96rem; }
.date-page { background-color: #d9e3f0; background-image: linear-gradient(30deg, rgba(255,255,255,.45) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.45) 87.5%), linear-gradient(150deg, rgba(255,255,255,.45) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.45) 87.5%); background-size: 44px 76px; }.date-card { background: #fffdf7; border: 8px solid #f3c875; box-shadow: 14px 14px 0 #536b67; border-radius: 0; }
@media (max-width: 700px) { .image-slide { padding: 2rem 1.5rem; }.image-copy { position: relative; inset: auto; width: min(88vw, 500px); }.photo-grid { width: min(94vw, 520px); height: 480px; margin-top: 2rem; }.landmark { width: 90px; height: 100px; }.ticket { width: 105px; }.photo-one { left: 3%; width: 31%; }.photo-two { left: 35%; width: 29%; }.photo-three { right: 1%; width: 29%; } }

/* Opening cyclist animation */
#deck, .progress, .hint { transition: opacity .8s ease; }
.slides-page.is-loading:not(.is-revealing) #deck, .slides-page.is-loading:not(.is-revealing) .progress, .slides-page.is-loading:not(.is-revealing) .hint { opacity: 0; }
.loading-scene { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #f7f3eb; transition: opacity 1.6s ease, background-color 1.6s ease; }
.hill-line { position: absolute; left: 0; bottom: 13vh; width: 100%; height: 50vh; overflow: visible; }.hill-line path { fill: none; stroke: #21322e; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cyclist { position: absolute; z-index: 1; top: 23%; left: -18%; width: clamp(330px, 38vw, 610px); height: auto; transform-origin: 50% 80%; animation: cyclist-journey 5.4s cubic-bezier(.44,.03,.4,.98) forwards; }
.slides-page.is-revealing .loading-scene { background-color: rgba(247,243,235,.6); opacity: .68; }.slides-page.loading-complete .loading-scene { opacity: 0; pointer-events: none; }
@keyframes cyclist-journey { 0% { left: -18%; top: 23%; transform: rotate(-12deg); } 13% { left: 4%; top: 21%; transform: rotate(-11deg); } 48% { left: 38%; top: 16%; transform: rotate(-8deg); } 61% { left: 45%; top: 17%; transform: rotate(-4deg); } 100% { left: 108%; top: 46%; transform: rotate(14deg); } }
@media (max-width: 650px) { .hill-line { bottom: 19vh; height: 44vh; }.cyclist { width: 125vw; left: -58%; }.image-slide { overflow-y: auto; } @keyframes cyclist-journey { 0% { left: -58%; top: 31%; transform: rotate(-12deg); } 13% { left: -34%; top: 29%; transform: rotate(-11deg); } 48% { left: 1%; top: 22%; transform: rotate(-8deg); } 61% { left: 10%; top: 24%; transform: rotate(-4deg); } 100% { left: 110%; top: 56%; transform: rotate(14deg); } } }
@media (prefers-reduced-motion: reduce) { .cyclist { animation-duration: .01ms; animation-delay: 0ms; }.loading-scene { transition-duration: .01ms; } }

/* The opening is covered by slide one rather than faded away. */
#deck { position: fixed; inset: 0; z-index: 20; width: 100vw; height: 100vh; overflow: hidden; transform: translateX(100%); transition: transform 2.5s cubic-bezier(.65,.02,.22,1); }
.slides-page.is-loading:not(.is-revealing) #deck { opacity: 1; }
.slides-page.is-revealing #deck { transform: translateX(0); }
.slides-page.is-loading:not(.loading-complete) .progress, .slides-page.is-loading:not(.loading-complete) .hint { opacity: 0; }
.loading-scene { z-index: 10; opacity: 1; background: #f7f3eb; }
.slides-page.is-revealing .loading-scene { opacity: 1; background-color: #f7f3eb; }
.slides-page.loading-complete .loading-scene { opacity: 1; visibility: hidden; }
.hill-line { bottom: 12vh; height: 50vh; }.hill-line path { stroke-width: 2.5; }
.cyclist { position: fixed; z-index: 30; top: 55%; left: -15%; width: clamp(180px, 18vw, 290px); animation: cyclist-journey 5.6s cubic-bezier(.48,.02,.5,.98) forwards; }
@keyframes cyclist-journey { 0% { left: -15%; top: 55%; transform: rotate(-8deg); } 16% { left: 4%; top: 52%; transform: rotate(-8deg); } 48% { left: 38%; top: 31%; transform: rotate(-7deg); } 58% { left: 47%; top: 34%; transform: rotate(-2deg); } 82% { left: 73%; top: 49%; transform: rotate(10deg); } 100% { left: 107%; top: 57%; transform: rotate(13deg); } }
.modal { z-index: 50; }
@media (max-width: 650px) { .cyclist { width: clamp(175px, 57vw, 240px); left: -45%; } @keyframes cyclist-journey { 0% { left: -45%; top: 57%; transform: rotate(-8deg); } 16% { left: -20%; top: 51%; transform: rotate(-8deg); } 48% { left: 25%; top: 30%; transform: rotate(-7deg); } 58% { left: 35%; top: 33%; transform: rotate(-2deg); } 82% { left: 74%; top: 49%; transform: rotate(10deg); } 100% { left: 110%; top: 56%; transform: rotate(13deg); } } }

/* The road drawing and rider are kept in sync by the same JS curve. */
.hill-line { inset: 0; bottom: auto; width: 100%; height: 100%; }
.hill-line path { stroke-width: 2.5; }
.cyclist { width: clamp(130px, 12vw, 205px); animation: none !important; transform-origin: 50% 92%; will-change: transform, top, left; }
.intro-slide .flat-road { position: absolute; z-index: 0; top: 72vh; left: -5vw; width: 110vw; height: 0; border-top: 2.5px solid var(--ink); }
.intro-slide .slide-copy { z-index: 1; }
@media (max-width: 650px) { .cyclist { width: clamp(130px, 38vw, 175px); } }

/* Landscape detail for the opening and a restrained Warsaw city backdrop. */
.landscape-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }.distant-hill { stroke: none; }.distant-hill-one { fill: #e3ecdd; }.distant-hill-two { fill: #cfdec8; }
.hill-line { z-index: 1; }.hill-fill { fill: #b9cfaf; stroke: none; }.hill-line #road-path { stroke: #475a4b; }
.tree-row { fill: #6d8a66; }.tree rect { fill: #705c43; }.tree:nth-child(2n) circle { fill: #587951; }.tree:nth-child(3n) circle { fill: #7e9b70; }
.intro-slide { overflow: hidden; }.cityscape { position: absolute; z-index: 0; top: 42vh; left: 0; width: 100%; height: 30vh; opacity: .8; }.cityscape svg { width: 100%; height: 100%; }.city-far { fill: #e6e3da; }.city-near { fill: #bec8c0; stroke: #91a096; stroke-width: 3; stroke-linecap: round; }.city-near path { vector-effect: non-scaling-stroke; }.intro-slide .flat-road { z-index: 2; }.intro-slide .slide-copy { z-index: 3; }

/* Photorealistic 3D backgrounds. The route remains a deliberate overlay for the animation. */
.loading-scene, .slides-page.is-revealing .loading-scene { background: url('assets/landscape-3d.png') center / cover no-repeat; }
.landscape-background, .hill-fill, .tree-row { display: none; }
.hill-line #road-path { stroke: rgba(255,255,255,.94); stroke-width: 3; filter: drop-shadow(0 1px 2px rgba(21,45,25,.42)); }
.slide.intro-slide { background: linear-gradient(90deg, rgba(247,243,235,.25), rgba(247,243,235,.04)), url('assets/warsaw-skyline.png') center / cover no-repeat; }
.intro-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,243,235,.12), rgba(247,243,235,.02) 52%, rgba(27,40,34,.12)); z-index: 0; pointer-events: none; }
.intro-slide .cityscape { display: none; }
.intro-slide .flat-road { border-color: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(20,34,27,.38); }

/* A grassy curve, not a drawn road: the cyclist's motion follows its exact edge. */
.hill-fill { display: block; fill: #52753e; opacity: .24; mix-blend-mode: multiply; }
.hill-line #road-path { stroke: none; }
.loading-scene::after { content: ''; position: absolute; inset: 0; z-index: 0; background: url('assets/warsaw-skyline-v2.png') center / cover no-repeat; opacity: 0; transition: opacity 2.5s ease; pointer-events: none; }
.slides-page.is-revealing .loading-scene::after { opacity: .72; }
.slide.intro-slide { background-image: linear-gradient(90deg, rgba(247,243,235,.25), rgba(247,243,235,.04)), url('assets/warsaw-skyline-v2.png'); }
.progress, .hint { z-index: 60; }

/* The rider now follows the photographed foreground ridge itself. */
.loading-scene, .slides-page.is-revealing .loading-scene { background-image: url('assets/rideable-hill.png'); }
.loading-scene::after, .hill-line { display: none; }
.intro-slide .flat-road { top: 65vh; }

/* The city slide is the destination: its real boulevard continues the final ground height. */
.slide.intro-slide { background: url('assets/warsaw-photo-original.jpg') center / 100% 100% no-repeat !important; }
.intro-slide::before { z-index: 0; background: linear-gradient(90deg, rgba(247,243,235,.12), rgba(247,243,235,.01)), url('assets/warsaw-photo-boulevard.png') center / 100% 100% no-repeat; opacity: 1; transition: opacity 1.25s ease; }
.intro-slide.boulevard-faded::before { opacity: 0; }

/* Opening title and real landmark miniatures. */
.intro-slide .slide-copy { position: absolute; left: clamp(1.5rem, 7vw, 8rem); top: clamp(5rem, 18vh, 11rem); width: min(92vw, 1180px); padding: 0; background: none; box-shadow: none; }
.intro-slide h1 { color: #fffdf7; font-size: clamp(3.25rem, 7vw, 6.6rem); text-align: left; text-shadow: 0 3px 20px rgba(19,34,27,.66), 0 1px 2px rgba(19,34,27,.5); }
.intro-title { letter-spacing: -.075em; white-space: nowrap; }
.crossed-city { position: relative; display: inline-block; margin-left: .08em; color: #fffdf7; }
.crossed-city::before, .crossed-city::after { content: ''; position: absolute; left: -.08em; right: -.08em; top: 51%; height: .09em; border-radius: 50%; background: #d34745; transform-origin: center; }
.crossed-city::before { transform: rotate(-9deg); }
.crossed-city::after { transform: rotate(7deg); opacity: .82; }
.corrected-city { display: inline-block; margin-left: .18em; color: #f3b58f; }
@media (max-width: 700px) { .intro-title { white-space: normal; } }
.crossed-out { position: relative; color: var(--ink); }.crossed-out::after { content: ''; position: absolute; left: -.12em; right: -.12em; top: 52%; height: 2px; background: rgba(210, 64, 61, .72); transform: rotate(-8deg); }
.landmark { display: grid; grid-template-rows: 1fr auto; place-items: stretch; padding: .45rem; overflow: hidden; background: #fffdf7 !important; }.landmark img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }.landmark span { align-self: end; padding-top: .35rem; text-align: center; white-space: nowrap; font: .48rem 'DM Mono', monospace; text-transform: uppercase; }.palace i, .mermaid i { display: none; }
.intro-slide .flat-road { display: none; }

/* A single, calm colour palette and minimalist booking page. */
.slide:nth-child(1), .slide:nth-child(2), .slide:nth-child(3), .image-slide, .question-slide { background: #f7f3eb; }
.date-page { background: #f7f3eb; background-image: none; }
.date-card { max-width: 540px; padding: clamp(2rem, 6vw, 4rem); background: transparent; border: 1px solid var(--line); box-shadow: none; }
.date-card h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
.date-card .button { border-radius: 2px; }
.no-modal .modal-card { max-width: 510px; background: #f7f3eb; }
.no-modal .choice-row { margin-top: 2rem; }

/* Gentle warm colour on the two collage-style slides. */
.moments-slide { background: #f3eadc !important; }
.image-slide { background: #f6e9dd !important; }

#flower-form input[type=text] { width: 100%; padding: 1rem; color: var(--ink); background: #fffdfa; border: 1px solid var(--line); border-radius: 2px; font: 1rem 'DM Mono', monospace; }
#flower-message { min-height: 1.5rem; margin: .4rem 0 0; color: var(--coral-dark); font: .78rem/1.5 'DM Mono', monospace; }

/* Single-date picker: deliberately simple, but easier to see and use. */
.date-fields { grid-template-columns: 1fr; }
.date-picker-field { position: relative; }
.date-picker-field label { margin-bottom: .55rem; color: var(--muted); font: 500 .68rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.date-picker-field input[type=date] { min-height: 4.25rem; padding: 1rem 1.15rem; border: 1px solid var(--ink); border-radius: 999px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); font-size: 1.05rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.date-picker-field input[type=date]:hover { border-color: var(--coral); }
.date-picker-field input[type=date]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(213,109,84,.16), inset 0 0 0 3px rgba(255,255,255,.55); }
.date-picker-field input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .72; }

/* Custom calendar popup: styled consistently instead of relying on the browser's native picker. */
.date-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem; color: var(--ink); background: #fffdfa; border: 1px solid var(--line); border-radius: 2px; font: 1rem 'DM Mono', monospace; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.date-trigger:hover, .date-trigger[aria-expanded=true] { border-color: var(--coral); }
.date-trigger:focus-visible { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(213,109,84,.16); }
.calendar-popover { position: absolute; z-index: 20; top: calc(100% + .65rem); left: 0; width: min(100%, 360px); padding: 1rem; background: #fffdf7; border: 1px solid var(--ink); border-radius: 3px; box-shadow: 0 18px 42px rgba(33,50,46,.18); }
.calendar-popover[hidden] { display: none; }
.calendar-header { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; margin-bottom: .9rem; }
.calendar-header strong { text-align: center; font: 500 .9rem 'DM Mono', monospace; }
.calendar-header button { width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--ink); font-size: 1.25rem; cursor: pointer; }
.calendar-header button:hover:not(:disabled) { color: var(--coral); }
.calendar-header button:disabled { opacity: .25; cursor: default; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .28rem; }
.calendar-weekdays { margin-bottom: .35rem; color: var(--muted); text-align: center; font: .62rem 'DM Mono', monospace; }
.calendar-days button { aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%; color: var(--ink); background: transparent; font: .72rem 'DM Mono', monospace; cursor: pointer; }
.calendar-days button:hover:not(:disabled) { border-color: var(--coral); background: #fae8df; }
.calendar-days button:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.calendar-days button.selected { background: var(--coral); color: #fff; }
.calendar-days button:disabled { color: rgba(33,50,46,.25); cursor: default; }
.calendar-days button.outside-month { opacity: .45; }

/* Supplied photos keep their complete proportions inside individual Polaroid frames. */
.photo-grid { overflow: visible; }
.photo { box-sizing: border-box; display: block; height: auto; margin: 0; padding: .55rem .55rem 2rem; overflow: visible; background: #fffdf7; background-image: none !important; background-size: auto; }
.photo img { display: block; width: 100%; height: auto; background: #fff; }
.photo-one { left: 4%; top: 1%; width: min(24vw, 265px); transform: rotate(-8deg); }
.photo-two { left: 37%; top: 7%; width: min(25vw, 280px); transform: rotate(6deg); }
.photo-three { right: 4%; top: 2%; width: min(24vw, 265px); transform: rotate(10deg); }
.landmark img { object-fit: contain; }
@media (max-width: 700px) { .photo-one { left: 1%; top: 2%; width: min(30vw, 165px); }.photo-two { left: 35%; top: 11%; width: min(31vw, 175px); }.photo-three { right: 1%; top: 4%; width: min(30vw, 165px); } }

/* The three supplied photos remain the large, central focus. */
.photo-grid { width: min(88vw, 1180px); }
.photo { padding: .65rem; z-index: 3; }
.photo-one { left: 0; top: 0; width: 30%; transform: none; }
.photo-two { left: 35%; top: 0; width: 30%; transform: none; }
.photo-three { right: 0; top: 0; width: 32%; transform: none; }
.scrap { position: absolute; display: block; padding: .35rem; background: #fffdf7; box-shadow: 0 8px 18px rgba(65,45,30,.2); z-index: 4; }
.scrap img { display: block; width: 100%; height: auto; }
.scrap-old-town { left: 17%; bottom: 0; width: min(14vw, 155px); transform: rotate(-5deg); }
.scrap-engraving { right: 7%; bottom: 0; width: min(12vw, 135px); transform: rotate(11deg); }
.scrap-skyline { right: 24%; bottom: 0; width: min(15vw, 165px); margin: 0; transform: rotate(-7deg); }
.scrap-wilanow { right: 3%; top: 54%; width: min(16vw, 190px); transform: rotate(-6deg); }
.scrap-barbican { right: 21%; top: 54%; width: min(9vw, 100px); transform: rotate(8deg); }
.landmark { z-index: 4; }
.palace { left: 3%; bottom: -4%; }
.mermaid { right: 41%; bottom: -4%; }
@media (max-width: 700px) { .photo-one { left: 0; top: 0; width: 31%; }.photo-two { left: 34%; top: 0; width: 31%; }.photo-three { right: 0; top: 0; width: 32%; }.scrap-old-town { left: 16%; bottom: 0; width: min(21vw, 115px); }.scrap-engraving { right: 5%; bottom: 0; width: min(16vw, 90px); }.scrap-skyline { right: 23%; bottom: 1%; width: min(19vw, 105px); }.scrap-wilanow { right: 2%; top: 53%; width: min(26vw, 145px); }.scrap-barbican { right: 29%; top: 52%; width: min(15vw, 82px); }.palace { left: 1%; bottom: -4%; }.mermaid { right: 40%; bottom: -4%; } }