/* One theme, one composition. A single scroll-linked zoom; three hand-drawn callouts. */
:root{--section-gap:112px}
.theme-details{padding:var(--section-gap) 0 0}
.details-panel{display:grid;grid-template-columns:.63fr 1.37fr;align-items:center;gap:38px;padding:42px;background:#fff3f6;border-radius:34px}


.details-visual{position:relative;min-width:0;border-radius:23px;overflow:hidden;box-shadow:0 12px 26px #4f263510}
.detail-desktop{display:block;width:100%;height:auto;aspect-ratio:2000/1300;object-fit:cover}
/* One continuous zoom, driven by native scrolling. No wheel/touch interception. */
.theme-details.has-scroll-scene{position:relative;height:var(--scene-height);padding-bottom:0}
.has-scroll-scene .details-panel{position:sticky;top:var(--scene-top,104px)}
.has-scroll-scene .detail-desktop{transform-origin:58% 28%;will-change:transform;backface-visibility:hidden}
.detail-callouts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.detail-callout{opacity:1}
.has-scroll-scene .detail-callout{opacity:0}
.callout-label rect{fill:#211d1b;stroke:#fff;stroke-width:3;filter:drop-shadow(0 3px 2px #281b3433)}
.callout-label text{fill:#fff;font-family:inherit;font-size:32px;font-weight:700;letter-spacing:-.5px;text-anchor:middle}
.callout-arrow,.callout-tip{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px #211d1b55)}
.callout-arrow{stroke-dasharray:1;stroke-dashoffset:var(--arrow-draw,0)}
.callout-tip{opacity:var(--tip-opacity,1)}
.portal-section{padding-block:var(--section-gap);scroll-margin-top:110px}
.portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.portal-card{display:flex;flex-direction:column;align-items:flex-start;border-radius:30px;background:#fff3f6;padding:26px 25px 30px;transition:background .25s,box-shadow .25s;min-width:0;scroll-margin-top:120px}
.portal-card:hover,.portal-card:focus-visible{background:#fce8ef;box-shadow:0 8px 22px #47273309;outline-offset:5px}
.portal-art{display:block;width:min(100%,184px);height:166px;margin:0 auto 20px;overflow:visible;filter:drop-shadow(0 4px 3px #2418200d)}
.portal-card h3{font-size:24px;letter-spacing:-.035em;line-height:1.15;margin-bottom:10px}
.portal-card p{font-size:14px;line-height:1.45;color:#827079;max-width:205px}
.portal-art .bubble-front,.portal-art .reply-dot,.portal-art .screen-heart,.portal-art .spark-big,.portal-art .spark-small{transform-box:fill-box;transform-origin:center}
.mail-letter{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.portal-contact:is(:hover,:focus-visible) .mail-letter{transform:translateY(-9px)}
.portal-story:is(:hover,:focus-visible) .screen-heart{animation:heart-beat .95s ease both}
.portal-inspo:is(:hover,:focus-visible) .spark-big{animation:spark-twinkle .85s ease both}
.portal-inspo:is(:hover,:focus-visible) .spark-small{animation:spark-twinkle .75s .18s ease both}
.portal-support:is(:hover,:focus-visible) .bubble-front{animation:reply-pop .65s ease both}
.portal-support:is(:hover,:focus-visible) .reply-dot{animation:reply-dot .7s .12s ease both}
.portal-support:is(:hover,:focus-visible) .d2{animation-delay:.23s}.portal-support:is(:hover,:focus-visible) .d3{animation-delay:.34s}
@keyframes reply-pop{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
@keyframes reply-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes heart-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.14)}50%{transform:scale(.98)}75%{transform:scale(1.08)}}
@keyframes spark-twinkle{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.16) rotate(12deg)}70%{transform:scale(.96) rotate(-4deg)}}
.hero-refresh .site-footer{border-top:1px solid #f7e7ed;padding-top:38px}.hero-refresh .footer-main nav{color:#73636b}.hero-refresh .footer-main nav a{padding:6px 12px;border-radius:99px}.hero-refresh .footer-main nav a:hover{background:#fff3f6;text-decoration:none}

.portal-card:focus-visible{border-radius:30px}

@media(max-width:1000px){.details-panel{padding:30px;gap:24px}.portal-grid{gap:14px}.portal-card{padding:24px 20px}.portal-card h3{font-size:22px}.portal-card p{font-size:13px}.portal-art{height:150px}}
@media(max-width:760px){
.callout-label text{font-size:35px}.callout-arrow,.callout-tip{stroke-width:1.6}
:root{--section-gap:64px}.theme-details{padding:var(--section-gap) 0 0}.details-panel{grid-template-columns:1fr;gap:28px;padding:28px 20px 20px;width:calc(100% - 32px);border-radius:27px}
.details-copy{text-align:center}.details-visual{border-radius:15px}
.portal-section{padding-block:var(--section-gap)}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portal-card{padding:18px 16px 22px;border-radius:24px}.portal-art{height:124px;margin-bottom:16px}.portal-card h3{font-size:21px}.portal-card p{font-size:12px}.portal-card:focus-visible{border-radius:24px}
}
@media(max-width:360px){.portal-card{padding-inline:13px}.portal-card h3{font-size:19px}.portal-art{height:112px}}
@media(prefers-reduced-motion:reduce){.theme-details *,.portal-art *{animation:none!important;transition:none!important}}

/* Keep the entire pinned composition visible on shorter laptop/tablet screens. */
@media(min-width:761px) and (max-height:780px){
 .details-panel{max-width:calc((100svh - 150px)*2.1);padding:30px;gap:30px}
}
@media(max-width:760px) and (max-height:800px){
 .details-panel{gap:18px;padding:24px 20px 20px;max-width:calc((100svh - 300px)*1.538)}
 
}

/* Keep the phrase intact, with one as the visual focus. */
.details-copy h2{display:flex;flex-direction:column;gap:4px;letter-spacing:-.045em}
.details-lead{display:block;white-space:nowrap;font-size:clamp(24px,2.5vw,32px);line-height:1.1;font-weight:600}
.details-one{display:block;font-size:clamp(48px,5vw,64px);line-height:1;letter-spacing:-.04em;font-weight:700}
@media(max-width:760px){.details-copy h2{gap:2px}.details-lead{font-size:25px}.details-one{font-size:50px}}