/* The site menu, on every page: home, right now and the rankings. On a wide screen it sits in the header capsule (below)
   and ends with Get the App; on a phone a button at the header's top left slides the menu out from the left. */
.site-bar{position:relative;z-index:3;width:min(1120px,calc(100% - 64px));margin-inline:auto;display:flex;align-items:center;justify-content:flex-end;gap:26px;padding-top:10px}
.site-menu{display:flex;gap:4px 26px}
.site-menu a{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:16px;font-weight:600;color:#c3cfdb;text-decoration:none;text-shadow:0 1px 3px #000a;transition:color .2s}
.site-menu a:hover{color:#eef0f5}
.site-menu a[aria-current=page]{color:var(--accent,#ffcc9f);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.site-menu a:focus-visible,.site-menu-button:focus-visible,.site-drawer-close:focus-visible,.site-drawer nav a:focus-visible{
  outline:2px solid var(--accent,#ffcc9f);outline-offset:3px;border-radius:8px}
/* Get the App, after a rule at the end of the bar, in the page's highlight color: straight to the TestFlight beta. */
.site-menu::after{content:"";align-self:center;width:1px;height:22px;background:#75899b66}
.site-bar-app{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 5px;border:0;border-radius:999px;
  background:var(--accent,#ffcc9f);color:#0c1420;font-family:inherit;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent,#ffcc9f) 30%,transparent);cursor:pointer;transition:transform .2s,filter .2s}
/* Fixed sizes, never a share of the pill: the pill is as wide as what is in it. */
.site-bar-app img{width:34px;height:34px;max-width:none;flex:none}
.site-bar-app .site-menu-icon{width:22px;height:22px;color:currentColor}
.site-bar-app:hover{filter:brightness(1.06);transform:translateY(-1px)}
.site-bar-app:focus-visible{outline:2px solid var(--accent,#ffcc9f);outline-offset:3px}
.site-menu-button{display:none}
.site-icon-menu{display:block;width:24px;height:24px}
.site-menu-icon{display:block;width:18px;height:18px;flex:none}

/* The side menu: a modal <dialog>, so focus stays in it and Escape closes it. Its panel fills it, so a tap that lands on
   the dialog itself is a tap on the backdrop beside it. */
.site-drawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;
  border-right:1px solid #75899b55;background:#10192d;color:#eef0f5;box-shadow:24px 0 60px #000a}
.site-drawer[open]{animation:site-drawer-in .26s cubic-bezier(.2,.8,.2,1)}
.site-drawer.closing{animation:site-drawer-out .2s ease-in forwards}
.site-drawer::backdrop{background:#0b1220b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.site-drawer[open]::backdrop{animation:site-drawer-fade .26s}
.site-drawer.closing::backdrop{animation:site-drawer-fade .2s reverse forwards}
@keyframes site-drawer-in{from{transform:translateX(-100%)}}
@keyframes site-drawer-out{to{transform:translateX(-100%)}}
@keyframes site-drawer-fade{from{opacity:0}}
.site-drawer-panel{display:flex;flex-direction:column;height:100%}
.site-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px 16px 20px;border-bottom:1px solid #75899b33}
.site-drawer-head img{display:block;width:150px;height:auto}
.site-drawer-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:#d1dbe5;cursor:pointer}
.site-drawer-close:hover{background:#75899b26;color:#fff}
.site-drawer nav{display:flex;flex-direction:column;gap:4px;padding:14px 12px}
.site-drawer nav a{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 14px;border-radius:12px;font-size:20px;font-weight:600;color:#d1dbe5;text-decoration:none}
.site-drawer nav a:hover{background:#75899b1f;color:#fff}
.site-drawer nav a[aria-current=page]{color:var(--accent,#ffcc9f);background:color-mix(in srgb,var(--accent,#ffcc9f) 12%,transparent)}
.site-drawer nav .site-menu-icon{width:22px;height:22px;color:#aebdce}
.site-drawer nav a[aria-current=page] .site-menu-icon{color:inherit}
/* Get the app, at the foot of the side menu and clear of a phone's home bar. */
.site-drawer-app{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:auto 12px calc(16px + env(safe-area-inset-bottom));padding:12px 14px 12px 10px;
  border:1px solid #ffcc9f66;border-radius:16px;background:linear-gradient(180deg,#ffcc9f24,#ffcc9f08),#10192d;color:#eef0f5;font:inherit;text-align:left;
  text-decoration:none;cursor:pointer;transition:border-color .2s}
.site-drawer-app img{width:44px;height:44px;flex:none}
.site-drawer-app span{display:flex;flex-direction:column;gap:2px;flex:1;font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap}
.site-drawer-app small{font-size:14px;font-weight:400;color:#aebdce}
.site-drawer-app .site-menu-icon{width:20px;height:20px;color:var(--accent,#ffcc9f)}
.site-drawer-app:hover{border-color:var(--accent,#ffcc9f)}
.site-drawer-app:focus-visible{outline:2px solid var(--accent,#ffcc9f);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.site-bar-app{transition:none}.site-drawer[open],.site-drawer.closing,.site-drawer[open]::backdrop,.site-drawer.closing::backdrop{animation:none}}
@media(max-width:760px){
  .site-bar{display:none}
  /* At the header's top left, as the homepage's outlook button is at its top right. */
  .site-menu-button{position:absolute;top:16px;left:0;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;
    border:1px solid #75899b66;border-radius:12px;background:#10192dcc;color:#eef0f5;cursor:pointer}
}

/* On a wide screen every page's header is one capsule floating at the top of the window: the wordmark, the menu and
   Get the App (the homepage adds its outlook between the menu and the button). It stays put as the page scrolls, and
   anchors land below it. */
@media(min-width:761px){
  html{scroll-padding-top:96px}
  /* Keep the capsule's top margin inside the page, so artwork that starts at the top of the page
     (the homepage's outlook scene) reaches the top of the window and shows above the capsule. */
  body:has(header.site-capsule){display:flow-root}
  header.site-capsule{position:sticky;top:16px;z-index:50;display:flex;align-items:center;justify-content:flex-start;gap:16px;
    width:max-content;max-width:calc(100% - 32px);height:56px;min-height:0;margin:28px auto 0;padding:0 7px 0 20px;
    border:1px solid #ffffff22;border-radius:28px;background:color-mix(in srgb,var(--paper,#111a29) 62%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 14px 40px #0006;white-space:nowrap}
  header.site-capsule .brand{display:flex;align-items:center}
  header.site-capsule .brand-wordmark{display:block;width:auto;height:19px}
  header.site-capsule .brand-description{display:none}
  header.site-capsule .site-bar{display:contents}
  header.site-capsule .site-menu{align-items:center;gap:4px}
  header.site-capsule .site-menu::before,header.site-capsule .site-menu::after{content:"";align-self:center;width:1px;height:24px;background:#ffffff2a}
  header.site-capsule .site-menu::before{margin-right:12px}header.site-capsule .site-menu::after{margin-left:12px}
  header.site-capsule .site-menu a{min-height:0;padding:8px 12px;border-radius:999px;font-size:14px;color:#dfe5ec;text-shadow:none;text-decoration:none}
  header.site-capsule .site-menu a:hover{background:#ffffff12;color:#fff}
  header.site-capsule .site-menu a[aria-current=page]{color:var(--accent,#ffcc9f);background:color-mix(in srgb,var(--accent,#ffcc9f) 16%,transparent)}
  header.site-capsule .site-menu .site-menu-icon{width:17px;height:17px}
}
/* Narrower windows drop the menu's symbols so the capsule still fits. */
@media(min-width:761px) and (max-width:1000px){header.site-capsule{gap:12px;padding-left:16px}header.site-capsule .site-menu .site-menu-icon{display:none}header.site-capsule .site-menu a{padding:8px 10px}}

/* Every Get the App button: the page's highlight color, lit from above so it doesn't sit flat. */
.site-bar-app,.store-button,.get-button,.extremes-header .get-app{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#ffcc9f),#fff 32%),var(--accent,#ffcc9f) 55%,color-mix(in srgb,var(--accent,#ffcc9f),#000 12%));
  box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -1px 0 #00000029,0 6px 20px color-mix(in srgb,var(--accent,#ffcc9f) 30%,transparent)}