@font-face{font-family:Onest;src:url('/assets/fonts/Onest-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--sheet:#151515;--edge:#373737;--ink:#eeeeea;--muted:#b4b4ae;--quiet:#92928e;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:40px;--space-7:48px;--radius:8px;--media-radius:3px;--body:16px;--small:13px;--title:44px;--shadow:0 28px 90px #0009;font-family:Onest,sans-serif;font-synthesis:none;color:var(--ink);line-height:1.55}
.surface-layer{position:fixed;inset:0;z-index:0}
body:has(dialog[open]) main.portfolio{overflow-y:hidden}
.copy{max-width:66ch}
main.portfolio{position:relative;inset:auto;height:100dvh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;z-index:1}
p,h1,h2{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}button:active:not(:focus-visible){opacity:.75}button{touch-action:manipulation}img{display:block;max-width:100%;height:auto}.portfolio-header{padding:28px 40px;flex:none}.portfolio-header h1{font-size:18px;font-weight:450}.portfolio-header p{font-size:15px;color:var(--muted)}
.gallery{flex:1;min-height:440px;display:flex;flex-direction:column;justify-content:center;padding-block:24px}.gallery-stage{height:clamp(190px,32vw,340px);position:relative;perspective:1600px;isolation:isolate}.site-preview{position:absolute;top:50%;left:50%;width:min(28vw,450px);aspect-ratio:1.44;border:1px solid #ffffff26;padding:0;background:#111;border-radius:var(--media-radius);box-shadow:0 24px 48px #0009;overflow:hidden;transform:translate(-50%,-50%);z-index:3}.site-preview img{width:100%;height:100%;object-fit:contain}.site-preview[data-position='-1']{transform:translate(-138%,-50%) scale(.65) rotateY(8deg);z-index:2}.site-preview[data-position='1']{transform:translate(38%,-50%) scale(.65) rotateY(-8deg);z-index:2}.site-preview[data-position='-2']{transform:translate(-195%,-50%) scale(.45) rotateY(12deg);z-index:1}.site-preview[data-position='2']{transform:translate(95%,-50%) scale(.45) rotateY(-12deg);z-index:1}.selection{text-align:center;padding:24px 20px 0}.selection h2{font-size:28px;line-height:1.2;font-weight:450;letter-spacing:-.025em}.selection p{color:var(--muted);font-size:15px;margin-top:8px}.text-button{background:none;border:0;min-height:44px;padding:0 8px;font-size:var(--small);color:var(--muted)}#about-project{font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:7px;margin-top:12px}.gallery-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:12px}.gallery-controls span{font-size:12px;color:var(--quiet);font-variant-numeric:tabular-nums}.project-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 20px;padding:20px 40px 28px;flex:none}.project-navigation button{background:none;border:0;min-height:44px;padding:8px 0;font-size:13px;color:var(--quiet);white-space:nowrap}.project-navigation button[aria-pressed='true']{color:var(--ink);text-decoration:underline;text-underline-offset:8px}
.sheet{width:min(1220px,calc(100% - 112px));max-width:none;max-height:calc(100dvh - 96px);padding:0;margin:auto;border:1px solid var(--edge);border-radius:var(--radius);background:var(--sheet);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}.sheet[open]{display:flex;flex-direction:column}.sheet::backdrop{background:#0008}.sheet-toolbar{flex:none;display:flex;justify-content:flex-end;padding:12px 32px 0}.sheet-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 40px 40px}.project-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:48px;row-gap:32px;align-items:start}.project-heading{grid-column:2;grid-row:1;padding-top:8px}.eyebrow{color:var(--quiet);font-size:13px;line-height:1.4}#project-title{font-size:44px;line-height:1.08;font-weight:450;letter-spacing:-.04em;margin-top:16px;overflow-wrap:anywhere}#project-title:focus{outline:none}.project-media{grid-column:1;grid-row:1 / 3;min-width:0}.main-frame{aspect-ratio:16 / 10;overflow:hidden;border-radius:3px;background:#0c0c0c;position:relative;display:grid;place-items:center}.main-frame img{width:100%;height:100%;object-fit:contain}.image-error{padding:24px;font-size:16px;color:var(--muted)}.thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.thumbnail{border:0;padding:0;text-align:left;background:transparent;min-width:0;font-size:13px;line-height:1.4;color:var(--quiet)}.thumbnail img{width:100%;aspect-ratio:16 / 10;height:auto;object-fit:contain;border:1px solid var(--edge);border-radius:3px;background:#0c0c0c}.thumbnail span{display:inline-block;padding-block:12px 8px;overflow-wrap:anywhere}.thumbnail[aria-pressed='true']{color:var(--ink)}.thumbnail[aria-pressed='true'] img{border-color:var(--ink)}.thumbnail[aria-pressed='true'] span{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}.project-description{grid-column:2;grid-row:2;min-width:0}.copy{color:var(--muted);font-size:16px;line-height:1.55}.copy p+p{margin-top:16px}.project-link{margin-top:40px}.project-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:18px;text-decoration-thickness:1px;text-underline-offset:7px}.project-link p{color:var(--quiet);font-size:13px;margin-top:8px}.project-link .new-tab-note{margin-top:2px;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.text-button:hover,.thumbnail:hover,.project-link a:hover,.project-navigation button:hover{color:#fff}.site-preview:hover{border-color:#ffffff80}}
@media(max-width:760px){.portfolio-header{padding:24px}.gallery{min-height:360px;padding-block:16px}.gallery-stage{height:240px}.site-preview{width:76vw;max-width:420px}.site-preview[data-position='-1']{transform:translate(-133%,-50%) scale(.72) rotateY(12deg)}.site-preview[data-position='1']{transform:translate(33%,-50%) scale(.72) rotateY(-12deg)}.selection{padding-top:12px}.selection h2{font-size:26px}.gallery-controls{gap:16px}.project-navigation{padding:16px 24px 24px;gap:0 20px;justify-content:flex-start}.sheet{width:calc(100% - 24px);max-height:calc(100dvh - 32px)}.sheet-toolbar{padding:8px 12px 0}.sheet-body{padding:8px 20px 32px}.project-layout{display:flex;flex-direction:column;gap:24px}.project-heading{padding:0}#project-title{font-size:38px;margin-top:12px}.project-media{width:100%}.thumbnails{gap:8px;margin-top:12px}.project-link{margin-top:24px}.project-description{display:flex;flex-direction:column}.project-link{order:-1;margin:0 0 24px}}
@media(max-height:600px) and (min-width:761px){.sheet{max-height:calc(100dvh - 24px)}.project-layout{display:flex;flex-direction:column;gap:24px}.project-media{width:min(100%,640px)}.project-description{display:flex;flex-direction:column}.project-link{order:-1;margin:0 0 24px}.gallery{min-height:390px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}