@font-face{font-family:'Xanh Mono';src:url('../assets/xanh-mono.woff2');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:'Xanh Mono',monospace;font-size:18px;font-weight:400;line-height:1.35;color:#252520;background:#f3f2ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:1px solid #35352e;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}header{position:relative;z-index:5;display:flex;align-items:baseline;justify-content:space-between;gap:30px;padding:24px 3%;}.name{white-space:nowrap}nav{margin-left:auto}#filters{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:0 auto}.filter{position:relative}.filter summary{display:flex;align-items:baseline;gap:7px;cursor:pointer;list-style:none;white-space:nowrap}.filter summary::-webkit-details-marker{display:none}.filter-value{background:rgb(255 255 255 / 55%);padding:1px 7px;border-radius:4px;transition:background-color .18s ease} .filter summary:hover .filter-value,.filter summary:focus-visible .filter-value{background:rgb(255 255 255 / 82%)} .filter[open] .filter-value{background:rgb(255 255 255 / 95%)}.filter-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:110px;max-width:min(260px,80vw);background:rgb(255 255 255 / 55%);border-radius:4px;display:flex;flex-direction:column;padding:5px 0;max-height:65vh;overflow:auto;z-index:10}.filter-option{display:block;padding:3px 12px;white-space:nowrap;width:100%;text-align:center}.filter-option{transition:background-color .18s ease}.filter-option:hover,.filter-option:focus-visible{background:rgb(255 255 255 / 60%)}.filter-option[aria-pressed=true]{text-decoration:underline;text-underline-offset:3px}main{padding:0 5%}.toolbar{display:flex;gap:24px;align-items:center;position:relative;top:12px}.toolbar p{margin:0}#count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#reset{margin-left:auto;text-decoration:underline;text-underline-offset:4px}#gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:5%;row-gap:140px;align-items:center;padding:140px 2% 100px}.artwork{grid-column:span 4;display:block;position:relative;align-self:center;justify-self:center;width:100%;text-align:center}.artwork img{width:100%;height:auto;display:block}.size-S{--scale:.72;width:70%}.size-M{--scale:.9;width:92%}.size-L{--scale:1;width:100%;grid-column:span 5}.size-XL{--scale:1;width:100%;grid-column:span 7}.artwork:nth-child(8n+1){grid-column:span 5;justify-self:start;width:calc(85% * var(--scale,1))}.artwork:nth-child(8n+2){grid-column:span 7;width:calc(82% * var(--scale,1));margin-top:100px;justify-self:start}.artwork:nth-child(8n+3){grid-column:span 7;width:calc(85% * var(--scale,1));justify-self:end;margin-top:0}.artwork:nth-child(8n+4){grid-column:span 5;width:calc(75% * var(--scale,1));margin-top:130px}.artwork:nth-child(8n+5){justify-self:end;margin-top:60px}.artwork:nth-child(8n+6){grid-column:span 8;width:calc(83% * var(--scale,1));justify-self:center;margin-top:0}.panorama{grid-column:span 12!important;width:90%!important;margin:30px auto!important;justify-self:center!important}.caption{position:absolute;left:-20%;width:140%;top:100%;padding-top:20px;white-space:pre-line;opacity:0;pointer-events:none;transition:opacity .15s}.artwork:hover .caption,.artwork:focus-visible .caption{opacity:1}.mock-label{position:absolute;right:0;bottom:0;padding:2px 6px;background:#f3f2ece8;font-size:14px}.pagination{text-align:center;margin:30px 0 90px}.pagination button{text-decoration:underline;text-underline-offset:5px}.pagination p{margin:18px 0 0}footer{display:flex;justify-content:space-between;gap:30px;padding:28px 3%}.empty{grid-column:1/-1}.modal-open{overflow:hidden}dialog{font:inherit;color:inherit;background:#f3f2ec;border:0;width:min(1160px,94vw);max-height:90vh;padding:75px 45px 45px}dialog::backdrop{background:#25252055}.close{position:absolute;top:24px;right:25px}.work-detail{display:grid;grid-template-columns:1.6fr 1fr;gap:45px;align-items:center}.work-detail img{width:100%;max-height:65vh}h2,p{font:inherit}h2{margin:24px 0}dl{display:grid;grid-template-columns:110px 1fr;gap:12px}dt,dd{margin:0}.note{margin-top:35px}.about-content{max-width:680px;margin:0 auto}.about-content p{line-height:1.6}.eyebrow{margin:0}.work-detail .note{font-size:inherit} [hidden]{display:none!important}@media(max-width:1200px){header{flex-wrap:wrap;gap:18px}#filters{order:3;width:100%;justify-content:flex-start;margin:0;gap:14px 24px}#gallery{padding-top:115px}}@media(max-width:700px){:root{font-size:16px}header{padding:20px 5%;gap:20px}.name{white-space:normal;max-width:230px}#filters{gap:12px 18px}main{padding:0 5%}.filter-menu{left:0;transform:none;min-width:100px}.filter[data-filter=format] .filter-menu{left:auto;right:0}#gallery{padding:90px 0 65px;column-gap:9%;row-gap:95px;grid-template-columns:repeat(2,minmax(0,1fr))}.artwork,.artwork:nth-child(n){grid-column:span 1;width:100%;margin:0;justify-self:center}.size-S,.size-S:nth-child(n){width:78%}.size-M,.size-M:nth-child(n){width:95%}.size-L,.size-XL,.size-L:nth-child(n),.size-XL:nth-child(n){grid-column:span 2;width:86%}.artwork:nth-child(4n+2){margin-top:70px}.panorama,.panorama:nth-child(n){grid-column:span 2!important;width:100%!important;margin:15px 0!important}.caption{left:-10%;width:120%;padding-top:12px}.pagination{margin-bottom:60px}footer{padding:22px 5%;flex-wrap:wrap}.work-detail{grid-template-columns:1fr;gap:24px}dialog{padding:65px 22px 30px}.work-detail img{max-height:45vh}dl{grid-template-columns:95px 1fr}.mock-label{font-size:14px}}@media(hover:none){.caption{opacity:1;position:relative;display:block;left:0;width:100%;padding-top:12px}.mock-label{position:relative;display:block;font-size:inherit;background:none}.artwork .mock-label{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Fixed navigation and full-page work view. */
:root{--header-height:73px;scrollbar-gutter:stable}
/* La galerie occupe la fenêtre entière sans défilement de la page. */
:root:has(body.focus-mode){scrollbar-gutter:auto}
body>header{position:fixed;inset:0 0 auto;background:transparent;z-index:20}
main{padding-top:var(--header-height)}
dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;padding:0;overflow:auto;background:#f3f2ec}
dialog::backdrop{background:#f3f2ec}
/* Server-rendered work pages open as a plain dialog until the script makes it modal. */
#detail[open]{z-index:30}
.detail-header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:24px 3%;background:transparent}
.detail-header .close{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:26px;margin-right:-11px}
#detail-content{min-height:calc(100dvh - 74px)}
.work-detail{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:calc(100dvh - 74px)}
.work-visual{display:flex;align-items:center;justify-content:center;min-width:0;padding:5vh 8%;border-right:0}
.work-visual img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain}
.work-info{align-self:center;padding:60px 14%;overflow-wrap:anywhere}
.work-info h2{margin:28px 0}
.work-info dl{grid-template-columns:minmax(100px,auto) 1fr;margin-top:40px}
.about-content{padding:70px 24px}
@media(max-width:700px){
 .detail-header{padding:20px 5%}
 .work-detail{grid-template-columns:1fr;min-height:0}
 .work-visual{padding:35px 8% 25px;border-right:0}
 .work-visual img{max-height:55dvh;max-width:100%}
 .work-info{padding:30px 8% 65px}
 .work-info dl{grid-template-columns:100px 1fr}
 #detail-content{min-height:calc(100dvh - 66px)}
}

/* Notebook drawings share one long-edge size, independent of grid position. */
.artwork.notebook:nth-child(n){width:calc(min(440px,30vw) * min(1,var(--image-ratio)));max-width:100%}
@media(max-width:700px){.artwork.notebook:nth-child(n){width:calc(min(220px,43vw) * min(1,var(--image-ratio)))}}

/* Dotted leaders connect metadata labels to their values. */
.work-info dl{grid-template-columns:minmax(150px,1fr) minmax(0,1.15fr);column-gap:10px}
.work-info dt.with-leader{display:flex;align-items:baseline;gap:8px}
.work-info dt.with-leader::after{content:'';flex:1;min-width:12px;border-bottom:1px dotted currentColor;opacity:.55}
@media(max-width:700px){.work-info dl{grid-template-columns:minmax(125px,1fr) minmax(0,1.15fr)}}
.artwork.notebook:nth-child(n){grid-column:span 5}
@media(max-width:700px){.artwork.notebook:nth-child(n){grid-column:span 2;width:calc(min(300px,68vw) * min(1,var(--image-ratio)))}}
/* Denser archive: three placements per row, with restrained offsets. */
#gallery{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:4%;row-gap:72px;padding:100px 0 80px}
.artwork:nth-child(n){grid-column:span 4;justify-self:center;margin:0;width:var(--gallery-width,90%)}
.artwork.size-S{--gallery-width:72%}
.artwork.size-M{--gallery-width:94%}
.artwork.size-L{--gallery-width:100%}
.artwork.size-XL{grid-column:span 6;--gallery-width:100%}
.artwork:nth-child(3n+2){transform:translateY(24px)}
.artwork.notebook:nth-child(n){grid-column:span 4;width:calc(min(400px,27vw) * min(1,var(--image-ratio)));max-width:100%}
.artwork.panorama:nth-child(n){grid-column:span 8!important;width:100%!important;margin:0!important;transform:none}
@media(min-width:701px) and (max-width:1100px){
 .artwork:nth-child(n),.artwork.notebook:nth-child(n){grid-column:span 6}
 .artwork.notebook:nth-child(n){width:calc(min(400px,38vw) * min(1,var(--image-ratio)))}
 .artwork.panorama:nth-child(n){grid-column:span 12!important}
}
@media(max-width:700px){
 #gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7%;row-gap:52px;padding:65px 0 55px}
 .artwork:nth-child(n),.artwork.notebook:nth-child(n){grid-column:span 1;transform:none;margin:0}
 .artwork.notebook:nth-child(n){width:calc(min(220px,41vw) * min(1,var(--image-ratio)))}
 .artwork.size-L:nth-child(n),.artwork.size-XL:nth-child(n){grid-column:span 2;width:85%}
 .artwork.panorama:nth-child(n){grid-column:span 2!important}
 .caption{padding-top:10px}
}
/* Free composition with tighter spacing, without a repeating three-column row. */
@media(min-width:701px){
 #gallery{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:3%;row-gap:65px;padding-top:95px}
 .artwork:nth-child(n){transform:none;align-self:center;margin:0}
 .artwork:nth-child(10n+1){grid-column:1 / span 4;justify-self:start}
 .artwork:nth-child(10n+2){grid-column:6 / span 6;justify-self:end;margin-top:75px}
 .artwork:nth-child(10n+3){grid-column:2 / span 6;justify-self:start;margin-top:-10px}
 .artwork:nth-child(10n+4){grid-column:9 / span 4;justify-self:end;margin-top:65px}
 .artwork:nth-child(10n+5){grid-column:1 / span 4;justify-self:center;margin-top:35px}
 .artwork:nth-child(10n+6){grid-column:5 / span 7;justify-self:end}
 .artwork:nth-child(10n+7){grid-column:2 / span 5;justify-self:start;margin-top:55px}
 .artwork:nth-child(10n+8){grid-column:8 / span 5;justify-self:center}
 .artwork:nth-child(10n+9){grid-column:1 / span 6;justify-self:start}
 .artwork:nth-child(10n+10){grid-column:8 / span 4;justify-self:end;margin-top:60px}
 .artwork.notebook:nth-child(n){width:calc(min(440px,29vw) * min(1,var(--image-ratio)));max-width:100%}
 .artwork.panorama:nth-child(n){grid-column:2 / span 10!important;width:100%!important;margin:10px 0!important}
}
@media(max-width:700px){
 #gallery{row-gap:60px;column-gap:7%}
 .artwork:nth-child(4n+2){transform:translateY(28px)}
 .artwork:nth-child(5n+3){grid-column:span 2;width:80%;justify-self:end;transform:none}
 .artwork.notebook:nth-child(n){grid-column:span 2;width:calc(min(300px,68vw) * min(1,var(--image-ratio)));justify-self:start;transform:none}
 .artwork.notebook:nth-child(even){justify-self:end}
 .artwork.panorama:nth-child(n){transform:none}
}
.caption{left:0;width:100%;overflow-wrap:anywhere}
/* Larger works with more breathing room in the free composition. */
@media(min-width:701px){
 #gallery{row-gap:120px;padding-top:125px;padding-bottom:115px}
 .artwork.size-S{--gallery-width:82%}
 .artwork.size-M{--gallery-width:100%}
 .artwork.notebook:nth-child(n){width:calc(min(500px,34vw) * min(1,var(--image-ratio)))}
 .artwork:nth-child(10n+2){margin-top:100px}
 .artwork:nth-child(10n+4){margin-top:90px}
 .artwork:nth-child(10n+7){margin-top:80px}
 .artwork:nth-child(10n+10){margin-top:85px}
}
@media(max-width:700px){
 #gallery{row-gap:90px;padding-top:85px;padding-bottom:80px}
 .artwork.size-S{--gallery-width:82%}
 .artwork.size-M{--gallery-width:100%}
 .artwork.notebook:nth-child(n){width:calc(min(330px,75vw) * min(1,var(--image-ratio)))}
 .artwork.size-L:nth-child(n),.artwork.size-XL:nth-child(n){width:92%}
}
nav{display:flex;align-items:baseline;gap:28px}
#series-index{padding-left:5%;padding-right:5%;min-height:85vh}
.index-options{display:flex;flex-wrap:wrap;gap:12px 24px;margin:55px 0 70px}
.index-options button{opacity:.55}.index-options button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.series-board{margin-bottom:85px}.series-board h2{margin:0 0 35px}
.series-label{display:flex;justify-content:space-between;align-items:baseline;gap:25px;width:100%}
.series-label>span:last-child{white-space:nowrap;opacity:.55}
.series-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:38px 32px}
.series-art{display:flex;align-items:center;justify-content:center;width:100%;height:185px}
.series-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .15s}
.series-art:hover img{opacity:.75}
.series-row{border-top:1px solid #25252030;position:relative}
.series-row:last-child{border-bottom:1px solid #25252030}
.series-row summary{cursor:pointer;padding:25px 0;list-style:none}
.series-row summary::-webkit-details-marker{display:none}
.series-row summary .series-label:after{content:'+';margin-left:8px}
.series-row[open] summary .series-label:after{content:'−'}
.series-row .series-thumbnails{padding:30px 0 55px}
.index-preview{min-height:60vh;padding-right:50%}
.index-preview .series-row{position:static}
.index-preview .series-label{justify-content:flex-start;flex-wrap:wrap;gap:8px 20px}
.index-preview .series-label>span:first-child{width:100%}
.series-preview{display:none;position:fixed;right:6%;top:27vh;width:36vw;height:55vh;object-fit:contain;pointer-events:none}
.index-preview .series-row:not([open]):hover .series-preview,.index-preview .series-row:not([open]):focus-within .series-preview{display:block}
.index-preview .series-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:25px}
.index-preview .series-art{height:170px}
@media(max-width:700px){
 nav{gap:16px}.name{max-width:170px}
 .index-options{margin:35px 0 45px;gap:14px 20px}.index-options>span{width:100%}
 .series-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}.series-art{height:160px}
 .series-label{gap:15px}.series-board{margin-bottom:60px}
 .index-preview{padding-right:0}.index-preview .series-thumbnails{padding-right:0}
 .series-preview{position:static;width:100%;height:230px;margin:20px 0}
 .index-preview .series-row:not([open]) .series-preview{display:block}
}
/* Immersive series: large images, natural vertical scrolling. */
#series-index{padding-left:3%;padding-right:3%;padding-top:calc(var(--header-height) + 60px)}
.index-options{margin:35px 0 55px;gap:28px}
.immersive-index{display:grid;grid-template-columns:minmax(240px,28%) minmax(0,1fr);gap:5%;align-items:start}
.series-directory{position:sticky;top:calc(var(--header-height) + 30px);max-height:calc(100dvh - var(--header-height) - 60px);overflow:auto;padding-bottom:12px}
.series-directory>p{margin:0 0 15px}
.series-choice{display:flex;align-items:baseline;gap:8px;width:100%;padding:9px 0;text-align:left}
.series-choice>span:first-child{max-width:85%}.series-dots{flex:1;min-width:12px;border-bottom:1px dotted;opacity:.55}
.series-choice[aria-current=true]>span:first-child{font-style:italic;text-decoration:none}
.series-choice:hover{opacity:.6}
.series-stream{min-width:0}.immersive-series{margin:0 0 110px;scroll-margin-top:calc(var(--header-height) + 25px)}
.series-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:32px}
.series-heading h2{margin:0}.series-works{min-width:0}
.index-work{margin:0 0 72px;min-width:0}
.index-work-button{display:block;width:100%;text-align:left}
.index-work-button img{display:block;max-width:100%;width:auto;height:auto;max-height:78vh;object-fit:contain}
.index-work figcaption{margin-top:18px;line-height:1.4;overflow-wrap:anywhere}
.index-work figcaption span{display:block}
@media(max-width:700px){
 #series-index{padding-left:5%;padding-right:5%}.index-options{margin:30px 0 40px;gap:15px 24px}
 .immersive-index{display:block}.series-directory{position:static;max-height:none;margin-bottom:40px}
 .series-heading{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:24px}
 .index-work{margin-bottom:52px}.index-work-button img{max-height:70svh;max-width:100%}
 .immersive-series{margin-bottom:75px}.index-work figcaption{margin-top:14px}
}

/* Round, widely spaced leaders aligned with the text baseline. */
.series-dots,.work-info dt.with-leader::after{
 border:0;opacity:1;min-width:.5em;height:.18em;
 background:radial-gradient(circle at center,currentColor .055em,transparent .065em) left bottom / .5em .18em repeat-x;
}

/* Keep both archive views visible as a primary navigation choice. */
body>header{display:grid;grid-template-columns:28% 150px minmax(0,1fr) auto;align-items:baseline;gap:24px}
.view-switch{display:flex;gap:0;margin:0;white-space:nowrap}
.view-switch a[aria-current]{font-style:italic;font-synthesis:style}
body>header>nav:last-child{margin:0;justify-self:end}
#filters{width:auto;order:initial;gap:12px;margin:0}
body>header>nav:last-child{grid-column:4}
.series-tags{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0 0 45px;align-items:baseline}
.series-tags button{padding:1px 5px;border-radius:4px;transition:background-color .18s ease}
.series-tags button[aria-pressed=true]{background:rgb(255 255 255 / 55%)}
.series-tags button:hover{background:rgb(255 255 255 / 82%)}
.series-choice[aria-current=true]>span:first-child{font-synthesis:style}
@media(max-width:1150px){
 body>header,body>header:has(#filters[hidden]){grid-template-columns:1fr 150px auto;gap:18px}
 body>header>nav:last-child{grid-column:3}
 #filters{grid-row:2;grid-column:1/-1;justify-content:center}
}
@media(max-width:550px){
 body>header,body>header:has(#filters[hidden]){grid-template-columns:1fr auto;gap:14px}
 .view-switch{grid-row:2;grid-column:1/-1;justify-self:start}
 body>header>nav:last-child{grid-row:1;grid-column:2}
 #filters{grid-row:3;justify-content:flex-start;gap:10px 15px}
 .series-tags{margin-bottom:28px}
}

/* The desktop directory stays anchored, even at the end of the index. */
@media(min-width:701px){
 .series-directory{position:fixed;left:3%;top:calc(var(--header-height) + 60px);width:calc((100% - 6%) * .28);max-height:calc(100dvh - var(--header-height) - 84px);z-index:4}
 .series-stream{grid-column:2}
}
body>header{align-items:start}
@media(max-width:700px){
 .series-directory{position:sticky;top:var(--header-height);z-index:4;max-height:40dvh;overflow:auto;background:#f3f2ec;padding:16px 0}
}
/* Center filters in the available header space without moving the view switch. */
body>header #filters{grid-row:1;grid-column:3;justify-content:center;justify-self:center;width:auto;margin:0}
@media(max-width:1150px){body>header #filters{grid-row:2;grid-column:1/-1}}
@media(max-width:550px){body>header #filters{grid-row:3}}

/* One centered navigation group: view switch followed by filters. */
@media(min-width:1151px){
 body>header{grid-template-columns:1fr 150px 390px 1fr;column-gap:30px;align-items:baseline}
 body>header .view-switch{grid-column:2;grid-row:1}
 body>header #filters{grid-column:3;grid-row:1;justify-self:start;justify-content:flex-start;flex-wrap:nowrap;gap:18px}
 body>header>nav:last-child{grid-column:4;grid-row:1}
}
@media(min-width:1151px){
 body>header{align-items:start}
 body>header #filters{transform:translateY(-1px)}
}

/* A shared highlight slides beneath the series tags. */
.series-tags{position:relative;isolation:isolate}
.series-tags .tag-highlight{position:absolute;top:0;left:0;z-index:-1;pointer-events:none;background:rgb(255 255 255 / 55%);border-radius:4px;transition:transform 280ms cubic-bezier(.22,.68,0,1),width 280ms cubic-bezier(.22,.68,0,1),height 280ms cubic-bezier(.22,.68,0,1)}
.series-tags button[aria-pressed=true],.series-tags button:hover{background:transparent}
@media(prefers-reduced-motion:reduce){.series-tags .tag-highlight{transition:none}}

.view-switch a,.view-switch a[aria-current]{font-style:normal;font-synthesis:none;transition:color 200ms ease}
.view-switch a{color:#93938c}
.view-switch a[aria-current],.view-switch a:hover{color:#252520}

/* Share the image column's starting edge with the view navigation. */
@media(min-width:1151px){
 body>header{grid-template-columns:calc(max(240px,28%) + 5% - 30px) 150px 390px minmax(0,1fr)}
}
@media(min-width:701px) and (max-width:1150px){
 body>header,body>header:has(#filters[hidden]){grid-template-columns:calc(max(240px,28%) + 5% - 18px) 150px minmax(0,1fr)}
}

/* Lower the index's opening composition while keeping its header fixed. */
#series-index{padding-top:calc(var(--header-height) + 95px)}
@media(min-width:701px){
 .series-directory{top:calc(var(--header-height) + 95px);max-height:calc(100dvh - var(--header-height) - 119px)}
}
/* Gallery: two steady columns, varied presence and restrained vertical offsets. */
@media(min-width:701px){
 #gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;row-gap:110px;padding:100px 0 115px;align-items:start}
 #gallery .artwork:nth-child(n){grid-column:auto;justify-self:center;align-self:start;margin:0;transform:none;width:var(--gallery-width,100%)}
 #gallery .artwork:nth-child(4n+2),#gallery .artwork:nth-child(4n+3){margin-top:45px}
 #gallery .artwork.notebook:nth-child(n){width:calc(min(500px,34vw) * min(1,var(--image-ratio)));max-width:100%}
 #gallery .artwork.panorama:nth-child(n){grid-column:1 / -1!important;width:100%!important;margin:15px 0!important}
}
@media(max-width:700px){
 #gallery{grid-template-columns:minmax(0,1fr);row-gap:75px;padding-top:75px}
 #gallery .artwork:nth-child(n){grid-column:1;justify-self:center;margin:0;transform:none;width:var(--gallery-width,100%)}
 #gallery .artwork.notebook:nth-child(n){grid-column:1;width:calc(min(330px,75vw) * min(1,var(--image-ratio)));justify-self:center}
 #gallery .artwork.panorama:nth-child(n){grid-column:1!important;width:100%!important;margin:0!important}
}

/* Immersive single-work view; a common long edge for notebook drawings. */
.view-switch{min-width:190px}
@media(min-width:1151px){body>header{grid-template-columns:calc(max(240px,28%) + 5% - 30px) 200px 390px minmax(0,1fr)}}
@media(min-width:701px) and (max-width:1150px){body>header,body>header:has(#filters[hidden]){grid-template-columns:calc(max(240px,28%) + 5% - 18px) 200px minmax(0,1fr)}}
.focus-mode{overflow:hidden}
.focus-mode>footer{display:none}
#focus-view{position:fixed;inset:var(--header-height) 0 0;padding:0}
#focus-track{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
#focus-track::-webkit-scrollbar{display:none}
.focus-slide{height:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:30px 5% 70px;scroll-snap-align:start;scroll-snap-stop:always}
.focus-art{display:block;width:calc(min(var(--focus-size),72svh,82vw) * min(1,var(--focus-ratio)));max-width:100%}
.focus-art img{display:block;width:100%;height:auto;max-height:calc(100svh - var(--header-height) - 120px);object-fit:contain}
.focus-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px}
.focus-controls button{padding:5px 12px}.focus-controls button:disabled{opacity:.25;cursor:default}
@media(prefers-reduced-motion:reduce){#focus-track{scroll-behavior:auto}}

/* A horizontal strip with neighboring artworks visible beyond the active work. */
#focus-track{display:flex;align-items:center;gap:clamp(45px,7vw,120px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;position:relative}
.focus-slide{flex:0 0 auto;width:auto;min-height:0;height:100%;padding:30px 0 70px;scroll-snap-align:center}
.focus-art{width:calc(min(var(--focus-size),72svh,68vw) * min(1,var(--focus-ratio)));max-width:none}
@media(max-width:700px){#focus-track{gap:32px}.focus-art{width:calc(min(var(--focus-size),68svh,72vw) * min(1,var(--focus-ratio)))}}

.focus-vertical #focus-track{display:block;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory}
.focus-vertical .focus-slide{width:100%;height:100%;min-height:100%;padding:30px 5% 70px;scroll-snap-align:start}
.focus-vertical .focus-art{width:calc(min(var(--focus-size),72svh,82vw) * min(1,var(--focus-ratio)));max-width:100%}
/* Larger presentation in vertical Focus, fitted to both viewport dimensions. */
.focus-vertical .focus-art{
 width:min(calc(var(--focus-size) * 1.4 * min(1,var(--focus-ratio))),86vw,calc((100svh - var(--header-height) - 120px) * var(--focus-ratio)));
}
/* Let vertical Focus scroll beneath the transparent fixed header. */
body.focus-vertical>header{background:transparent;backdrop-filter:none}
.focus-vertical #focus-view{top:0}
.focus-vertical .focus-slide{padding-top:calc(var(--header-height) + 30px)}
/* Shared header: views left, artist centered, About right. */
body>header,body>header:has(#filters[hidden]){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:start}
body>header>.name{grid-column:2;grid-row:1;justify-self:center;max-width:none;white-space:nowrap}
body>header>.view-switch{grid-column:1;grid-row:1;justify-self:start;min-width:0}
body>header>nav:last-child{grid-column:3;grid-row:1;justify-self:end}
body>header #filters{grid-column:1/-1;grid-row:2;justify-self:center;justify-content:center;transform:none}
@media(min-width:1500px){body>header #filters{position:absolute;top:24px;right:calc(3% + 105px);width:auto;transform:translateY(-1px)}}
@media(max-width:700px){
 body>header,body>header:has(#filters[hidden]){grid-template-columns:minmax(0,1fr) auto;gap:14px}
 body>header>.name{grid-column:1/-1;grid-row:1}
 body>header>.view-switch{grid-column:1;grid-row:2}
 body>header>nav:last-child{grid-column:2;grid-row:2}
 body>header #filters{grid-row:3;flex-wrap:wrap}
}

/* Additional vertical Focus with restrained edge blur and a corner legend. */
#focus-legend{display:none}
.focus-soft #focus-legend{display:block;position:absolute;left:3%;right:auto;bottom:27px;margin:0;max-width:36%;text-align:left;pointer-events:none;line-height:1.35}
.focus-soft .focus-art img{will-change:filter}
@media(max-width:700px){.view-switch{flex-wrap:wrap}.focus-soft #focus-legend{left:5%;right:auto;bottom:72px;max-width:90%;font-size:inherit}}
@media(prefers-reduced-motion:reduce){.focus-soft .focus-art img{filter:none!important;will-change:auto}}
/* Blur only the portions of artworks crossing the viewport edges. */
.focus-soft #focus-view::before,.focus-soft #focus-view::after{
 content:'';position:absolute;left:0;right:0;height:clamp(110px,20svh,190px);z-index:2;pointer-events:none;
 backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.focus-soft #focus-view::before{top:0;mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%)}
.focus-soft #focus-view::after{bottom:0;mask-image:linear-gradient(to top,#000 0%,#000 15%,transparent 100%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 15%,transparent 100%)}
.focus-soft .focus-controls,.focus-soft #focus-legend{z-index:3}
.focus-soft .focus-art img{filter:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.focus-soft #focus-view::before,.focus-soft #focus-view::after{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Exhibition ticker, scoped to the vertical Focus with blur. */
.focus-news{display:none}
.focus-soft .focus-news{display:block;position:absolute;left:0;right:0;bottom:0;z-index:5;background:#111;color:#f3f2ec;overflow:hidden;padding:10px 0}
.focus-news-track{display:flex;width:max-content;animation:news-scroll 45s linear infinite}
.focus-news-track span{flex:none;white-space:nowrap;padding-right:70px}
.focus-news:hover .focus-news-track{animation-play-state:paused}
.focus-soft .focus-controls{bottom:72px}
.focus-soft #focus-legend{bottom:77px}
@keyframes news-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){.focus-soft #focus-legend{bottom:116px}.focus-soft .focus-controls{bottom:64px}}
@media(prefers-reduced-motion:reduce){.focus-news-track{animation:none}.focus-soft .focus-news{overflow-x:auto}.focus-news-track span:not(:first-child){display:none}}
/* Pin the news banner to the bottom edge of the browser window. */
.focus-soft .focus-news{position:fixed;inset:auto 0 0;width:100%;z-index:25;border-radius:0}

/* Index: fixed directory and a horizontal, immersive selected ensemble. */
#series-index{position:fixed;inset:var(--header-height) 0 0;padding:0;min-height:0}
.horizontal-index{display:grid;grid-template-columns:28% minmax(0,1fr);gap:5%;height:100%;padding:55px 3% 0}
.horizontal-index .series-directory{position:static;width:auto;max-height:100%;overflow:auto;padding-bottom:35px}
.series-list{padding-bottom:30px}
.index-stage{min-width:0;position:relative;height:100%;overflow:hidden}
.index-horizontal-track{height:calc(100% - 65px);display:flex;align-items:center;gap:60px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.index-horizontal-track::-webkit-scrollbar{display:none}
.index-horizontal-track .index-work{flex:none;margin:0;scroll-snap-align:center;width:calc(min(64svh,560px) * var(--index-ratio))}
.index-horizontal-track .index-work img{width:100%;height:auto;max-height:64svh;max-width:none}
.index-controls{display:flex;justify-content:center;gap:24px;align-items:center;height:50px}
.index-controls button{padding:8px}.index-controls button:disabled{opacity:.25;cursor:default}
.index-empty{padding:70px 0}
@media(max-width:700px){
 .horizontal-index{display:flex;flex-direction:column;padding:20px 5% 0;gap:20px}
 .horizontal-index .series-directory{max-height:30%;flex:none;margin:0;padding:0;background:transparent}
 .horizontal-index .series-tags{margin-bottom:18px}
 .index-stage{flex:1;min-height:0}
 .index-horizontal-track{gap:28px}
 .index-horizontal-track .index-work{width:calc(min(42svh,330px) * var(--index-ratio))}
 .index-horizontal-track .index-work img{max-height:42svh}
}

.index-mode{overflow:hidden}.index-mode>footer{display:none}
.index-horizontal-track .index-work{width:min(calc(min(64svh,560px) * var(--index-ratio)),72%)}
.index-horizontal-track .index-work.index-panorama{width:calc(min(64svh,560px) * var(--index-ratio));scroll-snap-align:start}
@media(max-width:700px){.index-horizontal-track .index-work{width:min(calc(min(42svh,330px) * var(--index-ratio)),78%)}.index-horizontal-track .index-work.index-panorama{width:calc(min(42svh,330px) * var(--index-ratio))}}

/* Hover directory frees the entire viewport for the horizontal artworks. */
.horizontal-index{display:block;height:100%;padding:0;position:relative}
.horizontal-index .series-directory{position:absolute;left:3%;right:3%;top:24px;width:auto;height:auto;max-height:none;overflow:visible;padding:0;margin:0;z-index:8;background:transparent}
.horizontal-index .series-tags{margin:0;gap:8px 20px}
.horizontal-index .series-tags button{color:#93938c;background:transparent!important;padding:0;border-radius:0}
.horizontal-index .series-tags button[aria-pressed=true],.horizontal-index .series-tags button:hover,.horizontal-index .series-tags button[aria-expanded=true]{color:#252520}
.horizontal-index .index-stage{height:100%;width:100%;padding-top:65px;transition:filter 280ms ease,opacity 280ms ease}
.horizontal-index.menu-open .index-stage{filter:blur(8px);opacity:.35;pointer-events:none}
.index-menu{position:relative;height:calc(100svh - var(--header-height) - 90px);padding-top:35px;display:grid;grid-template-columns:minmax(260px,30%) 1fr;gap:4%}
.index-menu .series-list{overflow:auto;max-height:100%;padding-right:10px}
.series-hover-preview{display:flex;justify-content:center;align-items:center;pointer-events:none;min-width:0;padding:0 7% 60px 0}
.series-hover-preview img{max-width:100%;max-height:64svh;width:auto;height:auto;object-fit:contain}
.index-series-name{position:absolute;right:3%;bottom:22px;margin:0;max-width:32%;text-align:right;z-index:2}
.horizontal-index .index-horizontal-track .index-work{width:min(calc(min(64svh,560px) * var(--index-ratio)),68vw)}
.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(64svh,560px) * var(--index-ratio))}
@media(max-width:700px){
 .horizontal-index .series-directory{left:5%;right:5%;top:24px}
 .horizontal-index .series-tags{gap:7px 16px}
 .horizontal-index .index-stage{padding-top:130px}
 .index-menu{height:calc(100svh - var(--header-height) - 155px);grid-template-columns:1fr;gap:10px;padding-top:22px}
 .index-menu .series-list{max-height:45%}
 .series-hover-preview{position:absolute;bottom:40px;left:0;right:0;height:45%;padding:0}
 .series-hover-preview img{max-height:100%;max-width:85%}
 .index-series-name{right:5%;bottom:68px;max-width:90%;text-align:right}
 .horizontal-index .index-horizontal-track .index-work{width:min(calc(min(42svh,330px) * var(--index-ratio)),76vw)}
}
@media(prefers-reduced-motion:reduce){.horizontal-index .index-stage{transition:none}}

/* Compact three-line categories; equal long edge across series orientations. */
.horizontal-index .series-directory{top:5px}
.horizontal-index .series-tags{display:grid;grid-template-columns:repeat(4,max-content);gap:5px 18px;width:max-content;max-width:100%}
.horizontal-index .series-tags button{text-align:left}
.horizontal-index .index-horizontal-track .index-work{width:calc(min(48svh,440px,64vw) * var(--index-width-factor))}
.horizontal-index .index-horizontal-track .index-work img{max-height:min(48svh,440px,64vw)}
.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(48svh,440px) * var(--index-ratio))}
@media(max-width:700px){
 .horizontal-index .series-tags{grid-template-columns:repeat(4,max-content);gap:5px 10px;font-size:13px}
 .horizontal-index .index-horizontal-track .index-work{width:calc(min(40svh,300px,72vw) * var(--index-width-factor))}
 .horizontal-index .index-horizontal-track .index-work img{max-height:min(40svh,300px,72vw)}
 .horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(40svh,300px) * var(--index-ratio))}
}

/* Flowing category list: constant word spacing, no column alignment. */
.horizontal-index .series-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;width:430px;max-width:100%;gap:5px 18px}
@media(max-width:700px){.horizontal-index .series-tags{width:320px;gap:5px 10px}}

/* Increase series presence while preserving a shared long edge. */
.horizontal-index .index-horizontal-track .index-work{width:calc(min(62svh,580px,72vw) * var(--index-width-factor))}
.horizontal-index .index-horizontal-track .index-work img{max-height:min(62svh,580px,72vw)}
.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(62svh,580px) * var(--index-ratio))}
@media(max-width:700px){
 .horizontal-index .index-horizontal-track .index-work{width:calc(min(48svh,380px,82vw) * var(--index-width-factor))}
 .horizontal-index .index-horizontal-track .index-work img{max-height:min(48svh,380px,82vw)}
 .horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(48svh,380px) * var(--index-ratio))}
}

/* Selected series caption follows the bottom-left navigation landmark. */
.horizontal-index .index-series-name{left:3%;right:auto;text-align:left;max-width:34%}
@media(max-width:700px){.horizontal-index .index-series-name{left:5%;right:5%;max-width:90%;text-align:left}}

/* More breathing room between drawings in the horizontal index. */
.horizontal-index .index-horizontal-track{gap:140px}
@media(max-width:700px){.horizontal-index .index-horizontal-track{gap:60px}}

/* Blur belongs only to the interactive directory, not its full-width preview. */
.horizontal-index.menu-open .index-stage{filter:none;opacity:1;pointer-events:auto}
.horizontal-index.menu-open.directory-hover .index-stage{filter:blur(8px);opacity:.35}
.index-menu .series-choice{color:#93938c}
.index-menu .series-choice[aria-current=true],.index-menu .series-choice:hover,.index-menu .series-choice:focus-visible{color:#252520}

.index-menu .series-choice[aria-current=true]>span:first-child{font-style:normal}
.index-menu .series-choice:hover,.index-menu .series-choice:focus-visible{color:#252520;opacity:1}

/* A slightly smaller artwork in the series hover preview. */
.series-hover-preview img{max-width:87.5%;max-height:56svh}
@media(max-width:700px){.series-hover-preview img{max-width:74.375%;max-height:87.5%}}

/* A discreet fixed close control, separated from the moving news text. */
.focus-news{padding-right:48px!important}
.news-close{position:absolute;right:0;top:0;bottom:0;width:48px;z-index:2;background:#111;color:#f3f2ec;display:flex;align-items:center;justify-content:center}
.news-close:hover{color:#fff}
.news-close:focus-visible{outline:1px solid currentColor;outline-offset:-6px}
.news-dismissed .focus-news{display:none}
.focus-soft.news-dismissed .focus-controls{bottom:27px}
.focus-soft.news-dismissed #focus-legend{bottom:27px}
@media(max-width:700px){.focus-soft.news-dismissed .focus-controls{bottom:24px}.focus-soft.news-dismissed #focus-legend{bottom:72px}}

/* About uses the archive typography and an open two-column composition. */
#detail .about-content{max-width:none;width:100%;padding:100px 3% 40px;display:grid;grid-template-columns:36% minmax(0,1fr);gap:70px 4%;min-height:100svh;align-content:start}
.about-portrait{aspect-ratio:0.735;width:100%}
.about-portrait img{display:block;width:100%;height:auto}
.about-statement p,.about-rights p{margin:0;line-height:1.45}
.about-contact{align-self:end;overflow-wrap:anywhere}
.about-contact p{margin:0 0 18px}
.about-contact a{text-decoration:none}
.about-contact a:hover{text-decoration:underline}
.about-rights{align-self:end}
@media(max-width:700px){#detail .about-content{padding:100px 5% 35px;grid-template-columns:1fr;gap:35px}.about-portrait:empty{display:none}.about-contact{margin-top:15px}}

/* About: smaller portrait, readable measure and contacts beside its lower edge. */
#detail .about-content{grid-template-columns:minmax(220px,320px) minmax(0,600px);grid-template-rows:auto auto auto;gap:26px 5%;padding-top:120px;min-height:0}
.about-portrait{grid-column:1;grid-row:1 / 3;aspect-ratio:auto;align-self:start}
.about-statement{grid-column:2;grid-row:1;max-width:600px}
.about-contact{grid-column:2;grid-row:2;align-self:end}
.about-contact p:last-child{margin-bottom:0}
.about-rights{grid-column:2;grid-row:3;font-size:13px;max-width:600px;margin-top:35px}
@media(max-width:1000px) and (min-width:701px){#detail .about-content{grid-template-columns:minmax(180px,28%) minmax(0,560px);gap:24px 5%}}
@media(max-width:700px){
 #detail .about-content{grid-template-columns:1fr;grid-template-rows:auto;gap:28px;padding-top:100px}
 .about-portrait{grid-column:1;grid-row:auto;width:75%;max-width:280px}
 .about-statement,.about-contact,.about-rights{grid-column:1;grid-row:auto}
 .about-contact{margin-top:0}
 .about-rights{font-size:12px;margin-top:10px}
}

/* Center the complete About composition without widening its text measure. */
#detail .about-content{max-width:1080px;margin-inline:auto;grid-template-columns:minmax(220px,320px) minmax(0,600px);column-gap:64px;justify-content:center}
@media(max-width:1000px) and (min-width:701px){#detail .about-content{grid-template-columns:minmax(180px,28%) minmax(0,560px);column-gap:5%}}
@media(max-width:700px){#detail .about-content{grid-template-columns:1fr;column-gap:0}}

/* Legal notice spans the full centered About composition. */
.about-rights{grid-column:1 / -1;max-width:none;width:100%}

.gallery-instagram{position:absolute;right:3%;bottom:77px;z-index:3;text-decoration:none}
.gallery-instagram:hover{text-decoration:underline}
.news-dismissed .gallery-instagram{bottom:27px}
@media(max-width:700px){.gallery-instagram{right:5%;bottom:64px}.news-dismissed .gallery-instagram{bottom:24px}}

.index-instagram{position:absolute;right:3%;bottom:22px;z-index:2;text-decoration:none}
.index-instagram:hover{text-decoration:underline}
@media(max-width:700px){.index-instagram{right:5%;bottom:22px}}

/* Mobile edition, designed at 402 × 874 CSS px (iPhone 17 Pro). */
@media(max-width:700px){
 :root{scrollbar-gutter:auto;--mobile-edge:20px;--mobile-bottom:max(16px,env(safe-area-inset-bottom));--news-space:54px}
 body>header,body>header:has(#filters[hidden]){padding:calc(14px + env(safe-area-inset-top)) var(--mobile-edge) 0;gap:6px;grid-template-columns:1fr auto}
 body>header>.name{font-size:16px;line-height:24px}
 body>header>.view-switch{display:flex;align-items:center;gap:2px;min-height:44px}
 body>header>nav:last-child{display:flex;align-items:center;min-height:44px}
 body>header .view-switch a,body>header #about{display:inline-flex;align-items:center;min-height:44px}
 .focus-vertical .focus-slide{padding:calc(var(--header-height) + 12px) var(--mobile-edge) 150px}
 .focus-vertical .focus-art{width:min(calc(var(--focus-size) * 1.4 * min(1,var(--focus-ratio))),90vw,calc((100dvh - var(--header-height) - 170px) * var(--focus-ratio)))}
 .focus-art img{max-height:calc(100dvh - var(--header-height) - 170px)}
 .focus-soft #focus-view::before,.focus-soft #focus-view::after{height:130px}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend{left:var(--mobile-edge);max-width:calc(100% - 40px);bottom:calc(var(--mobile-bottom) + var(--news-space) + 58px);font-size:14px;line-height:1.4}
 .focus-soft .focus-controls,.focus-soft.news-dismissed .focus-controls{bottom:calc(var(--mobile-bottom) + var(--news-space));gap:8px;left:var(--mobile-edge);transform:none;height:44px}
 .focus-controls button{min-width:44px;min-height:44px;padding:10px}
 .gallery-instagram,.news-dismissed .gallery-instagram{right:var(--mobile-edge);bottom:calc(var(--mobile-bottom) + var(--news-space));min-height:44px;display:flex;align-items:center}
 .news-dismissed{--news-space:0px}
 .focus-soft .focus-news{padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));font-size:14px}
 .news-close{width:44px;align-items:flex-start;padding-top:12px}
 .horizontal-index .series-directory{left:var(--mobile-edge);right:var(--mobile-edge);top:8px}
 .horizontal-index .series-tags{width:100%;font-size:16px;gap:0 14px}
 .horizontal-index .series-tags button{min-height:36px}
 .horizontal-index .index-stage{padding-top:125px}
 .horizontal-index .index-horizontal-track{height:calc(100% - 120px);gap:60px;touch-action:pan-x;scroll-snap-type:x mandatory}
 .horizontal-index .index-horizontal-track .index-work{width:calc(min(48svh,380px,84vw) * var(--index-width-factor))}
 .horizontal-index .index-horizontal-track .index-work img{max-height:min(48svh,380px,84vw)}
 .horizontal-index .index-series-name{left:var(--mobile-edge);right:var(--mobile-edge);bottom:calc(var(--mobile-bottom) + 64px);max-width:calc(100% - 40px);font-size:14px;line-height:1.4}
 .index-controls{position:absolute;left:var(--mobile-edge);bottom:var(--mobile-bottom);height:44px;gap:8px}
 .index-controls button{min-width:44px;min-height:44px}
 .index-instagram{right:var(--mobile-edge);bottom:var(--mobile-bottom);min-height:44px;display:flex;align-items:center}
 .index-menu{height:calc(100dvh - var(--header-height) - 132px);padding-top:20px;display:block}
 .index-menu .series-list{max-height:100%;height:100%;padding:0 0 45px;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .index-menu .series-choice{min-height:48px;padding-block:10px;line-height:1.4}
 .series-hover-preview{display:none}
 .horizontal-index.menu-open .index-stage{filter:blur(8px);opacity:.25;pointer-events:none}
 .detail-header{padding:calc(14px + env(safe-area-inset-top)) var(--mobile-edge) 8px}
 .detail-header .close{height:44px;width:44px}
 .work-visual{padding:25px var(--mobile-edge) 20px}
 .work-visual img{max-height:48dvh}
 .work-info{padding:20px var(--mobile-edge) calc(35px + env(safe-area-inset-bottom))}
 #detail .about-content{padding:28px var(--mobile-edge) calc(35px + env(safe-area-inset-bottom));gap:28px}
 .about-portrait{width:70%;max-width:260px;justify-self:center}
 .about-statement p{line-height:1.5}
 .about-contact a{display:inline-block;min-height:44px;padding-block:10px}
 .about-contact p{margin-bottom:0}
 .about-rights{font-size:12px;line-height:1.5}
}

.index-menu-close{display:none}
@media(max-width:700px){.index-menu-close{display:flex;position:absolute;right:0;top:-18px;align-items:center;justify-content:center;width:44px;height:44px;font-size:24px}.index-menu .series-list{padding-top:14px}}

@media(max-width:700px){
 body>header,body>header:has(#filters[hidden]){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding-inline:16px;align-items:start}
 body>header>.name{grid-column:2;grid-row:1;line-height:28px;font-size:16px}
 body>header>.view-switch{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:0;margin:0}
 body>header .view-switch>span{display:none}
 body>header .view-switch a{min-height:28px;line-height:28px}
 body>header>nav:last-child{grid-column:3;grid-row:1;min-height:28px;align-items:start}
 body>header #about{min-height:28px;line-height:28px}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend{left:20px;right:20px;max-width:none;text-align:center}
 .horizontal-index .index-series-name{text-align:center}
}

@media(max-width:700px){body>header .view-switch a{min-height:22px;line-height:22px}body>header>.name,body>header #about{line-height:22px;min-height:22px}body>header>nav:last-child{min-height:22px}}

@media(max-width:700px){
 .horizontal-index .series-directory{left:16px;right:16px}
 .horizontal-index .series-tags{row-gap:0}
 .horizontal-index .series-tags button{min-height:26px;line-height:22px;padding:0}
}

@media(max-width:700px){
 .index-menu-close{left:0;right:auto;top:-12px;justify-content:flex-start}
 .index-menu-close svg{width:16px;height:16px}
}

@media(max-width:700px){.horizontal-index .series-directory{top:24px}}

/* Mobile type-size trial: one point smaller throughout. */
@media(max-width:700px){
 :root{font-size:15px}
 body>header>.name,.horizontal-index .series-tags{font-size:15px}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend,.horizontal-index .index-series-name,.focus-soft .focus-news{font-size:13px}
 .about-rights{font-size:11px}
}

@media(max-width:700px){
 :root{font-size:14.5px}
 body>header>.name,.horizontal-index .series-tags,.horizontal-index .index-series-name{font-size:14.5px}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend,.focus-soft .focus-news{font-size:12.5px}
 .about-rights{font-size:10.5px}
 .index-controls{left:16px}
 .index-controls button:first-child{display:flex;justify-content:flex-start;padding-left:0}
}

@media(max-width:700px){
 .horizontal-index .index-series-name{font-size:1rem}
 .index-controls{left:16px;display:flex;align-items:center;gap:18px;justify-content:flex-start}
 .index-controls button,.index-controls button:first-child{display:flex;align-items:center;justify-content:center;min-width:0;width:auto;min-height:44px;padding:0;line-height:1.35}
 .index-controls span{white-space:nowrap;line-height:1.35}
}

@media(max-width:700px){
 .focus-soft .focus-controls,.focus-soft.news-dismissed .focus-controls{left:16px;gap:18px;justify-content:flex-start}
 .focus-controls button{display:flex;align-items:center;justify-content:center;min-width:0;width:auto;min-height:44px;padding:0;line-height:1.35}
 .focus-controls span{white-space:nowrap;line-height:1.35}
 .gallery-instagram,.news-dismissed .gallery-instagram,.index-instagram{right:16px}
}

/* Phone trial: increase every mobile text size by half a pixel. */
@media(max-width:700px){
 :root{font-size:15px}
 body>header>.name,.horizontal-index .series-tags{font-size:15px}
 .horizontal-index .index-series-name{font-size:1rem}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend,.focus-soft .focus-news{font-size:13px}
 .about-rights{font-size:11px}
}

/* More visible mobile typography comparison. */
@media(max-width:700px){
 :root{font-size:16px}
 body>header>.name,.horizontal-index .series-tags{font-size:16px}
 .horizontal-index .index-series-name{font-size:1rem}
 .focus-soft #focus-legend,.focus-soft.news-dismissed #focus-legend,.focus-soft .focus-news{font-size:14px}
 .about-rights{font-size:12px}
}

/* Long folded works are read at a fixed height, from their left edge. */
.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(58svh,540px) * var(--index-ratio));max-width:none}
.horizontal-index .index-horizontal-track .index-work.index-panorama img{width:100%;height:auto;max-width:none;max-height:none}
.index-horizontal-track.panorama-reading{scroll-snap-type:none;scroll-behavior:smooth}
.index-horizontal-track.panorama-reading .index-work{scroll-snap-align:none}
@media(max-width:700px){.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(min(40svh,340px) * var(--index-ratio))}}
@media(prefers-reduced-motion:reduce){.index-horizontal-track.panorama-reading{scroll-behavior:auto}}

.archive-empty{margin:auto;padding:35svh 20px;text-align:center;width:100%}
/* Shared readable height for all leporellos, in Galerie and Index. */
:root{--leporello-height:min(58svh,540px)}
.horizontal-index .index-horizontal-track .index-work.index-panorama{width:calc(var(--leporello-height) * var(--index-ratio))}
.focus-vertical .focus-slide.focus-panorama{padding-left:0;padding-right:0}
.focus-panorama-window{width:100vw;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;padding-left:max(16px,calc((100vw - min(calc(var(--leporello-height) * 1.5),calc(100vw - 32px))) / 2));padding-right:3%;scrollbar-width:none;box-sizing:border-box}
.focus-vertical .focus-panorama .focus-art,.focus-panorama .focus-art{flex:none;width:calc(var(--leporello-height) * var(--focus-ratio));max-width:none}
.focus-panorama .focus-art img{width:100%;height:var(--leporello-height);max-height:none;max-width:none}
.series-tags button{white-space:nowrap}
.news-link{color:inherit;text-decoration:none;display:block}
body.news-disabled .focus-news{display:none}
@media(max-width:700px){:root{--leporello-height:min(40svh,340px)}.focus-panorama-window{padding-right:var(--mobile-edge)}}

/* The selected dot takes space while preserving the gap between categories. */
.horizontal-index .series-tags button{position:relative}
.horizontal-index .series-tags button[aria-pressed="true"]::before{content:'•';display:inline-block;margin-right:.4em;color:currentColor}
.horizontal-index .index-stage:is([data-category="Gouache"],[data-category="Aquarelle"],[data-category="Stylo bille"]) .index-horizontal-track .index-work:not(.index-panorama){width:calc(min(78svh,840px,90vw) * var(--index-width-factor))}
.horizontal-index .index-stage:is([data-category="Gouache"],[data-category="Aquarelle"],[data-category="Stylo bille"]) .index-work:not(.index-panorama) img{max-height:min(78svh,840px,90vw)}
@media(max-width:700px){
 .horizontal-index .index-stage:is([data-category="Gouache"],[data-category="Aquarelle"],[data-category="Stylo bille"]) .index-horizontal-track .index-work:not(.index-panorama){width:min(calc(min(60svh,480px) * var(--index-width-factor)),94vw)}
 .horizontal-index .index-stage:is([data-category="Gouache"],[data-category="Aquarelle"],[data-category="Stylo bille"]) .index-work:not(.index-panorama) img{max-height:min(60svh,480px)}
}

.about-rights{color:#85857e}

/* Bracket option: equal marker width for every category. */
.horizontal-index .series-tags button[aria-pressed="true"]::before{content:none}
.category-marker{display:inline-block;white-space:pre;width:2.2em;text-align:left}
/* Compact markers preserve the two-line menu at the reference viewport sizes. */
.horizontal-index .series-tags{width:530px;column-gap:14px}
.category-marker{font-size:.72em;width:1.8em;margin-right:.2em;vertical-align:.08em}
@media(max-width:700px){
 .horizontal-index .series-tags{width:100%;column-gap:4px}
 .horizontal-index .series-tags button{word-spacing:-4px;letter-spacing:-.2px}
 .category-marker{font-size:.46em;width:1.5em;margin-right:0;letter-spacing:0;word-spacing:0}
}

/* Brackets and dot share a single coordinate system for exact centering. */
.category-marker{vertical-align:middle}
.category-marker svg{display:block;width:100%;height:14px}
.category-marker circle{visibility:hidden}
.series-tags button[aria-pressed="true"] .category-marker circle{visibility:visible}
@media(max-width:700px){.category-marker svg{height:9px}.category-marker circle{r:2.333px}}
/* Mobile categories: readable brackets and balanced rows, without compressed type. */
@media(max-width:700px){
 .horizontal-index .series-tags{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:4px 0;width:100%}
 .horizontal-index .series-tags button{display:inline-flex;align-items:center;gap:5px;min-height:28px;line-height:24px;letter-spacing:normal;word-spacing:normal}
 .category-marker{flex:none;width:13px;font-size:inherit;margin:0;vertical-align:initial}
 .category-marker svg{width:13px;height:11px}
 .category-marker circle{r:2px}
 .index-menu{padding-top:58px;height:calc(100dvh - var(--header-height) - 160px)}
 .index-menu-close{top:4px;left:0;height:40px}
 .index-menu .series-list{padding-top:0}
}
@media(max-width:350px){.horizontal-index .series-tags{grid-template-columns:repeat(2,max-content);justify-content:start;column-gap:20px}}
/* Balance the vertical margins around desktop Galerie artworks. */
@media(min-width:701px){.focus-vertical .focus-slide{padding-top:70px;padding-bottom:70px}}
/* Mobile alternative: a single, quiet navigation entry point. */
.mobile-menu-toggle,#mobile-menu{display:none}
@media(max-width:700px){
 body>header,body>header:has(#filters[hidden]){min-height:64px;padding:10px 16px;align-items:center;grid-template-columns:44px minmax(0,1fr) 44px;gap:0}
 body>header>.name{grid-column:2;grid-row:1;justify-self:center;white-space:nowrap}
 body>header>.view-switch,body>header>nav:last-child{display:none}
 .mobile-menu-toggle{display:block;position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;grid-column:1;grid-row:1}
 .mobile-menu-toggle span{position:absolute;left:10px;right:10px;top:50%;height:1px;background:currentColor;transition:transform 200ms ease}
 .mobile-menu-toggle span:first-child{transform:translateY(-4px)}
 .mobile-menu-toggle span:last-child{transform:translateY(4px)}
 #mobile-menu[open]{display:block;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(243 242 236 / 30%);color:inherit;overflow:hidden}
 #mobile-menu::backdrop{background:rgb(243 242 236 / 15%)}
 .mobile-menu-name{position:absolute;top:21px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:16px;line-height:22px}
 .mobile-menu-close{position:absolute;top:10px;left:16px}
 #mobile-menu.is-open .mobile-menu-toggle span:first-child{transform:rotate(45deg)}
 #mobile-menu.is-open .mobile-menu-toggle span:last-child{transform:rotate(-45deg)}
 #mobile-menu nav{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
 #mobile-menu nav a,#mobile-menu nav button{display:block;font:inherit;font-size:24px;line-height:1.35;min-height:44px;padding:6px 12px;border:0;background:none;text-decoration:none;color:inherit}
 #mobile-menu nav [aria-current="page"]{color:#252520}
 .mobile-menu-open{overflow:hidden}
 .gallery-instagram,.news-dismissed .gallery-instagram,.index-instagram{display:none!important}
 .focus-controls,.focus-soft .focus-controls,.focus-soft.news-dismissed .focus-controls,.index-controls{left:50%;right:auto;width:max-content;transform:translateX(-50%);justify-content:center}
 .detail-header{min-height:64px;padding:10px 16px;position:relative}
 .detail-header>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
 .detail-header>.close{display:none}
 .about-contact p:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.mobile-menu-toggle span{transition:none}}
@media(max-width:700px){
 .mobile-menu-toggle span{left:12px;right:12px}
 .mobile-menu-toggle span:first-child{transform:translateY(-3px)}
 .mobile-menu-toggle span:last-child{transform:translateY(3px)}
 #mobile-menu.is-open .mobile-menu-toggle span:first-child{transform:rotate(45deg)}
 #mobile-menu.is-open .mobile-menu-toggle span:last-child{transform:rotate(-45deg)}
}

@media(max-width:700px){
 #detail.work-sheet .detail-header>.mobile-menu-toggle{display:none}
 #detail.work-sheet .detail-header>.close{display:flex;position:absolute;left:16px;right:auto;top:10px;width:44px;height:44px;align-items:center;justify-content:center}
}

@media(max-width:700px){
 .mobile-menu-toggle:focus,.mobile-menu-toggle:focus-visible,#detail .close:focus,#detail .close:focus-visible{outline:none;box-shadow:none}
 .keyboard-navigation .mobile-menu-toggle:focus-visible,.keyboard-navigation #detail .close:focus-visible{outline:1px solid #35352e;outline-offset:3px}
 .horizontal-index .series-tags{row-gap:2px}
 .horizontal-index .series-tags button{min-height:26px;line-height:22px}
 #mobile-menu[open]::backdrop{animation:mobile-menu-blur 300ms ease-out both}
 #mobile-menu[open] nav>*{animation:mobile-menu-arrival 340ms cubic-bezier(.2,.65,.3,1) both}
 #mobile-menu[open] nav>:nth-child(2){animation-delay:35ms}
 #mobile-menu[open] nav>:nth-child(3){animation-delay:70ms}
 #mobile-menu[open] nav>:nth-child(4){animation-delay:105ms}
}
@keyframes mobile-menu-blur{from{background:rgb(243 242 236 / 0%)}to{background:rgb(243 242 236 / 15%)}}
@keyframes mobile-menu-arrival{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#mobile-menu[open]::backdrop,#mobile-menu[open] nav>*{animation:none}}

@media(max-width:700px){
 body>header,body>main,body>footer,#detail{transition:filter 300ms ease-out}
 body.mobile-menu-open>header,body.mobile-menu-open>main,body.mobile-menu-open>footer,body.mobile-menu-open>#detail[open]{filter:blur(9px)}
}

/* Series hover previews: the first three actual works, stacked like loose sheets. */
.series-preview-stack{display:grid;place-items:center;width:100%;height:100%;min-height:0;isolation:isolate;container-type:inline-size}
.series-hover-preview .series-preview-stack img{grid-area:1 / 1;max-width:min(78cqw,60svh);max-height:min(78cqw,60svh);object-fit:contain;filter:drop-shadow(0 3px 4px rgb(37 37 32 / 9%));transform-origin:center}
.series-preview-stack img[data-layer="0"]{transform:translate(1%,-3%) rotate(-4deg)}
.series-preview-stack img[data-layer="1"]{transform:translate(-2%,1%) rotate(7deg)}
.series-preview-stack img[data-layer="2"]{transform:translate(1%,5%) rotate(-1deg)}
.series-hover-preview .series-preview-stack[data-count="1"] img{transform:none;filter:none;max-width:87.5%;max-height:56svh}

/* Contact form: follows the About typography. */
.contact-form{display:grid;gap:16px;margin-bottom:24px}.contact-form h3{font:inherit;margin:0 0 6px}.contact-form label{display:grid;gap:6px}.contact-form input,.contact-form textarea{width:100%;min-width:0;border:1px solid #aaa99e;border-radius:0;background:transparent;color:inherit;padding:9px;font:inherit}.contact-form textarea{resize:vertical}.contact-form button{justify-self:start;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;padding:8px 18px;cursor:pointer}.contact-form button:disabled{opacity:.5;cursor:wait}.contact-form .contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact-form small{font-size:.8em;color:#86867e}.contact-form .contact-status:empty{display:none}

.contact-form[hidden]{display:none}.contact-toggle{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:8px 18px;cursor:pointer}.contact-toggle[aria-expanded="true"]{margin-bottom:22px}
.contact-form .contact-optional{font-size:.8em;color:#86867e}

/* Message for a series link that no longer resolves. */
.series-unavailable{position:absolute;inset:0;display:grid;place-content:center;padding:8rem 2rem;text-align:center;line-height:1.5}