:root{
    --terracotta:#9D432C;
    --terracotta-hover:#7F3422;
    --clay:#B86A4B;
    --bg-main:#E8DED1;
    --bg-secondary:#DAC9B5;
    --stone-border:#CAB39A;
    --text-body:#7A5F44;
    --text-heading:#61341D;
    --dark:#34200F;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--bg-main);
    color:var(--text-body);
    font-family:'Karla', sans-serif;
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    color:var(--text-heading);
    font-weight:500;
    letter-spacing:-0.01em;
  }

  a{color:inherit;text-decoration:none;}
  img{max-width:100%; display:block;}

  .eyebrow{
    font-family:'Karla', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:600;
  }

  /* ============ TEXTURE LAYERS ============ */
  .hero-bg{
    background-image:
      linear-gradient(180deg, rgba(52,32,15,0) 0%, rgba(52,32,15,0) 82%, rgba(122,95,68,0.16) 92%, rgba(97,52,29,0.3) 100%),
      url('../images/hero-bg.jpg');
    background-color:var(--bg-main);
    background-repeat:no-repeat;
    background-size:auto, 100% 100%;
    background-position:center, top center;
  }

  .texture-square{
    background-image:
      linear-gradient(180deg, rgba(218,201,181,0.9), rgba(218,201,181,0.9)),
      url('../images/travertine-square.webp');
    background-size:340px;
    background-repeat:repeat;
    background-blend-mode:multiply;
  }

  /* ============ NAV ============ */
  nav{
    position:absolute;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    padding:1.4rem clamp(1.4rem, 5vw, 4rem) 0;
  }
  nav img{height:152px; width:auto; display:block;}

  .hero-meta{
    display:flex;
    align-items:center;
    gap:0.7rem;
    margin-bottom:1.3rem;
  }
  .hero-meta .dot{color:var(--clay); font-size:0.6rem;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    aspect-ratio:16/9;
    min-height:56vh;
    display:flex;
    align-items:center;
    padding:12rem clamp(1.5rem, 6vw, 5rem) 5rem;
    box-shadow:inset 0 -1px 0 rgba(122,95,68,0.25);
  }

  .hero-copy{
    max-width:520px;
    width:100%;
    margin-left:clamp(2rem, 16vw, 13rem);
    opacity:0;
    animation:riseIn 1s cubic-bezier(.22,1,.36,1) 0.15s forwards;
  }

  .hero-copy .eyebrow{margin-bottom:0; display:block;}

  .hero h1{
    font-size:clamp(2.4rem, 4.6vw, 3.6rem);
    line-height:1.08;
    margin-bottom:1.3rem;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--terracotta);
  }

  .hero-sub{
    font-size:1.02rem;
    color:var(--text-heading);
    margin-bottom:1.7rem;
    letter-spacing:0.01em;
  }

  .divider-icon{
    display:flex;
    align-items:center;
    gap:0.9rem;
    width:min(340px, 100%);
    margin-bottom:1.7rem;
    color:var(--clay);
  }
  .divider-icon .line{flex:1; height:1px; background:var(--stone-border);}
  .divider-icon svg{width:16px; height:16px; flex-shrink:0;}

  .hero-desc{
    font-size:0.94rem;
    max-width:38ch;
    color:var(--text-body);
  }

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

  /* ============ ABOUT ============ */
  .about{
    padding:6.5rem clamp(1.5rem, 6vw, 6rem) 4rem;
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(2.5rem, 6vw, 6rem);
    align-items:start;
    max-width:1240px;
    margin:0 auto;
  }
  .about .eyebrow{margin-bottom:1rem; display:block;}
  .about h2{
    font-size:clamp(1.9rem, 3.2vw, 2.5rem);
    line-height:1.18;
    margin-bottom:1.6rem;
  }
  .about-copy p{
    margin-bottom:1.2rem;
    font-size:1rem;
    max-width:58ch;
  }
  .about-copy p:last-child{margin-bottom:0;}
  .word-mark{
    color:var(--terracotta);
    font-family:'Fraunces', serif;
    font-style:italic;
  }

  /* ============ MENU STRIP ============ */
  .menu-strip{
    border-top:1px solid var(--stone-border);
    border-bottom:1px solid var(--stone-border);
    padding:2rem clamp(1.2rem, 4vw, 4rem);
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:0;
    max-width:1400px;
    margin:0 auto;
    overflow-x:auto;
  }
  .menu-item{
    display:flex;
    align-items:center;
    gap:0.4rem;
    padding:0 0.85rem;
    position:relative;
    flex-shrink:0;
  }
  .menu-item svg{width:17px; height:17px; color:var(--terracotta); flex-shrink:0;}
  .menu-item span{
    font-size:0.7rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--text-heading);
    font-weight:600;
    white-space:nowrap;
  }
  .menu-item:not(:last-child)::after{
    content:'';
    position:absolute;
    right:-0.15rem;
    top:50%;
    transform:translateY(-50%);
    width:4px; height:4px;
    border-radius:50%;
    background:var(--clay);
  }

  /* ============ INFO SECTION ============ */
  .info{
    padding:6.5rem clamp(1.5rem, 6vw, 6rem);
    position:relative;
  }
  .info-inner{
    max-width:1000px;
    margin:0 auto;
  }
  .info-head{
    text-align:center;
    margin-bottom:3rem;
  }
  .info-head .eyebrow{display:block; margin-bottom:0.7rem;}
  .info-head h2{
    font-size:clamp(1.9rem, 3.2vw, 2.4rem);
  }

  .info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.4rem;
    margin-bottom:1.4rem;
  }

  .info-card{
    background:rgba(232,222,209,0.6);
    border:1px solid var(--stone-border);
    border-radius:6px;
    padding:2.1rem 2rem;
    backdrop-filter:blur(2px);
  }
  .icon-badge{
    width:38px; height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--terracotta);
    color:var(--bg-main);
    margin-bottom:1.1rem;
  }
  .icon-badge svg{width:18px; height:18px;}
  .info-card h3{
    font-size:0.72rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:600;
    margin-bottom:0.7rem;
    font-family:'Karla', sans-serif;
  }
  .info-card address{
    font-style:normal;
    font-size:1.02rem;
    color:var(--text-heading);
    line-height:1.5;
  }
  .info-card .map-link{
    display:inline-block;
    margin-top:0.9rem;
    font-size:0.86rem;
    color:var(--terracotta);
    border-bottom:1px solid var(--clay);
    padding-bottom:1px;
    transition:color 0.25s ease;
  }
  .info-card .map-link:hover{color:var(--terracotta-hover);}

  .hours-row{
    display:flex;
    justify-content:space-between;
    padding:0.4rem 0;
    border-bottom:1px dashed var(--stone-border);
    font-size:0.95rem;
  }
  .hours-row:last-child{border-bottom:none;}
  .hours-row span:first-child{color:var(--text-heading); font-weight:600;}

  .payment-card{
    background:rgba(232,222,209,0.6);
    border:1px solid var(--stone-border);
    border-radius:6px;
    padding:1.3rem 2rem;
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:2.6rem;
  }
  .payment-card .label{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:600;
  }
  .payment-card .label svg{width:20px; height:20px; color:var(--terracotta);}
  .payment-list{
    display:flex;
    gap:0.6rem;
    flex-wrap:wrap;
  }
  .payment-list li{
    list-style:none;
    font-size:0.82rem;
    padding:0.4rem 0.9rem;
    border:1px solid var(--stone-border);
    border-radius:20px;
    color:var(--text-heading);
    background:rgba(255,255,255,0.35);
  }

  /* ============ SOCIAL ============ */
  .social{
    text-align:center;
    padding:6.5rem 1.5rem 7rem;
  }
  .social .eyebrow{display:block; margin-bottom:1rem;}
  .social h2{
    font-size:clamp(1.7rem, 3vw, 2.2rem);
    margin-bottom:1rem;
  }
  .social-sub{
    max-width:520px;
    margin:0 auto 2.2rem;
    font-size:0.98rem;
    color:var(--text-body);
    line-height:1.7;
  }
  .social-rule{
    width:52px; height:1px;
    background:var(--clay);
    margin:0 auto 2.6rem;
  }
  .social-icons{
    display:flex;
    justify-content:center;
    gap:1.4rem;
    flex-wrap:wrap;
  }
  .social-icons a{
    width:50px; height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(202,179,154,0.45);
    border-radius:50%;
    color:var(--terracotta);
    transition:all 0.3s ease;
  }
  .social-icons a:hover{
    background:var(--terracotta);
    color:var(--bg-main);
    border-color:var(--terracotta);
    transform:translateY(-2px);
  }
  .social-icons svg{width:19px; height:19px;}

  /* ============ FOOTER DIVIDER ============ */
  .footer-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    max-width:340px;
    margin:0 auto;
    padding:0 1.5rem;
    opacity:0.4;
  }
  .footer-divider .line{
    flex:1;
    height:1px;
    background:var(--stone-border);
  }
  .footer-divider svg{
    width:14px; height:14px;
    color:var(--clay);
    flex-shrink:0;
  }

  /* ============ FOOTER ============ */
  footer{
    position:relative;
    background:var(--dark);
    color:var(--bg-main);
    padding:5.5rem clamp(1.5rem, 6vw, 6rem) 3rem;
    overflow:hidden;
  }
  .footer-motif{
    position:absolute;
    left:50%;
    bottom:-1rem;
    transform:translateX(-50%);
    width:min(640px, 80vw);
    color:var(--bg-main);
    opacity:0.06;
    pointer-events:none;
  }
  .footer-inner{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:2.5rem;
    padding-bottom:2.8rem;
    margin-bottom:2.2rem;
    border-bottom:1px solid rgba(232,222,209,0.12);
  }

  .footer-col--left{display:flex; flex-direction:column; align-items:flex-start; gap:1rem;}
  .footer-col--center{display:flex; justify-content:center;}
  .footer-col--right{display:flex; flex-direction:column; align-items:flex-end; gap:0.9rem;}

  footer .foot-logo img{height:64px; width:auto; filter:brightness(0) invert(1); opacity:0.92;}
  .foot-eyebrow{
    font-size:0.6875rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(232,222,209,0.55);
    font-weight:600;
  }

  .foot-tagline{
    font-family:'Fraunces', serif;
    font-size:1.2rem;
    color:rgba(232,222,209,0.92);
    text-align:center;
    line-height:1.5;
  }

  .foot-address{
    font-style:normal;
    font-size:0.9375rem;
    color:rgba(232,222,209,0.8);
    line-height:1.6;
    text-align:right;
  }
  .foot-map-link{
    font-size:0.85rem;
    color:var(--clay);
    border-bottom:1px solid transparent;
    transition:border-color 0.25s ease, color 0.25s ease;
  }
  .foot-map-link:hover{
    border-bottom-color:var(--clay);
  }

  .footer-bottom{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    text-align:center;
  }
  .footer-copy{
    font-size:0.75rem;
    color:rgba(232,222,209,0.7);
    letter-spacing:0.02em;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .hero{aspect-ratio:unset; text-align:center; padding-top:13rem; align-items:flex-start;}
    .hero-copy{margin:0 auto;}
    .hero-meta{justify-content:center;}
    .divider-icon{margin-left:auto; margin-right:auto;}
    .hero-desc{margin:0 auto;}
    .hero-bg{background-size:auto, cover; background-position:center, center 30%;}
    .about{grid-template-columns:1fr; gap:2rem; text-align:left;}
    .about h2{max-width:none;}
    .info-grid{grid-template-columns:1fr;}
    .payment-card{justify-content:center; text-align:center;}
    .footer-inner{grid-template-columns:1fr; gap:2.2rem; text-align:center;}
    .footer-col--left{align-items:center;}
    .footer-col--right{align-items:center; text-align:center;}
    .foot-address{text-align:center;}
  }

  @media (max-width:768px){
    .menu-strip{
      flex-direction:column;
      align-items:center;
      overflow-x:visible;
      gap:1rem;
    }
    .menu-item{
      padding:0;
      justify-content:center;
    }
    .menu-item:not(:last-child)::after{
      content:none;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
    .hero-copy{opacity:1;}
  }

  :focus-visible{
    outline:2px solid var(--terracotta);
    outline-offset:3px;
  }