/* Shared showreel: opt-in component, isolated from existing portfolio styles. */
.portfolio-reel{--reel-bg:#0d100e;--reel-ink:#f7f8f2;--reel-muted:#adb5ac;--reel-line:#ffffff26;--reel-accent:#baff19;color:var(--reel-ink);width:min(1500px,calc(100% - 2 * clamp(22px,4vw,74px)));margin:clamp(50px,7vw,112px) auto;padding:32px 0;border-top:1px solid var(--reel-line);scroll-margin-top:100px}
.portfolio-reel.reel-paper{--reel-bg:#f7f6f2;--reel-ink:#202b25;--reel-muted:#6d776a;--reel-line:#202b2528;--reel-accent:#244cdb;max-width:1500px}
.portfolio-reel .reel-overline{display:flex;justify-content:space-between;gap:18px;font:11px/1.6 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--reel-muted);margin:0 0 28px}
.portfolio-reel .reel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:28px}
.portfolio-reel h2{font-size:clamp(28px,3.6vw,60px);letter-spacing:-.055em;line-height:1.25;font-weight:500;margin:0;color:var(--reel-ink)}
.portfolio-reel .reel-heading p{font-size:13px;line-height:1.9;max-width:320px;color:var(--reel-muted);margin:0}
.portfolio-reel .reel-screen{position:relative;isolation:isolate;background:#151020;aspect-ratio:16/9;border:1px solid var(--reel-line);overflow:hidden;border-radius:8px}
.portfolio-reel.reel-paper .reel-screen{border-radius:2px;box-shadow:0 24px 65px #202b2510}
.portfolio-reel video{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:#151020}
.portfolio-reel .reel-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--reel-line)}
.portfolio-reel .reel-meta{display:flex;gap:18px;align-items:center;color:var(--reel-muted);font:10px/1.7 var(--mono,monospace);letter-spacing:.05em;flex-wrap:wrap}
.portfolio-reel .reel-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--reel-accent);margin-right:7px}
.portfolio-reel .reel-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.portfolio-reel .reel-toggle{border:1px solid var(--reel-line);border-radius:100px;background:transparent;color:var(--reel-ink);font-family:inherit;font-size:12px;line-height:1.5;padding:9px 18px;cursor:pointer;min-height:40px;transition:background .2s,color .2s}
.portfolio-reel .reel-toggle:hover{background:var(--reel-ink);color:var(--reel-bg)}
.portfolio-reel .reel-link{font-size:11px;color:var(--reel-muted);text-decoration:none;border-bottom:1px solid var(--reel-line);padding:6px 0}
.portfolio-reel :is(button,a,video):focus-visible{outline:2px solid var(--reel-accent);outline-offset:5px}
.portfolio-reel .reel-error{padding:20px;color:var(--reel-ink);font-size:13px}
@media(max-width:700px){.portfolio-reel{margin-block:45px;padding-top:20px}.portfolio-reel .reel-overline{font-size:8px;letter-spacing:.06em;margin-bottom:20px}.portfolio-reel .reel-heading{display:block;margin-bottom:20px}.portfolio-reel .reel-heading p{font-size:11px;max-width:100%;margin-top:12px}.portfolio-reel .reel-footer{gap:15px;align-items:flex-start;flex-direction:column}.portfolio-reel .reel-meta{font-size:8px;gap:12px}.portfolio-reel .reel-actions{width:100%;justify-content:space-between}.portfolio-reel .reel-toggle{font-size:11px}.portfolio-reel .reel-link{font-size:10px}.portfolio-reel .reel-screen{border-radius:3px}}
@media(prefers-reduced-motion:reduce){.portfolio-reel *{transition:none!important}}

.portfolio-reel h2{text-wrap:balance}