/* aleph-n
 *
 * This page has to read as an institution, not as a teaser. The previous
 * version was a dark field with a star pattern, which said "someone's side
 * project" to exactly the reader who matters — an enterprise buyer whose
 * incumbent is SAP. So: light ground, high contrast, a structured grid,
 * hairlines, and no atmosphere.
 *
 * Typography deliberately mirrors 7rplus.com — Inter at light weights and
 * large sizes, tight tracking — so the two read as one company.
 *
 * The mark is ℵ set in Noto Sans Hebrew. Drawing the letterform from
 * geometry was tried and kept collapsing into an X; a real typeface gets the
 * letter right because it is the letter.
 *
 * Nothing here announces a date or a release.
 */

:root {
  --paper: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F2F1EE;
  --ink: #14161A;
  --ink-2: #4A4E56;
  --ink-3: #868B94;
  --line: #E4E3DF;
  --line-2: #D2D0CB;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hebrew: "Noto Sans Hebrew", "Noto Serif Hebrew", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

p { margin: 0 0 1.15em; }
strong { color: var(--ink); font-weight: 500; }
a { color: var(--ink); }

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

/* Two-column section grid: label rail on the left, content on the right.
   The same structure 7rplus.com uses for "Why 7R+?" and the research block. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 40px;
}
@media (max-width: 820px) { .row { grid-template-columns: 1fr; gap: 14px; } }

section { border-top: 1px solid var(--line); padding: 72px 0; }

/* ------------------------------------------------------------------ header */

header { padding: 30px 0; }
header .wrap { display: flex; align-items: center; gap: 24px; }

.lockup { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.lockup .glyph {
  font-family: var(--hebrew);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  transform: translateY(1px);
}
.lockup .name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* -------------------------------------------------------------------- hero */

.hero { border-top: 0; padding: clamp(56px, 9vh, 104px) 0 84px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

h1 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 15ch;
}

.hero .sub {
  margin-top: 26px;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

/* The mark at display size. High contrast, no ornament, given room. */
.hero-mark {
  font-family: var(--hebrew);
  font-weight: 700;
  font-size: clamp(150px, 22vw, 240px);
  line-height: 0.86;
  color: var(--ink);
  user-select: none;
}
@media (max-width: 900px) { .hero-mark { font-size: 140px; } }

/* ---------------------------------------------------------------- theses */

.thesis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 40px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.thesis:first-of-type { border-top: 0; }
@media (max-width: 820px) { .thesis { grid-template-columns: 1fr; gap: 10px; } }
.thesis .meta { font-size: 13px; color: var(--ink-3); }
.thesis .name {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.thesis .desc { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.thesis:hover .name { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------- contact */

.contact .mail { margin-top: 2px; }

.mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 15px;
  transition: opacity .15s ease;
}
.mail:hover { opacity: .85; }

/* ---------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 52px;
  font-size: 13.5px;
  color: var(--ink-3);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: baseline; }
footer a { color: var(--ink-3); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }