/* =========================================================================
   VOID//BOUND additions on top of the UneeQ framework styles (style.css).
   ========================================================================= */
.vb-slash { color: var(--accent); display: inline; }
.brand-text { display: block; }
.brand-text .brand-sub { display: block; }
.brand-logo, .footer-logo { mix-blend-mode: screen; object-fit: cover; }

/* hero */
.vb-hero .hero-bg { opacity: .42; }
.vb-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.vb-logo { margin: -8px 0 0 -3%; width: min(540px, 104%); line-height: 0; }
.vb-logo img { width: 100%; mix-blend-mode: screen; }
.vb-hero .lead { margin: 12px 0 28px; }
.vb-hero-art { margin: 0; }
.vb-hero-art img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(224,24,45,.3)); animation: vbfloat 6s ease-in-out infinite; }
.vb-hero-art figcaption { text-align: right; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
@keyframes vbfloat { 50% { transform: translateY(-12px) rotate(-1deg); } }
@media (max-width: 900px) { .vb-hero-grid { grid-template-columns: 1fr; } .vb-hero-art { order: -1; max-width: 460px; } }

/* worlds */
.vb-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vb-world { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .15s; }
.vb-world:hover { border-color: var(--accent); }
.vb-world-img { aspect-ratio: 16 / 9; overflow: hidden; }
.vb-world-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vb-world:hover .vb-world-img img { transform: scale(1.04); }
.vb-world-body { padding: 22px 24px 26px; }
.vb-world-body h3 { font-size: 24px; text-transform: uppercase; }
.vb-world-body p { color: var(--muted); margin: 10px 0 0; }
.vb-tag { font: 500 12px var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; margin-top: 6px !important; }
@media (max-width: 820px) { .vb-worlds { grid-template-columns: 1fr; } }

.vb-contrast { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vb-contrast > div { display: grid; grid-template-columns: 1fr 1fr; }
.vb-contrast > div + div { border-top: 1px solid var(--line); }
.vb-contrast span { padding: 13px 22px; color: var(--muted); }
.vb-contrast span + span { border-left: 1px solid var(--line); }
.vb-contrast .c-head span { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: var(--panel); }
.vb-contrast .c-quote span { font: 600 17px var(--display); color: var(--text); text-transform: uppercase; }

/* scale */
.vb-ladders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vb-ladder h3 { text-transform: uppercase; margin-bottom: 20px; }
.vb-ladder ol { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.vb-ladder li { counter-increment: l; position: relative; padding: 0 0 18px 44px; }
.vb-ladder li::before { content: counter(l, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 500 13px var(--mono); color: var(--accent); }
.vb-ladder li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: 4px; width: 1px; background: var(--line-2); }
.vb-ladder b { display: block; font: 600 15px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.vb-ladder span { color: var(--muted); font-size: 14px; }
.vb-distances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.vb-distances div { background: var(--bg-2); padding: 22px 20px; }
.vb-distances small { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.vb-distances p { font: 600 18px/1.25 var(--display); margin: 8px 0 0; text-transform: uppercase; }
@media (max-width: 900px) { .vb-ladders { grid-template-columns: 1fr; } .vb-distances { grid-template-columns: 1fr 1fr; } }

/* modes */
.vb-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vb-mode { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; position: relative; transition: border-color .15s; }
.vb-mode:hover { border-color: var(--accent); }
.vb-mode span { font: 700 17px var(--display); text-transform: uppercase; }
.vb-mode small { color: var(--muted); }
.vb-mode em { position: absolute; top: 14px; left: 20px; font-style: normal; }
.vb-mode.feature { grid-row: span 2; background: linear-gradient(160deg, var(--accent), #8a0c19); border-color: var(--accent); }
.vb-mode.feature span { font-size: 30px; }
.vb-mode.feature small, .vb-mode.feature em { color: #ffd9dd; border-color: rgba(255,217,221,.5); }
.vb-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.vb-pillars h4 { font: 600 16px var(--display); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.vb-pillars h4::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-bottom: 12px; }
.vb-pillars p { color: var(--muted); margin: 8px 0 0; }
@media (max-width: 900px) { .vb-modes { grid-template-columns: 1fr 1fr; } .vb-pillars { grid-template-columns: 1fr; gap: 24px; } }

/* arsenal */
.vb-arsenal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.vb-stage { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.vb-ring { position: absolute; inset: 8% 12%; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, rgba(224,24,45,.2), transparent 65%); }
.vb-stage img { position: relative; width: 92%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.vb-stage img.in { animation: vbslide .5s cubic-bezier(.2,.8,.2,1); }
@keyframes vbslide { from { opacity: 0; transform: translateX(40px) scale(.96); } }
.vb-pill { display: inline-block; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; margin: 0 0 12px; border: 1px solid var(--line-2); color: var(--text); border-radius: 2px; }
.vb-pill[data-kind="ascended"] { border-color: var(--accent); color: var(--accent); }
#w-name { font-size: clamp(36px, 5vw, 60px); text-transform: uppercase; }
.vb-wclass { font: 500 16px var(--display); color: var(--muted); margin: 4px 0 16px; text-transform: uppercase; letter-spacing: .1em; }
.vb-wtags { border-left: 2px solid var(--accent); padding-left: 14px; margin: 0 0 18px; }
.vb-wparts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-wparts li { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 9px 12px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vb-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 32px; }
.vb-picker button { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); padding: 10px 6px 8px; font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase; transition: border-color .15s, color .15s, transform .15s; }
.vb-picker button img { height: 40px; width: 100%; object-fit: contain; margin-bottom: 6px; opacity: .75; }
.vb-picker button:hover { color: var(--text); transform: translateY(-2px); }
.vb-picker button[aria-selected="true"] { border-color: var(--accent); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.vb-picker button[aria-selected="true"] img { opacity: 1; }
.vb-note { font-size: 13px; color: var(--dim); margin-top: 12px; }
.vb-wcard { text-align: left; padding: 0; }
.vb-wcard-media { background: radial-gradient(circle, rgba(224,24,45,.16), transparent 70%), var(--panel-2) !important; }
.vb-wcard-media img { object-fit: contain !important; padding: 18px; }
@media (max-width: 900px) { .vb-arsenal { grid-template-columns: 1fr; } .vb-picker { grid-template-columns: repeat(4, 1fr); } }

/* gallery videos + press */
.g-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-item figcaption a { color: var(--accent); }
.vb-press-w img { object-fit: contain !important; padding: 16px; background: radial-gradient(circle, rgba(224,24,45,.14), transparent 70%), var(--panel-2); }
.vb-press-logo { width: 100%; mix-blend-mode: screen; margin-bottom: 14px; }
.vb-facts { margin: 0; display: grid; gap: 10px; }
.vb-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.vb-facts dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); padding-top: 3px; }
.vb-facts dd { margin: 0; }
.vb-about-emblem { width: 100%; max-width: 280px; mix-blend-mode: screen; margin: 0 auto 20px; }
.vb-ladder { padding: 26px 28px; }
.g-item video { aspect-ratio: 16 / 9; height: auto; }
.vb-dl figcaption { opacity: 1; pointer-events: auto; position: static; background: var(--panel); padding: 10px 14px; }
@media (min-width: 900px) { .gallery.vb-dl { grid-template-columns: repeat(3, 1fr); } }