/* addon/story/006_story_on_the_thread — comments: docs/inv06_css_notes.md (moved out for the before-tap budget, A1489) */
.st006 {
  --st006-cw: min(640px, 100cqw - 12px);
  --st006-sp: 120px;
  position: relative; isolation: isolate; container-type: inline-size; overflow-x: hidden; overflow-x: clip;
  padding: var(--k-section-pad) 0; background: var(--k-light-ground); color: var(--k-ink); text-align: center;
}
.st006__thread { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.st006__thread-x { position: absolute; top: 0; left: var(--k-thread-x); width: 0; height: 0; visibility: hidden; }
.st006::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--k-thread-x); width: var(--k-thread-w); margin-left: calc(var(--k-thread-w) / -2); background: var(--k-foil); pointer-events: none; }
.st006.is-anim::before, .st006:not(.is-anim) .st006__thread { display: none; }
.st006-card { position: relative; width: var(--st006-cw); margin: 0 auto; }
.st006-card__shade { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; transform: translate(4px, 8px); filter: blur(7px); }
.st006-card__shade path { fill: rgb(47 42 36 / .16); }
.st006-card__paper { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgb(47 42 36 / .07)); }
.st006-card__fill { fill: var(--k-card); }
.st006-card__rim { fill: none; stroke: var(--k-foil); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.st006-card__body { position: relative; z-index: 2; padding: 64px 28px 76px; }
.st006__rule { width: 170px; margin: 10px auto 0; }
.st006__text { max-width: 58ch; margin: 24px auto 0; }
.st006__p { font: 400 1.12rem/1.65 var(--k-font-body); color: var(--k-ink); text-wrap: pretty; }
.st006__p + .st006__p { margin-top: 1em; }
.st006__heart { display: block; width: 16px; height: 14px; margin: 24px auto 0; fill: var(--k-foil, #B08D4F); filter: drop-shadow(.5px 1px .6px rgb(47 42 36 / .3)); }
.st006__spray { z-index: 3; width: var(--st006-sp); right: -2px; bottom: calc(var(--st006-sp) * -.78); transform: rotate(6deg); }
.st006.is-near .st006__spray .k-spray__tint--petal, .js.motion-reduce .st006 .st006__spray .k-spray__tint--petal { -webkit-mask-image: url("assets/st-br-day-petal.webp"), url("assets/st-br-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/st-br-day-petal.webp"), url("assets/st-br-day.webp"); mask-composite: intersect; }
.st006.is-near .st006__spray :is(.k-spray__tint--boost, .k-spray__tint--deep), .js.motion-reduce .st006 .st006__spray :is(.k-spray__tint--boost, .k-spray__tint--deep) { -webkit-mask-image: url("assets/st-br-day-petal.webp"), url("assets/st-br-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/st-br-day-petal.webp"), url("assets/st-br-day.webp"); mask-composite: intersect; }
.st006.is-near .st006__spray .k-spray__tint--leaf, .js.motion-reduce .st006 .st006__spray .k-spray__tint--leaf { -webkit-mask-image: url("assets/st-br-day-leaf.webp"), url("assets/st-br-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/st-br-day-leaf.webp"), url("assets/st-br-day.webp"); mask-composite: intersect; }
.st006.is-near .st006__spray .k-spray__tint--gold, .js.motion-reduce .st006 .st006__spray .k-spray__tint--gold { -webkit-mask-image: url("assets/st-br-day-gold.webp"), url("assets/st-br-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/st-br-day-gold.webp"), url("assets/st-br-day.webp"); mask-composite: intersect; }
.st006 .k-spray__tint { display: none; }
.st006.is-near .k-spray__tint, .js.motion-reduce .st006 .k-spray__tint { display: block; }
.st006 .k-spray__base { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (min-width: 768px) {
  .st006 { --st006-sp: 150px; }
  .st006__spray { right: calc(var(--st006-sp) * -.22); }
  .st006-card__body { padding: 76px 64px 92px; }
}
@media (min-width: 1200px) {
  .st006 { --st006-cw: min(720px, 100cqw - 12px); --st006-sp: 170px; }
  .st006-card__body { padding: 84px 80px 104px; }
}