/*
 * SITE DESIGN ROUND — shared spine.
 *
 * All executions share this file. That is the point: they are meant to be
 * genuinely different EXECUTIONS of ONE FEELING, not three different feelings.
 * Anything that differs between A/B/C lives in that execution's own <style>;
 * anything that would make them read as different brands lives here.
 *
 * Feeling (Folio's locked tone): soft product -> editorial minimal.
 * Calm outside, power inside. Hebrew first, always.
 *
 * Hard constraints, enforced by construction:
 *  - every font self-hosted from /fonts (symlinked to site/fonts)
 *  - every image from /folio-assets (symlinked to site/folio-assets)
 *  - ZERO external URLs. No CDN, no Google Fonts, no analytics, no third party.
 *
 * Frankenstein caps (design-match): 2 live faces per execution, 2 radii,
 * 3 shadows, one 4/8 spacing scale, 2 easing curves. Held below.
 */

/* FACES ARE NOT DECLARED HERE.
   The site already owns one canonical self-hosted font stylesheet, /fonts.css,
   and the repo's own audit enforces that every page links it (`fonts.css not
   linked` is a hard failure). The first version of this spine forked those
   @font-face rules, which meant two declarations of the same families and a page
   that failed a contract it was quietly satisfying by other means. Every page
   links /fonts.css?v=2 before this file; this file owns tokens, not faces. */

:root {
  /* brand — owner-fixed, identical in every execution */
  --sky: #0284c7;
  --deep: #075985;
  --ink: #0c2340;
  --muted: #6a6e75;

  /* grounds */
  --paper: #ffffff;
  --ground: #f7f8fa;
  --warm: #fbfaf7;
  --line: #e6e9ee;

  /* one spacing scale, 4/8 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* two radii — surfaces and controls. No third. */
  --r-surface: 14px;
  --r-control: 10px;

  /* three shadows. No fourth. */
  --sh-1: 0 1px 2px rgba(12, 35, 64, 0.06);
  --sh-2: 0 4px 16px rgba(12, 35, 64, 0.08);
  --sh-3: 0 18px 48px rgba(12, 35, 64, 0.13);

  /* two curves. No third. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Arabic is a real published language here, not a fallback — Plex Arabic is
     named before the system stack so the ar view stays on-brand. */
  font-family: 'Assistant', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* 17px, not 16 — Hebrew has no ascender/descender rhythm to lean on and reads
     small at the Latin default. Every execution inherits this. */
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hebrew numerals and Latin product names stay LTR inside RTL prose. */
[dir='ltr'] { direction: ltr; unicode-bidi: isolate; }

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---- the one control every execution shares ----
   Same words, same size, same colour in all three, so the round compares
   LAYOUT and TONE rather than button design. 48px min height clears the
   44pt touch floor with room. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-control);
  /* --deep, NOT --sky. Measured, not eyeballed: white on --sky (#0284c7) is
     4.10:1, and an 18px bold label is not "large text" under WCAG (that needs
     18.66px bold / 24px regular), so --sky would FAIL AA on the one control
     the whole page exists to serve. White on --deep (#075985) is 7.56:1.
     --sky stays the brand accent for rules, marks and large display type,
     where 4.10:1 clears the 3:1 UI/large threshold honestly. */
  background: var(--deep);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sh-2);
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.cta:hover { background: #05405f; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--deep) 35%, transparent);
}
.cta-ghost:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }

/* Screen-reader-only, for the skip link and visually-implicit headings. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A skip link that stays 1x1 when focused is a skip link nobody can use. On focus
   it becomes a real, visible, full-size target. Caught by the tap-target battery,
   which flagged it at 1x1 — the battery was right and the first draft was wrong. */
a.sr:focus {
  position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3);
  z-index: 50;
  width: auto; height: auto; min-height: 44px;
  padding: var(--s3) var(--s5); margin: 0;
  overflow: visible; clip: auto;
  display: inline-flex; align-items: center;
  background: var(--deep); color: #fff;
  border-radius: var(--r-control); box-shadow: var(--sh-2);
  font-weight: 700; text-decoration: none;
}

/* Footer links. Shared here rather than repeated in each execution: all three
   had the same rule, and the same 44px-width miss. One place to be right. */
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 15px; }
.foot-links a {
  color: var(--muted); text-decoration: none;
  /* min-width AND min-height: the battery caught "פרטיות" at 39x44 and "נגישות"
     at 36x44 — tall enough, too narrow. Both dimensions have to clear 44. */
  min-height: 44px; min-width: 44px;
  padding-inline: var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control);
}
.foot-links a:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}