/* The two hand-written pages, / (language choice) and 404.html. They sit outside the
   Next app because each needs both languages on one page, and the app's root layout
   is per language. Same tokens as src/app/site.css, in miniature.

   The structural idea: two doors of equal size, one per language, side by side on a wide
   screen (Hebrew on the right, because the page is RTL) and stacked on a phone. Hebrew
   carries the one fill because most of the audience reads Hebrew first.
   Font: the system face. Montserrat is self-hosted by next/font under a content-hashed
   file name these static pages cannot know in advance, and no third-party font is allowed. */
:root { --bg: #FFFFFF; --fg: #1A1A1A; --fg-2: #555555; --heading: #1F2D41; --rule: #E0E0E0; --action: #BA5428; --action-hover: #94370F; --action-fg: #FFFFFF; --focus: #215178; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 18px; line-height: 1.6; }
main { max-width: 1000px; min-height: 100vh; margin: 0 auto; padding: 48px 16px; display: grid; align-content: center; gap: 48px; }
.doors { display: grid; gap: 0; }
.door { display: grid; gap: 16px; align-content: start; padding: 32px 0; border-top: 1px solid var(--rule); }
.door:last-child { border-bottom: 1px solid var(--rule); }
h1 { color: var(--heading); font-size: 36px; line-height: 1.15; margin: 0; }
p { margin: 0; }
.mark { height: 44px; width: auto; display: block; }
.go { display: inline-flex; align-items: center; min-height: 48px; justify-self: start; background: var(--action); color: var(--action-fg); font-weight: 700; font-size: 18px; padding: 12px 24px; margin-top: 8px; text-decoration: none; border: 2px solid transparent; }
.go:hover { background: var(--action-hover); color: var(--action-fg); }
.go-ghost { background: transparent; color: var(--heading); border-color: var(--rule); }
.go-ghost:hover { background: transparent; color: var(--action); border-color: var(--action); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.small { color: var(--fg-2); font-size: 15px; }
@media (min-width: 760px) {
  main { padding: 64px 32px; }
  .doors { grid-template-columns: 1fr 1fr; gap: 64px; }
  .door, .door:last-child { border-bottom: 0; padding-bottom: 0; }
}