/* ============================================================
   CHEF IN DE BOX — site.css
   Shared dark cinematic theme. Loaded by every page so the site
   feels like one coherent experience instead of a collection of
   bespoke pages. Per-page styles can extend; they should never
   redefine the color tokens here.
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0a0908;color:#F9F7F0;overflow-x:hidden}
/* body bg is transparent so body::before can paint the warm wash
   between html's dark base and the page content above it. */
body{background:transparent;color:#F9F7F0;overflow-x:hidden;font-family:'Inter',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;cursor:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
ul{list-style:none}

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* surfaces (was --paper variants in legacy — flipped to dark) */
  --bg:#0a0908;
  --bg2:#110f0c;
  --bg3:#181410;
  --paper:#0a0908;
  --paper2:#110f0c;
  --paper3:#181410;

  /* text (was --ink variants in legacy — flipped to cream) */
  --cream:#F9F7F0;
  --cream60:rgba(249,247,240,.6);
  --cream40:rgba(249,247,240,.4);
  --cream20:rgba(249,247,240,.2);
  --cream10:rgba(249,247,240,.08);
  --ink:#F9F7F0;
  --ink60:rgba(249,247,240,.6);
  --ink30:rgba(249,247,240,.4);
  --ink10:rgba(249,247,240,.1);

  /* accent — gold replaces forest green from legacy */
  --gold:#C8A84B;
  --gold-soft:rgba(200,168,75,.85);
  --gold-line:rgba(200,168,75,.22);
  --gold-bg:rgba(200,168,75,.06);
  --forest:#C8A84B;       /* legacy alias */
  --forest2:#1c1814;      /* legacy alias — now dark surface */
  --forestl:rgba(200,168,75,.06); /* legacy alias */

  /* WARM ROOM-LIGHT PALETTE — chandelier / lamp / fireplace tones
     used throughout the dark sections so the whole site feels lit
     by the same restaurant/home interior as the cinematic film. */
  --warm-1:rgba(212,158,82,.10);   /* primary chandelier amber */
  --warm-2:rgba(196,118,58,.08);   /* deeper lamp/fireplace glow */
  --warm-3:rgba(178,98,42,.06);    /* far-corner lamp halo */
  --warm-4:rgba(220,170,90,.05);   /* diffuse room ambient */

  /* BLACK-MARBLE-WITH-GOLD-VEINING TEXTURE — single inline SVG
     used as a background-image layer on premium sections so the
     dark areas feel like polished stone instead of flat void.
     Apply via background-image; combine with warm gradients and
     a base color underneath. SVG is ~1.2KB, no HTTP request. */
  --marble:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23c8a84b' stroke-linecap='round'><path d='M0,280 C220,180 440,340 660,240 C880,140 1100,300 1320,200 C1480,140 1560,260 1600,220' stroke-width='1.4' opacity='.5'/><path d='M0,620 C240,520 460,660 680,560 C900,460 1120,600 1340,520 C1500,460 1580,580 1600,540' stroke-width='1.2' opacity='.38'/><path d='M180,0 C320,220 500,80 660,320 C820,560 980,420 1160,640 C1320,860 1480,720 1600,900' stroke-width='1' opacity='.32'/><path d='M0,820 C200,740 400,880 600,800 C800,720 980,860 1200,780 C1400,700 1500,840 1600,770' stroke-width='.9' opacity='.28'/><path d='M380,260 Q450,340 540,360 T680,300' stroke-width='.6' opacity='.34'/><path d='M820,540 Q890,600 980,620 T1120,560' stroke-width='.6' opacity='.32'/><path d='M1240,200 Q1300,260 1340,320 T1420,280' stroke-width='.5' opacity='.3'/><path d='M200,580 Q260,540 320,600 T440,560' stroke-width='.5' opacity='.28'/><path d='M640,100 Q700,160 760,120 T880,180' stroke-width='.5' opacity='.28'/><path d='M1060,420 Q1120,470 1180,440 T1300,500' stroke-width='.5' opacity='.26'/></g><g fill='%23c8a84b'><circle cx='240' cy='360' r='1.4' opacity='.48'/><circle cx='480' cy='200' r='1.1' opacity='.4'/><circle cx='740' cy='440' r='1.3' opacity='.46'/><circle cx='1000' cy='300' r='1' opacity='.36'/><circle cx='1260' cy='500' r='1.2' opacity='.42'/><circle cx='360' cy='640' r='1' opacity='.34'/><circle cx='600' cy='740' r='1.5' opacity='.48'/><circle cx='860' cy='180' r='.9' opacity='.32'/><circle cx='1100' cy='720' r='1.1' opacity='.38'/><circle cx='1380' cy='580' r='1.3' opacity='.42'/><circle cx='160' cy='740' r='.8' opacity='.3'/><circle cx='1480' cy='340' r='1' opacity='.34'/></g></svg>");

  /* fonts */
  --display:'Instrument Serif',Georgia,serif;
  --serif:'Cormorant Garamond','Cormorant',Georgia,serif;
  --mono:'DM Mono','Courier New',monospace;
  --ui:'Inter',system-ui,sans-serif;

  /* easing */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,.46,.45,.94);
  --ease:cubic-bezier(.25,.46,.45,.94);
}

::selection{background:rgba(200,168,75,.25);color:#fff}

/* ============================================================
   WARM AMBIENT WASH
   A fixed pseudo-element behind everything that paints subtle
   warm radial gradients across the viewport. Sections without
   their own opaque background show this through, giving the
   whole site the feeling of being lit by chandeliers and lamps
   from somewhere just off-frame. Sections that DO have their
   own background should add their own --warm gradients on top.
   ============================================================ */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 18% 12%, var(--warm-1) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 82% 88%, var(--warm-2) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 50%, var(--warm-4) 0%, transparent 80%),
    #0a0908;
}

/* Helper that any section can use to inherit a chandelier-style
   warm glow on top of its existing background. Apply via class. */
.warm-section{
  background:
    radial-gradient(ellipse 55% 60% at 20% 20%, var(--warm-1) 0%, transparent 65%),
    radial-gradient(ellipse 55% 60% at 80% 80%, var(--warm-2) 0%, transparent 65%),
    var(--bg);
}

/* ---------- NAV (shared) ---------- */
.nav-scrim{position:fixed;top:0;left:0;right:0;height:130px;z-index:35;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%)}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:66px;padding:0 2.75rem;display:flex;align-items:center;justify-content:space-between;color:#fff;background:transparent}
.nav-logo{font-family:var(--serif);font-size:.92rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2.6rem}
.nav-links a{font-family:var(--mono);font-size:.58rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.55);transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:var(--gold)}
.nav-links a.on{position:relative}
.nav-links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}
.nav-cta{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:#000;background:#fff;padding:.7rem 1.4rem;transition:background .25s,color .25s;display:inline-block;box-shadow:0 4px 24px rgba(0,0,0,.35);border:none}
.nav-cta:hover{background:var(--gold);color:#000}

/* When body has .opaque-nav, the nav gets a solid backdrop instead of
   the cinematic scrim. Useful on content pages with no hero film. */
body.opaque-nav .nav{background:rgba(10,9,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cream10)}
body.opaque-nav .nav-scrim{display:none}

/* Spacer that pushes content below the fixed nav on opaque-nav pages */
body.opaque-nav .nav-spacer{height:66px}

@media(max-width:880px){
  .nav{padding:0 1.25rem;height:58px}
  .nav-links{display:none}
  .nav-scrim{height:100px}
  .nav-logo{font-size:.78rem;letter-spacing:.22em}
  .nav-cta{padding:.55rem 1rem;font-size:.5rem}
  body.opaque-nav .nav-spacer{height:58px}
}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;padding:1.05rem 2.1rem;display:inline-block;transition:all .3s ease;border:1px solid transparent;text-align:center;cursor:pointer}
.btn-fill{background:#fff;color:#000;border-color:#fff}
.btn-fill:hover{background:var(--gold);border-color:var(--gold);color:#000}
.btn-line{border-color:rgba(255,255,255,.42);color:#fff}
.btn-line:hover{background:#fff;color:#000;border-color:#fff}
.btn-gold{background:var(--gold);color:#000;border-color:var(--gold)}
.btn-gold:hover{background:#fff;border-color:#fff}
.btn-ghost-gold{background:transparent;color:var(--gold);border-color:rgba(200,168,75,.4)}
.btn-ghost-gold:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.btn-dark{background:#0a0908;color:#fff;border-color:rgba(255,255,255,.2)}
.btn-dark:hover{background:#1c1814;border-color:var(--gold)}

/* ---------- SECTION HELPERS ---------- */
.eyebrow{font-family:var(--mono);font-size:.56rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:1rem}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.96;color:var(--cream);margin-bottom:1.5rem}
.section-title em{font-style:italic;color:var(--gold-soft)}
.lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.75;color:var(--cream60);max-width:560px}
.divider{display:block;width:60px;height:1px;background:var(--gold-line);margin:2rem auto}

/* ---------- PAGE HERO (used by content pages) ---------- */
.page-hero{padding:9rem 2.75rem 5rem;text-align:center;background:radial-gradient(ellipse 65% 75% at 50% 90%,var(--warm-1) 0%,transparent 70%),radial-gradient(ellipse 45% 55% at 15% 30%,var(--warm-3) 0%,transparent 65%),radial-gradient(ellipse 45% 55% at 85% 30%,var(--warm-2) 0%,transparent 65%),linear-gradient(180deg,#000 0%,#0c0a08 70%,#100c08 100%);border-bottom:1px solid var(--cream10);position:relative}
.page-hero::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:80px;height:1px;background:var(--gold)}
.page-hero .eyebrow{margin-bottom:1.25rem}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7vw,6rem);line-height:.92;color:var(--cream);max-width:880px;margin:0 auto}
.page-hero h1 em{font-style:italic;color:var(--gold-soft)}
.page-hero p{font-family:var(--serif);font-size:clamp(1rem,1.4vw,1.18rem);font-style:italic;font-weight:300;color:var(--cream60);max-width:560px;margin:1.5rem auto 0;line-height:1.65}

/* ---------- FOOTER (shared) ---------- */
footer.site-footer{background:#050403;color:var(--cream40);padding:4rem 2.75rem 2.5rem;border-top:1px solid var(--cream10);position:relative;z-index:10}
footer.site-footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:var(--gold)}
.footer-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand .fb-mark{font-family:var(--display);font-size:1.4rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-bottom:.6rem;display:block}
.footer-brand .fb-mark em{font-style:italic;color:var(--gold-soft)}
.footer-brand p{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--cream40);line-height:1.65;max-width:300px}
.footer-col h4{font-family:var(--mono);font-size:.5rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.2rem}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem}
.footer-col li a{font-family:var(--serif);font-size:.92rem;font-weight:300;color:var(--cream60);transition:color .22s}
.footer-col li a:hover{color:var(--cream)}
.footer-bottom{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid var(--cream10)}
.footer-bottom .fc{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream20)}
.footer-bottom .fa{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-bottom .fa a{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream20);transition:color .22s}
.footer-bottom .fa a:hover{color:var(--cream60)}

@media(max-width:880px){
  footer.site-footer{padding:3rem 1.5rem 2rem}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.4rem}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;text-align:center;align-items:center}
}

/* ---------- FORM PRIMITIVES ---------- */
.field{display:block;margin-bottom:1.4rem}
.field label{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream60);margin-bottom:.65rem}
.field input,.field textarea,.field select{display:block;width:100%;padding:.95rem 1.1rem;background:rgba(255,255,255,.03);border:1px solid var(--cream10);color:var(--cream);font-family:var(--serif);font-size:1rem;font-weight:300;transition:border-color .25s,background .25s;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);background:rgba(255,255,255,.05)}
.field input::placeholder,.field textarea::placeholder{color:var(--cream40);font-style:italic}
.field textarea{min-height:140px;resize:vertical;font-family:var(--serif)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}