/* The masthead is the upper rail of the atlas frame, not a floating toolbar. */
@media (min-width: 801px) {
  body .header,
  body.app-fullscreen:not(.sky-mode) .header,
  body.sky-mode .header {
    position: relative; top: 0; left: calc(50% - 50vw + 16px);
    width: calc(100vw - 32px); height: 86px; min-height: 86px;
    flex: 0 0 86px; box-sizing: border-box; padding: 8px 30px 12px;
    gap: 28px; border: 0; border-radius: 0;
    background: linear-gradient(180deg,#06171ef5 0%,#06171eeb 74%,#06171e00 100%);
    color: #e4c488; isolation: isolate;
  }
  body.sky-immersive .header { position: fixed; left: 16px; right: 16px; width: auto; }
  body .header::before {
    content: ''; position: absolute; inset: 8px 0 12px; z-index: -1;
    border-top: 1px solid #bc914b85; border-bottom: 1px solid #bc914b85;
    border-radius: 26px 26px 0 0; pointer-events: none;
    background: url('./assets/interface/starpath-rail.svg') left -100px / 18px 675px repeat-y,
                url('./assets/interface/starpath-rail.svg') right -100px / 18px 675px repeat-y;
  }
  body .header::after {
    content: ''; display: block; position: absolute; bottom: 7px; left: 0; right: 0; height: 10px;
    background: url('./assets/interface/starpath-inner-sweep.svg') center / 100% 10px no-repeat;
    pointer-events: none;
  }
  body .header .brand { position: relative; flex: 0 0 auto; gap: 16px; font-size: 30px; line-height: 1.05; letter-spacing: -.6px; color: #e4c488; }
  body .header .brand-mark { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; color: #e4c488; border: 1px solid #bc914b90; border-radius: 50%; background: #071b22; box-shadow: 0 0 0 5px #06171e,0 0 0 6px #bc914b55; }
  body .header .brand-mark svg { width: 48px; height: 48px; }
  body .header .brand-subtitle { display: block; margin-top: 7px; font: 10px/1.2 var(--sans); letter-spacing: 3.1px; color: #d9b87c; }
  body .header .main-nav { flex: 1 1 auto; justify-content: center; align-items: center; margin: 0; height: 100%; gap: clamp(16px,2vw,38px); }
  body .header .nav-button { position: relative; padding: 10px 4px; min-height: 46px; font: 21px/1.2 var(--serif); color: #d9b87c; white-space: nowrap; }
  body .header .nav-button::before { content: '✧' / '';  position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font: 14px var(--serif); color: #bc914b88; pointer-events: none; }
  body .header .nav-button.active { color: #ffe2aa; text-shadow: 0 0 16px #e3b45599; }
  body .header .nav-button.active::after { left: 15%; right: 15%; bottom: 1px; height: 1px; background: #e9c27a; box-shadow: 0 0 8px #e9c27a; }
  body .header .help-button { position: relative; flex-shrink: 0; color: #d9b87c; font: 18px var(--serif); min-height: 46px; }
  body .header .help-button::before { content: '✧' / '';  margin-right: 12px; color: #bc914b88; }
  body .header .help-button > span:first-child { display: none; }
  body .arcana-screen-frame { background-position: left 74px,right -182px,center top,center bottom; }
  body .header :is(button,a):focus-visible { outline: 1px solid #f2cd83; outline-offset: 5px; box-shadow: 0 0 14px #e3b45555; border-radius: 3px; }
}
@media (min-width: 801px) and (max-width: 1400px) {
  body .header,body.sky-mode .header,body.app-fullscreen:not(.sky-mode) .header { gap: 16px; padding-inline: 22px; }
  body .header .brand { font-size: 22px; gap: 10px; }
  body .header .brand-mark { width: 46px; height: 46px; }
  body .header .brand-mark svg { width: 36px; height: 36px; }
  body .header .brand-subtitle { font-size: 8px; letter-spacing: 2px; }
  body .header .nav-button { font-size: 16px; }
  body .header .main-nav { gap: 14px; }
  body .header .nav-button::before { left: -11px; font-size: 9px; }
  body .header .help-button { font-size: 14px; }
  body .header .help-button::before { margin-right: 5px; }
}