.works-surface {
--paper:var(--color-paper);--ink:var(--color-ink);--muted:var(--color-muted);--gutter:clamp(24px,3.6vw,72px);--gap:clamp(32px,3.5vw,72px);--line:var(--color-line);--last-width:40vw;--font-project-meta:'IBM Plex Mono','Courier New',monospace
}

:where(.works-surface) * {
box-sizing:border-box
}

.works-surface {
margin:0;background:var(--paper);color:var(--ink);font-family:Switzer,Arial,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased
}

:where(.works-surface) a {
color:inherit;text-decoration:none
}

:where(.works-surface) button {
font:inherit;color:inherit
}

:where(.works-surface) button,
:where(.works-surface) a {
-webkit-tap-highlight-color:transparent
}

:where(.works-surface) button {
cursor:pointer
}

:where(.works-surface) a:focus-visible,
:where(.works-surface) button:focus-visible,
:where(.works-surface) .gallery:focus-visible {
outline:2px solid var(--ink);outline-offset:6px
}

:where(.works-surface) #works:focus {
outline:none
}

:where(.works-surface) button:disabled {
opacity:.26;cursor:default
}

:where(.works-surface) h1,
:where(.works-surface) h2,
:where(.works-surface) p {
margin:0
}

:where(.works-surface) h1,
:where(.works-surface) h2 {
font-size:inherit;font-weight:500
}

:where(.works-surface) #works {
min-height:100svh;position:relative;padding-top:1px;overflow:hidden
}

:where(.works-surface) .works-masthead {
margin:28px var(--gutter) 0;display:flex;justify-content:space-between;align-items:center;min-height:24px
}

:where(.works-surface) .return-link {
padding:8px 0
}

:where(.works-surface) .return-link span {
color:var(--muted);margin-left:12px
}

:where(.works-surface) .edition {
font-size:11px
}

:where(.works-surface) .gallery-label {
display:flex;justify-content:space-between;align-items:baseline;margin:clamp(54px,9svh,104px) var(--gutter) 0
}

:where(.works-surface) .total {
color:var(--muted)
}

:where(.works-surface) .gallery {
display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:25px var(--gutter) 30px;scrollbar-width:none;align-items:flex-start;cursor:grab;min-height:57svh
}

:where(.works-surface) .gallery::-webkit-scrollbar {
display:none
}

:where(.works-surface) .gallery.is-dragging {
cursor:grabbing;scroll-snap-type:none
}

:where(.works-surface) .is-dragging a {
cursor:grabbing
}

:where(.works-surface) .project {
flex:none;scroll-snap-align:start;min-width:0
}

:where(.works-surface) .project--total {
width:48vw;margin-top:9svh
}

:where(.works-surface) .project--lucrezia {
width:23vw;margin-top:0
}

:where(.works-surface) .project--enpa {
width:var(--last-width);margin-top:5svh
}

:where(.works-surface) .track-end {
flex:0 0 calc(100vw - var(--last-width) - var(--gutter)*2 - var(--gap));pointer-events:none
}

:where(.works-surface) .project-link {
display:block;user-select:none
}

:where(.works-surface) .cover {
position:relative;overflow:hidden;background:#e4e9e5;isolation:isolate
}

:where(.works-surface) .cover picture {
display:block;width:100%;height:100%
}

:where(.works-surface) .cover img {
display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s cubic-bezier(.2,.7,.15,1)
}

:where(.works-surface) .project--total .cover {
aspect-ratio:1865/893
}

:where(.works-surface) .project--lucrezia .cover {
height:49svh;max-height:650px
}

:where(.works-surface) .project--enpa .cover {
aspect-ratio:1.55
}

:where(.works-surface) .caption {
display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-top:14px
}

:where(.works-surface) .caption h2 {
grid-column:1;font-size:14px
}

:where(.works-surface) .caption p {
grid-column:1;color:var(--muted);font-size:11px
}

:where(.works-surface) .index {
grid-column:2;grid-row:1;font-size:11px;padding-top:3px
}

:where(.works-surface) .visit {
position:absolute;bottom:16px;right:16px;display:flex;gap:22px;align-items:center;background:var(--paper);color:var(--ink);padding:12px 16px;font-size:11px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .4s
}

:where(.works-surface) .visit span {
font-size:20px;line-height:1
}

:where(.works-surface) .gallery-footer {
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:22px var(--gutter) 28px;gap:20px
}

:where(.works-surface) .gesture {
font-size:11px;color:var(--muted)
}

:where(.works-surface) .touch-hint {
display:none
}

:where(.works-surface) .controls {
display:flex;gap:8px
}

:where(.works-surface) .controls button {
border:1px solid var(--line);width:52px;height:44px;background:transparent;transition:background .2s
}

:where(.works-surface) .controls button span {
font:24px Arial,sans-serif;line-height:1
}

:where(.works-surface) .controls button:not(:disabled):hover {
background:#163b450a
}

:where(.works-surface) .replay {
justify-self:end;padding:12px 0;border:0;background:none;font-size:11px;color:var(--muted)
}

:where(.works-surface) .composition-grid {
position:fixed;inset:0 var(--gutter);display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none;opacity:0
}

:where(.works-surface) .composition-grid i {
border-left:1px solid var(--line);transform-origin:top
}

:where(.works-surface) .composition-grid i:last-child {
border-right:1px solid var(--line)
}

.works-surface.is-embedded .works-masthead,
.works-surface.is-embedded .gallery-label,
.works-surface.is-embedded .project,
.works-surface.is-embedded .gallery-footer {
visibility:hidden
}

.works-surface.is-embedded .replay {
display:none
}

:where(.works-surface) .sr-only {
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}

@media(hover:hover) and (pointer:fine) {
:where(.works-surface) .project-link:hover .cover img {
transform:scale(1.025)
}

:where(.works-surface) .project-link:hover .visit {
opacity:1;transform:none
}
}

:where(.works-surface) .project-link:focus-visible .visit {
opacity:1;transform:none
}

@media(max-width:700px) {
.works-surface {
--gutter:22px;--gap:26px;--last-width:78vw
}

:where(.works-surface) .works-masthead {
margin-top:20px
}

:where(.works-surface) .return-link span {
display:block;margin:5px 0 0;font-size:11px
}

:where(.works-surface) .edition {
display:none
}

:where(.works-surface) .gallery-label {
margin-top:58px;font-size:12px
}

:where(.works-surface) .gallery {
padding-top:30px;min-height:0
}

:where(.works-surface) .project--total,
:where(.works-surface) .project--lucrezia,
:where(.works-surface) .project--enpa {
width:78vw
}

:where(.works-surface) .project--total {
margin-top:5svh
}

:where(.works-surface) .project--lucrezia {
margin-top:0
}

:where(.works-surface) .project--enpa {
margin-top:8svh
}

:where(.works-surface) .project--total .cover {
aspect-ratio:4/5
}

:where(.works-surface) .project--lucrezia .cover {
height:auto;aspect-ratio:3/4
}

:where(.works-surface) .project--enpa .cover {
aspect-ratio:1/1
}

:where(.works-surface) .caption {
padding-top:12px
}

:where(.works-surface) .caption h2 {
font-size:13px
}

:where(.works-surface) .caption p {
font-size:11px
}

:where(.works-surface) .gallery-footer {
margin-top:20px;grid-template-columns:1fr auto;gap:12px
}

:where(.works-surface) .controls button {
width:48px;height:44px
}

:where(.works-surface) .replay {
grid-column:2;font-size:11px
}

:where(.works-surface) .desktop-hint {
display:none
}

:where(.works-surface) .touch-hint {
display:inline
}
}

@media(max-width:380px) {
:where(.works-surface) .gallery-label {
margin-top:34px
}

:where(.works-surface) .gallery {
padding-top:20px
}

:where(.works-surface) .gallery-footer {
margin-top:0
}

:where(.works-surface) .project--total .cover {
aspect-ratio:4/4.6
}
}

@media(min-width:701px) and (max-height:550px) {
:where(.works-surface) .gallery-label {
margin-top:22px
}

:where(.works-surface) .gallery {
min-height:0
}

:where(.works-surface) .project--total {
margin-top:4svh
}

:where(.works-surface) .project--lucrezia .cover {
height:55svh
}

:where(.works-surface) .gallery-footer {
margin-top:0
}
}

@media(prefers-reduced-motion:reduce) {
:where(.works-surface) *,
:where(.works-surface) *::before,
:where(.works-surface) *::after {
scroll-behavior:auto!important;transition:none!important
}

:where(.works-surface) .composition-grid {
display:none
}
}

:where(.works-surface) .project--lucrezia .cover img {
object-position:6% center
}

@media(min-width:701px) {
:where(.works-surface) .gallery-label {
margin-top:clamp(42px,7svh,80px)
}

:where(.works-surface) .project--total {
margin-top:6svh
}

:where(.works-surface) .project--enpa .cover {
aspect-ratio:1.85
}

:where(.works-surface) .gallery-footer {
margin-top:10px
}
}

:where(.works-surface) .project--lucrezia .cover img {
width:210%;max-width:none;object-position:left center
}

@media(max-width:700px) {
:where(.works-surface) .project--lucrezia .cover img {
object-position:right center
}
}

@media(max-width:380px) and (max-height:640px) {
:where(.works-surface) .gallery-label {
margin-top:24px
}

:where(.works-surface) .gallery {
padding-bottom:14px
}

:where(.works-surface) .project--total {
margin-top:3svh
}

:where(.works-surface) .project .cover {
max-height:46svh
}

:where(.works-surface) .gallery-footer {
margin-bottom:18px
}
}

:where(.works-surface) .project-video {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .3s
}

:where(.works-surface) .project-video.is-ready {
opacity:1
}

:where(.works-surface) .preview-toggle {
display:block;padding:8px 0;margin-top:6px;border:0;background:none;font-size:11px;color:var(--muted)
}

:where(.works-surface) .preview-toggle[hidden] {
display:none
}

.works-surface {
--last-width:min(32vw,52svh)
}

:where(.works-surface) .project--total {
width:min(34vw,56svh)
}

:where(.works-surface) .project--lucrezia {
width:min(28vw,46svh)
}

:where(.works-surface) .project--enpa {
width:var(--last-width)
}

:where(.works-surface) .project--total .cover,
:where(.works-surface) .project--lucrezia .cover,
:where(.works-surface) .project--enpa .cover {
aspect-ratio:1;height:auto;max-height:none
}

:where(.works-surface) .project--total {
margin-top:4svh
}

:where(.works-surface) .project--enpa {
margin-top:8svh
}

:where(.works-surface) .gallery {
min-height:0
}

:where(.works-surface) .caption {
position:relative;padding-bottom:13px
}

:where(.works-surface) .caption::after {
content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--ink);transform:scaleX(.07);transform-origin:left;opacity:.22;transition:transform .65s,opacity .4s
}

:where(.works-surface) .project[data-active] .caption::after,
:where(.works-surface) .project-link:hover .caption::after,
:where(.works-surface) .project-link:focus-visible .caption::after {
transform:scaleX(1);opacity:.5
}

:where(.works-surface) .cover img,
:where(.works-surface) .cover video {
translate:var(--pan-x,0px) var(--pan-y,0px);transition:translate .7s cubic-bezier(.2,.7,.15,1),transform 1.1s,opacity .3s
}

:where(.works-surface) .project-link:active .cover {
filter:brightness(.96)
}

@media(hover:hover) and (pointer:fine) {
:where(.works-surface) .project-link:hover .cover video {
transform:scale(1.025)
}
}

@media(max-width:700px) {
.works-surface {
--last-width:78vw
}

:where(.works-surface) .project--total,
:where(.works-surface) .project--lucrezia,
:where(.works-surface) .project--enpa {
width:78vw
}

:where(.works-surface) .project--total {
margin-top:4svh
}

:where(.works-surface) .project--lucrezia {
margin-top:0
}

:where(.works-surface) .project--enpa {
margin-top:6svh
}

:where(.works-surface) .project--total .cover,
:where(.works-surface) .project--lucrezia .cover,
:where(.works-surface) .project--enpa .cover {
aspect-ratio:1;max-height:none
}

:where(.works-surface) .gallery-footer {
margin-top:12px
}
}

@media(prefers-reduced-motion:reduce) {
:where(.works-surface) .cover img,
:where(.works-surface) .cover video {
translate:none!important;transform:none!important
}
}

:where(.works-surface) .project--enpa .cover {
background:#080807
}

:where(.works-surface) .project--enpa .cover img {
object-fit:contain;object-position:center;translate:none
}

:where(.works-surface) .project--enpa .project-link:hover .cover img {
transform:none
}

@media(min-width:701px) {
:where(.works-surface) .project--total {
width:min(34vw,50svh)
}

:where(.works-surface) .project--enpa {
width:min(32vw,48svh)
}

.works-surface {
--last-width:min(32vw,48svh)
}
}

:where(.works-surface) .project--jolly-admin {
width:min(30vw,46svh);margin-top:2svh
}

:where(.works-surface) .project--jolly-menu {
width:var(--last-width);margin-top:6svh
}

:where(.works-surface) .project--jolly-admin .cover,
:where(.works-surface) .project--jolly-menu .cover {
aspect-ratio:1
}

:where(.works-surface) .project--jolly-admin .cover img,
:where(.works-surface) .project--jolly-menu .cover img {
object-fit:contain;translate:none
}

:where(.works-surface) .project--jolly-admin .project-link:hover img,
:where(.works-surface) .project--jolly-menu .project-link:hover img {
transform:none
}

@media(max-width:700px) {
:where(.works-surface) .project--jolly-admin,
:where(.works-surface) .project--jolly-menu {
width:78vw
}

:where(.works-surface) .project--jolly-menu {
margin-top:4svh
}
}

:where(.works-surface) .project--lucrezia {
width:min(28vw,32svh)
}

:where(.works-surface) .project--lucrezia .cover {
aspect-ratio:464/804;height:auto;max-height:none;background:#f3eef9
}

:where(.works-surface) .project--lucrezia .cover img,
:where(.works-surface) .project--lucrezia .cover video {
width:100%;max-width:100%;object-fit:contain;object-position:center;translate:none;transform:none
}

:where(.works-surface) .project--lucrezia .project-link:hover .cover img,
:where(.works-surface) .project--lucrezia .project-link:hover .cover video {
transform:none
}

@media(max-width:700px) {
:where(.works-surface) .project--lucrezia {
width:min(78vw,34.6svh)
}
}

:where(.works-surface) .loop-copy {
display:none
}

:where(.works-surface) .gallery.is-looping {
scroll-snap-type:none
}

:where(.works-surface) .is-looping .loop-copy {
display:block
}

:where(.works-surface) .is-looping .track-end {
display:none
}

:where(.works-surface) .motion-toggle {
border:0;background:none;padding:10px 0;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:4px;margin-right:20px
}

:where(.works-surface) .motion-toggle[hidden] {
display:none
}

:where(.works-surface) .gallery-progress {
display:none
}

@media(max-width:700px) {
:where(.works-surface) .gallery {
padding-bottom:16px
}

:where(.works-surface) .project {
position:relative;padding-bottom:36px
}

:where(.works-surface) .project .preview-toggle {
position:absolute;bottom:0;left:0;margin:0;min-height:32px
}

:where(.works-surface) .project--lucrezia {
width:calc(78vw * 464 / 804)
}

:where(.works-surface) .project--total {
margin-top:20px
}

:where(.works-surface) .project--enpa {
margin-top:32px
}

:where(.works-surface) .project--jolly-admin {
margin-top:12px
}

:where(.works-surface) .project--jolly-menu {
margin-top:24px
}

:where(.works-surface) .gallery-footer {
margin:0 var(--gutter) 24px;row-gap:16px
}

:where(.works-surface) .gallery-footer .controls {
gap:8px
}

:where(.works-surface) .gallery-footer .controls button {
width:48px;height:44px
}

:where(.works-surface) .gallery-progress {
display:block;grid-column:1/-1;grid-row:2;height:1px;background:var(--line);overflow:hidden
}

:where(.works-surface) .gallery-progress span {
display:block;height:100%;background:var(--ink);transform:scaleX(var(--gallery-progress,.2));transform-origin:left
}

:where(.works-surface) .gallery-footer .replay {
grid-row:3;padding:8px 0
}

:where(.works-surface) .gallery-label .current {
font-variant-numeric:tabular-nums
}

:where(.works-surface) .return-link span,
:where(.works-surface) .caption p,
:where(.works-surface) .gallery-footer .replay {
font-size:11px
}

:where(.works-surface) .caption h2 {
font-size:15px
}
}

:where(.works-surface) .project .cover video,
:where(.works-surface) .project-link:hover .cover video {
translate:none;transform:none;transition:opacity .3s;backface-visibility:hidden
}

:where(.works-surface) .cover:has(video) img,
:where(.works-surface) .project-link:hover .cover:has(video) img {
translate:none;transform:none
}

:where(.works-surface) .cover::after {
content:'';position:absolute;inset:0;z-index:3;background:#06171e;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.16,1,.3,1)
}

:where(.works-surface) .gallery.has-project-focus .project:not(.is-highlighted) .cover::after {
opacity:.56
}

:where(.works-surface) .project .caption {
transition:opacity .4s
}

:where(.works-surface) .gallery.has-project-focus .project:not(.is-highlighted) .caption {
opacity:.48
}

:where(.works-surface) .project-metadata {
position:absolute;inset:auto 0 0;z-index:2;padding:84px 28px 26px;background:linear-gradient(transparent,rgba(4,17,23,.96) 70%);color:#fff;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)
}

:where(.works-surface) .project-metadata {
font-family:var(--font-project-meta);font-weight:400;font-style:normal
}

:where(.works-surface) .project-metadata dl {
display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin:0
}

:where(.works-surface) .project-metadata dt {
display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#e2e9eb;margin-bottom:6px
}

:where(.works-surface) .project-metadata dt::before {
content:'';flex:0 0 12px;height:3px;background:#f2e4bd
}

:where(.works-surface) .project-metadata dd {
margin:0;font-family:inherit;font-style:normal;font-weight:400;font-size:14px;line-height:1.5
}

:where(.works-surface) .project-metadata-action {
display:block;font-size:11px;line-height:1.5;margin-top:18px;padding-top:14px;border-top:1px solid #ffffff60
}

:where(.works-surface) .project.is-highlighted .project-metadata {
opacity:1;transform:none
}

@media(max-width:700px) {
:where(.works-surface) .project-metadata {
display:none
}

:where(.works-surface) .gallery.has-project-focus .project:not(.is-highlighted) .cover::after {
opacity:0
}

:where(.works-surface) .gallery.has-project-focus .project:not(.is-highlighted) .caption {
opacity:1
}
}

@media(prefers-reduced-motion:reduce) {
:where(.works-surface) .cover::after,
:where(.works-surface) .project-metadata,
:where(.works-surface) .project .caption {
transition:none;transform:none
}
}

:where(.works-surface) .cover {
container-type:inline-size
}

:where(.works-surface) .index,
:where(.works-surface) .project-metadata dt {
font-size:11px
}

@container(max-width:260px) {
:where(.works-surface) .project-metadata {
padding:64px 16px 20px
}

:where(.works-surface) .project-metadata dl {
grid-template-columns:1fr;gap:12px
}

:where(.works-surface) .project-metadata dd {
font-size:13px
}
}

/* Keep the mobile gallery and its navigation together within one viewport.
   Card sizes share a height budget; changing slides never moves the controls. */
@media(max-width:700px){
 .works-surface #works{box-sizing:border-box;height:calc(100svh - var(--baba-header-flow,0px));min-height:490px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;--mobile-cover:min(78vw,max(130px,calc(100svh - var(--baba-header-height,0px) - 330px)))}
 .works-surface .works-masthead{margin:0 var(--gutter);min-height:44px}
 .works-surface .gallery-label{margin:10px var(--gutter) 0;min-height:24px}
 .works-surface .gallery{min-height:0;padding-block:16px 8px;align-items:center}
 .works-surface .gallery .project{width:var(--mobile-cover);padding-bottom:32px;margin-top:0}
 .works-surface .gallery .project--enpa{margin-top:16px}
 .works-surface .gallery .project--jolly-menu{margin-top:12px}
 .works-surface .gallery .project--lucrezia{width:calc(var(--mobile-cover) * 464 / 804)}
 .works-surface .gallery .project .cover{height:auto;max-height:none;aspect-ratio:1}
 .works-surface .gallery .project--lucrezia .cover{aspect-ratio:464/804}
 .works-surface .gallery-footer{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:6px 8px;align-items:center;margin:0 var(--gutter) max(10px,env(safe-area-inset-bottom))}
 .works-surface .gallery-footer .gesture{grid-column:1;grid-row:1;margin:0}
 .works-surface .gallery-footer .controls{grid-column:3;grid-row:1;justify-self:end;gap:4px}
 .works-surface .gallery-footer .controls button{width:44px;height:44px}
 .works-surface .gallery-footer .section-cue{grid-column:2;grid-row:1;justify-self:center;margin:0;width:64px;height:76px;min-height:76px;--cue-icon-width:30px;--cue-icon-height:44px}
 .works-surface .gallery-progress{grid-column:1/-1;grid-row:2}
 .works-surface #announcement{position:absolute}
}

/* Short landscape screens keep the return link and index on one line. */
@media(min-width:701px) and (max-height:500px){
 .works-surface #works{box-sizing:border-box;height:calc(100svh - var(--baba-header-flow,0px));min-height:360px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 56px;--compact-cover:clamp(100px,calc(100svh - var(--baba-header-height,0px) - 190px),190px)}
 .works-surface .works-masthead{grid-area:1/1;margin:0 var(--gutter);align-self:start;min-height:44px}
 .works-surface .gallery-label{grid-area:1/1;align-self:center;justify-self:center;gap:28px;margin:0;pointer-events:none}
 .works-surface .gallery{grid-area:2/1;min-height:0;padding-block:4px;align-items:start}
 .works-surface .gallery .project{width:var(--compact-cover);margin-top:0;padding-bottom:32px;position:relative}
 .works-surface .gallery .project--lucrezia{width:calc(var(--compact-cover) * 464 / 804)}
 .works-surface .gallery .project .cover{height:auto;max-height:none;aspect-ratio:1}
 .works-surface .gallery .project--lucrezia .cover{aspect-ratio:464/804}
 .works-surface .caption{padding-top:6px;gap:2px 8px}
 .works-surface .project .preview-toggle{position:absolute;bottom:0;left:0;margin:0;min-height:32px}
 .works-surface .gallery-footer-anchor{grid-area:3/1}
 .works-surface .gallery-footer{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;margin:0 var(--gutter);gap:0}
 .works-surface .gallery-footer .gesture{grid-area:1/1;margin:0}
 .works-surface .gallery-footer .controls{grid-area:1/3;justify-self:end}
 .works-surface .gallery-footer .controls button{height:44px;width:44px}
 .works-surface .gallery-footer .section-cue{grid-area:1/2;justify-self:center;margin:0;height:52px;min-height:52px;width:64px;--cue-icon-width:22px;--cue-icon-height:28px}
 .works-surface #announcement{position:absolute}
}