/* Bot Forge homepage feature (Juno, 2026-10-08).
   Link on the homepage only. Feature rules are under .bf-flag.
   Sits on the night band, so it uses the band and door tokens.
   The 1100-and-up nav rule is the one exception, and it only tightens the header. */

.bf-flag { padding: 1.5rem 0 0.4rem; }
.bf-flag-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1.35rem;
  box-sizing: border-box;
  padding: 1.15rem 1.35rem 1.2rem;
  text-decoration: none;
  color: var(--band-head);
  background: var(--door-panel);
  border: 1px solid var(--band-rule);
  border-top: 6px solid var(--pink);
  border-radius: 16px;
  transition: transform 160ms ease-out, background 160ms ease-out;
}
.bf-flag-link:hover,
.bf-flag-link:focus-visible {
  background: var(--door-hover);
  color: var(--band-head);
  transform: translateY(-3px);
}
.bf-flag-link:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}
.bf-flag-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--band-head);
}
.bf-flag-ico {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--pink);
  border-radius: 50%;
  display: inline-block;
}
.bf-flag-dot { color: var(--door-1); }
.bf-flag-title {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.15rem, 4vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.bf-flag-sub {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--band-soft);
}
.bf-flag-go {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 2.75rem);
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
}

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

@media (max-width: 700px) {
  .bf-flag-link {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
  }
  .bf-flag-go { grid-column: 2; justify-self: start; margin-top: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-flag-link,
  .bf-flag-link:hover { transition: none; transform: none; }
  .bf-flag .fb-legs i:first-child,
  .bf-flag .fb-legs i:last-child,
  .bf-flag .forge-bot.has-name .fb-body { animation: none; }
}

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

/* 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;
  }
}