/* DABB 2 — the menu (the index overlay): a full-screen modal that wipes down from the band. Its ground is the page's own:
   the sand (.ground, css/base.css) — never a flat fill. IN THE SUN since 2026-10-17 (.in-sun on the element: deep type on the
   lifted sand, as every page under it now stands; it was the last dark surface of the site — a shade of .54, before that .80):
   the rows in --fg-2 (4.9 : 1 on the darkest grain), the row in hand --fg (6.0), the others stepping back to --fg-3 (3.8:
   large type only — the rows are 22 – 68 px).
   Eight large calm rows — the five services with their colour dots, then Work, Blog, About. Hover or focus a row and
   it comes forward (full ink, a step along the line) while the other rows step back; the ground never changes colour.
   Then one strip: Start a project (the white pill) · WhatsApp · language.
   State (js/parts/00-index.js):  .index.is-open · .index.is-hot + [data-accent] · .index__row.is-hot · [aria-current]   */

html.is-index-open { overflow: hidden; }                        /* the page behind does not scroll */

.index {
  --sh: var(--shade-sun); --sun: var(--sun-lift);               /* (.ground in the sun: no shade, the sun's lift — was .54, and .80 before that) */
  --ix-fg: var(--fg);
  --ix-rule: 0.16;                                              /* hairlines are drawn in the current ink at this opacity */
  --ix-vh: 1vh;                                                 /* 1dvh where the browser has it (phones with a moving toolbar) */
  --ix-size: clamp(1.375rem, min(var(--ix-vh) * 5.6, 6.6vw), 4.25rem);      /* the rows: as large as eight of them — and the longest name — allow */
  --ix-mk: 1.75rem;                                             /* column of the mark */
  --ix-dot: 8px;
  position: fixed; inset: 0; z-index: var(--z-index);
  display: grid; grid-template-rows: auto 1fr auto;
  color: var(--ix-fg);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.index.is-open { visibility: visible; clip-path: inset(0 0 0 0); }
@supports (block-size: 1dvh) { .index { --ix-vh: 1dvh; } }
.index:focus { outline: none; }                                 /* the dialog itself takes focus when it is opened by a script */

/* ── top bar: sits exactly where the header sits, so the Menu button becomes the Close button ── */
.index__bar { padding-block-start: var(--band-total, 12px); }
.index__bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); block-size: var(--header-h); }
.index__brand { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
.index__brand .logo { block-size: 24px; inline-size: auto; max-inline-size: none; }      /* the same sizes as the top bar: the logo does not move */
.index__brand .logo--ar { block-size: 38px; }
.index__brand .logo--opt2 { block-size: 26px; }
.index__brand .logo--ar.logo--opt2 { block-size: 38px; }
/* Close: the Menu button's own outlined pill, in the same place */
.index__close {
  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: inherit; white-space: nowrap;
}
.index__close:hover { background: var(--fg); color: var(--on-btn); border-color: var(--fg); }
.index__close-word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.index__close-ico { inline-size: 20px; block-size: 20px; }
.index__close:hover .index__close-ico { transform: rotate(90deg); }

/* ── the rows ── */
.index__nav { display: grid; padding-block: var(--s-2); }
.index__list { display: grid; grid-auto-rows: minmax(min-content, 1fr); }
.index__item { position: relative; display: grid; overflow: hidden; }
.index__item::before, .index__foot-in::before {                /* hairline above every row and above the bottom strip */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--hair);
  background: currentColor; opacity: var(--ix-rule);
}
.index__row {
  display: grid; grid-template-columns: var(--ix-mk) minmax(0, 1fr); align-items: center;
  padding-block: clamp(6px, var(--ix-vh) * 1.2, 16px);
  color: inherit; text-decoration: none;
}
.index__mark { position: relative; justify-self: start; inline-size: calc(var(--ix-mk) - var(--s-3)); aspect-ratio: 1; }
.index__mark::before {                                          /* one dot: filled with the service's colour; open for the other pages */
  content: ""; position: absolute; inset: 0; margin: auto;
  inline-size: var(--ix-dot); block-size: var(--ix-dot); border-radius: 50%;
  background: var(--accent-mark);
}
.index__row[data-accent="brand"] .index__mark::before { background: transparent; box-shadow: inset 0 0 0 var(--line) var(--fg-3); }
.index__row[aria-current] .index__mark::after {                 /* you are here: the dot wears a ring */
  content: ""; position: absolute; inset: 0; margin: auto;
  inline-size: calc(var(--ix-dot) + 10px); block-size: calc(var(--ix-dot) + 10px); border-radius: 50%;
  border: var(--hair) solid currentColor;
}
.index__name {
  font-family: var(--f-display); font-weight: var(--w-display); font-stretch: var(--display-stretch);
  font-size: var(--ix-size); line-height: var(--lh-head); letter-spacing: var(--tr-head);
  white-space: nowrap; justify-self: start; color: var(--fg-2);
}
.index__row:hover .index__name, .index__row.is-hot .index__name, .index__row[aria-current] .index__name { color: var(--fg); }
/* Arabic: the display face runs large and needs air above and below — a little smaller, a taller line */
html[lang="ar"] .index { --ix-size: clamp(1.375rem, min(var(--ix-vh) * 4.4, 6.6vw), 3.5rem); }
html[lang="ar"] .index__name { line-height: 1.3; position: relative; inset-block-start: -0.1em; }      /* lifted: the deepest tail (ي) clears the rule below */

/* hot: the row comes forward, the others step back (their names stay readable: 4.6:1 on the page) */
.index.is-hot .index__row:not(.is-hot) .index__name { color: var(--fg-3); }
.index__row.is-hot .index__mark::before { transform: scale(1.4); }
.index__row.is-hot .index__name { transform: translateX(var(--s-3)); }
[dir="rtl"] .index__row.is-hot .index__name { transform: translateX(calc(var(--s-3) * -1)); }

.index__row:focus-visible { outline: none; box-shadow: none; }
.index__row:focus-visible .index__name { outline: 2px solid var(--focus); outline-offset: 0.14em; border-radius: var(--r-2); }

/* ── bottom strip: Start a project · WhatsApp · language ── */
.index__foot { padding-block-end: max(var(--s-4), env(safe-area-inset-bottom, 0px)); }
.index__foot-in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-2) var(--gutter); padding-block-start: var(--s-4);
}
/* the one button: the white pill (base.css .btn) */
.index__cta { grid-column: 1 / -1; justify-self: start; }
.index__wa, .index__lang {
  display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; justify-self: start;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--fg-2); text-decoration: none;
}
.index__wa:hover, .index__lang:hover { color: var(--fg); }
.index__wa-ico { inline-size: 20px; block-size: 20px; color: currentColor; }
.index__wa-word, .index__lang { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; }
[dir="rtl"] .index__wa-word, [dir="rtl"] .index__lang { background-position: 100% 100%; }
.index__wa-word { padding-block: 4px; }
.index__wa:hover .index__wa-word { background-size: 100% 1px; }
.index__lang { min-block-size: 0; padding-block: 4px; font-weight: 500; }
.index__lang:hover { background-size: 100% 1px; }
.index__lang:lang(ar) { font-size: calc(var(--fs-sm) * 1.1); letter-spacing: 0; }
.index__tools { display: flex; align-items: center; justify-self: end; gap: var(--s-5); }

@media (min-width: 640px) {
  .index__brand .logo { block-size: 26px; }
  .index__brand .logo--ar { block-size: 40px; }
  .index__brand .logo--opt2 { block-size: 28px; }
  .index__brand .logo--ar.logo--opt2 { block-size: 40px; }
  .index__close { inline-size: auto; padding-inline: 18px 14px; }
  .index__close-word { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
  .index__foot { padding-block-end: max(var(--s-5), env(safe-area-inset-bottom, 0px)); }
  .index__foot-in { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--s-6); padding-block-start: var(--s-5); }
  .index__cta { grid-column: auto; }
  .index__tools { grid-column: 3; }
}
@media (min-width: 900px) {
  .index { --ix-size: clamp(2rem, min(var(--ix-vh) * 5.6, 5vw), 4.25rem); --ix-mk: 3.25rem; --ix-dot: 11px; }
  html[lang="ar"] .index { --ix-size: clamp(1.75rem, min(var(--ix-vh) * 4.4, 4.4vw), 3.5rem); }
  .index__mark { inline-size: calc(var(--ix-mk) - var(--s-5)); }
}

/* ── motion: one wipe down from the band, the rows rise 50 ms apart — then stillness ── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .index {
    transition: clip-path var(--t-3) var(--e-dash), visibility 0s linear var(--t-3);
  }
  html:not(.is-calm) .index.is-open {
    transition: clip-path var(--t-3) var(--e-dash), visibility 0s;
  }
  /* closed: rows wait below their line (they are reset only after the wipe has closed) */
  html:not(.is-calm) .index__row { transform: translateY(104%); transition: transform 0s linear var(--t-3), opacity var(--t-2) var(--e-std); }
  html:not(.is-calm) .index.is-open .index__row {
    transform: none;
    transition: transform var(--t-4) var(--e-dash) calc(100ms + var(--i, 0) * 50ms), opacity var(--t-2) var(--e-std);
  }
  html:not(.is-calm) .index__item::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0s linear var(--t-3); }
  html[dir="rtl"]:not(.is-calm) .index__item::before { transform-origin: 100% 50%; }
  html:not(.is-calm) .index.is-open .index__item::before { transform: none; transition: transform var(--t-4) var(--e-dash) calc(var(--i, 0) * 50ms); }
  html:not(.is-calm) .index__foot { opacity: 0; transition: opacity 0s linear var(--t-3); }
  html:not(.is-calm) .index.is-open .index__foot { opacity: 1; transition: opacity var(--t-3) var(--e-std) 480ms; }

  html:not(.is-calm) .index__name { transition: transform var(--t-3) var(--e-dash), color var(--t-2) var(--e-std); }
  html:not(.is-calm) .index__mark::before { transition: transform var(--t-2) var(--e-dash); }
  html:not(.is-calm) .index__close { 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) .index__wa-word, html:not(.is-calm) .index__lang { transition: background-size var(--t-2) var(--e-dash); }
  html:not(.is-calm) .index__close-ico { transition: transform var(--t-3) var(--e-dash); }
}