.pin{height:calc(var(--n, 3) * 190vh);height:calc(var(--n, 3) * 190svh);background:var(--field-deep);color:var(--white)}.pin__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}.pin__grid{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:center}.pin__heading{color:var(--white);margin-bottom:var(--s3);max-width:16ch}.pin__steps{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}.pin__step{opacity:.34;transition:opacity var(--dur-slow) var(--ease-out)}.pin__step.is-active{opacity:1}.pin__step-title{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s1);color:var(--white);font-size:clamp(1.125rem,2vw,1.5rem)}.pin__step-no{font-size:.8em;letter-spacing:.06em}.pin__step-body{margin:0;max-width:46ch;color:#ffffffc7;font-size:var(--t-small);line-height:1.55}.pin__step-body{display:none}.pin__step.is-active .pin__step-body{display:block}.pin__right{position:relative;aspect-ratio:3 / 4;max-height:44vh;max-height:44svh}.pin__panel{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:var(--r-lg);opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.pin__panel.is-active{opacity:1;transform:none}.pin__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.pin__field{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:var(--s1);text-align:center;padding:var(--s3)}.pin__field--pale{background:var(--field-pale);color:var(--teal)}.pin__field--soft{background:var(--field-soft);color:var(--teal)}.pin__field--deep{background:var(--white);color:var(--teal)}.pin__stat{margin:0;font:500 clamp(2rem,3.6vw,3.25rem)/1.1 var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.pin__stat-label{margin:0;color:currentColor;opacity:.64}.pin__grid{grid-template-rows:auto auto 1fr}.pin__left{display:contents}.pin__heading{order:1}.pin__right{order:2;width:100%;max-width:340px;margin-inline:auto}.pin__steps{order:3;align-content:start}@media(min-width:900px){.pin__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;gap:var(--s6)}.pin__left{display:block}.pin__heading{margin-bottom:var(--s6)}.pin__right{max-height:72vh;max-height:72svh;margin-inline:0;max-width:none}.pin__step-body{display:block}}.pin__steps{--pin-slot: 172px;position:relative;min-height:calc(var(--pin-slot) * 2);display:block}.pin__step{position:absolute;inset-inline:0;bottom:0;margin:0;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.pin__step.is-active{opacity:1;transform:none;pointer-events:auto}.pin__step.is-prev{opacity:.42;transform:translateY(calc(var(--pin-slot) * -1))}.pin__step.is-gone{opacity:0;transform:translateY(calc(var(--pin-slot) * -2))}.pin__step.is-active .pin__step-body,.pin__step.is-prev .pin__step-body{display:block}@media(max-width:899px){.pin__steps{--pin-slot: 196px}}@media(prefers-reduced-motion:reduce){.pin__step{transition-duration:1ms}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/section-pin-steps.css.map */