:root{
  --paper:#F6F3EC;
  --paper-warm:#EFE9DA;
  --ink:#1B2430;
  --ink-soft:#4A5568;
  --ochre:#C98A2C;
  --teal:#1F6F6B;
  --teal-soft:#E4EFEE;
  --rule:#D8D0BC;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ochre);color:var(--white);}
a{color:inherit;}
img{max-width:100%;}

.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px;}

/* ---- HEADER ---- */
header{border-bottom:1px solid var(--rule);padding:22px 0;}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:baseline;gap:10px;font-family:'Source Serif 4', serif;font-weight:700;font-size:1.4rem;letter-spacing:-0.01em;text-decoration:none;}
.brand .mark{width:30px;height:30px;border-radius:6px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:0.8rem;font-weight:700;transform:rotate(-3deg);}
nav{display:flex;gap:26px;font-size:0.92rem;color:var(--ink-soft);}
nav a{text-decoration:none;}
nav a:hover{color:var(--ink);}

/* ---- GENERIC PAGE ---- */
.page-hero{padding:52px 0 10px;}
.page-hero .eyebrow{font-family:'Space Mono',monospace;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--teal);margin-bottom:14px;}
.page-hero h1{font-family:'Source Serif 4', serif;font-weight:700;font-size:clamp(1.9rem, 4vw, 2.8rem);line-height:1.1;letter-spacing:-0.01em;margin:0 0 16px;}
.page-hero p.sub{color:var(--ink-soft);font-size:1.05rem;max-width:60ch;margin:0;}

.content{padding:20px 0 60px;font-size:1.02rem;color:var(--ink);}
.content h2{font-family:'Source Serif 4', serif;font-size:1.5rem;margin:34px 0 12px;}
.content h3{font-size:1.15rem;margin:26px 0 10px;}
.content p{margin:0 0 14px;color:var(--ink-soft);}
.content ul, .content ol{color:var(--ink-soft);padding-left:22px;}
.content li{margin-bottom:6px;}
.content strong{color:var(--ink);}
.content a{color:var(--teal);text-decoration:underline;}

/* ---- CARD ---- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:22px 24px;margin:20px 0;}

/* ---- AD SLOT ---- */
.ad-slot{
  background:var(--paper-warm);
  border:1px dashed var(--rule);
  border-radius:10px;
  padding:14px;
  text-align:center;
  color:var(--ink-soft);
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:32px 0;
}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--rule);padding:16px 0;}
.faq-item summary{font-weight:600;cursor:pointer;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--teal);font-weight:400;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{margin:10px 0 0;color:var(--ink-soft);font-size:0.95rem;}

/* ---- BLOG LIST ---- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0 60px;}
.blog-card{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:20px;text-decoration:none;display:block;}
.blog-card .tag{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--ochre);text-transform:uppercase;letter-spacing:0.08em;}
.blog-card h3{font-family:'Source Serif 4', serif;font-size:1.15rem;margin:8px 0 8px;color:var(--ink);}
.blog-card p{font-size:0.88rem;color:var(--ink-soft);margin:0;}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--rule);padding:26px 0;font-size:0.82rem;color:var(--ink-soft);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
footer nav{gap:18px;}
footer a{text-decoration:none;}
footer a:hover{color:var(--ink);}

@media (max-width:760px){
  nav{display:none;}
  .blog-grid{grid-template-columns:1fr;}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}