/* study.css — the new study page and its two companions (/study, /study/v1.0,
   /study/corrections). Loaded only by those pages, through their .head.html, so the
   site's one stylesheet and every live page stay byte-for-byte what they are while
   the study is held. Colors are the site's own custom properties, so light and dark
   come for free; copper as text is --accent-ink, copper as a fill or a bar is
   --accent. Nothing here sizes with an inline style: a bar's length is a class
   (.w0 to .w100), a column's height is a class (.h0 to .h100), and the build
   writes the class from the figure, so the drawing cannot drift from the number. */

/* ---------- hero ---------- */
.study-hero h1 { font-size: clamp(2.2rem, 5.6vw, 4.05rem); line-height: 1.04; }
.study-hero .lede { max-width: none; }
.film { width: 100%; margin: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); }
.film-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0 1.25rem; margin-top: 0.35rem; }
.film-label { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.film-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
/* deliberately low-key: a line, not a box */
.meta-line { font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.75;
  letter-spacing: 0.03em; color: var(--muted); }
.meta-line a { color: var(--accent-ink); }
.headline-figure { width: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.9rem 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.big-num { font-family: var(--f-display); font-weight: 800; color: var(--accent-ink);
  font-size: clamp(3.9rem, 14vw, 6.5rem); line-height: 1.1; letter-spacing: -0.04em; margin: 0; }
.big-text { font-size: clamp(1.15rem, 4.2vw, 1.5rem); line-height: 1.3; color: var(--text);
  max-width: 24rem; margin: 0; }

/* ---------- a heading with a link to itself ---------- */
.anchor { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; vertical-align: middle; margin-left: 0.15rem;
  font-family: var(--f-mono); font-size: 1rem; font-weight: 600; letter-spacing: 0;
  color: var(--muted); text-decoration: none; }
.anchor:hover { color: var(--accent-ink); }

/* ---------- bands: the page's ground, a raised wash, and the surface ---------- */
.band-raised { background: var(--raised); }
.band-surface { background: var(--surface); }

/* ---------- the ledger (Finding 1) ---------- */
.ledger { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 46rem; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline;
  gap: 0.2rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.ledger li:first-child { border-top: 1px solid var(--rule); }
.ledger .lbl { color: var(--text-2); }
.ledger li:first-child .lbl { color: var(--text); font-weight: 700; }
.ledger .num, .ledger .pct { font-family: var(--f-mono); font-size: 0.9rem; color: var(--text-2);
  font-variant-numeric: tabular-nums; text-align: right; }
.ledger .pct { min-width: 3.2rem; color: var(--text); font-weight: 600; }
.bar { grid-column: 1 / -1; display: block; height: 0.7rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.fill { display: block; height: 100%; background: var(--accent); }
.fill.ink { background: var(--text); }
@media (min-width: 46rem) {
  .ledger li { grid-template-columns: minmax(11rem, 1.2fr) 6.5rem 3.5rem minmax(7rem, 1.4fr); }
  .bar { grid-column: auto; }
}

/* ---------- the column chart (Finding 2) ---------- */
.chart { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 40rem;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.chart li { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.chart .v { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 6vw, 1.9rem);
  line-height: 1; text-align: center; color: var(--text); }
.chart .track { height: 9.5rem; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--edge); }
.chart .col { display: block; width: 100%; min-height: 2px; background: var(--accent); }
.chart .l { font-size: 0.78rem; line-height: 1.25; text-align: center; color: var(--text-2); }

/* ---------- two figure cards (Finding 3) ---------- */
.figure-cards { display: grid; gap: 0.75rem; width: 100%; }
@media (min-width: 44rem) { .figure-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figure-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1rem, 4vw, 1.5rem); }
.figure-card .n { font-family: var(--f-display); font-weight: 800; color: var(--accent-ink);
  font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.figure-card p { color: var(--text-2); font-size: 0.97rem; }

/* ---------- the roster of companies that publish a disclosure route ---------- */
/* Not buttons and not chips: a copper rule on top, one name to a row with a hairline
   under it and a small copper square before it. No numbering, so it cannot read as a
   ranking. Archivo, not Syne, and the names never wrap. */
.roster { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 2px solid var(--accent);
  display: grid; column-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* How many columns there are is decided by how much room there is, not by the viewport: the
   longest name needs about 14 rem and may not wrap, so a column is never narrower than 15. A
   fixed three columns at a given width put "Jupiter Warranty Management" on top of its neighbor. */
.roster li { position: relative; padding: 0.8rem 0 0.8rem 1.15rem; border-bottom: 1px solid var(--rule);
  font-family: var(--f-body); font-weight: 600; font-size: clamp(0.92rem, 4vw, 1rem);
  color: var(--text); white-space: nowrap; }
.roster li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.45rem; height: 0.45rem;
  margin-top: -0.225rem; background: var(--accent); }

/* ---------- four questions ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; width: 100%; counter-reset: q; }
@media (min-width: 44rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps li { counter-increment: q; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1rem 1.15rem; color: var(--text); font-weight: 600; line-height: 1.4; }
.steps li::before { content: "0" counter(q); display: block; margin-bottom: 0.4rem;
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent-ink); }

/* ---------- method: two columns of two short paragraphs ---------- */
.two-col { display: grid; gap: 1.25rem; width: 100%; }
@media (min-width: 46rem) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; } }
.two-col p { color: var(--text-2); }
.two-col strong { color: var(--text); }

/* ---------- versions ---------- */
.version-row { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem;
  padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.version-row .v { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; }
.version-row .d { font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); }
/* the sentence takes what is left and wraps inside its own box; the links and the tag keep
   their own width and drop to the next line when the row is too narrow, so nothing overlaps */
.version-row .what { flex: 1 1 10rem; min-width: 0; }
.version-row .links { flex: none; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.version-row .links a { display: inline-flex; align-items: center; min-height: 44px; }
.tag-current { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  padding: 0.25rem 0.55rem; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent-ink);
  flex: none; }

/* ---------- citation, author, disclosure ---------- */
.cite-block { width: 100%; max-width: 46rem; margin: 0; padding: 0.9rem 1.1rem; background: var(--raised);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--f-mono); font-size: 0.8rem; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.disclosure { max-width: var(--measure); font-size: 0.82rem; line-height: 1.55; color: var(--muted); }

/* ---------- a frozen copy says so ---------- */
.frozen-note { width: 100%; max-width: 46rem; margin: 0; padding: 0.7rem 1rem; background: var(--raised);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  font-size: 0.92rem; color: var(--text); }

/* ---------- corrections log ---------- */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; width: 100%; max-width: 46rem; }
.log li { padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.log .when { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.log p { color: var(--text-2); }
.log p + p { margin-top: 0.5rem; }
.log strong { color: var(--text); }

/* ---------- lengths drawn from a figure: .w0 to .w100, .h0 to .h100 ---------- */
.w0 { width: 0%; }
.w1 { width: 1%; }
.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w11 { width: 11%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w21 { width: 21%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w38 { width: 38%; }
.w39 { width: 39%; }
.w40 { width: 40%; }
.w41 { width: 41%; }
.w42 { width: 42%; }
.w43 { width: 43%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w52 { width: 52%; }
.w53 { width: 53%; }
.w54 { width: 54%; }
.w55 { width: 55%; }
.w56 { width: 56%; }
.w57 { width: 57%; }
.w58 { width: 58%; }
.w59 { width: 59%; }
.w60 { width: 60%; }
.w61 { width: 61%; }
.w62 { width: 62%; }
.w63 { width: 63%; }
.w64 { width: 64%; }
.w65 { width: 65%; }
.w66 { width: 66%; }
.w67 { width: 67%; }
.w68 { width: 68%; }
.w69 { width: 69%; }
.w70 { width: 70%; }
.w71 { width: 71%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w74 { width: 74%; }
.w75 { width: 75%; }
.w76 { width: 76%; }
.w77 { width: 77%; }
.w78 { width: 78%; }
.w79 { width: 79%; }
.w80 { width: 80%; }
.w81 { width: 81%; }
.w82 { width: 82%; }
.w83 { width: 83%; }
.w84 { width: 84%; }
.w85 { width: 85%; }
.w86 { width: 86%; }
.w87 { width: 87%; }
.w88 { width: 88%; }
.w89 { width: 89%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w92 { width: 92%; }
.w93 { width: 93%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w97 { width: 97%; }
.w98 { width: 98%; }
.w99 { width: 99%; }
.w100 { width: 100%; }
.h0 { height: 0%; }
.h1 { height: 1%; }
.h2 { height: 2%; }
.h3 { height: 3%; }
.h4 { height: 4%; }
.h5 { height: 5%; }
.h6 { height: 6%; }
.h7 { height: 7%; }
.h8 { height: 8%; }
.h9 { height: 9%; }
.h10 { height: 10%; }
.h11 { height: 11%; }
.h12 { height: 12%; }
.h13 { height: 13%; }
.h14 { height: 14%; }
.h15 { height: 15%; }
.h16 { height: 16%; }
.h17 { height: 17%; }
.h18 { height: 18%; }
.h19 { height: 19%; }
.h20 { height: 20%; }
.h21 { height: 21%; }
.h22 { height: 22%; }
.h23 { height: 23%; }
.h24 { height: 24%; }
.h25 { height: 25%; }
.h26 { height: 26%; }
.h27 { height: 27%; }
.h28 { height: 28%; }
.h29 { height: 29%; }
.h30 { height: 30%; }
.h31 { height: 31%; }
.h32 { height: 32%; }
.h33 { height: 33%; }
.h34 { height: 34%; }
.h35 { height: 35%; }
.h36 { height: 36%; }
.h37 { height: 37%; }
.h38 { height: 38%; }
.h39 { height: 39%; }
.h40 { height: 40%; }
.h41 { height: 41%; }
.h42 { height: 42%; }
.h43 { height: 43%; }
.h44 { height: 44%; }
.h45 { height: 45%; }
.h46 { height: 46%; }
.h47 { height: 47%; }
.h48 { height: 48%; }
.h49 { height: 49%; }
.h50 { height: 50%; }
.h51 { height: 51%; }
.h52 { height: 52%; }
.h53 { height: 53%; }
.h54 { height: 54%; }
.h55 { height: 55%; }
.h56 { height: 56%; }
.h57 { height: 57%; }
.h58 { height: 58%; }
.h59 { height: 59%; }
.h60 { height: 60%; }
.h61 { height: 61%; }
.h62 { height: 62%; }
.h63 { height: 63%; }
.h64 { height: 64%; }
.h65 { height: 65%; }
.h66 { height: 66%; }
.h67 { height: 67%; }
.h68 { height: 68%; }
.h69 { height: 69%; }
.h70 { height: 70%; }
.h71 { height: 71%; }
.h72 { height: 72%; }
.h73 { height: 73%; }
.h74 { height: 74%; }
.h75 { height: 75%; }
.h76 { height: 76%; }
.h77 { height: 77%; }
.h78 { height: 78%; }
.h79 { height: 79%; }
.h80 { height: 80%; }
.h81 { height: 81%; }
.h82 { height: 82%; }
.h83 { height: 83%; }
.h84 { height: 84%; }
.h85 { height: 85%; }
.h86 { height: 86%; }
.h87 { height: 87%; }
.h88 { height: 88%; }
.h89 { height: 89%; }
.h90 { height: 90%; }
.h91 { height: 91%; }
.h92 { height: 92%; }
.h93 { height: 93%; }
.h94 { height: 94%; }
.h95 { height: 95%; }
.h96 { height: 96%; }
.h97 { height: 97%; }
.h98 { height: 98%; }
.h99 { height: 99%; }
.h100 { height: 100%; }