/* Visual Craft: two-column media grid, hover crop, caption marquee. */
.workGrid{grid-template-columns:1fr 1fr;align-items:start;gap:8px;display:grid}
.workCol{flex-direction:column;gap:8px;min-width:0;display:flex;container-type:inline-size}
@media (min-width:901px) {
.workCard[data-ratio="4 / 5"]{height:calc(125cqw - 50px);aspect-ratio:unset!important}
}
.workUniform .workCardPlaceholder{font-size:calc(clamp(28px,4vw,56px) + 1px)}
.workCard{cursor:pointer;width:100%;color:inherit;text-align:left;background:0 0;border:0;border-radius:0;padding:0;text-decoration:none;display:block;position:relative;container-type:size}
.workGrid>.workCard,.workGrid>.workCol>.workCard{animation:.56s cubic-bezier(.22,1,.36,1) both work-card-enter;animation-delay:var(--work-card-enter-delay,.1s)}
.workGridFlat>.workCard:first-child,.workGrid>.workCol:first-child>.workCard:first-child{--work-card-enter-delay:.1s}
.workGridFlat>.workCard:nth-child(2),.workGrid>.workCol:nth-child(2)>.workCard:first-child{--work-card-enter-delay:.15s}
.workGridFlat>.workCard:nth-child(3),.workGrid>.workCol:first-child>.workCard:nth-child(2){--work-card-enter-delay:.2s}
.workGridFlat>.workCard:nth-child(4),.workGrid>.workCol:nth-child(2)>.workCard:nth-child(2){--work-card-enter-delay:.25s}
.workGridFlat>.workCard:nth-child(n+5),.workGrid>.workCol>.workCard:nth-child(n+3){--work-card-enter-delay:.3s}
@media (prefers-reduced-motion:reduce) {
.workGrid>.workCard,.workGrid>.workCol>.workCard{animation:none}
}
.workCardInner{width:100%;height:100%;position:relative;overflow:visible}
.workCardMediaWrap{z-index:1;border-radius:6px;transition:bottom .167s linear;position:absolute;inset:0;overflow:hidden}
.workCard:hover .workCardMediaWrap,.workCard:focus-visible .workCardMediaWrap{bottom:24px}
.workCardMedia{object-fit:cover;pointer-events:none;border-radius:inherit;transform-origin:50%;will-change:transform;width:100cqw;height:100cqh;transition:transform .167s ease-out;position:absolute;top:0;left:0}
.workCard:not(.workCardStatic):hover .workCardMedia,.workCard:not(.workCardStatic):focus-visible .workCardMedia{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce) {
.workCardMedia{will-change:auto;transition:none}
.workCard:not(.workCardStatic):hover .workCardMedia,.workCard:not(.workCardStatic):focus-visible .workCardMedia{transform:none}
}
.workCardCaption{opacity:0;pointer-events:none;justify-content:space-between;align-items:center;gap:8px;height:24px;transition:opacity .167s linear;display:flex;position:absolute;bottom:0;left:0;right:0;overflow:hidden}
.workCard:hover .workCardCaption,.workCard:focus-visible .workCardCaption{opacity:1;transition-delay:.167s}
.workCardName{font-family:var(--font-body);color:var(--text);white-space:nowrap;flex-shrink:0;font-size:14px;font-weight:600}
.workCardTagline{min-width:0;font-family:var(--font-body);color:var(--muted);text-align:right;white-space:nowrap;flex:1;font-size:14px;font-weight:400;display:block;overflow:hidden}
.workCardTagline.is-overflowing{text-align:left}
.workCardTaglineTrack{white-space:nowrap;will-change:transform;align-items:center;width:max-content;display:inline-flex}
.workCardTaglineGap{flex:0 0 32px;justify-content:center;width:32px;display:inline-flex}
@media (hover:hover) and (pointer:fine) {
.workCard:hover .workCardTagline.is-overflowing .workCardTaglineTrack,.workCard:focus-visible .workCardTagline.is-overflowing .workCardTaglineTrack{animation:work-card-marquee-ltr var(--work-marquee-duration) linear .5s infinite both}
}
@media (max-width:900px) {
.workGrid,.workGridFlat,.moreProjectsGrid{grid-template-columns:1fr;gap:20px}
.workCard{height:auto;container-type:inline-size;aspect-ratio:unset!important}
.workCardInner{flex-direction:column;gap:8px;height:auto;display:flex}
.workCardMediaWrap{width:100%;aspect-ratio:var(--work-card-ar,4 / 3);position:relative;inset:auto}
.workCardMedia{width:100%;height:100%}
.workCard:hover .workCardMediaWrap,.workCard:focus-visible .workCardMediaWrap{bottom:auto}
.workCardCaption{opacity:1;pointer-events:none;flex-direction:column;align-items:flex-start;gap:2px;height:auto;position:static;overflow:visible}
.workCard:hover .workCardCaption,.workCard:focus-visible .workCardCaption{transition-delay:0s}
.workCardName,.workCardTagline{white-space:normal}
.workCardTagline{text-align:left;overflow:visible}
.workCardTaglineTrack{white-space:normal;width:100%;animation:none;display:block;transform:none}
.workCardTaglineGap,.workCardTaglineDuplicate{display:none}
}
@media (min-width:721px) and (max-width:900px) {
.workGrid,.workGridFlat,.sysGrid,.moreProjectsGrid{grid-template-columns:1fr 1fr}
.workGrid,.workGridFlat,.moreProjectsGrid{gap:12px 8px}
.workCardCaption{justify-content:flex-start}
.workCardName{white-space:nowrap;flex-shrink:0}
.workCardTagline{text-align:left;white-space:normal;overflow:visible}
}
@media (max-width:560px) {
.workCardCaption{flex-direction:column;align-items:flex-start;gap:2px}
.workCardName,.workCardTagline{font-size:14px}
}
@media (hover:none) {
.workCard .workCardCaption{opacity:1}
}
@media (hover:none) and (min-width:901px) {
.workCard .workCardMediaWrap{bottom:44px}
.workCard .workCardCaption{flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;height:44px}
.workCardTagline{text-align:left;white-space:normal;width:100%;overflow:visible}
.workCardTaglineTrack{white-space:normal;width:100%;animation:none;display:block;transform:none}
.workCardTaglineGap,.workCardTaglineDuplicate{display:none}
}
@media (prefers-reduced-motion:reduce) {
.workNavDot,.workNavDescWrap,.workCardCaption,.workCardMediaWrap,.csMediaHoverWrap,.csMediaHoverWrap>.csMediaStage,.csMediaHoverCaption{transition:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:901px) {
.workCard:hover .workCardMediaWrap,.workCard:focus-visible .workCardMediaWrap{bottom:44px}
.workCard:hover .workCardCaption,.workCard:focus-visible .workCardCaption{flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;height:44px}
.workCardTagline{text-align:left;white-space:normal;width:100%;overflow:visible}
.workCardTaglineTrack{white-space:normal;width:100%;animation:none;display:block;transform:none}
.workCardTaglineGap,.workCardTaglineDuplicate{display:none}
}
html[data-intro=play] .stage>.window,html[data-intro=play] .workGrid>.workCol>.workCard{animation:none}