/* Mount Vernon: small additions to the Squarespace styles for things its scripts or private fonts used to provide. */

/* ---- icons that came from Squarespace's private icon font: chevrons and close, drawn with SVG masks ---- */
:root {
  --mv-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4 7 12l8 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mv-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 4 8 8-8 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mv-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sqs-gallery-controls .previous::before,
.sqs-gallery-controls .next::before,
.yui3-lightbox2 .sqs-lightbox-previous::before,
.yui3-lightbox2 .sqs-lightbox-next::before,
.yui3-lightbox2 .sqs-lightbox-close::before {
  content: "" !important; font-family: inherit !important;
  display: inline-block; width: 1em; height: 1em; vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--mv-chev-left) center / contain no-repeat; mask: var(--mv-chev-left) center / contain no-repeat;
}
.sqs-gallery-controls .next::before, .yui3-lightbox2 .sqs-lightbox-next::before { -webkit-mask-image: var(--mv-chev-right); mask-image: var(--mv-chev-right); }
.yui3-lightbox2 .sqs-lightbox-close::before { -webkit-mask-image: var(--mv-close); mask-image: var(--mv-close); }
.sqs-gallery-controls .previous, .sqs-gallery-controls .next { cursor: pointer; }

/* ---- crew bio panel (replaces the old Team blog pages) ---- */
html.mv-bio-open { overflow: hidden; }
.mv-bio { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.mv-bio[hidden] { display: none; }
.mv-bio__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .35s ease; }
.mv-bio.is-open .mv-bio__veil { opacity: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mv-bio__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); width: min(980px, 100%); max-height: calc(100svh - 48px);
  background: #0d0d0d; color: #fff; border-radius: 18px; overflow: hidden; outline: none;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(254, 208, 49, .25);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.2, .3, 1);
}
.mv-bio.is-open .mv-bio__card { opacity: 1; transform: none; }
.mv-bio__photo { position: relative; background: #000; min-height: 280px; }
.mv-bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-bio__body { padding: 44px 40px 36px; overflow-y: auto; }
.mv-bio__name { margin: 0 0 6px; font-family: "Shrikhand", serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: #fff; }
.mv-bio__role { margin: 0 0 18px; font-family: "ibm-plex-mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fed031; }
.mv-bio__role:empty { display: none; }
.mv-bio__text p { font-family: "new-spirit-condensed", serif; font-size: 19px; line-height: 1.55; margin: 0 0 1em; color: rgba(255, 255, 255, .9); }
.mv-bio__text a { color: #fed031; }
.mv-bio__x { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, transform .3s; }
.mv-bio__x:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }
@media (max-width: 760px) {
  .mv-bio { padding: 12px; }
  .mv-bio__card { grid-template-columns: 1fr; overflow-y: auto; }
  .mv-bio__photo { min-height: 0; aspect-ratio: 1; }
  .mv-bio__body { padding: 26px 22px 28px; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .mv-bio__veil, .mv-bio__card { transition: none; } }

/* the artist pop-up: the page behind it blurs and eases back; socials, latest release and video inside */
html.mv-bio-open #siteWrapper { filter: blur(10px) brightness(.55); transform: scale(.985); transition: filter .45s ease, transform .5s cubic-bezier(.2, .9, .3, 1); }
#siteWrapper { transition: filter .35s ease, transform .4s ease; }
.mv-bio__card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); width: min(1040px, 100%); border-radius: 24px; box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(254, 208, 49, .25), 0 0 80px -20px rgba(254, 208, 49, .35); }
.mv-bio__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13, 13, 13, .6)); pointer-events: none; }
.mv-bio__body { padding: 40px 38px 34px; }
.mv-bio__eyebrow { margin: 22px 0 10px; font: 600 11px/1 "ibm-plex-mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: #fed031; }
.mv-bio__socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mv-bio__soc { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff !important; text-decoration: none !important; font: 600 11px/1 "ibm-plex-mono", monospace; letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s, background .2s, transform .2s; }
.mv-bio__soc svg { width: 16px; height: 16px; }
.mv-bio__soc:hover { border-color: rgba(254, 208, 49, .6); background: rgba(254, 208, 49, .12); transform: translateY(-1px); }
.mv-bio__text p { font-size: 17.5px; }
.mv-bio__relc { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.mv-bio__relc img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mv-bio__relc b { display: block; font: 400 20px/1.1 "Shrikhand", serif; color: #fff; }
.mv-bio__relc small { display: block; margin: 4px 0 10px; font: 400 13px/1.3 "new-spirit-condensed", serif; color: rgba(255, 255, 255, .6); text-transform: uppercase; letter-spacing: .06em; }
.mv-bio__relbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-bio__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: linear-gradient(135deg, #fed031, #f9a83a); color: #0d0d0d !important; text-decoration: none !important; font: 600 11px/1 "ibm-plex-mono", monospace; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s; }
.mv-bio__btn svg { width: 15px; height: 15px; }
.mv-bio__btn:hover { transform: translateY(-1px); }
.mv-bio__btn--ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mv-bio__yt, .mv-bio__vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; overflow: hidden; background: #000; }
.mv-bio__yt { position: relative; padding: 0; cursor: pointer; }
.mv-bio__yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .6s, opacity .3s; }
.mv-bio__yt:hover img { transform: scale(1.04); opacity: 1; }
.mv-bio__yt span { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: #fed031; color: #0d0d0d; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mv-bio__yt span svg { width: 30px; height: 30px; margin-left: 3px; }
/* the crew carousel on About: whole slide opens the pop-up */
li.list-item[data-crew] { position: relative; cursor: pointer; }
li.list-item[data-crew] .mv-crew-open { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
li.list-item[data-crew] .list-item-media { transition: transform .4s cubic-bezier(.2, .9, .3, 1); }
li.list-item[data-crew]:hover .list-item-media { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { html.mv-bio-open #siteWrapper { transition: none; } }

/* ---- video blocks ---- */
.sqs-video-wrapper .sqs-video-overlay { cursor: pointer; }
.sqs-video-wrapper .sqs-video-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
  /* white rounded play triangle with a soft shadow, like Squarespace's own */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 9.5c0-1.9 2.1-3.1 3.8-2.1l22.4 13.7c1.6 1 1.6 3.2 0 4.2L17.8 39c-1.7 1-3.8-.2-3.8-2.1z' fill='%23fff'/%3E%3C/svg%3E") center / 44px no-repeat !important;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .25)); transition: transform .25s ease;
}
.sqs-video-wrapper .sqs-video-overlay:hover .sqs-video-icon { transform: scale(1.1); }
.sqs-video-wrapper .mv-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- form messages ---- */
.mv-form-error { margin-top: .6em; font-size: .95em; color: #ff8a8a; min-height: 0; }
.mv-form-error:empty { display: none; }
.mv-field-error { margin: 0 0 .3em; font-size: .85em; color: #ff8a8a; }
[aria-invalid="true"] { outline: 2px solid #ff8a8a; outline-offset: 1px; }
.mv-form-done { padding: 2em 1em; text-align: center; font-size: 1.15em; }
button.is-submitting { opacity: .6; cursor: progress; }

/* ---- Film Packages TV ---- */
.mv-tv-static { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.mv-tv-static.is-on { opacity: 1; transition-duration: .05s; }
.mv-tv-static canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: contrast(1.3); }
.mv-tv-osd { position: absolute; left: 8%; top: 10%; font: 700 clamp(14px, 2.4vw, 34px)/1 "ibm-plex-mono", monospace; color: #6dff7a; text-shadow: 0 0 6px rgba(109, 255, 122, .8); letter-spacing: .06em; }
body:not(.sqs-edit-mode-active) .channel-button { transition: box-shadow .25s ease, transform .15s ease; }
body:not(.sqs-edit-mode-active) .channel-button:hover { box-shadow: 0 0 0 2px rgba(254, 208, 49, .7), 0 0 14px rgba(254, 208, 49, .6); }
body:not(.sqs-edit-mode-active) .channel-button:active { transform: scale(.9); }
body:not(.sqs-edit-mode-active) .channel-button.is-active { box-shadow: 0 0 0 2px #fed031, 0 0 18px rgba(254, 208, 49, .85); }
a.backbutton img { width: clamp(40px, 5vw, 72px); height: auto; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
a.backbutton:hover img { transform: translateX(-4px) scale(1.06); }

/* ---- gallery grids (e.g. the Instagram grid on Media): square thumbnails, photo cropped to fill ---- */
.sqs-gallery-block-grid .content-fill { position: relative; overflow: hidden; display: block; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-square .content-fill { height: 0; padding-bottom: 100%; }
.sqs-gallery-block-grid .content-fill img,
.sqs-gallery-block-grid .content-fill .sqs-video-overlay img {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; top: 0 !important; left: 0 !important;
}
.sqs-gallery-block-grid .content-fill .sqs-video-wrapper, .sqs-gallery-block-grid .content-fill .sqs-video-overlay { position: absolute; inset: 0; opacity: 1 !important; }
.sqs-gallery-block-grid .content-fill .sqs-video-icon { display: none; }
.js-gallery-lightbox-opener { cursor: pointer; }

/* ---- gallery lightbox (dark, like Squarespace's) ---- */
html.mv-lb-open { overflow: hidden; }
.mv-lb { position: fixed; inset: 0; z-index: 1001; background: rgba(0, 0, 0, .92); display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; }
.mv-lb[hidden] { display: none; }
.mv-lb.is-open { opacity: 1; }
.mv-lb__stage { width: 100%; height: 100%; display: grid; place-items: center; padding: 60px 90px 80px; box-sizing: border-box; }
.mv-lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mv-lb__stage.is-embed iframe { width: min(420px, 90vw); height: min(80vh, 760px); border: 0; background: #000; border-radius: 6px; }
.mv-lb__caption { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; padding: 0 80px; text-align: center; color: rgba(255, 255, 255, .85); font-family: "new-spirit-condensed", serif; font-size: 16px; }
.mv-lb__btn { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.mv-lb__btn:hover { background: rgba(255, 255, 255, .2); }
.mv-lb__btn::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--mv-chev-left) center / contain no-repeat; mask: var(--mv-chev-left) center / contain no-repeat; }
.mv-lb__prev { left: 20px; top: 50%; translate: 0 -50%; }
.mv-lb__next { right: 20px; top: 50%; translate: 0 -50%; }
.mv-lb__next::before { -webkit-mask-image: var(--mv-chev-right); mask-image: var(--mv-chev-right); }
.mv-lb__x { right: 20px; top: 20px; }
.mv-lb__x::before { -webkit-mask-image: var(--mv-close); mask-image: var(--mv-close); }
.mv-lb.is-single .mv-lb__prev, .mv-lb.is-single .mv-lb__next { display: none; }
@media (max-width: 640px) { .mv-lb__stage { padding: 60px 12px 80px; } .mv-lb__prev, .mv-lb__next { top: auto; bottom: 60px; translate: none; } .mv-lb__caption { padding: 0 20px; bottom: 14px; } }
.sqs-gallery-block-grid .sqs-gallery { margin-right: -5px; }
.sqs-gallery-block-grid .sqs-gallery::after { content: ""; display: block; clear: both; }
.sqs-gallery-block-grid .slide { float: left; }
.sqs-gallery-block-grid .margin-wrapper { margin: 0 5px 5px 0; }
.sqs-gallery-thumbnails-per-row-1 .slide { width: 100%; }
.sqs-gallery-thumbnails-per-row-2 .slide { width: 50%; }
.sqs-gallery-thumbnails-per-row-3 .slide { width: 33.3333%; }
.sqs-gallery-thumbnails-per-row-4 .slide { width: 25%; }
.sqs-gallery-thumbnails-per-row-5 .slide { width: 20%; }
.sqs-gallery-thumbnails-per-row-6 .slide { width: 16.6666%; }

/* ---- self-hosted videos ---- */
.mv-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-video-block { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; overflow: hidden; }
.mv-video-block video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.mv-video-cover { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; }
.mv-video-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; transition: transform .25s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 9.5c0-1.9 2.1-3.1 3.8-2.1l22.4 13.7c1.6 1 1.6 3.2 0 4.2L17.8 39c-1.7 1-3.8-.2-3.8-2.1z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
.mv-video-cover:hover .mv-video-play { transform: scale(1.12); }
.section-background [data-controller="VideoBackgroundNative"] { position: absolute; inset: 0; overflow: hidden; }

/* page transitions (mv-wipe.js) */
.mvw { position: fixed; inset: 0; z-index: 2147483000; pointer-events: auto; }
/* the gaussian blur under the clip: a screen-sized backdrop layer (cheap on the GPU), eased by a transition */
.mvw-blur { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: -webkit-backdrop-filter .6s cubic-bezier(.3, .7, .2, 1), backdrop-filter .6s cubic-bezier(.3, .7, .2, 1); }
html.mvw-covered #siteWrapper { visibility: hidden; }   /* fully covered by the clip: nothing under it is painted */
.mvw-blur.is-on { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mvw video { width: 100%; height: 100%; object-fit: cover; display: block; }
html.mvw-arriving::after { content: ""; position: fixed; inset: 0; z-index: 2147483001; background: var(--mvw-still, #fff) center / cover no-repeat; }

/* Gaming: MV Brawlers in the trailer's spot (build.py embed_game) */
.has-mvb { position: relative; height: 100%; }
.has-mvb .mvb-frame { position: absolute; inset: 0; z-index: 2; background: #0b0b10; }
.has-mvb .mvb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.has-mvb > :not(.mvb-frame) { visibility: hidden; }
.mvb-note { display: none; }
@media (hover: none) and (pointer: coarse) {          /* touch devices: the trailer, plus a button to the game's own page (controller; saves to the Home Screen as an app) */
  .has-mvb .mvb-frame { display: none; }
  .has-mvb > :not(.mvb-frame) { visibility: visible; }
  .has-mvb .mvb-note { display: block; position: absolute; z-index: 3; left: 50%; bottom: 10px; translate: -50% 0; margin: 0; width: max-content; max-width: 90%;
    padding: 7px 14px; border-radius: 999px; background: #fed031; color: #0d0d0d; text-align: center; text-decoration: none; font: 600 12px/1.3 "ibm-plex-mono", monospace;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
}
@media (min-width: 768px) { section:has(.has-mvb) .fluid-engine { margin-top: 64px; } }   /* clear the header logo */
/* MV Brawlers click-to-play thumbnail (mv-gaming.js) */
.mvb-cover { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: #0b0b10; cursor: pointer; overflow: hidden; }
.mvb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s; }
.mvb-cover:hover img { transform: scale(1.03); filter: brightness(1.1); }
.mvb-cover-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #fed031;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.mvb-cover-play::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid; border-width: 16px 0 16px 25px; border-color: transparent transparent transparent #0d0d0d; }
.mvb-cover:hover .mvb-cover-play { transform: scale(1.1); }
.mvb-cover-label { position: absolute; left: 50%; top: calc(50% + 58px); translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .7);
  color: #fff; font: 600 12px/1 "ibm-plex-mono", monospace; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.mvb-cover:focus-visible { outline: 3px solid #fed031; outline-offset: -3px; }
.mvb-frame.is-loading .mvb-cover-play { animation: mvbPulse .9s ease-in-out infinite; }
@keyframes mvbPulse { 50% { transform: scale(.85); opacity: .7; } }
.mvb-frame.is-playing .mvb-cover { display: none; }
/* full-window tab (bottom-right), shown once the game is running */
.mvb-max { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(10, 8, 14, .72); cursor: pointer; display: none; opacity: .75; transition: opacity .2s, transform .2s; }
.mvb-frame.is-playing .mvb-max { display: block; }
.mvb-max:hover, .mvb-max:focus-visible { opacity: 1; transform: scale(1.08); outline: 2px solid #fed031; outline-offset: 1px; }
.mvb-max span { position: absolute; inset: 9px; background: linear-gradient(#fed031,#fed031) left top / 7px 2px no-repeat, linear-gradient(#fed031,#fed031) left top / 2px 7px no-repeat, linear-gradient(#fed031,#fed031) right top / 7px 2px no-repeat, linear-gradient(#fed031,#fed031) right top / 2px 7px no-repeat, linear-gradient(#fed031,#fed031) left bottom / 7px 2px no-repeat, linear-gradient(#fed031,#fed031) left bottom / 2px 7px no-repeat, linear-gradient(#fed031,#fed031) right bottom / 7px 2px no-repeat, linear-gradient(#fed031,#fed031) right bottom / 2px 7px no-repeat; }   /* four corner brackets */
.mvb-frame.is-max .mvb-max span { inset: 11px; }
/* the game filling the browser window, letterboxed to 16:9 */
.mvb-frame.is-max { position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: #000; display: grid; place-items: center; }
.mvb-frame.is-max iframe { width: min(100vw, calc(100vh * 16 / 9)) !important; height: min(100vh, calc(100vw * 9 / 16)) !important; }
.mvb-frame.is-max .mvb-max { position: fixed; right: 14px; bottom: 14px; }
html.mvb-max-on, html.mvb-max-on body { overflow: hidden; }
html.mvb-max-on #header, html.mvb-max-on .header-announcement-bar-wrapper { display: none !important; }   /* the site header would sit above the game */
/* keep the title art clear: one "▶ Click to play" pill under the logo instead of a centered button */
.mvb-cover-play { display: none; }
.mvb-cover-label { top: auto; bottom: 11%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; background: #fed031; color: #0d0d0d;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.mvb-cover-label::before { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #0d0d0d; }
.mvb-cover:hover .mvb-cover-label { transform: scale(1.08); }
.mvb-frame.is-loading .mvb-cover-label { animation: mvbPulse .9s ease-in-out infinite; }
/* the game's subheader: one line, centered under the game (wraps only when the screen is too narrow) */
.fe-block.mvb-sub { justify-self: center; width: max-content; max-width: calc(100vw - 32px); }

/* footer legal links (added by build.py next to the copyright line) */
.mv-legal { font-size: .78em; opacity: .7; }
.mv-legal a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.mv-legal a:hover { color: #fed031; opacity: 1; }

/* ---------- phones: whole site ---------- */
@media (max-width: 600px) {
  /* buttons never break onto two lines ("Learn / More") */
  .sqs-block-button-element { white-space: nowrap; width: max-content; max-width: calc(100vw - 32px); padding-left: 1.4em !important; padding-right: 1.4em !important; }
  .sqs-block-button-container { text-align: center; }
  /* wide-tracked display headings: tighter so they don't stack one word per line */
  .sqs-html-content :is(h1, h2) { letter-spacing: .05em !important; overflow-wrap: break-word; }
  /* footer copyright line fits on one line */
  .sqs-html-content p:has(> .mv-legal), .sqs-html-content p:has(.mv-legal) { font-size: 15px !important; }
}
@media (max-width: 600px) { .sqs-html-content .mv-long-head { font-size: clamp(28px, 10vw, 38px) !important; line-height: 1.12 !important; letter-spacing: .01em !important; hyphens: none; } }

/* ---------- forms (Film Packages, Affiliates…): visible fields on any background ---------- */
.react-form-contents :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea, select) {
  color: inherit !important; background: color-mix(in srgb, currentColor 7%, transparent) !important;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent) !important; border-radius: 10px !important;
  padding: 12px 14px !important; font-size: 16px !important;   /* 16px stops iPhones zooming in on tap */
  box-sizing: border-box; max-width: 100%; transition: border-color .2s, background .2s;
}
.react-form-contents :is(input, textarea, select):focus { outline: none; border-color: #fed031 !important; background: color-mix(in srgb, currentColor 11%, transparent) !important; }
.react-form-contents select option { color: #0d0d0d; }
.react-form-contents input[type=date], .react-form-contents input[type=time] { color-scheme: dark; min-height: 46px; }
.react-form-contents .field-list > div[aria-hidden="true"] { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }   /* the anti-spam trap field */
.react-form-contents ::placeholder { color: currentColor; opacity: .45; }
@media (max-width: 600px) {
  .react-form-contents .field-list .fields.name { gap: 10px; }
  .react-form-contents input[type=date], .react-form-contents input[type=time] { width: 100% !important; }
}
@media (max-width: 960px) { .img-text-wrap img.centerImg { width: min(200px, 52%) !important; height: auto; } .img-text-wrap .textwrap { text-align: center; } }
@media (max-width: 960px) { .centerImg.hidden, .textwrap.hidden { opacity: 1 !important; } }   /* under the TV it never needs to get out of the video's way */

/* ---------- Podcast video grid: readable on the dark page; one column on phones ---------- */
.lessons-flex-container .grid-item :is(p, h1, h2, h3, .grid-title, .grid-meta, .grid-description, a) { color: #f2f2f2; }
@media (max-width: 600px) { .lessons-flex-container .list-grid { grid-template-columns: 1fr !important; grid-row-gap: 36px !important; } .lessons-flex-container .grid-item-image { width: 100%; height: auto; } }
/* the phone menu's off-screen sub-panels (Resources+) must never widen the page, e.g. while the login pop-up locks scrolling */
.header-menu, .header-menu-nav, .header-menu-nav-wrapper { overflow: clip; }
/* footer: Contact us button (to /contact/), off to the right side of the footer; centered on top on phones */
#footer-sections { position: relative; }
.mv-foot-contact { position: absolute; z-index: 5; right: clamp(20px, 4vw, 56px); bottom: clamp(18px, 3vw, 34px); display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 999px; background: #fed031; color: #0d0d0d !important;
  font: 700 14px/1 "ibm-plex-mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; border: 0 !important;
  box-shadow: 0 10px 30px rgba(254, 208, 49, .25); transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s, background .2s; }
.mv-foot-contact:hover, .mv-foot-contact:focus-visible { transform: translateY(-2px) scale(1.04); background: #ffe066; box-shadow: 0 14px 36px rgba(254, 208, 49, .4); }
.mv-foot-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) { .mv-foot-contact { position: relative; right: auto; bottom: auto; display: flex; width: max-content; margin: 22px auto 0; } }
/* About: "Contact us" sticker on the bottom-right corner of the intro ("A few of the basics") video */
.sqs-block-content:has(> .mv-video-contact) { position: relative; }
.mv-video-contact { position: absolute; z-index: 6; right: -10px; bottom: -16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border-radius: 999px;
  background: #fed031; color: #0d0d0d !important; text-decoration: none !important; border: 2px solid #0d0d0d !important;
  font: 700 13px/1 "ibm-plex-mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 4px 4px 0 #0d0d0d, 0 14px 30px rgba(0, 0, 0, .35); transform: rotate(-5deg); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s; }
.mv-video-contact svg { width: 17px; height: 17px; flex: none; }
.mv-video-contact:hover, .mv-video-contact:focus-visible { transform: rotate(0deg) translateY(-3px) scale(1.06); box-shadow: 6px 6px 0 #0d0d0d, 0 18px 36px rgba(0, 0, 0, .4); }
.mv-video-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) { .mv-video-contact { right: 6px; bottom: -14px; padding: 9px 14px 9px 11px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .mv-video-contact { transition: none; } }