/* Базовый лист. Мобильный первым: всё описано для 375px, шире — растёт.
   Только логические свойства. Проверка: grep -nE '(margin|padding|border|inset)-(left|right)' */

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body),var(--font-heb),system-ui,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── поток и ширина ── */
.shell{max-width:var(--site-max);margin-inline:auto;padding-inline:var(--edge)}
.page-main{overflow:clip}
.section{display:flex;flex-direction:column;gap:var(--space-3);
  padding-block:var(--space-5);border-block-start:1px solid var(--line)}
.section:first-of-type{border-block-start:0}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

/* ── типографика ── */
h1,h2,h3{
  font-family:var(--font-display),var(--font-heb),Georgia,serif;
  font-weight:var(--disp-weight);
  letter-spacing:var(--disp-track);
  line-height:var(--disp-lh);
  text-transform:var(--disp-case);
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1);letter-spacing:0;text-transform:none;line-height:1.25}
p{margin:0;max-width:var(--measure);color:var(--ink-2)}
p.lede{color:var(--ink);font-size:var(--step-1)}

.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step--1);letter-spacing:var(--eyebrow-track);
  text-transform:uppercase;color:var(--ink-2);
}
/* Черта перед надстрочником — акцентная плашка, а не бледная линия:
   на светлом фоне это единственное место, где кислотный цвет может
   стоять в тексте, не становясь текстом. */
.eyebrow::before{content:"";inline-size:26px;block-size:3px;background:var(--fill)}
[data-dir="c"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.06em}

/* Числа держим отдельным LTR-прогоном. Пробел внутри «₪1 200» — нейтральный
   символ: в RTL число распадается на два прогона и читается как «200 ₪1».
   Слова сюда не попадают — им положено течь по направлению языка. */
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* ── ссылки и кнопки ── */
a{color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  min-block-size:var(--tap);
  padding-block:12px;padding-inline:22px;
  font-family:var(--font-body),var(--font-heb),sans-serif;
  font-size:var(--step-0);font-weight:600;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--fill);border-radius:var(--radius);
  background:var(--fill);color:var(--accent-ink);
  transition:opacity .18s ease,transform .18s ease,background-color .18s ease;
}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-2);opacity:1}
[data-dir="a"] .btn{text-transform:uppercase;letter-spacing:.08em;font-size:var(--step--1)}
[data-dir="c"] .btn{font-weight:400;letter-spacing:.03em;padding-inline:26px}

/* Фокус виден всегда и во всех направлениях. Доступность не опциональна. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── шапка ──
   На 375px марка и языки делят первую строку, разделы уходят на вторую.
   Раньше здесь был flex-wrap, и «Обо мне» отрывалось на свою строку одно. */
.masthead{
  display:grid;grid-template-columns:1fr auto;
  gap:var(--space-1) var(--space-3);align-items:center;
  padding-block:14px;border-block-end:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
}
.mark{
  grid-row:1;grid-column:1;
  display:inline-flex;align-items:center;min-block-size:var(--tap);
  font-family:var(--font-display),var(--font-heb),serif;
  font-weight:var(--disp-weight);font-size:var(--step-1);letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;
}
.sections{
  grid-row:2;grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:0 var(--space-2);
}
.sections a{
  display:inline-flex;align-items:center;min-block-size:var(--tap);
  padding-inline:var(--space-1);
  color:var(--ink-2);text-decoration:none;font-size:var(--step--1);
  border-block-end:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.sections a:hover{color:var(--ink)}
.sections a[aria-current="page"]{color:var(--ink);border-block-end-color:var(--ink)}

/* Языки — настоящие ссылки на настоящие адреса, а не JS.
   Так работает hreflang и так работает «открыть в новой вкладке». */
.langs{grid-row:1;grid-column:2;display:flex;gap:2px;justify-self:end}
.langs a{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:var(--tap);min-block-size:var(--tap);
  font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step--1);letter-spacing:.06em;
  color:var(--ink-2);text-decoration:none;border-radius:var(--radius);
  transition:color .18s ease,background-color .18s ease;
}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{background:var(--ink);color:var(--bg)}

@media (min-width:760px){
  .masthead{grid-template-columns:auto 1fr auto}
  .sections{grid-row:1;grid-column:2;gap:0 var(--space-3)}
  .sections a{font-size:var(--step-0)}
  .langs{grid-column:3}
}

@media (max-width:419px){
  .row{align-items:stretch}
  .row .btn{flex:1 1 100%}
}

/* ── подвал ── */
.foot{
  border-block-start:1px solid var(--line);
  padding-block:var(--space-4) var(--space-5);
  font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step--1);line-height:1.8;color:var(--ink-2);
}
.foot p+ p{margin-block-start:var(--space-1)}

@media (min-width:820px){
  .section{padding-block:clamp(72px,8vw,112px)}
  .foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .foot p:last-child{text-align:end;justify-self:end}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}