/* Selected work — hover-preview list + full-screen project pop-out. */
#projects{position:relative}
.sc-list{border-bottom:1px solid #e6e6e6}
.sc-row{display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:24px;width:100%;padding:26px 6px;border:0;border-top:1px solid #e6e6e6;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:padding-left 300ms var(--ease-out),color 200ms ease}
.sc-row .sc-meta{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--muted);transition:color 200ms ease}
.sc-row .sc-name{font-size:clamp(28px,4.2vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1;transition:color 200ms ease}
.sc-row .sc-go{font-size:clamp(28px,4.2vw,54px);line-height:1;color:var(--muted);text-align:right;transition:color 200ms ease,transform 300ms var(--ease-out)}
.sc-row:focus-visible{outline:2px solid var(--orange);outline-offset:-4px;border-radius:12px}
@media(hover:hover) and (pointer:fine){
 .sc-row:hover{padding-left:22px}
 .sc-row:hover .sc-name,.sc-row:hover .sc-go,.sc-row:hover .sc-meta{color:var(--orange)}
 .sc-row:hover .sc-go{transform:translate(4px,-4px)}
}

/* cursor-following preview */
.sc-preview{position:fixed;left:0;top:0;width:280px;z-index:40;pointer-events:none;opacity:0;border-radius:10px;overflow:hidden;box-shadow:0 18px 44px #00000038;transform:translate3d(-9999px,-9999px,0) rotate(-5deg);transition:opacity 200ms var(--ease-out)}
.sc-preview.is-on{opacity:1}
.sc-preview .sc-ph{height:186px}
.sc-preview .sc-chip{position:absolute;left:14px;bottom:14px;background:#fff;color:#080808;font-size:11px;font-weight:700;letter-spacing:.02em;padding:8px 11px;border-radius:5px}

/* flat image placeholder */
.sc-ph{position:relative;overflow:hidden;background:var(--ph,#cfd4c8);display:grid;place-content:center}
.sc-ph:before{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:#00000014}
.sc-ph:after{content:'';position:absolute;right:-6%;bottom:0;width:52%;height:66%;background:#0000001a;border-radius:46% 46% 0 0}
.sc-ph span{position:relative;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#ffffffd9}

/* pop-out */
.sc-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:3vh 3vw}
.sc-modal[hidden]{display:none}
.sc-scrim{position:absolute;inset:0;background:#080808;opacity:0;transition:opacity 280ms var(--ease-out)}
.sc-modal.is-open .sc-scrim{opacity:.72}
.sc-panel{position:relative;width:min(1180px,94vw);height:94vh;background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(22px) scale(.985);transition:opacity 300ms var(--ease-out),transform 380ms var(--ease-out)}
.sc-modal.is-open .sc-panel{opacity:1;transform:none}
.sc-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:#fff;border-bottom:1px solid #e6e6e6;flex-shrink:0}
.sc-bar p{margin:0;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.07em;color:var(--muted)}
.sc-close{width:40px;height:40px;border:0;border-radius:50%;background:var(--orange);color:#000;font-size:19px;line-height:1;display:grid;place-items:center;flex-shrink:0}
.sc-close:hover{transform:scale(1.06)}
.sc-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1}
.sc-hero{--ph:#cfd4c8;height:min(52vh,460px)}
.sc-hero span{font-size:12px}
.sc-body{padding:36px 48px 60px;max-width:1000px}
.sc-pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;background:var(--surface);color:#4a4a4a;padding:7px 12px;border-radius:5px}
.sc-body h3{font-size:clamp(32px,4.4vw,62px);font-weight:700;letter-spacing:-.035em;line-height:1;margin:16px 0 18px}
.sc-lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#3d3d3d;max-width:62ch;margin:0}
.sc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin:34px 0;padding:24px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.sc-facts div{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.sc-facts b{display:block;font-family:Archivo,Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#080808;margin-top:7px}
.sc-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;margin-top:8px}
.sc-cols h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.sc-cols p{margin:0 0 16px;line-height:1.65;color:#4a4a4a;font-size:16px}
.sc-cols ul{list-style:none;margin:0;padding:0}
.sc-cols li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid #ededed;font-size:16px;font-weight:600;letter-spacing:-.01em}
.sc-cols li i{font-style:normal;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:12px;color:var(--orange);width:20px;flex-shrink:0}
.sc-shot{--ph:#d6d2c9;height:min(46vh,400px);border-radius:16px;margin-top:44px}
.sc-next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid #e6e6e6}
.sc-next p{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.sc-next a{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em}
.sc-next a:hover{color:var(--orange)}
.sc-image{overflow:hidden;background:#f3f3f1}
.sc-image img{display:block;width:100%;height:100%;object-fit:contain}
.sc-image.sc-hero{height:auto;aspect-ratio:1672/941}
.sc-image.sc-shot{height:auto;aspect-ratio:4/3}
.sc-preview-image{height:186px}
.sc-visit{display:inline-block;margin-top:26px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.sc-visit:hover{color:var(--orange)}
.sc-image-note{margin:12px 0 0;font-size:12px;color:#737373;line-height:1.5}

@media(max-width:800px){
 .sc-row{grid-template-columns:1fr auto;gap:6px 14px;padding:20px 4px}
 .sc-row .sc-meta{grid-column:1/-1}
 .sc-panel{width:100%;height:100%;border-radius:16px}
 .sc-modal{padding:0}
 .sc-body{padding:26px 22px 48px}
 .sc-cols{grid-template-columns:1fr;gap:26px}
 .sc-hero{height:34vh}
 .sc-preview{display:none}
}
@media(prefers-reduced-motion:reduce){
 .sc-row,.sc-preview,.sc-panel,.sc-scrim,.sc-row .sc-go{transition:none}
 .sc-panel{transform:none}
}

/* Before & after pair */
.sc-compare{margin-top:44px}
.sc-compare h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin:0 0 16px}
.sc-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-compare figure{margin:0}
.sc-compare img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #e6e6e6;background:#f3f3f1}
.sc-compare figcaption{margin-top:9px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--muted)}

/* Long screenshot that scrolls on hover */
.sc-scrolls{margin-top:44px}
.sc-scrolls h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.sc-scrolls-hint{margin:0 0 16px;font-size:13px;color:#8a8a8a}
.sc-scrolls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.sc-scroller{margin:0}
.sc-scroller-frame{display:block;position:relative;overflow:hidden;border-radius:10px;border:1px solid #e6e6e6;background:#f3f3f1;aspect-ratio:1/.62}
.sc-scroller-frame img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 600ms var(--ease-out)}
.sc-scroller figcaption{margin-top:9px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.sc-scroller:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
@media(hover:hover) and (pointer:fine){
 .sc-scroller:hover .sc-scroller-frame img{transform:translateY(calc(-1 * var(--travel)));transition:transform var(--dur) linear}
}
.sc-scroller:focus-visible .sc-scroller-frame img{transform:translateY(calc(-1 * var(--travel)));transition:transform var(--dur) linear}

@media(max-width:800px){
 .sc-compare-pair{grid-template-columns:1fr;gap:22px}
 .sc-scrolls-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 .sc-scroller-frame img,.sc-scroller:hover .sc-scroller-frame img,.sc-scroller:focus-visible .sc-scroller-frame img{transition:none;transform:none}
}
.sc-clip{margin:0}
.sc-clip .sc-scroller-frame{display:block;position:relative;overflow:hidden;border-radius:10px;border:1px solid #e6e6e6;background:#f3f3f1;aspect-ratio:1/.62}
.sc-clip video{display:block;width:100%;height:100%;object-fit:cover}
.sc-clip figcaption{margin-top:9px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.sc-clip:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
.sc-clip .sc-scroller-frame{position:relative}
.sc-clip-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:#fff;background:#0d0d0dcc;padding:8px 14px;border-radius:30px;pointer-events:none}
.sc-clip.is-loading .sc-clip-loading{display:block}