@import url('./playback-levels.css?v=20261030-15');
@font-face{font-family:Archive;src:url('../../public/fonts/plus-jakarta-sans/PlusJakartaSans-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Identity;src:url('../fonts/kleeone.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--rail:72px;--header:0px;--month:62.5px;--row:62px;--top:137px;--panel:480px;--ink:#171717}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#ccc;color:var(--ink);font-family:Archive,Arial,'PingFang SC',sans-serif;font-size:14px;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible,a:focus-visible{outline:2px solid #171717;outline-offset:5px}button:disabled{cursor:default}#intro{position:fixed;inset:0;border:0;width:100%;height:100%;pointer-events:none}.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:5;border-right:.5px solid #00000018;background:rgb(204 204 204 / calc(var(--rail-fill,0)*.14))}.identity{position:absolute;top:16px;left:24px;width:24px;height:45px;display:grid;place-items:center}.static-identity{width:16px;height:45px;display:flex;flex-direction:column;gap:7px;padding:8px 0;font:600 16px/1.2 Identity;text-align:center}.static-identity>span{text-box-trim:trim-both;text-box-edge:cap alphabetic}.rail nav{position:absolute;bottom:40px;left:26px;display:flex;gap:70px;writing-mode:vertical-rl}.rail nav button{font-size:14px}#viewport{position:fixed;inset:var(--header) 0 0 var(--rail);overflow:clip;touch-action:none;outline:none}#track{height:100%;position:relative;contain:layout paint;overflow:clip}#months{position:absolute;inset:0;pointer-events:none}.month{position:absolute;top:0;bottom:0;border-left:.5px solid #00000014;padding:22px 4px 0;color:#0005;font-size:12px;white-space:nowrap}.month.year{color:#0009}.project{position:absolute;top:calc(var(--top) + var(--row)*var(--row-index));left:var(--x);width:var(--width);height:24.54px;transition:none;color:#ccc}.bar{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px;background:#1a1a1a;text-align:left;white-space:nowrap;overflow:hidden;transition:none}.type{font-size:14px;opacity:.85}.project.open{height:var(--panel);z-index:2}.project.open .bar{display:block}.expanded{display:grid;position:absolute;inset:0;background:var(--color);color:var(--project-ink);grid-template-columns:1fr .68fr;border-block:0;overflow:hidden}.project.open .expanded{display:grid}.project-copy{position:relative;padding:24px;display:flex;flex-direction:column;gap:25px;min-width:0}.project-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.project-heading h2{font-size:48px;line-height:1.11;letter-spacing:normal;font-weight:500;margin:0}.enter{width:48px;height:48px;flex:none;text-decoration:none;color:inherit;line-height:1}.enter img{display:block;width:48px;height:48px}.project-meta{margin-top:auto;display:grid;grid-template-columns:.5fr 1fr;gap:0;font-size:15px;line-height:1.4}.project-meta p{margin:0}.project-meta .summary{margin-top:16px}.disciplines{display:flex;flex-direction:column;gap:16px;align-self:end;line-height:1.4}.project-media{overflow:hidden;min-width:0;height:100%;border-left:.5px solid #00000026}.cover{width:100%;height:100%;object-fit:cover;min-width:0}.placeholder-art{display:grid;place-content:center;overflow:hidden;background:#00000009;font-size:clamp(80px,14vw,200px);font-weight:300;letter-spacing:-.1em}.collapse{position:absolute;right:8px;bottom:6px;opacity:0;pointer-events:none;font-size:20px}.project.open:hover .collapse,.collapse:focus-visible{opacity:.65;pointer-events:auto}.controls{position:fixed;z-index:6;left:calc(var(--rail) + 24px);right:24px;bottom:22px;display:flex;align-items:end;justify-content:space-between;gap:16px;pointer-events:none}.controls>*{pointer-events:auto}.music{display:flex;align-items:center;gap:13px;min-width:0;background:#ccccccda;padding:8px 10px}.music button{font-size:12px}#trackName{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#play{min-width:22px;min-height:24px}#chooseAudio{font-size:18px}.hint{position:fixed;left:calc(var(--rail) + 26px);bottom:85px;font-size:13px;pointer-events:none;color:#0008}.hint span{margin-left:30px}dialog{border:0;color:#171717;background:#ccc;padding:40px;max-width:calc(100% - 32px)}dialog::backdrop{background:#0006;backdrop-filter:blur(8px)}dialog .close{position:absolute;right:20px;top:12px;font-size:30px}#aboutPanel{width:560px}#aboutPanel h1{font-weight:400;font-size:48px;line-height:1.05;margin:36px 0}.eyebrow,.muted{font-size:12px;color:#0008}#detail{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;background:#ccc}#caseFrame{border:0;width:100%;height:100%;display:block}.detail-back{position:absolute;right:20px;bottom:20px;z-index:2;padding:12px 20px;border-radius:24px;background:#ccc;color:#171717;box-shadow:0 2px 16px #0002}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes appear{from{opacity:0}to{opacity:1}}
@media(min-width:1800px){:root{--month:78px;--row:62px;--panel:560px;--top:160px}}
@media(max-width:760px){:root{--rail:0px;--header:64px;--month:48px;--row:62px;--top:66px;--panel:min(450px,calc(100dvh - 225px))}.rail{inset:0 0 auto;width:100%;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-right:0;border-bottom:.5px solid #0002;background:rgb(204 204 204 / calc(var(--rail-fill,0)*.86))}.identity{position:static;font-size:22px}.rail nav{position:static;writing-mode:horizontal-tb;gap:25px}.rail nav button{font-size:14px}.month{padding-top:15px;font-size:11px}.project{height:44px}.bar{padding:0 12px;font-size:14px}.type{font-size:12px}.expanded{grid-template-columns:1fr;grid-template-rows:1fr 44%}.project-copy{padding:18px;gap:10px}.project-heading h2{font-size:32px;letter-spacing:normal}.project-meta{gap:12px;font-size:12px;grid-template-columns:.5fr 1fr}.disciplines{gap:10px}.project-meta .summary{margin-top:6px}.collapse{display:none}.controls{left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));gap:6px}.music{gap:8px;padding:8px 6px}#trackName{max-width:90px}.hint{left:20px;bottom:85px}#aboutPanel h1{font-size:36px}.enter,.enter img{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}}

@media(max-width:760px){.collapse{display:block;opacity:.65;pointer-events:auto}.project-meta{font-size:12px}}


/* All card geometry is written by the single timeline controller. */
.project{overflow:hidden;isolation:isolate;will-change:auto}
.bar,.project.open .bar{position:absolute;inset:0;display:block;z-index:2;opacity:var(--bar-opacity,1);height:100%;padding:0;overflow:hidden;pointer-events:auto}
.project.open .bar{pointer-events:none}
.bar-title,.type{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;line-height:1.11;font-size:14px;opacity:1;transition:none}
.letter{display:inline-block;opacity:0;transition:opacity 650ms ease;transition-delay:0ms}
.is-visible .letter{opacity:1;transition-delay:calc(var(--i)*24ms)}
.expanded{opacity:var(--detail-opacity,0);height:100%;min-height:0;pointer-events:auto;transition:none}
.expanded[inert]{pointer-events:none}
.project-copy{min-width:0;overflow:hidden}.project-meta{flex-shrink:0}
.project:not(.open) .expanded{visibility:hidden}
.month{border:0;padding-top:24px}.month::before{content:'';position:absolute;top:0;bottom:0;left:0;width:.5px;background:#00000014;transform:scaleY(0);transform-origin:top;transition:transform 1100ms cubic-bezier(.22,1,.36,1)}
.month>span{opacity:0;transition:opacity .8s}.ui-ready .month::before{transform:scaleY(1);transition-delay:calc(var(--order)*28ms)}.ui-ready .month>span{opacity:1;transition-delay:calc(var(--order)*28ms + 160ms)}
.rail,.controls,.hint{opacity:0;pointer-events:none}.ui-ready .rail,.ui-ready .controls{opacity:1;pointer-events:auto;transition:opacity .7s}.ui-ready .hint{opacity:var(--hint-opacity,1);transition:opacity .7s}
.rail .letter,.controls .letter,.hint .letter{transition-duration:800ms}.ui-ready .rail .letter,.ui-ready .controls .letter,.ui-ready .hint .letter{opacity:1;transition-delay:calc(var(--ui-delay,0ms) + var(--i)*28ms)}
#about{--ui-delay:160ms}#language{--ui-delay:280ms}.music{--ui-delay:420ms}.filter-wrap{--ui-delay:560ms}.hint{--ui-delay:360ms}
.identity{left:14px;top:12px;width:44px;height:64px;overflow:visible;opacity:0}.ui-ready .identity{opacity:1;transition:opacity .6s}
.nav-glyph-box{position:absolute;overflow:visible;translate:0 var(--nav-origin-y,0px)}.nav-glyph-box img{position:absolute;display:block;max-width:none}
.controls button{min-height:24px}
@media(max-width:760px){.identity{position:relative;left:-10px;top:-5px;width:30px;height:48px}.bar-title,.type{font-size:14px}.project.open{height:auto}.rail{overflow:visible}.month{padding-top:15px}}
@media(prefers-reduced-motion:reduce){.letter,.month::before,.month>span{transition-duration:1ms!important;transition-delay:0ms!important}}

.hint .letter{margin-left:0}body:not(.ui-ready) .controls *{pointer-events:none!important}
.project .enter{color:var(--surface-ink);background:currentColor;mask:url('arrow.svg') center/contain no-repeat}.project .enter img{visibility:hidden}

/* Compensate light-on-dark optical weight without changing preview typography. */
.bar-title,.type{font-weight:400}

/* One persistent title morphs from bar to preview; hidden heading reserves layout. */
.project>.bar-title{z-index:3;pointer-events:none;color:var(--surface-ink,#ccc);transition:none;}
.project-heading h2{visibility:hidden}


/* The same state owns surface and ink through hover, open and full collapse. */
.project{--surface-ink:#ccc;--surface-color:#1a1a1a;transition:none}

.project .bar,.project .bar:hover,.project.open .bar{background:transparent;color:var(--surface-ink);transition:none}
.project .expanded{color:var(--surface-ink);background:transparent;height:var(--panel-height);bottom:auto;opacity:1}
.project .project-media,.project .placeholder-art,.project .enter{opacity:var(--detail-opacity,0)}
.project-meta p{will-change:auto}

/* Blend the surface and ink together throughout contraction. Hover retains the target pair. */
.project{--default-surface:#0f0f0f;--tone:0%;--expansion:0%;--hover-ink:color-mix(in srgb,#ccc,var(--project-ink) var(--tone));--hover-color:color-mix(in srgb,var(--default-surface),var(--color) var(--tone));--surface-ink:color-mix(in srgb,var(--hover-ink),var(--expanded-ink) var(--expansion));--surface-color:color-mix(in srgb,var(--hover-color),var(--expanded-color) var(--expansion));transition:none}


.project>.bar-title,.project .bar{transition:none}

/* One persistent control moves into the full-height discipline panel. */
.filter-wrap{--filter-width:400px;position:fixed;inset:0;pointer-events:none;--filter-ease:cubic-bezier(.2,.75,.2,1)}
.filter-surface{position:absolute;inset:0 0 0 auto;width:var(--filter-width);background:#ccc;border-left:.5px solid #00000026;transform:translateX(100%);transition:transform 720ms var(--filter-ease);pointer-events:none}
#filters{position:absolute;top:0;bottom:80px;right:0;width:var(--filter-width);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform 720ms var(--filter-ease),visibility 720ms;pointer-events:none}
#filters button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px;min-height:64px;border-top:.5px solid #00000026;text-align:left;font-size:14px;line-height:16px;transition:background 180ms}
#filters button:last-child{border-bottom:.5px solid #00000026}
#filters button:hover{color:#000}
.filter-mark{width:16px;height:16px;position:relative;flex:none;display:block}
 .filter-mark{display:grid;place-items:center;font-size:14px;line-height:14px}
.filter-mark img{display:block;flex:none}
#filterToggle{position:absolute;right:24px;bottom:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;width:var(--closed-width,114px);min-height:16px;padding:0;border-top:.5px solid transparent;background:transparent;color:#000;font-size:14px;line-height:16px;white-space:nowrap;pointer-events:auto;transition:height 720ms var(--filter-ease),width 720ms var(--filter-ease),right 720ms var(--filter-ease),bottom 720ms var(--filter-ease),padding 720ms var(--filter-ease),border-color 720ms var(--filter-ease)}
.filter-wrap.is-open .filter-surface,.filter-wrap.is-open #filters{transform:translateX(0)}
.filter-wrap.is-open #filters{visibility:visible;pointer-events:auto}
.filter-wrap.is-open .filter-surface{pointer-events:auto}
.filter-wrap.is-open #filterToggle{right:0;bottom:0;width:var(--filter-width);padding:24px 24px 40px;border-top-color:#00000026}

@media(max-width:760px){.filter-wrap{--filter-width:min(400px,calc(100vw - 24px))}#filterToggle{right:24px;bottom:24px}.filter-wrap.is-open #filterToggle{padding-bottom:24px}#filters{bottom:64px}}
@media(prefers-reduced-motion:reduce){.filter-surface,#filters,#filterToggle,.filter-mark::after{transition-duration:1ms!important}}

.project.is-collapsing{transition:none}
.project.is-collapsing>.bar-title,.project.is-collapsing .bar{transition:none}

/* Keep the outline present; only the fill uses the horizontal feather. */
.project{background:transparent;-webkit-font-smoothing:antialiased}
.project::before{content:'';position:absolute;inset:0;background:var(--surface-color,#1a1a1a);z-index:-1;pointer-events:none;mask-image:linear-gradient(90deg,#000 calc(min(var(--reveal,0),var(--filter-reveal,1))*260% - 160%),transparent calc(min(var(--reveal,0),var(--filter-reveal,1))*260%))}
.project::after{content:'';position:absolute;inset:0;border:.5px solid #00000026;pointer-events:none;z-index:5}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
#detail::backdrop{background:transparent;backdrop-filter:none}
.project::before{transition:none}
.project.is-collapsing::before{transition:none}

.project>.bar-title,.project .type,.project .letter{pointer-events:none}
.menu-lines{position:absolute;inset:0;transition:opacity 200ms}
.menu-lines i{transform-origin:left center;position:absolute;left:2px;top:7.5px;width:12px;height:1px;background:currentColor;transition:transform 500ms cubic-bezier(.2,.75,.2,1),opacity 250ms}
.menu-lines i:nth-child(1){transform:translateY(-5px)}
.menu-lines i:nth-child(3){transform:translateY(5px)}
.menu-lines i:nth-child(4){transform:rotate(90deg);opacity:0}
.filter-mark[data-kind=minus] i:nth-child(1),.filter-mark[data-kind=plus] i:nth-child(1){transform:translateY(-5px) scaleX(0)}
.filter-mark[data-kind=minus] i:nth-child(3),.filter-mark[data-kind=plus] i:nth-child(3){transform:translateY(5px) scaleX(0)}
.filter-mark[data-kind=plus] i:nth-child(4){transform:rotate(90deg);opacity:1}
.filter-count{opacity:0;transition:opacity 200ms}
.filter-mark[data-kind=count] .filter-count{opacity:1}
.filter-mark[data-kind=count] .menu-lines{opacity:0}

/* Latest 1440 reference: 17/.92 title, 15/1 tag, twelve-pixel bar insets. */
.bar-title{font-size:16px;font-weight:500;line-height:.92}.type{font-size:15px;line-height:1}
.rail nav button,.controls button,#filters button,.filter-mark{font-size:15px;line-height:1}
#filters button,#filterToggle{line-height:1.04;font-size:15px}
.month::before{background:rgba(0,0,0,.15)}
.project::after{opacity:calc(var(--filter-reveal,1)*var(--safe-visible,1))}
.project>.bar-title,.project .type{opacity:var(--filter-reveal,1)}
#filters button{position:relative;isolation:isolate;background:transparent}
@property --selection{syntax:'<number>';inherits:false;initial-value:0}
/* One fill layer: hover=.02, selected feather=.04; no alpha stacking. */
#filters button{isolation:isolate;overflow:hidden}
@property --filter-hover{syntax:'<number>';inherits:false;initial-value:0}
#filters button::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.04) calc(var(--selection)*260% - 160%),rgba(0,0,0,calc(var(--filter-hover)*.02)) calc(var(--selection)*260%));--selection:0;--filter-hover:0;transition:--selection 650ms cubic-bezier(.2,.75,.2,1),--filter-hover 160ms linear}
#filters button:hover::before{--filter-hover:1}
#filters button[aria-pressed=true]::before{--selection:1}
.filter-wrap{overflow:clip}


.category-icon{position:relative;display:block;width:16px;height:16px;flex:none}
.category-icon i{position:absolute;top:7.5px;left:2px;width:12px;height:1px;background:currentColor}
.category-icon i:last-child{transform:rotate(90deg);transition:transform 450ms cubic-bezier(.2,.75,.2,1)}
#filters button[aria-pressed=true] .category-icon i:last-child{transform:rotate(0)}
.case-shade{position:fixed;inset:0;background:#000;opacity:0;z-index:20;pointer-events:none}

/* Figma 4888:113917: the stepped metadata is outside the capsule's clipping. */
.menu-lines i:nth-child(4){transform-origin:center}
.cover-entry{display:none;position:absolute;inset:0;width:100%;height:100%;text-align:left;color:#ccc;opacity:var(--cover-opacity,1);z-index:2}
.cover-mode .cover-entry{display:block}
.cover-mode:not(.open)::before,.cover-mode:not(.open)::after,.cover-mode:not(.open)>.bar-title,.cover-mode:not(.open)>.bar{display:none}
.cover-mode.open>.bar-title{opacity:var(--detail-opacity,0)}
.cover-window{position:absolute;inset:0;border-radius:1000px;overflow:hidden;display:block}
.cover-window img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 800ms cubic-bezier(.2,.75,.2,1)}
.project:not(.open).is-hovered .cover-window img,.project:not(.open) .cover-entry:focus-visible .cover-window img{transform:scale(1.035)}
.project.open .cover-window img{transform:none}
.cover-info{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:100%}
.cover-info>span{position:relative;isolation:isolate;background:#ccc;padding:8px;max-width:100%;line-height:1}
.cover-info .cover-name{font-size:16px;font-weight:500}
.cover-info .cover-kind{padding:4px 8px;font-size:15px;font-weight:400}
.cover-info .cover-date{font:400 15px/1 Archive,Arial,sans-serif}

/* Horizontal feather belongs to entry/filter only; vertical exit belongs to #projects. */
.project{--entry-feather:linear-gradient(90deg,#000 calc(min(var(--reveal,0),var(--filter-reveal,1))*260% - 160%),transparent calc(min(var(--reveal,0),var(--filter-reveal,1))*260%));mask-image:linear-gradient(90deg,#000 calc(var(--filter-reveal,1)*260% - 160%),transparent calc(var(--filter-reveal,1)*260%))}
.cover-window{background:transparent}
.cover-window img{mask-image:var(--entry-feather)}
.cover-window::after{content:'';position:absolute;inset:0;border-radius:inherit;border:.5px solid rgba(0,0,0,.15);pointer-events:none;opacity:var(--safe-visible,0)}
.cover-info>span::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--default-surface);mask-image:var(--entry-feather)}
.cover-info>span>span{display:block;padding-block:4px;margin-block:-4px;mask-image:var(--entry-feather)}

/* Fixed viewport-space alpha boundaries; the track only translates horizontally. */
#projects{position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent var(--mask-top,38px),#000 calc(var(--mask-top,38px) + 24px),#000 calc(var(--mask-bottom,800px) - 24px),transparent var(--mask-bottom,800px));}
#projects>.project{pointer-events:auto}

.month>span{display:block;line-height:1}

/* Fully opaque feathers need no offscreen mask surfaces after entry. */
.project.reveal-complete,.project.reveal-complete::before,.project.reveal-complete .cover-window img,.project.reveal-complete .cover-info>span::before,.project.reveal-complete .cover-info>span>span{mask-image:none}

/* Scrolled-in dates are already part of the revealed grid, not a new intro. */
.ui-ready .month.grid-visible::before,.ui-ready .month.grid-visible>span{transition:none;transition-delay:0ms}

/* Persistent capsule image: one element from timeline to the preview media slot. */
.project.cover-mode{--surface-color:var(--expanded-color);--surface-ink:var(--expanded-ink)}
.project.cover-mode::before,.project.cover-mode::after{border-radius:var(--cover-radius,0px)}
.project.cover-mode>.cover-window{z-index:1;pointer-events:none;inset:auto;opacity:1}
.project.cover-mode .project-media{visibility:hidden}
.project.cover-mode .cover-entry{z-index:2}
.project.artwork-mode>.cover-window{border-radius:0}
.project-meta{align-items:end;gap:16px}
.project-meta>.disciplines,.project-meta>div{display:flex;flex-direction:column;gap:16px;align-self:end}
.project-meta .summary{margin:0}
.disciplines{gap:16px}

.artwork-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#ccc;overflow:hidden}
.artwork-dialog::backdrop{background:transparent;backdrop-filter:none}
.artwork-shade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 650ms cubic-bezier(.4,0,.2,1)}
.artwork-full{position:absolute;display:block;object-fit:contain;border-radius:0;max-width:none}
.artwork-copy{position:absolute;max-width:520px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.4}
.artwork-copy h2{font-size:16px;line-height:1;font-weight:400;margin:0}
.artwork-meta{display:flex;gap:16px;font-size:15px;line-height:1.2;flex-wrap:wrap}
.artwork-copy p{margin:0}
.artwork-copy>*{opacity:0;transition:opacity 400ms}
.artwork-copy.visible>*{opacity:1;transition-duration:650ms}
.artwork-copy.visible>:nth-child(1){transition-delay:180ms}.artwork-copy.visible>:nth-child(2){transition-delay:240ms}.artwork-copy.visible>:nth-child(3){transition-delay:300ms}

@media(prefers-reduced-motion:reduce){.music,.music::before,.music-details,.artwork-copy>*,.artwork-shade{transition-duration:1ms}.music #play::before{animation:none}}

/* Music uses geometry expansion, not an opacity reveal; pointer focus cannot latch it open. */
.controls{bottom:28px}

/* Image alone owns its round clipping. Metadata remains square and readable. */
.project.cover-mode{border-radius:0}
.project.cover-mode .bar,.project.cover-mode .type{visibility:hidden}
.project.cover-mode>.cover-window{z-index:1}
.cover-info{z-index:3}
.cover-info>span{line-height:1.2}
/* Bottom UI enters with the first works, rather than with the opening logo. */
.ui-ready .controls{opacity:var(--works-controls,0);transition:none;pointer-events:none}
.ui-ready .controls>*{pointer-events:none}
.ui-ready.works-controls-visible .controls>.music{pointer-events:auto}
.ui-ready.works-controls-visible .controls>.filter-wrap{pointer-events:none}
.hint{left:auto;right:24px;bottom:40px;font-size:15px}
.ui-ready .hint{transition:none}
@media(min-width:761px){.rail nav{gap:120px}.identity{top:24px;transform:scale(1.15);transform-origin:22px 0}.nav-glyph-box{margin-top:-6px}}
@media(prefers-reduced-motion:reduce){.music-flow i{animation:none}}

@property --label-return{syntax:'<number>';inherits:true;initial-value:1}
.project.reveal-complete .cover-info.is-returning>span{mask-image:linear-gradient(90deg,#000 calc(var(--label-return)*260% - 160%),transparent calc(var(--label-return)*260%))}

.ui-ready .controls{visibility:hidden}
.ui-ready.works-controls-visible .controls{visibility:visible}

/* The selected All fill travels inside the panel, independently of the moving text button. */
.filter-surface::after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;pointer-events:none;--selection:0;background:linear-gradient(90deg,rgba(0,0,0,.04) calc(var(--selection)*260% - 160%),transparent calc(var(--selection)*260%));transition:--selection 650ms cubic-bezier(.2,.75,.2,1)}
.filter-wrap[data-all=true] .filter-surface::after{--selection:1}
@media(max-width:760px){.filter-surface::after{height:64px}}
/* Shared top-layer launcher: surface, button and playback colors have independent fades. */
/* Fixed 44px anchor; only the clipped shell grows. No layout/drag width coupling. */
.global-music,.global-music:hover,.global-music:has(:focus-visible){position:fixed;inset:auto auto auto 0;width:44px;height:44px;min-width:0;max-width:none;margin:0;padding:0;border:0;background:transparent;color:#ccc;overflow:visible;transition:none;touch-action:none;isolation:isolate}
.global-music::before{content:none}.global-music::backdrop{background:transparent;pointer-events:none}
.global-music:not(:popover-open){display:none}.global-music:popover-open{display:block;visibility:visible;opacity:1;pointer-events:auto}
@property --player-width{syntax:'<length>';initial-value:44px;inherits:true}
.global-music,.global-music:hover,.global-music:has(:focus-visible){--player-width:44px;transition:--player-width 360ms cubic-bezier(.18,.7,.08,1)}
.global-music.expanded-player{--player-width:var(--capsule-width)}
.music-shell{position:absolute;left:0;top:0;width:var(--player-width);height:44px;border-radius:22px;overflow:hidden;clip-path:inset(0 round 22px);pointer-events:none}
.music-shell::before{content:'';position:absolute;inset:4px;border-radius:18px;background:#1a1a1a;opacity:0;transition:inset 360ms cubic-bezier(.18,.7,.08,1),border-radius 360ms cubic-bezier(.18,.7,.08,1),opacity 240ms 60ms}
.expanded-player .music-shell{pointer-events:auto}
.expanded-player .music-shell::before{inset:0;border-radius:22px;opacity:1;transition:inset 300ms cubic-bezier(.18,.7,.08,1),border-radius 300ms,opacity 100ms}
.global-music #play{position:absolute;left:4px;top:4px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;overflow:hidden;border-radius:50%;background:#1a1a1a;isolation:isolate;transition:background-color 280ms;z-index:2;cursor:pointer;touch-action:none}
.global-music.expanded-player #play{background:#ccc}.global-music.dragging #play{cursor:grabbing}
.player-play,.player-pause{position:absolute;left:12px;top:11px;width:12px;height:14px;background:#ccc;transition:opacity 200ms,transform 250ms cubic-bezier(.2,.7,.2,1),background-color 280ms;pointer-events:none}
.player-play{left:14px;mask:url('covers/play.svg') center/contain no-repeat}
.player-pause{background:#1a1a1a;opacity:0;transform:scale(.7);mask:url('covers/pause-bar.svg') left/3px 14px no-repeat,url('covers/pause-bar.svg') right/3px 14px no-repeat}
.expanded-player .player-play{background:#1a1a1a}.is-playing .player-play{opacity:0;transform:scale(.7)}.is-playing .player-pause{opacity:1;transform:scale(1)}
.music-flow{position:absolute;inset:0;background:#e8f4f8;opacity:0;transition:opacity 320ms;pointer-events:none;z-index:-1}.is-playing .music-flow{opacity:1}
.music-flow i{position:absolute;width:42px;height:42px;border-radius:50%;filter:blur(7px);animation:music-blob 3.4s linear infinite;animation-play-state:paused}
.music-flow i:nth-child(1){background:#d3f0f3;left:-9px;top:-9px;transform-origin:right center}.music-flow i:nth-child(2){background:#c6f0cf;right:-9px;bottom:-9px;transform-origin:left top;animation-duration:5.1s;animation-direction:reverse}.music-flow i:nth-child(3){background:#a5d7e9;right:-12px;top:6px;transform-origin:left center;animation-duration:4.3s}.music-flow i:nth-child(4){background:#f0f0f0;left:-6px;bottom:0;transform-origin:right top;animation-duration:6s;animation-direction:reverse}.global-music.is-playing .music-flow i{animation-play-state:running}
@keyframes music-blob{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.music-details{position:absolute;left:52px;top:12px;width:max-content;height:20px;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 140ms;pointer-events:none;white-space:nowrap}
.expanded-player .music-details{opacity:1;pointer-events:auto;transition-delay:100ms}
.global-music #trackName{display:block;flex:none;width:var(--title-width,64px);min-width:64px;max-width:120px;font:500 14px/20px Archive,Arial,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:clip}.global-music #trackName>span{display:block;width:max-content}.expanded-player #trackName.marquee>span{animation:music-title 8s linear infinite alternate}
@keyframes music-title{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--title-travel))}}
#albumLink,#albumLink img{display:block;width:16px;height:16px;min-height:16px;flex:none}#albumLink img{filter:brightness(0) invert(.8)}
#musicProgress{display:block;flex:none;margin-left:8px;width:16px;height:16px;border-radius:50%;background:conic-gradient(#ccc calc(var(--progress,0)*1turn),#555 0);mask:radial-gradient(transparent 6px,#000 6.5px)}
.music-close{position:absolute;left:var(--player-width);top:0;width:16px;height:16px;border-radius:50%;background:rgb(0 0 0 / 16%);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity 240ms,background-color 160ms}.music-close img{display:block;margin:auto;width:7px;height:7px}.expanded-player .music-close{opacity:1;pointer-events:auto;transition-delay:65ms,0ms}.music-close:hover{background:rgb(0 0 0 / 24%)}
.dock-right .music-shell{left:auto;right:0}.dock-right .music-details{left:14px;right:auto}.dock-right .music-close{left:auto;right:var(--player-width)}
.in-flight .music-shell{width:44px}.in-flight .music-shell::before{opacity:0}.dragging .music-details,.dragging .music-close,.in-flight .music-details,.in-flight .music-close{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.global-music *{transition-duration:1ms!important;animation:none!important}}
.case-artwork-transition{position:fixed;display:block;max-width:none;transform-origin:0 0;pointer-events:none;z-index:2}

.music-details [hidden]{display:none!important}
.dock-right #musicProgress{order:-1;margin-left:0;margin-right:8px}

.global-music.expanded-player::after{content:"";position:absolute;left:0;top:0;width:calc(var(--player-width) + 16px);height:44px;z-index:-1;pointer-events:auto}
.global-music.dock-right.expanded-player::after{left:auto;right:0}

/* Match the returning image to its visible frame, independent of stale hover zoom. */
.project.artwork-transitioning .cover-window img{transform:none;transition:none}

.music-details>*{opacity:0;transition:opacity 180ms ease;transition-delay:0ms}
.expanded-player .music-details>*{opacity:1;transition-delay:calc(55ms + var(--element-order,0)*40ms)}
.music-details>*:nth-child(2){--element-order:1}.music-details>*:nth-child(3){--element-order:2}
.dock-right .music-details>*:nth-child(3){--element-order:0}.dock-right .music-details>*:nth-child(1){--element-order:1}.dock-right .music-details>*:nth-child(2){--element-order:2}
/* Homepage type stays fine at laptop widths; scale only on genuinely wide viewports. */
:root{--works-ui-font:clamp(15px,calc(15px + (100vw - 1800px)*.0039473684),18px)}
.type,.rail nav button,.controls button,#filters button,#filterToggle,.filter-mark{font-size:var(--works-ui-font)}
.filter-wrap{--filter-slot-height:calc(var(--works-ui-font)*1.04 + 64px)}
#filterToggle{border-top:0;height:calc(var(--works-ui-font)*1.04);min-height:0}
.filter-wrap.is-open #filterToggle{height:var(--filter-slot-height);border-top:0}
#filters{bottom:var(--filter-slot-height)}
.filter-surface::after{height:var(--filter-slot-height)}
.filter-surface::before{content:"";position:absolute;left:0;right:0;bottom:calc(var(--filter-slot-height) - .5px);height:.5px;background:#00000026;pointer-events:none}
@media(max-width:760px){.filter-wrap{--filter-slot-height:calc(var(--works-ui-font)*1.04 + 48px)}}
@media(min-width:1801px){
 .project-meta,.project-meta p{font-size:var(--works-ui-font)}
 .cover-info .cover-name{font-size:clamp(16px,calc(16px + (100vw - 1800px)*.0042105263),19.2px)}
 .cover-info .cover-kind,.cover-info .cover-date{font-size:var(--works-ui-font)}
}

@font-face{font-family:ProjectRoman;src:url('../fonts/roman-numeral.woff2') format('woff2');font-weight:100 900;font-display:swap}
.roman-numeral{font-family:ProjectRoman,Inter,sans-serif}
.project-media{position:relative;background:var(--surface-color)}.configured-cover{position:absolute;max-width:none;object-fit:cover}

:root{--safe-bottom:env(safe-area-inset-bottom,0px)}
.filter-dismiss,#filterClose,.mobile-collapse{display:none}
/* Progress-only wheel feedback remains outside the clipped capsule shell. */
.music-seek-tip{position:absolute;left:calc(var(--player-width) - 22px);bottom:calc(100% + 8px);transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:#1a1a1a;color:#ccc;font:400 12px/1.4 'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 240ms}.music-seek-tip.visible{opacity:1}.global-music #trackName.marquee{mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 14px),transparent 100%)}

.global-music.dock-right .music-seek-tip{left:calc(66px - var(--player-width))}

/* Original navigation-A paths share the glyph scene's source-space origin. */
.nav-logo-guides{position:absolute;left:0;top:-6px;width:44px;height:82px;overflow:visible;pointer-events:none;translate:0 var(--nav-origin-y,0px)}
.nav-logo-guides path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:miter;shape-rendering:geometricPrecision}
@media(max-width:760px){.nav-logo-guides{top:0;width:92px;height:44px}}

/* Artwork/levels belong to the mobile collapsed state only. */
.player-artwork,.player-levels{display:none}
@media(max-width:760px){.player-artwork,.player-levels{display:block}}

/* Plain poster artwork has no frame stroke; capsule/bar frames retain theirs. */
.project.artwork-mode>.cover-window::after{display:none}

.project .project-media>.cover-brand,.project>.cover-window>.cover-brand{position:absolute;right:24px;top:24px;left:auto;width:116px;height:47px;object-fit:contain;transform:none;max-width:calc(100% - 48px);pointer-events:none;z-index:2}
/* Fixed layout during route transitions; the viewport clips a separately scaled image. */
.case-card-surface{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:3;will-change:clip-path;contain:layout paint}
.case-card-tint{position:absolute;inset:0}
.case-card-copy{position:absolute;overflow:visible}
.case-card-copy>.project{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;visibility:visible!important;clip-path:none!important;mask:none!important}
.case-card-copy>.project::before,.case-card-copy>.project::after{content:none}
.case-card-copy .expanded{background:transparent!important;overflow:visible!important}
.case-card-copy .project,.case-card-copy .project-copy,.case-card-copy .project-heading{overflow:visible!important}
.case-card-picture{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;will-change:transform,opacity}
.case-card-picture img{max-width:none;display:block}
.case-loader{position:fixed;inset:50% auto auto 50%;width:124px;height:210px;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;z-index:4}

.hanging-opening{text-indent:-.5em}

.hanging-opening>.letter{text-indent:0}

.case-loading{position:fixed;left:50%;top:calc(50% - 36px);transform:translate(-50%,-50%);width:124px;z-index:4;pointer-events:none}.case-loading iframe{display:block;width:124px;height:210px;border:0;background:transparent;margin-bottom:-70px}.case-loading-track{height:1px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden;border-radius:0;margin-top:32px;opacity:0;transition:transform 240ms ease-out}.case-loading-track>div{height:100%;background:currentColor;transform-origin:left;transform:scaleX(0)}

.project>.bar-title .title-word{display:inline-block;white-space:nowrap}

.pinned-year{position:absolute;top:24px;font-size:12px;color:#0005;pointer-events:none;z-index:2;line-height:1;background:transparent}
.bar-preview{position:fixed;width:196px;height:196px;overflow:hidden;pointer-events:none;z-index:10;opacity:0;contain:layout paint}
.bar-preview img{position:absolute;width:256px;height:256px;max-width:none;left:-30px;top:-30px;object-fit:cover}
@media(max-width:760px){.pinned-year{top:24px;line-height:1;color:rgb(0 0 0/.3)}}

.case-switch-close{position:absolute;right:24px;top:16px;z-index:2147483647;width:40px;height:40px;font-size:28px;color:#ccc;background:#3338;border-radius:50%;cursor:pointer}.case-switch-close[hidden]{display:none}

.case-switch-close{mix-blend-mode:difference;background:none;border-radius:0;padding:0;display:grid;place-items:center}.case-switch-close img{width:100%;height:100%;object-fit:contain}.case-switch-close[hidden]{display:none}