/* Farbar palette v0.2 and brand elements (D-022, D-025), taken from the owner's brand templates of
   2026-09-30 (docs/brand/mallar/). Loaded on every page after the other stylesheets.
   The v0.1 values in site-v3.css stay unchanged, because /assets/* is cached as immutable;
   these tokens override them. Roles, sources and contrast: docs/BRAND.md */
:root {
  --farbar-midnatt: #012e5f;          /* wordmark navy: body text, darkest surfaces */
  --farbar-vinternatt: #053b6e;       /* night sky: header, hero, page headers, footer */
  --farbar-kvallshimmel: #155087;     /* evening blue: secondary blue */
  --farbar-isbla: #ccdfee;            /* light illustration: light surfaces, text on navy */
  --farbar-sno: #fef6dd;              /* light illustration: page and soft bands */
  --farbar-kram: #fdf0d2;             /* snow in the colour illustration: warm callouts */
  --farbar-lyktsken: #fdc42d;         /* lantern: primary action */
  --farbar-lyktsken-ljus: #fed66c;    /* derived: primary action hover */
  --farbar-norrsken: #48b181;         /* northern lights = AI: accents and graphics */
  --farbar-norrsken-ljus: #a8e6ca;    /* derived: small text on green bands */
  --farbar-norrsken-mellan: #206f4b;  /* derived: green text on light surfaces */
  --farbar-norrsken-djup: #19573b;    /* derived: green bands */
  --farbar-norrsken-tint: #e3f5ec;    /* light illustration: light green surfaces */
  --farbar-dampad: #46607c;           /* derived: secondary text */
  --farbar-linje: #d3dee9;            /* derived: borders */
  --shadow: 0 14px 36px rgba(1, 46, 95, .12);
}

/* The hero photo keeps its place (D-018); its overlay now uses the wordmark navy. */
.hero::before { background: rgba(1, 46, 95, .55); }

/* Wordmark: the owner's script "Farbar", white on the dark header and footer. */
.brand-wordmark { display: block; width: 104px; height: auto; }
.hero-wordmark { max-width: none; margin-bottom: 18px; line-height: 0; }
.hero-wordmark img { display: block; width: clamp(230px, 30vw, 400px); height: auto; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
/* Raised about 10 px so the signature lines up with the tagline beside it (owner request, D-025). */
.footer-wordmark { display: block; width: 84px; height: auto; transform: translateY(-10px); }

/* Light winter-road illustration as a band above the last call to action. Decorative only.
   Shown whole, so the person with the shovel is never cut; the edges fade into the band colour. */
.scene-band { padding-top: 12px; background: var(--paper); line-height: 0; }
.scene-band--white { background: var(--white); }
.scene-band img {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 90%, transparent);
  mask-composite: intersect;
}

/* The colour illustration on the About page is shown whole. */
.painting--farg { aspect-ratio: 16 / 9; object-position: 50% 50%; }

@media (max-width: 1000px) {
  .hero::before { background: rgba(1, 46, 95, .64); }
}

@media (max-width: 700px) {
  .brand-wordmark { width: 92px; }
  .scene-band img { width: 100%; height: 300px; object-fit: cover; object-position: 24% 50%; }
}