.page { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 100dvh; }
.scene { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100dvh; overflow: hidden; background: #071322; }
.content, .terminal { grid-column: 2; grid-row: 1; min-width: 0; }
.content { --pad-left: clamp(1.25rem, 7vw, 7.5rem); --pad-right: var(--gutter); --pad-start: var(--pad-left); --pad-end: var(--pad-right); padding: 0 var(--pad-right) 0 var(--pad-left); } /* the column fills its half; prose is capped by --measure, figures by --figure */
/* a right-to-left page keeps its frame, the scene on the left and the scrollbar on the right (Firefox follows the body), and runs right to left in what is read */
:root:dir(rtl), body:dir(rtl) { direction: ltr; }
body:dir(rtl) > :not(.page), .content:dir(rtl) { direction: rtl; }
.content:dir(rtl) { --pad-start: var(--pad-right); --pad-end: var(--pad-left); }

.nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.5rem; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--pad-left)); padding: 0 var(--gutter) 0 var(--pad-left); font-weight: 500; font-size: 0.95rem; background: var(--surface); --reach: 46.5rem; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; pointer-events: none; background: linear-gradient(var(--surface), transparent); }
.nav a, .nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 300ms ease; }
.nav a:hover, .nav button:hover, .nav a[aria-current] { text-decoration-color: var(--accent); }
.nav a, .nav button { white-space: nowrap; }
.nav__brief { display: none; }
.mark { flex: none; margin-inline: calc(-0.4 * var(--pad-start)) max(0px, 100% - var(--reach)); padding: 0; } /* the mark hangs into the margin before the column edge the words start from */
.mark img { width: 40px; height: 48px; }
.nav__terminal { background: none; border: 0; cursor: pointer; gap: 0.4rem; align-items: baseline; font-family: inherit; }
.nav__glyph { font-family: var(--mono); font-size: 0.85rem; }
/* the language menu ends the nav: this page's language as a short code, every language in its own script below it */
.langs { position: relative; }
.langs summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; cursor: pointer; list-style: none; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 300ms ease; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs[open] summary { text-decoration-color: var(--accent); }
.langs__caret { width: 0.7em; height: 0.7em; transform: rotate(-90deg); transition: transform 200ms ease; }
.langs[open] .langs__caret { transform: rotate(90deg); }
.langs__list { position: absolute; z-index: 1; top: 100%; inset-inline-end: 0; min-width: 9rem; margin: 0; padding: 0.3rem 0; list-style: none; background: var(--surface); border: 1px solid var(--hairline); }
.langs__list li { font: inherit; }
.nav .langs__list a, .langs__list span { display: flex; align-items: center; min-height: 44px; padding: 0 1rem; }
.langs__list span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .langs__caret { transition: none; } }

/* the hero fits the first view: the crowd portrait on the left looks across at the name and role on the right, and the line runs beneath the pair.
   The hero is a size container, so the portrait's width and the name's size follow the column (cqw), never the window: the two always share the row. */
.hero { container-type: inline-size; min-height: calc(100dvh - 4.5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(1.25rem, 5cqw, 3rem); row-gap: 2.2rem; align-items: center; align-content: center; padding: 2vh 0 7vh; }
.hero__text { grid-row: 1; grid-column: 2; min-width: 0; }
.hero h1 { font-size: clamp(2.25rem, 12cqw, 5.25rem); max-width: none; margin-bottom: 0.9rem; }
.role { font-family: var(--font); font-size: clamp(1rem, 2.3cqw, 1.25rem); font-weight: 500; max-width: 34ch; }
/* a white-ground render multiplied into the surface: it is painted on the page, nothing to click, drag or select.
   Its width is a share of the column, capped by the window height on short wide screens so the row still fits the first view. */
.hero__portrait { grid-row: 1; grid-column: 1; width: min(48cqw, calc((100dvh - 18rem) * 0.8)); margin: 0; }
.hero__portrait img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.line { grid-row: 2; grid-column: 1 / -1; color: var(--ink-2); max-width: 44ch; font-size: 1.2rem; }
/* the pair never mirrors: the portrait keeps the left, still looking at the name, which keeps the right, where Arabic starts */
.hero:dir(rtl) { direction: ltr; }
.hero:dir(rtl) > :is(.hero__text, .line) { direction: rtl; }
.hero:dir(rtl) > .line { justify-self: end; }

.chapter { padding: 6rem 0 2rem; }
.chapter h2, .end h2 { margin-bottom: 1.4rem; }
html { scroll-padding-top: 5.5rem; }
.end { padding: 6rem 0 5rem; }

/* stacked, the page reads top down: the nav over the top, the scene band under it, then the column, which fades in below the band */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: 3.6rem; }
  .scene { grid-column: 1; grid-row: 1; top: 3.6rem; height: 40dvh; z-index: 1; }
  .content, .terminal { grid-column: 1; grid-row: 2; }
  /* clipped at the screen's edges, so a dealt print reaching past them never widens the page and lets the pinned nav drift */
  .content { --pad-left: 1.25rem; --pad-right: 1.25rem; padding: 0 1.25rem; max-width: none; overflow-x: clip; }
  .content::before { content: ""; display: block; position: sticky; top: calc(3.6rem + 40dvh); z-index: 2; height: 0.75rem; margin: 0 -1.25rem -0.75rem; pointer-events: none; background: linear-gradient(var(--surface), transparent); }
  html { scroll-padding-top: calc(40dvh + 4.4rem); }
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 2; height: 3.6rem; gap: 1.1rem; margin: 0; padding: 0 1.25rem; font-size: 0.9rem }
  .nav::after { display: none; }
  .mark img { width: 32px; height: 38px; }
  /* the same pair on phones, starting under the scene band; 48cqw of the column keeps the portrait's size independent of the address bar */
  .hero { min-height: calc(60dvh - 3.6rem); align-content: start; row-gap: 1.6rem; padding: 1.25rem 0 3rem; }
  .chapter { padding: 4rem 0 1rem; }
}
/* the nav keeps one line at every width and its mark whole, and below its widest step the room left spreads between the items instead of
   pooling by the mark. As the column narrows the long labels and the terminal's word give way first, then the spacing and the type, then
   With others and the language caret; on phones the mark, With others, the caret and the terminal button go too (Contact still opens it).
   Each language steps down at the widths its own words need */
@media (max-width: 600px) { .nav__word { display: none; } .nav { gap: 0.5rem; font-size: 0.88rem; } .nav .mark { display: none; } }
@media (max-width: 600px) { .nav .nav__others, .nav .nav__terminal, .langs__caret { display: none; } }
@media (max-width: 359px) { .nav { font-size: 0.76rem; } }

html[lang="fr"] .nav { --reach: 48rem; }
html[lang="ar"] .nav { --reach: 42rem; }

@media (min-width: 901px) and (max-width: 1893px), (max-width: 783px) { html[lang="en"] .nav__full { display: none; } html[lang="en"] .nav__brief { display: inline; } }
@media (min-width: 901px) and (max-width: 1646px), (max-width: 675px) { html[lang="en"] .nav__word { display: none; } }
@media (min-width: 901px) and (max-width: 1646px) { html[lang="en"] .nav { gap: 1.3rem; } }
@media (min-width: 901px) and (max-width: 1406px) { html[lang="en"] .nav { gap: 1.1rem; } }
@media (min-width: 901px) and (max-width: 1340px) { html[lang="en"] .nav { gap: 0.85rem; font-size: 0.86rem; } html[lang="en"] .mark img { width: 34px; height: 41px; } }
@media (min-width: 901px) and (max-width: 1167px) { html[lang="en"] .nav .nav__others { display: none; } }
@media (min-width: 901px) and (max-width: 1019px) { html[lang="en"] .nav { gap: 0.6rem; } html[lang="en"] .langs__caret { display: none; } }

@media (min-width: 901px) and (max-width: 1940px), (max-width: 806px) { html[lang="fr"] .nav__full { display: none; } html[lang="fr"] .nav__brief { display: inline; } }
@media (min-width: 901px) and (max-width: 1796px), (max-width: 738px) { html[lang="fr"] .nav__word { display: none; } }
@media (min-width: 901px) and (max-width: 1796px) { html[lang="fr"] .nav { gap: 1.3rem; } }
@media (min-width: 901px) and (max-width: 1556px) { html[lang="fr"] .nav { gap: 1.1rem; } }
@media (min-width: 901px) and (max-width: 1491px) { html[lang="fr"] .nav { gap: 0.85rem; font-size: 0.86rem; } html[lang="fr"] .mark img { width: 34px; height: 41px; } }
@media (min-width: 901px) and (max-width: 1303px), (min-width: 601px) and (max-width: 665px) { html[lang="fr"] .nav .nav__others { display: none; } }
@media (min-width: 901px) and (max-width: 1167px) { html[lang="fr"] .nav { gap: 0.6rem; } html[lang="fr"] .langs__caret { display: none; } }
/* a narrower cut of the face only where the French has nothing left to give */
@media (max-width: 420px), (min-width: 901px) and (max-width: 981px) { html[lang="fr"] .nav { font-variation-settings: "wdth" 80; } }
@media (min-width: 388px) and (max-width: 420px), (min-width: 982px) and (max-width: 1054px) { html[lang="fr"] .nav { font-variation-settings: "wdth" 90; } }
@media (max-width: 359px) { html[lang="fr"] .nav { font-variation-settings: "wdth" 75; } }

@media (min-width: 901px) and (max-width: 1702px), (max-width: 692px) { html[lang="ar"] .nav__full { display: none; } html[lang="ar"] .nav__brief { display: inline; } }
@media (min-width: 901px) and (max-width: 1591px), (max-width: 646px) { html[lang="ar"] .nav__word { display: none; } }
@media (min-width: 901px) and (max-width: 1591px) { html[lang="ar"] .nav { gap: 1.3rem; } }
@media (min-width: 901px) and (max-width: 1368px) { html[lang="ar"] .nav { gap: 1.1rem; } }
@media (min-width: 901px) and (max-width: 1301px) { html[lang="ar"] .nav { gap: 0.85rem; font-size: 0.86rem; } html[lang="ar"] .mark img { width: 34px; height: 41px; } }
@media (min-width: 901px) and (max-width: 1132px) { html[lang="ar"] .nav .nav__others { display: none; } }
@media (min-width: 901px) and (max-width: 960px) { html[lang="ar"] .nav { gap: 0.6rem; } html[lang="ar"] .langs__caret { display: none; } }