/* InclusiveAI — Accessibility ("Версия для слабовидящих") mode
   Provides text-size, color-scheme, letter-spacing, and image-off
   options targeted at users with low vision. The brand audience is
   primarily Russian-speaking VI users, so labels are RU-first. */

/* ── Header toggle button ── */
.a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  cursor: pointer;
  margin-left: 8px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.a11y-toggle:hover,
.a11y-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.a11y-toggle svg { flex-shrink: 0; }

/* ── Panel (initially hidden via [hidden]) — sits below the fixed header ── */
.a11y-panel {
  position: fixed;
  /* Offsets are measured by a11y.js and published as custom properties. The
     previous build hard-coded `top: 64px` and `padding-top: 168px`, both sized
     for an older one-row panel; once the panel grew to six control groups it
     simply covered the page behind it. */
  top: var(--a11y-header-h, 64px);
  left: 0; right: 0;
  z-index: 99;
  background: var(--ink);
  color: #fff;
  padding: 20px 0 24px;
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 10px 30px rgba(38, 33, 77, 0.18);
}
body.a11y-open { padding-top: var(--a11y-offset, 0px); }
.a11y-panel[hidden] { display: none !important; }

.a11y-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a11y-group-actions {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.a11y-label {
  font-size: 0.7812rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.a11y-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.a11y-opt {
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
  min-height: 44px;   /* touch-target floor; this panel is used on phones */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a11y-opt:hover { background: rgba(255, 255, 255, 0.2); }
.a11y-opt[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.a11y-opt:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Swatch buttons — show the scheme they activate */
.a11y-swatch { min-width: 44px; min-height: 44px; padding: 6px 10px; font-weight: 800; }
.a11y-sw-default { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.a11y-sw-wb      { background: #fff; color: #000; border-color: #fff; }
.a11y-sw-yb      { background: #000; color: #ffd700; border-color: #000; }
.a11y-sw-by      { background: #ffd700; color: #000; border-color: #ffd700; }
.a11y-sw-bg      { background: #9DD1F1; color: #063462; border-color: #9DD1F1; }

.a11y-opt-reset, .a11y-opt-close {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ════════════════════════════════════════════════════════
   SIZE — scales the root, so every rem-based size follows.
   Steps are 100 / 125 / 150 / 200 %. GOST R 52872-2019 (and WCAG 1.4.4)
   require text to reach 200% without losing content or function, so the
   panel offers that as a real step rather than stopping at 150%.
═══════════════════════════════════════════════════════════ */
html[data-a11y-size="large"]  { font-size: 1.25rem; }
html[data-a11y-size="xlarge"] { font-size: 1.5rem; }
html[data-a11y-size="huge"]   { font-size: 2rem; }

html[data-a11y-size="large"]  body,
html[data-a11y-size="xlarge"] body,
html[data-a11y-size="huge"]   body { font-size: 1rem; line-height: 1.7; }

/* Display headings are set in vw/clamp for art direction. At large root sizes
   that fights the user's request, so they get re-pinned to rem and allowed to
   grow with the setting instead of blowing off the screen. */
html[data-a11y-size="large"]  .hero-title,
html[data-a11y-size="xlarge"] .hero-title,
html[data-a11y-size="huge"]   .hero-title,
html[data-a11y-size="large"]  .chero-title,
html[data-a11y-size="xlarge"] .chero-title,
html[data-a11y-size="huge"]   .chero-title { font-size: 2.4rem; line-height: 1.12; }

html[data-a11y-size="large"]  .section-title,
html[data-a11y-size="xlarge"] .section-title,
html[data-a11y-size="huge"]   .section-title { font-size: 1.9rem; line-height: 1.15; }

html[data-a11y-size="huge"]   .stop-title,
html[data-a11y-size="huge"]   .sc-name,
html[data-a11y-size="huge"]   .vk-card-title { font-size: 1.05rem; }

/* At 150-200% a long Russian compound no longer fits its card, so titles are
   allowed to break inside a word rather than spill past their own box. */
html[data-a11y-size="large"]  :is(.vk-card-title, .sc-name, .stop-title, .hero-path-name),
html[data-a11y-size="xlarge"] :is(.vk-card-title, .sc-name, .stop-title, .hero-path-name),
html[data-a11y-size="huge"]   :is(.vk-card-title, .sc-name, .stop-title, .hero-path-name) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Fixed-height boxes have to let go once the text inside them doubles. */
html[data-a11y-size="huge"] .sc-photo-wrap { aspect-ratio: 4 / 3; }
html[data-a11y-size="huge"] .stop-photo img,
html[data-a11y-size="huge"] .gallery-btn img { height: auto; }
html[data-a11y-size="huge"] .btn { min-height: 3rem; height: auto; padding: 0.7rem 1.2rem; }

/* ════════════════════════════════════════════════════════
   TEXT SPACING — WCAG 2.1 SC 1.4.12, adopted by GOST R 52872-2019.
   The standard's floor is: line-height >= 1.5x font size, letter-spacing
   >= 0.12x, word-spacing >= 0.16x, paragraph spacing >= 2x. The previous
   values here (0.04em and 0.08em letter-spacing) sat below that floor, so
   neither step actually satisfied the standard. "Средний" is now exactly
   the conformance minimum and "Большой" goes beyond it.
═══════════════════════════════════════════════════════════ */
/* These MUST be set per element, not once on <body>. letter-spacing and
   word-spacing in `em` resolve against the font-size of the element that
   declares them and then inherit as a fixed pixel length, so a single rule on
   <body> (16px) leaves 18.5px body copy at an effective 0.104em, under the
   0.12 floor. The universal selector makes every element compute its own. */
html[data-a11y-spacing="wide"]  *:not(svg):not(svg *) { letter-spacing: 0.12em; word-spacing: 0.16em; }
html[data-a11y-spacing="xwide"] *:not(svg):not(svg *) { letter-spacing: 0.16em; word-spacing: 0.20em; }

/* Display type is tracked tight by design; that negative tracking would cancel
   the user's setting, so it is released. */
/* Display type is tracked tight by design; that negative tracking would cancel
   the user's setting, so it is released back to normal rather than left
   fighting it. Written with :is() so it outranks the universal rule above. */
html[data-a11y-spacing="wide"]  :is(.hero-title, .chero-title, .section-title, .stop-title, .sc-name),
html[data-a11y-spacing="xwide"] :is(.hero-title, .chero-title, .section-title, .stop-title, .sc-name) {
  letter-spacing: normal;
}

/* Nowrap labels will overflow once tracking is added. */
html[data-a11y-spacing="wide"]  .btn,
html[data-a11y-spacing="xwide"] .btn,
html[data-a11y-spacing="wide"]  .hero-photo-tag,
html[data-a11y-spacing="xwide"] .hero-photo-tag { white-space: normal; }

html[data-a11y-leading="wide"]  body { line-height: 1.5; }
html[data-a11y-leading="xwide"] body { line-height: 1.9; }

html[data-a11y-leading="wide"]  p, html[data-a11y-leading="wide"]  li,
html[data-a11y-leading="wide"]  dd, html[data-a11y-leading="wide"]  .stop-body,
html[data-a11y-leading="wide"]  .sc-topic { line-height: 1.6; margin-bottom: 2em; }
html[data-a11y-leading="xwide"] p, html[data-a11y-leading="xwide"] li,
html[data-a11y-leading="xwide"] dd, html[data-a11y-leading="xwide"] .stop-body,
html[data-a11y-leading="xwide"] .sc-topic { line-height: 2; margin-bottom: 2.4em; }

/* ════════════════════════════════════════════════════════
   FONT — Atkinson Hyperlegible is already loaded for long-form reading.
   It was drawn by the Braille Institute specifically to pull apart the
   letterforms that collapse into each other at low acuity (I/l/1, O/0, b/d),
   so "Разборчивый" promotes it to everything, headings included.
═══════════════════════════════════════════════════════════ */
html[data-a11y-font="legible"] body,
html[data-a11y-font="legible"] h1, html[data-a11y-font="legible"] h2,
html[data-a11y-font="legible"] h3, html[data-a11y-font="legible"] h4,
html[data-a11y-font="legible"] .hero-title, html[data-a11y-font="legible"] .chero-title,
html[data-a11y-font="legible"] .section-title, html[data-a11y-font="legible"] .stop-title,
html[data-a11y-font="legible"] .sc-name, html[data-a11y-font="legible"] .btn,
html[data-a11y-font="legible"] .logo-name, html[data-a11y-font="legible"] input,
html[data-a11y-font="legible"] button {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif !important;
}

/* Some readers track lines better with serifs; Georgia ships nearly everywhere
   and has a tall x-height, which matters more here than the serifs themselves. */
html[data-a11y-font="serif"] body,
html[data-a11y-font="serif"] h1, html[data-a11y-font="serif"] h2,
html[data-a11y-font="serif"] h3, html[data-a11y-font="serif"] h4,
html[data-a11y-font="serif"] .hero-title, html[data-a11y-font="serif"] .chero-title,
html[data-a11y-font="serif"] .section-title, html[data-a11y-font="serif"] .stop-title,
html[data-a11y-font="serif"] .sc-name, html[data-a11y-font="serif"] .btn,
html[data-a11y-font="serif"] .logo-name, html[data-a11y-font="serif"] input,
html[data-a11y-font="serif"] button {
  font-family: Georgia, 'Times New Roman', serif !important;
}

/* ════════════════════════════════════════════════════════
   LINKS — WCAG 1.4.1: a link inside running text must not rely on colour
   alone. On by default in every high-contrast scheme, where hue is gone.
═══════════════════════════════════════════════════════════ */
html[data-a11y-links="underline"] a,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) main a {
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}
html[data-a11y-links="underline"] .btn,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) main .btn {
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════
   COLOR SCHEMES — high-contrast overrides
   All schemes flatten gradients/shadows + remove decorative
   tint bands so text + background contrast is predictable.
═══════════════════════════════════════════════════════════ */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .mission,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .for-whom,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .gallery-section,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .team-section,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-course,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .partners,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero {
  background: var(--bg) !important;
  border-radius: 0 !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) header.scrolled,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) header {
  background: var(--bg) !important;
  border-bottom: 2px solid var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-blob,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .mission::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .mission::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .for-whom::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .for-whom::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .gallery-section::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .gallery-section::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .team-section::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .team-section::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-media::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-media::after {
  display: none !important;
  background: none !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .surface,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .partner-card,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .audience-item,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .block-card,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .tg-post,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .tg-cta,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-card,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .team-card,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .stop-card,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-path-list {
  background: var(--surface) !important;
  border: 2px solid var(--text) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) h1,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) h2,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) h3,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) h4,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .eyebrow,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-title .accent,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-title span,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) p,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .muted,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) a {
  color: var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) a:hover,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) a:focus {
  text-decoration: underline;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-title .accent::after,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .section-title::after {
  background: var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 2px solid var(--text) !important;
}
/* Inverted bands: sections that paint themselves ink and rely on light text.
   They must flip as a unit, otherwise the scheme recolours the text to --text
   and leaves it on an --text background. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) footer,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .cta-strip,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .tg-cta,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .sc-step-num,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) footer *,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .cta-strip *:not(.btn):not(.btn *),
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .tg-cta *:not(.btn):not(.btn *),
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter.active * { color: var(--bg) !important; }
/* Buttons sitting on those inverted bands invert back so they stay visible. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .cta-strip .btn,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .tg-cta .btn {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 2px solid var(--bg) !important;
}

/* Pause decorative animations in any non-default scheme */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) *,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) *::before,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) *::after {
  animation: none !important;
}

/* Scheme-specific colors via CSS vars */
/* Each scheme collapses the whole ink/accent/line ramp onto its own two
   colours. Overriding only --text/--bg leaves every component that paints with
   --ink, --muted or --accent on the light-theme value — which is how the
   yellow-on-black scheme ended up drawing near-black labels on black. */
html[data-a11y-scheme="wb"] { --bg: #ffffff; --text: #000000; --surface: #ffffff; }
html[data-a11y-scheme="yb"] { --bg: #000000; --text: #ffd700; --surface: #000000; }
html[data-a11y-scheme="by"] { --bg: #ffd700; --text: #000000; --surface: #ffd700; }
html[data-a11y-scheme="bg"] { --bg: #9DD1F1; --text: #063462; --surface: #C3E4F7; }

html[data-a11y-scheme]:not([data-a11y-scheme="default"]) {
  --ink:           var(--text);
  --muted:         var(--text);
  --muted-2:       var(--text);
  --accent:        var(--text);
  --accent-bright: var(--text);
  --brand:         var(--text);
  --ink-line:      var(--text);
  --line:          var(--text);
  --line-2:        var(--text);
  --surface-2:     var(--surface);
  --bg-2:          var(--bg);
  --accent-soft:   var(--bg);
  --accent-soft-2: var(--bg);
  --brand-soft:    var(--bg);
}

/* ════════════════════════════════════════════════════════
   IMAGES OFF — hide photos, keep alt text visible
═══════════════════════════════════════════════════════════ */
/* Grayscale sits between "show" and "hide": it keeps the information in the
   photograph while removing the colour energy that some readers with visual
   stress or photophobia find painful. */
html[data-a11y-images="gray"] img,
html[data-a11y-images="gray"] picture,
html[data-a11y-images="gray"] .vk-thumb,
html[data-a11y-images="gray"] .gallery-btn {
  filter: grayscale(1) contrast(1.05);
}

html[data-a11y-images="off"] img:not(.logo-img) {
  display: none !important;
}
html[data-a11y-images="off"] .hero-photo,
html[data-a11y-images="off"] .hero-photo-mini,
html[data-a11y-images="off"] .gallery-item,
html[data-a11y-images="off"] .tl-photo,
html[data-a11y-images="off"] .team-photo {
  background: var(--surface, #f0f0f5) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
html[data-a11y-images="off"] .hero-photo::after {
  content: "[Изображение скрыто]";
  font-size: 0.875rem;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — panel collapses on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* The trigger keeps its label here: it is the one control this audience is
     looking for, and an unlabelled icon is exactly the wrong thing to hide
     behind. It only drops to the icon on genuinely narrow phones. */
  .a11y-toggle { font-size: 0.8125rem; padding: 8px 12px; }
}
@media (max-width: 420px) {
  .a11y-toggle span { display: none; }
}

/* ════════════════════════════════════════════════════════
   BUTTONS IN LOW-VISION SCHEMES
   The default outline button paints its label with --ink. Each scheme
   redefines --ink, and in the yellow-on-black / black-on-yellow pairs that
   lands ink-on-ink: the control disappears. Buttons here are re-derived from
   --text / --bg so every scheme gets a visible, outlined control.
═══════════════════════════════════════════════════════════ */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn-tg,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn-ghost,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 2px solid var(--text) !important;
  box-shadow: none !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn-primary,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn-vk,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 2px solid var(--text) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn:hover,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter:hover {
  background: var(--text) !important;
  color: var(--bg) !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn svg,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .btn span {
  color: inherit !important;
  fill: currentColor !important;
}
/* The filter count badge rides on the chip, so it has to flip with it. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-filter-n {
  background: transparent !important;
  color: inherit !important;
  border: 1.5px solid currentColor !important;
}

/* The skip link paints white on --ink; once --ink collapses to the scheme's
   text colour that is white-on-yellow. Derive it from the pair instead. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .skip-link {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 2px solid var(--bg) !important;
}

/* Module accent labels are coloured from an inline --block-accent set by vk.js.
   In a two-colour scheme those brand hues are exactly what the user turned off. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-card-block,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .vk-modal-block,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .hero-title .accent,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .chero-title .accent,
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) [style*="--block-accent"] {
  color: var(--text) !important;
}

/* ════════════════════════════════════════════════════════
   PANEL LAYOUT — six control groups now, so it wraps as a grid rather than
   a single flex row. The panel must stay usable at the very settings it
   offers, so its own type is set in rem and it scrolls if it outgrows the
   viewport at 200%.
═══════════════════════════════════════════════════════════ */
.a11y-head { margin-bottom: 18px; }
.a11y-panel-title {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.a11y-panel-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}

.a11y-panel {
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Explicit column counts, not auto-fit. With six groups, auto-fit produced
   five columns and left a single orphan on the second row, and the option
   buttons inside each narrow column wrapped 2+1 at random. Fixed counts divide
   six evenly at every breakpoint. */
.a11y-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: start;
}
.a11y-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Text-labelled options stack full width. Russian labels like «Разборчивый»
   and «Оттенки серого» cannot sit three-across in a third of the panel, and a
   stack also gives this audience a much bigger, more predictable hit area. */
.a11y-group .a11y-options { display: flex; flex-wrap: wrap; gap: 8px; }
.a11y-group .a11y-options > .a11y-opt { flex: 1 1 100%; }

/* The two symbol groups stay as compact rows: they are glyphs and swatches,
   not words, so they read better side by side. */
.a11y-group .a11y-options:has(.a11y-opt-size) > .a11y-opt,
.a11y-group .a11y-options:has(.a11y-swatch) > .a11y-opt {
  flex: 0 0 auto;
  min-width: 3rem;
}

@media (max-width: 900px) {
  .a11y-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.a11y-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.a11y-opt-reset, .a11y-opt-close { margin-left: 0; }
.a11y-opt-close { margin-left: auto; }

/* The size buttons show one glyph at ascending sizes: the control previews
   the thing it does, which is faster to parse than "A+ / A++" labels. */
.a11y-opt-size { font-weight: 700; line-height: 1; }
.a11y-opt-size[data-value="normal"] { font-size: 0.85rem; }
.a11y-opt-size[data-value="large"]  { font-size: 1.05rem; }
.a11y-opt-size[data-value="xlarge"] { font-size: 1.3rem; }
.a11y-opt-size[data-value="huge"]   { font-size: 1.6rem; }

/* Each font button is rendered in the font it switches to. */
.a11y-font-legible { font-family: 'Atkinson Hyperlegible', sans-serif; }
.a11y-font-serif   { font-family: Georgia, 'Times New Roman', serif; }

/* Screen-reader-only live region: announces what changed, because a visual
   confirmation is exactly what this audience may not get. */
.a11y-sr-status {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .a11y-row { grid-template-columns: 1fr; }
  .a11y-actions { flex-direction: column; align-items: stretch; }
  .a11y-opt-close { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════
   REFLOW AT ENLARGED SIZES — WCAG 2.1 SC 1.4.10.
   Multi-column grids are sized for 16px text. Once the reader asks for 150%
   or 200% the same columns are far too narrow and the text starts spilling
   sideways, which is exactly the two-dimensional scrolling the criterion
   forbids. Grids therefore drop to fewer columns as the type grows.
═══════════════════════════════════════════════════════════ */
html[data-a11y-size="xlarge"] .speakers-list,
html[data-a11y-size="huge"]   .speakers-list,
html[data-a11y-size="xlarge"] .audience-list,
html[data-a11y-size="huge"]   .audience-list,
html[data-a11y-size="xlarge"] .team-row,
html[data-a11y-size="huge"]   .team-row,
html[data-a11y-size="xlarge"] .cmodules-grid,
html[data-a11y-size="huge"]   .cmodules-grid,
html[data-a11y-size="xlarge"] .chow-grid,
html[data-a11y-size="huge"]   .chow-grid,
html[data-a11y-size="xlarge"] .partners-grid,
html[data-a11y-size="huge"]   .partners-grid {
  grid-template-columns: 1fr !important;
}

html[data-a11y-size="large"] .speakers-list,
html[data-a11y-size="large"] .team-row,
html[data-a11y-size="large"] .cmodules-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* The hero splits into one column so neither half is squeezed. */
html[data-a11y-size="xlarge"] .hero .container,
html[data-a11y-size="huge"]   .hero .container,
html[data-a11y-size="xlarge"] .chero-layout,
html[data-a11y-size="huge"]   .chero-layout {
  grid-template-columns: 1fr !important;
}

/* One card at a time in the photo carousel, and the route stops go
   full-width rather than alternating around a curve. */
html[data-a11y-size="xlarge"] .gal-slide,
html[data-a11y-size="huge"]   .gal-slide { flex-basis: 92% !important; }

html[data-a11y-size="huge"] .stop { grid-template-columns: 3rem 1fr !important; }
html[data-a11y-size="huge"] .stop-card,
html[data-a11y-size="huge"] .stop:nth-child(even) .stop-card {
  grid-column: 2 !important;
  padding-left: 0;
  padding-right: 0;
}
html[data-a11y-size="huge"] .stop-pin { grid-column: 1 !important; justify-self: start !important; }
html[data-a11y-size="huge"] .route-line { display: none; }

/* The course-path strip stacks instead of running four across. */
html[data-a11y-size="xlarge"] .hero-path-list,
html[data-a11y-size="huge"]   .hero-path-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100%;
}
html[data-a11y-size="xlarge"] .hero-path-list li + li,
html[data-a11y-size="huge"]   .hero-path-list li + li {
  border-left: none;
  border-top: 1.5px solid var(--line);
}

/* Captions and chips are set nowrap for looks; at this size they must wrap. */
html[data-a11y-size="large"]  :is(.hero-photo-tag, .chip, .gallery-cap, .btn, .vk-filter),
html[data-a11y-size="xlarge"] :is(.hero-photo-tag, .chip, .gallery-cap, .btn, .vk-filter),
html[data-a11y-size="huge"]   :is(.hero-photo-tag, .chip, .gallery-cap, .btn, .vk-filter) {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* An absolutely positioned caption cannot grow with its text; at 200% it is
   moved back into normal flow under the photograph. */
html[data-a11y-size="huge"] .hero-photo-tag {
  position: static;
  max-width: none;
  margin-top: 0.5rem;
  border-radius: var(--r-sm);
}

/* The header nav cannot fit five links plus two controls at 150-200%.
   It switches to the same burger pattern the narrow breakpoint already uses.
   The burger itself stays visible, because the control that opens this panel
   lives inside that menu: hiding it would strand a reader at 200% with no way
   back to the settings. */
html[data-a11y-size="xlarge"] .menu-toggle,
html[data-a11y-size="huge"]   .menu-toggle {
  display: flex !important;
  align-items: center;
}
html[data-a11y-size="xlarge"] header,
html[data-a11y-size="huge"]   header { z-index: 300; }
html[data-a11y-size="xlarge"] header .logo,
html[data-a11y-size="huge"]   header .logo,
html[data-a11y-size="xlarge"] header .menu-toggle,
html[data-a11y-size="huge"]   header .menu-toggle { position: relative; z-index: 210; }

html[data-a11y-size="xlarge"] header nav,
html[data-a11y-size="huge"]   header nav {
  display: none;
  position: fixed;
  inset: 0;
  padding: 6rem 1.4rem calc(2rem + env(safe-area-inset-bottom));
  background: var(--bg);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-a11y-size="xlarge"] header nav.open,
html[data-a11y-size="huge"]   header nav.open { display: flex; }
/* Same panel design as the narrow-viewport menu in main.css: page links in
   the display face, outbound links quieter underneath. Kept in step with that
   block by hand, because one rule cannot match both a media query and this
   attribute selector. */
html[data-a11y-size="xlarge"] header nav a,
html[data-a11y-size="huge"]   header nav a {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  padding: 0.7rem 0;
  border-bottom: none;
}
html[data-a11y-size="xlarge"] header nav a[target="_blank"],
html[data-a11y-size="huge"]   header nav a[target="_blank"] {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0;
}
html[data-a11y-size="xlarge"] header nav a:not([target]) + a[target="_blank"],
html[data-a11y-size="huge"]   header nav a:not([target]) + a[target="_blank"] {
  margin-left: 0;
  margin-top: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--line);
}
html[data-a11y-size="xlarge"] header nav .a11y-toggle,
html[data-a11y-size="huge"]   header nav .a11y-toggle {
  width: 100%;
  justify-content: center;
  margin: 1.4rem 0 0;
}
/* Left edge shared with every link above it, same as the narrow-viewport
   panel. Centred here and left-aligned there read as two different menus. */
html[data-a11y-size="xlarge"] .lang-switcher,
html[data-a11y-size="huge"]   .lang-switcher { margin: 0.7rem 0 0; align-self: flex-start; }

/* Wide flex rows that were laid out side by side get to stack. */
html[data-a11y-size="xlarge"] .cta-inner,
html[data-a11y-size="huge"]   .cta-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
html[data-a11y-size="huge"] .cta-actions,
html[data-a11y-size="huge"] .hero-actions { width: 100%; }
html[data-a11y-size="huge"] .hero-photo { overflow: hidden; }

/* `flex-shrink: 0` keeps the CTA button row from ever narrowing, which is
   right at 16px and wrong once the labels double in size. */
html[data-a11y-size="xlarge"] .cta-actions,
html[data-a11y-size="huge"]   .cta-actions {
  flex-shrink: 1;
  width: 100%;
}
html[data-a11y-size="huge"] .cta-actions .btn { flex: 1 1 100%; }

/* The hero photo column carries decorative padding and an offset shadow that
   push it past its own box at this scale. */
html[data-a11y-size="xlarge"] .hero-media,
html[data-a11y-size="huge"]   .hero-media { padding: 1rem 0; }
html[data-a11y-size="huge"] .hero-photo { box-shadow: none; }

/* The active language chip paints white-on-ink, and in the schemes --ink has
   collapsed onto the scheme's own text colour, so it became yellow-on-yellow. */
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .lang-btn.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .lang-btn:not(.active) {
  color: var(--text) !important;
  background: transparent !important;
}
html[data-a11y-scheme]:not([data-a11y-scheme="default"]) .lang-switcher {
  border-color: var(--text) !important;
}