/* Selected work: two large project cards and a glimpse of the next. */
.about-work-divider{position:relative;z-index:3;height:1px;width:100%;margin:0;background:#050505}
.about-work-divider::before{content:"";position:absolute;inset:0 var(--ref-gutter);background:#272a55}
.about-work-scene>#work.work-cinematic{background:#050505!important}
#work.work-cinematic{--work-u:var(--ref-x);--work-rail-gutter:calc(var(--ref-left) + 88 * var(--work-u));--work-card-width:calc(700 * var(--work-u));--work-card-height:calc(532 * var(--work-u));--work-card-gap:calc(18 * var(--work-u));--work-card-pad:calc(26 * var(--work-u));--work-icon-size:calc(50 * var(--work-u));--work-title-size:calc(44 * var(--work-u));--work-description-size:calc(21 * var(--work-u));position:relative;display:block;height:100svh!important;min-height:0!important;padding:0!important;margin:0;border:0;overflow:hidden;background:#050505!important}
#work .work-heading-row{position:absolute;top:calc(var(--ref-top) + 116 * var(--work-u));left:calc(var(--ref-left) + 88 * var(--work-u));width:calc(900 * var(--work-u));display:block;margin:0;padding:0;gap:0!important}
#work .work-heading-row h2{max-width:none;margin:0!important;font:700 calc(74 * var(--work-u))/1.02 "Unbounded",sans-serif!important;letter-spacing:-.035em;white-space:nowrap}
#work .work-title-accent{font:inherit;color:transparent!important;background:linear-gradient(155deg,#8584ff,#6967ff 40%,#5653df 70%,#7f7bff);background-clip:text;-webkit-background-clip:text}
#work .all-projects-button{position:absolute;top:calc(var(--ref-top) + 196 * var(--work-u));right:calc(var(--ref-left) + 90 * var(--work-u));display:inline-flex;align-items:center;justify-content:center;gap:calc(28 * var(--work-u));min-width:calc(208 * var(--work-u));min-height:calc(54 * var(--work-u));margin:0;padding:calc(14 * var(--work-u)) calc(26 * var(--work-u));border:1px solid #ffffff80;border-radius:999px;color:#f4f4f7;background:transparent;font:500 calc(15 * var(--work-u))/1.4 "IBM Plex Mono",monospace;text-decoration:none;white-space:nowrap;transform:none!important}
#work .all-projects-button:hover{border-color:#b1a8ff;background:#7c72ff12}
#work #workRail{position:absolute;top:calc(var(--ref-top) + 290 * var(--work-u));left:0;width:100%;height:var(--work-card-height);display:flex;flex-flow:row nowrap;align-items:stretch;gap:var(--work-card-gap);margin:0!important;padding:0;padding-inline-start:var(--work-rail-gutter);padding-inline-end:var(--work-rail-gutter);border:0;border-radius:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;cursor:grab}
#work #workRail::-webkit-scrollbar{display:none}
#work #workRail.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
#work #workRail>.project{position:relative;inset:auto;display:block;flex:0 0 var(--work-card-width);width:var(--work-card-width);min-width:0;max-width:none;height:100%;min-height:0;margin:0;padding:0;overflow:hidden;isolation:isolate;scroll-snap-align:start;scroll-margin:0;border:1px solid #9286ff;border-radius:calc(22 * var(--work-u));background:#08080e;box-shadow:inset 0 0 1px #dedaff80;text-decoration:none;transform:none!important;opacity:1}
#work #workRail>.project::before{content:none;display:none}
#work #workRail>.project::after{content:"";position:absolute;inset:0;z-index:1;display:block;pointer-events:none;border:0;background:linear-gradient(to bottom,transparent 38%,#00000018 54%,#000000a8 75%,#000000e6 100%);opacity:1}
#work #workRail .project-cover{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:1;filter:none;transform:none!important;border-radius:inherit}
#work #workRail>.project>div{position:absolute;inset:auto var(--work-card-pad) var(--work-card-pad);z-index:2;display:block;margin:0;padding:0;color:#fff;transform:none!important;pointer-events:none}
#work #workRail .project small{display:block;margin:0 0 calc(12 * var(--work-u));color:#e1e1e8;font:400 calc(17 * var(--work-u))/1.4 "IBM Plex Mono",monospace;letter-spacing:0}
/* Every project shares these exact title metrics, regardless of name length. */
#work #workRail .project h3{display:block;margin:0 0 calc(16 * var(--work-u));color:#fff;font:700 var(--work-title-size)/1.15 "Unbounded",sans-serif;letter-spacing:-.025em;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:pretty;max-width:none}
#work #workRail .work-project-description{display:block;max-width:calc(100% - var(--work-icon-size) - 22 * var(--work-u));margin:0;color:#eeeeF4;font:400 var(--work-description-size)/1.45 "Manrope",sans-serif;letter-spacing:0;overflow-wrap:anywhere}
#work #workRail .work-card-open{position:absolute;right:calc(24 * var(--work-u));bottom:calc(24 * var(--work-u));z-index:3;display:grid;place-items:center;width:var(--work-icon-size);height:var(--work-icon-size);padding:0;border:1px solid currentColor;border-radius:50%;color:#fff;background:#0003;opacity:.65;transition:opacity .2s ease,background .2s ease;pointer-events:none}
#work #workRail .work-card-open svg{display:block;width:54%;height:54%;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#work #workRail>.project:is(:hover,:focus-visible) .work-card-open{opacity:1;background:#0006}
#work #workRail>.project:focus-visible{outline:2px solid #d1caff;outline-offset:-5px}
#work .all-projects-button:focus-visible,#work #workRail:focus-visible{outline:2px solid #b2aaff;outline-offset:5px}
#work .work-slider-control{position:absolute;left:calc(var(--ref-left) + 88 * var(--work-u));right:calc(var(--ref-left) + 90 * var(--work-u));top:calc(var(--ref-top) + 852 * var(--work-u));display:flex;align-items:center;height:calc(50 * var(--work-u));gap:calc(18 * var(--work-u));margin:0!important}
#work .work-scrollbar{position:relative;flex:1;min-width:0;height:calc(30 * var(--work-u));margin:0;border:0;background:none;overflow:visible;cursor:default}
#work .work-scrollbar::before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:#ffffff30}
#work .work-scrollbar-thumb{position:absolute;top:50%;left:calc((100% - 160 * var(--work-u)) * var(--work-progress,0));width:calc(160 * var(--work-u));min-width:0;height:calc(4 * var(--work-u));margin:0;border-radius:999px;background:#7770ff;transform:translateY(-50%);translate:none;pointer-events:none}
#work .work-navigation{display:flex;align-items:center;gap:calc(23 * var(--work-u))}
#work .work-arrow{width:calc(50 * var(--work-u));height:calc(50 * var(--work-u));padding:0;border-color:#5a5a63;font-size:calc(28 * var(--work-u))}
#work .work-counter{font-size:calc(13 * var(--work-u));gap:calc(10 * var(--work-u));white-space:nowrap}
@media(max-width:980px){
  .about-work-divider::before{inset-inline:6vw}
  #work.work-cinematic{--work-u:1px;--work-rail-gutter:6vw;--work-card-width:min(78vw,620px);--work-card-height:clamp(420px,56svh,540px);--work-card-gap:16px;--work-card-pad:24px;--work-icon-size:46px;--work-title-size:32px;--work-description-size:18px;height:auto!important;min-height:100svh!important;padding:120px 6vw 40px!important}
  #work .work-heading-row{position:relative;inset:auto;width:100%;margin:0 0 24px}
  #work .work-heading-row h2{font-size:clamp(28px,5.8vw,52px)!important;line-height:1.08!important}
  #work .all-projects-button{position:relative;inset:auto;min-width:0;min-height:46px;margin:18px 0 0;padding:12px 20px;font-size:12px;gap:22px}
  #work #workRail{position:relative;inset:auto;width:calc(100% + 2 * var(--work-rail-gutter));height:var(--work-card-height);margin:0 calc(-1 * var(--work-rail-gutter))!important;padding:0 var(--work-rail-gutter)}
  #work #workRail>.project{border-radius:20px}
  #work #workRail .project small{font-size:13px;margin-bottom:12px}
  #work #workRail .project h3{margin-bottom:14px}
  #work #workRail .work-card-open{right:22px;bottom:22px}
  #work .work-slider-control{position:relative;inset:auto;width:100%;height:44px;margin-top:24px!important;gap:14px}
  #work .work-scrollbar{height:30px}
  #work .work-scrollbar-thumb{width:18%;height:3px;left:calc(82% * var(--work-progress,0))}
  #work .work-navigation{gap:12px}
  #work .work-arrow{width:44px;height:44px;font-size:24px}
  #work .work-counter{font-size:12px;gap:8px}
}
@media(max-width:600px){
  #work.work-cinematic{--work-card-width:84vw;--work-card-height:520px;--work-card-pad:20px;--work-icon-size:44px;--work-title-size:26px;--work-description-size:16px;padding-top:104px!important}
  #work .work-heading-row h2{font-size:clamp(25px,6.1vw,36px)!important}
  #work #workRail .project small{font-size:11px}
  #work #workRail .work-card-open{right:18px;bottom:18px}
}
@media(prefers-reduced-motion:reduce){#work #workRail .work-card-open{transition:none}}
/* Drag and touch gestures move freely instead of snapping back to a card. */
#work #workRail{scroll-snap-type:none}
/* Let the browser own touch panning and inertia, including diagonal gestures. */
#work #workRail{touch-action:auto;-webkit-overflow-scrolling:touch;overflow-anchor:none}
#work #workRail .project-cover{-webkit-user-drag:none;user-select:none}
#work .work-scrollbar{cursor:ew-resize;touch-action:none;min-height:40px}
#work .work-scrollbar:focus-visible{outline:2px solid #b2aaff;outline-offset:3px;border-radius:6px}
/* The readable description and circle share one naturally sized bottom row. */
#work #workRail .project-card-footer{display:grid;grid-template-columns:minmax(0,1fr) var(--work-icon-size);align-items:center;gap:calc(22 * var(--work-u));min-height:var(--work-icon-size)}
#work #workRail .project-card-footer .work-project-description{max-width:none}
#work #workRail .project-card-footer .work-card-open{position:static;inset:auto}