/* Homepage selected work. Uses the site's type, spacing, and surface tokens. */
.work-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.work-controls { display: flex; align-items: center; gap: 10px; }
.work-index { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--stone); margin-right: 16px; white-space: nowrap; }
.work-arrow, .work-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: transparent; border: 1px solid var(--line-on-paper); border-radius: 50%; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.work-toggle[hidden] { display: none; }
.work-arrow:hover, .work-toggle:hover { color: var(--paper); background: var(--maroon); border-color: var(--maroon); }
.work-arrow:active, .work-toggle:active { background: var(--maroon-lo); color: var(--paper); }
.work-carousel:focus-visible { outline-offset: -6px; }
.work-carousel .teaser { align-items: start; touch-action: pan-y pinch-zoom; }
.work-carousel .teaser-copy { gap: 0; }
.project-story { grid-area: 1 / 1; display: grid; align-content: start; gap: 22px; min-width: 0; visibility: hidden; pointer-events: none; }
.project-story.is-active { visibility: visible; pointer-events: auto; }
.project-evidence { display: grid; gap: 12px; }
.project-evidence .tech { margin-top: 0; }
.project-impact { display: flex; flex-wrap: wrap; gap: 6px; }
.project-impact li { padding: 6px 11px; border: 1px solid var(--line-on-paper); border-radius: 999px; background: var(--paper-2); color: var(--stone); font-family: var(--sans); font-size: 12px; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; }
.project-impact li:first-child { border-color: var(--maroon); color: var(--maroon); }
.work-carousel .client { color: var(--stone); }
.work-carousel .teaser-copy .h2 { line-height: .98; }
.project-provenance { display: block; max-width: 36ch; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .015em; color: var(--stone); }
.work-carousel .teaser-fig { width: 100%; padding: 0; border-radius: 0; align-self: start; }
.system-diagram { width: 100%; height: auto; overflow: visible; }
.system-surface, .system-dot { fill: var(--ink); }
.system-node.is-hot .system-surface, .system-node.is-hot .system-dot { fill: var(--maroon); }
.system-node-title { font-family: var(--sans); font-size: 23px; font-weight: 600; letter-spacing: -.025em; fill: var(--paper); }
.system-node-meta { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .075em; text-transform: uppercase; fill: var(--mist); }
.system-node.is-hot .system-node-meta { fill: #d5bb96; }
.system-connection { fill: none; stroke: var(--line-on-paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; }
.system-connection.is-hot { stroke: var(--maroon); }
.system-signal { fill: var(--maroon); }
.system-window, .system-window-tick { fill: none; stroke: var(--maroon); stroke-width: 1; vector-effect: non-scaling-stroke; }
.system-window { stroke-dasharray: 3 3; }
.work-carousel .exp-cat { margin-top: clamp(40px, 5vw, 64px); }
.work-carousel .teaser-fig figcaption { margin-top: 20px; padding-left: 5.333%; max-width: 48ch; line-height: 1.65; }
.work-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1041px) {
  .work-carousel .teaser-fig { padding-top: 0; }
}
@media (min-width: 721px) and (max-width: 1040px) {
  .work-carousel .teaser-copy { grid-column: 1 / span 6; }
  .work-carousel .teaser-fig { grid-column: 7 / span 6; }
  .work-carousel .teaser-copy .h2 { font-size: clamp(34px, 4.4vw, 46px); }
  .system-node-title { font-size: 27px; }
  .system-node-meta { font-size: 20px; letter-spacing: 0; }
}
@media (max-width: 720px) {
  .work-heading { gap: 12px; margin-bottom: 30px; }
  .work-heading .label { font-size: 10px; letter-spacing: .1em; }
  .work-controls { gap: 8px; }
  .work-index { font-size: 11px; margin-right: 4px; }
  .work-arrow, .work-toggle { width: 44px; height: 44px; }
  .work-carousel .teaser { row-gap: 36px; }
  .project-story { gap: 20px; }
  .work-carousel .teaser-copy .h2 { font-size: clamp(34px, 8vw, 52px); }
  .work-carousel .teaser-copy .body { font-size: 16px; }
  .work-carousel .tech { gap: 6px; }
  .work-carousel .tech li { padding: 6px 10px; font-size: 11px; }
  .system-node-title { font-size: 32px; }
  .system-node-meta { font-size: 22px; letter-spacing: 0; }
  .work-carousel .teaser-fig figcaption { font-size: 11px; }
}
@media (max-width: 420px) {
  .work-heading { flex-wrap: wrap; row-gap: 16px; }
  .work-heading .label { flex-basis: 100%; }
  .work-controls { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .work-carousel *, .work-carousel *::before, .work-carousel *::after { animation: none !important; transition: none !important; }
}