:root{
  --bg:#FBF6EF;
  --surface:#FFFFFF;
  --ink:#231C18;
  --muted:#7A6A5C;
  --line:#E8DECF;
  --accent:#B5552B;       /* terracotta */
  --accent-deep:#8C3F1E;
  --sage:#6E7C5C;
  --sage-deep:#4F5A41;
  --shadow:0 1px 2px rgba(35,28,24,.04), 0 8px 28px rgba(35,28,24,.06);
  --radius:14px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:17px; line-height:1.65;
  font-feature-settings: "ss01", "cv02", "cv11";
}
img{max-width:100%; display:block}
a{color:var(--accent-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Fraunces", "Iowan Old Style", Georgia, serif; line-height:1.15; letter-spacing:-0.015em; margin:0 0 .5em; font-weight:600}
h1{font-variation-settings:"opsz" 96}
h2{font-variation-settings:"opsz" 36}
h1{font-size:2.5rem}
h2{font-size:1.6rem}
h3{font-size:1.15rem}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.muted{color:var(--muted); font-size:.92rem}
.eyebrow{font-family:ui-sans-serif,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--accent); margin:0 0 .5rem}

/* Header */
.site-header{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.site-header__inner{display:flex; align-items:center; gap:24px; padding:14px 22px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-family:"Fraunces",Georgia,serif; font-size:1.5rem; font-weight:600; letter-spacing:-0.02em}
.brand:hover{text-decoration:none}
.brand__mark{color:var(--accent)}
.brand__text em{color:var(--accent); font-style:normal}
.nav{display:flex; gap:22px; margin-left:18px; font-size:.94rem; font-weight:500}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--accent-deep); text-decoration:none}
.search{margin-left:auto; display:flex; gap:6px; align-items:center}
.search input{font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg); width:240px}
.search button{font-size:1.15rem; background:var(--accent); color:#fff; border:0; border-radius:999px; width:36px; height:36px; cursor:pointer}
.search--lg input{width:100%; max-width:520px}
.search--lg{margin:18px 0}

/* Layout */
.site-main{padding:34px 22px 60px}

/* Hero */
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:42px; align-items:center; padding:24px 0 18px}
.hero h1{font-size:3.2rem; margin:.2em 0}
.hero .lede{font-size:1.18rem; color:#3A3128; max-width:48ch}
.hero__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.hero__art img{border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:16/10; object-fit:cover}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-family:ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:.98rem}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-deep); text-decoration:none}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{background:var(--surface); text-decoration:none}

/* Sections */
.section{margin:48px 0}
.section__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:18px; flex-wrap:wrap}
.section__head h2{margin:0}
.section__more{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.95rem}

/* Categories */
.cat-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:16px}
.cat-grid--lg{grid-template-columns:repeat(4, 1fr); gap:22px}
.cat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; display:block}
.cat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}
.cat-card__img{aspect-ratio:4/3; background-size:cover; background-position:center}
.cat-card__body{padding:12px 14px; display:flex; flex-direction:column}
.cat-card__title{font-weight:700}

/* Cards */
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.feed{margin-top:48px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card__img{position:relative; display:block; aspect-ratio:4/3; overflow:hidden}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.card:hover .card__img img{transform:scale(1.04)}
.card__cat{position:absolute; left:12px; top:12px; background:rgba(35,28,24,.78); color:#fff; font-size:.72rem; padding:4px 10px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; font-family:ui-sans-serif,system-ui,sans-serif}
.card__body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__body h3{margin:0; font-size:1.18rem}
.card__body h3 a{color:var(--ink)}
.card__body h3 a:hover{color:var(--accent-deep); text-decoration:none}
.card__meta{margin:0}
.card__desc{margin:0; color:#3A3128; font-size:.96rem}
.card__foot{margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--line)}
.like{color:var(--accent); font-weight:600; font-family:ui-sans-serif,system-ui,sans-serif}
.card__more{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.92rem}

/* Pagination */
.pagination{display:flex; gap:14px; align-items:center; justify-content:center; margin:32px 0 0}
.pagination__btn{padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.92rem}
.pagination__btn:hover{background:var(--bg); text-decoration:none}
.pagination__info{color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.9rem}

/* Page heads & crumbs */
.crumbs{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.88rem; color:var(--muted); margin:0 0 18px}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink)}
.page-head{margin:8px 0 28px; max-width:60ch}
.page-head .lede{font-size:1.1rem; color:#3A3128}

/* Tags */
.side-tags h2{margin-bottom:14px}
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.86rem}
.tag:hover{background:var(--bg); border-color:var(--accent); color:var(--accent-deep); text-decoration:none}
.tag--md{font-size:.95rem}
.tag--lg{font-size:1.05rem; padding:8px 14px}
.tag-cloud--lg .tag{padding:8px 14px}

/* Pattern page */
.pattern__head .lede{font-size:1.18rem; color:#3A3128; max-width:62ch}
.pattern__meta{display:flex; flex-wrap:wrap; gap:14px 28px; margin:14px 0 22px; padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.92rem}
.pattern__meta strong{display:block; color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px}
.pattern__hero img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.pattern__layout{display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:44px; margin-top:32px}
.pattern__body section{margin:0 0 40px}
.pattern__body h2{font-size:1.5rem; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:14px}
.bullets{padding-left:20px; margin:0}
.bullets li{margin:6px 0}
.bullets--tips li{margin:10px 0; color:#2D241D}
.steps{list-style:none; padding:0; margin:0; counter-reset:step}
.steps > li{margin:0 0 22px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.steps h3{display:flex; align-items:center; gap:12px; margin:0 0 8px; font-size:1.1rem}
.steps__num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:var(--accent); color:#fff; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.9rem}
.steps p{margin:0; color:#2D241D}

/* Sidebar */
.pattern__side{display:flex; flex-direction:column; gap:18px; position:sticky; top:80px; align-self:start}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.side-card h3{margin:0 0 10px; font-size:1.05rem}
.dl{margin:0; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.9rem}
.dl dt{color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; margin-top:8px}
.dl dt:first-of-type{margin-top:0}
.dl dd{margin:2px 0 0; color:var(--ink)}
.side-list{list-style:none; padding:0; margin:0}
.side-list li{margin:0 0 10px}
.side-list a{display:flex; gap:10px; align-items:center; color:var(--ink)}
.side-list img{width:60px; height:48px; object-fit:cover; border-radius:8px; flex:none}
.side-list em{display:block; color:var(--muted); font-style:normal; font-size:.78rem; font-family:ui-sans-serif,system-ui,sans-serif}

/* Prose */
.prose{max-width:70ch; margin:8px 0 60px}
.prose h2{margin-top:34px}
.prose h3{margin-top:22px}
.prose p, .prose li{color:#2D241D}
.prose .lede{font-size:1.18rem; color:#3A3128}

/* Footer */
.site-footer{background:#221C18; color:#E8DECF; margin-top:60px; padding:42px 0 22px}
.site-footer a{color:#E8DECF}
.site-footer a:hover{color:#fff}
.site-footer h4{font-size:.88rem; text-transform:uppercase; letter-spacing:.1em; color:#C8B59C; margin:0 0 12px; font-family:ui-sans-serif,system-ui,sans-serif}
.site-footer ul{list-style:none; padding:0; margin:0; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.95rem}
.site-footer li{margin:6px 0}
.site-footer .muted{color:#A89684}
.site-footer__grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:30px; padding-bottom:24px; border-bottom:1px solid #3A3128}
.brand--footer{font-size:1.2rem; color:#fff; margin-bottom:6px}
.brand--footer .brand__text em{color:var(--accent)}
.site-footer__bottom{padding:18px 22px 0; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.85rem; color:#A89684}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr; gap:24px}
  .hero h1{font-size:2.4rem}
  .pattern__layout{grid-template-columns:1fr}
  .pattern__side{position:static}
  .cat-grid{grid-template-columns:repeat(2, 1fr)}
  .card-grid{grid-template-columns:repeat(2, 1fr)}
  .nav{display:none}
  .site-footer__grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .cat-grid, .card-grid, .cards-grid{grid-template-columns:1fr}
  .search input{width:140px}
  h1{font-size:2rem}
  .hero h1{font-size:2.1rem}
}

/* Aliases & additions */
.cards-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
@media (max-width: 960px){ .cards-grid{grid-template-columns:repeat(2, 1fr)} }
.card--guide{padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease}
.card--guide:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}
.card--guide .card__title{font-family:"Fraunces",serif; font-size:1.35rem; margin:.2em 0 .3em}
.card--guide .card__sub{color:var(--muted); margin:0}
.side-list--text li{margin:0 0 8px; font-size:.95rem}
.side-list--text a{display:inline; color:var(--accent-deep)}
.seasonal-section{margin:32px 0 56px}
.seasonal-section__title{font-size:1.7rem; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:18px; text-transform:capitalize}