:root{--paper:#f3eee7;--red:#3a0000;--black:#090303;--sans:"DM Sans",Arial,sans-serif;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--paper);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{position:fixed;inset:0 0 auto;z-index:90;display:grid;grid-template-columns:1fr minmax(120px,300px) 1fr;align-items:center;gap:24px;padding:18px 24px;font-size:10px;font-weight:650;letter-spacing:.12em;mix-blend-mode:difference}.brand{font-size:16px;letter-spacing:-.04em}.progress{height:1px;background:rgba(255,255,255,.3)}.progress span{display:block;width:0;height:100%;background:#fff}.counter{text-align:right}.counter b{font-weight:650}
.entry{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center;background:#340000;isolation:isolate}.entry:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at center,transparent,rgba(0,0,0,.7))}.entry-art{position:absolute;inset:-15%;z-index:-2;transform-style:preserve-3d;perspective:900px}.entry-slice{position:absolute;inset:0;background:url('assets/Tunnel Vision.psd.png') center/cover no-repeat;mix-blend-mode:screen}.slice-a{clip-path:polygon(0 0,42% 0,70% 100%,0 100%);animation:driftA 16s ease-in-out infinite alternate}.slice-b{clip-path:polygon(45% 0,78% 0,61% 100%,22% 100%);transform:scale(1.5) rotate(16deg);opacity:.6;animation:driftB 20s ease-in-out infinite alternate}.slice-c{clip-path:polygon(80% 0,100% 0,100% 100%,58% 100%);transform:scale(2);opacity:.35;animation:driftC 24s ease-in-out infinite alternate}@keyframes driftA{to{transform:scale(1.35) translate3d(-5%,4%,0) rotate(-6deg)}}@keyframes driftB{to{transform:scale(2) translate3d(8%,-3%,0) rotate(24deg)}}@keyframes driftC{to{transform:scale(2.5) translate3d(-4%,3%,0) rotate(-10deg)}}
.entry-copy{width:min(1100px,calc(100% - 44px));text-align:center;text-shadow:0 10px 40px #000}.kicker{margin:0 0 28px;font-size:10px;font-weight:650;letter-spacing:.16em}h1{margin:0;font-size:clamp(66px,10.3vw,160px);line-height:.76;letter-spacing:-.075em;font-weight:500}h1 em{font-family:var(--serif);font-weight:400}.entry-copy>p:last-child{max-width:450px;margin:38px auto 0;font-size:18px;line-height:1.45}.enter{position:absolute;bottom:22px;font-size:10px;letter-spacing:.14em}.enter span{display:inline-block;margin-left:10px;animation:bob 1.5s ease-in-out infinite}@keyframes bob{50%{transform:translateY(5px)}}
.world{position:relative;height:190vh;background:var(--tone)}.stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1100px;isolation:isolate;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--tone) 83%,white),var(--tone) 60%,#090000 130%)}.stage:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.52) 108%)}.depth-field{position:absolute;inset:-20%;z-index:1;transform-style:preserve-3d;perspective:900px}.frag{position:absolute;display:block;inset:-10%;background-image:var(--art);background-repeat:no-repeat;background-size:120% auto;mix-blend-mode:screen;will-change:transform,opacity;filter:contrast(1.08)}
.f1{clip-path:polygon(0 0,32% 0,48% 100%,0 100%);background-position:left center}.f2{clip-path:polygon(29% 0,58% 0,68% 100%,43% 100%);background-position:35% center;opacity:.78}.f3{clip-path:polygon(58% 0,78% 0,90% 100%,65% 100%);background-position:70% center;opacity:.68}.f4{clip-path:polygon(78% 0,100% 0,100% 100%,88% 100%);background-position:right center}.f5{clip-path:circle(18% at 50% 50%);background-position:center;opacity:.5}
.variant-b .f1,.variant-f .f1{clip-path:polygon(0 12%,48% 0,32% 56%,0 76%)}.variant-b .f2,.variant-f .f2{clip-path:polygon(55% 0,100% 12%,100% 48%,42% 61%)}.variant-b .f3,.variant-f .f3{clip-path:polygon(0 70%,40% 44%,62% 100%,0 100%)}.variant-b .f4,.variant-f .f4{clip-path:polygon(58% 52%,100% 45%,100% 100%,72% 100%)}
.variant-c .frag,.variant-g .frag{background-size:145% auto}.variant-c .f1,.variant-g .f1{clip-path:polygon(0 0,60% 0,34% 42%,0 55%)}.variant-c .f2,.variant-g .f2{clip-path:polygon(62% 0,100% 0,100% 62%,70% 38%)}.variant-c .f3,.variant-g .f3{clip-path:polygon(0 56%,32% 38%,57% 100%,0 100%)}.variant-c .f4,.variant-g .f4{clip-path:polygon(69% 36%,100% 64%,100% 100%,46% 100%)}
.variant-d .frag,.variant-h .frag{background-size:105% auto}.variant-d .f1,.variant-h .f1{clip-path:polygon(0 0,22% 0,46% 100%,0 100%)}.variant-d .f2,.variant-h .f2{clip-path:polygon(22% 0,48% 0,60% 100%,46% 100%)}.variant-d .f3,.variant-h .f3{clip-path:polygon(48% 0,71% 0,74% 100%,60% 100%)}.variant-d .f4,.variant-h .f4{clip-path:polygon(71% 0,100% 0,100% 100%,74% 100%)}
.variant-e .f1,.variant-i .f1{clip-path:ellipse(32% 52% at 12% 55%)}.variant-e .f2,.variant-i .f2{clip-path:ellipse(25% 60% at 45% 40%)}.variant-e .f3,.variant-i .f3{clip-path:ellipse(22% 54% at 73% 58%)}.variant-e .f4,.variant-i .f4{clip-path:ellipse(18% 48% at 94% 42%)}
.world-copy{position:absolute;z-index:10;left:5vw;top:50%;transform:translateY(-50%);width:min(900px,75vw);text-shadow:0 8px 38px rgba(0,0,0,.75);pointer-events:none}.world:nth-of-type(even) .world-copy{left:auto;right:5vw;text-align:right}.world-copy>span{display:block;margin-bottom:22px;font-size:10px;font-weight:650;letter-spacing:.16em}h2{margin:0;font-size:clamp(76px,11vw,170px);line-height:.76;letter-spacing:-.075em;font-weight:500}.world-copy p{margin:34px 0 0;font-family:var(--serif);font-size:clamp(22px,2.3vw,36px);line-height:1.12}.continue{position:absolute;z-index:10;bottom:20px;right:24px;margin:0;font-size:9px;letter-spacing:.14em}
.exit{min-height:100svh;padding:10vw 5vw;background:#3a0000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.exit>p{font-size:10px;letter-spacing:.16em}.exit h2{max-width:1100px;margin:50px 0 0;font-size:clamp(64px,9vw,140px)}.exit h3{margin:40px 0 70px;font-family:var(--serif);font-size:clamp(32px,5vw,74px);font-weight:400}.exit a{width:145px;height:145px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:10px;letter-spacing:.12em;transition:.3s}.exit a:hover{background:var(--paper);color:var(--red);transform:rotate(10deg) scale(1.05)}footer{padding:22px 24px 7px;display:grid;grid-template-columns:1fr 1fr 1fr;font-size:9px;letter-spacing:.12em;background:#090303}footer span:nth-child(2){text-align:center}footer a{text-align:right}
@media(max-width:760px){.topbar{grid-template-columns:1fr 100px auto;padding:15px;gap:12px}.entry-copy{width:calc(100% - 28px)}h1{font-size:clamp(58px,17vw,100px)}.world{height:170vh}.depth-field{inset:-6% -55%}.frag{background-size:auto 95%}.world-copy,.world:nth-of-type(even) .world-copy{left:18px;right:18px;width:auto;text-align:left}h2{font-size:clamp(64px,19vw,115px)}.world-copy p{font-size:23px}footer{grid-template-columns:1fr auto}footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.entry-slice{animation:none}.frag{transform:none!important}.enter span{animation:none}}
.entry-slice{background-image:url('assets/Tunnel Vision.svg');filter:invert(0) grayscale(1) contrast(1000%);mix-blend-mode:normal}
.entry .slice-b,.entry .slice-c{opacity:1}
.entry:after{display:none}.hero-active .grain{display:none}
.frag{filter:invert(1) contrast(1.08)}
.entry,.exit{background:#050505}
.entry{background:#fff}
.world{--tone:#050505!important}
body{color:#ff2800}
.topbar{color:#f3eee7}
footer{color:#f3eee7}
.world{height:230vh}
@media(max-width:760px){.world{height:200vh}}
#world-05 .depth-field{inset:-6%}
#world-05 .frag{background-size:108% auto}
#world-05 .frag:not(.f5){opacity:.34!important}
#world-05 .f5{inset:7%;clip-path:inset(0 round 1px);background-size:contain;background-position:center;opacity:.88;mix-blend-mode:screen}
@media(max-width:760px){#world-05 .depth-field{inset:-2% -12%}#world-05 .frag{background-size:auto 82%}#world-05 .f5{inset:10% 8%;background-size:contain}}
#world-05 .frag:not(.f5){display:none}
#world-06 .depth-field{inset:-4%}
#world-06 .frag{inset:5%;background-size:contain;background-position:center;mix-blend-mode:screen}
#world-06 .f1{clip-path:polygon(0 0,100% 0,66% 54%)}
#world-06 .f2{clip-path:polygon(100% 0,100% 100%,66% 54%)}
#world-06 .f3{clip-path:polygon(100% 100%,0 100%,66% 54%)}
#world-06 .f4{clip-path:polygon(0 100%,0 0,66% 54%)}
#world-06 .f5{clip-path:polygon(66% 42%,69% 46%,74% 44%,73% 49%,77% 52%,73% 56%,75% 61%,70% 62%,67% 66%,64% 62%,60% 65%,59% 60%,55% 57%,59% 53%,56% 49%,61% 47%,62% 43%)}
@media(max-width:760px){#world-06 .depth-field{inset:-1% -10%}#world-06 .frag{inset:7% 4%;background-size:contain}}
@font-face{font-family:"Gotham Regular";src:url('assets/fonts/Gotham-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham Black";src:url('assets/fonts/Gotham-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
.gotham-mode{font-family:"Gotham Regular",Arial,sans-serif}
.gotham-mode h1,.gotham-mode h1 em,.gotham-mode h2,.gotham-mode h3{font-family:"Gotham Black",Arial,sans-serif;font-weight:900;font-style:normal}
.gotham-mode h1,.gotham-mode h2{letter-spacing:-.065em}
.gotham-mode .world-copy p,.gotham-mode .exit h3{font-family:"Gotham Regular",Arial,sans-serif;font-weight:400}
.entry-copy>p:last-child{margin-top:16px;transform:translateY(-7px)}
@media(max-width:760px){
  .mobile-lite .grain{display:none}
  .mobile-lite .entry-slice{animation:none!important;mix-blend-mode:normal;filter:invert(0) grayscale(1) contrast(1000%)}
  .mobile-lite .entry-slice:not(.slice-a){display:none}
  .mobile-lite .slice-a{clip-path:none;inset:0;transform:none;background-size:cover}
  .mobile-lite .depth-field{inset:0!important}
  .mobile-lite .frag{display:none;inset:-4%!important;will-change:auto;mix-blend-mode:normal;filter:invert(1) contrast(1.02);background-size:cover!important}
  .mobile-lite .world:not(#world-05):not(#world-06) .f1,
  .mobile-lite .world:not(#world-05):not(#world-06) .f2,
  .mobile-lite .world:not(#world-05):not(#world-06) .f3,
  .mobile-lite .world:not(#world-05):not(#world-06) .f4,
  .mobile-lite .world:not(#world-05):not(#world-06) .f5{display:block}
  .mobile-lite #world-05 .depth-field{inset:auto!important;width:100svh;height:100vw;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
  .mobile-lite #world-05 .f5{display:block;inset:0!important;background-size:cover!important;background-position:center!important;clip-path:none;transform-origin:center}
  .mobile-lite #world-06 .f1,.mobile-lite #world-06 .f2,.mobile-lite #world-06 .f3,.mobile-lite #world-06 .f4{display:block;inset:-5%!important;background-size:cover!important}
  .mobile-lite #world-06 .f5{display:block;inset:-5%!important;background-size:cover!important;background-position:center!important;clip-path:polygon(66% 42%,69% 46%,74% 44%,73% 49%,77% 52%,73% 56%,75% 61%,70% 62%,67% 66%,64% 62%,60% 65%,59% 60%,55% 57%,59% 53%,56% 49%,61% 47%,62% 43%)}
}