/* Thrifty Katy — warm Florida-thrift editorial style */
:root{
  --cream:#FBF6EC;
  --paper:#FFFDF7;
  --ink:#2C2620;
  --soft:#6B5F53;
  --terra:#C4552D;
  --terra-dark:#A03F1D;
  --green:#3E5C43;
  --mustard:#E3A72F;
  --pink:#F3DDCB;
  --line:#E7DCC9;
  --radius:14px;
  --shadow:0 2px 14px rgba(60,45,30,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:Karla,system-ui,sans-serif;font-size:17.5px;line-height:1.65;
}
h1,h2,h3,.brand,.brand-foot{font-family:Fraunces,Georgia,serif}
img{max-width:100%;display:block}
a{color:var(--terra)}
a:hover{color:var(--terra-dark)}

/* header */
.topbar{
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:.9rem 5vw;background:var(--paper);border-bottom:2px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.brand{font-size:1.5rem;font-weight:900;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.brand em{color:var(--terra);font-style:italic}
.brand-mark{
  background:var(--terra);color:#fff;font-size:.8rem;font-weight:700;
  width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  transform:rotate(-6deg);letter-spacing:.03em;
}
.topbar nav{display:flex;gap:1.3rem;flex-wrap:wrap;margin-right:auto}
.topbar nav a{
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.98rem;
  border-bottom:3px solid transparent;padding:.2rem 0;
}
.topbar nav a:hover,.topbar nav a.active{border-color:var(--mustard);color:var(--terra-dark)}

/* buttons */
.btn{
  display:inline-block;background:var(--terra);color:#fff;text-decoration:none;
  font-weight:700;padding:.75rem 1.5rem;border-radius:999px;border:none;cursor:pointer;
  font-size:1rem;font-family:Karla,sans-serif;transition:background .15s;
}
.btn:hover{background:var(--terra-dark);color:#fff}
.btn-small{padding:.5rem 1.1rem;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--terra);border:2px solid var(--terra)}
.btn-ghost:hover{background:var(--terra);color:#fff}

/* layout */
main{min-height:60vh}
.wrap{max-width:1080px;margin:0 auto;padding:0 5vw}
.narrow{max-width:760px;margin:0 auto;padding:0 5vw}

/* hero */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  max-width:1120px;margin:0 auto;padding:3.5rem 5vw 3rem;
}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08;font-weight:900}
.hero h1 .hl{color:var(--terra);font-style:italic}
.hero p.lede{font-size:1.2rem;color:var(--soft);margin:1.2rem 0 1.8rem}
.hero .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
.hero-img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;transform:rotate(1.2deg);border:8px solid #fff}
.kicker{
  display:inline-block;background:var(--mustard);color:var(--ink);font-weight:700;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .8rem;border-radius:6px;transform:rotate(-1.5deg);margin-bottom:1rem;
}

/* sections */
section{padding:2.6rem 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.section-head h2{font-size:1.9rem;font-weight:900}
.section-head a{font-weight:700;text-decoration:none;white-space:nowrap}
.tint{background:var(--paper);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:transform .15s;
}
.card:hover{transform:translateY(-4px);color:var(--ink)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.card .pad{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{font-size:1.18rem;line-height:1.3;font-weight:700}
.card p{color:var(--soft);font-size:.95rem}
.tag{
  align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);background:#E8EFE4;
  padding:.18rem .6rem;border-radius:5px;
}
.tag.terra{color:var(--terra-dark);background:var(--pink)}
.cost{
  margin-top:auto;align-self:flex-start;background:var(--green);color:#fff;
  font-weight:700;font-size:.85rem;padding:.25rem .7rem;border-radius:999px;
}

/* newsletter */
.newsletter{
  background:var(--green);color:#F4F1E4;border-radius:var(--radius);
  padding:2.6rem 2.4rem;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;
}
.newsletter h2{font-size:1.8rem;color:#fff}
.newsletter p{opacity:.92;margin-top:.6rem}
.newsletter form{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter input{
  flex:1;min-width:220px;padding:.8rem 1rem;border-radius:999px;border:none;
  font-size:1rem;font-family:Karla,sans-serif;
}
.newsletter .btn{background:var(--mustard);color:var(--ink)}
.newsletter .btn:hover{background:#f0b93f}

/* article pages */
.article-head{max-width:760px;margin:0 auto;padding:2.8rem 5vw 0;text-align:left}
.article-head h1{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15;font-weight:900;margin:.8rem 0}
.byline{color:var(--soft);font-size:.95rem}
.article-hero{max-width:900px;margin:1.8rem auto;padding:0 5vw}
.article-hero img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
article.body{max-width:760px;margin:0 auto;padding:0 5vw 3rem}
article.body h2{font-size:1.55rem;margin:2.2rem 0 .8rem;font-weight:900}
article.body h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
article.body p{margin:.9rem 0}
article.body ul,article.body ol{margin:.9rem 0 .9rem 1.4rem}
article.body li{margin:.45rem 0}
article.body blockquote{
  border-left:4px solid var(--mustard);background:var(--paper);
  padding:1rem 1.3rem;margin:1.4rem 0;border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;
}
.callout{
  background:var(--pink);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6rem 0;
}
.callout strong{color:var(--terra-dark)}

/* cost table */
table.costs{width:100%;border-collapse:collapse;margin:1.4rem 0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.costs th{background:var(--green);color:#fff;text-align:left;padding:.6rem .9rem;font-size:.9rem}
table.costs td{padding:.55rem .9rem;border-bottom:1px solid var(--line);font-size:.95rem}
table.costs tr:last-child td{border-bottom:none;font-weight:700;background:var(--paper)}
.big-cost{
  display:inline-block;background:var(--green);color:#fff;font-weight:700;
  font-size:1.05rem;padding:.45rem 1.1rem;border-radius:999px;margin:.4rem 0;
}

/* recipe meta strip */
.recipe-meta{display:flex;gap:1rem;flex-wrap:wrap;margin:1.2rem 0}
.recipe-meta div{background:#fff;border:2px solid var(--line);border-radius:10px;padding:.5rem 1rem;font-size:.9rem}
.recipe-meta b{display:block;color:var(--green);font-size:1.05rem}

/* store list (thrift guide) */
.store{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.6rem;margin:1.3rem 0}
.store h3{margin:0 0 .3rem;font-size:1.25rem}
.store .meta{color:var(--soft);font-size:.9rem;margin-bottom:.5rem}
.stars{color:var(--mustard);letter-spacing:.1em}

/* footer */
footer{background:var(--ink);color:#D9CFBE;margin-top:3rem}
.footwrap{
  max-width:1080px;margin:0 auto;padding:2.8rem 5vw 1.5rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;
}
.brand-foot{font-size:1.5rem;color:#fff;font-weight:900;margin-bottom:.5rem}
.brand-foot em{color:var(--mustard);font-style:italic}
footer h4{color:#fff;margin-bottom:.6rem;font-size:1rem}
footer a{display:block;color:#D9CFBE;text-decoration:none;margin:.35rem 0}
footer a:hover{color:var(--mustard)}
.fineprint{text-align:center;font-size:.8rem;opacity:.65;padding:1rem 5vw 1.6rem;border-top:1px solid #453d33;max-width:1080px;margin:0 auto}

/* responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:2.2rem}
  .hero-img{aspect-ratio:16/10;transform:none}
  .cards{grid-template-columns:1fr 1fr}
  .newsletter{grid-template-columns:1fr}
  .footwrap{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cards{grid-template-columns:1fr}
  .topbar{gap:.8rem}
  .topbar nav{gap:.9rem;font-size:.9rem}
  .footwrap{grid-template-columns:1fr}
}