:root { --muted: var(--ink-2); --paper: var(--bg); --white: var(--bg-card); --blue: var(--accent); --container: min(1376px, calc(100vw - 64px)); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 20; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 16px; }
.teachers-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(247,248,250,.94); backdrop-filter: blur(12px); }
.teachers-brand { font-size: 18px; font-weight: 750; letter-spacing: -.05em; text-decoration: none; }
.teachers-header nav { display: flex; gap: 28px; color: var(--muted); font-size: 12px; }
.teachers-header nav a { text-decoration: none; }
.teachers-header nav span { color: var(--ink); }
.teachers-cta { justify-self: end; padding: 11px 15px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 600; text-decoration: none; }
.teachers-cta span { color: #7da2ff; }
.teachers-hero { width: var(--container); margin: 0 auto; padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.teachers-hero > p { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 600; }
.teachers-hero > p span { width: 42px; height: 2px; background: var(--blue); }
.teachers-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(42px, 5vw, 64px); font-weight: 600; letter-spacing: -.06em; line-height: .96; }
.teachers-hero h1 em { color: var(--blue); font-style: normal; }
.teachers-hero > div { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.teachers-hero > div p { max-width: 760px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; }
.teachers-hero strong { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.teacher-catalog { width: var(--container); margin: 0 auto; padding: clamp(18px, 3vw, 34px) 0 clamp(56px, 8vw, 96px); }
.teacher-filter-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; position: sticky; top: 72px; z-index: 40; gap: 24px; align-items: center; margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(18px); }
.filter-options { display: flex; min-width: 0; gap: 0; overflow-x: auto; border-left: 1px solid var(--line); scrollbar-width: none; }
.filter-options::-webkit-scrollbar { display: none; }
.filter-options button { flex: 0 0 auto; display: inline-flex; min-height: 44px; padding: 0 14px; align-items: center; gap: 7px; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.filter-options button span { margin-left: 5px; color: var(--ink-3); font-weight: 500; }
.filter-options button:hover { color: var(--blue); }
.filter-options button.is-active { background: var(--white); color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.filter-status { margin: 0; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.filter-status strong { color: var(--ink); font-weight: 700; }
.teachers-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.teachers-noscript { padding: 20px; background: white; }
.teachers-contact { width: var(--container); margin: 0 auto 80px; padding: clamp(42px, 7vw, 92px); background: var(--ink); color: var(--white); }
.teachers-contact > span { color: #8facff; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.teachers-contact h2 { max-width: 1000px; margin: 24px 0; font-size: clamp(38px, 6vw, 84px); font-weight: 520; letter-spacing: -.06em; line-height: .95; }
.teachers-contact p { max-width: 660px; color: #b7c0d0; font-size: 16px; line-height: 1.55; }
.teachers-contact a { display: inline-flex; gap: 70px; margin-top: 28px; padding: 15px 18px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }
.teachers-contact a span { color: var(--blue); }
.portrait--dmitry-tverdokhlebov { --portrait-position: center 12%; }
.portrait--pavel-rozov { --portrait-position: center 12%; }
.portrait--sergey-kobelev { --portrait-position: center 18%; }
.portrait--anna-nikitchenko { --portrait-position: center 10%; }
.portrait--mikhail-puzyrev { --portrait-position: center 12%; background: #d9d9d9; }
.portrait--sergey-lipchansky { --portrait-position: center 22%; }
.portrait--olga-bolina { --portrait-position: center 12%; }
.portrait--nikita-glukhov { --portrait-position: center 12%; }
.portrait--maxim { --portrait-position: center 14%; }
.portrait--nikita-bruskov { --portrait-position: center 15%; }
.portrait--konstantin-chuikov { --portrait-position: center 13%; }
.portrait--sergey-ris { --portrait-position: center 12%; }
.portrait--stanislav-kireev { --portrait-position: center 10%; }
.portrait--viktor-holostyakov { --portrait-position: 46% 14%; }
.portrait--nikolay-senin { --portrait-position: center 10%; }
.portrait--ilya-golubev { --portrait-position: center 16%; }
.portrait--pavel-mishchenko { --portrait-position: center 18%; background: #efe9dd; }
.portrait--roman-buzko { --portrait-position: center 12%; }
.portrait--bayram-annakov { --portrait-position: center 12%; }
.portrait--denis-malikhov { --portrait-position: center; background: #070b1c; }
@media (max-width: 1000px) { .filter-status { display: none; } .teachers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .teachers-header { grid-template-columns: 1fr auto; } .teachers-header nav { display: none; } }
@media (max-width: 740px) { .teachers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { :root { --container: calc(100vw - 36px); } .teachers-hero { padding-top: 56px; } .teachers-hero h1 { font-size: 44px; } .teachers-hero > div { grid-template-columns: 1fr; gap: 24px; align-items: start; } .teacher-filter-controls { position: static; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; } .filter-options { margin: 0 -18px; padding: 0 18px; border-left: 0; } .filter-options button:first-child { border-left: 1px solid var(--line); } .teachers-grid { grid-template-columns: 1fr; } .teachers-contact { margin-bottom: 30px; } .teachers-contact h2 { font-size: 34px; overflow-wrap: normal; } }