/* Hand-maintained navigation, native interactions and accessibility.
   pages/*.css retains the original per-artboard geometry and text styles. */
html { scroll-behavior: smooth; scroll-padding-top: 180px; }
body { color: var(--text); background: var(--page-background); }
/* SVG fills on education links describe one stretched gradient, not a tile.
   Explicit sizing avoids a repeated edge when WebKit rounds fractional widths.
   Paint-only properties keep the existing layout and original SVG unchanged. */
body[data-page="education"] #container a {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
button, summary, a { -webkit-tap-highlight-color: transparent; }
/* Original SVG viewports allow stretching; fit the square artwork within
   its existing responsive slot without changing button geometry. */
#container img.external-link-icon { object-fit: contain; object-position: center; }
button, input, summary { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 12px 20px; background: var(--page-background); color: white;
}
summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px;
  display: grid; padding: 14px; gap: 4px; border-radius: 20px;
  background: var(--page-background); border: 1px solid var(--accent);
  box-shadow: 0 20px 70px rgb(0 0 0 / 30%);
}
.menu-panel a, .menu-panel .menu-current { display: block; padding: 16px; border-radius: 10px; }
.menu-panel .menu-current { background: var(--primary); }
.menu-panel .menu-program { justify-self: start; margin: 8px 0 12px; padding: 10px 20px; border-radius: 64px; background: var(--panel-tint); }
.menu-panel a:hover { background: var(--panel-tint); }
#container .source-header { height: 100%; }
#container .source-menu { margin-left: 0; pointer-events: auto; }
#container .source-menu > .source-menu-trigger { display: block; width: 100%; list-style: none; }
#container .source-menu .menu-panel { position: fixed; top: calc(var(--header-size) + var(--page-gutter) + 10px); right: var(--page-gutter); font: 700 16px/1.4 "Vela Sans GX:Bold", sans-serif; box-sizing: border-box; width: min(300px, calc(100vw - 40px)); min-width: 0; pointer-events: auto; }
#container .source-menu > summary::marker { content: ''; }
.career-menu-icon { display: none; }
@media (max-width: 799px) {
  body[data-page="career"] #container .source-menu .menu-panel { width: min(300px, calc(100vw - 80px)); }
  body[data-page="career"] #container .source-menu { width: 32px; max-width: 32px; }
  body[data-page="career"] #container .source-menu-trigger { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  body[data-page="career"] #container .source-menu-trigger > :not(.career-menu-icon) { display: none; }
  body[data-page="career"] #container .career-menu-icon { display: block; width: 32px; height: 32px; }
  body[data-page="career"] #container .header-brand { width: 48px; min-width: 48px; flex-shrink: 0; }
}
#container .faq-item { display: block; width: 100%; overflow: visible; }
.faq-question { display: block; list-style: none; }
.faq-question > * { width: 100%; }
.faq-item[open] .faq-question img { transform: rotate(45deg); }
.faq-answer {
  margin-top: 4px; padding: 15px 20px 20px; border-radius: 0 0 12px 12px;
  background: var(--panel); font-family: "Vela Sans GX:Regular", sans-serif;
  font-size: var(--body-size); line-height: 1.4; overflow-wrap: anywhere;
}
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
.video-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; }
.curriculum {
  width: 100%; min-width: 0; font-family: "Vela Sans GX:Regular", sans-serif;
  font-size: var(--body-size); line-height: 1.4;
}
/* Original labels and SVGs in explicit slots, without fixed Figma wrappers. */
.year-controls { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; }
.year-controls button { display: flex; flex: 1 1 0; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: calc(var(--body-size) * 1.4 + 40px); padding: 20px; border: 0; border-radius: 14px; background: var(--panel-tint); font: 24px/1.4 "Vela Sans GX:Bold", sans-serif; }
.year-controls p { min-width: 0; margin: 0; font-size: inherit; line-height: 1.3; }
.year-controls .year-arrow { flex: 0 0 32px; width: 32px; height: 32px; }
.year-controls button:hover, .year-controls button[aria-expanded="true"] { background: var(--primary); }
.year-controls button[aria-expanded="true"] .year-arrow { transform: rotate(180deg); }
.theme-ru .year-controls { padding-block: 20px; }
.theme-ru .year-controls button { height: 68px; }
@media (max-width: 799px) {
  .year-controls { flex-wrap: wrap; gap: 5px; }
  .year-controls button { flex-basis: calc(50% - 5px); height: 38px; padding: 6px 16px; border-radius: 8px; font-size: 16px; }
  .year-controls .year-arrow { flex-basis: 24px; width: 24px; height: 24px; }
  .theme-ru .year-controls { gap: 10px; padding-block: 5px; }
  .theme-ru .year-controls button { height: 44px; }
}
#container .curriculum-layout { width: 100%; box-sizing: border-box; height: auto; max-height: none; min-height: 0; flex-shrink: 0; }
.year-panel { width: 100%; }
.year-panel > summary { padding: 20px; background: var(--panel-tint); margin-top: 10px; border-radius: 14px; }
.curriculum.is-enhanced .year-panel > summary { display: none; }
.year-content { display: grid; gap: 30px; padding-top: 30px; }
.year-close { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 20px; padding: 20px 30px; background: var(--panel-tint); color: var(--accent); border-radius: 14px; }
.curriculum-intro { max-width: 920px; font-size: var(--body-size); line-height: 1.4; }
/* Timetables follow Figma auto-layout: transparent groups, explicit fills,
   module spans and dividers; credits are inline with the course title. */
.curriculum .plan-node { box-sizing: border-box; min-width: 0; margin-top: 0; margin-bottom: 0; }
.curriculum .course-group { display: flex; padding: 0; background: transparent; border-radius: 0; }
.curriculum .course-stack { flex-direction: column; align-items: stretch; }
.curriculum .course-row { flex-direction: row; align-items: stretch; }
.curriculum .course-text, .curriculum .course-credit { margin: 0; overflow-wrap: anywhere; }
.curriculum .course-credit { flex-shrink: 0; white-space: nowrap; }
.curriculum .course-placeholder { min-width: 0; }
/* Preserve the intended title/card overlap without invalid negative CSS gaps. */
.curriculum .course-overlap > .plan-node:first-child { position: relative; z-index: 1; }
.curriculum .course-overlap > .plan-node + .plan-node { margin-top: calc(-1 * var(--plan-overlap)); }
.curriculum-timetable { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.curriculum-timetable > .plan-node { min-width: 740px; }
.curriculum .course-modules { text-transform: uppercase; }
.alumni-source { position: relative; width: 100%; min-width: 0; overflow-x: clip; }
.alumni-source [data-alumni-card] { touch-action: pan-y pinch-zoom; }
#container .carousel-ghost { position: absolute; margin: 0; pointer-events: none; z-index: 1; }
#container .alumni-country { width: max-content; flex-shrink: 0; white-space: nowrap; word-break: normal; }
#container .alumni-source button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 479px) {
  #container .source-header .header-row { gap: 12px; min-width: 0; }
  #container .source-header .header-brand { width: 48px; min-width: 48px; flex-shrink: 0; }
  #container .source-header .header-languages { min-width: 0; gap: 2px; }
  #container .source-header .header-languages > * { width: 42px; min-width: 0; flex-shrink: 1; padding-inline: 5px; }
  #container .source-header .header-languages p { font-size: 16px; }
  #container .source-header .source-menu { max-width: 32px; flex-shrink: 0; }
}
@media (min-width: 1280px) {
  .faq-answer { padding: 20px 30px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Preserve the narrower question rows of the Russian tablet FAQ. */
@media (min-width: 800px) and (max-width: 1279px) {
  body[data-page="home"] #container .faq-item { width: calc(100% - 10px); margin-inline: 0; }
}

/* Keep animated decorative images behind the whole hero. A transformed image
   otherwise paints above later cards in WebKit compositing layers. The
   original wrapper opacity remains responsible for the design transparency. */
#container .hero { isolation: isolate; z-index: 0; }
#container .hero-decoration { z-index: -1; pointer-events: none; }
/* Floating artwork must not be cropped at its original static image slot. */
#container .hero-decoration > div { overflow: visible; }

/* Published component hover states and expanded corner geometry. */
#container .faq-question > div { border-radius: 20px; }
#container .faq-item[open] .faq-question > div { border-radius: 20px 20px 5px 5px; }
#container .faq-answer { border-radius: 5px 5px 20px 20px; }
#container .faq-question:hover > div, #container .faq-question:focus-visible > div { background-color: var(--panel-tint); }
#container .design-hover-link:hover, #container .design-hover-link:focus-visible,
#container .header-languages a:hover, #container .header-languages a:focus-visible { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.curriculum .course-choice-symbol { position: relative; display: block; flex: 0 0 48px; width: 48px; height: 48px; border: 2px solid var(--primary); border-radius: 10px; background: var(--panel); }
.course-choice-symbol::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
/* International year cards retain the source colors and large clipped arrows. */
body:not(.theme-ru) .year-controls button { position: relative; overflow: hidden; height: 74px; padding: 20px 30px; border-radius: 10px; font-weight: 700; font-variation-settings: "wght" 700; }
body:not(.theme-ru) .year-controls button:nth-child(1) { --year-color: 32 223 64; }
body:not(.theme-ru) .year-controls button:nth-child(2) { --year-color: 223 223 32; }
body:not(.theme-ru) .year-controls button:nth-child(3) { --year-color: 255 255 255; }
body:not(.theme-ru) .year-controls button:nth-child(4) { --year-color: 32 207 223; }
body:not(.theme-ru) .year-controls .year-arrow { position: absolute; right: 15px; bottom: -1px; width: 74px; height: 74px; opacity: .25; }
body:not(.theme-ru) .year-controls button { color: rgb(var(--year-color)); background-color: rgb(var(--year-color) / 30%); }
body:not(.theme-ru) .year-controls button:hover, body:not(.theme-ru) .year-controls button[aria-expanded="true"] { background-color: rgb(var(--year-color) / 50%); }
@media (max-width: 799px) {
  body:not(.theme-ru) .year-controls button { height: 38px; padding: 6px 20px; }
  body:not(.theme-ru) .year-controls .year-arrow { width: 38px; height: 38px; right: 8px; }
}

/* Match the source year selector: the open year fills the available space,
   while other years shrink to their labels. Wrapping is retained on phones. */
.year-controls[data-active-year]:not([data-active-year=""]) button { flex: 0 0 auto; }
.year-controls[data-active-year]:not([data-active-year=""]) button[aria-expanded="true"] { flex: 1 0 150px; }
.year-controls[data-active-year]:not([data-active-year=""]) button[aria-expanded="false"] .year-arrow { display: none; }
body:not(.theme-ru) .year-controls { gap: 5px; }
#container .header-program { cursor: default; }
body:not(.theme-ru) .year-controls button[aria-expanded="true"] .year-arrow { width: 32px; height: 32px; right: 50px; top: 0; bottom: auto; opacity: .5; }
@media (max-width: 799px) {
  body:not(.theme-ru) .year-controls button[aria-expanded="true"] .year-arrow { right: 8px; }
}