:root {
  --bg: #0B0F14;
  --card: #151C24;
  --card-hover: #1B2533;
  --line: #2C3A4A;
  --ink: #E0FBFC;
  --muted: #8FA3B8;
  --accent: #6CC6D9;
  --private: #d97706;
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
header.site { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header.site .name { font-weight: 600; text-decoration: none; letter-spacing: .01em; }
header.site nav { display: flex; gap: 20px; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--ink); }

h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 600; margin: 48px 0 8px; }
.lede { color: var(--muted); margin: 0 0 32px; max-width: 60ch; line-height: 1.5; }

#cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding-bottom: 64px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: background .15s, transform .15s; }
.card:hover { background: var(--card-hover); transform: translateY(-2px); }
.card.private { border: 2px solid var(--private); }
.card-link { display: block; text-decoration: none; }
.thumb { position: relative; aspect-ratio: 16 / 9; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill { position: absolute; top: 10px; left: 10px; background: var(--private); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.body { padding: 14px 16px 16px; }
.body h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }
.request-access { display: inline-block; margin: 0 16px 16px; color: var(--private); font-size: 14px; font-weight: 600; text-decoration: none; }
.request-access[hidden] { display: none; }
.empty { color: var(--muted); }

.home { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.home .links { display: flex; gap: 16px; flex-wrap: wrap; }
.home .links a { border: 1px solid var(--line); border-radius: 8px; padding: 12px 20px; text-decoration: none; }
.home .links a:hover { border-color: var(--accent); }