:root{
    /* Палитра */
    --color-bg:#fff; --color-fg:#0b0b0b; --color-muted:#666;
    --color-primary:#9943eb; --color-danger:#bb003b; --color-border:#5d2a83;
    --color-link: #5b228f; --color-item: #fff;
    /* Типографика и размеры */
    --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space5:40px;
    /* Скругления и тени */
    --radius:12px;
    --shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
}

/* Тёмная тема: переопределяем только значения токенов */
body.theme-dark{
    --color-bg:#2c2c2c; --color-fg:#f5f5f5; --color-muted:#aaa;
    --color-primary:#8c41c5; --color-link: #8c41c5; --color-item: #3c3c3c;
    --color-border: #ac61e5;
}




* { box-sizing: border-box; }
html, body {margin: 0; padding: 0; }
body { font-family: var(--font-body);
    background: var(--color-bg);
    color:var(--color-fg);
    line-height: 1.5; 
    padding-inline: var(--space-4);
}

html{ scroll-behavior:smooth; } /* Плавная прокрутка к #якорю */
:target{ outline:2px dashed var(--color-primary); outline-offset:4px; } /*
Подсветка цели */

img,video{ max-width:100%; height:auto; display:block; }
.media {
    position: relative;
    width: 100%;
    max-width: 720px; /* Максимальный размер как на компьютере */
    margin: 0 auto; /* Центрирование */
}

.media iframe {
    width: 100%; /* Занимает всю ширину контейнера */
    height: auto; /* Автоматическая высота */
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    border-radius: var(--radius); /* Скругления если нужно */
}

dialog{
    color: var(--color-fg);
    background-color: var(--color-bg);
    border-radius: var(--space-3);
    border: 0.2rem solid var(--color-border);
}


label { 
    display: block;
    margin: 0.5rem 0 0.25rem;
    color: var(--color-fg);
}
input, select, textarea, button{
    color: var(--color-fg);
    width: 100%;
    max-width: 480px;
    padding: .5rem .75rem;
    border: 1px solid var(--color-muted);
    border-radius: var(--space-2);
    background: var(--color-bg)
}

button, [type="submit"] {
    margin: .2rem;
    background: var(--color-primary);
    color: #fff;
    border: 0.02rem solid var(--color-border);
    cursor: pointer;
}
a{
    color: var(--color-link);
}

button:hover { filter: brightness(0.95); }
:disabled, [aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

:where(input, select, textarea, button):focus-visible {
 outline: 2px solid var(--color-primary); outline-offset: 2px;
}
[aria-invalid="true"] { border-color: var(--color-danger); }

.hero{
    background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15)), 
    url("img/hero-1920.jpg") center/cover no-repeat; 
    padding: clamp(2rem, 6vw, 6rem) 1rem;
    border-radius:var(--radius);
}
.top-bar{
    display: flex;
    align-items: center;
    gap: 3rem;              
    padding: 0;
    margin: 0;
}
.site-header_logo img{
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    width: min(60px, 7vw);
    height: min(60px, 7vw);
    object-fit: contain;
}
.theme-toggle{
    width: min(60px, 7vw);
    height: min(60px, 7vw);
    font-size: 0.9em;
}
.small-text{
    color:var(--color-muted);
    font-weight: bold;
}
.our-master_portrait img{
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary); 
    box-shadow: var(--shadow);
    width: min(200px, 30vw);
    height: min(200px, 30vw);
}
.funfact-card {
    flex: 1;
    background: var(--color-item); /* Белый фон карточки */
    padding: 25px; /* Внутренние отступы */
    margin: 20px 0; /* Вертикальные отступы */
    border-radius: var(--radius); /* Скругленные углы */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Легкая тень */
    border-left: 4px solid var(--color-primary); /* Синяя полоса слева */
    transition: transform 0.3s ease; /* Плавная анимация трансформации */
}
.funfact-card:hover {
    transform: translateY(-5px); /* Сдвиг вправо при наведении */
}
.funfact-title {
    font-size: 20px; /* Размер шрифта заголовка опыта */
    color: var(--color-border);
    margin: 0 0 10px 0; /* Отступ снизу */
    font-weight: 600; /* Жирный шрифт */
}
.experience-desc {
    color: var(--color-muted); /* Серый цвет текста */
    line-height: 1.6; /* Межстрочный интервал */
    margin: 0; /* Убираем отступы */
}
.funfacts_list{
    display: flex;
    gap: 2rem;            
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

nav ul {
    display: flex;
    gap: 2rem;            
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: bold;
}