/* EmanPix Photography — main.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

:root{
  --white:#fff;
  --off-white:#f9f9f9;
  --black:#111;
  --gray:#6b6b6b;
  --light:#e5e5e5;
  --accent:#C8A96E;
  --accent-dark:#b09060;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',sans-serif;
  --nav-h:68px;
}

body{font-family:var(--sans);font-size:16px;line-height:1.8;color:var(--black);background:var(--white)}

/* ── Typography ── */
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.15;letter-spacing:.02em}
h1{font-size:clamp(32px,5vw,56px)}
h2{font-size:clamp(24px,3.5vw,38px)}
h3{font-size:clamp(18px,2.5vw,26px)}
p{margin-bottom:1em}
a{color:inherit;text-decoration:none}

/* ── Buttons ── */
.btn{
  display:inline-block;padding:12px 32px;
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--white);background:var(--accent);
  transition:background .25s;cursor:pointer
}
.btn:hover{background:var(--accent-dark)}

/* ── Navbar ── */
#navbar{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:rgba(255,255,255,.97);
  z-index:900;transition:box-shadow .3s
}
#navbar.scrolled{box-shadow:0 1px 12px rgba(0,0,0,.06)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;padding:0 48px;max-width:1600px;margin:0 auto
}
.brand{font-family:var(--serif);font-size:24px;font-weight:300;letter-spacing:.12em;color:var(--black)}
.nav-links{display:flex;list-style:none;gap:40px;align-items:center}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--black);transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.has-dropdown{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:0;min-width:140px;
  background:var(--white);border:1px solid var(--light);
  list-style:none;padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .25s;z-index:100
}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown li a{display:block;padding:10px 20px;font-size:12px;letter-spacing:.1em;color:var(--gray)}
.dropdown li a:hover{color:var(--accent)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;position:relative;z-index:99999}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--black);transition:all .3s}
body.nav-open .hamburger span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
body.nav-open .hamburger span:nth-child(2){opacity:0}
body.nav-open .hamburger span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* ── Homepage — transparent nav ── */
main{padding-top:var(--nav-h)}
.hero-page main{padding-top:0}
.hero-page #navbar{background:transparent;transition:background .4s,box-shadow .3s}
.hero-page #navbar.scrolled{background:rgba(255,255,255,.97)}
.hero-page #navbar .brand,
.hero-page #navbar .nav-links a{color:var(--white)}
.hero-page #navbar .hamburger span{background:var(--white)}
.hero-page #navbar.scrolled .brand,
.hero-page #navbar.scrolled .nav-links a{color:var(--black)}
.hero-page #navbar.scrolled .hamburger span{background:var(--black)}
.hero-page .dropdown{background:var(--white)}
.hero-page #navbar.scrolled .dropdown li a{color:var(--gray)}

/* ── Hero Splash ── */


/* When dropdown is open on hero page, solidify the navbar */
body.nav-open #navbar{background:rgba(255,255,255,.97)!important}
body.nav-open #navbar .brand{color:var(--black)!important}
body.nav-open .hamburger span{background:var(--black)!important}

.hero-splash{
  position:relative;height:100vh;min-height:600px;
  overflow:hidden;display:flex;align-items:center;justify-content:center
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 30%;
  transform:scale(1.04);transition:transform 8s ease-out;
  will-change: transform
}
.hero-splash.loaded .hero-bg{transform:scale(1)}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,.55) 100%)
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  color:var(--white);padding:0 24px;
  animation:heroFadeUp .9s cubic-bezier(.22,1,.36,1) both
}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.25em;text-transform:uppercase;
  opacity:.75;margin-bottom:20px
}
.hero-wordmark{
  font-family:var(--serif);font-size:clamp(64px,10vw,140px);
  font-weight:300;letter-spacing:.18em;
  line-height:1;margin-bottom:16px;color:var(--white)
}
.hero-locale{
  font-family:var(--serif);font-size:clamp(16px,2vw,22px);
  font-weight:300;font-style:italic;letter-spacing:.06em;
  opacity:.8;margin-bottom:40px
}
.hero-btn{
  background:transparent;border:1px solid rgba(255,255,255,.6);
  color:var(--white);letter-spacing:.2em;
  transition:background .25s,border-color .25s
}
.hero-btn:hover{background:rgba(255,255,255,.15);border-color:var(--white)}
.hero-scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;z-index:2
}
.scroll-line{
  display:block;width:1px;height:52px;
  background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);
  animation:scrollPulse 2s ease-in-out infinite
}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(.6) translateY(-10px)}50%{opacity:1;transform:scaleY(1) translateY(0)}}

/* ── Editorial Category Grid ── */
.categories{padding:3px 0 0}
.cat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:85vh 85vh;
  gap:3px
}
.cat-col1{grid-column:1;grid-row:1}
.cat-col2-top{grid-column:2;grid-row:1}
.cat-col2-bot{grid-column:1;grid-row:2}
.cat-col3{grid-column:2;grid-row:2}
.cat-item{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-size:cover;background-position:center;cursor:pointer;
  text-decoration:none;transition:background-size .6s ease
}
.cat-item:hover{background-size:108%}
.cat-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.38);
  transition:background .4s;
  pointer-events:none
}
.cat-item:hover .cat-overlay{background:rgba(0,0,0,.55)}
.cat-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  color:var(--white);text-align:center
}
.cat-name{
  font-family:var(--serif);font-size:clamp(22px,2.4vw,40px);
  font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  line-height:1
}
.cat-cta{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--accent);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s
}
.cat-item:hover .cat-cta{opacity:1;transform:translateY(0)}
/* ── CTA Strip ── */
.cta-strip{
  background:#1a1a1a;color:var(--white);
  text-align:center;padding:88px 24px
}
.cta-eyebrow{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px
}
.cta-heading{
  font-family:var(--serif);font-size:clamp(26px,4vw,48px);
  font-weight:300;letter-spacing:.04em;line-height:1.25;
  color:var(--white);margin-bottom:40px
}
.cta-strip .btn{
  background:transparent;border:1px solid var(--accent);
  color:var(--accent);letter-spacing:.18em;
  transition:background .25s,color .25s
}
.cta-strip .btn:hover{background:var(--accent);color:var(--white)}

/* ── Page header ── */
.page-header{text-align:center;padding:64px 24px 48px}
.page-header h1{margin-bottom:16px}
.accent-line{width:36px;height:1px;background:var(--accent);margin:0 auto 16px}
.page-header .count,.page-header .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);text-align:center}

/* ── About ── */
.about-section{padding:0 48px 96px;max-width:1100px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-img img{width:100%;display:block;object-fit:cover}
.about-text h2{margin-bottom:24px}
.about-text p{color:var(--gray);line-height:1.9}
.about-text .btn{margin-top:32px}

/* ── Contact ── */
.contact-section{padding:0 48px 48px;display:flex;justify-content:center}
.contact-links{display:flex;flex-direction:column;gap:32px;max-width:480px;width:100%}
.contact-item{
  display:flex;align-items:center;gap:20px;
  font-size:15px;color:var(--black);
  border-bottom:1px solid var(--light);padding-bottom:32px;
  transition:color .2s;cursor:pointer
}
.contact-item:last-child{border-bottom:none;padding-bottom:0}
.contact-item:hover{color:var(--accent)}
.contact-item svg{flex-shrink:0;opacity:.7}

/* ── Footer ── */
footer{background:var(--off-white);border-top:1px solid var(--light);padding:56px 48px 32px}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1200px;margin:0 auto 40px}
.footer-col .brand{font-family:var(--serif);font-size:20px;font-weight:300;letter-spacing:.1em;display:block;margin-bottom:12px}
.footer-col p{font-size:13px;color:var(--gray);line-height:1.7;margin:0}
.footer-col strong{display:block;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px;color:var(--black)}
.footer-col a{display:block;font-size:13px;color:var(--gray);margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{text-align:center;font-size:11px;letter-spacing:.1em;color:var(--gray);padding-top:24px;border-top:1px solid var(--light);max-width:1200px;margin:0 auto}

/* ── 404 ── */
.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;text-align:center}
.not-found h1{font-size:96px;font-family:var(--serif);font-weight:300;color:var(--light)}

/* ── Mobile ── */
@media(max-width:900px){
  .nav-inner{padding:0 24px}
  nav{transition:height .3s}
  .nav-links{
    display:none;
    flex-direction:column;justify-content:center;align-items:center;
    flex:1;gap:40px;padding:40px 0
  }
  .nav-links a{font-size:13px}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;border:none;background:none;padding:8px 0;display:none}
  .hamburger{display:flex}
  /* hero-page nav: hamburger lines are white when not scrolled */
  .hero-page #navbar:not(.scrolled) .hamburger span{background:var(--white)}
  /* Category grid → 2 col on mobile */
  .cat-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:50vw 50vw;
  }
  .cat-col1,.cat-col2-top,.cat-col2-bot,.cat-col3{
    grid-column:auto;grid-row:auto
  }
  

/* When dropdown is open on hero page, solidify the navbar */
body.nav-open #navbar{background:rgba(255,255,255,.97)!important}
body.nav-open #navbar .brand{color:var(--black)!important}
body.nav-open .hamburger span{background:var(--black)!important}

.hero-splash{height:100svh;min-height:500px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-section,.contact-section{padding:0 24px 64px}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  footer{padding:40px 24px 24px}
  .cta-strip{padding:64px 24px}
}
@media(max-width:480px){
  .cat-grid{grid-template-rows:52vw 52vw}
  .page-header{padding:48px 16px 32px}
  .hero-wordmark{letter-spacing:.1em}
}

/* ── Mobile Menu Overlay ── */
#mobile-menu{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:#fff;z-index:9999;
  flex-direction:column;align-items:center;
  gap:0;padding:12px 0;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  border-top:1px solid var(--light)
}
#mobile-menu.open{display:flex}
#menu-close{display:none}
#mobile-menu a{
  display:block;width:100%;text-align:center;
  padding:14px 24px;
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:#1a1a1a;text-decoration:none;transition:color .2s,background .2s
}
#mobile-menu a:hover,#mobile-menu a.active{color:var(--accent);background:var(--off-white)}



/* ── Featured Photo Strip ── */
.featured-strip{padding:3rem 1rem;background:#0a0a0a}
.featured-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:1400px;margin:0 auto}
.featured-strip__item{position:relative;overflow:hidden;border-radius:4px;display:block;text-decoration:none}
.featured-strip__item img{width:100%;height:320px;object-fit:cover;transition:transform .5s ease,filter .5s ease;display:block}
.featured-strip__item:hover img{transform:scale(1.05);filter:brightness(.75)}
.featured-strip__label{position:absolute;bottom:0;left:0;right:0;padding:1rem;color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .4s ease}
.featured-strip__item:hover .featured-strip__label{opacity:1}
@media(max-width:768px){.featured-strip__grid{grid-template-columns:repeat(2,1fr);gap:4px}.featured-strip__item img{height:200px}.featured-strip__label{opacity:1;font-size:.7rem;padding:.6rem}}
@media(max-width:480px){.featured-strip__item img{height:160px}}