:root {
    --green-deep:#12352A;
    --green-mid:#1E5C43;
    --paper:#F3ECD9;
    --paper-dark: #C9B98A;
    --red-awning: #B23A2E;
    --gold: #C69A3D;
    --ink: #221F1A;
    --ink-soft: #4A453C;

}

* {
    box-sizing: border-box;}
    html { scroll-behavior: smooth;}
    body {
        margin: 0;
        background:var(--paper);
        color:var(--ink);
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,'Open Sans', 'Helvetica Neue', sans-serif;
        -webkit-font-smoothing: antialiased;
    }


/* Awning Header */

.awning{
    background:repeating-linear-gradient(
        90deg,
        var(--green-deep),0px, var(--green-deep) 40px, var(--green-mid) 40px, var(--green-mid) 80px
    );
    padding:0;
    position:relative
}
.awning::after{
    content:"";
    display:block;
    height:14px;
    background:repeating-linear-gradient(
        90deg,
        var(--red-awning),0px 40px, var(--red-awning) 40px 42px, var(--paper) 42px 80px, var(--green-deep) 42px 80px, var(--paper) 80px 82px
    );
}
    .header-inner {
        max-width: 960px;
        margin: 0 auto;
        padding: 36px 24px 30px;
        text-align: center;
    }

     .brand-star {
        color: var(--gold);
        font-size:14px;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        font-family:'Arial Narrow', Arial, sans-serif;
        font-weight:500;  
     }
     
     .brand-name {
        font-family: 'Arial Narrow', Arial, sans-serif;
        font-size: 700;
        font-size:clamp(45px, 7vw, 64px);
        color: var(--paper-dark);
        letter-spacing: 0.02em;
        margin: 6px 0 40px;
        text-transform: uppercase;
        line-height: 1;
     }

     .brand-sub {
        color:var(--gold);
        font-size:15px;
        letter-spacing:0.18em;
        text-transform:uppercase;
        margin-bottom:18px;
     }

     .halal-badge {
        display:inline-flex;
        gap:10px;
        align-items:center;
        background:var(--paper);
        color:var(--green-deep);
        font-family:'Arial Narrow', Arial, sans-serif;
        font-weight:600;
        font-size: 14px;
        letter-spacing:0.14em;
        text-transform:uppercase;
        padding: 8px 18px;
        border-radius: 2px;
     }

     .halal-badge span.dot{width:6px;height:6px;background:var(--red-awning);border-radius:50%;display:inline-block}
     
     /*Info  Section*/
     .info-strip {
        background:var(--ink);
        color:var(--paper-dark);
        font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
        font-size:14px;
     }

     .info-inner {
        max-width:960px;
        margin:0 auto;
        padding: 12px 24px;
        display:flex;
        flex-wrap:wrap;
        gap: 8px 24px;
        justify-content: center;
        align-items:center;
     }

     .info-inner a {
        color:var(--gold);
        text-decoration:none;
        border-bottom:1px dotted var(--gold);
     }
     .info-inner .divider{opacity:0.5;}

     /* ===== Sticky nav ===== */
  nav.tabs{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--paper);
    border-bottom:2px solid var(--ink);
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  nav.tabs::-webkit-scrollbar{display:none;}
  .tabs-inner{
    max-width:960px;
    margin:0 auto;
    display:flex;
    gap:2px;
    padding:0 12px;
  }
  nav.tabs a{
    font-family:'Arial Narrow', Arial, sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    padding:14px 14px;
    display:inline-block;
    border-bottom:3px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.tabs a:hover, nav.tabs a.active{
    color:var(--green-deep);
    border-bottom-color:var(--red-awning);
  }
 
  /* ===== Content ===== */
  main{max-width:960px;margin:0 auto;padding:8px 20px 80px;}
 
  .section{
    padding-top:56px;
    margin-top:-56px; /* offset for sticky nav anchor */
  }
  .section-head{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin:56px 0 22px;
  }
  .section-head .num{
    font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
    color:var(--red-awning);
    font-size:14px;
  }
  .section-head h2{
    font-family:'Arial Narrow', Arial, sans-serif;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:26px;
    font-weight:700;
    color:var(--green-deep);
    margin:0;
  }
  .section-head::after{
    content:"";
    flex:1;
    border-bottom:2px dashed var(--paper-dark);
    transform:translateY(-6px);
  }
  .section:first-of-type .section-head{margin-top:34px;}
 
  .top-star{
    background:var(--green-deep);
    border-radius:6px;
    padding:22px 24px;
    margin-bottom:36px;
    position:relative;
    overflow:hidden;
  }
  .top-star::before{
    content:"★ TOP STAR PICKS";
    position:absolute;
    top:12px;
    right:16px;
    font-family:'Arial Narrow', Arial, sans-serif;
    font-size:11px;
    letter-spacing:0.16em;
    color:var(--gold);
    opacity:0.85;
  }
  .top-star-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:14px;
    margin-top:10px;
  }
  .top-star-item{
    background:rgba(243,236,217,0.06);
    border:1px solid rgba(198,154,61,0.35);
    border-radius:4px;
    padding:14px 16px;
  }
  .top-star-item h3{
    font-family:'Arial Narrow', Arial, sans-serif;
    color:var(--paper);
    font-size:15px;
    text-transform:uppercase;
    margin:0 0 4px;
    letter-spacing:0.03em;
  }
  .top-star-item p{
    color:var(--paper-dark);
    font-size:12.5px;
    margin:0 0 8px;
    line-height:1.5;
  }
  .top-star-item .price{
    color:var(--gold);
    font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
    font-weight:700;
    font-size:14px;
  }
 
  /* menu grid */
  .menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:0 32px;
  }
  .item{
    padding:14px 0;
    border-bottom:1px solid var(--paper-dark);
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:baseline;
  }
  .item-name{
    font-family:'Arial Narrow', Arial, sans-serif;
    font-weight:600;
    font-size:14.5px;
    text-transform:uppercase;
    color:var(--ink);
    letter-spacing:0.02em;
  }
  .item-note{
    display:block;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:400;
    font-style:italic;
    text-transform:none;
    color:var(--ink-soft);
    font-size:12.5px;
    margin-top:3px;
    letter-spacing:0;
  }
  .item-price{
    font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
    font-weight:700;
    color:var(--red-awning);
    font-size:13.5px;
    white-space:nowrap;
    text-align:right;
  }
  .item-price small{
    display:block;
    font-weight:400;
    color:var(--ink-soft);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
 
  /* cold cuts pound note */
  .lb-note{
    font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
    font-size:11.5px;
    color:var(--ink-soft);
    margin:-10px 0 18px;
  }
 
  /* CTA band */
  .order-cta{
    background:var(--red-awning);
    border-radius:6px;
    padding:26px 28px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    margin:50px 0;
  }
  .order-cta h3{
    font-family:'Arial Narrow', Arial, sans-serif;
    color:var(--paper);
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:19px;
    margin:0 0 4px;
  }
  .order-cta p{color:rgba(243,236,217,0.85);margin:0;font-size:13px;}
  .order-cta .btns{display:flex;gap:10px;flex-wrap:wrap;}
  .btn{
    font-family:'Arial Narrow', Arial, sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    padding:12px 20px;
    border-radius:3px;
    display:inline-block;
  }
  .btn-primary{background:var(--paper);color:var(--red-awning);}
  .btn-ghost{background:transparent;color:var(--paper);border:1.5px solid var(--paper);}
 
  footer{
    background:var(--ink);
    color:var(--paper-dark);
    text-align:center;
    padding:34px 20px;
    font-family:ui-monospace, 'SF Mono', 'Courier New', monospace;
    font-size:12px;
  }
  footer .fname{
    font-family:'Arial Narrow', Arial, sans-serif;
    color:var(--gold);
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-size:14px;
    margin-bottom:8px;
  }
 
  @media (max-width:600px){
    .menu-grid{grid-template-columns:1fr;}
    .info-inner{font-size:12px;}
    .order-cta{flex-direction:column;align-items:flex-start;}
  }
 
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }