:root{
  --ink:#1A1A1A;
  --body-text:#2E2A28;
  --muted:#6F6F6E;
  --accent:#C3047F;
  --accent-soft:#F8F1F0;
  --surface:#F5F4F1;
  --sand:#E1DFD6;
  --page-bg:#FBF8F6;
  --white:#FFFFFF;
  --dark:#1A1A1A;
  --dark-muted:#C9C3BC;
  --green-bg:#EAF5EE; --green-text:#1F7A4D;
  --amber-bg:#FBF1DC; --amber-text:#946A00;
  --red-bg:#FBEAE8; --red-text:#B3261E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--body-text);
  font-family:'Work Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4{text-wrap:balance; margin:0;}
.site{max-width:1280px; margin:0 auto; background:var(--white);}

header.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 48px; border-bottom:1px solid #F0EDE9;
  position:relative;
}
.nav-toggle{display:none;}
.header-actions{display:flex; align-items:center; gap:14px;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px;}
.hamburger span{width:22px; height:2px; background:var(--ink); border-radius:1px;}
.mobile-menu{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--white); padding:8px 24px 16px;
  box-shadow:0 16px 32px rgba(26,26,26,0.12); z-index:50;
}
.mobile-menu a{padding:14px 0; font-size:15.5px; font-weight:500; color:var(--ink); border-bottom:1px solid #F0EDE9;}
.nav-toggle:checked ~ .mobile-menu{display:flex;}
.logo{font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; letter-spacing:0.2px;}
.logo .b{color:var(--accent);}
nav.primary{display:flex; align-items:center; gap:36px;}
.navlink{font-size:14.5px; font-weight:500; color:var(--ink);}
.navlink:hover{color:var(--accent);}
.dropdown{position:relative;}
.dropdown-panel{
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  position:absolute; top:30px; left:-16px; background:var(--white);
  border:1px solid var(--sand); border-radius:10px; padding:8px; width:250px; z-index:20;
  box-shadow:0 12px 28px rgba(26,26,26,0.10);
  display:flex; flex-direction:column; gap:2px;
}
.dropdown:hover .dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-item{display:block; padding:9px 12px; border-radius:6px; color:var(--ink); font-size:13.5px;}
.dropdown-item:hover{background:var(--accent-soft); color:var(--accent);}
.caret{width:9px; height:6px; margin-left:2px;}

.btn-primary{
  background:var(--accent); color:var(--white); font-family:'Playfair Display',serif; font-style:italic;
  font-weight:400; font-size:17px; letter-spacing:0.4px; padding:14px 30px; border-radius:6px;
  display:inline-block;
}
.btn-pill{
  background:var(--accent); color:var(--white); font-family:'Work Sans',sans-serif; font-weight:600;
  font-size:13.5px; padding:11px 20px; border-radius:24px; display:inline-block;
}
.tag{
  display:inline-block; font-family:'Work Sans',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:0.4px; text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  padding:6px 12px; border-radius:20px;
}
.card-link{color:var(--accent); font-weight:600; font-size:14.5px;}
.cat-card{background:var(--white); border-radius:14px; padding:28px 24px; transition:transform .15s ease;}
.cat-card:hover{transform:translateY(-4px);}
.icon-tile{width:42px; height:42px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}

.hero{display:flex; align-items:center; gap:56px; padding:76px 48px 84px; background:var(--accent-soft);}
.hero h1{font-family:'Poppins',sans-serif; font-weight:800; font-size:46px; line-height:1.14; color:var(--ink); margin:20px 0 22px;}
.hero p.lede{font-size:18px; line-height:1.62; color:#4A4544; max-width:500px; margin:0 0 32px;}

.cat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;}

.flagship-card{background:var(--surface); border-radius:16px; padding:36px;}
.flagship-card h3{font-family:'Poppins',sans-serif; font-weight:700; font-size:21px; line-height:1.32; color:var(--ink); margin:16px 0 12px;}
.flagship-card p{font-size:15px; line-height:1.62; color:#57524F; margin:0 0 20px;}

.cta-band{background:var(--dark); padding:72px 48px; text-align:center;}
.cta-band h2{font-family:'Poppins',sans-serif; font-weight:700; font-size:28px; color:var(--white); margin-bottom:16px;}
.cta-band p{font-size:16px; color:var(--dark-muted); margin:0 0 30px;}

footer.site-footer{padding:48px; display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
.foot-col-label{font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; display:block;}
.foot-links{display:flex; flex-direction:column; gap:9px;}

.article-head{padding:64px 48px 40px; max-width:760px; margin:0 auto;}
.article-head h1{font-family:'Poppins',sans-serif; font-weight:800; font-size:38px; line-height:1.22; color:var(--ink); margin:20px 0 22px;}
.byline{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted);}
.rule{max-width:760px; margin:0 auto 48px; height:1px; background:#F0EDE9;}
.prose{max-width:760px; margin:0 auto; padding:0 48px 8px;}
.prose p{font-size:17.5px; line-height:1.75; color:var(--body-text); margin:0 0 24px;}
.prose h2{font-family:'Poppins',sans-serif; font-weight:700; font-size:25px; color:var(--ink); margin:46px 0 20px;}
.prose ol{padding-left:20px; margin:0 0 24px;}
.prose li{font-size:17.5px; line-height:1.75; color:var(--body-text); margin-bottom:9px;}
.level-box{border-radius:12px; padding:20px 24px; margin:0 0 16px;}
.level-label{font-weight:700; font-size:12.5px; letter-spacing:0.4px; text-transform:uppercase; display:block; margin-bottom:7px;}
.level-box p{margin:0; font-size:15.5px; line-height:1.62; color:inherit;}

@media (max-width: 900px){
  .hero{flex-direction:column; padding:56px 24px;}
  .cat-grid,.grid-2,.grid-4{grid-template-columns:1fr;}
  header.top,.article-head,.prose,footer.site-footer{padding-left:24px; padding-right:24px;}
  nav.primary{display:none;}
  .hamburger{display:flex;}
}