/* The Whip Inn — Cream / Burgundy, Playfair Display headings + Georgia body */

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

html{-webkit-text-size-adjust:100%}

body{
  background:#f5f0eb;
  color:#2b2422;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

.container{max-width:960px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:"Playfair Display",Georgia,serif;color:#2b2422;line-height:1.2;font-weight:700}

a{color:#7b2d3a;text-decoration:none;transition:opacity .2s}

/* ---------- Header ---------- */
.site-header{position:relative;background:#f5f0eb;border-bottom:1px solid #e2d8cc;padding:28px 0 22px}
.header-inner{display:flex;flex-direction:column;align-items:center}
.site-brand{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.brand-icon{display:block}
.site-title{display:block;font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:700;letter-spacing:0.5px;color:#7b2d3a;text-align:center;line-height:1.15}
.site-tagline{display:block;font-family:Georgia,serif;font-style:italic;font-size:13px;letter-spacing:0.5px;color:#7a6f64;text-align:center;margin-top:2px}

.nav-menu{
  display:flex;
  gap:28px;
  margin-top:22px;
  justify-content:center;
  flex-wrap:wrap;
}
.nav-menu a{
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-family:Georgia,serif;
  font-size:12px;
  color:#2b2422;
  text-decoration:none;
}
.nav-menu a:hover{color:#7b2d3a}
.nav-menu a.active{color:#7b2d3a;border-bottom:1px solid #7b2d3a;padding-bottom:2px}

/* ---------- Pure-CSS checkbox mobile toggle ---------- */
.nav-toggle{display:none}
.menu-toggle{display:none;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:#2b2422;margin:5px 0;transition:all .3s}

/* ---------- Hero (Style 2 — Madeira: text block then standalone image) ---------- */
.hero{background:#f5f0eb;text-align:center;padding:48px 24px 32px}
.hero h1{font-size:46px;margin-bottom:14px;color:#2b2422}
.hero p{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#7b2d3a;letter-spacing:0.3px}
.hero-image{margin:0 0 8px}
.hero-image img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover}

/* ---------- Homepage ---------- */
.section{padding:48px 0}
.section-label{
  text-transform:uppercase;
  letter-spacing:2px;
  font-family:Georgia,serif;
  font-size:12px;
  margin-bottom:28px;
  color:#7b2d3a;
}

.featured{margin-bottom:8px}
.featured .card-image{margin-bottom:22px}
.featured .card-cat{text-transform:uppercase;letter-spacing:2px;font-family:Georgia,serif;font-size:12px;color:#7b2d3a;margin-bottom:10px}
.featured h2{font-size:34px;margin-bottom:14px}
.featured h2 a{text-decoration:none;color:#2b2422}
.featured h2 a:hover{color:#7b2d3a;opacity:1}
.featured p{color:#2b2422;max-width:680px}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}

.card{display:block}
.card-image{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#e8ded2;
  margin-bottom:16px;
  border-radius:0;
  border:1px solid #e2d8cc;
}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-cat{
  text-transform:uppercase;
  letter-spacing:2px;
  font-family:Georgia,serif;
  font-size:11px;
  color:#7b2d3a;
  margin-bottom:8px;
}
.card-title{font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:700;line-height:1.3;margin-bottom:6px;color:#2b2422}
.card:hover .card-title{color:#7b2d3a}
.card-meta{font-family:Georgia,serif;font-size:12px;letter-spacing:0.5px;color:#7a6f64;font-style:italic}

/* ---------- Article ---------- */
.article{max-width:700px;margin:0 auto;padding:48px 24px 64px}
.article-cat{text-transform:uppercase;letter-spacing:2px;font-family:Georgia,serif;font-size:12px;color:#7b2d3a;margin-bottom:16px}
.article h1{font-size:38px;margin-bottom:14px}
.article-meta{font-family:Georgia,serif;font-size:13px;color:#7a6f64;font-style:italic;margin-bottom:30px}
.article-image{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#e8ded2;
  margin-bottom:36px;
  border:1px solid #e2d8cc;
}
.article-image img{width:100%;height:100%;object-fit:cover}

.article-content p{margin-bottom:22px}
.article-content h2{font-size:26px;margin:36px 0 16px}
.article-content a{color:#7b2d3a;text-decoration:underline;text-decoration-color:rgba(123,45,58,0.3);text-underline-offset:3px}
.article-content a:hover{text-decoration-color:#7b2d3a}

/* ---------- Related posts ---------- */
.related{max-width:960px;margin:0 auto;padding:0 24px 64px}
.related .section-label{margin-bottom:28px}

/* ---------- Standard pages ---------- */
.page{max-width:700px;margin:0 auto;padding:48px 24px 64px}
.page h1{font-size:38px;margin-bottom:24px}
.page h2{font-size:24px;margin:32px 0 14px}
.page p{margin-bottom:20px}
.page .updated{font-family:Georgia,serif;font-size:13px;color:#7a6f64;font-style:italic;margin-bottom:28px}
.page a{color:#7b2d3a;text-decoration:underline;text-decoration-color:rgba(123,45,58,0.3);text-underline-offset:3px}
.page a:hover{text-decoration-color:#7b2d3a}

/* ---------- Footer ---------- */
.site-footer{
  background:#efe7dc;
  border-top:1px solid #e2d8cc;
  padding:48px 24px;
  text-align:center;
  margin-top:24px;
}
.site-footer .footer-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.site-footer .brand-icon{display:block;margin:0 auto}
.site-footer .footer-title{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:700;color:#7b2d3a}
.site-footer .footer-tagline{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#7a6f64}
.site-footer .copyright{font-family:Georgia,serif;font-size:12px;letter-spacing:0.5px;color:#7a6f64}

/* ---------- Category page ---------- */
.cat-head{text-align:center;padding:48px 24px 24px;margin-bottom:0;background:#f5f0eb;border-bottom:1px solid #e2d8cc}
.cat-head .section-label{margin-bottom:12px}
.cat-head h1{font-size:40px}
.cat-head p{color:#2b2422;max-width:560px;margin:14px auto 0}

/* ---------- Mobile (pure-CSS checkbox toggle) ---------- */
@media(max-width:768px){
  .menu-toggle{display:block;position:absolute;right:24px;top:30px}
  .nav-menu{display:none;flex-direction:column;width:100%;gap:0;padding:12px 0;margin-top:18px}
  .nav-toggle:checked ~ .nav-menu{display:flex}
  .nav-menu a{padding:12px 0;border-bottom:1px solid #e2d8cc;text-align:center}
  .nav-toggle:checked ~ .menu-toggle span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle:checked ~ .menu-toggle span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .menu-toggle span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .site-header{position:relative}
  .grid{grid-template-columns:1fr;gap:36px}
  .hero h1{font-size:34px}
  .hero p{font-size:17px}
  .featured h2{font-size:26px}
  .article h1{font-size:28px}
  .page h1{font-size:28px}
}