/* The nav/title/back-button/corner-link colour differs page to page (white
   on the homepage and Commercial, grey on project pages, plain on About/
   Contact/Archive) — each page loads fresh with its own colour already
   set, so this can't smooth the jump BETWEEN pages, but it does mean any
   colour applied after load (cookie.js's forceHeaderColor, for pages where
   the plain CSS rule wasn't sticking) fades in over the page's own colour
   instead of snapping straight to it. */
.Header a,
.WorkSingle__header h1,
.WorkSingle__page-link,
.Footer a {
  transition: color 0.3s ease;
}

/* Work/About/Contact/Archive/Commissions is the same nav on every single
   page — it should read as one consistent, always-there piece of UI, not
   something that visibly animates in on every navigation. Tried an
   opacity:0->1 fade-in keyed off the page's own "mounted" signal (see git
   history), but on a static site every link is a full browser reload, not
   client-side routing — there's no single header DOM node persisting across
   pages to fade "from", so animating it in just reads as the header
   reloading each time, the opposite of "always there". Left as plain
   immediate visibility; only colour transitions (above) still smooth the
   cases where cookie.js's forceHeaderColor corrects it after load. */

/* The compiled header component sets .Header.--transparent / .--commercial /
   .--project to opacity:0 + pointer-events:none at >=768px (tablet/desktop)
   with no JS ever reversing it — the header (and all its nav links) is
   permanently invisible and unclickable on the homepage, Commercial
   Services, and every /work/<project> page at those widths. There is no
   scroll/hover reveal anywhere in the bundle, so this restores the header
   to always visible + clickable, matching how it already behaves on mobile
   and on pages without a variant class (About/Contact/Archive). */
@media only screen and (min-width: 768px) {
  .Header.--transparent,
  .Header.--commercial,
  .Header.--project {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Commercial Services: transparent header, white nav text — same
     treatment as /work above (see .Layout:has(.Work) .Header further
     down), so it reads consistently against Commercial's own dark splash
     background instead of showing a white bar. It's also position:fixed
     with no explicit width, same as .Header.--project below, which is the
     actual reason Work/About/Contact/Archive looked "black" — they
     weren't black, they weren't visible at all: the shrink-wrapped fixed
     bar only had room for the last flex item (Commissions), and the rest
     rendered off-screen to the left. Every colour override above this was
     chasing the wrong bug. */
  .Header.--commercial {
    background: transparent !important;
    width: 100% !important;
  }
}

/* Colour fix kept outside the min-width:768px block and re-stated with
   several selector shapes at once — a scoped, single-selector version of
   this (inside the media query above) was visually not taking effect
   despite matching in static analysis, so this covers unscoped/narrower-
   viewport cases too and doesn't rely on any one selector shape winning. */
.Header.--commercial a,
.Header.--commercial .Header__menu a,
.Header.--commercial .Header__menu.h-m a,
header.Header.--commercial nav a,
.Header.--transparent a,
.Header.--transparent .Header__menu a {
  color: #fff !important;
}

/* .Header.--project also switches to position:fixed (see above), which
   drops it out of normal flow with no explicit width set anywhere in the
   bundle -- it shrinks to fit its content instead of spanning the
   viewport, so "space-between" has no room to push Commercial to the
   right and the whole bar sits bunched up on the left. */
@media only screen and (min-width: 768px) {
  .Header.--project {
    width: 100% !important;
  }
}

/* Now that the header above is actually visible, two page-specific headers
   that were designed to sit at top:0 (reasonably, since the main header was
   invisible) need to sit below it instead, or they overlap:
   - Commercial Services' "<- About" back button + its own toggle
   - Work project pages' back button + title (title uses mix-blend-mode so
     it reads over the scrolling hero image beneath it -- keep that, just
     move the whole sticky/fixed bar down by the main header's height) */
@media only screen and (min-width: 768px) {
  .CommercialServices__header {
    top: var(--headerHeight) !important;
  }
  /* CommercialServices__header is position:fixed, so top:headerHeight
     alone floats it below the main nav with no reserved space — the grid
     behind it starts at the true top of the page either way. WorkSingle__
     header is position:sticky instead, where top only shifts where it
     sticks once scrolled; at rest it still sits in normal flow at the very
     top and would overlap the main nav. Switching it to fixed too (same
     width:100% treatment as .Header.--project above, for the same reason)
     matches it to Commercial's behaviour exactly: floats below the main
     nav, hero image starts at the true top of the page instead of behind
     a reserved gap. */
  .WorkSingle__header {
    position: fixed !important;
    top: var(--headerHeight) !important;
    width: 100% !important;
  }
  /* .WorkSingle__hero also carries its own padding-top:2.5rem from the
     compiled bundle, independent of the header positioning above — on top
     of removing the reserved header gap, this was still leaving a smaller
     but visible strip of its own before the image actually starts. */
  .WorkSingle__hero {
    padding-top: 0 !important;
  }
}

/* The project page's hero image sits inside .WorkSingle's 12-col grid,
   which itself sits inside .Layout__main's side padding (--sides), and
   .Image.--landscape caps out at max-width:125rem -- all three combine to
   keep the hero image narrower than the viewport with visible margins on
   either side. Break it out to true edge-to-edge full-bleed. */
.WorkSingle__hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.WorkSingle__hero .Image {
  max-width: none !important;
}

/* The "Studio Above&Below" corner link (.Footer) is position:fixed, so it
   can end up sitting over any image on the page as you scroll — the
   compiled bundle already gives it color:#fff + mix-blend-mode:difference
   so it self-inverts and stays readable, but only wires that up when the
   --white modifier happens to be present (currently just the homepage).
   Apply the same treatment everywhere the link appears; diff(white,white)
   resolves to black, so this looks identical to the plain black text
   already used on pages with no imagery behind it — no regression there,
   just adaptive everywhere there is. */
.Footer a {
  color: #fff !important;
  mix-blend-mode: difference;
}

/* About/Contact/Archive share the plain `.Header` (no --transparent/
   --commercial/--project modifier). Explicitly transparent at desktop
   widths, matching the other variants — no white bar behind the nav text.
   (Scoped to desktop only — .Header{background:var(--black)} at mobile
   widths is the solid bar behind the hamburger menu there and needs to
   stay.) Note: this brings back the reason a solid background was added
   here in the first place — Contact's message form is tall enough to
   scroll past the sticky header, and scrolled text will show through
   behind the nav links once this is transparent. Flagging that trade-off
   rather than quietly reintroducing it; revert this rule (back to
   `background: var(--white)`) if it reads badly in practice. */
@media only screen and (min-width: 768px) {
  .Header:not(.--project) {
    background: transparent !important;
  }
}

/* /work is the exception among those plain-`.Header` pages: it's a full-
   bleed image grid (unlike About/Contact/Archive's plain text), so it
   should get the same "image starts at the true top of the page" and
   "header floats transparently over it" treatment as the single project
   pages and Commercial above — but its header has no page-specific class
   to target the way --project/--commercial do, so scope this to the page
   via :has() instead. cookie.css's .Header{margin-bottom:...} also adds
   extra reserved space below the header on top of its own height; that
   only makes sense for pages where the header sits in normal flow above
   plain content, not here. */
/* The header's own margin-bottom (reserved space below it, meant for
   pages where it sits in normal flow above plain content) leaves a gap
   between the header and the black .Work background at every width, not
   just desktop — .Work's own black background (see work-extra.css)
   doesn't start until after that gap, showing whatever's behind it
   (transparent/white) through instead of reading as one continuous black
   area from the top. Zeroed unconditionally; the position:fixed +
   transparent floating-over-the-image treatment below stays desktop-only,
   since mobile's header needs to keep its own solid (already black)
   background behind the hamburger menu. */
.Layout:has(.Work) .Header {
  margin-bottom: 0 !important;
}

@media only screen and (min-width: 768px) {
  .Layout:has(.Work) .Header {
    position: fixed !important;
    width: 100% !important;
    background: transparent !important;
  }

  .Layout:has(.Work) .Header a {
    color: #fff !important;
  }
}

/* .Layout__main carries site-wide top/bottom padding (var(--sides)) meant
   for ordinary text pages so content doesn't touch the viewport edge —
   on /work specifically that left a plain gap below the last full-bleed
   image (bottom) and above the first one, below the header (top), instead
   of the black background reaching both true edges of the page. */
.Layout:has(.Work) .Layout__main {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Individual project pages (/work/<slug>): nav, back button, title and
   the "Studio Above&Below" corner link all grey — applies to every
   project page automatically (no per-page markup, just the shared
   .Header.--project/.WorkSingle__*/.Footer classes every project page
   already renders), so this covers all existing projects and any added
   from now on with no further changes needed. */
.Header.--project a,
.Header.--project a.is-active {
  /* "Work" carries class="is-active" on every project page (it's the
     current top-level section) — a.is-active{color:var(--grey)} elsewhere
     resolves to a very light, near-white grey at desktop widths, visibly
     different from the others; restate is-active explicitly here so all
     five links match. */
  color: #999 !important;
}

.WorkSingle__page-link {
  color: #999 !important;
}

.WorkSingle__header h1 {
  color: #999 !important;
  mix-blend-mode: normal !important;
}

.Layout:has(.WorkSingle) .Footer a {
  color: #999 !important;
  mix-blend-mode: normal !important;
}

/* The credits block and Top/Back-to-projects footer sit in normal flow
   below the last image with no background of their own — nothing paints
   over the page's default white canvas there, so there was a gap between
   the two (and past the last one) with no background at all. Explicit
   white background instead of relying on the page's unpainted canvas —
   normal black-on-white body text here, same as the intro paragraph
   higher up the page, just consistent all the way down now instead of
   dropping out after the credits block specifically. */
.WorkSingle__credits,
.WorkSingle__footer {
  background: var(--white);
}

/* Commissioners/Technologies/Collaborators/Date: each column's own heading
   and text centred within its column, instead of the default left-align
   — the block already spans the full project-page width via its own grid,
   so this centres each item relative to that width rather than moving the
   block itself. */
.WorkSingle__credits {
  text-align: center;
}

.WorkSingle__credits > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .WorkSingle__footer also carries margin-left:auto to right-align Top/Back
   at desktop widths, which shrinks the element's own box to hug its
   content instead of spanning the row — the background above only ever
   painted that narrow shrunk box, leaving the rest of the row (and the
   fixed "Studio Above&Below" corner link sitting over it) still on white.
   Same right-aligned result via flexbox instead, without shrinking the box
   itself, so the background actually reaches full width. */
@media only screen and (min-width: 768px) {
  .WorkSingle__footer {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-end;
  }
}