:root{--brand:#ad5f00;--paper:#fffefb;--ink:#28292a;--yellow:#ffca37;--line:#d9d8d2;--muted:#646460;--space:clamp(22px,3.4vw,68px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Outfit,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #ad5f00;outline-offset:5px}::selection{background:var(--yellow);color:var(--ink)}.skip{position:fixed;z-index:30;top:5px;left:5px;padding:14px;background:var(--yellow);transform:translateY(-150%)}.skip:focus{transform:none}.header{display:flex;align-items:center;gap:5vw;padding:34px var(--space) 38px;max-width:1920px;margin:auto}.wordmark{width:clamp(170px,18vw,275px);flex-shrink:0}.brand-logo{width:100%;height:auto}.identity{font-size:13px;line-height:1.55;letter-spacing:.075em}.header nav{margin-left:auto;display:flex;align-items:center;gap:clamp(20px,3vw,52px);font-size:16px}.header nav a{position:relative;padding:10px 0}.nav-mark{position:absolute;bottom:2px;left:0;right:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .2s}.header nav a:hover .nav-mark,.header nav a[aria-current="page"] .nav-mark{transform:scaleX(1)}main{max-width:1920px;margin:auto;padding:0 var(--space)}main:focus{outline:0}.work-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px;margin:0 0 23px;font-size:13px;letter-spacing:.055em;text-transform:uppercase}.work-label h1{font:inherit;margin:0}.work-label p{margin:0}.folio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;row-gap:44px;padding-bottom:100px}.project{margin:0;min-width:0;position:relative}.project-link{display:block}.picture{position:relative;overflow:hidden;background:#eae8e3}.picture img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.picture .second{position:absolute;inset:0;opacity:0;transition:opacity .4s}.project-link:hover .picture img{transform:scale(1.025)}.project-link:hover .picture .second{opacity:1}.caption{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-top:12px;font-size:14px;line-height:1.4}.caption .title{font-weight:500}.caption .category{color:var(--muted);font-size:13px}.caption .number{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}/* Shared row rhythm: two large images, three smaller images. */
.project{grid-column:span 6}
.project .picture{aspect-ratio:3/2}
.project:nth-of-type(3),.project:nth-of-type(4),.project:nth-of-type(5),
.project:nth-of-type(8),.project:nth-of-type(9),.project:nth-of-type(10){grid-column:span 4}
.project:nth-of-type(13) .picture,.project:nth-of-type(14) .picture{aspect-ratio:4/5}
.project:nth-of-type(10) .picture img{object-position:center 38%}
.project:nth-of-type(15) .picture img{object-position:center 35%}
.footer{padding:55px var(--space) 90px;background:var(--ink);color:var(--paper)}.footer-top,.footer-bottom{max-width:1784px;margin:auto}.footer-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:75px}.footer-top p{font-size:19px;line-height:1.5;margin:12px 0}.contact{font-size:clamp(38px,6vw,88px);font-weight:500;letter-spacing:-.045em;line-height:1.03}.contact span:not(.arrow){text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:10px;text-decoration-thickness:4px}.contact .arrow{color:var(--yellow)}.footer-bottom{border-top:1px solid #666;padding-top:25px;display:flex;align-items:center;gap:28px;font-size:13px}.footer-brand{width:130px;margin-right:auto;filter:brightness(0) invert(1)}.footer-bottom a:hover{text-decoration:underline}.design-bar{position:fixed;right:18px;bottom:18px;z-index:15;display:flex;gap:4px;align-items:center;background:var(--paper);border:1px solid var(--ink);border-radius:99px;padding:6px 7px 6px 16px;box-shadow:0 3px 18px #00000012;font-size:12px}.design-bar>span:first-child{letter-spacing:.04em;margin-right:15px}.bar-label{color:var(--muted);margin-right:4px}.design-bar button{border:0;border-radius:50%;width:35px;height:35px;background:transparent;font-size:13px}.design-bar button[aria-pressed="true"]{background:var(--yellow)}.back{display:inline-flex;align-items:center;gap:12px;font-size:14px;margin:12px 0 35px}.back:hover{text-decoration:underline}.project-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.project-heading h1{font-size:clamp(42px,7vw,100px);font-weight:500;line-height:1;letter-spacing:-.045em;margin:0}.project-heading p{margin:0;font-size:15px;line-height:1.6}.project-heading .eyebrow{font-size:13px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:15px}.project-hero{width:100%;max-height:85vh;object-fit:contain;background:transparent}.image-button{display:block;padding:0;border:0;background:none;width:100%;cursor:zoom-in}.series{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:50px auto 80px;max-width:1450px;align-items:center}.series .image-button img{width:100%;max-height:850px;object-fit:contain}.series .image-button:nth-child(3n){grid-column:1/-1;width:85%;justify-self:center}.about{display:grid;grid-template-columns:5fr 6fr;gap:8vw;margin:25px 0 100px;align-items:start}.about>img{width:100%;max-height:750px;object-fit:contain}.about h1{font-weight:500;letter-spacing:-.04em;font-size:clamp(40px,6vw,84px);line-height:1.08;margin:12px 0 30px}.about p{max-width:600px;font-size:clamp(18px,1.7vw,24px);line-height:1.55}.about .about-contact{display:inline-block;margin-top:20px;font-size:20px;border-bottom:3px solid var(--yellow);padding-bottom:7px}dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:70px 70px 35px;border:0;background:#202122;color:white}dialog::backdrop{background:#202122}dialog[open]{display:flex;align-items:center;justify-content:center}dialog figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;height:100%}dialog figure img{height:calc(100% - 35px);width:100%;object-fit:contain}dialog figcaption{font-size:14px}dialog button{position:absolute;z-index:2;background:none;color:white;border:1px solid #777;padding:10px 15px;border-radius:99px}.viewer-close{top:16px;right:18px}.viewer-prev{left:12px;top:50%}.viewer-next{right:12px;top:50%}body:has(dialog[open]){overflow:hidden}

@media(min-width:1800px){.header{padding-top:48px;padding-bottom:48px}}
@media(max-width:850px){.header{gap:25px;padding-top:25px;padding-bottom:28px}.identity{display:none}.wordmark{width:190px}.header nav{gap:22px}.folio{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}.project:nth-of-type(n){grid-column:span 1}.project:nth-of-type(n) .picture{aspect-ratio:3/2}.project:nth-of-type(13) .picture,.project:nth-of-type(14) .picture{aspect-ratio:4/5}.project-heading{align-items:start}.project-heading h1{font-size:56px}.footer-bottom{flex-wrap:wrap;gap:20px}.footer-brand{flex-basis:130px}.about{gap:40px}.series{gap:25px}}
@media(max-width:520px){.header{padding:22px 20px 27px;gap:20px;align-items:center}.wordmark{width:138px}.header nav{gap:17px;font-size:14px}.header nav a:last-child span{display:none}.work-label{font-size:12px;letter-spacing:.025em;gap:15px}.work-label p{max-width:145px;text-align:right}.folio{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:65px}.project:nth-of-type(n){grid-column:1}.project:nth-of-type(n) .picture{aspect-ratio:3/2}.project:nth-of-type(13) .picture,.project:nth-of-type(14) .picture{aspect-ratio:4/5}.caption{font-size:14px;gap:5px;margin-top:9px}.caption .category{font-size:12px}.caption .number{display:none}.footer-top{display:block;padding-bottom:48px}.footer-top p{font-size:16px;margin-bottom:35px}.contact{display:block;font-size:48px}.footer-bottom{font-size:12px;gap:18px}.footer-brand{flex:0 0 115px;margin-right:20px}.footer-bottom>span{font-size:12px}.design-bar{right:12px;bottom:12px;font-size:11px;padding-left:12px}.design-bar button{width:32px;height:32px}.project-heading{display:block}.project-heading h1{font-size:48px}.project-heading>p{margin-top:20px}.back{margin-bottom:28px}.series{grid-template-columns:1fr;gap:25px;margin:30px 0 50px}.series .image-button:nth-child(n){grid-column:auto;width:100%}.about{grid-template-columns:1fr;gap:30px;margin-top:5px}.about>img{max-height:470px}.about h1{font-size:46px}.about p{font-size:18px}dialog{padding:65px 10px 90px}.viewer-prev,.viewer-next{top:auto;bottom:22px}.viewer-prev{left:calc(50% - 62px)}.viewer-next{right:calc(50% - 62px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.wordmark .brand-logo{aspect-ratio:794/366;object-fit:contain;object-position:left center}
@media(max-width:520px){.header{flex-wrap:wrap}.header nav{flex-wrap:wrap}}
@media(max-width:380px){.wordmark{width:112px}.header{gap:12px}.header nav{font-size:13px;gap:12px}}
@media(prefers-reduced-motion:no-preference){.project-link:active .picture img{transform:scale(1.01)}.project-heading{animation:settle .45s ease-out}@keyframes settle{from{transform:translateY(12px)}to{transform:translateY(0)}}}

/* Revision 03 — full-width original wordmark and editorial detailing. */
.header{display:block;padding:36px var(--space) 0}
.wordmark{display:block;width:100%;max-width:1420px;margin:0 auto 34px}
.masthead-logo{width:100%;height:auto}
.header-line{display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--ink);padding:0 0 18px}
.identity{display:block;font-size:12px;letter-spacing:.08em;line-height:1.5}
.identity span{margin:0 16px;color:#ad5f00}
.header nav{margin:0;gap:34px;font-size:15px}
.header nav a{padding:9px 0}
.header nav sup{font-size:10px;vertical-align:super;margin-right:4px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-mark{bottom:1px;height:4px}
.work-label{border:0;padding-top:18px;margin-bottom:24px;font-size:12px}
.work-label h1{font-weight:500}
.caption{border-top:1px solid var(--line);padding-top:10px;margin-top:11px;gap:14px}
.caption .number{order:-1;color:var(--ink);font-size:13px;line-height:1.5;min-width:23px}
.caption>div{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.caption br{display:none}
.caption .title{font-size:15px;font-weight:500;letter-spacing:-.01em}
.caption .category{font-size:12px;line-height:1.5}
.picture::after{content:'↗';position:absolute;right:15px;bottom:15px;display:grid;place-items:center;width:44px;height:44px;background:var(--yellow);color:var(--ink);font-size:26px;opacity:0;transform:translateY(7px);transition:opacity .2s,transform .2s;pointer-events:none}
.project-link:hover .picture::after,.project-link:focus-visible .picture::after{opacity:1;transform:none}
.project-link:hover .title{text-decoration:underline;text-decoration-color:#ad5f00;text-underline-offset:4px}
.footer{margin-top:15px}
@media(max-width:850px){.header{padding-top:28px}.wordmark{width:100%;margin-bottom:24px}.header-line{gap:20px}.header nav{gap:22px}.identity{font-size:11px}.identity span{margin:0 8px}.caption>div{display:block}.caption .category{display:block;margin-top:3px}}
@media(max-width:520px){.header{padding:24px var(--space) 0}.wordmark{width:100%;margin-bottom:22px}.header-line{flex-wrap:wrap;gap:12px;padding-bottom:13px}.identity{width:100%;font-size:10px;letter-spacing:.05em}.header nav{width:100%;justify-content:space-between;gap:15px;font-size:14px}.header nav sup{font-size:10px}.work-label{padding-top:15px;margin-bottom:19px}.caption .number{display:block}.caption>div{display:flex}.caption .category{margin-top:0}.picture::after{width:35px;height:35px;font-size:23px}}

/* Revision 04 — quiet white footer and a typographic client interlude. */
.footer{background:var(--paper);color:var(--ink);padding:0 var(--space) 32px;margin-top:0}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;gap:24px;line-height:1.5}
.footer-bottom>span{margin-right:auto}
.footer-email{font-size:14px}

/* Client tile follows the same dimensions and spacing as the photographs. */
.project:nth-of-type(n){grid-column:span 6}
.project:nth-of-type(3),.project:nth-of-type(4),.project:nth-of-type(7),.project:nth-of-type(8),.project:nth-of-type(9),.project:nth-of-type(10),.project:nth-of-type(11),.project:nth-of-type(12){grid-column:span 4}
.clients{grid-column:span 4;aspect-ratio:3/2;padding:clamp(18px,2vw,38px);background:#f2f1ed;display:flex;flex-direction:column;min-width:0}
.clients-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.clients h2{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;margin:0}
.clients-label>span{font-size:19px}
.clients ul{list-style:none;padding:0;margin:0;flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;align-items:center;text-align:center}
.clients li{font-size:clamp(16px,1.6vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.clients li:nth-child(5){font-size:clamp(12px,1.1vw,19px)}
.clients li img{width:100%;max-width:120px;height:34px;object-fit:contain;margin:auto;filter:grayscale(1) brightness(0)}
.project-info{width:min(460px,50%)}
.project-info>p{margin-bottom:24px}
.credits{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:0}
.credits dt{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.credits dd{font-size:16px;margin:0}
@media(max-width:850px){.project:nth-of-type(n),.clients{grid-column:span 1}.clients{padding:20px}.clients li{font-size:22px}.clients li:nth-child(5){font-size:14px}.clients li img{height:28px;max-width:100px}.footer-bottom>span{margin-right:0}.footer-email{flex-basis:100%;order:-1}}
@media(max-width:520px){.clients{padding:24px}.clients li{font-size:24px}.clients li:nth-child(5){font-size:15px}.project-info{width:100%;margin-top:24px}.footer-bottom{gap:16px;font-size:12px}.footer-bottom>span{flex-basis:100%}}

/* Quiet project navigation; keep photographs free of overlays. */
.picture::after{content:none}
.grid-symbol{display:grid;grid-template-columns:repeat(2,5px);gap:3px}
.grid-symbol i{width:5px;height:5px;background:currentColor}
.back{margin-top:22px;color:var(--muted);font-size:12px;gap:9px}
.back:hover{color:var(--ink)}

/* Two preview directions: aligned editorial rows / staggered columns. */
.masthead-logo{display:block;aspect-ratio:694/85;background:var(--logo-colour,#ad5f00);mask:url('assets/logo-wide.svg') center/contain no-repeat;-webkit-mask:url('assets/logo-wide.svg') center/contain no-repeat}
.folio{display:block}
.feed-row{display:flex;gap:24px;align-items:start;margin-bottom:44px}
.feed-row .project{flex:1.7778;min-width:0}
.feed-row .project.portrait{flex:.5625}
.feed-row .project:nth-of-type(n) .picture{aspect-ratio:16/9}
.feed-row .project.portrait:nth-of-type(n) .picture{aspect-ratio:9/16}
.feed-row .clients{flex:1.7778;aspect-ratio:16/9;min-width:0;padding:20px}
.feed-row .caption>div{display:block}
.feed-row .caption .category{display:block}
.feed-row .clients li{font-size:20px}
.feed-row .clients li:nth-child(5){font-size:13px}
.feed-row .clients-label{margin-bottom:10px}
.feed-row .clients ul{gap:10px 20px}
.feed-row .clients li img{height:28px;max-width:100px}
body[data-layout="v2"] .folio{columns:3;column-gap:24px}
body[data-layout="v2"] .feed-row{display:contents}
body[data-layout="v2"] .project,body[data-layout="v2"] .clients{break-inside:avoid;margin-bottom:36px}
body[data-layout="v2"] .clients{aspect-ratio:auto;min-height:260px}
.preview-controls{position:fixed;bottom:18px;right:18px;z-index:20;display:flex;gap:20px;background:var(--paper);border:1px solid var(--line);padding:10px 14px;box-shadow:0 3px 18px #0000000c;font-size:12px}
.preview-controls>div{display:flex;gap:7px;align-items:center}
.preview-controls span{margin-right:4px;color:var(--muted)}
.preview-controls button{background:transparent;border:0;padding:5px 7px;font-size:12px}
.preview-controls button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.preview-controls .swatches button{width:19px;height:19px;background:var(--swatch);padding:0;border:2px solid var(--paper)}
.preview-controls .swatches button[aria-pressed="true"]{outline:1px solid var(--ink);outline-offset:2px}
.footer{padding-bottom:90px}
.cursor-block{position:fixed;left:0;top:0;width:26px;height:34px;background:var(--logo-colour,#ad5f00);pointer-events:none;z-index:40;opacity:0;transform:translate(12px,12px) scale(.6);transition:left 90ms ease-out,top 90ms ease-out,opacity .15s,transform .15s}
.cursor-block.is-visible{opacity:.85;transform:translate(12px,12px) scale(1)}
@media(max-width:1000px){.feed-row{gap:20px}.feed-row .clients{aspect-ratio:auto;min-height:230px}.feed-row .caption .number{display:none}body[data-layout="v2"] .folio{columns:2}}
@media(max-width:600px){.folio,body[data-layout="v2"] .folio{columns:1}.feed-row{display:contents}.feed-row .project,.feed-row .clients{margin-bottom:30px}.feed-row .project.portrait{width:78%;margin-left:auto;margin-right:auto}.feed-row .clients{min-height:240px}.preview-controls{bottom:10px;right:10px;padding:8px 10px;gap:12px}.cursor-block{display:none}}
@media(prefers-reduced-motion:reduce){.cursor-block{display:none}}

/* Preserve each source photograph, including during hover. */
.feed-row .project,.feed-row .project.portrait{flex:var(--image-ratio) 1 0%;width:auto}
.feed-row .project:nth-of-type(n) .picture,.feed-row .project.portrait:nth-of-type(n) .picture{aspect-ratio:auto;background:transparent}
.feed-row .project .picture img{width:100%;height:auto;object-fit:contain;transform:none!important}
.tracking-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .65s ease}
.tracking-overlay rect,.tracking-overlay polyline{fill:none;stroke:#ffca37;stroke-width:.7px;vector-effect:non-scaling-stroke}
.tracking-overlay polyline{opacity:.36;stroke-width:.5px}
.tracking-overlay g{animation:tracking-drift var(--duration) ease-in-out var(--delay) infinite alternate;animation-play-state:paused}
@keyframes tracking-drift{0%{transform:translate(-.6px,.4px)}100%{transform:translate(1.2px,-.9px)}}
@media(hover:hover) and (pointer:fine){.project-link:hover .tracking-overlay{opacity:.85}.project-link:hover .tracking-overlay g{animation-play-state:running}}
@media(prefers-reduced-motion:reduce){.tracking-overlay{display:none}}
@media(max-width:600px){.feed-row .project.portrait{width:100%;margin-left:0;margin-right:0}}

/* More legible tracking with an immediate pointer anchor. */
.tracking-overlay{transition:opacity .18s ease}
.tracking-overlay rect{stroke-width:1.35px}
.tracking-overlay polyline{stroke-width:.9px;opacity:.65}
@keyframes tracking-drift{0%{transform:translate(-1px,.6px)}100%{transform:translate(1.8px,-1.3px)}}
.tracking-pointer{position:absolute;left:var(--pointer-x,50%);top:var(--pointer-y,50%);width:34px;height:34px;border:2px solid #ffca37;box-shadow:0 0 0 1px #28292a55;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .12s}
.tracking-pointer::after{content:'';position:absolute;width:4px;height:4px;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffca37}
@media(hover:hover) and (pointer:fine){.project-link:hover .tracking-overlay{opacity:1}.is-tracking .tracking-pointer{opacity:1}}
.feed-row .clients{flex:1.25 1 0%;aspect-ratio:auto;min-height:190px;padding:16px}
body[data-layout="v2"] .clients{min-height:190px}
.feed-row .clients h2{font-size:10px}
.feed-row .clients ul{gap:10px 16px}
.feed-row .clients li{font-size:17px}
.feed-row .clients li:nth-child(5){font-size:11px}
.feed-row .clients li img{max-width:82px;height:23px}
@media(prefers-reduced-motion:reduce){.tracking-pointer{display:none}}

/* Pointer-driven feature selection, with ten-times faster marker motion. */
.tracking-overlay g{opacity:.2;transition:opacity .08s}
.tracking-overlay g.is-near{opacity:1}
.tracking-overlay g.is-near rect{stroke-width:1.8px}
.tracking-overlay polyline{opacity:.85;stroke-width:1px}
@keyframes tracking-drift{from{transform:translate(-.3px,.2px)}to{transform:translate(.3px,-.2px)}}
.feed-row .clients,body[data-layout="v2"] .clients{background:transparent;padding:16px 10px;min-height:180px;border:0}
.feed-row .clients-label{border-top:1px solid var(--line);padding-top:12px;margin-bottom:24px}
.feed-row .clients h2{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:400}
.feed-row .clients ul{gap:22px 18px}
.feed-row .clients li{font-size:16px;font-weight:400}
.feed-row .clients li:nth-child(5){font-size:10px;line-height:1.3}
.feed-row .clients li img{height:20px;max-width:76px}

/* Floating tracking markers: six to fifteen per image. */
.tracking-overlay g{opacity:.9;animation-name:tracking-float;animation-timing-function:ease-in-out}
@keyframes tracking-float{0%{transform:translate(0,0)}45%{transform:translate(var(--dx),var(--dy))}100%{transform:translate(calc(var(--dx) * -.6),calc(var(--dy) * .7))}}

/* Lines and boxes share the same animation coordinates. */
.tracking-overlay g{animation:none!important;opacity:.95}
.tracking-thread{stroke:#ffca37;stroke-width:.85px;vector-effect:non-scaling-stroke;opacity:.65}
body[data-layout="v2"] .folio{columns:auto}
body[data-layout="v2"] .feed-group{columns:3;column-gap:24px}
.folio>.clients,body[data-layout="v2"] .folio>.clients{display:block;min-height:0;aspect-ratio:auto;background:transparent;padding:28px 0 34px;margin:10px 0 55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:100%;break-inside:avoid}
.folio>.clients .clients-label{border:0;padding:0;margin:0 0 28px}
.folio>.clients h2{font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--muted)}
.folio>.clients ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:center;text-align:center}
.folio>.clients li{font-size:clamp(16px,1.8vw,27px);font-weight:400}
.folio>.clients li:nth-child(5){font-size:clamp(10px,1.1vw,16px);line-height:1.3}
.folio>.clients li img{height:30px;max-width:105px;margin:auto}
@media(max-width:1000px){body[data-layout="v2"] .feed-group{columns:2}.folio>.clients ul{gap:18px}.folio>.clients li img{max-width:85px;height:25px}}
@media(max-width:600px){body[data-layout="v2"] .feed-group{columns:1}.folio>.clients ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px}.folio>.clients,body[data-layout="v2"] .folio>.clients{margin:10px 0 35px;padding:24px 0 28px}}

.wip-note{max-width:1920px;margin:0 auto;padding:15px var(--space);font-size:12px;line-height:1.6;color:var(--muted)}.wip-note span{color:#ad5f00;margin-right:15px}.project-story{max-width:850px;margin:0 0 40px;line-height:1.7;font-size:15px}.project-story summary{cursor:pointer;font-size:12px;letter-spacing:.03em}.project-story p{margin:15px 0}.legal-page{max-width:900px;line-height:1.75;padding:0 0 70px;overflow-wrap:anywhere}.legal-page h1{font-size:42px}.legacy-series{margin-top:30px}.footer{padding-bottom:30px}

.text-project-cover{padding:24px 0;border-top:1px solid var(--line);min-height:180px}.text-project-cover span,.text-project-cover p{font-size:12px;color:var(--muted)}.text-project-cover h2{font-size:26px;font-weight:400;line-height:1.15}

.video-series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:30px 0 50px;align-items:start}.video-series figure{margin:0}.video-series video{display:block;width:100%;max-height:75vh;background:#28292a}.video-series figcaption{font-size:12px;color:var(--muted);margin-top:10px}@media(max-width:650px){.video-series{grid-template-columns:1fr 1fr;gap:18px}}@media(max-width:420px){.video-series{grid-template-columns:1fr}}

.series-nav{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line);padding:18px 0;margin-bottom:45px}.series-nav button{padding:4px 0;background:none;border:0;font-size:13px;color:var(--muted)}.series-nav button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.image-section{scroll-margin-top:25px}.image-section h2{font-size:clamp(22px,3vw,36px);font-weight:400;letter-spacing:-.025em;margin:35px 0 22px}.image-section .series{margin:0 auto 70px;align-items:start;gap:30px}.image-section .series .image-button:nth-child(n){grid-column:auto;width:100%}.image-section .series .image-button.wide-image{grid-column:1/-1}.image-section .series img{height:auto;max-height:none;width:100%;object-fit:contain}@media(max-width:520px){.image-section .series{gap:20px;margin-bottom:45px}}

/* Larger, quiet editorial overview. Images keep their original proportions. */
.wip-note{padding-top:25px;padding-bottom:35px;font-size:13px}
.wip-note>span{display:block;font-size:clamp(28px,4vw,52px);line-height:1.12;letter-spacing:-.045em;color:var(--ink);margin:0 0 10px}
.feed-row{gap:28px;margin-bottom:60px}
.picture{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.caption .title{background-image:linear-gradient(var(--brand),var(--brand));background-position:left bottom;background-size:0 1px;background-repeat:no-repeat;padding-bottom:3px;transition:background-size .4s ease}
@media(hover:hover) and (pointer:fine){.project-link:hover .picture{transform:translateY(-6px);box-shadow:0 16px 28px -20px #28292a55}.project-link:hover .caption .title{background-size:100% 1px}}
.project-link:focus-visible{outline:2px solid var(--ink);outline-offset:7px}
.project-link:focus-visible .caption .title{background-size:100% 1px}
.credits dd{overflow-wrap:anywhere}.credits dd a{text-decoration:underline;text-decoration-color:#28292a40;text-underline-offset:4px}.credits dd a:hover{text-decoration-color:currentColor}
.archive-entry{display:block;border-top:1px solid var(--line);padding:30px 0 65px;margin-top:20px}.archive-entry>span{font-size:12px;color:var(--muted)}.archive-entry strong{display:flex;justify-content:space-between;font-weight:400;font-size:clamp(42px,8vw,100px);letter-spacing:-.05em;margin-top:15px}.archive-entry strong span{transition:transform .3s}.archive-entry:hover strong span{transform:translate(5px,-5px)}
.edit-link{margin:0 0 35px;font-size:14px}.edit-link a{text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){.header-line{gap:18px;flex-wrap:wrap}.header-line nav{gap:15px;flex-wrap:wrap}.wip-note{padding-top:20px;padding-bottom:25px}.feed-row{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.picture,.caption .title,.archive-entry strong span{transition:none}.project-link:hover .picture,.archive-entry:hover strong span{transform:none}}

/* Clear hover affordance, without cropping or changing image colours. */
.picture::after{content:'↗';position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:64px;height:64px;background:var(--ink);color:#fffefb;font-size:34px;line-height:1;opacity:0;transform:translate(-12px,12px) rotate(-12deg);transition:opacity .2s,transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none}
@media(hover:hover) and (pointer:fine){.project-link:hover .picture{transform:translateY(-10px);box-shadow:0 18px 26px -16px #28292a65;outline:2px solid var(--ink);outline-offset:5px}.project-link:hover .picture::after{opacity:1;transform:translate(0,0) rotate(0)}}
.project-link:focus-visible .picture::after{opacity:1;transform:none}
.feed-row .project.compact-project{flex:0 1 32%;max-width:340px}.compact-project .title{font-size:20px}.compact-project .picture img{max-height:380px;object-fit:contain;object-position:left center}
@media(max-width:600px){.feed-row .project.compact-project{width:75%;max-width:300px;margin-left:0}.picture::after{width:48px;height:48px;font-size:26px}}
@media(prefers-reduced-motion:reduce){.picture::after{transition:none}.project-link:hover .picture{transform:none}}

/* Two brand states and a quiet wipe across the wordmark. */
.masthead-logo{background:linear-gradient(105deg,#ad5f00 0%,#ad5f00 48%,#28292a 52%,#28292a 100%);background-size:220% 100%;background-position:100% 0;transition:background-position .65s cubic-bezier(.22,.7,.2,1)}
.wordmark:hover .masthead-logo,.wordmark:focus-visible .masthead-logo{background-position:0 0}
#wip-dialog{inset:0;margin:auto;width:min(540px,calc(100% - 40px));height:fit-content;max-height:calc(100dvh - 40px);padding:clamp(26px,5vw,48px);background:var(--paper);color:var(--ink);border:0;overflow:auto}
#wip-dialog::backdrop{background:#28292a99;backdrop-filter:blur(7px)}
#wip-dialog .eyebrow{font-size:10px;letter-spacing:.1em;margin:0 0 28px}
#wip-dialog h2{font-size:clamp(48px,7vw,76px);line-height:.95;letter-spacing:-.055em;font-weight:500;margin:0 0 26px}
#wip-dialog p{font-size:16px;line-height:1.6}
#wip-dialog button{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:32px;padding:18px 0;background:none;border:0;border-top:1px solid var(--ink);font-size:16px}
#wip-dialog button:hover{color:#ad5f00}
#wip-dialog[open]{animation:welcome-in .45s ease both}
@keyframes welcome-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Full image eases inward; typography provides the hover response. */
.picture::after{display:none!important}
.project-link .picture,.project-link:hover .picture{outline:none;box-shadow:none;transform:none}
.picture{transform-origin:center;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.caption{position:relative;overflow:hidden}
.caption .category{display:inline-block;transition:transform .3s,opacity .3s}
.caption .number{transition:transform .35s,color .35s}
.caption::after{content:'Projekt ansehen';position:absolute;left:0;bottom:0;font-size:12px;color:#ad5f00;opacity:0;transform:translateY(16px);transition:transform .35s,opacity .35s}
@media(hover:hover) and (pointer:fine){.project-link:hover .picture{transform:scale(.975)}.project-link:hover .category{opacity:0;transform:translateY(-12px)}.project-link:hover .caption::after{opacity:1;transform:none}.project-link:hover .number{transform:translateX(-8px);color:#ad5f00}}
.scroll-reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.scroll-reveal.is-revealed{opacity:1;transform:none}
.image-section.cutout-section .series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px);align-items:end}
.image-section.cutout-section .series .image-button{grid-column:auto!important;width:100%}
.image-section.cutout-section .series img{height:clamp(150px,32vw,500px);width:100%;object-fit:contain;object-position:center bottom}
@media(prefers-reduced-motion:reduce){.masthead-logo,.picture,.caption .category,.caption .number,.caption::after,.scroll-reveal{transition:none}.scroll-reveal{opacity:1;transform:none}#wip-dialog[open]{animation:none}.project-link:hover .picture{transform:none}}
#wip-dialog[open]{display:block}
#wip-dialog button{position:static;color:var(--ink);border-radius:0}
#wip-dialog button:hover{color:#ad5f00}
#wip-dialog{width:min(680px,calc(100% - 40px));padding:clamp(26px,5vw,52px)}
#wip-dialog h2{font-size:clamp(42px,8.5vw,90px);font-weight:500;line-height:.94;letter-spacing:-.05em;margin:0 0 40px}
#wip-dialog button{margin-top:0}
/* Pointer-following preview; stable layout and full original image. */
.project-link .picture,.project-link:hover .picture{transform:translate(var(--float-x,0px),var(--float-y,0px));transition:transform .45s cubic-bezier(.2,.75,.2,1);will-change:transform}
@media(prefers-reduced-motion:reduce),(hover:none){.project-link .picture,.project-link:hover .picture{transform:none;will-change:auto}}
/* A single, consistent hover scale; no pointer-following movement. */
.project-link .picture,.project-link:hover .picture{transform:scale(1);transition:transform .3s ease;will-change:auto}
@media(hover:hover) and (pointer:fine){.project-link:hover .picture{transform:scale(1.025)}.project:hover{z-index:1}}
.project-heading{align-items:flex-start;gap:32px;margin-bottom:28px}
.project-heading h1{font-size:clamp(36px,5vw,76px);line-height:1.05;margin:8px 0 0}
.project-heading .project-info{width:48%;max-width:680px}
.project-heading .project-info>p{margin-top:0}
.credits{gap:14px 24px;margin-bottom:0}.back{margin-bottom:24px}
.image-section.model-navigation .series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:0 0 32px}
.model-jump{display:block;border:0;padding:0;background:none;text-align:left;min-width:0}
.image-section.model-navigation .series .model-jump img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;max-height:none}
.model-jump>span{display:flex;justify-content:space-between;font-size:14px;padding-top:10px}
.model-jump:hover>span{color:#ad5f00}
.image-section{scroll-margin-top:24px}
#viewer{background:transparent;padding:60px 5vw 35px;box-shadow:none;outline:none}
#viewer::backdrop{background:rgba(18,19,20,.92)}
#viewer figure{height:100%;width:100%;gap:12px;pointer-events:none}
#viewer figure img{height:calc(100% - 30px);width:100%;object-fit:contain;pointer-events:auto}
#viewer button{background:transparent;border:0;border-radius:0;color:white}
#viewer .viewer-close{top:12px;right:15px}
#viewer .viewer-prev,#viewer .viewer-next{font-size:28px}
@media(max-width:700px){.project-heading{display:block}.project-heading .project-info{width:100%;margin-top:20px}.credits{grid-template-columns:repeat(2,minmax(0,1fr));font-size:14px}.credits dd{font-size:14px}.project-heading h1{font-size:38px}.image-section.model-navigation .series{gap:12px}#viewer{padding:58px 12px 65px}}
@media(prefers-reduced-motion:reduce){.project-link .picture,.project-link:hover .picture{transition:none;transform:none}}
/* Pointer position controls how much of the original wordmark is orange. */
.masthead-logo{background:linear-gradient(to right,#ad5f00 0%,#ad5f00 var(--brand-fill,0%),#28292a var(--brand-fill,0%),#28292a 100%);background-size:100% 100%;background-position:0 0;transition:none}
.wordmark:focus-visible{--brand-fill:100%}
.look-heading{grid-column:1/-1!important;font-size:clamp(16px,2vw,23px);font-weight:400;letter-spacing:-.015em;border-top:1px solid var(--line);margin:16px 0 0;padding-top:18px}
.look-heading:first-child{margin-top:0}
/* Soft, overlapping pigment patches, clipped by the original logo mask. */
.masthead-logo{position:relative;background:#28292a;isolation:isolate}
.masthead-logo::after{content:'';position:absolute;inset:-50%;opacity:0;background:radial-gradient(ellipse 140px 95px at var(--ink-x,50%) var(--ink-y,50%),#ad5f00 10%,#ad5f00ba 50%,transparent 100%);transition:opacity .3s;pointer-events:none}
.masthead-logo::after{inset:0;background:radial-gradient(ellipse 170px 110px at var(--ink-x,50%) var(--ink-y,50%),#ad5f00 15%,#ad5f00cc 42%,#ad5f0040 72%,transparent 100%),radial-gradient(ellipse 210px 70px at var(--ink-x,50%) var(--ink-y,50%),#ad5f0060,transparent)}
.wordmark:hover .masthead-logo::after,.wordmark:focus-visible .masthead-logo::after{opacity:1}
@media(hover:hover) and (pointer:fine){body,a,button{cursor:url('assets/cursor-brand.svg') 9 6,auto}}
.model-preview-nav{display:grid;grid-template-columns:2fr 1fr 2fr;gap:24px;margin:8px 0 40px}
.model-preview{background:none;border:0;padding:0;min-width:0;text-align:left}
.preview-pictures{display:grid;grid-template-columns:repeat(var(--preview-count),minmax(0,1fr));gap:12px}
.preview-pictures img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover}
.preview-label{display:flex;justify-content:space-between;padding-top:12px;font-size:15px}.model-preview:hover .preview-label{color:#ad5f00}
.feed-switch{display:flex;gap:8px;justify-content:flex-end;margin:0 0 28px}.feed-switch button{padding:10px 16px;border:1px solid var(--line);background:none;border-radius:0;font-size:13px}.feed-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.editorial-feed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:60px 28px;align-items:start}
.editorial-feed>.project{grid-column:span 6;width:auto;margin:0;max-width:none}
.editorial-feed>.project:nth-of-type(6n+1){grid-column:1/span 8}
.editorial-feed>.project:nth-of-type(6n+2){grid-column:9/span 4;margin-top:100px}
.editorial-feed>.project:nth-of-type(6n+3){grid-column:2/span 4;margin-top:50px}
.editorial-feed>.project:nth-of-type(6n+4){grid-column:7/span 6}
.editorial-feed>.project:nth-of-type(6n+5){grid-column:1/span 7}
.editorial-feed>.project:nth-of-type(6n+6){grid-column:9/span 4;margin-top:100px}
.editorial-feed>.clients{grid-column:1/-1;padding:24px 0;border-block:1px solid var(--line);margin:0;background:none}
.editorial-feed>.clients ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:20px;text-align:center}.editorial-feed>.clients img{max-width:100px;height:28px;margin:auto}.editorial-feed>.clients h2{font-size:10px;font-weight:400;color:var(--muted);margin-bottom:24px}
.editorial-feed>.project.compact-project{max-width:340px}
@media(max-width:700px){.model-preview-nav{gap:14px;grid-template-columns:1fr 1fr}.model-preview:nth-child(2){grid-column:2;grid-row:1}.model-preview:nth-child(3){grid-column:1/-1;width:66%}.preview-pictures{gap:8px}.editorial-feed{gap:35px 14px}.editorial-feed>.project:nth-of-type(n){grid-column:1/-1;margin-top:0}.editorial-feed>.project:nth-of-type(3n+2){grid-column:3/-1}.editorial-feed>.project:nth-of-type(3n){grid-column:1/11}.editorial-feed>.clients ul{grid-template-columns:repeat(3,1fr);gap:22px}.editorial-feed>.clients img{max-width:75px}.feed-switch{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.masthead-logo::after{transition:none}}

/* Strong brand-colour fill with a short soft edge. Native cursor restored. */
.masthead-logo{background:#28292a;transition:none}
.masthead-logo::after{display:none}
.wordmark:hover .masthead-logo{background:linear-gradient(to right,#ad5f00 0%,#ad5f00 max(0%,calc(var(--brand-fill,0%) - 2%)),#28292a min(100%,calc(var(--brand-fill,0%) + 2%)),#28292a 100%)}
.wordmark:focus-visible .masthead-logo{background:#ad5f00}
@media(hover:hover) and (pointer:fine){body{cursor:auto}a,button{cursor:pointer}}

/* Solid pigment expands from the pointer entry point, clipped to the lettering. */
.wordmark .masthead-logo,.wordmark:hover .masthead-logo,.wordmark:focus-visible .masthead-logo{background:#28292a}
.masthead-logo::after{display:block;inset:0;background:#ad5f00;opacity:1;clip-path:circle(0px at var(--fill-x,50%) var(--fill-y,50%));transition:none}
.wordmark.is-filling .masthead-logo::after{clip-path:circle(var(--fill-radius,1600px) at var(--fill-x,50%) var(--fill-y,50%));transition:clip-path 1.8s cubic-bezier(.25,.1,.3,1)}
.wordmark:focus-visible .masthead-logo::after{clip-path:circle(1600px at 50% 50%)}
@media(prefers-reduced-motion:reduce){.wordmark.is-filling .masthead-logo::after{transition:none}}

/* Slow capillary-like hover, with a separate cumulative visit-time fill. */
.wordmark .masthead-logo,.wordmark:hover .masthead-logo,.wordmark:focus-visible .masthead-logo{background:linear-gradient(to right,#ad5f00 0%,#ad5f00 var(--ambient-fill,0%),#28292a var(--ambient-fill,0%),#28292a 100%)}
.wordmark.is-filling .masthead-logo::after{transition:clip-path 5s cubic-bezier(.12,.42,.2,1)}
@media(prefers-reduced-motion:reduce){.wordmark .masthead-logo,.wordmark:hover .masthead-logo{background:#28292a}.wordmark.is-filling .masthead-logo::after{transition:none}}

.video-series.single-video{grid-template-columns:minmax(0,1fr);max-width:720px;margin:30px auto 50px}.video-series.single-video video{max-height:80vh;object-fit:contain}
/* Frame-synchronised fill and smooth drain on pointer exit. */
.wordmark .masthead-logo::after{display:block;opacity:1;background:#ad5f00;transition:none!important;clip-path:circle(calc(var(--fill-radius,0px) * var(--liquid-progress,0)) at var(--fill-x,50%) var(--fill-y,50%));will-change:clip-path}
.wordmark:focus-visible .masthead-logo::after{clip-path:circle(1800px at 50% 50%)}
.folio>.clients ul{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:32px}
@media(max-width:600px){.folio>.clients ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}}

/* Quiet, clear typography for project and gallery subheadings. */
.project-heading h1,.image-section h2,.image-section h3,.model-preview-nav figcaption,.video-series figcaption{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:-.025em;font-weight:400}

.music-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;margin:30px 0 80px}.music-projects .picture img{height:auto}.external-film iframe{width:100%;aspect-ratio:16/9;border:0;display:block;margin-bottom:18px}.external-film{margin:30px 0}.film-links{display:flex;gap:24px;flex-wrap:wrap;margin:24px 0 70px}.text-project-cover{min-height:300px;background:#ad5f00;color:#fffefb;padding:35px;display:flex;flex-direction:column;justify-content:space-between}.text-project-cover h2{font-size:clamp(32px,4vw,65px);line-height:1.05;margin:30px 0}@media(max-width:600px){.music-projects{grid-template-columns:1fr}}

.clients li img{width:130px;height:48px;object-fit:contain;filter:brightness(0);opacity:1}.clients li img[alt="Bolt"],.clients li img[alt="ORF"]{width:85px}.clients li{min-height:64px}





/* Consistent project hierarchy, quiet gallery labels. */
.project-heading h1{font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:-.035em;overflow-wrap:normal;text-wrap:balance}
.project-heading.long-title h1{font-size:clamp(30px,3.1vw,46px)}
.image-section h2{font-family:Outfit,Arial,sans-serif;font-size:13px;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;font-weight:400;margin:28px 0 18px;color:var(--muted)}
.series-nav{gap:12px 24px;margin-bottom:25px;padding:12px 0}.series-nav button{font-size:12px;letter-spacing:.025em}
.clients{padding-top:24px;padding-bottom:24px}.clients ul{row-gap:12px}.clients li{min-height:48px}.clients li img{height:34px;width:112px}.clients li img[alt="Bolt"],.clients li img[alt="ORF"]{width:68px}

/* Compact campaign films and visible reel embeds. */
.external-film{max-width:640px;margin:36px auto 28px}.external-film>a,.external-reel figcaption{font-size:12px;color:var(--muted)}.film-links{display:grid;grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;gap:24px;margin:28px auto 60px;max-width:664px}.external-reel{margin:0;min-width:0}.external-reel iframe{display:block;width:100%;height:540px;border:0;background:#fff}.external-reel figcaption{margin-top:12px}@media(max-width:650px){.film-links{grid-template-columns:minmax(0,320px)}.external-film{max-width:100%}}

/* Equal-height image pairs preserve the original framing without empty grid cells. */
.image-section:not(.cutout-section) .series{display:flex;flex-direction:column;gap:24px}
.image-row{display:flex;align-items:flex-start;gap:24px;width:100%;min-width:0}
.image-section .series .image-row .image-button{flex:var(--image-ratio) 1 0;min-width:0;width:0;aspect-ratio:var(--image-ratio)}
.image-section .series .image-row img{display:block;width:100%;height:auto;max-height:none}
.image-row.single-image-row{max-width:900px;align-self:center}
@media(max-width:520px){.image-row{flex-direction:column;gap:20px}.image-section .series .image-row .image-button{flex:none;width:100%}.image-section:not(.cutout-section) .series{gap:20px}}

.view-switch{display:flex;justify-content:flex-end;gap:3px;margin:14px 0 28px}.view-switch a{padding:9px 17px;border:1px solid var(--line);border-radius:30px;font-size:13px;text-decoration:none}.view-switch a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.view-switch a:focus-visible{outline:2px solid #ad5f00;outline-offset:3px}
.all-photos .series,.all-photos .image-row{gap:12px}
body[data-view="all"] .wordmark .masthead-logo{background:linear-gradient(to right,#28292a 0%,#28292a var(--ambient-fill,0%),#ad5f00 var(--ambient-fill,0%),#ad5f00 100%)}
body[data-view="all"] .wordmark .masthead-logo::after{background:#28292a}
@media(max-width:520px){.view-switch{justify-content:flex-start}}

/* Restore the project hover while keeping both number digits visible. */
.all-photos .image-button:hover,.all-photos .image-button:hover img{transform:none;box-shadow:none;outline:none}
.caption .number{flex-shrink:0;min-width:2.5ch}.project-link:hover .number{transform:none;color:#ad5f00}.all-photos .series{margin-top:20px}

.back-to-top{position:fixed;right:clamp(18px,3vw,40px);bottom:calc(20px + env(safe-area-inset-bottom));z-index:20;min-height:44px;padding:12px 18px;border:1px solid #28292a33;border-radius:24px;background:#fffefb;color:#28292a;font-size:12px;letter-spacing:.07em;box-shadow:0 3px 15px #00000012}
.back-to-top[hidden]{display:none}.back-to-top:hover{background:#28292a;color:#fffefb}.back-to-top:focus-visible{outline:2px solid #ad5f00;outline-offset:4px}
body:has(dialog[open]) .back-to-top{display:none}

/* Original hover motion, with room for the left-moving project number. */
.caption{padding-left:8px;margin-left:-8px}
@media(hover:hover) and (pointer:fine){
 .project-link:hover .number{transform:translateX(-8px);color:#ad5f00}
 .project-link:hover .picture{transform:scale(1.025)}
 .project-link:hover .category{opacity:0;transform:translateY(-12px)}
 .project-link:hover .caption::after{left:45px;opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.project-link:hover .number,.project-link:hover .picture{transform:none}}

/* Both hover labels occupy one stable slot, including on pointer exit. */
.caption::after,.project-link:hover .caption::after{display:none!important}
.caption .category{position:relative;min-width:100px;white-space:nowrap;transition:color .2s;transform:none!important;opacity:1!important;text-align:right}
.caption .category::after{content:'View project';position:absolute;right:0;top:0;white-space:nowrap;color:#ad5f00;opacity:0;transition:opacity .2s}
@media(hover:hover) and (pointer:fine){.project-link:hover .category{color:transparent}.project-link:hover .category::after{opacity:1}}

/* Project action below the title; reserve the same line in both states. */
.caption>div{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;align-items:start}
.caption .category{display:block;text-align:left;min-width:0;min-height:18px;line-height:18px;white-space:nowrap}
.caption .category::after{left:0;right:auto;top:0;line-height:18px}

@media(max-width:520px){
 .project[data-project="zipfer"] .picture,.project[data-project="vienna"] .picture{aspect-ratio:16/9!important}
 .project[data-project="zipfer"] .picture img,.project[data-project="vienna"] .picture img{width:100%;height:100%;object-fit:cover;object-position:center}
}

.language-switch{display:flex;align-items:center;gap:4px;margin-left:0;flex-shrink:0}.language-switch button{background:none;border:0;padding:10px 7px;font-size:12px;color:var(--muted)}.language-switch button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.legal-language-note{font-size:14px;color:var(--muted)}
html[lang="de"] .caption .category::after{content:'Projekt ansehen'}
@media(max-width:520px){.header-line .identity{width:auto;flex:1}.header-line nav{order:2}.language-switch{margin-left:auto}}

/* Keep navigation at the right edge; language sits beside the identity. */
.header-line nav{margin-left:auto}
@media(max-width:520px){.header-line nav{margin-left:0}}

/* Language choice below Contact, aligned with the navigation edge. */
.header-line{align-items:flex-start}
.header-controls{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.header-controls nav{margin-left:0}
.header-controls .language-switch{margin:0;justify-content:flex-end}
.header-controls .language-switch button{padding:5px 0 5px 12px}
@media(max-width:520px){.header-controls{width:100%;gap:5px}.header-controls nav{order:0;width:100%}.header-controls .language-switch{order:1}.header-line .identity{align-self:center}}

/* Preserve white counters/backgrounds in the two opaque logo assets. */
.clients li img[alt="Bolt"],.clients li img[alt="ORF"]{filter:grayscale(1) contrast(100);opacity:1}
.header-controls nav a:last-child>span{display:inline-block;width:15px;margin-left:6px}
.header-controls .language-switch{margin-right:21px}
@media(max-width:520px){.header-controls nav a:last-child>span{display:none}.header-controls .language-switch{margin-right:0}}

.clients li img[alt="Bolt"]{filter:grayscale(1) brightness(.7) contrast(100);mix-blend-mode:multiply}

/* Make the music collection explicit, including on hover. */
.project[data-project="music"] .category::after{content:'Open collection →'}
html[lang="de"] .project[data-project="music"] .category::after{content:'Sammlung öffnen →'}

/* Underlines follow the title, not the full grid column. */
.caption .title{justify-self:start;max-width:100%}



/* External media only loads after an explicit click. */
.consent-placeholder{padding:clamp(24px,5vw,64px);min-height:300px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;background:#efeee9;border:1px solid #d9d8d2;color:#28292a}
.consent-placeholder p{max-width:620px;line-height:1.6;margin:0}.consent-load,.consent-revoke{font:inherit;cursor:pointer;border:1px solid currentColor;padding:12px 20px;background:transparent;color:inherit}.consent-load:hover{background:#28292a;color:#fffefb}.consent-revoke{margin-top:12px;font-size:14px}.consent-embed iframe{width:100%;border:0}.external-film>.consent-embed>iframe{aspect-ratio:16/9}.external-reel .consent-embed>iframe{min-height:620px}.consent-placeholder a{font-size:14px}