@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Jersey+15&display=swap');
:root { --ink:#111; --paper:#f4f2eb; --mid:#777; --line:2px solid var(--ink); --mono:'DM Mono',monospace; --display:'Jersey 15',cursive; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--display); font-size:18px; line-height:1.35; background-image:radial-gradient(#bbb .6px,transparent .6px); background-size:7px 7px; } body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px); z-index:-1; } a { color:inherit; } a:focus-visible,.menu-link:focus-visible { outline:2px dotted var(--ink); outline-offset:3px; } button { font-family:inherit; }
.menu-bar { height:30px; padding:0 18px; display:flex; align-items:center; gap:0; background:var(--paper); border-bottom:1px solid var(--ink); position:sticky; top:0; z-index:10; box-shadow:0 1px 0 var(--ink); } 
.system-menu-container { position: relative; height: 100%; display: flex; align-items: center; }
.apple-mark { width:31px; height:24px; display:grid; place-items:center; font-family:Georgia,serif; font-size:18px; text-decoration:none; transform:rotate(15deg); border:none; background:transparent; cursor:pointer; padding:0; color:var(--ink); } 
.apple-mark:hover, .apple-mark[aria-expanded="true"] { background:var(--ink); color:var(--paper); } 
.system-menu { position: absolute; top: 100%; left: 0; background: #fff; border: 2px solid var(--ink); display: none; flex-direction: column; min-width: 150px; padding: 4px; z-index: 20; }
.system-menu.show { display: flex; }
.system-menu-label { margin: 0; padding: 4px 10px; font: 10px var(--mono); color: var(--mid); border-bottom: 1px dotted var(--ink); margin-bottom: 4px; }
.system-menu-item { text-decoration: none; font: 12px var(--mono); color: var(--ink); padding: 6px 10px; cursor: pointer; }
.system-menu-item:hover { background: var(--ink); color: #fff; }
.project-detail-window { max-width: 850px; margin: 0 auto; }
.project-content { padding: 35px 45px; display: flex; flex-direction: column; gap: 35px; }
.project-header-row { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
.project-logo-container { padding: 10px; border: var(--line); background: #fff; }
.project-logo { width: 100%; display: block; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) contrast(1.2); }
.project-mission h3, .project-info-block h3, .project-screenshots h3 { font-size: 24px; margin: 0 0 12px; }
.project-mission p, .project-info-block p { margin: 0; font-size: 18px; color: var(--ink); }
.project-metadata { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 25px; border-top: 1px dotted var(--ink); }
.project-info-block { display: flex; flex-direction: column; gap: 8px; }
.screenshot-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 15px; }
.screenshot { width: 100%; height: 100%; display: block; border: var(--line); background: #fff; aspect-ratio: 4/3; object-fit: cover; }
.contributors-widget { display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 8px; border: 2px solid var(--ink); background: #bdbdbd; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #666; }
.scroll-btn { width: 24px; height: 72px; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; cursor: pointer; font-family: var(--mono); font-size: 16px; font-weight: bold; flex-shrink: 0; padding:0; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777; }
.scroll-btn:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.contributors-dock { flex-grow: 1; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; max-width: 388px; }
.contributors-dock::-webkit-scrollbar { display: none; }
.contributors-dock .dock-item { flex-shrink: 0; margin: 0; }
.project-footer { margin-top: 20px; }
.project-socials-section { padding: 0 9vw 90px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.project-socials-section h2 { font-size: 3rem; margin-bottom: 20px; }
.menu-bar nav { display:flex; align-items:stretch; height:100%; } .menu-link { min-width:68px; height:100%; padding:0 12px; border:0; color:var(--ink); background:transparent; text-decoration:none; font:10px var(--mono); display:grid; place-items:center; cursor:pointer; } .menu-link:hover,.menu-link.active { color:var(--paper); background:var(--ink); text-decoration:none; } .menu-link.selection-flash { animation:selection-flash 300ms steps(1,end); } @keyframes selection-flash { 0%,18%,36%,54%,72%,100% { color:var(--paper); background:var(--ink); } 9%,27%,45%,63%,81% { color:var(--ink); background:var(--paper); } } .menu-status { margin:0 0 0 auto; font:9px var(--mono); } .menu-status span { margin:0 8px; }
main { max-width:1320px; margin:auto; } .hero { min-height:630px; padding:100px 9vw 90px; display:grid; grid-template-columns:1fr 300px; gap:10vw; align-items:center; border-bottom:var(--line); } .eyebrow,.project-meta,dt,.art-caption { margin:0; font:11px var(--mono); letter-spacing:.06em; } .eyebrow:before { content:'✦ '; } .hero h1,h2,h3,p { margin-top:0; } .hero h1 { font-size:clamp(4rem,9vw,8rem); line-height:.86; letter-spacing:-.04em; margin:22px 0 30px; font-weight:400; } .hero h1 em,h2 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.07em; } .intro { max-width:470px; font-size:20px; margin-bottom:30px; } .button { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; min-width:165px; border:var(--line); padding:12px 14px; font:11px var(--mono); text-decoration:none; text-transform:uppercase; cursor:pointer; } .button-inverse { color:var(--paper); background:var(--ink); box-shadow:4px 4px 0 var(--paper),6px 6px 0 var(--ink); } .button:hover { transform:translate(2px,2px); }
.hero-art { width:100%; } .portrait-frame { aspect-ratio:1; background:#fff; border:var(--line); box-shadow:10px 10px 0 var(--ink); padding:13px; } .portrait-frame img { width:100%; height:100%; display:block; object-fit:cover; image-rendering:pixelated; filter:grayscale(1) contrast(1.15); } .art-caption { margin-top:18px; line-height:1.7; } .art-caption span { color:var(--mid); }
.window-section,.about-section,.contact-section { padding:110px 9vw; } .window-heading { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; margin-bottom:32px; gap:25px; } .window-heading h2,.about-copy h2,.contact-intro h2 { font-size:clamp(3rem,6vw,6rem); line-height:.9; letter-spacing:-.04em; margin:0; font-weight:400; } .section-note { max-width:210px; margin:0; font-size:17px; } .window { background:var(--paper); border:var(--line); box-shadow:7px 7px 0 var(--ink); } .window-titlebar { min-height:35px; border-bottom:var(--line); display:flex; align-items:center; padding:0 12px; gap:12px; background:repeating-linear-gradient(0deg,transparent 0 3px,var(--ink) 3px 5px,transparent 5px 8px); } .window-titlebar strong { background:var(--paper); padding:0 14px; font:11px var(--mono); text-transform:uppercase; } .close-box { width:15px; height:15px; background:var(--paper); border:2px solid var(--ink); flex:none; } .title-rule { flex:1; } .project-grid { display:grid; grid-template-columns:repeat(3,1fr); } .project-card { padding:25px; border-right:1px solid var(--ink); } .project-card:last-child { border-right:0; } .pixel-image { aspect-ratio:1; border:var(--line); margin-bottom:20px; overflow:hidden; background:#fff; } .project-photo img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; filter:grayscale(1) contrast(1.2); } .project-meta { display:flex; justify-content:space-between; font-size:9px; margin-bottom:13px; } .project-card h3 { font-size:30px; line-height:1; margin-bottom:8px; font-weight:400; } .project-card p { font-size:17px; min-height:54px; margin-bottom:18px; } .text-link { font:11px var(--mono); text-transform:uppercase; text-underline-offset:4px; } .text-link:hover { background:var(--ink); color:var(--paper); text-decoration:none; }
.about-section { border-top:var(--line); display:grid; grid-template-columns:1.1fr 1fr; gap:12vw; align-items:center; background:#e1dfd7; } .about-copy h2 { margin:20px 0 28px; } .about-copy>p:not(.eyebrow) { max-width:475px; font-size:20px; } .about-copy .text-link { display:inline-block; margin-top:8px; } .facts-window dl { margin:0; padding:13px 20px; } .facts-window dl div { padding:13px 0; border-bottom:1px dotted var(--ink); display:grid; grid-template-columns:90px 1fr; gap:12px; } .facts-window dl div:last-child { border-bottom:0; } .facts-window dt { font-size:9px; } .facts-window dd { margin:0; font-size:16px; } .status-dot { display:inline-block; width:9px; height:9px; border:1px solid var(--ink); background:var(--ink); margin-right:6px; }
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:12vw; background:var(--ink); color:var(--paper); } .contact-intro h2 { margin:22px 0 28px; } .contact-intro>p:not(.eyebrow) { max-width:300px; color:#bbb; } .contact-details { margin-top:60px; display:flex; flex-direction:column; gap:8px; font:12px var(--mono); } .contact-details span { color:#777; font-size:10px; margin-top:14px; } .contact-details strong { font-weight:400; } .contact-details a:hover { color:#aaa; } .contact-stack { align-self:center; } .contact-card { container-type:inline-size; background:var(--paper); color:var(--ink); border:var(--line); box-shadow:none; } .contact-card-body { padding:34px; } .contact-card-body .eyebrow { margin-bottom:30px; } .contact-email { display:block; font-size:clamp(.8rem,6cqw,3.5rem); line-height:1; white-space:nowrap; margin-bottom:18px; } .contact-card-body p:not(.eyebrow) { max-width:250px; font-size:18px; } .button-paper { color:var(--ink); background:var(--paper); margin-top:15px; } .button-paper:hover { background:var(--paper); color:var(--ink); }
footer { max-width:1320px; margin:auto; padding:24px 9vw; background:var(--paper); border-top:var(--line); display:flex; justify-content:space-between; font:10px var(--mono); } footer a { text-underline-offset:4px; }
.social-dock { width:fit-content; max-width:100%; margin:38px auto 0; padding:8px; display:flex; align-items:flex-end; gap:7px; border:2px solid var(--ink); background:#bdbdbd; box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #666; }
.dock-item { width:72px; min-height:72px; padding:7px 4px 5px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:6px; color:var(--ink); background:var(--paper); border:2px solid var(--ink); box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #777; text-decoration:none; transition:transform 100ms steps(1); }
.dock-item:hover { transform:none; background:var(--paper); box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #777; }
.dock-icon { font-size:32px; line-height:1; }
.dock-label { font:9px var(--mono); white-space:nowrap; }
@media (max-width:720px) { .menu-bar { padding:0 18px; gap:0; } .menu-status { display:none; } main { overflow:hidden; } .hero { padding:72px 24px 70px; display:block; min-height:0; } .hero h1 { font-size:18vw; } .intro { font-size:19px; } .hero-art { width:220px; margin:65px auto 5px; } .window-section,.about-section,.contact-section { padding:75px 24px; } .window-heading { display:block; } .window-heading h2 { margin:18px 0 20px; } .section-note { max-width:280px; } .project-grid { display:block; } .project-card { border-right:0; border-bottom:1px solid var(--ink); padding:22px 18px 28px; } .project-card:last-child { border-bottom:0; } .pixel-image { aspect-ratio:1; } .about-section,.contact-section { display:block; } .about-copy { margin-bottom:55px; } .facts-window { margin:0 4px; } .contact-intro { margin-bottom:60px; } .contact-details { margin-top:35px; } .contact-card-body { padding:26px 20px; } .contact-stack { width:100%; } .social-dock { margin-left:0; margin-right:0; width:100%; justify-content:center; flex-wrap:wrap; } .dock-item { width:calc(33.333% - 6px); } footer { padding:21px 24px; display:grid; gap:10px; } .project-header-row, .project-metadata { grid-template-columns: 1fr; gap: 20px; } .project-logo-container { width: 120px; margin-bottom: 10px; } .project-content { padding: 25px 20px; gap: 25px; } }

@media (min-width:1200px) {
	main, footer { max-width:none; }
	.hero, .window-section, .about-section, .contact-section { padding-left:4vw; padding-right:4vw; }
	footer { padding-left:4vw; padding-right:4vw; }
}

.apple-mark { height:30px; align-self:center; transform:none; }
.button { position:relative; isolation:isolate; min-width:198px; height:65px; padding:0 28px; color:var(--ink); background:var(--ink); border:0; border-radius:0; clip-path:polygon(7% 0,93% 0,93% 3%,96% 3%,96% 8%,98% 8%,98% 20%,100% 20%,100% 80%,98% 80%,98% 92%,96% 92%,96% 97%,93% 97%,93% 100%,7% 100%,7% 97%,4% 97%,4% 92%,2% 92%,2% 80%,0 80%,0 20%,2% 20%,2% 8%,4% 8%,4% 3%,7% 3%); box-shadow:none; }
.button { clip-path:none; background-color:transparent; background-image:url('media/Union-2.svg'),url('media/Union-1.svg'),url('media/Union.svg'); background-position:center,center,center; background-repeat:no-repeat; background-size:176px 42px,198px 65px,198px 65px; }
.button:before, .button:after { display:none; }
.button:hover { color:var(--ink); background-color:transparent; background-image:url('media/Union-2.svg'),url('media/Union-1.svg'),url('media/Union.svg'); box-shadow:none; }
.button:before { content:''; position:absolute; z-index:0; inset:3px; background:var(--paper); clip-path:polygon(7% 0,93% 0,93% 5%,96% 5%,96% 18%,98% 18%,98% 82%,96% 82%,96% 95%,93% 95%,93% 100%,7% 100%,7% 95%,4% 95%,4% 82%,2% 82%,2% 18%,4% 18%,4% 5%,7% 5%); }
.button:after { content:''; position:absolute; z-index:1; inset:9px; border:2px solid var(--ink); clip-path:polygon(4% 0,96% 0,96% 6%,100% 6%,100% 94%,96% 94%,96% 100%,4% 100%,4% 94%,0 94%,0 6%,4% 6%); }
.button-inverse, .button-paper { color:var(--ink); background:var(--ink); box-shadow:none; }
.button span { position:relative; z-index:2; font:500 20px/1 var(--mono); }
.button .button-label { font:14px var(--mono); }
.button .button-arrow { width:19px; height:19px; display:block; flex:none; background:none; clip-path:none; font:19px/1 iconfont!important; }
.button .button-arrow:before { content:'\f164'; }
.link-arrow { font:14px/1 iconfont!important; vertical-align:-1px; }
.project-card .text-link { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--ink); text-decoration:none; }
.project-card .link-arrow { display:inline-block; vertical-align:middle; line-height:1; }
.about-copy .text-link { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--ink); text-decoration:none; }
.about-copy .link-arrow { display:inline-block; vertical-align:middle; line-height:1; }
.button:hover { color:var(--paper); background:var(--ink); box-shadow:none; transform:translate(1px,1px); }
.button:hover:before { background:var(--ink); }

.button,
.button:hover,
.button-inverse,
.button-paper { color:var(--ink); background-color:transparent; background-image:url('media/Union-2.svg'),url('media/Union-1.svg'),url('media/Union.svg'); background-position:center,center,center; background-repeat:no-repeat; background-size:176px 42px,198px 65px,198px 65px; box-shadow:none; }
.button:before,
.button:after,
.button:hover:before,
.button:hover:after { display:none; }

.button { position:relative; background-image:url('media/Union-1.svg'),url('media/Union.svg'); background-size:198px 65px,198px 65px; }
.button:after { content:''; display:block; position:absolute; z-index:1; inset:11px; border:2px solid var(--ink); clip-path:polygon(3% 0,97% 0,97% 5%,100% 5%,100% 95%,97% 95%,97% 100%,3% 100%,3% 95%,0 95%,0 5%,3% 5%); }
.button > span { position:relative; z-index:2; }
.button:hover:after { border-color:var(--paper); }

.button.button-inverse,
.button.button-paper,
.button.button-inverse:hover,
.button.button-paper:hover { color:var(--ink); background-color:transparent; background-image:url('media/Union-1.svg'),url('media/Union.svg'); background-position:center,center; background-repeat:no-repeat; background-size:198px 65px,198px 65px; box-shadow:none; }
.button.button-inverse:after,
.button.button-paper:after,
.button.button-inverse:hover:after,
.button.button-paper:hover:after { display:block; border-color:var(--ink); }

.close-box { position:relative; cursor:default; }
.close-box:before,
.close-box:after { content:''; position:absolute; left:2px; top:5px; width:7px; height:2px; background:var(--ink); opacity:0; transition:none; }
.close-box:before { transform:rotate(45deg); }
.close-box:after { transform:rotate(-45deg); }
.close-box:hover:before,
.close-box:hover:after { opacity:1; }

.button,
.button.button-inverse,
.button.button-paper,
.button:hover,
.button.button-inverse:hover,
.button.button-paper:hover { color:var(--ink); background:var(--paper); background-image:none; border:2px solid var(--ink); border-radius:0; box-shadow:none; clip-path:none; transform:none; }
.button:before,
.button:after,
.button:hover:before,
.button:hover:after { display:none; content:none; }
.window { box-shadow:none; }
.portrait-frame { box-shadow:none; }