/* ==========================================================================
   style.css — shared base styles (used on every page)
   Variables, reset, typography, nav, buttons, footer, ember canvas
   ========================================================================== */

:root{
  --ink:#120e0c;
  --char:#1b1613;
  --panel:#241d19;
  --ember:#b5451f;
  --ember-bright:#e0692f;
  --crimson:#6f1f1b;
  --gold:#c9a567;
  --gold-soft:#e3caa0;
  --parchment:#ede2ce;
  --parchment-dim:#c9bda3;
  --smoke:#3a332e;
  --shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'EB Garamond', serif;
  font-size:25px;
  line-height:1.65;
  overflow-x:hidden;
  text-align: justify;

}
::selection{background:var(--ember); color:var(--ink);}

h1,h2,h3,.display{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  color:var(--parchment);
  margin:0;
}
.eyebrow{
  font-family:'Cinzel', serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--gold-soft);
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ---------- global ember particle canvas ---------- */
#embers{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:5;
  mix-blend-mode:screen;
}

/* ---------- nav ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:linear-gradient(to bottom, rgba(10,8,7,.75), rgba(10,8,7,0));
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
header.site-nav.scrolled{
  background:rgba(15,11,10,.88);
  backdrop-filter: blur(10px);
  padding:14px 5vw;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border-bottom:1px solid rgba(201,165,103,.15);
}
.brand{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:600;
  font-size:26px;
  letter-spacing:.02em;
  color:var(--gold-soft);
  text-decoration:none;
}
nav.links{display:flex; align-items:center; gap:44px;}
nav.links a{
  font-family:'Cinzel', serif;
  
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--parchment-dim);
  position:relative;
  padding-bottom:4px;
}
nav.links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--ember-bright);
  transition:width .3s ease;
}
nav.links a:hover, nav.links a.active{color:var(--gold-soft);}
nav.links a:hover::after, nav.links a.active::after{width:100%;}
.nav-cta{
  font-family:'Cinzel', serif;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(120deg, #915b00, var(--gold));
  padding:11px 22px;
  border-radius:2px;
  box-shadow:0 8px 20px rgba(201,165,103,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,165,103,.3);}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{width:24px; height:1.5px; background:var(--parchment);}

/* ---------- generic section shell ---------- */
section{position:relative; z-index:2;}
.section-pad{padding:150px 6vw;}
.divider{
  width:100%; max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  color:var(--gold);
}
.divider .line{flex:1; height:1px; background:linear-gradient(to right, transparent, rgba(201,165,103,.4), transparent);}
.divider svg{width:20px; height:20px; opacity:.8;}

/* ---------- buttons (shared across pages) ---------- */
.btn{
  font-family:'Cinzel', serif;
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 34px;
  border-radius:2px;
  display:inline-block;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{
  color:var(--ink);
  background:linear-gradient(120deg, var(--gold-soft), var(--gold));
  box-shadow:0 10px 26px rgba(201,165,103,.2);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(201,165,103,.32);}
.btn-ghost{
  color:var(--parchment);
  border:1px solid rgba(237,226,206,.35);
  background:rgba(237,226,206,.04);
}
.btn-ghost:hover{border-color:var(--gold-soft); color:var(--gold-soft); transform:translateY(-2px);}

/* ---------- reveal-on-scroll utility ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:2;
  padding:60px 6vw 34px;
  background:var(--char);
  border-top:1px solid rgba(201,165,103,.15);
  text-align:center;
}
footer .brand{display:block; margin-bottom:14px; font-size:24px;}
footer .fine{
  font-family:'Cinzel', serif;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  opacity:.6;
}

/* ---------- shared responsive: mobile nav ---------- */
@media (max-width:900px){
  nav.links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:rgba(12,9,8,.98);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:32px; padding:40px;
    transform:translateX(100%);
    transition:transform .4s ease;
    border-left:1px solid rgba(201,165,103,.2);
  }
  nav.links.open{transform:translateX(0);}
  .burger{display:flex;}
}
@media (max-width:560px){
  .section-pad{padding:110px 6vw;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}