:root{--ink:#1e2d33;--ink-soft:#435155;--sky:#b9ccc6;--cream:#f6f1e4;--pad:clamp(20px,5.4vw,96px)}
body.photo-page{background:#f1ece1;color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.photo-page .guide-grid{background-image:none}
.photo-page h2,.photo-page h3,.photo-page em{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.025em}
.photo-page a:focus-visible,.photo-page button:focus-visible,.photo-page [role=tabpanel]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.photo-hero{position:relative;min-height:720px;height:100svh;max-height:1100px;overflow:hidden;--text:var(--ink)}
.photo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--sky) url('/assets/photo-hero/f7.jpg') 70% 100%/cover no-repeat}
/* Keep one stable reading surface, with less haze over the foreground. */
.photo-hero::after{content:'';position:absolute;z-index:1;pointer-events:none;inset:0;background:linear-gradient(90deg,rgba(240,237,219,.66),rgba(240,237,219,.62) 44%,rgba(240,237,219,.5) 58%,transparent 76%);mask-image:linear-gradient(to bottom,#000 82%,transparent)}
.photo-hero .top{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:baseline;gap:clamp(20px,4vw,56px);padding:clamp(18px,3.2vh,34px) var(--pad);pointer-events:none}
.photo-hero .top a{pointer-events:auto;color:var(--ink);text-decoration:none}.photo-hero .name{font-size:1.05rem;font-weight:600;white-space:nowrap}.photo-hero .top nav{display:flex;gap:clamp(14px,2vw,28px);font-size:.98rem}.photo-hero .top nav a{opacity:.8}.photo-hero .top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.photo-hero .copy{position:absolute;z-index:2;left:var(--pad);top:clamp(96px,15vh,165px);width:min(52vw,46rem);color:var(--ink)}
.hero-pill{display:inline-flex;align-items:center;border:1px solid #1e2d3329;background:#f6f1e470;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.02em}
.photo-hero .copy h1{font-family:Fraunces,Georgia,serif;font-weight:380;font-size:clamp(2.4rem,min(5.1vw,9.4vh),5.6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance;margin:20px 0 26px}
.photo-hero .copy p{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55;max-width:34ch;margin:0}



.photo-hero .status{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.photo-page .section{margin:0;padding-block:clamp(40px,5.5vw,76px)}
.photo-page #work,.photo-page #products,.photo-page #about,.photo-page #contact{scroll-margin-top:28px}
.photo-page .brand-strip{border:0;margin:0;padding-block:30px 20px}
.photo-page .brand-marquee{overflow:visible;mask-image:none;-webkit-mask-image:none}
.photo-page .brand-track{width:100%;display:block;animation:none}
.photo-page .brand-group{width:100%;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:20px}
.photo-page .brand-group>*{min-height:40px;opacity:.48}
.photo-page .brand-group>a:hover,.photo-page .brand-group>a:focus-visible{opacity:1}
.photo-page .brand-group .brand-name{font-size:clamp(16px,1.5vw,21px)}
.photo-page .brand-group .brand-mark{width:26px;height:26px}
.photo-page .section-label{font:500 14px/1.4 'Bricolage Grotesque',sans-serif;letter-spacing:.025em;margin:0 0 28px;color:#65716b}
.photo-page #work .project{border:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);align-items:center;padding:0;min-height:360px}
.photo-page #work .project[hidden]{display:none}
.photo-page #work .project-screen{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:0;aspect-ratio:16/10;padding:clamp(12px,1.5vw,22px);background:#e8e5dc;border:0;border-radius:6px;text-decoration:none;overflow:hidden;cursor:pointer}
.project-screen img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
.screen-hint{position:absolute;bottom:10px;right:12px;color:var(--ink);font-size:17px;line-height:1;background:#f6f1e4c9;padding:5px 7px;border-radius:50%}
.photo-page #work .project-copy{display:flex;flex-direction:column;gap:18px;max-width:38ch}
.photo-page #work .project-top{display:flex;align-items:center}
.photo-page #work .project-company-name{font:500 13px 'Bricolage Grotesque',sans-serif}
.photo-page #work .project-logo-fgs-mark{width:24px;height:24px}
.photo-page #work .project-logo-xberg{height:24px}
.photo-page #work .project h3{font:400 clamp(34px,3.5vw,50px)/1.06 Fraunces,Georgia,serif;letter-spacing:-.025em;margin:0}
.photo-page #work .project-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;margin:0;color:var(--ink-soft)}
.photo-page .text-link{font-size:14px;font-weight:500;text-underline-offset:5px;line-height:1.6;align-self:start}
.photo-page .text-link:hover{text-underline-offset:7px}
.photo-page .product-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);align-items:stretch}
.photo-page .product-card{min-width:0;display:flex;flex-direction:column;border:0;background:transparent;box-shadow:none;border-radius:0;transform:none}
.photo-page .product-card-image{display:block;aspect-ratio:16/10;border:0;border-radius:5px;background:#e8e5dc;overflow:hidden}
.photo-page .product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.photo-page .product-card-copy{padding:20px 0 0;display:flex;flex-direction:column;align-items:start;gap:12px;flex:1}
.photo-page .product-status{font:400 11px/1.4 'Bricolage Grotesque',sans-serif;color:#68766c;text-transform:none;letter-spacing:0}
.photo-page .product-card h3{font:400 clamp(27px,2.5vw,34px)/1.08 Fraunces,Georgia,serif;margin:0}
.photo-page .product-card p{font-size:16px;line-height:1.6;margin:0 0 4px;color:var(--ink-soft)}
.photo-page .product-card .text-link{margin-top:auto}
.photo-page .about-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(32px,5vw,70px);align-items:start;max-width:1040px}
.photo-page .about-portrait{width:170px;height:auto;border-radius:3px}
.photo-page .about-copy{display:flex;flex-direction:column;gap:20px;max-width:64ch}
.photo-page .about-copy>p{font-size:18px;line-height:1.65;color:var(--ink-soft);margin:0}
.photo-page .night-journey{position:relative;height:auto;min-height:70svh;margin-top:40px;margin-inline:calc((min(1360px,100vw) - 100vw)/2 - var(--side));background:#142d38;color:var(--cream);--sky-x:0px;--sky-y:0px}
.night-stage{position:relative;min-height:570px;height:75svh;max-height:860px;overflow:hidden;isolation:isolate}
.night-sky{position:absolute;z-index:-2;inset:-15%;background:#142d38 url('/assets/photo-hero/star-sky.jpg') center/cover;transform:translate(var(--sky-x),var(--sky-y));will-change:transform}
.night-stage::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10283290,transparent 80%);pointer-events:none}
.star-depth{position:absolute;inset:-18%;z-index:-1;pointer-events:none;transform:translate(calc(var(--sky-x)*1.45),calc(var(--sky-y)*1.45));opacity:.6;background-image:radial-gradient(circle at 74% 23%,#faf1df 0 1px,transparent 1.7px),radial-gradient(circle at 76% 28%,#faf1df 0 .7px,transparent 1.5px),radial-gradient(circle at 79% 24%,#faf1df 0 1px,transparent 1.7px),radial-gradient(circle at 81% 31%,#faf1df 0 .7px,transparent 1.5px),radial-gradient(circle at 28% 71%,#faf1df 0 1px,transparent 1.7px),radial-gradient(circle at 31% 73%,#faf1df 0 .7px,transparent 1.5px),radial-gradient(circle at 34% 70%,#faf1df 0 1px,transparent 1.7px)}
.night-contact{padding:clamp(55px,9vw,140px) clamp(24px,6vw,100px);max-width:980px}
.photo-page .night-contact h2{font-size:clamp(40px,5.5vw,80px);line-height:1.08;margin:0 0 28px;color:inherit}
.night-contact em{color:#d5dbc9}
.night-email{display:inline-flex;gap:30px;font-size:20px;text-decoration:none;border-bottom:1px solid #f6f1e480;padding-bottom:10px}
.night-email span{font-family:Arial,sans-serif}
.photo-page .night-footer{position:absolute;bottom:0;left:clamp(24px,6vw,100px);right:clamp(24px,6vw,100px);display:flex;justify-content:flex-start;align-items:center;gap:24px;flex-wrap:wrap;padding-block:20px;color:#f6f1e4b8;border-color:#f6f1e430;font-size:13px}
.night-footer a{color:inherit}
.screen-dialog{width:min(94vw,1400px);max-height:92svh;padding:48px 16px 16px;border:0;background:#f1eee7;border-radius:8px;overflow:auto}
.screen-dialog::backdrop{background:#11242bd9;backdrop-filter:blur(5px)}
.screen-dialog img{display:block;width:100%;height:auto}.screen-close{position:absolute;right:16px;top:10px;background:transparent;border:0;font:inherit;padding:6px;min-height:36px;cursor:pointer;color:var(--ink)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.photo-page .product-card-image:hover img{transform:scale(1.025)}}
@media(max-width:1000px){.photo-page .brand-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px}}
@media(max-width:760px){
 .photo-page #work .project{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0}
 .photo-page #work .project-copy{max-width:40ch;gap:16px}
 .photo-page #work .project h3{font-size:38px}
 .photo-page .product-cards{grid-template-columns:1fr;gap:34px}
 .photo-page .product-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
 .photo-page .product-card-copy{padding:0;gap:10px}.photo-page .product-card h3{font-size:28px}.photo-page .product-card p{font-size:15px}
 .photo-page .about-grid{grid-template-columns:130px minmax(0,1fr);gap:28px}.photo-page .about-portrait{width:130px}
 .photo-page .section{padding-block:40px}
}
@media(max-width:650px){
 .photo-hero{height:auto;min-height:max(760px,100svh);max-height:none;padding-bottom:200px}
 .photo-hero .top{padding-top:22px;gap:10px;flex-direction:column;align-items:start}
 .photo-hero .top nav{gap:20px;flex-wrap:wrap}.photo-hero .top nav a{min-height:36px;display:inline-flex;align-items:center}
 .photo-hero .copy{position:relative;left:auto;top:auto;width:auto;margin:140px var(--pad) 0}
 .photo-hero .copy h1{font-size:clamp(36px,9.5vw,58px);line-height:1.04;margin:18px 0 22px}
 .photo-hero .copy p{max-width:34ch;font-size:1rem;line-height:1.55}
 .hero-pill{font-size:11px;padding:6px 11px}
 
 .photo-hero::after{background:linear-gradient(180deg,rgba(240,237,219,.83),rgba(240,237,219,.7) 64%,rgba(240,237,219,.14) 84%,transparent);mask-image:none}
 .photo-page .brand-strip{padding-block:24px 8px}.photo-page .brand-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}.photo-page .brand-group .brand-name{font-size:18px}
 .photo-page .about-grid{grid-template-columns:1fr;gap:24px}.photo-page .about-portrait{width:130px}.photo-page .about-copy>p{font-size:17px}
 .night-contact{padding-top:60px;padding-bottom:130px}.photo-page .night-footer{gap:12px 20px;padding-bottom:24px}.night-footer a{min-height:44px;display:inline-flex;align-items:center}
 .screen-dialog{padding:52px 10px 10px;width:96vw}.screen-close{min-height:40px;top:6px}
}
@media(max-width:480px){.photo-page .product-card{display:flex;gap:0}.photo-page .product-card-image{width:100%;aspect-ratio:16/9}.photo-page .product-card-copy{padding-top:18px}.photo-page .product-card p{font-size:16px}.photo-page .product-cards{gap:38px}}
@media(max-width:360px){.photo-hero .top nav{gap:15px}.photo-hero .copy h1{font-size:34px}.photo-page .brand-group .brand-name{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.night-sky,.star-depth{transform:none;will-change:auto}.photo-page .product-card-image img{transition:none}.photo-page .product-card-image:hover img{transform:none}}

/* Quiet fields derived from the sky, grass and red-earth frames. */
.photo-page{--section-work:#d3d5ca;--section-products:#e5d8c9;--section-about:#f1ece1}
.photo-page #work,.photo-page #products,.photo-page #about{position:relative;isolation:isolate;padding-block:clamp(52px,6vw,84px)}
.photo-page #work{--section-fill:var(--section-work)}
.photo-page #products{--section-fill:var(--section-products)}
.photo-page #about{--section-fill:var(--section-about)}
.photo-page #work::before,.photo-page #products::before,.photo-page #about::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--section-fill);pointer-events:none}
.photo-page .section-label{color:var(--ink-soft)}
.photo-page .product-status{color:#526258}
.photo-page #work .project-screen{background:#eceae1}
.photo-page .night-journey{margin-top:0}
@media(max-width:650px){.photo-page #work,.photo-page #products,.photo-page #about{padding-block:44px}}

/* Each case gets its own landscape-colored chapter and composition. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.photo-page #work{padding:0;isolation:auto}
.photo-page #work::before{display:none}
.work-chapter{position:relative;isolation:isolate;padding-block:clamp(64px,7vw,100px)}
.work-chapter::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--chapter-color);pointer-events:none}
.chapter-brief{--chapter-color:#d3d5ca}
.chapter-agents{--chapter-color:#d7dedb}
.chapter-xberg{--chapter-color:#e5d8c9}
.photo-page #products{--section-fill:#f1ece1}
/* Daily Brief: one centred exhibit, with room around the actual product. */
.photo-hero{--night:1;--hero-ink:#f6f1e4}
.photo-hero::after{background:linear-gradient(90deg,#f0eddb52,#f0eddb38 39%,#f0eddb12 57%,transparent 72%);mask-image:linear-gradient(#000 62%,transparent 90%)}
.photo-hero .copy::before{content:'';position:absolute;inset:-50px -80px;z-index:-1;background:radial-gradient(ellipse at 35% 44%,#f0eddbd9 22%,#f0eddbb8 50%,transparent 74%);opacity:var(--night);pointer-events:none}
.hero-scroll{position:absolute;left:var(--pad);bottom:30px;z-index:2;display:flex;align-items:center;gap:30px;text-decoration:none;font-size:13px;color:var(--ink);padding:10px 15px;background:#f6f1e4b8;border-radius:40px}
.hero-scroll span:last-child{display:inline-block;transition:transform .3s}.hero-scroll:hover span:last-child{transform:translateY(4px)}
.photo-page .brand-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.photo-page .brand-track{display:flex;width:max-content;animation:brand-drift 58s linear infinite}
.photo-page .brand-group{display:flex;width:auto;gap:clamp(50px,6vw,90px);padding-right:clamp(50px,6vw,90px);flex-shrink:0}
.photo-page .brand-group>*{flex-shrink:0;opacity:.6}.brand-marquee:hover .brand-track,.brand-marquee:focus-within .brand-track{animation-play-state:paused}
/* A single sky carries the person, the invitation and the final quiet moment. */
.photo-page .personal-sky{isolation:isolate;overflow:hidden;min-height:0;margin-top:0}
.personal-sky .night-sky{background-image:url('/assets/photo-hero/personal-night-sky.webp');inset:-8% -8%;background-position:center;filter:none}
.personal-sky .star-depth{opacity:.4}
.photo-page .personal-sky #about{max-width:1160px;margin:auto;padding:clamp(72px,9vw,140px) var(--pad) clamp(30px,5vw,80px)}
.photo-page .personal-sky #about::before{display:none}
.photo-page .personal-sky .section-label{font:400 clamp(35px,4vw,56px)/1.1 Fraunces,Georgia,serif;color:#f6f1e4;letter-spacing:-.025em;margin-bottom:40px}
.photo-page .personal-sky .about-grid{grid-template-columns:170px minmax(0,1fr);gap:clamp(32px,5vw,76px)}
.photo-page .personal-sky .about-copy>p{color:#f6f1e4d9;font-size:clamp(17px,1.45vw,20px);line-height:1.75}
.personal-sky .about-portrait{border-radius:50%;aspect-ratio:1;object-fit:cover;filter:saturate(.75)}
.personal-sky .night-stage{height:auto;min-height:520px;max-height:none;isolation:auto}
.personal-sky .night-stage::after{display:none}
.personal-sky .night-contact{max-width:1160px;margin:auto;padding:clamp(60px,7vw,100px) var(--pad) 150px}
.photo-page .personal-sky .night-contact h2{font-size:clamp(38px,5vw,68px)}
.photo-page .personal-sky .night-footer{border:0;left:var(--pad);right:var(--pad)}
.personal-sky a:focus-visible{outline-color:#f6f1e4}
@media(max-width:760px){.photo-page .personal-sky .about-grid{grid-template-columns:1fr;gap:28px}.personal-sky .about-portrait{width:120px}.photo-page .personal-sky #about{padding-top:64px}.personal-sky .night-stage{min-height:470px}.photo-page .brand-group{gap:48px;padding-right:48px}}
@media(max-width:650px){.photo-hero::after{background:linear-gradient(180deg,#f0eddb80,#f0eddb73 54%,#f0eddb20 73%,transparent 89%)}.photo-hero .copy::before{inset:-45px -30px;background:radial-gradient(ellipse,#f0eddbde 35%,#f0eddbc2 60%,transparent 85%)}.hero-scroll{bottom:25px}}
@media(prefers-reduced-motion:reduce){.photo-page .brand-track{animation:none;width:100%}.photo-page .brand-group{flex-wrap:wrap;justify-content:center;gap:22px;padding:0;width:100%}.photo-page .brand-group[aria-hidden=true]{display:none}.photo-page .brand-marquee{mask-image:none}.hero-scroll span,.chapter-next span{transition:none}}
/* Keep the photograph clear: no full-frame brightness wash. */
.photo-hero::after{display:none}
.photo-hero .copy{color:var(--hero-ink,var(--ink))}
.photo-hero .copy::before{inset:-12px -18px;background:radial-gradient(ellipse at 30% 50%,#f0eddb20,transparent 72%);opacity:calc(1 - var(--night))}
.photo-hero .top a{color:var(--hero-ink,var(--ink))}
.photo-hero .copy h1{text-shadow:0 1px 3px #f1ece124}
.photo-hero .copy p{max-width:37ch;text-shadow:0 1px 4px #f1ece124}
.hero-pill{color:inherit;background:#f1ece11f;border-color:currentColor}
.photo-canvas{background-image:url('/assets/photo-hero/stream/wide/f7.webp')}
@media(max-width:760px){.photo-canvas{background-image:url('/assets/photo-hero/stream/small/f7.webp')}}
.photo-hero::before{content:'';position:absolute;inset:0;background:var(--sky) url('/assets/photo-hero/stream/wide/f7.webp') 70% 100%/cover no-repeat}
.photo-canvas{opacity:0;transition:opacity .3s ease}
@media(max-width:760px){.photo-hero::before{background-image:url('/assets/photo-hero/stream/small/f7.webp')}}
@media(prefers-reduced-motion:reduce){.photo-canvas{transition:none}}

/* Soft reading light stays within the description, following the day/night cycle. */
.photo-hero .copy p{position:relative;isolation:isolate}
.photo-hero .copy p::before,.photo-hero .copy p::after{content:'';position:absolute;inset:-24px -32px;z-index:-1;pointer-events:none}
.photo-hero .copy p::before{background:radial-gradient(ellipse at center,rgba(240,237,219,.64) 0%,rgba(240,237,219,.42) 44%,rgba(240,237,219,0) 76%);opacity:calc(1 - var(--night))}
.photo-hero .copy p::after{background:radial-gradient(ellipse at center,rgba(20,38,46,.42) 0%,rgba(20,38,46,.22) 44%,rgba(20,38,46,0) 76%);opacity:var(--night)}
@media(max-width:650px){.photo-hero .copy p::before,.photo-hero .copy p::after{inset:-20px -18px}}

/* One flat, viewport-sized template for every selected project. */
.photo-page .work-chapter{
  min-height:100svh;box-sizing:border-box;display:flex;align-items:center;
  padding-block:clamp(28px,5svh,64px);scroll-margin-top:0;
}
.photo-page #work .work-chapter .project{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3svh,36px);min-height:0;width:100%;
}
.photo-page #work .work-chapter .project-copy{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.6svh,18px);width:100%;max-width:700px;
}
.photo-page #work .work-chapter .project h3,.photo-page #products .products-heading h2{
  font:400 clamp(32px,min(4.4vw,6.3svh),64px)/1.06 Fraunces,Georgia,serif;
  letter-spacing:-.025em;margin:0;
}
.photo-page #work .work-chapter .project-lead{
  max-width:48ch;font-size:clamp(16px,min(1.5vw,2.5svh),20px);line-height:1.55;margin:0;
}
.photo-page #work .work-chapter .text-link{align-self:center}
.photo-page #work .work-chapter .project-screen{
  display:flex;align-items:center;justify-content:center;width:min(100%,1120px);
  height:clamp(180px,52svh,660px);min-height:0;max-width:none;aspect-ratio:auto;
  box-sizing:border-box;padding:clamp(12px,2.5svh,32px);border:0;border-radius:0;
  background:#eceae1;overflow:hidden;transform:none;transition:none;
}
.photo-page #work .work-chapter .project-screen img{
  display:block;width:100%;height:100%;max-height:100%;object-fit:contain;
}
.photo-page #products,.photo-page .personal-sky #about,.photo-page .personal-sky #contact{
  min-height:100svh;box-sizing:border-box;
}
.photo-page #products{display:flex;flex-direction:column;justify-content:center}
.photo-page .personal-sky #about{display:flex;flex-direction:column;justify-content:center}
.photo-page .personal-sky #contact{display:flex;align-items:center}
.photo-page .personal-sky .night-stage{width:100%;min-height:0}
.photo-page,.photo-page *,.photo-page *::before,.photo-page *::after{box-shadow:none!important;text-shadow:none!important}
@media(max-width:760px){
  .photo-page .work-chapter{padding-block:32px}
  .photo-page #work .work-chapter .project{gap:24px}
  .photo-page #work .work-chapter .project-copy{gap:14px}
  .photo-page #work .work-chapter .project h3,.photo-page #products .products-heading h2{font-size:clamp(32px,7vw,46px)}
  .photo-page #work .work-chapter .project-lead{font-size:16px}
  .photo-page #work .work-chapter .project-screen{height:clamp(180px,42svh,420px);padding:12px}
}

/* Independent products shares the project heading scale and alignment. */
.photo-page .products-heading{width:100%;max-width:700px;margin:0 auto clamp(24px,4svh,44px);text-align:center}
.photo-page #products .products-heading h2{color:var(--ink)}
.photo-page .products-intro{font-size:clamp(16px,min(1.5vw,2.5svh),20px);line-height:1.55;color:var(--ink-soft);max-width:48ch;margin:16px auto 0}
@media(max-width:760px){.photo-page .products-intro{font-size:16px;margin-top:14px}}

.photo-page #work .work-chapter .project-screen{height:auto;aspect-ratio:2.4;padding:0;width:min(100%,1120px,125svh);background:transparent}
.photo-page #work .work-chapter .project-screen img{object-fit:cover}
.photo-page .personal-sky{background:linear-gradient(to bottom,#bed0d6 0%,#aec1ca 68%,#a2b6c1 100%);color:var(--ink)}
.personal-sky .night-sky,.personal-sky .star-depth{inset:0;transform:none;background:url('/assets/portfolio/sky.webp') center bottom/cover no-repeat;filter:none}
.personal-sky .star-depth{inset:0 -3%;opacity:1;mask-image:linear-gradient(black 45%,transparent 67%);animation:footer-cloud-drift 65s ease-in-out infinite alternate}
@keyframes footer-cloud-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.photo-page .personal-sky :is(.section-label,.about-copy>p,.night-contact h2,.night-contact em,.night-footer){color:#1e3039}
.personal-sky .night-email{color:inherit;border-color:currentColor}
.personal-sky a:focus-visible{outline-color:currentColor}
@media(prefers-reduced-motion:no-preference){
 .mirror-passage{height:125svh;position:relative}
 .mirror-passage .photo-hero{position:sticky;top:0;height:100svh;max-height:none;min-height:0;padding-bottom:0}
 .mirror-passage .photo-canvas,.mirror-passage .photo-hero::before{transform-origin:var(--origin,72% 44%);transform:translate(var(--pan-x,0%),var(--pan-y,0%)) scale(var(--zoom,1))}
 .mirror-passage :is(.copy,.top,.hero-scroll){opacity:var(--copy-alpha,1)}
 .photo-page main.wrap{position:relative;z-index:1}
}
@media(max-height:520px) and (max-width:760px){.mirror-passage{height:auto}.mirror-passage .photo-hero{position:relative;height:auto;min-height:640px}}
@media(prefers-reduced-motion:reduce){.personal-sky .star-depth{animation:none}}

/* Keep the full tree line visible; animate the cloud-rich part of the photograph. */
.personal-sky .night-sky,.personal-sky .star-depth{
  inset:auto 0 0;width:100%;height:auto;aspect-ratio:1672/941;
  background-size:100% 100%;background-position:center;pointer-events:none;
}
.personal-sky .night-sky{mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.18) 18%,#000 56%)}
.personal-sky .star-depth{
  inset:auto -5% 0;width:110%;height:auto;
  mask-image:linear-gradient(transparent 12%,black 52%,black 67%,transparent 81%);
  animation:footer-cloud-drift 28s linear infinite alternate;
}
@keyframes footer-cloud-drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.photo-page .personal-sky .night-footer{
  position:absolute;inset:auto 0 0;display:flex;flex-direction:column-reverse;
  justify-content:center;align-items:center;gap:3px;text-align:center;
  padding:0 12px max(10px,env(safe-area-inset-bottom));
}
.personal-sky .night-footer span{background:rgba(246,241,228,.84);padding:2px 7px;border-radius:3px}
.photo-page #work .work-chapter .project-screen{border-radius:10px;overflow:hidden}

@media(prefers-reduced-motion:reduce){.personal-sky .star-depth{animation:none}}

@media(max-width:650px){
  .photo-hero .top{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:12px clamp(10px,3.5vw,20px)}
  .photo-hero .top .name{font-size:clamp(14px,3.9vw,17px)}
  .photo-hero .top nav{flex-wrap:nowrap;align-items:center;gap:clamp(6px,2.4vw,16px);font-size:clamp(12px,3.45vw,16px)}
  .photo-hero .top nav a{min-height:44px;white-space:nowrap}
}

.photo-page #work .work-chapter .project-screen{width:min(100%,1120px);aspect-ratio:1311/1348;height:auto;border-radius:8px}
.photo-page #work .work-chapter .project-screen img{width:100%;height:auto;display:block;object-fit:contain}

.chapter-vesphera{--chapter-color:#e5e2ee}

/* The next page starts arriving as soon as the opening moves. */
@media(prefers-reduced-motion:no-preference){
  .photo-page main.wrap{margin-top:-25svh}
  .mirror-passage .photo-canvas,.mirror-passage .photo-hero::before{filter:none}
  .photo-page .brand-strip{position:relative;isolation:isolate;background:#f1ece1}
  .photo-page .brand-strip::before{content:'';position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);background:#f1ece1;z-index:-1}
  .photo-page #work>.work-chapter{
    position:sticky;top:var(--stack-top,0px);z-index:var(--stack-order,1);
  }
  .photo-page #work>.work-chapter::before{border-radius:16px 16px 0 0}
  .photo-page #work>.work-chapter::after{
    content:'';position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);
    background:#23332d;opacity:var(--page-dim,0);border-radius:16px 16px 0 0;pointer-events:none;
  }
  .photo-page #work>.work-chapter>.project{
    transform:scale(var(--page-scale,1));transform-origin:center bottom;
  }
}
@media(max-height:520px) and (max-width:760px){
  .photo-page main.wrap{margin-top:0}
  .photo-page #work>.work-chapter{position:relative;top:auto}
  .photo-page #work>.work-chapter>.project{transform:none}
  .photo-page #work>.work-chapter::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .photo-page main.wrap{margin-top:0}
  .photo-page #work>.work-chapter{position:relative;top:auto}
  .photo-page #work>.work-chapter>.project{transform:none}
}

/* Viewport case pages: generous inset, natural artwork, a transparent ending. */
.photo-page #work>.work-chapter{
  height:100svh;min-height:0;
  padding:clamp(36px,6svh,76px) clamp(8px,2.5vw,48px) 0;
}
.photo-page #work .work-chapter .project{
  height:100%;min-height:0;justify-content:flex-start;gap:clamp(28px,4svh,52px);
}
.photo-page #work .work-chapter .project-copy{flex:0 0 auto;gap:clamp(12px,1.8svh,22px)}
.photo-page #work .work-chapter .project-screen{
  display:block;flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto;
  width:min(100%,1120px);padding:0;border-radius:8px;background:none;
  mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);
}
.photo-page #work .work-chapter .project-screen img{
  width:100%;height:auto;max-height:none;object-fit:contain;
  transform:none;transition:none;
}
.photo-page #work .project-screen:is(:hover,:focus-visible) img{transform:none}
.photo-page #work .project-screen .screen-hint{display:none}
.photo-page #work .project-screen:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* The entrance moves continuously; never hold on a magnified raster frame. */
@media(prefers-reduced-motion:no-preference){
  .mirror-passage{height:100svh}
  .mirror-passage .photo-hero{position:relative}
  .photo-page main.wrap{margin-top:0}
}
@media(max-width:760px){
  .photo-page #work>.work-chapter{padding:clamp(28px,5svh,52px) 4px 0}
  .photo-page #work .work-chapter .project{gap:clamp(24px,4svh,40px)}
}
@media(max-height:520px){
  .photo-page #work .work-chapter .project-copy{gap:8px}
  .photo-page #work .work-chapter .project h3{font-size:clamp(24px,5svh,36px)}
  .photo-page #work .work-chapter .project-lead{font-size:14px;line-height:1.35}
  .photo-page #work>.work-chapter{padding-top:20px}
  .photo-page #work .work-chapter .project{gap:18px}
}
/* A single sky spans About and contact. Cover crops without distortion. */
.photo-page .personal-sky{background:#bed0d6}
.personal-sky .night-sky,.personal-sky .star-depth{
  inset:0;width:100%;height:100%;aspect-ratio:auto;
  background-image:url('/assets/portfolio/shared-sky-v4.webp');
  background-size:cover;background-position:center bottom;
  mask-image:none;filter:none;transform:none;
}
.personal-sky .star-depth{
  opacity:.28;mask-image:linear-gradient(#000 0%,#000 65%,transparent 87%);
  animation:shared-cloud-drift 38s ease-in-out infinite alternate;
}
@keyframes shared-cloud-drift{from{transform:translateX(-1%)}to{transform:translateX(1%)}}
@media(prefers-reduced-motion:reduce){.personal-sky .star-depth{animation:none;opacity:0}}

/* A lightweight pointer label; artwork remains still and links stay native. */
.project-cursor{
  position:fixed;z-index:1000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:84px;height:84px;border:1px solid #243e35;border-radius:50%;
  background:#f6f1e4;color:#243e35;font:500 13px/1.2 'Bricolage Grotesque',sans-serif;
  opacity:0;visibility:hidden;transform:scale(.88);
  transition:opacity .16s ease,transform .2s ease,visibility .16s;
}
.project-cursor.is-visible{opacity:1;visibility:visible;transform:scale(1)}
.project-cursor-arrow{font-size:23px;line-height:1}
@media(hover:hover) and (pointer:fine){
  #work .project-screen.custom-cursor-enabled,#work .project-screen.custom-cursor-enabled *{cursor:none}
}
@media(prefers-reduced-motion:reduce){.project-cursor{transition:none}}
@media(hover:none),(pointer:coarse){.project-cursor{display:none}}

/* Match the product's dark canvas and keep the transition into the page seamless. */
.photo-page .chapter-xberg{--chapter-color:#251e39;color:#f6f1e4}
.photo-page #work .chapter-xberg :is(h3,.project-lead,.project-company-name,.text-link){color:#f6f1e4}
.photo-page #work .project-brand{display:inline-flex;align-items:center;gap:12px}
.photo-page #work .project-brand img{flex-shrink:0}
/* Quiet editorial cursor, echoing the hero's cream and serif typography. */
.project-cursor{
  width:96px;height:96px;gap:5px;background:#f1ece1;color:#243e35;
  border:1px solid #243e3580;font:italic 400 20px/1.1 Fraunces,Georgia,serif;
}
.project-cursor-arrow{font:300 26px/1 'Bricolage Grotesque',sans-serif}
/* Clouds drift independently above a still tree line, without doubled imagery. */
.photo-page .personal-sky{background:#b4c4b9}
.personal-sky .night-sky{
  mask-image:linear-gradient(transparent 0%,transparent 76%,#000 85%);
}
.personal-sky .star-depth{
  opacity:1;mask-image:linear-gradient(#000 0%,#000 76%,transparent 85%);
  animation:quiet-sky-drift 90s ease-in-out infinite alternate;
}
@keyframes quiet-sky-drift{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}
.personal-sky .about-portrait{filter:none}
@media(prefers-reduced-motion:reduce){
  .personal-sky .night-sky{mask-image:none}
  .personal-sky .star-depth{animation:none;opacity:0}
}

.photo-page #work .chapter-xberg .project-logo-xberg{filter:brightness(0) invert(1)}

/* Explore: an unframed word and a soft point of warm light. */
.project-cursor{
  width:116px;height:48px;flex-direction:row;gap:0;padding:0 0 0 18px;
  background:transparent;border:0;border-radius:0;color:#243e35;
  font:italic 400 24px/1.1 Fraunces,Georgia,serif;
}
.project-cursor-arrow{display:none}

.project-cursor.is-dark{color:#f6f1e4}


/* Follow the pointer with a softer, slower light than the lettering. */
.project-cursor{
  left:0;top:0;will-change:transform;
  transform:translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0) scale(.94);
  transition:opacity .16s ease,visibility .16s;
}
.project-cursor.is-visible{transform:translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0) scale(1)}

/* Visible, steady cloud travel; the lower tree layer stays fixed. */
.personal-sky .star-depth{
  inset:0 -6%;width:112%;height:100%;
  animation:readable-cloud-drift 48s linear -12s infinite alternate;
  will-change:transform;
}
@keyframes readable-cloud-drift{
  from{transform:translate3d(-3.5%,0,0)}
  to{transform:translate3d(3.5%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .project-cursor,
  .personal-sky .star-depth{animation:none;opacity:0;will-change:auto}
}

.photo-page .chapter-vesphera{--chapter-color:#eeeaf6}

/* Four complementary practices, using the opening's existing pill treatment. */
.hero-pill-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;padding:0;margin:0}
.hero-pill-group .hero-pill{flex:0 0 auto;margin:0;white-space:nowrap}
@media(max-width:650px){.hero-pill-group{gap:6px}.hero-pill-group .hero-pill{padding:6px 10px}}

/* Keep the final case pinned while Independent products turns over it. */
.chapter-stack{position:relative;isolation:isolate}
@media(prefers-reduced-motion:no-preference){
  .photo-page .chapter-stack #work{display:contents}
  .photo-page .chapter-stack #work::before{display:none}
  .photo-page .chapter-stack #products{
    position:relative;z-index:var(--stack-order,5);scroll-margin-top:0;
  }
  .photo-page .chapter-stack #products::before{border-radius:16px 16px 0 0}
}

/* Explore follows the pointer as typography alone. */
.project-cursor{width:98px;padding:0}

/* Give Vesphera's in-image heading breathing room above the artwork. */
.photo-page #work :is(.chapter-vesphera,.chapter-brief,.chapter-agents) .project-screen{
  padding-top:clamp(28px,3.5vw,48px);background:#fff;
}

/* A small, irregular breeze in the tree canopy, separate from cloud travel. */
.footer-wind-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .personal-sky .night-sky{filter:url("#footer-tree-breeze")}
}
@media(prefers-reduced-motion:reduce){
  .personal-sky .night-sky{filter:none}
}

/* A short portal passage: reveal the following page through the actual aperture. */
@media(prefers-reduced-motion:no-preference) and (min-height:521px){
  .photo-page.portal-ready .mirror-passage{height:180svh}
  .photo-page.portal-ready .mirror-passage .photo-hero{
    position:sticky;top:0;height:100svh;min-height:0;max-height:none;
    opacity:var(--scene-alpha,1);
  }
  .photo-page.portal-ready .mirror-passage .photo-canvas,
  .photo-page.portal-ready .mirror-passage .photo-hero::before{
    transform-origin:0 0;transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(var(--zoom,1));
  }
  .photo-page.portal-ready main.wrap{margin-top:-100svh}
}