:root{--text:#756363;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#ff3b3b;--accent-bg:#ff3b3b1a;--accent-border:#ff3b3b80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:18px/145% TheBattleCont,Permanent Marker,cursive}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#1d1616;--border:#3a2e2e;--code-bg:#281f1f;--accent:#fc8484;--accent-bg:#fc848426;--accent-border:#fc848480;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;display:flex}h1,h2{color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}@font-face{font-family:TheBattleCont;src:url(../TheBattleCont.ttf)format("truetype");font-display:swap}:root{--paper:#a8a8a8;--ink:#141414;--stage:#000;--stage-ink:#fff;--marker:"Permanent Marker", "Comic Sans MS", cursive;--hand:"Caveat", "Comic Sans MS", cursive;--battle:"TheBattleCont", "Permanent Marker", cursive}*{box-sizing:border-box}button,input,select,textarea{font:inherit}html,body{height:100%;margin:0}html{background:var(--paper)}body{color:var(--ink);font-family:var(--battle);background:0 0;flex-direction:column;min-height:100%;display:flex}.bg-video{object-fit:cover;z-index:-2;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}body:before{content:"";z-index:-1;pointer-events:none;background:#00000059;position:fixed;inset:0}.topbar{z-index:2;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vh,48px) clamp(36px,5vw,80px) 0;display:grid;position:relative}.nav-left{grid-column:1;justify-self:start;align-items:start;gap:16px;display:flex}.nav-right{grid-column:3;justify-self:end;align-items:start;gap:16px;display:flex}.logo{grid-column:2;justify-self:center;margin:0;line-height:0;transform:rotate(-1.5deg)}.logo-btn{cursor:pointer;background:0 0;border:none;padding:0;line-height:0}.logo-img{filter:invert()drop-shadow(3px 4px 4px #00000073);width:auto;height:clamp(90px,12vw,170px);display:block}.nav-btn{color:#fff;cursor:pointer;filter:url(#sketch);background:0 0;border:4px solid #fff;border-radius:16px 12px 18px 10px;padding:10px 28px 8px;font-size:clamp(1.5rem,3.4vw,2.3rem);text-decoration:none;transition:transform .12s,background .12s;display:inline-block;transform:rotate(-2deg)}.nav-btn:nth-child(2){transform:rotate(1.5deg)}.nav-btn:hover,.nav-btn:focus-visible{background:#ffffff1a;transform:rotate(-2deg)scale(1.06)}.stage{flex:1;justify-content:center;align-items:center;gap:clamp(20px,4vw,70px);padding:clamp(40px,7vh,100px) 16px clamp(48px,8vh,110px);display:flex}.frame{aspect-ratio:16/10;width:min(54vw,1250px);margin:0;display:block;position:relative}.frame:after{content:"";pointer-events:none;z-index:3;filter:invert();background:url(../slideshowborder6.svg) 50%/100% 100% no-repeat;position:absolute;inset:-6%}.slides{background:var(--stage);border-radius:6px;position:absolute;inset:18%;overflow:hidden}.slide{opacity:0;background-position:50%;background-size:cover;place-items:center;transition:opacity .45s;display:grid;position:absolute;inset:0}.slide.is-active{opacity:1}.video-embed{border:0;width:100%;height:100%;position:absolute;inset:0}.slide__title{font-family:var(--battle);color:var(--stage-ink);text-align:center;text-transform:uppercase;padding:0 14px;font-size:clamp(1.6rem,4.4vw,3.6rem);line-height:1.05}.counter{z-index:4;color:var(--stage-ink);opacity:.85;font-size:1.1rem;position:absolute;bottom:20%;left:50%;transform:translate(-50%)}.arrow{cursor:pointer;color:#fff;filter:drop-shadow(2px 3px 3px #0006);background:0 0;border:none;flex:none;width:clamp(73px,8.7vw,120px);padding:0;transition:transform .12s}.arrow svg{fill:currentColor;width:100%;height:auto;display:block}.arrow:hover,.arrow:focus-visible{transform:scale(1.12)}.arrow:active{transform:scale(.94)}.overlay{z-index:20;background:#a8a8a8f5;padding:28px;display:none;position:fixed;inset:0;overflow:auto}.overlay.is-open{display:block}.overlay__head{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.overlay__title{margin:0;font-size:clamp(1.6rem,4vw,2.6rem)}.overlay__close{cursor:pointer;color:#fff;filter:url(#sketch);background:0 0;border:3px solid #fff;border-radius:12px 8px 14px 9px;padding:2px 14px;font-size:1.4rem}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;display:grid}.thumb{aspect-ratio:16/10;cursor:pointer;filter:url(#sketch);background:#000;border:none;border-radius:12px;padding:0;text-decoration:none;transition:transform .12s;position:relative;overflow:hidden}.thumb:hover,.thumb:focus-visible{transform:rotate(-1deg)scale(1.04)}.thumb span{text-align:left;color:#fff;font-size:.95rem;position:absolute;inset:auto 8px 6px}.lightbox{z-index:30;background:#000000eb;justify-content:center;align-items:center;gap:clamp(8px,2vw,40px);padding:clamp(16px,4vw,60px);display:flex;position:fixed;inset:0}.lightbox__close{z-index:2;padding:6px 18px 4px;font-size:clamp(1rem,2vw,1.4rem);position:absolute;top:clamp(16px,3vh,32px);right:clamp(16px,3vw,40px)}.lightbox__figure{flex-direction:column;align-items:center;gap:14px;max-width:84vw;max-height:86vh;margin:0;display:flex}.lightbox__img{object-fit:contain;border-radius:6px;width:auto;max-width:84vw;height:auto;max-height:78vh;box-shadow:0 10px 40px #0009}.lightbox__caption{color:#fff;text-align:center;font-size:clamp(1rem,2vw,1.4rem)}.lightbox__arrow{flex:none;width:clamp(56px,7vw,100px)}.page{z-index:1;color:#fff;flex:1;width:min(1100px,90vw);margin:0 auto;padding:clamp(24px,4vh,56px) 16px clamp(48px,8vh,110px);animation:.45s both page-fade;position:relative}@keyframes page-fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-bg-video{object-fit:cover;z-index:0;pointer-events:none;filter:brightness(.45);width:100%;height:100%;animation:.6s both bg-fade;position:fixed;inset:0}@keyframes bg-fade{0%{opacity:0}to{opacity:1}}.page__title{color:#fff;text-align:center;margin:0 0 20px;font-size:clamp(2rem,5vw,3.4rem);transform:rotate(-1deg)}.page__desc{color:#eee;max-width:70ch;margin:0 0 28px;font-family:Roboto,system-ui,sans-serif;font-size:clamp(1rem,2vw,1.3rem);line-height:1.5}.back-btn{align-items:center;gap:10px;margin-bottom:20px;padding:6px 18px 4px;font-size:clamp(1rem,2vw,1.3rem);display:inline-flex}.back-arrow{fill:currentColor;flex:none;width:1.1em;height:1.1em}.project-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;display:grid}.project-card{text-align:center;cursor:pointer;color:#fff;filter:url(#sketch);background:#00000059;border:3px solid #fff;border-radius:16px 10px 18px 12px;flex-direction:column;align-items:stretch;gap:8px;padding:12px;transition:transform .12s,background .12s;display:flex}.project-card:hover,.project-card:focus-visible{background:#00000080;transform:rotate(-1deg)scale(1.03)}.project-card__thumb{aspect-ratio:16/10;border-radius:10px;display:block;background-position:50%!important;background-size:cover!important}.project-card__title{font-size:clamp(1.2rem,2.4vw,1.7rem)}.project-card__blurb{color:#ccc;font-size:.95rem}@media (width<=620px){.frame{width:86vw}.stage{padding-bottom:28px;position:relative}.arrow{z-index:5;width:42px;position:absolute;top:50%;transform:translateY(-50%)}.arrow--prev{left:6px}.arrow--next{right:6px}.arrow:hover,.arrow:focus-visible{transform:translateY(-50%)scale(1.12)}}@media (prefers-reduced-motion:reduce){.slide,.btn-gallery,.arrow,.thumb{transition:none}}
