/* ==========================================================================
   Dino's Meat Market — shared design system

   Direction: PAINTED SHOP SIGNAGE. Gold on deep green, heavy slab display type
   in the manner of hand-lettered butcher signage, condensed gothic for labels
   the way enamel signs and price boards were set, and a serif text face.
   Dense rather than airy — a shop window is crowded, not minimal.
   ========================================================================== */

:root{
  /* --- Type --- */
  --font-display:'Bevan',Rockwell,Georgia,serif;              /* signboard slab */
  --font-label:'Oswald','Arial Narrow',Impact,sans-serif;     /* enamel-sign caps */
  --font-body:'Source Serif 4',Georgia,'Times New Roman',serif;

  /* --- Paint --- */
  --green-dark:#0f2a1a;   /* the sign field */
  --green:#173d27;
  --green-mid:#2a5c3c;
  --cream:#f0e8d5;        /* warm painted cream */
  --paper:#faf5e8;
  --ink:#1e2620;
  --muted:#6a7167;
  --gold:#a8822a;
  --gold-bright:#cfa63a;
  --gold-soft:#e8d49b;
  --ox:#7d1d1d;           /* oxblood — closed, sold out, awning stripe */
  --line:#ddd3ba;
  --line-strong:#c4b795;

  /* --- Form --- */
  --r:2px;
  --shadow:0 1px 2px rgba(15,42,26,.07);
  --shadow-lift:0 12px 30px rgba(15,42,26,.16);

  /* --- Rhythm (tighter than before: density is the point) --- */
  --pad:clamp(18px,4.5vw,32px);
  --maxw:1140px;
  --measure:64ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--ink);background:var(--cream);
  line-height:1.58;
  font-size:clamp(1rem,.97rem + .18vw,1.07rem);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,.display{
  font-family:var(--font-display);font-weight:400;
  line-height:1.06;letter-spacing:.005em;text-wrap:balance
}
h3,h4{
  font-family:var(--font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.2
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold-soft);color:var(--green-dark)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* padding-INLINE (not the `padding` shorthand) so that a class sharing the same
   element — .sec, .closing, main — can set vertical padding with padding-block
   without silently wiping out the horizontal gutter. That mismatch is what threw
   the sourcing and closing bands ~32px left of every other section. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* Small caps label, set the way a sign painter would letter a sub-line */
.eyebrow{
  font-family:var(--font-label);font-size:.74rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px
}
/* Heavy double rule — the classic sign border */
.rule{
  height:0;border:0;border-top:3px solid var(--green-dark);
  border-bottom:1px solid var(--green-dark);padding-bottom:3px;
  margin:14px 0 22px;max-width:250px
}
.band-green .rule,.band-dark .rule{
  border-top-color:var(--gold-bright);border-bottom-color:rgba(232,212,155,.5)
}
/* Awning stripe */
.stripe{
  height:11px;
  background:repeating-linear-gradient(90deg,
    var(--green) 0 20px,var(--cream) 20px 40px,
    var(--ox) 40px 60px,var(--cream) 60px 80px)
}
.tint{background:linear-gradient(180deg,rgba(23,61,39,.05),rgba(23,61,39,0) 65%)}

/* ---------- Buttons: painted plates, not pills ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 26px;border-radius:var(--r);
  font-family:var(--font-label);font-size:.86rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background .18s,color .18s,border-color .18s
}
.btn-gold{background:var(--gold-bright);color:#2b1f00;border-color:#8f6f18}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold)}
.btn-ghost{border-color:var(--gold-soft);color:var(--gold-soft);background:transparent}
.btn-ghost:hover{background:var(--gold-soft);color:var(--green-dark)}
.btn-green{background:var(--green-dark);color:var(--gold-soft);border-color:var(--green-dark)}
.btn-green:hover{background:var(--green);border-color:var(--gold)}
.btn-outline{border-color:var(--green-dark);color:var(--green-dark);background:transparent}
.btn-outline:hover{background:var(--green-dark);color:var(--gold-soft)}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--green-dark);color:var(--gold-soft);text-align:center;
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:8px 12px
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:2px solid var(--green-dark)
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:9px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--green-dark)}
.brand .mark{width:44px;height:44px;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1}
/* Stacked like the storefront sign: DINO'S over spaced MEAT MARKET */
.brand-text b{
  font-family:var(--font-display);font-weight:400;font-size:1.24rem;
  letter-spacing:.02em;white-space:nowrap
}
.brand-text span{
  font-family:var(--font-label);font-size:.56rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--green);margin-top:5px;white-space:nowrap
}
.nav-links{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav-links a{
  display:block;padding:10px 12px;text-decoration:none;
  font-family:var(--font-label);font-size:.8rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-dark);transition:color .15s
}
.nav-links a:hover{color:var(--ox)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold-bright)}
.nav-links a.cta{
  background:var(--green-dark);color:var(--gold-soft);
  padding:11px 17px;margin-left:12px;border-radius:var(--r);font-weight:600
}
.nav-links a.cta:hover{background:var(--ox);color:var(--gold-soft)}
.nav-links a.cta[aria-current="page"]{box-shadow:none;background:var(--ox)}

.nav-toggle{
  display:none;background:transparent;border:2px solid var(--green-dark);
  border-radius:var(--r);width:46px;height:46px;cursor:pointer;
  align-items:center;justify-content:center;padding:0
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--green-dark);
  position:relative;transition:.2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--green-dark);transition:.2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:2px solid var(--green-dark);
    box-shadow:var(--shadow-lift);padding:4px var(--pad) 18px
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:.88rem}
  .nav-links a.cta{margin:14px 0 0;text-align:center;border-bottom:none;padding:14px 18px}
}

/* ---------- Sections: tighter, denser ---------- */
/* --navh is measured by site.js so sticky offsets and anchor landings
   stay correct at any font size or viewport width. */
section{scroll-margin-top:calc(var(--navh,62px) + 12px)}
.sec{padding-block:clamp(38px,4.6vw,64px)}
.sec h2{font-size:clamp(1.45rem,1.18rem + 1.3vw,2.1rem);margin:0;color:var(--green-dark)}
.band-green{background:var(--green);color:var(--paper)}
.band-dark{background:var(--green-dark);color:var(--gold-soft)}
.band-green .sec h2,.band-dark .sec h2{color:var(--gold-soft)}
.band-green .eyebrow,.band-dark .eyebrow{color:var(--gold-bright)}
.lead{font-size:clamp(1.03rem,1rem + .3vw,1.14rem);max-width:var(--measure)}
.band-green .lead{color:rgba(250,245,232,.9)}

/* Panels read as painted boards: hairline frame, no float */
.panel{
  background:var(--paper);border:1px solid var(--line-strong);
  border-top:3px solid var(--green-dark);border-radius:0;box-shadow:var(--shadow)
}

/* Engraved line icons */
.icon{width:36px;height:36px;stroke:var(--green-dark);stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon .accent{stroke:var(--gold)}

/* ---------- Footer ---------- */
footer{
  background:var(--green-dark);color:var(--gold-soft);
  padding:clamp(34px,4.4vw,50px) 0 22px
}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
footer h4{
  font-family:var(--font-label);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 10px
}
footer .fh{font-family:var(--font-display);font-size:1.4rem;color:var(--gold-soft);
  margin:0 0 4px;letter-spacing:.02em;line-height:1.1}
footer .fsub{font-family:var(--font-label);font-size:.6rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;margin:0 0 12px;
  color:rgba(232,212,155,.75)}
footer p{margin:4px 0;font-size:.9rem;color:rgba(232,212,155,.85)}
footer a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(232,212,155,.3)}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 6px}
.foot-links a{border:none;color:rgba(232,212,155,.88);font-size:.9rem}
.foot-links a:hover{color:var(--gold-bright)}
.foot-bottom{
  border-top:1px solid rgba(232,212,155,.18);margin-top:28px;padding-top:16px;
  font-family:var(--font-label);font-size:.68rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(232,212,155,.6);display:flex;flex-wrap:wrap;gap:8px;
  justify-content:space-between
}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold-bright);margin-right:7px;vertical-align:1px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}