/* Mobile uses the same document-driven rail as capabilities; desktop keeps its desk. */
.mobile-work-pin,.mobile-work-track,.mobile-work-back{display:none}
@media(max-width:960px){
 .work-section[data-mobile-rail]:not(.case-open):not([data-work-browse="all"]){padding:0;height:var(--cap-scroll-height);overflow:visible;overflow-anchor:none;scroll-margin-top:calc(64px + env(safe-area-inset-top,0px));--cap-pin-top:calc(64px + env(safe-area-inset-top,0px));--cap-pin-height:calc(100svh - 160px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .work-section[data-mobile-rail]:not(.case-open):not([data-work-browse="all"])>.work-shell{display:none}
 .work-section[data-mobile-rail]>.mobile-work-pin{position:sticky;top:var(--cap-pin-top);display:flex;flex-direction:column;gap:10px;width:100%;height:var(--cap-pin-height);min-height:230px;padding:14px 0 5px;box-sizing:border-box;background:var(--site-bg);color:var(--site-ink)}
 .mobile-work-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 18px;flex:none;min-height:28px}
 .mobile-work-heading h2{margin:0;font:600 20px/1.2 var(--font-ui);letter-spacing:-.035em}
 .mobile-work-heading>span{max-width:130px;font:11px/1.3 var(--font-ui);color:var(--site-muted);text-align:right}
 .mobile-work-pin>.capability-window{display:block;flex:1;min-height:0;width:100%;overflow:hidden;overflow:clip;overflow-anchor:none;touch-action:pan-y pinch-zoom}
 .mobile-work-track{position:relative;display:flex;align-items:stretch;gap:16px;width:var(--cap-track-width);max-width:none;height:100%;padding:0 16px;box-sizing:border-box;margin:0;will-change:transform}
 .mobile-work-tile{position:relative;flex:0 0 var(--cap-card-width);width:var(--cap-card-width);max-width:var(--cap-card-width);min-width:0;min-height:0;height:100%;max-height:100%;align-self:center;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--site-line);border-radius:8px;background:var(--site-surface);color:var(--site-ink);overflow:hidden;overflow:clip;touch-action:pan-y pinch-zoom}
 .mobile-work-meta{display:flex;align-items:center;justify-content:space-between;font:10px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--site-muted);flex:none}
 .mobile-work-paper-mark{font-size:17px;color:var(--site-accent)}
 .mobile-work-sketch{position:relative;display:grid;place-items:center;flex:1 1 0;min-height:0;width:100%;border:1px solid var(--site-line);border-radius:5px;overflow:hidden;background:var(--site-surface);container-type:size}
 .mobile-work-sketch>.study-svg{position:relative;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
 .mobile-work-sketch-note{position:absolute;left:8px;bottom:8px;padding:5px 8px;border:1px solid var(--site-line);border-radius:3px;background:var(--site-surface);color:var(--site-ink);font:10px/1.3 var(--font-ui)}
 .mobile-work-sketch.mobile-work-modules{display:grid;place-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:8px;border:0;background:transparent}
 .mobile-work-module{display:flex;flex-direction:column;align-self:stretch;justify-self:stretch;width:100%;height:100%;min-width:0;min-height:0;margin:0;border:1px solid var(--site-line);border-radius:4px;background:var(--site-surface);overflow:hidden}
 .mobile-work-module figcaption{flex:none;min-height:28px;padding:7px 6px;border-bottom:1px solid var(--site-line);font:500 10px/1.2 var(--font-ui);color:var(--site-ink)}
 .mobile-work-module-drawing{position:relative;display:block;flex:1 1 0;min-height:0;width:100%;overflow:hidden}
 .mobile-work-copy{flex:none;min-width:0}
 .mobile-work-tag{margin:0 0 7px;font:10px/1.2 var(--font-ui);color:var(--site-muted)}
 .mobile-work-copy h3,.mobile-work-all h3{margin:0;font:600 clamp(22px,6.5vw,30px)/1.1 var(--font-ui);letter-spacing:-.04em;overflow-wrap:anywhere}
 .mobile-work-description{margin:9px 0 0;font:14px/1.45 var(--font-ui);color:var(--site-muted)}
 .mobile-work-actions{display:flex;flex:none;flex-wrap:wrap;gap:6px;align-items:center}
 .mobile-work-action,.mobile-work-back{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:fit-content;padding:9px 12px;border:1px solid var(--site-line);border-radius:3px;background:var(--site-surface);color:var(--site-ink);font:16px/1.1 var(--font-action);text-align:left;text-decoration:none;cursor:pointer;touch-action:manipulation}
 .mobile-work-action:active,.mobile-work-back:active{background:var(--site-accent-soft)}
 .mobile-work-action:focus-visible,.mobile-work-back:focus-visible{outline:2px solid var(--site-accent);outline-offset:3px}
 .mobile-work-actions .mobile-work-action{font-size:15px;padding-inline:10px;gap:6px}
 .mobile-work-pin>.capability-rail-controls{display:flex;align-items:center;gap:10px;flex:none;padding:0 16px;min-height:44px;color:var(--site-muted);font:12px/1.3 var(--font-ui)}
 .mobile-work-all{justify-content:center;padding:24px}
 .mobile-work-all-mark{font:600 clamp(80px,24vw,130px)/1 var(--font-ui);color:var(--site-accent);letter-spacing:-.07em}
 .mobile-work-all .mobile-work-action{margin-top:10px}
 :root[data-style="sketch"] .mobile-work-tile{border-radius:8px 23px 9px 18px;box-shadow:2px 2px 0 var(--site-line)}
 :root[data-style="sketch"] .mobile-work-tile:nth-child(3n+1){background:var(--site-pink)}
 :root[data-style="sketch"] .mobile-work-tile:nth-child(3n+2){background:var(--site-yellow)}
 :root[data-style="sketch"] .mobile-work-tile:nth-child(3n){background:var(--site-cyan)}
 :root[data-style="sketch"] :is(.mobile-work-action,.mobile-work-back){border-radius:3px 8px 4px 6px;box-shadow:1px 1px 0 var(--site-line)}
 :root[data-style="clean"] .mobile-work-sketch{filter:grayscale(1)}
 .work-section.case-open>.mobile-work-pin,.work-section[data-work-browse="all"]>.mobile-work-pin{display:none}
 .work-section[data-work-browse="all"]>.work-shell>.mobile-work-back{display:inline-flex;margin-bottom:18px}
 /* The 110%-wide desk drawing must not give the whole page a sideways scroll range. clip keeps sticky working. */
 .work-section[data-work-browse="all"]{overflow-x:clip}
 /* Set by mobile-work-rail.js while Work is more than half a screen away. */
 .work-section:not([data-motion-near]) .ui-motion-svg *{animation-name:none!important}
 .work-section.case-open>.work-shell>.mobile-work-back{display:none}
 .work-section[data-mobile-rail="swipe"]:not(.case-open):not([data-work-browse="all"]){height:auto}
 .work-section[data-mobile-rail="swipe"]>.mobile-work-pin{position:static}
 .work-section[data-mobile-rail="swipe"] .capability-window{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
 .work-section[data-mobile-rail="swipe"] .mobile-work-tile{scroll-snap-align:start}
}
@media(max-width:960px) and (max-height:700px){
 .mobile-work-tile{padding:12px;gap:8px}
 .mobile-work-copy h3,.mobile-work-all h3{font-size:22px}
 .mobile-work-description{font-size:12px;line-height:1.35;margin-top:6px}
 .mobile-work-tag{font-size:9px;margin-bottom:5px}
 .mobile-work-actions .mobile-work-action{font-size:14px;padding:8px}
 .mobile-work-heading{min-height:24px}.mobile-work-heading h2{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.mobile-work-track{will-change:auto}}