/* Edit these tokens to adjust the whole page. No external fonts or libraries. */
:root{--paper:#fff;--ink:#111;--muted:#666;--line:#d9d9d9;--gutter:clamp(20px,3.2vw,64px);--header:76px;--count:5;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#111;color:#fff}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
a:hover{text-decoration:underline}
/* A fine underline grows beneath navigation and contact links. */
:is(.site-header nav,.hero-baseline,.work-index nav,footer) a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left bottom;background-size:0 1px;transition:background-size .28s ease,color .2s}
:is(.site-header nav,.hero-baseline,.work-index nav,footer) a:focus-visible{background-size:100% 1px;text-decoration:none}
@media(hover:hover){:is(.site-header nav,.hero-baseline,.work-index nav,footer) a:hover{background-size:100% 1px;text-decoration:none}}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
h1,h2,h3,p{margin:0;font-weight:400}
img{display:block;max-width:100%;height:auto}
.muted{color:var(--muted)}
.skip-link{position:fixed;top:10px;left:20px;z-index:100;background:white;padding:12px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.site-header{height:var(--header);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:0;background:rgba(255,255,255,.97);z-index:20;font-size:14px}
.wordmark{font-size:24px;letter-spacing:-2px;font-weight:700;display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.wordmark:hover{text-decoration:none}
/* Test 1: F/M → FM → F/M. Transforms keep the header layout stable. */
.wordmark span{display:inline-block;animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.wordmark-f{animation-name:wordmark-f}
.wordmark-slash{animation-name:wordmark-slash;transform-origin:center}
.wordmark-m{animation-name:wordmark-m}
@keyframes wordmark-f{0%,24%,76%,100%{transform:translateX(0)}42%,58%{transform:translateX(2px)}}
@keyframes wordmark-slash{0%,24%,76%,100%{transform:scaleX(1);opacity:1}42%,58%{transform:scaleX(0);opacity:0}}
@keyframes wordmark-m{0%,24%,76%,100%{transform:translateX(0)}42%,58%{transform:translateX(-2px)}}
.header-location{margin-left:auto;margin-right:clamp(24px,10vw,180px)}
.site-header nav{display:flex;gap:26px}
.hero{padding:clamp(58px,7vw,120px) var(--gutter) 30px;scroll-margin-top:var(--header)}
.hero-title{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
h1{font-size:clamp(80px,13.9vw,238px);letter-spacing:-.055em;line-height:.86;font-weight:500;margin-left:-.055em}
h1 span{display:block}
.hero-intro{padding:0 1vw 10px 0;min-width:225px;font-size:clamp(22px,2.35vw,38px);line-height:1.1;letter-spacing:-.035em}
.hero-intro .muted{margin-top:28px;font-size:16px;line-height:1.4;letter-spacing:0}
.hero-baseline{display:flex;justify-content:space-between;margin-top:80px;font-size:14px}
.hero-baseline a span{margin-left:45px}
.showcase{padding:0 var(--gutter);border-top:1px solid var(--line);margin-top:0}
.showcase-sticky{padding:26px 0}
.work-topline{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;font-size:14px}
.work-topline h2{font-size:14px}
.work-count{font-variant-numeric:tabular-nums}
.work-count{display:inline-flex;align-items:baseline;gap:.3em;overflow:hidden}
#current-number{display:inline-block;min-width:2ch;text-align:right}
.work-layout{display:grid;grid-template-columns:24% minmax(0,1fr);gap:20px}
.work-index{display:flex;flex-direction:column;align-items:flex-start;padding:8px 20px 0 0}
.index-label{color:var(--muted);font-size:12px;margin-bottom:30px}
.work-index nav{display:flex;flex-direction:column;gap:4px;width:100%}
.work-index nav a{display:flex;gap:18px;align-items:baseline;padding:10px 0;color:var(--muted);font-size:clamp(15px,1.45vw,22px);letter-spacing:-.035em;transition:background-size .28s ease,color .2s}
.work-index nav a span{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0}
.work-index nav a[aria-current=true]{color:var(--ink)}
.work-index nav a[aria-current=true]::after{content:'↗';font-size:16px;margin-left:auto}
.work-skip{font-size:14px;color:var(--muted);margin-top:auto;padding-top:50px}
.project{margin-bottom:80px;scroll-margin-top:100px}
.project-visual{height:clamp(350px,48vw,680px);background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px}
.project-visual img{min-width:0;object-fit:contain;max-height:100%;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.project-visual:hover img{transform:scale(1.015)}
.diptych{gap:6px;background:var(--paper)}
.diptych img{height:100%;width:calc(50% - 3px);object-fit:cover}
.posters{gap:32px;padding:36px}
.posters img{max-width:calc(50% - 16px);height:100%;object-fit:contain}
.single{padding:0}
.single img{width:100%;height:100%;object-fit:contain}
.objects{background:var(--paper);padding:28px;gap:20px}
.objects img{max-width:calc(50% - 10px);height:100%;object-fit:contain}
.project-caption{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:20px}
.project-caption h3{font-size:clamp(25px,2.4vw,40px);letter-spacing:-.055em;line-height:1.15}
.project-caption p{font-size:14px;margin-top:9px;line-height:1.45}
.project-year{font-size:13px;white-space:nowrap}
.project-note{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.5}
.project-credit{font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px;max-width:800px}
.work-bottom{display:none;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:16px}
/* Pinned mode is applied only after JavaScript has initialized successfully. */
.is-pinned{height:calc((var(--count) + 1) * 100svh)}
.is-pinned .showcase-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));display:flex;flex-direction:column;padding:22px 0 18px}
.is-pinned .work-topline{flex:none;margin-bottom:20px}
.is-pinned .work-layout{flex:1;min-height:0}
.is-pinned .project-stage{display:grid;min-height:0}
.is-pinned .project{grid-area:1/1;min-height:0;height:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) 164px;opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;transition:opacity .32s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.is-pinned .project.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.is-pinned .project-visual{min-height:0;height:100%}
.is-pinned .diptych img{object-fit:contain}
.is-pinned .project-info{min-height:0}
.is-pinned .work-bottom{display:flex;flex:none}
.information-section{display:grid;grid-template-columns:24% minmax(0,1fr);gap:20px;margin:0 var(--gutter);padding:100px 0;border-top:1px solid var(--line);scroll-margin-top:var(--header)}
.section-label{font-size:14px;margin-top:8px}
.service{border-bottom:1px solid var(--line);padding:25px 0}
.service:first-child{padding-top:0}
.service:last-child{border-bottom:0;padding-bottom:0}
.service h3{font-size:clamp(28px,3.1vw,50px);letter-spacing:-.045em;line-height:1.08;max-width:800px}
.service p{font-size:16px;color:var(--muted);margin-top:14px;line-height:1.6}
.about-section{padding-bottom:130px}
.about-statement{max-width:1000px;font-size:clamp(30px,3.65vw,58px);line-height:1.12;letter-spacing:-.045em}
.about-detail{font-size:17px;line-height:1.55;color:var(--muted);max-width:600px;margin-top:26px}
footer{padding:80px var(--gutter) 30px;background:var(--ink);color:var(--paper);scroll-margin-top:var(--header)}
.contact-top{display:flex;justify-content:space-between;gap:20px;align-items:start}
.contact-top h2{font-size:clamp(38px,6.4vw,108px);line-height:1.02;letter-spacing:-.055em}
.contact-label{font-size:14px;padding-top:8px;white-space:nowrap}
.email{font-size:clamp(18px,3.1vw,50px);letter-spacing:-.035em;display:inline-block;margin-top:55px;overflow-wrap:anywhere;line-height:1.3}
.email span{display:inline-block;margin-left:20px}
.footer-bottom{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #505050;padding-top:24px;margin-top:100px;font-size:14px;line-height:1.5}
.socials{display:flex;gap:28px}
@media(min-width:1600px){.hero{padding-top:110px}.hero-baseline{margin-top:100px}}
@media(max-width:900px){.hero-title{grid-template-columns:1fr}.hero-intro{display:flex;justify-content:space-between;padding:22px 0 0}.hero-intro .muted{margin:0;text-align:right}.hero-baseline{margin-top:48px}.header-location{display:none}.site-header nav{gap:22px}.work-layout{grid-template-columns:21% minmax(0,1fr)}.work-index nav a{gap:10px;font-size:15px}.work-index nav a[aria-current=true]::after{display:none}.work-index{padding-right:0}.posters{padding:20px;gap:18px}.posters img{max-width:calc(50% - 9px)}.project-credit{font-size:12px}}
@media(max-width:700px){:root{--gutter:20px;--header:64px}html{scroll-padding-top:76px}.hero{padding-top:45px}.hero-title{gap:18px}h1{font-size:20vw;line-height:.89}.hero-intro{font-size:23px}.hero-intro .muted{font-size:14px}.hero-baseline{font-size:12px;margin-top:50px}.hero-baseline a span{margin-left:10px}.work-layout{display:flex;flex-direction:column;gap:16px}.work-index{padding:0}.index-label,.work-skip{display:none}.work-index nav{flex-direction:row;gap:8px;justify-content:space-between}.work-index nav a{padding:8px 4px;font-size:0;gap:0;border-bottom:1px solid transparent;min-width:38px;justify-content:center}.work-index nav a span{font-size:14px}.work-index nav a[aria-current=true]{border-bottom-color:var(--ink)}.work-topline{margin-bottom:8px}.showcase-sticky{padding-top:18px}.project-visual{height:58vw;min-height:225px}.posters,.single,.objects{padding:14px;gap:10px}.posters img,.objects img{max-width:calc(50% - 5px)}.project-caption{gap:10px;margin-top:16px}.project-caption h3{font-size:27px}.project-caption p{font-size:13px;max-width:285px}.project-year{font-size:12px}.project-note{font-size:12px;margin-top:12px}.project-credit{font-size:12px}.information-section{grid-template-columns:1fr;gap:38px;padding:65px 0}.service h3{font-size:33px}.service p{font-size:16px}.about-statement{font-size:33px}.about-detail{font-size:16px}.contact-top{flex-direction:column-reverse;gap:35px}footer{padding-top:40px}.email{margin-top:32px;font-size:clamp(17px,4.7vw,28px)}.email span{margin-left:6px}.footer-bottom{flex-wrap:wrap;gap:30px;margin-top:65px}.socials{gap:20px}.footer-bottom>a{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:700px){.is-pinned .work-topline{margin-bottom:6px}.is-pinned .work-index{flex:none}.is-pinned .project-stage{flex:1}.is-pinned .project{grid-template-rows:minmax(0,1fr) 208px}.is-pinned .project-caption h3{font-size:25px}.is-pinned .work-bottom{margin-top:8px}.is-pinned .showcase-sticky{padding-top:14px;padding-bottom:14px}.is-pinned .project-caption{margin-top:16px}.is-pinned .project-note{margin-top:10px}}
@media print{.site-header,.hero-baseline a,.work-index,.work-bottom{display:none!important}.showcase{height:auto!important}.showcase-sticky{position:static!important;height:auto!important}.work-layout,.project-stage{display:block!important}.project{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;break-inside:avoid;margin-bottom:40px!important}.project-visual{height:380px!important}.information-section{break-inside:avoid}footer{background:#fff;color:#111}}

/* Keep the artworks free of decorative frames; white in source artwork blends into the page. */
@media(max-width:700px){.single{padding:0}}

/* One larger artwork on phones; paired views on desktop. */
.project-visual picture{display:block;width:100%;height:100%;min-height:0}
@media(max-width:700px){
 .diptych img+img,.posters img+img,.objects img+img{display:none}
 .diptych img,.posters img,.objects img{width:100%;max-width:100%;height:100%;object-fit:contain}
 .posters,.objects{padding:0}
 .project-visual:not(.single){height:105vw;max-height:520px}
 .is-pinned .project-visual{height:100%;max-height:none}
}

/* Darxy project gallery: native dialog, independent scroll, no extra library. */
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.gallery-image-trigger{position:relative;width:100%;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.gallery-image-label{position:absolute;right:14px;bottom:14px;background:#fff;color:#111;padding:10px 13px;font-size:13px;display:flex;gap:24px;align-items:center}
.gallery-title-trigger{border:0;background:none;padding:0;letter-spacing:inherit;font:inherit;cursor:pointer;text-align:left}
.gallery-title-trigger span{font-size:.65em;display:inline-block;vertical-align:middle;margin-left:5px;transition:transform .2s}
.gallery-title-trigger:hover span{transform:translate(2px,-2px)}
.project-gallery{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:0;border:0;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.project-gallery::backdrop{background:#fff}
.gallery-header{height:74px;position:sticky;top:0;z-index:3;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);border-bottom:1px solid var(--line);font-size:14px}
.gallery-close{border:0;background:none;padding:10px 0 10px 18px;min-height:44px;cursor:pointer;display:flex;gap:22px;align-items:center}
.gallery-close span{font-size:30px;font-weight:300;line-height:1}
.gallery-nav{position:sticky;top:74px;z-index:2;display:flex;gap:26px;overflow-x:auto;padding:10px var(--gutter);background:#fff;border-bottom:1px solid var(--line)}
.gallery-nav button{background:none;border:0;cursor:pointer;white-space:nowrap;font-size:14px;padding:10px 0;min-height:44px}
.gallery-nav button:hover,.gallery-end button:hover{text-decoration:underline;text-underline-offset:5px}
.gallery-content{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.gallery-intro{padding:70px 0 80px}
.gallery-eyebrow{font-size:14px;margin-bottom:24px;color:var(--muted)}
.gallery-intro h2{font-size:clamp(52px,9.5vw,144px);letter-spacing:-.06em;line-height:1}
.gallery-summary{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:42px;font-size:17px;line-height:1.5}
.gallery-summary p:last-child{max-width:580px;color:var(--muted)}
.gallery-chapter{padding:65px 0 80px;border-top:1px solid var(--line);scroll-margin-top:150px}
.chapter-heading{display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:baseline;margin-bottom:42px}
.chapter-heading>span{font-size:13px;color:var(--muted)}
.chapter-heading h3{font-size:clamp(32px,4.2vw,64px);letter-spacing:-.045em;line-height:1.1}
.chapter-heading p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:12px}
.gallery-figure{margin:0;min-width:0}
.gallery-figure img{width:100%;height:100%;object-fit:contain}
.gallery-identity{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:center;padding:0 40px}
.gallery-identity .gallery-figure{height:clamp(300px,44vw,620px)}
.gallery-photos{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.gallery-photos .gallery-figure{aspect-ratio:4/5}
.gallery-photos .wide{grid-column:1/-1;aspect-ratio:auto}
.gallery-photos .wide img{height:auto;max-height:850px}
.gallery-credits{margin-top:30px;max-width:860px;font-size:14px;line-height:1.7;color:var(--muted)}
.gallery-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 22px}
.gallery-products .gallery-figure{aspect-ratio:1/1.15;padding:10px}
.gallery-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:60px auto 0;max-width:1000px}
.gallery-devices .gallery-figure{height:560px}
.gallery-end{border-top:1px solid var(--line);padding:40px 0 70px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:14px}
.gallery-end button{background:none;border:0;cursor:pointer;padding:12px 0;text-align:left}
@media(max-width:700px){
 .gallery-header{height:64px;font-size:13px}
 .gallery-close{gap:14px}
 .gallery-nav{top:64px;gap:24px;padding-top:4px;padding-bottom:4px}
 .gallery-content{padding:0 20px}
 .gallery-intro{padding:45px 0 50px}
 .gallery-intro h2{font-size:clamp(46px,13vw,85px)}
 .gallery-summary{grid-template-columns:1fr;gap:22px;margin-top:30px;font-size:16px}
 .gallery-chapter{padding:40px 0 50px;scroll-margin-top:130px}
 .chapter-heading{grid-template-columns:30px 1fr;gap:12px;margin-bottom:28px}
 .chapter-heading p{font-size:14px}
 .gallery-identity{grid-template-columns:1fr;gap:36px;padding:0}
 .gallery-identity .gallery-figure{height:auto;max-height:none}
 .gallery-identity .gallery-figure:first-child img{max-height:490px}
 .gallery-photos{grid-template-columns:1fr;gap:20px}
 .gallery-photos .gallery-figure{aspect-ratio:auto}
 .gallery-photos .gallery-figure img{height:auto;max-height:none}
 .gallery-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .gallery-products .gallery-figure{padding:0}
 .gallery-devices{gap:12px;margin-top:30px}
 .gallery-devices .gallery-figure{height:auto}
 .gallery-credits{font-size:13px;margin-top:24px}
 .gallery-end{flex-direction:column;align-items:flex-start;padding:30px 0 45px;gap:10px}
}

.graphic-cover img{width:100%;max-width:100%;height:100%;object-fit:contain}

/* Original graphic works, kept in full with no crop. */
.graphic-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 32px;align-items:start}
.graphic-gallery-grid .gallery-figure img{height:auto}
@media(max-width:700px){.graphic-gallery-grid{grid-template-columns:1fr;gap:36px}}