/* Grand Blade Media: page-numbers.css ("The Lab")
   Page-only styling on top of site.css. Colors come from the semantic tokens (--fg, --fg-2, --line,
   --card-bg), so every block is right on bone, paper and ink. No vermilion text. No inline styles. */

/* ---------- 1. Intro ---------- */
/* Same top spacing as the Work, Services, Guides and About page heads, so the H1 starts at the same y on every inner page. */
.lab-intro{padding-block:clamp(3.5rem,8vw,7rem) calc(var(--section-y) * .6)}
.lab-intro .section__head{margin-bottom:var(--s-4)}
.lab-intro .h1{max-width:10em}
.lab-intro .lede{max-width:36rem}
.lab-intro__body{max-width:42rem}
.lab-intro__body p+p{margin-top:var(--s-3)}
.lab-intro .owned-note{margin-top:var(--s-3)}

.lab-jump{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem var(--s-4);margin-top:var(--s-5);padding-top:var(--s-2);border-top:1px solid var(--line)}
.lab-jump ul{display:flex;flex-wrap:wrap;gap:0 var(--s-3);padding:0;list-style:none}
.lab-jump .link{display:inline-flex;align-items:center;min-height:2.75rem}

/* ---------- 2. Method box ---------- */
#method .callout--method{max-width:62rem}
#method .callout--method dl{margin-top:1.25rem;gap:1.1rem 2rem}
#method .callout--method dt{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.1em;font-weight:500;line-height:1.7}
@media (min-width:48em){#method .callout--method dl{grid-template-columns:minmax(7rem,10rem) minmax(0,1fr)}}

/* ---------- 3. Scoreboard (ink band) ---------- */
.lab-tiles{display:grid;gap:var(--s-5)}
.lab-tile{display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(1.5rem,4vw,3.5rem);min-width:0}
.lab-tile__head .eyebrow{margin-bottom:var(--s-2)}
.lab-tile__name{font:400 clamp(1.75rem,3.6vw,2.875rem)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.lab-tile__format{margin-top:.6rem;max-width:38rem;color:var(--fg-2)}
.lab-tile .statband{grid-template-columns:minmax(0,1fr);gap:var(--s-4) var(--s-3)}
.lab-tile .stat__value{font-size:clamp(2.5rem,4.2vw,3.5rem)}
.lab-tile .stat__label{margin-top:.8rem}
.lab-tile .stat__meta{font-size:.8125rem}
.lab-title{display:block;margin-top:.3rem;font-weight:400;font-size:.9375rem;line-height:1.4;color:var(--fg-2)}
.lab-tile__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-1) var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.lab-tile__note{max-width:38rem;color:var(--fg-2)}
.lab-tile__notes{display:grid;gap:var(--s-1);max-width:44rem;min-width:0}
.lab-tile__check{max-width:44rem;color:var(--fg)}
.lab-tile__foot .arrow-link{flex:none}
#scoreboard .owned-note{margin-top:var(--s-5)}
@media (min-width:44em){.lab-tile .statband{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:72em){.lab-tile .statband{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- 4. Chart and the under-one-hundred line ---------- */
.lab-under{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--fg)}
.lab-under__t{font:400 clamp(1.5rem,2.6vw,2.125rem)/1.25 var(--serif);letter-spacing:-.01em;max-width:26em;text-wrap:balance}
.lab-under__n{display:inline-block;margin-right:.12em;font-size:var(--fs-stat);line-height:1;color:var(--fg);vertical-align:-.06em}
.lab-under .stat__meta{max-width:46rem;margin-top:var(--s-2)}
/* Vermilion is capped at 5% of any viewport (the 5% vermilion cap). Between 42em and 72em a full-width chart broke that (5.9% at 1100 wide),
   so the figure stops at 46rem there. From 72em the chart takes the left and the line about the short bars sits beside it. */
@media (min-width:42em) and (max-width:71.99em){.lab-chart{max-width:46rem}}
/* On a phone the narrow drawing fills the screen width, and its 50 bars passed 5% of a 320 by 568 viewport (5.5% measured).
   Thinner bars (CSS width on the rects, user units) bring it under; the data and the labels do not change. */
@media (max-width:41.99em){.lab-chart .chart__svg--narrow rect{width:3.4px}}
@media (min-width:72em){
  .lab-chart-grid{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--s-5);align-items:start}
  .lab-under{margin-top:0;padding-top:var(--s-3)}
  .lab-under__n{display:block;margin:0 0 .15em}
  .lab-under__t{font-size:clamp(1.5rem,2vw,1.875rem)}
}

/* ---------- 5. Lifetime ledger ---------- */
/* The caveat column is the point of this table, so it never sits behind a sideways scroll. Below 44em site.css stacks it
   (.ledger--stack). Six columns need about 54rem, so from 44em to 62em this page stacks it too, with the same rules
   as site.css; from 62em it is an ordinary table. No min-width here: a page min-width would bring the scroll back. */
@media (min-width:62em){
  .lab-ledger .ledger tbody th{white-space:nowrap}
  .lab-ledger .ledger td:last-child{min-width:15rem;max-width:26rem}
  .lab-ledger .ledger td:not(.num){white-space:normal}
  .lab-ledger .ledger td:nth-child(5){white-space:nowrap}
}
.lab-ledger__note{margin-top:var(--s-3);max-width:46rem}
@media (max-width:61.99em){
  /* two columns of figures on a phone, four from 44em; the channel and the caveat take the full row */
  .lab-ledger .ledger.ledger--stack tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.5rem}
  .lab-ledger .ledger.ledger--stack tbody th,.lab-ledger .ledger.ledger--stack td:last-child{grid-column:1/-1}
  .lab-ledger .ledger.ledger--stack td:last-child{max-width:34rem}
}
@media (min-width:44em) and (max-width:61.99em){
  .lab-ledger .ledger.ledger--stack{display:block;width:100%;min-width:0}
  .lab-ledger .ledger.ledger--stack caption{display:block;position:static;width:auto;max-width:none;padding-bottom:1rem}
  .lab-ledger .ledger.ledger--stack :is(thead,tbody,tfoot){display:block}
  .lab-ledger .ledger.ledger--stack thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lab-ledger .ledger.ledger--stack tbody tr{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:1.35rem;border-bottom:1px solid var(--line)}
  .lab-ledger .ledger.ledger--stack tbody :is(th,td){display:block;padding:.3rem 0;border:0;white-space:normal;min-width:0;max-width:none}
  .lab-ledger .ledger.ledger--stack td:last-child{max-width:34rem}
  .lab-ledger .ledger.ledger--stack tbody th{padding-bottom:.45rem;font-size:1.0625rem;line-height:1.35}
  .lab-ledger .ledger.ledger--stack tbody td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.2rem;font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
  .lab-ledger .ledger.ledger--stack tr>:last-child{padding-right:0}
}

/* ---------- 6. Misses ---------- */
.lab-misses{display:grid;gap:var(--s-3)}
.lab-misses .callout{display:grid;gap:var(--s-2) var(--s-5);padding:clamp(1.25rem,3vw,2.25rem) clamp(1.25rem,3vw,2.5rem) clamp(1.35rem,3vw,2.35rem) clamp(1.35rem,3vw,2.6rem)}
.lab-misses .callout>*{margin:0}
@media (min-width:56em){.lab-misses .callout{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.lab-miss__head .callout__label{margin-bottom:.9rem!important}
.lab-miss__head .h3{max-width:12em}
.lab-miss__body{min-width:0;max-width:40rem}
.lab-miss__body>*+*{margin-top:.9rem}
.lab-miss__body>.stat__meta{margin-top:1.1rem}
.lab-repeats{gap:.85rem}
.lab-repeats li{font-weight:500}
.lab-repeats__meta{display:block;font-weight:400;font-size:var(--fs-small);color:var(--fg-2)}

/* ---------- 7. What it proves ---------- */
.lab-point{border-top:1px solid var(--fg);padding-top:1.25rem;min-width:0}
.lab-point .h3{margin-bottom:.8rem}
.lab-point p{max-width:26rem}

/* ---------- 8. Snapshot policy and CTA ---------- */
#next{padding-bottom:calc(var(--section-y) * .55)}
.lab-snapshot{max-width:36rem;color:var(--fg)}
.lab-snapshot__cannot{margin-top:var(--s-2);max-width:36rem}
.lab-snapshot__cannot strong{font-weight:500}
.lab-log{margin-top:var(--s-4)}
/* three short columns that wrap, so the table can narrow to the split body without a sideways scroll */
@media (min-width:44em){.lab-log .ledger{min-width:0}}
.lab-guides-link{margin-top:var(--s-3)}