/* ===== The hero at the top of the page, with the menu floating over it (index.html only)
   =====
   Founder 2026-11-09: "Move this section to the top part above the header", then "remove
   this Free AI & Web Development Training for Everyone", then "Move this to the header
   section" - the menu bar back at the top of the window, lying over the hero rather than
   waiting below it.

   How it is built, and why this way. The hero is out of <main> and sits beside the menu,
   and the menu is written FIRST: a position:sticky bar can only be at the top of the window
   the moment the page opens if it comes first, and the alternatives are worse - a fixed bar
   would cover the notice bar above it until that scrolls away, and anything else needs a
   script to measure the page. The hero is then pulled up by exactly the bar's height, so it
   starts at the very top of the page and the bar lies over its first 44px of map.

   The heights are written out because a negative margin cannot read them. Measured on the
   live page, in CSS pixels (NOT what getBoundingClientRect returns - site-scale.css puts
   zoom:1.25 on <html>, so a rect is 1.25x the CSS value): the bar is 73.6px at rest from
   641px wide, and 61.6px below that. The shrunken bar (.nav-compact) never matters here -
   topbar.js only adds it after scrolling, by which time the hero has gone past.

   Phones are left out on purpose. The map there is about 186px tall, and a 62px bar lying
   over it would cover a third of the world. Below 641px the bar keeps its own room, exactly
   as it does on every other page of the site.

   Nothing in hero-stack.css is touched. Its map budget - height: min((100vw - 35px)/1.7,
   100vh - 235px) - counted 169px of notice bar and menu above the map. Only the 40px notice
   bar is above it now, so the same budget leaves the map exactly as big as it was and ends
   it ~130px higher up. Growing the map into that space was the other option and was not
   taken: it would push everything the hero has to say further down the page.

   Loaded last, after hero-clean.css and hero-stack.css, so these rules win on order as
   well as weight.
   ========================================================================== */

/* Tight under the notice bar. The base .hero padding (40px, 48px from 1200px up) was
   spacing below a menu bar that no longer takes room above it. */
.hero.hero-top { padding-top: 24px; }
@media (max-width: 600px) { .hero.hero-top { padding-top: 16px; } }

@media (min-width: 641px) {
  /* The hero comes up under the bar. -74px, not -73.6: a rounded pixel is invisible and
     the bar measures 74.4px between 641 and 1024, so this sits between the two. */
  .nav.nav-over { margin-bottom: -74px; }

  /* Glass, not paint. At rest over the hero the bar lets the map through; once it is over
     the page proper topbar.js adds .is-scrolled and it goes back to the firmer bar every
     other page has, which is why this names :not(.is-scrolled) rather than fighting it. */
  .nav.nav-over:not(.is-scrolled) {
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent);
  }

  /* The map's own Map / Globe switch sits 10px from the top of the panel, which is now
     behind the bar. 44px is the overlap - 73.6px of bar less the ~30px of hero padding
     above the panel - so 54px puts the switch back where it looks, a clear 10px under the
     glass. The Full screen button is at the bottom of the panel and is not affected. */
  .hero-top .map-toggle { top: 54px; }
}

/* ===== The headline =====
   The old h1 said "Free AI & Web Development Training for Everyone" and is gone. The line
   under it is the headline now, so it is the h1 - a page with no h1 is a page search
   engines and screen readers cannot summarise.

   It must keep class="lede": ai-fx.js hangs the typed "ask AI to ... design a logo for my
   bakery" line off `.hero-copy .lede` and returns early when it is not there.

   Sized in container units like the headline it replaces (cqi, .hero-copy is the query
   container), so it scales with its column and not with the window. The line is sized three
   times before this (styles.css, hero-clean.css, hero-stack.css), hence the doubled class,
   which beats all three on weight. Descendant, never `>`: the headline sits inside
   .hero-glass, so a child combinator on .hero-copy reaches nothing - measured, the first
   version of this rule did exactly that and the headline rendered at 17px. */
.hero .hero-copy .lede.hero-lede {
  font-family: var(--font-head, inherit);
  /* !important is not decoration here: nginx injects site-scale.css after every stylesheet
     this page links, and line 39 of it pins `.hero .hero-copy .lede` to 17px !important.
     Nothing without !important can reach past that - measured, the first version of this
     rule rendered the headline at 17px. The margin is pinned there too (line 144). */
  font-size: clamp(1.4rem, 5.4cqi, 2.5rem) !important;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 560px;
  margin-bottom: 16px !important;
  color: var(--text);
  text-wrap: balance;
}
@media (max-width: 600px) {
  .hero .hero-copy .lede.hero-lede { font-size: clamp(1.3rem, 7.2cqi, 1.9rem) !important; }
}

/* One accent, the same gradient the old headline carried on "Every Sunday", so the hero
   still has a single focal point. Nothing moves: the no-wiggle rule of 2026-10-12. */
.hero-lede .hero-lede-hi {
  background: linear-gradient(95deg, #3b8bff 0%, #4fd1ff 55%, #7cf2d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hero-lede .hero-lede-hi {
  background: linear-gradient(95deg, #1f6fe5 0%, #0aa5d6 60%, #0f9f7a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}