:root{
  /* Light theme tokens */
  --bg:#ffffff;
  --panel:#f7f7f8;
  --text:#111213;
  --muted:#555e6a;
  --border:#e6e7eb;
  --brand:#000000;         /* link / accent */
  --accent:#10b981;        /* optional secondary */
  --radius:12px;
  --maxw:1080px;

  /* Typography scale (all 1 step smaller) */
  --fs-body:15.5px;   /* was 16.5px */
  --fs-small:13px;    /* was 14px */
  --fs-h1:32px;       /* was 36px */
  --fs-h2:22px;       /* was 24px */
  --fs-h3:16px;       /* was 18px */
  --lh:1.65;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font: var(--fs-body)/var(--lh) system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering:optimizeLegibility;
}

/* Headings: simple, bold, no shadows */
h1{font-size:var(--fs-h1); line-height:1.25; margin:0 0 8px}
h2{font-size:var(--fs-h2); line-height:1.35; margin:24px 0 8px}
h3{font-size:var(--fs-h3); line-height:1.4; margin:18px 0 6px}

p{margin:0 0 12px}
small,.small{font-size:var(--fs-small); color:var(--muted)}

a{
  color:var(--brand); text-decoration:none;
  border-bottom:1px solid rgba(11,99,255,.25);
}
a:hover{border-bottom-color:currentColor}
a:focus-visible{
  outline:3px solid rgba(11,99,255,.35); outline-offset:2px; border-bottom:0;
}

/* Header: white, subtle border, no blur */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--border);
  display:flex; gap:12px; align-items:center; padding:10px 14px;
  overflow-x:hidden; /* prevent wrap artifacts */
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logo{
  width:20px; height:20px; border-radius:6px; background:var(--brand);
}

/* Nav: force single line */
.nav{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;           /* keep everything on one line */
  white-space:nowrap;         /* prevent text wrapping */
  overflow-x:auto;            /* scroll sideways if it doesn’t fit */
  -webkit-overflow-scrolling:touch; /* smooth scrolling on iOS */
}

.nav a{
  padding:6px 10px;
  border-radius:10px;
  color:#2c3137;
  background:transparent;
  border:1px solid transparent;
  flex:0 0 auto;              /* prevent shrinking */
}
.nav a.active,.nav a:hover{
  background:var(--panel); border-color:var(--border); color:inherit;
}

/* Layout */
.wrap{max-width:var(--maxw); margin:24px auto; padding:0 16px}
.hero{padding:20px 0}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:16px;
}
.pill{
  display:inline-block; border:1px solid var(--border);
  border-radius:999px; padding:2px 10px; color:var(--muted); font-size:12px; background:#fff;
}
.lede{color:#2c3137}

/* Buttons: flat, high contrast */
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:700; padding:10px 14px; border-radius:10px; border:1px solid var(--brand);
}
.btn:hover{filter:brightness(0.95)}
.btn:focus-visible{outline:3px solid rgba(11,99,255,.35); outline-offset:2px}
.btn.ghost{
  background:#fff; color:#111; border:1px solid var(--border);
}
.cta-row{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}

/* Grids */
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols{columns:2; column-gap:24px}
.muted{color:var(--muted)}

/* Footer */
.site-footer{
  border-top:1px solid var(--border); padding:18px 16px; text-align:center; color:var(--muted);
}

/* Accessibility helpers */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:static; width:auto; height:auto; padding:8px; background:#fff; border:1px solid var(--border)}
  
/* Mobile */
@media (max-width:900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .cols{columns:1}
  h1{font-size:28px} /* slightly smaller for mobile too */
}

/* Optional print: white background, black text */
@media print{
  .site-header,.site-footer,.btn{display:none}
  a{color:#000; border:0; text-decoration:underline}
}