/* =========================================================
   OTHERSIDE. Shared design system
   Dark cinematic base. Desert = warm ember (Pantone Warm Red C,
   dimmed). Deluge = cool moss. Used across every page.
   ========================================================= */

:root{
  --bg:#0a0a09;
  --bg-raise:#111210;
  --paper:#ece5d8;
  --paper-dim:#a89f8f;
  --line:rgba(236,229,216,0.14);

  --ember:#ed443d;
  --ember-dim:#9f140f;
  --ember-glow:rgba(237,68,61,0.20);

  --moss:#6fae8a;
  --moss-dim:#2f6b52;
  --moss-glow:rgba(60,150,110,0.22);

  --gold:#c99a4c;

  --serif:'Fraunces', Georgia, serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* film grain, fixed overlay */
body::before{
  content:"";
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,9,0.82);
  backdrop-filter:blur(10px);
  padding:14px 32px;
  border-bottom:1px solid var(--line);
}
.nav .wordmark{display:block; text-decoration:none;}
.nav .wordmark img{height:22px; width:auto; display:block;}
.nav ul{list-style:none; display:flex; gap:30px; margin:0; padding:0;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;}
.nav ul li a{
  text-decoration:none; color:var(--paper-dim);
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
.nav ul li a:hover, .nav ul li a.active{color:var(--paper); border-color:var(--gold);}
.nav-toggle{display:none; background:none; border:none; color:var(--paper); font-size:1.5rem; cursor:pointer;}

@media (max-width:760px){
  .nav ul{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:99;
    background:rgba(10,10,9,0.98);
    flex-direction:column; align-items:center; justify-content:center; gap:28px;
    display:none; font-size:1rem;
  }
  .nav ul.open{display:flex;}
  .nav-toggle{display:block; z-index:101;}
}

/* ---------- shared page-header pattern (non-hero pages) ---------- */
.page-header{
  position:relative; overflow:hidden;
  padding:170px 24px 70px;
  text-align:center;
}
.page-header::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 550px at 26% 0%, var(--ember-glow), transparent 65%),
    radial-gradient(ellipse 900px 550px at 74% 0%, var(--moss-glow), transparent 65%);
}
.page-header > *{position:relative; z-index:1;}
.page-header .eyebrow{
  font-size:0.75rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.page-header h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 7vw, 5rem);
  letter-spacing:0.01em; margin:0 0 20px; line-height:1;
}
.page-header .sub{
  max-width:560px; margin:0 auto; font-size:1.02rem; color:var(--paper-dim); font-weight:300;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--serif); font-size:0.9rem; letter-spacing:0.08em;
  color:var(--paper); border:1px solid var(--line);
  padding:14px 32px; border-radius:2px;
  transition:border-color .25s, color .25s, background .25s;
}
.btn:hover{border-color:var(--gold); color:var(--gold);}
.btn.solid{
  background:var(--ember); border-color:var(--ember); color:#f4ece2;
}
.btn.solid:hover{background:var(--ember-dim); border-color:var(--ember-dim); color:#f4ece2;}

/* ---------- generic section rule/divider ---------- */
.rule{width:56px; height:1px; margin:34px auto 0; background:var(--gold); opacity:0.5;}

/* ---------- FOOTER ---------- */
footer{
  text-align:center; padding:90px 24px 60px;
  border-top:1px solid var(--line);
}
footer .wordmark{margin-bottom:26px;}
footer .wordmark img{height:26px; width:auto; margin:0 auto;}
footer p{max-width:480px; margin:0 auto 0.7em; font-size:0.85rem; font-style:italic; color:var(--paper-dim);}
footer .fine{margin-top:30px; font-size:0.7rem; letter-spacing:0.1em; color:#544f45; font-style:normal;}
footer .social{display:flex; justify-content:center; margin-top:30px;}
footer .social a.ig{
  display:inline-block; text-decoration:none;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--gold); letter-spacing:0.02em;
  border-bottom:1px solid var(--gold); padding-bottom:4px;
  transition:color .2s, border-color .2s, opacity .2s;
}
footer .social a.ig:hover{color:var(--paper); border-color:var(--paper); opacity:0.9;}