/* ============================================================
   Vecstrata — Kinetic hero (P1)
   Namespaced with .vs- so it won't collide with your theme.
   Drop this into your theme's CSS (e.g. assets/css/screen.css)
   or load as a separate stylesheet. Fonts: Archivo (Google).
   ============================================================ */

/* Optional font import — or load via Ghost code injection (see README) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&display=swap');

.vs-hero {
  /* Colors inherit Brief's light/dark scheme tokens (see main.css) */
  --vs-bg:var(--color-background);
  --vs-fg:var(--color-typography);
  --vs-muted:var(--color-typography-tone);
  --vs-faint:color-mix(in srgb, var(--color-typography), transparent 45%);
  --vs-nav:var(--color-typography-tone);
  --vs-accent:var(--color-brand);
  --vs-border:var(--color-border);

  background:var(--vs-bg);
  color:var(--vs-fg);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Match Brief's content container (px-5 sm:px-6) so the hero's left/right
     edges line up with the header logo and nav. */
  padding-left:20px;padding-right:20px;
}
@media (min-width:640px){ .vs-hero{padding-left:24px;padding-right:24px;} }
.vs-hero *{box-sizing:border-box;}

/* ---- Header / nav ---- */
.vs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 52px;max-width:1440px;margin:0 auto;
}
.vs-brand{display:flex;align-items:center;gap:13px;text-decoration:none;}
.vs-brand__logo{display:block;width:34px;height:31px;}
.vs-brand__name{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--vs-fg);}
.vs-nav{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0;}
.vs-nav a{font-size:15px;color:var(--vs-nav);text-decoration:none;}
.vs-nav a:hover{color:var(--vs-fg);}
.vs-subscribe{
  background:var(--vs-accent);color:#fff;font-size:15px;font-weight:600;
  padding:11px 26px;border-radius:999px;text-decoration:none;white-space:nowrap;
}

/* ---- Hero body ---- */
.vs-hero__inner{max-width:var(--container-width);margin:0 auto;padding:100px 0 112px;}
.vs-eyebrow{
  font-size:13px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--vs-faint);margin-bottom:30px;
}
.vs-headline{
  margin:0;font-size:90px;line-height:1.05;letter-spacing:-0.035em;
  font-weight:800;color:var(--vs-fg);
}
.vs-headline__line{display:block;}
.vs-headline__roll{display:inline-flex;align-items:baseline;gap:0.28em;}

/* rotating word */
.vs-rotate{
  display:inline-block;height:1.2em;line-height:1.05;overflow:hidden;
  vertical-align:bottom;position:relative;margin-bottom:-0.15em;
}
.vs-rotate__word{
  display:block;color:var(--vs-accent);line-height:1.05;
  transition:transform .5s cubic-bezier(.7,0,.2,1), opacity .5s ease;
  will-change:transform,opacity;
}
.vs-rotate__word.is-out{transform:translateY(-110%);opacity:0;}
.vs-rotate__word.is-in{transform:translateY(110%);opacity:0;transition:none;}

/* Footer brand: shrink the logo ~30% vs the header instance. */
.vs-foot-brand{--logo-h-mobile:20px;--logo-h-desktop:22px;}
.vs-foot-brand [data-text-logo]{font-size:21px;}

/* Footer kinetic string — same rotator, small (logo-sized), centered.
   Lives outside .vs-hero, so it re-declares the vars the rotator reads. */
.vs-foot-kinetic{
  --vs-accent:var(--color-brand);
  --vs-fg:var(--color-typography);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15.75px;line-height:1.3;font-weight:300;letter-spacing:-0.005em;
  text-align:center;color:var(--vs-fg);margin-top:-6px;
}
/* Three-line stack: the rotating word drops to its own centered line under
   the lead text, so each phrase ("See where" / word / "moves next.") sits on
   its own centered row. hero.js locks the slot width to the widest word, so
   the fixed-width slot is centered under the line above it. */
.vs-foot-kinetic .vs-rotate{display:block;margin:0 auto;text-align:center;}
.vs-foot-kinetic .vs-rotate__word{text-align:center;}

/* Section eyebrow that matches the track-record label above (uppercase,
   wide tracking, faint). Used for the "Featured issues" feed header.
   Self-contained (reads --color-typography directly) so it works outside
   the .vs-hero scope where --vs-faint is defined. */
.vs-feat-head{
  font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:color-mix(in srgb, var(--color-typography), transparent 45%);
  margin:0 0 16px;
}

.vs-sub{
  margin:38px 0 0;font-size:23px;line-height:1.5;color:var(--vs-muted);max-width:600px;
}
.vs-cta{display:flex;align-items:center;gap:18px;margin-top:46px;flex-wrap:wrap;}
.vs-btn{font-size:17px;font-weight:600;text-decoration:none;border-radius:999px;}
.vs-btn--primary{background:var(--vs-accent);color:var(--color-brand-contrast,#fff);padding:15px 34px;}
.vs-btn--ghost{
  color:var(--vs-fg);padding:15px 8px;border-radius:0;
  border-bottom:1px solid color-mix(in srgb, var(--vs-fg), transparent 70%);
}
.vs-btn--ghost:hover{border-bottom-color:color-mix(in srgb, var(--vs-fg), transparent 30%);}

/* ---- Track record strip (below CTAs) ---- */
.vs-track{margin-top:52px;border-top:1px solid var(--vs-border);padding-top:26px;}
.vs-track__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.vs-track__label{font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--vs-faint);}
.vs-track__meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.vs-track__summary{font-size:13px;color:var(--vs-muted);}
.vs-track__more{font-size:13px;font-weight:600;color:var(--vs-muted);text-decoration:none;white-space:nowrap;}
.vs-track__more:hover{color:var(--vs-fg);}
.vs-track__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--vs-border);border:1px solid var(--vs-border);
  border-radius:14px;overflow:hidden;
}
.vs-call{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;background:var(--vs-bg);text-decoration:none;transition:background .2s ease;}
.vs-call:hover{background:var(--color-background-tone);}
.vs-call__title{font-size:15.5px;font-weight:600;color:var(--vs-fg);line-height:1.32;}
.vs-call__foot{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:4px;}
.vs-call__metarow{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--vs-faint);}

/* confidence bar — live calls, real current p */
.vs-conf{display:flex;align-items:center;gap:10px;}
.vs-conf__track{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,var(--vs-fg),transparent 88%);overflow:hidden;}
.vs-conf__fill{height:100%;width:0;border-radius:999px;background:var(--vs-accent);transition:width .9s cubic-bezier(.6,0,.2,1);}
.vs-conf__num{font-size:13px;font-weight:600;color:var(--vs-muted);font-variant-numeric:tabular-nums;}

/* backtest stat — separate lane */
.vs-bt{display:flex;flex-direction:column;gap:3px;}
.vs-bt__hit{font-size:14px;font-weight:600;color:#2FD08A;}
.vs-bt__brier{font-size:13px;color:var(--vs-faint);font-variant-numeric:tabular-nums;}

/* status tags */
.vs-tag{font-size:11px;font-weight:700;letter-spacing:0.04em;padding:3px 8px;border-radius:6px;text-transform:uppercase;}
.vs-tag--open{color:var(--vs-muted);background:color-mix(in srgb,var(--vs-fg),transparent 90%);}
.vs-tag--hit{color:#2FD08A;background:color-mix(in srgb,#2FD08A,transparent 86%);}
.vs-tag--backtest{color:var(--vs-faint);background:color-mix(in srgb,var(--vs-fg),transparent 92%);}

/* ---- Responsive ---- */
@media (max-width:900px){
  .vs-header{padding:20px 22px;flex-wrap:wrap;gap:14px;}
  .vs-nav{display:none;}
  .vs-hero__inner{padding:64px 0 76px;}
  .vs-headline{font-size:clamp(44px,12vw,90px);}
  .vs-sub{font-size:19px;}
  .vs-track__grid{grid-template-columns:1fr;}
}

/* Respect reduced-motion: stop the rotation, show first word */
@media (prefers-reduced-motion:reduce){
  .vs-rotate__word{transition:none;}
  .vs-conf__fill{transition:none;}
}