/* ============================================================
   ltr.css — English (LTR) direction overrides
   Loaded ONLY by site/en/*.html, last, after v2.css and the
   page-specific sheet (home-v2.css or pages-v2.css).
   Every rule is scoped under [dir="ltr"] so this file is inert
   if it were ever picked up by a Hebrew page. Sections follow
   the same order as the design system itself. Source list:
   site/en/_PLAN.md section 6.
   ============================================================ */

/* ---------- 1. Latin display type ---------- */
/* Suez One / Frank Ruhl Libre / Heebo / Amatic SC keep their families in
   English — Latin glyphs in them just sit looser than the Hebrew was
   tuned for, so giant/heading sizes get slightly tighter tracking and
   line-height, and body copy gets a touch less leading than the
   Hebrew's 1.7. */
[dir="ltr"] body{line-height:1.6}
[dir="ltr"] .giant{letter-spacing:-.02em;line-height:.9}
[dir="ltr"] h1,[dir="ltr"] .h1{letter-spacing:-.02em;line-height:.96}
[dir="ltr"] h2,[dir="ltr"] .h2{letter-spacing:-.015em;line-height:1}
[dir="ltr"] .hero-mark{letter-spacing:-.01em}
[dir="ltr"] .hero-claim{letter-spacing:-.015em}
/* English words run longer than Hebrew, so the same clamp that lets the
   Hebrew claim sit on 3 tight lines pushes "to the judgment." (the gold
   payoff line) past the column width and it wraps to an orphaned
   "to the" / "judgment." split. Trim the desktop max so it clears the
   column at ~1440px; mobile is single-column (full width) and already
   fits at the base clamp, so leave it alone below 1000px. */
@media (min-width:1000px){
  [dir="ltr"] .hero-claim{font-size:clamp(34px,5.6vw,80px)}
}
[dir="ltr"] .about-name{letter-spacing:-.015em}

/* ---------- 2. Forms: select chevron ---------- */
/* v2.css positions the chevron with a physical background-position
   (left 16px) because it targets the RTL inline-end side; padding-inline-end
   already flips on its own, only the background-position needs a mirror. */
[dir="ltr"] select.input{background-position:right 16px center}

/* ---------- 3. Text links: underline anchor + forward chevron ---------- */
/* .textlink::after anchors its hover-shrink at "right" (the RTL reading
   start). In LTR the reading start is the left edge. */
[dir="ltr"] .textlink::after{transform-origin:left}
/* The inline chevron (path "m15 6-6 6 6 6") points left, correct for RTL
   "forward". Mirror it so it points right, i.e. forward in LTR. One rule
   covers every instance instead of hand-editing each page's SVG path. */
[dir="ltr"] .textlink .ico{transform:scaleX(-1)}

/* ---------- 4. Home hero: orbs, note + arrow ---------- */
/* home-v2.css hard-codes the three orbs with physical left:%, tuned so
   they sit on the circle's RTL-inward side (facing the hero copy, which
   in RTL sits to the circle's left). In LTR the circle and copy swap
   sides via the grid's own logical flow, so the orbs must move to the
   circle's right edge to keep facing the copy. Using `right` instead of
   a recomputed `left` mirrors the exact same offsets. */
/* NOTE: these must stay `left` (mirrored to 100%-original), not `right`.
   The base rule also carries `transform:translate(-50%,-50%)`, tuned to
   center the orb on a left/top anchor point; swapping the property to
   `right` while keeping that same translate does not mirror the anchor,
   it double-shifts it — the orb lands a full width off target and buries
   itself in the middle of the face instead of sitting on the disc's
   copy-facing edge. Confirmed by measuring: right:10% put o1's center
   dead over the nose; left:90% (the true mirror of the RTL left:10%)
   lands it exactly mirroring the Hebrew placement, just inside the
   disc's right edge. */
[dir="ltr"] .hero-orb.o1{left:90%}
[dir="ltr"] .hero-orb.o2{left:96%}
[dir="ltr"] .hero-orb.o3{left:74%}
@media (max-width:999px){
  [dir="ltr"] .hero-orb.o1{left:88%}
  [dir="ltr"] .hero-orb.o2{left:94%}
  [dir="ltr"] .hero-orb.o3{left:70%}
}
/* .hero-note itself uses inset-inline-start, so its position already
   flips for free. Its hand-drawn arrow SVG is a fixed physical path
   (curves up-and-left to point at the disc from the RTL layout) — mirror
   it horizontally so it still points at the disc, now on the other side. */
[dir="ltr"] .hero-note svg{transform:scaleX(-1)}
/* The note's own tilt leans into the RTL composition; mirror the sign so
   it leans the same way relative to the now-mirrored disc and orbs.
   Its inset-inline-start also needs a bigger (not just mirrored) offset:
   simply flipping "start" from right to left lands the English line
   ("From the first letter" — wider than the Hebrew original, and Amatic
   SC has no Hebrew glyphs so the Hebrew version rendered in a much
   narrower fallback font) right under the now-mirrored o3 orb. Nudge it
   further out and trim the handwritten size slightly so it clears the
   orb without bleeding past the section edge. */
[dir="ltr"] .hero-note{transform:rotate(7deg);inset-inline-start:-11%}
[dir="ltr"] .hero-note .hand{font-size:clamp(20px,1.9vw,28px)}
/* Between the 1000px 2-column breakpoint and ~1300px the .hero-stage box
   itself sits close to the viewport edge (container gutter is still
   narrow there), so the -11% tuned for 1440 pushes the note off-screen
   on the left. Ease it back to the shared RTL offset in that band. */
@media (min-width:1000px) and (max-width:1299px){
  [dir="ltr"] .hero-note{inset-inline-start:-6%}
}
@media (max-width:999px){
  [dir="ltr"] .hero-note{inset-inline-start:-2%}
  [dir="ltr"] .hero-note .hand{font-size:17px}
}

/* ---------- 5. Home "open file": progress dashes ---------- */
/* The dash fill grows from transform-origin:right (the RTL reading
   start). In LTR it must grow from the reading start, the left. */
[dir="ltr"] .file-dots i::after{transform-origin:left}
/* file-card's tilt is a standalone decorative flourish; mirror the sign
   for the same balanced "lean" once the page runs the other way. */
[dir="ltr"] .file-card{transform:rotate(3deg)}
@media (max-width:999px){
  [dir="ltr"] .file .file-card{transform:rotate(2deg) scale(.96)}
}

/* ---------- 6. Home tilted marquee band ---------- */
/* Decorative tilt only, not a reading-direction signal — mirrored to
   match the file-card/hero-note lean once the page is flipped. */
[dir="ltr"] .band-tilt .marquee{transform:rotate(2.5deg) scale(1.04)}

/* ---------- 7. Home statement + about photo handwritten notes ---------- */
[dir="ltr"] .statement-side .hand{transform:rotate(8deg)}
[dir="ltr"] .about-spec .about-photo .hand{transform:rotate(2deg)}

/* ---------- 8. Home areas rail: prev/next icons ---------- */
/* data-dir="prev" uses a right-pointing path (correct for RTL "previous"),
   data-dir="next" a left-pointing one (correct for RTL "next"). LTR
   flips both meanings; mirror the icons rather than the JS-picked paths.
   (The actual scroll math is a separate runtime fix, see home-v2.js.) */
[dir="ltr"] .rail-nav button .ico{transform:scaleX(-1)}

/* ---------- 9. Practice: sticky index handwritten note ---------- */
[dir="ltr"] .practice-index .hand{transform-origin:left}

/* ---------- 10. Home FAQ-teaser giant heading ---------- */
/* "Three questions almost everyone asks in the first conversation" is
   much longer than the Hebrew line and has no manual <br> (it relies on
   natural wrap, same as the Hebrew). At the shared --h2 clamp it greedy-
   wraps into 6 lines, four of them a single stranded word ("Three" /
   "questions" / "almost" on their own lines) — reads as broken instead
   of a considered paragraph. Trim just this heading (not the shared
   --h2 token, which other short English h2s already fit fine) so it
   greedy-wraps into a balanced 4-line block, matching the Hebrew's line
   count. Mobile is single-column and already wraps cleanly at the base
   clamp, so scope this to the desktop 2-column layout only. */
@media (min-width:1000px){
  [dir="ltr"] #faq-h{font-size:clamp(30px,4.1vw,58px)}
}

/* ---------- 11. Footer giant wordmark ---------- */
/* .footer-mark is a decorative, near-full-bleed background word (opacity
   .07, aria-hidden). At the shared clamp(88px,22vw,360px), "שאול חלפון"
   measures ~1463px at a 1440px viewport — just a hair past the 1440
   viewport, so it reads as a comfortably legible giant word with a
   natural soft crop at both edges. "Shaul Halfon" in the same slab
   serif measures ~1975px at that size: 500px wider, so it overflows
   the viewport by ~265px a side and crops away the leading "S" and
   trailing "n" — what's left ("hall Half") no longer reads as the
   name at all. Scale the clamp down (~74%) so the English word sits
   at the same near-full-legible proportion as the Hebrew. */
[dir="ltr"] .footer-mark{font-size:clamp(65px,16.3vw,266px)}