/* Selected work as one screen: four tabs, one best piece each. The plate slides between pieces like a camera move. */
.sc { padding: clamp(84px, 12vh, 140px) var(--gutter) clamp(56px, 8vh, 96px); }
.sc-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-bottom: 1px solid var(--line-l); padding-bottom: 18px; }
.sc-top > .label { opacity: .62; }
.sc-tabs { display: flex; gap: clamp(14px, 2.4vw, 40px); }
.sc-tabs button { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 6px 0 10px; opacity: .42; transition: opacity .5s var(--ease); }
.sc-tabs button[aria-selected="true"], .sc-tabs button:hover, .sc-tabs button:focus-visible { opacity: 1; }
.sc-tabs .n { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.sc-tabs .nm { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(14px, 1.35vw, 20px); line-height: 1; }
.sc-tabs i { position: absolute; left: 0; right: 0; bottom: -19px; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.sc-tabs button[aria-selected="true"] i { transform: scaleX(1); }
.sc.auto .sc-tabs button[aria-selected="true"] i { animation: sc-fill var(--sc-dur, 7s) linear both; }
.sc:hover .sc-tabs i, .sc:focus-within .sc-tabs i { animation-play-state: paused; }
@keyframes sc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sc-stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-top: clamp(28px, 5vh, 56px); }
.sc-copies { position: relative; min-height: clamp(220px, 30vh, 300px); }
.sc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; animation: sc-in .9s var(--ease) both; }
.sc-copy[hidden] { display: none; }
@keyframes sc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sc-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(36px, 3.7vw, 72px); line-height: .84; letter-spacing: -.03em; overflow-wrap: anywhere; }
.sc-line { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.4; max-width: 26ch; }
.sc-stat { opacity: .62; }
.sc-copy .pill:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.sc-plate { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 3px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(22, 19, 15, .6); }
.sc-media { position: absolute; inset: 0; opacity: 0; transform: translateX(14%) scale(1.04); transition: transform 1.1s var(--ease), opacity .8s var(--ease); pointer-events: none; }
.sc-media.on { opacity: 1; transform: none; pointer-events: auto; }
.sc-media.was { opacity: 0; transform: translateX(-12%) scale(.98); }
.sc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--film); }
.sc-media video.sq { left: 50%; width: auto; aspect-ratio: 1; transform: translateX(-50%); object-fit: cover; filter: none; }
.sc-media .bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(.45); }

/* Systems: three agents, one vault */
.sys { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); align-items: center; padding: 6% 7%; color: var(--bone); background: radial-gradient(90% 80% at 70% 50%, #2a241d, #16130f 70%); }
.sys .agents { display: flex; flex-direction: column; gap: 14%; height: 70%; justify-content: space-between; }
.sys .ag { justify-self: start; display: inline-flex; align-self: flex-start; padding: 9px 14px 8px; border: 1px solid rgba(244, 240, 231, .3); border-radius: 999px; font-weight: 700; font-size: clamp(10px, 1vw, 14px); letter-spacing: .06em; text-transform: uppercase; background: rgba(244, 240, 231, .06); animation: ag-pulse 3.6s var(--ease) infinite; animation-delay: var(--d); }
@keyframes ag-pulse { 0%, 70%, 100% { border-color: rgba(244, 240, 231, .3); } 20% { border-color: rgba(244, 240, 231, .9); } }
.sys .wires { width: 100%; height: 70%; overflow: visible; }
.sys .wires path { fill: none; stroke: rgba(244, 240, 231, .5); stroke-width: .5; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; animation: wire 2.4s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -16; } }
.sys .vault { border: 1px solid rgba(244, 240, 231, .22); border-radius: 14px; padding: 7% 8%; background: linear-gradient(180deg, rgba(255, 250, 240, .08), rgba(255, 250, 240, .02)); box-shadow: inset 0 1px 0 rgba(255, 252, 245, .16); }
.sys .vault .label { opacity: .6; }
.sys .vault ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0; }
.sys .vault li b { display: block; font-family: var(--display); font-size: clamp(20px, 2.4vw, 40px); line-height: .9; }
.sys .vault li span { font-size: clamp(10px, .85vw, 13px); opacity: .7; }
.sys .loop { opacity: .7; font-size: clamp(9px, .75vw, 11px); }

.sc-all { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: clamp(28px, 4vh, 44px); padding-top: 16px; border-top: 1px solid var(--line-l); }
.sc-all span { opacity: .5; margin-right: 6px; }
.sc-all a { opacity: .78; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.sc-all a:hover, .sc-all a:focus-visible { opacity: 1; border-bottom-color: currentColor; }

/* Chapel Hill, as one slow strip */
.strip { grid-column: 1 / -1; margin-top: clamp(40px, 7vh, 80px); overflow: hidden; }
.strip-l { opacity: .62; margin-bottom: 14px; }
.strip-track { display: flex; width: max-content; animation: strip 70s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-set { display: flex; gap: 12px; padding-right: 12px; }
.strip figure { position: relative; height: clamp(150px, 20vw, 300px); aspect-ratio: var(--ar, 3 / 2); margin: 0; flex: none; }
.strip figure .film { position: absolute; inset: 0; }
.strip figure img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { display: none; }
@keyframes strip { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .sc-top { flex-direction: column; align-items: stretch; }
  .sc-tabs { overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .sc-tabs::-webkit-scrollbar { display: none; }
  .sc-tabs button { flex: none; }
  .sc-stage { grid-template-columns: minmax(0, 1fr); }
  .sc-plate { order: -1; }
  .sc-copies { min-height: 0; }
  .sys { grid-template-columns: minmax(0, .9fr) minmax(0, .6fr) minmax(0, 1.4fr); padding: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-media, .sc-copy { transition: none; animation: none; }
  .strip-track { animation: none; overflow-x: auto; width: auto; }
  .strip-set[aria-hidden] { display: none; }
  .sys .ag, .sys .wires path { animation: none; }
}

/* Resources, right after the work: three free things, one line each */
.take { padding: 0 var(--gutter) clamp(72px, 11vh, 128px); }
.tk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; border-top: 1px solid var(--line-l); padding-top: 18px; }
.tk-head .label { opacity: .62; }
.tk-head p:last-child { font-size: 14px; }
.tk-head a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid currentColor; }
.tk-head a svg, .tk .go svg { width: 12px; height: 12px; }
.tk-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(22px, 3vh, 34px); }
.tk { position: relative; display: grid; gap: 8px; height: 100%; padding: 22px 22px 52px; border: 1px solid var(--line-l); border-radius: 6px; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.tk .label { opacity: .62; }
.tk b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 36px); line-height: .9; }
.tk > span:not(.label):not(.go) { font-size: 15px; line-height: 1.45; max-width: 32ch; }
.tk .go { position: absolute; right: 20px; bottom: 18px; transition: transform .5s var(--ease); }
.tk:hover, .tk:focus-visible { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tk:hover .go { transform: translateX(4px); }
@media (max-width: 900px) { .tk-grid { grid-template-columns: minmax(0, 1fr); } }
.sc-all .sc-allk { opacity: 1; margin-right: 6px; border-bottom: 1px solid currentColor; }