.af{--gap:12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"hero""text""rail";row-gap:48px;display:grid;position:relative}.af-hero{z-index:2;aspect-ratio:830/1708;perspective:1800px;grid-area:hero;justify-self:center;width:min(78vw,330px);position:relative}.af-tilt{position:absolute;inset:0;transform:rotate(.6deg)rotateY(-13deg)rotateX(4deg)}.af-float,.af-layer{position:absolute;inset:0}.af-layer{z-index:1;backface-visibility:hidden}.af-layer.is-active{z-index:2}.af-text{grid-area:text}.af-title{font-size:clamp(1.6rem,2.6vw,2.5rem)}.af-copy{display:grid}.af-copy>*{grid-area:1/1}.af-sizer{visibility:hidden;pointer-events:none}.af-rail.is-paging{scroll-snap-type:none}.af-nav{align-items:center;gap:14px;display:flex}.af-btn{border:1px solid var(--color-line-strong);width:60px;height:60px;color:var(--color-bright);border-radius:999px;place-items:center;transition:border-color .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);display:grid;position:relative}.af-btn:before{content:"";border-radius:inherit;background:linear-gradient(135deg, var(--color-cyan), #b9a2e6 50%, var(--color-pink));-webkit-mask-composite:xor;opacity:0;padding:1px;transition:opacity .6s cubic-bezier(.22,1,.36,1);position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.af-btn svg{transition:transform .6s cubic-bezier(.22,1,.36,1)}.af-btn:hover{border-color:#0000}.af-btn:hover:before{opacity:1}.af-btn.is-prev:hover svg{transform:translate(-4px)}.af-btn.is-next:hover svg{transform:translate(4px)}.af-btn:active{transform:scale(.96)}.af-btn:focus-visible{outline:1px solid var(--color-cyan);outline-offset:4px}.af-progress{background:var(--color-line-strong);width:96px;height:1px;margin-left:14px;display:block;position:relative;overflow:hidden}.af-index{display:none}.af-progress i{background:var(--color-bright);transform-origin:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1);position:absolute;inset:0}.af-intro{z-index:1;pointer-events:none;position:absolute;inset:0}.af-ghost{position:absolute;top:0;left:0}.af.is-intro{cursor:pointer}.af-railwrap{grid-area:rail;position:relative}.af-rail{gap:var(--gap);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;display:flex;position:relative;overflow:auto hidden}.af-rail::-webkit-scrollbar{display:none}.af-thumb{scroll-snap-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:0 0 64px;padding:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}.af-thumb[aria-current=true]{opacity:.28;cursor:default}.af-chev{display:none}@media (min-width:768px){.af{--sh:clamp(480px, calc(100svh - 110px), 900px);--mr:clamp(24px, 12vw, 220px);--hh:calc(var(--sh) * .94);--th:calc((var(--hh) - 3 * var(--gap)) / 4);--tw:calc(var(--th) * .486);--hw:calc(var(--hh) * .486);grid-template-columns:var(--tw) minmax(0, 1fr) calc(var(--hw) + var(--mr));height:var(--sh);grid-template-areas:"rail text hero";align-items:center;gap:0 clamp(40px,6vw,112px)}.af-hero{width:var(--hw);justify-self:start}.af-text{max-width:30rem;height:var(--hh);padding-top:calc(var(--hh) * .13);flex-direction:column;align-self:center;display:flex}.af-title{font-size:clamp(2rem,3.3vw,3.4rem);line-height:1.05}.af-lead{font-size:clamp(1.1rem,1.35vw,1.4rem);line-height:1.55}.af-sizer{display:none}.af-index{border-top:1px solid var(--color-line);margin-top:auto;animation:.9s cubic-bezier(.22,1,.36,1) both af-index-in;display:block}.af-index-row{border-bottom:1px solid var(--color-line);text-align:left;width:100%;color:var(--color-faint);align-items:baseline;gap:18px;padding:13px 0;transition:color .6s cubic-bezier(.22,1,.36,1);display:flex;position:relative}.af-index-row:hover{color:var(--color-muted)}.af-index-num{transition:color .6s cubic-bezier(.22,1,.36,1)}.af-index-title{letter-spacing:.005em;font-size:1rem}.af-index-line{background:var(--color-bright);transform-origin:0;width:100%;height:1px;transition:transform 1.1s cubic-bezier(.22,1,.36,1);position:absolute;bottom:-1px;left:0;transform:scaleX(0)}.af-index-row.is-on{color:var(--color-bright);cursor:default}.af-index-row.is-on .af-index-num{color:var(--color-cyan)}.af-index-row.is-on .af-index-line{transform:scaleX(1)}.af-text .af-nav{margin-top:28px}.af-copy{margin-bottom:28px}@media (max-height:860px){.af-text{padding-top:calc(var(--hh) * .03)}}.af-rail{width:var(--tw);height:var(--hh);scroll-snap-type:y mandatory;overscroll-behavior-x:auto;flex-direction:column;overflow:hidden auto}.af-thumb{flex:0 0 var(--th);width:var(--tw);scroll-snap-align:none}.af-thumb:nth-child(4n+1){scroll-snap-align:start}.af-thumb:not([aria-current=true]):hover{opacity:.7}.af-chev{width:32px;height:24px;color:var(--color-faint);place-items:center;transition:color .3s;display:grid;position:absolute;left:50%;translate:-50%}.af-chev:hover{color:var(--color-bright)}.af-chev.is-up{bottom:calc(100% + 8px)}.af-chev.is-down{top:calc(100% + 8px)}}@keyframes af-index-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.af-index{animation:none}.af-index-line,.af-index-row,.af-thumb,.af-btn,.af-btn svg,.af-btn:before,.af-progress i{transition:none}}
