/* Hallmark · shape: Index-First Workbench · genre: atmospheric · theme: Lumen (deal 2/3, seed tools-directory-blog-usa-5f0d·0339e300·2026-11-13·r0) · job: try · draw: manual
 * hero: Settled, search is the hero · nav: edge-aligned wordmark + one action · footer: mast, wordmark over links · imagery: none, product is the search · signature: live task search in the hero
 * axes: dark/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · weakest: E, no real photography for a directory so the search itself carries the first screen */
/* waive 38iii: Lumen theme names the single rose verb in the hero head as its signature */
@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3, .nav, .btn, .label { text-transform: lowercase; }
.verb { display: inline-block; color: var(--color-accent-2); }
.verb::after { content: ""; display: block; height: var(--rule-hair); background: currentColor; transform-origin: left; animation: draw var(--dur-long) var(--ease-out) both; }
@keyframes draw { from { transform: scaleX(0); } }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; letter-spacing: var(--tracking-display); }
.wordmark span { color: var(--color-accent); }
.nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); }
.nav-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-weight: 500; font-size: var(--text-sm); text-decoration: none; border: 0; cursor: pointer; min-height: 44px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); color: var(--color-ink); background: transparent; }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.chip:active { transform: scale(0.98); }
input:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }

.hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); max-width: 920px; }
.hero h1 { max-width: 16ch; }
.lead { color: var(--color-ink-2); }
.search-well { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); background-image: linear-gradient(var(--rule-blueprint) 1px, transparent 1px), linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px); background-size: 48px 48px; }
.search-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.search-input { flex: 1 1 320px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); color: var(--color-ink); padding: var(--space-md); min-height: 52px; }
.search-input::placeholder { color: var(--color-muted); }
.label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.chip { border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); background: transparent; color: var(--color-ink); padding: var(--space-xs) var(--space-md); cursor: pointer; font-size: var(--text-sm); min-height: 36px; }
.chip:hover, .chip[aria-pressed="true"] { background: var(--color-paper-3); }
.search-results { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.result-row { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); }
.result-row a { font-weight: 500; }
.readout { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-ink-2); }
.badge { font-size: var(--text-xs); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); padding: var(--space-2xs) var(--space-sm); white-space: nowrap; color: var(--color-ink-2); }
.badge--free { color: var(--color-live); }

.section { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.section-head p { color: var(--color-muted); margin-top: var(--space-xs); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.tool { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); min-width: 0; }
.tool h3 { margin-bottom: var(--space-xs); }
.tool p { color: var(--color-ink-2); font-size: var(--text-sm); }
.tool-meta { display: flex; gap: var(--space-xs); align-items: center; margin-top: var(--space-md); flex-wrap: wrap; }
.cat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.cat-row { display: flex; justify-content: space-between; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; gap: var(--space-md); }
.cat-row:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.blog-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.blog-item h3 a { text-decoration: none; }
.blog-item p { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-xs); }
.newsletter { background: var(--color-paper-2); }
.newsletter-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
.news-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.news-form input { flex: 1 1 240px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); color: var(--color-ink); padding: var(--space-md); min-height: 52px; }
.toggle-row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.toggle { width: 52px; height: 28px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); background: var(--color-paper); position: relative; cursor: pointer; border: 0; }
.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-muted); transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.toggle[aria-pressed="true"]::after { transform: translateX(24px); background: var(--color-accent); }
footer { padding-block: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap-columns); }
.footer-grid a { display: block; color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); margin-top: var(--space-xs); }
.footer-grid a:hover { color: var(--color-ink); }
.muted { color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 60rem) { .grid, .blog-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .newsletter-inner, .footer-grid { grid-template-columns: minmax(0, 1fr); } .nav-links a:not(.btn) { display: none; } }
@media (max-width: 40rem) { .grid, .blog-row, .cat-list { grid-template-columns: minmax(0, 1fr); } .hero { padding-block: var(--space-xl); } }
@media (prefers-reduced-motion: reduce) { .verb::after { animation: none; } .toggle::after { transition: none; } }