/* /work: a dark index of live work that continues the header. Rows are the content; a floating browser frame previews the row under the pointer. */
.work-index{position:relative;background:var(--ink);color:var(--mist);padding:104px 0 110px}
.wi-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 48px;align-items:end;margin-bottom:54px}
.work-index h1{color:#fff}
.wi-kicker{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-family:'jetbrains',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--nardo)}
.wi-pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--live)}
.wi-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--live);animation:wi-pulse 2.4s ease-out infinite}
@keyframes wi-pulse{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}
.wi-lede{max-width:470px;margin:0;font-size:19px;line-height:1.55;color:var(--nardo-soft)}

/* Filters. */
.wi-filters{display:flex;flex-wrap:wrap;gap:10px}
.wi-filters button{display:inline-flex;align-items:baseline;gap:9px;padding:9px 16px;border:1px solid #ffffff2e;border-radius:999px;background:none;color:var(--line);font-size:15px;font-weight:600;letter-spacing:-.01em;transition:background .2s,color .2s,border-color .2s}
.wi-filters button span{font-family:'jetbrains',ui-monospace,monospace;font-size:11px;font-weight:400;color:var(--nardo)}
.wi-filters button:hover{border-color:#ffffff73;color:#fff}
.wi-filters button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.wi-filters button[aria-pressed="true"] span{color:var(--muted)}

/* The index. */
.wi-list{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid #ffffff1f}
.wi-list li[hidden]{display:none}
.wi-row{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,3.8fr) minmax(0,2.4fr) minmax(0,3fr);gap:24px;align-items:baseline;padding:26px 6px 24px;border-bottom:1px solid #ffffff1f;color:inherit}
.wi-row:hover,.wi-row:focus-visible{color:inherit}
.wi-row:focus-visible{outline-offset:-3px}
.wi-thumb{display:none}
.wi-name{font-size:clamp(34px,3.7vw,60px);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--paper);transition:color .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
.wi-what{font-size:16px;line-height:1.45;color:var(--nardo-soft)}
.wi-kind{white-space:nowrap;font-family:'jetbrains',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nardo)}
.wi-domain{justify-self:end;display:inline-flex;align-items:center;gap:12px;font-family:'jetbrains',ui-monospace,monospace;font-size:13px;color:var(--line);white-space:nowrap}
.wi-domain b{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--live)}
.wi-domain b::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--live)}
.wi-go{color:var(--nardo);transition:color .25s,transform .3s}
.wi-row:hover .wi-name,.wi-row:focus-visible .wi-name{color:var(--red);transform:translateX(14px)}
.wi-row:hover .wi-go,.wi-row:focus-visible .wi-go{color:#fff;transform:translate(3px,-3px)}
@media(hover:hover){.wi-list:hover .wi-row:not(:hover) .wi-name{color:var(--muted)}}
.wi-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The floating preview. JavaScript moves it with the pointer and only shows it on wide screens with a mouse. */
.wi-preview{position:fixed;left:0;top:0;z-index:50;width:min(460px,34vw);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -30px #000d,0 0 0 1px #ffffff14;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}
.wi-preview.is-on{opacity:1;visibility:visible;transition:opacity .22s}
.wi-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--mist);border-bottom:1px solid #11131514;font-family:'jetbrains',ui-monospace,monospace;font-size:11px;color:var(--graphite)}
.wi-bar i{width:7px;height:7px;border-radius:50%;background:#11131526}
.wi-bar-domain{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-bar b{font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--live)}
.wi-shots{position:relative;display:block;aspect-ratio:8/5;background:var(--mist)}
.wi-shots img,.wi-shots video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .2s}
.wi-shots .is-on{opacity:1}

/* Row ten: a short daylight break with the page's call to action. */
.wi-record{padding:72px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.wi-record-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 56px;align-items:center}
.wi-record-figure{margin:0;font-family:'anton',Impact,sans-serif;font-size:clamp(44px,4.6vw,72px);line-height:1;white-space:nowrap;color:var(--ink)}
.wi-record-figure span{margin-left:.06em;color:var(--red)}
.wi-record-grid div p{max-width:560px;margin:0 0 10px;font-size:19px;line-height:1.5}
.wi-record-label{font-size:13px;color:var(--muted)}
.wi-record-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.wi-record-actions .button{margin:0}

@media(max-width:1100px){.wi-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 24px}.wi-what{grid-column:1}.wi-kind{display:none}.wi-domain{grid-row:1;grid-column:2}.wi-record-grid{grid-template-columns:auto minmax(0,1fr)}.wi-record-actions{grid-column:1/-1}}
@media(max-width:860px){.wi-head{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px),(hover:none){
 .wi-preview{display:none}
 .wi-row{grid-template-columns:minmax(0,1fr);padding:22px 0 24px}
 .wi-thumb{display:block;background:var(--graphite);width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;border-radius:5px;margin-bottom:16px;box-shadow:0 0 0 1px #ffffff14}
 .wi-domain{grid-row:auto;grid-column:auto;justify-self:start;margin-top:6px}
 .wi-row:hover .wi-name,.wi-row:focus-visible .wi-name{transform:none}
}
@media(max-width:600px){
 .work-index{padding:64px 0 72px}
 .wi-head{margin-bottom:36px}
 .wi-lede{font-size:17px}
 .wi-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter)*-1);padding:2px var(--gutter);scrollbar-width:none}
 .wi-filters::-webkit-scrollbar{display:none}
 .wi-filters button{flex:none}
 .wi-record{padding:56px 0}
 .wi-record-grid{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media(prefers-reduced-motion:reduce){.wi-pulse::after{animation:none}.wi-name,.wi-go{transition:none}}