:root{
  --bg:#f4f1ec;
  --ink:#1a1816;
  --ink-soft:#3a3631;
  --muted:#8a847b;
  --line:#d6cfc4;
  --accent:#b8442c;
  --paper:#ebe6dd;
  --warm:#e8e1d4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.06;pointer-events:none;z-index:1000;mix-blend-mode:multiply;
}
.display{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.02em;line-height:.95}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
a{color:inherit}
img{max-width:100%;display:block}

/* ============ NAV ============ */
.site-nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding:24px 40px;
  display:flex;justify-content:space-between;align-items:center;
  mix-blend-mode:difference;color:#f4f1ec;
}
.logo{font-family:'Fraunces',serif;font-size:22px;font-weight:400;letter-spacing:-.01em;font-style:italic;text-decoration:none;color:inherit}
.logo sup{font-size:10px;font-style:normal;letter-spacing:.15em;margin-left:6px;opacity:.7}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
  color:inherit;text-decoration:none;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  transition:opacity .3s;
  font-family:'JetBrains Mono',monospace;
}
.nav-links a:hover{opacity:.5}
.nav-links a.active{font-style:italic}

/* ============ HOME ============ */
.hero{
  min-height:100vh;
  padding:140px 40px 60px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:start;
  position:relative;
}
.hero-meta{position:absolute;top:140px;right:40px;text-align:right;color:var(--muted)}
.hero-meta .mono{display:block;margin-bottom:6px}
.hero-title{font-size:clamp(60px,10vw,160px);font-style:italic;letter-spacing:-.04em}
.hero-title .non-italic{font-style:normal}
.hero-image{
  position:relative;aspect-ratio:4/5;
  background:linear-gradient(135deg,#3a2c1f,#1a1410);overflow:hidden;
}
.hero-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-image .frame-num{position:absolute;top:20px;left:20px;color:#f4f1ec;opacity:.6;z-index:2}
.hero-image .caption{position:absolute;bottom:20px;left:20px;color:#f4f1ec;font-family:'Fraunces',serif;font-style:italic;font-size:18px;z-index:2}
.hero-bottom{
  padding:0 40px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  border-top:1px solid var(--line);padding-top:24px;
}
.hero-bottom div span:first-child{display:block;color:var(--muted);margin-bottom:6px}
.hero-bottom div span:last-child{font-family:'Fraunces',serif;font-size:18px}

/* ============ FEATURED GALLERY ============ */
.featured{padding:120px 40px}
.featured-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:80px;padding-bottom:24px;border-bottom:1px solid var(--line);
}
.featured-header h2{font-size:clamp(36px,5vw,72px);font-style:italic}
.featured-header .meta{color:var(--muted);text-align:right}
.featured-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.feat-img{overflow:hidden;position:relative;transition:transform .6s cubic-bezier(.2,.8,.2,1);text-decoration:none}
.feat-img:hover{transform:translateY(-6px)}
.feat-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat-img .placeholder{position:absolute;inset:0}
.feat-img .meta-strip{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 16px;color:#f4f1ec;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  display:flex;justify-content:space-between;
  opacity:0;transition:opacity .4s;z-index:2;
}
.feat-img:hover .meta-strip{opacity:1}
.feat-1{grid-column:1/6;aspect-ratio:4/5;background:linear-gradient(160deg,#5a4a3a,#2a1f15)}
.feat-2{grid-column:6/13;aspect-ratio:16/11;background:linear-gradient(120deg,#8a6a4a,#3a2818);margin-top:80px}
.feat-3{grid-column:2/7;aspect-ratio:1/1;background:linear-gradient(200deg,#4a3a5a,#1a1525);margin-top:40px}
.feat-4{grid-column:7/12;aspect-ratio:3/4;background:linear-gradient(140deg,#6a5a4a,#2a2520)}

/* ============ ABOUT STRIP ============ */
.about-strip{
  padding:120px 40px;background:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.about-strip .label{color:var(--accent);margin-bottom:20px;display:block}
.about-strip h3{font-size:clamp(28px,3.8vw,50px);font-style:italic;line-height:1.05;margin-bottom:24px}
.about-strip p{color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:46ch}
.about-img{aspect-ratio:3/4;background:linear-gradient(150deg,#7a5a3a,#2a1810);position:relative}
.about-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 60% 30%, rgba(232,225,212,.3), transparent 50%)}

/* ============ FOOTER ============ */
.site-footer{padding:80px 40px 32px;background:var(--ink);color:var(--bg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-grid h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-weight:400}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:10px}
.footer-grid a{color:inherit;text-decoration:none;opacity:.85;font-size:15px}
.footer-grid a:hover{color:#fff;opacity:1}
.footer-big{font-family:'Fraunces',serif;font-size:36px;font-style:italic;line-height:1;margin-bottom:20px;letter-spacing:-.02em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;color:var(--muted)}

/* ============ GALLERY PAGE ============ */
.gallery-page{padding:140px 40px 80px}
.gallery-header{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;
  margin-bottom:60px;padding-bottom:32px;border-bottom:1px solid var(--line);
}
.gallery-header h1{font-size:clamp(48px,7.5vw,106px);font-style:italic}
.gallery-header p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:45ch}
.category-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:60px}
.cat-btn{
  background:none;border:1px solid var(--line);padding:10px 20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;color:var(--ink);border-radius:100px;text-decoration:none;display:inline-block;
}
.cat-btn:hover{border-color:var(--ink)}
.cat-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat-btn .count{opacity:.5;margin-left:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gal-tile{aspect-ratio:4/5;position:relative;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;display:block;background:#3a2c1f}
.gal-tile:nth-child(3n+2){aspect-ratio:4/3;align-self:start}
.gal-tile:nth-child(5n){aspect-ratio:1/1}
.gal-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gal-tile:hover img{transform:scale(1.05)}
.gal-tile-placeholder{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gal-tile:hover .gal-tile-placeholder{transform:scale(1.05)}
.gal-tile-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px;color:#f4f1ec;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.gal-tile:hover .gal-tile-info{transform:translateY(0)}
.gal-tile-info h4{font-family:'Fraunces',serif;font-size:18px;font-style:italic;margin-bottom:4px}
.gal-tile-info span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

/* gallery detail (single) */
.detail-page{padding:140px 40px 80px}
.detail-header{margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.detail-header h1{font-size:clamp(36px,6vw,84px);font-style:italic;line-height:.95;margin-bottom:16px}
.detail-header p{color:var(--ink-soft);max-width:60ch;line-height:1.7}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.detail-grid img{width:100%;height:auto;display:block}
.detail-grid figure:nth-child(3n){grid-column:span 2}
.detail-grid figure{margin:0}
.detail-grid figcaption{margin-top:10px;font-family:'Fraunces',serif;font-size:14px;font-style:italic;color:var(--muted);line-height:1.4}

/* placeholder gradient backgrounds */
.bg-1{background:linear-gradient(135deg,#5a3a2a,#1a1008)}
.bg-2{background:linear-gradient(165deg,#3a2a4a,#150a1f)}
.bg-3{background:linear-gradient(125deg,#7a5a3a,#2a1a10)}
.bg-4{background:linear-gradient(195deg,#2a3a4a,#0a1218)}
.bg-5{background:linear-gradient(155deg,#6a4a5a,#1a0f15)}
.bg-6{background:linear-gradient(115deg,#5a5a4a,#1a1810)}
.bg-7{background:linear-gradient(175deg,#4a3a2a,#15100a)}
.bg-8{background:linear-gradient(145deg,#3a4a3a,#0f150f)}
.bg-9{background:linear-gradient(135deg,#7a4a3a,#2a1510)}

/* ============ SERVICES ============ */
.services-page{padding:140px 40px 80px}
.services-hero{margin-bottom:100px}
.services-hero .label{color:var(--accent);margin-bottom:16px;display:block}
.services-hero h1{font-size:clamp(42px,6.8vw,96px);font-style:italic;letter-spacing:-.03em;line-height:.95;max-width:14ch}
.services-hero h1 em{color:var(--muted);font-style:normal}
.service-list{border-top:1px solid var(--line)}
.service-row{
  display:grid;grid-template-columns:80px 1fr 2fr 200px;gap:40px;padding:40px 0;
  border-bottom:1px solid var(--line);align-items:start;transition:background .3s;
}
.service-row:hover{background:rgba(58,40,28,.03)}
.service-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);padding-top:6px}
.service-name{font-family:'Fraunces',serif;font-size:24px;font-style:italic;line-height:1.05}
.service-desc{color:var(--ink-soft);font-size:15px;line-height:1.7}
.service-price{text-align:right;font-family:'Fraunces',serif;font-size:20px;padding-top:6px}
.service-price small{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ============ ORDERS ============ */
.orders-page{padding:140px 40px 80px}
.orders-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:120px}
.orders-grid h1{font-size:clamp(42px,6.8vw,90px);font-style:italic;line-height:.95;letter-spacing:-.03em}
.orders-grid .intro{color:var(--ink-soft);font-size:17px;line-height:1.7;margin-bottom:32px}
.steps{counter-reset:step}
.step{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:48px 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step-num{font-family:'Fraunces',serif;font-size:60px;font-style:italic;line-height:.9;color:var(--accent)}
.step-content h3{font-family:'Fraunces',serif;font-size:24px;font-style:italic;margin-bottom:12px}
.step-content p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:55ch}
.step-meta{margin-top:16px;display:flex;gap:24px;color:var(--muted);flex-wrap:wrap}

/* ============ CLIENT LOGIN ============ */
.client-page{min-height:100vh;background:var(--ink);color:#f4f1ec;padding:60px 40px;display:flex;align-items:center;justify-content:center}
.client-lock{max-width:480px;width:100%;text-align:center}
.client-lock .badge{display:inline-block;background:rgba(184,68,44,.15);color:#e89784;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;margin-bottom:32px}
.client-lock h1{font-family:'Fraunces',serif;font-size:48px;font-style:italic;margin-bottom:16px;line-height:1}
.client-lock p{color:#a8a39a;margin-bottom:40px;font-size:15px;line-height:1.6}
.client-lock .photographer{font-family:'Fraunces',serif;font-style:italic;color:#fff}
.pwd-input{
  width:100%;padding:18px 20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.2em;text-align:center;
  margin-bottom:16px;outline:none;transition:border-color .25s;
}
.pwd-input:focus{border-color:var(--accent)}
.pwd-input::placeholder{letter-spacing:.1em;color:#5a564f}
.pwd-submit{
  width:100%;padding:16px;background:var(--accent);color:#fff;border:none;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.pwd-submit:hover{background:#a13a26}
.pwd-error{background:rgba(184,68,44,.2);color:#e89784;padding:12px;border-radius:6px;margin-bottom:16px;font-size:13px}
.pwd-meta{margin-top:32px;color:#5a564f;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.lock-icon{
  width:56px;height:56px;margin:0 auto 24px;
  border:1px solid rgba(232,151,132,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#e89784;
}

/* ============ CLIENT GALLERY (after login) ============ */
.client-gallery-page{background:var(--ink);color:#f4f1ec;min-height:100vh}
.client-gallery-page .site-nav{mix-blend-mode:normal;background:rgba(26,24,22,.8);backdrop-filter:blur(8px)}
.client-gallery-header{padding:140px 40px 60px;border-bottom:1px solid rgba(255,255,255,.08)}
.client-gallery-header h1{font-family:'Fraunces',serif;font-size:clamp(36px,6vw,84px);font-style:italic;line-height:.95;margin-bottom:24px}
.client-gallery-header .meta{display:flex;gap:32px;color:#8a847b;flex-wrap:wrap}
.client-grid{padding:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.client-grid figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#2a2520}
.client-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.client-actions{padding:40px;display:flex;gap:16px;align-items:center;border-top:1px solid rgba(255,255,255,.08)}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .site-nav{padding:20px}
  .nav-links{gap:16px}
  .hero{grid-template-columns:1fr;padding:120px 20px 40px}
  .hero-meta{position:static;text-align:left;margin-bottom:20px}
  .hero-bottom{grid-template-columns:1fr 1fr;padding:0 20px 40px}
  .featured,.about-strip,.gallery-page,.services-page,.orders-page{padding:80px 20px}
  .featured-grid{grid-template-columns:1fr;gap:20px}
  .feat-1,.feat-2,.feat-3,.feat-4{grid-column:1/-1;margin-top:0}
  .about-strip{grid-template-columns:1fr;gap:40px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .service-row{grid-template-columns:40px 1fr;gap:16px}
  .service-desc,.service-price{grid-column:2;text-align:left;padding-top:0}
  .orders-grid{grid-template-columns:1fr;gap:40px}
  .step{grid-template-columns:60px 1fr;gap:16px}
  .step-num{font-size:36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .gallery-header{grid-template-columns:1fr}
}