/* The Lion Of Zion — static version.
   No external fonts, scripts, or trackers. Brand blue sampled from the logo.
   Lato is self-hosted locally (fonts/), so nothing is requested from any CDN. */

/* --- Self-hosted Lato (weights 400 & 700, latin + latin-ext) --- */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, 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: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, 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: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato-900-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato-900-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, 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;
}

:root {
  --brand-blue: #0000ee;
  --page-bg: #ffffff;
  --text: #202124;

  /* Fluid base scale. ~17.5vw ≈ the original size. Floor keeps the Hebrew
     legible on phones; cap stops it ballooning on very wide screens.
     The email scales off this base. */
  /*
  --hero-w: clamp(160px, 17.5vw, 600px);
  */
  --hero-w: clamp(280px, 52vw, 1000px);

  /* Hero image + title share this. Scale knob: 1.0 = same as base (email unaffected). */
  --hero-display: calc(var(--hero-w) * 1.0);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: "Lato", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Centered content column */
.content {
  max-width: 1200px;
/*
  max-width: 640px;
*/
  margin: 0 auto;
  padding: 16px 16px 16px 16px;
  text-align: center;
}

.content picture {
  display: block;
}

.hero {
  display: block;
  /* Never exceed the column width, so it always centers and never overflows
     on narrow/zoomed windows (even when --hero-w hits its px minimum). */
  width: min(var(--hero-display), 100%);
  height: auto;
  margin: 0 auto;
}

.title {
  /* Matches the original title: Lato Black (900), tight tracking. */
  font-weight: 900;
  /* Scales in step with the (enlarged) hero, keeping the same title-to-hero
     ratio, with a readable floor for small screens. */
  font-size: max(12px, calc(var(--hero-display) * 0.069));
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0.3em 0 0.4em;
}

.title a {
  color: var(--brand-blue);   /* matches the hero + email blue */
  text-decoration: none;
}
.title a:hover {
  text-decoration: underline;
}

.email {
  color: var(--brand-blue);
  font-weight: 700;
  /* Scales in step with the hero (3.35% of its width ≈ 15px at the original size). */
  font-size: max(10px, calc(var(--hero-w) * 0.0335));
  margin: 2.0em 0 0.4em;
}

.email a {
  color: var(--brand-blue);
  text-decoration: underline;
}
.email a:hover {
  text-decoration: none;
}