*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#E6E6E6}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#0d0d0d;-webkit-font-smoothing:antialiased}

.stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none;background:#E6E6E6}
.stage:focus{outline:none}
.layer{position:sticky;top:0;width:100%;height:100vh;height:100dvh;overflow:hidden}
.spacer{display:none;height:400000px}
.bg-mob{display:none;position:absolute;inset:0;padding:0 2vw;overflow:hidden;font-weight:700;font-size:40vw;line-height:.8;letter-spacing:-.02em;word-break:break-all;overflow-wrap:anywhere;color:#DCDCDC;user-select:none;pointer-events:none;transition:color .6s ease}

.bg-word{position:absolute;top:9vh;left:-0.5vw;display:flex;flex-direction:column;font-weight:700;font-size:36vw;line-height:.82;letter-spacing:-.02em;color:#DCDCDC;white-space:nowrap;user-select:none;pointer-events:none}

.photo{position:absolute;left:50%;top:50%;width:min(38.3vw,54vh,552px);height:auto;aspect-ratio:551/498;object-fit:cover;translate:-50% -50%;display:block;will-change:transform;transition:filter .6s ease}
.stage.dim .photo{filter:brightness(.45)}

.title{position:absolute;z-index:3;top:clamp(20px,3.5vh,36px);left:50%;translate:-50% 0;margin:0;font-size:clamp(22px,3.5vw,50px);font-weight:700;letter-spacing:-.01em;white-space:nowrap}

.corner{position:absolute;top:clamp(24px,3.8vh,38px);font-size:clamp(16px,2vw,28px);font-weight:700}
.corner.tl{left:clamp(16px,3.6vw,52px)}
.corner.tr{right:clamp(16px,3.5vw,50px)}

.bottom-bar{position:absolute;bottom:clamp(18px,3.4vh,36px);left:clamp(16px,3.6vw,52px);right:clamp(16px,3.5vw,50px);display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-weight:700}
.corner-word{font-size:clamp(16px,2vw,28px)}

.cta{position:relative;z-index:3;display:inline-flex;padding:6px 4px 10px;font-size:clamp(18px,2.6vw,38px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:#0d0d0d;text-decoration:none;will-change:transform;--spring:cubic-bezier(.34,1.56,.64,1)}
@supports (transition-timing-function: linear(0, 1)){
  .cta{--spring:linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 61.6%, 1.001 66.4%, 1.002 72.7%, 1)}
}
.cta:focus{outline:none}
.cta:focus-visible{outline:3px solid #0d0d0d;outline-offset:6px}
.cta .ch{display:inline-block;height:1.12em;line-height:1.12;overflow:hidden;vertical-align:bottom}
.cta .roll{display:flex;flex-direction:column;transition:transform .9s var(--spring)}
.cta:hover .roll,.cta:focus-visible .roll{transform:translateY(-1.12em)}
.i-0 .roll{transition-delay:0ms}.i-1 .roll{transition-delay:18ms}.i-2 .roll{transition-delay:36ms}.i-3 .roll{transition-delay:54ms}.i-4 .roll{transition-delay:72ms}.i-5 .roll{transition-delay:90ms}.i-6 .roll{transition-delay:108ms}.i-7 .roll{transition-delay:126ms}.i-8 .roll{transition-delay:144ms}.i-9 .roll{transition-delay:162ms}.i-10 .roll{transition-delay:180ms}.i-11 .roll{transition-delay:198ms}.i-12 .roll{transition-delay:216ms}.i-13 .roll{transition-delay:234ms}.i-14 .roll{transition-delay:252ms}.i-15 .roll{transition-delay:270ms}.i-16 .roll{transition-delay:288ms}.i-17 .roll{transition-delay:306ms}.i-18 .roll{transition-delay:324ms}.i-19 .roll{transition-delay:342ms}.i-20 .roll{transition-delay:360ms}.i-21 .roll{transition-delay:378ms}

.clip{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.green{position:absolute;top:0;left:50%;width:min(1400px,96vw);margin:0 0 0 calc(min(1400px,96vw) / -2);text-align:center;font-size:clamp(34px,5vw,72px);line-height:1.33;font-weight:700;letter-spacing:-.005em;color:#12F542;will-change:transform;transform:translate3d(0,85vh,0)}

/* "it's too hard to read!" toggle — sits under the title, appears mid-scroll */
.read-toggle{position:absolute;z-index:4;top:calc(clamp(20px,3.5vh,36px) + clamp(22px,3.5vw,50px) * 1.06);left:50%;translate:-50% 0;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;background:none;border:0;color:inherit;font-family:inherit;font-size:clamp(12px,1vw,14px);font-weight:700;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.read-toggle.show{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.read-toggle .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:transparent;color:inherit;line-height:1;letter-spacing:0;white-space:nowrap;transition:transform .3s,background-color .35s ease,color .35s ease}
.read-toggle[aria-pressed="true"] .pill{background:#12F542;color:#0d0d0d}
.read-toggle:hover .pill{transform:rotate(-2deg) scale(1.05)}
.read-toggle:focus{outline:none}
.read-toggle:focus-visible .pill{outline:2px solid currentColor;outline-offset:3px}
.read-toggle .knob{width:22px;height:14px;border-radius:999px;border:1.5px solid currentColor;background:transparent;position:relative;flex:none;transition:background-color .35s ease,border-color .35s ease}
.read-toggle[aria-pressed="true"] .knob{background:#0d0d0d;border-color:#0d0d0d}
.read-toggle .knob::after{content:"";position:absolute;top:1.5px;left:1.5px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.read-toggle[aria-pressed="true"] .knob::after{transform:translateX(8px);background:#12F542}

.stage,.bg-word,.title,.corner,.bottom-bar,.cta,.read-toggle{transition:background-color .6s ease,color .6s ease}
.read-toggle{transition:opacity .6s ease,visibility 0s linear .6s,color .6s ease}
.read-toggle.show{transition:opacity .6s ease,visibility 0s,color .6s ease}
.stage.dim{background:#4A4A4A}
.stage.dim .bg-word,.stage.dim .bg-mob{color:#525252}
.stage.dim .title,.stage.dim .corner,.stage.dim .bottom-bar,.stage.dim .cta,.stage.dim .read-toggle{color:#F2F2F2}
.stage.dim .cta:focus-visible{outline-color:#F2F2F2}
html.dim-root,html.dim-root body{background:#4A4A4A}

/* phones: native scrolling, bigger photo, GREYALLEY broken into letters */
@media (max-width: 700px){
  .stage{overflow-y:auto;touch-action:pan-y;overscroll-behavior:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stage::-webkit-scrollbar{display:none}
  .spacer{display:block}
  .bg-word{display:none}
  .bg-mob{display:block}
  .photo{width:min(57.5vw,81vh,828px)}
}

@media (prefers-reduced-motion: reduce){.cta .roll{transition:none}.read-toggle,.read-toggle .pill,.read-toggle .knob::after,.photo{transition:none}}