/* A guided story, with the full reading order available without JavaScript. */
main.how-page{max-width:calc(1180px + 2 * var(--gutter-band));padding-bottom:120px}
.how-intro{max-width:940px;padding-bottom:72px}
.how-page .how-eyebrow,.how-caption-label{color:var(--accent);font:12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.how-page h1{font-size:clamp(44px,5.7vw,78px);font-weight:300;line-height:1.05;letter-spacing:-.045em;margin:24px 0 32px;text-wrap:balance}
.how-page p{margin:0;color:var(--dim);font-size:18px;line-height:1.65}
.how-page p + p{margin-top:20px}
.how-page p.how-intro-copy{font-size:clamp(21px,2.1vw,27px);line-height:1.5;max-width:820px}
.how-page p.how-intro-note{font-size:14px;color:var(--dim);margin-top:24px}
.how-nav{position:sticky;top:0;z-index:20;background:var(--bg,#222);padding-top:20px;border-bottom:1px solid var(--line);transition:top .28s var(--ease-chrome);isolation:isolate}
html.bar-pinned:not(.bar-hidden) .how-nav{top:var(--how-header-height,74px)}
.how-nav-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.how-nav-steps a{display:flex;align-items:center;gap:12px;position:relative;padding:18px 12px 20px 0;color:var(--dim);text-decoration:none;font-size:clamp(19px,2vw,25px);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.how-nav-steps a:hover,.how-nav-steps a[aria-current="step"]{color:var(--accent);border-bottom-color:var(--accent)}
.how-nav-number{font:11px var(--mono);color:var(--dim)}
.how-nav-arrow{margin-left:auto;margin-right:24px;font-size:21px;color:var(--accent)}
.how-nav-bottom{display:flex;justify-content:space-between;gap:20px;padding:15px 0;font:12px/1.5 var(--mono);color:var(--dim)}
.how-nav-bottom a{color:var(--accent);text-decoration:none;white-space:nowrap}
.how-nav-bottom a[aria-current="step"]{text-decoration:underline;text-underline-offset:5px}
.how-story{padding-top:12px}
.how-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(38px,6vw,100px);padding:90px 0;border-bottom:1px solid var(--line);scroll-margin-top:230px;align-items:start}
.how-page h2{margin:17px 0 26px;font-size:clamp(31px,3.4vw,46px);font-weight:300;line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.how-page h3{margin:20px 0 14px;font-size:25px;font-weight:300;line-height:1.2;letter-spacing:-.02em}
.how-page .how-link{margin-top:30px;font:12px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.how-page .how-link a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px}
.how-page .how-link a:hover{border-color:var(--accent)}
.how-page a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.how-visual{min-width:0;margin:0}
.how-page figcaption,.how-page p.how-example-note{font-size:13px;line-height:1.6;color:var(--dim)}
.how-page figcaption{margin-top:15px}
.how-page figcaption a,.how-resource-links a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
.how-detail{margin-top:28px}
.how-detail + .how-detail{margin-top:17px}
.how-detail-body{padding:20px 0 0}
.how-detail-body p{font-size:16px}
.how-detail figure{margin:24px 0}
.how-detail img{display:block;width:100%;height:auto}
.how-detail-body > figure > img[src*="cross-section"]{background:#fff}
.how-resource-links{display:flex;flex-direction:column;gap:12px;list-style:none;margin:24px 0 0;padding:0;font-size:14px;line-height:1.5}
.how-shipment{padding:30px 32px;background:#1a2423;border:1px solid #34403d}
.how-shipment-label{display:flex;justify-content:space-between;gap:20px;font:10px/1.5 var(--mono);letter-spacing:.06em;color:#a8bbb7}
.how-vials{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 24px;padding:50px 6px 32px}
.how-vial{position:relative;aspect-ratio:.55;max-height:105px;border:1px solid #849b95;border-radius:6px 6px 11px 11px;background:linear-gradient(to top,#3d666153 0%,#3d666153 34%,transparent 34%);display:flex;align-items:center;justify-content:center}
.how-vial::before{content:'';position:absolute;top:-10px;height:13px;left:-2px;right:-2px;border:1px solid #9bb2ad;background:repeating-linear-gradient(90deg,#627d75 0 2px,#415950 2px 4px);border-radius:3px 3px 1px 1px}
.how-vial span{display:block;font:12px var(--mono);color:#d8e4df}
.how-control{display:flex;gap:15px;align-items:center;border-top:1px solid #344b44;padding:22px 0 6px}
.how-control-mark{font:26px var(--mono);color:var(--accent)}
.how-control strong{display:block;color:var(--ink);font:13px var(--mono)}
.how-control div > span{display:block;margin-top:7px;color:var(--dim);font-size:12px;line-height:1.6}
.how-assay-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.how-assay-pair figure{margin:0;min-width:0}
.how-assay-pair video{display:block;width:100%;height:auto;background:#151515}
.how-assay-pair strong{font-weight:500;color:var(--ink)}
.how-network img{display:block;width:100%;height:auto}
.how-network-list{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 0;font-size:15px;line-height:1.55}
.how-network-list dt{font:12px/1.5 var(--mono);color:var(--accent);margin-bottom:8px}
.how-network-list dd{margin:0;color:var(--dim)}
.how-learning{padding:32px 26px;background:#1a2423}
.how-learning-loop{--loop-strong:clamp(20px,2vw,27px);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin:15px 30px 25px 45px}
.how-learning-loop strong{display:block;font-size:var(--loop-strong);font-weight:300;color:var(--ink);margin-top:8px;line-height:1.2}
/* The return path, from the last row back up to the first. Its arm has to
   land on the line of type it points at rather than in the gap above it: a
   row's text sits 15px of label plus 8px of margin plus half a line below its
   own top, and because the last row is built exactly like the first, that
   same figure measures up from the bottom. The arrowhead is drawn rather than
   set as a glyph, so it sits on the end of the arm instead of near it. */
.how-learning-loop::before{content:'';position:absolute;left:-32px;width:24px;top:calc(23px + .6 * var(--loop-strong));bottom:calc(.6 * var(--loop-strong));border:1px solid var(--accent);border-right:0}
.how-learning-loop::after{content:'';position:absolute;left:-9px;top:calc(23px + .6 * var(--loop-strong));width:0;height:0;border-left:7px solid var(--accent);border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-4px)}
.how-learning-loop .how-caption-label{font-size:10px;color:#a8bbb7}
.how-down{color:var(--accent);font-size:23px}
.how-learning figcaption{border-top:1px solid #344b44;padding-top:20px;text-align:center}
.how-learning figcaption a{text-decoration:none;font:12px/1.5 var(--mono)}
.how-beyond-intro{padding:90px 0 0;max-width:660px}
.how-beyond-intro h2{font-size:clamp(38px,4.4vw,58px)}
.how-field-main figure{margin:0}
.how-field-main img{display:block;width:100%;height:auto}
.how-field-main .how-example-note{margin-top:18px}
.how-field-more{grid-column:1/-1;margin-top:-28px}
.how-field-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.how-field-photos figure{margin:0}
.how-field-photos img{display:block;width:100%;height:auto}
.how-field-photos strong{font-weight:500;color:var(--ink)}
.how-field-photos + p{margin-top:25px}
.how-field-rotated{position:relative;width:100%;aspect-ratio:574/765;overflow:hidden}
.how-field-rotated img{position:absolute;left:50%;top:50%;width:133.2753%;height:75.0327%;max-width:none;transform:translate(-50%,-50%) rotate(90deg)}
.how-use ol{margin:0;padding:0;list-style:none}
.how-use li{display:flex;align-items:baseline;gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.how-use li > span{font:12px var(--mono);color:var(--accent)}
.how-use strong{font-size:26px;line-height:1.3;color:var(--ink);font-weight:300}
.how-use li p{font-size:15px;margin-top:10px}
.how-open{margin:100px 0 0;max-width:750px;scroll-margin-top:230px}
.how-open h2{font-size:clamp(38px,4.4vw,58px)}
#cycle-heading{scroll-margin-top:230px}
.how-behavior-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin:28px 0}
.how-behavior-layout figure{margin:0}
.how-behavior-video{position:relative}
.how-behavior-video video{display:block;width:100%;height:auto;background:#151515}
.how-zone-overlay{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.how-behavior-layout figcaption{margin-top:12px}
.how-page .how-sample-time{font:13px/1.5 var(--mono);color:var(--dim);margin-bottom:18px}
.how-sample-time output{color:var(--ink);font-variant-numeric:tabular-nums}
.how-counts{margin:0 0 24px}
.how-counts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.how-counts dt{font-size:16px;line-height:1.4}
.how-counts dd{margin:0;font:32px/1 var(--mono);font-variant-numeric:tabular-nums}
.how-count-inside{color:#62d2bf}
.how-count-band{color:#f4bc6d}
.how-count-outside{color:var(--dim)}
.how-count-total{color:var(--ink)}
[data-behavior-controls]{margin:24px 0}
[data-behavior-controls][hidden]{display:none}
[data-behavior-controls] label{display:block;font-size:17px;margin-bottom:14px}
#behavior-moment{display:block;width:100%;min-height:30px;margin:0 0 12px;accent-color:#62d2bf;cursor:pointer}
#behavior-moment:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.how-behavior-chart{margin:28px 0 20px}
.how-behavior-chart svg{display:block;width:100%;height:auto;margin-top:12px}
.how-behavior-chart text{fill:var(--dim);font:12px var(--mono)}
.how-table-scroll{max-width:100%;overflow-x:auto;margin:20px 0}
.how-readings{border-collapse:collapse;width:100%;text-align:left;font-size:14px;font-variant-numeric:tabular-nums}
.how-readings caption{text-align:left;margin-bottom:12px;line-height:1.6;color:var(--dim)}
.how-readings th,.how-readings td{padding:12px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.how-readings th{font-weight:500;color:var(--ink)}
.how-readings td{color:var(--dim)}
.how-behavior > p.how-example-note{margin-top:10px}
.how-behavior-layout{gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.how-counts div{padding:13px 0}
.how-counts dt{font-size:13px}
.how-counts dd{font-size:27px}
.how-behavior-layout .how-example-note{font-size:12px}
.how-behavior-chart{margin:24px 0}
.how-behavior-chart svg{margin-top:15px}
.how-behavior .how-readings{font-size:12px}
@media(min-width:900px){.how-copy{position:sticky;top:225px}}
@media(max-width:760px){
  .how-intro{padding-bottom:38px}
  .how-wide-break{display:none}
  .how-nav{padding-top:8px}
  .how-nav-steps a{font-size:20px;gap:8px;padding:17px 5px 17px 0}
  .how-nav-number{display:none}
  .how-nav-arrow{font-size:16px;margin-right:9px}
  .how-nav-bottom{font-size:10px;gap:12px;padding:12px 0}
  .how-stage{grid-template-columns:1fr;gap:36px;padding:58px 0;scroll-margin-top:205px}
  .how-page h2{max-width:600px;font-size:37px}
  .how-page p{font-size:18px}
  .how-visual{width:100%;max-width:600px}
  .how-shipment{padding:24px}
  .how-vial{max-height:110px}
  .how-detail-body p{font-size:16px}
  .how-field-more{margin-top:0}
  .how-field-photos{grid-template-columns:1fr 1fr}
  .how-field-photos figure:first-child{grid-column:1/-1;max-width:550px}
  .how-beyond-intro{padding-top:58px}
  .how-beyond-intro h2,.how-open h2{font-size:42px}
  .how-open{margin-top:65px}
  .how-behavior-layout{gap:20px}
  .how-page .how-sample-time{font-size:11px}
}
@media(max-width:420px){
  .how-nav-steps a{font-size:17px}
  .how-nav-arrow{margin-right:4px}
  .how-nav-bottom{font-size:9px}
  .how-nav-bottom > span{max-width:190px}
  .how-page h2{font-size:33px}
  .how-vials{gap:30px 16px;padding:42px 0 24px}
  .how-shipment-label{font-size:9px;gap:10px}
  .how-assay-pair{gap:14px}
  .how-behavior-layout{gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .how-behavior-layout .how-example-note{font-size:11px}
  .how-counts div{padding:11px 0;gap:6px}
  .how-counts dd{font-size:22px}
  .how-counts dt{font-size:11px}
  .how-network-list,.how-field-photos{grid-template-columns:1fr}
  .how-field-photos figure:first-child{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.how-nav,.how-nav-steps a{transition:none}}
.how-page p.how-caption-label{color:var(--accent);font:12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}