/* Grandma's Pot — isolated mobile masthead refinement.
   Intentionally limited to the opening seam; the locked body/footer polish remains untouched. */
@media(max-width:560px){
  .site-header{
    position:relative;
    z-index:55;
    background:var(--paper);
    border:0;
    box-shadow:0 5px 18px rgba(53,34,24,.09);
  }
  .site-header:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:rgba(155,56,23,.34);
    pointer-events:none;
  }
  .header-grid{
    position:relative;
    min-height:60px;
    padding:4px 0;
    gap:8px;
    align-items:center;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
  }
  .brand img{
    height:48px!important;
    width:auto!important;
    max-width:60vw!important;
    max-height:none!important;
    object-fit:contain;
    object-position:left center;
    filter:none;
  }
  .head-right{
    margin-left:auto;
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:4px!important;
  }
  .contact-row{display:none!important}
  .nav-row{display:contents!important}
  .lang{
    display:flex!important;
    order:1;
    align-items:center;
    gap:3px;
    padding:0;
    border:0;
    white-space:nowrap;
  }
  .lang button{
    min-width:22px;
    padding:7px 2px 6px;
    border:0;
    background:none;
    font:800 .58rem/1 var(--sans);
    letter-spacing:.055em;
    color:#7d6956;
  }
  .lang button.active{
    color:var(--terra2);
    box-shadow:inset 0 -1px 0 rgba(193,81,34,.72);
  }
  .lang span{font:500 .55rem/1 var(--sans);color:rgba(72,48,32,.43)}
  .hamb{
    order:2;
    width:34px;
    height:32px;
    margin-left:3px;
    padding:0 0 0 7px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:inset 1px 0 0 rgba(74,43,24,.16);
  }
  .hamb span,.hamb span:before,.hamb span:after{
    width:19px;
    height:1.5px;
    border-radius:2px;
    background:#352218;
    transition:transform .18s ease,top .18s ease,opacity .18s ease,background-color .18s ease;
  }
  .hamb span:before{top:-6px}.hamb span:after{top:6px}
  .hamb[aria-expanded="true"] span{background:transparent}
  .hamb[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
  .hamb[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
  .main-nav{
    display:none!important;
    position:absolute;
    z-index:70;
    left:-17px;
    right:-17px;
    top:100%;
    width:auto;
    grid-template-columns:1fr 1fr;
    gap:2px 20px;
    padding:15px 22px 19px;
    background:rgba(247,236,216,.99);
    border-top:1px solid rgba(74,43,24,.08);
    border-bottom:1px solid rgba(74,43,24,.16);
    box-shadow:0 14px 28px rgba(47,31,20,.12);
  }
  .nav-row.open .main-nav{display:grid!important}
  .main-nav a{padding:9px 0;font-size:.7rem}

  /* Sharper, shorter opening: keep the approved scene, reduce dead air. */
  .hero{min-height:535px;box-shadow:inset 0 9px 18px rgba(12,8,4,.14)}
  .hero img{object-position:24% center!important;transform:scale(1.015)!important;filter:saturate(1.06) contrast(1.05) brightness(.92)!important}
  .hero-copy{padding:166px 0 54px}
  .hero h1{font-size:clamp(2.24rem,10.55vw,2.9rem);line-height:1;max-width:11ch;margin-bottom:16px}
  .hero p{font-size:.98rem;line-height:1.43;max-width:29ch;margin-bottom:22px}
  .buttons{gap:8px}
  .btn{min-height:46px;padding:0 17px;font-size:.69rem}

  /* The hero already contains the primary actions; don't cover them with the utility rail. */
  .dock{transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .dock.dock-hidden{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(calc(100% + 18px))!important;
  }
}
@media(max-width:370px){
  .header-grid{min-height:58px}
  .brand img{height:44px!important;max-width:57vw!important}
  .lang button{min-width:20px;font-size:.54rem}
  .hamb{width:32px;height:30px}
  .main-nav{left:-14px;right:-14px;padding-inline:18px}
  .hero{min-height:515px}
  .hero-copy{padding-top:154px}
}
@media(prefers-reduced-motion:reduce){
  .hamb span,.hamb span:before,.hamb span:after,.dock{transition:none!important}
}


/* REAL TAVERNA HERO COMPOSITION */
/* The Facebook-sourced entrance is portrait. Preserve it instead of pretending it is a landscape stock shot. */
@media(min-width:821px){
  .hero{
    min-height:675px;
    background:
      radial-gradient(circle at 18% 18%,rgba(193,81,34,.13),transparent 30%),
      linear-gradient(145deg,#24170f 0%,#18110d 52%,#221912 100%);
  }
  .hero>img{
    inset:0 0 0 auto!important;
    width:48%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 54%!important;
    transform:none!important;
    filter:saturate(1.02) contrast(1.035) brightness(.96)!important;
    box-shadow:-34px 0 58px rgba(7,4,2,.28);
  }
  .hero:after{
    background:
      linear-gradient(90deg,
        rgba(10,7,5,.90) 0%,
        rgba(10,7,5,.80) 35%,
        rgba(10,7,5,.54) 47%,
        rgba(10,7,5,.18) 57%,
        rgba(10,7,5,0) 73%)!important;
  }
  .hero-copy{
    width:min(650px,47%)!important;
    padding:82px 0 76px!important;
  }
}
@media(min-width:821px) and (max-width:1120px){
  .hero{min-height:620px}
  .hero>img{width:50%!important;object-position:center 52%!important}
  .hero-copy{width:46%!important;padding:68px 0 64px!important}
}

/* Phones and tablets naturally suit the original portrait photograph. */
@media(max-width:820px){
  .hero>img{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 52%!important;
    transform:none!important;
    filter:saturate(1.02) contrast(1.035) brightness(.92)!important;
    box-shadow:none!important;
  }
  .hero:after{
    background:
      linear-gradient(0deg,
        rgba(8,5,3,.93) 0%,
        rgba(8,5,3,.66) 42%,
        rgba(8,5,3,.22) 73%,
        rgba(8,5,3,.06) 100%)!important;
  }
}
@media(max-width:560px){
  .hero>img{object-position:center 51%!important}
}