/* stage: composing the illustrated journal */
.illustrated-story{background:#eeeade;border-block:1px solid #d6d8c7}
.illustrated-story .section-heading{align-items:center}
.motion-control{display:flex;align-items:center;gap:9px;margin:0;font-size:11px;font-weight:400;color:var(--ink);cursor:pointer}
.motion-control input{width:17px;height:17px;margin:0;flex:none}
.story-feature{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:6%;margin-top:38px}
.care-illustration{margin:0;overflow:hidden;border:1px solid #c7ceb9;border-radius:160px 160px 5px 5px;background:#e4e8d7}
.care-illustration svg{display:block;width:100%;height:auto}
.care-illustration figcaption{display:flex;justify-content:space-between;gap:15px;padding:17px 23px;background:#e4e6d6;color:#52684f;font-size:8px;letter-spacing:1.1px}
.care-illustration figcaption span:last-child{letter-spacing:0;text-align:right}
.story-copy h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,3.1vw,46px);letter-spacing:-1px;line-height:1.15;margin:0 0 22px}
.story-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.85}
.story-copy .text-link{margin-top:12px}
.illustration-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:55px}
.visual-note{border:1px solid #cbd0bc;border-radius:5px;overflow:hidden;background:#f5f2e9}
.visual-note svg{display:block;width:100%;height:auto}
.visual-note>div{padding:27px 30px}
.visual-note .eyebrow{font-size:9px;margin-bottom:12px}
.visual-note h3{font-family:Georgia,'Times New Roman',serif;font-size:29px;margin:0 0 15px;letter-spacing:-.6px}
.visual-note p:not(.eyebrow){font-size:13px;color:var(--muted);margin-bottom:0;line-height:1.8}
.illustration-credit{font-size:10px;color:var(--muted);margin:23px 0 0;line-height:1.7}
.source-review summary{font-size:12px}
.location-card p{overflow-wrap:anywhere}
/* stage: adding restrained living ink */
.illustrated-story .ink-reveal{stroke-dasharray:1;stroke-dashoffset:1;animation:foundation-ink 5s ease-in-out infinite alternate}
.illustrated-story .contact-halo{transform-origin:298px 269px;animation:foundation-contact 6s ease-in-out infinite}
.illustrated-story .window-glow{animation:foundation-light 9s ease-in-out infinite}
.illustrated-story .strand-drift{transform-origin:280px 140px;animation:foundation-strands 7s ease-in-out infinite alternate}
.illustrated-story .neuron-lights{animation:foundation-neuron 5s ease-in-out infinite}
@keyframes foundation-ink{0%,15%{stroke-dashoffset:1;opacity:.3}80%,100%{stroke-dashoffset:0;opacity:.9}}
@keyframes foundation-contact{0%,100%{transform:scale(.95);opacity:.45}50%{transform:scale(1.13);opacity:.8}}
@keyframes foundation-light{0%,100%{opacity:.13}50%{opacity:.3}}
@keyframes foundation-strands{from{transform:translateY(-2px)}to{transform:translateY(3px)}}
@keyframes foundation-neuron{0%,100%{opacity:.35}50%{opacity:1}}
.illustrated-story:has(#motionPause:checked) svg *{animation-play-state:paused!important}
/* stage: adapting for smaller screens */
@media(max-width:1000px){
.story-feature{grid-template-columns:1.2fr 1fr;gap:5%}
.care-illustration{border-radius:100px 100px 5px 5px}
.story-copy>p:not(.eyebrow){font-size:13px}
.care-illustration figcaption{flex-direction:column;gap:4px}
.care-illustration figcaption span:last-child{text-align:left}
}
@media(max-width:740px){
.illustrated-story .section-heading{align-items:flex-start}
.story-feature{grid-template-columns:1fr;gap:28px;margin-top:25px}
.illustration-pair{grid-template-columns:1fr;gap:22px;margin-top:32px}
.care-illustration{border-radius:90px 90px 5px 5px}
.visual-note>div{padding:24px}
.story-copy h3{font-size:36px}
.care-illustration figcaption{flex-direction:row}
}
@media(prefers-reduced-motion:reduce){
.illustrated-story svg *{animation:none!important}
.illustrated-story .ink-reveal{stroke-dashoffset:0}
}