/* ============================================================
   SONJEO GLOBAL — Verticals site supplement
   Builds on command.css tokens. Turns the World Sim into a
   clean, structured scrolling site: a sticky vertical index +
   one fully-content feature section per asset world, each with
   its image anchored INSIDE its own section.
   ============================================================ */

/* ---- scroll container fix: command.css sets body{overflow-x:clip}, which
   computes to clip on BOTH axes and freezes scrolling AND breaks the reveal
   IntersectionObserver. Restore the normal viewport scroller. ---- */
body { overflow-x: visible; overflow-y: visible; }

/* ---- compact site hero (overrides the 100vh command hero) ---- */
.hero.site {
  min-height: 88vh; min-height: 88svh;
}
.hero.site .kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 26px;
}
.hero.site .kicker::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero.site h1 { font-size: clamp(2.8rem, 6.5vw, 6.5rem); }
.hero.site .sub { max-width: 560px; }
.hero.site .metaline {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--border); max-width: 720px;
}
.hero.site .metaline .m {
  flex: 1 1 auto; min-width: 150px; padding: 18px 22px 18px 0;
  border-right: 1px solid var(--border);
}
.hero.site .metaline .m:last-child { border-right: none; }
.hero.site .metaline .m b {
  display: block; font-family: var(--font-mono); font-size: 1.5rem;
  color: var(--white); font-weight: 700; letter-spacing: 0.02em;
}
.hero.site .metaline .m span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; display: block;
}

/* ============================================================
   STICKY VERTICAL INDEX — the clear, early menu
   ============================================================ */
.vindex {
  position: sticky; top: 52px; z-index: 15;
  background: rgba(5,5,7,0.88); backdrop-filter: blur(20px);
  border-block: 1px solid var(--border);
}
.vindex .track {
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 var(--gutter); display: flex; align-items: stretch;
  gap: 0; overflow-x: auto; scrollbar-width: none;
}
.vindex .track::-webkit-scrollbar { display: none; }
.vindex .ix-label {
  flex: none; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); padding-right: 22px;
  border-right: 1px solid var(--border); margin-right: 6px;
}
.vindex a {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 16px; position: relative;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--body);
  transition: color .2s var(--ease); white-space: nowrap;
}
.vindex a .ixn { color: var(--muted); transition: color .2s; }
.vindex a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform .3s var(--ease);
}
.vindex a:hover { color: var(--heading); }
.vindex a.active { color: var(--gold); }
.vindex a.active .ixn { color: var(--gold); }
.vindex a.active::after { transform: scaleX(1); }
@media (max-width: 920px) {
  .vindex .ix-label { display: none; }
}

/* ============================================================
   VERTICAL FEATURE SECTIONS
   ============================================================ */
.vsection {
  position: relative; background: var(--deep);
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--border);
  scroll-margin-top: 60px;
}
.vsection.alt { background: var(--void); }
.vrow {
  max-width: var(--max-width); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.vsection.flip .vmedia { order: 2; }

/* ---- media: contextual framed image, anchored in-section ---- */
.vmedia { position: relative; }
.vframe {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  border: 1px solid var(--border); border-radius: var(--card-radius);
  overflow: hidden; background: var(--surface);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.vframe .env { position: absolute; inset: 0; z-index: 0; }
.vframe .vimg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vframe image-slot {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; display: block !important;
  z-index: 1;
}
.vframe image-slot::part(frame) { background: transparent; }
.vframe image-slot::part(ring) { border: 1px dashed rgba(201,162,39,0.5); }
.vframe image-slot::part(empty) { color: rgba(255,255,255,0.62); }

/* reticle corners + region tag overlay */
.vframe .corner { position: absolute; width: 18px; height: 18px; z-index: 2; border: 0 solid var(--hud-line); pointer-events: none; }
.vframe .tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.vframe .tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; }
.vframe .bl { bottom: 12px; left: 12px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vframe .br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.vframe .vtag {
  position: absolute; left: 14px; bottom: 13px; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-lt);
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  padding: 6px 10px; border: 1px solid var(--gold-dim);
}
.vframe .vlive {
  position: absolute; right: 14px; top: 13px; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 7px;
}
.vframe .vlive .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---- content column ---- */
.vcontent { min-width: 0; }
.vcontent .label { margin-bottom: 20px; }
.vtitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-display); color: var(--white);
  line-height: 0.98; letter-spacing: -0.01em; margin: 0;
}
.vdesc {
  margin-top: 20px; max-width: 46ch; color: var(--body);
  font-size: var(--text-body-lg); line-height: 1.62;
}
.vspecs { margin: 30px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.vspecs > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.vspecs dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.vspecs dd { margin: 0; color: var(--heading); font-size: 0.96rem; font-weight: 500; }
.vlink {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  transition: gap .25s var(--ease), color .2s;
}
.vlink .arr { transition: transform .25s var(--ease); }
.vlink:hover { color: var(--gold-lt); }
.vlink:hover .arr { transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .vrow { grid-template-columns: 1fr; gap: 32px; }
  .vsection.flip .vmedia { order: 0; }
  .vframe { aspect-ratio: 16 / 10; }
  .vspecs > div { grid-template-columns: 120px 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .vspecs > div { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .hero.site .metaline .m { min-width: 120px; }
}