/* The header, Rejouice style: no bar. The name sits top left and the links top right, straight on the page,
   and each part of it turns light or dark to suit what is right under it, photos and films included (site.js sets
   .ink-dark on the name, each link and the button). Difference blending did this before, but Chrome then draws the
   whole screen a second time on every frame of a scroll, which made scrolling choppy in Chrome. A soft halo in the
   opposite colour keeps the words clear when a heading or a busy picture passes under them. Laptops and up; phones
   keep their full-screen menu. */
@media (min-width: 901px) {
  .nav, .nav.scrolled, .nav.on-dark, .nav.on-dark.scrolled { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--nav-ink) !important; }
  .nav { --nav-ink: #F2EFE8; --nav-halo: rgba(0, 0, 0, .38); }
  /* until site.js has looked (it then sets html.nav-inked), the paper pages (Privacy, Legal) start in the dark ink it
     would pick there, so their very first frame (the one the page fade starts from) already reads */
  html:not(.nav-inked) body:not(.dark-site) .nav { --nav-ink: #030303; --nav-halo: rgba(242, 239, 232, .55); }
  .nav .ink-dark { --nav-ink: #030303; --nav-halo: rgba(242, 239, 232, .55); }
  /* over a film the words stay warm white; a soft shade fades in behind them in case the film turns light there */
  .nav::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .34) 55%, rgba(0, 0, 0, 0)); opacity: 0; transition: opacity .4s ease; }
  .nav.over-film::before { opacity: 1; }
  .nav .brand, .nav .nav-links a, .nav .btn.btn-small { text-shadow: 0 0 12px var(--nav-halo), 0 0 3px var(--nav-halo); }
  .nav .brand svg { filter: drop-shadow(0 0 6px var(--nav-halo)); }
  .nav .brand-u, .nav .brand-d, .nav .brand span, .nav .brand b, .nav .nav-links a, .nav .btn.btn-small { transition: color .08s linear, stroke .08s linear, border-color .08s linear, text-shadow .08s linear, filter .08s linear, opacity .25s; }
  .nav .wrap, .dark-site .nav .wrap { display: flex; justify-content: flex-start; gap: 0; height: 64px; max-width: none; padding-inline: clamp(20px, 2.4vw, 40px); }
  .nav .brand { margin-right: auto; }
  .nav .brand-u, .nav .brand-d, .nav.on-dark .brand-u, .nav.on-dark .brand-d { stroke: var(--nav-ink) !important; }
  .nav .brand span, .nav .brand b { color: var(--nav-ink) !important; }
  .nav .nav-links, .dark-site .nav .nav-links { margin: 0 24px 0 auto; gap: 4px; padding: 0; }
  .nav .nav-links a, .dark-site .nav .nav-links a { padding: 6px 10px; color: var(--nav-ink) !important; font-size: 15px; opacity: 1; }
  .nav .btn.btn-small { height: auto; padding: 0 0 2px; background: none !important; color: var(--nav-ink) !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none; font-size: 15px; }
  /* Get in touch is the same size on every page from the very first frame. It used to start as a bare underlined word
     and grow 32px wider once site.js marked the header as sitting on a dark section (an older button rule,
     .dark-site .nav.on-dark .btn, then won), so each page drew its header once and then slid every link left; between
     pages the two headers showed over each other. This is the size it always ended up at, set up front, and the
     underline keeps its square ends over dark sections too (that rule also rounded them). It is one width whatever it
     says (a little over Get in touch, with room for fonts that set it wider), so the check page's shorter "Free check"
     doesn't move the links along either. */
  :root body .nav .btn.btn-small, :root body .nav.on-dark .btn.btn-small { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; height: 36px; padding: 0 16px; line-height: 1; border-radius: 0; }
}
/* Phones: no bar, no fade behind it and no halo round the words, as on rejouice.com: the name, Get in touch and Menu
   sit straight on the page in one ink that inverts against what is under it (below). */

/* Every page wears the homepage's header. The case pages set their text in Geist (case.css) and Privacy and Legal have
   no .dark-site, so the header followed their type and the older phone header there (a filled Get in touch, a ringed
   menu button, Dev in colour); here the links and Get in touch keep the site's face (the name keeps its own, Bricolage),
   and every part takes the homepage's look. */
:root body .nav :is(.nav-links a, .btn.btn-small, .btn .roll, .btn .roll > span, .menu-toggle) { font-family: "Ukason Sans", "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root body .nav .brand { font-size: 18px; letter-spacing: -.03em; }
/* the mark at the homepage's size on every page, Privacy and Legal included, so the name doesn't nudge between pages */
:root body .nav .brand svg { width: 28px; height: 22px; }
@media (min-width: 901px) { :root body .nav .btn.btn-small { font-size: 14px; } }
@media (max-width: 900px) {
  :root body .nav .wrap { height: 56px; }
  :root body .nav, :root body .nav.scrolled, :root body .nav.on-dark, :root body .nav.on-dark.scrolled { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root body .nav { --nav-ink: #F2EFE8; --nav-halo: rgba(0, 0, 0, .38); color: var(--nav-ink); }
  /* one ink for the whole header, inverted against whatever is under it (difference), as on rejouice.com: light on
     night, dark on paper, and the opposite of a picture over films and photos, with no guessing part by part. It stays
     off while the menu is open and for the 0.7 s the menu takes to close (polish-3.css). The header fades with the
     page between pages here, so the closed and open headers never show over each other. */
  :root body .nav { mix-blend-mode: difference; view-transition-name: none; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease), mix-blend-mode 0s linear .7s; transition-behavior: allow-discrete; }
  :root body .nav.open { mix-blend-mode: normal; transition-delay: 0s; }
  :root body .nav.open .ink-dark { --nav-ink: #F2EFE8; }
  :root body .nav.open, :root body .nav.open.on-light { --nav-ink: #F2EFE8; background: var(--night, #000000); }
  :root body .nav :is(.brand-u, .brand-d) { stroke: var(--nav-ink) !important; transition: stroke .08s linear; }
  :root body .nav .brand :is(span, b) { color: var(--nav-ink) !important; transition: color .08s linear; }
  :root body .nav .btn.btn-small { height: auto; padding: 0 0 2px; background: none !important; color: var(--nav-ink) !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none; font-size: 13.5px; font-weight: 400; }
  :root body .nav .menu-toggle { width: 40px; height: 40px; border: 0; box-shadow: none; color: var(--nav-ink); }
}

/* Phones, the Rejouice way (2 Nov): two things in the header, not three. The name (or the tagline on the opening)
   on the left, and one Menu button on the right: the word in a small filled box, which says Close while the menu is
   open. The underlined Get in touch and the two-line icon are gone: the open menu already ends with Book a call and our
   email. The box is near-black, so the header's difference ink turns it light grey with
   dark letters when it passes over paper or a bright film. */
@media (max-width: 760px) {
  :root body .nav .btn.btn-small { display: none !important; }
  :root body.dark-site .nav .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  :root body .nav .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 80px; height: 40px; margin: 0;
    padding: 0 14px; border: 0; border-radius: 0; box-shadow: none; background: #1A1A1A; color: var(--nav-ink); opacity: 1;
    font: 400 15px/1 "Ukason Sans", "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; }
  :root body .nav .menu-toggle span { display: none; }
  :root body .nav .menu-toggle::after { content: "Menu"; }
  :root body .nav.open .menu-toggle::after { content: "Close"; }
}

/* The mark (9 Nov): three of the same U turned round one open centre, a firm's customers, team and office, and the app
   that joins them. One colour, the header's ink. It stays in place at the top of the homepage too, where the tagline
   takes the name's place beside it, so the header always carries the brand. */
:root body .nav .brand svg.brand-mark { width: 24px; height: 24px; flex: none; fill: currentColor; color: var(--nav-ink, currentColor); overflow: visible; }
html.hx-top body .nav .brand > svg.brand-mark { opacity: 1; }
html:root body .nav .brand .nav-tag { left: 34px; }

/* Phones over a film: the difference ink turned the header a dull grey wherever a mid-toned film ran under it, so the
   name and Menu all but disappeared. While a film runs under the whole header (site.js sets .over-film) the words go
   back to plain warm white with the same soft shade behind them as on laptops; over night and paper the difference
   ink carries on as before. */
@media (max-width: 900px) {
  :root body .nav::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0)); opacity: 0; transition: opacity .4s ease; }
  :root body .nav.over-film:not(.open) { mix-blend-mode: normal; transition-delay: 0s; --nav-ink: #F2EFE8; }
  :root body .nav.over-film:not(.open) .ink-dark { --nav-ink: #F2EFE8; }
  :root body .nav.over-film:not(.open)::before { opacity: 1; }
}