:root{
  --bg:#ffffff;
  --ink:#151515;
  --muted:#7a7a7a;
  --rule:#e9e9e9;
  --max:1680px;
  --gutter:clamp(18px,3.1vw,52px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit}

.site-header{
  height:84px;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--rule);
  position:relative;
  z-index:10;
  background:rgba(255,255,255,.98)
}
.brand{font-size:clamp(17px,1.45vw,23px);font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.role{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.nav{justify-self:end;display:flex;gap:26px;font-size:10px;font-weight:600;letter-spacing:.1em}
.nav a{position:relative;padding:8px 0}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:var(--ink);transition:right .25s ease}
.nav a:hover:after{right:0}
.menu-toggle{display:none;background:none;border:0;padding:10px 0;width:28px}
.menu-toggle span{display:block;height:1px;background:var(--ink);margin:6px 0}

.hero{width:100%;overflow:hidden;background:#111}
.hero img{width:100%;aspect-ratio:2048/767;object-fit:cover}

.intro{
  max-width:var(--max);
  margin:auto;
  padding:34px var(--gutter) 56px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--muted)
}

.portfolio{padding:0 var(--gutter);max-width:var(--max);margin:auto}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(12px,1.65vw,26px);
  row-gap:clamp(42px,5vw,82px);
  align-items:start
}
.work{margin:0;min-width:0}
.image-button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.image-button img{transition:transform .6s cubic-bezier(.2,.65,.25,1);will-change:transform}
.image-button:hover img{transform:scale(1.008)}

/* No thumbnail is deliberately tiny. The page is denser and more image-led. */
.work-01{grid-column:1/span 7}
.work-02{grid-column:8/span 5}
.work-03{grid-column:1/span 12}
.work-04{grid-column:1/span 7}
.work-05{grid-column:8/span 5}
.work-06{grid-column:2/span 10}
.work-07{grid-column:1/span 5}
.work-08{grid-column:6/span 7}
.work-09{grid-column:1/span 12}
.work-10{grid-column:1/span 7}
.work-11{grid-column:8/span 5}
.work-12{grid-column:1/span 6}
.work-13{grid-column:7/span 6}
.work-14{grid-column:1/span 5}
.work-15{grid-column:6/span 7}
.work-16{grid-column:1/span 6}
.work-17{grid-column:7/span 6}
.work-18{grid-column:1/span 12}
.work-19{grid-column:1/span 6}
.work-20{grid-column:7/span 6}
.work-21{grid-column:1/span 5}
.work-22{grid-column:6/span 7}
.work-23,.work-24{grid-column:3/span 8}

.about,.contact{max-width:var(--max);margin:clamp(95px,9vw,145px) auto 0;padding:0 var(--gutter)}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin:0 0 24px}
.about{border-top:1px solid var(--rule);padding-top:28px}
.about-line{max-width:920px;margin:0;font-size:clamp(20px,2.2vw,34px);line-height:1.35;letter-spacing:-.025em;font-weight:400}
.contact{border-top:1px solid var(--rule);padding-top:28px;padding-bottom:clamp(90px,9vw,140px)}
.contact-links{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;font-size:clamp(16px,1.45vw,22px);line-height:1.35}
.contact-links a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s ease}
.contact-links a:hover{border-color:var(--ink)}
.footer{border-top:1px solid var(--rule);padding:22px var(--gutter) 26px;display:flex;justify-content:space-between;gap:20px;font-size:9px;font-weight:600;letter-spacing:.12em;color:var(--muted)}

.lightbox{border:0;padding:0;margin:auto;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(12,12,12,.97);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(12,12,12,.97)}
.lightbox[open]{display:grid;place-items:center}
.lightbox-image{max-width:92vw;max-height:90vh;width:auto;height:auto;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed;border:0;background:none;color:#fff;cursor:pointer;z-index:2}
.lightbox-close{right:28px;top:18px;font-size:38px;font-weight:300}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);font-size:28px;padding:25px}
.lightbox-prev{left:14px}.lightbox-next{right:14px}

@media(max-width:900px){
  .site-header{height:72px;grid-template-columns:1fr auto;padding:0 18px}
  .role{display:none}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg);padding:26px 18px 30px;border-bottom:1px solid var(--rule);flex-direction:column;align-items:flex-start;gap:18px;font-size:12px}
  .nav.open{display:flex}.menu-toggle{display:block;justify-self:end}.brand{font-size:19px}
  .hero img{min-height:44vw}
  .intro{padding:24px 18px 38px;font-size:9px;flex-direction:column;gap:6px}
  .portfolio{padding:0 18px}
  .work-grid{grid-template-columns:repeat(6,1fr);column-gap:10px;row-gap:42px}
  .work-01,.work-03,.work-04,.work-06,.work-09,.work-10,.work-12,.work-13,.work-15,.work-16,.work-17,.work-18,.work-19,.work-20,.work-22,.work-23,.work-24{grid-column:1/span 6}
  .work-02,.work-05,.work-07,.work-08,.work-11,.work-14,.work-21{grid-column:1/span 6}
  .about,.contact{padding-left:18px;padding-right:18px;margin-top:82px}
  .about-line{font-size:22px;line-height:1.4}
  .contact-links{font-size:17px;gap:10px 24px}
  .footer{padding-left:18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.image-button img{transition:none}}

/* V2 refinement: original grid and image order retained. */
@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
html{scroll-padding-top:24px}body{font-size:16px;line-height:1.5}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}.skip-link{position:fixed;left:18px;top:-100px;background:#fff;padding:12px 20px;z-index:30}.skip-link:focus{top:12px}
.site-header{height:auto;min-height:84px;gap:22px;padding-top:20px;padding-bottom:20px}.role{font-size:12px;line-height:1.4;font-weight:400;margin:0;letter-spacing:.09em}.brand{font-weight:400}.nav{font-size:14px;letter-spacing:.02em;font-weight:400;gap:24px}.intro{font-size:12px;letter-spacing:.08em;font-weight:400;padding-bottom:40px;color:#656565}.eyebrow{font-size:14px;font-weight:400;letter-spacing:.04em;color:#656565}.work-grid{align-items:center;row-gap:clamp(28px,4vw,64px)}.image-button img{will-change:auto}.about,.contact{margin-top:72px}.about-line{max-width:860px;font-size:clamp(20px,2vw,30px);line-height:1.5}.contact{padding-bottom:72px}.social-links{display:flex;gap:28px;margin-top:22px;font-size:14px}.social-links a:hover{text-decoration:underline;text-underline-offset:5px}.footer{font-size:12px;font-weight:400;letter-spacing:.04em;align-items:center}.footer a{font-size:14px;padding:8px 0}.menu-toggle{width:44px;height:44px;padding:10px;cursor:pointer}.menu-toggle span{transition:transform .2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.lightbox{height:100dvh;touch-action:pan-y}.lightbox-image{max-width:calc(100vw - 140px);max-height:calc(100dvh - 120px)}.lightbox-close,.lightbox-prev,.lightbox-next{width:48px;height:48px;padding:0;display:grid;place-items:center;background:#151515b3;border-radius:50%;line-height:1}.lightbox-close{right:20px;top:16px;font-size:32px}.lightbox-prev,.lightbox-next{font-size:24px}.lightbox-counter{position:absolute;top:28px;left:26px;font-size:14px;letter-spacing:.08em;color:#ddd}.lightbox-error{position:absolute;max-width:280px;text-align:center;font-size:16px}.lightbox[aria-busy="true"] .lightbox-image{opacity:.35}body.viewer-open{overflow:hidden}
@media(max-width:1100px){.role{display:none}.site-header{grid-template-columns:1fr auto}}
@media(max-width:900px){.site-header{min-height:72px;padding:14px 18px}.nav{top:100%;font-size:16px;gap:6px;padding:14px 18px}.nav a{width:100%;padding:10px 0}.brand{font-size:clamp(16px,3.7vw,21px)}.hero img{min-height:0;aspect-ratio:auto;object-fit:contain}.intro{font-size:12px;padding:22px 18px 28px}.work-grid{row-gap:24px}.about,.contact{margin-top:48px}.contact{padding-bottom:48px}.lightbox-image{max-width:100vw;max-height:calc(100dvh - 150px)}.lightbox-prev,.lightbox-next{top:auto;bottom:16px;transform:none}.lightbox-prev{left:calc(50% - 64px)}.lightbox-next{right:calc(50% - 64px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.lightbox-image[hidden],.lightbox-error[hidden]{display:none}

/* Catalog / Lookbook follows the established V2 typography. */
.nav a[aria-current="page"]:after{right:0}
.catalog-page{max-width:var(--max);margin:auto;padding:clamp(32px,4vw,64px) var(--gutter) 0}
.catalog-page h1{font-size:clamp(26px,3vw,42px);line-height:1.2;font-weight:400;letter-spacing:-.03em;margin:0 0 36px}
.catalog-series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.65vw,26px);align-items:center;margin-bottom:clamp(36px,5vw,72px)}
.catalog-series figure{margin:0;min-width:0}
@media(min-width:901px){.catalog-series:has(figure:nth-child(4)):not(:has(figure:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.catalog-series{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.catalog-page{padding:30px 18px 0}.catalog-page h1{font-size:28px;margin-bottom:26px}.catalog-series{grid-template-columns:1fr;gap:20px;margin-bottom:36px}}

@media(min-width:901px){.nav{flex-wrap:wrap;row-gap:4px}}

/* Cross-portfolio navigation */
.nav{align-items:center}
.nav a.portfolio-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #171717;border-radius:2px;background:transparent;color:#171717;line-height:1.3;white-space:nowrap;transition:background .2s,color .2s}
.nav a.portfolio-switch:after{display:none}
.nav a.portfolio-switch:hover{background:#f3f3f3;border-color:#171717}
@media(max-width:900px){.nav{align-items:flex-start}.nav a.portfolio-switch{width:auto;margin:8px 0}}

/* An editorial transition after the complete photography portfolio. */
.ai-transition{max-width:var(--max);margin:clamp(64px,7vw,112px) auto 0;padding:0 var(--gutter)}
.ai-transition a{display:block}.ai-transition img{width:100%;height:auto}
.ai-transition-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--rule);padding:24px 0;font-size:clamp(20px,3.2vw,48px);letter-spacing:-.035em;line-height:1.2}
.ai-transition a:hover .ai-transition-caption{color:#666}
@media(max-width:900px){.ai-transition{padding:0 18px;margin-top:48px}.ai-transition-caption{padding:18px 0;font-size:clamp(19px,5vw,32px)}}

/* A clear AI destination on desktop and mobile. */
.nav a.portfolio-switch,.site-header .nav a.portfolio-switch{background:#171717;color:#fff;border-color:#171717;gap:12px;font-weight:600;letter-spacing:.04em}
.nav a.portfolio-switch:hover,.site-header .nav a.portfolio-switch:hover{background:#363636;color:#fff;border-color:#363636}
.mobile-ai-link{display:none}
@media(max-width:900px){
.site-header{grid-template-columns:minmax(0,1fr) auto auto;gap:12px}
.mobile-ai-link{display:inline-flex;align-items:center;justify-content:center;background:#171717;color:#fff;font-size:11px;letter-spacing:.03em;line-height:1.2;min-height:40px;padding:10px 12px;white-space:nowrap}
}
@media(max-width:380px){.site-header{gap:7px;padding-left:12px;padding-right:12px}.site-header .brand{font-size:14px}.mobile-ai-link{font-size:10px;padding:10px 8px}.site-header .menu-toggle{width:36px}}

/* Room for Home and the two portfolio destinations. */
@media(min-width:901px) and (max-width:1380px){.site-header{grid-template-columns:1fr auto}.site-header .role{display:none}.site-header .nav{gap:16px}}

/* Mobile editorial rhythm, preserving DOM order and complete images. */
@media(max-width:900px){
 .work-grid,.catalog-series{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px;align-items:center}
 .work-grid>figure,.catalog-series>figure{grid-column:auto;width:100%;min-width:0}
 .work-grid>figure.mobile-wide,.catalog-series>figure.mobile-wide{grid-column:1/-1}
 .work-grid>figure.mobile-solo,.catalog-series>figure.mobile-solo{grid-column:1/-1;width:74%;justify-self:center}
 .catalog-series{margin-bottom:32px}
}