@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root { --navy: #234f8f; --orange: #e77b32; --cream: #fbf6ee; --paper: #f5ead9; --ink: #182231; }
html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.eyebrow { color: var(--navy); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.portal-board { background-image: linear-gradient(rgba(35,79,143,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(35,79,143,.04) 1px, transparent 1px); background-size: 20px 20px; }
.directory-card, .listing-card { background: #fff; border: 1px solid rgba(24,34,49,.1); border-radius: 12px; padding: 20px; transition: transform .18s ease, box-shadow .18s ease; }
.directory-card:hover, .listing-card:hover { box-shadow: 0 14px 35px rgba(24,34,49,.09); transform: translateY(-3px); }
.directory-card > span, .listing-card .tag { color: var(--navy); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.directory-card h3, .listing-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-top: 13px; }
.directory-card p, .listing-card p { color: rgba(24,34,49,.62); font-size: 12px; line-height: 1.5; margin-top: 10px; }
.directory-card a, .listing-card a { color: var(--navy); display: inline-block; font-size: 12px; font-weight: 800; margin-top: 18px; }
.dark-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 20px; }
.dark-card span { color: var(--orange); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; }
.dark-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.04em; margin-top: 12px; }
.dark-card p { color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.5; margin-top: 8px; }
.field { color: var(--ink); display: flex; flex-direction: column; font-size: 11px; font-weight: 800; gap: 6px; }
.field input, .field select, .field textarea { background: #fff; border: 1px solid rgba(24,34,49,.16); border-radius: 6px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; padding: 11px 12px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35,79,143,.14); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }