:root{--color-stage:oklch(5% .008 248);--color-stage-2:oklch(8% .012 248);--color-panel:oklch(13% .018 248);--color-panel-2:oklch(18% .02 248);--color-ink:oklch(96% .01 248);--color-muted:oklch(74% .018 248);--color-faint:oklch(53% .02 248);--color-rule:oklch(100% .01 248/.16);--color-accent:oklch(76% .17 225);--color-accent-cool:oklch(87% .12 190);--color-accent-ink:oklch(7% .012 248);--font-display:"Arial Black", "Archivo Black", Impact, sans-serif;--font-body:Inter, Arial, sans-serif;--font-mono:"Chivo Mono", Consolas, "Liberation Mono", monospace;--space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:8rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.83, 0, .17, 1);--dur-fast:.15s;--dur-mid:.26s;--dur-slow:.68s;--z-base:1;--z-canvas:0;--z-sticky-nav:300;--z-modal:700;--deploy-revision:20260700}*{box-sizing:border-box}html,body{background:var(--color-stage);min-height:100%;overflow-x:clip}html{color-scheme:dark;scroll-behavior:smooth}body{color:var(--color-ink);font-family:var(--font-body);text-rendering:geometricprecision;margin:0;line-height:1.5}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}img{max-width:100%;display:block}::selection{color:var(--color-accent-ink);background:var(--color-accent)}.skip-link{inset:var(--space-sm) auto auto var(--space-sm);z-index:var(--z-modal);padding:var(--space-xs) var(--space-sm);color:var(--color-accent-ink);background:var(--color-accent);position:fixed;transform:translateY(-140%)}.skip-link:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px;transform:translateY(0)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.rectangle-field{z-index:var(--z-canvas);pointer-events:none;opacity:.58;contain:strict;position:fixed;inset:0}.rectangle-field canvas{width:100%;height:100%}.site-shell{z-index:var(--z-base);width:min(100%,118rem);padding:var(--space-md) clamp(1rem, 3vw, 2.5rem) var(--space-lg);margin-inline:auto;position:relative}.site-nav{z-index:var(--z-sticky-nav);justify-content:space-between;align-items:center;gap:var(--space-md);min-height:3.25rem;padding-block:var(--space-sm);background:linear-gradient(180deg, var(--color-stage) 42%, oklch(5% .008 248/0));margin-block-end:clamp(3rem,7vw,6rem);display:flex;position:sticky;top:0}.site-nav__brand{color:var(--color-ink);text-decoration:none}.brand-mark{align-items:center;gap:var(--space-xs);min-width:0;color:var(--color-ink);display:inline-flex}.brand-mark__glyph{width:2.25rem;height:2.25rem;color:var(--color-ink);filter:drop-shadow(0 0 1.2rem oklch(76% .17 225/.18));flex:none}.brand-mark--compact .brand-mark__glyph{width:1.3rem;height:1.3rem}.brand-mark__frame{stroke:currentColor;stroke-width:3px;opacity:.82}.brand-mark__panel{fill:currentColor}.brand-mark__panel--dim{opacity:.58}.brand-mark__accent-panel{fill:var(--color-accent)}.brand-mark__trace,.brand-mark__corner{stroke:var(--color-accent-cool);stroke-linecap:square;stroke-linejoin:round}.brand-mark__trace{stroke-width:3.5px}.brand-mark__corner{stroke-width:2.5px}.brand-mark__word{min-width:0;font-family:var(--font-mono);letter-spacing:0;white-space:nowrap;align-items:baseline;font-size:.76rem;line-height:1;display:inline-flex}.brand-mark__word strong{font-weight:700}.brand-mark__word span{color:var(--color-muted)}.site-nav__meta{align-items:center;gap:var(--space-md);color:var(--color-muted);font-family:var(--font-mono);white-space:nowrap;font-size:.72rem;line-height:1;display:flex}.portfolio-hero{min-height:clamp(24rem,58vh,42rem);padding-block:var(--space-xl) clamp(4rem, 10vw, 9rem);grid-template-columns:minmax(0,1.4fr) minmax(18rem,.6fr);align-items:end;gap:clamp(1.5rem,5vw,7rem);display:grid}.portfolio-hero__copy{max-width:75ch}.portfolio-hero__kicker{margin:0 0 var(--space-md);color:var(--color-accent-cool);font-family:var(--font-mono);font-size:clamp(.78rem,1.2vw,.96rem)}.portfolio-hero h1{color:var(--color-ink);font-family:var(--font-display);letter-spacing:0;text-transform:uppercase;text-wrap:balance;margin:0;font-size:clamp(3.2rem,11.2vw,11.2rem);line-height:.95}.portfolio-hero h1 span,.site-footer__statement span{overflow-wrap:normal;min-width:0;display:block}.portfolio-hero__note{max-width:32rem;color:var(--color-muted);text-wrap:pretty;margin:0;font-size:clamp(1rem,1.3vw,1.2rem)}.filter-panel{gap:var(--space-md);grid-template-columns:auto minmax(0,1fr);align-items:start;margin-block-end:var(--space-xl);display:grid}.filter-panel__label{min-height:2.75rem;color:var(--color-faint);font-family:var(--font-mono);align-items:center;font-size:.74rem;display:flex}.filter-panel__controls{gap:var(--space-xs);flex-wrap:wrap;display:flex}.filter-button,.pager-button,.icon-button,.live-link{border:1px solid var(--color-rule);color:var(--color-ink);background:oklch(100% .01 248/.04)}.filter-button{min-height:2.75rem;padding:0 var(--space-sm);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-mono);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);font-size:.78rem}.filter-button:hover,.filter-button[aria-pressed=true]{color:var(--color-accent-ink);border-color:var(--color-accent);background:var(--color-accent)}.filter-button:focus-visible,.project-card__button:focus-visible,.icon-button:focus-visible,.pager-button:focus-visible,.live-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.filter-button:active,.pager-button:active,.icon-button:active,.live-link:active{transform:translateY(1px)}.filter-button:disabled,.pager-button:disabled,.icon-button:disabled{opacity:.55;cursor:not-allowed}.work-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;align-items:stretch;gap:clamp(.75rem,1.4vw,1.5rem);display:grid}.project-card{min-width:0;animation:card-rise var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms);grid-column:span 4}.project-card--0,.project-card--5,.project-card--10{grid-column:span 5}.project-card--1,.project-card--6{grid-column:span 3}.project-card--3,.project-card--8{grid-column:span 4}.project-card__button{border:1px solid var(--color-rule);border-radius:var(--radius-sm);width:100%;min-height:clamp(23rem,34vw,40rem);color:var(--color-ink);background:radial-gradient(circle at 50% 0%, oklch(100% .01 248/.08), transparent 40%), var(--color-stage-2);cursor:pointer;text-align:left;isolation:isolate;transition:border-color var(--dur-mid) var(--ease-out), background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);grid-template-rows:minmax(0,1fr) auto;padding:0;display:grid;position:relative;overflow:clip}.project-card__button:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(180deg, transparent 42%, oklch(0% .01 248/.82) 100%), linear-gradient(90deg, var(--project-accent), transparent 34%);opacity:.18;transition:opacity var(--dur-mid) var(--ease-out);position:absolute;inset:0}.project-card__button:hover,.project-card__button:focus-visible{border-color:color-mix(in oklch, var(--project-accent) 62%, var(--color-rule));transform:translateY(-.18rem)}.project-card__button:hover:after,.project-card__button:focus-visible:after{opacity:.34}.project-card__media{min-height:0;position:relative;overflow:clip}.project-card__media img{object-fit:cover;filter:saturate(.9)contrast(1.05);width:100%;height:100%;min-height:18rem;transition:filter var(--dur-mid) var(--ease-out)}.project-card__button:hover .project-card__media img,.project-card__button:focus-visible .project-card__media img{filter:saturate(1.08)contrast(1.08)}.project-card__content{z-index:2;gap:var(--space-xs);padding:var(--space-md);background:linear-gradient(oklch(5% .008 248/0),oklch(5% .008 248/.9));display:grid;position:relative}.project-card__meta,.preview-dialog__meta{color:var(--color-muted);font-family:var(--font-mono);margin:0;font-size:.72rem}.project-card__title{justify-content:space-between;align-items:center;gap:var(--space-md);color:var(--color-ink);font-family:var(--font-display);letter-spacing:0;text-transform:uppercase;overflow-wrap:normal;font-size:clamp(1.45rem,2.1vw,2.8rem);line-height:.98;display:flex}.project-card__summary{max-width:58ch;color:var(--color-muted);font-size:.95rem}.preview-layer{z-index:var(--z-modal);backdrop-filter:blur(16px);animation:layer-in var(--dur-mid) var(--ease-out) both;background:oklch(0% .01 248/.82);place-items:center;padding:clamp(.75rem,2vw,2rem);display:grid;position:fixed;inset:0}.preview-dialog{border:1px solid color-mix(in oklch, var(--project-accent) 48%, var(--color-rule));border-radius:var(--radius-lg);background:var(--color-panel);width:min(96vw,92rem);max-height:min(92vh,56rem);color:var(--color-ink);grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:clip}.preview-dialog__chrome,.preview-dialog__pager{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-md);display:flex}.preview-dialog__chrome{border-bottom:1px solid var(--color-rule)}.preview-dialog h2{margin:var(--space-3xs) 0 0;color:var(--color-ink);font-family:var(--font-display);letter-spacing:0;text-transform:uppercase;overflow-wrap:anywhere;font-size:clamp(1.6rem,4vw,4.8rem);line-height:.96}.icon-button{border-radius:var(--radius-md);cursor:pointer;width:2.75rem;height:2.75rem;transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);flex:none;place-items:center;display:inline-grid}.icon-button:hover{color:var(--color-accent-ink);background:var(--project-accent)}.preview-dialog__body{gap:var(--space-md);min-height:0;padding:var(--space-md);grid-template-columns:minmax(0,1.8fr) minmax(18rem,.7fr);display:grid;overflow:auto}.preview-dialog__screen{border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-stage);min-width:0;min-height:20rem;margin:0;position:relative;overflow:clip}.preview-dialog__screen img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.preview-dialog__details{gap:var(--space-md);flex-direction:column;min-width:0;display:flex}.preview-dialog__details p{max-width:58ch;color:var(--color-muted);margin:0;font-size:1rem}.preview-dialog__details dl{gap:var(--space-sm);margin:0;display:grid}.preview-dialog__details div{padding-block:var(--space-sm);border-top:1px solid var(--color-rule)}.preview-dialog__details dt{color:var(--color-faint);font-family:var(--font-mono);font-size:.72rem}.preview-dialog__details dd{margin:var(--space-3xs) 0 0;color:var(--color-ink)}.tag-list{gap:var(--space-2xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.tag-list li{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-muted);font-family:var(--font-mono);font-size:.72rem}.live-link{justify-content:center;align-items:center;gap:var(--space-2xs);width:fit-content;min-height:2.75rem;padding:0 var(--space-sm);border-radius:var(--radius-md);color:var(--color-accent-ink);background:var(--project-accent);font-family:var(--font-mono);white-space:nowrap;font-size:.82rem;text-decoration:none;display:inline-flex}.preview-dialog__pager{border-top:1px solid var(--color-rule)}.pager-button{justify-content:center;align-items:center;gap:var(--space-2xs);min-height:2.75rem;padding:0 var(--space-sm);border-radius:var(--radius-md);color:var(--color-ink);cursor:pointer;white-space:nowrap;display:inline-flex}.pager-button:hover{color:var(--color-accent-ink);background:var(--project-accent)}.preview-dialog__count{align-items:center;gap:var(--space-2xs);color:var(--color-muted);font-family:var(--font-mono);font-size:.78rem;display:inline-flex}.site-footer{gap:var(--space-md);padding-block:clamp(5rem, 12vw, 12rem) var(--space-lg);display:grid}.site-footer__statement{color:var(--color-ink);font-family:var(--font-display);letter-spacing:0;text-transform:uppercase;margin:0;font-size:clamp(3rem,12.4vw,12rem);line-height:.84}.site-footer__meta{gap:var(--space-sm) var(--space-md);color:var(--color-muted);font-family:var(--font-mono);flex-wrap:wrap;align-items:center;font-size:.74rem;display:flex}.site-footer__brand{align-items:center;gap:var(--space-2xs);color:var(--color-ink);display:inline-flex}@keyframes card-rise{0%{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes layer-in{0%{opacity:0}to{opacity:1}}@media (width<=70rem){.portfolio-hero,.preview-dialog__body{grid-template-columns:1fr}.portfolio-hero{min-height:auto}.work-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.project-card,.project-card--0,.project-card--1,.project-card--3,.project-card--5,.project-card--6,.project-card--8,.project-card--10{grid-column:span 3}}@media (width<=46rem){.site-shell{padding-inline:clamp(1rem,4vw,1.5rem)}.site-nav{align-items:flex-start;margin-block-end:var(--space-xl)}.brand-mark{gap:var(--space-2xs)}.brand-mark__glyph{width:2rem;height:2rem}.site-nav__meta{align-items:flex-end;gap:var(--space-2xs);flex-direction:column}.portfolio-hero{padding-block:var(--space-lg) var(--space-2xl)}.portfolio-hero h1{font-size:clamp(2.45rem,13.6vw,4.2rem);line-height:1}.filter-panel{gap:var(--space-sm);grid-template-columns:1fr}.filter-panel__label{min-height:auto}.work-grid{grid-template-columns:1fr}.project-card,.project-card--0,.project-card--1,.project-card--3,.project-card--5,.project-card--6,.project-card--8,.project-card--10{grid-column:span 1}.project-card__button{min-height:28rem}.project-card__title{font-size:clamp(1.4rem,8vw,2rem)}.preview-layer{place-items:stretch stretch;padding:0}.preview-dialog{border-radius:0;width:100%;max-height:100vh}.preview-dialog__screen{min-height:18rem}.preview-dialog__chrome,.preview-dialog__pager{padding:var(--space-sm)}.preview-dialog__pager{flex-wrap:wrap}}@media (width<=26rem){.filter-button{flex:auto}.site-footer__statement{font-size:clamp(2.4rem,13.5vw,4rem)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.rectangle-field{display:none}}
