/* copenhagen-christmas-couples r4d.css: v1.3 design layer (card-art r4d, Oct 25 2026). Structure follows the Marrakech r4d layer. No important-flag overrides. Colours: only this guide's own theme.css tokens (light #7c1d22 / dark #3a0f12 header). */
html body .site-header { background: var(--berry-deep); color: var(--on-deep); }
/* --- accents: this guide's own pattern and transition, decorative, empty bands only --- */
main > section.overview, main > section.route, main > section.planning, main > section.faq, main > section.related, header.hero, footer.eat-footer { position: relative; }
html body .hero::before, html body .route::after, html body .eat-footer::after { content: ""; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; }
html body .hero::before { left: 0; right: 0; top: 6px; height: 48px; background: url("/copenhagen-christmas-couples/assets/theme/patterns/light/pattern-cph-gable-steps.svg") repeat-x center / 96px 48px; opacity: .14; -webkit-mask: linear-gradient(90deg, transparent, #7c1d22 18%, #7c1d22 82%, transparent); mask: linear-gradient(90deg, transparent, #7c1d22 18%, #7c1d22 82%, transparent); }
html body .route::after { left: 0; right: 0; bottom: 8px; height: 40px; background: url("/copenhagen-christmas-couples/assets/theme/patterns/light/transition-cph-harbour-ripple.svg") repeat-x center / auto 100%; opacity: .30; }
html body .eat-footer::after { right: -34px; top: 12px; width: 116px; height: 116px; background: url("/copenhagen-christmas-couples/assets/theme/patterns/light/pattern-cph-gable-steps.svg") no-repeat center / 100% 100%; opacity: .10; }
footer.eat-footer { overflow: hidden; }
/* --- moment scene (figure.r4-moment, full-bleed, before The route) --- */
html body main figure.r4-moment { margin: 0; background: var(--berry-deep); color: var(--on-deep); }
html body main figure.r4-moment img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html body main figure.r4-moment figcaption { padding: 12px 20px 16px; font-style: italic; color: var(--on-deep); }
html body main figure.r4-moment figcaption .credit { display: block; font-style: normal; font-size: .82em; color: var(--hero-soft); }
/* --- props (r4-prop, last child of the anchor; never on the hero or the first day) --- */
html body main .r4-prop { display: block; position: absolute; z-index: 4; pointer-events: none; height: auto; filter: drop-shadow(0 12px 14px rgba(20, 21, 24, .45)); }
html, body { overflow-x: clip; }
html body main .r4-anchor { position: relative; }
@media (max-width: 700px) {
 html body .hero::before { content: none; }
}
/* --- prop bands (Oct 25 rev 7): each prop sits in a dedicated empty band BETWEEN sections, above The route, the FAQ and Keep exploring (related); layout change = extra margin-top on those three sections to make room; site.css full-bleed clip-path on these sections is widened upward by exactly the band height so the prop is not clipped --- */
@media (min-width: 701px) {
 html body main .r4-prop.r4-prop--cph-heart { top: -260px; right: 6%; height: 220px; width: auto; max-width: 52vw; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--cph-pastry { top: -260px; left: 6%; height: 220px; width: auto; max-width: 52vw; transform: rotate(-4deg); }
 html body main .r4-prop.r4-prop--cph-fir { top: -260px; right: 6%; height: 220px; width: auto; max-width: 52vw; transform: rotate(4deg); }
 html body main > section.route, html body main > section.faq, html body main > section.related { margin-top: 300px; clip-path: inset(-300px -100vmax 0); }
}
@media (max-width: 700px) {
 html body main .r4-prop.r4-prop--cph-heart { top: -165px; right: 6%; height: 130px; width: auto; max-width: 52vw; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--cph-pastry { top: -165px; left: 6%; height: 130px; width: auto; max-width: 52vw; transform: rotate(-4deg); }
 html body main .r4-prop.r4-prop--cph-fir { top: -165px; right: 6%; height: 130px; width: auto; max-width: 52vw; transform: rotate(4deg); }
 html body main > section.route, html body main > section.faq, html body main > section.related { margin-top: 200px; clip-path: inset(-200px -100vmax 0); }
}
/* --- dark block: own dark palette (#3a0f12 header, #141518 page) --- */
@media (prefers-color-scheme: dark) {
 html body .site-header { background: var(--berry-deep); color: var(--on-deep); }
 html body .hero::before { background-image: url("/copenhagen-christmas-couples/assets/theme/patterns/dark/pattern-cph-gable-steps.svg"); opacity: .12; }
 html body .route::after { background-image: url("/copenhagen-christmas-couples/assets/theme/patterns/dark/transition-cph-harbour-ripple.svg"); opacity: .20; }
 html body .eat-footer::after { background-image: url("/copenhagen-christmas-couples/assets/theme/patterns/dark/pattern-cph-gable-steps.svg"); }
 html body main figure.r4-moment { background: var(--berry-deep); }
 html body main figure.r4-moment img { filter: brightness(.9); }
 html body main .r4-prop { filter: drop-shadow(0 10px 12px rgba(20, 21, 24, .6)) brightness(.94); }
}
/* --- U3 section divider (card-art/divider.svg): tone-on-tone cph linework in the empty band above the section kicker; replaces the site.css gradient bar for these two sections only --- */
html main > section.overview::before, html main > section.route::before { content: ""; display: block; height: 12px; margin-bottom: 26px; background-image: url("/copenhagen-christmas-couples/assets/theme/divider.svg"); background-repeat: repeat-x; background-position: center bottom; background-size: 225px 12px; opacity: 1; }
@media (prefers-color-scheme: dark) { html main > section.overview::before, html main > section.route::before { background-image: url("/copenhagen-christmas-couples/assets/theme/divider-dark.svg"); } }

/* hideprops-20261025: batch go-live, props kept in DOM but hidden (owner DU waiver) */
html body main .r4-prop.r4-prop, html body main img.r4-prop.r4-prop { display: none; }