/* am-ba — shared site styles. Tokens are the brand kit v1.0, identical to the
   report's, so a visitor moving from a page to the report sees one document. */
:root{
  --graphite:#1C1A17; --bone:#F2EBDD; --amber:#C9791A;
  --royal:#E8DFC8; --lemon:#E8C547; --honey:#D99A2B;
  --cognac:#A85E1B; --cherry:#7B2618; --sage:#66743A;

  --paper:var(--bone); --card:#FAF6EC;
  --ink:var(--graphite); --ink-soft:#5A5148; --ink-faint:#635C51;
  --rule:#DCD2BF; --rule-soft:#E6DECC;

  /* Text-safe shades: cognac and sage as drawn fail AA at small sizes on bone. */
  --amber-deep:#8A4A12; --amber-wash:#F6E7CE;
  --sage-deep:#4A5528; --sage-wash:#E9EBDC;
  --cherry-wash:#F4E2DE;
  --bar:var(--cognac); --bar-quiet:#B0A288;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.sheet{max-width:62rem; margin:0 auto; padding:0 2rem 5rem}
p{margin:0 0 1.15rem}
a{color:var(--amber-deep)}

.micro{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0}
.micro-amber{color:var(--amber-deep)} .micro-sage{color:var(--sage-deep)}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ---- masthead + nav ---------------------------------------------------- */
header.masthead{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.6rem;
  padding:1.75rem 0 1rem; border-bottom:1px solid var(--ink)}
/* Clear space = half mark height on all sides (brand kit v1.0). content-box so
   the padding is clear space and not taken out of the height. */
.lockup{box-sizing:content-box; display:block; height:42px; width:auto; padding:16px 16px 16px 0}
.descriptor{font-size:.875rem; color:var(--ink-faint); margin:0; flex:1 1 14rem}
nav.site{display:flex; gap:1.4rem; flex-wrap:wrap}
nav.site a{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent}
nav.site a:hover{color:var(--ink); border-bottom-color:var(--ink)}
nav.site a[aria-current="page"]{color:var(--amber-deep); border-bottom-color:var(--amber)}

/* ---- lede -------------------------------------------------------------- */
.lede{padding:3.25rem 0 0; max-width:46rem}
h1{font-size:clamp(1.9rem,4.3vw,2.9rem); line-height:1.15; font-weight:600;
  letter-spacing:-.02em; margin:.75rem 0 1.5rem}
h1 em{font-style:normal; color:var(--amber-deep)}
.standfirst{font-size:1.18rem; line-height:1.62; color:var(--ink-soft); margin:0 0 1.15rem}
.standfirst strong{color:var(--ink); font-weight:600}

/* ---- calls to action --------------------------------------------------- */
.cta{display:flex; flex-wrap:wrap; gap:.85rem; margin:2.25rem 0 0; align-items:center}
.btn{display:inline-block; font-size:.97rem; font-weight:600; text-decoration:none;
  padding:.72rem 1.35rem; border:1px solid var(--ink); background:var(--ink); color:var(--bone)}
.btn:hover{background:#2C2924; border-color:#2C2924}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--card)}
.cta .note{font-size:.9rem; color:var(--ink-faint)}

/* ---- sections ---------------------------------------------------------- */
section{padding:4rem 0 0; border-top:1px solid var(--rule); margin-top:4rem}
.sec-label{display:flex; align-items:baseline; gap:.9rem; margin-bottom:.6rem}
h2.sec{font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:600; letter-spacing:-.012em;
  margin:0 0 1.1rem; max-width:36ch}
h3.sub{font-size:1.15rem; font-weight:600; margin:2.6rem 0 .8rem}
.sec-intro{max-width:46rem; color:var(--ink-soft); font-size:1.05rem}
.sec-intro strong{color:var(--ink); font-weight:600}
.prose{max-width:46rem}
.prose li{margin-bottom:.5rem}

/* ---- headline figures -------------------------------------------------- */
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:0 1.5rem;
  margin:2.75rem 0 0; border-top:1px solid var(--ink)}
.fig{padding:1.5rem 1.5rem 1.4rem 0; border-bottom:1px solid var(--rule)}
.fig .bignum{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(2.4rem,6vw,3.4rem); line-height:.95; font-weight:500;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.fig .bignum .pct{font-size:.42em; color:var(--amber-deep); margin-left:.1em}
.fig .bignum.sage{color:var(--sage-deep)}
.fig p{margin:.8rem 0 0; font-size:.95rem; color:var(--ink-soft); max-width:22rem}
/* The strip already closes with a rule, so the next section does not need the
   full 8rem the report puts between sections. */
.figures + section{padding-top:2.5rem; margin-top:2.5rem}

/* ---- panels ------------------------------------------------------------ */
.summary{margin:2.75rem 0 0; border:1px solid var(--ink); background:var(--card); padding:1.5rem 1.6rem 1.25rem}
.summary h2{font-size:.6875rem; font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem; font-weight:500}
.summary ul{margin:0; padding:0; list-style:none}
.summary li{display:flex; gap:.85rem; padding:.55rem 0; border-top:1px solid var(--rule-soft);
  font-size:1rem; line-height:1.55}
.summary li:first-child{border-top:0; padding-top:0}
.summary li b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  color:var(--amber-deep); font-weight:600; flex:0 0 5.2rem}

.actions{margin:2.5rem 0 0; border-left:3px solid var(--sage); background:var(--sage-wash); padding:1.35rem 1.5rem}
.actions h2{font-size:1.05rem; font-weight:600; margin:0 0 .9rem}
.actions ol{margin:0; padding-left:1.3rem}
.actions li{margin-bottom:.55rem; font-size:1rem; line-height:1.55}

.note-box{margin:2.5rem 0 0; border-left:3px solid var(--amber); background:var(--amber-wash);
  padding:1.35rem 1.5rem}
.note-box h2{font-size:1.05rem; font-weight:600; margin:0 0 .7rem}
.note-box p:last-child{margin-bottom:0}

/* ---- definition rows --------------------------------------------------- */
dl.rows{margin:2rem 0 0; display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:0}
dl.rows dt{font-weight:600; padding:.8rem 1rem .8rem 0; border-top:1px solid var(--rule-soft)}
dl.rows dd{margin:0; padding:.8rem 0; color:var(--ink-soft); border-top:1px solid var(--rule-soft)}

/* ---- footer ------------------------------------------------------------ */
footer.doc{margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--ink)}
footer.doc .cols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem 2.5rem}
footer.doc .cols>div:first-child{flex:1 1 28rem; max-width:38rem}
footer.doc .cols>div:last-child{flex:0 1 15rem}
footer.doc p{margin:0 0 .4rem; font-size:.93rem; color:var(--ink-soft)}
.footmark{display:block; width:56px; height:auto; margin:0 0 .6rem}
.flink{color:var(--amber-deep); text-decoration:none; border-bottom:1px solid var(--rule)}
.flink:hover{border-bottom-color:var(--amber)}

@media (max-width:40rem){
  .sheet{padding:0 1.25rem 3.5rem}
  /* Two 11rem columns plus the sheet's padding still exceed a 430px viewport,
     which scrolls the whole page sideways. One column below this width. */
  .figures{grid-template-columns:1fr}
  dl.rows{grid-template-columns:1fr; gap:0}
  dl.rows dd{padding-top:0; border-top:0}
  .fig{padding-right:0}
}