/* Guardii brand layer over the brief house style (_brief.css).
   Calm base with clear signals: ink #0b1814, deep green #2f5d50, stone #e9e9e4,
   signal orange #ff6a3d for actions only. Inter for text, IBM Plex Mono for
   labels. Load after _brief.css; it re-points the house variables and restyles
   the few elements that carried the old navy. Print-first A4 is unchanged. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --navy: #2f5d50;        /* deep green: headings, rules, links */
  --navy-mid: #4a9075;    /* bullets */
  --navy-wash: #f4f4f1;   /* stone wash */
  --navy-line: #dcdfda;   /* stone line */
  --ink: #0b1814;
  --ink-soft: #33403b;
  --muted: #6f7a75;
  --rule: #e9e9e4;
  --paper: #ffffff;
  --signal: #ff6a3d;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body {
  background: #e9e9e4;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink-soft);
}

/* Masthead: the ink band from the concept, wordmark in white. */
.masthead {
  background: var(--ink);
  margin: -15mm -17mm 16px;
  padding: 14px 17mm;
  border-bottom: none;
  align-items: center;
}
.masthead img.brand { height: 18px; }
.masthead .kicker {
  font-family: var(--mono);
  font-weight: 500;
  color: #98a19c;
  letter-spacing: 0.16em;
}
/* Prospect logo: on a white chip, so any logo keeps its own colours on the ink band. */
.masthead .prospect { background: #fff; border-radius: 4px; padding: 4px 6px; box-sizing: content-box; }

.title { font-weight: 600; letter-spacing: -0.015em; font-size: 18pt; }
.strap b { color: var(--ink); }

/* Back link: an outline pill, mono uppercase. */
.back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 16px;
}
.back:hover { background: var(--ink); color: #fff; }

/* The short version: stone panel, green rule, mono label. */
.tldr {
  background: var(--navy-wash);
  border: none;
  border-left: 3px solid var(--navy);
  border-radius: 4px;
}
.tldr .t { font-family: var(--mono); font-weight: 500; letter-spacing: 0.16em; }

h2 { font-weight: 600; color: var(--ink); padding-top: 10px; border-top: 1px solid var(--rule); }

ol > li::before { font-family: var(--mono); font-weight: 500; }

/* The one signal on the page: the punchline. */
.pull { border-left-color: var(--signal); font-weight: 600; }

.foot { font-style: normal; font-family: var(--mono); font-size: 8pt; letter-spacing: 0.06em; }

@media screen and (max-width: 850px) {
  .masthead { margin: -18px -16px 16px; padding: 14px 16px; }
}
@media print {
  .masthead { margin: 0 0 16px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}