@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:    #070707;
  --deep:     #0e0e0e;
  --surface:  #161616;
  --gold:     #c8a96e;
  --gold-dim: #9e7d45;
  --gold-pale:#e8d5a8;
  --ivory:    #f0e8d4;
  --muted:    #7a736a;
  --line:     rgba(200,169,110,0.15);
  --ff-d:     'Cormorant Garamond', Georgia, serif;
  --ff-b:     'Outfit', sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--black);
  color: var(--ivory);
  font-family: var(--ff-b);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* CURSOR */
#cursor {
  position: fixed; top:0; left:0; z-index:9999;
  width:10px; height:10px; border-radius:50%;
  background: var(--gold); pointer-events:none;
  transform:translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: difference;
}
#cursor.grow { width:38px; height:38px; background:transparent; border:1px solid var(--gold); }

/* GRAIN */
body::after {
  content:''; position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.028;
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 3rem;
  background:var(--black);
  border-bottom:1px solid var(--line);
  transition: background .3s, border-color .3s;
}
nav.solid { background:var(--black); border-bottom:1px solid var(--line); }
.nav-logo {
  font-family:var(--ff-d); font-size:1.15rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-size:.68rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .2s; position:relative;
}
.nav-links a:hover, .nav-links a.active { color:var(--ivory); }
.nav-links a.active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--gold);
}

/* PAGE WRAP */
.page { min-height:100vh; }

/* SECTION BASICS */
section { padding:6rem 3rem; }
.label {
  font-size:.6rem; font-weight:500; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:2.5rem;
}
.label::after { content:''; width:40px; height:1px; background:var(--gold-dim); }

h2 {
  font-family:var(--ff-d); font-size:clamp(2.2rem,5vw,4rem);
  font-weight:300; line-height:1.08; color:var(--ivory);
}
h2 em { font-style:italic; color:var(--gold); }

/* FILM DIVIDER */
.divider {
  width:100%; height:1px;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 3px,var(--line) 3px,var(--line) 6px);
}

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-b); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; transition:all .2s; cursor:none;
  padding:1rem 2.2rem;
}
.btn-gold { background:var(--gold); color:var(--black); }
.btn-gold:hover { background:var(--ivory); }
.btn-outline { border:1px solid var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold); color:var(--black); }
.btn-ghost { border:1px solid var(--line); color:var(--muted); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* FOOTER */
footer {
  padding:1.75rem 3rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

/* REVEAL */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* RESPONSIVE */
/* ── HAMBURGER BUTTON ── */
.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:22px; height:16px;
  background:none; border:none;
  cursor:pointer; padding:0; z-index:1001;
}
.nav-toggle span {
  display:block; width:100%; height:1.5px;
  background:var(--ivory);
  transition:all .3s ease;
  transform-origin:center;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media(max-width:768px){
  nav { padding:1.2rem 1.5rem; }
  .nav-links { gap:1.5rem; }
  .nav-links a { font-size:.6rem; }
  section { padding:4.5rem 1.5rem; }
  footer { flex-direction:column; gap:.6rem; text-align:center; }
}
@media(max-width:480px){
  .nav-toggle { display:flex; }
  .nav-links {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; right:0;
    width:70vw; height:100vh;
    background:var(--black);
    border-left:1px solid var(--line);
    padding:6rem 2.5rem 3rem;
    gap:2.5rem;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:999;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links a { font-size:.75rem; letter-spacing:.18em; }
}

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes lineDrop { from{height:0} to{height:60px} }