/* DPA Check — shared design system & page chrome (banner, masthead, footer, feedback).
   Page-specific CSS lives in each template's {% block page_css %} or its own file. */
:root{
  --charcoal:#0a0f0f; --deep:#1a1f1f; --off-white:#fdfcfb; --warm-grey:#f3f2f1;
  --mid-grey:#9a9a96; --ink:#0a0f0f; --muted:#6b7470; --line:#dfddd7; --bg:#fdfcfb;
  --accent:#c4873b; --accent-light:#d4a65a; --brand:#c4873b;
  --green:#0f7a4d; --amber:#a86600; --grey:#5b6b73; --red:#b3261e;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Libre Baskerville','Georgia',serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 var(--sans);color:var(--ink);background:var(--bg)}
a{color:var(--accent)}

/* ---- banner / masthead (shared across all pages) ---- */
.banner{background:var(--charcoal);color:var(--off-white);position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 28% 40%,rgba(196,135,59,.10) 0%,transparent 68%)}
.banner .inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:18px 20px 32px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.wordmark{font:600 1.05rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--off-white);text-decoration:none}
.wordmark .g{color:var(--accent)}
.masthead nav a{color:rgba(253,252,251,.72);text-decoration:none;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase}
.masthead nav a:hover{color:var(--off-white)}
.eyebrow{color:var(--accent);font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 10px}
.banner h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,4.2vw,2.3rem);
  line-height:1.22;margin:0 0 12px;color:var(--off-white)}
.banner .lede{color:rgba(253,252,251,.74);margin:0;max-width:42rem}

/* ---- content shell ---- */
.wrap{max-width:1000px;margin:0 auto;padding:26px 20px 80px}
/* narrow reading pages (e.g. About, articles) */
.narrow .banner .inner,.narrow .wrap{max-width:760px}
.narrow body,.narrow{line-height:1.6}

/* ---- shared disclaimer ---- */
.disclaimer{margin-top:28px;font-size:.82rem;color:var(--muted);background:#fff;
  border:1px dashed var(--line);border-radius:10px;padding:14px 16px}

/* ---- footer ---- */
footer{margin-top:36px;color:var(--muted);font-size:.8rem;text-align:center;line-height:1.6}
footer a{color:var(--accent)}

/* ---- feedback box (shared partial) ---- */
.fb{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.fb-h{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin:0 0 4px}
.fb-sub{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.fb-form{display:flex;flex-direction:column;gap:10px}
.fb-row{display:flex;gap:10px;flex-wrap:wrap}
.fb-row input{flex:1 1 200px}
.fb-form input,.fb-form select,.fb-form textarea{padding:11px 13px;font-size:1rem;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;font-family:var(--sans);width:100%}
.fb-form input:focus,.fb-form select:focus,.fb-form textarea:focus{outline:none;border-color:var(--accent)}
.fb-btn{align-self:flex-start;background:var(--charcoal);color:var(--off-white);border:0;border-radius:9px;
  padding:11px 20px;font-weight:600;font-size:1rem;cursor:pointer;width:auto}
.fb-btn:hover{background:var(--deep)} .fb-btn:disabled{opacity:.6;cursor:default}
.fb-status{font-size:.9rem;color:var(--muted)}
.fb-status.ok{color:var(--green)} .fb-status.err{color:var(--red)}