/* The "over 1440" desktop band. Was 1281-1440; it now has NO upper bound, so
   these rules own every width above 1440 and the desktop ladder is two bands:

     over 1440   this file: container 1280, --content 1168, --band-gap 32
     over 1024   styles1280.css: container 1024, --content 928, --band-gap 64
     1024 down   styles1024.css: the stacked flow layout

   styles.css's base values for the selectors below (.container 1440,
   --content 1328, .hero 1440 wide) are now the effective value at NO viewport
   size — they are the fallback these two bands override.

   Naming trap: the files are named for their breakpoint's max-width, not for
   the container width they set. THIS file is the one with the 1280 container. */
@media screen and (min-width: 1441px) {

  .container {
    width: 1280px;
    /* The band measure at this width: (1280 - 1168) / 2 = 56, the gutter every
       below-hero element used to carry as its own `left:`. Gap 32 tiles the two
       work columns exactly: 568 + 32 + 568 = 1168. */
    --content: 1168px;
    --band-gap: 32px;
  }

  .hero {
    width: 1280px;
  }

  /* HERO: left-aligned, matching the over-1024 band rather than inheriting
     base's centred column. Its gutter is this band's own: (1280 - 1168) / 2 =
     56, where the over-1024 band uses 48. .tliaa comes along because base pins
     it at 48 and it has to sit on the same edge as the title beneath it.
     TO GO BACK TO A CENTRED HERO ABOVE 1440, delete this one block — base's
     `left: 0; right: 0; margin: auto` takes over again with no other edits. */
  .hero-hello,
  .hero-description {
    left: 56px;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .tliaa { left: 56px; }

  /* --hint-cx is a CENTRE, so the value that lands the hint's left edge on the
     56px gutter is 56 + half its rendered width (260.4 / 2 = 130.2) = 186.
     Copy-dependent, like the over-1024 band's 178: if the wording changes,
     re-measure the note's rendered width and add half of it to 56 rather than
     assuming this number holds. --hint-cy is left to base's 412, which is what this band
     used before, and the hero is base's 900 tall here. */
  .hero {
    --hint-cx: 186px;
  }


  /* lower bands: container-width-specific sizes, shared band tops */
  .about-title {
    font-size: 36px; /* was inheriting 43 from base while
                        .projects-title and .collab-title sit at 36 here */
  }
  .about-lead { width: 680px; }
  /* .about-me sits 8px further right at this width than at base: box left 48
     against a 56px gutter, where base wants 40. styles.css's -16px is the base
     value, so override it here rather than inheriting it. */
  .about-me {
    padding: 28px;
    margin-left: -8px;
  }

  /* less room left of the note at this width, so a touch smaller */
  .about-stack {
    width: 220px;
    height: 220px;
  }


  .about-me-title {
    font-size: 25px;
  }

  /* The SVG is a replaced element and does not shrink to its box: base sets it
     to 1328 for the 1440 container, so it must be re-set to this breakpoint's
     content measure or it runs ~104px past the container edge, silently, since
     body clips overflow-x. */
  .divider svg { width: 1168px; }

  .projects-title {
    font-size: 36px;
  }

  .collab-title {
    font-size: 36px;
  }

  /* Hat placement at this width, dialled at 1293. Placement only: the sizes are
     the base ones at every breakpoint. */
  .beanie {
    right: 52px;
    top: 335px;
  }

  .wizard-hat {
    left: -40px;
    top: 569px;
  }

  .baseball-cap {
    right: 98px;
    top: 649px;
  }

}