/* Section color is independent of its layout and its media/card surfaces. */
[data-surface]{
  --surface-bg:var(--c-bg-cream-1);
  --surface-text:var(--c-text-dark);
  --surface-muted:var(--c-grey-600);
  --surface-accent:var(--c-red-dark);
  --surface-control:var(--c-paper);
  --surface-logo:brightness(0);
  --media-text:var(--surface-text);
  --media-muted:var(--surface-muted);
  --media-accent:var(--surface-accent);
  background:var(--surface-bg);
  color:var(--surface-text);
}
[data-surface="dark"]{
  --surface-bg:var(--c-text-dark);
  --surface-text:var(--c-on-dark);
  --surface-muted:var(--c-muted-on-dark);
  --surface-accent:var(--c-accent-on-dark);
  --surface-control:var(--c-raised-dark);
  --surface-logo:brightness(0) invert(1);
}
[data-surface] :is(.section_kicker,.editorialNote,.tvHero__note,.world_margin_note){color:var(--surface-accent)}
[data-surface] :is(.tvHero__title,.world_selected,.footer_contact,.footer_hello,.footer_btn){color:var(--surface-text)}
[data-surface] :is(.services_intro,.world_intro,.world_selected span,.world_attribution,.tvHero__intro,.clients__subtitle,.clients__logo,.section_subtitle,.videoStory>p,.footer_invitation,.footer_social_link,.footer_credit,.credit_link,.footer_copyright,.footer_legal button,.footer_hello span){color:var(--surface-muted)}
[data-surface] :is(.footer_contact:hover,.footer_social_link:hover,.footer_legal button:hover),[data-surface] .footer_btn::after{color:var(--surface-accent)}
[data-surface] .footer_hello svg{stroke:var(--surface-accent)}
[data-surface] .credit_logo{filter:var(--surface-logo)}

/* Navigation shares the hero's ink surface, including its mobile top row. */
.site_header--dark .nav_link{color:var(--c-muted-on-dark)}
.site_header--dark .nav_link:hover{color:var(--c-accent-on-dark)}
.hero-section[data-surface="dark"] :is(img.second-image,.hero-lang-toggle img){filter:invert(1)}
.hero-section[data-surface="dark"] .hero-note-en{color:var(--surface-text)}
/* Both original artworks keep their lettering in the top left/right strips.
   Recolour only those strips; the portrait below remains completely unfiltered.
   Identical responsive sources keep the layers aligned without another download. */
.hero-section .hero-lettering{--lettering-left:42.7%;--lettering-right:54.5%;display:block;position:absolute;inset:0;pointer-events:none;filter:brightness(0) invert(1);clip-path:polygon(0 0,var(--lettering-left) 0,var(--lettering-left) 20%,var(--lettering-right) 20%,var(--lettering-right) 0,100% 0,100% 20%,0 20%)}
html[lang="en"] .hero-lettering{--lettering-left:43.7%;--lettering-right:56%}

/* Each section now has its own surface; restore breathing room at boundaries. */
.about[data-surface] .about__container{padding-bottom:clamp(48px,5vw,72px)}
.about[data-surface] :is(.about__intro,.about__download,.about__aside button:hover){color:var(--surface-text)}
.about[data-surface] :is(.about__hint,.about__credits li,.about__credits .about__projects,.about__aside>p,.about__aside button),.about[data-surface] .about__credits summary::after{color:var(--surface-muted)}
.about[data-surface] :is(.about__credits summary,.about__download,.about__aside button,.about__composition):focus-visible{outline-color:var(--surface-accent)}
.approach[data-surface],.clients_section[data-surface],.eventFAQ[data-surface]{padding-block:var(--section-space)}
.approach[data-surface] :is(.approach__intro,.approach__aside,.approach__choice>span){color:var(--surface-muted)}
.approach[data-surface] :is(.approach__choice,.approach__next){color:var(--surface-text)}
.approach[data-surface] :is(.approach__invitation,.approach__choice>i,.approach__choice[aria-selected=true],.approach__next span){color:var(--surface-accent)}
.approach[data-surface] .approach__choice::before{border-color:var(--surface-accent)}
.testimonial_card{color:var(--c-text-dark)}
[data-surface="dark"] .testimonials_sketch{filter:invert(1)}

/* The map remains its original dark artwork, with the same coordinate plane. */
.world_section[data-surface] .world_city{color:var(--surface-muted)}
.world_section[data-surface] .world_city:hover,.world_section[data-surface] .world_city.is-active{background:var(--surface-control);color:var(--surface-text)}
.world_section[data-surface] .world_city.is-active::before{background:var(--surface-accent)}
.world_section[data-surface]:not([data-surface="dark"]) .world_stage{width:100%;margin:32px 0;overflow:hidden;border-radius:var(--card-radius);background:var(--c-text-dark)}
.world_section[data-surface]:not([data-surface="dark"]) .world_controls{margin-top:24px}

/* Cards and dialog contents keep their own ink/paper contrast. */
.videoStories[data-surface]{padding-block:var(--section-space)}
[data-surface] :is(.videoStory h4 span,.eventStory__details>summary>span){color:var(--surface-accent)}
[data-surface] .eventStory__number{color:var(--surface-text);background:var(--surface-bg);border-radius:var(--card-radius);padding:0 .12em}
[data-project-content]{--surface-accent:var(--c-red-dark);padding-inline:0;color:var(--c-text-dark);background:var(--c-bg-cream-1)}
.eventStory__details[open]>[data-project-content]{padding:28px;border-radius:var(--card-radius)}
@media(max-width:760px){
  .world_section[data-surface]:not([data-surface="dark"]) .world_stage{margin-block:26px}
}
@media(max-width:700px){
  .site_header--dark{background:var(--c-text-dark)}
}