:root{
  --ivory:#F8F4EC;
  --ebony:#1A1714;
  --charcoal:#2A2622;
  --rust:#C9662E;
  --rust-dark:#A8531F;
  --sage:#9BAE8D;
  --blush:#E4C2C2;
  --gold:#C9A96E;
  --max-w:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans', sans-serif;
  background:var(--ivory);
  color:var(--ebony);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:900; line-height:1.05; letter-spacing:-0.01em;}
.eyebrow{
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:600; color:var(--gold);
}
.btn{
  display:inline-block; padding:14px 28px; background:var(--rust); color:var(--ivory);
  font-size:13px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  border-radius:2px; transition:background .2s ease;
}
.btn:hover{background:var(--rust-dark);}
.btn-outline{
  display:inline-block; padding:13px 27px; border:1px solid var(--ivory); color:var(--ivory);
  font-size:13px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; border-radius:2px;
}

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--ebony); color:var(--ivory);
  border-bottom:1px dashed rgba(248,244,236,0.25);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:18px 32px;}
.logo{font-family:'Fraunces', serif; font-weight:900; font-size:20px; letter-spacing:0.02em;}
.nav-links{display:flex; gap:36px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;}
.nav-links a{opacity:0.9; transition:opacity .2s ease;}
.nav-links a:hover{opacity:1; border-bottom:1px solid var(--rust);}
.nav-toggle{display:none; background:none; border:none; color:var(--ivory); font-size:24px; cursor:pointer;}

/* HERO (homepage) */
.hero{background:var(--ebony); color:var(--ivory);}
.hero-grid{
  display:grid; grid-template-columns:1fr 1.15fr; align-items:stretch; min-height:520px;
}
.hero-text{
  padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--ebony);
}
.hero-text .eyebrow{margin-bottom:24px;}
.hero-text h1{font-size:56px; color:var(--ivory);}
.hero-image-wrap{position:relative; overflow:hidden;}
.hero-image-wrap img{width:100%; height:100%; object-fit:cover; min-height:520px;}
.hero-wordmark{
  position:absolute; bottom:28px; right:28px;
  font-family:'Fraunces', serif; font-weight:900; font-size:38px; color:var(--ebony);
  background:var(--ivory); padding:6px 18px;
}

/* ABOUT */
.about{background:var(--charcoal); color:var(--ivory); padding:96px 0;}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about h2{font-size:38px; margin-bottom:24px; color:var(--ivory);}
.about p{font-size:16px; line-height:1.7; opacity:0.85; margin-bottom:18px; max-width:46ch;}
.about-image{border-radius:2px; overflow:hidden;}
.about-image img{width:100%;}

/* START HERE / GUIDE GRID (reused on blog listing) */
.start{padding:100px 0; text-align:center;}
.start .eyebrow{color:var(--rust-dark);}
.start h2{font-size:38px; margin:16px 0 12px;}
.start-sub{font-size:16px; opacity:0.65; max-width:46ch; margin:0 auto 56px;}
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.card{
  background:var(--ivory); border:1px solid rgba(26,23,20,0.08); border-radius:2px;
  overflow:hidden; text-align:left; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(26,23,20,0.12);}
.card-image{aspect-ratio:4/3; overflow:hidden; background:var(--sage);}
.card-image img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:24px;}
.card-body h3{font-size:20px; margin-bottom:8px;}
.card-body p{font-size:14px; opacity:0.7; line-height:1.5;}
.card-tag{
  display:inline-block; margin-top:14px; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:600; color:var(--rust);
}

/* NEWSLETTER */
.newsletter{background:var(--sage); padding:72px 0; text-align:center;}
.newsletter h2{font-size:30px; color:var(--ebony); margin-bottom:12px;}
.newsletter p{opacity:0.75; margin-bottom:28px;}
.newsletter-form{display:flex; gap:12px; max-width:440px; margin:0 auto; justify-content:center;}
.newsletter-form input{
  flex:1; padding:14px 16px; border:1px solid rgba(26,23,20,0.2); border-radius:2px;
  font-family:'DM Sans', sans-serif; font-size:14px; background:var(--ivory);
}

/* FOOTER */
footer{background:var(--ebony); color:var(--ivory); padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px dashed rgba(248,244,236,0.2);}
.footer-logo{font-family:'Fraunces', serif; font-weight:900; font-size:26px; margin-bottom:12px;}
.footer-tag{opacity:0.6; font-size:14px; max-width:32ch; line-height:1.6;}
footer h4{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.55; margin-bottom:14px; font-weight:600;}
footer .foot-links a{display:block; font-size:14px; opacity:0.85; margin-bottom:10px;}
.social-row{display:flex; gap:16px; margin-top:6px;}
.social-row a{
  width:36px; height:36px; border:1px solid rgba(248,244,236,0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; font-size:12px; opacity:0.5; flex-wrap:wrap; gap:8px;
}

/* affiliate disclosure strip */
.disclosure{background:var(--ivory); border-top:1px solid rgba(26,23,20,0.08); padding:14px 0; text-align:center; font-size:12.5px; opacity:0.65;}

/* ===== BLOG LISTING PAGE ===== */
.blog-hero{background:var(--ebony); color:var(--ivory); padding:80px 0 64px; text-align:center;}
.blog-hero h1{font-size:44px; color:var(--ivory); margin-top:14px;}
.blog-hero p{opacity:0.7; max-width:52ch; margin:16px auto 0; font-size:16px; line-height:1.6;}
.blog-listing{padding:80px 0 100px;}

/* ===== ARTICLE / POST PAGE ===== */
.breadcrumb{padding:28px 0 0; font-size:13px; opacity:0.55;}
.breadcrumb a:hover{text-decoration:underline;}
.post-hero{padding:36px 0 48px; max-width:74ch; margin:0 auto;}
.post-hero .eyebrow{color:var(--rust-dark); margin-bottom:16px;}
.post-hero h1{font-size:42px; margin-bottom:18px;}
.post-hero .dek{font-size:18px; line-height:1.6; opacity:0.75; max-width:60ch;}
.post-cover{aspect-ratio:16/7; overflow:hidden; margin-bottom:8px;}
.post-cover img{width:100%; height:100%; object-fit:cover;}
.prose{max-width:68ch; margin:0 auto; padding:8px 0 80px; font-size:17px; line-height:1.75;}
.prose h2{font-size:26px; margin:48px 0 16px; line-height:1.2;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:20px; opacity:0.9;}
.prose strong{font-weight:600;}
.prose .tip{
  background:var(--blush); border-left:3px solid var(--rust);
  padding:16px 20px; font-size:15px; margin:20px 0 32px; border-radius:0 2px 2px 0;
}
.prose hr{border:none; border-top:1px dashed rgba(26,23,20,0.2); margin:48px 0 28px;}
.prose .closing-note{font-size:14.5px; opacity:0.65; font-style:italic;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; min-height:auto;}
  .hero-text{order:2; padding:40px 28px;}
  .hero-text h1{font-size:38px;}
  .hero-image-wrap img{min-height:340px;}
  .about-grid{grid-template-columns:1fr; gap:32px;}
  .card-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--ebony);
    flex-direction:column; gap:0; display:none; border-top:1px dashed rgba(248,244,236,0.2);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:16px 32px; width:100%; border-bottom:1px solid rgba(248,244,236,0.08);}
  .nav-toggle{display:block;}
  .newsletter-form{flex-direction:column;}
  .post-hero h1{font-size:30px;}
  .prose h2{font-size:22px;}
}