/* Gitit Kaplan Shalev, CPA · the English page (/en/).
   Only what left-to-right needs on top of site.css: the physical-direction rules that were written for the Hebrew page,
   mirrored, and the Latin tuning of the big type (Bona Nova's Latin runs wider than its Hebrew and has real descenders).
   Loaded after site.css and scoped to html[dir="ltr"], so the Hebrew pages never see it. */

/* ---------- type: Latin at poster size ---------- */
html[dir="ltr"] h1,html[dir="ltr"] h2{letter-spacing:-.02em;line-height:1.02}
/* :where() keeps these as light as site.css's own h1/h2, so each section's size (the book, the questions, the dialog) still wins */
:where(html[dir="ltr"]) h1{font-size:clamp(2.6rem,8vw,8.4rem)}
:where(html[dir="ltr"]) h2{font-size:clamp(2.3rem,5.8vw,5.7rem)}
/* a heading whose second half is the italic: the italic takes its own line, never half of one */
html[dir="ltr"] .book-head h2 em,html[dir="ltr"] .reads-head h2 em,html[dir="ltr"] .faq h2 em,html[dir="ltr"] .news h2 em{display:block;text-wrap:balance}
html[dir="ltr"] .nb{white-space:nowrap}
/* the rising lines are clipped boxes: leave room for g, p, y and for the italic's lean */
html[dir="ltr"] .reveal-lines .ln{padding-block:.1em .2em;margin-block:-.1em -.2em;padding-inline-start:.06em;margin-inline-start:-.06em}
/* small labels: tracked capitals, the Latin equal of the Hebrew's spaced small text */
html[dir="ltr"] .eyebrow,html[dir="ltr"] .tr.th,html[dir="ltr"] .hero-foot,html[dir="ltr"] .tel small,html[dir="ltr"] .ways small,html[dir="ltr"] .place small,html[dir="ltr"] .leaf footer span,html[dir="ltr"] .foot-he{text-transform:uppercase}
html[dir="ltr"] .eyebrow{font-size:.72rem;letter-spacing:.12em}
html[dir="ltr"] .eyebrow .fig{font-size:.82rem}
html[dir="ltr"] .tr.th{font-size:.68rem}
/* the shekel sign lives in the text face (the mono has no ₪) */
html[dir="ltr"] .cur{font-family:var(--text);font-weight:400;margin-inline-end:.04em}

/* ---------- header ---------- */
html[dir="ltr"] .nav a::after{transform-origin:left}
/* the link to the Hebrew page is two Hebrew letters: the text face has them, the mono doesn't */
html[dir="ltr"] .lang{font-family:var(--text);font-size:.84rem;padding:3px 8px}
html[dir="ltr"] .drawer a[lang="he"] .fig{font-family:var(--text)}
/* the English labels are longer: the row gives way to the drawer a little earlier */
@media (max-width:1180px){html[dir="ltr"] .nav,html[dir="ltr"] .top .lang{display:none}html[dir="ltr"] .burger{display:block}html[dir="ltr"] .top .btn-sm{margin-inline-start:auto}}
/* on a phone "Write to Gitit" doesn't fit beside the logo, and the bottom bar already offers it */
@media (max-width:480px){html[dir="ltr"] .top .btn-sm{display:none}html[dir="ltr"] .burger{margin-inline-start:auto}}

/* ---------- 1. hero: the veil darkens the side the words stand on ---------- */
html[dir="ltr"] .film::after{background:linear-gradient(180deg,rgba(11,22,38,.80) 0%,rgba(11,22,38,.42) 34%,rgba(11,22,38,.66) 68%,var(--ink) 100%),linear-gradient(90deg,rgba(11,22,38,.82) 0%,rgba(11,22,38,.25) 62%,rgba(11,22,38,0) 100%)}
html[dir="ltr"] .hero-line{background:linear-gradient(to right,var(--line-ink),transparent)}
@media (max-width:520px){
  html[dir="ltr"] .hero h1{font-size:clamp(2.5rem,12.4vw,3.8rem)}
  html[dir="ltr"] .hero h1 .ln{white-space:normal}
}

/* ---------- 2. the sequence: the words on the left, the object on the right ----------
   In Hebrew the frame covers the screen and is pushed 11% to the left. Mirrored, the row of discs would run under the
   words (its far end is the wide one), so here the frame is a 16:9 box of its own, set to the right and centred: the
   whole row stays on screen and clear of the caption at every desktop width. The veil is the Hebrew one mirrored, and
   2px larger than the frame so no edge of it shows against the section's colour. */
html[dir="ltr"] .seq-view::after{inset:-2px;background:linear-gradient(to right,var(--seq) 0%,rgba(11,22,38,0) 24%,rgba(11,22,38,0) 80%,var(--seq) 100%),linear-gradient(to bottom,var(--seq) 0%,rgba(11,22,38,0) 16%,rgba(11,22,38,0) 66%,var(--seq) 100%)}
html[dir="ltr"] .seq-meter i{transform-origin:left}
@media (min-width:861px){
  html[dir="ltr"] .seq-view{inset:50% auto auto 21%;width:92%;aspect-ratio:16/9;transform:translateY(-50%)}
  html[dir="ltr"] .seq-caps,html[dir="ltr"] .seq-meter{width:min(31ch,30vw)}
}

/* ---------- 3. the office ---------- */
html[dir="ltr"] .office-head{max-width:none}

/* ---------- 4. the book: the spine on the left, the page swings away around it ---------- */
html[dir="ltr"] .book{perspective-origin:20% 50%}
html[dir="ltr"] .book::before{inset:10px 10px -10px -10px;box-shadow:-5px 5px 0 -1px var(--paper),-5px 5px 0 0 var(--line)}
html[dir="ltr"] .leaf::after{inset:0 auto 0 0;background:linear-gradient(to right,rgba(11,22,38,.10),transparent)}
@media (min-width:901px){html[dir="ltr"] .leaf{transform-origin:0 50%}}

/* ---------- 6. the route ---------- */
html[dir="ltr"] .route h2{max-width:none}

/* ---------- 7. the folder: the English list is longer than the Hebrew, so the folder gets the room it needs ---------- */
html[dir="ltr"] .checks{gap:8px}
html[dir="ltr"] .checks li{line-height:1.4}
html[dir="ltr"] .tray-done{line-height:1.25}
@media (max-width:520px){
  html[dir="ltr"] .desk{aspect-ratio:1/1.6}
  html[dir="ltr"] .tray{inset:30% 8% 27% 8%;padding:32px 16px 14px}
  html[dir="ltr"] .checks{gap:5px;font-size:.8rem}
  html[dir="ltr"] .tray-done{margin-top:8px;font-size:1rem}
}

/* ---------- 9. the academy ---------- */
html[dir="ltr"] .course h3{font-size:clamp(1.9rem,3.1vw,3.6rem)}
html[dir="ltr"] .course-foot{flex-wrap:wrap;gap:10px 18px}
html[dir="ltr"] .course-price{white-space:nowrap}

/* ---------- 10. articles ---------- */
html[dir="ltr"] .reads-head h2{max-width:none}
html[dir="ltr"] .reads-note{margin-top:20px;color:#39414f;max-width:44ch}

/* ---------- 12. the updates form ---------- */
html[dir="ltr"] .field label{transform-origin:left top}

/* ---------- footer ---------- */
html[dir="ltr"] .foot-line{max-width:none}
html[dir="ltr"] .foot-he{font-size:.72rem;letter-spacing:.1em;color:var(--grey-l);align-self:center}

/* ---------- the inquiry sorter: docked to the right edge, sliding in from it ---------- */
html[dir="ltr"] .ask[open]{inset:0 0 0 auto}
html[dir="ltr"] .ask-in{transform:translateX(102%)}
html[dir="ltr"] .ask.is-open .ask-in{transform:none}