/* Basispoint shared styles for content pages (pages/*.html).
   Same design system as index.html: engraved-certificate palette,
   Besley display / Public Sans body / IBM Plex Mono data. */

:root{
  --paper:#EFF1EC;
  --paper-deep:#E4E8E1;
  --ink:#122019;
  --ink-soft:#3C4A42;
  --green:#1E5B43;
  --green-deep:#143D2E;
  --seal:#B33A2B;
  --rule:#C7CFC6;
  --mono:'IBM Plex Mono',monospace;
  --body:'Public Sans',system-ui,sans-serif;
  --display:'Besley',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* header */
header{border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.logo small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--green);margin-left:8px;letter-spacing:.08em}
.nav-links{display:flex;gap:24px;font-size:14.5px}
.nav-links a{color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{color:var(--green);text-decoration:underline}

/* article layout */
main{padding:48px 0 24px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-.015em;margin-bottom:14px;max-width:26ch}
h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;margin:52px 0 12px}
.lede{font-size:18px;color:var(--ink-soft);max-width:62ch;margin-bottom:8px}
.stamp{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin-bottom:36px}
p{max-width:68ch;margin-bottom:16px}
p.note{font-size:14px;color:var(--ink-soft)}

/* chart cards */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:28px 0}
.chart-card{background:var(--paper-deep);border:1px solid var(--rule);border-radius:4px;padding:18px 18px 10px;position:relative}
.chart-card .tag{position:absolute;top:-11px;left:16px;background:var(--green);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:3px 10px;border-radius:2px}
.chart-card figcaption{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);padding:8px 4px 6px;display:flex;justify-content:space-between}
.chart-card svg{display:block;width:100%;height:auto}
.chart-card svg text{font-family:var(--mono)}
.chart-wide{margin:28px 0}

/* data tables */
table{border-collapse:collapse;width:100%;max-width:560px;margin:20px 0 8px;font-size:15px}
caption{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding-bottom:8px}
th,td{text-align:right;padding:9px 14px;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left}
th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
td{font-family:var(--mono);font-size:14.5px}
td.up{color:var(--green)}
td.down{color:var(--seal)}

/* footer */
footer{padding:40px 0 56px;border-top:1px solid var(--rule);margin-top:56px}
.disclaimer{font-size:13px;color:var(--ink-soft);max-width:80ch;margin-bottom:18px}
.foot-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--ink-soft);flex-wrap:wrap;gap:10px}

@media (max-width:820px){
  .card-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}