/* /videos: a dark theatre. Frames run past like film, each screen goes full width with its title over the edge.
   Grounds: charcoal -> charcoal (SOCIAL MEDIA) -> torn into lime (THE WAY) -> charcoal. Playing a video lowers the lights. */
.vd-page{background:#101111}

/* 1 · marquee */
.vhero{position:relative;overflow:hidden;padding:64px 0 0;background:radial-gradient(ellipse 70% 60% at 20% 0,rgba(182,255,0,.12),rgba(182,255,0,0) 70%),#101111}
.vhero-in{position:relative;z-index:2;max-width:1600px;margin:0 auto;box-sizing:border-box}
.vh{font-size:clamp(88px,16vw,280px);line-height:.8;margin:22px 0 40px}
.vindex{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.vindex a{display:grid;grid-template-columns:auto auto auto;align-items:baseline;gap:14px;text-decoration:none;color:#f4f4ee;padding:14px 20px 14px 0;border-top:2px solid #f4f4ee;min-width:300px;min-height:44px;transition:color .15s,border-color .15s}
.vindex a:hover{color:#b6ff00;border-color:#b6ff00}
.vindex .n{font:800 13px/1 Manrope,sans-serif;letter-spacing:.14em;color:#b6ff00}
.vindex .t{font:800 34px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.01em}
.vindex .d{font-size:12px;color:#c9ccd1;letter-spacing:.1em}
.strips{position:relative;z-index:1;margin:72px 0 -150px;transform:rotate(-4deg);transform-origin:50% 50%}
.strip{position:relative;width:120vw;margin-left:-10vw;background:#050606;padding:22px 0;overflow:hidden}
.strip::before,.strip::after{content:'';position:absolute;left:0;right:0;height:12px;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 14px,#2a2d2c 14px 30px)}
.strip::before{top:5px}.strip::after{bottom:5px}
.strip.s2{margin-top:10px}
.track{display:flex;gap:10px;width:max-content}
.track img{width:300px;height:169px;object-fit:cover;display:block;background:#fff;filter:grayscale(.15)}
.js .s1 .track{animation:roll 60s linear infinite}
.js .s2 .track{animation:roll 70s linear infinite reverse}
@keyframes roll{to{transform:translateX(-50%)}}

/* 2/3 · the screens */
.vid{position:relative;padding:220px 0 120px;color:#f4f4ee}
.v1{background:#101111}
.v2{background:#b6ff00;color:#101111;padding-top:150px}
.vid-in{position:relative;max-width:1600px;margin:0 auto;padding:0 64px;box-sizing:border-box;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.vnum{grid-column:1/-1;margin:0 0 -0.32em;font:800 clamp(120px,19vw,320px)/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(244,244,238,.18);user-select:none}
.v2 .vnum{-webkit-text-stroke-color:rgba(16,17,17,.22)}
.vtitle{grid-column:1/9;position:relative;z-index:3;font-size:clamp(84px,12vw,210px);line-height:.8;margin:0 0 -.36em;color:#b6ff00;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.v2 .vtitle{color:#101111;text-shadow:none}
.player{grid-column:1/-1;position:relative;z-index:2;margin:0 -64px;background:#000;box-shadow:0 60px 120px rgba(0,0,0,.6)}
.v2 .player{box-shadow:0 50px 90px rgba(50,70,0,.45)}
.player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff}
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:flex;align-items:center;gap:16px;padding:0 28px 0 18px;min-height:76px;border:0;border-radius:999px;cursor:pointer;
  background:#101111;color:#f4f4ee;font:800 14px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 18px 50px rgba(0,0,0,.45);transition:transform .15s,background .15s}
.play:hover{transform:scale(1.05);background:#b6ff00;color:#101111}
.play:focus-visible{outline:3px solid #b6ff00;outline-offset:5px}
.pi{width:46px;height:46px;border-radius:50%;background:#b6ff00;position:relative;flex:none}
.pi::after{content:'';position:absolute;left:18px;top:14px;border-left:15px solid #101111;border-top:9px solid transparent;border-bottom:9px solid transparent}
.play:hover .pi{background:#101111}.play:hover .pi::after{border-left-color:#b6ff00}
.pd{color:#c9ccd1;font-weight:600}.play:hover .pd{color:#101111}
.player.on .play{display:none}
.vtext{grid-column:7/13;margin:44px 0 0;font-size:20px;line-height:1.6;color:#d6d8dc}
.v2 .vtext{color:#1c1e1d;grid-column:1/7}
.js .player{transition:transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
.js .player.pre{transform:scale(.92);filter:brightness(.35)}
.tear{position:absolute;left:0;right:0;top:-1px;height:70px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath fill='%23101111' d='M0 0H1200V30L1181 44 1163 33 1144 49 1126 37 1107 52 1088 40 1069 46 1050 34 1031 50 1012 41 993 55 974 39 955 46 936 33 917 50 898 41 879 53 860 38 841 44 822 31 803 48 784 40 765 54 746 37 727 45 708 34 689 49 670 39 651 52 632 36 613 43 594 32 575 50 556 42 537 55 518 38 499 46 480 35 461 51 442 40 423 53 404 37 385 44 366 33 347 49 328 41 309 54 290 39 271 45 252 34 233 50 214 42 195 52 176 37 157 43 138 32 119 47 100 40 81 53 62 38 43 45 24 34 0 30Z'/%3E%3C/svg%3E") 0 0/1200px 70px repeat-x}

/* lights down while a video plays */
.lights-veil{position:fixed;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
.lights .lights-veil{opacity:.82}
.lights .player.on{z-index:7}

.vafter{background:#101111;padding:120px 0}
.vafter-in{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;max-width:1600px;margin:0 auto;box-sizing:border-box}
.va-h{font-size:clamp(56px,7vw,120px)}

@media(prefers-reduced-motion:reduce){.js .s1 .track,.js .s2 .track{animation:none}.js .player.pre{transform:none;filter:none}.lights-veil{transition:none}}

@media(max-width:900px){
  .vhero{padding-top:40px}
  .vh{font-size:27vw;margin-bottom:28px}
  .vindex{display:block}.vindex li+li{margin-top:10px}
  .vindex a{min-width:0;width:100%}
  .vindex .t{font-size:30px}
  .strips{margin:48px 0 -90px}
  .track img{width:190px;height:107px}
  .vid{padding:150px 0 80px}
  .v2{padding-top:110px}
  .vid-in{display:block;padding:0 20px}
  .vtitle{font-size:22vw;margin-bottom:-.3em}
  .player{margin:0 -20px}
  .play{min-height:60px;padding:0 20px 0 12px;gap:12px;font-size:12px}
  .pi{width:38px;height:38px}.pi::after{left:15px;top:11px;border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .vtext{font-size:17px;margin-top:28px}
  .vafter{padding:80px 0}
  .va-h{font-size:17vw}
  .vafter .btn{width:100%}
}