/* Bruno Zabala, rebuild after elliott.mangham.dev (clean-room). */
@font-face{font-family:"Geist";src:url(fonts/Geist-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/Geist-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-symbols2.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+2190-21FF,U+2460-24FF,U+2500-259F}

:root{
  --bg:#121212;
  --fg:#fff;
  --fg-80:rgba(255,255,255,.8);
  --fg-60:rgba(255,255,255,.6);
  --fg-40:rgba(255,255,255,.4);
  --fg-30:rgba(255,255,255,.3);
  --fg-20:rgba(255,255,255,.2);
  --fg-10:rgba(255,255,255,.1);
  --ph:#262626;
  --accent:#5e2bff;
  --sans:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",Menlo,Consolas,monospace;
  --gut:20px;
  --col-gap:40px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:11px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
:focus-visible{outline:1px dashed var(--fg-60);outline-offset:3px}

/* placeholders: flat neutral box, alt + file in small text */
.ph{position:relative;background:var(--ph);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px;font:9px/1.25 var(--mono);color:var(--fg-40);text-align:left}
.ph b{font-weight:400;color:var(--fg-60)}
.ph--tiny{padding:0}
.ph--tiny b,.ph--tiny span{display:none}
.intro .ph,.btn i{transition:opacity .5s}
body:not(.revealed) .intro .ph,body:not(.revealed) .btn i{opacity:0}

/* ---------- desktop stage: one fixed viewport, scroll drives it ---------- */
.spacer{height:400vh}
.stage{position:fixed;inset:0;overflow:hidden}

/* five columns */
.cols{position:fixed;top:0;left:0;right:0;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--col-gap);padding:10px var(--gut) 0;transition:opacity .6s var(--ease)}
.col__h{position:relative;padding-left:12px;font:400 11px/19.2px var(--sans);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.col__h::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.col__body{margin-top:11px;line-height:13.2px}
.row{display:block;min-height:13.2px;white-space:pre-wrap}
.row--gap{height:12px;min-height:12px}
.row--dim{color:var(--fg-40)}
.tag{display:inline-block;position:relative;margin:2px 0 4px;padding:1px 4px;color:var(--fg-80);line-height:13.2px}
.tag::before{content:"";position:absolute;inset:0;border-radius:2px;background:var(--fg-10);transform-origin:left;transform:scaleX(var(--tag,1))}
.tag span{position:relative}
.ulink{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.ulink:hover{background-size:100% 1px}

.intro{display:grid;grid-template-columns:40px 1fr;column-gap:7px;margin-bottom:13px}
.intro .ph{width:40px;height:40px}
.intro b{font-weight:700}

.btn{position:relative;display:inline-block;margin-top:20px;padding:5px 10px;color:var(--fg-40);text-transform:uppercase;line-height:11px;transition:color .25s}
.btn i{position:absolute;width:5px;height:5px;border:1px solid var(--fg);transition:all .3s var(--ease)}
.btn i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.btn i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.btn i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.btn i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.btn:hover{color:var(--fg)}
.btn:hover i{width:51%;height:51%}

/* statement: three paragraphs, scroll swaps them word by word */
.statement{position:absolute;left:0;right:0;bottom:clamp(220px,calc(253px + (100vh - 720px) * .6),420px);height:0}
.para{position:absolute;bottom:0;width:min(440px,31vw);font:500 clamp(22px,2.083vw,30px)/1.2 var(--sans);letter-spacing:-.012em}
.para--1{left:var(--gut);bottom:12px}
.para--2{left:37.5vw}
.para--3{left:66.4vw}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:2px;margin-bottom:-2px}
.w>span{display:inline-block;transform:translateY(var(--y,0%));will-change:transform}
.ag{color:var(--fg-60);border-bottom:1px dashed var(--fg-30);cursor:none}
.ag sup{font-size:.55em;line-height:0;vertical-align:.85em;margin-left:1px}

/* bottom band */
.bottom{position:absolute;left:0;right:0;bottom:20px}
.scroll-ind{position:absolute;left:var(--gut);bottom:190px;display:flex;align-items:center;gap:20px;color:var(--fg-40);text-transform:uppercase;line-height:13.2px}
.scroll-ind__bar{position:relative;width:70px;height:1px;background:var(--fg-20)}
.scroll-ind__bar i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.view-ind{position:absolute;right:40px;bottom:190px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-transform:uppercase;line-height:13.2px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.view-ind__1{color:var(--fg-40)}
.view-ind.is-on{opacity:1;transform:none}

.strip{position:relative;height:150px;margin:0 var(--gut);overflow:visible}
.strip__track{position:absolute;left:0;top:0;display:flex;gap:20px;will-change:transform}
.card{position:relative;flex:0 0 250px;height:150px;border-radius:6px;background:var(--fg-10);overflow:hidden;filter:grayscale(1);transition:filter .3s,box-shadow .3s,opacity .3s}
.card .ph{position:absolute;inset:0;border-radius:6px}
.card{transition:filter .3s,box-shadow .3s,opacity .3s,transform .45s var(--ease)}
.card.is-hover{filter:none;box-shadow:0 0 0 1px var(--fg-60);transform:translateY(-6px) scale(1.06);z-index:1}
.strip.has-hover .card:not(.is-hover){opacity:.75}

/* toggle */
.toggle{position:fixed;left:50%;bottom:198px;z-index:5;transform:translateX(-50%);display:flex;padding:2px;height:31px;border-radius:30px;border:1px solid var(--fg-10);background:rgba(18,18,18,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.toggle__opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:70px;height:25px;font:400 11px/11px var(--sans);color:var(--fg-40);transition:color .3s}
.toggle__opt.is-active{color:var(--fg)}
.toggle__ind{position:absolute;left:2px;top:2px;width:70px;height:25px;border-radius:800px;background:var(--fg-20);transition:transform .5s var(--ease)}
.toggle.is-awards .toggle__ind{transform:translateX(71px)}

/* project window */
.preview{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}
.preview__frame{position:relative;width:min(1012px,calc(100vw - 80px));height:min(629px,calc(100vh - 140px));padding:24px 6px 6px;border-radius:4px;border:1px solid var(--fg-10);background:rgba(18,18,18,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:scale(.97);transition:opacity .3s,transform .45s var(--ease)}
.preview.is-on{visibility:visible}
.preview.is-on .preview__frame{opacity:1;transform:none}
.preview.is-pinned{pointer-events:auto;background:rgba(18,18,18,.35)}
.preview__bar{position:absolute;left:6px;right:6px;top:0;height:24px;display:flex;align-items:center;justify-content:space-between}
.preview__dots circle{fill:none;stroke:var(--fg-20)}
.preview__close{color:var(--fg-40);text-transform:uppercase;font-size:10px;opacity:0;pointer-events:none}
.preview.is-pinned .preview__close{opacity:1;pointer-events:auto}
.preview__close:hover{color:var(--fg)}
.preview__media{height:100%;border-radius:4px;background:rgba(0,0,0,.8);overflow:hidden;overscroll-behavior:contain}
.preview.is-pinned .preview__media{overflow-y:auto}

/* entry page inside the window */
.entry{padding:24px 24px 40px;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:60px;row-gap:36px}
.entry__top{grid-column:1/-1;display:flex;justify-content:space-between;line-height:13.2px;text-transform:uppercase}
.entry__top span:first-child{position:relative;padding-left:12px}
.entry__top span:first-child::before{content:"";position:absolute;left:0;top:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.entry__top span:last-child{color:var(--fg-40)}
.entry__title{font:500 30px/36px var(--sans);letter-spacing:-.012em}
.entry__line{font:500 30px/36px var(--sans);letter-spacing:-.012em;color:var(--fg-40)}
.entry__text{margin-top:24px;line-height:13.2px}
.entry__text p+p{margin-top:13.2px}
.entry__text .row--dim{margin-top:13.2px}
.entry__side{display:flex;flex-direction:column;gap:24px;line-height:13.2px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 20px}
.stat b{display:block;font:500 30px/36px var(--sans);letter-spacing:-.012em}
.stat span{color:var(--fg-60)}
.events li{display:grid;grid-template-columns:70px 1fr;column-gap:12px;padding:6px 0;border-top:1px solid var(--fg-10)}
.events li:last-child{border-bottom:1px solid var(--fg-10)}
.events em{font-style:normal;color:var(--fg-40)}
.steps li{display:grid;grid-template-columns:24px 1fr}
.photos{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.photos .ph{height:210px;border-radius:6px}

/* awards wall */
.awards{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.awards__col{position:absolute;top:0;width:205px;will-change:transform}
.poster{position:absolute;left:0;width:205px;height:290px;opacity:0}
.poster .ph{width:100%;height:100%;padding:12px;font-size:10px}
.poster .ph strong{font:500 18px/22px var(--sans);color:var(--fg-80);margin-bottom:auto}
body.is-awards .cols,body.is-awards .statement,body.is-awards .scroll-ind{opacity:.35}
body.is-awards .strip{opacity:.55}
.cols,.statement,.scroll-ind,.strip{transition:opacity .6s var(--ease)}

/* loader line */
.load-line{position:fixed;left:0;top:calc(50% + 14px);height:1px;width:0;background:var(--fg-20);z-index:2;pointer-events:none}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:20;pointer-events:none}
.cursor__tag{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--accent);overflow:hidden;transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),border-radius .35s}
.cursor__run{position:absolute;left:0;top:0;display:flex;white-space:nowrap;font:400 11px/21px var(--mono);text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-tag .cursor__tag{width:162px;height:21px;left:-81px;top:-10.5px;border-radius:0}
.cursor.is-tag .cursor__run{opacity:1;animation:run 6s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}

/* phone-only parts hidden on desktop */
.m-head,.m-overlay,.m-connect{display:none}

/* ---------- phone (the reference's own layout at 390) ---------- */
@media (max-width:767px){
  body{cursor:auto}
  button{cursor:pointer}
  .cursor,.cols,.load-line,.scroll-ind,.view-ind,.spacer{display:none}
  .stage{position:relative;inset:auto;overflow:visible;padding:78px 12px 102px}
  .m-head{display:flex;position:fixed;top:0;left:0;right:0;z-index:8;height:55px;padding:12px;justify-content:space-between;align-items:flex-start;background:rgba(18,18,18,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .m-head__id{display:flex;gap:7px}
  .m-head__img{width:30px;height:30px}
  .m-head__name{font:700 12px/14.4px var(--mono);text-transform:uppercase;margin-top:1px}
  .m-head__title{font:400 12px/14.4px var(--mono)}
  .m-head__btn{display:flex;flex-direction:column;align-items:flex-end;margin-top:1px;font:400 12px/14.4px var(--mono);text-transform:uppercase}
  .m-overlay{display:block;position:fixed;inset:55px 0 0;z-index:7;overflow-y:auto;padding:25px 12px 120px;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
  .m-overlay.is-open{opacity:1;visibility:visible}
  .m-overlay h2{font:400 24px/28.8px var(--sans);margin:0 0 9px}
  .m-overlay section+section{margin-top:31px}
  .m-overlay .row,.m-overlay li{font-size:13px;line-height:15.6px;min-height:15.6px}
  .m-overlay .tag{margin:6px 0 4px}
  .m-overlay .row--gap{height:10px;min-height:10px}
  .statement{position:static;height:auto}
  .para{position:static;width:auto;font-size:22px;line-height:26.4px;letter-spacing:-.01em}
  .para+.para{margin-top:26px}
  .bottom{position:static;margin:56px -12px 0}
  .strip{margin:0;height:150px;overflow:hidden;touch-action:pan-y}
  .strip__track{gap:12px}
  .strip.has-hover .card:not(.is-hover){opacity:1}
  .m-connect{display:block;margin-top:58px;font-size:13px;line-height:15.6px}
  .m-connect .col__h{font:400 13px/19.2px var(--mono);margin-bottom:6px}
  .m-connect .col__h::before{top:7px;width:6px;height:6px}
  .m-connect .btn{display:flex;align-items:center;justify-content:center;width:100%;height:53px;margin-top:21px;font-size:13px;color:var(--fg-60);border:1px dashed var(--fg-30)}
  .m-connect .btn:hover i{width:5px;height:5px}
  .toggle{bottom:40px}
  .preview{align-items:stretch;padding:63px 8px 84px}
  .preview__frame{width:100%;height:100%}
  .entry{grid-template-columns:1fr;padding:16px 14px 32px;row-gap:24px}
  .entry__title,.entry__line{font-size:22px;line-height:26.4px}
  .photos .ph{height:160px}
  .awards__col,.poster{width:150px}
  .poster{height:212px}
}
@media (prefers-reduced-motion:reduce){
  .cursor.is-tag .cursor__run{animation:none}
}