/* Daniel, 10 October: quiet graffiti is a reusable field, replacing rings here.
   One local image, cropped once. Eligible navy fields carry a separate masked wave.
   Explicit hooks work without JS. Header/footer/CTA aliases cover existing shells. */
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt]){
  --dio-graffiti-base:#dfe2e2;
  --dio-graffiti-opacity:.14;
  --dio-graffiti-blend:multiply;
  --dio-graffiti-scrim:transparent;
  --dio-graffiti-position:center;
  position:relative;isolation:isolate;
  background:var(--dio-graffiti-base)!important;
}
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::before{
  content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  background:url('assets/graffiti-grey-2026-10-22.webp?v=b1') var(--dio-graffiti-position)/cover no-repeat;
  opacity:var(--dio-graffiti-opacity);mix-blend-mode:var(--dio-graffiti-blend);
  animation:none!important;transition:none!important;transform:none!important;
}
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--dio-graffiti-scrim);animation:none!important;transition:none!important;transform:none!important;
}
/* Existing header aliases work before JavaScript and keep their light type. */
:where(.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero):not([data-graffiti-exempt]){
  --dio-graffiti-base:#203846;--dio-graffiti-opacity:.14;--dio-graffiti-blend:screen;
}
:where(.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt]){
  --dio-graffiti-opacity:.10;--muted:#33444f;--ink2:#33444f;color:#203846;
}
/* Variant colors deliberately stay independent of the button palette tokens. */
.dio-graffiti--silver{
  --dio-graffiti-base:#dfe2e2;--dio-graffiti-blend:multiply;
  --dio-graffiti-scrim:transparent;--muted:#33444f;--ink2:#33444f;color:#203846;
}
.dio-graffiti--steel{
  --dio-graffiti-base:#56737f;--dio-graffiti-opacity:.20;--dio-graffiti-blend:soft-light;
  --dio-graffiti-scrim:rgba(16,32,42,.24);color:#fff;
}
.dio-graffiti--navy{
  --dio-graffiti-base:#203846;--dio-graffiti-opacity:.14;--dio-graffiti-blend:screen;
  --dio-graffiti-scrim:transparent;color:#fff;
}
.dio-graffiti--orange{
  --dio-graffiti-base:#ed873c;--dio-graffiti-opacity:.16;--dio-graffiti-blend:multiply;
  --dio-graffiti-scrim:transparent;--muted:#0c1d28;--ink2:#0c1d28;color:#0c1d28;
}
/* Existing silver content needs ink, not the older mid-grey caption token. */
.dio-footer-v2 :is(a,.footer-review,.dio-footer-offices span){color:#203846}
.dio-graffiti--silver>:is(.label,.eyebrow),.dio-graffiti--silver>:is(.wrap,.narrow)>:is(.label,.eyebrow){color:#33444f}
.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *){padding-inline:clamp(20px,3vw,32px)}
.home-warranty-panel.dio-graffiti-field{--dio-graffiti-opacity:.09}
/* Only decorative direct children are retired. Photographs, video, copy, and
   background layers outside the selected surface remain untouched. */
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])>:is(.dio-field-pattern,.pattern[aria-hidden="true"],.hero-pattern,.opening-pattern,.opening-field[aria-hidden="true"],.dio-alive-ring){display:none!important;animation:none!important;transition:none!important}
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])>:is(.dio-field-pattern,.pattern[aria-hidden="true"],.hero-pattern,.opening-pattern,.opening-field[aria-hidden="true"],.dio-alive-ring) *,
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])>:is(.dio-field-pattern,.pattern[aria-hidden="true"],.hero-pattern,.opening-pattern,.opening-field[aria-hidden="true"],.dio-alive-ring) *::before,
:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])>:is(.dio-field-pattern,.pattern[aria-hidden="true"],.hero-pattern,.opening-pattern,.opening-field[aria-hidden="true"],.dio-alive-ring) *::after{animation:none!important;transition:none!important}
@media(forced-colors:active){
  :where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt]){background:Canvas!important;color:CanvasText}
  :where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::before,:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::after{display:none!important}
}
@media print{:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::before,:where(.dio-graffiti-field,.why-opening,section.offices-hero,section.pod-hero,section.story-hero,.rec-hero,section.hero,.dio-footer-v2,.dio-cta-band:not(#story *):not(#episode.ep-still *):not([data-patient-account] *)):not([data-graffiti-exempt])::after{display:none!important}}

/* Daniel, 10 October: the wave moves through stationary graffiti marks.
   JS adds this decorative layer; without it the static image above is complete. */
.dio-graffiti-wave-mask {
  --dio-graffiti-wave-strength:.5;
  --dio-graffiti-wave-duration:14s;
  --dio-graffiti-wave-reading-fade:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 48%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.40) 80%,#000);
  --dio-graffiti-wave-edge-fade:linear-gradient(#000 45%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.28) 74%,rgba(0,0,0,.10) 90%,rgba(0,0,0,.025));
  position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;
  -webkit-mask-image:url('assets/graffiti-mask.webp?v=wave2'),var(--dio-graffiti-wave-reading-fade),var(--dio-graffiti-wave-edge-fade);
  mask-image:url('assets/graffiti-mask.webp?v=wave2'),var(--dio-graffiti-wave-reading-fade),var(--dio-graffiti-wave-edge-fade);
  -webkit-mask-size:cover,100% 100%,100% 100%;mask-size:cover,100% 100%,100% 100%;
  -webkit-mask-position:var(--dio-graffiti-position,center),center,center;mask-position:var(--dio-graffiti-position,center),center,center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
}
:is(.dio-graffiti-wave-mask,.dio-graffiti-logo-mask)>:is(.dio-graffiti-wave,.dio-graffiti-logo-wave) {
  position:absolute;inset:0 auto 0 0;width:calc(100% + 1765.4px);
  opacity:var(--dio-graffiti-wave-strength);
  background:repeating-linear-gradient(115deg,rgba(169,193,209,.10) 0,rgba(169,193,209,.10) 360px,rgba(169,193,209,.32) 530px,rgba(237,135,60,.68) 720px,rgba(237,135,60,.52) 890px,rgba(169,193,209,.16) 1100px,rgba(169,193,209,.10) 1600px);
  transform:translateX(-320px);animation:none;pointer-events:none;
}
/* Narrow exception for the family drawing and the library heading's still wrappers. */
.dio-graffiti-field.dio-graffiti--navy.dio-graffiti-wave-enabled>:is(.dio-graffiti-wave-mask,.dio-graffiti-logo-mask)>:is(.dio-graffiti-wave,.dio-graffiti-logo-wave) {
  animation:dio-graffiti-flow var(--dio-graffiti-wave-duration) linear -2s infinite!important;
}
.dio-graffiti-field.dio-graffiti--navy.dio-graffiti-wave-enabled:not(.is-graffiti-wave-visible)>:is(.dio-graffiti-wave-mask,.dio-graffiti-logo-mask)>:is(.dio-graffiti-wave,.dio-graffiti-logo-wave) {animation-play-state:paused!important}
@keyframes dio-graffiti-flow {from{transform:translateX(0)}to{transform:translateX(-1765.4px)}}
.home-family-band>.dio-graffiti-wave-mask {
  /* Measured from the drawing on resize; no wave beneath orange-outline words. */
  --dio-graffiti-wave-reading-fade:var(--dio-family-wave-fade,linear-gradient(transparent,transparent));
  --dio-graffiti-wave-edge-fade:linear-gradient(#000,#000);
}
html:is(.reduce-motion,.dio-alive-off) .dio-graffiti-field.dio-graffiti--navy.dio-graffiti-wave-enabled>.dio-graffiti-wave-mask>.dio-graffiti-wave {
  animation:none!important;transform:translateX(-320px)!important;transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .dio-graffiti-field.dio-graffiti--navy.dio-graffiti-wave-enabled>.dio-graffiti-wave-mask>.dio-graffiti-wave {animation:none!important;transform:translateX(-320px)!important;transition:none!important}
}
:is([data-graffiti-exempt],#story,#episode.ep-still,[data-patient-account],.patient-account,.home-price-plate) .dio-graffiti-wave-mask {display:none!important}
@media(forced-colors:active){.dio-graffiti-wave-mask{display:none!important}}
@media print{.dio-graffiti-wave-mask{display:none!important}}

/* Owner-approved hidden signature: only the orange pass reveals it, never at rest.
   Its colour band shares the graffiti wave's exact geometry and clock. */
.dio-graffiti-logo-mask {
  --dio-graffiti-wave-strength:1;--dio-graffiti-wave-duration:11s;
  position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;
  -webkit-mask:url('assets/graffiti-logo-place.png?v=2') var(--dio-graffiti-logo-position,var(--dio-graffiti-position,center))/cover no-repeat;
  mask:url('assets/graffiti-logo-place.png?v=2') var(--dio-graffiti-logo-position,var(--dio-graffiti-position,center))/cover no-repeat;
}
.dio-graffiti-logo-mask>.dio-graffiti-logo-wave {
  background:repeating-linear-gradient(115deg,rgba(67,82,95,0) 0,rgba(67,82,95,0) 470px,rgba(67,82,95,.5) 650px,rgba(67,82,95,.8) 800px,rgba(67,82,95,.5) 950px,rgba(67,82,95,0) 1130px,rgba(67,82,95,0) 1600px);
}
html:is(.reduce-motion,.dio-alive-off) .dio-graffiti-logo-mask,
:is([data-graffiti-exempt],#story,#episode.ep-still,[data-patient-account],.patient-account,.home-price-plate) .dio-graffiti-logo-mask {display:none!important}
/* Visibility keeps the clocks together if a window crosses the phone breakpoint. */
@media(max-width:700px){.dio-graffiti-logo-mask{visibility:hidden!important}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.dio-graffiti-logo-mask{display:none!important}}
@media print{.dio-graffiti-logo-mask{display:none!important}}
/* Daniel 2026-10-13 ("two textures stacked"): the end band above the footer is plain silver, so the footer's graffiti stands on its own. */
.dio-cta-band:not([data-graffiti-exempt])::before{background-image:none!important}