:root { --ink:#18221f; --muted:#67716d; --line:#d9dfd8; --soft:#f4f6f1; --paper:#fcfdf9; --green:#26775e; --warm:#edeee7; --mono:"DM Mono", monospace; --sans:"Space Grotesk", sans-serif; color:var(--ink); background:var(--paper); font-family:var(--sans); }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(90deg, transparent 50%, rgba(38,119,94,.025) 50%) var(--paper); }
a { color:inherit; }
.site-header { height:68px; max-width:1200px; margin:auto; padding:0 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:white; background:var(--ink); border-radius:50%; font:500 10px var(--mono); letter-spacing:-.08em; }
.header-note,.kicker,.eyebrow { color:var(--muted); font:500 10px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.page-shell { max-width:1200px; margin:auto; padding:0 28px 70px; }
.intro { max-width:770px; padding:78px 0 72px; }
.intro .kicker { margin:0 0 20px; color:var(--green); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3rem,7vw,5.6rem); line-height:.91; letter-spacing:-.075em; margin-bottom:24px; font-weight:600; }
h1 em { font-family:Georgia,serif; font-weight:400; color:var(--green); }
.intro > p:last-child { max-width:550px; font-size:1.1rem; line-height:1.55; color:var(--muted); }
.directory-section { border-top:1px solid var(--line); padding:35px 0 64px; }
.coolify-section { padding-bottom:10px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.eyebrow { margin:0 0 7px; color:var(--green); }
h2 { font-size:1.65rem; letter-spacing:-.055em; margin:0; }
.results { color:var(--muted); font:400 11px var(--mono); margin:0 0 3px; text-align:right; }
.toolbar { display:grid; grid-template-columns:minmax(0,1fr) 195px; gap:10px; margin-bottom:16px; }
.search-box,.select-box { background:white; border:1px solid var(--line); border-radius:6px; min-height:43px; display:flex; align-items:center; }
.search-box { padding:0 13px; gap:9px; color:var(--green); }
.search-box span { font:500 22px/1 Georgia,serif; transform:rotate(-20deg); }
input,select { width:100%; border:0; background:transparent; color:var(--ink); font:500 13px var(--sans); outline:none; }
input::placeholder { color:#98a19d; }
.select-box { padding:0 12px; color:var(--muted); gap:8px; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
select { appearance:auto; color:var(--ink); font-size:12px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--line); gap:1px; }
.project-card { position:relative; min-height:183px; padding:18px; background:var(--paper); display:flex; flex-direction:column; transition:background .16s ease; cursor:pointer; }
.project-card:hover { background:#f0f5ef; }
.project-card:focus-within { outline:2px solid var(--green); outline-offset:-2px; }
.card-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.card-name { font-size:1rem; font-weight:700; letter-spacing:-.04em; margin:0; }
.card-type { color:var(--green); font:500 9px var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.card-description { color:var(--muted); font-size:12px; line-height:1.5; margin:13px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tag-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-right:94px; }
.tag { border:1px solid var(--line); border-radius:3px; padding:3px 5px; color:var(--muted); background:white; font:400 9px var(--mono); text-transform:uppercase; }
.card-open { position:absolute; inset:0; z-index:1; }
.repo-link { position:absolute; right:14px; bottom:14px; z-index:2; border:1px solid var(--ink); background:var(--paper); border-radius:4px; padding:6px 8px; font:500 10px var(--sans); text-decoration:none; }
.repo-link:hover { color:white; background:var(--ink); }
.empty { grid-column:1/-1; padding:28px; color:var(--muted); background:var(--paper); font-size:13px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:5px; margin:20px 0 0; min-height:32px; }
.page-button { min-width:32px; height:32px; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:transparent; font:500 11px var(--mono); cursor:pointer; }
.page-button:hover,.page-button[aria-current="page"] { border-color:var(--ink); background:var(--ink); color:white; }
.page-button:disabled { opacity:.35; cursor:not-allowed; }
.site-footer { max-width:1200px; margin:auto; padding:24px 28px 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font:400 11px var(--mono); }
.site-footer a { color:var(--green); text-decoration:none; }
.detail-shell { max-width:820px; margin:auto; padding:0 28px 80px; }
.back-link { display:inline-block; margin:38px 0 56px; color:var(--muted); font:500 11px var(--mono); text-decoration:none; }
.back-link:hover { color:var(--green); }
.detail-kicker { color:var(--green); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.detail-title { font-size:clamp(2.5rem,7vw,5rem); line-height:.92; letter-spacing:-.075em; margin-bottom:20px; }
.detail-lede { color:var(--muted); max-width:650px; line-height:1.6; font-size:1.05rem; }
.detail-actions { display:flex; gap:9px; margin:28px 0 52px; }
.action-button { background:var(--ink); color:white; border:1px solid var(--ink); border-radius:4px; padding:10px 12px; font:600 12px var(--sans); text-decoration:none; }
.action-button.secondary { background:transparent; color:var(--ink); }
.detail-grid { display:grid; grid-template-columns:170px 1fr; border-top:1px solid var(--line); }
.detail-grid > * { padding:22px 0; border-bottom:1px solid var(--line); }
.detail-grid dt { color:var(--muted); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.detail-grid dd { margin:0; font-size:14px; line-height:1.6; }
.detail-grid ul { padding-left:18px; margin:0; }
@media (max-width:800px) { .site-header,.page-shell,.site-footer { padding-left:18px; padding-right:18px; } .header-note { display:none; } .intro { padding:54px 0 56px; } .toolbar { grid-template-columns:1fr; } .project-grid { grid-template-columns:1fr; } .section-title { align-items:start; flex-direction:column; gap:8px; } .results { text-align:left; } .detail-shell { padding:0 18px 60px; } .detail-grid { grid-template-columns:1fr; } .detail-grid > * { padding:14px 0; } .detail-grid dt { padding-bottom:0; border-bottom:0; } }