/* 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(253,247,247,.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(253,247,247,.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(253,247,247,.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(253,247,247,.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(253,247,247,.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)}


/* ---- the bar has to fit -------------------------------------------------
   Six nav items, a 340px search field and two buttons want about 1520px of
   room, so on any laptop narrower than that the Subscribe button was cut off
   the right edge. Nothing is dropped until it has to be: the gutter tightens
   first, then the search field, then the nav's own padding, and only then
   does the syllabus lose its label. */
@media(max-width:1560px){
  #topbar{gap:1.15rem;padding-left:clamp(1rem,2.4vw,2rem);padding-right:clamp(1rem,2.4vw,2rem)}
  .search-wrap{width:clamp(160px,18vw,270px);padding:.5rem .9rem}
  nav.houses button{padding:.35rem .52rem;font-size:.92rem}
  .tools{gap:.55rem}
}
@media(max-width:1340px){
  #topbar{gap:.9rem}
  .search-wrap{width:clamp(130px,14vw,200px);padding:.45rem .75rem}
  nav.houses button{padding:.32rem .4rem;font-size:.88rem}
  .btn-syllabus{padding:.5rem .8rem;font-size:.88rem}
  .btn-sub{padding:.5rem .9rem;font-size:.88rem}
}
@media(max-width:1400px){
  .btn-syllabus span.syl-label{display:none}
  .btn-syllabus{padding:.5rem .62rem}
  .search-wrap{width:clamp(110px,11vw,150px)}
}
/* and a floor under all of it: the field gives up its last pixels before the
   bar is allowed to push anything past its own padding */
.tools{flex-shrink:0}
.search-wrap{min-width:0;flex-shrink:1}

/* ---- the bar, rebuilt ---------------------------------------------------
   One row that runs the full width: wordmark, then three destinations, then
   the tools hard right. The page you are on is a filled pill rather than an
   underline, the search field stays folded behind its glass until it is
   wanted, and the account sits behind an avatar. */
#topbar{gap:0}
#topbar .brand{margin-right:2.2rem}
nav.houses{gap:.15rem}
nav.houses button{font-size:.94rem;font-weight:400;letter-spacing:.005em;
  padding:.44rem .92rem;border-radius:999px;color:rgba(253,247,247,.72);transition:.18s}
nav.houses button:hover{color:#fff;background:rgba(253,247,247,.08)}
nav.houses button.active{font-weight:600;color:var(--light);
  background:rgba(253,247,247,.14)}
nav.houses button.active::after{display:none}
.solid nav.houses button{color:var(--ink-dim)}
/* a dark-ink wash is invisible on a dark bar, so the pill takes a token that
   flips with the theme instead of a fixed rgba */
.solid nav.houses button:hover{color:var(--ink);background:var(--bg-soft)}
.solid nav.houses button.active{color:var(--ink);background:var(--bg-soft)}

.tools{gap:.5rem}
.iconbtn{width:38px;height:38px;border-radius:50%;border:0;background:none;cursor:pointer;
  color:rgba(253,247,247,.85);display:flex;align-items:center;justify-content:center;
  padding:0;transition:.18s}
.iconbtn svg{width:19px;height:19px}
.iconbtn:hover{background:rgba(253,247,247,.12);color:#fff}
.solid .iconbtn{color:var(--ink-dim)}
.solid .iconbtn:hover{background:rgba(50,31,18,.08);color:var(--ink)}

/* the field grows out of the icon; nothing is dropped, it is just folded */
.searchbox{display:flex;align-items:center;border:1px solid transparent;border-radius:999px;
  transition:border-color .2s,background .2s,width .24s cubic-bezier(.2,.7,.3,1)}
.searchbox input{width:0;padding:0;border:0;outline:0;background:none;font-family:var(--font);
  font-size:.92rem;color:var(--light);transition:width .24s cubic-bezier(.2,.7,.3,1),
  padding .24s;min-width:0}
.searchbox input::placeholder{color:rgba(253,247,247,.5)}
.searchbox.open{border-color:rgba(253,247,247,.4);background:rgba(40,24,12,.45)}
.searchbox.open input{width:clamp(130px,17vw,250px);padding:.42rem .9rem .42rem .2rem}
.solid .searchbox input{color:var(--ink)}
.solid .searchbox input::placeholder{color:var(--muted)}
.solid .searchbox.open{border-color:var(--accent-deep);background:transparent}

.account{position:relative}
.avatar{display:flex;align-items:center;gap:.3rem;border:0;background:none;cursor:pointer;padding:0 0 0 .2rem}
.avatar .face{width:34px;height:34px;border-radius:5px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:var(--on-accent);
  font-family:var(--font);font-weight:700;font-size:.95rem;letter-spacing:0}
.avatar .chev{width:15px;height:15px;color:rgba(253,247,247,.8);transition:transform .22s}
.solid .avatar .chev{color:var(--ink-dim)}
.account.open .chev{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + .7rem);right:0;min-width:232px;padding:.45rem 0;
  background:var(--barbg);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.6);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.account.open .menu{opacity:1;visibility:visible;transform:none}
.menu button{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:none;
  cursor:pointer;padding:.62rem 1.1rem;font-family:var(--font);font-size:.9rem;
  color:var(--ink-soft);text-align:left;transition:.15s}
.menu button:hover{background:rgba(187,113,122,.14);color:var(--ink)}
.menu .syl-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:700;
  display:none;align-items:center;justify-content:center;line-height:1}
.menu.has .syl-count{display:inline-flex}
.menu .sep{height:1px;margin:.4rem 0;background:var(--line)}

@media(max-width:1100px){
  #topbar .brand{margin-right:1.2rem}
  nav.houses button{font-size:.88rem;padding:.42rem .66rem}
}
@media(max-width:760px){
  #topbar .brand .s{display:none}
  nav.houses button{font-size:.82rem;padding:.4rem .5rem}
}


/* The bar is transparent until you scroll, and its type was written for a dark
   page sitting under it. On the light theme the page behind it is off-white,
   so that type was white on white. Give the light theme ink. */
:root:not([data-theme="dark"]) .brand .m{color:var(--ink)}
:root:not([data-theme="dark"]) .brand .m b{color:var(--accent)}
:root:not([data-theme="dark"]) .brand .s{color:var(--muted)}
:root:not([data-theme="dark"]) nav.houses button{color:var(--ink-dim)}
:root:not([data-theme="dark"]) nav.houses button:hover{color:var(--ink);background:rgba(0,0,0,.06)}
:root:not([data-theme="dark"]) nav.houses button.active{color:var(--accent)}
:root:not([data-theme="dark"]) .search-wrap input{color:var(--ink)}
:root:not([data-theme="dark"]) .search-wrap input::placeholder{color:var(--muted)}
:root:not([data-theme="dark"]) .search-wrap svg{stroke:var(--ink-dim)}