/* ============================================================
   Yoozit shared site chrome - SINGLE SOURCE OF TRUTH
   The top notice bar + sticky header + nav for every public page.
   Edit the header/nav ONCE here. Never redefine .notice, header,
   nav, .nav-links, .nav-right, .logo or .loc inside a page's
   inline <style> or in stories.css - that is what caused the
   headers to drift apart between pages.
   Relies on each page's :root vars (--forest, --clay, --ink, etc.).
   ============================================================ */

/* TOP NOTICE */
.notice{background:var(--forest);color:rgba(255,255,255,.92);font-size:12.5px;text-align:center;padding:9px 14px;font-weight:500}

/* HEADER + NAV */
header{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s ease,background .3s ease,border-color .3s ease}
header.scrolled{background:rgba(250,248,243,.96);box-shadow:0 8px 30px -14px rgba(31,40,30,.32);border-bottom-color:transparent}
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;transition:height .3s ease}
header.scrolled nav{height:62px}
.logo{font-size:26px;font-weight:700;letter-spacing:-.035em;color:var(--forest);line-height:1;display:inline-flex;align-items:center}
.logo .dot{color:var(--clay)}
.nav-links{display:flex;gap:30px;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav-links a{position:relative;padding:4px 2px;transition:color .18s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-right{display:flex;gap:14px;align-items:center;justify-self:end}
.nav-right .btn{transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.nav-right .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(34,34,32,.5)}
.loc{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--muted)}
.loc svg{width:15px;height:15px;stroke:var(--clay);fill:none;stroke-width:1.7}
@media(max-width:760px){.nav-links,.loc{display:none}}