/* ============================================================
   CHATZOS YERUSHALAYIM — "The Gateway to the Geula"
   Cinematic midnight world: deep indigo night + candlelight gold
   ============================================================ */

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

:root{
  /* night palette */
  --night-0:#070912;            /* deepest void */
  --night-1:#0b0f1d;            /* base bg */
  --night-2:#111728;            /* panel */
  --night-3:#19213a;            /* elevated */
  --hair: rgba(214,178,94,0.16);/* gold hairline */
  --hair-soft: rgba(255,255,255,0.07);

  /* ink */
  --ink:#f3efe4;               /* warm white */
  --muted:#9aa3bd;             /* blue-grey */
  --muted-2:#737da0;

  /* gold candlelight */
  --gold:#e3b85c;
  --gold-bright:#f3d68a;
  --gold-deep:#b4862f;
  --gold-glow: rgba(227,184,92,0.45);

  /* horizon / mystical glow */
  --glow-indigo: rgba(86,98,196,0.30);
  --glow-violet: rgba(126,98,196,0.22);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--night-1);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--night-0)}

/* ---- type scale ---- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.8em;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
  opacity:.8;
}
.eyebrow.center::after{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.8;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.01em}
.display{
  font-size:clamp(2.7rem, 6.6vw, 6rem);
  font-weight:300;
  line-height:1.02;
}
.h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:400}
.h3{font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:500}
.lede{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.2vw,1.9rem);
  font-weight:300;
  line-height:1.4;
  color:#e7e2d4;
}
.body{font-size:1.05rem;color:var(--muted);line-height:1.75;max-width:62ch}
.gold{color:var(--gold)}
.italic{font-style:italic}

/* glowing gold word */
.lum{
  color:var(--gold-bright);
  text-shadow:0 0 28px var(--gold-glow), 0 0 8px rgba(243,214,138,.35);
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.pad{padding-block:clamp(90px,12vw,170px)}

/* ---- buttons ---- */
.btn{
  --bg:var(--gold);
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.9em;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#241a06;
  box-shadow:0 0 0 0 var(--gold-glow), 0 14px 40px -12px rgba(227,184,92,.5);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 0 38px -2px var(--gold-glow),0 20px 50px -14px rgba(227,184,92,.6)}
.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--ink);
  border:1px solid var(--hair);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-3px)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* Fix 3: Allow long button labels to wrap on very small screens */
@media(max-width:480px){
  .btn{white-space:normal;text-align:center}
}

/* ---- reveal animation ---- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
/* failsafe: throttled timeline (rAF frozen) — show everything instantly */
html.no-anim [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* small caps detail line */
.kicker{
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted-2);
}