/* ==========================================================================
   Tel Aviv: Brutalist carries the display sizes, Modernist carries everything
   meant to be read. Both cover Hebrew and Latin, so one family serves the
   whole bilingual site.
   ========================================================================== */

@font-face {
  font-family: "TA";
  src: url("../fonts/TelAviv-Modernist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TA";
  src: url("../fonts/TelAviv-Modernist-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "TA Display";
  src: url("../fonts/TelAviv-Brutalist-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "TA Display";
  src: url("../fonts/TelAviv-Brutalist-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

/* Every Tel Aviv variant draws lowercase Latin as capitals: a and A share one
   glyph in all eleven of them. That is fine for a Hebrew site and for short
   English labels, where caps read as a choice. It is not fine for English
   running text, which comes out shouting and unreadable. So the English side
   keeps Tel Aviv for display and takes Polin, which has true lowercase, for
   anything anyone has to actually read. */
@font-face {
  font-family: "NP Latin";
  src: url("../fonts/Polin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NP Latin";
  src: url("../fonts/Polin-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "NP Latin";
  src: url("../fonts/Polin-Extrabold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --np-primary: #284EAE;
  --np-royal:   #365FC4;
  --np-ink:     #173B63;
  --np-text:    #102A43;
  --np-mist:    #E8EEF7;
  --np-white:   #FFFFFF;

  /* Two supporting values the palette implies but never named: the black the
     dark sections actually sit on, and the warm off-white that keeps the light
     sections from reading as a blank browser page. */
  --np-night:   #0A1B2E;
  --np-paper:   #F7F5F1;

  --np-font:    "TA", system-ui, sans-serif;
  --np-display: "TA Display", "TA", system-ui, sans-serif;

  --np-shadow: 0 2px 8px rgba(16, 42, 67, .05), 0 12px 32px rgba(16, 42, 67, .06);
  --np-radius: 14px;

  --np-s1: 8px;
  --np-s2: 16px;
  --np-s3: 24px;
  --np-s4: 40px;
  --np-s5: 64px;
  --np-s6: 96px;

  --np-wrap: 1240px;

  /* Film grain, drawn by the browser rather than fetched. Laid over flat
     colour it stops large fields reading as printer output. */
  --np-grain: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* The English document reads in Polin; its headings keep Tel Aviv's caps,
   which is a deliberate look at display size rather than an accident. */
:root:lang(en),
[lang="en"] {
  --np-font: "NP Latin", system-ui, sans-serif;
}