/* ==========================================================================
   typography.css — the families and the type scale.

   Grotesque × sans × mono. All three are visible on every page, doing three
   jobs that never overlap:

     · Archivo — display, on TWO axes: weight 400-900 and width 62-125%. The
       comps set the academy's name as a very heavy, very WIDE grotesque running
       the full measure, and that headline is the composition; the width axis is
       the reason this family is here rather than any other, because 112% is a
       register a static face cannot reach without shipping a second file. Both
       stops come from tokens, so the whole display voice moves from one place.
       The 400 stop of the weight axis is available inside a headline, which is
       where the emphasis that used to be carried by a serif italic now lives:
       one word dropped from 800 to 400 inside an otherwise black line.
     · Instrument Sans — prose, 400-600, and nothing else. A humanist beside a
       grotesque reads as a deliberate pair; two grotesques read as a mistake.
     · Spline Sans Mono — every label, eyebrow, ordinal, figure and caption.
       If it is interface rather than language, it is mono.

   Arabic takes IBM Plex Sans Arabic for both roles — 600 for display, 400 for
   prose. The Naskh serif that used to carry the Arabic display voice was
   retired with the Latin serif: pairing a heavy grotesque with a Naskh serif
   would make the Arabic page a different design rather than the same design in
   another script.

   All self-hosted under /fonts, all font-display: swap, all subset by
   unicode-range, so a Latin reader never downloads the Arabic cuts and an
   Arabic reader never downloads Archivo. Provenance and licences are in
   wwwroot/fonts/README.md.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/spline-mono-400-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/spline-mono-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------- IBM Plex Sans Arabic
   Both Arabic roles. The Latin cuts are loaded too, and deliberately: an Arabic
   headline on this site contains Latin brand names — MatchAI, UGC, Skool — and
   without them those words would fall to a system face mid-headline. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-arabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-arabic-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-arabic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-arabic-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-arabic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-arabic-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113;
}

/* ==========================================================================
   The scale

   ONE ground and one exception. The paper carries --ink, --ink-soft and
   --ink-faint, all of which clear WCAG AA on every lift of it. The exception
   is an INK FLOOD — the footer, the MatchAI island, an icon tile, the phone —
   where the ink family is invisible and the paper family takes over. That
   inversion is `.section--ink` and `.on-ink`, and it is written once, at the
   bottom of this file, rather than as a colour override per component.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
}

/* --------------------------------------------------------------- display
   800 and 112%, both from tokens. Archivo's weight axis runs to 900 and its
   width axis to 125%, and neither end is spent: the drama comes from size and
   from tracking pulled tight, and a headline set at the absolute end of an
   axis has nowhere left to go when something on the page genuinely needs to be
   heavier or wider. */
.text-hero,
.text-display,
.text-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--display-width);
  text-wrap: balance;
  /* Long compounds — "Schuelerergebnisse", "İçerik Üreticileri" — must break
     rather than push the layout wider than the viewport. */
  overflow-wrap: break-word;
}

.text-hero {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.text-title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
}

/* The comps set the academy's name in capitals and nothing else on the page in
   them, which is what keeps it a signature rather than a house style. Applied
   as its own class so a headline that reads badly in capitals — a long German
   compound, an Arabic line, which has no case at all — simply does not carry
   it. */
.text-caps {
  text-transform: uppercase;
  letter-spacing: -0.028em;
}

[lang="ar"] .text-caps {
  text-transform: none;
  letter-spacing: 0;
}

/* The typographic signature: one word inside a black headline dropped to the
   400 stop of the same axis. A weight contrast inside one family is the
   grotesque's own way of emphasising — it is what the face is FOR — and it
   survives in Arabic, where the 600/400 pair does the same job at a smaller
   interval. */
.text-em {
  font-weight: var(--weight-body);
}

[lang="ar"] .text-em {
  font-weight: var(--weight-body);
}

/* The same device, used at most once per headline, where the emphasised word
   should also step back in strength rather than only in weight. */
.text-em--accent {
  font-weight: var(--weight-body);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ prose */
.lead {
  font-size: var(--text-title);
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-inline-size: 46ch;
  text-wrap: pretty;
}

.lead--wide { max-inline-size: 58ch; }

/* Never a full-width paragraph: 65ch is the ceiling. */
.prose { max-inline-size: 65ch; }
.prose > * + * { margin-block-start: var(--space-s); }

/* A link inside prose cannot be marked with a colour — there is no second
   colour to mark it with — so it is marked the way print marks it: a rule
   under the word, at the ink's own strength. */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------------- meta
   Mono, uppercase, tracked out. Every label, ordinal, level, figure and
   caption on this site is set in it — the third leg of the contrast, and the
   one that makes the other two read as deliberate. */
.text-meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- the eyebrow
   Every main section opens with a mono eyebrow carrying its own ordinal:
   `01 — AKADEMİ`. The home page IS a sequence, so the number is information
   rather than ornament, and the index rule down the start edge of the section
   (components.css, .index-line) is anchored to it.

   The star is the site's one ornament and it is drawn rather than typed, so it
   can never fall back to a system glyph. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow__ord {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.eyebrow__dash {
  inline-size: var(--space-m);
  block-size: 1px;
  background-color: var(--line-strong);
  flex: none;
}

/* A role or a caption set in the eyebrow face but with no ordinal before it. */
.eyebrow--plain { display: block; }

/* Arabic keeps Latin digits throughout this site — the seeded copy is written
   that way — so they need explicit isolation inside RTL runs. */
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.text-soft { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.text-accent { color: var(--ink); font-weight: var(--weight-strong); }

/* ---------------------------------------------------------- ON AN INK FLOOD
   The one inversion, written once. Anything inside an ink block takes the
   paper family: the three ink strengths measure between 1.0 and 2.4:1 on
   #152717 and would be invisible there.

   Scoped to the two block classes rather than declared per component, so a
   card moved into the footer or into the MatchAI island inverts by being
   there — which is the only version of this rule that survives a layout
   change. */
.section--ink,
.on-ink {
  color: var(--ink-inverse);
}

.section--ink .text-meta,
.section--ink .eyebrow,
.section--ink .text-faint,
.on-ink .text-meta,
.on-ink .eyebrow,
.on-ink .text-faint { color: var(--ink-inverse-faint); }

.section--ink .text-soft,
.on-ink .text-soft { color: var(--ink-inverse); }

.section--ink .eyebrow__ord,
.on-ink .eyebrow__ord { color: var(--ink-inverse); }

.section--ink .eyebrow__dash,
.on-ink .eyebrow__dash { background-color: var(--line-inverse); }

.section--ink .lead,
.on-ink .lead { color: var(--ink-inverse); }

.section--ink .prose a,
.on-ink .prose a { color: var(--ink-inverse); }

.section--ink .text-link,
.on-ink .text-link { color: var(--ink-inverse); }