/* Site chrome (2026-11-01): the header bar from the homepage rebuild, used on every page, plus page loading and transitions.
   Loaded after every other stylesheet; selectors match the specificity of the older rules they replace (html body ...). */
:root { --ch-bg: #090c13; --ch-gold: #f3c24f; --ch-gold-hi: #ffd36e; --ch-text: #eef2f8; --ch-mut: #9ba7ba; --ch-line: rgb(255 255 255 / .08); --ch-line-2: rgb(255 255 255 / .16);
  --ch-head: 'Saira Condensed', 'Arial Narrow', sans-serif; --ch-body: 'Barlow', system-ui, sans-serif; --ch-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- header bar ---------- */
html body .hdr { position: sticky; top: 0; z-index: 50; background: rgb(9 12 19 / .86); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--ch-line); transition: background-color .22s, box-shadow .22s; }
html body .hdr.scrolled { background: rgb(9 12 19 / .97); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .8); }
html body .hdr-in { max-width: 1280px; height: auto; min-height: 68px; padding: 0 var(--gut); display: flex; align-items: center; gap: 32px; }
html body .logo { display: inline-flex; align-items: center; gap: 10px; font: 800 24px/1 var(--ch-head); letter-spacing: .06em; text-transform: uppercase; color: var(--ch-text); text-decoration: none; }
html body .logo img { width: 36px; height: auto; }
html body .nav { display: flex; gap: 24px; }
html body .nav a { position: relative; padding: 12px 0; border: 0; border-radius: 0; background: none; font: 600 15px/1 var(--ch-body); letter-spacing: 0; text-transform: none; color: var(--ch-mut); text-decoration: none; transition: color .15s; }
html body .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ch-gold); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ch-ease); }
html body .nav a:hover { color: var(--ch-text); background: none; }
html body .nav a:hover::after, html body .nav a[aria-current="page"]::after { transform: none; }
html body .nav a[aria-current="page"] { color: var(--ch-text); background: none; }
html body .hdr-r { display: flex; align-items: center; gap: 16px; margin-left: auto; }
html body .hdr :focus-visible { outline: 3px solid #46d9ff; outline-offset: 3px; border-radius: 4px; }

/* Binder: the one link that should catch the eye. A gold-edged pill with a little fanned stack of cards and a slow sheen. */
html body .mk-link.binder-link { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid rgb(243 194 79 / .55); border-radius: 999px; background: linear-gradient(180deg, rgb(243 194 79 / .16), rgb(243 194 79 / .05)); color: var(--ch-gold); font: 700 15px/1 var(--ch-body); letter-spacing: .01em; text-transform: none; text-decoration: none; box-shadow: 0 0 0 0 rgb(243 194 79 / 0), inset 0 1px 0 rgb(255 255 255 / .08); transition: border-color .2s, box-shadow .25s, transform .2s var(--ch-ease), color .2s; }
html body .mk-link.binder-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 236 180 / .35) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
/* plays on hover only: pages must be completely still at rest */
@keyframes binderSheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
html body .mk-link.binder-link:hover::after { animation: binderSheen .9s ease-in-out 1; }
html body .mk-link.binder-link:hover, html body .mk-link.binder-link[aria-current="page"] { border-color: var(--ch-gold); color: var(--ch-gold-hi); box-shadow: 0 0 22px -4px rgb(243 194 79 / .55), inset 0 1px 0 rgb(255 255 255 / .1); transform: translateY(-1px); }
.bl-cards { display: block; font-style: normal; position: relative; width: 20px; height: 18px; flex: none; }
.bl-cards b { position: absolute; left: 5px; top: 1px; width: 10px; height: 15px; border-radius: 2px; border: 1.5px solid currentColor; background: rgb(9 12 19 / .9); transform-origin: 50% 100%; transition: transform .3s var(--ch-ease); }
.bl-cards b:nth-child(1) { transform: rotate(-16deg) translateX(-2px); }
.bl-cards b:nth-child(2) { transform: rotate(0deg); }
.bl-cards b:nth-child(3) { transform: rotate(16deg) translateX(2px); background: currentColor; }
.binder-link:hover .bl-cards b:nth-child(1) { transform: rotate(-26deg) translateX(-3px); }
.binder-link:hover .bl-cards b:nth-child(3) { transform: rotate(26deg) translateX(3px); }

/* sign-in link and account */
html body .acct { display: flex; align-items: center; gap: 12px; }
html body .acct .signin { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--ch-body); color: var(--ch-mut); text-decoration: none; transition: color .15s; }
html body .acct .signin:hover { color: var(--ch-text); }
html body .acct .mk-link:not(.binder-link) { min-height: 40px; border: 0; padding: 0 4px; font: 600 14px/1 var(--ch-body); letter-spacing: 0; text-transform: none; color: var(--ch-mut); }
html body .acct .mk-link:not(.binder-link):hover { color: var(--ch-text); }
html body .acct-chip { border-radius: 999px; }

/* primary Discord button */
html body .hdr-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; background: linear-gradient(180deg, var(--ch-gold-hi), var(--ch-gold) 55%); color: #0a0d14; font: 700 15px/1 var(--ch-body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 -2px 0 rgb(0 0 0 / .15) inset, 0 10px 24px -8px rgb(243 194 79 / .45); transition: transform .22s var(--ch-ease), box-shadow .22s; }
html body .hdr-cta svg { width: 18px; height: 18px; flex: none; }
html body .hdr-cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 16px 30px -8px rgb(243 194 79 / .55); }
html body .hdr-cta:active { transform: translateY(1px); }

@media (max-width: 1100px) { html body .hdr-in { gap: 20px; } html body .nav { gap: 18px; } }
@media (max-width: 860px) {
  html body .hdr-in { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  html body .nav { order: 3; flex-basis: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; margin: 4px calc(var(--gut) * -1) 0; padding: 0 var(--gut); }
  html body .nav::-webkit-scrollbar { display: none; }
  html body .nav a { padding: 12px 0 14px; white-space: nowrap; }
  html body .hdr-r { gap: 10px; }
}
@media (max-width: 560px) {
  html body .logo { font-size: 20px; } html body .logo img { width: 30px; }
  html body .hdr-cta { padding: 0 12px; } html body .hdr-cta span { display: none; }
  html body .mk-link.binder-link { padding: 0 12px 0 10px; }
  html body .acct-name { max-width: 9ch; }
}

/* ---------- first load: a quiet wait instead of a flash of the older built-in page ---------- */
.boot-wait { display: grid; place-items: center; min-height: calc(100svh - 70px); }
.boot-wait span { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgb(243 194 79 / .18); border-top-color: var(--ch-gold); animation: bootSpin .8s linear infinite; animation-delay: .25s; opacity: 0; animation-fill-mode: both; }
@keyframes bootSpin { from { opacity: 1; } to { opacity: 1; transform: rotate(360deg); } }

/* ---------- moving between pages: a short cross-fade (browsers with view transitions) ---------- */
::view-transition-old(root) { animation: 160ms ease-out both vtOut; }
::view-transition-new(root) { animation: 220ms var(--ch-ease) both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
.hdr { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html body .mk-link.binder-link::after { animation: none; }
  .boot-wait span { animation-duration: 1.6s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Community: coming soon ---------- */
.cs { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center; min-height: calc(100svh - 70px); padding: 64px var(--gut); background: radial-gradient(70% 70% at 70% 50%, rgb(243 194 79 / .1), transparent 70%), var(--ch-bg); color: var(--ch-text); font-family: var(--ch-body); }
.cs-in { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; display: grid; gap: 48px; align-items: center; }
.cs-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(243 194 79 / .5); color: var(--ch-gold); font: 700 13px/1 var(--ch-body); letter-spacing: .18em; text-transform: uppercase; }
.cs-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ch-gold); box-shadow: 0 0 10px var(--ch-gold); animation: csBlink 2s ease-in-out infinite; }
@keyframes csBlink { 50% { opacity: .3; } }
.cs h1 { margin: 24px 0 0; font: 800 clamp(56px, 4rem + 6vw, 140px)/.86 var(--ch-head); text-transform: uppercase; letter-spacing: -.005em; }
.cs h1 span { color: var(--ch-gold); }
.cs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.cs-acts .hdr-cta { min-height: 56px; padding: 0 26px; font-size: 16px; }
.cs-acts a.cs-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ch-text); font-weight: 600; text-decoration: none; }
.cs-acts a.cs-link:hover { color: var(--ch-gold); }
.cs-crowd { position: relative; height: 380px; }
.cs-crowd img { position: absolute; left: 50%; top: 50%; width: 38%; max-width: 220px; height: auto; aspect-ratio: 900 / 1260; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 60px -18px rgb(0 0 0 / .85); transform: translate(-50%, -50%) translateX(calc(var(--i) * 58%)) rotate(calc(var(--i) * 9deg)); animation: csDeal 1s cubic-bezier(.3, 1.4, .4, 1) both; animation-delay: calc(.2s + (var(--i) + 1) * .12s); }
@keyframes csDeal { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } }
@media (min-width: 960px) { .cs-in { grid-template-columns: 1.1fr .9fr; } }
@media (max-width: 959px) { .cs-crowd { height: 280px; } }
@media (prefers-reduced-motion: reduce) { .cs-crowd img, .cs-tag i { animation: none; } }

/* ---------- home page: its own closing section replaces the footer banner; the phone CTA bar replaces the help bubble ---------- */
body.is-home #ftr .band { display: none; }
@media (max-width: 767px) { body.is-home .help-fab { display: none; } }

/* phones: logo + Binder + account + Discord stay on one row above the nav */
@media (max-width: 560px) {
  html body .hdr-in { flex-wrap: wrap; column-gap: 8px; }
  html body .hdr-r { gap: 8px; flex-wrap: nowrap; }
  html body .acct { gap: 8px; }
  html body .acct-name { display: none; }
  html body .acct-chip { padding: 0; border: 0; background: none; }
  html body .acct .mk-link:not(.binder-link) { font-size: 13px; padding: 0 2px; }
  html body .mk-link.binder-link { min-height: 44px; font-size: 14px; gap: 7px; }
}
@media (max-width: 430px) {
  html body .logo { font-size: 0; gap: 0; }
  html body .logo img { width: 34px; }
}
/* Community placeholder is text only (owner, 2026-11-01): one column */
@media (min-width: 960px) { .cs-in.cs-solo { grid-template-columns: 1fr; } }
.cs-solo h1 { margin-top: 0; }