[data-sig="delta-belt"]{height:260dvh;position:relative;--belt-height:128px}
[data-sig="delta-belt"] .belt-stage{position:sticky;top:0;height:calc(100dvh - 88px);min-height:660px;padding:28px 0 16px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
[data-sig="delta-belt"] .hero-heading{display:grid;grid-template-columns:1.8fr 1fr;align-items:end;gap:56px;padding-bottom:24px;flex:none}
[data-sig="delta-belt"] h1{font-size:clamp(64px,6.2vw,88px)}
[data-sig="delta-belt"] .hero-heading .tag{margin-bottom:12px}
[data-sig="delta-belt"] .hero-intro p{font-size:18px;max-width:36ch;margin-bottom:16px}
[data-sig="delta-belt"] .hero-photo{position:relative;flex:1;min-height:160px;width:calc(100% - 96px);margin:0 auto;overflow:hidden}
[data-sig="delta-belt"] picture{position:absolute;inset:0;display:block}
[data-sig="delta-belt"] picture img{object-position:50% 45%}
[data-sig="delta-belt"] .photo-caption{position:absolute;bottom:18px;left:24px;right:24px;color:var(--paper);display:flex;justify-content:space-between;gap:16px;font-size:16px;font-weight:600;z-index:2;text-shadow:0 2px 5px #171e26;background:#171e2635;padding:8px 12px;max-width:560px}
[data-sig="delta-belt"] .mat-foreground{position:absolute;left:-3%;right:-3%;bottom:-30px;height:70px;background:url('../../img/mat-layer.webp') center 80%/cover;transform:translateY(30px);opacity:.65;clip-path:polygon(0 55%,100% 20%,100% 100%,0 100%)}
[data-sig="delta-belt"] .belt-window{position:relative;height:180px;margin-top:20px;display:flex;align-items:flex-start;padding-top:12px;flex:none;isolation:isolate}
[data-sig="delta-belt"] .belt-track{width:800%;height:var(--belt-height);display:flex;flex:none;filter:drop-shadow(0 9px 7px #171e2630)}
[data-sig="delta-belt"] .belt-piece{height:100%;position:relative;background-color:var(--belt);background-image:repeating-linear-gradient(0deg,#ffffff18 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#171e261a 0 1px,transparent 1px 4px);width:12.5%;border-top:2px solid #ffffff40;border-bottom:2px solid #171e2630;box-shadow:inset 0 10px 12px #ffffff18,inset 0 -8px 10px #171e261a;display:grid;place-items:center}
[data-sig="delta-belt"] .belt-piece:after{content:'';position:absolute;inset:12px 0;border-top:2px dashed #ffffff65;border-bottom:2px dashed #ffffff65}
[data-sig="delta-belt"] .woven-rank{font:600 28px Kanit,Arial,sans-serif;color:#f7f8f7;text-shadow:0 1px 3px #171e2640}
[data-sig="delta-belt"] .belt-piece:nth-child(-n+3) .woven-rank{color:#24282c;text-shadow:none}
[data-sig="delta-belt"] .belt-caption{display:flex;justify-content:space-between;font-size:14px;flex:none}
[data-sig="delta-belt"] .rank-name{font-weight:600}
[data-sig="delta-belt"] .knot{position:absolute;right:3%;top:-160px;width:240px;height:320px;opacity:0;filter:drop-shadow(0 6px 4px #171e2640);overflow:visible}
[data-sig="delta-belt"] .knot-cloth{fill:url(#delta-knot-weave);stroke:#11161a;stroke-width:2;stroke-linejoin:round}
[data-sig="delta-belt"] .knot-seam{fill:none;stroke:#9da2a7;stroke-opacity:.65;stroke-width:1.5;stroke-dasharray:3 2}
[data-sig="delta-belt"] .belt-finish .hero-photo{width:70%;margin-left:48px}
[data-sig="delta-belt"] .belt-finish picture[data-frame="2"] img{object-position:50% 32%}
.worst-data [data-sig="delta-belt"] h1{font-size:clamp(36px,4.2vw,60px);max-width:18ch}
@supports(animation-timeline:view()){
[data-sig="delta-belt"]{view-timeline-name:--belt-view;view-timeline-axis:block}
[data-sig="delta-belt"] .mat-foreground{animation:delta-mat linear both;animation-timeline:--belt-view}
@keyframes delta-mat{from{transform:translateY(30px)}to{transform:translateY(0)}}}
@media(max-width:760px){
[data-sig="delta-belt"]{height:220dvh;--belt-height:80px}
[data-sig="delta-belt"] .belt-stage{height:calc(100dvh - 146px);min-height:640px;padding:20px 0 12px}
[data-sig="delta-belt"] .hero-heading{display:block;padding-bottom:20px}
[data-sig="delta-belt"] h1{font-size:52px;max-width:9ch}
[data-sig="delta-belt"] .hero-intro{margin-top:12px}
[data-sig="delta-belt"] .hero-intro p{font-size:16px;max-width:32ch;margin-bottom:12px}
[data-sig="delta-belt"] .hero-photo{width:100%;min-height:160px}
[data-sig="delta-belt"] .photo-caption{left:12px;right:12px;bottom:12px;font-size:12px;padding:6px 8px}
[data-sig="delta-belt"] .belt-window{height:132px;margin-top:16px;padding-top:12px}
[data-sig="delta-belt"] .belt-piece:after{inset:9px 0;border-width:1px}
[data-sig="delta-belt"] .woven-rank{font-size:22px}
[data-sig="delta-belt"] .knot{right:0;top:-90px;width:124px;height:190px}
[data-sig="delta-belt"] .belt-caption{font-size:12px;gap:12px}
[data-sig="delta-belt"] .belt-caption>span:first-child{max-width:22ch}
[data-sig="delta-belt"] .belt-finish .hero-photo{width:73%;margin-left:0}
[data-sig="delta-belt"] .belt-finish picture[data-frame="2"] img{object-position:50% 15%}
.worst-data [data-sig="delta-belt"] h1{font-size:32px;max-width:15ch}
.worst-data [data-sig="delta-belt"] .belt-stage{min-height:720px}}
@media(prefers-reduced-motion:reduce){
[data-sig="delta-belt"]{height:auto}
[data-sig="delta-belt"] .belt-stage{position:relative;height:auto}
[data-sig="delta-belt"] .hero-photo{flex:none;height:360px}
[data-sig="delta-belt"] .mat-foreground{animation:none}}
[data-sig="delta-belt"] .belt-finish h1{font-size:64px}
[data-sig="delta-belt"] .belt-finish picture[data-frame="2"] img{object-position:50% 55%}
@media(max-width:760px){[data-sig="delta-belt"] .belt-finish h1{font-size:40px}[data-sig="delta-belt"] .belt-finish picture[data-frame="2"] img{object-position:50% 25%}}