@font-face{font-family:Anton;src:url('assets/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Spencer Gabor reference: centered condensed headings, tilted featured art,
   generous three-column gallery. Native web-screen proportions are retained. */
.spencer-portfolio{background:#fff;padding:96px 0 80px;overflow:clip;color:#333}
.work-section-title{text-align:center;padding:0 24px}
.work-section-title h2{font-family:Anton,Impact,sans-serif;font-size:72px;font-weight:400;line-height:1.1;letter-spacing:-2px;text-transform:uppercase;margin:0}
.work-section-title p{font-size:17px;line-height:1.8;color:#555;margin:14px 0 0;word-break:keep-all}
.featured-work{max-width:1440px;padding:0 72px;margin:100px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:160px;align-items:center;min-height:400px}
.featured-piece{min-width:0;animation:featured-drift var(--float-time) ease-in-out var(--float-delay) infinite alternate;transform:rotate(var(--angle))}
.project-tile{display:block;text-align:center;outline-offset:12px}
.tile-art{border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:#f0f0ed;box-shadow:0 34px 35px -26px #0003;transition:box-shadow .25s,transform .3s cubic-bezier(.23,1,.32,1)}
.tile-art img{display:block;width:100%;height:100%;object-fit:contain}
.featured-piece .tile-art{box-shadow:0 18px 30px -24px #0003}
.project-label{font-family:Anton,Pretendard,sans-serif;font-weight:400;font-size:16px;letter-spacing:0;line-height:1.4;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#ededed;border-radius:99px;padding:12px 26px;margin-top:28px;color:#575757;transition:color .2s,background .2s}
.project-label>span{font-family:Pretendard,sans-serif;font-size:15px}
.more-work-section{max-width:1240px;margin:164px auto 0;padding:0 48px}
.more-work-grid{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:80px 72px;align-items:start}
.more-piece{min-width:0;animation:more-drift var(--float-time) ease-in-out var(--float-delay) infinite alternate}
.more-piece:nth-child(3n+2){padding-top:26px}.more-piece:nth-child(3n){padding-top:8px}
.more-piece .tile-art{border-radius:14px}.more-piece .project-label{font-family:Pretendard,sans-serif;font-size:12px;font-weight:550;padding:10px 16px;background:transparent;margin-top:12px;min-height:44px;gap:12px}
.portfolio-note{max-width:1000px;margin:96px auto 0;padding:0 24px;text-align:center;font-size:11px;line-height:1.9;color:#777;word-break:keep-all}
@keyframes featured-drift{from{transform:translateY(-10px) rotate(var(--angle))}to{transform:translateY(12px) rotate(calc(var(--angle) + 1.5deg))}}
@keyframes more-drift{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
.showcase-paused .featured-piece,.showcase-paused .more-piece,.featured-piece:focus-within,.more-piece:focus-within{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.featured-piece:hover,.more-piece:hover{animation-play-state:paused}.project-tile:hover .tile-art{transform:translateY(-5px);box-shadow:0 38px 38px -26px #0004}.project-tile:hover .project-label{background:#e4e9e5;color:#163e2a}}
@media(max-width:1100px){.work-section-title h2{font-size:64px}.featured-work{gap:96px;padding:0 56px;min-height:320px}.more-work-section{padding:0 40px}.more-work-grid{gap:64px 44px}}
@media(max-width:760px){.spencer-portfolio{padding:64px 0}.work-section-title h2{font-size:48px;letter-spacing:-1px}.work-section-title p{font-size:13px;margin-top:12px}.featured-work{padding:0 32px;gap:40px;min-height:0;margin-top:64px}.tile-art{border-radius:10px}.project-label{font-size:13px;min-height:44px;padding:10px 18px;margin-top:22px;gap:10px}.more-work-section{margin-top:96px;padding:0 28px}.more-work-grid{margin-top:44px;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.more-piece:nth-child(3n+2),.more-piece:nth-child(3n){padding-top:0}.more-piece:nth-child(even){padding-top:24px}.more-piece .tile-art{border-radius:10px}.more-piece .project-label{font-size:10px;padding:8px 0;gap:6px;margin-top:8px}.more-piece .project-label>span{font-size:12px}.portfolio-note{margin-top:64px;font-size:10px}}
@media(max-width:480px){.featured-work{grid-template-columns:1fr;gap:56px;padding:0 44px;margin-top:56px}.featured-piece:nth-child(2){margin-top:4px}.more-work-section{margin-top:84px;padding:0 24px}.work-section-title h2{font-size:44px}.more-work-grid{gap:32px 20px}}
@media(prefers-reduced-motion:reduce){.featured-piece,.more-piece{animation:none!important}.tile-art{transition:none}.featured-piece{transform:rotate(var(--angle))}.more-piece{transform:none}}

/* Gesture carousel: centered web screenshots, visible neighboring cards. */
.featured-carousel{--card-width:min(60vw,800px);margin-top:36px}
.featured-work{position:relative;display:flex;gap:96px;max-width:none;min-height:0;margin:0;padding:64px calc((100% - var(--card-width))/2) 52px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.featured-work::-webkit-scrollbar{display:none}
.featured-slide{flex:0 0 var(--card-width);min-width:0;scroll-snap-align:center}
.featured-slide .featured-piece{--angle:0deg!important;animation:none;transform:rotate(var(--slide-tilt,0deg)) scale(var(--slide-scale,1));transform-origin:50% 60%;margin:0}
.featured-slide .project-tile{user-select:none;-webkit-user-select:none}
.featured-slide img{-webkit-user-drag:none;pointer-events:none}
.featured-work.is-manipulating{scroll-snap-type:none}
.featured-work.is-dragging{cursor:grabbing}
.featured-work.is-dragging .project-tile{pointer-events:none}
.featured-work.is-dragging .featured-piece{animation-play-state:paused}
.featured-controls{max-width:1100px;padding:0 40px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.featured-hint{font-size:10px;font-weight:650;letter-spacing:2px;color:#777;margin:0}
.featured-hint span{display:block;font-size:12px;font-weight:400;letter-spacing:0;margin-top:8px;color:#999}
.featured-navigation{display:flex;align-items:center;gap:20px}
.featured-navigation button{width:48px;height:48px;border:1px solid #ddd;background:#fff;border-radius:50%;font:24px/1 Arial,sans-serif;color:#333;cursor:pointer;transition:background .2s,transform .2s}
.featured-navigation button:active{transform:scale(.92)}
.featured-navigation button:disabled{color:#bbb;cursor:default;border-color:#eee}
.featured-navigation button:not(:disabled):hover{background:#eef3ef}
#featured-position{font-size:12px;font-variant-numeric:tabular-nums;color:#666;min-width:50px;text-align:center}
.featured-work:focus-visible{outline:2px solid #397550;outline-offset:-4px}
.more-work-section{margin-top:120px}
.project-tile{transform-origin:50% 65%}
.showcase-paused .featured-slide .featured-piece{animation-play-state:paused}
@media(max-width:1100px){.featured-work{gap:72px}.featured-carousel{--card-width:68vw}}
@media(max-width:760px){.featured-carousel{--card-width:76vw;margin-top:24px}.featured-work{gap:24px;padding-top:40px;padding-bottom:40px}.featured-controls{padding:0 24px}.featured-hint{font-size:9px;letter-spacing:1px}.featured-hint span{font-size:10px}.featured-navigation{gap:12px}.featured-navigation button{width:44px;height:44px}.more-work-section{margin-top:84px}.featured-slide .project-label{margin-top:22px}}
@media(max-width:380px){.featured-hint span{display:none}.featured-navigation{gap:8px}.featured-controls{gap:12px}}
@media(prefers-reduced-motion:reduce){.featured-slide .featured-piece{animation:none!important;transform:none}.featured-navigation button{transition:none}}

/* Entrance and carousel movement remain on separate, stable geometry. */
.more-piece{animation-duration:12s}
@keyframes more-drift{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
.featured-slide .project-tile:hover .tile-art{transform:none}

/* Approved square portfolio thumbnails and service-focused captions. */
.tile-art{aspect-ratio:1/1}.project-label{font-family:Pretendard,sans-serif;word-break:keep-all;max-width:100%;text-align:center}.more-piece .project-label{font-size:13px}