/* Shared by the StarSkirmish pages (/, /bench/, /hillclimb/): the logo, the section mark beside it, the
   Discord and contact icons, and the logo's glide between pages. Palette and fonts: theme.css. */
html,body{margin:0;background:var(--star-bg)}
body{isolation:isolate;color:var(--star-text)}

/* logo.png is mostly transparent above and below the wordmark (rows 422-635 of 1143): trim that, keeping
   room for the glow. Vertical margins in % are of the logo's width. */
.logo{display:block;width:100%;height:auto;margin:-18.5% 0 -22%;filter:drop-shadow(0 0 24px rgba(0,170,255,.25));
  pointer-events:none;view-transition-name:logo}

/* Going between pages the logo glides from where it was to where it lands while the rest cross-fades; the
   starfield is the same on every page (starfield.js), so only the content fades. The logo is one image moving,
   not two cross-fading, so it doesn't ghost; the section mark fades in once the logo is nearly there. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.35s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(logo){display:none}
::view-transition-new(logo){animation:none}
::view-transition-new(mark){animation:mark-in .25s ease-out .12s backwards}
@keyframes mark-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Section marks set beside the logo on a section page: heavy Conthrax in the logo's steel, with its warm top
   edge, dark outline and blue glow. */
.brand{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,18px);width:100%}
.mark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;view-transition-name:mark}
.mark-word{font-family:"Conthrax-Bold","Conthrax",sans-serif;font-size:var(--mark-size);line-height:1;
  letter-spacing:.04em;text-transform:uppercase;padding:.08em 0;position:relative;top:.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .14  0 0 0 0 .2  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#f6e7c8 0%,#e6e4dc 16%,#c6d3de 32%,#94b1cb 50%,#4f7a9c 64%,#6f9cc2 79%,#d6e1e8 91%,#f0f3f1 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1px rgba(8,12,18,.9);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(0,170,255,.25))}

/* A section page's header: the logo (a link home) and the section mark, pinned while the page scrolls. */
.site-header{position:sticky;top:0;z-index:5;padding:18px 16px 14px;box-sizing:border-box;--mark-size:clamp(15px,3.1vw,25px);
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--star-border)}
.logo-link{display:block;line-height:0;width:min(46vw,240px);flex:none}
html:has(.site-header){scroll-padding-top:90px}

/* Discord and contact icons top right, as on llmskirmish.com. */
.topbar-icons{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:10;
  display:flex;align-items:center;gap:12px}
.topbar-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;
  color:var(--star-muted);transition:color .2s ease}
.topbar-icon svg{width:20px;height:20px}
.topbar-icon:hover{color:#fff}
.topbar-icon:focus-visible{outline:2px solid var(--star-accent);outline-offset:2px}

/* On a phone the centred logo and section mark leave no room beside the icons: left-align them, keep them
   clear of the icons and let the logo give way. Section pages show only the Discord icon (the landing page
   also has Contact). */
@media (max-width:600px){
  .topbar-icons{gap:4px}
  .topbar-icon{width:28px;height:28px}
  .site-header{padding-right:calc(max(16px,env(safe-area-inset-right)) + 36px)}
  .site-header .brand{justify-content:flex-start}
  .logo-link{width:min(36vw,240px);flex:0 1 auto;min-width:0}
}