/* The definition and image use the same column at every breakpoint. */
.possibilities-story {
 --shader-columns:minmax(0,1.25fr) minmax(0,.75fr);
 --shader-column-gap:10%;
}
.possibilities-heading { display:grid; row-gap:0; }
.possibilities-heading,.possibilities-workspace {
 grid-template-columns:var(--shader-columns);
 column-gap:var(--shader-column-gap);
}
.possibilities-heading>.eyebrow {
 grid-column:1 / -1;
 margin:0 0 24px;
 padding:0;
 font-size:10px;
 line-height:1.6;
 color:#666c60;
}
.shader-definition { grid-column:1; min-width:0; width:100%; font-size:15px; line-height:2; color:#5a6651; text-wrap:pretty; }
.possibilities-heading .shader-definition h2 {
 display:block;
 margin:0 0 16px;
 font-size:clamp(34px,3.3vw,48px);
 font-weight:400;
 line-height:1.3;
 color:var(--ink);
}
.shader-definition p { display:block; margin:0; padding:0; font:inherit; }

/* Both descriptions occupy one grid row, so their baselines and rules agree. */
@media(min-width:761px) {
 .possibilities-workspace { row-gap:18px; }
 .possibilities-workspace .handheld-figure,
 .possibilities-workspace .screen-expressions { display:contents; }
 .possibilities-workspace .handheld-stage { grid-column:1; grid-row:1; align-self:center; }
 .possibilities-workspace .screen-controls { grid-column:2; grid-row:1; align-self:center; min-width:0; }
 .possibilities-story .handheld-figure>figcaption {
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  height:54px;
  padding:0;
  font-size:11px;
  line-height:1.6;
  border-color:#b1b9a6;
 }
 .possibilities-workspace .toolkit-entry { grid-column:2; grid-row:2; margin:0; }
 .possibilities-workspace .toolkit-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:54px;
  min-height:0;
  padding:0;
  font-size:11px;
  line-height:1.6;
  border-color:#b1b9a6;
 }
}
@media(max-width:980px) {
 .possibilities-story { --shader-columns:minmax(0,1.15fr) minmax(0,.85fr); --shader-column-gap:6%; }
}
@media(max-width:760px) {
 .possibilities-heading { display:block; }
 .possibilities-heading>.eyebrow { max-width:510px; margin:0 auto 20px; }
 .shader-definition { margin:0 auto; }
 .shader-definition { max-width:510px; font-size:13px; line-height:2.1; }
 .possibilities-heading .shader-definition h2 { margin:0 0 14px; font-size:34px; }
}