:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --paper:#f5f7f5;
  --ink:#0b231b;
  --forest:#0b3d2e;
  --muted:#5b6b63;
  --faint:#8a988f;
  --line:#e4ebe6;
  --line-strong:#d3ddd6;
  --accent:#10b981;
  --accent-deep:#0b3d2e;
  --accent-ink:#063123;
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --radius:22px;
  --radius-sm:13px;
  --card-pad:22px;
  --gap:22px;
  --grid-min:300px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:color-mix(in oklab, var(--accent) 28%, white); }
[x-cloak]{ display:none !important; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1240px; margin:0 auto; padding:0 28px;
  height:68px; display:flex; align-items:center; gap:26px;
}
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand .mark{ width:30px; height:30px; display:block; }
.brand .wordmark{
  font-family:var(--font-display); font-size:23px; letter-spacing:-.02em;
  color:var(--forest); line-height:1;
}
.brand .wordmark b{ font-weight:800; }
.brand .wordmark span{ font-weight:500; opacity:.62; }

/* ---------- intro ---------- */
.intro{ max-width:1240px; margin:0 auto; padding:56px 28px 30px; }
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  letter-spacing:.02em; color:var(--forest);
  background:color-mix(in oklab, var(--accent) 13%, white);
  border:1px solid color-mix(in oklab, var(--accent) 26%, white);
  padding:6px 13px 6px 9px; border-radius:100px; margin-bottom:22px;
}
.kicker .spark{ width:14px; height:14px; }
.intro h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px, 5.4vw, 62px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 18px; max-width:20ch; color:var(--forest); text-wrap:balance;
}
.intro h1 em{ font-style:normal; color:var(--accent); }
.intro .lead{
  font-size:clamp(16px,1.7vw,19px); color:var(--muted); max-width:64ch; margin:0;
}
.intro .lead b{ color:var(--forest); font-weight:700; }

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky; top:68px; z-index:30;
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.toolbar-inner{ max-width:1240px; margin:0 auto; padding:18px 28px 16px; }
.search-row{ display:flex; align-items:center; gap:14px; margin-bottom:15px; }
.search{
  flex:1 1 auto; display:flex; align-items:center; gap:11px;
  background:var(--paper); border:1.5px solid var(--line);
  border-radius:14px; padding:0 16px; height:50px; transition:.18s; max-width:550px;
}
.search:focus-within{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 16%,transparent); }
.search svg{ width:19px; height:19px; color:var(--faint); flex:0 0 auto; }
.search input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
}
.search input::placeholder{ color:var(--faint); }
.count{ font-size:14px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.count b{ color:var(--forest); font-weight:700; }

.chips{ display:flex; gap:9px; flex-wrap:wrap; }
.chip{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  color:var(--muted); background:transparent;
  border:1.5px solid var(--line-strong); border-radius:100px;
  padding:8px 15px 8px 13px; cursor:pointer; transition:.16s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.chip .swatch{ width:9px; height:9px; border-radius:50%; background:var(--faint); transition:.16s; }
.chip:hover{ border-color:var(--forest); color:var(--forest); }
.chip[aria-pressed="true"]{ background:var(--forest); border-color:var(--forest); color:#fff; }
.chip[aria-pressed="true"] .swatch{ background:var(--accent); }

/* ---------- grid ---------- */
.grid-wrap{ max-width:1240px; margin:0 auto; padding:30px 28px 70px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--grid-min),1fr)); gap:var(--gap); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, background .2s;
}
.card:hover{ transform:translateY(-4px); border-color:color-mix(in oklab,var(--cat) 55%,var(--line)); }
.card:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.thumb{
  position:relative; aspect-ratio:16/9; width:100%;
  background-color:color-mix(in oklab,var(--cat) 9%,white);
  background-image:repeating-linear-gradient(135deg,
    color-mix(in oklab,var(--cat) 17%,white) 0 11px,
    color-mix(in oklab,var(--cat) 8%,white) 11px 22px);
  display:flex; align-items:flex-end; justify-content:flex-start;
  border-bottom:1.5px solid var(--line); overflow:hidden;
}
.thumb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.thumb .ph{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.04em;
  color:color-mix(in oklab,var(--cat) 65%, var(--forest));
  background:color-mix(in oklab,var(--cat) 11%,white);
  border:1px solid color-mix(in oklab,var(--cat) 30%,white);
  padding:4px 9px; border-radius:7px; margin:12px;
}
.card-body{ padding:var(--card-pad); display:flex; flex-direction:column; gap:9px; flex:1; }
.tag{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:12.5px; font-weight:600; color:color-mix(in oklab,var(--cat) 70%,var(--forest));
  text-transform:capitalize;
}
.tag .swatch{ width:8px; height:8px; border-radius:50%; background:var(--cat); }
.card h3{
  font-family:var(--font-display); font-weight:700; font-size:21px;
  letter-spacing:-.015em; margin:0; color:var(--forest); line-height:1.1;
}
.card p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.45; flex:1; }
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--line);
}
.meta{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--faint); text-transform:lowercase; }
.open{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:14px; color:var(--forest); transition:.18s;
}
.open svg{ width:15px; height:15px; transition:transform .2s; }
.card:hover .open{ color:var(--cat); }
.card:hover .open svg{ transform:translateX(4px); }

.empty{ text-align:center; padding:80px 20px; color:var(--faint); grid-column:1/-1; }
.empty .big{ font-family:var(--font-display); font-size:24px; color:var(--forest); margin-bottom:8px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--paper); }
.footer-inner{
  max-width:1240px; margin:0 auto; padding:34px 28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.footer-inner .brand .wordmark{ font-size:18px; }
.footer-inner .brand .mark{ width:24px; height:24px; }
.copy{ margin-left:auto; font-size:12.5px; color:var(--faint); font-family:'Space Mono',monospace; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .header-inner{ padding:0 18px; gap:14px; height:60px; }
  .brand .wordmark{ font-size:20px; }
  .intro{ padding:36px 18px 22px; }
  .toolbar{ top:60px; }
  .toolbar-inner{ padding:15px 18px 14px; }
  .search-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .search{ max-width:none; height:46px; }
  .count{ align-self:flex-start; }
  .chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin:0 -18px; padding-left:18px; padding-right:18px; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .grid-wrap{ padding:22px 18px 56px; }
  .footer-inner{ padding:26px 18px; }
  .copy{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }