/* Shared header + menu, used by the landing page and the legal documents.
   One copy so the three pages can't drift apart. The .top row itself stays
   per-page: the landing nests it directly, the legal pages nest it inside
   .wrap, and they carry different token values for --wrap.

   Every token below is read, never defined here — each page supplies
   --surface, --line, --ink, --muted, --accent, --rule, --display, --wrap and
   --ease. The names are deliberately about ROLE rather than colour: this file
   used to ask for --night, which stopped describing anything the day the
   landing page turned light. */

body.locked{overflow:hidden}

/* Sticky so the menu button stays reachable — a burger that scrolls away
   is worse than no burger. The blur layer is full-bleed; .top stays the
   constrained row so the footer can reuse it unchanged. */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.topbar.stuck{border-bottom-color:var(--line)}
/* The bar sits ABOVE the open panel so the close button stays reachable, and
   its translucent fill was tinting a paler rectangle across the panel's top
   edge. With the panel open there is nothing to separate the bar from, so it
   carries no fill of its own. */
.menu-open .topbar{
  background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ─── burger ────────────────────────────────────────────────────────────── */
.burger{
  margin-inline-start:auto;width:44px;height:44px;flex:none;
  display:grid;place-content:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .34s var(--ease),width .34s var(--ease);
}
.burger span:last-child{width:16px;margin-inline-start:auto}
.burger:hover span:last-child{width:24px}
/* open → the two bars cross */
.menu-open .burger span:first-child{transform:translateY(4px) rotate(-45deg)}
.menu-open .burger span:last-child{width:24px;transform:translateY(-4px) rotate(45deg)}

/* ─── menu panel ────────────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:50;
  /* Mixed toward the ink rather than toward black, so the panel reads as a
     near-opaque sheet of whatever the page is made of — inked paper on the
     landing, deepened night on the legal documents. */
  background:color-mix(in srgb,var(--surface) 97%,var(--ink));
  display:grid;align-content:center;
  /* visibility also drops the links from tab order while closed. It must
     flip to visible IMMEDIATELY on open or the links aren't focusable yet
     when focus() runs; on close it waits out the fade instead. */
  opacity:0;visibility:hidden;
  /* pointer-events is the safety net: a transparent full-screen overlay that
     failed to go hidden would silently swallow every click on the page. */
  pointer-events:none;
  transition:opacity .32s var(--ease),visibility 0s linear .32s;
}
.menu-open .menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .32s var(--ease),visibility 0s;
}
/* aligned to the same right gutter as the page, not floated in the middle */
.menu__in{
  display:flex;flex-direction:column;gap:6px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px;
}
.menu a{
  font-family:var(--display),sans-serif;font-weight:700;
  font-size:clamp(30px,7vw,54px);line-height:1.25;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);
  display:block;padding-block:4px;
}
.menu a span{
  display:inline-block;
  transform:translateY(18px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),color .2s;
}
.menu-open .menu a span{transform:none;opacity:1}
/* Covers both layouts: the landing has 3 section links, the legal pages add
   الرئيسية for 4. Positions holding the divider simply match no <a>. */
.menu a:nth-child(1) span{transition-delay:.06s}
.menu a:nth-child(2) span{transition-delay:.12s}
.menu a:nth-child(3) span{transition-delay:.18s}
.menu a:nth-child(4) span{transition-delay:.24s}
.menu a:nth-child(5) span{transition-delay:.28s}
.menu a:nth-child(6) span{transition-delay:.32s}
.menu a:nth-child(7) span{transition-delay:.36s}
.menu a:hover span{color:var(--accent)}
/* needs to outrank `.menu a`, which is more specific than a lone class */
.menu a.menu__minor{font-family:Plex,sans-serif;font-size:clamp(15px,2.4vw,19px);font-weight:600;letter-spacing:0}
.menu a.menu__minor span{color:var(--muted)}
.menu a.menu__minor:hover span{color:var(--ink)}
/* Was a run of tatweel set in the display face — a glyph doing a rule's job,
   which broke the moment the display face changed. It is a rule now: same
   weight on the page, no dependency on what any font happens to draw. */
.menu__rule{
  height:3px;background:var(--rule);
  margin-block:26px 20px;max-width:180px;
  -webkit-mask-image:linear-gradient(to left,#000 40%,transparent 100%);
          mask-image:linear-gradient(to left,#000 40%,transparent 100%);
}
/* The brand lockup is a link home on the legal pages; on the landing it is
   already home, so it stays plain text there. */
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}