/* ==========================================================================
   H7G.com Ver 2 — Reset + base
   Every rule here must survive an RTL <-> LTR flip: use logical properties
   (inline-start/end, margin-inline, padding-block), never left/right.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Language-specific fonts, driven by each document's own lang attribute so
   all three HTML files can share one stylesheet. */
:lang(en) { --font-body: var(--font-en); --font-display: var(--font-en-display); }
:lang(ar) { --font-body: var(--font-ar); --font-display: var(--font-ar-display); }
:lang(zh) { --font-body: var(--font-zh); --font-display: var(--font-zh-display); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { max-width: 68ch; text-wrap: pretty; }

a { color: inherit; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }


/* --- Focus -------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-block);
}

/* --- Utilities ----------------------------------------------------------- */
/* Nobody sees this text, so it must not pull a typeface of its own. Left on the
   display face at weight 700, the hidden <h1> alone was fetching Playfair 700
   on the English page and Amiri 700 — 100 KB — on the Arabic one. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Site header ----------------------------------------------------------
   Brand mark and main menu, from section 02 onward. Section 01 has no chrome
   by design.

   It is `sticky` and it sits after the opening in the document, which is the
   whole trick: its flow position is a screen below the fold of section 01, so
   it is not on screen there, and from section 02 down it stays pinned to the
   top of the frame. No scroll listener, no observer, nothing to keep in sync —
   and nothing that a preview surface which never dispatches scroll events can
   hide from a review.

   The mark lands on the coordinates section 01 puts its own on (same offsets,
   same width, same breakpoints), so arriving at section 02 reads as the menu
   appearing around a mark that never moved.

   The band takes no pointer events and only its children do: while it is
   pinned it lies over the section below, and a 160px invisible bar across the
   top of every section would otherwise eat the first card's hover.

   Nothing here may carry a transform, a filter or `will-change`. Any of them
   would make this element the containing block for the menu panel, which is
   `position: fixed` and has to cover the viewport.
   -------------------------------------------------------------------------- */
.site {
  position: sticky;
  inset-block-start: 0;
  /* Above .sound and .lang, because the small-screen menu panel is a child of
     this element and has to cover them. */
  z-index: var(--z-overlay);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  /* The language group is fixed in the end corner (~197px wide with THREE
     languages — فارسی was removed again 2026-09-06 at the user's call);
     reserving it here means the centred menu centres in the space that
     actually exists. Seven items (2026-09-01) no longer clear it
     frame-centred — EN measures ~985px. */
  padding-inline: var(--gutter) calc(var(--gutter) + 205px);
  padding-block: var(--space-8) var(--space-6);

  pointer-events: none;
}

.site > * { pointer-events: auto; }

/* The band is opaque, not a wash. A translucent header let the section slide
   visibly under the menu as you scroll, and cards passing behind the words is
   not a look — it reads as a mistake. Solid for its whole height, then a short
   fade at the foot so the edge is not a hard line drawn across the artwork,
   and a blur so whatever shows through that fade stays soft.

   Its colour is the page's own, so before the header pins — where it simply
   sits above section 02 — there is nothing to see. */
.site::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: calc(100% + var(--space-8));
  z-index: -1;
  backdrop-filter: blur(10px);
  /* Short fade: long enough not to draw a hard line across the artwork, short
     enough that a card's year is either behind the bar or in front of it, never
     sliced in half by it. */
  background: linear-gradient(
    to bottom,
    var(--c-bg) 0%,
    var(--c-bg) calc(100% - 18px),
    rgb(10 14 20 / 0) 100%
  );
}

.site__brand {
  grid-column: 1;
  justify-self: start;
  display: block;
  width: 104px;
}

.site__nav { grid-column: 2; }

.site__nav ul {
  display: flex;
  align-items: center;
  /* Tuned against the language group, which is fixed in the opposite corner:
     the menu is centred in the whole frame, so at 1200px the two are 8px from
     touching. Anything looser and they collide before the burger takes over. */
  gap: clamp(14px, 1.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Short words still need a fingertip. "أعمالنا" sets 33px wide on the Arabic
     page, which is a fine word and an undersized target. */
  min-width: 44px;
  color: var(--c-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.site__nav a:hover,
.site__nav a:focus-visible { color: var(--c-text); }

/* The gold rule marks both intent and arrival: it wipes in under the cursor,
   and stays under whichever section is on screen. */
.site__nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 0;
  height: 2px;
  background: var(--c-gold);
  scale: 0 1;
  transition: scale var(--dur-base) var(--ease-out);
}

.site__nav a:hover::after,
.site__nav a:focus-visible::after { scale: 1 1; }

.site__nav [aria-current="true"] { color: var(--c-text); }
.site__nav [aria-current="true"]::after { scale: 1 1; }

.site__burger {
  grid-column: 3;
  justify-self: end;
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: none;
  border: 0;
  color: var(--c-text);
}

/* Three bars from one element: the middle is the box, the outer two its
   pseudo-elements. Open, they fold into a cross. */
.site__burger span,
.site__burger span::before,
.site__burger span::after {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.site__burger span { position: relative; }

.site__burger span::before,
.site__burger span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.site__burger span::before { transform: translateY(-8px); }
.site__burger span::after { transform: translateY(8px); }

.site.is-open .site__burger span { background: transparent; }
.site.is-open .site__burger span::before { transform: rotate(45deg); }
.site.is-open .site__burger span::after { transform: rotate(-45deg); }

/* --- Small screens: the menu becomes a panel ------------------------------
   Seven items (the 2026-09-01 relabelling) measure ~985px in English and
   clear the three-language pill from 1440 up (فارسی briefly pushed this to
   1500; it was removed 2026-09-06); below that the row becomes a panel.
   Arabic and Chinese rows are narrower and would fit sooner, but the
   breakpoint stays shared so the documents behave identically. */
@media (max-width: 1439px) {
  :root { --header-h: 128px; }

  .site__brand { width: 72px; }
  .site__burger { display: grid; }

  .site__nav {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--space-12);
    background: rgb(4 7 11 / 0.96);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-slow) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  .site.is-open .site__nav {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .site__nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .site__nav a {
    font-size: var(--text-xl);
    letter-spacing: 0.1em;
  }

  .site__nav a::after { inset-block-end: 2px; }

}

@media (orientation: portrait) and (max-width: 767px) {
  :root { --header-h: 100px; }

  .site { padding-block: var(--space-6) var(--space-4); }
  .site__brand { width: 52px; }
}

@media (max-height: 480px) {
  :root { --header-h: 92px; }

  .site { padding-block: var(--space-3); }
  .site__brand { width: 56px; }
}

/* --- Language switch -----------------------------------------------------
   Three languages, so this is a small group rather than a single toggle. Each
   language is named in its own script, and the current one is plain text — a
   link to the page you are already on is noise.

   Placeholder styling: it gets absorbed into the header when that section is
   designed. */
.lang {
  position: fixed;
  /* Centred on the header's band, so it lines up with the menu once the header
     appears — and with the brand mark before that, since section 01 puts its
     mark on the same band. */
  inset-block-start: calc((var(--header-h) - 44px) / 2);
  inset-inline-end: var(--gutter);
  /* Above the header, not under it. The header's band is opaque so the section
     cannot show through it — and neither could this, which is how it went
     missing from section 02 the moment the band stopped being a wash. It is
     the header's right-hand cluster in every way except the DOM. */
  z-index: calc(var(--z-overlay) + 1);
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
  background: rgb(18 24 33 / 0.72);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  font-size: var(--text-sm);
  /* No direction override here on purpose. `direction` on this element would
     also flip how its own inset-inline-end resolves, landing the group in the
     same corner as the brand mark on the Arabic page. Letting it inherit keeps
     the two at opposite corners in every language. */
}

.lang > * {
  min-height: 44px;
  /* And 44px wide: at --text-xs the two short names (عربي، 中文) set 40–42px
     boxes — under the finger floor. The header reserves 205px for this group,
     which still covers the ~6px this adds at small sizes. */
  min-inline-size: 44px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.lang a:hover,
.lang a:focus-visible { color: var(--c-text); }

/* The one place it has to give way: the small-screen menu panel covers the
   frame, and a language pill floating over it would be the only thing on the
   page not part of that menu. */
body.menu-open .lang {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

.lang [aria-current="page"] {
  color: var(--c-gold-soft);
  font-weight: var(--weight-medium);
}

/* Hairline separators, drawn between items only. */
.lang > * + * {
  box-shadow: inset 1px 0 0 var(--c-border);
}

@media (max-width: 480px) {
  .lang {
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    font-size: var(--text-xs);
  }
  /* Still 44px tall — the type shrinks on a small screen, the target must not. */
  .lang > * {
    min-height: 44px;
    padding-inline: var(--space-2);
  }
}

/* --- Sound toggle --------------------------------------------------------
   Sound stays off until it is asked for — browsers require a gesture before
   audible playback anyway, and a site that starts talking on arrival is rude.
   Sits in the opposite corner from the language group.

   It lives inside the opening's sticky stage rather than fixed to the viewport,
   which is where `sound.js` puts the music too: `level()` returns 0 once the
   opening has left the frame, so from section 02 down the track is silent and
   a control for it is a button that does nothing — while still sitting on top
   of the cards. Now it rides section 01's frame and leaves with it. Below the
   arrival veil (z 6) on purpose, so it surfaces out of the black with the rest
   of the world instead of being the one thing already there. */
.sound {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--gutter);
  z-index: 5;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  background: rgb(18 24 33 / 0.72);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  color: var(--c-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}

.sound:hover,
.sound:focus-visible { color: var(--c-text); }
.sound[aria-pressed="true"] { color: var(--c-gold-soft); }

.sound svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

/* One icon, two states: the waves belong to sound being on, the slash to it
   being off. */
.sound .wave { opacity: 0; }
.sound .slash { opacity: 1; }
.sound[aria-pressed="true"] .wave { opacity: 1; }
.sound[aria-pressed="true"] .slash { opacity: 0; }

/* Icon only on a small screen, but never smaller than a fingertip — the
   aria-label carries the meaning the hidden text used to. */
@media (max-width: 480px) {
  .sound {
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--space-3);
    justify-content: center;
  }
  .sound .label { display: none; }
}