:root{
    --coal: #1B1714;
    --coal-deep: #120F0D;
    --coal-card: #221D19;
    --cream: #F5ECDD;
    --cream-dim: #D9CBAE;
    --ember: #C9622D;
    --ember-deep: #A84E22;
    --turmeric: #D6A419;
    --clove: #5C2A2A;
    --ash: #A79C8C;
    --line: rgba(245,236,221,0.14);
    --radius: 3px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--coal);
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 4px);
    color: var(--cream);
    font-family: 'Jost', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
  a{ color: inherit; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  h1,h2,h3{ font-family:'Playfair Display', serif; margin:0; letter-spacing: -0.01em; }

  .divider{
    width: 46px; height: 2px; background: var(--turmeric); margin: 18px 0; border: none;
  }
  .divider.center{ margin-left:auto; margin-right:auto; }

  /* ===== Nav ===== */
  .site-nav{
    position: sticky; top:0; z-index: 100;
    background: rgba(27,23,20,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner{
    max-width: 1080px; margin:0 auto; padding: 16px 24px;
    display:flex; align-items:center; justify-content: space-between;
  }
  .nav-logo{
    font-family:'Playfair Display', serif; font-weight:700; font-size: 19px; text-decoration:none; color: var(--cream);
    letter-spacing: 0.02em;
  }
  .nav-logo b{ color: var(--ember); }
  .nav-links{ display:flex; align-items:center; gap: 30px; }
  .nav-links a{
    text-decoration:none; color: var(--ash); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
    transition: color 0.15s ease;
  }
  .nav-links a:hover{ color: var(--cream); }
  .nav-cta{
    background: var(--ember); color: var(--coal-deep) !important; padding: 10px 20px; border-radius: 30px;
    font-weight:600; text-transform:none !important; letter-spacing:normal !important;
  }
  .nav-cta:hover{ background: var(--turmeric) !important; }
  .nav-toggle{ display:none; background:none; border:none; color:var(--cream); font-size:22px; cursor:pointer; }

  @media (max-width: 820px){
    .nav-links{
      position: absolute; top:100%; left:0; right:0; background: var(--coal-deep);
      flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--line);
      max-height:0; overflow:hidden; transition: max-height 0.25s ease;
    }
    .nav-links.open{ max-height: 400px; }
    .nav-links a{ width:100%; padding: 16px 24px; border-bottom: 1px solid var(--line); }
    .nav-cta{ margin: 14px 24px; }
    .nav-toggle{ display:block; }
  }

  /* ===== Hero ===== */
  .hero{
    position:relative;
    padding: clamp(90px,14vw,150px) 24px clamp(70px,10vw,110px);
    text-align:center;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,98,45,0.16), transparent 70%);
    pointer-events:none;
  }
  .hero-eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--turmeric); margin-bottom: 22px; position:relative;
  }
  .hero h1{
    font-size: clamp(48px, 9vw, 92px); line-height: 0.98; color: var(--cream); position:relative;
  }
  .hero h1 em{ font-style: italic; color: var(--ember); }
  .hero-sub{
    max-width: 46ch; margin: 22px auto 0; color: var(--ash); font-size: 16.5px; line-height: 1.65; position:relative;
  }
  .hero-actions{
    display:flex; gap: 16px; justify-content:center; margin-top: 38px; flex-wrap: wrap; position:relative;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 15px 28px; border-radius: 30px; text-decoration:none; cursor:pointer; border: 1px solid transparent;
    transition: all 0.18s ease;
  }
  .btn-primary{ background: var(--ember); color: var(--coal-deep); }
  .btn-primary:hover{ background: var(--turmeric); }
  .btn-ghost{ border-color: var(--ash); color: var(--cream); background:none; }
  .btn-ghost:hover{ border-color: var(--cream); }

  .hero-strip{
    display:flex; justify-content:center; gap: 34px; margin-top: 50px; flex-wrap: wrap; position:relative;
    font-family:'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ash);
  }
  .hero-strip span b{ color: var(--cream); font-weight:600; }

  /* ===== flame svg deco ===== */
  .flame-deco{ width: 34px; height:34px; margin: 0 auto 20px; opacity:0.85; }

  /* ===== section shell ===== */
  section{ padding: 90px 0; border-top: 1px solid var(--line); }
  .section-head{ text-align:center; max-width: 60ch; margin: 0 auto 50px; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--turmeric); margin-bottom: 14px; display:block;
  }
  .section-head h2{ font-size: clamp(30px, 4.5vw, 44px); color: var(--cream); }
  .section-head p{ color: var(--ash); margin-top: 16px; line-height: 1.7; font-size: 15px; }

  /* ===== About ===== */
  #about .about-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
  }
  @media (max-width: 820px){ #about .about-grid{ grid-template-columns:1fr; } }
  #about h2{ font-size: clamp(28px,4vw,38px); color: var(--cream); line-height:1.15; }
  #about p{ color: var(--ash); line-height: 1.8; font-size: 15px; margin-top: 18px; }
  .about-visual{
    aspect-ratio: 4/5; border-radius: 4px; position:relative; overflow:hidden;
    background: linear-gradient(160deg, var(--clove), var(--coal-card) 70%);
    display:flex; align-items:center; justify-content:center;
  }
  .about-visual svg{ width:44%; opacity:0.85; }
  .about-stats{ display:flex; gap: 30px; margin-top: 30px; flex-wrap:wrap; }
  .about-stats div{ }
  .about-stats .n{ font-family:'Playfair Display', serif; font-size: 34px; color: var(--ember); }
  .about-stats .l{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ash); margin-top:4px; }

  /* ===== Menu (dot-leader) ===== */
  .menu-tabs{ display:flex; justify-content:center; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
  .menu-tab{
    font-family:'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
    background:none; border: 1px solid var(--line); color: var(--ash); padding: 9px 18px; border-radius: 30px; cursor:pointer;
    transition: all 0.15s ease;
  }
  .menu-tab:hover{ color: var(--cream); border-color: var(--ash); }
  .menu-tab.active{ background: var(--ember); border-color: var(--ember); color: var(--coal-deep); }

  .menu-category{ display:none; max-width: 720px; margin: 0 auto; }
  .menu-category.active{ display:block; }
  .menu-item{
    display:flex; justify-content:space-between; align-items:baseline; gap: 12px;
    padding: 20px 0; border-bottom: 1px dashed var(--line);
  }
  .menu-item-name{ font-family:'Playfair Display', serif; font-size: 18px; color: var(--cream); flex-shrink:0; }
  .menu-item-desc{ color: var(--ash); font-size: 12.5px; margin-top: 5px; line-height:1.5; }
  .menu-item-leader{ flex:1; border-bottom: 1px dotted var(--ash); opacity:0.35; margin: 0 4px 6px; min-width: 20px; }
  .menu-item-price{ font-family:'IBM Plex Mono', monospace; font-size: 15px; color: var(--turmeric); flex-shrink:0; white-space:nowrap; }

  /* ===== Specials ===== */
  .specials-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
  @media (max-width: 820px){ .specials-grid{ grid-template-columns:1fr; } }
  .special-card{
    background: var(--coal-card); border: 1px solid var(--line); border-radius: 4px; padding: 30px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .special-card:hover{ transform: translateY(-4px); border-color: var(--ember); }
  .special-tag{ font-family:'IBM Plex Mono', monospace; font-size: 10px; text-transform:uppercase; letter-spacing:0.08em; color: var(--ember); }
  .special-card h3{ font-size: 22px; color: var(--cream); margin: 12px 0 10px; }
  .special-card p{ color: var(--ash); font-size: 13.5px; line-height: 1.6; margin:0 0 16px; }
  .special-price{ font-family:'IBM Plex Mono', monospace; color: var(--turmeric); font-size: 15px; }

  /* ===== Gallery ===== */
  .gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  @media (max-width: 700px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
  .gallery-tile{
    aspect-ratio: 1; border-radius: 4px; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .gallery-tile svg{ width:30%; opacity:0.7; }
  .gallery-tile .tile-label{
    position:absolute; bottom:10px; left:12px; font-family:'IBM Plex Mono', monospace; font-size:10px;
    text-transform:uppercase; letter-spacing:0.06em; color: rgba(245,236,221,0.55);
  }
  .g1{ background: linear-gradient(150deg,#4A2318,#241A15); }
  .g2{ background: linear-gradient(150deg,#5C2A2A,#221D19); }
  .g3{ background: linear-gradient(150deg,#3A2E14,#221D19); }
  .g4{ background: linear-gradient(150deg,#231B14,#3A2818); }
  .g5{ background: linear-gradient(150deg,#402315,#1B1714); }
  .g6{ background: linear-gradient(150deg,#33241A,#1B1714); }
  .gallery-note{ text-align:center; color: var(--ash); font-size: 12.5px; margin-top: 22px; font-family:'IBM Plex Mono', monospace; }

  /* ===== Testimonials ===== */
  .testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
  @media (max-width: 820px){ .testi-grid{ grid-template-columns:1fr; } }
  .testi{ text-align:center; }
  .testi .stars{ color: var(--turmeric); letter-spacing: 3px; margin-bottom: 16px; font-size:14px; }
  .testi p{ color: var(--cream-dim); font-size: 15px; line-height: 1.75; font-family:'Playfair Display', serif; font-style: italic; }
  .testi .who{ margin-top: 16px; font-family:'IBM Plex Mono', monospace; font-size: 11px; color: var(--ash); text-transform: uppercase; letter-spacing:0.05em; }

  /* ===== Reserve ===== */
  #reserve{ background: var(--coal-deep); }
  .reserve-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
  @media (max-width: 820px){ .reserve-grid{ grid-template-columns:1fr; } }
  .reserve-grid .section-head{ text-align:left; margin:0; max-width:none; }

  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  @media (max-width: 500px){ .form-row{ grid-template-columns: 1fr; } }
  .field label{
    display:block; font-family:'IBM Plex Mono', monospace; font-size: 10.5px; text-transform:uppercase;
    letter-spacing:0.06em; color: var(--ash); margin-bottom: 8px;
  }
  .field input, .field select{
    width:100%; background: var(--coal-card); border: 1px solid var(--line); color: var(--cream);
    padding: 12px 14px; border-radius: var(--radius); font-family:'Jost', sans-serif; font-size: 14px; outline:none;
  }
  .field input:focus, .field select:focus{ border-color: var(--ember); }
  .reserve-form .btn{ width:100%; justify-content:center; margin-top: 8px; border:none; }
  .reserve-note{ color: var(--ash); font-size: 12px; margin-top: 14px; text-align:center; font-family:'IBM Plex Mono', monospace; }

  /* ===== Visit / hours / map ===== */
  #visit .visit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  @media (max-width: 820px){ #visit .visit-grid{ grid-template-columns:1fr; } }
  .hours-table{ width:100%; border-collapse:collapse; }
  .hours-table td{ padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
  .hours-table td:first-child{ color: var(--ash); }
  .hours-table td:last-child{ text-align:right; font-family:'IBM Plex Mono', monospace; color: var(--cream); }
  .contact-lines{ margin-top: 26px; }
  .contact-lines div{ display:flex; gap:10px; align-items:flex-start; margin-bottom: 14px; font-size: 14px; color: var(--cream-dim); }
  .contact-lines svg{ width:16px; height:16px; color: var(--ember); flex-shrink:0; margin-top:2px; }

  .map-block{
    aspect-ratio: 4/3; border-radius:4px; background: linear-gradient(150deg,#221D19,#1B1714);
    display:flex; align-items:center; justify-content:center; border: 1px solid var(--line);
  }
  .map-block svg{ width:38%; opacity:0.6; }

  /* ===== Footer ===== */
  footer{
    background: var(--coal-deep); border-top: 1px solid var(--line); padding: 46px 0 30px;
  }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: 30px; margin-bottom: 34px; }
  .footer-brand{ font-family:'Playfair Display', serif; font-size: 22px; color: var(--cream); }
  .footer-brand b{ color: var(--ember); }
  .footer-links{ display:flex; gap: 24px; flex-wrap:wrap; }
  .footer-links a{ font-family:'IBM Plex Mono', monospace; font-size: 11.5px; text-decoration:none; color: var(--ash); letter-spacing:0.04em; }
  .footer-links a:hover{ color: var(--cream); }
  .footer-bottom{
    border-top: 1px solid var(--line); padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ash);
  }
  .footer-bottom a{ color: var(--turmeric); text-decoration:none; }

  .to-top{
    position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
    background: var(--ember); color: var(--coal-deep); border: 1px solid var(--ember-deep);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6);
    opacity:0; transform: translateY(10px); pointer-events:none;
    transition: opacity 0.2s ease, transform 0.2s ease; z-index: 90;
  }
  .to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .to-top svg{ width:18px; height:18px; }

  /* ===== Inner page hero (About / FAQ / Contact / Legal) ===== */
  .page-hero{
    padding: clamp(70px,10vw,110px) 24px 60px; text-align:center; border-bottom: 1px solid var(--line);
    position:relative;
  }
  .page-hero::before{
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(201,98,45,0.14), transparent 70%);
    pointer-events:none;
  }
  .page-hero h1{ font-size: clamp(36px,6vw,58px); color: var(--cream); position:relative; }
  .page-hero p{ max-width: 50ch; margin: 18px auto 0; color: var(--ash); font-size: 15.5px; line-height: 1.65; position:relative; }

  /* ===== Prose (legal pages) ===== */
  .prose{ max-width: 700px; margin: 0 auto; padding: 70px 24px 90px; }
  .prose h2{ font-size: 22px; color: var(--cream); margin: 36px 0 12px; }
  .prose h2:first-child{ margin-top:0; }
  .prose p, .prose li{ color: var(--ash); font-size: 14.5px; line-height: 1.8; }
  .prose p + p{ margin-top: 12px; }
  .prose ul{ padding-left: 20px; }
  .prose .updated{ font-family:'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--turmeric); margin-bottom: 30px; display:block; }
  .prose .muted-note{ margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ash); font-size: 12.5px; font-style: italic; }

  /* ===== FAQ page ===== */
  .faq-wrap{ max-width: 720px; margin: 0 auto; padding: 70px 24px 90px; }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-item:first-child{ border-top: 1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer; margin:0;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: 22px 2px; font-family:'Playfair Display', serif; font-size: 18px; color: var(--cream);
  }
  .faq-q .icon{ font-family:'IBM Plex Mono', monospace; font-size:20px; color: var(--ember); transition: transform 0.2s ease; flex-shrink:0; }
  .faq-item.open .faq-q .icon{ transform: rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition: max-height 0.25s ease; }
  .faq-item.open .faq-a{ max-height: 300px; }
  .faq-a-inner{ padding: 0 2px 22px; color: var(--ash); font-size: 14px; line-height: 1.75; max-width: 62ch; }

  /* ===== Contact page ===== */
  .contact-wrap{ max-width: 980px; margin: 0 auto; padding: 70px 24px 90px; display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  @media (max-width: 820px){ .contact-wrap{ grid-template-columns:1fr; } }
  .contact-info .item{ display:flex; gap:12px; align-items:flex-start; margin-bottom: 22px; }
  .contact-info svg{ width:18px; height:18px; color: var(--ember); flex-shrink:0; margin-top:3px; }
  .contact-info .item div{ font-size: 14.5px; color: var(--cream-dim); line-height:1.6; }
  .contact-info .item .label{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ash); display:block; margin-bottom:4px; }
  .contact-quick{ display:flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

  /* ===== 404 page ===== */
  .error-page{ min-height: 70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 40px 24px; }
  .error-page .code{ font-family:'Playfair Display', serif; font-size: 110px; color: var(--ember); line-height:1; }
  .error-page p{ color: var(--ash); margin: 14px 0 30px; font-size: 15px; }