/*
 * Styles for things the original site did not have.
 *
 * site.css is the compiled stylesheet carried over from the handed-over build
 * and is kept byte-for-byte for pixel fidelity — see CLAUDE.md. Anything new
 * goes here instead, loaded after it.
 */

/* Board portraits. The original board grid was type-only; the client supplied
   photographs after handover. Kept deliberately small so the grid's proportions
   and its large-type hierarchy are unchanged. */
.board-portrait {
    /* Slightly wider than the 3:4 version this replaced, so a circle carries
       about the same visual weight as the taller rectangle did. */
    width: clamp(96px, 9.5vw, 128px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-top: 30px;
    overflow: hidden;
    background: #eef1f5;
}

.board-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    /* The files are already cropped square and centred on the face, so cover
       has nothing left to trim - see README, "Images". */
    object-fit: cover;
    object-position: center;
}

/* The name normally carries the spacing under the index number. With a
   portrait in between it would double up. */
.board-grid .board-portrait + h3 {
    margin-top: 26px;
}

/* Board biographies. Supplied by the client after handover; the original site
   had none, so the grid had nothing between the job title and the contact
   block. .board-contact keeps its margin-top:auto, so it stays pinned to the
   bottom of the card however long a biography runs. */
.board-bio {
    color: #5f6c84;
    margin: 20px 0 34px;
    font-size: .92rem;
    line-height: 1.75;
}

/* Biographies make the cards much taller, and two narrow columns of long prose
   is a poor read. One column from here down. */
@media (max-width: 1100px) {
    .board-grid {
        grid-template-columns: 1fr;
    }
}

/* The chairman's name on the Leadership hero, on one line.
 *
 * site.css sizes this heading at clamp(5rem, 9vw, 10rem) with -.07em tracking,
 * chosen for the original two-line "NAMIR" / "EL AKABI" split. On one line that
 * overflows, and body has overflow-x:hidden, so it would be clipped rather than
 * scrollable.
 *
 * The binding case is the two-column layout above 1120px, where the copy column
 * is 1.2fr of 2fr less clamp(35px,8vw,135px) of padding either side - about
 * 493px of usable width at 1121px. Measured widths per 1px of font-size,
 * including tracking: 7.4 for "NAMIR EL AKABI" in Arial Narrow, 9.3 if that
 * font is missing and it falls back to Arial, and 7.5-9.3 for the Arabic
 * depending on which face the system resolves. 5.2vw holds for all of them.
 *
 * It is deliberately allowed to wrap rather than nowrap: a wrapped name reads
 * fine now the line-height is fixed, whereas a clipped one does not.
 */
.leadership-page h1 {
    font-size: clamp(2.2rem, 5.2vw, 6.5rem);
}

/* Arial Narrow ships on Windows and macOS but not on Linux or Android, where
   the original stack falls back to full-width Arial. Naming the condensed faces
   those platforms do have keeps the name on one line there too. */
.leadership-page h1 {
    font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow",
                 "Helvetica Neue", Arial, sans-serif;
    font-stretch: 75%;
}

/* Sized and spaced for Arabic; tracking is reset site-wide further down. */
.ar-site .leadership-page h1 {
    line-height: 1.15;

    /* Sized a step below the Latin heading. The condensed fallbacks above carry
       no Arabic glyphs, so Arabic resolves to whatever face the system has -
       Tahoma on Windows, Noto on Linux and Android - all of them appreciably
       wider than Arial Narrow. 4.6vw keeps the name on one line in the widest
       of them. */
    font-size: clamp(2rem, 4.6vw, 6rem);
}

/* ---------------------------------------------------------------------------
 * Arabic typography
 *
 * site.css tracks type for Latin display faces: 52 letter-spacing declarations,
 * 42 of them positive (+.06em to +.22em on eyebrows, nav, labels and buttons)
 * and 11 negative (-.04em to -.07em on headings).
 *
 * Both are wrong for Arabic, which is a joining script. Positive tracking pulls
 * connected letterforms apart, which is the more damaging of the two - words
 * visibly come unstuck. Negative tracking crushes them together. There is no
 * value of letter-spacing that improves Arabic, so it is reset wherever the
 * Arabic site renders.
 *
 * The cost is that Latin fragments inside Arabic pages - the EN/AR switch,
 * AMWAJ.COM, email addresses - lose their tracking too. That is a far smaller
 * price than broken Arabic, and CSS cannot tell the two apart.
 * ------------------------------------------------------------------------- */
.ar-site,
.ar-site * {
    letter-spacing: normal;
}

/* Display headings are set from .78 to .95 line-height, which suits uppercase
 * Latin - no descenders, flat caps. Arabic has both ascenders and descenders
 * and gets clipped, or overlaps outright once a heading wraps. */
.ar-site h1,
.ar-site h2,
.ar-site .leadership-copy blockquote,
.ar-site .legacy-cta h2,
.ar-site .sector-row-copy h2 {
    line-height: 1.2;
}

.ar-site h3,
.ar-site .stats-grid strong,
.ar-site .project-fact-grid strong {
    line-height: 1.3;
}