@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#17221e; --paper:#fbf7ee; --lime:#d5f66b; --orange:#f66a3f; --muted:#66736c; --line:#d9dfd3; --card:#fffdf8; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,sans-serif; } a { color:inherit; } .site-header,.admin-shell,.hero,.category-nav,.catalogue,.asset-page,.site-footer { max-width:1180px; margin-inline:auto; padding-inline:24px; } .site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; } .brand { font:700 25px Fraunces,serif; text-decoration:none; letter-spacing:-1px; } .brand span { color:var(--orange); } .admin-link,.back-link { color:var(--muted); font-size:14px; text-decoration:none; } .hero { padding-top:74px; padding-bottom:64px; background:radial-gradient(circle at 75% 25%,#e5f9a7 0,transparent 30%); } .eyebrow { text-transform:uppercase; letter-spacing:.12em; font:500 12px 'DM Mono',monospace; color:#58724f; } h1,h2 { font-family:Fraunces,serif; letter-spacing:-.045em; } .hero h1 { font-size:clamp(46px,8vw,92px); line-height:.95; margin:12px 0 20px; max-width:700px; } .hero > p:not(.eyebrow) { max-width:570px; color:var(--muted); line-height:1.7; } .search-form { max-width:650px; display:flex; margin-top:32px; background:white; border:1px solid var(--ink); padding:5px; box-shadow:5px 5px 0 var(--ink); } input,textarea,select { width:100%; border:1px solid #bdc7be; background:#fffefa; padding:12px; border-radius:4px; font:inherit; color:var(--ink); } .search-form input { border:0; padding:13px 16px; outline:0; } button,.button { background:var(--ink); border:1px solid var(--ink); color:white; padding:12px 20px; font:600 14px Manrope,sans-serif; text-decoration:none; cursor:pointer; border-radius:3px; } .category-nav { display:flex; gap:9px; flex-wrap:wrap; padding-top:26px; padding-bottom:30px; border-top:1px solid var(--line); } .category-nav a { text-decoration:none; border:1px solid var(--line); padding:8px 13px; border-radius:30px; font-size:13px; } .category-nav a.active { background:var(--lime); border-color:var(--ink); } .catalogue { padding-bottom:80px; } .catalogue-heading p { color:var(--muted); font:13px 'DM Mono',monospace; } .asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .asset-card { background:var(--card); border:1px solid var(--line); } .asset-preview { height:230px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#e6f2de,#f9ded2); text-decoration:none; } .asset-preview img,.asset-visual img { width:100%; height:100%; object-fit:contain; } .asset-preview span,.asset-visual span { font:700 80px Fraunces,serif; color:#5b715a; } .asset-card-body { padding:16px; } .asset-card-body p { margin:0 0 6px; color:#67806d; text-transform:uppercase; font:11px 'DM Mono',monospace; } .asset-card h2 { margin:0; font-size:22px; line-height:1.1; } .asset-card h2 a { text-decoration:none; } .empty-state { background:#eef5e7; padding:52px; text-align:center; } .pagination { display:flex; gap:8px; margin-top:35px; } .pagination a { text-decoration:none; padding:8px 12px; border:1px solid var(--line); } .pagination .active { background:var(--ink); color:white; } .asset-page { padding-block:32px 80px; } .back-link { display:inline-block; margin-bottom:25px; } .asset-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; } .asset-visual { min-height:470px; display:grid; place-items:center; background:linear-gradient(135deg,#e2f0d4,#fae1d0); border:1px solid var(--line); overflow:hidden; } .asset-details h1 { font-size:clamp(40px,5vw,63px); margin:8px 0 25px; line-height:1; } .description { line-height:1.75; color:#41514a; } .tags { display:flex; gap:8px; flex-wrap:wrap; } .tags a { background:#e9f2e2; padding:5px 8px; text-decoration:none; font-size:13px; } .asset-meta { border-block:1px solid var(--line); padding-block:15px; } .asset-meta div { display:flex; justify-content:space-between; padding:7px 0; } .asset-meta dt { color:var(--muted); } .asset-meta dd { margin:0; } .attribution { padding:14px; background:#fff0d9; font-size:14px; } .download-list { margin-top:27px; } .download-list h2 { font-size:27px; } .download-row { display:flex; justify-content:space-between; align-items:center; gap:20px; border-block:1px solid var(--line); margin-top:-1px; padding:14px 0; text-decoration:none; } .download-row small { display:block; color:var(--muted); margin-top:4px; font-size:12px; } .site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding-top:28px; padding-bottom:35px; } .admin-page { background:#f0f3ec; } .admin-shell { padding-top:50px; padding-bottom:70px; } .admin-shell > .brand { display:inline-block; margin-bottom:55px; } .admin-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; } .admin-header h1 { font-size:45px; margin:8px 0 0; } .button.subtle { color:var(--ink); background:transparent; } .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .stat-grid div { background:var(--lime); padding:20px; } .stat-grid strong { display:block; font:600 42px Fraunces,serif; } .stat-grid span { font-size:13px; } .admin-actions { display:flex; gap:10px; flex-wrap:wrap; margin:28px 0; } .admin-table-wrap,.admin-form,.auth-card { background:#fffefa; border:1px solid var(--line); padding:25px; } .admin-table-wrap { margin-top:22px; overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:14px; } th,td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:12px; text-transform:uppercase; } .status { padding:4px 8px; font:11px 'DM Mono',monospace; background:#eee; } .status.published,.status.active { background:#dff6a1; } .status.draft { background:#ffe5ae; } .status.disabled { background:#f7c9c0; } .admin-form { max-width:760px; } .admin-form h2 { margin-top:0; } .admin-form form,.asset-form { display:grid; gap:16px; } label { display:grid; gap:6px; font-size:13px; font-weight:600; } label small { color:var(--muted); font-weight:400; } textarea { resize:vertical; } .form-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .auth-card { max-width:490px; margin:auto; } .auth-card h1 { font-size:39px; margin:8px 0; } .auth-card form { display:grid; gap:16px; margin-top:25px; } .notice { padding:12px 15px; border-left:4px solid; } .notice.error { background:#ffe1dc; border-color:#b93420; } .notice.success { background:#e1f5cf; border-color:#598b2a; }
@media (max-width:720px) { .site-header,.admin-shell,.hero,.category-nav,.catalogue,.asset-page,.site-footer { padding-inline:16px; } .hero { padding-top:42px; } .asset-grid { grid-template-columns:1fr; } .asset-layout { grid-template-columns:1fr; gap:28px; } .asset-visual { min-height:300px; } .stat-grid { grid-template-columns:1fr; } .search-form { box-shadow:3px 3px 0 var(--ink); } .download-row { align-items:start; flex-direction:column; } }