/*
Theme Name: Atelier Lumen
Description: Cinematic editorial photography portfolio theme — dark charcoal, ivory, antique brass. Marcellus + Manrope.
Version: 1.0
*/

:root{
  --ink:#121110;
  --coal:#1a1917;
  --coal-2:#211f1c;
  --paper:#f4efe4;
  --ivory:#ece5d6;
  --brass:#b08d57;
  --brass-soft:#c9a877;
  --muted:#9a9184;
  --line:rgba(236,229,214,.14);
  --serif:'Marcellus', Georgia, serif;
  --sans:'Manrope', -apple-system, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;color:var(--paper)}
.eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass);font-weight:500;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);display:inline-block}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:26px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .35s ease,padding .35s ease,border-color .35s;
  border-bottom:1px solid transparent;
}
body.admin-bar .site-header{top:32px}
.site-header.scrolled{
  background:rgba(18,17,16,.92);
  backdrop-filter:blur(12px);
  padding:16px 5vw;
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif);font-size:21px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.brand em{color:var(--brass);font-style:normal}
.main-nav ul{display:flex;gap:38px;list-style:none;align-items:center}
.main-nav a{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  font-weight:500;transition:color .25s;position:relative;padding:6px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .3s;
}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--paper)}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{width:100%}
.nav-cta{
  border:1px solid var(--brass);color:var(--brass)!important;padding:10px 22px!important;
  transition:background .3s,color .3s!important;
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--brass);color:var(--ink)!important}
.menu-toggle{display:none;background:none;border:0;color:var(--paper);font-size:24px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.92)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,16,.45) 0%,rgba(18,17,16,.1) 40%,rgba(18,17,16,.88) 100%);
}
.hero-inner{position:relative;z-index:2;padding:0 5vw 11vh;max-width:1100px}
.hero h1{font-size:clamp(44px,7.2vw,104px);letter-spacing:.01em;margin:26px 0 22px}
.hero p{max-width:520px;color:var(--ivory);opacity:.85;font-size:17px}
.hero-actions{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap}
.scroll-hint{
  position:absolute;right:5vw;bottom:11vh;z-index:2;writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:15px 36px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;border:1px solid var(--brass);cursor:pointer;transition:all .3s;text-align:center;
}
.btn-solid{background:var(--brass);color:var(--ink)}
.btn-solid:hover{background:var(--brass-soft);border-color:var(--brass-soft)}
.btn-ghost{color:var(--paper);border-color:rgba(236,229,214,.35)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- sections ---------- */
.section{padding:120px 5vw}
.section-head{max-width:760px;margin-bottom:70px}
.section-head h2{font-size:clamp(32px,4.4vw,58px);margin-top:22px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .eyebrow::before{display:none}

/* selected work */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.work-item{position:relative;overflow:hidden;background:var(--coal)}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(.94)}
.work-item:hover img{transform:scale(1.05);filter:saturate(1.05)}
.work-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 28px;
  background:linear-gradient(180deg,transparent,rgba(18,17,16,.85));
  display:flex;justify-content:space-between;align-items:baseline;
  opacity:0;transform:translateY(12px);transition:all .45s ease;
}
.work-item:hover figcaption{opacity:1;transform:none}
.work-item figcaption h3{font-size:20px}
.work-item figcaption span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.wi-a{grid-column:1/8;aspect-ratio:16/11}
.wi-b{grid-column:8/13;aspect-ratio:3/3.7;margin-top:110px}
.wi-c{grid-column:1/6;aspect-ratio:3/3.7;margin-top:-40px}
.wi-d{grid-column:6/13;aspect-ratio:16/10}

/* about */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-split .about-img{position:relative}
.about-split .about-img::after{
  content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--brass);z-index:-1;opacity:.5;
}
.about-split h2{font-size:clamp(30px,3.6vw,48px);margin:20px 0 24px}
.about-split p{color:var(--muted);margin-bottom:18px;max-width:480px}
.about-sig{font-family:var(--serif);font-size:26px;color:var(--brass);margin-top:30px}

/* services strip */
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.service{
  padding:64px 44px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .35s;position:relative;
}
.service:last-child{border-right:0}
.service:hover{background:var(--coal)}
.service .num{font-family:var(--serif);font-size:15px;color:var(--brass);letter-spacing:.2em}
.service h3{font-size:26px;margin:18px 0 14px}
.service p{color:var(--muted);font-size:15px}
.service .more{display:inline-block;margin-top:26px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:600}

/* CTA band */
.cta-band{
  padding:130px 5vw;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(rgba(18,17,16,.86),rgba(18,17,16,.86)),var(--coal);
}
.cta-band h2{font-size:clamp(34px,4.6vw,62px);max-width:820px;margin:24px auto 40px}
.cta-band .eyebrow{justify-content:center}
.cta-band .eyebrow::before{display:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:80px 5vw 40px;background:var(--coal)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
.site-footer .brand{display:block;margin-bottom:18px}
.site-footer p{color:var(--muted);font-size:14px;max-width:320px}
.site-footer h4{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-family:var(--sans);font-weight:600;margin-bottom:20px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:12px}
.site-footer ul a{color:var(--muted);font-size:14px;transition:color .25s}
.site-footer ul a:hover{color:var(--paper)}
.footer-bottom{border-top:1px solid var(--line);padding-top:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom small{color:var(--muted);font-size:12px;letter-spacing:.08em}

/* ---------- inner pages ---------- */
.page-hero{padding:190px 5vw 80px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(40px,6vw,80px);margin-top:24px}
.page-hero p{color:var(--muted);max-width:560px;margin-top:18px;font-size:17px}
.page-body{padding:90px 5vw;max-width:1180px;margin:0 auto}
.page-body.narrow{max-width:780px}

/* pricing (block-editor content) */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:20px 0 50px}
.price-card{border:1px solid var(--line);padding:52px 40px;background:var(--coal);display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.price-card:hover{border-color:var(--brass);transform:translateY(-6px)}
.price-card.featured{border-color:var(--brass);position:relative}
.price-card.featured::before{
  content:"MOST BOOKED";position:absolute;top:-11px;left:40px;background:var(--brass);color:var(--ink);
  font-size:10px;letter-spacing:.26em;font-weight:700;padding:5px 14px;font-family:var(--sans);
}
.price-card h3{font-size:26px;margin-bottom:8px}
.price-card .from{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.price-card .amount{font-family:var(--serif);font-size:46px;color:var(--brass);margin:10px 0 26px}
.price-card ul{list-style:none;margin-bottom:34px;flex:1}
.price-card li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:14.5px;display:flex;gap:12px}
.price-card li::before{content:"—";color:var(--brass);flex-shrink:0}
.price-note{color:var(--muted);font-size:14px;font-style:italic;text-align:center;margin-top:10px}
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:34px 0}
.faq-item h3{font-size:21px;margin-bottom:12px}
.faq-item p{color:var(--muted);max-width:680px;font-size:15px}

/* inquiry form */
.inquiry-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:90px;align-items:start}
.inquiry-side h2{font-size:clamp(28px,3.4vw,44px);margin:20px 0 24px}
.inquiry-side p{color:var(--muted);font-size:15.5px}
.inquiry-meta{margin-top:44px;border-top:1px solid var(--line)}
.inquiry-meta div{padding:20px 0;border-bottom:1px solid var(--line)}
.inquiry-meta strong{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:6px}
.inquiry-meta span{color:var(--ivory);font-size:15px}
.inquiry-form{background:var(--coal);border:1px solid var(--line);padding:54px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);
  padding:14px 16px;font-family:var(--sans);font-size:15px;transition:border-color .25s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.form-alert{padding:18px 22px;margin-bottom:28px;font-size:14px;letter-spacing:.04em}
.form-alert.ok{background:rgba(176,141,87,.14);border:1px solid var(--brass);color:var(--brass-soft)}
.form-alert.err{background:rgba(160,60,50,.16);border:1px solid #a03c32;color:#e0a39c}

/* client gallery */
.gallery-head{padding:190px 5vw 60px;max-width:1180px;margin:0 auto}
.gallery-head h1{font-size:clamp(36px,5vw,64px);margin-top:22px}
.gallery-head .meta{color:var(--muted);margin-top:14px;font-size:15px}
.gallery-toolbar{
  max-width:1180px;margin:0 auto;padding:0 5vw 40px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);
}
.gallery-toolbar p{color:var(--muted);font-size:14px}
.gallery-grid{max-width:1180px;margin:0 auto;padding:60px 5vw 110px;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.gallery-grid figure{position:relative;overflow:hidden;background:var(--coal)}
.gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.gallery-grid figure:hover img{transform:scale(1.04)}
.gallery-grid .dl{
  position:absolute;right:14px;bottom:14px;background:rgba(18,17,16,.82);border:1px solid var(--brass);
  color:var(--brass);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  padding:10px 16px;transition:all .3s;
}
.gallery-grid .dl:hover{background:var(--brass);color:var(--ink)}
.password-gate{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:160px 5vw 80px}
.password-card{max-width:460px;width:100%;background:var(--coal);border:1px solid var(--line);padding:60px 50px;text-align:center}
.password-card .lock{font-size:30px;color:var(--brass);margin-bottom:22px}
.password-card h1{font-size:28px;margin-bottom:14px}
.password-card p{color:var(--muted);font-size:14.5px;margin-bottom:30px}
.password-card form p{margin:0}
.password-card input[type=password]{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);
  padding:14px 16px;font-size:15px;margin-bottom:16px;text-align:center;letter-spacing:.1em;
}
.password-card input[type=password]:focus{outline:none;border-color:var(--brass)}
.password-card input[type=submit]{width:100%;border:0;cursor:pointer}

/* generic content typography */
.content h2{font-size:clamp(26px,3vw,38px);margin:44px 0 18px}
.content h3{font-size:22px;margin:34px 0 14px}
.content p{color:var(--muted);margin-bottom:18px;max-width:680px}
.content ul{color:var(--muted);margin:0 0 18px 20px}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .work-grid .work-item{grid-column:1/13!important;margin-top:0!important;aspect-ratio:4/3!important}
  .about-split{grid-template-columns:1fr;gap:50px}
  .services{grid-template-columns:1fr}
  .service{border-right:0}
  .price-grid{grid-template-columns:1fr}
  .inquiry-wrap{grid-template-columns:1fr;gap:60px}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .gallery-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .menu-toggle{display:block}
  .main-nav{
    position:fixed;inset:0;background:rgba(18,17,16,.98);display:none;
    align-items:center;justify-content:center;z-index:99;
  }
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;gap:30px}
  .main-nav a{font-size:15px}
  .form-row{grid-template-columns:1fr}
  .inquiry-form{padding:38px 26px}
  .section{padding:80px 5vw}
  .scroll-hint{display:none}
}