/* ═══════════════════════════════════════════════════════════════════════
   THE BANNER — one bar, every page.                   22 September 2026

   The homepage used to build its own bar inline while the other 32 pages
   got theirs from atelier.js. The two drifted apart: the homepage ran edge
   to edge at 100px tall, the rest sat inside a 1560px centred column at
   84px tall. That 16px and that 180px of inset are what read as "squished".

   This file is now the only place the banner is styled, and every page
   uses the same markup:

     header.nav > .wrap.nav-in > a.brandmark + nav.nav-links + button.menu-btn

   Change the bar here and nowhere else. Do not add banner rules to
   atelier.css, compose.css, upgrade.css or an inline <style>.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bar-pad-y:clamp(18px,2.2vw,28px);
  --bar-gut:clamp(22px,5.4vw,104px);
}

.nav{
  position:sticky;top:0;z-index:120;
  background:rgba(250,250,249,.92);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line,#E3E3E1);
}

/* Edge to edge, not a centred column. The other pages' markup carries a
   .wrap class on this element, so its max-width is undone here rather
   than removed from 32 files of HTML. */
.nav .nav-in,.nav .wrap.nav-in{
  max-width:none;width:100%;margin:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,44px);
  padding:var(--bar-pad-y) var(--bar-gut);
}

.nav .brandmark{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ink,#121212)}
.nav .brandmark img{height:28px;width:auto;display:block}

.nav .mark-desc{
  font-family:'Jost',var(--sans,sans-serif);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;color:var(--muted,#6B6B69);
  border-left:1px solid var(--line,#E3E3E1);
  padding-left:16px;margin-left:16px;
}

.nav .nav-links{display:flex;align-items:center;margin-left:auto;gap:clamp(18px,2.4vw,40px)}
.nav .nav-links a{
  font-family:'Jost',var(--sans,sans-serif);
  font-size:.75rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--body,#333333);opacity:1;
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .4s,border-color .4s;
}
.nav .nav-links a:hover{color:var(--ink,#121212)}
.nav .nav-links a.active,.nav .nav-links a[aria-current="page"]{
  color:var(--ink,#121212);border-bottom-color:var(--ink,#121212);
}

.nav .menu-btn{
  display:inline-flex !important;align-items:center;
  background:none;border:0;cursor:pointer;
  margin:0 0 0 clamp(18px,2.4vw,40px);padding:10px 0;
  min-height:44px;min-width:0;
  font-family:'Jost',var(--sans,sans-serif);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink,#121212);opacity:.9;
}
.nav .menu-btn:hover{opacity:1}
.nav .menu-btn::before{
  content:"";display:inline-block;width:16px;height:9px;margin-right:12px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.85;
}

@media(max-width:900px){ .nav .nav-links{display:none} }
@media(max-width:600px){ .nav .mark-desc{display:none} }