/* Research page: every tile leads with its visual, and the figure carries the finding. */
.lab{position:relative;z-index:0;padding-bottom:var(--section)}
.lab-sky{position:absolute;z-index:-1;inset:0 0 auto;height:34rem;overflow:hidden}
.lab-sky img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lab-sky::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,var(--white))}
.lab-head{padding:9rem var(--gutter) 4.5rem;text-align:center}
.lab-head h1{font-size:clamp(3rem,6vw,5.25rem);line-height:1}
.lab-head p{max-width:32rem;margin:1.25rem auto 0}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;max-width:calc(var(--measure) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.tile{display:flex;flex-direction:column;grid-column:span 6;min-width:0;padding:clamp(1.5rem,3.5vw,3rem);border-radius:1.5rem;background:var(--cloud)}
.w12{grid-column:span 12}.w7{grid-column:span 7}.w5{grid-column:span 5}
.tile h2{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.08}
.sub{max-width:38rem;margin-top:.75rem;color:var(--ink-soft);font-size:.9375rem;line-height:1.5}
.viz{flex:1;display:flex;flex-direction:column;justify-content:center;margin-block:clamp(1.5rem,3vw,2.5rem)}
.cite{max-width:44rem;font-size:.875rem;line-height:1.55;color:var(--ink-soft)}
.cite a{white-space:nowrap}

/* Scoreboard */
.score-bar{display:grid;grid-template-columns:repeat(13,1fr);gap:.25rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.score-bar i{height:clamp(1.25rem,3vw,2.25rem);border-radius:.375rem}
.k-yes{background:linear-gradient(135deg,var(--pink-300),var(--pink-500))}
.k-link{background:var(--sky-400)}
.k-none{background:#c9d6e6}
.k-open{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--sky-400)}
.score-cols{display:grid;grid-template-columns:5fr 3fr 3fr 2fr;gap:.25rem clamp(.75rem,2vw,1.5rem);margin-top:1.5rem}
.score-cols strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(3rem,5vw,4.25rem);line-height:1}
.score-cols h3{margin-top:.25rem;font-size:.9375rem}
.score-cols ul{margin:.75rem 0 0;padding:0;list-style:none;font-size:.875rem;line-height:1.4;color:var(--ink-soft)}
.score-cols li{padding:.18rem 0}

/* Unit charts */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem)}
.pair-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.unit strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,4.4vw,3.75rem);line-height:1}
.unit span{display:block;margin:.375rem 0 1rem;font-size:.875rem;line-height:1.3;color:var(--ink-soft)}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(2px,.35vw,5px)}
.dots i{aspect-ratio:1;border-radius:50%;background:#dfeaf4}
.dots i.b{background:var(--sky-700)}
.dots i.p{background:var(--pink-500)}

/* Columns */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,2rem);align-items:end;height:15rem;border-bottom:1px solid var(--sky-400)}
.col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.col strong{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,4vw,3.25rem);line-height:1.1}
.col i{display:block;flex:none;margin-top:.5rem;border-radius:.625rem .625rem 0 0;background:var(--sky-400);transform-origin:bottom}
.col i.hi{background:linear-gradient(180deg,var(--pink-500),var(--pink-300))}
.col-labels{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,2rem);margin-top:.75rem;text-align:center;font-size:.875rem}

/* Line diagrams */
.diagram{display:block;width:100%;height:auto;overflow:visible}
.ln{fill:none;stroke:var(--sky-700);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ln.pk{stroke:var(--pink-500)}
.ln.dash{stroke:var(--sky-400);stroke-width:1;stroke-dasharray:3 5}
.wave-row{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:1rem;padding:.6rem 0;font-size:.875rem;line-height:1.3}
.wave-row b{font-weight:500}
.slope{display:grid;grid-template-columns:1fr 9.5rem;gap:.75rem;align-items:stretch}
.slope-labels{position:relative;font-size:.875rem;line-height:1.3}
.slope-labels div{position:absolute;left:0;transform:translateY(-50%)}
.slope-labels b{display:block;font-weight:500}
.slope-axis{display:grid;grid-template-columns:1fr 9.5rem;gap:.75rem;margin-top:.5rem;font-size:.875rem;color:var(--ink-soft)}
.slope-axis span{display:flex;justify-content:space-between}
.vs{display:grid;grid-template-columns:1fr;gap:.75rem}
.empty-slot{display:grid;place-items:center;min-height:5.5rem;border:1.5px dashed var(--sky-400);border-radius:1rem;font-size:.9375rem;text-align:center;padding:.75rem}
.grid54{display:grid;grid-template-columns:repeat(27,1fr);gap:clamp(2px,.3vw,4px);margin-bottom:1.5rem}
.grid54 i{aspect-ratio:1;border-radius:50%;background:var(--sky-400)}

/* Number line */
.line-chart{position:relative;margin-top:3.75rem;height:3rem}
.band{position:absolute;top:0;bottom:0;border-radius:.5rem}
.band.wide{left:0;width:50%;background:var(--sky-200)}
.band.narrow{left:30%;width:15%;background:var(--sky-400)}
.pin{position:absolute;top:50%;transform:translate(-50%,-50%);width:1.75rem;height:1.75rem}
.pin i{display:block;width:100%;height:100%;border-radius:50%;background:var(--bubblegum);box-shadow:0 0 0 2px var(--white)}
.pin b{position:absolute;bottom:calc(100% + 1.1rem);left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:500;font-size:.875rem}
.ticks{position:relative;height:1.75rem;margin-top:.5rem;font-size:.875rem;color:var(--ink-soft)}
.ticks span{position:absolute;transform:translateX(-50%)}
.ticks span:first-child{transform:none}
.ticks span:last-child{transform:translateX(-100%)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:.75rem;font-size:.875rem;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:.5rem}
.legend i{flex:none;width:1rem;height:1rem;border-radius:.25rem}

/* Close, and every study */
.lab-close{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:var(--section) var(--gutter) 4rem;text-align:center}
.lab-close p{max-width:44rem;font-family:var(--display);font-size:clamp(1.875rem,3.2vw,2.625rem);line-height:1.2;text-wrap:balance}
.lab-close .cta{margin-top:0}
.all{max-width:calc(var(--measure) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);border-bottom:0}
.all>summary{justify-content:center;gap:1rem;color:var(--sky-700)}
.all .table-wrap{margin-top:.5rem}

/* The one motion: figures assemble as they enter. Everything is visible without it. */
@media (prefers-reduced-motion:no-preference){
  .play .dots i.b,.play .dots i.p,.play .grid54 i{animation:pop .5s var(--spring) both;animation-delay:calc(var(--i,0)*16ms)}
  .play .col i{animation:grow .8s var(--spring) both}
  .play .score-bar i{animation:pop .5s var(--spring) both;animation-delay:calc(var(--i,0)*35ms)}
  .play .draw{vector-effect:none;stroke-width:1.6;stroke-dasharray:1;animation:draw 1s var(--spring) both}
  @keyframes pop{from{transform:scale(.3);opacity:0}}
  @keyframes grow{from{transform:scaleY(.08)}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

@media (max-width:60rem){
  .w7,.w5,.tile{grid-column:span 12}
  .score-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .cols{height:12rem}
}
@media (max-width:40rem){
  .pairs{grid-template-columns:1fr}
  .lab-head{padding-top:7rem}
  .bento{padding-inline:.75rem}
  .wave-row{grid-template-columns:5.5rem 1fr;gap:.6rem}
  .slope,.slope-axis{grid-template-columns:1fr 7.5rem}
  .pin:nth-child(3) b{left:auto;right:0;transform:none}
  .pin:nth-child(4) b{left:0;transform:none}
  .slope .diagram{height:12rem}
}