:root,
      [data-theme="light"] {
        --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
        --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
        --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
        --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
        --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
        --text-3xl: clamp(2.5rem, 1rem + 4.5vw, 5rem);
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;
        --color-bg: #f5eadc;
        --color-surface: #fbf4eb;
        --color-surface-2: #fffaf4;
        --color-surface-accent: #efe0cc;
        --color-border: rgba(71, 38, 24, 0.12);
        --color-text: #2d1a11;
        --color-text-muted: #765949;
        --color-text-faint: #a68574;
        --color-text-inverse: #fffaf4;
        --color-primary: #a63122;
        --color-primary-hover: #872417;
        --color-secondary: #0f6b57;
        --color-accent: #d48b2c;
        --color-gold: #f1c26c;
        --radius-sm: 0.5rem;
        --radius-md: 0.9rem;
        --radius-lg: 1.35rem;
        --radius-xl: 2rem;
        --radius-full: 999px;
        --shadow-sm: 0 8px 24px rgba(45, 26, 17, 0.08);
        --shadow-md: 0 24px 60px rgba(45, 26, 17, 0.14);
        --font-display: "Fraunces", Georgia, serif;
        --font-body: "Work Sans", Arial, sans-serif;
        --content: 1160px;
      }
      /* [data-theme="dark"] {
        --color-bg: #170f0d;
        --color-surface: #211615;
        --color-surface-2: #2a1d1a;
        --color-surface-accent: #34231d;
        --color-border: rgba(255, 244, 234, 0.12);
        --color-text: #f8e9dc;
        --color-text-muted: #d5b6a3;
        --color-text-faint: #a9836e;
        --color-text-inverse: #1f1411;
        --color-primary: #d85b48;
        --color-primary-hover: #ea7867;
        --color-secondary: #58b39d;
        --color-accent: #efad4a;
        --color-gold: #f7cf83;
        --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.38);
      } */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        scroll-behavior: smooth;
        scroll-padding-top: 5rem;
      }
      body {
        min-height: 100dvh;
        line-height: 1.6;
        font-family: var(--font-body);
        font-size: var(--text-base);
        color: var(--color-text);
        background:
          radial-gradient(
            circle at top left,
            rgba(212, 139, 44, 0.16),
            transparent 30%
          ),
          radial-gradient(
            circle at bottom right,
            rgba(15, 107, 87, 0.12),
            transparent 28%
          ),
          var(--color-bg);
      }
      img,
      svg {
        display: block;
        max-width: 100%;
        height: auto;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      button {
        font: inherit;
        border: none;
        background: none;
        cursor: pointer;
      }
      h1,
      h2,
      h3 {
        font-family: var(--font-display);
        line-height: 1.02;
        letter-spacing: -0.03em;
      }
      p {
        max-width: 68ch;
      }
      .skip-link {
        position: absolute;
        left: var(--space-4);
        top: -3rem;
        background: var(--color-primary);
        color: var(--color-text-inverse);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-full);
        z-index: 100;
      }
      .skip-link:focus {
        top: var(--space-4);
      }
      .container {
        width: min(calc(100% - 2rem), var(--content));
        margin-inline: auto;
      }
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid var(--color-border);
        background: color-mix(in srgb, var(--color-bg) 80%, transparent);
        backdrop-filter: blur(14px);
      }
      .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-4) 0;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-weight: 700;
      }
      .brand-mark {
        width: 2.75rem;
        height: 2.75rem;
        color: var(--color-primary);
      }
      .nav-links,
      .header-actions,
      .hero-actions,
      .inline-links {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .nav-links a {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
      }
      .theme-toggle,
      .stamp {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-surface);
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.85rem 1.2rem;
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: 700;
        transition: 0.18s ease;
      }
      .btn-primary {
        background: var(--color-primary);
        color: var(--color-text-inverse);
      }
      .btn-primary:hover {
        background: var(--color-primary-hover);
      }
      .btn-secondary {
        background: var(--color-secondary);
        border: 1px solid var(--color-border);
        color:white;
      }
   
      .opening{
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: var(--base-text);
        color: var(--color-text-muted);
        margin-bottom: 0;
        margin-top: 20px;
      }
      .hero-grid {
        display: grid;
        gap: var(--space-8);
        align-items: center;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        background: rgba(212, 139, 44, 0.14);
        color: var(--color-primary);
        font-size: var(--text-sm);
        font-weight: 700;
        margin-bottom: var(--space-5);
      }
      h1 {
        font-size: var(--text-3xl);
        max-width: 10ch;
      }
      .hero-copy p {
        margin-top: var(--space-5);
        color: var(--color-text-muted);
      }
      .hero-card {
        position: relative;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-md);
      }
      .hero-image {
        aspect-ratio: 4/5;
        object-fit: cover;
        width: 100%;
      }
      .hero-badge {
        position: absolute;
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        align-items: end;
        background: rgba(38, 20, 15, 0.76);
        color: var(--color-text-inverse);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(12px);
      }
      section {
        padding: var(--space-16) 0;
      }
      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
      }
      .section-head p {
        color: var(--color-text-muted);
      }
      h2 {
        font-size: var(--text-2xl);
      }
      .info-grid,
      .highlights,
      .links-grid {
        display: grid;
        gap: var(--space-4);
      }
      .card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        box-shadow: var(--shadow-sm);
      }
      .card small {
        display: block;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--color-text-muted);
        margin-bottom: var(--space-2);
        text-align: center;
      }
      .card strong {
        display: block;
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
        text-align: center;
      }
      .card p {
        color: var(--color-text-muted);
        text-align: center;
      }
      .menu-list {
        display: grid;
        gap: var(--space-4);
      }
      .menu-list strong{
        text-align:left;
      }
      .menu-item {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        align-items: start;
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
      }
      .menu-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      .menu-item span {
        font-weight: 700;
        color: var(--color-primary);
        white-space: nowrap;
      }
      .cta-panel {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-8);
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, #8f281c, #c76828);
        color: var(--color-text-inverse);
        position: relative;
        overflow: hidden;
      }
      .cta-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url("https://pplx-res.cloudinary.com/image/upload/pplx_search_images/71250df97e357ae147cf4e96cec1bf4e7f56c1f9.jpg")
          center/cover;
        opacity: 0.08;
        mix-blend-mode: screen;
      }
      .cta-panel > * {
        position: relative;
        z-index: 1;
      }
      .cta-panel p {
        color: rgba(255, 250, 244, 0.9);
      }
      .story-strip {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: 1fr;
        align-items: center;
      }
      .story-visual {
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
      }
      .story-visual img {
        aspect-ratio: 16/10;
        object-fit: cover;
        width: 100%;
      }
      
     
      
      @media (min-width: 820px) {
        .hero-grid {
          grid-template-columns: 1.15fr 0.85fr;
        }
        .info-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .highlights {
          grid-template-columns: 1.1fr 0.9fr;
        }
        .links-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .story-strip {
          grid-template-columns: 0.95fr 1.05fr;
        }
      }
      @media (max-width: 819px) {
        .nav-links {
          display: none;
        }
        .hero-badge {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      
/* Food Gallery css */
.gallery-grid {
  height: 900px;
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  transition: transform 0.25s ease;
  
}

.gallery-card:hover img {
  transform: scale(1.04);
}

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0),
    rgba(24, 16, 12, 0.78)
  );
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}

@media (min-width: 820px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-card:nth-child(1) {
    grid-column: span 2;
  }

  .gallery-card:nth-child(4) {
    grid-column: span 2;
  }
}
  

/* MOBILE RESPONSIVENESS */
@media (max-width: 480px) {

    @media (max-width: 480px) {
  /* Center the entire hero section content */
  .hero-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Center the Eyebrow Badge */
  .eyebrow {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex; /* Ensures it stays a badge shape */
  }

  /* Center the Hero Image */
  .hero-copy img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Ensure it fits screen */
  }

  /* Center Hero Text and Actions */
  .hero-copy, .hero-actions {
    text-align: center;
    width: 100%;
  }
  
  .hero-actions .btn {
    width: 100%; /* Keep buttons full width for touch targets */
  }
}
  /* 1. Fix Hero Text Wrapping */
  h1 {
    font-size: var(--text-2xl); /* Slightly smaller but more readable */
    max-width: 100%; /* Allow full width so text doesn't get cut off */
    line-height: 1.1;
  }

  /* 2. Make Buttons Full Width for easier tapping */
  .hero-actions,
  .cta-panel .btn,
  .inline-links {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%; /* Full width buttons on mobile */
    text-align: center;
  }

  /* 3. Fix the "Visit" Cards Stack */
  .info-grid {
    grid-template-columns: 1fr; /* Stack cards vertically */
    gap: var(--space-4);
  }

  /* 4. Fix the "Click Me" text link issue in Contact Card */
  /* We ensure the link behaves like a button inside the card */
  .card a {
    display: inline-block;
    margin-top: var(--space-2);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
  }
  
  /* 5. Adjust Story Strip for vertical flow */
  .story-strip {
    grid-template-columns: 1fr;
  }
  
  .story-visual {
    order: -1; /* Show image first on mobile? Or remove this to keep text first. 
                  Usually text first is better for context, so I'll remove order or set to 0 */
    order: 0; 
  }

  /* 6. Fix CTA Panel padding for small screens */
  .cta-panel {
    padding: var(--space-5);
  }
  
  .cta-panel h2 {
    font-size: var(--text-xl);
  }
  .opening{
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--small-text);
    color: var(--color-text-muted);
    margin-bottom: 5px;
    margin-top: 20px;
    padding:20px;
  }

  /* hide hero stamp */
  .stamp{
    display:none;
  }

  .gallery-grid{
    
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto; /* Let height adjust based on content */
  }
}