/* The fixed header: brand, house nav, search, buttons
   Lines 57-106 of the original index.html. */

/* ---------------- top bar ---------------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:1.6rem;
  padding:1.1rem var(--gut);
  background:linear-gradient(rgba(40,24,12,.62),rgba(40,24,12,0));transition:background .3s,padding .3s}
#topbar.solid{background:var(--barbg);border-bottom:1px solid var(--line);padding-top:.8rem;padding-bottom:.8rem;
  box-shadow:0 12px 30px -24px rgba(50,31,18,.6);backdrop-filter:blur(8px)}
.brand{display:flex;flex-direction:column;line-height:.95;cursor:pointer;flex-shrink:0}
.brand .m{font-family:var(--font);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;color:var(--light)}
.brand .m b{color:var(--accent-hi);font-style:normal;font-weight:700}
.brand .s{font-family:var(--font);text-transform:uppercase;letter-spacing:.4em;font-size:.5rem;
  color:rgba(246,241,224,.6);margin-top:.3rem;padding-left:.15rem;font-weight:600}
.solid .brand .m{color:var(--ink)} .solid .brand .m b{color:var(--accent)} .solid .brand .s{color:var(--muted)}
nav.houses{display:flex;gap:.2rem;flex-wrap:nowrap;flex-shrink:0}
nav.houses button{background:none;border:0;color:rgba(246,241,224,.78);font-family:var(--font);font-size:.95rem;
  font-weight:500;letter-spacing:0;padding:.35rem .7rem;cursor:pointer;border-radius:2px;transition:.2s;position:relative}
nav.houses button:hover{color:#fff}
nav.houses button.active{color:var(--accent-hi)}
nav.houses button.active::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:0;height:2px;border-radius:2px;
  background:var(--accent-hi)}
.solid nav.houses button{color:var(--ink-dim)} .solid nav.houses button:hover{color:var(--ink)}
.solid nav.houses button.active{color:var(--accent)} .solid nav.houses button.active::after{background:var(--accent)}
.spacer{flex:1}
.tools{display:flex;align-items:center;gap:.7rem}
.search-wrap{display:flex;align-items:center;gap:.55rem;border:1px solid rgba(246,241,224,.42);border-radius:6px;
  padding:.5rem 1.15rem;background:rgba(40,24,12,.32);transition:.25s;width:clamp(190px,22vw,340px);min-width:150px}
.search-wrap:focus-within{border-color:var(--accent-hi)}
.search-wrap svg{width:15px;height:15px;stroke:rgba(246,241,224,.65);flex-shrink:0}
.search-wrap input{background:none;border:0;outline:0;color:var(--light);font-family:var(--font);font-size:.95rem;width:100%}
.search-wrap input::placeholder{color:rgba(246,241,224,.55)}
.solid .search-wrap{border-color:var(--accent-deep);background:transparent}
.solid .search-wrap svg{stroke:var(--muted)} .solid .search-wrap input{color:var(--ink)}
.solid .search-wrap input::placeholder{color:var(--muted)}
.btn-gold{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:0;background:var(--accent);
  color:var(--on-accent);border-radius:6px;font-family:var(--font);letter-spacing:0;font-size:.95rem;font-weight:600;
  padding:.55rem 1.35rem;transition:.2s;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(135,74,84,.7)}
.btn-gold:hover{background:var(--accent-deep);transform:translateY(-1px)}
.theme-toggle{width:40px;height:40px;border-radius:6px;border:1px solid rgba(246,241,224,.32);background:rgba(40,24,12,.25);
  color:var(--light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;padding:0}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle:hover{border-color:var(--accent-hi);color:var(--accent-hi)}
.solid .theme-toggle{border-color:var(--line);background:transparent;color:var(--ink-dim)}
.solid .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
.theme-fab{position:fixed;right:1.15rem;bottom:1.15rem;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--barbg);color:var(--ink-dim);box-shadow:0 8px 24px rgba(0,0,0,.32);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer}
.theme-fab:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.theme-fab svg{width:20px;height:20px}
@media(max-width:600px){.theme-fab{right:.9rem;bottom:.9rem;width:44px;height:44px}}