/* Late Shift page hero (Juno, 2026-10-08).
   Link after /themes.css. Every rule is under .ls-hero or #ls-hero.
   Same family as the Bot Forge hero: band tokens, house wordmark, serif title, pink pill.
   Night art is drawn in CSS: a moon, a shift clock at 2:00, and three fanned shift cards.
   The art is sized in em, so one font-size scales it. Motion is slow and stops for reduced motion.
   No nav rule here. late-shift.css already carries the 1100-and-up nav fit. */

.ls-hero {
  background: var(--band-bg);
  color: var(--band-ink);
  border-top: 4px solid var(--band-edge);
  padding: 2.5rem 0 2.25rem;
  overflow: hidden;
}
.ls-hero .ls-hero-inner {
  width: min(100% - (2 * var(--gutter, 1.25rem)), var(--max, 68rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand art"
    "title art"
    "sub art"
    "ticks art"
    "go art";
  column-gap: 2rem;
  align-items: center;
}
.ls-hero .ls-hero-brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  min-height: var(--tap, 2.75rem);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--band-head);
  text-decoration: none;
}
.ls-hero .ls-hero-brand:hover,
.ls-hero .ls-hero-brand:focus-visible { color: var(--band-head); }
.ls-hero .ls-hero-ico {
  display: inline-block;
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--pink);
}
.ls-hero .ls-hero-dot { color: var(--door-1); }
.ls-hero .ls-hero-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--band-head);
  overflow-wrap: normal;
}
.ls-hero .ls-hero-sub {
  grid-area: sub;
  max-width: 31rem;
  margin: 0.8rem 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--band-soft);
}
.ls-hero .ls-hero-ticks {
  grid-area: ticks;
  display: flex;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}
.ls-hero .ls-hero-ticks i {
  display: block;
  width: 1.35rem;
  height: 0.45rem;
  border-radius: 99px;
}
.ls-hero .ls-hero-ticks i:nth-child(1) { background: var(--gold); }
.ls-hero .ls-hero-ticks i:nth-child(2) { background: var(--door-1); }
.ls-hero .ls-hero-ticks i:nth-child(3) { background: var(--pink); }
.ls-hero .ls-hero-ticks i:nth-child(4) { background: var(--purple); }
.ls-hero .ls-hero-go {
  grid-area: go;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 1.15rem;
  min-height: var(--tap, 2.75rem);
  padding: 0 1.15rem;
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  text-decoration: none;
}
.ls-hero .ls-hero-go:hover,
.ls-hero .ls-hero-go:focus-visible { color: var(--ink); filter: brightness(1.06); }
.ls-hero .ls-hero-brand:focus-visible,
.ls-hero .ls-hero-go:focus-visible {
  outline: 3px solid var(--band-head);
  outline-offset: 3px;
}

/* Night art. 1em = 16px on desktop. */
.ls-hero .ls-hero-art {
  grid-area: art;
  position: relative;
  width: 17em;
  height: 14em;
  font-size: 16px;
}
.ls-hero .ls-hero-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(0.12em 0.12em at 8% 18%, var(--band-head) 98%, transparent),
    radial-gradient(0.09em 0.09em at 30% 6%, var(--band-head) 98%, transparent),
    radial-gradient(0.14em 0.14em at 52% 30%, var(--band-head) 98%, transparent),
    radial-gradient(0.09em 0.09em at 94% 52%, var(--band-head) 98%, transparent),
    radial-gradient(0.11em 0.11em at 14% 62%, var(--band-head) 98%, transparent),
    radial-gradient(0.08em 0.08em at 66% 4%, var(--band-head) 98%, transparent);
  opacity: 0.7;
  animation: ls-twinkle 5s ease-in-out infinite alternate;
}
.ls-hero .ls-hero-moon {
  position: absolute;
  right: 0.6em;
  top: 0.3em;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  box-shadow: inset 1em -0.5em 0 0 var(--gold);
  transform: rotate(-12deg);
}
.ls-hero .ls-hero-card {
  position: absolute;
  left: 6.4em;
  top: 3em;
  width: 6.2em;
  height: 8.6em;
  box-sizing: border-box;
  border: 0.14em solid var(--ink);
  border-top: 0.7em solid var(--sc);
  border-radius: 0.6em;
  background:
    linear-gradient(var(--rule), var(--rule)) 0.7em 1.5em / 3.2em 0.32em no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0.7em 2.3em / 4.4em 0.32em no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0.7em 3.1em / 3.8em 0.32em no-repeat,
    var(--card);
  box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.28);
  transform-origin: 50% 110%;
}
.ls-hero .ls-hero-card::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: 0.45em;
  width: 1.3em;
  height: 0.85em;
  border-radius: 0.25em;
  background: var(--sc);
}
.ls-hero .ls-hero-card--1 { --sc: var(--gold); transform: rotate(-16deg) translateX(-0.9em); }
.ls-hero .ls-hero-card--2 { --sc: var(--door-1); transform: rotate(-3deg); }
.ls-hero .ls-hero-card--3 {
  --sc: var(--pink);
  transform: rotate(11deg) translateX(0.9em);
  animation: ls-deal 7s ease-in-out infinite alternate;
}
.ls-hero .ls-hero-clock {
  position: absolute;
  left: 1.4em;
  bottom: 0.5em;
  width: 4.6em;
  height: 4.6em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.22em solid var(--ink);
  background:
    radial-gradient(circle, var(--ink) 0 0.22em, transparent 0.24em),
    linear-gradient(var(--ink), var(--ink)) 50% 0.2em / 0.14em 0.5em no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% calc(100% - 0.2em) / 0.14em 0.5em no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0.2em 50% / 0.5em 0.14em no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 0.2em) 50% / 0.5em 0.14em no-repeat,
    var(--card);
  box-shadow: 0 0 0 0.25em var(--purple), 0 0.4em 1em rgba(0, 0, 0, 0.3);
}
.ls-hero .ls-hero-clock i {
  position: absolute;
  left: 50%;
  bottom: 50%;
  display: block;
  border-radius: 0.1em;
  background: var(--ink);
  transform-origin: 50% 100%;
}
.ls-hero .ls-hero-hr { width: 0.24em; height: 1.05em; margin-left: -0.12em; transform: rotate(60deg); }
.ls-hero .ls-hero-min {
  width: 0.16em;
  height: 1.55em;
  margin-left: -0.08em;
  background: var(--pink);
  animation: ls-tick 60s linear infinite;
}

@keyframes ls-twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }
@keyframes ls-deal {
  from { transform: rotate(11deg) translateX(0.9em); }
  to { transform: rotate(14deg) translateX(1.1em) translateY(-0.25em); }
}
@keyframes ls-tick { to { transform: rotate(360deg); } }

/* Classic band is cream like the page, so a rule closes it, the stars go faint, and the shadows go flat. */
html[data-theme="classic"] .ls-hero { border-bottom: 1px solid var(--rule); }
html[data-theme="classic"] .ls-hero .ls-hero-stars { opacity: 0.25; animation: none; }
html[data-theme="classic"] .ls-hero .ls-hero-card { box-shadow: 0.3em 0.3em 0 var(--paper-deep); }
html[data-theme="classic"] .ls-hero .ls-hero-clock { box-shadow: 0 0 0 0.25em var(--purple), 0.3em 0.3em 0 0.25em var(--paper-deep); }

@media (max-width: 700px) {
  .ls-hero { padding: 1.75rem 0 1.6rem; }
  .ls-hero .ls-hero-inner {
    column-gap: 1rem;
    grid-template-areas:
      "brand art"
      "title title"
      "sub sub"
      "ticks ticks"
      "go go";
  }
  .ls-hero .ls-hero-art { font-size: 6.5px; align-self: end; margin-bottom: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-hero .ls-hero-stars,
  .ls-hero .ls-hero-card--3,
  .ls-hero .ls-hero-min { animation: none; }
  .ls-hero .ls-hero-go:hover { filter: none; }
}