@import url('./fonts.css');
:root {
  --paper:#faf8f3; --ink:#132955; --orange:#d86441; --action:#b9472a;
  --pink:#ef4597; --muted:#56637a; --line:#dedbd3; --control:#828c9b;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Instrument Sans',Arial,sans-serif;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-synthesis:none; color-scheme:light;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:28px}
body {margin:0; font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%}
button,input {font:inherit}
button,a {-webkit-tap-highlight-color:transparent}
button {cursor:pointer}
a {color:inherit; text-decoration:none}
img {display:block; max-width:100%; height:auto}
button[hidden],[hidden] {display:none!important}
::selection {background:#ffd8e9; color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid var(--action); outline-offset:5px}
.container {width:min(1280px,calc(100% - 80px)); margin-inline:auto}
.skip-link {position:fixed; top:12px; left:16px; z-index:100; background:var(--ink); color:#fff; padding:12px 20px; transform:translateY(-160%)}
.skip-link:focus {transform:translateY(0)}
.site-header {height:90px}
.nav-inner {height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand {display:flex; align-items:center; gap:12px; font:25px var(--serif); white-space:nowrap}
.brand img {width:42px; height:42px}
.community-label {font:14px var(--sans); border-left:1px solid #c8c6c0; padding-left:20px; margin-left:8px; color:var(--muted)}
.nav-links {display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600}
.text-link {padding:10px 0}
.text-link:hover {text-decoration:underline; text-decoration-color:var(--action); text-underline-offset:5px}
.eyebrow {display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; line-height:1.5; margin:0 0 22px}
.eyebrow::before {content:''; width:24px; height:2px; background:var(--pink); flex:0 0 auto}
.hero {display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:32px; align-items:center; padding:24px 0 58px; min-height:560px}
.hero-copy {position:relative}
.hero h1 {font:800 clamp(72px,8.3vw,116px)/.89 var(--display); text-transform:uppercase; letter-spacing:-.035em; margin:0 0 28px}
.hero h1 span {display:block}
.hero h1 .title-second {white-space:nowrap}
.hero h1 .pink-period {display:inline}
.pink-period {color:var(--pink)}
.hero-intro {font-size:clamp(18px,1.5vw,21px); line-height:1.45; max-width:440px; margin:0 0 28px; letter-spacing:-.025em}
.button {display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:12px 23px; border:1px solid #9c3b23; border-radius:999px; background:linear-gradient(#bd4b2e,#ad4026); color:#fff; font-size:15px; font-weight:600; line-height:1.4; box-shadow:inset 0 1px 0 #ffffff38,0 2px 3px #72352222,0 5px 12px #72352212; transition:box-shadow .18s,background .18s}
.button::after {content:'→'; font-size:20px; line-height:1}
.button:hover {background:#a63b23; box-shadow:inset 0 1px 0 #ffffff24,0 3px 8px #72352228}
.button:active {box-shadow:inset 0 2px 4px #5a1d2330}
.button-secondary {background:#fffdfa; color:var(--ink); border-color:var(--control); box-shadow:inset 0 1px 0 #fff,0 2px 4px #1329550b}
.button-secondary:hover {background:#eeeae2; color:var(--ink)}
.hero-community {margin-top:30px}
.avatar-stack {display:flex; align-items:center; padding-left:3px}
.avatar-stack img,.avatar-more {width:36px; height:36px; border-radius:50%; border:3px solid var(--paper); margin-left:-3px; background:#eee8df; object-fit:cover}
.avatar-more {display:grid; place-items:center; font-size:11px; margin-left:4px; color:var(--muted); border-width:0}
.hero-community p {font-size:13px; margin:9px 0 0; color:var(--muted)}
.hero-art {min-width:0; border-radius:24px; overflow:hidden}
.hero-art img {width:100%; height:auto; mix-blend-mode:multiply}
.section-top {display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:28px}
.section-top .eyebrow {margin-bottom:14px}
.section-top h2 {font:400 clamp(37px,4.3vw,60px)/1.06 var(--serif); letter-spacing:-.055em; margin:0; text-wrap:balance}
.section-top .aside-copy {max-width:270px; font-size:16px; color:var(--muted); margin:0 0 3px; flex:0 0 auto}
.spotlights {padding-top:12px}
.spotlight-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}
.feature-card {min-width:0; background:linear-gradient(145deg,#fffefa,#f8f5ee); padding:9px; border:1px solid #d8d3c8; border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 2px 2px #1c294208,0 8px 22px #1c294207; overflow:hidden; transition:box-shadow .2s,border-color .2s}
.feature-card:hover {border-color:#bdb6a7; box-shadow:inset 0 1px 0 #fff,0 4px 7px #1c29420a,0 12px 26px #1c294210}
.feature-image {display:block; position:relative; overflow:hidden; border-radius:8px; aspect-ratio:1; background:#eae6dd}
.feature-image img {width:100%; height:100%; object-fit:contain}
.feature-content {padding:18px 14px 16px}
.feature-heading {display:flex; align-items:start; justify-content:space-between; gap:12px}
.feature-heading h3 {font:400 clamp(27px,2.5vw,35px)/1.12 var(--serif); letter-spacing:-.03em; margin:0; overflow-wrap:anywhere}
.feature-heading h3 a:hover,.project-title a:hover {color:var(--action)}
.card-arrow {font-size:23px; line-height:1.3; flex:none; color:var(--action)}
.feature-description {font-size:16px; line-height:1.55; margin:12px 0 20px; color:var(--muted); max-width:57ch}
.maker-link {display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); min-width:0; line-height:1.4}
.maker-link img {height:24px; width:24px; flex:none; border-radius:50%; object-fit:cover; border:1px solid #d9d4c9}
.maker-link span {overflow-wrap:anywhere}
.maker-link:hover {color:var(--action); text-decoration:underline; text-underline-offset:3px}
.feature-trio {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:28px}
.feature-trio .feature-heading h3 {font-size:29px}
.feature-trio .feature-content {padding:16px 12px 15px}
.catalog {padding-top:76px; scroll-margin-top:24px}
.catalog .section-top {margin-bottom:26px}
.catalog-tools {padding:24px 0; border-top:1px solid var(--line); margin-bottom:4px}
.search-row {display:flex; align-items:center; gap:22px; margin-bottom:18px}
.search-form {flex:1; max-width:560px}
.search-field {position:relative}
.search-field svg {position:absolute; top:15px; left:16px; width:20px; height:20px; color:var(--muted); pointer-events:none}
.search-field input {width:100%; height:52px; border:1px solid var(--control); border-radius:9px; background:#fffdfa; padding:12px 43px; font-size:16px; color:var(--ink); box-shadow:inset 0 2px 3px #13295508,0 1px 0 #fff}
.search-field input::placeholder {color:#616b7d; opacity:1}
.result-status {margin:0; color:var(--muted); font-size:14px; white-space:nowrap}
.clear-button {margin-left:auto; border:0; background:transparent; padding:12px 0; font-size:14px; color:var(--action); text-decoration:underline; text-underline-offset:4px}
.category-list {display:flex; flex-wrap:wrap; gap:9px}
.category-button {display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid var(--control); border-radius:999px; background:linear-gradient(#fffefa,#f4f1ea); color:var(--ink); font-size:14px; white-space:nowrap; box-shadow:inset 0 1px 0 #fff,0 1px 2px #13295508; transition:background .18s,border-color .18s}
.category-button:hover {border-color:var(--ink); background:#eeebe4}
.category-button[aria-pressed='true'] {background:linear-gradient(#233962,#132955); border-color:var(--ink); color:#fff; box-shadow:inset 0 1px 0 #ffffff24,0 2px 4px #13295518}
.category-count {font-size:12px; opacity:.8}
.project-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 32px; align-items:stretch}
.project-card {min-width:0; display:grid; grid-template-columns:132px minmax(0,1fr); background:#fffdfa; border:1px solid #d8d3c8; border-radius:12px; overflow:hidden; box-shadow:inset 0 1px 0 #fff,0 2px 3px #13295505,0 5px 14px #13295504; transition:border-color .18s,box-shadow .18s}
.project-card:hover {border-color:#b9b1a1; box-shadow:0 3px 8px #1329550a,0 8px 20px #13295508}
.project-cover {display:block; align-self:stretch; overflow:hidden; background:#e9e7de; position:relative}
.project-cover img {width:100%; height:100%; object-fit:cover}
.project-card:has(.project-cover:not(.type-cover)) {grid-template-columns:164px minmax(0,1fr)}
.project-cover:not(.type-cover) {align-self:start; aspect-ratio:1; margin:12px 0 12px 12px; border-radius:7px; box-shadow:0 1px 3px #13295515}
.type-cover {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(135deg,#ffffff40,transparent 55%),var(--cover-bg); color:var(--cover-ink); padding:18px; box-shadow:inset -1px 0 0 #1329550b}
.type-cover::after {content:''; position:absolute; inset:10px; border:1px solid currentColor; opacity:.16; border-radius:5px; pointer-events:none}
.cover-emblem {width:40px; height:40px; display:grid; place-items:center; background:#fffefa; border-radius:50%; box-shadow:inset 0 1px 0 #fff,0 2px 5px #13295518}
.cover-emblem img {width:28px; height:28px; object-fit:contain}
.cover-monogram {font:800 46px/1 var(--display); letter-spacing:-.03em}
.project-body {padding:20px; display:flex; flex-direction:column; min-width:0}
.project-category {display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#566b7d; margin:0 0 9px; line-height:1.4}
.headliner {display:inline-block; font-size:9px; letter-spacing:.04em; border:1px solid #d4b18b; border-radius:4px; padding:2px 5px; color:#805027; background:#fcf1df}
.project-title {font:400 27px/1.15 var(--serif); letter-spacing:-.025em; margin:0 0 10px; overflow-wrap:anywhere}
.project-description {font-size:15px; line-height:1.55; color:var(--muted); margin:0 0 17px; flex:1}
.project-tags {display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.project-tags span {font-size:11px; border:1px solid #ced2d8; border-radius:5px; padding:2px 7px; color:var(--muted); background:#f4f5f6}
.project-meta {border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.project-meta .maker-link {font-size:12px}
.github-link {font-size:12px; font-weight:600; white-space:nowrap; padding:5px 0}
.github-link::after {content:' ↗'; color:var(--action)}
.github-link:hover {text-decoration:underline; text-underline-offset:4px}
.empty-state {padding:50px 20px; text-align:center; border:1px dashed #a9adba; border-radius:12px; background:#fffdfa}
.empty-state h3 {font:32px var(--serif); margin:0 0 10px}
.empty-state p {color:var(--muted); margin:0 0 24px}
.makers {padding:76px 0 55px}
.makers-heading {border-top:1px solid var(--line); padding-top:35px; display:flex; align-items:center; justify-content:space-between; gap:28px}
.makers h2 {font:800 clamp(65px,8vw,105px)/1 var(--display); text-transform:uppercase; letter-spacing:-.025em; margin:0 0 14px}
.makers p {font-size:16px; margin:0; color:var(--muted)}
.maker-wall {display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; max-width:1100px}
.maker-avatar {display:block; border-radius:50%}
.maker-avatar img {width:39px; height:39px; object-fit:cover; border-radius:50%; border:2px solid #fffdfa; box-shadow:0 1px 3px #13295524}
.maker-avatar:hover {box-shadow:0 0 0 2px var(--action)}
.site-footer {padding:24px 0 28px; border-top:1px solid var(--line)}
.footer-inner {display:flex; align-items:center; justify-content:space-between; gap:26px}
.site-footer .brand {font-size:22px}
.site-footer .brand img {width:32px; height:32px}
.footer-links {display:flex; gap:24px; font-size:13px}
.edition {font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.noscript-note {font-size:14px; background:#f5eddf; padding:12px 16px; border-radius:8px}
.project-detail {padding-top:18px; padding-bottom:65px}
.breadcrumb {display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; color:var(--muted); margin-bottom:32px}
.breadcrumb a {padding:7px 0}
.breadcrumb a:hover {color:var(--action); text-decoration:underline; text-underline-offset:4px}
.detail-hero {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:58px; align-items:center}
.detail-copy .eyebrow {margin-bottom:18px}
.detail-copy h1 {font:400 clamp(38px,4.8vw,68px)/1.06 var(--serif); letter-spacing:-.045em; margin:0 0 25px; overflow-wrap:anywhere; text-wrap:balance}
.detail-maker {display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; color:var(--muted); margin-bottom:25px}
.detail-maker .maker-link {font-size:16px; color:var(--ink)}
.detail-maker .maker-link img {width:34px; height:34px}
.detail-description {font-size:clamp(18px,1.7vw,22px); line-height:1.55; color:var(--muted); margin:0 0 24px; max-width:38ch}
.detail-copy .project-tags {margin-bottom:26px}
.detail-copy .project-tags span {font-size:13px; padding:4px 9px}
.detail-actions {display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px}
.collection-return {font-size:14px; font-weight:500}
.detail-art {margin:0; padding:9px; border-radius:17px; border:1px solid #d8d3c8; background:linear-gradient(145deg,#fffefa,#f3efe6); box-shadow:inset 0 1px 0 #fff,0 3px 6px #13295508,0 14px 35px #1329550a}
.detail-art img {width:100%; height:auto; border-radius:10px}
.detail-context {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:58px; padding:38px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:58px}
.detail-context .eyebrow {margin-bottom:12px}
.detail-context h2 {font:400 35px/1.1 var(--serif); letter-spacing:-.035em; margin:0 0 14px}
.detail-context p {color:var(--muted); margin:0 0 14px; max-width:44ch}
.context-link {display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--action)}
.project-facts {margin:0; display:grid; gap:18px; align-content:start; padding:4px 0}
.project-facts>div {display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px}
.project-facts dt {font-size:13px; color:var(--muted)}
.project-facts dd {margin:0; font-size:14px; overflow-wrap:anywhere}
.project-facts dd>a:not(.maker-link) {text-decoration:underline; text-decoration-color:#b9c0cc; text-underline-offset:4px}
.project-facts dd>a:hover {color:var(--action)}
.related-projects {padding-top:55px}
.related-projects .section-top {align-items:center}
.related-projects .section-top h2 {font-size:45px}
.related-projects .section-top>.text-link {font-size:14px; color:var(--action); font-weight:600}
@media(max-width:1100px) {
 .detail-hero,.detail-context {gap:34px}
 .detail-copy h1 {font-size:46px}
 .detail-description {font-size:18px}
 .project-facts>div {grid-template-columns:100px minmax(0,1fr); gap:16px}
}
@media(max-width:820px) {
 .project-detail {padding-top:10px; padding-bottom:45px}
 .detail-hero {grid-template-columns:1fr; gap:30px}
 .detail-copy {max-width:630px}
 .detail-copy h1 {font-size:clamp(40px,7vw,58px)}
 .detail-description {max-width:52ch}
 .detail-art {width:min(620px,100%); justify-self:center}
 .detail-context {gap:30px; margin-top:40px; padding:30px 0}
 .project-facts>div {grid-template-columns:1fr; gap:4px}
 .related-projects {padding-top:40px}
 .related-projects .section-top {align-items:start}
}
@media(max-width:560px) {
 .breadcrumb {font-size:12px; margin-bottom:23px; gap:10px}
 .detail-copy h1 {font-size:40px; margin-bottom:20px}
 .detail-maker {margin-bottom:20px}
 .detail-maker .maker-link {font-size:14px}
 .detail-description {font-size:18px; margin-bottom:22px}
 .detail-actions {gap:12px 20px}
 .detail-art {padding:7px; border-radius:13px}
 .detail-context {grid-template-columns:1fr; gap:25px; margin-top:32px}
 .detail-context h2 {font-size:31px}
 .project-facts>div {grid-template-columns:100px minmax(0,1fr); gap:15px}
 .related-projects .section-top h2 {font-size:36px}
 .detail-page .nav-links .text-link:first-child {display:block}
 .detail-page .nav-links .text-link:last-child {display:none}
}
@media(max-width:1100px) {
 .container {width:calc(100% - 56px)}
 .hero {min-height:480px; gap:26px; padding:24px 0 44px}
 .hero h1 {font-size:8.1vw}
 .hero-intro {font-size:18px}
 .section-top h2 {font-size:46px}
 .section-top .aside-copy {max-width:230px}
 .spotlight-grid,.project-grid {column-gap:24px}
 .feature-trio {gap:22px}
 .feature-trio .feature-heading h3 {font-size:25px}
 .project-card,.project-card:has(.project-cover:not(.type-cover)) {grid-template-columns:100px minmax(0,1fr)}
 .project-cover:not(.type-cover) {margin:10px 0 10px 10px}
 .project-body {padding:16px}
 .project-title {font-size:24px}
 .project-meta {flex-wrap:wrap; gap:5px 12px}
 .cover-monogram {font-size:40px}
 .nav-links {gap:20px}
}
@media(max-width:820px) {
 .site-header {height:78px}
 .community-label {display:none}
 .hero {grid-template-columns:1fr; gap:16px; min-height:0; padding-top:24px}
 .hero h1 {font-size:clamp(80px,15.5vw,126px)}
 .hero-art {width:min(620px,100%); margin:0 auto}
 .hero-intro {font-size:20px}
 .hero-community {margin-top:25px}
 .section-top {align-items:start; flex-direction:column; gap:14px; margin-bottom:24px}
 .section-top .aside-copy {max-width:470px}
 .section-top .aside-copy br {display:none}
 .feature-trio {grid-template-columns:1fr; gap:22px; margin-top:22px}
 .feature-trio .feature-card {display:grid; grid-template-columns:40% minmax(0,1fr); align-items:start}
 .feature-trio .feature-content {padding:12px 16px}
 .feature-trio .feature-heading h3 {font-size:28px}
 .feature-trio .feature-description {margin-bottom:16px}
 .project-grid {grid-template-columns:1fr; gap:18px}
 .project-card,.project-card:has(.project-cover:not(.type-cover)) {grid-template-columns:140px minmax(0,1fr)}
 .project-body {padding:20px}
 .project-title {font-size:27px}
 .project-description {font-size:16px}
 .project-meta {flex-wrap:nowrap}
 .catalog {padding-top:58px}
 .makers {padding:58px 0 40px}
 .makers-heading {align-items:start; flex-direction:column}
 .footer-inner {flex-wrap:wrap}
 .edition {flex-basis:100%; text-align:left}
}
@media(max-width:560px) {
 .container {width:calc(100% - 36px)}
 .site-header {height:72px}
 .brand {font-size:22px; gap:8px}
 .brand img {width:34px; height:34px}
 .nav-links {font-size:12px}
 .nav-links .text-link:first-child {display:none}
 .hero {padding-top:20px; padding-bottom:35px}
 .eyebrow {font-size:10px; letter-spacing:.12em; gap:9px; margin-bottom:21px}
 .hero h1 {font-size:18.1vw; line-height:.91; margin-bottom:24px}
 .hero-intro {font-size:18px}
 .avatar-stack img,.avatar-more {width:33px; height:33px}
 .hero-art {margin-top:8px}
 .section-top h2 {font-size:39px; letter-spacing:-.045em}
 .spotlight-grid {grid-template-columns:1fr; gap:20px}
 .feature-content {padding:16px 12px}
 .feature-heading h3 {font-size:31px}
 .feature-trio {gap:20px; margin-top:20px}
 .feature-trio .feature-card {display:grid; grid-template-columns:36% minmax(0,1fr)}
 .feature-trio .feature-content {padding:8px 12px}
 .feature-trio .feature-heading h3 {font-size:25px}
 .feature-trio .feature-description {font-size:14px; margin:10px 0 14px}
 .catalog {padding-top:46px}
 .catalog-tools {padding:20px 0 24px}
 .search-row {display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:16px}
 .search-form {grid-column:1/-1; max-width:none}
 .search-field input {font-size:16px}
 .result-status,.clear-button {font-size:13px}
 .clear-button {padding:4px 0}
 .category-list {gap:8px; flex-wrap:nowrap; overflow-x:auto; margin-inline:-18px; padding:9px 18px 10px; scroll-padding:18px}
 .category-button {font-size:13px; padding:8px 12px; flex:none}
 .project-card,.project-card:has(.project-cover:not(.type-cover)) {grid-template-columns:80px minmax(0,1fr)}
 .project-cover:not(.type-cover) {margin:12px 0 12px 10px}
 .project-body {padding:17px 15px}
 .project-title {font-size:25px}
 .project-description {font-size:15px; margin-bottom:14px}
 .project-category {font-size:9px}
 .project-meta {flex-wrap:wrap; gap:6px 12px}
 .project-meta .maker-link {font-size:12px}
 .maker-link img {width:22px; height:22px}
 .cover-monogram {font-size:33px}
 .cover-emblem {width:34px; height:34px}
 .cover-emblem img {width:24px; height:24px}
 .type-cover {padding:10px; gap:10px}
 .type-cover::after {inset:7px}
 .makers {padding-top:48px}
 .makers-heading {padding-top:28px; gap:24px}
 .makers h2 {font-size:70px}
 .maker-wall {gap:9px; margin-top:28px}
 .maker-avatar img {width:35px; height:35px}
 .footer-inner {gap:20px}
 .footer-links {margin-left:auto; gap:17px; font-size:12px}
 .site-footer .brand {font-size:20px}
 .edition {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {animation:none!important; transition:none!important}
}