/* Scoped editorial coordinates + the six approved capability pieces.
   No other public/private surface inherits this file. */
.work>.scene-coordinate{top:40px}
.capabilities>.scene-coordinate{top:100px}
.begin>.scene-coordinate{top:115px}
.continuity>.scene-coordinate{top:90px;color:#fff;z-index:3}

.capabilities{column-gap:7%;row-gap:0}
.capability-presentation{position:sticky;top:28px;align-self:start;min-width:0}
.capability-intro{min-height:0}
.capability-matter{
  position:relative;inset:auto;margin:40px 0 0 -20%;width:125%;height:clamp(310px,30vw,490px);
  opacity:1;pointer-events:none;user-select:none;
  /* The scene, not a thumbnail card: silhouettes may extend into the left margin. */
  clip-path:inset(-8% -8% 0 -25%);
}
.capability-art{
  position:absolute;max-width:none;height:auto;opacity:0;
  transform:translateY(9px);transition:opacity 180ms ease-out,transform 240ms cubic-bezier(.2,.65,.3,1);
}
.capability-art.is-active{opacity:1;transform:translateY(0)}
.capability-art[data-capability-art="01"]{width:73%;left:17%;top:0}
.capability-art[data-capability-art="02"]{width:139%;left:-23%;top:12%}
.capability-art[data-capability-art="03"]{width:104%;left:-9%;top:9%}
.capability-art[data-capability-art="04"]{width:116%;left:-18%;top:-2%}
.capability-art[data-capability-art="05"]{width:83%;left:16%;top:8%}
.capability-art[data-capability-art="06"]{width:125%;left:-10%;top:4%}
.capability-index li{position:relative}
.capabilities.is-enhanced .capability-index li::before{
  content:"";position:absolute;left:-15px;top:31px;height:25px;width:2px;
  background:var(--violet);opacity:0;transition:opacity 160ms ease-out;
}
.capabilities.is-enhanced .capability-index li:first-child::before{top:5px}
.capabilities.is-enhanced .capability-index li.is-active::before{opacity:1}
.capability-index li:focus-within a{outline:2px solid var(--violet);outline-offset:5px}

@media(min-width:761px) and (max-width:1100px){
  .capabilities{padding-left:11%;column-gap:5%;grid-template-columns:1fr 1.22fr}
  .capability-intro h2{font-size:clamp(38px,4.8vw,53px)}
  .capability-intro>p{font-size:16px}
  .capability-matter{height:330px;width:124%;margin-left:-19%;margin-top:36px}
  .capability-index li{grid-template-columns:22px 1fr 44px;gap:12px}
  .capability-index h3{font-size:24px}
  .capability-index a{width:44px;height:44px}
}
@media(max-width:760px){
  /* Keep every coordinate vertical. A right-hand gutter beside the heading
     retains the original content width and existing entry/work layouts. */
  .work>.scene-coordinate{top:4px}
  .capabilities>.scene-coordinate{top:48px}
  .begin>.scene-coordinate{top:53px}
  .continuity>.scene-coordinate{top:48px}
  .work>.scene-coordinate,.capabilities>.scene-coordinate,.begin>.scene-coordinate,.continuity>.scene-coordinate{right:8px;left:auto;width:14px;gap:8px}
  .work>.scene-coordinate .coordinate-rule,.capabilities>.scene-coordinate .coordinate-rule,.begin>.scene-coordinate .coordinate-rule,.continuity>.scene-coordinate .coordinate-rule{width:12px}
  .capabilities{display:block;padding-top:44px}
  .capability-presentation{display:contents}
  .capability-intro{min-height:0;margin-bottom:28px}
  .capability-intro h2{font-size:52px}
  .capability-intro>p{width:90%}
  .capability-matter{
    /* One compact field accompanies the index; native scroll selects the piece.
       Static fallback remains in flow when enhancement is absent. */
    position:relative;top:auto;right:auto;width:calc(100% + 48px);height:176px;
    margin:0 -24px 12px;clip-path:inset(0);z-index:3;
    background:#eeeae4;
  }
  .capabilities.is-enhanced .capability-matter{position:sticky;top:0}
  .capability-matter::after{content:"";position:absolute;inset:auto 0 0;height:20px;background:linear-gradient(transparent,#eeeae4);pointer-events:none}
  .capability-art[data-capability-art="01"]{width:58%;left:30%;top:-37%}
  .capability-art[data-capability-art="02"]{width:104%;left:-7%;top:-21%}
  .capability-art[data-capability-art="03"]{width:71%;left:-9%;top:-32%}
  .capability-art[data-capability-art="04"]{width:79%;left:34%;top:-55%}
  .capability-art[data-capability-art="05"]{width:62%;left:23%;top:-42%}
  .capability-art[data-capability-art="06"]{width:94%;left:10%;top:-47%}
  .capability-index{z-index:2}
  .capability-index li{scroll-margin-top:192px}
  .capabilities.is-enhanced .capability-index li:first-child::before{top:30px}
  .capabilities.is-enhanced .capability-index li::before{left:-10px}
}
@media(max-width:360px){
  .capability-intro h2{font-size:46px}
  .capability-matter{height:152px}
  .capability-index li{scroll-margin-top:170px}
}
@media(prefers-reduced-motion:reduce){
  .capability-art,.capability-index li::before{transition:none;transform:none}
}