/* Audience modes — Молодь (youth) and Старші (elders).
   Drive everything through CSS variables and class scopes; no markup duplication. */

/* Youth — vibrant, motion-rich, scannable. (default) */
html.aud-youth {
  --aud-base-size:   16px;
  --aud-line-height: 1.55;
  --aud-h-weight:    300;
  --aud-h-italic:    italic;
  --aud-motion-time: .35s;
  --aud-tap-min:     40px;
  --aud-radius:      14px;
}

/* Elders — denser type, sparse motion, higher contrast, larger touch targets. */
html.aud-elders {
  --aud-base-size:   18px;
  --aud-line-height: 1.7;
  --aud-h-weight:    500;
  --aud-h-italic:    normal;
  --aud-motion-time: .15s;
  --aud-tap-min:     48px;
  --aud-radius:      10px;

  /* Higher contrast for body copy in elders mode */
  --ink-dim:    #4A3829;
  --ink-faint:  #7A6A55;
}

/* Elder mode: amber + ink primary, rest minimal */
html.aud-elders .pill,
html.aud-elders .badge { background: var(--surface-alt); color: var(--ink); }

/* Buttons — bigger touch targets in elders */
html.aud-elders .btn,
html.aud-elders .pill-toggle button,
html.aud-elders .nav a {
  min-height: var(--aud-tap-min);
  padding-block: .65rem;
}

/* Reveal-on-scroll motion — kept out of elders by default */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--aud-motion-time) ease, transform var(--aud-motion-time) ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
html.aud-elders .reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Audience-specific copy visibility — same markup, different text. */
[data-aud-youth],
[data-aud-elders] { display: none; }
html.aud-youth  [data-aud-youth]  { display: revert; }
html.aud-elders [data-aud-elders] { display: revert; }

/* Emoji density: hide decorative emojis for elders */
html.aud-elders .emoji-decorative { display: none; }

/* Hero copy length: elders sees longer paragraph by swapping lead text. */
html.aud-elders .lead-short { display: none; }
html.aud-youth  .lead-long  { display: none; }

/* Audience pill toggle */
.pill-toggle {
  display: inline-flex;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.pill-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--aud-motion-time), color var(--aud-motion-time);
}
.pill-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.pill-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}