/* Home page: plain and quiet. Light paper background, dark ink, one search box. */
body.home {
  --ink: #1d1a16; --soft: #5f5a52; --faint: #9a948a; --line: #e6e1d8; --paper: #faf8f4; --card: #ffffff;
  --copper: #c07a45;
  color-scheme: light; background: var(--paper); color: var(--ink);
  font: 16px/1.55 'DM Sans', system-ui, sans-serif; font-synthesis: none;
}
.home a { color: inherit; }
.home .period { color: var(--copper); }

/* header */
.top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) 0; }
.wordmark { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-decoration: none; }
.auth { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#user:empty { display: none; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color .15s, background .15s; }
.pill:hover { border-color: var(--faint); }
.pill.solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill.solid:hover { background: #3a352f; border-color: #3a352f; }
.pill svg, .ask button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 120px 20px 120px; }
.home h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(36px, 5.2vw, 64px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.home h1 > span { display: block; }

.search { position: relative; width: min(620px, 100%); margin-top: 40px; text-align: left; }
.ask { display: flex; gap: 6px; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  transition: border-color .15s, box-shadow .15s; }
.ask:focus-within { border-color: var(--faint); box-shadow: 0 0 0 3px #1d1a1610; }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; padding: 0 12px; }
.ask input::placeholder { color: var(--faint); }
.ask button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .15s; }
.ask button:hover { background: #3a352f; }

.results { position: absolute; z-index: 4; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  max-height: min(56vh, 520px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 12px 32px -12px #1d1a1630; }
.results li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.results li[aria-selected=true], .results li:hover { background: var(--paper); }
.r-title { font-size: 15px; line-height: 1.35; font-weight: 500; }
.r-meta { font-size: 12.5px; color: var(--copper); }
.r-snip { font-size: 13px; line-height: 1.45; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tip { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; color: var(--soft); }

/* While suggestions are open the page moves up a little so the list has room. */
body.searching .hero { justify-content: flex-start; padding-top: max(110px, 14vh); }

footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 20px;
  padding: 0 20px max(24px, env(safe-area-inset-bottom)); color: var(--faint); font-size: 13px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

.home a:focus-visible, .home button:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

@media (max-width: 600px) {
  .wordmark { font-size: 13px; }
  .pill { height: 34px; padding: 0 12px; font-size: 13px; }
  .hero { padding: 100px 16px 100px; }
  .home h1 > span { display: inline; }
  .ask input { padding: 0 8px; }
  .ask button { padding: 0 14px; }
}