/* Contravalis brief system — one stylesheet, two documents, two outputs (screen + print). */

:root {
  --ink: #1a1f26;
  --ink-soft: #4e5763;
  --ink-faint: #646c78;
  --rule: #c7ccd4;
  --rule-soft: #e4e7ec;
  --paper: #ffffff;
  --ground: #ebedf0;
  --accent: #1f4d8f;
  --accent-soft: #eaf0f8;
  --alert: #8a3a2e;
  --alert-soft: #f7ece9;

  --serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Barlow", system-ui, -apple-system, sans-serif;

  --t-xs: 0.70rem;
  --t-sm: 0.80rem;
  --t-base: 0.94rem;
  --t-md: 1.06rem;
  --t-lg: 1.16rem;
  --t-xl: 1.9rem;
  /* One measure for running text on both surfaces. Nine prose caps had
     drifted to nine different values between 33em and 52em, and because a
     cap in em scales with its own type, the widest measure on either page
     was the smallest type: .source at 44em on 11px ran to 97 characters a
     line, against a comfortable 45-75. 34em is calibrated from .lede, the
     one cap that already measured right at 67. A brief and the tool are
     meant to read as one product, and a shared measure is most of what
     makes two documents feel like they came from the same place. */
  --measure: 34em;
  /* The page width, shared with the query tool. A reader meets Contravalis
     in a brief and then follows its link to the tool, and two documents at
     different widths read as two products. Both now step from --page to
     --page-wide at the same 1100px breakpoint.

     Widening the sheet costs the briefs nothing: running text is capped by
     --measure, so no line gets longer, and the exhibits get the room the
     tables were already able to use. The document is 8% shorter for it. The
     print rule below overrides max-width outright, so the PDF is unaffected
     by either value. */
  --page: 720px;
  --page-wide: 1080px;
}

* { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
}

.sheet {
  max-width: var(--page);
  margin: 0 auto;
  background: var(--paper);
  padding-block: 2.6rem;
  padding-inline: clamp(1rem, 4vw, 3.2rem);
}

/* The same step the query tool takes, at the same width, so following a
   link from a brief to the tool does not change the shape of the page. */
@media (min-width: 1100px) {
  .sheet {
    max-width: var(--page-wide);
  }
}

/* ---- letterhead ---------------------------------------------------- */

.letterhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 0.6rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.012em;
}

.wordmark .mark { color: var(--accent); }

.doc { text-align: right; }

.doctype {
  font-size: var(--t-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.byline { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.15rem; }

@media screen and (max-width: 560px) {
  .doc { text-align: left; }
}

/* Explicit column counts, not auto-fit: the sheet is a different width on
   screen and on paper, and auto-fit left an orphaned field on the page. */
.meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 1.4rem;
  margin-top: 0.95rem;
  font-size: var(--t-sm);
  align-items: start;
}

@media (min-width: 40rem) {
  .meta { grid-template-columns: repeat(4, 1fr); }
  .meta.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.meta .k {
  display: block;
  min-height: 1.3em;
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.meta b { font-weight: 600; color: var(--ink); }

/* ---- headline ------------------------------------------------------ */

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.16;
  letter-spacing: -0.011em;
  text-wrap: balance;
  margin: 1.6rem 0 0.5rem;
}

/* Measures are in em, not ch: `ch` is the width of "0", which in Libre Franklin
   is 0.71em — 60ch renders ~100 characters, well past a comfortable line. */
.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

h2 {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-top: 1.5px solid var(--ink);
  padding-top: 0.55rem;
  margin: 2.6rem 0 1rem;
}

/* ---- exhibits ------------------------------------------------------ */

.exhibit {
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.source {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
  max-width: var(--measure);
}

/* ---- key figures strip (no boxes, no vertical rules) --------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem 1.5rem;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0;
  margin-top: 1.6rem;
}

/* min-height keeps every figure on a common baseline when a label wraps */
.figures .l {
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
  min-height: 2.6em;
}

.figures .n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.1;
  margin-top: 0.2rem;
}

@media screen and (max-width: 560px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
}

/* ---- two-column block ---------------------------------------------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }

@media screen and (max-width: 560px) {
  .two-col { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---- tables (booktabs: rule above head, below head, at end) -------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

thead th {
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

tbody td {
  padding: 0.55rem 0.65rem;
  vertical-align: top;
  border: none;
}

tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }

.num { text-align: right; white-space: nowrap; }
.when { white-space: nowrap; }
.firm { font-weight: 600; }

.sub {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 0.05rem;
}

.muted { color: var(--ink-faint); }
.mark-up { font-weight: 600; }
.near { font-weight: 600; }

/* magnitude bar inside a table cell — closes the gap between name and number */
.mag { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; }
.mag .track { display: block; flex: 1 1 auto; max-width: 7rem; height: 5px; background: var(--rule-soft); }
.mag .fill { display: block; height: 100%; background: var(--accent); min-width: 2px; }
.mag .v { flex: 0 0 auto; min-width: 1.8rem; text-align: right; }

/* ---- key/value list ------------------------------------------------ */

.kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
}

.kv:first-child { border-top: 1px solid var(--rule); }
.kv .k { color: var(--ink-soft); }
.kv .v { font-weight: 600; }

/* ---- proportional bars --------------------------------------------- */

.bars { display: flex; flex-direction: column; gap: 0.7rem; }

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
  font-size: var(--t-sm);
}

.bar .fv { color: var(--ink-soft); font-weight: 600; }
.bar .track { grid-column: 1 / -1; height: 6px; background: var(--rule-soft); }
.bar .fill { height: 100%; background: var(--accent); min-width: 2px; }

/* ---- callout ------------------------------------------------------- */

.callout {
  border-left: 2px solid var(--accent);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.2rem 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.callout b { color: var(--ink); }

p.body {
  font-size: var(--t-base);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---- call to action ------------------------------------------------ */

.cta {
  border-top: 1.5px solid var(--ink);
  padding: 1.1rem 0 0;
  margin-top: 1.5rem;
}

.cta h3 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.cta p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; max-width: var(--measure); }
.cta .ask { display: block; margin-top: 0.65rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
/* On a phone the link is the page's one action: give it a 44px target
   (WCAG 2.5.5 / Apple HIG) without changing how it looks. */
@media screen and (max-width: 560px) {
  .cta .ask { padding-block: 0.8rem; margin-top: 0.1rem; }
}

/* ---- footer -------------------------------------------------------- */

/* Kept whole. Adding one sentence to this block split it across a page
   break, stranding three lines and a rule on an otherwise empty final page.
   It is short enough to always move as a unit; the tables above it are the
   ones free to break. */
footer {
  margin-top: 1.2rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.55;
  break-inside: avoid;
}

.tag {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--alert);
  background: var(--alert-soft);
  padding: 0.2em 0.5em;
  margin-bottom: 0.55rem;
}

a { color: var(--accent); }

/* ---- mobile: linearize tables into stacked records ----------------- */

@media screen and (max-width: 560px) {
  .sheet { padding-inline: 1rem; }

  table, tbody, tr, td { display: block; width: 100%; }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  tbody tr {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:last-child { border-bottom: 1.5px solid var(--ink); }

  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.16rem 0;
    text-align: left;
  }

  tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
  }

  tbody td.lead { display: block; }
  tbody td.lead::before { display: none; }
  tbody td.lead .firm { font-size: var(--t-base); }

  .num { text-align: right; }
  .mag { justify-content: flex-end; }
  .mag .track { max-width: 5rem; }
}

/* ---- print --------------------------------------------------------- */

@page {
  size: letter;
  margin: 16mm 15mm 17mm;

  /* @bottom-left carries the document's own identity — set per document. */

  @bottom-right {
    content: counter(page) " / " counter(pages);
    font-family: "Barlow", sans-serif;
    font-size: 7pt;
    color: #858d99;
  }
}

@media print {
  :root { color-scheme: light; }

  body {
    background: var(--paper);
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sheet {
    max-width: none;
    padding: 0;
    border: none;
  }

  /* Paper is a fixed budget: tighten the vertical rhythm so the closing
     call to action lands with the body instead of orphaning a page. */
  body { line-height: 1.5; }
  h2 { margin-top: 1.9rem; }
  .target { margin-bottom: 1.1rem; }
  .why { margin-top: 0.5rem; }
  .cta { margin-top: 1.6rem; }
  footer { margin-top: 1.4rem; }

  p, .lede, .callout, .source, footer { orphans: 3; widows: 3; }

  /* short tables move whole; long ones are free to break — thead repeats */
  .table-wrap.keep { break-inside: avoid; }

  h2, .exhibit { break-after: avoid; }
  .exhibit + * { break-before: avoid; }
  tbody tr { break-inside: avoid; }
  .callout, .cta, .figures, .kv, .bar, .two-col { break-inside: avoid; }
  .source { break-before: avoid; }

  .table-wrap { overflow: visible; }

  a { color: var(--ink); text-decoration: none; }
}

/* ---- the wide step ---------------------------------------------------
   Above the breakpoint the sheet is 1080px while running text stays capped
   by --measure, which left prose sitting as a ribbon with more than half
   the sheet empty beside it. Every block that explains the document or an
   exhibit spans the sheet instead.

   Columns are for the blocks that are read, not for the ones that are
   consulted. The 45-75 character measure exists to protect the return
   sweep: the eye finding the start of the next line. A source note that
   fits on one line has no return sweep, and three of the six on these two
   briefs are one line at full width. Setting those in two columns produced
   a line in the first column and a stranded fragment in the second, which
   reads as broken.

   So the source notes span in one column and the prose blocks keep two.
   The longest note runs four lines at about 145 characters; if that ever
   reads badly the answer is to shorten the note, which is an editorial fix
   and a better one than a layout that fights its own content.

   Below the breakpoint the sheet is 720px, where two columns would be
   narrower than the measure rather than wider, so none of this applies
   there. It comes last in the file because these selectors carry the same
   specificity as the base rules they override, and source order decides. */
@media (min-width: 1100px) {
  .source,
  .cta p {
    max-width: none;
  }

  /* The headline reaches the width it was already entitled to. text-wrap
     balance distributes a headline evenly across its lines instead of
     filling each one, which is the better look in a narrow column and the
     reason it is set below this breakpoint. In a 978px sheet it was holding
     the recompete headline to 527px of a line that could run to 902px, in
     the same two lines either way - an even split bought at the price of
     450px of blank beside the largest type on the page. */
  h1 {
    text-wrap: wrap;
  }

  .lede,
  .callout,
  p.body,
  .why {
    max-width: none;
    columns: 2;
    column-gap: 2.2rem;
  }

  /* A column break lands on a line boundary, so a bold label that wraps can
     be split across the gutter: "Honest gap:" came out as "Honest" ending
     one column and "gap:" opening the next. These labels are the entry
     point into the note and have to arrive whole. The longest is 44
     characters, about 250px, inside a 469px column. */
  .callout b,
  p.body b,
  .why b {
    white-space: nowrap;
  }
}