/* ============================================================
   Neha & Anuj — wedding gallery
   Clean, editorial, timeless. No framework.
   ============================================================ */

:root {
  --bg: #faf8f4;
  --bg-soft: #f2ede5;
  --ink: #2c2a26;
  --ink-soft: #6b655c;
  --line: #e4ddd2;
  --accent: #9a8763;      /* warm gold-taupe */
  --accent-ink: #7d6c4d;
  --white: #ffffff;
  --shadow: 0 18px 50px -20px rgba(44, 42, 38, 0.35);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1500px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.serif { font-family: var(--serif); }

/* ---------- Reusable bits ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--accent-ink);
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 4rem); }

/* ============================================================
   PASSWORD GATE
   ============================================================ */
#gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  background-size: cover; background-position: center;
  transition: opacity .6s ease;
}
#gate.hidden { opacity: 0; pointer-events: none; }
#gate::before { content: ""; position: absolute; inset: 0; background: rgba(250,248,244,.78); backdrop-filter: blur(3px); }
.gate-card {
  position: relative; text-align: center; padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 420px; width: calc(100% - 2.4rem);
}
.gate-card .eyebrow { display: block; margin-bottom: 1.1rem; }
.gate-card h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 8vw, 3.8rem); margin: 0 0 .2rem; line-height: 1; }
.gate-card p { color: var(--ink-soft); margin: .4rem 0 2rem; font-size: .95rem; }
.gate-form { display: flex; flex-direction: column; gap: .8rem; }
.gate-form input {
  font-family: var(--sans); font-size: 1rem; text-align: center; letter-spacing: .1em;
  padding: .95rem 1rem; border: 1px solid var(--line); background: var(--white);
  border-radius: 2px; color: var(--ink); outline: none; transition: border-color .2s;
}
.gate-form input:focus { border-color: var(--accent); }
.gate-form button {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
  padding: .95rem 1rem; border: none; background: var(--ink); color: var(--bg);
  border-radius: 2px; cursor: pointer; transition: background .2s;
}
.gate-form button:hover { background: var(--accent-ink); }
.gate-error { color: #a6483c; font-size: .82rem; min-height: 1.1em; margin-top: .3rem; opacity: 0; transition: opacity .2s; }
.gate-error.show { opacity: 1; }

body.locked { overflow: hidden; }
.gated { opacity: 0; transition: opacity .8s ease; }
.gated.revealed { opacity: 1; }

/* ============================================================
   HERO / COVER
   ============================================================ */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,28,25,.28) 0%, rgba(30,28,25,.15) 40%, rgba(30,28,25,.45) 100%); }
.hero-inner { position: relative; z-index: 2; padding: 1.5rem; }
.hero .eyebrow { color: rgba(255,255,255,.9); }
.hero h1 {
  font-family: var(--serif); font-weight: 500; margin: .6rem 0 .4rem;
  font-size: clamp(3.4rem, 12vw, 8rem); line-height: .95; letter-spacing: .01em;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero h1 .amp { font-style: italic; font-weight: 400; display: inline-block; margin: 0 .12em; opacity: .92; }
.hero .meta { font-size: clamp(.85rem, 2.4vw, 1.05rem); letter-spacing: .3em; text-transform: uppercase; font-weight: 300; }
.scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.85); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; }
.scroll-cue span { display: block; width: 1px; height: 34px; margin: .6rem auto 0; background: rgba(255,255,255,.6); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ============================================================
   SECTION INDEX (landing)
   ============================================================ */
.intro { text-align: center; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem,5vw,3.5rem); }
.intro h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem,5vw,3rem); margin: .6rem 0 1rem; }
.intro p { max-width: 620px; margin: 0 auto; color: var(--ink-soft); font-size: 1.02rem; }
.rule { width: 60px; height: 1px; background: var(--accent); margin: 1.6rem auto; opacity: .7; }

.sections-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem); padding-bottom: clamp(4rem, 9vw, 7rem);
}
.section-card { position: relative; display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 4/5; background: var(--bg-soft); box-shadow: var(--shadow); }
.section-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.section-card:hover img { transform: scale(1.05); }
.section-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,16,0) 35%, rgba(20,18,16,.6) 100%); }
.section-card .label { position: absolute; z-index:2; left: 0; right: 0; bottom: 1.6rem; text-align: center; color: var(--white); }
.section-card .label .t { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; }
.section-card .label .c { display: block; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; opacity: .85; margin-top: .5rem; }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-head { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem,4vw,2.5rem); }
.gallery-head .eyebrow { display:block; margin-bottom:.8rem; }
.gallery-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem,7vw,4.5rem); margin: 0; line-height: 1; }
.gallery-head .sub { color: var(--ink-soft); margin-top: .6rem; letter-spacing:.04em; }

.masonry { display: flex; flex-direction: column; gap: 12px; padding-bottom: 5rem; }
.mrow { display: flex; gap: 12px; }
.tile { flex: 0 0 auto; position: relative; cursor: zoom-in; background: var(--bg-soft); overflow: hidden; border-radius: 2px; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .6s ease; opacity: 0; }
.tile img.loaded { opacity: 1; }
.tile:hover img { transform: scale(1.035); }
.tile::after { content:""; position:absolute; inset:0; background: rgba(44,42,38,0); transition: background .3s; }
.tile:hover::after { background: rgba(44,42,38,.06); }

/* ---------- Top bar (gallery) ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(250,248,244,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .row { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.topbar a.home { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.topbar .nav { display: flex; gap: clamp(.8rem,2vw,1.8rem); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.topbar .nav a.active { color: var(--accent-ink); }
.topbar .nav a:hover { color: var(--ink); }
@media (max-width: 640px){ .topbar .nav { display:none; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lightbox { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; background: rgba(24,22,20,.94); }
#lightbox.open { display: flex; }
#lightbox .lb-stage { position: relative; max-width: 94vw; max-height: 88vh; display:flex; align-items:center; justify-content:center; }
#lightbox img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); opacity: 0; transition: opacity .25s ease; }
#lightbox img.ready { opacity: 1; }
.lb-btn { position: absolute; z-index: 2; background: none; border: none; color: rgba(255,255,255,.8); cursor: pointer; transition: color .2s, background .2s; }
.lb-btn:hover { color: #fff; }
.lb-close { top: 1.1rem; right: 1.3rem; font-size: 1.8rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 2.6rem; padding: 1rem; user-select: none; }
.lb-prev { left: .5rem; } .lb-next { right: .5rem; }
@media (max-width:640px){ .lb-prev,.lb-next{ font-size:2rem; padding:.4rem;} }
.lb-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem,3vw,2rem); color: rgba(255,255,255,.85); font-size: .78rem; letter-spacing: .12em; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.lb-count { text-transform: uppercase; letter-spacing:.2em; }
.lb-download { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: .55rem 1.1rem; border-radius: 2px; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; transition: background .2s, border-color .2s; }
.lb-download:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { text-align: center; padding: clamp(3rem,7vw,5rem) 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.site-footer .names { font-family: var(--serif); font-size: 2rem; font-weight: 500; color: var(--ink); }
.site-footer .amp { font-style: italic; }
.site-footer p { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin: .8rem 0 0; }
.back-to-top { display:inline-block; margin-top:1.4rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); border-bottom:1px solid var(--line); padding-bottom:2px; }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.fade-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } .fade-up{opacity:1;transform:none} }