/* ============================== */
/* CRR BASE v2 – site-wide shell  */
/* ============================== */

:root{
  --max:1280px;           /* fixed content width */
  --pad:16px;             /* side padding inside each slab */
  --gutter:#2c2c2c;       /* page background (sides) */
  --bg:#ffffff;           /* slab background */
  --ink:#0f172a;
  --ink-muted:#6b7280;
  --accent:#ff1e00;
}

/* Reset / typography */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--gutter);
  color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.5; overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul,ol{padding-left:1.25rem}

/* Three white slabs (header/body/footer) at 1280px */
.header-inner,
.container,            /* we’ll use your existing .container as the BODY slab */
footer{
  max-width:var(--max);
  margin:0 auto;
  background:var(--bg);
  padding-left:var(--pad); padding-right:var(--pad);
}

/* Optional vertical padding per slab */
.header-inner{padding-top:12px;padding-bottom:8px}
.container{padding-top:12px;padding-bottom:24px;min-height:50vh}
footer{padding-top:12px;padding-bottom:12px}

/* Hairline separators you already use */
.separator{height:1px;background:#e5e5e5;margin:8px 0}

/* Little utilities */
.text-center{text-align:center}
.hidden{display:none !important}