/* Connect STI / round 04 — scoped, native interactions. */
@layer connect.components {
 .r4-dossier,.r4-credits {display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);padding:clamp(1.5rem,4vw,4rem);border:1px solid var(--line)}
 .r4-dossier h3,.r4-decision h3,.r4-credits h3 {font:clamp(2.5rem,5vw,5rem)/1.05 var(--display);letter-spacing:-.035em;margin:1.5rem 0}
 .r4-dossier dl {margin:0}.r4-dossier dl>div {border-top:1px solid var(--line);padding:1.3rem 0}.r4-dossier dt {font:11px var(--mono);color:var(--red);text-transform:uppercase}.r4-dossier dd {margin:.8rem 0 0;line-height:1.6}
 .r4-triptych {display:flex;gap:1rem;min-height:480px}.r4-triptych a {flex:1;min-width:0;position:relative;overflow:hidden;border-radius:.6rem;color:#fff;text-decoration:none;background:#18211f}
 .r4-triptych img {width:100%;height:480px;object-fit:cover;opacity:.7}.r4-triptych a>div {position:absolute;inset:auto 0 0;padding:1.5rem;background:linear-gradient(transparent,#18211f)}.r4-triptych h3 {font:clamp(1.6rem,3vw,3rem) var(--display);margin:.6rem 0}
 .r4-decision {max-width:950px;margin:auto}
 .r4-decision details,.r4-credits details {border-top:1px solid var(--line)}
 .r4-decision summary,.r4-credits summary {display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 0;cursor:pointer;list-style:none;font:clamp(1.3rem,2vw,2rem) var(--display)}
 .r4-decision summary::-webkit-details-marker,.r4-credits summary::-webkit-details-marker {display:none}
 .r4-decision details p,.r4-credits details p {max-width:660px;line-height:1.7;padding-bottom:1rem;color:var(--muted)}
 .r4-flow {border:1px solid var(--line);padding:clamp(1.5rem,4vw,4rem)}.r4-flow__track {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:3rem 0}
 .r4-flow__track>div {display:grid;gap:1.5rem;position:relative;padding:1.5rem;border-top:2px solid var(--red);background:var(--surface);border-right:1px solid var(--line)}.r4-flow__track strong {font:clamp(1.3rem,2vw,2rem) var(--display)}.r4-flow__track>div>span:last-child {font-size:2rem;color:var(--red)}
 .r4-chapters {display:grid;grid-template-columns:250px 1fr;gap:4rem;align-items:start}.r4-chapters nav {position:sticky;top:110px;display:grid}.r4-chapters nav a {padding:1.2rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--muted);font:12px var(--mono)}
 .r4-chapters article {min-height:360px;padding:2rem 0;border-top:1px solid var(--line);scroll-margin-top:130px}.r4-chapters article:target {border-color:var(--red)}.r4-chapters h3 {font:clamp(2.5rem,5vw,5rem)/1.1 var(--display);margin:1.5rem 0}.r4-chapters article p {max-width:580px;line-height:1.7}
 .r4-deliverables {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}.r4-deliverables details {border:1px solid var(--line);padding:2rem;background:var(--surface)}
 .r4-deliverables summary {display:grid;grid-template-columns:1fr auto;gap:3rem;list-style:none;cursor:pointer}.r4-deliverables summary::-webkit-details-marker {display:none}.r4-deliverables strong {grid-row:2;font:clamp(2rem,4vw,4rem) var(--display)}.r4-deliverables summary>span:last-child {grid-column:2;grid-row:2;color:var(--red);font-size:2rem}.r4-deliverables p {line-height:1.7}
 .r4-gallery {display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;overscroll-behavior-inline:contain}.r4-gallery figure {flex:0 0 82%;margin:0;scroll-snap-align:center}.r4-gallery img {display:block;width:100%;aspect-ratio:1.6;object-fit:cover}.r4-gallery figcaption {display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:center}.r4-gallery figcaption strong {font:clamp(1.4rem,2.5vw,2.5rem) var(--display)}.r4-gallery figcaption>span:last-child {font-size:.8rem;color:var(--muted)}
 .r4-inspect>div {overflow:hidden;aspect-ratio:1.6;border:1px solid var(--line)}.r4-inspect img {width:100%;height:100%;object-fit:cover;transform-origin:55% 45%}
 .r4-principles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.r4-principles article {padding:2rem;min-height:330px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;outline-offset:4px}.r4-principles h3 {font:clamp(2rem,3.5vw,3.5rem)/1.1 var(--display);letter-spacing:-.03em}.r4-principles article>span:last-child {font-size:2rem;color:var(--red)}
}
@layer connect.motion {
 @supports selector(:has(*)) {.r4-inspect:has(#r4-zoom:checked) img {transform:scale(1.65)}}
 @supports not selector(:has(*)) {.r4-inspect>.r3-toggle {display:none}}
 .r4-principles article:hover,.r4-principles article:focus-visible {background:var(--red);color:#fff}.r4-principles article:hover>span:last-child,.r4-principles article:focus-visible>span:last-child {color:#fff}
 @media(prefers-reduced-motion:no-preference) {
  .r4-triptych a {transition:flex .8s var(--lab-ease)}.r4-triptych a:hover,.r4-triptych a:focus-visible {flex:1.6}
  .r4-inspect img {transition:transform 1s var(--lab-ease)}.r4-principles article {transition:background .4s,color .4s,transform .4s var(--lab-ease)}.r4-principles article:hover,.r4-principles article:focus-visible {transform:translateY(-8px)}
  .r4-deliverables details[open] p,.r4-decision details[open] p,.r4-credits details[open] p {animation:r3-enter .45s var(--lab-ease) both}
 }
 @media(max-width:800px) {
  .r4-dossier,.r4-credits {grid-template-columns:1fr}.r4-triptych {flex-direction:column;min-height:0}.r4-triptych img {height:300px}.r4-triptych a {flex:auto}
  .r4-flow__track {grid-template-columns:1fr 1fr}.r4-chapters {grid-template-columns:1fr;gap:1.5rem}.r4-chapters nav {position:static;display:flex;flex-wrap:wrap;gap:1rem}.r4-chapters article {min-height:300px}
  .r4-principles {grid-template-columns:1fr}.r4-principles article {min-height:240px}.r4-gallery figure {flex-basis:92%}.r4-gallery figcaption {grid-template-columns:auto 1fr}.r4-gallery figcaption>span:last-child {grid-column:2}
 }
 @media(max-width:480px) {.r4-deliverables {grid-template-columns:1fr}.r4-flow__track {grid-template-columns:1fr}.r4-flow__track>div {grid-template-columns:25px 1fr auto;align-items:center;gap:1rem}.r4-deliverables summary {gap:2rem}.r4-gallery figcaption {gap:.75rem}}
}