/* DABB 2 — the top bar (and the phone dock), in the reference's manner.
   Fixed under the band. Logo at the start · the links in the middle · language and ONE white pill at the end.
   At the top of the page it is TRANSPARENT: logo, links, language and the pill stand directly on the picture (the first
   screen keeps a soft band of shade behind them, which the patch of sun never lifts — see 01-hero). Once the page is
   scrolled (html.is-scrolled) it becomes a TRANSLUCENT SHADE WITH A BLUR — the shade's own tone (--shade-rgb) at
   --bar-shade, never a solid bar, no hairline slab; where a blur is not supported the shade is simply denser.
   LIGHT (the owner: "lighten the blackness of the shades"): the bar's shade is as light as its type allows — .5.
   Its type is plain WHITE (the current link is the heavier one): on .5 it keeps 4.9 : 1 even over the sand's highlight
   tone in full sun with no blur at all; over the sand under a section's own shade, behind the blur, far more.
   Its lower edge is THE TRAIL. The living dabb stands on it under the item for where the visitor is
   (canvas .header__cv — it reaches a little above the edge and further below it, where the animal turns round).
   On the home page it is NOT shown while the first screen is the place (.header.is-first): that screen has its own
   dabb, and two would be one too many; it sets off from under the logo when the visitor reaches the next section.
   Below 1024 px (1180 px in Arabic) the links fold into the Menu button and the trail becomes the DOCK at the bottom
   of the viewport.

   State (js/parts/00-header.js):  [aria-current] on the current link / stop · .has-dabb on the stop the animal stands on ·
     .is-live / .is-swap on the canvas · .dock.is-away (the footer's end is in view) · html.is-dock-away
   Exports (on <html>):  --dock-h  the dock's height (0 on the wide layout) — the floating button lifts by it.

   THE BAR FOLLOWS THE GROUND UNDER IT (the owner's order, 2026-10-17): every section the bar can lie over says whether it
   stands IN THE SUN or IN SHADE (data-ground="sun" | "shade" — written by the section's builder, or by 00-header.js from
   the section's own rule: --ground in css/base.css, "sun" wherever .in-sun is). Over shade the bar is what it was: white
   type, a translucent shade over a blur. Over the sun it becomes A TRANSLUCENT LIGHT — the sand's highlight (--sun-rgb) at
   --bar-light (.72) over the blur — with DEEP type and a deep logo (the in-sun ink; the pill turns ink). The bar is in the
   shade only while all of it lies over shade (the first screen); the dock the same by its own edge. The switch is soft:
   the type's colours cross over (--t-2), the ground's two tones cross-fade (--bar-sun, a registered number, 0 … 1).
   html[data-bar="sun" | "shade"] · html[data-dock="sun" | "shade"]. Measured (the bar over the light: deep ink on .72 of
   the highlight over anything — even black — at least 6.5 : 1; see _lab/HANDOFF.md).                                    */
@property --bar-sun { syntax: "<number>"; inherits: true; initial-value: 0; }

/* the wide layout begins at 1024 px — at 1180 px in Arabic, whose names run longer (the same rules, twice, below) */
:root { --dock-h: 48px; }
@media (min-width: 1024px) { html:not([lang="ar"]) { --dock-h: 0px; } }
@media (min-width: 1180px) { html[lang="ar"] { --dock-h: 0px; } }

.header {
  --bar-shade: var(--shade-deep, 0.36);                         /* the bar once the page is scrolled: the shade at this strength, over a blur — the least under which white keeps 4.5 : 1 over the lightest SAND under it (the work's pool of light, blurred: 4.7 : 1); a white pill or a light picture passing under brings each link its own soft shade (.is-under, below). AMENDMENT 7: .36 (was .5) */
  --trail-ink: var(--fg);                                       /* the ink of the dabb's prints (read by the script) */
  --trail-up: 30px;                                             /* the canvas reaches this far above the trail … */
  --trail-down: 84px;                                           /* … and this far below it: room to turn round */
  --bar-light: 0.72;                                            /* the bar over the sun: the sand's highlight at this strength (the project sheet's bar) — deep ink on it keeps 6.5 : 1 over black itself */
  --bar-sun: 0;                                                 /* 0 in shade · 1 in the sun (html[data-bar="sun"]) — the two grounds cross-fade by it */
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header);
  padding-block-start: var(--band-total, 10px);                 /* the band lies over the bar's own top edge */
  color: var(--fg);
}
html[data-bar="sun"] .header {                                  /* OVER THE SUN: the in-sun inks (css/base.css .in-sun), restated for the bar alone */
  --bar-sun: 1;
  --fg: var(--sun-ink); --fg-2: var(--sun-ink-2); --fg-3: var(--sun-ink-3);
  --rule: rgba(var(--sun-ink-rgb), 0.2); --rule-2: rgba(var(--sun-ink-rgb), 0.56);
  --btn: var(--dabb-ink); --on-btn: var(--dabb-white); --btn-hover: #3B2A1C;      /* the pill turns: ink, a white label */
  --link-rule: rgba(var(--sun-ink-rgb), 0.42);
}
/* on the other pages (about, blog, an article) nothing behind the bar is made for it: there the bar brings its own soft band
   of shade from the top edge (.5 behind the type — what white needs on the lightest sand — nothing at its lower edge) — and, scrolled, a light layer on top of it */
html[data-page]:not([data-page="home"]) .header {
  --bar-shade: 0.14;
  background-image:                                             /* (AMENDMENT 7: the tokens' shade under running text, --shade-word; it was .56 → .5, and .3 scrolled) — over the sun, a band of light instead: */
    linear-gradient(to bottom, rgba(var(--sun-rgb, 242, 211, 162), calc(0.5 * var(--bar-sun))) 0, rgba(var(--sun-rgb, 242, 211, 162), calc(0.42 * var(--bar-sun))) 62%, rgba(var(--sun-rgb, 242, 211, 162), 0) 100%),
    linear-gradient(to bottom, rgba(var(--shade-rgb, 12, 9, 6), calc((var(--shade-word, 0.48) + 0.04) * (1 - var(--bar-sun)))) 0, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--shade-word, 0.48) * (1 - var(--bar-sun)))) 62%, rgba(var(--shade-rgb, 12, 9, 6), 0) 100%);
}
/* the bar's ground once the page is scrolled: a translucent shade over a blur (it also backs the band).
   The blur shows, softly, whatever passes under the bar — a white headline, the green WhatsApp button of the contact head
   (that is the "blurred coloured rectangle" seen in some pictures: content under the blur, not a stray layer). The blur
   carries NO saturation boost (it had 1.25): a vivid control passing under must not glow brighter than it is. */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:                                             /* the shade — or, over the sun, the light (they cross-fade by --bar-sun) */
    linear-gradient(rgba(var(--sun-rgb, 242, 211, 162), calc(var(--bar-light) * var(--bar-sun))), rgba(var(--sun-rgb, 242, 211, 162), calc(var(--bar-light) * var(--bar-sun)))),
    linear-gradient(rgba(var(--shade-rgb, 12, 9, 6), calc(var(--bar-shade) * (1 - var(--bar-sun)))), rgba(var(--shade-rgb, 12, 9, 6), calc(var(--bar-shade) * (1 - var(--bar-sun)))));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .header { --bar-shade: 0.9; --bar-light: 0.9; }               /* no blur to be had: the shade (the light) alone, denser — still not a solid bar */
}
/* the trail: the bar's lower edge — nothing over the first screen, the faintest line once the bar has its shade */
.header::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--hair);
  background: currentColor; opacity: 0; pointer-events: none;
}
html.is-scrolled .header::before { opacity: 1; visibility: visible; }
html.is-scrolled .header::after { opacity: 0.07; }

.header__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--gutter);
  block-size: var(--header-h);
}

/* ── the logo (sized by height only: the final drawn logo replaces these files) — white on the dark ── */
.header__brand { display: inline-flex; align-items: center; justify-self: start; min-block-size: 44px; color: var(--fg); text-decoration: none; border-radius: var(--r-1); }      /* white in shade · deep in the sun (currentColor) */
.header__brand .logo { block-size: 24px; inline-size: auto; max-inline-size: none; }
.header__brand .logo--ar { block-size: 38px; }
.header__brand .logo--opt2 { block-size: 26px; }
.header__brand .logo--ar.logo--opt2 { block-size: 38px; }

/* ── the links: five services with their colour dots, then Work, Blog, About ── */
.header__nav { display: none; min-inline-size: 0; }
/* the gap opens with the width: 14 px where the wide layout begins (--nav-from), the full measure 180 px later */
.header__list { --nav-from: 1024px; display: flex; align-items: center; justify-content: center; gap: clamp(14px, min(2vw, (100vw - var(--nav-from)) * 0.06 + 14px), 36px); }
html[lang="ar"] .header__list { --nav-from: 1180px; gap: clamp(14px, min(2vw, (100vw - var(--nav-from)) * 0.07 + 14px), 34px); }
.header__item { display: flex; }
.header__link, .header__lang {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--fg);                                             /* plain white on the picture: the lighter the shade behind it, the less it can afford to be dimmed (the current one is the heavier one) */
  text-decoration: none; border-radius: var(--r-1);
}
html[lang="ar"] .header__link, html[lang="ar"] .header__lang { letter-spacing: 0; }
.header__link { padding-inline: 6px; margin-inline: -6px; }      /* air for the focus ring; the ink stays where it was */
.header__link:hover, .header__link[aria-current], .header__lang:hover { color: var(--fg); }
/* one small dot in the service's own colour (the link carries data-accent) */
.header__mark { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-mark); }
/* the name: a hidden heavier copy holds the width, so the current item can grow heavier without moving its neighbours */
.header__name { display: inline-grid; }
.header__name[data-t]::after { content: attr(data-t); grid-area: 1 / 1; block-size: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.header__link:hover .header__mark { transform: scale(1.5); }
.header__link[aria-current] { font-weight: 600; }

/* SOMETHING LIGHT UNDER THE SCROLLED BAR (a white pill, a light picture): the blur shows it through the bar's shade, and
   white links alone would fall to about 3.8 : 1. The bar stays as light as it is; a link that has something light under
   it gets a soft shade of its own, just behind its words — feathered, never a box (js/parts/00-header.js sets .is-under,
   and --under: as much as white needs over white at the bar's own shade, worked out from the tokens) */
.header__link, .header__lang { position: relative; isolation: isolate; }
.header__link::before, .header__lang::before, .dock__name::before {
  content: ""; position: absolute; z-index: -1; inset: 10px 4px; border-radius: var(--r-pill); pointer-events: none;
  background: rgba(var(--shade-rgb, 12, 9, 6), var(--under, 0.2));
  box-shadow: 0 0 12px 8px rgba(var(--shade-rgb, 12, 9, 6), var(--under, 0.2));
  opacity: 0; transition: opacity var(--t-2) var(--e-std);
}
.dock__name::before { inset: -2px -4px; }
.header__link.is-under::before, .header__lang.is-under::before, .dock__name.is-under::before { opacity: 1; }
html[data-bar="sun"] .header :is(.header__link, .header__lang).is-under::before, html[data-dock="sun"] .dock__name.is-under::before { opacity: 0; }      /* (over the sun the type is deep: nothing light under it can take its ratio — 00-header.js leaves it) */
html.is-calm .header__link::before, html.is-calm .header__lang::before, html.is-calm .dock__name::before { transition: none; }

/* ── the end: language · the one white pill · Menu ── */
.header__tools { display: flex; align-items: center; justify-self: end; gap: var(--s-3); }
.header__lang { display: none; }
.header__lang-full { display: none; }                           /* the narrow end of the wide layout: the short form */
.header__lang:lang(ar) { font-size: 1rem; letter-spacing: 0; }      /* the Arabic word on the English page: optically the same size */

.header__cta { display: none; }

/* Menu: an outlined pill (the word and two lines); on a phone a ring with the two lines alone */
.header__menu {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  inline-size: 40px; block-size: 40px; flex: none;
  border: var(--hair) solid var(--rule-2); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1; color: var(--fg); white-space: nowrap;
}
.header__menu:hover { background: var(--fg); color: var(--on-btn); border-color: var(--fg); }
.header__menu-word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }      /* a phone: the icon alone (the word stays for assistive technology) */
.header__menu-ico { inline-size: 20px; block-size: 20px; }

/* ── the dabb's canvas (wide screens) ── */
.header__cv, .dock__cv {
  position: absolute; inset-inline-start: 0; inline-size: 100%; max-inline-size: none;
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-1) linear;                        /* also the reduced-motion cross-fade — an opacity change is all it does */
}
html.is-still .header__cv, html.is-still .dock__cv { transition: none; }
.header__cv { display: none; inset-block-start: calc(100% - var(--trail-up)); block-size: calc(var(--trail-up) + var(--trail-down)); }
.header__cv.is-live, .dock__cv.is-live { opacity: 1; }
.header__cv.is-swap, .dock__cv.is-swap { opacity: 0; }
.header.is-first .header__cv.is-live { opacity: 0; }            /* the home page's first screen has its own dabb: this one waits, unseen, under the logo */
.header.is-quiet .header__cv.is-live, .dock.is-quiet .dock__cv.is-live { opacity: 0; }      /* Labaik Badal's stage is passing under the bar / over the dock: the animal is never on, over or around it (00-header.js, quiet()) */
html:not(.js) .dock__cv { display: none; }

/* without scripts: the bar always has its shade, and the control that needs a script gives way to the plain links */
html:not(.js) .header::before { opacity: 1; visibility: visible; }
html:not(.js) .header__menu { display: none; }
html:not(.js) .header__lang { display: inline-flex; }

@media (min-width: 375px) {
  .header__cta { display: inline-flex; }
}
@media (min-width: 640px) {
  .header__brand .logo { block-size: 26px; }
  .header__brand .logo--ar { block-size: 40px; }
  .header__brand .logo--opt2 { block-size: 28px; }
  .header__brand .logo--ar.logo--opt2 { block-size: 40px; }
  .header__menu { inline-size: auto; padding-inline: 18px 14px; }
  .header__menu-word { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 1024px) {
  html:not([lang="ar"]) .header__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(20px, 2.2vw, 40px); }
  html:not([lang="ar"]) .header__nav { display: block; }
  html:not([lang="ar"]) .header__lang { display: inline-flex; }
  html:not([lang="ar"]) .header__menu { display: none; }
  html:not([lang="ar"]) .header__tools { gap: var(--s-5); }
  html.js:not([lang="ar"]) .header__cv { display: block; }
  html:not([lang="ar"]) .dock { display: none; }
}
@media (min-width: 1180px) {
  html[lang="ar"] .header__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(20px, 2.2vw, 40px); }
  html[lang="ar"] .header__nav { display: block; }
  html[lang="ar"] .header__lang { display: inline-flex; }
  html[lang="ar"] .header__menu { display: none; }
  html[lang="ar"] .header__tools { gap: var(--s-5); }
  html.js[lang="ar"] .header__cv { display: block; }
  html[lang="ar"] .dock { display: none; }
}
/* room to breathe: the language by its full name, and the links truly in the middle of the bar (equal side columns) */
@media (min-width: 1200px) {
  html:not([lang="ar"]) .header__lang-full { display: inline-grid; }
  html:not([lang="ar"]) .header__lang-short { display: none; }
}
@media (min-width: 1340px) {
  html:not([lang="ar"]) .header__in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  html[lang="ar"] .header__lang-full { display: inline-grid; }
  html[lang="ar"] .header__lang-short { display: none; }
}
@media (min-width: 1500px) {
  html[lang="ar"] .header__in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* ───────────────────────── the dock (below 1024 px · 1180 px in Arabic) ───────────────────────── */
.dock {
  --trail-ink: var(--fg);
  --dock-y: 17px;                                               /* the trail's distance from the dock's top edge */
  --dock-over: 60px;                                            /* the canvas reaches this far above the dock: room to turn round */
  --dock-dot: 6px;
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-rail);
  block-size: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--shade-rgb, 12, 9, 6), var(--dock-shade, var(--shade-deep, 0.36))); color: var(--fg);      /* a translucent shade over a blur, like the bar — never a solid slab; light: it always lies over a section's own shade (the lightest is the offices' ground, .18 — together .51, under which its small white label keeps 4.5 : 1 even on the sand's highlight tone) */
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  will-change: transform;                                       /* it slides away and back: its own layer (also keeps its paint whole on very long pages) */
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .dock { --dock-shade: 0.92; --dock-light: 0.92; }
}
/* the dock over the sun: the same translucent light as the bar, deep names (00-header.js: html[data-dock]) */
html[data-dock="sun"] .dock {
  --fg: var(--sun-ink); --fg-2: var(--sun-ink-2); --fg-3: var(--sun-ink-3); --trail-ink: var(--sun-ink);
  background-color: rgba(var(--sun-rgb, 242, 211, 162), var(--dock-light, 0.72));
}
.dock__line {
  position: absolute; inset-inline: 0; inset-block-start: var(--dock-y); block-size: var(--hair);
  background: currentColor; opacity: 0.16; pointer-events: none;
}
/* the first stretch of the line is the dabb's place at the top of the page: the stops begin after it */
.dock__list { display: flex; block-size: var(--dock-h); padding-inline: calc(var(--margin) + 44px) var(--margin); }
.dock__item { flex: 1 1 0; min-inline-size: 0; display: flex; }
.dock__stop {
  position: relative; flex: 1 1 auto; min-inline-size: 0;
  display: grid; justify-items: center; align-items: end; padding-block-end: 8px;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.dock__stop:focus-visible { outline-offset: -3px; box-shadow: none; }
.dock__mark {
  position: absolute;
  inset-block-start: calc(var(--dock-y) + 0.5px - var(--dock-dot) / 2); inset-inline-start: calc(50% - var(--dock-dot) / 2);
  inline-size: var(--dock-dot); block-size: var(--dock-dot); border-radius: 50%;
  background: var(--accent-mark);
}
.dock__stop[data-accent="brand"] .dock__mark { background: none; box-shadow: inset 0 0 0 var(--hair) var(--fg); opacity: 0.7; }      /* Work, Contact, Blog, About: an open dot */
.dock__stop.has-dabb .dock__mark { opacity: 0; }                /* the stop it stands on: the animal is the mark */
/* only the current stop says its name */
.dock__name {
  position: relative; z-index: 2;
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; line-height: 1; letter-spacing: var(--tr-label); text-transform: uppercase;
  white-space: nowrap; opacity: 0; transform: translateY(60%);
}
html[lang="ar"] .dock__name { font-family: var(--f-text); text-transform: none; line-height: 1.2; }
.dock__stop[aria-current] .dock__name { opacity: 1; transform: none; }
.dock__cv { inset-block-start: calc(var(--dock-over) * -1); block-size: calc(var(--dock-over) + var(--dock-h)); z-index: 1; }
.dock.is-away { transform: translateY(100%); visibility: hidden; }      /* never over the footer's last line */
html:not(.js) .dock__name { opacity: 0.7; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .header::before { transition: opacity var(--t-2) var(--e-std), visibility 0s linear var(--t-2); }
  html:not(.is-calm).is-scrolled .header::before { transition: opacity var(--t-2) var(--e-std), visibility 0s; }
  html:not(.is-calm) .header::after { transition: opacity var(--t-2) var(--e-std); }
  html:not(.is-calm) .header__link, html:not(.is-calm) .header__lang, html:not(.is-calm) .header__brand { transition: color var(--t-2) var(--e-std); }
  html:not(.is-calm) .header { transition: --bar-sun 360ms var(--e-std); }      /* the soft switch between the shade and the light */
  html:not(.is-calm) .dock__name { transition: opacity var(--t-2) var(--e-std), transform var(--t-3) var(--e-dash), color var(--t-2) var(--e-std); }
  html:not(.is-calm) .header__mark { transition: transform var(--t-2) var(--e-dash); }
  html:not(.is-calm) .header__menu { transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .dock { transition: transform var(--t-3) var(--e-dash), visibility 0s, background-color 360ms var(--e-std), color var(--t-2) var(--e-std); }
  html:not(.is-calm) .dock.is-away { transition: transform var(--t-3) var(--e-dash), visibility 0s linear var(--t-3), background-color 360ms var(--e-std), color var(--t-2) var(--e-std); }
  html:not(.is-calm) .dock__mark { transition: opacity var(--t-1) linear; }
}