/* search.css — /search (live-filter list + tag cloud) and /tag/<slug>/ pages (GARDEN-052).
   Loaded as pageCss on those routes. The ⌘K overlay + .htag pills are global (static.css). */

.search-page main,
.tag-page main{max-width:900px;margin:0 auto;padding:0 24px}

/* ─── /search hero + input ─── */
.srch-hero{max-width:680px;margin:0 auto;padding:76px 0 22px;text-align:center}
.srch-hero .kick{display:block;margin-bottom:13px}
.srch-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,48px);line-height:1.08;letter-spacing:-.025em;margin:0 0 22px;color:var(--ink)}
.srch-hero h1 em{font-style:italic;color:var(--accent)}
.srch-box{display:flex;align-items:center;gap:11px;max-width:540px;margin:0 auto;padding:14px 18px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:14px;transition:border-color .15s ease}
.srch-box:focus-within{border-color:var(--accent)}
.srch-box svg{width:19px;height:19px;color:var(--ink-mute);flex:0 0 auto}
.srch-box input{flex:1;border:0;background:none;outline:none;font-family:var(--sans);font-size:16px;color:var(--ink)}

/* ─── tag cloud ─── */
.srch-tags{margin:30px auto 8px;max-width:760px;text-align:center}
.srch-tags h2,.srch-list h2{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 16px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.sc-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--accent);text-decoration:none;background:color-mix(in oklab,var(--accent) 7%,transparent);border:1px solid color-mix(in oklab,var(--accent) 22%,transparent);border-radius:999px;padding:6px 13px;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.sc-tag:hover{background:color-mix(in oklab,var(--accent) 15%,transparent);border-color:var(--accent);transform:translateY(-1px)}
.sc-tag span{font-size:10.5px;color:var(--ink-mute);background:var(--paper);border-radius:999px;padding:1px 7px}

/* ─── /search full list (live-filtered) + /tag list ─── */
.srch-list{margin:36px auto 8px;max-width:760px}
.sr-grid,.tg-grid{display:flex;flex-direction:column;gap:11px}
.sr-item,.tg-item{display:block;padding:17px 20px;border:1px solid var(--line);border-radius:13px;background:var(--raise);box-shadow:var(--shadow-sm);text-decoration:none;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.sr-item:hover,.tg-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.sr-sec,.tg-sec{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--accent);margin-bottom:5px}
.sr-item b,.tg-item b{display:block;font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.28;color:var(--ink);margin-bottom:4px}
.sr-sub,.tg-sub{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.sr-none{text-align:center;font-family:var(--sans);font-size:15px;color:var(--ink-mute);padding:26px 0}

/* ─── /tag hero + back ─── */
.tag-hero{max-width:680px;margin:0 auto;padding:76px 0 30px;text-align:center}
.tag-hero .kick{display:block;margin-bottom:13px}
.tag-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.022em;margin:0 0 12px;color:var(--ink)}
.tag-hero h1 em{font-style:normal;font-family:var(--mono);color:var(--accent);font-size:.86em}
.tag-meta{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.tg-grid{max-width:760px;margin:0 auto}
.tag-back{max-width:760px;margin:26px auto 4px;text-align:center}
.tag-back a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);text-decoration:none}
.tag-back a:hover{color:var(--accent)}
.tag-back a .arr{width:1em;height:1em}