/* ==========================================================================
   Story hero + shared /story chrome. Ported from a178802 onto the theme's
   white-first b/w/green spine (G2). Logical properties only (RTL-safe).
   Loaded only when the story_hero part is present (first section on /story),
   so the shared story tokens/wrapper below are scoped to the story page.
   ========================================================================== */
:root {
  --story-serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --story-gray-3: #CBD5E1;   /* faint hairline / redaction fill */
  --story-line-2: #CBD5E1;   /* stronger hairline on hover */
  --story-max: 880px;        /* the editorial column width */
}

/* editorial column — narrower than the theme's 1200px marketing container */
.story-container {
  width: 100%;
  max-inline-size: var(--story-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

/* the faintest tint at the top of the page (green at a whisper) */
.story-hero::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--section-y));
  inset-inline: 0;
  block-size: 60vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 42% at 50% 0%, rgba(16,185,129,.06), transparent 66%);
}

.story-hero { padding-block: clamp(48px, 8vw, 82px) 46px; }

.story-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 34px;
}
.story-eyebrow:lang(he) { font-family: var(--font-he); letter-spacing: .04em; }

.story-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7.6vw, 76px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 28px; color: var(--text);
}
.story-hero__title .l { display: block; }
.story-hero__title .beat {
  font-family: var(--story-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.02em; color: var(--muted);
}
/* Hebrew: serif-italic does not belong in Hebrew display type — use the brand
   Hebrew face, upright, and let the beat read as a quiet tonal shift. */
.story-hero__title .beat:lang(he) { font-family: var(--font-he); font-style: normal; font-weight: 400; }

.story-lede {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 2vw, 18px); color: var(--muted);
  max-inline-size: 600px; line-height: 1.72; margin: 0;
}
.story-lede b { color: var(--text); font-weight: 700; }

/* quiet fact row */
.story-facts {
  display: flex; flex-wrap: wrap; gap: 16px 44px;
  margin-block-start: 52px; padding-block-start: 28px;
  border-block-start: 1px solid var(--line);
}
.story-fact .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); margin-block-end: 8px;
}
.story-fact .k:lang(he) { font-family: var(--font-he); letter-spacing: .02em; }
.story-fact .v {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--muted);
}
.story-fact .v.hi   { color: var(--text); }
.story-fact .v.accent { color: var(--gold-deep); }
.redact {
  display: inline-block; background: var(--story-gray-3); color: transparent;
  border-radius: 2px; padding-inline: 2px; user-select: none;
}

/* ---------- shared story section shell (used by workforce/proof/cta) ---------- */
.story-section { position: relative; padding-block: 56px 0; }
.story-sec-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 14px;
}
.story-sec-eyebrow:lang(he) { font-family: var(--font-he); letter-spacing: .03em; }
.story-sec-intro {
  color: var(--muted); max-inline-size: 600px; font-family: var(--font-body);
  font-size: clamp(14.5px, 1.8vw, 16px); line-height: 1.72; margin: 0 0 30px;
}

/* shared pulsing status dot */
.story-dot {
  inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--gold-deep); display: inline-block;
  animation: story-pulse 3s ease-in-out infinite;
}
@keyframes story-pulse { 0%,100% { opacity: .9; } 50% { opacity: .28; } }

@media (max-width: 640px) {
  .story-hero { padding-block: 40px 36px; }
  .story-facts { gap: 16px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-dot { animation: none; }
}