/* mexico-city-food-friends r4d.css: v1.3 design layer from this guide's PLACE-LANGUAGE.md design brief (day5-1023, builder B). No important-flag overrides. */
.site-header { background: var(--berry-deep); }
/* site.css no longer carries the pseudo-element props or the CSS postcard (removed at the source, budget2): the real <img> props and the <figure> postcard below replace them. */

/* Brief transitions: market-awning scallop between sections; tezontle course before The route and before Planning. */
main > section.overview::before, main > section.intro::before { content: ""; display: block; height: 26px; margin: 0 0 26px; border-radius: 0; opacity: 1; background: url("/mexico-city-food-friends/assets/pattern-cdmx-awning-scallop-light.webp") center / auto 100% repeat-x; }
main > section.route::before, main > section.planning::before { content: ""; display: block; height: 22px; margin: 0 0 28px; border-radius: 0; opacity: 1; background: url("/mexico-city-food-friends/assets/pattern-cdmx-tezontle-course-light.webp") center / auto 100% repeat-x; }
main > section.overview::after { content: none; }

@media (prefers-color-scheme: dark) {
/* Brief transitions: market-awning scallop between sections; tezontle course before The route and before Planning. */
main > section.overview::before, main > section.intro::before { content: ""; display: block; height: 26px; margin: 0 0 26px; border-radius: 0; opacity: 1; background: url("/mexico-city-food-friends/assets/pattern-cdmx-awning-scallop-dark.webp") center / auto 100% repeat-x; }
main > section.route::before, main > section.planning::before { content: ""; display: block; height: 22px; margin: 0 0 28px; border-radius: 0; opacity: 1; background: url("/mexico-city-food-friends/assets/pattern-cdmx-tezontle-course-dark.webp") center / auto 100% repeat-x; }
main > section.overview::after { content: none; }
}
/* Props: one object per anchor card, breaking its edge. The anchor isolates, the prop sits at z-index -1 so the card text always paints above it. */
.trip-card,
main > section.route article.day[id^="day1-"],
main > section.route article.day[id^="day2-"],
main > section.route article.day[id^="day3-"],
section.route .route-head { position: relative; isolation: isolate; }
.r4-prop { position: absolute; z-index: -1; width: auto; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)); }
main > section.route .route-head { padding-bottom: 14px; margin-bottom: 58px; }
.r4-prop--cdmx-dried-chile-heap { height: 60px; top:-38px;right:-20px; }
.r4-prop--cdmx-concha-basket { height: 50px; top:calc(50% - 28px);left:-50px; }
.r4-prop--cdmx-tuna-tostada { height: 44px; top:-38px;right:-20px; }
.r4-prop--cdmx-trompo-pastor { height: 58px; top:calc(50% - 28px);right:-50px; }
.r4-prop--cdmx-lucha-mask { height: 52px; bottom:-38px;right:-20px; }
.r4-prop--cdmx-blue-corn-tlacoyo { height: 44px; top:-38px;left:-20px; }
.r4-prop--cdmx-pink-taxi { height: 50px; bottom:-50px;left:0; }
@media (max-width: 700px) {
  .r4-prop--cdmx-dried-chile-heap { height: 48px; top:-30px;right:-8px; }
  .r4-prop--cdmx-concha-basket { height: 40px; top:auto;right:auto;bottom:auto;left:auto;bottom:-30px;left:-8px; }
  .r4-prop--cdmx-tuna-tostada { height: 38px; top:-30px;right:-8px; }
  .r4-prop--cdmx-trompo-pastor { height: 46px; top:auto;right:auto;bottom:auto;left:auto;top:-30px;right:-8px; }
  .r4-prop--cdmx-lucha-mask { height: 42px; bottom:-30px;right:-8px; }
  .r4-prop--cdmx-blue-corn-tlacoyo { height: 38px; top:-30px;left:-8px; }
  .r4-prop--cdmx-pink-taxi { height: 40px; bottom:-44px;left:0; }
}
/* Scene moments: the captioned real-photo postcard between the overview and The route, and one late illustrated scene. */
.r4-moment { display: block; box-sizing: border-box; margin: 0 auto; padding: 34px 20px 30px; max-width: 1180px; }
.r4-moment img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.r4-moment figcaption { margin-top: 10px; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.r4-moment--cdmx-bellas-artes-dusk { max-width: 800px; }