/* A wide film ribbon. The selected website is flat, large and already open. */
.reel-experience[hidden],.reel-fallback[hidden]{display:none!important}
.reel-work.is-reel{max-width:none;padding:90px 0 75px;overflow:hidden}
.reel-work.is-reel .work-heading{margin:0 var(--space) 24px;align-items:center}
.reel-work,.reel-work *{overflow-anchor:none}
.reel-experience{position:relative}
.reel-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 var(--space) 6px;opacity:var(--work-meta,1)}
.reel-hint{font-size:11px;color:#8c919b;letter-spacing:.015em}
.reel-hint>span{display:inline-block;margin-left:18px;color:#e7ebf1;font-size:18px;vertical-align:-1px}
.reel-views{display:flex;gap:22px}
.reel-views button{font:inherit;font-size:11px;padding:12px 0;background:none;border:0;border-bottom:1px solid transparent;color:#868991;cursor:pointer;white-space:nowrap}
.reel-views button[aria-pressed=true]{border-color:#f4f4f4;color:white}
.reel-views button:hover{color:white}
.reel-stage{position:relative;width:100%;height:clamp(350px,min(44vw,62svh),640px);aspect-ratio:auto;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;cursor:grab}
.reel-stage[data-dragging]{cursor:grabbing}
.reel-stage:focus-visible{outline:1px solid #b4c9ed;outline-offset:-3px}
.reel-surface{inset:0;background:transparent}
.reel-canvas{display:block;width:100%;height:100%}
.reel-cursor{position:absolute;left:var(--pointer-x,50%);top:var(--pointer-y,50%);display:grid;place-items:center;width:57px;height:57px;border:1px solid #fff6;border-radius:50%;background:#10131bd9;backdrop-filter:blur(9px);font-size:24px;font-weight:300;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .18s linear}
@media(hover:hover) and (pointer:fine){.reel-stage:hover .reel-cursor{opacity:1}.reel-stage{cursor:none}.reel-stage[data-dragging] .reel-cursor{background:#fff;color:#101010}}
.reel-caption{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) auto;align-items:center;gap:24px;margin:13px var(--space) 34px;min-height:75px;opacity:var(--work-meta,1)}
.reel-identity{display:flex;gap:22px;align-items:center;min-width:0}
.reel-count{font-size:12px;white-space:nowrap;color:#f3f3f3;font-variant-numeric:tabular-nums;align-self:flex-start;padding-top:9px}
.reel-count i{font-style:normal;color:#636970;margin-left:3px}
.reel-identity h3{font-size:clamp(28px,3vw,52px);font-weight:420;letter-spacing:-.055em;line-height:1.06;margin:0}
.reel-title{color:white;text-decoration:none}
.reel-kind{font-size:10px;letter-spacing:.065em;text-transform:uppercase;color:#bfcada}
.reel-tag{font-size:12px;line-height:1.5;color:#92969e;margin:8px 0 0;max-width:290px}
.reel-open{display:flex;gap:26px;align-items:center;font-size:11px;padding:13px 0;border-bottom:1px solid #aab4c65e;white-space:nowrap}
.reel-open>span{font-size:26px;font-weight:300}.reel-open:hover{color:#b6d0fc;border-color:#b6d0fc}
.reel-index-row{display:flex;gap:22px;align-items:center;margin:0 var(--space);padding-top:23px;border-top:1px solid #ffffff24;opacity:var(--work-meta,1)}
.reel-index{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:15px;min-width:0;flex:1}
.reel-index-link{display:block;min-width:0;color:#858a92;text-decoration:none}
.reel-thumb{display:block;position:relative;aspect-ratio:16/9;background:#171717;overflow:hidden;opacity:.43;transition:opacity .22s;outline-offset:4px}
.reel-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.reel-thumb>span{position:absolute;bottom:0;left:0;font-size:8px;padding:4px 5px;background:#000a;color:white;font-variant-numeric:tabular-nums}
.reel-index-name{display:block;margin-top:12px;font-size:10px;line-height:1.3;white-space:nowrap}
.reel-index-link:hover .reel-thumb,.reel-index-link[aria-current] .reel-thumb{opacity:1}
.reel-index-link[aria-current] .reel-thumb{outline:1px solid #e4eaff}
.reel-index-link[aria-current],.reel-index-link:hover{color:#fff}
.reel-arrow{display:grid;place-items:center;flex:0 0 35px;min-height:48px;background:none;border:0;color:#e7e8ec;font:inherit;font-size:25px;cursor:pointer;align-self:flex-start;margin-top:3px}
.reel-arrow:disabled{opacity:.22;cursor:default}
.reel-work:not(.is-reel) [data-reel-pause]{display:none}
.reel-work:not(.is-reel){padding-left:var(--space);padding-right:var(--space)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1700px){.reel-work.is-reel .work-heading,.reel-topline,.reel-caption,.reel-index-row{max-width:1560px;margin-left:auto;margin-right:auto}}
@media(max-width:1000px){.reel-caption{grid-template-columns:1.1fr .8fr auto;gap:18px}.reel-identity{gap:12px}.reel-identity h3{font-size:30px}.reel-count{font-size:10px}.reel-index{gap:12px}.reel-index-row{gap:12px}.reel-index-name{font-size:9px}.reel-arrow{flex-basis:24px}.reel-tag{font-size:11px}.reel-open{font-size:10px;gap:12px}}
@media(max-width:700px){.reel-work.is-reel{padding:84px 0 62px}.reel-work.is-reel .work-heading{margin:0 22px 20px;gap:20px}.reel-work .work-heading h2{font-size:27px;max-width:215px}.reel-topline{margin:0 22px 4px;gap:8px}.reel-hint{font-size:10px;max-width:150px}.reel-hint>span{margin-left:7px;font-size:14px}.reel-views{gap:17px}.reel-views button{font-size:10px;min-height:40px}.reel-views [data-reel-view=both]{display:none}.reel-stage{height:min(465px,59svh);min-height:350px}.reel-caption{grid-template-columns:1fr auto;gap:15px 14px;margin:14px 22px 25px;min-height:110px}.reel-identity{grid-column:1/-1;align-items:center;gap:15px}.reel-count{padding-top:7px;font-size:10px}.reel-identity h3{font-size:33px;letter-spacing:-.055em}.reel-tag{font-size:11px;margin-top:5px}.reel-kind{font-size:9px}.reel-open{font-size:10px;gap:13px;align-self:center}.reel-index-row{margin:0;gap:5px;padding:17px 15px 0}.reel-index{display:flex;overflow-x:auto;scrollbar-width:none;gap:15px;padding:5px 4px 7px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.reel-index::-webkit-scrollbar{display:none}.reel-index-link{flex:0 0 77px;scroll-snap-align:start}.reel-index-name{font-size:9px;white-space:nowrap;margin-top:10px}.reel-arrow{flex-basis:20px;font-size:21px;margin-top:4px}.reel-thumb>span{font-size:7px}.reel-cursor{display:none}}
@media(max-width:360px){.reel-work .work-heading h2{font-size:24px}.reel-identity h3{font-size:28px}.reel-open{gap:8px}.reel-description{max-width:175px}}
@media(max-width:700px){.reel-stage[data-view=desktop]{height:clamp(235px,68vw,390px);min-height:0}}
@media(prefers-reduced-motion:reduce){.reel-experience *{transition:none!important}.reel-topline,.reel-caption,.reel-index-row{opacity:1}.reel-cursor{display:none}}
/* Native horizontal scrolling and native video compositing. The canvas is
   sampled only when the brain needs a still image of the current composition. */
.is-reel .work-body{position:relative}
.is-reel .reel-stage{z-index:3;pointer-events:none}
.is-reel .reel-canvas{visibility:hidden}
.is-reel .reel-native{position:absolute;left:0;width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;margin:0;pointer-events:var(--work-input,auto);z-index:2}
.is-reel .reel-native::-webkit-scrollbar{display:none}
.is-reel .reel-native .work-card{position:relative;flex:none;min-width:0;margin:0;padding:0;scroll-snap-align:center}
.is-reel .reel-native .work-card-link,.is-reel .reel-native .work-art-slot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;pointer-events:none}
.is-reel .reel-native .work-art{background-image:none!important;opacity:1}
.is-reel .reel-native .work-card-caption,.is-reel .reel-native .work-art>:not(.preview-screen){display:none!important}
.is-reel .reel-native .preview-screen{border-radius:2px;box-shadow:0 9px 18px #0005;translate:none!important}
.is-reel .reel-native[data-reduced=true] .preview-video{display:none}
.has-work-emergence .reel-native{opacity:var(--reel-reveal,0)}
@media(hover:hover) and (pointer:fine){.reel-native{cursor:none}.reel-work[data-reel-hover] .reel-cursor{opacity:1}}

/* Preserve authored sentence breaks when the native reel changes projects. */
.reel-tag{white-space:pre-line}