.hf-story-hero__end{display:block}.hf-story-hero__badge{border-radius:var(--hf-radius-sm)}.hf-story-hero__intro{font-size:var(--hf-fs-body-l);line-height:1.5;color:var(--hf-ink);text-wrap:pretty}.hf-sp{--sp-pic: 112px;--sp-link: 64px;max-width:760px;margin:var(--hf-space-8) auto 0;padding:0;list-style:none}.hf-sp__stop{position:relative;display:grid;grid-template-columns:var(--sp-pic) minmax(0,1fr);grid-template-areas:"pic words";column-gap:var(--hf-space-5);align-items:center;padding-bottom:calc(var(--sp-link) + var(--hf-space-3))}.hf-sp__stop--flip{grid-template-columns:minmax(0,1fr) var(--sp-pic);grid-template-areas:"words pic"}.hf-sp__pic{grid-area:pic;display:flex;justify-content:center}.hf-sp__pic{position:relative;isolation:isolate;align-items:center}.hf-sp__pic:before{content:"";position:absolute;z-index:-1;width:calc(var(--sp-pic) + var(--hf-space-4));aspect-ratio:1;border-radius:50%;background:var(--hf-cream)}.hf-sp__stop--made .hf-sp__pic:before{width:min(100%,420px)}.hf-sp__pic img{width:auto;height:200px}.hf-sp__words{grid-area:words;display:flex;flex-direction:column;gap:var(--hf-space-2)}.hf-sp__num{font-size:var(--hf-fs-small);font-weight:var(--fw-bold);letter-spacing:.06em;color:var(--hf-orange-text)}.hf-sp__title{font-size:var(--hf-fs-title);font-weight:var(--fw-bold);line-height:1.15;text-wrap:balance}.hf-sp__body{font-size:var(--hf-fs-body);line-height:1.55;color:var(--hf-ink-2);text-wrap:pretty}.hf-sp__link{position:absolute;left:calc(var(--sp-pic) / 2);right:calc(var(--sp-pic) / 2);bottom:var(--hf-space-2);height:var(--sp-link);color:var(--hf-ink-3, var(--hf-ink-2))}.hf-sp__path{display:block;width:100%;height:100%;overflow:visible}.hf-sp__stop--flip .hf-sp__path{transform:scaleX(-1)}.hf-sp__arrow{position:absolute;bottom:-9px;right:-7px;width:14px;height:12px}.hf-sp__stop--flip .hf-sp__arrow{right:auto;left:-7px}.hf-sp__stop--to-mid .hf-sp__arrow{right:auto;left:calc(50% - 7px)}.hf-sp__stop--made{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "words";row-gap:var(--hf-space-5);justify-items:center}.hf-sp__stop--made .hf-sp__pic img{width:100%;max-width:540px;height:auto}.hf-sp__stop--made .hf-sp__words{max-width:34em}.hf-sp__stop--made .hf-sp__title{font-size:var(--hf-fs-h3)}.hf-sp__stop--made .hf-sp__body{font-size:var(--hf-fs-body-l)}.hf-sp__turn{margin-top:var(--hf-space-5);font-size:var(--hf-fs-body-l);font-weight:var(--fw-bold);line-height:1.4;color:var(--hf-ink)}.hf-sp__tagline{margin-top:var(--hf-space-3);font-size:var(--hf-fs-h3);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:var(--hf-track-tight);color:var(--hf-orange-text)}.hf-sp__stop--made .hf-sp__link{left:0;right:0}.hf-sp__stop--made .hf-sp__arrow{right:auto;left:calc(50% - 7px)}@media(min-width:760px){.hf-sp{--sp-pic: 200px;--sp-link: 88px}.hf-sp__pic img{height:300px}.hf-sp__stop{column-gap:var(--hf-space-8)}}.hf-sp.is-armed .hf-sp__pic,.hf-sp.is-armed .hf-sp__words,.hf-sp.is-armed .hf-sp__arrow{opacity:0}.hf-sp.is-armed .hf-sp__path{clip-path:inset(0 0 100% 0)}.hf-sp .is-in .hf-sp__pic{animation:hf-sp-pop var(--hf-dur-slow) var(--hf-ease) both}.hf-sp .is-in .hf-sp__words{animation:hf-sp-rise var(--hf-dur-slow) var(--hf-ease) .15s both}.hf-sp .is-in .hf-sp__path{animation:hf-sp-draw .8s linear .45s both}.hf-sp .is-in .hf-sp__arrow{animation:hf-sp-fade var(--hf-dur-fast) var(--hf-ease) 1.2s both}@keyframes hf-sp-pop{0%{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:none}}@keyframes hf-sp-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes hf-sp-draw{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}@keyframes hf-sp-fade{0%{opacity:0}to{opacity:1}}@media(max-width:759.98px){.hf-story-hero{padding-top:var(--hf-space-6)}.hf-story-hero__grid{grid-template-areas:"head" "media" "body";row-gap:var(--hf-space-4)}.hf-story-hero__head{gap:var(--hf-space-4)}.hf-story-hero__media{aspect-ratio:7 / 6}.hf-story-hero__badge{left:var(--hf-space-3);bottom:var(--hf-space-3);padding:var(--hf-space-2) var(--hf-space-3)}.hf-story-hero__intro{font-size:1.0625rem}.hf-sp__title{font-size:var(--hf-fs-lead)}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/hf-story-hero.css.map */