.page-head{padding-top:clamp(40px,7vw,80px);padding-bottom:clamp(20px,3vw,32px)}
.page-head h1{font-size:clamp(3rem,9vw,6.4rem)}
.page-head .sub{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;font-stretch:108%;max-width:38ch;margin:18px 0 0;line-height:1.3}
.timeline{list-style:none;margin:0;padding:clamp(24px,4vw,48px) 0 clamp(56px,8vw,96px)}
.timeline > li{position:relative;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(16px,4vw,48px);padding:0 0 clamp(48px,7vw,80px)}
.timeline > li::before{content:"";position:absolute;left:calc(min(220px,max(150px,22vw)) + clamp(8px,2vw,24px) - 1px);top:10px;bottom:0;border-left:2px solid var(--ink)}
.timeline > li:last-child::before{display:none}
.when{font-stretch:125%;font-weight:900;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.05;text-align:right;padding-top:2px}
.when small{display:block;font-size:.95rem;font-stretch:100%;font-weight:600;color:var(--muted);margin-top:6px}
.what{position:relative}
.what::before{content:"";position:absolute;left:calc(-1 * clamp(16px,4vw,48px) / 2 - 8px);top:6px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.timeline > li.now .what::before{background:var(--blue);border-color:var(--blue)}
.what h2{font-stretch:118%;font-weight:900;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.05;margin:0 0 10px}
.what p{margin:0 0 12px;max-width:58ch}
.pics{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:14px;margin-top:20px}
.pics figure{margin:0}
.pics img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:var(--field)}
.pics figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.pics.mri img{object-fit:contain;background:#000}
.pics.natural{grid-template-columns:minmax(0,300px)}
.pics.natural img{aspect-ratio:4/5;object-fit:contain}
@media (max-width:700px){
  .timeline > li{grid-template-columns:minmax(0,1fr);gap:10px;padding-left:28px}
  .timeline > li::before{left:7px;top:12px}
  .when{text-align:left}
  .what::before{left:-29px;top:-34px}

  /* Photo groups become a swipeable carousel instead of two cramped
     columns, which is what the 2-column grid collapsed to on a phone.
     The row bleeds to both screen edges: on the left it has to clear
     .wrap's padding plus the timeline's own 28px indent, on the right
     just .wrap's padding. scroll-padding-left puts the snap positions
     back in line with the text above. */
  .pics{
    display:flex;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:10px;
    margin-left:calc(-1 * (clamp(20px,4vw,40px) + 28px));
    margin-right:calc(-1 * clamp(20px,4vw,40px));
    padding-left:calc(clamp(20px,4vw,40px) + 28px);
    padding-right:clamp(20px,4vw,40px);
    scroll-padding-left:calc(clamp(20px,4vw,40px) + 28px);
  }
  .pics::-webkit-scrollbar{display:none}
  /* 78% leaves the next photo peeking, which is what signals "swipe me". */
  .pics figure{flex:0 0 78%;scroll-snap-align:start;margin:0}
  /* A lone photo has nothing to swipe to, so let it fill the width. */
  .pics figure:only-child{flex-basis:100%}
}
.diagram{margin:16px 0 0;max-width:420px}
/* Black line art on white, same as the logo, so it inverts in dark mode
   instead of sitting on the page as a bright white card. */
.diagram img{width:100%;height:auto;display:block;filter:var(--logo-filter)}
.diagram figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.disclaim{font-size:.92rem;color:var(--muted);max-width:60ch;margin:28px 0 0}

.about-intro{max-width:60ch;margin:clamp(20px,3vw,28px) 0 clamp(8px,2vw,16px)}
.about-intro p{margin:0 0 10px}
.about-intro a{font-weight:700;color:var(--blue)}

/* What I did to come back - a numbered progression, because the order is
   the point. Ruled list, numbers in the brand blue. */
#how{border-bottom:none;padding-top:clamp(32px,5vw,48px);padding-bottom:clamp(48px,7vw,80px)}
.steps{list-style:none;counter-reset:step;margin:0;padding:0;border-top:2px solid var(--ink)}
.steps li{
  counter-increment:step;position:relative;
  padding:20px 0 20px 52px;border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:18px;
  width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:var(--blue-ink);
  display:grid;place-items:center;
  font-weight:900;font-stretch:115%;font-size:1rem;
}
.steps h3{margin:0;font-stretch:115%;font-weight:800;font-size:1.2rem}
.steps p{margin:4px 0 0;color:var(--muted);max-width:56ch}
.how-more{margin:24px 0 0;font-weight:700}
.how-more a{color:var(--blue)}
@media (max-width:480px){
  .steps li{padding-left:44px}
  .steps li::before{width:30px;height:30px;font-size:.92rem}
}