/* Bot Forge page hero (Juno, 2026-10-08).
   Link after /themes.css. Hero rules are under .bf-hero or #bf-hero.
   Surfaces use the band tokens, so Night Desk and Classic both read.
   The 1100-and-up nav rule is the one exception, and it only tightens the header. */

.bf-hero {
  background: var(--band-bg);
  color: var(--band-ink);
  border-top: 4px solid var(--band-edge);
  padding: 2.5rem 0 2.25rem;
}
.bf-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 bot"
    "title bot"
    "sub bot"
    "steps bot"
    "go bot";
  column-gap: 2rem;
  row-gap: 0;
  align-items: center;
}
.bf-hero-brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  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;
  min-height: var(--tap, 2.75rem);
}
.bf-hero-brand:hover,
.bf-hero-brand:focus-visible { color: var(--band-head); }
.bf-hero-ico {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--pink);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.bf-hero-dot { color: var(--door-1); }
.bf-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);
}
.bf-hero-sub {
  grid-area: sub;
  margin: 0.7rem 0 0;
  max-width: 28rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--band-soft);
}
.bf-hero-steps {
  grid-area: steps;
  display: flex;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}
.bf-hero-steps i {
  display: block;
  width: 1.35rem;
  height: 0.45rem;
  border-radius: 99px;
}
.bf-hero-steps i:nth-child(1) { background: var(--gold); }
.bf-hero-steps i:nth-child(2) { background: var(--door-1); }
.bf-hero-steps i:nth-child(3) { background: var(--pink); }
.bf-hero-steps i:nth-child(4) { background: var(--purple); }
.bf-hero-go {
  grid-area: go;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  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;
  text-decoration: none;
}
.bf-hero-go:hover,
.bf-hero-go:focus-visible { color: var(--ink); filter: brightness(1.06); }
.bf-hero-brand:focus-visible,
.bf-hero-go:focus-visible {
  outline: 3px solid var(--band-head);
  outline-offset: 3px;
}
.bf-hero-bot { grid-area: bot; align-self: center; width: 110px; height: 125px; }

.bf-hero .bf-bot {
  width: 110px;
  height: 125px;
  flex: none;
}
.bf-hero .forge-bot {
  position: relative;
  width: 46px;
  height: 52px;
  transform: scale(2.4);
  transform-origin: top left;
}
.bf-hero .fb-body {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--teal);
  border: 2px solid var(--ink);
}
.bf-hero .fb-eyes {
  position: absolute;
  left: 13px;
  top: 16px;
  display: flex;
  gap: 4px;
}
.bf-hero .fb-eyes i {
  display: block;
  width: 7px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ink);
  position: relative;
}
.bf-hero .fb-eyes i::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
  top: 2px;
  left: 2px;
}
.bf-hero .fb-arms {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 22px;
  height: 4px;
}
.bf-hero .fb-arms::before,
.bf-hero .fb-arms::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.bf-hero .fb-arms::before { left: 0; }
.bf-hero .fb-arms::after { right: 0; }
.bf-hero .fb-legs {
  position: absolute;
  left: 16px;
  top: 40px;
  width: 14px;
  height: 12px;
}
.bf-hero .fb-legs i {
  position: absolute;
  top: 0;
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: 50% 0;
}
.bf-hero .fb-legs i:first-child { left: 1px; animation: bf-step .32s ease-in-out infinite alternate; }
.bf-hero .fb-legs i:last-child { right: 1px; animation: bf-step .32s ease-in-out infinite alternate-reverse; }
.bf-hero .forge-bot.has-name .fb-body { animation: bf-bob .32s ease-in-out infinite alternate; }
.bf-hero .fb-stop {
  position: absolute;
  left: 30px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--pink);
  border: 1.5px solid var(--ink);
}
.bf-hero .fb-stop::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

@keyframes bf-step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes bf-bob { to { translate: 0 -1px; } }

@media (max-width: 700px) {
  .bf-hero { padding: 1.75rem 0 1.6rem; }
  .bf-hero-inner {
    column-gap: 1rem;
    grid-template-areas:
      "brand brand"
      "title bot"
      "sub sub"
      "steps steps"
      "go go";
  }
  .bf-hero-bot { align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-hero .fb-legs i:first-child,
  .bf-hero .fb-legs i:last-child,
  .bf-hero .forge-bot.has-name .fb-body { animation: none; }
  .bf-hero-go:hover { filter: none; }
}

/* Nav fit, 1100 and up. The header column never grows past 1440, so the wrap continues.
   site.css stays as it is. Labels and tap height stay.
   The size steps down slightly so the gaps don't collapse. */
@media (min-width: 1100px) {
  header.site nav.primary { gap: 0 0.06rem; font-size: 0.66rem; }
  header.site nav.primary a {
    padding-left: 0.14rem;
    padding-right: 0.14rem;
    letter-spacing: 0.02em;
  }
}