/* A curved film strip, based on the user's Reelmark motion reference. */
.curved-works{padding:110px 0 76px;overflow:hidden;background:#09090b}
.works-intro{position:relative;text-align:center}
.works-kicker{font-size:10px;line-height:1.5;letter-spacing:.5em;color:#aaa9a5;margin-bottom:22px;padding-left:.5em}
.curved-works h2{font-size:clamp(44px,4.4vw,66px);font-weight:600;line-height:1.17;letter-spacing:-.065em}
.works-description{font-size:14px;line-height:1.8;letter-spacing:.04em;color:#aaa9a5;margin-top:20px}
.curved-works .work-filters{justify-content:center;gap:42px;border:0;margin:26px 0 0;overflow:visible}
.curved-works .filter-button{font-size:12px;line-height:1.5;padding:12px 0 11px;gap:7px;color:#939391;border-bottom-width:1px;margin:0}
.curved-works .filter-button span{font-size:9px}
.curved-works .filter-button.selected{color:#f5f4f1}
.reel-note{position:absolute;right:0;bottom:32px;display:flex;align-items:center;gap:10px;color:#8b8b89;pointer-events:none;transform:rotate(-12deg)}
.reel-note i{font-family:var(--display);font-size:23px;white-space:nowrap;font-weight:400}
.reel-note svg{transform:rotate(12deg) translateY(17px)}
.curved-portfolio{margin-top:13px}
.reel-viewport{position:relative;width:100%;height:420px;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate}
.reel-viewport[data-dragging="true"]{cursor:grabbing}
.reel-viewport:focus-visible{outline:1px solid #a4bfdf;outline-offset:-9px}
.reel-stage{position:relative;transform-origin:0 0}
.reel-card{position:absolute;left:0;top:0;width:170px;height:280px;display:block;padding:0;overflow:hidden;border-radius:15px;background:#141416;text-align:left;cursor:inherit;will-change:transform;isolation:isolate}
.reel-media,.reel-media>img,.reel-media>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.reel-media>img{z-index:0}
.reel-media>video{z-index:1;opacity:0;transition:opacity .35s}
.reel-media>video.is-ready{opacity:1}
.reel-card-shade{position:absolute;inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4) 65%,rgba(0,0,0,.78));pointer-events:none;z-index:2}
.reel-card-caption{position:absolute;left:13px;right:11px;bottom:28px;display:flex;align-items:center;gap:10px;z-index:3;pointer-events:none}
.reel-card-play{width:29px;height:29px;border:1px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(15,15,17,.2);backdrop-filter:blur(6px);transition:background .2s}
.reel-card-play svg{margin-left:1px}
.reel-card-copy{min-width:0}
.reel-card-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0}
.reel-card-copy small{display:block;font-size:9px;color:rgba(255,255,255,.65);line-height:1.5;margin-top:3px}
.reel-card:hover .reel-card-play{background:rgba(245,244,241,.22)}
.reel-toolbar{margin-top:13px;display:flex;justify-content:center;align-items:center;gap:30px;min-height:42px}
.reel-browse-controls{display:flex;align-items:center;gap:20px}
.reel-round{width:34px;height:34px;border:1px solid rgba(245,244,241,.55);border-radius:50%;display:grid;place-items:center;padding:0;flex:0 0 auto;transition:background .2s,border-color .2s}
.reel-round:hover{background:rgba(255,255,255,.1);border-color:#fff}
.reel-hint{font-size:11px;color:#8e8e8d;letter-spacing:.04em;white-space:nowrap}
.reel-auto-toggle{margin-left:2px}
.reel-catalog-toggle{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;line-height:1.5;padding:8px 0;border-bottom:1px solid rgba(245,244,241,.55);white-space:nowrap}
.reel-catalog-toggle:hover{color:#fff;border-color:#fff}
.works-catalog{margin-top:50px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}
.catalog-work{display:flex;align-items:center;gap:12px;min-width:0;text-align:left;padding:18px 0;border-top:1px solid var(--line)}
.catalog-number{font-family:var(--display);font-size:12px;color:var(--muted);flex:0 0 18px}
.catalog-work>img{width:42px;height:56px;object-fit:cover;flex:0 0 auto;border-radius:2px}
.catalog-work>span:not(.catalog-number){min-width:0;flex:1}
.catalog-work strong{font-size:13px;font-weight:400;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.catalog-work small{font-size:9px;color:var(--muted);display:block;margin-top:7px}
.catalog-work>svg{flex:0 0 auto;color:var(--muted);transition:transform .2s}
.catalog-work:hover>svg{transform:translate(2px,-2px);color:#fff}
@media(min-width:1800px){.curved-portfolio{max-width:1920px;margin-inline:auto}}
@media(max-width:1150px){.reel-note{right:-25px;bottom:65px;gap:0}.reel-note i{font-size:20px}.reel-note svg{width:48px}.works-catalog{column-gap:24px}}
@media(max-width:820px){
  .curved-works{padding:110px 0 62px}
  .curved-works h2{font-size:clamp(40px,6vw,54px);line-height:1.22}
  .works-kicker{font-size:9px;letter-spacing:.4em;margin-bottom:20px}
  .works-description{font-size:12px;margin-top:18px;letter-spacing:0}
  .curved-works .work-filters{gap:25px;margin-top:20px;overflow-x:auto;justify-content:center;scrollbar-width:none}
  .curved-works .filter-button{font-size:10px;gap:5px;padding:12px 0 10px}
  .curved-works .filter-button span{font-size:8px}
  .reel-note{display:none}
  .curved-portfolio{margin-top:20px}
  .reel-toolbar{margin-top:20px;gap:20px;flex-direction:column}
  .reel-browse-controls{gap:18px}
  .reel-round{width:32px;height:32px}
  .reel-hint{font-size:10px}
  .reel-card-copy strong{font-size:17px;line-height:1.4}
  .reel-card-copy small{font-size:12px}
  .reel-card-play{width:35px;height:35px}
  .reel-card-play svg{width:16px;height:16px}
  .reel-catalog-toggle{font-size:11px}
  .works-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:32px}
}
@media(max-width:480px){
  .curved-works{padding-top:108px}
  .works-intro.container{width:calc(100% - 32px)}
  .curved-works .work-filters{gap:23px}
  .reel-toolbar{margin-top:26px}
  .works-catalog{grid-template-columns:1fr}
  .catalog-work{padding:15px 0}
}
@media(max-width:359px){.curved-works .work-filters{gap:17px}.works-description{font-size:11px}.reel-browse-controls{gap:15px}.reel-hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){.reel-card,.reel-media>video,.reel-round,.catalog-work>svg{transition:none}}