/* A single natural reading timeline: scroll stays fully under browser control.
   The active heading gradually drives both the left rail and the SVG. */
html:has(.experiment){scroll-snap-type:none!important;scroll-padding-top:78px!important}
.stage-card{
  position:relative!important;
  border-left:0!important;
  padding-left:22px!important;
  scroll-snap-align:none!important;
  scroll-margin:0!important;
  transition:color .2s ease!important;
}
.stage-card.is-current{
  border-left:0!important;
  padding-left:22px!important;
}
.stage-card::before,.stage-card::after{
  content:"";position:absolute;left:0;top:12%;
  width:3px;border-radius:10px;pointer-events:none;
}
.stage-card::before{height:76%;background:var(--rule);opacity:.65}
.stage-card::after{
  height:76%;background:var(--accent);
  transform:scaleY(var(--phase-progress,0));transform-origin:center top;
  transition:transform .06s linear;
}
.stage-card.is-current h3{color:var(--ink)}
.stage-card:not(.is-current) h3{color:var(--muted)}
@media(min-width:721px){
  .stage-card{min-height:50svh!important;padding:24px 15px 24px 22px!important;justify-content:center!important}
  .stage-card[data-step="2"]{min-height:72svh!important;padding:28px 15px 12svh 22px!important}
  .stage-card.is-current{padding-left:22px!important}
}
@media(max-width:720px){
  html,body{overflow-x:clip}
  .experiment{overflow:visible!important}
  .lab-visual{
    position:sticky!important;top:66px!important;
    height:min(41svh,380px)!important;
    min-height:0!important;align-self:stretch!important;
    z-index:25
  }
  .diagram-shell{height:calc(100% - 43px)!important}
  .stage-card{
    min-height:53svh!important;
    padding:24px 0 25px 18px!important;
    justify-content:center!important;
    scroll-margin:0!important;
  }
  .stage-card.is-current{padding-left:18px!important}
  .stage-card[data-step="2"]{
    min-height:64svh!important;padding:24px 0 8svh 18px!important;
    justify-content:center!important;
  }
  .stage-card h3{margin:8px 0 10px!important;font-size:clamp(1.9rem,7.4vw,3rem)!important}
  .stage-card p{margin-bottom:7px!important}
  .comparison-intro{padding:16px 0 13px!important}
  /* Keep only a short runway for the fracture; long empty scroll is no longer needed. */
  .break-runway{height:20svh!important;min-height:0!important}
  .references-note{padding-top:14px;padding-bottom:24px}
}
@media(max-width:390px){
  .lab-visual{height:min(38svh,345px)!important}
  .stage-card{min-height:57svh!important}
}
/* The original photograph is a genuine small contact avatar: no canvas
   effects, no filters, no extra network requests. */
.contact-heading{position:relative;max-width:690px;isolation:isolate}
.contact-heading h2{position:relative;padding-right:clamp(86px,10vw,120px);z-index:1}
.contact-avatar{
  position:absolute;right:clamp(-54px,-3vw,-14px);top:50%;
  transform:translateY(-50%) rotate(5deg);
  margin:0;width:clamp(104px,11vw,142px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;z-index:2;
  border:4px solid var(--bg);
  box-shadow:0 13px 36px rgba(0,0,0,.24),0 0 0 1px var(--rule);
  background:var(--panel);
}
.contact-avatar img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 39%;border-radius:50%;
}
@media(max-width:720px){
  .contact-heading h2{padding-right:82px}
  .contact-avatar{width:96px;right:-9px;top:52%;border-width:3px}
  .contact-details{margin-top:34px!important}
}
@media(max-width:390px){
  .contact-heading h2{padding-right:76px}
  .contact-avatar{width:84px;right:-7px;top:50%}
}
@media(prefers-reduced-motion:reduce){
  .stage-card,.stage-card::after{transition:none!important}
}
/* Preserve clickable-title styling introduced in the preceding redesign. */
.pub-entry h3 a,.out-item p a{color:inherit;text-decoration:none;text-underline-offset:5px}
.pub-entry h3 a:hover,.out-item p a:hover,.pub-entry h3 a:focus-visible,.out-item p a:focus-visible{color:var(--accent);text-decoration:underline}