/* Masthead with the live sky, sun and moon. */
.masthead{ position:relative; overflow:hidden; min-height:96px; color:#fff; }
.sky{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,var(--sky-top),var(--sky-bot)); transition:background .6s ease; }
.stars{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s ease;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 22%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 63% 54%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 34%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 89% 66%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 55% 74%, #fff, transparent); }
.sun, .moon{ position:absolute; z-index:2; border-radius:50%; transform:translate(-50%,-50%); left:50%; top:24%; opacity:0; transition:opacity .45s ease; }
.sun{ width:52px; height:52px; background:radial-gradient(circle at 50% 45%, #fff8dc, #ffd274 62%, #ffb84d 100%); box-shadow:0 0 34px 12px rgba(255,206,110,.55); }
.moon{ width:44px; height:44px; background:radial-gradient(circle at 38% 38%, #f4f6ff, #d3dcf2 58%, #a2b2d8 100%); box-shadow:0 0 22px 6px rgba(180,200,255,.45); }
.masthead .scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.05) 55%, rgba(0,0,0,0)); }
.masthead .inner{ position:relative; z-index:4; display:flex; align-items:center; gap:14px; padding-top:14px; padding-bottom:14px; }
.logo{ width:42px; height:42px; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.brand h1{ margin:0; font-family:var(--vr-font-display); font-size:30px; font-weight:700; letter-spacing:1px; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
.brand h1 a{ color:#fff; text-decoration:none; }
.brand .tagline{ font-size:14px; color:#fdf7ee; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.masthead .spacer{ margin-left:auto; }
.masthead .corner{ font-size:13px; color:#fdf7ee; text-align:right; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.masthead .corner a{ color:#fff; }