/* Work is readable in one column before any motion context is created. */
.work-showcase{--work-count:4;position:relative}
.work-stage{position:relative}
.work-stage .work-grid{display:grid;grid-template-columns:1fr;gap:64px}
.work-stage .project-card{display:block;min-width:0;cursor:default}
.work-stage .project-media{aspect-ratio:16/9;background:rgb(var(--cm-stage));border-radius:8px}
.work-stage .project-media video{width:100%;height:100%;object-fit:contain;transform:none;transition:none}
.work-stage .project-card:hover video{transform:none}
.work-stage .project-caption{padding-top:18px;gap:20px;align-items:baseline}
.work-stage .project-caption h3{font:700 clamp(19px,2.15vw,30px)/1.25 var(--display);letter-spacing:-.045em}
.work-stage .project-caption>span{font-size:11px;color:rgb(var(--cm-fg-muted))}
.work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;min-height:36px;font-size:10px;letter-spacing:.08em}
.work-project-status{display:flex;align-items:center;gap:16px;color:rgb(var(--cm-fg-muted))}
.work-counter{font-size:12px;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}
.work-selection{display:flex;gap:6px}
.work-selection button{width:40px;height:34px;border:1px solid var(--line);border-radius:4px;background:transparent;font-size:10px;transition:background-color var(--cm-dur-micro) var(--cm-ease-out),color var(--cm-dur-micro) var(--cm-ease-out),transform var(--cm-dur-micro) var(--cm-ease-out)}
.work-selection button:hover{background:rgb(var(--cm-fg) / .08)}
.work-selection button:active{transform:scale(.97);transition-duration:var(--cm-dur-instant)}
.work-selection button:focus-visible{outline:2px solid rgb(var(--cm-focus));outline-offset:2px}
.work-selection button[aria-pressed='true']{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.work-play-toggle{background:transparent;border:1px solid var(--line);border-radius:4px;padding:9px 13px;min-height:36px;font-size:11px}
.work-play-toggle:hover{border-color:var(--cream)}
.work-selection[hidden],.work-play-toggle[hidden]{display:none}
.work-timeline{display:none;height:2px;background:var(--line);margin-top:18px;overflow:hidden}
.work-timeline-fill{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.work-stage[data-work-mode='flow'] .work-project-status{display:none}
.work-stage[data-work-mode='flow'] .work-toolbar{position:sticky;top:var(--header-height);z-index:3;justify-content:flex-end;background:var(--ink);padding-block:8px}
.work-stage[data-work-mode='flow'] .project-card{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--header-height) - 80px)}
html:not([data-motion]) .work-toolbar{display:none}
.work-showcase[data-work-mode='scrub']{height:calc(var(--work-count)*100svh)}
.work-stage[data-work-mode='scrub']{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));padding:22px 0 18px;display:flex;flex-direction:column}
.work-stage[data-work-mode='scrub'] .work-toolbar{flex:none}
.work-stage[data-work-mode='scrub'] .work-grid{position:relative;display:block;flex:1;min-height:0}
/* Two quiet edges establish the deck without loading another film. */
.work-stage[data-work-mode='scrub'] .work-grid::before,
.work-stage[data-work-mode='scrub'] .work-grid::after{content:'';position:absolute;inset:0 0 72px;border:1px solid rgb(var(--cm-fg) / .16);border-radius:8px;background:rgb(var(--cm-surface-2));pointer-events:none}
.work-stage[data-work-mode='scrub'] .work-grid::before{transform:translateY(17px) scaleX(.982);opacity:.8}
.work-stage[data-work-mode='scrub'] .work-grid::after{transform:translateY(29px) scaleX(.962);opacity:.5}
.work-stage[data-work-mode='scrub'] .project-card{position:absolute;inset:0;display:flex;flex-direction:column;height:100%;pointer-events:none}
.work-stage[data-work-mode='scrub'] .project-card[data-work-active='true']{pointer-events:auto;will-change:transform}
.work-stage[data-work-mode='scrub'] .project-media{flex:1;min-height:0;aspect-ratio:auto;width:100%}
.work-stage[data-work-mode='scrub'] .project-caption{flex:none;position:relative;padding-top:32px;min-height:72px}
.work-stage[data-work-mode='scrub'] .work-timeline{display:block;flex:none}
@media(max-width:999px){
  .work-stage .project-caption h3{font-size:23px}
  .work-project-status>span:first-child{font-size:8px}
  .work-toolbar{gap:12px}
}
@media(max-width:650px){
  .work-stage .work-grid{gap:38px}
  .work-stage .project-caption{gap:12px;padding-top:14px;align-items:start}
  .work-stage .project-caption h3{font-size:20px}
  .work-stage .project-caption>span{font-size:11px;white-space:nowrap;padding-top:5px}
  .work-play-toggle{min-height:44px;font-size:11px}
}
/* The intro frames the selection, and the question behind it, before the showcase starts. */
.work-intro-copy{display:grid;justify-items:start;gap:16px;max-width:390px;color:rgb(var(--cm-fg-muted));font-size:15px;line-height:1.65}
.work-intro-copy .work-question{color:var(--orange);font-size:30px;line-height:1.05;transform:rotate(-3deg);transform-origin:left center}
.work-intro-copy .pill{margin-top:10px}
@media(max-width:999px){
  .work-intro{flex-direction:column;align-items:start;gap:28px}
  .work-intro-copy{max-width:520px;font-size:14px}
}
@media(max-width:650px){
  .work-intro{gap:22px}
  .work-intro-copy{font-size:13px}
  .work-intro-copy .work-question{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.work-selection button{transition:none}.work-selection button:active{transform:none}}
/* In flow (touch, short screens) covers fill their frame: the 96px black pillars
   baked into each clip fall outside the 6% overflow, as in the hero. */
.work-stage[data-work-mode='flow'] .project-media{position:relative;overflow:hidden}
.work-stage[data-work-mode='flow'] .project-media video{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
@media(max-width:999px){
  .work-stage[data-work-mode='flow'] .project-card{min-height:0}
  .work-play-toggle{min-height:44px}
}