/* =========================================================================
   NICHE RESTAURANT — Design System  ("Birth of Stars")
   One edit re-themes the site: change the tokens in :root.
   ========================================================================= */

:root{
  /* --- palette --- */
  --midnight:#0B1020;       /* primary background — night sky */
  --indigo:#141C36;         /* section panels / cards */
  --indigo-deep:#0E1428;    /* darker panel */
  --violet:#5B4B8A;         /* the room's LED uplighting */
  --cosmic:#2A3A6B;         /* mid-tone nebula */
  --gold:#C9A24B;           /* primary accent — candle gold */
  --gold-soft:#E6C982;      /* lighter accent / hover */
  --stone:#C9C4B8;          /* repurposed-granite tone */
  --mahogany:#5A2E22;       /* warm wood accent */
  --cream:#F4F1E9;          /* primary text — warm white */
  --muted:#A6AEC6;          /* secondary text on dark */
  --line:rgba(201,162,75,.20);  /* gold hairline */
  --line-soft:rgba(244,241,233,.10);

  /* --- type --- */
  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- scale / rhythm --- */
  --maxw:1240px;
  --gutter:clamp(1.1rem, 4vw, 2.75rem);
  --section-y:clamp(4.5rem, 9vw, 8rem);
  --radius:14px;
  --radius-sm:9px;

  /* --- effects --- */
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --shadow-soft:0 16px 40px -24px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* =========================== reset / base ================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Lenis guard — CSS smooth-scroll fights Lenis (effects-library §B rule 1) */
html.lenis,html.lenis body{ scroll-behavior:auto !important; }
body{
  font-family:var(--font-body);
  background:var(--midnight);
  color:var(--cream);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0 }
ul{ list-style:none; padding:0 }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px }

/* a soft cosmic gradient anchoring the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(91,75,138,.30), transparent 60%),
    radial-gradient(900px 620px at 6% 8%, rgba(42,58,107,.28), transparent 58%),
    radial-gradient(1200px 900px at 50% 118%, rgba(91,75,138,.16), transparent 60%),
    var(--midnight);
}
/* faint film grain for a candlelit, filmic feel */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================== typography ================================== */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.06; letter-spacing:.01em; }
h1{ font-size:clamp(2.7rem,6.4vw,5.6rem); font-weight:500; }
h2{ font-size:clamp(2rem,4.4vw,3.5rem); }
h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
p{ color:var(--muted) }
strong{ color:var(--cream); font-weight:600 }

.eyebrow{
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow.center::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.center{ justify-content:center }

.lede{ font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--stone); line-height:1.7; }
.serif-accent{ font-family:var(--font-display); font-style:italic; color:var(--gold-soft); }
.text-gradient{
  background:linear-gradient(100deg,var(--cream) 18%,var(--gold-soft) 55%,var(--gold) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================== layout ===================================== */
.wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto }
.wrap-wide{ width:min(100% - var(--gutter)*2, 1440px); margin-inline:auto }
.section{ padding-block:var(--section-y) }
.center{ text-align:center }
.section-head{ max-width:760px; margin-inline:auto; margin-bottom:clamp(2.4rem,5vw,4rem) }
.section-head .eyebrow{ margin-bottom:1.1rem }
.section-head p{ margin-top:1.1rem }
.divider{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* =========================== buttons ==================================== */
.btn{
  --pad-y:.95rem; --pad-x:1.8rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--pad-y) var(--pad-x); border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.84rem;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  overflow:hidden; isolation:isolate;
}
.btn-primary{
  color:#120D04;
  background:linear-gradient(100deg,var(--gold-soft),var(--gold));
  box-shadow:0 14px 34px -16px rgba(201,162,75,.7);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -16px rgba(201,162,75,.85) }
/* sheen sweep */
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:transform .6s var(--ease);
}
.btn-primary:hover::after{ transform:translateX(130%) skewX(-18deg) }
.btn-ghost{
  color:var(--cream); border:1px solid var(--line);
  background:rgba(244,241,233,.02);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-3px) }
.btn-lg{ --pad-y:1.1rem; --pad-x:2.3rem; font-size:.88rem }
.btn-block{ width:100% }
@media (prefers-reduced-motion:reduce){
  .btn,.btn::after{ transition:none !important }
  .btn:hover{ transform:none !important }
}

/* link with animated underline */
.link-underline{ color:var(--gold-soft); position:relative; font-weight:500 }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease) }
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left }

/* =========================== header / nav =============================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.15rem 0; transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(10,14,28,.78); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:.7rem 0; border-bottom-color:var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem }
.nav__logo{ display:flex; align-items:center; gap:.7rem; flex-shrink:0 }
.nav__logo img{ height:38px; width:auto; transition:height .4s var(--ease) }
.site-header.scrolled .nav__logo img{ height:32px }
.nav__links{ display:flex; align-items:center; gap:2rem }
.nav__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--cream);
  position:relative; padding:.3rem 0; opacity:.86; transition:opacity .3s, color .3s;
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease) }
.nav__links a:hover,.nav__links a[aria-current="page"]{ opacity:1; color:var(--gold-soft) }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left }
.nav__cta{ display:flex; align-items:center; gap:1rem }
.nav__phone{ font-size:.84rem; letter-spacing:.06em; color:var(--stone); display:none }
.nav__phone:hover{ color:var(--gold-soft) }

.nav__toggle{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:5px; align-items:center }
.nav__toggle span{ width:24px; height:1.5px; background:var(--cream); transition:transform .35s var(--ease), opacity .35s }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:rgba(8,11,22,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.6rem;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.drawer.open{ opacity:1; visibility:visible }
.drawer a{ font-family:var(--font-display); font-size:2rem; color:var(--cream); opacity:.9 }
.drawer a:hover{ color:var(--gold-soft) }
.drawer .btn{ margin-top:1rem }

/* =========================== footer ===================================== */
.site-footer{ position:relative; padding-top:clamp(4rem,8vw,6.5rem); border-top:1px solid var(--line-soft); overflow:hidden }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem 2rem }
.footer-brand img{ height:46px; margin-bottom:1.3rem }
.footer-brand p{ max-width:30ch; font-size:.95rem }
.site-footer h4{ font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem }
.footer-col a, .footer-col p{ display:block; color:var(--muted); font-size:.95rem; margin-bottom:.7rem; transition:color .3s }
.footer-col a:hover{ color:var(--gold-soft) }
.footer-social{ display:flex; gap:1rem; margin-top:1.4rem }
.footer-social a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; color:var(--stone); transition:border-color .3s, color .3s, transform .3s }
.footer-social a:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-3px) }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding:2.2rem 0; margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--muted); position:relative; z-index:2 }
.footer-bottom a:hover{ color:var(--gold-soft) }
/* giant outlined watermark wordmark bleeding off the bottom */
.footer-watermark{ position:absolute; left:50%; bottom:-3.2vw; transform:translateX(-50%); z-index:0;
  font-family:var(--font-display); font-weight:600; font-size:19vw; line-height:.8; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(201,162,75,.10); pointer-events:none; user-select:none }

/* =========================== forms ===================================== */
.field{ margin-bottom:1.2rem }
.field label{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone); margin-bottom:.5rem }
.field input,.field textarea,.field select{
  width:100%; padding:.95rem 1.1rem; background:rgba(244,241,233,.035); color:var(--cream);
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.98rem;
  transition:border-color .3s, background .3s;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(166,174,198,.55) }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:rgba(244,241,233,.06) }
.field textarea{ min-height:140px; resize:vertical }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:.8rem }
.form-success{ display:none; padding:1.1rem 1.3rem; border:1px solid var(--gold); border-radius:var(--radius-sm);
  background:rgba(201,162,75,.08); color:var(--gold-soft); margin-top:1rem }
.form-success.show{ display:block }

/* =========================== cards / chips ============================== */
.card{
  position:relative; background:linear-gradient(180deg,var(--indigo),var(--indigo-deep));
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:2rem;
  overflow:hidden; transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.45),transparent); opacity:0; transition:opacity .5s }
.card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:var(--shadow-soft) }
.card:hover::before{ opacity:1 }

.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(201,162,75,.06); color:var(--gold-soft);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase }

/* =========================== custom cursor ============================== */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s }
.cursor-dot{ width:7px; height:7px; background:var(--gold) }
.cursor-ring{ width:36px; height:36px; border:1px solid rgba(91,75,138,.85);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s, opacity .3s }
html.has-cursor.cursor-ready .cursor-dot,html.has-cursor.cursor-ready .cursor-ring{ opacity:1 }
html.has-cursor *{ cursor:none !important }
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{ cursor:auto !important }
.cursor-ring.is-hover{ width:60px; height:60px; border-color:var(--gold); background:rgba(201,162,75,.07) }
.cursor-ring.is-down{ width:26px; height:26px }

/* =========================== reveals ==================================== */
[data-reveal]{ opacity:0; will-change:transform,opacity }
.no-js [data-reveal]{ opacity:1 }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important } }

/* =========================== utilities ================================== */
.muted{ color:var(--muted) } .stone{ color:var(--stone) } .gold{ color:var(--gold-soft) }
.mt-1{ margin-top:1rem } .mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }
.constellation{ display:flex; align-items:center; justify-content:center; gap:.9rem; color:var(--gold); margin:1.4rem 0 }
.constellation::before,.constellation::after{ content:""; height:1px; width:clamp(40px,12vw,120px);
  background:linear-gradient(90deg,transparent,var(--line)) }
.constellation::after{ background:linear-gradient(90deg,var(--line),transparent) }
.star{ font-size:.7rem }

/* =========================== responsive ================================= */
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr }
  .footer-brand{ grid-column:1 / -1 }
}
@media (min-width:861px){ .nav__phone{ display:inline-block } }
@media (max-width:860px){
  .nav__links,.nav__cta .btn{ display:none }
  .nav__toggle{ display:flex }
  .form-row{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; text-align:center }
}