/* KitchenHacksDaily — shared shell: tokens, menu, footer */

:root{
  --paper:#f6f1e6;
  --paper-2:#fffdf8;
  --paper-3:#efe7d6;
  --ink:#211e19;
  --ink-soft:#4b443a;
  --muted:#8a8073;
  --line:#e2d8c5;
  --olive:#3d4f38;
  --olive-deep:#28331f;
  --terracotta:#bf5a33;
  --terracotta-dark:#9c4525;
  --mustard:#d3a13d;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 18px 40px -24px rgba(40,51,31,.45);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Helvetica,sans-serif;
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

a{color:var(--terracotta-dark)}

::selection{background:var(--mustard);color:var(--olive-deep)}

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

/* ---------- disclosure bar ---------- */

.disclosure-bar{
  background:var(--olive-deep);
  color:#d8dccb;
  padding:.55rem 1.25rem;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.disclosure-bar strong{color:var(--mustard);font-weight:600}

/* ---------- site menu ---------- */

.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,241,230,.88);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line);
}

.site-nav-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:.7rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1.25rem;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:var(--ink);
  flex:0 0 auto;
}
.brand-mark svg{display:block;flex:0 0 auto}
.brand-mark .bm-text{display:flex;flex-direction:column;line-height:1.05}
.brand-mark .bm-name{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:-.015em;
}
.brand-mark .bm-name em{font-style:italic;color:var(--terracotta)}
.brand-mark .bm-sub{
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
  font-weight:600;
}

.menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.15rem;
  list-style:none;
}
.menu a{
  display:block;
  padding:.5rem .72rem;
  font-size:.84rem;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:999px;
  position:relative;
  transition:color .18s ease,background .18s ease;
}
.menu a:hover{color:var(--olive-deep);background:var(--paper-3)}
.menu a[aria-current="page"]{color:var(--olive-deep)}
.menu a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:.72rem;right:.72rem;bottom:.22rem;
  height:2px;
  background:var(--terracotta);
  border-radius:2px;
}
.menu .menu-pin a{
  background:var(--olive);
  color:#f3f0e4;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-left:.4rem;
}
.menu .menu-pin a:hover{background:var(--olive-deep);color:#fff}
.menu .menu-pin svg{width:14px;height:14px;fill:currentColor}

.menu-toggle{
  display:none;
  margin-left:auto;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.5rem .6rem;
  cursor:pointer;
  color:var(--ink);
}
.menu-toggle span{
  display:block;
  width:18px;height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .22s ease,opacity .18s ease;
}
.menu-toggle span+span{margin-top:4px}
.site-nav.open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav.open .menu-toggle span:nth-child(2){opacity:0}
.site-nav.open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:900px){
  .menu-toggle{display:block}
  .menu{
    position:absolute;
    left:0;right:0;top:100%;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:.5rem .75rem 1rem;
    display:none;
  }
  .site-nav.open .menu{display:flex}
  .menu a{padding:.75rem .6rem;font-size:.95rem;border-radius:10px}
  .menu a[aria-current="page"]::after{display:none}
  .menu a[aria-current="page"]{background:var(--paper-3)}
  .menu .menu-pin a{margin:.5rem 0 0;justify-content:center}
}

/* ---------- footer ---------- */

.site-footer{
  background:var(--olive-deep);
  color:#cbd0bd;
  padding:3rem 1.25rem 2rem;
  margin-top:3.5rem;
}
.footer-inner{max-width:var(--wrap);margin:0 auto}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .fb-name{
  font-family:var(--serif);
  font-size:1.5rem;
  color:#f6f1e6;
  letter-spacing:-.02em;
  margin-bottom:.5rem;
}
.footer-brand .fb-name em{font-style:italic;color:var(--mustard)}
.footer-brand p{font-size:.9rem;max-width:34rem}
.footer-brand .fb-pin{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:1rem;
  color:var(--mustard);
  font-size:.85rem;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(211,161,61,.4);
  padding-bottom:2px;
}
.footer-brand .fb-pin svg{width:15px;height:15px;fill:currentColor}
.footer-brand .fb-pin:hover{color:#fff;border-color:#fff}
.footer-links h4{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--mustard);margin-bottom:.9rem;font-weight:700;
}
.footer-nav{display:flex;flex-direction:column;gap:.5rem;list-style:none}
.footer-nav a{color:#cbd0bd;text-decoration:none;font-size:.88rem}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-bottom{padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between}
.footer-disclosure{font-size:.74rem;color:#9aa189;max-width:44rem;font-style:italic}
.footer-copy{font-size:.74rem;color:#9aa189}

@media(max-width:760px){
  .footer-top{grid-template-columns:1fr;gap:2rem}
}