/* marrakech-atlas-couples r4d.css: v1.3 design layer (v9 mockup accents + v8 props, Oct 24 2026). No important-flag overrides. Colours: this guide's palette tokens. */
html body .site-header { background: var(--berry-deep); }
/* --- v9 accents: one Marrakech source per section, decorative, in empty bands only --- */
main > section.overview, main > section.route, main > section.planning, main > section.about-cta, main > section.ce-big, header.hero, footer.eat-footer { position: relative; }
html body .hero::before, html body .overview::after, html body .route::after, html body .ce-big::after, html body .about-cta::after, html body .planning::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("/marrakech-atlas-couples/assets/theme/acc/stucco.svg") repeat-x center / 96px 48px; opacity: .16; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
html body .overview::after { left: 24px; right: 24px; bottom: 8px; height: 28px; background: url("/marrakech-atlas-couples/assets/theme/acc/zellige.svg") repeat-x left / 28px 28px; opacity: .24; }
html body .route::after { left: 0; right: 0; bottom: 8px; height: 64px; background: url("/marrakech-atlas-couples/assets/theme/acc/atlas.svg") no-repeat center / 100% 100%; opacity: .30; }
html body .ce-big::after { left: 50%; width: 360px; transform: translateX(-50%); bottom: 14px; height: 96px; background: url("/marrakech-atlas-couples/assets/theme/acc/arch.svg") repeat-x center bottom / 72px 96px; opacity: .16; -webkit-mask: radial-gradient(ellipse at 50% 100%, #000 35%, transparent 72%); mask: radial-gradient(ellipse at 50% 100%, #000 35%, transparent 72%); }
html body .about-cta::after { left: 50%; width: 280px; transform: translateX(-50%); top: 22px; height: 28px; background: url("/marrakech-atlas-couples/assets/theme/acc/rug.svg") repeat-x center / 56px 28px; opacity: .30; }
html body .planning::after { right: 4px; bottom: 2px; width: 56px; height: 56px; background: url("/marrakech-atlas-couples/assets/theme/acc/palm.svg") no-repeat right bottom / 100% 100%; opacity: .32; }
html body .eat-footer::after { right: -34px; top: 12px; width: 116px; height: 116px; background: url("/marrakech-atlas-couples/assets/theme/acc/cedar.svg") no-repeat center / 100% 100%; opacity: .12; }
footer.eat-footer { overflow: hidden; }
@media (prefers-color-scheme: dark) { html body .hero::before, html body .overview::after, html body .route::after, html body .ce-big::after, html body .about-cta::after, html body .planning::after, html body .eat-footer::after { filter: brightness(.92); } html body .about-cta::after { opacity: .24; } html body .route::after { opacity: .18; } }
@media (min-width: 701px) {
 html body .hero::before { top: 46px; }
 html body .route::after { bottom: 4px; opacity: .18; }
 html body .ce-big::after { width: 620px; bottom: 16px; }
 html body .about-cta::after { left: auto; transform: none; right: 20px; width: 56px; top: 0; bottom: 0; height: auto; background: url("/marrakech-atlas-couples/assets/theme/acc/rug.svg") repeat-y center / 28px 28px; opacity: .26; }
 html body .planning::after { right: 0; bottom: 0; width: 96px; height: 96px; opacity: .18; }
 html body .eat-footer::after { right: -60px; top: 0; width: 150px; height: 150px; opacity: .10; -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
}
/* --- v8 props (babouche, tagine, tea-glass, zellige; no lantern) --- */
html body main .r4-prop { display: block; position: absolute; z-index: 4; pointer-events: none; height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
html, body { overflow-x: clip; }
@media (prefers-color-scheme: dark) { html body main .r4-prop { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)) brightness(.94); } }
@media (min-width: 701px) {
 html body main .r4-prop.r4-prop--mk-tea-glass { top: auto; bottom: -36px; right: -40px; left: auto; width: 64px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-babouche { top: -76px; right: 28px; width: 130px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-tagine { top: auto; bottom: -136px; left: -40px; right: auto; width: 150px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-zellige { top: -116px; right: -50px; width: 118px; transform: rotate(4deg); }
 html body main .day-accordion .day + .day { margin-top: 168px; }
}
@media (max-width: 700px) {
 html body main .r4-prop.r4-prop--mk-tea-glass { top: -68px; right: 10px; width: 48px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-babouche { top: -46px; right: -26px; width: 72px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-tagine { top: auto; bottom: -73px; left: -10px; right: auto; width: 80px; transform: rotate(4deg); }
 html body main .r4-prop.r4-prop--mk-zellige { top: -64px; right: -26px; width: 62px; transform: rotate(4deg); }
 html body main .day-accordion .day + .day { margin-top: 120px; }
}

/* place boundaries: replace the shared generic band with clear accent bands (U3, U13) */
html body main > section.overview::before, html body main > section.route::before { content: none; }
html body header.hero { padding-top: 76px; }
html body main > section.overview { padding-bottom: 104px; }
html body main .ce-big.ce-g { padding-bottom: 140px; }
html body main > section.about-cta { padding-top: 80px; }
html body main > section.route { padding-bottom: 96px; }
html body main > section.planning { padding-bottom: 112px; }
html body main .day-accordion { padding-top: 80px; }
html body main aside.trip-card { margin-top: 140px; }
@media (min-width: 701px) { html body main > section.about-cta { padding-top: 32px; padding-right: 110px; } }
/* clearance: no outline or corner ornaments near text or photos (U13); overrides the guide kit */
html body main .trip-card, html body main .plan-extra, html body main .gallery-grid figure { outline: none; }
html body main .stack-print::before, html body main .gallery-grid figure::before, html body main .gallery-grid figure::after { content: none; }
html body main > section.overview::after { content: none; }