/* The "over 1024" desktop band: 1025-1440.
   Container 1024, hero 1024x828, hero text left-aligned on the 48px gutter.
   Above 1440 is a SEPARATE band in styles1440.css, with a 1280-wide container.

   Naming trap, since it has already cost one round: these files are named for
   their breakpoint's max-width, NOT for the container width they set. This one
   is the 1025-1280 -> now 1025-1440 band and sets a 1024 container;
   styles1440.css is the 1281-1440 -> now >1440 band and sets a 1280 one. */
@media screen and (min-width: 1025px) and (max-width: 1440px) {

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

  /* One measure does not fit this breakpoint. The work band spans 928 (frames
     at 48 and 544), but the divider is 912 so it ends level with the timeline
     below, and the collab block is 920. Overriding here rather than changing
     --content keeps the grid correct.
     Specificity note: styles.css sets these via `.container > .divider,
     .container > .collab { width: var(--content) }`, which is (0,2,0). A bare
     `.divider`/`.collab` rule here is only (0,1,0) and loses that fight
     regardless of load order, so the override has to match the combinator to
     win on specificity, not just cascade position.
     margin-left note: styles.css also centres every band with `margin-left:
     auto; margin-right: auto`, which assumes every band is the SAME width.
     Narrowing only these two would centre them 4-8px inward and break the
     shared 48px left edge every other band relies on (48 = (1024-928)/2, same
     gutter documented on .container above). Pinning margin-left to that same
     48 and leaving margin-right on auto keeps the left edge flush and lets the
     narrower width eat only the right side, matching the old canvas layout
     (divider ends 960, collab ends 968). */
  .container > .divider { width: 912px; margin-left: 48px; }
  .container > .collab  { width: 920px; margin-left: 48px; }

  .hero {
    width: 1024px;
    /* The hero band is shorter at this width: the deepest hero child is
       .wizard-hat at bottom 773 (the hand-drawn arrows that used to pad the
       taller bands are gone from the site entirely). 828 + the shared 5px
       divider margin lands the divider at 833. */
    height: 828px;
  }

  /* HERO: left-aligned at this width instead of the base centred column. The
     title and the bio ragged awkwardly against an About / Work column that is
     hard left, so both start on the SAME text edge as those sections and as
     .tliaa above them: 48px from the container, the band's own gutter.
     This said 40 for a long time, and the comment justified it as "48 minus
     the 8px of padding these two carry". They carry no padding — the base
     rules in styles.css set none — so the subtraction was against a value that
     had gone, and the ink landed at 40 while .tliaa sat at 48 and the whole
     left edge was 8px out of true. Measured, not reasoned: the ink now starts
     at 48, same as .projects-title, .about-title, .collab-title and .credits.
     Those below-hero elements carry no `left` of their own at all; they get the
     gutter from `--content` on .container plus auto side margins. */
  .hero-hello,
  .hero-description {
    left: 48px;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  /* Left-aligning the hero frees its whole right flank, which is why the beanie
     can take the right-hand slot here. Nothing sits in the top-left corner any
     more: that corner is TL;IAA's.
     The hero is 1024 wide and 828 tall at this width, and that height is derived
     from the deepest hero child, so nothing may hang below ~773 or the divider's
     clearance above it stops being true. Size dialled at 1200; height follows
     the image ratio. */
  .beanie {
    /* placement only — sticker SIZES live in base styles.css, one size for
       every desktop band; the band files move things, they never resize. */
    top: 329px;
    right: 52px;
    left: auto;
  }

  /* The hat and the cap swapped sides; this is the hat's own `top` at this
     width, unchanged from before the swap. Its SIZE is deliberately not
     overridden here: it stays the base 430 at every width. */
  .wizard-hat {
    left: -65px; /* re-dialled at 1029 (was -116) */
    top: 553px;
  }

  /* The cap inherits `right: -100` from base, which puts it at 864-1124 here.
     Its `top` has to come up though: at the base 705 it would end at 855, and
     the hero is only 828 tall at this width. Worse, it would become the deepest
     hero child and break the 828 that the divider's clearance is derived from.
     620 keeps its bottom at 770, just inside the wizard hat's 773. */
  .baseball-cap {
    right: -19px;
    top: 620px;
  }

  /* Hint placement at this width — the POINT the text centres on, not a box.
     Hand-dialled at 1150 against the live canvas. It started
     life as the midpoint the four --ring-* tokens resolved to (97 + 215/2,
     412 + 98/2 = 204.5, 461), inherited when the hand-drawn ring was removed;
     these are their own numbers now, so do not expect that arithmetic to
     reproduce them. */
  .hero {
    /* --hint-cx is a CENTRE, so the value that puts the hint's left edge on the
       48px column is 48 + half its width. The note shrink-wraps one nowrap
       line, so that half is copy-dependent: 260/2 = 130 for "They said wear
       many... hats?", hence 178. Re-dial if the wording changes — the canvas
       dial's Hint X readout prints the resulting left edge, so drag until it
       says 48 rather than recomputing this by hand. */
    --hint-cx: 178px;
    --hint-cy: 433px;
  }

  /* lower bands */
  .about-title {
    font-size: 36px;
  }
  .about-lead {
    width: 600px; /* narrowed so the walk figure fits to its right */
  }
  .about-me {
    padding: 24px;
    /* Override base's -16px: at this width the gutter is 48 (not 56, which is
       what base assumes), so the note only needs to sit 8px left of the column
       edge, not 16, to land on its old canvas position. `margin-inline: 0` used
       to sit here and zeroed this out entirely (margin-inline sets both
       margin-left and margin-right), which is why the box measured 8px too far
       right (left:45 against a baseline of 37). */
    margin-left: -8px;
    /* Override base width:880. Sized so EVERY checkbox item stays on one line,
       including the longest ("Passionate about electronic music…on the side."),
       which needs 716px of text column and used to wrap to two here.
       box-sizing is content-box and the checkbox plus its gap eat 36px, so the
       text column is this width minus 36: 768 - 36 = 732, with ~16px of slack
       against font-metric drift. */
    width: 768px;
    min-width: 768px;
  }

  /* The one width where the figure OVERHANGS its band: right:24 measured from a
     1024 container, and the band is inset 48, so against the band that is -24.
     The base value (144) would pull it 76px onto the About paragraph, which is
     600px wide here. Same (0,2,0) scoping as the base rule so it wins. */
  .about-band > .walk-figure { right: -24px; }

  .about-stack {
    width: 220px;
    height: 220px;
  }

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

  .divider svg {
    width: 912px;
    height: 24px;
  }

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

  .work-frame {
    font-size: 16px;
  }

  /* timeline matches the work-frame band width here (container 1024). Compact
     type so the roles that wrap at 912px don't crowd the note below.
     Specificity note: this bare `.timeline` (0,1,0) ties base's bare
     `.timeline { width: var(--content) }` (also 0,1,0) and wins ONLY because
     this file loads after styles.css. Its neighbours `.container > .divider`
     / `.container > .collab` above carry an explicit (0,2,0) combinator for
     exactly this reason; if `.timeline` is ever folded into that list "for
     consistency" it silently loses the tie and the timeline jumps 912→928. */
  .timeline {
    width: 912px;
  }
  .timeline-item { padding-top: 22px; }
  .timeline-role { font-size: 13px; }
  .timeline-company { font-size: 12px; }

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

}