@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0}body{font:15px/1.5 Archivo,sans-serif;background:#fff;color:#000}a{color:inherit;text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;position:sticky;top:0;z-index:9;mix-blend-mode:difference;color:#fff;font-weight:600;font-size:13px}
.top b{font-family:'Archivo Black'}
.huge{font-family:'Archivo Black';text-transform:uppercase;line-height:.82;letter-spacing:-.04em;font-size:22vw;padding:0 10px;white-space:nowrap}
@media(min-width:900px){.huge{font-size:16vw;padding:0 20px}}
.blk{background:var(--b);color:var(--t,#000);padding:24px 14px;position:relative;overflow:hidden}@media(min-width:900px){.blk{padding:40px 24px}}
.mq{display:flex;white-space:nowrap}.mq div{animation:mq 18s linear infinite;padding-right:4vw}.mq.rev div{animation-direction:reverse}@keyframes mq{to{transform:translateX(-100%)}}.rm .mq div{animation:none}
.grid{display:grid;grid-template-columns:1fr;gap:0}@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--b);color:var(--t,#000);padding:18px 14px 22px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .3s;border-top:2px solid #000}
.tile:hover{filter:saturate(1.4)}.tile h3{font-family:'Archivo Black';font-size:40px;line-height:.88;text-transform:uppercase;letter-spacing:-.03em}.tile small{font-weight:600;font-size:12px;text-transform:uppercase}
@media(min-width:900px){.tile{min-height:380px;padding:24px}.tile h3{font-size:54px}}
.tile.big{grid-column:1/-1;min-height:420px}.tile.big h3{font-size:64px}@media(min-width:900px){.tile.big h3{font-size:130px}}
.cta{display:inline-block;background:#000;color:#fff;padding:12px 18px;border-radius:99px;font-weight:600;margin-top:16px}
[data-r]{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}[data-r].in{clip-path:inset(0)}
/* story */
.sp{display:grid;grid-template-columns:1fr}@media(min-width:900px){.sp{grid-template-columns:1fr 1fr;min-height:100vh}.sp>.l{position:sticky;top:0;height:100vh}}
.sp .l{background:var(--b);padding:70px 14px 24px;display:flex;flex-direction:column;justify-content:flex-end;transition:background .8s}
.sp .l h1{font-family:'Archivo Black';text-transform:uppercase;font-size:64px;line-height:.85;letter-spacing:-.04em}@media(min-width:900px){.sp .l{padding:40px}.sp .l h1{font-size:112px}}
.sp .r{padding:24px 14px 60px}@media(min-width:900px){.sp .r{padding:120px 60px}}
.sp .r p{font-size:19px;line-height:1.6;max-width:560px;margin-bottom:1.1em}
.pq{font-family:'Archivo Black';font-size:48px;line-height:.9;text-transform:uppercase;margin:30px 0;letter-spacing:-.03em}
.tag{display:inline-block;border:2px solid #000;padding:2px 8px;font-weight:600;font-size:12px;margin:0 4px 6px 0;text-transform:uppercase}
.src{border-top:2px solid #000;margin-top:30px;padding-top:14px;font-size:14px}.src li{margin:6px 0 6px 18px}
/* timeline */
.tl{position:relative;padding:20px 14px 80px}@media(min-width:900px){.tl{padding:40px 24px 120px}}
.yr{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:2px solid #000;padding:16px 0}@media(min-width:900px){.yr{grid-template-columns:260px 1fr 1fr 1fr;gap:20px}}
.yr .y{font-family:'Archivo Black';font-size:34px;line-height:.9}@media(min-width:900px){.yr .y{font-size:72px}}
.yr a{display:block;background:var(--b);padding:12px;font-weight:600;margin-bottom:8px}.yr a small{display:block;font-weight:400;font-size:12px}
html,body{overflow-x:hidden}.mq{overflow:hidden}.shot .top{position:absolute;width:100%}
.shot .mq div{animation:none}