/* site-overrides.css - hand-maintained, loaded after the Webflow export.

   The export gave the same header three different treatments depending on
   which page it was on, so the wordmark and nav jumped around as you moved
   through the site. Everything here is keyed on classes, not on Webflow's
   generated #w-node-... ids, so it survives a re-export and applies to any
   page added later.

   Webflow writes its grid placement as per-node id rules, which outrank a
   class selector - hence !important on the two placement rules below, and
   nowhere else. */

@media (min-width: 768px) {

  /* 1. Placement. The About page puts its header and footer in the centre
        column; the Projects index spanned all three, so its header sat flush
        to the page edge while About's was inset. Match About. */
  .header-div-block.projects {
    grid-area: 1 / 2 / 2 / 3 !important;
    place-self: start stretch !important;
  }
  .footer {
    grid-area: 3 / 2 / 4 / 3 !important;
    place-self: end stretch !important;
  }

  /* 2. Inset. Project detail pages lay the body out as 1fr 3fr 1fr against
        1fr 2.25fr 1fr on About and Projects - same total width, wider middle
        column - which pushed their header 31px further left. The wider column
        is wanted there (the imagery uses it), so re-inset just the header
        within it. Ratios, not pixels, so it holds at any window width:
          left   = (1/4.25 - 1/5) / (3/5) = 5.882%
          width  = (2.25/4.25)    / (3/5) = 88.235%  */
  .header-div-block:not(.home):not(.projects) {
    width: 88.235%;
    max-width: none;
    margin-left: 5.882%;
  }
}

/* 3. Padding. Three different values on the same element - .home had 20px on
      top and none at the sides, .projects had 30px at the sides and none on
      top, everything else had neither - so the header shifted 30px sideways
      and 20px vertically between pages. Standardised on .home, which is what
      the About page already looked like. */
.header-div-block,
.header-div-block.home,
.header-div-block.projects {
  padding-top: 20px;
  padding-left: 0;
  padding-right: 0;
}