/* The Surgeon General module, ten ways — scaffolding for tests/surgeon.html.

   One borrowed sentence, one citation, and fifteen tally marks. What changes
   between the options is how much of the page it is allowed to take: the
   shipped version is a full-width panel at display size, and most of these are
   attempts to say it in a strip, a line, a stub or a margin instead.
   Does not ship with the live page. */

.sg { margin: 0; }
.sg blockquote { text-wrap: pretty; }
.sg figcaption {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--fg-35);
}
/* the numeral is still announced even where the marks replace it visually */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── The tally ──────────────────────────────────────────────────────────
   Fifteen upright marks. Every option uses the same element and only changes
   its scale, so the count stays legible as a count at any size. */
.tally { display: flex; align-items: flex-end; gap: 4px; }
.tally i {
  display: block;
  width: 3px;
  height: 34px;
  border-radius: 1px;
  background: var(--fg);
  opacity: .9;
}
.tally--sm { gap: 3px; }
.tally--sm i { width: 2px; height: 18px; }
.tally--tall i { height: 64px; }
/* inside a line of text: sized against the type, sitting on its baseline */
.tally--inline { display: inline-flex; gap: .12em; vertical-align: baseline; }
.tally--inline i { width: .08em; height: .78em; border-radius: 0; }

/* ── 01 · as it ships ───────────────────────────────────────────────────── */

.sg--panel {
  padding: var(--s-12);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  display: grid;
  gap: var(--s-8);
}
.sg--panel blockquote {
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* ── 02 · one line ──────────────────────────────────────────────────────── */

.sg--line { display: grid; gap: var(--s-2); }
.sg--line blockquote {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
  max-width: 76ch;
}

/* ── 03 · marks left, sentence right ────────────────────────────────────── */

.sg--split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-8);
  border-block: 1px solid var(--rule);
}
@media (min-width: 760px) { .sg--split { grid-template-columns: auto 1fr; gap: var(--s-12); } }
.sg--split blockquote {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 44ch;
  margin-bottom: var(--s-3);
}

/* ── 04 · full-bleed strip ──────────────────────────────────────────────── */

.sg--strip {
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  padding-block: var(--s-5);
}
.sg__stripInner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.sg--strip .tally i { height: 20px; }
.sg--strip blockquote {
  flex: 1 1 34ch;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg);
}
.sg--strip figcaption { margin-left: auto; }

/* ── 05 · number first ──────────────────────────────────────────────────── */

.sg--num { display: flex; align-items: baseline; gap: var(--s-6); flex-wrap: wrap; }
.sg__num {
  font-size: clamp(64px, 9vw, 128px);
  line-height: .82;
  letter-spacing: -0.05em;
}
.sg--num blockquote {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.45;
  color: var(--fg-60);
  max-width: 30ch;
  margin-bottom: var(--s-2);
}

/* ── 06 · compact card ──────────────────────────────────────────────────── */

.sg--card {
  max-width: 44ch;
  padding: var(--s-8);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  display: grid;
  gap: var(--s-5);
}
.sg--card blockquote { font-size: 19px; line-height: 1.42; }

/* ── 07 · margin note ───────────────────────────────────────────────────── */

.sg--margin { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  /* the aside sits out in the margin, where a printed page would put it */
  .sg--margin { grid-template-columns: 180px 1fr; gap: var(--s-12); }
}
.sg__aside { display: grid; gap: var(--s-3); align-content: start; }
.sg--margin blockquote {
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--fg);
  max-width: 62ch;
}

/* ── 08 · stub ──────────────────────────────────────────────────────────── */

.sg--stub {
  max-width: 40ch;
  padding: var(--s-6);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  display: grid;
  gap: var(--s-4);
  /* the tally reads as the perforation, so it runs the full width and is cut
     off by the stub's own edge */
  overflow: hidden;
}
.tally--edge { gap: 6px; margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) 0; padding: var(--s-3) var(--s-6); border-bottom: 1px dashed var(--rule-strong); }
.tally--edge i { width: 2px; height: 10px; opacity: .5; }
.sg--stub blockquote { font-size: 17px; line-height: 1.45; }

/* ── 09 · third column ──────────────────────────────────────────────────── */

.sg__row { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .sg__row { grid-template-columns: repeat(3, 1fr); gap: var(--s-12); } }
.sg__statNum {
  font-size: clamp(44px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -0.04em;
}
.sg__statLabel { margin-top: var(--s-3); color: var(--fg-60); max-width: 26ch; }
.sg__statSrc { margin-top: var(--s-3); font-size: var(--t-micro); line-height: 1.45; color: var(--fg-35); }
/* the quote column carries the same rhythm as the two figures beside it */
.sg--col { display: grid; gap: var(--s-3); align-content: start; }
.sg--col blockquote { font-size: 17px; line-height: 1.4; color: var(--fg); max-width: 26ch; }

/* ── 10 · between two rules ─────────────────────────────────────────────── */

.sg--rules { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
/* the rule the marks sit in: the line runs behind them and the ground of the
   page is punched out around them, so they read as part of it */
.sg__rule {
  position: relative;
  height: 1px;
  background: var(--rule);
}
.sg__rule .tally {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-right: var(--s-4);
  background: var(--bg);
}
.sg--rules blockquote {
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 52ch;
}