/* ==========================================================================
   GP.OS views — About · Achievements · Journey · Stats · Contact
   Styles everything js/views.js renders into #about-root, #achievements-root,
   #journey-root, #skills-root, #contact-root, plus the achievement modal
   (#vw-ach-modal) and the photo lightbox (#vw-lightbox), both appended to
   <body>. Photos come from GP.util.photo() (.gp-photo, core.css); this file
   only sizes and frames them.

   Builds on core.css tokens and style.css shared classes (.container,
   .view-head, .panel, .btn, .chip, .hud-label, [data-reveal]).

   Rules of the road for this file
   - Elements carrying [data-reveal] get their opacity / transform / filter /
     clip-path / transition from style.css. Never set those properties on them
     here (hover / state effects live on children or pseudo-elements instead).
   - Cards that GP.ui.tilt() drives get an inline `transform`; hover lifts use
     the independent `translate` property so the two compose.
   - Primary neon is always var(--accent) / rgba(var(--accent-rgb), a) and
     var(--accent-2) so the terminal `theme` command recolours everything.
   ========================================================================== */

@property --vw-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ------------------------------------------------------------ local tokens */
.vw-mount,
.vw-modal,
.vw-lightbox {
  --vw-glass:
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.075), transparent 42%),
    linear-gradient(180deg, rgba(14, 20, 46, 0.62), rgba(7, 10, 26, 0.74));
  --vw-line: rgba(var(--accent-rgb), 0.16);
  --vw-line-strong: rgba(var(--accent-rgb), 0.45);
  --vw-hexclip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* hidden attribute must win over every display rule below */
.vw-mount [hidden],
.vw-modal[hidden],
.vw-modal [hidden],
.vw-lightbox[hidden],
.vw-lightbox [hidden] {
  display: none !important;
}

/* ================================================================== SHARED */
.vw-mount {
  position: relative;
  display: block;
  min-width: 0;
}
/* the shell's .view-inner already carries the gutter */
.vw-mount.vw-flush {
  max-width: none;
  padding-inline: 0;
}

/* style.css hides [data-reveal='glitch'] with clip-path: inset(0 0 100% 0).
   IntersectionObserver honours the target's own clip-path, so the element
   reports a zero-area intersection and main.js never reveals it (the view
   titles stayed invisible). Hide with opacity only (from style.css) — the
   gp-reveal-glitch keyframes still run once .is-revealed lands. */
.gp-js .vw-mount [data-reveal='glitch']:not(.is-revealed) {
  -webkit-clip-path: none;
  clip-path: none;
}

/* zero-specificity resets: any class rule (e.g. .view-sub) still wins */
:where(.vw-mount) :where(h3, p, dl, dd, ul, ol, figure, blockquote) {
  margin: 0;
}
:where(.vw-mount) :where(ul, ol) {
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- subhead */
.vw-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  margin: 0 0 clamp(18px, 3vw, 26px);
}
.vw-subhead__code {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.65);
}
.vw-subhead__label {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(13.5px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}
.vw-subhead__rule {
  position: relative;
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6), rgba(var(--accent-2-rgb), 0.22) 60%, transparent);
}
.vw-subhead__rule::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 8px var(--accent);
  animation: vw-rule-run 4.2s var(--ease-in-out) infinite;
}
.vw-subhead__extra {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ status dots */
.vw-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.vw-dot--live {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: vw-live 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------- hex badge */
.vw-hex {
  --vw-hex: 54px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--vw-hex);
  height: calc(var(--vw-hex) * 1.1547);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.45)) drop-shadow(0 0 22px rgba(var(--accent-2-rgb), 0.16));
}
.vw-hex--lg {
  --vw-hex: 70px;
}
.vw-hex--xl {
  --vw-hex: 96px;
}
.vw-hex__ring,
.vw-hex__core {
  position: absolute;
  -webkit-clip-path: var(--vw-hexclip);
  clip-path: var(--vw-hexclip);
}
.vw-hex__ring {
  inset: 0;
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.35);
}
.vw-hex__ring::before {
  content: '';
  position: absolute;
  inset: -35%;
  background: conic-gradient(
    from 0deg,
    var(--accent),
    var(--accent-2) 22%,
    rgba(var(--accent-rgb), 0.15) 40%,
    var(--accent) 60%,
    var(--accent-2) 80%,
    var(--accent)
  );
  animation: vw-spin 7s linear infinite;
}
.vw-hex__core {
  inset: 2px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.3), transparent 62%),
    linear-gradient(180deg, rgba(14, 22, 52, 0.98), rgba(5, 7, 18, 0.98));
  font-size: calc(var(--vw-hex) * 0.42);
  line-height: 1;
  text-align: center;
}
.vw-hex__core::after {
  /* inner bevel line */
  content: '';
  position: absolute;
  inset: 4px;
  -webkit-clip-path: var(--vw-hexclip);
  clip-path: var(--vw-hexclip);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}

/* ---------------------------------------------------------- empty states */
.vw-empty {
  margin: 0;
  padding: clamp(28px, 6vw, 48px) 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.03);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* gradient-text elements: a ✎ placeholder falls back to plain text so the
   core .is-placeholder look (italic + dashed underline) reads clearly */
.vw-mount .is-placeholder:is(.vw-motto__text, .vw-tl-card__year, .vw-idcard__name, .vw-level__name, .vw-craft__title) {
  background: none;
  color: var(--text-dim);
  -webkit-text-fill-color: currentColor;
}

/* ========================================================================
   ABOUT
   ======================================================================== */
.vw-about__top {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}
.vw-about__card-col {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  min-width: 0;
}
.vw-about__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vw-about__info > .vw-subhead:not(:first-child) {
  margin-top: clamp(32px, 5vw, 48px);
}

/* --------------------------------------------------------------- ID card */
.vw-idcard-wrap {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.vw-idcard {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 20px 22px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  border-radius: 20px;
  background:
    linear-gradient(165deg, rgba(var(--accent-rgb), 0.14), transparent 38%),
    linear-gradient(345deg, rgba(var(--accent-2-rgb), 0.13), transparent 42%),
    linear-gradient(180deg, rgba(12, 18, 44, 0.88), rgba(5, 8, 22, 0.94));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(var(--accent-rgb), 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.vw-idcard:hover {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.2),
    0 34px 90px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(var(--accent-rgb), 0.28);
}
/* boot scan line (.is-booting) */
.vw-idcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff 30%, var(--accent) 50%, #fff 70%, transparent);
  box-shadow: 0 0 18px var(--accent), 0 0 40px rgba(var(--accent-rgb), 0.6);
  opacity: 0;
  pointer-events: none;
}
/* HUD corner brackets */
.vw-idcard::after {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 3;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 1.5px 14px no-repeat;
  opacity: 0.75;
}
.vw-idcard > * {
  position: relative;
  z-index: 2;
}
.vw-idcard > .tilt-glare {
  position: absolute;
  z-index: 4;
}

.vw-idcard__holo,
.vw-idcard__grid {
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.vw-idcard__grid {
  z-index: 0 !important;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.075) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 38%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 38%, #000 25%, transparent 78%);
}
.vw-idcard__holo {
  z-index: 3 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--vw-mx, 50%) var(--vw-my, 26%), rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(var(--accent-rgb), 0.2) 32%,
      rgba(var(--accent-2-rgb), 0.2) 46%,
      rgba(255, 230, 0, 0.12) 58%,
      rgba(57, 255, 20, 0.1) 66%,
      transparent 80%
    );
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, var(--vw-mx, 50%) var(--vw-my, 50%);
  mix-blend-mode: screen;
  opacity: 0.45;
  transition: opacity 0.4s;
}
.vw-idcard:hover .vw-idcard__holo {
  opacity: 0.95;
}
/* idle holographic sweep */
.vw-idcard__holo::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14) 45%, rgba(var(--accent-rgb), 0.18) 55%, transparent);
  transform: translateX(-130%) skewX(-12deg);
  animation: vw-holo-sweep 6.5s var(--ease-in-out) infinite 1.5s;
}

.vw-idcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
  min-width: 0;
}
.vw-idcard__org {
  min-width: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: left;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
.vw-idcard__chip {
  flex: none;
  width: 34px;
  height: 26px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 32%, rgba(80, 50, 0, 0.55) 32% 35%, transparent 35% 65%, rgba(80, 50, 0, 0.55) 65% 68%, transparent 68%),
    linear-gradient(180deg, transparent 30%, rgba(80, 50, 0, 0.55) 30% 34%, transparent 34% 66%, rgba(80, 50, 0, 0.55) 66% 70%, transparent 70%),
    linear-gradient(135deg, #fff1b8, var(--gold) 45%, #b8862a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 194, 61, 0.35);
}

/* avatar: George's portrait in a hex frame, inside rotating HUD rings */
.vw-avatar {
  position: relative;
  width: min(78%, 250px);
  aspect-ratio: 1 / 1;
  margin: 4px auto 2px;
}
.vw-avatar__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45));
}
/* hex photo frame — circumradius 80 of the SVG's 212-unit box (see avatarSVG in views.js) */
.vw-avatar__hex {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 65.36%;
  height: 75.47%;
  margin: auto;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.55)) drop-shadow(0 0 28px rgba(var(--accent-2-rgb), 0.2));
}
.vw-avatar__ring,
.vw-avatar__core {
  position: absolute;
  overflow: hidden;
  -webkit-clip-path: var(--vw-hexclip);
  clip-path: var(--vw-hexclip);
}
.vw-avatar__ring {
  inset: 0;
  background: rgba(var(--accent-rgb), 0.4);
}
.vw-avatar__ring::before {
  /* neon border: a conic gradient spinning behind the photo */
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    var(--accent),
    var(--accent-2) 22%,
    rgba(var(--accent-rgb), 0.12) 40%,
    var(--accent) 60%,
    var(--accent-2) 80%,
    var(--accent)
  );
  animation: vw-spin 6s linear infinite;
}
.vw-avatar__core {
  inset: 2.5px;
  background: var(--bg-3);
}
.vw-avatar__core > .vw-id__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* views.js adds .is-wide to a landscape portrait: it is zoomed in around its focal point
   (content.js `position` → --photo-pos) so the tall hex frame shows George's face */
.vw-id__photo {
  --vw-id-zoom: 1;
}
.vw-id__photo.is-wide {
  --vw-id-zoom: 1.45;
}
.vw-id__photo > img {
  transform: scale(var(--vw-id-zoom));
  transform-origin: var(--photo-pos, 50% 30%);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-out);
}
.vw-idcard:hover .vw-id__photo > img {
  transform: scale(calc(var(--vw-id-zoom) * 1.05));
}
.vw-id__photo .gp-photo__label {
  font-size: 8.5px;
  letter-spacing: 0.2em;
}
.vw-id__photo.is-empty .gp-photo__mono {
  animation: vw-breathe 3.6s ease-in-out infinite;
}
/* vignette, so the frame edge always reads */
.vw-avatar__core::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 78% 66% at 50% 42%, transparent 55%, rgba(4, 5, 13, 0.55));
  pointer-events: none;
}
/* hologram tint: fine scanlines + accent wash at the bottom */
.vw-avatar__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 42%, rgba(var(--accent-rgb), 0.26)),
    linear-gradient(0deg, transparent 72%, rgba(var(--accent-2-rgb), 0.14));
  mix-blend-mode: screen;
  pointer-events: none;
}
.vw-stop-a {
  stop-color: var(--accent);
}
.vw-stop-b {
  stop-color: var(--accent-2);
}
.vw-stop-core {
  stop-color: var(--accent);
  stop-opacity: 0.32;
}
.vw-stop-clear {
  stop-color: var(--accent);
  stop-opacity: 0;
}
.vw-av-glow {
  animation: vw-breathe 4s ease-in-out infinite;
}
.vw-av-ticks line {
  stroke: rgba(var(--accent-rgb), 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.vw-av-ticks,
.vw-av-ring,
.vw-av-hex--echo {
  transform-box: fill-box;
  transform-origin: center;
}
.vw-av-ticks {
  animation: vw-spin 60s linear infinite;
}
.vw-av-ring circle {
  fill: none;
  stroke-width: 1.5;
}
.vw-av-ring--outer circle {
  stroke: rgba(var(--accent-rgb), 0.65);
  stroke-dasharray: 3 7;
}
.vw-av-ring--outer {
  animation: vw-spin 34s linear infinite;
}
.vw-av-ring--mid circle {
  stroke: var(--accent-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 110 30 40 30 60 245;
  opacity: 0.85;
}
.vw-av-ring--mid {
  animation: vw-spin 16s linear infinite reverse;
}
.vw-av-hex {
  stroke-linejoin: round;
}
.vw-av-hex--echo {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1;
  opacity: 0.6;
  animation: vw-av-echo 3.2s var(--ease-out) infinite;
}
/* scan line sweeping down the portrait (clipped to the hex by .vw-avatar__core) */
.vw-avatar__scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.vw-avatar__scan::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.3) 70%, rgba(255, 255, 255, 0.5) 72%, transparent 74%);
  animation: vw-av-scan 3.8s ease-in-out infinite;
}

.vw-idcard__name {
  max-width: 100%;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow-wrap: anywhere;
}
.vw-idcard__role {
  max-width: 100%;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.vw-idcard__loc {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vw-idcard__pin {
  flex: none;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
  animation: vw-blink-soft 1.8s steps(1) infinite;
}
.vw-idcard__loc-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vw-idcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  align-self: stretch;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--accent-rgb), 0.25);
}
.vw-idcard__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.vw-idcard__meta-label {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
}
.vw-idcard__idno {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}
.vw-idcard__barcode {
  flex: 0 1 96px;
  min-width: 48px;
  height: 30px;
  opacity: 0.75;
  background:
    repeating-linear-gradient(
      90deg,
      var(--text) 0 1px,
      transparent 1px 3px,
      var(--text) 3px 6px,
      transparent 6px 7px,
      var(--text) 7px 8px,
      transparent 8px 11px,
      var(--text) 11px 13px,
      transparent 13px 14px
    );
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
/* stamped across the lower corner of the portrait (lives inside .vw-avatar) */
.vw-idcard__stamp {
  position: absolute !important;
  right: -7%;
  bottom: 9%;
  z-index: 4 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 2px solid var(--lime);
  border-radius: 6px;
  /* dark base so the stamp stays legible over a real photo */
  background: linear-gradient(rgba(57, 255, 20, 0.1), rgba(57, 255, 20, 0.1)), rgba(4, 5, 13, 0.6);
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.35), inset 0 0 10px rgba(57, 255, 20, 0.18);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
  pointer-events: none;
  transform: rotate(-13deg) scale(2.3);
  opacity: 0;
  transition: transform 0.45s var(--ease-back), opacity 0.2s ease;
}
.vw-idcard__stamp.is-stamped {
  transform: rotate(-13deg) scale(1);
  opacity: 1;
}
.vw-idcard__stamp-tick {
  font-size: 11px;
}

/* card states */
.vw-idcard.is-booting {
  animation: vw-id-boot 1.1s var(--ease-out) both;
}
.vw-idcard.is-booting::before {
  animation: vw-id-scan 1.1s var(--ease-out) both;
}
.vw-idcard.is-booting .vw-av-ring--mid {
  animation-duration: 2.4s;
}
.vw-idcard.is-booting .vw-id__photo {
  animation: vw-photo-boot 1.3s linear both;
}
.vw-idcard.is-glitch {
  animation: vw-id-glitch 0.5s steps(1, end) both;
}
.vw-idcard.is-booting.is-glitch {
  animation: vw-id-boot 1.1s var(--ease-out) both, vw-id-glitch 0.5s steps(1, end) both;
}
.vw-idcard.is-glitch .vw-idcard__name,
.vw-idcard.is-glitch .vw-idcard__role {
  animation: vw-text-split 0.5s steps(2, end) both;
}

/* ----------------------------------------------------------------- facts */
.vw-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  margin: 0;
}
.vw-fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px 12px 18px;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), rgba(8, 12, 30, 0.4) 70%);
}
.vw-fact::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent);
  transform: scaleY(0.4);
  transition: transform 0.45s var(--ease-out);
}
.vw-fact::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.vw-fact:hover::before {
  transform: scaleY(1);
}
.vw-fact:hover::after {
  opacity: 1;
}
.vw-fact__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.vw-fact__idx {
  flex: none;
  color: var(--accent);
  opacity: 0.85;
}
.vw-fact__label-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vw-fact__value {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- bio */
.vw-bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 70ch;
}
.vw-bio__p {
  position: relative;
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.vw-bio__p::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
.vw-bio__p:first-child {
  color: var(--text);
}

/* ---------------------------------------------------------------- traits */
.vw-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
}
.vw-traits__item {
  max-width: 100%;
  min-width: 0;
}
.vw-trait {
  max-width: 100%;
  padding: 7px 13px;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.vw-trait::before {
  content: '+';
  color: var(--accent);
  font-weight: 700;
}
.vw-trait:hover {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3);
}

/* ------------------------------------------------- right now + motto row */
.vw-about__mid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(48px, 8vw, 96px);
}
.vw-about__mid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.vw-now {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  background: var(--vw-glass);
}
.vw-now__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vw-line);
}
.vw-now__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border: 1px solid rgba(57, 255, 20, 0.4);
  border-radius: 999px;
  background: rgba(57, 255, 20, 0.07);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.vw-now__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.vw-now__feed {
  margin-left: auto;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.vw-now__list {
  display: flex;
  flex-direction: column;
}
.vw-now__row {
  display: grid;
  grid-template-columns: auto minmax(84px, 9.5em) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.14);
}
.vw-now__row:last-child {
  border-bottom: 0;
}
.vw-now__dot {
  align-self: center;
  width: 6px;
  height: 6px;
  animation: vw-blink-soft 2.4s steps(1) infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
}
.vw-now__label {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vw-now__value {
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vw-motto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: clamp(26px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-2-rgb), 0.28);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-2-rgb), 0.16), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(var(--accent-rgb), 0.14), transparent 55%),
    rgba(8, 12, 30, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.vw-motto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.vw-motto__mark {
  position: absolute;
  top: -0.22em;
  left: 0.08em;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(120px, 16vw, 210px);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(var(--accent-2-rgb), 0.38);
  pointer-events: none;
  user-select: none;
}
.vw-motto__quote {
  position: relative;
  z-index: 1;
  margin: 0;
}
.vw-motto__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, var(--text) 10%, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow-wrap: anywhere;
}
.vw-motto__by {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vw-motto__tag {
  padding: 3px 8px;
  border: 1px solid rgba(var(--accent-2-rgb), 0.45);
  border-radius: 4px;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.vw-motto__dash {
  color: var(--text-faint);
}
.vw-motto__name {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- interests (flip) */
.vw-about > .vw-subhead {
  margin-top: clamp(48px, 8vw, 96px);
}
.vw-interests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.vw-flip {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 210px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
}
.vw-flip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.vw-flip__inner {
  position: relative;
  display: grid;
  min-height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-out);
}
.vw-flip.is-flipped .vw-flip__inner {
  transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .vw-flip:hover .vw-flip__inner {
    transform: rotateY(180deg);
  }
}
.vw-flip__face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 26px 18px 20px;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: var(--radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.vw-flip__front {
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(14, 20, 46, 0.86), rgba(7, 10, 26, 0.92));
}
.vw-flip__front::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1.5px 10px no-repeat;
  opacity: 0.7;
}
.vw-flip__back {
  justify-content: flex-start;
  text-align: left;
  align-items: stretch;
  border-color: rgba(var(--accent-rgb), 0.55);
  background:
    linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-2-rgb), 0.14) 60%, rgba(7, 10, 26, 0.95)),
    rgba(7, 10, 26, 0.95);
  box-shadow: inset 0 0 30px rgba(var(--accent-rgb), 0.12), 0 0 30px rgba(var(--accent-rgb), 0.18);
  transform: rotateY(180deg);
}
.vw-flip__back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vw-flip__idx {
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
}
.vw-flip__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 70%);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25), inset 0 0 14px rgba(var(--accent-rgb), 0.2);
  font-size: 30px;
  line-height: 1;
}
.vw-flip__title {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vw-flip__title--sm {
  padding-right: 34px;
  color: #fff;
  font-size: 13px;
}
.vw-flip__hint {
  margin-top: auto;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  opacity: 0.85;
}
.vw-flip__front .vw-flip__hint {
  animation: vw-blink-soft 2.2s steps(1) infinite;
}
.vw-flip__back .vw-flip__hint {
  color: var(--lime);
}
.vw-flip__back-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  line-height: 1;
  opacity: 0.9;
}
.vw-flip__text {
  position: relative;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------- the craft (content.craft) */
/* phones: one column · ≥760px: services in 3 columns · ≥961px: intro splits in two */
.vw-craft-wrap {
  min-width: 0;
}
.vw-craft {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.6vw, 38px);
  min-width: 0;
  padding: clamp(22px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 90% at var(--vw-mx, 88%) var(--vw-my, 0%), rgba(var(--accent-rgb), 0.15), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-2-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(12, 18, 44, 0.86), rgba(5, 8, 22, 0.92));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(var(--accent-rgb), 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.vw-craft > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}
/* corner brackets */
.vw-craft::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  border-radius: 16px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 18px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 18px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 1.5px 18px no-repeat;
  opacity: 0.8;
}
/* travelling neon border */
.vw-craft > .vw-craft__border {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--vw-angle),
    transparent 0 55%,
    rgba(var(--accent-rgb), 0.95) 70%,
    rgba(var(--accent-2-rgb), 0.95) 82%,
    transparent 94%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: vw-angle 7s linear infinite;
}
.vw-craft > .vw-craft__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.065) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 82% 18%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 85% at 82% 18%, #000, transparent 75%);
}
/* outlined "CEO" watermark behind the intro */
.vw-craft > .vw-craft__mark {
  position: absolute;
  top: -0.14em;
  right: -0.03em;
  z-index: 0;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(96px, 17vw, 230px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.14);
  pointer-events: none;
  user-select: none;
}

/* intro: kicker · title · role badge | lead · description */
.vw-craft__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px clamp(28px, 4vw, 56px);
}
.vw-craft__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.vw-craft__file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  line-height: 1.4;
}
.vw-craft__title {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.6vw, 64px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  background: linear-gradient(95deg, #fff 15%, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.25));
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.vw-craft__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 13px;
  border: 1px solid rgba(var(--accent-2-rgb), 0.6);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.2), rgba(var(--accent-rgb), 0.1));
  box-shadow: 0 0 18px rgba(var(--accent-2-rgb), 0.25), inset 0 0 12px rgba(var(--accent-2-rgb), 0.12);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}
.vw-craft__role-star {
  flex: none;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 194, 61, 0.8);
}
.vw-craft__role-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vw-craft__pitch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vw-craft__lead {
  position: relative;
  padding-left: 16px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  overflow-wrap: anywhere;
}
.vw-craft__lead::before {
  content: '';
  position: absolute;
  top: 0.15em;
  bottom: 0.15em;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--accent);
}
.vw-craft__desc {
  max-width: 60ch;
  color: var(--text-dim);
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
@media (min-width: 961px) {
  .vw-craft__intro:not(.is-single) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* numbered neon service cards: 1 column on phones, 3 from 760px */
.vw-craft__services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
}
.vw-craft__svc {
  display: flex;
  min-width: 0;
}
.vw-svc {
  --vw-svc: var(--accent);
  --vw-svc-rgb: var(--accent-rgb);
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'num title'
    'text text';
  align-content: start;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  padding: 18px 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--vw-svc-rgb), 0.3);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--vw-svc-rgb), 0.12), transparent 60%),
    var(--vw-glass);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out);
}
.vw-craft__svc:nth-child(even) .vw-svc {
  --vw-svc: var(--accent-2);
  --vw-svc-rgb: var(--accent-2-rgb);
}
/* neon strip along the top edge */
.vw-svc::before {
  content: '';
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  z-index: 2;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--vw-svc), transparent);
  box-shadow: 0 0 12px var(--vw-svc);
  opacity: 0.75;
  pointer-events: none;
  transition: right 0.45s var(--ease-out), left 0.45s var(--ease-out), opacity 0.3s;
}
/* HUD corner tick */
.vw-svc::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 2;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--vw-svc), var(--vw-svc)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(var(--vw-svc), var(--vw-svc)) bottom right / 1.5px 10px no-repeat;
  opacity: 0.6;
  transition: inset 0.35s var(--ease-out), opacity 0.3s;
}
.vw-svc > .tilt-glare {
  position: absolute;
  z-index: 3;
}
.vw-svc__border {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--vw-angle),
    transparent 0 52%,
    rgba(var(--vw-svc-rgb), 0.95) 68%,
    rgba(var(--accent-2-rgb), 0.9) 80%,
    transparent 93%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.vw-svc__scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.vw-svc__scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0 calc(100% - 56px),
    rgba(var(--vw-svc-rgb), 0.14) calc(100% - 3px),
    rgba(255, 255, 255, 0.55) calc(100% - 2px),
    transparent 100%
  );
  transform: translateY(-100%);
}
.vw-svc__num {
  grid-area: num;
  position: relative;
  z-index: 1;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1.5px var(--vw-svc);
  text-shadow: 0 0 18px rgba(var(--vw-svc-rgb), 0.4);
  transition: color 0.35s, text-shadow 0.35s;
}
.vw-svc__title {
  grid-area: title;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vw-svc__text {
  grid-area: text;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .vw-svc:hover {
    translate: 0 -4px;
    border-color: rgba(var(--vw-svc-rgb), 0.6);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--vw-svc-rgb), 0.22);
  }
  .vw-svc:hover::before {
    right: 8px;
    left: 8px;
    opacity: 1;
  }
  .vw-svc:hover::after {
    inset: 9px;
    opacity: 1;
  }
  .vw-svc:hover .vw-svc__border {
    opacity: 1;
    animation: vw-angle 3.2s linear infinite;
  }
  .vw-svc:hover .vw-svc__scan::after {
    animation: vw-gal-scan 1.9s linear infinite;
  }
  .vw-svc:hover .vw-svc__num {
    color: rgba(var(--vw-svc-rgb), 0.2);
    text-shadow: 0 0 22px rgba(var(--vw-svc-rgb), 0.75);
  }
}
@media (min-width: 760px) {
  .vw-craft__services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vw-svc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'num'
      'title'
      'text';
    align-items: start;
    gap: 12px;
    padding: 24px 22px 24px;
  }
  .vw-svc__num {
    margin-bottom: 4px;
  }
}

/* footer: service count + call to action */
.vw-craft__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding-top: clamp(16px, 2.4vw, 22px);
  border-top: 1px dashed rgba(var(--accent-rgb), 0.22);
}
.vw-craft__count {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  line-height: 1.4;
}
.vw-craft__count-num {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
/* long labels wrap instead of being clipped by .btn's nowrap + overflow: hidden */
.vw-craft__cta {
  max-width: 100%;
  margin-left: auto;
  padding-block: 12px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}
.vw-craft__cta-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- gallery */
/* phones: 1 column (lead photo tall) · ≥560px: 2 columns · ≥960px: 3 columns, lead photo 2×2 */
.vw-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
.vw-gallery__item {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-width: 0;
  aspect-ratio: 4 / 3;
}
.vw-gallery__item:first-child {
  aspect-ratio: 4 / 5;
}
@media (min-width: 560px) {
  .vw-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vw-gallery__item,
  .vw-gallery__item:first-child {
    aspect-ratio: 4 / 5;
  }
  .vw-gallery.is-solo {
    grid-template-columns: minmax(0, 1fr);
  }
  .vw-gallery.is-solo .vw-gallery__item {
    aspect-ratio: 16 / 9;
  }
  .vw-gallery.is-mosaic .vw-gallery__item:first-child,
  .vw-gallery.is-mosaic .vw-gallery__item:last-child:nth-child(even) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 960px) {
  .vw-gallery.is-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* lead photo fills a 2×2 block; its height comes from the two tiles beside it */
  .vw-gallery.is-mosaic .vw-gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .vw-gallery.is-mosaic .vw-gallery__item:last-child:nth-child(even) {
    grid-column: auto;
    aspect-ratio: 4 / 5;
  }
  /* no orphans: a last photo alone on its row goes wide, a pair shares the row */
  .vw-gallery.is-mosaic .vw-gallery__item:last-child:nth-child(3n + 4) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
  .vw-gallery.is-mosaic .vw-gallery__item:last-child:nth-child(3n + 5) {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
/* exactly four photos (.is-quad) — phones: 1 column · ≥560px: 2×2 · ≥960px: a near-square
   lead tile spanning both rows, two squares beside it and one wide tile under them.
   Tiles crop with object-fit: cover around each photo's focal point (--photo-pos). */
.vw-gallery.is-quad .vw-gallery__item {
  aspect-ratio: 4 / 3;
}
.vw-gallery.is-quad .vw-gallery__item:first-child {
  aspect-ratio: 1 / 1;
}
@media (min-width: 560px) {
  .vw-gallery.is-quad .vw-gallery__item,
  .vw-gallery.is-quad .vw-gallery__item:first-child {
    aspect-ratio: 5 / 4;
  }
}
@media (min-width: 960px) {
  .vw-gallery.is-quad {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  }
  /* its height comes from the two rows beside it */
  .vw-gallery.is-quad .vw-gallery__item:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .vw-gallery.is-quad .vw-gallery__item:nth-child(2),
  .vw-gallery.is-quad .vw-gallery__item:nth-child(3) {
    aspect-ratio: 1 / 1;
  }
  .vw-gallery.is-quad .vw-gallery__item:nth-child(4) {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
}

.vw-gallery__tile {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out);
}
.vw-gallery__tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.vw-gallery__tile .vw-gallery__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  filter: saturate(0.9) brightness(0.9);
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
}
/* caption scrim + fine scanlines */
.vw-gallery__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(4, 5, 13, 0.9), rgba(4, 5, 13, 0.35) 30%, transparent 56%),
    linear-gradient(180deg, rgba(4, 5, 13, 0.5), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
/* HUD corner brackets */
.vw-gallery__tile::after {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 4;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 12px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 12px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 12px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 12px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 1.5px 12px no-repeat;
  opacity: 0.55;
  transition: inset 0.35s var(--ease-out), opacity 0.3s;
}
/* holographic glare (follows the mouse) + sweeping scan line */
.vw-gallery__fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--vw-mx, 50%) var(--vw-my, 30%), rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(115deg, transparent 25%, rgba(var(--accent-rgb), 0.16) 42%, rgba(var(--accent-2-rgb), 0.14) 56%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.vw-gallery__fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0 calc(100% - 64px),
    rgba(var(--accent-rgb), 0.2) calc(100% - 3px),
    rgba(255, 255, 255, 0.85) calc(100% - 2px),
    transparent 100%
  );
  transform: translateY(-100%);
}
.vw-gallery__idx {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 3px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 4px;
  background: rgba(4, 5, 13, 0.62);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
.vw-gallery__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(4, 5, 13, 0.62);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s, scale 0.45s var(--ease-out);
}
.vw-gallery__cap {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 3;
  display: -webkit-box;
  padding-bottom: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.vw-gallery.is-mosaic .vw-gallery__item:first-child .vw-gallery__cap,
.vw-gallery.is-solo .vw-gallery__cap {
  right: 18px;
  bottom: 16px;
  left: 18px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (min-width: 960px) {
  .vw-gallery.is-quad .vw-gallery__item:first-child .vw-gallery__cap {
    right: 18px;
    bottom: 16px;
    left: 18px;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.8vw, 20px);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}
.vw-gallery__tile:focus-visible .vw-gallery__fx {
  opacity: 1;
}
.vw-gallery__tile:focus-visible::after {
  inset: 12px;
  opacity: 1;
}
.vw-gallery__tile:focus-visible .vw-gallery__zoom {
  opacity: 1;
  border-color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .vw-gallery__tile:hover {
    translate: 0 -6px;
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(var(--accent-rgb), 0.25);
  }
  .vw-gallery__tile:hover::after {
    inset: 12px;
    opacity: 1;
  }
  .vw-gallery__tile:hover .vw-gallery__fx {
    opacity: 1;
  }
  .vw-gallery__tile:hover .vw-gallery__fx::after {
    animation: vw-gal-scan 1.9s linear infinite;
  }
  .vw-gallery__tile:hover .vw-gallery__photo {
    filter: none;
    transform: scale(1.06);
  }
  .vw-gallery__tile:hover .vw-gallery__zoom {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
    scale: 1.08;
  }
}
.vw-gallery__tile:active {
  translate: 0 -1px;
}

/* ========================================================================
   ACHIEVEMENTS
   ======================================================================== */
/* --------------------------------------------------------- stat strip */
.vw-statstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 16px);
  margin-bottom: clamp(22px, 4vw, 34px);
}
.vw-statstrip__cell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'glyph num'
    'glyph label';
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: 12px;
  background: var(--vw-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vw-statstrip__cell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.7;
}
.vw-statstrip__glyph {
  grid-area: glyph;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}
.vw-statstrip__num {
  grid-area: num;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #fff, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.vw-statstrip__label {
  grid-area: label;
  min-width: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.35;
}

/* ----------------------------------------------------------- filter tabs */
.vw-tabs-wrap {
  display: flex;
  min-width: 0;
  max-width: 100%;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.vw-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vw-tabs::-webkit-scrollbar {
  display: none;
}
.vw-tabs__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-2-rgb), 0.2));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.65), 0 0 18px rgba(var(--accent-rgb), 0.35);
  opacity: 0;
  pointer-events: none;
}
.vw-tabs__pill.is-ready {
  opacity: 1;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s ease;
}
.vw-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s, text-shadow 0.25s;
}
.vw-tab:hover {
  color: var(--text);
}
.vw-tab:focus-visible {
  outline-offset: -2px;
}
.vw-tab.is-active {
  color: #fff;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75);
}
.vw-tab__count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-faint);
  font-size: 10px;
  text-align: center;
  text-shadow: none;
  transition: background-color 0.25s, color 0.25s;
}
.vw-tab.is-active .vw-tab__count {
  background: rgba(var(--accent-rgb), 0.3);
  color: #fff;
}

/* -------------------------------------------------------------- sections */
.vw-ach-sec + .vw-ach-sec {
  margin-top: clamp(40px, 7vw, 72px);
}
.vw-ach-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.vw-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}

/* ------------------------------------------------------------ trophy card */
.vw-ach {
  position: relative;
  display: flex;
  min-width: 0;
}
.vw-ach__rv {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.vw-ach__card {
  --vw-tier: var(--accent);
  --vw-tier-rgb: var(--accent-rgb);
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 230px;
  margin: 0;
  padding: 20px 20px 16px;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: var(--radius);
  background:
    linear-gradient(125deg, transparent 20%, rgba(162, 107, 255, 0.06) 40%, rgba(var(--accent-2-rgb), 0.05) 55%, rgba(255, 230, 0, 0.035) 70%, transparent 85%),
    var(--vw-glass);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out);
}
.vw-ach__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.vw-ach__card:active {
  translate: 0 -1px;
}
@media (hover: hover) {
  .vw-ach__card:hover {
    translate: 0 -4px;
  }
}
.vw-ach__card:hover,
.vw-ach__card:focus-visible {
  border-color: rgba(var(--vw-tier-rgb), 0.55);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--vw-tier-rgb), 0.2);
}
/* HUD corner ticks */
.vw-ach__card::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 1;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--vw-tier), var(--vw-tier)) top left / 10px 1.5px no-repeat,
    linear-gradient(var(--vw-tier), var(--vw-tier)) top left / 1.5px 10px no-repeat,
    linear-gradient(var(--vw-tier), var(--vw-tier)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(var(--vw-tier), var(--vw-tier)) bottom right / 1.5px 10px no-repeat;
  opacity: 0.55;
  transition: inset 0.35s var(--ease-out), opacity 0.3s;
}
.vw-ach__card:hover::after,
.vw-ach__card:focus-visible::after {
  inset: 9px;
  opacity: 1;
}
.vw-ach__card > * {
  position: relative;
  z-index: 1;
}
.vw-ach__card > .tilt-glare {
  position: absolute;
  z-index: 3;
}

/* animated neon border ring */
.vw-ach__border {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--vw-angle),
    transparent 0 52%,
    rgba(var(--accent-rgb), 0.95) 68%,
    rgba(var(--accent-2-rgb), 0.95) 80%,
    transparent 93%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.vw-ach__card:hover .vw-ach__border,
.vw-ach__card:focus-visible .vw-ach__border {
  opacity: 1;
  animation: vw-angle 3.2s linear infinite;
}

/* holographic shimmer */
.vw-ach__sheen {
  position: absolute !important;
  inset: 0;
  z-index: 2 !important;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0 36%,
    rgba(var(--accent-rgb), 0.22) 43%,
    rgba(255, 255, 255, 0.28) 49%,
    rgba(var(--accent-2-rgb), 0.22) 55%,
    rgba(255, 230, 0, 0.12) 59%,
    transparent 66% 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.vw-ach__card:hover .vw-ach__sheen,
.vw-ach__card:focus-visible .vw-ach__sheen {
  opacity: 1;
  animation: vw-sheen 1.15s var(--ease-out) both;
}

.vw-ach__top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.vw-ach__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
/* years are free text ('EP. 001–135', '2026 · EP. 132', '@GEORGEPEYROUTON'): sized so a
   16-character label still fits beside the badge in the narrowest (250px) grid card */
.vw-ach__year {
  max-width: 100%;
  color: var(--vw-tier);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-shadow: 0 0 10px rgba(var(--vw-tier-rgb), 0.55);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.vw-ach__cat {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vw-ach__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vw-ach__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.vw-ach__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--vw-tier-rgb), 0.22);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
}
.vw-ach__tier {
  color: var(--text-faint);
}
.vw-ach__open {
  color: var(--vw-tier);
  white-space: nowrap;
  transition: letter-spacing 0.35s var(--ease-out), text-shadow 0.3s;
}
.vw-ach__card:hover .vw-ach__open,
.vw-ach__card:focus-visible .vw-ach__open {
  letter-spacing: 0.3em;
  text-shadow: 0 0 10px rgba(var(--vw-tier-rgb), 0.8);
}
.vw-ach__card:hover .vw-hex,
.vw-ach__card:focus-visible .vw-hex {
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.75)) drop-shadow(0 0 30px rgba(var(--accent-2-rgb), 0.35));
}

/* featured (spotlight) trophies */
.vw-ach--featured .vw-ach__card {
  --vw-tier: var(--gold);
  --vw-tier-rgb: 255, 194, 61;
  min-height: 280px;
  padding: 24px 24px 18px;
  border-color: rgba(255, 194, 61, 0.32);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 194, 61, 0.12), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(var(--accent-2-rgb), 0.1), transparent 60%),
    var(--vw-glass);
}
.vw-ach--featured .vw-ach__border {
  opacity: 0.75;
  background: conic-gradient(
    from var(--vw-angle),
    rgba(255, 194, 61, 0.95),
    rgba(var(--accent-2-rgb), 0.9) 25%,
    rgba(var(--accent-rgb), 0.9) 50%,
    rgba(255, 194, 61, 0.2) 70%,
    rgba(255, 194, 61, 0.95)
  );
  animation: vw-angle 6s linear infinite;
}
.vw-ach--featured .vw-ach__sheen {
  opacity: 0.9;
  animation: vw-sheen-loop 5.5s ease-in-out infinite;
}
.vw-ach--featured .vw-ach__title {
  font-size: clamp(17px, 1.8vw, 21px);
}
.vw-ach--featured .vw-ach__text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.vw-ach--featured .vw-ach__tier {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 194, 61, 0.5);
}
.vw-ach--featured .vw-hex {
  filter: drop-shadow(0 0 10px rgba(255, 194, 61, 0.55)) drop-shadow(0 0 26px rgba(var(--accent-2-rgb), 0.25));
}
.vw-ach--featured .vw-hex__ring::before {
  background: conic-gradient(from 0deg, var(--gold), var(--accent-2) 30%, var(--accent) 55%, var(--gold) 80%, #fff3c4);
}

/* ========================================================== DETAIL MODAL */
.vw-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.vw-modal.is-open {
  pointer-events: auto;
}
.vw-modal__backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    rgba(2, 3, 10, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vw-modal__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vw-modal.is-open .vw-modal__backdrop {
  opacity: 1;
}
.vw-modal__dialog {
  --vw-tier: var(--accent);
  --vw-tier-rgb: var(--accent-rgb);
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  min-width: 0;
  margin: auto;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 36px) clamp(18px, 3vw, 26px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--vw-tier-rgb), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(12, 18, 44, 0.94), rgba(5, 8, 22, 0.96));
  text-align: center;
  opacity: 0;
  transform: perspective(1200px) translateY(26px) rotateX(9deg) scale(0.9);
  transition: transform 0.3s var(--ease-in-out), opacity 0.25s ease;
}
.vw-modal.is-open .vw-modal__dialog {
  opacity: 1;
  transform: none;
  transition: transform 0.6s var(--ease-out), opacity 0.3s ease;
}
.vw-modal__dialog:focus {
  outline: none;
}
.vw-modal__dialog.is-featured {
  --vw-tier: var(--gold);
  --vw-tier-rgb: 255, 194, 61;
  border-color: rgba(255, 194, 61, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 194, 61, 0.1), 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(255, 194, 61, 0.16);
}
.vw-modal__dialog.is-featured::before,
.vw-modal__dialog.is-featured::after {
  border-color: var(--gold);
}

/* CRT scan: a bright line sweeps down when the dialog powers on */
.vw-modal__scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}
.vw-modal__scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(var(--vw-tier-rgb), 0.16) 85%, rgba(255, 255, 255, 0.4) 88%, transparent 90%);
  transform: translateY(-100%);
}
.vw-modal.is-open .vw-modal__scan::before {
  animation: vw-modal-scan 4.5s linear 0.15s infinite;
}

.vw-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 5, 13, 0.6);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.3s, transform 0.45s var(--ease-out);
}
.vw-modal__close:hover,
.vw-modal__close:focus-visible {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
  transform: rotate(90deg);
}

.vw-modal__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vw-modal__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  margin: 0 auto 2px;
}
.vw-modal__badge::before {
  /* orbit ring */
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(var(--vw-tier-rgb), 0.55);
  border-radius: 50%;
  animation: vw-spin 18s linear infinite;
}
.vw-modal__badge::after {
  /* light rays */
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--vw-tier-rgb), 0.22) 0 6deg, transparent 6deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: vw-spin 30s linear infinite reverse;
}
.vw-modal__badge .vw-hex {
  animation: vw-float 4s ease-in-out infinite;
}
.vw-modal__dialog.is-featured .vw-hex {
  filter: drop-shadow(0 0 14px rgba(255, 194, 61, 0.6)) drop-shadow(0 0 36px rgba(var(--accent-2-rgb), 0.3));
}
.vw-modal__dialog.is-featured .vw-hex__ring::before {
  background: conic-gradient(from 0deg, var(--gold), var(--accent-2) 30%, var(--accent) 55%, var(--gold) 80%, #fff3c4);
}
.vw-modal__kicker {
  color: var(--vw-tier);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-shadow: 0 0 12px rgba(var(--vw-tier-rgb), 0.6);
}
.vw-modal__title {
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(21px, 4.4vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow:
    -0.03em 0 rgba(var(--accent-2-rgb), 0.55),
    0.03em 0 rgba(var(--accent-rgb), 0.55),
    0 0 24px rgba(var(--accent-rgb), 0.25);
  overflow-wrap: anywhere;
}
.vw-modal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: 100%;
}
.vw-modal__year {
  color: var(--vw-tier);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  overflow-wrap: anywhere;
}
.vw-modal__cat {
  max-width: 100%;
  white-space: normal;
}
.vw-modal__text {
  max-width: 52ch;
  margin: 4px auto 0;
  color: var(--text-dim);
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.vw-modal__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--vw-line);
}
.vw-modal__prev,
.vw-modal__next {
  flex: none;
}
.vw-modal__counter {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vw-modal__keys {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}

/* ========================================================= PHOTO LIGHTBOX */
.vw-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.vw-lightbox.is-open {
  pointer-events: auto;
}
.vw-lightbox__backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), 0.1), transparent 62%),
    rgba(2, 3, 10, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vw-lightbox__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vw-lightbox.is-open .vw-lightbox__backdrop {
  opacity: 1;
}
.vw-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1100px, 100%);
  min-width: 0;
  margin: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: transform 0.3s var(--ease-in-out), opacity 0.25s ease;
}
.vw-lightbox.is-open .vw-lightbox__dialog {
  opacity: 1;
  transform: none;
  transition: transform 0.6s var(--ease-out), opacity 0.3s ease;
}
.vw-lightbox__dialog:focus {
  outline: none;
}

.vw-lightbox__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vw-lightbox__tag {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
.vw-lightbox__tag-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-lightbox__counter {
  flex: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vw-lightbox__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 5, 13, 0.6);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.3s, transform 0.45s var(--ease-out);
}
.vw-lightbox__close:hover,
.vw-lightbox__close:focus-visible {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
  transform: rotate(90deg);
}

.vw-lightbox__stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(var(--accent-rgb), 0.08), transparent 70%),
    rgba(4, 6, 16, 0.72);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(var(--accent-rgb), 0.14);
}
/* HUD corner brackets */
.vw-lightbox__stage::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 3;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1.5px 18px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 18px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 1.5px 18px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 18px 1.5px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 1.5px 18px no-repeat;
  opacity: 0.85;
}
.vw-lightbox__frame {
  position: relative;
  z-index: 0;
}
.vw-lightbox__frame .vw-lightbox__photo {
  width: 100%;
  height: 64vh;
  height: 64svh;
  min-height: 220px;
  max-height: 820px;
}
.vw-lightbox__frame .vw-lightbox__photo:not(.is-empty) {
  background: transparent;
}
.vw-lightbox__frame .vw-lightbox__photo > img {
  object-fit: contain;
  object-position: 50% 50%;
}
/* an empty slot keeps a portrait shape instead of filling the whole stage */
.vw-lightbox__frame .vw-lightbox__photo.is-empty {
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
/* uncropped (.vw-photo--natural — naturalPhoto() in views.js): the box takes the image's
   own aspect ratio (--vw-ar, set when it loads) so the whole photo shows — object-fit:
   contain, at most 85vh tall (less on short screens, so the bar + caption stay visible),
   never wider than the stage, and small originals are upscaled at most 1.6× */
.vw-lightbox__frame .vw-photo--natural:not(.is-empty) {
  --vw-lb-max-h: min(85vh, calc(100vh - 170px));
  width: 100%;
  height: min(56vh, 460px); /* placeholder until the image reports its ratio */
  min-height: 0;
  max-height: none;
  margin-inline: auto;
}
@supports (height: 1svh) {
  .vw-lightbox__frame .vw-photo--natural:not(.is-empty) {
    --vw-lb-max-h: min(85svh, calc(100svh - 170px));
  }
}
.vw-lightbox__frame .vw-photo--natural.has-ratio:not(.is-empty) {
  width: min(100%, calc(var(--vw-lb-max-h) * var(--vw-ar)), calc(var(--vw-nat-w) * 1.6));
  height: auto;
  aspect-ratio: var(--vw-ar);
}
.vw-lightbox__frame .vw-photo--natural > img {
  object-fit: contain;
  object-position: 50% 50%;
}
.vw-lightbox__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vw-lightbox__scan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0 calc(100% - 90px),
    rgba(var(--accent-rgb), 0.22) calc(100% - 3px),
    rgba(255, 255, 255, 0.9) calc(100% - 2px),
    transparent 100%
  );
  opacity: 0;
  transform: translateY(-100%);
}
.vw-lightbox__stage.is-scanning .vw-lightbox__scan::before {
  animation: vw-lb-scan 0.95s var(--ease-out) both;
}
.vw-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 50%;
  background: rgba(4, 5, 13, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, scale 0.35s var(--ease-out);
}
.vw-lightbox__nav--prev {
  left: 14px;
}
.vw-lightbox__nav--next {
  right: 14px;
}
.vw-lightbox__nav:hover,
.vw-lightbox__nav:focus-visible {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.55);
  scale: 1.08;
}
.vw-lightbox__nav:active {
  scale: 0.96;
}

.vw-lightbox__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  min-width: 0;
  padding: 0 2px;
}
.vw-lightbox__cap {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vw-lightbox__keys {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}

/* ========================================================================
   JOURNEY
   ======================================================================== */
.vw-tl-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: calc(clamp(32px, 6vw, 64px) * -0.4) 0 clamp(32px, 6vw, 56px);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), rgba(8, 12, 30, 0.45));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.vw-tl-hud__cell {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
}
.vw-tl-hud__k {
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.vw-tl-hud__v {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}
.vw-tl-hud__pct {
  min-width: 3.4em;
}
.vw-tl-hud__bar {
  position: relative;
  flex: 1 1 160px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.12);
}
.vw-tl-hud__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  transform: scaleX(var(--vw-tl-progress, 0));
  transform-origin: left;
  transition: transform 0.25s linear;
}

.vw-timeline {
  --vw-tl-x: 50%;
  --vw-tl-col: 68px;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 12px;
}
.vw-timeline__track,
.vw-timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--vw-tl-x);
  pointer-events: none;
}
.vw-timeline__track {
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.2) 3%, rgba(var(--accent-rgb), 0.2) 97%, transparent);
}
.vw-timeline__track::before {
  /* ruler ticks */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 10px;
  background: repeating-linear-gradient(180deg, rgba(var(--accent-rgb), 0.35) 0 1px, transparent 1px 32px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.vw-timeline__fill {
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2) 70%, var(--gold));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85), 0 0 28px rgba(var(--accent-rgb), 0.4);
  -webkit-clip-path: inset(0 -30px calc((1 - var(--vw-tl-progress, 0)) * 100%) -30px);
  clip-path: inset(0 -30px calc((1 - var(--vw-tl-progress, 0)) * 100%) -30px);
  transition: clip-path 0.25s linear, -webkit-clip-path 0.25s linear;
}
.vw-timeline__head {
  position: absolute;
  top: calc(var(--vw-tl-progress, 0) * 100%);
  left: var(--vw-tl-x);
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.35),
    0 0 16px var(--accent),
    0 0 42px rgba(var(--accent-2-rgb), 0.65);
  opacity: clamp(0, calc(var(--vw-tl-progress, 0) * 40), 1);
  pointer-events: none;
  transition: top 0.25s linear;
}
.vw-timeline__head::before {
  /* comet tail */
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 3px;
  height: 80px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85));
}
.vw-timeline__list {
  position: relative;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vw-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--vw-tl-col) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}
.vw-tl-node {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px rgba(4, 5, 13, 0.92);
  transition: border-color 0.4s, box-shadow 0.5s var(--ease-out), scale 0.5s var(--ease-back);
}
.vw-tl-node__core {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.3);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.vw-tl-node::after {
  /* ping ring */
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.vw-tl-item.is-reached .vw-tl-node {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(4, 5, 13, 0.92), 0 0 16px var(--accent), 0 0 36px rgba(var(--accent-rgb), 0.5);
  scale: 1.15;
}
.vw-tl-item.is-reached .vw-tl-node__core {
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 18px var(--accent);
}
.vw-tl-item.is-reached .vw-tl-node::after {
  animation: vw-ping 1.1s var(--ease-out) 1 both;
}
.vw-tl-item.is-last .vw-tl-node,
.vw-tl-item.is-last .vw-tl-node::after {
  border-radius: 5px;
  rotate: 45deg;
}
.vw-tl-item.is-last .vw-tl-node::after {
  rotate: 0deg;
}
.vw-tl-item.is-last.is-reached .vw-tl-node {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(4, 5, 13, 0.92), 0 0 16px var(--accent-2), 0 0 36px rgba(var(--accent-2-rgb), 0.5);
}

/* ghost year on the empty side (desktop) */
.vw-tl-ghost {
  grid-row: 1;
  grid-column: 3;
  justify-self: start;
  max-width: 100%;
  padding: 0 clamp(8px, 2vw, 22px);
  overflow: hidden;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.2);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color 0.6s, text-shadow 0.6s;
}
.vw-tl-ghost.is-placeholder {
  text-decoration: none;
}
.vw-tl-item--right .vw-tl-ghost {
  grid-column: 1;
  justify-self: end;
}
.vw-tl-item.is-reached .vw-tl-ghost {
  -webkit-text-stroke-color: rgba(var(--accent-rgb), 0.6);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.25);
}

/* card */
.vw-tl-card {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--vw-line);
  border-radius: var(--radius);
  background: var(--vw-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vw-tl-item--right .vw-tl-card {
  grid-column: 3;
}
/* connector from card to node */
.vw-tl-card::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc((var(--vw-tl-col) / 2 - 12px) * -1);
  width: calc(var(--vw-tl-col) / 2 - 12px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.45));
  transition: background 0.5s, box-shadow 0.5s;
}
.vw-tl-item--right .vw-tl-card::before {
  right: auto;
  left: calc((var(--vw-tl-col) / 2 - 12px) * -1);
  background: linear-gradient(270deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.45));
}
/* reached highlight */
.vw-tl-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: inherit;
  box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.16), inset 0 0 30px rgba(var(--accent-rgb), 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.vw-tl-item.is-reached .vw-tl-card::after {
  opacity: 1;
}
.vw-tl-item.is-reached .vw-tl-card::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.vw-tl-item.is-last .vw-tl-card {
  border-style: dashed;
  border-color: rgba(var(--accent-2-rgb), 0.4);
}
.vw-tl-item.is-last .vw-tl-card::after {
  border-color: rgba(var(--accent-2-rgb), 0.6);
  box-shadow: 0 0 34px rgba(var(--accent-2-rgb), 0.16);
}

.vw-tl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.vw-tl-card__idx {
  color: var(--text-faint);
}
.vw-tl-card__chev {
  color: var(--accent);
  letter-spacing: -0.1em;
  opacity: 0.35;
  transition: opacity 0.4s, text-shadow 0.4s;
}
.vw-tl-item.is-reached .vw-tl-card__chev {
  opacity: 1;
  text-shadow: 0 0 8px var(--accent);
}
/* free-text labels ('HOME', 'EP. 001', '∞'): break only between words, never inside one */
.vw-tl-card__year {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.vw-tl-card__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.vw-tl-card__text {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.vw-tl-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 40px);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-align: center;
}
.vw-tl-end__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent-2);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.6);
  animation: vw-blink-soft 1.6s steps(1) infinite;
}

/* ========================================================================
   STATS (skills)
   ======================================================================== */
.vw-skills__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 32px);
}
.vw-skills__top.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.vw-skills__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.vw-skills > .vw-subhead:not(:first-of-type) {
  margin-top: clamp(48px, 8vw, 88px);
}

/* ---------------------------------------------------------------- radar */
.vw-radar-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(var(--accent-rgb), 0.1), transparent 70%),
    var(--vw-glass);
}
.vw-radar-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.vw-radar-card__title {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}
.vw-radar-card__meta {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.vw-radar {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.vw-radar__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.3));
}
.vw-radar__ring {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.17);
  stroke-width: 1;
}
.vw-radar__ring:nth-child(even) {
  fill: rgba(var(--accent-rgb), 0.025);
}
.vw-radar__ring--outer {
  stroke: rgba(var(--accent-rgb), 0.5);
  stroke-width: 1.5;
}
.vw-radar__axis {
  stroke: rgba(var(--accent-rgb), 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.vw-radar__tick {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}
.vw-radar__area {
  /* fill="url(#vw-radar-grad)" is set as an attribute by views.js */
  fill-opacity: 0.28;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.vw-radar.is-charged .vw-radar__area {
  animation: vw-radar-glow 3.2s ease-in-out 1.4s infinite;
}
.vw-radar__dot {
  fill: #fff;
  stroke: var(--accent-2);
  stroke-width: 2.5;
}
.vw-radar__core {
  fill: var(--accent);
}
.vw-radar__label {
  fill: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vw-radar__val {
  fill: var(--accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.vw-radar__sweep {
  position: absolute;
  inset: 20.5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--accent-rgb), 0) 290deg, rgba(var(--accent-rgb), 0.3) 359deg, transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
  animation: vw-spin 4.5s linear infinite;
}
.vw-radar.is-charged .vw-radar__sweep {
  opacity: 1;
}

/* ---------------------------------------------------------- level / XP */
.vw-level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  background: var(--vw-glass);
}
.vw-level__badge {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 92px;
  height: 106px;
  isolation: isolate;
}
.vw-level__badge::before,
.vw-level__badge::after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-clip-path: var(--vw-hexclip);
  clip-path: var(--vw-hexclip);
}
.vw-level__badge::before {
  inset: 0;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.5));
}
.vw-level__badge::after {
  inset: 2px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.28), transparent 65%),
    linear-gradient(180deg, rgba(14, 22, 52, 0.98), rgba(5, 7, 18, 0.98));
}
.vw-level__ring {
  position: absolute;
  inset: -9px -16px;
  z-index: -2;
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  border-radius: 50%;
  animation: vw-spin 16s linear infinite;
}
.vw-level__lbl {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1;
}
.vw-level__num {
  margin-top: 4px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.8), 0 0 30px rgba(var(--accent-2-rgb), 0.4);
}
.vw-level__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.vw-level__k {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
}
.vw-level__name {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow-wrap: anywhere;
}
.vw-level__class {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.4;
}
.vw-level__class-k {
  flex: none;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.vw-level__class-v {
  min-width: 0;
  overflow-wrap: anywhere;
}
.vw-xp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.vw-xp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
}
.vw-xp__label {
  color: var(--accent);
  font-weight: 700;
}
.vw-xp__val {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.vw-xp__bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
}
.vw-xp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  transition: width 1.5s var(--ease-out);
}
.vw-xp__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(4, 5, 13, 0.45) 7px 9px);
}
.vw-level.is-charged .vw-xp__fill {
  width: calc(var(--vw-level, 0) * 1%);
}

/* ------------------------------------------------------- attribute list */
.vw-attrs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-attr {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'idx name val'
    'bar bar bar';
  align-items: baseline;
  gap: 8px 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--vw-line);
  border-radius: 10px;
  background: var(--vw-glass);
}
.vw-attr__idx {
  grid-area: idx;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.vw-attr__name {
  grid-area: name;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vw-attr__val {
  grid-area: val;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}
.vw-attr__bar {
  position: relative;
  grid-area: bar;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.1);
}
.vw-attr__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
  transition: width 1.1s var(--ease-out) calc(var(--i, 0) * 60ms);
}
.vw-attr.is-charged .vw-attr__fill {
  width: calc(var(--vw-level, 0) * 1%);
}

/* ------------------------------------------------- energy-cell skill bars */
.vw-skillbars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 14px clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-skill {
  --vw-rank: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--vw-line);
  border-radius: 12px;
  background: var(--vw-glass);
}
.vw-skill[data-tier='s'] {
  --vw-rank: var(--gold);
}
.vw-skill[data-tier='a'] {
  --vw-rank: var(--accent);
}
.vw-skill[data-tier='b'] {
  --vw-rank: var(--violet);
}
.vw-skill[data-tier='c'] {
  --vw-rank: var(--lime);
}
.vw-skill[data-tier='d'] {
  --vw-rank: var(--text-dim);
}
.vw-skill::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.vw-skill:hover::after {
  opacity: 1;
}
.vw-skill__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vw-skill__rank {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--vw-rank);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vw-rank) 14%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--vw-rank) 40%, transparent);
  color: var(--vw-rank);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.vw-skill__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 15.5px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vw-skill__pct {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 2px;
}
.vw-skill__num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.vw-skill__unit {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}
.vw-skill__bar {
  --vw-cells: 20;
  --vw-cell-mask: repeating-linear-gradient(
    90deg,
    #000 0 calc(100% / var(--vw-cells) - 3px),
    transparent calc(100% / var(--vw-cells) - 3px) calc(100% / var(--vw-cells))
  );
  position: relative;
  height: 16px;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}
.vw-skill__bar::before,
.vw-skill__fill {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--vw-cell-mask);
  mask-image: var(--vw-cell-mask);
}
.vw-skill__bar::before {
  content: '';
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.07));
}
.vw-skill__fill {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.85), var(--accent) 45%, var(--accent-2));
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-out) 0.1s, -webkit-clip-path 1.4s var(--ease-out) 0.1s;
}
.vw-skill__fill::after {
  /* energy flowing through the cells */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%);
  animation: vw-energy 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
.vw-skill.is-charged .vw-skill__fill {
  -webkit-clip-path: inset(0 calc(100% - var(--vw-level, 0) * 1%) 0 0);
  clip-path: inset(0 calc(100% - var(--vw-level, 0) * 1%) 0 0);
}
.vw-skill__note {
  margin: 0;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* reset helper used by views.js before re-animating the stats */
.vw-snap :is(.vw-xp__fill, .vw-attr__fill, .vw-skill__fill) {
  transition: none !important;
}

/* ========================================================================
   CONTACT
   ======================================================================== */
.vw-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 48px);
}
.vw-contact__side {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 26px);
  min-width: 0;
}

/* ---------------------------------------------------------- direct line */
.vw-channel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  background:
    radial-gradient(100% 80% at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    var(--vw-glass);
}
.vw-channel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.vw-channel__label {
  color: var(--text-dim);
}
.vw-channel__tag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid rgba(57, 255, 20, 0.4);
  border-radius: 4px;
  color: var(--lime);
  font-size: 9.5px;
  font-weight: 700;
}
.vw-channel__addr {
  align-self: flex-start;
  max-width: 100%;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
  overflow-wrap: anywhere;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  padding-bottom: 4px;
  transition: background-size 0.5s var(--ease-out), color 0.3s;
}
@supports (font-size: 1cqi) {
  /* size the address to its panel so a typical e-mail fits on one line */
  .vw-channel__addr {
    font-size: clamp(14px, 5.4cqi, 26px);
  }
}
a.vw-channel__addr:hover,
a.vw-channel__addr:focus-visible {
  color: #fff;
  background-size: 100% 2px;
}
.vw-channel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vw-copy__icon {
  font-size: 14px;
  line-height: 1;
}
.vw-copy.is-copied {
  --tick: var(--lime);
  border-color: var(--lime);
  background-color: rgba(57, 255, 20, 0.1);
  color: var(--lime);
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.35);
}
/* one row per line: E-MAIL, then PHONE */
.vw-dline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.vw-dline + .vw-dline {
  padding-top: 16px;
  border-top: 1px dashed rgba(var(--accent-rgb), 0.22);
}
.vw-dline__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
}
.vw-dline__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 5px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
/* the number is plain, selectable text (CALL is the tel: convenience link next to COPY) */
.vw-channel__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}

/* -------------------------------------------------------------- socials */
.vw-socials-block {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vw-socials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vw-socials__count {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
/* label + handle cards: one column while the block is narrow (the desktop side column,
   phones), two once it is ≥ 440px wide — an odd last card then spans the row */
.vw-socials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (min-width: 440px) {
  .vw-socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vw-socials.is-odd .vw-socials__item:last-child {
    grid-column: 1 / -1;
  }
}
.vw-socials__item {
  display: flex;
  min-width: 0;
}
.vw-social {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px 11px 11px;
  overflow: hidden;
  border: 1px solid var(--vw-line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent 55%),
    var(--vw-glass);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s, box-shadow 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
/* neon edge that lights up on hover / focus */
.vw-social::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent);
  opacity: 0.35;
  transition: opacity 0.3s, top 0.35s var(--ease-out), bottom 0.35s var(--ease-out);
}
.vw-social:hover,
.vw-social:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.22);
}
.vw-social:hover::before,
.vw-social:focus-visible::before {
  top: 0;
  bottom: 0;
  opacity: 1;
}
@media (hover: hover) {
  .vw-social:hover {
    translate: 0 -2px;
  }
}
.vw-social__glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.vw-social__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vw-social__label,
.vw-social__handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-social__label {
  line-height: 1.3;
}
.vw-social__handle {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}
.vw-social__arrow {
  flex: none;
  color: var(--text-faint);
  transition: transform 0.35s var(--ease-out), color 0.3s;
}
.vw-social:hover .vw-social__arrow,
.vw-social:focus-visible .vw-social__arrow {
  color: var(--accent);
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------- uplink */
.vw-uplink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vw-uplink__sep {
  color: rgba(var(--accent-rgb), 0.4);
}
.vw-uplink__ping {
  min-width: 8.5ch;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ terminal console */
.vw-console {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(6, 10, 26, 0.92), rgba(3, 5, 14, 0.95));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(var(--accent-rgb), 0.08);
  font-family: var(--font-mono);
}
.vw-console::before {
  /* CRT scanlines */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vw-console::after {
  /* focus glow ring (focus-within) */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6), inset 0 0 40px rgba(var(--accent-rgb), 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.vw-console:focus-within::after {
  opacity: 1;
}
.vw-console.is-error::after {
  box-shadow: inset 0 0 0 1px rgba(255, 56, 96, 0.6), inset 0 0 40px rgba(255, 56, 96, 0.08);
  opacity: 1;
}
.vw-console__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.05);
}
.vw-console__lights {
  display: inline-flex;
  flex: none;
  gap: 6px;
}
.vw-console__lights i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}
.vw-console__lights i:nth-child(2) {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
.vw-console__lights i:nth-child(3) {
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}
.vw-console__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-console__state {
  flex: none;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-shadow: 0 0 8px currentColor;
}
.vw-console__state[data-state='busy'] {
  color: var(--gold);
  animation: vw-blink-soft 0.8s steps(1) infinite;
}
.vw-console__state[data-state='error'] {
  color: var(--red);
}
.vw-console__state[data-state='ok'] {
  color: var(--accent);
}
.vw-console__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 3vw, 26px);
}
.vw-console__log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 4.8em;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}
.vw-console__log::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  margin-top: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: vw-blink 1s steps(1) infinite;
}
.vw-console__line {
  margin: 0;
  overflow-wrap: anywhere;
}
.vw-console__line--ok {
  color: var(--lime);
}
.vw-console__line--dim {
  color: var(--text-faint);
}
.vw-console__line--warn {
  color: var(--gold);
}
.vw-console__line--err {
  color: var(--red);
}

/* fields */
.vw-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.03);
  transition: border-color 0.25s, background-color 0.3s, box-shadow 0.35s var(--ease-out);
}
.vw-field:focus-within {
  border-color: rgba(var(--accent-rgb), 0.75);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 26px rgba(var(--accent-rgb), 0.18);
}
.vw-field.is-invalid {
  border-color: rgba(255, 56, 96, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 56, 96, 0.1);
}
.vw-field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: text;
  transition: color 0.25s;
}
.vw-field:focus-within .vw-field__label {
  color: var(--accent);
}
.vw-field.is-invalid .vw-field__label {
  color: var(--red);
}
.vw-field__prompt {
  color: var(--accent);
  font-weight: 700;
}
.vw-field.is-filled .vw-field__prompt {
  text-shadow: 0 0 8px var(--accent);
}
.vw-field__opt {
  color: var(--text-faint);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.vw-field__count {
  margin-left: auto;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.vw-field__input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  caret-color: var(--accent);
  font-family: var(--font-mono);
  font-size: 16px; /* >= 16px: no iOS focus zoom */
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.vw-field__input:focus,
.vw-field__input:focus-visible {
  outline: none;
}
.vw-field__input::placeholder {
  color: var(--text-faint);
  opacity: 0.75;
}
textarea.vw-field__input {
  min-height: 132px;
  resize: vertical;
}
.vw-field__input:-webkit-autofill,
.vw-field__input:-webkit-autofill:hover,
.vw-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--accent);
  box-shadow: 0 0 0 1000px #070b1d inset;
  transition: background-color 9999s ease-out 0s;
}
.vw-field__line {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
  pointer-events: none;
}
.vw-field:focus-within .vw-field__line {
  transform: scaleX(1);
}
.vw-field__err {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.vw-field__err:empty {
  display: none;
}

.vw-console__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 2px;
}
.vw-console__hint {
  min-width: 0;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.5;
}
.vw-console__send {
  margin-left: auto;
}
.vw-console__send[aria-disabled='true'] {
  opacity: 0.7;
  pointer-events: none;
}
.vw-console.is-sending .vw-console__send-label::after {
  content: '…';
}
.vw-console.is-sent .vw-console__send {
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.5), 0 0 34px rgba(57, 255, 20, 0.35);
}
.vw-console__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.vw-console.is-sending .vw-console__progress {
  opacity: 1;
}
.vw-console__progress-bar {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  box-shadow: 0 0 12px var(--accent);
  transform: translateX(-100%);
  animation: vw-indeterminate 1.1s ease-in-out infinite;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1100px) {
  .vw-about__top {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .vw-about__top,
  .vw-about__mid,
  .vw-skills__top,
  .vw-contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vw-about__card-col {
    position: relative;
    top: auto;
  }
  .vw-radar {
    width: min(100%, 440px);
  }
}

@media (max-width: 760px) {
  /* timeline collapses to a single column with the line on the left */
  .vw-timeline {
    --vw-tl-x: 14px;
    --vw-tl-col: 28px;
  }
  .vw-tl-item {
    grid-template-columns: var(--vw-tl-col) minmax(0, 1fr);
    column-gap: 16px;
  }
  .vw-tl-node {
    grid-column: 1;
    width: 18px;
    height: 18px;
  }
  .vw-tl-node__core {
    width: 6px;
    height: 6px;
  }
  .vw-tl-card,
  .vw-tl-item--right .vw-tl-card {
    grid-column: 2;
  }
  .vw-tl-ghost {
    display: none;
  }
  /* 'EP. 135' stays on one line in a 320px-wide phone's card */
  .vw-tl-card__year {
    font-size: clamp(24px, 7.5vw, 34px);
  }
  .vw-tl-card::before,
  .vw-tl-item--right .vw-tl-card::before {
    right: auto;
    left: -16px;
    width: 16px;
    background: linear-gradient(270deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.45));
  }
  .vw-tl-item.is-reached .vw-tl-card::before {
    background: var(--accent);
  }
  .vw-tl-end {
    justify-content: flex-start;
    padding-left: 9px;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .vw-statstrip__cell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'glyph'
      'num'
      'label';
    justify-items: center;
    row-gap: 6px;
    padding: 14px 8px 12px;
    text-align: center;
  }
  .vw-statstrip__glyph {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .vw-statstrip__label {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .vw-ach__card {
    min-height: 0;
  }
  .vw-ach--featured .vw-ach__card {
    min-height: 0;
  }
  .vw-skill__bar {
    --vw-cells: 16;
  }
  .vw-radar__label {
    font-size: 13px;
  }
  .vw-radar__val {
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  .vw-interests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .vw-flip {
    min-height: 190px;
  }
  .vw-flip__face {
    padding: 24px 12px 14px;
    gap: 8px;
  }
  .vw-flip__icon {
    width: 54px;
    height: 54px;
    font-size: 25px;
  }
  .vw-flip__title {
    font-size: 13px;
  }
  .vw-flip__title--sm {
    padding-right: 26px;
    font-size: 11.5px;
  }
  .vw-flip__text {
    font-size: 13px;
    line-height: 1.5;
  }
  .vw-flip__hint {
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }
  .vw-flip__back-icon {
    top: 8px;
    right: 8px;
    font-size: 18px;
  }
  .vw-now__row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 2px;
  }
  .vw-now__value {
    grid-column: 2;
  }
  .vw-now__feed {
    margin-left: 0;
  }
  .vw-level {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .vw-level__info {
    align-items: center;
    width: 100%;
  }
  .vw-level__class {
    justify-content: center;
    flex-wrap: wrap;
  }
  .vw-xp {
    align-self: stretch;
  }
  .vw-tl-hud {
    gap: 8px 16px;
    padding: 10px 12px;
  }
  .vw-tl-hud__bar {
    flex-basis: 100%;
  }
  .vw-modal__nav {
    gap: 6px;
  }
  .vw-modal__nav .btn--sm {
    padding: 0 12px;
    letter-spacing: 0.12em;
  }
  .vw-console__send {
    flex: 1 1 100%;
  }
  .vw-console__hint {
    order: 2;
    flex: 1 1 100%;
    text-align: center;
  }
  .vw-craft {
    border-radius: var(--radius);
  }
  .vw-craft::after {
    inset: 7px;
    border-radius: 10px;
  }
  .vw-craft__cta {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .vw-lightbox__frame .vw-lightbox__photo {
    height: 58vh;
    height: 58svh;
  }
  .vw-lightbox__nav {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
  .vw-lightbox__nav--prev {
    left: 8px;
  }
  .vw-lightbox__nav--next {
    right: 8px;
  }
  .vw-lightbox__tag {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .vw-lightbox__keys {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
}

@media (max-width: 400px) {
  .vw-idcard {
    padding: 18px 16px 16px;
  }
  .vw-idcard__stamp {
    right: -5%;
    bottom: 7%;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .vw-idcard__barcode {
    flex-basis: 64px;
  }
  .vw-craft__role {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .vw-craft__file {
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
  .vw-craft__lead {
    letter-spacing: 0.08em;
  }
  .vw-craft__cta {
    padding-inline: 16px;
    letter-spacing: 0.1em;
  }
  .vw-svc {
    padding: 16px 14px 18px;
  }
  .vw-gallery__cap {
    font-size: 13px;
  }
  .vw-statstrip {
    gap: 6px;
  }
  .vw-statstrip__num {
    font-size: 22px;
  }
  .vw-tab {
    padding: 8px 12px;
    letter-spacing: 0.12em;
  }
  .vw-ach__card {
    padding: 18px 16px 14px;
  }
  .vw-ach--featured .vw-ach__card {
    padding: 20px 18px 16px;
  }
  .vw-modal {
    padding: 10px;
  }
  .vw-modal__badge {
    width: 132px;
    height: 132px;
  }
  .vw-modal__keys {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .vw-skill {
    padding: 14px 14px;
  }
  .vw-skill__head {
    gap: 10px;
  }
  .vw-console__title {
    font-size: 10.5px;
  }
}

/* ========================================================================
   KEYFRAMES
   ======================================================================== */
@keyframes vw-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes vw-angle {
  to {
    --vw-angle: 360deg;
  }
}
@keyframes vw-live {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.55), 0 0 8px var(--lime);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(57, 255, 20, 0), 0 0 8px var(--lime);
  }
}
@keyframes vw-blink {
  50% {
    opacity: 0;
  }
}
@keyframes vw-blink-soft {
  50% {
    opacity: 0.35;
  }
}
@keyframes vw-breathe {
  50% {
    opacity: 0.55;
  }
}
@keyframes vw-rule-run {
  0% {
    transform: translateX(-80px);
  }
  60%,
  100% {
    transform: translateX(110vw);
  }
}
@keyframes vw-holo-sweep {
  0% {
    transform: translateX(-130%) skewX(-12deg);
  }
  45%,
  100% {
    transform: translateX(330%) skewX(-12deg);
  }
}
@keyframes vw-av-echo {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}
@keyframes vw-photo-boot {
  0%,
  18% {
    opacity: 0;
    filter: brightness(2.6) saturate(0);
  }
  24% {
    opacity: 0.85;
  }
  30% {
    opacity: 0.15;
  }
  40% {
    opacity: 1;
    filter: brightness(1.7) saturate(0.4);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}
@keyframes vw-gal-scan {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes vw-lb-scan {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes vw-av-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(440%);
  }
}
@keyframes vw-id-boot {
  0% {
    -webkit-clip-path: inset(0 0 100% 0 round 20px);
    clip-path: inset(0 0 100% 0 round 20px);
    filter: brightness(2.2) saturate(1.5);
  }
  65% {
    -webkit-clip-path: inset(0 0 0 0 round 20px);
    clip-path: inset(0 0 0 0 round 20px);
    filter: brightness(1.35) saturate(1.2);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0 round 20px);
    clip-path: inset(0 0 0 0 round 20px);
    filter: none;
  }
}
@keyframes vw-id-scan {
  0% {
    top: 0;
    opacity: 1;
  }
  65% {
    top: calc(100% - 3px);
    opacity: 1;
  }
  100% {
    top: calc(100% - 3px);
    opacity: 0;
  }
}
@keyframes vw-id-glitch {
  0% {
    translate: -5px 0;
    filter: hue-rotate(70deg) saturate(1.8);
  }
  20% {
    translate: 4px -1px;
    filter: hue-rotate(-50deg) contrast(1.3);
  }
  40% {
    translate: -2px 2px;
    filter: invert(0.08) hue-rotate(140deg);
  }
  60% {
    translate: 3px 0;
    filter: saturate(2.2);
  }
  80% {
    translate: -1px 0;
    filter: none;
  }
  100% {
    translate: 0 0;
    filter: none;
  }
}
@keyframes vw-text-split {
  0% {
    text-shadow: -3px 0 rgba(var(--accent-2-rgb), 0.9), 3px 0 rgba(var(--accent-rgb), 0.9);
  }
  50% {
    text-shadow: 4px 0 rgba(var(--accent-2-rgb), 0.9), -4px 0 rgba(var(--accent-rgb), 0.9);
  }
  100% {
    text-shadow: none;
  }
}
@keyframes vw-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes vw-sheen-loop {
  0% {
    background-position: 100% 0;
  }
  45%,
  100% {
    background-position: 0 0;
  }
}
@keyframes vw-float {
  50% {
    transform: translateY(-6px);
  }
}
@keyframes vw-modal-scan {
  0% {
    transform: translateY(-100%);
  }
  40%,
  100% {
    transform: translateY(900%);
  }
}
@keyframes vw-ping {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
@keyframes vw-radar-glow {
  50% {
    fill-opacity: 0.4;
  }
}
@keyframes vw-energy {
  0% {
    transform: translateX(-100%);
  }
  70%,
  100% {
    transform: translateX(420%);
  }
}
@keyframes vw-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(260%);
  }
}

/* ========================================================================
   REDUCED MOTION — keep it usable, drop the ambient motion
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vw-subhead__rule::after,
  .vw-idcard__holo::after,
  .vw-avatar__scan,
  .vw-skill__fill::after,
  .vw-modal__scan::before,
  .vw-gallery__fx::after,
  .vw-svc__scan,
  .vw-lightbox__scan::before {
    display: none;
  }
  .vw-dot--live,
  .vw-hex__ring::before,
  .vw-av-glow,
  .vw-av-ticks,
  .vw-av-ring,
  .vw-av-hex--echo,
  .vw-avatar__ring::before,
  .vw-id__photo,
  .vw-id__photo .gp-photo__mono,
  .vw-craft > .vw-craft__border,
  .vw-svc .vw-svc__border,
  .vw-idcard__pin,
  .vw-idcard.is-booting,
  .vw-idcard.is-booting::before,
  .vw-idcard.is-glitch,
  .vw-idcard.is-glitch .vw-idcard__name,
  .vw-idcard.is-glitch .vw-idcard__role,
  .vw-now__dot,
  .vw-flip__front .vw-flip__hint,
  .vw-ach__card .vw-ach__border,
  .vw-ach__card .vw-ach__sheen,
  .vw-modal__badge::before,
  .vw-modal__badge::after,
  .vw-modal__badge .vw-hex,
  .vw-tl-item .vw-tl-node::after,
  .vw-tl-end__dot,
  .vw-radar__sweep,
  .vw-radar.is-charged .vw-radar__area,
  .vw-level__ring,
  .vw-console__state,
  .vw-console__log::after,
  .vw-console__progress-bar {
    animation: none !important;
  }
  .vw-ach__card .vw-ach__sheen,
  .vw-radar__sweep {
    opacity: 0 !important;
  }
  .vw-modal__dialog,
  .vw-modal.is-open .vw-modal__dialog,
  .vw-lightbox__dialog,
  .vw-lightbox.is-open .vw-lightbox__dialog {
    transform: none;
  }
  .vw-gallery__tile:hover,
  .vw-gallery__tile:active,
  .vw-svc:hover {
    translate: none;
  }
  .vw-gallery__tile:hover .vw-gallery__photo {
    transform: none;
  }
  /* keep the focal-point zoom (it frames the face), drop the hover push-in */
  .vw-id__photo > img,
  .vw-idcard:hover .vw-id__photo > img {
    transform: scale(var(--vw-id-zoom));
  }
  .vw-av-hex--echo {
    opacity: 0;
  }
  .vw-console__progress-bar {
    width: 100%;
    transform: none;
  }
}