@font-face{font-family:'RUNN Tight';src:url('assets/inter-tight-500.ttf') format('truetype');font-weight:500;font-display:swap}
/* RUNN: monochrome film, changing letterforms and the rhythm of a stride. */
#project-dialog:has([data-project-slug=runn]){background:#080808;color:#f1f0ed}
#project-body[data-project-slug=runn]>.sheet-heading{align-items:start;margin-bottom:24px}
#project-body[data-project-slug=runn]>.sheet-heading h2{font-size:15px;letter-spacing:-.02em;line-height:1.4}
#project-body[data-project-slug=runn]>.sheet-heading>.micro{max-width:none;font-size:9px}
.runn-intro{position:relative;isolation:isolate;height:clamp(500px,calc(94svh - 220px),760px);margin:0 0 55px;overflow:hidden;background:#111}
.runn-image{position:absolute;inset:0;z-index:-2}
.runn-image video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.38);object-position:center}
.runn-intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0004 0%,#0000 50%,#000b 100%);pointer-events:none}
.runn-type{padding:12px 32px 0}
.runn-type h3{position:relative;height:clamp(200px,24vw,340px);margin:0;line-height:.9}
.runn-font{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;font-size:clamp(150px,23vw,320px);line-height:.85;animation:runn-font-cycle 12s linear infinite;animation-delay:calc(var(--variant)*-4s);animation-play-state:paused;opacity:0;pointer-events:none;letter-spacing:-.06em}
.runn-font-sans{font-family:'RUNN Tight',Arial,sans-serif;font-weight:500;letter-spacing:-.065em}
.runn-font-narrow{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:600;font-size:clamp(170px,26vw,360px);letter-spacing:-.025em}
.runn-font-serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(135px,21vw,290px)}
.runn-letter{display:inline-block;will-change:transform;animation:runn-letter-arrive 1.3s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--letter)*90ms);animation-play-state:paused}
.runn-active .runn-font,.runn-active .runn-letter{animation-play-state:running}
.runn-horizon{font-family:'RUNN Tight',Arial,sans-serif;font-weight:500;font-size:clamp(40px,6.3vw,88px);line-height:1.02;letter-spacing:-.04em;margin:5px 0 0;display:flex;flex-direction:column;align-items:flex-end}
.runn-horizon>span{display:block;animation:runn-word-arrive 1.3s cubic-bezier(.2,.7,.2,1) both;animation-delay:.35s;animation-play-state:paused}
.runn-horizon>span:last-child{animation-delay:.52s}
.runn-active .runn-horizon>span{animation-play-state:running}
.runn-intro-foot{position:absolute;bottom:26px;left:32px;right:32px;display:flex;justify-content:space-between;gap:20px;align-items:end;font-size:12px;line-height:1.6}
.runn-intro-foot>span{color:#d1d1cd;font-size:10px}
.runn-watch{font-size:15px;padding:12px 0;border-bottom:1px solid #fff8;display:flex;gap:35px;align-items:center}
.runn-watch>span{font-size:25px;transition:translate .2s}
.runn-watch:hover>span{translate:3px 3px}
#runn-film{scroll-margin-top:28px;outline-offset:8px}
#project-body[data-project-slug=runn]>.project-story{grid-template-columns:1fr 1.7fr;gap:50px;margin:75px 0}
#project-body[data-project-slug=runn]>.project-story p{font-size:clamp(20px,2.4vw,34px);line-height:1.5;letter-spacing:-.025em;max-width:42ch}
#project-body[data-project-slug=runn] .additional-films{border-top:1px solid #ffffff30;padding-top:40px}
#project-body[data-project-slug=runn] .project-credits{border-color:#ffffff30}
@keyframes runn-font-cycle{0%,27%{opacity:1}31%,97%{opacity:0}100%{opacity:1}}
@keyframes runn-letter-arrive{from{translate:0 45%;rotate:8deg;filter:blur(12px);opacity:0}to{translate:0 0;rotate:0deg;filter:blur(0);opacity:1}}
@keyframes runn-word-arrive{from{translate:0 35px;filter:blur(12px);opacity:0}to{translate:0 0;filter:blur(0);opacity:1}}
.runn-still .runn-font{animation:none;opacity:0}.runn-still .runn-font-sans{opacity:1}
.runn-still .runn-letter,.runn-still .runn-horizon>span{animation:none;filter:none;opacity:1}
@media(max-width:600px){#project-body[data-project-slug=runn]>.sheet-heading{display:block}#project-body[data-project-slug=runn]>.sheet-heading>.micro{margin-top:10px}.runn-intro{height:580px;max-height:77svh;min-height:480px;margin-bottom:35px}.runn-type{padding:35px 16px 0}.runn-type h3{height:32vw}.runn-font{font-size:25vw}.runn-font-narrow{font-size:30vw}.runn-font-serif{font-size:24vw}.runn-horizon{font-size:clamp(35px,10vw,60px);margin-top:24px}.runn-intro-foot{left:16px;right:16px;bottom:20px;gap:15px}.runn-intro-foot>span{font-size:9px;max-width:18ch}.runn-watch{font-size:12px;gap:16px}#project-body[data-project-slug=runn]>.project-story{grid-template-columns:1fr;gap:20px;margin:45px 0}#project-body[data-project-slug=runn]>.project-story p{font-size:22px}.runn-image video{object-position:43% center}}
@media(prefers-reduced-motion:reduce){.runn-font{animation:none;opacity:0}.runn-font-sans{opacity:1}.runn-letter,.runn-horizon>span{animation:none;opacity:1;filter:none}.runn-watch>span{transition:none}}
/* Italic capitals need room for their overhang, unlike the tight sans variant. */
.runn-font-serif{gap:.055em}
/* Quick, staggered changes between the original sans and two fixed-width voices. */
.runn-font-narrow{font-family:Menlo,Consolas,'Liberation Mono',monospace;font-size:clamp(140px,21vw,290px);font-weight:400;letter-spacing:-.075em;gap:0;font-style:normal}.runn-font-serif{font-family:'Courier New',Courier,monospace;font-size:clamp(145px,22vw,305px);font-weight:700;font-style:normal;letter-spacing:-.07em;gap:0}.runn-font{animation:none;opacity:1}.runn-font .runn-letter{animation:runn-glyph-switch 1.8s steps(1,end) infinite;animation-delay:calc(var(--variant)*-.6s + var(--letter)*65ms);animation-play-state:paused;opacity:0}.runn-active .runn-font .runn-letter{animation-play-state:running}@keyframes runn-glyph-switch{0%,32%{opacity:1;filter:blur(0)}33%,100%{opacity:0;filter:blur(0)}}
.runn-still .runn-font{opacity:0}.runn-still .runn-font-sans{opacity:1}.runn-still .runn-font .runn-letter{animation:none;opacity:1}
@media(max-width:600px){.runn-font-narrow{font-size:24vw}.runn-font-serif{font-size:25vw}}
@media(prefers-reduced-motion:reduce){.runn-font{opacity:0}.runn-font-sans{opacity:1}.runn-font .runn-letter{animation:none;opacity:1}}
.runn-font,.runn-font-narrow,.runn-font-serif{font-size:clamp(140px,21vw,290px);letter-spacing:0;gap:0}.runn-font .runn-letter{width:.66em;text-align:center;flex:0 0 .66em}@media(max-width:600px){.runn-font,.runn-font-narrow,.runn-font-serif{font-size:24vw}}