/* Шапка и мобильная навигация. */
.site-header {
  position:sticky; top:0; z-index:var(--z-header); height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px,2vw,48px); padding-inline:max(var(--gutter),(100% - 2880px) / 2);
  transition:height var(--t-mid) var(--ease),background-color var(--t-mid),box-shadow var(--t-mid);
}
.site-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-gold),transparent); opacity:0; transition:opacity var(--t-mid); pointer-events:none; }
.site-header.is-scrolled { height:calc(var(--header-h) * .8); background:rgb(13 12 20 / .92); box-shadow:0 10px 40px #0007; }
.site-header.is-scrolled::after,.site-header:has(.menu-open)::after { opacity:1; }
.site-header:has(.menu-open) { background:rgb(13 12 20 / .97); }
@supports (backdrop-filter:blur(1px)) { @media (min-width:768px) { .site-header.is-scrolled { background:rgb(14 13 22 / .76); backdrop-filter:blur(14px) saturate(1.2); } } }

.brand { display:flex; align-items:center; gap:12px; flex:none; min-height:44px; }
.brand img { width:clamp(34px,1.4vw + 20px,58px); height:auto; filter:drop-shadow(0 0 16px #deb45a40); transition:filter var(--t-mid); }
.brand:hover img { filter:drop-shadow(0 0 22px #deb45a88); }
.brand strong { display:block; font:600 clamp(22px,.7vw + 17px,40px)/1 var(--serif); letter-spacing:.16em; }
.brand small { display:block; margin-top:5px; font:600 var(--fs-micro)/1 var(--sans); letter-spacing:.62em; color:var(--gold); }

.main-nav { grid-column:2; display:flex; align-items:center; gap:clamp(4px,1vw,28px); }
.main-nav>a,.main-nav>button { position:relative; display:inline-flex; align-items:center; gap:.4em; min-height:44px; padding:0 .55em; font:600 calc(var(--fs-control) * .92)/1 var(--display); letter-spacing:.04em; color:var(--text-soft); white-space:nowrap; transition:color var(--t-fast); }
.main-nav>:is(a,button):not(:disabled):hover,.main-nav>[aria-current] { color:var(--gold-bright); }
/* The Asteria star marks the section in view. */
.main-nav>a::after { content:''; position:absolute; left:50%; bottom:2px; width:9px; height:9px; translate:-50% 0; background:var(--gold); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; scale:0; transition:scale var(--t-mid) var(--ease-spring); }
.main-nav>a[aria-current]::after { scale:1; }
.main-nav .ui-icon { width:1.1em; height:1.1em; color:var(--gold); }

.header-actions { grid-column:3; justify-self:end; display:flex; align-items:center; gap:10px; }
.button-account { --c:6px; min-height:46px; padding:.35em 1.1em; font-size:calc(var(--fs-control) * .9); gap:.55em; }
.account-emblem .ui-icon { width:1.2em; height:1.2em; color:var(--gold); }
.menu-toggle { display:none; }

/* Wide screens show the six section links; the extra entries live in the menu panel only. */
@media (min-width:1280px) { .main-nav .nav-extra { display:none; } }
@media (max-width:1279.98px) {
  .menu-toggle { display:inline-grid; }
  .palette-toggle { display:none; }
  .main-nav {
    grid-column:auto;
    position:absolute; top:100%; left:0; right:0; margin:0; display:none;
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 20px;
    background:rgb(16 14 24 / .97); border-bottom:1px solid var(--line-gold); box-shadow:0 30px 60px #000a;
    max-height:calc(100dvh - var(--header-h)); overflow:auto; overscroll-behavior:contain;
  }
  .main-nav.menu-open { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); column-gap:24px; }
  .main-nav>a,.main-nav>button { justify-content:space-between; min-height:54px; padding:0 4px; border-bottom:1px solid var(--line); font-size:var(--fs-control); }
  .main-nav>a::after { left:auto; right:6px; bottom:50%; translate:0 50%; }
  .js-motion .main-nav.menu-open { animation:menu-in var(--t-mid) var(--ease); }
}
@keyframes menu-in { from { opacity:0; transform:translateY(-10px); } }
@media (max-width:560px) {
  .account-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .button-account { padding:0; width:46px; }
}
