/* TsofenOr — design tokens
   Unpacked from the bundled export. Rules unchanged.
   @font-face blocks removed; fonts load from Google Fonts
   via <link> in index.html. */

/* Website UI kit — page-scoped layout on top of the root tokens. */
/* =====================================================================
   TsofenOr — Colors & Type
   The complete token surface for the design system.
   Hebrew-first. RTL-primary. Monochrome until a moment of interaction.
   ===================================================================== */

/* ---------- Web fonts (Google Fonts CDN) -----------------------------
   Frank Ruhl Libre carries the brand. Inter is the UI workhorse.
   JetBrains Mono is the language of numbers, gematria, and code.
--------------------------------------------------------------------- */
/* hebrew */

/* latin-ext */

/* latin */

/* hebrew */

/* latin-ext */

/* latin */

/* hebrew */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

:root {
  /* ---------- Color (1 accent + 5 neutrals — that's the whole palette) */
  --bg:       #FAFAFA;            /* page surface, never changes      */
  --ink:      #0F0F0F;            /* headlines, body, all readable    */
  --ink-60:   rgba(15,15,15,0.6); /* subtitles, secondary text        */
  --ink-40:   rgba(15,15,15,0.4); /* captions, eyebrows, metadata     */
  --ink-10:   rgba(15,15,15,0.1); /* hairlines, borders, dividers     */
  --accent:   #0A2540;            /* HOVER + ACTIVE ONLY — never bg   */

  /* aliases — semantic */
  --fg:       var(--ink);
  --fg-muted: var(--ink-60);
  --fg-faint: var(--ink-40);
  --rule:     var(--ink-10);
  --surface:  #FFFFFF;            /* card surface on bg               */

  /* ---------- Spacing (8px base, linear) ----------------------------- */
  --xs:    8px;
  --sm:   16px;
  --md:   24px;
  --lg:   32px;
  --xl:   48px;
  --2xl:  64px;
  --3xl:  96px;
  --4xl: 160px;

  /* ---------- Radius (square corners, full stop) -------------------- */
  --radius-0: 0;
  --radius:   0;

  /* ---------- Borders ----------------------------------------------- */
  --hairline: 1px solid var(--ink-10);
  --rule-ink: 1px solid var(--ink);

  /* ---------- Motion (no bounces, no springs, just linear ease) ----- */
  --t-fast:  150ms ease;
  --t-base:  200ms ease;
  --t-slow:  300ms ease;

  /* ---------- Type families ----------------------------------------- */
  --serif: "Frank Ruhl Libre", "David", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop / mobile via @media below) -------- */
  --t-display:    120px;  /* hero only — once per page                */
  --t-pagetitle:   64px;  /* secondary page top                       */
  --t-section:     40px;  /* section header within a page             */
  --t-subsection:  24px;  /* sub-headers                              */
  --t-body-lg:     18px;  /* lead paragraph                           */
  --t-body:        16px;  /* default                                  */
  --t-caption:     13px;  /* footnote, image caption                  */
  --t-eyebrow:     11px;  /* tracked-out small-caps label             */
  --t-mono:        16px;  /* numbers, gematria, code                  */
}

/* ---------- Mobile down-sizing ---------------------------------------- */
@media (max-width: 720px) {
  :root {
    --t-display:    72px;
    --t-pagetitle:  44px;
    --t-section:    32px;
    --t-subsection: 20px;
    --t-body-lg:    16px;
    --t-body:       15px;
    --t-mono:       14px;
  }
}

/* =====================================================================
   Base reset + body defaults — opt-in via class, not auto-applied
   so this file can be imported alongside arbitrary code.
   ===================================================================== */
.tsofenor-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* =====================================================================
   Semantic type classes — apply directly to elements
   ===================================================================== */
.t-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-pagetitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-pagetitle);
  line-height: 1.1;
  color: var(--ink);
}
.t-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-section);
  line-height: 1.2;
  color: var(--ink);
}
.t-subsection {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-subsection);
  line-height: 1.3;
  color: var(--ink);
}
.t-body-lg {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--ink);
}
.t-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.t-caption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-60);
}
.t-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: 1.5;
  direction: ltr;
}

/* Hebrew-on-the-same-line modifier — pairs Hebrew (Frank Ruhl) and
   English (Inter) within a single mark, used for the wordmark + nav. */
.he { font-family: var(--serif); }
.en { font-family: var(--sans); }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button { font: inherit; }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 64px;
}
@media (max-width: 720px) {
  .page { padding: 0 24px; }
}

.section { padding: var(--3xl) 0; }
.section + .section { border-top: 1px solid var(--ink-10); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  height: 72px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-slow);
}
.header.is-scrolled { border-bottom-color: var(--ink-10); }
.header-inner {
  max-width: 960px; margin: 0 auto;
  height: 100%;
  padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 720px) {
  .header { height: 56px; }
  .header-inner { padding: 0 24px; }
}

.mark { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; cursor: pointer; }
.mark .mark-he { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); }
.mark .mark-en { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-40); }

.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-items { display: flex; align-items: center; gap: 32px; }
.nav-item {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.1;
  text-decoration: none; color: var(--ink); cursor: pointer;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.nav-item .ni-he { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--ink); }
.nav-item .ni-en { font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--ink-40); }
.nav-item:hover { border-bottom-color: var(--accent); }
.nav-item.is-active { border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .nav-items, .lang-toggle { display: none; }
  .nav-mobile { display: flex; }
}
.nav-mobile {
  display: none;
  width: 22px; height: 14px;
  flex-direction: column; justify-content: space-between; cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.nav-mobile span { display: block; height: 1px; background: var(--ink); }

/* ---------- Lang toggle ---------- */
.lang-toggle {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--ink); height: 28px;
  margin-inline-start: 16px;
}
.lang-toggle button {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; padding: 0 10px;
  background: transparent; color: var(--ink); border: 0; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-toggle button.is-active { background: var(--ink); color: var(--bg); }
.lang-toggle button:not(.is-active):hover { background: rgba(15,15,15,0.05); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.08em; line-height: 1;
  padding: 14px 28px; border: 0; border-radius: 0; cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  -webkit-appearance: none; appearance: none;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-ghost {
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  color: var(--ink); background: transparent; border: 0; padding: 0;
  cursor: pointer; line-height: 1.4; text-decoration: none;
  border-bottom: 1px solid rgba(15,15,15,0.4); padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Card ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--ink-10);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.card-eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-40);
}
.card-title {
  font-family: var(--serif); font-weight: 500; font-size: 28px;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.card-body {
  font-family: var(--sans); font-weight: 400; font-size: 16px;
  line-height: 1.6; color: var(--ink); margin: 0;
}
.card-action { margin-top: auto; padding-top: 8px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- Inline link ---------- */
.inline-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(15,15,15,0.3); padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
}
.inline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Eyebrow + dividers ---------- */
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink);
}
.eyebrow-muted { color: var(--ink-40); }
.divider-section { height: 1px; background: var(--ink-10); width: 60px; margin: 0 auto; }
.divider-full { height: 1px; background: var(--ink-10); width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: 160px 0 96px; }
.hero-eyebrow { color: var(--ink-40); margin-bottom: 32px; display: block; }
.hero-mark-he {
  font-family: var(--serif); font-weight: 500; font-size: 120px;
  line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.hero-mark-en {
  font-family: var(--serif); font-weight: 500; font-size: 56px;
  line-height: 1; color: var(--ink); margin: 12px 0 0;
  direction: ltr; text-align: left;
}
.hero-lead {
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  line-height: 1.6; color: var(--ink); max-width: 56ch;
  margin: 48px 0 32px;
}
.hero-lead-en {
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  line-height: 1.6; color: var(--ink-60); max-width: 64ch;
  direction: ltr; text-align: left; margin: 0 0 48px;
}

@media (max-width: 720px) {
  .hero { padding: 96px 0 64px; }
  .hero-mark-he { font-size: 72px; }
  .hero-mark-en { font-size: 32px; }
}

/* ---------- Page heads ---------- */
.page-head {
  padding: 96px 0 48px;
  border-bottom: 1px solid var(--ink-10);
}
.page-head .eyebrow { display: block; margin-bottom: 24px; color: var(--ink-40); }
.page-title-he {
  font-family: var(--serif); font-weight: 500; font-size: 64px;
  line-height: 1.1; color: var(--ink); margin: 0;
}
.page-title-en {
  font-family: var(--serif); font-weight: 500; font-size: 30px;
  line-height: 1.1; color: var(--ink-60); margin: 12px 0 0;
  direction: ltr; text-align: left;
}
@media (max-width: 720px) {
  .page-title-he { font-size: 44px; }
  .page-title-en { font-size: 22px; }
}

/* ---------- Section header (within page) ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--ink); padding-top: 24px; margin-bottom: 48px;
}
.section-head .num {
  font-family: var(--mono); font-size: 13px; color: var(--ink-40); letter-spacing: 0.04em;
}
.section-head h2 {
  font-family: var(--serif); font-weight: 500; font-size: 40px;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.section-head h2 .en {
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-40);
  margin-inline-start: 24px; vertical-align: middle;
}
.section-head .meta {
  font-family: var(--mono); font-size: 12px; color: var(--ink-40);
}

/* ---------- Body prose ---------- */
.prose-he, .prose-en {
  font-family: var(--sans); font-weight: 400; font-size: 16px;
  line-height: 1.7; color: var(--ink); max-width: 64ch;
}
.prose-en { direction: ltr; text-align: left; color: var(--ink); }
.prose-he + .prose-he, .prose-en + .prose-en, .prose-he + .prose-en { margin-top: 16px; }
.lead { font-size: 18px; }
.mono-inline { font-family: var(--mono); font-size: 14px; color: var(--ink); direction: ltr; unicode-bidi: isolate; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 96px;
  border-top: 1px solid var(--ink-10);
  background: var(--bg);
}
.footer-inner {
  max-width: 960px; margin: 0 auto;
  padding: 96px 64px 64px;
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 64px; }
.footer-col h4 {
  font-family: var(--sans); font-weight: 500; font-size: 16px;
  color: var(--ink); margin: 0 0 4px; line-height: 1.2;
}
.footer-col .col-sub {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-40);
  margin-bottom: 24px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  text-decoration: none; cursor: pointer;
  border-bottom: 1px solid rgba(15,15,15,0.3); padding-bottom: 1px;
  align-self: flex-start;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.footer-prose {
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--ink-60); margin: 0 0 12px;
}
.footer-bottom {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--ink-10);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.footer-bottom .fb-cell {
  font-family: var(--sans); font-size: 13px; color: var(--ink-40);
  flex: 1 1 auto;
}
.footer-bottom .fb-cell.center { text-align: center; }
.footer-bottom .fb-cell.right {
  text-align: end; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

@media (max-width: 720px) {
  .footer-inner { padding: 64px 24px 48px; }
  .footer-cols { grid-template-columns: 1fr; gap: 48px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom .fb-cell.center, .footer-bottom .fb-cell.right { text-align: start; }
}