/* 7. header-height +10%: 40px → 44px */
:root{--bg:#0f1117;--surface:#151922;--surface-soft:rgba(20,24,33,.68);--text:#e9edf5;--muted:#9aa4b5;--line:rgba(233,237,245,.11);--line-strong:rgba(233,237,245,.2);--gap:18px;--header-height:51px;--glow:106 169 255}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:20;min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:28px;padding:8px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);background:rgba(15,17,23,.62);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
.brand{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:650;letter-spacing:-.03em}
.brand__logo{width:18px;height:18px;display:block;object-fit:contain;flex:0 0 auto}
.brand__copy{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.brand__text{color:var(--text);font-size:20px;line-height:1;white-space:nowrap}
.brand__tagline{color:var(--muted);font-size:9px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.site-nav,.footer-nav{display:flex;align-items:center;gap:clamp(8px,1.5vw,18px);font-size:13px;line-height:1;color:var(--muted)}
.site-nav a,.footer-nav a{display:inline-flex;align-items:center;line-height:1}
.site-nav a,.footer-nav a{transition:color .16s ease}
.site-nav a:hover,.footer-nav a:hover{color:var(--text)}

/* Contact pulse — a soft diagonal gradient sweep that travels across the
   Contact text. Loop is seamless: at both 0% and 100% of the keyframes the
   visible slice of the gradient sits in its muted "padding" zone, so the
   colour at the boundary is identical and there's no perceivable jump.
   Only the Contact link on the home page carries the .is-pulse class. */
@keyframes contact-pulse{0%{background-position:100% 0}100%{background-position:0% 0}}
.site-nav a.is-pulse{
  background-image:linear-gradient(30deg,var(--muted) 0%,var(--muted) 25%,#fff 50%,var(--muted) 75%,var(--muted) 100%);
  background-size:450% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:contact-pulse 6.5s linear infinite
}
.site-nav a.is-pulse:hover{animation:none;background:none;-webkit-text-fill-color:inherit;color:var(--text)}

/* ── Gallery ── */
.portfolio{padding:clamp(20px,3.8vw,46px) clamp(18px,4vw,56px) 72px}
.gallery{position:relative;width:100%}
.ba-card{--split:50%;--glow:106 169 255;position:absolute;left:0;top:0;display:block;margin:0;border:0;padding:0;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .18s ease}
.ba-card:hover{box-shadow:0 0 18px 3px rgb(var(--glow)/.05),0 0 6px 1px rgba(0,0,0,.05)}
.ba-frame{position:relative;overflow:hidden;margin:0;padding:0;background:#12151d;isolation:isolate}
.ba-image{width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* before layer — only opacity transition, clip-path instant */
.ba-before-layer{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 var(--split));opacity:0;transition:opacity .25s cubic-bezier(.37,0,.63,1)}
.ba-before-layer .ba-image{position:absolute;inset:0;height:100%;object-fit:cover}
.ba-card:hover .ba-before-layer,.ba-card:focus-visible .ba-before-layer{opacity:1}

/* 2. line moves instant (no left transition), only opacity fades */
.ba-line{display:none}

/* hover labels */
.ba-label{position:absolute;top:8px;z-index:4;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22);opacity:0;transition:opacity .4s ease;pointer-events:none;user-select:none}
.ba-label--after{left:8px}
.ba-label--before{right:8px}
.ba-card:hover .ba-label{opacity:1}

.gallery-status{margin:32px 0 0;color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;font-weight:500}
.gallery-status.is-done{display:none}

/* ── Footer ── */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px clamp(18px,4vw,56px);border-top:1px solid var(--line);color:var(--muted);background:rgba(9,11,16,.52)}
.site-footer p{margin:0;font-size:11px}

/* ── Lightbox ──
   4. lightbox is a flex column so caption naturally sits below stage
   5. overflow:hidden on lightbox (viewport clip); stage has overflow:visible so zoomed image expands to screen */
.lightbox{--split:50%;--photo-l:0px;--photo-r:100%;position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:52px 8px 18px;overflow:hidden;background:rgba(5,7,10,0);backdrop-filter:blur(0) saturate(100%);-webkit-backdrop-filter:blur(0) saturate(100%);opacity:0;pointer-events:none;transition:opacity .125s ease,background .125s ease,backdrop-filter .125s ease,-webkit-backdrop-filter .125s ease}
.lightbox.is-open{opacity:1;pointer-events:auto;background:rgba(5,7,10,.93);backdrop-filter:blur(16px) saturate(118%);-webkit-backdrop-filter:blur(16px) saturate(118%)}

/* 5. stage: overflow visible so zoomed image expands beyond stage bounds, clipped by lightbox */
.lightbox__stage{position:relative;overflow:hidden;background:#05070a;isolation:isolate;opacity:0;transform:scale(.965);flex-shrink:0;transition:opacity .125s cubic-bezier(.2,.8,.2,1),transform .125s cubic-bezier(.2,.8,.2,1)}
.lightbox.is-open .lightbox__stage{opacity:1;transform:scale(1)}

.lightbox__after-layer{position:absolute;inset:0;overflow:hidden}
.lightbox__compare-wrapper{position:absolute;inset:0;z-index:2;mask-image:linear-gradient(to right,transparent calc(var(--photo-l) - 5px),black var(--photo-l),black var(--photo-r),transparent calc(var(--photo-r) + 5px));-webkit-mask-image:linear-gradient(to right,transparent calc(var(--photo-l) - 5px),black var(--photo-l),black var(--photo-r),transparent calc(var(--photo-r) + 5px))}

/* 2. lightbox before-layer: no left transition on line, only opacity */
.lightbox__before-layer{position:absolute;inset:0;overflow:hidden;z-index:1;clip-path:inset(0 0 0 var(--split));opacity:0;transition:opacity .125s cubic-bezier(.37,0,.63,1)}
.lightbox.is-comparing .lightbox__before-layer{opacity:1}

.lightbox__line{display:none}

.lightbox__image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:0 0;user-select:none;-webkit-user-drag:none;will-change:transform}

/* 4. caption BELOW stage — as a flex sibling, not inside stage */
.lightbox__caption{flex-shrink:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,237,245,.35);pointer-events:none;opacity:0;transition:opacity .2s ease;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90vw}
.lightbox.is-open .lightbox__caption{opacity:1}

.lightbox__close{position:fixed;top:14px;right:16px;z-index:110;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(12,16,24,.56);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:white;font-size:28px;line-height:1;cursor:pointer;opacity:.84;transition:opacity .16s ease,transform .16s ease;display:flex;align-items:center;justify-content:center}
.lightbox__close:hover{opacity:1;transform:scale(1.04)}

/* 1. scroll lock — no position:fixed to avoid grid reflow; scrollbar-gutter:stable handles width */
body.lightbox-open{overflow:hidden}

/* 6. back-to-top: equal gap to footer and to right edge */
.back-to-top{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(46px,6vw,60px);z-index:50;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(15,17,23,.62);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);color:var(--text);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,background .18s ease;display:flex;align-items:center;justify-content:center}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:rgba(36,44,61,.86)}

.placeholder-page{min-height:calc(100vh - var(--header-height) - 85px);padding:clamp(58px,9vw,110px) clamp(18px,4vw,56px);max-width:900px}
.placeholder-page h1{margin:0;font-size:clamp(44px,8vw,92px);line-height:.96;letter-spacing:-.07em}
.placeholder-page p{margin:22px 0 0;max-width:620px;color:var(--muted);font-size:18px;line-height:1.55}

@media(max-width:980px){.brand__copy{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-width:680px){:root{--gap:14px;--header-height:auto}.site-header{position:sticky;align-items:flex-start;flex-direction:column;gap:14px;padding-top:14px;padding-bottom:14px}.brand__logo{width:18px;height:18px}.site-nav,.footer-nav{width:100%;overflow-x:auto;padding-bottom:2px}.lightbox__close{top:10px;right:10px}.site-footer{align-items:flex-start;flex-direction:column}.footer-left{flex-direction:row}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}

/* Footer left group: icons + copyright */
.footer-left{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-left p{margin:0;font-size:11px}

/* Footer social icons */
.footer-icons{display:inline-flex;align-items:center;gap:14px}
.footer-icons a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--muted);transition:color .16s ease,transform .16s ease}
.footer-icons a:hover{color:var(--text);transform:translateY(-1px)}
.footer-icons svg{width:16px;height:16px;display:block}

/* About page — editorial layout */
.about-page{flex:1;display:flex;align-items:center;padding:clamp(40px,6vw,80px) clamp(18px,4vw,56px)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);max-width:1280px;margin:0 auto;width:100%;align-items:center}
.about-portrait{position:relative;aspect-ratio:4/5;background:#1a1f2a linear-gradient(135deg,#1a1f2a,#0d1118);border:1px solid var(--line);overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about-content h1{margin:0 0 clamp(28px,4vw,48px);font-family:"Cormorant Garamond","Times New Roman",Georgia,serif;font-weight:300;font-size:clamp(38px,5.2vw,68px);line-height:1.05;letter-spacing:-.01em;color:var(--text)}
.about-content p{margin:0 0 22px;color:var(--muted);font-size:16px;line-height:1.7;max-width:50ch}
.about-content p:last-of-type{margin-bottom:clamp(34px,5vw,52px)}
.about-cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;border:1px solid var(--line-strong);background:rgba(15,17,23,.62);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);color:var(--text);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.about-cta:hover{background:rgba(36,44,61,.86);border-color:rgba(233,237,245,.32);transform:translateY(-1px)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:36px}.about-portrait{max-width:420px;margin:0 auto}}

/* Contact page */
.contact-page{flex:1;display:flex;justify-content:center;padding:clamp(40px,6vw,80px) clamp(18px,4vw,56px)}
.contact-wrap{width:100%;max-width:640px}
.contact-wrap h1{margin:0 0 clamp(20px,3vw,32px);font-family:"Cormorant Garamond","Times New Roman",Georgia,serif;font-weight:300;font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.01em}
.contact-intro{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 12px;max-width:48ch}
.contact-direct{font-size:14px;color:var(--muted);margin:0 0 clamp(28px,4vw,40px)}
.contact-direct a{color:var(--text);border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .16s ease}
.contact-direct a:hover{border-color:var(--text)}
.contact-form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:rgba(15,17,23,.5);color:var(--text);font-family:inherit;font-size:14px;line-height:1.5;transition:border-color .16s ease,background .16s ease;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(106,169,255,.55);background:rgba(15,17,23,.78)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.contact-submit{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;margin-top:6px;border:1px solid var(--line-strong);background:rgba(15,17,23,.62);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);color:var(--text);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .18s ease,border-color .18s ease,opacity .18s ease;align-self:flex-start;justify-self:start}
.contact-submit:hover:not(:disabled){background:rgba(36,44,61,.86);border-color:rgba(233,237,245,.32)}
.contact-submit:disabled{opacity:.55;cursor:wait}
.form-status{margin:8px 0 0;font-size:13px;color:var(--muted);min-height:1.4em}
.form-status.is-success{color:#9bd1a7}
.form-status.is-error{color:#e58a8a}