:root{
  --paper:#f6f1e1;
  --ink:#0e1a1a;
  --accent:#198754;
  --rust:#b86c41;
  --shadow: rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height:1.6;
  letter-spacing: .1px;
  /* subtle paper grain */
  background-image:
    radial-gradient(circle at 1% 1%, rgba(0,0,0,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 98% 2%, rgba(0,0,0,.04) 0 1px, transparent 1px);
  background-size: 120px 120px, 140px 140px;
}

.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background: #f0ead6cc;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:48px; height:48px; border-radius:12px; object-fit:cover; filter:grayscale(1) contrast(1.2)}
.brand-text{font-family:"DM Serif Display",Georgia,serif; font-size:20px; letter-spacing:.12em}

.nav a{margin-left:14px; text-decoration:none; color:inherit; font-weight:600}
.nav .cta{background:var(--accent); color:#fff; padding:8px 12px; border-radius:999px; box-shadow:0 6px 16px var(--shadow)}
.nav a:hover{opacity:.9}

.hero{
  position:relative; padding:64px 18px 24px; display:grid; grid-template-columns: 1fr; gap:22px;
  max-width:1100px; margin:0 auto;
}
.hero-inner{max-width:720px}
.display{font-family:"DM Serif Display", Georgia, serif; font-size: clamp(34px, 4vw, 64px); line-height:1.06; margin:0 0 12px; letter-spacing:.5px}
.lead{font-size:20px; opacity:.9; margin:0 0 18px}
.hero-badge{position:absolute; right:18px; bottom: -24px}
.hero-badge img{width:170px; height:auto; border-radius:28px; filter:grayscale(.9) contrast(.9); box-shadow:0 12px 30px var(--shadow); border:6px solid #fff}

.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{background:var(--ink); color:#fff; text-decoration:none; padding:12px 18px; border-radius:10px; font-weight:700; box-shadow: 0 8px 24px var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-outline{border:2px solid var(--ink); color:var(--ink); text-decoration:none; padding:10px 16px; border-radius:10px; font-weight:700}
.btn.small{padding:8px 12px; font-size:14px}

.ribbon{background:linear-gradient(90deg, var(--rust), var(--accent)); color:#fff; text-align:center; padding:10px 12px; font-weight:700; letter-spacing:.08em}

.grid.two{max-width:1100px; margin:42px auto; padding:0 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
.card{background:#fff; border-radius:18px; padding:22px; box-shadow:0 10px 28px var(--shadow); border:1px solid rgba(0,0,0,.05)}
.card h2{font-family:"DM Serif Display",Georgia,serif; margin:0 0 8px}
.card p{margin:0 0 10px}
.card.wide{max-width:1100px; margin:22px auto; padding:28px}

.link{display:inline-block; margin-top:6px; font-weight:700; text-decoration:none; border-bottom:2px solid var(--accent); color:inherit}
.link:hover{color:var(--accent)}

.stats{max-width:1100px; margin:10px auto 8px; padding:0 18px; display:flex; gap:14px; justify-content:space-around}
.stat{background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:16px; padding:14px 18px; text-align:center; box-shadow:0 6px 20px var(--shadow); min-width:140px}
.kpi{font-family:"DM Serif Display",Georgia,serif; font-size:40px; display:block}
.kpi-label{font-size:12px; text-transform:uppercase; letter-spacing:.12em; opacity:.85}

.note{max-width:900px; margin:0 auto 42px; padding:0 18px}
.note .sm{font-size:13px; opacity:.7}

.page-title{max-width:900px; margin:42px auto 10px; padding:0 18px}
.page-title h1{font-family:"DM Serif Display",Georgia,serif; font-size:44px; margin:0 0 8px}

.story{max-width:900px; margin:0 auto 42px; padding:0 18px}
.story p{font-size:18px}
.backlinks{display:flex; gap:12px; margin-top:12px}

.ticks{list-style:none; padding:0; margin:10px 0 0}
.ticks li{padding-left:28px; position:relative; margin:8px 0}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:var(--accent)}

.site-footer{
  margin-top:48px; padding:20px; text-align:center; font-size:14px;
  border-top:1px dashed rgba(0,0,0,.2); background:#f3ecd9
}
.site-footer a{color:inherit; font-weight:700}
.heart{color:#cc3d3d}
@media (max-width:860px){ .hero-badge{position:static; order:-1; text-align:center} .hero-badge img{width:120px; border-width:4px} }