/* ClimateSolve vault — shared document style ("Blue Marble" paper) */
:root {
  --space: #05070B;
  --paper: #F4F8FA;
  --paper-2: #E8F0F5;
  --ink: #14212B;
  --muted: #4A5A66;
  --dawn: #0C74C8;
  --dawn-bright: #4FB3FF;
  --atmo: #0E7590;
  --hair: rgba(20,33,43,.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  font-weight: 400; line-height: 1.7; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.vault-return {
  position: fixed; top: 18px; left: 18px; z-index: 50;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none;
  color: var(--paper); background: var(--space);
  padding: 9px 14px; border-radius: 2px; opacity: 0.88;
}
.vault-return:hover { opacity: 1; }
.doc { max-width: 760px; margin: 0 auto; padding: 90px 30px 80px; }
.doc-head { border-bottom: 2px solid var(--ink); padding-bottom: 34px; margin-bottom: 46px; }
.doc-head .markline { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.wordmark .wm-solve { color: var(--dawn); }
.doc-head .wordmark { font-family: 'Fraunces', serif; font-weight: 560; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; }
.doc-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--dawn); display: block; margin-bottom: 14px; font-weight: 500;
}
h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 430; font-optical-sizing: auto; font-size: clamp(32px, 5vw, 46px); line-height: 1.12; margin-bottom: 16px; }
.doc-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--dawn); margin: 52px 0 14px; font-weight: 500;
}
h2 { font-family: 'Fraunces', serif; font-weight: 560; font-size: 25px; line-height: 1.25; margin-bottom: 14px; }
h3 { font-family: 'Fraunces', serif; font-weight: 560; font-size: 18px; margin: 26px 0 8px; }
p { margin-bottom: 15px; max-width: 68ch; }
p.lead { font-size: 18px; line-height: 1.75; color: var(--ink); }
p.muted, li.muted { color: var(--muted); font-size: 14.5px; }
ul, ol { margin: 0 0 15px 22px; max-width: 66ch; }
li { margin-bottom: 8px; }
em { font-style: italic; }
strong { font-weight: 600; }
blockquote {
  border-left: 3px solid var(--dawn); background: var(--paper-2);
  padding: 22px 28px; margin: 26px 0; font-family: 'Fraunces', serif; font-style: italic;
  font-size: 19px; line-height: 1.5; max-width: 62ch;
}
blockquote .attr { display: block; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
table { border-collapse: collapse; width: 100%; margin: 22px 0 28px; font-size: 14px; }
th {
  text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid var(--ink); padding: 10px 14px 10px 0;
}
td { border-bottom: 1px solid var(--hair); padding: 12px 14px 12px 0; vertical-align: top; line-height: 1.55; }
td:first-child { font-weight: 550; white-space: nowrap; }
.note {
  border: 1px solid var(--hair); border-left: 3px solid var(--dawn);
  background: var(--paper-2); padding: 24px 28px; margin: 28px 0;
}
.note .tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dawn); display: block; margin-bottom: 10px; font-weight: 500; }
.note p { font-size: 14.5px; margin-bottom: 10px; }
.note p:last-child { margin-bottom: 0; }
.scorebar { display: flex; gap: 1px; margin: 20px 0 28px; border: 1px solid var(--hair); background: var(--hair); }
.scorebar .s { flex: 1; background: var(--paper); padding: 18px 20px; }
.scorebar .s .n { font-family: 'Fraunces', serif; font-weight: 560; font-size: 30px; display: block; }
.scorebar .s .l { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.doc-foot {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); line-height: 2;
}
.next-doc { display: block; margin-top: 40px; border: 1px solid var(--hair); padding: 22px 26px; text-decoration: none; color: var(--ink); background: var(--paper-2); }
.next-doc .tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dawn); display: block; margin-bottom: 8px; }
.next-doc .t { font-family: 'Fraunces', serif; font-weight: 560; font-size: 18px; }
.next-doc:hover { border-color: var(--ink); }
@media (max-width: 560px) {
  td:first-child { white-space: normal; }
  table { display: block; overflow-x: auto; }
}
/* ---------------------------------------------------------------- print ---
   Sizes are in POINTS here, deliberately. The screen layout is 820px wide,
   which overflows the printable width of a page; left alone, Chrome scales the
   whole document down to fit (it was shrinking to ~67%, landing body text at
   8pt and leaving half the page blank). Declaring the page box and restating
   the type in pt means nothing needs scaling and the PDF comes out at the size
   it was designed for. */
@page { size: A4; margin: 17mm 18mm 15mm; }

@media print {
  .vault-return, .next-doc { display: none !important; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.5; }

  /* the screen's centring column and padding are the page box's job now */
  .doc { max-width: none; margin: 0; padding: 0; }

  /* measure is set by the page margins; these caps would re-narrow it */
  p, ul, ol, li, blockquote, table, .note p { max-width: none; }

  h1 { font-size: 24pt; line-height: 1.1; }
  h2 { font-size: 14.5pt; }
  h3 { font-size: 11.5pt; }
  p { margin-bottom: 8pt; }
  p.lead { font-size: 12pt; line-height: 1.5; }
  p.muted, li.muted { font-size: 9pt; }
  ul, ol { margin: 0 0 8pt 14pt; }
  li { margin-bottom: 4pt; }

  .doc-head { padding-bottom: 16pt; margin-bottom: 22pt; }
  .doc-head .wordmark { font-size: 10pt; }
  .doc-head .eyebrow { font-size: 7pt; margin-bottom: 8pt; }
  .doc-meta { font-size: 7.5pt; }
  .sec { font-size: 7.5pt; margin: 22pt 0 7pt; }

  blockquote { font-size: 12pt; padding: 11pt 14pt; margin: 13pt 0; }
  blockquote .attr { font-size: 7pt; margin-top: 6pt; }

  /* The table must wrap. On screen `td:first-child` is nowrap and the page can
     scroll; on paper it cannot, so the table grows past the page box and
     Chrome silently shrinks the WHOLE document to fit - the cause of the 7pt
     body text in every earlier build. Fixed layout keeps the columns honest. */
  table { font-size: 9pt; margin: 11pt 0 14pt; table-layout: fixed; width: 100%; }
  th { font-size: 7pt; padding: 5pt 7pt 5pt 0; }
  td { padding: 6pt 7pt 6pt 0; line-height: 1.45; }
  th, td { white-space: normal; overflow-wrap: break-word; }
  td:first-child { white-space: normal; }

  .note { padding: 12pt 14pt; margin: 14pt 0; }
  .note .tag { font-size: 7pt; margin-bottom: 5pt; }
  .note p { font-size: 9pt; margin-bottom: 5pt; }

  .scorebar { margin: 10pt 0 14pt; }
  .scorebar .s { padding: 9pt 10pt; }
  .scorebar .s .n { font-size: 18pt; }
  .scorebar .s .l { font-size: 6.5pt; }

  .doc-foot { margin-top: 26pt; padding-top: 12pt; font-size: 7pt; }

  /* keep the tinted boxes and rules; browsers drop backgrounds when printing */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* nothing should be orphaned across a page break */
  h1, h2, h3, .sec { break-after: avoid; }
  blockquote, .note, .scorebar, table { break-inside: avoid; }
}