/* Lower-page art direction. The established hero remains in experience.css. */
:root{--atelier-ease:cubic-bezier(.22,1,.36,1);--atelier-soft:#b8bbb4;--atelier-rule:#ffffff26}
html{scrollbar-gutter:stable}
body.overlay-open{overflow:hidden}
.sketch-section,.work,.material,.closing{isolation:isolate}
.sketch-section .eyebrow,.work .eyebrow,.material .eyebrow,.closing .eyebrow{font-size:12px;letter-spacing:.17em}
.sketch-section h2,.work h2,.material h2,.closing h2{font-weight:400;letter-spacing:-.055em;line-height:1.04}
.sketch-section h2 em,.work h2 em,.material h2 em{color:#e7e9e2}
.js .reveal{transition:opacity 1s var(--atelier-ease),transform 1.2s var(--atelier-ease);transform:translateY(32px)}
.js .reveal.visible{transform:none}

/* Illustration: one large composition, with room around its lines. */
.sketch-section{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:2%;padding:110px 6% 130px;min-height:900px;background:radial-gradient(ellipse at 28% 52%,#202323 0,transparent 58%),#0c0d0e;overflow:hidden}
.section-index{position:absolute;top:44px;left:6%;right:6%;display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--atelier-rule);font-size:12px;letter-spacing:.13em;color:#aeb2ab}
.section-index span:last-child{color:var(--accent)}
.sketch-art{width:100%;height:650px;overflow:hidden;mask-image:radial-gradient(ellipse 63% 62%,#000 45%,transparent 88%)}
.sketch-art:after{display:none}
.sketch-art img{object-fit:contain;object-position:center;transform:translateY(var(--art-y,0px)) scale(1.06);filter:none}
.sketch-copy{width:auto;margin:0;padding:0 0 0 3%;align-self:center}
.sketch-copy h2{font-size:clamp(48px,5.6vw,86px);margin:36px 0 32px}
.sketch-copy h2 span,.sketch-copy h2 em{display:block}
.sketch-copy h2 em{padding-top:.12em}
.sketch-copy p{font-size:17px;color:var(--atelier-soft);line-height:1.8}
.sketch-caption{display:flex;flex-direction:column;gap:14px;margin-top:64px;padding-top:26px;border-top:1px solid var(--atelier-rule);font-size:12px;letter-spacing:.14em;color:#969d95}

/* Gallery: equal photographic frames, a clear typographic hierarchy. */
.work.section{padding:130px 6% 150px;background:linear-gradient(#0c0d0e,#131616)}
.work .section-head{align-items:flex-end;gap:40px;margin-bottom:70px}
.work .section-head:after{display:none}
.work .section-head h2{font-size:clamp(52px,7vw,110px);margin-top:25px}
.gallery-note{font-size:16px;line-height:1.7;color:var(--atelier-soft);padding-bottom:8px}
.gallery{gap:clamp(20px,3.2vw,54px)}
.gallery .image-wrap{aspect-ratio:4/5;border-radius:0;background:#1c2020;box-shadow:0 18px 55px #0003}
.gallery .image-wrap img{transition:transform 1.4s var(--atelier-ease),filter .8s;filter:none;object-fit:cover}
.gallery .art-card:hover img{transform:scale(1.045);filter:none}
.gallery .caption{border-top:1px solid var(--atelier-rule);padding-top:22px;margin-top:26px;gap:11px}
.gallery .caption h3{font-family:Georgia,serif;font-size:clamp(25px,2.5vw,38px);font-weight:400;letter-spacing:-.045em;line-height:1.15}
.gallery .caption>span{color:#a7ada5;font-size:12px;letter-spacing:.14em}
.gallery .art-card p{font-size:15px;line-height:1.6;color:#b4b9b1;margin-top:15px}
.gallery .view-icon{width:48px;height:48px;right:18px;bottom:18px;backdrop-filter:blur(8px);background:#10131180;border-color:#ffffff75}
.gallery .art-card:hover .view-icon{transform:none;background:var(--accent);color:#111}
.gallery .art-card:nth-child(2){transition-delay:90ms}
.detail-cards .art-card:last-child{transition-delay:160ms}

/* Material: an image and a restrained, animated reading surface. */
.material.section{display:block;padding:130px 6% 150px;background:#171b1b;border-top:1px solid #ffffff16}
.material-heading{display:grid;grid-template-columns:.5fr 1fr;gap:60px;align-items:start;margin-bottom:78px}
.material-heading .eyebrow{padding-top:12px}
.material-heading h2{font-size:clamp(42px,4.7vw,76px)}
.material-heading h2 em{display:inline-block;margin-top:.1em;color:#c8cec3}
.material-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.material-visual{margin:0;position:relative;overflow:hidden;background:#0d1010}
.material-visual img{width:100%;height:auto;aspect-ratio:1;display:block;object-fit:cover;transform:translateY(var(--detail-y,0px)) scale(1.06)}
.material-visual figcaption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:15px;padding:56px 22px 22px;background:linear-gradient(transparent,#050808d9);font-size:11px;letter-spacing:.12em;color:#eee}
.material .notes{margin:0;min-width:0}
.notes details{border-color:#ffffff2e}
.notes details:last-child{border-color:#ffffff2e}
.notes details:before{background:linear-gradient(90deg,var(--accent),#c9b08000)}
.notes summary{font-size:clamp(21px,2vw,28px);padding:30px 0;line-height:1.2;gap:16px}
.notes .note-number{font-size:13px;letter-spacing:.09em;width:28px;flex-shrink:0}
.notes .plus{font-size:23px;font-weight:300;color:#e1e5dd}
.notes details p{padding:0 32px 32px 44px;font-size:16px;line-height:1.85;color:#b5bdb3}

/* A quieter final composition, with yellow used as an accent. */
.closing{background:radial-gradient(ellipse at 75% 75%,#252b242b,transparent 65%),#0c0d0e;color:#e7e9e2;text-align:left;padding:72px 6% 90px;border-color:#ffffff16}
.closing:before{display:none}
.closing-top,.closing-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px}
.closing .eyebrow{color:#b4b9af;line-height:1.7}
.closing-bee{width:88px;height:65px;flex-shrink:0;background:#c9d1c2}
.closing h2{font-size:clamp(70px,10.8vw,165px);margin:74px 0 80px;font-weight:400;line-height:1}
.closing h2 span,.closing h2 em{display:block}
.closing h2 em{color:var(--accent);margin-left:21%;padding-top:.05em}
.closing-bottom{border-top:1px solid var(--atelier-rule);padding-top:30px}
.closing-bottom>span{color:#a5aca0;font-size:12px;letter-spacing:.1em;line-height:1.9}
.closing .line-link{color:#e7e9e2;border-color:#78836c;font-size:16px;gap:35px;line-height:1.5}
.closing .line-link:hover{color:var(--accent)}
footer{background:#0c0d0e;border-color:#ffffff16;padding:34px 6%;gap:24px}
footer .wordmark{font-size:23px}
footer>span{display:none}
footer p{font-size:13px}
footer>a:last-child{font-size:14px}

/* Native dialog layers provide focus containment and background isolation. */
#navigation-dialog,#artwork-dialog{border:0;max-width:none;color:var(--ink);padding:0;overscroll-behavior:contain}
#navigation-dialog::backdrop,#artwork-dialog::backdrop{background:#080b0bec;backdrop-filter:blur(18px);animation:backdrop-in .55s var(--atelier-ease) both}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
#navigation-dialog.is-closing::backdrop,#artwork-dialog.is-closing::backdrop{animation:backdrop-out .32s ease both}
@keyframes backdrop-out{to{opacity:0}}
.menu-lines{width:21px;display:flex;flex-direction:column;gap:5px}
.menu-lines i{display:block;width:100%;height:1px;background:currentColor}
.menu-lines i:last-child{width:14px;margin-left:auto}
.menu-toggle{min-width:74px;min-height:44px;align-items:center;justify-content:flex-end;gap:13px}
#navigation-dialog{inset:0;margin:0;width:100%;height:100dvh;max-height:100dvh;background:radial-gradient(ellipse at 5% 85%,#252d2138,transparent 70%),#0c0e0f;padding:24px 6% 34px;overflow:auto}
#navigation-dialog[open]{display:flex;flex-direction:column}
.navigation-top,.navigation-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}
.navigation-top{height:48px;flex-shrink:0}
.navigation-bee{width:78px;height:55px;background:#c9b080}
.navigation-close,#artwork-dialog .close{display:inline-flex;align-items:center;gap:16px;min-height:44px;border:0;background:none;color:#e4e8de;padding:0;font-size:14px}
.close-glyph{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff38;border-radius:50%;font-size:27px;font-weight:300;line-height:1}
#navigation-dialog .mobile-nav{display:flex;position:static;background:none;border:0;padding:0;margin:40px 0;flex:1;justify-content:center;min-height:300px;flex-direction:column;gap:0}
.mobile-nav a{display:flex;align-items:baseline;gap:20px;padding:28px 0;border-bottom:1px solid var(--atelier-rule);color:#e5e9df;transform:translateY(25px);opacity:0;transition:transform .85s var(--atelier-ease),opacity .65s}
.mobile-nav a:first-child{border-top:1px solid var(--atelier-rule)}
.mobile-nav a:nth-child(2){transition-delay:80ms}.mobile-nav a:nth-child(3){transition-delay:160ms}
#navigation-dialog.is-open .mobile-nav a{transform:none;opacity:1}
.nav-number{font-size:12px;letter-spacing:.1em;color:var(--accent);min-width:20px}
.nav-text{font-size:clamp(31px,7.2vw,58px);line-height:1.1;font-weight:400;letter-spacing:-.055em}
.nav-arrow{margin-left:auto;font-size:24px;color:#88947e}
.mobile-nav a:hover .nav-text{color:var(--accent)}
.navigation-bottom{font-size:12px;color:#939d8b;letter-spacing:.08em;line-height:1.6;border-top:1px solid var(--atelier-rule);padding-top:25px;flex-wrap:wrap}
.navigation-bottom>span:first-child{color:#c9b080;font-size:16px;letter-spacing:-.025em}

/* Lightbox: a soft image entrance and a staggered caption reveal. */
#artwork-dialog{width:calc(100% - 80px);max-width:1320px;max-height:calc(100dvh - 64px);margin:auto;overflow:auto;background:#111515;box-shadow:0 35px 100px #0008}
#artwork-dialog[open]{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);align-items:center}
#artwork-dialog .close{position:absolute;top:20px;right:22px;z-index:3;padding:3px 4px 3px 14px;border-radius:30px;background:#0b0e0ecf}
#artwork-dialog .modal-image,#artwork-dialog .modal-image.photo-study{position:relative;display:grid;place-items:center;min-height:420px;height:calc(100dvh - 110px);max-height:840px;overflow:hidden;background:#0b0e0e;transform-origin:top left}
#artwork-dialog .modal-image img{display:block;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;transform:none}
.photo-loading{position:absolute;inset:auto 0 30px;text-align:center;font-size:13px;color:#aab3a1}
.photo-loading[hidden]{display:none}
#artwork-dialog .modal-content{padding:90px 40px 48px;min-width:0}
#artwork-dialog .modal-content h2{font-family:Georgia,serif;font-size:clamp(35px,3.5vw,58px);line-height:1.08;letter-spacing:-.045em;margin:27px 0}
#artwork-dialog .modal-content .eyebrow{font-size:12px;letter-spacing:.16em}
#artwork-dialog .modal-content p{font-size:16px;line-height:1.85;color:#b5beb0;border-top:1px solid var(--atelier-rule);padding-top:25px}

@media(max-width:1050px){
 .sketch-section{padding-top:130px;padding-bottom:100px;min-height:730px;grid-template-columns:1fr 1fr;gap:0}
 .sketch-art{height:510px}.sketch-copy h2{font-size:clamp(42px,5.5vw,65px)}
 .work.section,.material.section{padding-top:95px;padding-bottom:100px}
 .material-heading{grid-template-columns:1fr;gap:30px;margin-bottom:54px}
 .material-layout{gap:6%}.notes summary{font-size:21px;gap:10px}.notes details p{padding-left:38px;padding-right:0}
 #artwork-dialog{width:calc(100% - 40px)}#artwork-dialog[open]{grid-template-columns:1.4fr 1fr}
 #artwork-dialog .modal-content{padding-left:25px;padding-right:25px}
 footer p{display:none}
}
@media(max-width:700px){
 .sketch-section{display:flex;flex-direction:column;align-items:stretch;padding:110px 6% 75px;gap:0;min-height:0}
 .section-index{top:32px;font-size:10px;gap:25px;line-height:1.7}
 .sketch-art{height:auto;aspect-ratio:1.15;width:116%;margin-left:-8%}
 .sketch-copy{padding:0;margin:0;width:100%}.sketch-copy h2{font-size:clamp(48px,11vw,76px);margin:24px 0}.sketch-copy h2 em{padding-top:.08em}
 .sketch-copy p{font-size:16px}.sketch-caption{flex-direction:row;flex-wrap:wrap;gap:18px;margin-top:34px;font-size:10px}
 .work.section{padding:70px 6% 85px}.work .section-head{margin-bottom:40px;display:block}.work .section-head h2{font-size:clamp(49px,11vw,72px)}
 .gallery-note{display:none}.gallery{grid-template-columns:1fr;gap:48px}.gallery .caption h3{font-size:32px}.gallery .image-wrap{aspect-ratio:4/5}.gallery .caption{margin-top:22px;padding-top:20px}
 .material.section{padding:70px 6% 85px}.material-heading{gap:24px;margin-bottom:40px}.material-heading h2{font-size:clamp(39px,9vw,61px)}
 .material-layout{grid-template-columns:1fr;gap:38px}.material-visual img{aspect-ratio:1.1}.material-visual figcaption{font-size:10px;padding-left:17px;padding-right:17px}
 .notes summary{padding:25px 0;font-size:23px;gap:12px}.notes details p{padding-bottom:25px}
 .closing{padding:42px 6% 54px}.closing-top{gap:20px}.closing-top .eyebrow{max-width:22ch;font-size:10px}.closing-bee{width:69px;height:52px}
 .closing h2{font-size:clamp(66px,16vw,106px);margin:55px 0}.closing h2 em{margin-left:15%}
 .closing-bottom{align-items:flex-start;gap:25px}.closing-bottom>span{font-size:10px}.closing .line-link{font-size:14px;gap:20px}
 footer{padding:27px 6%}footer .wordmark{font-size:21px}footer .wordmark span{display:none}footer>a:last-child{font-size:12px}
 #artwork-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}#artwork-dialog[open]{display:block}
 #artwork-dialog .modal-image,#artwork-dialog .modal-image.photo-study{height:57dvh;max-height:650px;min-height:260px}
 #artwork-dialog .modal-content{padding:28px 25px 32px}#artwork-dialog .modal-content h2{font-size:35px;margin:19px 0}
 #artwork-dialog .modal-content p{font-size:15px;padding-top:20px;line-height:1.7}
 #artwork-dialog .close{top:10px;right:10px}.close-glyph{width:40px;height:40px}
}
@media(max-width:640px){
 .menu-toggle{display:flex;flex-shrink:0}
 .desktop-nav{display:none}
 header .morph-brand{flex:1;min-width:0;width:auto;margin-right:14px}
 header .brand-name{font-size:clamp(20px,6.1vw,25px)}
}
@media(max-width:360px){.nav-text{font-size:28px}.mobile-nav a{gap:12px}.closing-bottom{flex-direction:column}.gallery .caption h3{font-size:29px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .reveal,.mobile-nav a,.gallery .image-wrap img,.view-icon{transition:none!important}
 .sketch-art img,.material-visual img{transform:none!important;will-change:auto}
 #navigation-dialog::backdrop,#artwork-dialog::backdrop{animation:none!important}
}

/* Original image icons prevent platform-specific emoji rendering. */
.ui-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.view-icon .ui-icon,.nav-arrow .ui-icon{width:23px;height:23px}
.close-glyph .ui-icon{width:20px;height:20px}
.hero-bottom .ui-icon{width:14px;height:14px;margin-left:8px}
#reset-scene .ui-icon{width:14px;height:14px;margin-left:5px}
footer>a:last-child .ui-icon{width:16px;height:16px;margin-left:5px}
.intro .intro-mark{display:block;width:66px;height:66px;background:#5f523b;font-size:0}
.swarm-trigger{isolation:isolate;background:#030303;border-color:#ffffff50;backdrop-filter:none;gap:20px}
.swarm-trigger:hover:not(:disabled){background:#0a0a0a;box-shadow:0 0 26px #c9b0800d}
.swarm-star{display:block;width:28px;height:28px;flex:0 0 28px;object-fit:contain;mix-blend-mode:screen;animation:star-turn 28s linear infinite;pointer-events:none}
.swarm-star-right{animation-direction:reverse;animation-duration:32s}
@keyframes star-turn{to{transform:rotate(360deg)}}
.scene-controls:has(#motion[aria-pressed="true"]) .swarm-star{animation-play-state:paused}
.orbit-label:before{content:'';width:12px;height:12px;background:linear-gradient(#c9b080,#c9b080) center/1px 100% no-repeat,linear-gradient(#c9b080,#c9b080) center/100% 1px no-repeat}

/* Neutral near-black surfaces replace the grey-green background washes. */
:root{--bg:#000000}
html,body{background:#000000}
header{background:#000000f5}
.hero-sticky{background:radial-gradient(ellipse at 53% 43%,#111111 0%,#030303 35%,#000000 70%)}
.sketch-section{background:radial-gradient(ellipse at 28% 52%,#0b0b0b 0,transparent 58%),#000000}
.work.section{background:#020202}
.material.section{background:#050505}
.closing,footer{background:#000000}
.gallery .image-wrap,.material-visual{background:#050505}
#navigation-dialog{background:#000000}
#artwork-dialog{background:#050505}
#artwork-dialog .modal-image,#artwork-dialog .modal-image.photo-study{background:#000000}
#navigation-dialog::backdrop,#artwork-dialog::backdrop{background:#000000f2}
@media(max-width:640px){.intro .intro-mark{display:none}.swarm-star{width:26px;height:26px;flex-basis:26px}}
@media(prefers-reduced-motion:reduce){.swarm-star{animation:none}}