@font-face{font-family:Circular;src:url('./assets/CircularXXTrial-Regular.otf') format('opentype');font-display:swap}
@font-face{font-family:Simplon;src:url('./assets/SimplonMono-Light.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}html{color-scheme:light;background:#fff}body{margin:0;color:#545454;background:#fff;font-family:Circular,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:1px solid #ff484f;outline-offset:5px}[hidden]{display:none!important}::selection{background:#ffe0e2}.header{height:66px;display:flex;align-items:center;position:relative;z-index:5;padding:0 14%;gap:clamp(48px,9vw,180px);font-size:12px}.wordmark{text-decoration:none;font-family:Georgia,serif}.back{border:0;background:none;padding:10px 0;display:flex;align-items:center;gap:12px;font-family:Simplon,monospace;font-size:10px;text-transform:uppercase}.back span{font-family:Arial,sans-serif;font-size:21px}.index{min-height:calc(100svh - 66px);padding:10px 30px 220px;transition:opacity .35s}.numbers{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;column-gap:0;row-gap:6px}.number{flex:0 0 calc(100% / 18);text-align:center;padding:3px 0;text-decoration:none;font-size:clamp(22px,2.9vw,42px);line-height:1.35;font-weight:400;font-variant-numeric:tabular-nums;transition:color .2s,opacity .2s}.numbers.is-hovering .number{color:#dedede}.numbers.is-hovering .number.is-highlighted{color:var(--accent,#ff484f)}.bio{position:fixed;bottom:4.1vh;right:4.6vw;width:clamp(260px,30.7vw,410px);padding:20px 20px 17px;box-shadow:1px 2px 5px #0000000a;color:#ff484f;font-family:Simplon,monospace;font-size:clamp(10px,.86vw,12px);line-height:1.15;text-align:center}.bio p{margin:0}.bio .contact{margin-top:23px}.contact{text-transform:uppercase}.contact a{text-transform:none;text-underline-offset:2px}.status{font-family:Simplon,monospace;font-size:11px;text-align:center;margin-top:32px;color:#888}.is-open .index{opacity:.085;pointer-events:none}.is-open{overflow:hidden}.project{position:fixed;z-index:3;inset:0;padding:150px 14% 36px;display:flex;flex-direction:column;align-items:center;outline:none;animation:appear .3s ease both}.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%;flex:1;min-height:0;overscroll-behavior-x:contain}.gallery::-webkit-scrollbar{display:none}.slide{flex:0 0 100%;height:100%;min-width:0;margin:0;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always;padding:10px 0 22px}.slide img,.slide video{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}.slide p{font-family:Simplon,monospace;font-size:12px}.project-footer{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;padding-top:16px;font-family:Simplon,monospace;font-size:10px;line-height:1.5}.project-info{max-width:80%}.project-info h2{font:inherit;color:#555;margin:0}.project-info p{margin:2px 0;color:#888}.project-description,.project-credits{max-width:460px;white-space:pre-line}.gallery-controls{display:flex;align-items:center;gap:14px;white-space:nowrap}.gallery-controls button{border:0;background:none;padding:3px 6px;font-size:16px}.gallery-controls button:disabled{opacity:.5;cursor:default}.counter{min-width:38px;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.media-error{color:#888;text-align:center}.is-open .wordmark{opacity:.45}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1700px){.header{height:80px}.index{padding-top:18px}.project{padding:170px 22% 45px}}
@media(max-width:760px){.header{height:60px;padding:0 24px;gap:60px}.index{padding:12px 18px 230px}.number{flex-basis:calc(100% / 9);font-size:26px;padding:5px 0}.numbers{row-gap:3px}.bio{width:280px;max-width:calc(100vw - 48px);right:24px;bottom:24px;padding:16px;font-size:10px}.project{padding:118px 24px 26px}.project-footer{font-size:10px;gap:12px}.project-info{max-width:70%}.gallery-controls{gap:5px}.slide{padding-bottom:12px}}
@media(max-height:560px){.bio{position:absolute;bottom:20px}.project{padding-top:100px;padding-bottom:18px}.project-footer{padding-top:4px}.project-description,.project-credits{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.number.selected{color:var(--accent,#ff484f)}

.project{z-index:6}.project .back{position:absolute;top:14px;left:calc(14% + 48px + clamp(48px,9vw,180px))}.is-open .header{pointer-events:none}
@media(min-width:1700px){.project .back{top:21px}}
@media(max-width:760px){.project .back{top:11px;left:132px}}

/* Continuous material strip; the next work remains visible. */
.project{--gallery-height:min(56svh,520px,42vw);padding:130px 0 70px;justify-content:center}
.gallery{flex:none;width:100%;height:var(--gallery-height);min-height:0;gap:18px;padding:0 14vw;scroll-snap-type:none;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:auto}
.slide{flex:0 0 auto;width:calc(var(--gallery-height) * var(--ratio,1.4));max-width:none;height:100%;padding:0;scroll-snap-align:none;align-items:center}
.slide img,.slide video{width:100%;height:auto;max-height:100%;object-fit:contain}
.project-footer{width:72%;padding-top:22px}.media-error{padding:20px}
@media(max-width:760px){.project{--gallery-height:min(50svh,48vw);padding:118px 0 70px}.gallery{padding-left:24px;padding-right:24px;gap:12px}.project-footer{width:calc(100% - 48px)}}
@media(max-height:560px){.project{--gallery-height:48svh;padding-top:90px;padding-bottom:35px}.project-footer{padding-top:12px}}

/* Maru typography and the quieter index. */
@font-face{font-family:Maru;src:url('./assets/GT-Maru-Mono-Light-Trial.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
body,button,a,.wordmark,.bio,.status,.project-footer,.slide p,.back{font-family:Maru,monospace;font-weight:300}
.header{background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.025)}
.wordmark{font-size:14px;color:#1c191a}
.number{font-size:clamp(11px,1.45vw,21px)}
.gallery.is-single{justify-content:center;padding-left:24px;padding-right:24px}
.gallery.is-single .slide{max-width:calc(100vw - 48px)}
@media(max-width:760px){.number{font-size:13px}}

.back-cursor{display:none;position:fixed;z-index:20;pointer-events:none;font-family:Maru,monospace;font-size:12px;color:#545454;line-height:1.5}
@media(hover:hover) and (pointer:fine){
 .project{cursor:none}.show-back-cursor .back-cursor{display:block}
 .project img,.project video{cursor:default}.project button,.project a,.media-error{cursor:pointer}
}

/* Compact header and expanding, left-aligned project index. */
.header{height:33px}
.index{min-height:calc(100svh - 33px)}
.numbers{justify-content:flex-start;column-gap:24px;row-gap:6px}
.number{flex:0 0 auto;display:inline-flex;align-items:baseline;text-align:left;max-width:100%}
.numeral{flex:none}
.project-label{display:block;min-width:0;max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;text-overflow:clip;color:#ff484f;opacity:0;transform:translateX(-6px);transition:max-width .25s ease,margin-left .25s ease,opacity .2s ease,transform .25s ease}
.number.is-highlighted .project-label{max-width:var(--label-width);margin-left:10px;opacity:1;transform:translateX(0)}
.bio{position:fixed;z-index:2;background:#fff;padding-top:30px;box-shadow:0 2px 14px rgba(0,0,0,.075),0 10px 28px rgba(0,0,0,.035);cursor:grab;touch-action:none;user-select:none}
.bio.is-dragging{cursor:grabbing}
.bio-handle{position:absolute;left:6px;right:32px;top:3px;height:21px;border:0;background:none;cursor:grab}
.bio-close{position:absolute;right:5px;top:3px;width:24px;height:24px;display:grid;place-items:center;border:0;background:none;font-size:16px;line-height:1;color:inherit}
.bio a{cursor:pointer}
@media(min-width:1700px){.header{height:40px}.index{min-height:calc(100svh - 40px)}}
@media(max-width:760px){.header{height:30px}.index{min-height:calc(100svh - 30px)}.numbers{column-gap:20px}.bio{padding-top:30px}}

/* Inline project drawers live directly after their index row. */
.number{font-size:14px;padding:3px 4px}
.numbers.is-hovering .number.is-highlighted,.number.selected{background:transparent;color:#ff484f}
.number.is-highlighted .project-label,.number.selected .project-label{color:#ff484f}
.is-open{overflow:auto}.is-open .index{opacity:1;pointer-events:auto}.is-open .header{pointer-events:auto}.is-open .wordmark{opacity:1}
.project{position:relative;inset:auto;z-index:1;flex:0 0 100%;width:100%;min-width:0;--gallery-height:min(28svh,260px,21vw);padding:0;align-items:center;justify-content:flex-start;overflow:hidden;animation:none;transition:max-height .32s ease}
.project .gallery{height:var(--gallery-height);margin-top:12px;padding-left:0;padding-right:0;gap:9px}
.project .project-footer{width:100%;padding-top:12px;padding-bottom:18px}
.project .gallery.is-single{padding-left:0;padding-right:0}
@media(max-width:760px){.number{font-size:14px}.project{--gallery-height:min(25svh,24vw);padding:0}.project .gallery{gap:6px}}
@media(max-height:560px){.project{--gallery-height:24svh;padding:0}}

.gallery{overflow-anchor:none}

.bio{border-radius:20px}.bio-close{top:7px;right:9px}
.gallery.all-visible{overflow-x:hidden;touch-action:auto}

/* Engravers' Gothic and a quieter project-name reveal. */
@font-face{font-family:EngraversGothic;src:url('./assets/Engravers-Gothic-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
body,button,a,.wordmark,.bio,.status,.project-footer,.slide p,.back-cursor{font-family:EngraversGothic,sans-serif;font-weight:400}
.bio{border-radius:5px;background:#FF3CC7;color:#BEEF9E}
.project-label{transform:translateX(-2px);transition:max-width .32s ease-in-out,margin-left .32s ease-in-out,opacity .28s ease-in-out,transform .32s ease-in-out}

/* GT Era Display Light, with full-height video frames. */
@font-face{font-family:EraDisplay;src:url('./assets/GT-Era-Display-Light-Trial.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
body,button,a,.wordmark,.bio,.status,.project-footer,.slide p,.back-cursor{font-family:Maru,monospace;font-weight:300}
.slide video{height:100%;width:100%;max-height:100%;object-fit:contain}

@font-face{font-family:MaruRegular;src:url('./assets/GT-Maru-Mono-Regular-Trial.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
body,button,a,.wordmark,.bio,.status,.project-footer,.slide p,.back-cursor{font-family:MaruRegular,monospace;font-weight:400}

.project-label{text-transform:uppercase}
.project .gallery,.project .gallery.is-single{justify-content:flex-start}
.bio{font-size:clamp(11px,calc(.86vw + 1px),13px)}


/* Keep the open project's label; let the hovered project take emphasis. */
.number.selected .project-label{max-width:var(--label-width);margin-left:10px;opacity:1;transform:translateX(0)}
.numbers.is-hovering .number.selected:not(.is-highlighted),
.numbers.is-hovering .number.selected:not(.is-highlighted) .project-label{color:#dedede}

/* Video thumbnails remain still until their play button is activated. */
.video-slide{position:relative}
.video-play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1c191a;display:grid;place-items:center;box-shadow:0 2px 12px #0002;cursor:pointer}
.video-play span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor;margin-left:3px}
.video-play:hover{background:white}
.video-play:focus-visible{outline:2px solid #ff484f;outline-offset:4px}
.video-play[hidden]{display:none}


/* Titles occupy their own row; revealing them never widens index numbers. */
.number .project-label{display:none}
.project-index-title{align-self:stretch;margin:2px 0 0;padding-left:var(--title-offset,4px);font:inherit;font-size:14px;font-weight:400;line-height:1.35;text-transform:uppercase;color:#ff484f;overflow-wrap:anywhere}

/* Close control tucked into a contrasting quarter-circle corner. */
.bio-close{top:auto;right:0;bottom:0;width:32px;height:32px;border-radius:100% 0 5px 0;background:#FFFFFF;color:#FF3CC7;padding:8px 0 0 8px;font-size:18px;line-height:1}
.bio-handle{right:6px}
.bio{padding-bottom:34px}

/* Keep the tight spacing without clipping the title inside the drawer. */
.project{margin-top:-5.5px}
.project-index-title{margin-top:0;flex-shrink:0}
@media(max-width:760px){.project{margin-top:-2.5px}}

/* A fresh reference palette on each page load. */
.bio{background:var(--intro-background,#668A7E);color:var(--intro-text,#B9E78C)}
.bio-close{color:var(--intro-background,#668A7E);background:#fff}

/* Share the introduction's chosen background with active project text. */
.numbers .number.selected,
.numbers.is-hovering .number.selected,
.numbers.is-hovering .number.is-highlighted,
.number.selected .project-label,
.number.is-highlighted .project-label,
.project-index-title{color:var(--portfolio-accent,#668A7E)}

.numbers.is-hovering .number.selected:not(.is-highlighted),
.numbers.is-hovering .number.selected:not(.is-highlighted) .project-label{color:var(--portfolio-accent,#668A7E)}

/* Hovered and clicked titles share the introduction palette. */
.project .project-index-title span{display:inline-block;padding:1px 3px;margin-left:-3px;background:var(--portfolio-accent,#668A7E);color:var(--portfolio-accent-text,#B9E78C);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Compact introduction spacing. */
.bio{padding:15px 10px 17px;right:2.3vw;bottom:2.05vh}
.bio .contact{margin-top:11.5px}
.bio-handle{height:10px}
@media(max-width:760px){.bio{padding:15px 8px 17px;right:12px;bottom:12px;max-width:calc(100vw - 24px)}}
@media(max-height:560px){.bio{bottom:10px}}

/* Centre the introduction and fit its two-line paragraph. */
.bio{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 32px)}
.bio-introduction span{display:block}
@media(max-width:760px){.bio{right:auto;bottom:auto;max-width:calc(100vw - 24px)}}

/* Fold the introduction into the upper triangle of the page corner. */
.bio{--fold-size:min(440px,96vw);left:auto;top:auto;right:0;bottom:0;transform:none;width:var(--fold-size);height:var(--fold-size);max-width:none;padding:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(-3px -3px 9px #0002);text-align:left;font-size:clamp(10px,2.8vw,12px);line-height:1.35;clip-path:polygon(0 0,100% 0,0 100%)}
.bio::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,transparent 46%,#00000012 50%,transparent 50%),var(--intro-background,#668A7E);clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}
.bio-copy{height:calc(100% - 40px);margin:20px}
.bio-copy::before{content:"";float:right;width:100%;height:100%;shape-outside:polygon(92% 0,100% 0,100% 100%,0 100%);shape-margin:8px}
.bio .contact{margin-top:12px}
.bio .contact a{white-space:nowrap}
.bio-close{top:3px;right:30px;bottom:auto;width:22px;height:22px;padding:0;border-radius:0;background:transparent;color:inherit;font-size:18px}
.bio-handle{top:0;left:0;right:60px;height:16px}

/* Diagonal type fills the folded face, following the cut edge. */
.bio-copy{position:absolute;inset:0;height:auto;margin:0}
.bio-copy::before{display:none}
.fold-text-line{position:absolute;display:block;line-height:1.15;white-space:nowrap;transform:rotate(-45deg);transform-origin:0 0}
.bio-close{top:0;right:20px;z-index:3;width:24px;height:24px;background:transparent;color:inherit}

/* Reduce the complete fold by 80%, retaining the fitted diagonal type. */
.bio{--intro-scale:.2;transform:scale(var(--intro-scale));transform-origin:bottom right}
.bio-close{left:0;top:0;right:auto;bottom:auto}
.bio-handle{left:26px}

/* Resize from the upper-left grip while the fold stays anchored. */
.bio{--intro-scale:.42;left:auto;top:auto;right:0;bottom:0;cursor:default;touch-action:auto}
.bio-handle{left:0;top:0;right:auto;width:calc(14px / var(--intro-scale));height:calc(14px / var(--intro-scale));z-index:4;cursor:nwse-resize;touch-action:none;padding:0}
.bio-handle::after{content:"↖";font-size:calc(10px / var(--intro-scale));color:var(--intro-text);position:absolute;top:0;left:0}
.bio-close{left:calc(16px / var(--intro-scale));width:calc(14px / var(--intro-scale));height:calc(14px / var(--intro-scale));font-size:calc(12px / var(--intro-scale))}
.bio.is-resizing{cursor:nwse-resize}

/* Fixed fold with only the close control at the top-left. */
.bio-close{left:0}

.number-placeholder{cursor:default}

/* Let the fold cast a soft shadow beyond its diagonal edge. */
.bio{clip-path:none;filter:drop-shadow(-3px -3px 12px #00000018) drop-shadow(3px 4px 6px #0000000c);pointer-events:none}
.bio-copy{clip-path:polygon(0 0,100% 0,0 100%)}
.bio a,.bio-close{pointer-events:auto}
.bio-close span{display:block;transform-origin:center;animation:fold-close-turn 7s ease-in-out infinite}
@keyframes fold-close-turn{0%,75%{transform:rotate(0deg)}95%,100%{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.bio-close span{animation:none}}

/* Background drawings roll continuously with soft viewport edges. */
.idle-drawings{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;overflow:hidden;display:block;background:transparent;transition:opacity 1.2s ease}
.idle-drawings.is-visible{opacity:1}
.drawings-track{display:flex;flex-direction:column;width:100%;will-change:transform}
.drawings-group{display:flex;flex-direction:column;flex:none;gap:5svh;padding:0 9vw 5svh;width:100%}
.idle-drawings img{display:block;flex:none;width:auto;height:28svh;max-width:32vw;object-fit:contain}
@media(max-width:760px){.idle-drawings img{height:24svh;max-width:52vw}.drawings-group{padding:0 6vw 4svh;gap:4svh}}
@media(prefers-reduced-motion:reduce){.idle-drawings{display:none}}

/* Keep navigation, galleries and the introduction above the drawings. */
body{isolation:isolate}
.index{position:relative;z-index:1}

/* Restore the centred, draggable introduction card. */
.bio{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);transform-origin:center;width:max-content;height:auto;max-width:calc(100vw - 32px);padding:15px 10px 17px;border-radius:5px;background:var(--intro-background);color:var(--intro-text);filter:none;clip-path:none;box-shadow:0 2px 14px #00000013,0 10px 28px #00000009;pointer-events:auto;cursor:grab;touch-action:none;font-size:clamp(11px,calc(.86vw + 1px),13px);line-height:1.15;text-align:center}
.bio::before,.bio-copy::before,.bio-handle::after{display:none}
.bio-copy{position:static;height:auto;margin:0;clip-path:none}
.bio-introduction span{display:block}
.bio-close{top:auto;left:auto;right:0;bottom:0;width:32px;height:32px;border-radius:100% 0 5px 0;background:white;color:var(--intro-background);padding:8px 0 0 8px;font-size:18px;line-height:1}
.bio-handle{position:absolute;left:6px;right:6px;top:3px;width:auto;height:10px;cursor:grab}
.bio.is-dragging{cursor:grabbing}
@media(max-width:760px){.bio{max-width:calc(100vw - 24px);padding:15px 8px 17px}}

/* Start the floating info card at the bottom centre. */
.bio{top:auto;bottom:24px;transform:translateX(-50%)}
@media(max-width:760px){.bio{bottom:12px}}

/* Hover enlargement stays in flow, anchored at the image's upper-left. */
.project .gallery{align-items:flex-start;transition:height .3s ease-in-out}
.project .gallery .slide{height:var(--gallery-height);align-items:flex-start;justify-content:flex-start;transition:width .3s ease-in-out,height .3s ease-in-out}
.project .gallery.has-expanded-image{height:var(--expanded-height)}
.project .gallery .slide.is-expanded{height:var(--expanded-height);width:var(--expanded-width)}
.project .gallery .slide img{height:100%;width:100%;object-position:top left}
.project.is-pinned{transition:none}
@media(prefers-reduced-motion:reduce){.project .gallery,.project .gallery .slide{transition:none}}

/* Introduction becomes a full-width footer in the normal page flow. */
body{display:flex;flex-direction:column;min-height:100svh}
.header{flex-shrink:0}
.index{flex:1;min-height:0;padding-bottom:40px}
.site-footer{position:relative;z-index:1;flex-shrink:0;margin-top:auto;padding:16px 34px 24px;color:#000;font-family:MaruRegular,monospace;font-size:clamp(11px,calc(.86vw + 1px),13px);line-height:1.5}
.site-footer p{margin:0}
.site-footer .footer-introduction{text-align:justify;text-align-last:justify}
.site-footer .contact{margin-top:12px}
.site-footer a{color:#000}
@media(max-width:760px){.site-footer{padding:12px 22px 18px}.site-footer .footer-introduction{text-align-last:left}}

.site-footer .footer-introduction{text-align:left;text-align-last:left;text-transform:uppercase}

.wordmark,.site-footer .contact a{text-transform:uppercase}

/* Larger mobile index and media, with exactly five numbers per row. */
@media(max-width:760px){
  .numbers{column-gap:0;row-gap:6px}
  .number{flex:0 0 20%;font-size:19.6px}
  .project{--gallery-height:min(35svh,33.6vw)}
}
@media(max-width:760px) and (max-height:560px){.project{--gallery-height:33.6svh}}

/* Keep the introduction visible and reserve space so content can scroll clear. */
body{min-height:100dvh;padding-bottom:var(--footer-height,160px)}
.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;background:#fff;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.project-index-title,.project-index-title span{white-space:nowrap;overflow-wrap:normal}
@media(max-width:760px){.site-footer{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* Compact gallery strip for hover and pinned projects. */
.project{--gallery-height:min(45.36svh,421.2px,34.02vw)}
@media(max-height:560px){.project{--gallery-height:38.88svh}}
@media(max-width:760px){.project{--gallery-height:min(56.7svh,54.432vw)}}
@media(max-width:760px) and (max-height:560px){.project{--gallery-height:54.432svh}}

.site-footer{box-shadow:0 -5px 18px rgba(0,0,0,.10),0 -1px 3px rgba(0,0,0,.06)}

/* Image-led index; keep the numbered version available for comparison. */
.thumbnail-index{column-gap:20px;row-gap:20px;align-items:flex-start}
.thumbnail-index .number{flex:0 0 calc((100% - 140px)/8);height:clamp(72px,8vw,120px);padding:0;align-items:center;justify-content:center;position:relative}
.project-thumbnail{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
.thumbnail-index .has-thumbnail .numeral{display:none}
.thumbnail-index .number-placeholder,.thumbnail-index .empty-thumbnail{border:1px solid #eee;color:#aaa;font-size:11px;height:auto;aspect-ratio:1}
.thumbnail-index.is-hovering .project-thumbnail{opacity:.4}
.thumbnail-index .is-highlighted .project-thumbnail,.thumbnail-index:not(.is-hovering) .selected .project-thumbnail{opacity:1}
.thumbnail-index .project{margin-top:-14px}
@media(max-width:760px){.thumbnail-index{column-gap:10px;row-gap:14px}.thumbnail-index .number{flex-basis:calc((100% - 20px)/3);height:clamp(72px,26vw,180px)}}
@media(max-width:760px){.thumbnail-index .project{margin-top:-8px}}
@media(max-width:760px){.thumbnail-index .number-placeholder,.thumbnail-index .empty-thumbnail{height:auto}}

/* The viewport stays still; only the project library scrolls. */
html{height:100%;overflow:hidden}
body{height:100dvh;min-height:0;overflow:hidden;padding-bottom:0}
.header{background:#fff}
.index{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding-bottom:24px;scrollbar-gutter:stable;touch-action:auto}
.site-footer{position:relative;flex:0 0 auto;margin-top:0}

/* Floating introduction, centred at half the viewport width. */
.site-footer{position:fixed;left:50%;right:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:50vw;margin:0;padding:18px 20px;border-radius:5px;background:#fff;box-shadow:0 2px 14px #00000013,0 10px 28px #00000009;overflow-wrap:anywhere}
.index{padding-bottom:calc(var(--footer-height,160px) + 48px + env(safe-area-inset-bottom,0px))}
@media(max-width:760px){.site-footer{padding:12px}}

/* Emphasise one thumbnail without opening or resizing its gallery on hover. */
.thumbnail-index .number{transition:opacity .22s ease,filter .22s ease}
.thumbnail-index .project-thumbnail{transform-origin:center;transition:transform .25s ease,opacity .22s ease}
.header,.site-footer{transition:opacity .22s ease,filter .22s ease}
.thumbnail-index .project{transition:max-height .32s ease,opacity .22s ease,filter .22s ease}
.thumbnail-index:has(.selected) .number:not(.selected){opacity:.5;filter:none}
body:has(.thumbnail-index .selected) .header,body:has(.thumbnail-index .selected) .site-footer{opacity:.5;filter:none}
@media(hover:hover) and (pointer:fine){
  .thumbnail-index .has-thumbnail:hover{z-index:2;opacity:1}
  .thumbnail-index .has-thumbnail:hover .project-thumbnail{transform:none}
  .thumbnail-index:has(.has-thumbnail:hover) .number:not(:hover){opacity:.5;filter:none}
  .thumbnail-index:has(.has-thumbnail:hover) .number.has-thumbnail:hover{opacity:1;filter:none}
  .thumbnail-index:has(.has-thumbnail:not(.selected):hover) .project{opacity:.5;filter:none}
  body:has(.thumbnail-index .has-thumbnail:hover) .header,body:has(.thumbnail-index .has-thumbnail:hover) .site-footer{opacity:.5;filter:none}
}
@media(prefers-reduced-motion:reduce){.thumbnail-index .project-thumbnail,.thumbnail-index .number,.header,.site-footer{transition:none}}

.back-cursor{pointer-events:none}
@media(hover:hover) and (pointer:fine){body.show-back-cursor,body.show-back-cursor *{cursor:none!important}}

.header{border-bottom:1px solid #1c191a}
.project .project-index-title span{background:transparent;color:#545454;padding:0;margin-left:0}
/* Hover labels sit outside the thumbnail without shifting the grid. */
.thumbnail-index .number .project-label{position:absolute;top:calc(100% + 5px);left:0;z-index:3;display:block;width:max-content;max-width:min(260px,60vw);margin:0;color:#545454;font-size:11px;line-height:1.3;white-space:normal;overflow:visible;opacity:0;transform:translateY(-2px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.thumbnail-index .number:nth-last-child(-n+2) .project-label{left:auto;right:0}
@media(hover:hover) and (pointer:fine){
  .thumbnail-index .has-thumbnail:hover .project-label{opacity:1;transform:translateY(0)}
}
.thumbnail-index .number:focus-visible .project-label{opacity:1;transform:translateY(0)}

/* Keep the open project's accessible name without a visible title row. */
.project-index-title{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.thumbnail-index .number.selected .project-label{opacity:1;transform:translateY(0)}

/* In project view, the entire thumbnail index recedes behind the gallery. */
.thumbnail-index:has(.selected) .number,
.thumbnail-index:has(.selected):has(.has-thumbnail:hover) .number.has-thumbnail:hover{opacity:.5;filter:none}
.thumbnail-index:has(.selected) .has-thumbnail:hover .project-thumbnail{transform:none}
.thumbnail-index:has(.selected):has(.has-thumbnail:not(.selected):hover) .project{opacity:1;filter:none}

.header{position:sticky;top:0;flex-shrink:0;z-index:10}
body:has(.thumbnail-index .selected) .header,
body:has(.thumbnail-index .has-thumbnail:hover) .header{opacity:1;filter:none}

.header{gap:20px;padding-right:34px}
.header-contact{margin:0 0 0 auto;text-align:right;font-size:14px;line-height:1.4;color:#000}
.header-contact a{white-space:nowrap;text-underline-offset:2px}
@media(max-width:760px){.header{padding-right:22px;gap:12px;min-height:40px;height:auto;padding-top:5px;padding-bottom:5px}.header-contact{max-width:240px}}

.view-toggle{position:sticky;top:0;z-index:8;display:flex;align-items:flex-start;gap:10px;padding:0 0 14px;background:#fff;font-size:11px}
.view-toggle button{border:0;background:none;padding:4px 0;color:#999}
.view-toggle button[aria-pressed="true"]{color:#1c191a;text-decoration:underline;text-underline-offset:4px}
.list-genre,.list-year{display:none}
.list-index{display:flex;flex-direction:column;gap:0;padding:10px 0 0 22%;align-items:stretch}
.list-index .number{position:relative;flex:0 0 auto;width:100%;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 85px;column-gap:24px;align-items:start;padding:9px 0;font-size:14px;line-height:1.4;text-align:left;color:#545454;transition:opacity .2s ease}
.list-index .numeral{display:none}
.list-index .number .project-label{display:block;position:static;max-width:none;width:auto;margin:0;opacity:1;transform:none;white-space:normal;overflow:visible;color:inherit}
.list-index .list-genre,.list-index .list-year{display:block;text-transform:uppercase}
.list-index .list-year{text-align:right;white-space:nowrap}
.list-index .project-thumbnail{display:none;position:fixed;left:34px;top:var(--preview-top,120px);width:16vw;height:210px;object-fit:contain;object-position:left top;pointer-events:none;z-index:7}
.list-index .number-placeholder:not([data-id]){display:none}
.list-index .project{flex:0 0 auto;width:100%;margin:8px 0 18px}
.list-index .selected{color:#1c191a}
.list-index:has(.selected) .number:not(.selected){opacity:.5}
@media(hover:hover) and (pointer:fine){
  .list-index:not(:has(.selected)) .number:hover .project-thumbnail{display:block}
  .list-index:not(:has(.selected)):has(.number:hover) .number:not(:hover){opacity:.5}
}
.list-index:not(:has(.selected)) .number:focus-visible .project-thumbnail{display:block}
@media(min-width:761px){
  .index:has(.list-index) .view-toggle{height:0;padding:0;width:21%;top:0;align-items:flex-start;overflow:visible}
  .list-index{padding-top:0}
}
.list-index .number{padding-top:4.5px;padding-bottom:4.5px}
@media(max-width:760px){
  .view-toggle{top:0}
  .list-index{padding-left:0}
  .list-index .number{grid-template-columns:minmax(0,1fr) 65px;column-gap:12px;font-size:12px;padding:5px 0}
  .list-index .list-genre{grid-column:1;grid-row:2;font-size:10px;color:#888;margin-top:3px}
  .list-index .list-year{grid-column:2;grid-row:1;font-size:10px}
  .list-index .project-thumbnail{left:auto;right:22px;width:120px;height:150px}
}

.thumbnail-index .number .project-label,
.thumbnail-index .number:nth-last-child(-n+2) .project-label{left:0;right:auto;width:100%;max-width:none;text-align:center}

@font-face{font-family:ABCAreal;src:url('./assets/ABCAreal-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:ABCArealSemiMono;src:url('./assets/ABCArealSemiMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
body,body *{font-family:ABCArealMono,monospace!important;font-weight:400}

/* Editorial hierarchy: 16px titles, 14px reading/navigation, 12px metadata. */
.header{height:auto;min-height:48px;padding:10px 30px;gap:24px;font-size:14px}
.studio-name,.wordmark,.header-contact,.info-toggle{font-size:14px}
.studio-name{white-space:nowrap;color:#1c191a}
.info-toggle,.info-close{border:0;background:none;padding:0;color:#1c191a}
.info-toggle[aria-expanded="true"]{text-decoration:underline;text-underline-offset:4px}
.header-contact{max-width:none}
.view-toggle{font-size:14px;white-space:nowrap}
.list-index .number{font-size:14px;line-height:1.4;padding-top:5px;padding-bottom:5px}
.list-index .number .project-label,.thumbnail-index .number .project-label{text-transform:none}
.list-index .list-genre,.list-index .list-year{font-size:12px;line-height:1.8;text-transform:none}
.thumbnail-index .number .project-label{font-size:12px;line-height:1.4}
.project-footer{font-size:12px;line-height:1.45}
.project-description{font-size:14px;line-height:1.45}
.project-credits,.project-meta,.counter{font-size:12px;line-height:1.45}
.site-footer{font-size:14px;line-height:1.45;padding:22px 24px;max-height:calc(100dvh - 100px);overflow-y:auto;opacity:1!important;filter:none!important}
.site-footer .footer-introduction{text-transform:none;line-height:1.45}
.info-close{display:block;margin:0 0 14px auto;font-size:12px}
.index{padding-bottom:calc(var(--footer-height,0px) + 48px)}
.project{--gallery-height:min(60svh,640px,48vw)}
.project .project-description{max-width:65ch}
@media(min-width:761px) and (max-width:1100px){.list-index{padding-left:28%}}
@media(max-width:760px){
  .header{display:grid;grid-template-columns:1fr auto auto;gap:10px 18px;padding:12px 18px}
  .header-contact{grid-column:1 / -1;justify-self:start;text-align:left;margin:0;font-size:14px}
  .list-index .number{font-size:14px;grid-template-columns:minmax(0,1fr) 78px}
  .list-index .list-genre,.list-index .list-year{font-size:12px;line-height:1.45}
  .site-footer{width:calc(100vw - 36px);padding:18px;font-size:14px}
  .project{--gallery-height:min(50svh,78vw)}
  .project-footer{font-size:12px;flex-wrap:wrap}
  .project-info{max-width:100%}
}


/* Fixed transparent mode switch and a clear selected-title band. */
.index .view-toggle,.index:has(.list-index) .view-toggle{position:fixed;top:calc(var(--header-height,48px) + 10px);left:30px;width:auto;height:auto;padding:0;background:transparent;z-index:9}
.index{padding-top:52px}
@media(min-width:761px){.index:has(.list-index){padding-top:10px}}
@media(max-width:760px){.index .view-toggle{left:18px}}
.thumbnail-index:has(.selected) .number:not(.selected){opacity:.3;filter:blur(5px)}
.thumbnail-index:has(.selected) .number.selected,
.thumbnail-index:has(.selected):has(.has-thumbnail:hover) .number.selected.has-thumbnail:hover{opacity:1;filter:none}
.thumbnail-index:has(.selected):has(.has-thumbnail:hover) .number.has-thumbnail:not(.selected):hover{opacity:.3;filter:blur(5px)}
.thumbnail-index .number.selected .project-thumbnail{opacity:.3;filter:blur(5px)}
.thumbnail-index .number.selected .project-label{opacity:1;filter:none}
.thumbnail-index .project{margin-top:calc(var(--selected-title-height,17px) + 10px - var(--index-row-gap,20px))}
.thumbnail-index .project .gallery{margin-top:0}

/* Introduction expands in the header beside INFO; its rule follows the content. */
.header{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:start;column-gap:24px;line-height:1.45}
.header>.studio-name,.header>.wordmark,.header>.info-toggle{margin-top:3px}
.info-panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;min-width:0;max-width:760px;transition:grid-template-rows .35s ease,opacity .25s ease,visibility .35s;}
.info-panel.is-expanded{grid-template-rows:1fr;opacity:1;visibility:visible}
.info-content{min-height:0;overflow:hidden}
.info-content>p{margin:3px 0 0;font-size:14px;line-height:1.45;color:#1c191a;text-align:left}
.info-content .header-contact{margin:12px 0 3px;font-size:14px;text-align:left}
.info-content .header-contact a{white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){
 .header{grid-template-columns:1fr auto auto;row-gap:0;column-gap:18px}
 .info-panel{grid-column:1 / -1}
 .info-content>p:first-child{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){.info-panel{transition:none}}

/* Keep layout stable while the materials reveal and the library eases into place. */
.index{overflow-anchor:none}
body.is-open .index{padding-bottom:50svh}
.project,.project.is-pinned{transition:none}
.project.is-revealing .gallery,.project.is-revealing .project-footer{animation:gallery-reveal .46s cubic-bezier(.22,1,.36,1) both}
@keyframes gallery-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.thumbnail-index .number,.thumbnail-index .project-thumbnail{transition:opacity .35s ease,filter .35s ease}

/* Consistent uppercase project titles in both index views. */
.list-index .number .project-label,.thumbnail-index .number .project-label,.project-index-title{text-transform:uppercase}

/* Bottom-edge reveal is confined to the thumbnail index. */
.list-index .thumbnail-only-placeholder{display:none}
.thumbnail-index .number{filter:blur(var(--entry-blur,0px))}
.thumbnail-index:has(.selected) .number:not(.selected),
.thumbnail-index:has(.selected):has(.has-thumbnail:hover) .number.has-thumbnail:not(.selected):hover{filter:blur(calc(5px + var(--entry-blur,0px)))}
.thumbnail-index .number.selected{filter:none}
@media(prefers-reduced-motion:reduce){.thumbnail-index .number:not(.selected){--entry-blur:0px!important}}

@font-face{font-family:ABCArealMono;src:url("./assets/ABCArealMono-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}