/* ————————————————————————————————————————————
   lil bit cycling v2 — the "Right now" line

   A small grey line under the welcome words: a coral dot, the label in
   small capitals, the words, and a fainter "as of" note.
   ———————————————————————————————————————————— */

.lbc-now {
  --coral:    #fc4c02;
  --ink-soft: #6e6e6e;
  --sans:     "Quicksand", "helvetica neue", helvetica, arial, sans-serif;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: .55em;
  row-gap: .2em;
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lbc-now.is-left  { justify-content: flex-start; }
.lbc-now.is-right { justify-content: flex-end; }

.lbc-now-head { display: inline-flex; align-items: center; gap: .5em; }
.lbc-now-dot {
  flex: none;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(252, 76, 2, .35);
  animation: lbc-now-pulse 2.6s ease-out infinite;
}
.lbc-now-label {
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lbc-now-label::after { content: ":"; }
.lbc-now-date { font-size: .85em; opacity: .75; }
.lbc-now-date::before { content: "· "; }

/* on a phone the line stacks: dot + label, the words, the note — no dots
   dangling at the ends of lines */
@media (max-width: 600px) {
  .lbc-now { flex-direction: column; align-items: center; row-gap: .1em; }
  .lbc-now.is-left  { align-items: flex-start; }
  .lbc-now.is-right { align-items: flex-end; }
  .lbc-now-label::after, .lbc-now-date::before { content: none; }
}

@keyframes lbc-now-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(252, 76, 2, .35); }
  70%  { box-shadow: 0 0 0 .55em rgba(252, 76, 2, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 76, 2, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lbc-now-dot { animation: none; }
}