/* Aperture — bespoke photography portfolio.
   Dark, cinematic, image-forward. Distinct from the light brutalist
   portfolio template: Prata + Inter, near-black gallery, a genre filter,
   a drag before/after retouch slider and a session-booking form. */
*{box-sizing:border-box}
:root{
  --accent:#c8b18a; --accent-2:#e8ddca;
  --ink:#ecebe8; --muted:#8f8d88; --line:#222226;
  --bg:#0a0a0c; --panel:#0f0f12; --card:#131317; --deep:#060608;
  --shadow:0 30px 64px -32px rgba(0,0,0,.85);
  --disp:"Prata",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--disp); font-weight:400; line-height:1.12; margin:0}
.wrap{width:min(1200px,92vw); margin-inline:auto}
.eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); font-weight:500}

.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:500; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.9em 1.8em; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--accent); color:#0a0a0c}
.btn-fill:hover{background:var(--accent-2)}
.btn-line{border-color:#33333a; color:var(--ink)}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; padding:22px 0; transition:.3s}
.nav.stuck{background:rgba(10,10,12,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:13px 0}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{font-family:var(--disp); font-size:1.5rem; letter-spacing:.06em}
.brand b{color:var(--accent); font-weight:400}
.nav-links{display:flex; gap:30px; font-weight:500; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.nav-links a{color:var(--muted)} .nav-links a:hover{color:var(--accent)}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:2px; background:transparent; cursor:pointer; padding:11px}
.burger svg{width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round}

/* hero */
.hero{padding:160px 0 60px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.2rem); margin:18px 0 0}
.lede{font-size:1.1rem; color:var(--muted); max-width:44ch; margin:22px 0 30px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{display:flex; gap:30px; margin-top:36px; flex-wrap:wrap}
.hero-note b{display:block; font-family:var(--disp); font-size:1.9rem; color:var(--accent)}
.hero-note span{font-size:.8rem; color:var(--muted); letter-spacing:.04em}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:3px; overflow:hidden; background:linear-gradient(155deg,#1a1a20,#08080a 74%); box-shadow:var(--shadow)}
.dhero-art .art-emoji{position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(5rem,12vw,8rem); transition:opacity .6s}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; border-radius:inherit}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}
.art-frame{position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(200,177,138,.22)}
.art-chip{position:absolute; z-index:3; background:rgba(10,10,12,.78); color:var(--accent); backdrop-filter:blur(6px); border:1px solid var(--line); padding:8px 13px; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase}
.art-chip.c1{left:16px; top:16px} .art-chip.c2{right:16px; bottom:16px}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* sections */
.sec{padding:78px 0}
.sec-head{max-width:60ch}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem); margin:12px 0}
.sec-head p{color:var(--muted); margin:0}

/* gallery */
.filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:30px 0 28px}
.fbtn{border:1px solid var(--line); background:transparent; color:var(--muted); font-family:var(--body); font-weight:500; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.55em 1.15em; border-radius:2px; cursor:pointer; transition:.2s}
.fbtn:hover{border-color:var(--accent); color:var(--ink)} .fbtn.on{background:var(--accent); color:#0a0a0c; border-color:var(--accent)}
.gallery{columns:3; column-gap:14px}
.shot{position:relative; margin-bottom:14px; break-inside:avoid; border-radius:2px; overflow:hidden; cursor:pointer; background:var(--panel)}
.shot.hide{display:none}
.shot img{width:100%; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s}
.shot::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,8,.7), transparent 50%); opacity:0; transition:opacity .3s}
.shot:hover img{transform:scale(1.05)}
.shot:hover::after{opacity:1}
.shot .cap{position:absolute; left:14px; bottom:12px; z-index:2; opacity:0; transform:translateY(6px); transition:.3s}
.shot:hover .cap{opacity:1; transform:none}
.shot .cap .g{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.shot .cap .t{font-family:var(--disp); font-size:1.1rem}

/* before/after slider */
.ba{position:relative; max-width:900px; margin:34px auto 0; aspect-ratio:16/10; border-radius:3px; overflow:hidden; box-shadow:var(--shadow); user-select:none; touch-action:none}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .after-img{clip-path:inset(0 0 0 50%)}
.ba .before-img{filter:saturate(.35) contrast(.92) brightness(.9)}
.ba .lab{position:absolute; top:14px; z-index:3; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(10,10,12,.7); border:1px solid var(--line); padding:5px 11px; color:var(--ink)}
.ba .lab.l{left:14px} .ba .lab.r{right:14px; color:var(--accent)}
.ba .handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); z-index:4; transform:translateX(-1px)}
.ba .grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--accent); color:#0a0a0c; display:grid; place-items:center; font-size:1.1rem; box-shadow:0 6px 20px rgba(0,0,0,.5); cursor:ew-resize}

/* packages */
.pkgs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.pkg{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:30px; text-align:center; transition:.25s}
.pkg.feat{border-color:var(--accent)}
.pkg:hover{transform:translateY(-4px)}
.pkg .pt{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pkg h3{font-family:var(--disp); font-size:1.7rem; margin:6px 0}
.pkg .pr{font-family:var(--disp); font-size:2.4rem; color:var(--ink); margin:8px 0}
.pkg .pr small{font-size:.9rem; color:var(--muted); font-family:var(--body)}
.pkg ul{list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:9px; font-size:.9rem; color:var(--muted)}
.pkg .btn{width:100%; justify-content:center}

/* booking */
.book{background:var(--panel); border-block:1px solid var(--line)}
.book-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center}
.book h2{font-size:clamp(1.9rem,4vw,2.8rem); margin:10px 0}
.bform{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:clamp(22px,3vw,34px)}
.bform .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.bform label{display:block; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.bform input,.bform select{width:100%; padding:.78em .9em; border:1px solid var(--line); border-radius:2px; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:.94rem}
.bform input:focus,.bform select:focus{outline:none; border-color:var(--accent)}
.bform .fld{margin-bottom:14px}
.bform .btn{width:100%; justify-content:center}
.bform-ok{display:none; text-align:center; padding:18px 0}
.bform-ok.show{display:block}
.bform-ok .tick{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--accent); color:#0a0a0c; display:grid; place-items:center; font-size:1.5rem}
.bform-ok h3{font-size:1.5rem} .bform-ok p{color:var(--muted); font-size:.9rem}

.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* lightbox */
.lb{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(6,6,8,.92)}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:86vh; object-fit:contain; border-radius:2px}
.lb-close{position:absolute; top:20px; right:24px; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:1.1rem}

/* footer */
.foot{background:var(--deep); border-top:1px solid var(--line); padding:56px 0 30px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px}
.foot .brand{color:var(--ink)}
.foot p{color:var(--muted); font-size:.9rem; max-width:34ch; margin-top:10px}
.foot h5{color:var(--ink); font-family:var(--disp); font-weight:400; margin:0 0 12px; font-size:1rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.9rem}
.foot a:hover{color:var(--accent)}
.foot-base{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); font-size:.82rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px} .dhero-art{max-width:420px; margin-inline:auto; order:-1}
  .gallery{columns:2} .pkgs{grid-template-columns:1fr} .book-grid{grid-template-columns:1fr; gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; right:4vw; flex-direction:column; background:var(--panel); padding:18px 22px; border-radius:3px; box-shadow:var(--shadow); border:1px solid var(--line)}
}
@media (max-width:560px){ .gallery{columns:1} .bform .row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} *{scroll-behavior:auto} }