/* Labs article shell on the v2 system. Needs rb-v2.css first (tokens, header, footer).
   Editorial column: the head runs wide and left-aligned, the text keeps a 68ch measure on the same left edge,
   tables may run wider than the text. The mark's square tile marks each section. */

.rb-art{max-width:var(--max);margin:0 auto;padding:calc(var(--head-h) + clamp(28px,5vw,64px)) var(--pad-x) clamp(64px,8vw,112px)}
.rb-art>*{max-width:68ch}
.rb-art>.tblwrap,.rb-art>header,.rb-art>pre{max-width:min(100%,1040px)}

/* Back to the Labs index */
.art-back{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin:0 0 clamp(20px,3vw,36px);padding-right:8px;
  font:500 .75rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.art-back svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease-out)}
.rb-art .art-back{text-decoration:none}
.art-back:hover{color:var(--ink)}
.art-back:hover svg{transform:translateX(-3px)}

/* Head */
.rb-art>header{padding-bottom:clamp(28px,4vw,48px);margin-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.rb-art .eyebrow{display:flex;flex-wrap:wrap;color:var(--ink-3)}
.rb-art .eyebrow a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:48px;margin:-14px 0}
.rb-art .eyebrow a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.rb-art h1{margin:22px 0 0;max-width:22ch;font-size:clamp(2.1rem,3.4vw + 1rem,4rem);line-height:1;letter-spacing:-.03em}
.rb-art .byline{margin-top:24px;max-width:60ch;font:500 .8125rem/1.6 var(--font-mono);letter-spacing:.02em;color:var(--ink-3)}

/* Text */
.rb-art{font-size:clamp(1.0625rem,.25vw + 1rem,1.125rem);line-height:1.7;color:var(--ink-2)}
.rb-art p,.rb-art ul,.rb-art ol{margin:0 0 1.15em}
.rb-art li{margin:.35em 0}
.rb-art strong,.rb-art b{color:var(--ink);font-weight:600}
.rb-art em,.rb-art i{font-style:italic}
.rb-art a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px}
.rb-art a:hover{text-decoration-thickness:3px}
.rb-art h2{display:flex;align-items:baseline;gap:14px;margin:2.6em 0 .7em;font-size:clamp(1.5rem,1.4vw + 1rem,2.125rem);line-height:1.1;letter-spacing:-.02em}
.rb-art h2::before{content:"";flex:none;width:8px;height:8px;background:var(--red);transform:translateY(-.32em)}
.rb-art h3{margin:2em 0 .5em;font-size:var(--size-h3)}

/* Summary and finding panels */
.rb-art .finding{margin:1.6em 0;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);background:var(--surface);border-left:2px solid var(--red);border-radius:0 6px 6px 0;color:var(--ink-2)}
.rb-art .finding>b:first-child{display:block;margin-bottom:.7em;font:500 .75rem/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}

/* Tables */
.rb-art .tblwrap{margin:1.6em 0;overflow-x:auto;border-top:1px solid var(--line-strong);-webkit-overflow-scrolling:touch}
.rb-art .tblwrap:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.rb-art table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9rem;line-height:1.45;font-variant-numeric:tabular-nums}
.rb-art th{padding:12px 12px 10px;text-align:left;vertical-align:bottom;font:500 .6875rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-strong)}
.rb-art td{padding:11px 12px;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rb-art tr>:first-child{padding-left:0}
.rb-art td.n{text-align:right;font-family:var(--font-mono);font-size:.84rem;color:var(--ink)}
.rb-art .win{color:var(--online);font-weight:600}
.rb-art .lose{color:var(--red-ink);font-weight:600}

/* Code */
.rb-art code,.rb-art pre{font-family:var(--font-mono);font-size:.84em;background:var(--surface-2);border-radius:4px;color:var(--ink)}
.rb-art code{padding:.1em .38em;overflow-wrap:anywhere}
.rb-art pre{margin:1.4em 0;padding:16px 18px;overflow-x:auto;line-height:1.55}
.rb-art pre code{padding:0;background:none;overflow-wrap:normal}

/* Footnotes and sources */
.rb-art sup{position:relative;top:-.5em;vertical-align:baseline;line-height:0;font-size:.72em}
.rb-art sup a{display:inline-block;min-width:24px;min-height:24px;margin:0 -3px;padding:0;line-height:24px;text-align:center;font-family:var(--font-mono);text-decoration:none;color:var(--red-ink)}
.rb-art sup a:hover{text-decoration:underline}
.rb-art ol.notes{padding-left:1.6em;font:500 .8125rem/1.55 var(--font-mono);color:var(--ink-3)}
.rb-art ol.notes li{margin:.5em 0;padding-left:.3em}
.rb-art ol.notes li::marker{color:var(--red-ink)}
.rb-art ol.notes a{display:inline-block;padding:6px 0;overflow-wrap:anywhere;word-break:break-word;color:var(--ink-2)}
.rb-art :target{scroll-margin-top:calc(var(--head-h) + 24px)}
.rb-art li:target{background:var(--surface)}

/* Colophon: the article's own record line */
.rb-art .art-colophon{margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:1px solid var(--line);font:500 .8125rem/1.65 var(--font-mono);color:var(--ink-3)}
.rb-art .art-colophon a{color:var(--ink-2);display:inline-block;padding:10px 0;margin:-10px 0}

@media (min-width:1100px){
  .rb-art>:not(header):not(.tblwrap):not(pre):not(.art-back){margin-left:clamp(0px,8vw,128px)}
  .rb-art>.tblwrap,.rb-art>pre{margin-left:clamp(0px,8vw,128px)}
}
@media (max-width:600px){.rb-art table{font-size:.8125rem;min-width:30rem}.rb-art td,.rb-art th{padding-left:8px;padding-right:8px}}
@media (prefers-reduced-motion:reduce){.art-back svg{transition:none}}

/* Colophon links are full taps on phones */
.art-colophon a{display:inline-flex;align-items:center;min-height:48px}
/* footnote reference links are a full 48 px tap row */
ol.notes li>a:only-child,ol.notes li>a:first-child:last-child{display:inline-flex;align-items:center;min-height:48px;max-width:100%;overflow-wrap:anywhere}
/* footnote numbers get a 48 x 48 tap area (padding pulled back with margin, so the line does not move) */
.rb-art sup a{min-width:48px;min-height:48px;padding:12px;margin:-12px -15px;line-height:24px;box-sizing:border-box;position:relative}

/* Long field notes (step 2E): contents list at the top, "Back to top" before each section, and the 100-element appendix folded away until asked for */
.art-toc{margin:28px 0 8px;padding:18px 20px;border:1px solid var(--line,#2b2b2b);border-radius:8px}
.art-toc-h{margin:0 0 10px;font:500 .8125rem/1.4 var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#b5b5b0)}
.art-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.art-toc a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--line-strong,#454545);border-radius:999px;color:var(--ink,#ece8e1);text-decoration:none;font:500 .9375rem/1 var(--font-text,sans-serif)}
.art-toc a:hover{border-color:var(--ink-3,#b5b5b0)}
.art-top{margin:48px 0 0}
.art-top a{display:inline-flex;align-items:center;min-height:48px;font:500 .8125rem/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#b5b5b0)}
.art-appendix>summary{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--line-strong,#454545);border-radius:999px;cursor:pointer;color:var(--ink,#ece8e1);font:500 .9375rem/1 var(--font-mono,monospace);list-style:none}
.art-appendix>summary::-webkit-details-marker{display:none}
.art-appendix>summary::after{content:"+";margin-left:12px}
.art-appendix[open]>summary::after{content:"\2212"}
.art-appendix[open]>summary{margin-bottom:20px}
.art-appendix>summary:focus-visible{outline:3px solid var(--red,#e2422e);outline-offset:3px}