/* home.css — search-first landing */
.home{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:9vh 16px 80px}
.home-brand{display:block;margin-bottom:26px}
.home-brand img{height:60px;width:auto;display:block}

.home-box{display:flex;align-items:center;gap:8px;width:100%;max-width:500px;background:var(--surface);border:1.5px solid var(--pine);border-radius:999px;padding:0 7px 0 20px;height:54px}
.home-box input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:16px;color:var(--ink);padding:0}
.home-box button{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;background:var(--coral);color:#fff;border-radius:999px;cursor:pointer}
.home-box button:hover{background:var(--coral-ink)}
.home-box button svg{width:19px;height:19px}

.home-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 14px;max-width:540px;margin-top:24px}
.home-links a{color:var(--muted);font-size:13.5px;text-decoration:none}
.home-links a:hover{color:var(--pine)}
.home-dot{color:var(--line-2);font-size:12px}

/* Search-first home: the page itself carries the logo, so the header's logo is
   redundant here (all widths). Background matches the header for a seamless top. */
body.mode-home .head .brand{display:none}
body.mode-home{background:var(--surface)}

@media (min-width:861px){
  body.mode-home .head-cats,
  body.mode-home .head-loc{display:none}
}

/* Brand is hidden on the home, so the avatar must be pinned to the last grid
   column on mobile — otherwise it auto-places into the empty centre. */
@media (max-width:860px){
  body.mode-home .acct{grid-column:3}
}

/* Seamless top on the home: no divider between header and content. */
body.mode-home .head{border-bottom:0}