/* Home v2: David's 2026-09-24 round-two feedback on the hero, the radar
   heading, the ticker and the "15 of 16" proof number. Linked after
   /styles.css, so equal-specificity rules here win without !important.
   Scope: index.html only (every class below is unique to that page). */

/* ============================================================== Hero
   Two short lines instead of the four-word wrap: "Right role." stays in
   the left column with the lede and buttons (unconstrained now: the
   previous max-width: 11ch was only there to force the old four-word
   headline to wrap). "Right time." moves back into the clear black field
   above and right of the bust's head, sized and placed per breakpoint from
   the clip's own first-frame pixels (assets/posters/contacts_second-first)
   so it clears the head with margin at 1440, 1280 and 1024 (checked
   2026-09-24: >=28px clear at each). On phones (styles.css, <900px) both
   lines already stack under the figure; that rule is untouched. */
.hero__title { max-width: none; margin: 0; }

/* On phones the two short lines are much shorter than the old four-word
   headline, so the same negative pull-up now lands them over the bust's
   still-crisp shoulders instead of its faded lower edge. Pull up less. */
@media (max-width: 899px) {
  .hero__content { margin-top: clamp(-8px, 1vw, 8px); }
}

/* David, 2026-09-24 (second pass): the corner "Right time." still touched
   the top of the head. Symmetric split instead: the bust is centred a
   little smaller, "Right / role." stacks on the left and "Right / time."
   stacks on the right at the same size, both clear of the head. */
@media (max-width: 899px) {
  .hero__w2 .br { display: inline; }
}
/* 900 to 1179 px: too narrow for text on both sides of the bust (the
   buttons ran over its chest at 1024), so use the phone layout. */
@media (min-width: 900px) and (max-width: 1179px) {
  .hero { display: block; min-height: 0; padding: var(--nav-h) 0 48px; }
  .hero__bust { position: relative; left: auto; bottom: auto; width: min(70%, 520px); height: auto; margin: 0 auto; }
  .hero__content { position: static; margin-top: -36px; }
  .hero__title { font-size: clamp(56px, 8vw, 92px); }
  .hero__w1 .br, .hero__w2 .br { display: inline; }
  .hero__w2 { position: static; display: block; }
  .hero__act { max-width: none; }
}
@media (min-width: 1180px) {
  .hero__bust { left: 50%; transform: translateX(-50%); height: 94%; }
  .hero__title { font-size: clamp(64px, 7.4vw, 124px); }
  .hero__w2 {
    position: absolute;
    right: max(var(--gut), (100% - var(--maxw)) / 2);
    top: var(--hero-w2-top, 30%);
    margin: 0;
    text-align: right;
    font-size: inherit;
  }
  .hero__lede { max-width: 30ch; }
  /* Stacked buttons keep the left column narrow, clear of the bust's arm. */
  .hero__act { flex-direction: column; align-items: flex-start; }
}

/* ======================================================= Radar heading
   "On the Raydar.", spelled out, with the brand word carrying a radar-style
   blend of black, purple and orange. A soft sweep animates the blend (gated
   by reduced motion); a faint glow keeps the word crisp against the night
   background even where the gradient runs dark. */
.raydar-word {
  background-image: linear-gradient(100deg, #2b2447 0%, var(--rd-violet) 22%, var(--rd-violet) 58%, var(--rd-orange) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--rd-violet);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(127, 114, 255, .28)) drop-shadow(0 0 30px rgba(255, 110, 0, .14));
}
@media (prefers-reduced-motion: no-preference) {
  .raydar-word { animation: raydar-sweep 6s ease-in-out infinite; }
}
@keyframes raydar-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================= Ticker
   Was a big serif statement band the same size as "How it works" right
   below it; now a slim, small marquee of live open roles, clearly
   secondary. Content is written in by home.js from shared/data/roles.json.
   Motion, hover-pause and reduced-motion all reuse the .ticker mechanics
   already in styles.css (app.js's marquees() and the .ticker:hover rule);
   only size and content differ here. */
.ticker--roles { padding: 16px 0; }
.ticker--roles .ticker__track {
  gap: 0;
  padding-left: clamp(20px, 2.4vw, 36px);
  font-family: var(--rd-font-ui);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  line-height: 1;
  color: var(--t2);
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(20px, 2.4vw, 36px);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--hair);
}
.ticker__item:hover, .ticker__item:focus-visible { color: var(--t1); }
.ticker__item:hover .ticker__blip, .ticker__item:focus-visible .ticker__blip { background: var(--violet); }
.ticker__blip { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .ticker__blip { animation: ticker-blip 2.4s ease-in-out infinite; }
}
@keyframes ticker-blip { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.ticker__item-loc { color: var(--t3); font-weight: 400; }
.ticker__item-loc::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 10px; border-radius: 50%; background: var(--t3); vertical-align: middle; }

/* =================================================== Proof: 15 of 16
   "of" set smaller and tucked close so the two numbers read as one figure
   instead of two numbers with a wide gap between them. */
.proof__num { letter-spacing: -.01em; }
.proof__num-of {
  display: inline-block;
  margin: 0 .06em;
  font-size: .32em;
  font-weight: 400;
  vertical-align: .42em;
  color: var(--t3);
}

@media (prefers-reduced-motion: reduce) {
  .raydar-word, .ticker__blip { animation: none !important; }
}