/* MOMENTUS · the shared top bar (B148, B149): one glass bar on every momentus.gg page.
   Markup and behaviour: /shared/topbar.js. Geometry is the archive's Figma bar (x 31, y 32, 1858 x 68 on
   the 1920 frame), scaled to the window.
   B149: plain glass. backdrop-filter blurs exactly what is under each point of the bar over a very light,
   neutral, low-alpha fill: over a light list it reads light, over a dark showcase it reads dark, with no
   sampled tint (nothing to flicker on scroll). Text and mark switch between white and near-black per word,
   from what sits directly under each one, only after scrolling stops. */
:root{--mtb-u:calc(min(100vw,2400px)/1920)}
.mtb{position:fixed;z-index:50;left:calc(31*var(--mtb-u));right:calc(31*var(--mtb-u));top:max(calc(32*var(--mtb-u)),env(safe-area-inset-top));height:max(48px,calc(68*var(--mtb-u)));
 box-sizing:border-box;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);column-gap:16px;align-items:center;margin:0;padding:0 calc(16*var(--mtb-u)) 0 calc(14*var(--mtb-u));border-radius:max(8px,calc(10*var(--mtb-u)));
 background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.08);
 -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);color:#fff;
 font:500 max(12px,calc(17*var(--mtb-u)))/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
 transition:opacity .45s ease,visibility 0s linear 0s}
.mtb *{box-sizing:border-box}
/* legible on any background, per element: topbar.js looks at what is right under each word (once the page
   stops scrolling, debounced) and sets data-ink; the glass itself never changes colour */
.mtb .mtb-ink,.mtb .mtb-mark{color:#fff;transition:color .25s ease}
.mtb [data-ink=dark]{color:#141414}
.mtb-menu-btn[data-ink=dark] span{background:#141414}
.mtb a,.mtb button{font:inherit;color:inherit;text-decoration:none;background:none;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mtb a:focus-visible,.mtb button:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:3px}
.mtb .mtb-mark{display:block;justify-self:start;width:max(34px,calc(47*var(--mtb-u)))}
.mtb-mark svg{display:block;width:100%;height:auto;fill:currentColor}
.mtb-ticker{display:flex;gap:calc(20*var(--mtb-u));align-items:center;justify-self:center;margin:0;white-space:nowrap;font-weight:500;min-width:0;max-width:100%;overflow:hidden}
/* B150: the middle never overlaps the mark or the links: it shrinks (topbar.js fit(), down to 11px), then ellipsizes */
.mtb-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtb-sep,.mtb-clock{flex:none}
.mtb-ticker [hidden]{display:none}
.mtb-ticker[data-wait] .mtb-text,.mtb-ticker[data-wait] .mtb-sep{opacity:0}
.mtb-ticker[data-empty]{visibility:hidden}
.mtb-text{transition:opacity .3s ease}
.mtb-clock{font-variant-numeric:tabular-nums;font-weight:600}
.mtb-links{justify-self:end;display:flex;gap:calc(21*var(--mtb-u));align-items:center}
.mtb-links a{position:relative;padding:4px 0;font-weight:500;white-space:nowrap}
.mtb-links a:hover .mtb-ink{text-decoration:underline;text-underline-offset:4px}
.mtb i.mtb-dot{display:none;width:max(9px,calc(14*var(--mtb-u)));height:max(9px,calc(14*var(--mtb-u)));border-radius:50%;background:#d6ff3a;margin-left:5px;vertical-align:middle;transform:translateY(-1px)}
.mtb [aria-current=page] i.mtb-dot{display:inline-block}
.mtb-arrow{font-size:.85em;margin-left:3px}
.mtb-page{display:none}
.mtb-menu-btn{display:none;justify-self:end;width:44px;height:44px;margin-right:-8px;padding:0;place-content:center;gap:6px}
.mtb-menu-btn span{display:block;width:20px;height:1px;background:#fff;transition:transform .2s ease,background-color .25s ease}
.mtb-menu-btn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mtb-menu-btn[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* the compact menu (phones) */
.mtb-menu{position:fixed;z-index:51;right:10px;top:calc(max(10px,env(safe-area-inset-top)) + 56px);width:min(280px,calc(100vw - 20px));padding:8px;border-radius:10px;box-sizing:border-box;
 font:500 15px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
 background:rgba(20,22,30,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.mtb-menu[hidden]{display:none}
.mtb-menu nav{display:grid}
.mtb-menu a,.mtb-menu button{font:inherit;text-decoration:none;background:none;border:0;margin:0;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border-radius:7px;text-align:left;font-size:15px;color:#fff}
.mtb-menu a:hover,.mtb-menu button:hover{background:rgba(255,255,255,.08)}
.mtb-menu .mtb-sub{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);display:grid}
.mtb-menu .mtb-sub a{font-size:12px;letter-spacing:.06em;min-height:40px;color:rgba(255,255,255,.75)}
.mtb-menu i.mtb-dot{display:none;width:9px;height:9px;border-radius:50%;background:#d6ff3a;margin-left:auto}
.mtb-menu [aria-current=page] i.mtb-dot{display:inline-block}
.mtb-menu a:focus-visible,.mtb-menu button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* while a drop page plays its opening (the big wordmark), the bar waits, like the old header did */
body:has(#collection[aria-busy=true]) :is(.mtb,.mtb-menu),body:has(#collection.is-entering) :is(.mtb,.mtb-menu){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}

/* the bar replaces the old headers: the drop page's mark (B138b), menu button and signup button, and the
   archive's own bar. They stay in the page (scripts use them), only out of sight. */
html.mtb-on .card-case>.corner>.menu-toggle,html.mtb-on .card-case>.corner>.desktop-nav,html.mtb-on .card-case>.corner-symbol,html.mtb-on .ar-nav{display:none!important}
/* text pages start below the bar */
html.mtb-on body.mtb-pad{padding-top:calc(max(48px,calc(68*var(--mtb-u))) + max(calc(32*var(--mtb-u)),env(safe-area-inset-top)) + 8px)}

/* B149: the drop pages' story button: a thin drawn plus, centred in its circle (no font glyph) */
#story-toggle svg.plus{display:block;width:16px;height:16px;overflow:visible;transition:transform .2s ease}

@media(max-width:820px){
 .mtb{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));height:48px;padding:0 12px 0 10px;font-size:13px;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px}
 .mtb .mtb-mark{width:32px}
 .mtb-ticker{font-size:12px;gap:8px}
 .mtb-ticker[data-clock=on] .mtb-text,.mtb-ticker[data-clock=on] .mtb-sep{display:none}
 .mtb-links{display:none}
 .mtb-menu-btn{display:grid}
 html.mtb-on body.mtb-pad{padding-top:calc(48px + max(10px,env(safe-area-inset-top)) + 8px)}
}
@media(prefers-reduced-motion:reduce){.mtb .mtb-ink,.mtb .mtb-mark,.mtb,.mtb-text,.mtb-menu-btn span,#story-toggle svg.plus{transition:none}}
@media print{.mtb,.mtb-menu{display:none}}
/* the languages, in the menu (i18n.js adds them) */
.mtb-menu .mtb-lang{grid-column:1/-1;width:100%;box-sizing:border-box;display:flex!important;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12)}
.mtb-menu .mtb-lang button{width:auto!important;white-space:nowrap;text-decoration:none!important;flex:1;justify-content:center!important;min-height:40px;font-size:13px;color:rgba(255,255,255,.6);border-radius:10px}
.mtb-menu .mtb-lang button[aria-pressed=true]{color:#fff;background:rgba(255,255,255,.1)}
.mtb-links .mtb-lang{display:flex;gap:2px;margin-left:4px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}
.mtb-links .mtb-lang button{padding:4px 6px;font-size:.8em;color:inherit;opacity:.55;white-space:nowrap}
.mtb-links .mtb-lang button[aria-pressed=true]{opacity:1}
/* the new-points dot on the menu button (points.js) is a dot, not a fourth menu line */
.mtb-menu-btn{position:relative}
.mtb-menu-btn span.mp-badge-dot{position:absolute;top:9px;right:7px;width:7px;height:7px;border-radius:50%;background:#d6ff3a;padding:0;margin:0}
/* phones: over the moving 3D film a live backdrop blur is re-computed every frame (costly on iPhone); a near-opaque
   glass tint looks the same on the dark page and costs nothing */
@media (pointer:coarse){body.rv-film-live .mtb{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(30,30,34,.92),rgba(18,18,22,.9))}}

/* DJ 2026-10-29: phones: a compact bar (the mark, the page you're on, the menu) and the menu as one glass panel the
   width of the bar, with the bar's own corner radius (10px) and concentric 7px corners inside; wide screens unchanged */
@media(max-width:820px){
 .mtb{grid-template-columns:auto minmax(0,1fr) auto;border-radius:10px;height:52px;padding:0 6px 0 12px}
 .mtb-ticker{display:none}
 .mtb-page{display:block;justify-self:start;font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em;padding-left:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.2)}
 .mtb-menu-btn{width:40px;height:40px;margin:0;border-radius:7px;background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
 .mtb-menu-btn span{width:16px}
 .mtb-menu-btn span.mp-badge-dot{top:6px;right:6px}
 .mtb-menu{left:10px;right:10px;width:auto;top:calc(max(10px,env(safe-area-inset-top)) + 60px);padding:6px;border-radius:10px;
  background:linear-gradient(180deg,rgba(40,40,46,.78),rgba(22,22,26,.82));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  opacity:0;transform:translate3d(0,-6px,0) scale(.98);transform-origin:top center;transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1)}
 .mtb-menu.is-open{opacity:1;transform:none}
 .mtb-menu nav{gap:6px}
 .mtb-menu .mtb-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:7px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
 .mtb-menu .mtb-seg a{justify-content:center;min-height:42px;padding:0 6px;border-radius:5px;color:rgba(255,255,255,.62);transition:background-color .2s ease,color .2s ease,transform .15s ease}
 .mtb-menu .mtb-seg a[aria-current=page]{background:rgba(250,250,250,.94);color:#050505;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.35)}
 .mtb-menu a:active{transform:scale(.97)}
 .mtb-menu [data-mtb=signup]{justify-content:center;gap:6px;min-height:46px;border-radius:7px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-weight:600}
 .mtb-menu .mtb-sub{margin:0;padding:2px 0 0;border:0;display:flex;flex-wrap:wrap;gap:0 4px}
 .mtb-menu .mtb-sub a{width:auto;min-height:36px;padding:0 10px;font-size:11px}
 .mtb-menu .mtb-lang{margin-top:0!important;padding:4px!important;border:0!important;border-radius:7px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
 .mtb-menu .mtb-lang button{min-height:36px!important;border-radius:5px!important}
 .mtb-menu .mtb-lang button[aria-pressed=true]{background:rgba(255,255,255,.14)!important}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){.mtb-menu{transition:none}}

/* DJ 2026-10-29: typing fields show only the caret when tapped: no outline, ring or border change, and the hint text clears */
html body :is(input,textarea,select):is(:focus,:focus-visible):not(#mmts-x){outline:none!important;box-shadow:none!important}
html body :is(input,textarea):focus::placeholder{color:transparent!important;opacity:0!important}

/* DJ 2026-10-29: phones: the pill navigation replaces the bar (pill-nav.css draws it; sizes after EasyUI), centred, with the
   desktop bar's corner radius (10px; 7px inside): [mark] Drops Archive Membership ▾ (globe) — the globe opens the languages.
   And Scan code, one of the site's main actions, as a glass button at the bottom centre of every page. */
.mtb-pn,.mtb-scan{display:none}
@media(max-width:820px){
 .mtb,.mtb-menu{display:none!important}
 .mtb-pn{display:flex;justify-content:center;position:fixed;z-index:50;left:8px;right:8px;top:max(10px,env(safe-area-inset-top));pointer-events:none}
 .mtb-pn .pn{--pn-h:38px;--pn-font:13px;gap:6px;pointer-events:auto}
 .mtb-pn .pn-bar,.mtb-scan{border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)),rgba(10,10,12,.45)}
 .mtb-pn .pn-ind,.mtb-pn .pn-pill{border-radius:7px}
 .mtb-pn .pn-pill{padding:0 11px}
 .mtb-pn .pn-pill[data-id=lang]{padding:0 10px}
 .mtb-pn .pn-globe{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
 .mtb-pn .pn-mark{display:flex;align-items:center;height:var(--pn-h);padding:0 6px 0 8px;color:#fff;-webkit-tap-highlight-color:transparent}
 .mtb-pn .pn-mark svg{display:block;width:25px;height:auto;fill:currentColor}
 .mtb-pn .pn-sub{--pn-h:32px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,8,10,.7)}
 .mtb-pn .pn-sub .pn-ind{top:3px;bottom:3px;border-radius:7px}
 .mtb-pn .pn-sub .pn-pill{font-size:12.5px;padding:0 12px}
 .mtb-scan{display:flex;align-items:center;gap:9px;position:fixed;z-index:49;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 8px);transform:translate3d(-50%,0,0);
  height:50px;padding:0 22px 0 18px;border:1px solid rgba(255,255,255,.18);color:#fff;font:600 15px/1 Inter,-apple-system,system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px -10px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  -webkit-tap-highlight-color:transparent;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease}
 .mtb-scan svg{width:21px;height:21px;fill:none;stroke:#d6ff3a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .mtb-scan:active{transform:translate3d(-50%,0,0) scale(.96)}
 .mtb-scan.is-tucked{transform:translate3d(-50%,140%,0);opacity:0}
 .mtb-scan.is-away{transform:translate3d(-50%,140%,0);opacity:0;pointer-events:none}
 body:has(.sp-story) .mtb-scan{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 30px)}   /* above the progress dashes */
 html.msc-on .mtb-scan{opacity:0;pointer-events:none}
 html.mtb-on body.mtb-pad{padding-top:calc(48px + max(10px,env(safe-area-inset-top)) + 10px)}
}
@media (pointer:coarse){body.rv-film-live :is(.mtb-pn .pn-bar,.mtb-scan){-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(34,34,38,.94),rgba(18,18,22,.92))}}

@media(max-width:820px){.mtb-pn .pn-pill.has-new::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#d6ff3a;box-shadow:0 0 0 2px #121215}.mtb-pn .pn-pill.has-new[aria-selected=true]::after{box-shadow:0 0 0 2px #fafafa}}

body.rv-soon .mtb-scan,body.rv-soon .mtb-scanlink,html.mtb-soon .mtb-scan,html.mtb-soon .mtb-scanlink,html.mtb-soon [data-scan]{display:none!important}   /* Coming Soon: nothing to scan yet */

.mtb:not([data-page=membership]) .mtb-scanlink{display:none!important}
/* the phone nav stays above every page's own layers (the drop pages' 3D cards on iPhone included) */
@media(max-width:820px){.mtb-pn{z-index:1000!important;-webkit-transform:translateZ(0);transform:translateZ(0)}}