/* Fine, static paper grain lives behind content and follows each surface's radius.
   The closing gradient already uses the same light-surface asset. */
:root{
 --brand-grain:url('assets/paper-grain.svg?v=brand-texture-1');
 --brand-grain-inverse:url('assets/paper-grain-inverse.svg');
 --brand-grain-size:192px 192px;
}

/* The animated story has one backdrop; its transparent scenes stay transparent. */
body:not(.motion-story) :is(#family-record,#memory,#timeline),
.motion-story .solution-field,
.site-header::before,
.faq-ending,
.life-module,
.life-wishes,
.life-contact-monogram,
.life-property-icon,
.vault-audio-art,
.vault-members i,
.vault-members i+i,
.vault-memory-list>.selected,
.vault-category.selected,
.vault-person-reference i,
.vault-timeline .vault-tile-jump::before,
.timeline-selection{
 background-image:var(--brand-grain);
 background-size:var(--brand-grain-size);
 background-repeat:repeat;
}

/* Inverse grain adds a faint light fiber to deep teal without changing its fill. */
.preservation-panel,
.trust-concept,
.button.primary,
.button.primary:hover,
.site-header .header-auth-actions>.primary:focus-visible,
.vault-audio-play{
 background-image:var(--brand-grain-inverse);
 background-size:var(--brand-grain-size);
 background-repeat:repeat;
}

/* Match the static mockups as the audio artifact changes size through the story. */
.artifact-carrier .vault-audio-art,
.artifact-carrier .vault-audio-play{
 background-size:calc(192px / var(--media-scale,1)) calc(192px / var(--media-scale,1));
}

/* Ghost controls gain texture only with their existing colored state. */
.faq-item[open] .faq-indicator,
.faq-item.is-open .faq-indicator,
.faq-item>summary:focus-visible .faq-indicator,
.faq-question:focus-visible .faq-indicator,
.proof-rail-controls button:focus-visible,
.proof-rail-controls button:active:not(:disabled){
 background-image:var(--brand-grain);
 background-size:var(--brand-grain-size);
 background-repeat:repeat;
}
@media(hover:hover){
 .faq-item>summary:hover .faq-indicator,
 .faq-question:hover .faq-indicator,
 .proof-rail-controls button:hover:not(:disabled){
  background-image:var(--brand-grain);
  background-size:var(--brand-grain-size);
  background-repeat:repeat;
 }
}