:root{
    --emerald: #123626;
    --emerald-deep: #0b241a;
    --champagne: #cba76a;
    --champagne-light: #e2cd9c;
    --black: #16130f;
    --cream: #f4ecd8;
    --cream-dim: #ece0c4;
    --rose: #c98a86;
    --terracotta: #b85c3a;
    --ochre: #cf9a2e;

    --script: 'Yellowtail', cursive;
    --caps: 'Jost', sans-serif;
    --body: 'Cormorant Garamond', serif;
  }

  *{margin:0; padding:0; box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--black);
    font-family:var(--body);
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  a{color:inherit; text-decoration:none;}
  .eyebrow{
    font-family:var(--caps);
    text-transform:uppercase;
    letter-spacing:0.35em;
    font-size:0.72rem;
    font-weight:500;
  }

  /* ---------- Sparkle / star motif ---------- */
  .spark{
    display:inline-block;
    width:14px; height:14px;
    position:relative;
  }
  .spark svg{width:100%; height:100%; display:block;}

  /* ---------- Nav ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 2.5rem;
    background:rgba(18,54,38,0.0);
    transition:background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
  }
  nav.scrolled{
    background:rgba(11,36,26,0.94);
    padding:0.75rem 2.5rem;
    box-shadow:0 4px 24px rgba(0,0,0,0.25);
  }
  .nav-mark{
    font-family:var(--script);
    font-size:1.6rem;
    color:var(--cream);
    letter-spacing:0.02em;
  }
  .nav-links{
    display:flex; gap:2.2rem;
    list-style:none;
  }
  .nav-links a{
    font-family:var(--caps);
    color:var(--cream-dim);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    padding-bottom:4px;
    border-bottom:1px solid transparent;
    transition:color 0.25s ease, border-color 0.25s ease;
  }
  .nav-links a:hover{ color:var(--champagne-light); border-color:var(--champagne); }
  .nav-toggle{display:none;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    background:
      radial-gradient(ellipse 60% 50% at 50% 38%, rgba(203,167,106,0.16), transparent 70%),
      linear-gradient(180deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    color:var(--cream);
    padding:6rem 1.5rem 4rem;
    overflow:hidden;
  }
  .hero::before, .hero::after{
    content:"";
    position:absolute;
    border:1px solid rgba(203,167,106,0.35);
    border-radius:50%;
  }
  .hero::before{ width:620px; height:620px; top:-140px; left:50%; transform:translateX(-50%); }
  .hero::after{ width:760px; height:760px; top:-210px; left:50%; transform:translateX(-50%); border-color:rgba(203,167,106,0.16); }

  .hero-sparks{
    position:absolute; inset:0;
    pointer-events:none;
  }
  .hero-sparks .spark{ position:absolute; color:var(--champagne); opacity:0.8; }

  .hero-content{ position:relative; z-index:2; }
  .hero-eyebrow{
    color:var(--champagne-light);
    margin-bottom:1.6rem;
    opacity:0;
    animation:riseFade 0.9s ease-out 0.15s forwards;
  }
  .hero-bar{
    font-family:var(--caps);
    font-size:1.05rem;
    letter-spacing:0.62em;
    font-weight:500;
    color:var(--champagne-light);
    margin-bottom:0.4rem;
    opacity:0;
    animation:riseFade 0.9s ease-out 0.35s forwards;
  }
  .hero-title{
    font-family:var(--script);
    font-size:clamp(4.2rem, 13vw, 9.5rem);
    line-height:0.95;
    color:var(--cream);
    text-shadow:0 2px 30px rgba(0,0,0,0.25);
    opacity:0;
    animation:riseFade 1s ease-out 0.5s forwards;
  }
  .hero-rule{
    width:120px; height:1px;
    background:linear-gradient(90deg, transparent, var(--champagne), transparent);
    margin:1.8rem auto;
    opacity:0;
    animation:riseFade 0.9s ease-out 0.8s forwards;
  }
  .hero-tag{
    font-size:1.35rem;
    font-style:italic;
    color:var(--cream-dim);
    max-width:32rem;
    margin:0 auto 2.6rem;
    opacity:0;
    animation:riseFade 0.9s ease-out 0.95s forwards;
  }
  .hero-cta{
    display:inline-flex; align-items:center; gap:0.6rem;
    font-family:var(--caps);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--emerald-deep);
    background:var(--champagne);
    padding:0.95rem 2.1rem;
    border-radius:2px;
    transition:background 0.25s ease, transform 0.25s ease;
    opacity:0;
    animation:riseFade 0.9s ease-out 1.1s forwards;
  }
  .hero-cta:hover{ background:var(--champagne-light); transform:translateY(-2px); }

  @keyframes riseFade{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .scroll-cue{
    position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
    color:var(--champagne);
    opacity:0.7;
    animation:bob 2.4s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,8px); }
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* ---------- Section shared ---------- */
  section{ padding:7rem 1.5rem; position:relative; }
  .section-inner{ max-width:1080px; margin:0 auto; }
  .section-head{ text-align:center; margin-bottom:3.5rem; }
  .section-head .eyebrow{ color:var(--terracotta); margin-bottom:0.6rem; }
  .section-head h2{
    font-family:var(--script);
    font-size:clamp(2.6rem, 5vw, 3.6rem);
    color:var(--emerald);
    font-weight:400;
  }
  .divider{
    display:flex; align-items:center; justify-content:center; gap:0.9rem;
    margin:1.3rem auto 0;
    color:var(--champagne);
  }
  .divider .line{ width:52px; height:1px; background:currentColor; opacity:0.6; }

  /* ---------- About ---------- */
  .about{ background:var(--cream); }
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  }
  .about-frame{
    position:relative;
    aspect-ratio:4/5;
    background:linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .about-frame::before{
    content:""; position:absolute; inset:14px;
    border:1px solid rgba(203,167,106,0.55);
    border-radius:2px;
  }
  .about-frame::after{
    content:""; position:absolute; inset:22px;
    border:1px solid rgba(203,167,106,0.3);
    border-radius:2px;
  }
  .about-mark{
    text-align:center; color:var(--cream);
    position:relative; z-index:1;
  }
  .about-mark .caps-mini{
    font-family:var(--caps); letter-spacing:0.5em; font-size:0.85rem; color:var(--champagne-light); margin-bottom:0.3rem;
  }
  .about-mark .script-mini{ font-family:var(--script); font-size:3.4rem; color:var(--cream); }
  .about-mark .sub-mini{ font-family:var(--caps); letter-spacing:0.3em; font-size:0.62rem; color:var(--champagne); margin-top:0.6rem; opacity:0.85;}

  .about-copy p{
    font-size:1.22rem;
    line-height:1.75;
    color:#2c2a24;
    margin-bottom:1.3rem;
  }
  .about-copy p:first-child{
    font-size:1.4rem;
    font-style:italic;
    color:var(--emerald);
  }
  .about-sig{
    margin-top:1.8rem;
    font-family:var(--caps);
    font-size:0.72rem;
    letter-spacing:0.22em;
    color:var(--terracotta);
    text-transform:uppercase;
  }

  /* ---------- Menu ---------- */
  .menu{
    background:var(--black);
    color:var(--cream);
  }
  .menu .section-head h2{ color:var(--champagne-light); }
  .menu .section-head .eyebrow{ color:var(--rose); }
  .menu-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem;
  }
  .menu-col h3{
    font-family:var(--caps);
    text-transform:uppercase;
    letter-spacing:0.24em;
    font-size:0.82rem;
    color:var(--champagne);
    text-align:center;
    padding-bottom:1rem;
    margin-bottom:1.6rem;
    border-bottom:1px solid rgba(203,167,106,0.35);
  }
  .menu-item{ margin-bottom:1.6rem; }
  .menu-item .row{
    display:flex; align-items:baseline; gap:0.6rem;
  }
  .menu-item .name{
    font-family:var(--body);
    font-weight:600;
    font-size:1.18rem;
    color:var(--cream);
  }
  .menu-item .rule{
    flex:1;
    border-bottom:1px dotted rgba(244,236,216,0.28);
    transform:translateY(-4px);
  }
  .menu-item .price{
    font-family:var(--caps);
    font-size:0.9rem;
    color:var(--champagne-light);
  }
  .menu-item .desc{
    font-style:italic;
    font-size:0.98rem;
    color:rgba(244,236,216,0.65);
    margin-top:0.25rem;
    line-height:1.5;
  }
  .menu-note{
    text-align:center;
    margin-top:3.5rem;
    font-family:var(--caps);
    font-size:0.7rem;
    letter-spacing:0.2em;
    color:rgba(244,236,216,0.5);
    text-transform:uppercase;
  }

  /* ---------- Hours & Location ---------- */
  .visit{ background:var(--cream-dim); }
  .visit-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  }
  .visit-block h3{
    font-family:var(--caps);
    text-transform:uppercase;
    letter-spacing:0.24em;
    font-size:0.78rem;
    color:var(--terracotta);
    margin-bottom:1.4rem;
    display:flex; align-items:center; gap:0.6rem;
  }
  .hours-row{
    display:flex; justify-content:space-between;
    font-size:1.15rem;
    padding:0.65rem 0;
    border-bottom:1px solid rgba(20,17,12,0.1);
    color:var(--black);
  }
  .hours-row span:last-child{ color:var(--emerald); font-weight:600; }
  .addr{
    font-size:1.3rem;
    line-height:1.6;
    color:var(--black);
    margin-bottom:1.6rem;
  }
  .addr em{ color:var(--emerald); font-style:normal; font-weight:600; }
  .visit-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
  .btn-outline{
    font-family:var(--caps);
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    padding:0.85rem 1.6rem;
    border:1px solid var(--emerald);
    color:var(--emerald);
    border-radius:2px;
    transition:background 0.25s ease, color 0.25s ease;
  }
  .btn-outline:hover{ background:var(--emerald); color:var(--cream); }

  /* ---------- Footer ---------- */
  footer{
    background:var(--emerald-deep);
    color:var(--cream-dim);
    text-align:center;
    padding:4rem 1.5rem 2.5rem;
  }
  footer .foot-mark{
    font-family:var(--script);
    font-size:2.4rem;
    color:var(--champagne-light);
    margin-bottom:0.6rem;
  }
  footer .foot-caps{
    font-family:var(--caps);
    letter-spacing:0.4em;
    font-size:0.65rem;
    color:var(--champagne);
    margin-bottom:1.6rem;
  }
  .foot-links{
    display:flex; justify-content:center; gap:2rem; margin-bottom:2rem;
    font-family:var(--caps); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  }
  .foot-links a{ color:var(--cream-dim); transition:color 0.2s ease; }
  .foot-links a:hover{ color:var(--champagne); }
  .foot-fine{ font-size:0.72rem; letter-spacing:0.05em; color:rgba(244,236,216,0.4); }

  /* ---------- Mobile ---------- */
  @media (max-width:860px){
    .about-grid, .visit-grid{ grid-template-columns:1fr; gap:2.6rem; }
    .menu-grid{ grid-template-columns:1fr; gap:2.8rem; }
    nav{ padding:1rem 1.3rem; }
    .nav-links{
      position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
      background:var(--emerald-deep);
      flex-direction:column; justify-content:center; align-items:flex-start;
      gap:1.8rem; padding:2rem 2.5rem;
      transform:translateX(100%); transition:transform 0.35s ease;
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-toggle{
      display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:120; padding:6px;
    }
    .nav-toggle span{ width:22px; height:2px; background:var(--cream); display:block; }
    section{ padding:5rem 1.3rem; }
  }